🚨(react) fix lint issues

Fix the lint for the recent commits.
2025-09-23 15:30:39 +02:00
parent 587e782e61
commit 87dbf922df
35 changed files with 125 additions and 106 deletions
--- a/packages/react/src/components/Forms/Checkbox/tokens.ts
+++ b/packages/react/src/components/Forms/Checkbox/tokens.ts
@@ -12,9 +12,12 @@ export const tokens = (defaults: DefaultTokens) => ({
  "accent-color": defaults.contextuals.content.semantic.contextual.primary,

  size: "1.5rem",
-  "background-color--checked": defaults.contextuals.content.semantic.brand.tertiary,
+  "background-color--checked":
+    defaults.contextuals.content.semantic.brand.tertiary,
  "background-color--indeterminate":
    defaults.contextuals.content.semantic.brand.tertiary,
-  "background-color--disabled": defaults.contextuals.content.semantic.disabled.primary,
-  "border-color--disabled": defaults.contextuals.content.semantic.disabled.primary,
+  "background-color--disabled":
+    defaults.contextuals.content.semantic.disabled.primary,
+  "border-color--disabled":
+    defaults.contextuals.content.semantic.disabled.primary,
 });
--- a/packages/react/src/components/Forms/DatePicker/Calendar.tsx
+++ b/packages/react/src/components/Forms/DatePicker/Calendar.tsx
@@ -117,7 +117,7 @@ const CalendarAux = ({
  const monthItems: Array<Option> = useMemo(() => {
    // Note that in some calendar systems, such as the Hebrew, the number of months may differ between years.
    const numberOfMonths = state.focusedDate.calendar.getMonthsInYear(
-      state.focusedDate
+      state.focusedDate,
    );
    return range(1, numberOfMonths).map((monthNumber) => {
      const date = state.focusedDate.set({ month: monthNumber });
@@ -133,15 +133,16 @@ const CalendarAux = ({

  const yearItems: Array<Option> = useMemo(() => {
    const calendarCurrentUser = createCalendar(
-      new Intl.DateTimeFormat().resolvedOptions().calendar as CalendarIdentifier
+      new Intl.DateTimeFormat().resolvedOptions()
+        .calendar as CalendarIdentifier,
    );
    const minDate = toCalendar(
      new CalendarDate(new GregorianCalendar(), minYear, 1, 1),
-      calendarCurrentUser
+      calendarCurrentUser,
    );
    const maxDate = toCalendar(
      new CalendarDate(new GregorianCalendar(), maxYear, 12, 31),
-      calendarCurrentUser
+      calendarCurrentUser,
    );
    return range(minDate.year, maxDate.year).map((yearNumber) => {
      const date = state.focusedDate.set({ year: yearNumber });
@@ -157,7 +158,7 @@ const CalendarAux = ({

  const useDownshiftSelect = (
    key: string,
-    items: Array<Option>
+    items: Array<Option>,
  ): UseSelectReturnValue<Option> => {
    return useSelect({
      items,
@@ -214,12 +215,12 @@ const CalendarAux = ({
  const getToggleButtonProps = (
    key: string,
    items: Array<Option>,
-    downshift: UseSelectReturnValue<Option>
+    downshift: UseSelectReturnValue<Option>,
  ) => ({
    ...downshift.getToggleButtonProps(),
    onClick: () => {
      const selectedItem = items.find(
-        (item) => item.value === state.focusedDate[key as keyof CalendarDate]
+        (item) => item.value === state.focusedDate[key as keyof CalendarDate],
      );
      if (selectedItem) {
        downshift.selectItem(selectedItem);
@@ -227,7 +228,7 @@ const CalendarAux = ({
      downshift.toggleMenu();
    },
    "aria-label": t(
-      `components.forms.date_picker.${key}_select_button_aria_label`
+      `components.forms.date_picker.${key}_select_button_aria_label`,
    ),
  });

@@ -263,7 +264,7 @@ const CalendarAux = ({
              {...{
                ...prevButtonOtherProps,
                "aria-label": t(
-                  "components.forms.date_picker.previous_month_button_aria_label"
+                  "components.forms.date_picker.previous_month_button_aria_label",
                ),
              }}
              disabled={isPrevButtonDisabled}
@@ -281,7 +282,7 @@ const CalendarAux = ({
              {...getToggleButtonProps("month", monthItems, downshiftMonth)}
            >
              {selectedMonthItemFormatter.format(
-                state.focusedDate.toDate(state.timeZone)
+                state.focusedDate.toDate(state.timeZone),
              )}
            </Button>
            <Button
@@ -293,7 +294,7 @@ const CalendarAux = ({
              {...{
                ...nextButtonOtherProps,
                "aria-label": t(
-                  "components.forms.date_picker.next_month_button_aria_label"
+                  "components.forms.date_picker.next_month_button_aria_label",
                ),
              }}
              disabled={isNextButtonDisabled}
@@ -312,7 +313,7 @@ const CalendarAux = ({
                state.minValue.year > state.focusedDate.add({ years: -1 }).year
              }
              aria-label={t(
-                "components.forms.date_picker.previous_year_button_aria_label"
+                "components.forms.date_picker.previous_year_button_aria_label",
              )}
              type="button"
            />
@@ -327,7 +328,7 @@ const CalendarAux = ({
              {...getToggleButtonProps("year", yearItems, downshiftYear)}
            >
              {yearItemsFormatter.format(
-                state.focusedDate.toDate(state.timeZone)
+                state.focusedDate.toDate(state.timeZone),
              )}
            </Button>
            <Button
@@ -341,7 +342,7 @@ const CalendarAux = ({
                state.maxValue.year < state.focusedDate.add({ years: 1 }).year
              }
              aria-label={t(
-                "components.forms.date_picker.next_year_button_aria_label"
+                "components.forms.date_picker.next_year_button_aria_label",
              )}
              type="button"
            />
--- a/packages/react/src/components/Forms/DatePicker/CalendarCell.tsx
+++ b/packages/react/src/components/Forms/DatePicker/CalendarCell.tsx
@@ -75,9 +75,9 @@ export const CalendarCell = ({ state, date }: CalendarCellProps) => {
                isSelected,
              "c__calendar__wrapper__grid__week-row__button--today": isToday(
                date,
-                getLocalTimeZone()
+                getLocalTimeZone(),
              ),
-            }
+            },
          )}
          type="button"
          disabled={isDisabled}
--- a/packages/react/src/components/Forms/DatePicker/DatePickerAux.tsx
+++ b/packages/react/src/components/Forms/DatePicker/DatePickerAux.tsx
@@ -76,7 +76,7 @@ const DatePickerAux = ({

  const isDateInvalid = useMemo(
    () => pickerState.validationState === "invalid" || props.state === "error",
-    [pickerState.validationState, props.state]
+    [pickerState.validationState, props.state],
  );

  return (
@@ -114,7 +114,7 @@ const DatePickerAux = ({
                  name={name && `${name}_start`}
                  value={convertDateValueToString(
                    pickerState.value?.start ?? null,
-                    props.timezone
+                    props.timezone,
                  )}
                />
                <input
@@ -122,7 +122,7 @@ const DatePickerAux = ({
                  name={name && `${name}_end`}
                  value={convertDateValueToString(
                    pickerState.value?.end ?? null,
-                    props.timezone
+                    props.timezone,
                  )}
                />
              </>
@@ -132,7 +132,7 @@ const DatePickerAux = ({
                name={name}
                value={convertDateValueToString(
                  pickerState.value,
-                  props.timezone
+                  props.timezone,
                )}
              />
            )}
@@ -148,7 +148,7 @@ const DatePickerAux = ({
                aria-label={t(
                  pickerState.isOpen
                    ? "components.forms.date_picker.toggle_button_aria_label_close"
-                    : "components.forms.date_picker.toggle_button_aria_label_open"
+                    : "components.forms.date_picker.toggle_button_aria_label_open",
                )}
                color="neutral"
                variant="tertiary"
@@ -178,7 +178,7 @@ const DatePickerAux = ({
                }
              }}
              aria-label={t(
-                "components.forms.date_picker.clear_button_aria_label"
+                "components.forms.date_picker.clear_button_aria_label",
              )}
              disabled={disabled}
              type="button"
--- a/packages/react/src/components/Forms/DatePicker/index.stories.tsx
+++ b/packages/react/src/components/Forms/DatePicker/index.stories.tsx
@@ -140,7 +140,7 @@ export const ReactHookForm = () => {
    resolver: yupResolver(
      Yup.object().shape({
        date: Yup.string().required(),
-      })
+      }),
    ),
  });

--- a/packages/react/src/components/Forms/DatePicker/tokens.ts
+++ b/packages/react/src/components/Forms/DatePicker/tokens.ts
@@ -2,7 +2,8 @@ import { DefaultTokens } from "@openfun/cunningham-tokens";

 export const tokens = (defaults: DefaultTokens) => ({
  "border-color": defaults.contextuals.border.semantic.neutral.tertiary,
-  "border-color--disabled": defaults.contextuals.border.semantic.disabled.primary,
+  "border-color--disabled":
+    defaults.contextuals.border.semantic.disabled.primary,
  "border-color--focus": defaults.contextuals.border.semantic.brand.primary,
  "border-color--hover": defaults.contextuals.border.semantic.neutral.secondary,
  "border-radius": "8px",
@@ -11,7 +12,8 @@ export const tokens = (defaults: DefaultTokens) => ({
  "border-style": "solid",
  "border-width": "1px",
  "value-color": defaults.contextuals.content.semantic.neutral.tertiary,
-  "value-color--disabled": defaults.contextuals.content.semantic.disabled.primary,
+  "value-color--disabled":
+    defaults.contextuals.content.semantic.disabled.primary,
  "font-size": defaults.globals.font.sizes.lg,
  height: "3.5rem",
  "item-background-color--hover":
@@ -26,7 +28,9 @@ export const tokens = (defaults: DefaultTokens) => ({
    defaults.contextuals.background.semantic.brand.tertiary,
  "range-selection-background-color--disabled":
    defaults.contextuals.background.semantic.neutral.tertiary,
-  "grid-cell--border-color--today": defaults.contextuals.border.semantic.brand.primary,
-  "grid-cell--color--today": defaults.contextuals.content.semantic.brand.primary,
+  "grid-cell--border-color--today":
+    defaults.contextuals.border.semantic.brand.primary,
+  "grid-cell--color--today":
+    defaults.contextuals.content.semantic.brand.primary,
  "label-color--focus": defaults.contextuals.border.semantic.brand.secondary,
 });
--- a/packages/react/src/components/Forms/FileUploader/FileUploaderMono.tsx
+++ b/packages/react/src/components/Forms/FileUploader/FileUploaderMono.tsx
@@ -13,7 +13,7 @@ export const FileUploaderMono = ({
  const [file, setFile] = useState<File | undefined>(
    fakeDefaultFiles && fakeDefaultFiles.length > 0
      ? fakeDefaultFiles[0]
-      : undefined
+      : undefined,
  );
  // This is made to prevent useEffects inside DropZone that depends on `files` to trigger on each render,
  // doing this preserves the reference of the array.
--- a/packages/react/src/components/Forms/FileUploader/FileUploaderMulti.tsx
+++ b/packages/react/src/components/Forms/FileUploader/FileUploaderMulti.tsx
@@ -45,7 +45,7 @@ export const FileUploaderMulti = ({
                    "components.forms.file_uploader.delete_file_name",
                    {
                      name: file.name,
-                    }
+                    },
                  )}
                  onClick={() => {
                    setFiles(files.filter((f) => f !== file));
--- a/packages/react/src/components/Forms/Input/InputPassword.tsx
+++ b/packages/react/src/components/Forms/Input/InputPassword.tsx
@@ -26,7 +26,7 @@ export const InputPassword = (props: Omit<InputProps, "rightIcon">) => {
          color="neutral"
          size="small"
          aria-label={t(
-            `components.forms.input.password.${showPassword ? "hide" : "show"}_password`
+            `components.forms.input.password.${showPassword ? "hide" : "show"}_password`,
          )}
        />
      }
--- a/packages/react/src/components/Forms/Input/index.stories.tsx
+++ b/packages/react/src/components/Forms/Input/index.stories.tsx
@@ -259,7 +259,7 @@ export const ReactHookForm = () => {
      mode: "onChange",
      reValidateMode: "onChange",
      resolver: yupResolver(inputExampleSchema),
-    }
+    },
  );

  return (
--- a/packages/react/src/components/Forms/Input/tokens.ts
+++ b/packages/react/src/components/Forms/Input/tokens.ts
@@ -18,5 +18,6 @@ export const tokens = (defaults: DefaultTokens) => ({
  "label-color--focus": defaults.contextuals.content.semantic.brand.primary,
  "background-color": defaults.contextuals.background.surface.secondary,
  "value-color": defaults.contextuals.content.semantic.neutral.primary,
-  "value-color--disabled": defaults.contextuals.content.semantic.disabled.primary,
+  "value-color--disabled":
+    defaults.contextuals.content.semantic.disabled.primary,
 });
--- a/packages/react/src/components/Forms/LabelledBox/tokens.ts
+++ b/packages/react/src/components/Forms/LabelledBox/tokens.ts
@@ -5,5 +5,6 @@ export const tokens = (defaults: DefaultTokens) => ({
  "label-color--big": defaults.contextuals.content.semantic.neutral.primary,
  "label-color--small--disabled":
    defaults.contextuals.content.semantic.neutral.secondary,
-  "label-color--big--disabled": defaults.contextuals.content.semantic.neutral.secondary,
+  "label-color--big--disabled":
+    defaults.contextuals.content.semantic.neutral.secondary,
 });
--- a/packages/react/src/components/Forms/Radio/tokens.ts
+++ b/packages/react/src/components/Forms/Radio/tokens.ts
@@ -2,7 +2,8 @@ import { DefaultTokens } from "@openfun/cunningham-tokens";

 export const tokens = (defaults: DefaultTokens) => ({
  "border-color": defaults.contextuals.border.semantic.neutral.tertiary,
-  "border-color--disabled": defaults.contextuals.border.semantic.neutral.tertiary,
+  "border-color--disabled":
+    defaults.contextuals.border.semantic.neutral.tertiary,
  "accent-color": defaults.contextuals.content.semantic.brand.tertiary,
  "background-color": defaults.contextuals.background.surface.primary,
 });
--- a/packages/react/src/components/Forms/Select/mono-common.tsx
+++ b/packages/react/src/components/Forms/Select/mono-common.tsx
@@ -101,7 +101,7 @@ export const SelectMonoAux = ({
            "c__select--" + state,
            {
              "c__select--disabled": disabled,
-            }
+            },
          )}
          onBlur={() =>
            onBlur?.({ target: { value: downshiftReturn.selectedItem?.value } })
@@ -142,7 +142,7 @@ export const SelectMonoAux = ({
                        color="neutral"
                        size="nano"
                        aria-label={t(
-                          "components.forms.select.clear_button_aria_label"
+                          "components.forms.select.clear_button_aria_label",
                        )}
                        className="c__select__inner__actions__clear"
                        onClick={(e) => {
--- a/packages/react/src/components/Forms/Select/multi-common.tsx
+++ b/packages/react/src/components/Forms/Select/multi-common.tsx
@@ -24,14 +24,14 @@ import { SelectMultiMenu } from ":/components/Forms/Select/multi-menu";
 */
 export function getMultiOptionsFilter(
  selectedOptions: Option[],
-  inputValue?: string
+  inputValue?: string,
 ) {
  const optionsFilter = getOptionsFilter(inputValue);
  return (option: Option) => {
    return (
      !selectedOptions.find(
        (selectedOption) =>
-          optionToValue(selectedOption) === optionToValue(option)
+          optionToValue(selectedOption) === optionToValue(option),
      ) && optionsFilter(option)
    );
  };
@@ -83,7 +83,7 @@ export const SelectMultiAux = ({ children, ...props }: SelectMultiAuxProps) => {
              "c__select--populated": props.selectedItems.length > 0,
              "c__select--monoline": props.monoline,
              "c__select--multiline": !props.monoline,
-            }
+            },
          )}
        >
          <div
@@ -121,7 +121,7 @@ export const SelectMultiAux = ({ children, ...props }: SelectMultiAuxProps) => {
                          color="neutral"
                          size="nano"
                          aria-label={t(
-                            "components.forms.select.clear_all_button_aria_label"
+                            "components.forms.select.clear_all_button_aria_label",
                          )}
                          className="c__select__inner__actions__clear"
                          onClick={(e) => {
--- a/packages/react/src/components/Forms/Select/multi-selected-items.tsx
+++ b/packages/react/src/components/Forms/Select/multi-selected-items.tsx
@@ -49,7 +49,7 @@ const SelectedItemsChips = ({
          onClick={(e) => {
            e.stopPropagation();
            useMultipleSelectionReturn.removeSelectedItem(
-              selectedItemForRender
+              selectedItemForRender,
            );
          }}
          icon={<span className="material-icons">close</span>}
--- a/packages/react/src/components/Forms/Select/multi.stories.tsx
+++ b/packages/react/src/components/Forms/Select/multi.stories.tsx
@@ -509,7 +509,7 @@ export const ReactHookForm = () => {
      .test({
        test: (cityList) =>
          cityList.every((city) =>
-            [CitiesOptionEnum.PARIS, CitiesOptionEnum.TOKYO].includes(city)
+            [CitiesOptionEnum.PARIS, CitiesOptionEnum.TOKYO].includes(city),
          ),
        message: "Wrong answer!",
      }),
--- a/packages/react/src/components/Forms/Select/tokens.ts
+++ b/packages/react/src/components/Forms/Select/tokens.ts
@@ -10,7 +10,8 @@ export const tokens = (defaults: DefaultTokens) => ({
  "border-style": "solid",
  "border-width": "1px",
  "value-color": defaults.contextuals.content.semantic.neutral.primary,
-  "value-color--disabled": defaults.contextuals.content.semantic.disabled.primary,
+  "value-color--disabled":
+    defaults.contextuals.content.semantic.disabled.primary,
  "font-size": defaults.globals.font.sizes.md,
  height: "3.5rem",
  "item-background-color--hover":
@@ -18,7 +19,8 @@ export const tokens = (defaults: DefaultTokens) => ({
  "item-background-color--selected":
    defaults.contextuals.background.semantic.brand.secondary,
  "item-color": defaults.contextuals.content.semantic.neutral.primary,
-  "item-color--disabled": defaults.contextuals.content.semantic.disabled.secondary,
+  "item-color--disabled":
+    defaults.contextuals.content.semantic.disabled.secondary,
  "item-font-size": defaults.globals.font.sizes.md,
  "background-color": defaults.contextuals.background.surface.primary,
  "menu-background-color": defaults.contextuals.background.surface.primary,
--- a/packages/react/src/components/Forms/Switch/index.tsx
+++ b/packages/react/src/components/Forms/Switch/index.tsx
@@ -41,7 +41,7 @@ export const Switch = ({
        {
          "c__checkbox--disabled": props.disabled,
          "c__switch--full-width": props.fullWidth,
-        }
+        },
      )}
    >
      <Field compact={true} {...fieldProps}>
--- a/packages/react/src/components/Forms/Switch/tokens.ts
+++ b/packages/react/src/components/Forms/Switch/tokens.ts
@@ -2,11 +2,13 @@ import { DefaultTokens } from "@openfun/cunningham-tokens";

 export const tokens = (defaults: DefaultTokens) => ({
  "accent-color": defaults.contextuals.content.semantic.brand.tertiary,
-  "rail-background-color": defaults.contextuals.content.semantic.neutral.tertiary,
+  "rail-background-color":
+    defaults.contextuals.content.semantic.neutral.tertiary,
  "rail-background-color--disabled":
    defaults.contextuals.content.semantic.disabled.primary,
  "rail-border-radius": "50vw",
-  "handle-background-color": defaults.contextuals.content.semantic.contextual.primary,
+  "handle-background-color":
+    defaults.contextuals.content.semantic.contextual.primary,
  "handle-background-color--disabled":
    defaults.contextuals.content.semantic.disabled.secondary,
  "handle-border-radius": "50%",
--- a/packages/react/src/components/Forms/TextArea/tokens.ts
+++ b/packages/react/src/components/Forms/TextArea/tokens.ts
@@ -10,10 +10,12 @@ export const tokens = (defaults: DefaultTokens) => ({
  "border-color": defaults.contextuals.border.semantic.neutral.tertiary,
  "border-color--hover": defaults.contextuals.border.semantic.neutral.secondary,
  "border-color--focus": defaults.contextuals.border.semantic.brand.primary,
-  "border-color--disabled": defaults.contextuals.border.semantic.disabled.primary,
+  "border-color--disabled":
+    defaults.contextuals.border.semantic.disabled.primary,
  "border-style": "solid",
  "label-color--focus": defaults.contextuals.border.semantic.brand.primary,
  "background-color": defaults.contextuals.background.surface.primary,
  "value-color": defaults.contextuals.content.semantic.neutral.primary,
-  "value-color--disabled": defaults.contextuals.content.semantic.neutral.secondary,
+  "value-color--disabled":
+    defaults.contextuals.content.semantic.neutral.secondary,
 });