studio/cunningham
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🚨(react) fix lint issues

Browse Source 
Fix the lint for the recent commits.
This commit is contained in:
Nathan Vasse
2025-09-23 15:30:39 +02:00
committed by NathanVss
parent 587e782e61
commit 87dbf922df
35 changed files with 125 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/react/src/components/Alert/AlertAdditionalExpandable.tsx
View File

@@ -11,7 +11,7 @@ export const AlertAdditionalExpandable = (props: AlertProps) => {
const [expanded, onExpand] = useControllableState( const [expanded, onExpand] = useControllableState(
false, false,
props.expanded, props.expanded,
props.onExpand props.onExpand,
); );
const iconButton = ( const iconButton = (

2
packages/react/src/components/Alert/Utils.tsx
View File

@@ -14,7 +14,7 @@ export const AlertWrapper = (props: AlertProps) => {
props.className, props.className,
{ {
"c__alert--hide": props.hide, "c__alert--hide": props.hide,
} },
)} )}
> >
{props.children} {props.children}

26
packages/react/src/components/Alert/index.spec.tsx
View File

@@ -17,7 +17,7 @@ describe("<Alert/>", () => {
render( render(
<CunninghamProvider> <CunninghamProvider>
<Alert type={type}>Alert component</Alert> <Alert type={type}>Alert component</Alert>
</CunninghamProvider> </CunninghamProvider>,
); );
const $icon = document.querySelector(".c__alert__icon"); const $icon = document.querySelector(".c__alert__icon");
if (icon) { if (icon) {
@@ -32,7 +32,7 @@ describe("<Alert/>", () => {
<Alert type={VariantType.INFO} additional="Additional information"> <Alert type={VariantType.INFO} additional="Additional information">
Alert component Alert component
</Alert> </Alert>
</CunninghamProvider> </CunninghamProvider>,
); );
expect(screen.getByText("Additional information")).toBeInTheDocument(); expect(screen.getByText("Additional information")).toBeInTheDocument();
}); });
@@ -42,7 +42,7 @@ describe("<Alert/>", () => {
<Alert type={VariantType.INFO} primaryLabel="Primary"> <Alert type={VariantType.INFO} primaryLabel="Primary">
Alert component Alert component
</Alert> </Alert>
</CunninghamProvider> </CunninghamProvider>,
); );
screen.getByRole("button", { name: "Primary" }); screen.getByRole("button", { name: "Primary" });
}); });
@@ -52,7 +52,7 @@ describe("<Alert/>", () => {
<Alert type={VariantType.INFO} tertiaryLabel="Tertiary"> <Alert type={VariantType.INFO} tertiaryLabel="Tertiary">
Alert component Alert component
</Alert> </Alert>
</CunninghamProvider> </CunninghamProvider>,
); );
screen.getByRole("button", { name: "Tertiary" }); screen.getByRole("button", { name: "Tertiary" });
}); });
@@ -66,7 +66,7 @@ describe("<Alert/>", () => {
> >
Alert component Alert component
</Alert> </Alert>
</CunninghamProvider> </CunninghamProvider>,
); );
screen.getByRole("button", { name: "Primary" }); screen.getByRole("button", { name: "Primary" });
screen.getByRole("button", { name: "Tertiary" }); screen.getByRole("button", { name: "Tertiary" });
@@ -85,7 +85,7 @@ describe("<Alert/>", () => {
> >
Alert component Alert component
</Alert> </Alert>
</CunninghamProvider> </CunninghamProvider>,
); );
screen.getByRole("button", { name: "Primary Custom" }); screen.getByRole("button", { name: "Primary Custom" });
screen.getByRole("button", { name: "Secondary Custom" }); screen.getByRole("button", { name: "Secondary Custom" });
@@ -96,7 +96,7 @@ describe("<Alert/>", () => {
<Alert type={VariantType.INFO} canClose={true}> <Alert type={VariantType.INFO} canClose={true}>
Alert component Alert component
</Alert> </Alert>
</CunninghamProvider> </CunninghamProvider>,
); );
screen.getByText("Alert component"); screen.getByText("Alert component");
@@ -165,14 +165,14 @@ describe("<Alert/>", () => {
> >
Alert component Alert component
</Alert> </Alert>
</CunninghamProvider> </CunninghamProvider>,
); );
const user = userEvent.setup(); const user = userEvent.setup();
screen.getByText("Alert component"); screen.getByText("Alert component");
expect( expect(
screen.queryByText("Additional information") screen.queryByText("Additional information"),
).not.toBeInTheDocument(); ).not.toBeInTheDocument();
const $expandButton = screen.getByRole("button", { name: "Expand alert" }); const $expandButton = screen.getByRole("button", { name: "Expand alert" });
@@ -184,7 +184,7 @@ describe("<Alert/>", () => {
await user.click($shrinkButton); await user.click($shrinkButton);
expect( expect(
screen.queryByText("Additional information") screen.queryByText("Additional information"),
).not.toBeInTheDocument(); ).not.toBeInTheDocument();
}); });
it("can expand the alert controlled", async () => { it("can expand the alert controlled", async () => {
@@ -226,7 +226,7 @@ describe("<Alert/>", () => {
screen.getByText("Expanded: false"); screen.getByText("Expanded: false");
expect( expect(
screen.queryByText("Additional information") screen.queryByText("Additional information"),
).not.toBeInTheDocument(); ).not.toBeInTheDocument();
// Expand from alert. // Expand from alert.
@@ -246,14 +246,14 @@ describe("<Alert/>", () => {
screen.getByText("Expanded: false"); screen.getByText("Expanded: false");
expect( expect(
screen.queryByText("Additional information") screen.queryByText("Additional information"),
).not.toBeInTheDocument(); ).not.toBeInTheDocument();
}); });
it("renders with className", async () => { it("renders with className", async () => {
render(<Alert className="my-custom-class" />); render(<Alert className="my-custom-class" />);
expect( expect(
document.querySelector(".c__alert.my-custom-class") document.querySelector(".c__alert.my-custom-class"),
).toBeInTheDocument(); ).toBeInTheDocument();
}); });
}); });

3
packages/react/src/components/Alert/tokens.ts
View File

@@ -2,7 +2,8 @@ import { DefaultTokens } from "@openfun/cunningham-tokens";
export const tokens = (defaults: DefaultTokens) => { export const tokens = (defaults: DefaultTokens) => {
return { return {
"background-color": defaults.contextuals.background.semantic.neutral.tertiary, "background-color":
defaults.contextuals.background.semantic.neutral.tertiary,
"border-radius": "4px", "border-radius": "4px",
"border-color": defaults.contextuals.border.semantic.neutral.primary, "border-color": defaults.contextuals.border.semantic.neutral.primary,
"border-left-color": defaults.contextuals.border.semantic.neutral.primary, "border-left-color": defaults.contextuals.border.semantic.neutral.primary,

2
packages/react/src/components/Button/index.tsx
View File

@@ -79,6 +79,6 @@ export const Button = ({
{!!icon && iconPosition === "left" && iconElement} {!!icon && iconPosition === "left" && iconElement}
{children} {children}
{!!icon && iconPosition === "right" && iconElement} {!!icon && iconPosition === "right" && iconElement}
</> </>,
); );
}; };

30
packages/react/src/components/DataGrid/index.spec.tsx
View File

@@ -97,7 +97,7 @@ describe("<DataGrid/>", () => {
fetchMock.mockIf( fetchMock.mockIf(
"https://example.com/?page=1&sort=lastName&sortOrder=desc", "https://example.com/?page=1&sort=lastName&sortOrder=desc",
() => deferred.promise () => deferred.promise,
); );
render(<Component />); render(<Component />);
@@ -115,8 +115,8 @@ describe("<DataGrid/>", () => {
JSON.stringify({ JSON.stringify({
rows: database.slice(0, 10), rows: database.slice(0, 10),
count: database.length, count: database.length,
}) }),
) ),
); );
// Make sure the loader disappears. // Make sure the loader disappears.
@@ -124,8 +124,8 @@ describe("<DataGrid/>", () => {
expect( expect(
screen.queryByRole("status", { screen.queryByRole("status", {
name: "Loading data", name: "Loading data",
}) }),
).toBeNull() ).toBeNull(),
); );
// Make sure the rows are rendered. // Make sure the rows are rendered.
@@ -154,7 +154,7 @@ describe("<DataGrid/>", () => {
deferred = new Deferred(); deferred = new Deferred();
fetchMock.mockIf( fetchMock.mockIf(
"https://example.com/?page=2&sort=lastName&sortOrder=desc", "https://example.com/?page=2&sort=lastName&sortOrder=desc",
() => deferred.promise () => deferred.promise,
); );
// Go to page 2. // Go to page 2.
@@ -187,8 +187,8 @@ describe("<DataGrid/>", () => {
JSON.stringify({ JSON.stringify({
rows: database.slice(10, 20), rows: database.slice(10, 20),
count: database.length, count: database.length,
}) }),
) ),
); );
// Make sure the loader disappears. // Make sure the loader disappears.
@@ -196,8 +196,8 @@ describe("<DataGrid/>", () => {
expect( expect(
screen.queryByRole("status", { screen.queryByRole("status", {
name: "Loading data", name: "Loading data",
}) }),
).toBeNull() ).toBeNull(),
); );
// Make sure the rows are rendered. // Make sure the rows are rendered.
@@ -330,15 +330,15 @@ describe("<DataGrid/>", () => {
expect(tds.length).toBe(3); expect(tds.length).toBe(3);
expect(tds[0].textContent).toEqual(row.firstName); expect(tds[0].textContent).toEqual(row.firstName);
expect(Array.from(tds[0].classList)).toContain( expect(Array.from(tds[0].classList)).toContain(
"c__datagrid__row__cell--highlight" "c__datagrid__row__cell--highlight",
); );
expect(tds[1].textContent).toEqual(row.lastName); expect(tds[1].textContent).toEqual(row.lastName);
expect(Array.from(tds[1].classList)).not.toContain( expect(Array.from(tds[1].classList)).not.toContain(
"c__datagrid__row__cell--highlight" "c__datagrid__row__cell--highlight",
); );
expect(tds[2].textContent).toEqual(row.email); expect(tds[2].textContent).toEqual(row.email);
expect(Array.from(tds[2].classList)).toContain( expect(Array.from(tds[2].classList)).toContain(
"c__datagrid__row__cell--highlight" "c__datagrid__row__cell--highlight",
); );
}); });
}); });
@@ -395,10 +395,10 @@ describe("<DataGrid/>", () => {
rows={[]} rows={[]}
className="my-custom-class" className="my-custom-class"
/> />
</CunninghamProvider> </CunninghamProvider>,
); );
expect( expect(
document.querySelector(".c__datagrid.my-custom-class") document.querySelector(".c__datagrid.my-custom-class"),
).toBeInTheDocument(); ).toBeInTheDocument();
}); });

6
packages/react/src/components/DataGrid/index.stories.tsx
View File

@@ -198,14 +198,14 @@ export const FullServerSide = () => {
setTimeout(() => { setTimeout(() => {
// Set the pagination length. // Set the pagination length.
pagination.setPagesCount( pagination.setPagesCount(
Math.ceil(sortedDatabase.length / pagination.pageSize) Math.ceil(sortedDatabase.length / pagination.pageSize),
); );
// Select the rows to display on the current page. // Select the rows to display on the current page.
setRows( setRows(
sortedDatabase.slice( sortedDatabase.slice(
(pagination.page - 1) * pagination.pageSize, (pagination.page - 1) * pagination.pageSize,
pagination.page * pagination.pageSize pagination.page * pagination.pageSize,
) ),
); );
setIsLoading(false); setIsLoading(false);
}, 1000); }, 1000);

16
packages/react/src/components/DataGrid/index.tsx
View File

@@ -102,7 +102,7 @@ export const DataGrid = <T extends Row>({
headlessColumns.forEach((column) => { headlessColumns.forEach((column) => {
if (column.enableSorting && !onSortModelChange) { if (column.enableSorting && !onSortModelChange) {
console.warn( console.warn(
"You are using a column with sorting enabled, but you are not providing an `onSortModelChange` handler. The sorting will not work as expected." "You are using a column with sorting enabled, but you are not providing an `onSortModelChange` handler. The sorting will not work as expected.",
); );
} }
}); });
@@ -112,11 +112,11 @@ export const DataGrid = <T extends Row>({
*/ */
const paginationState = useMemo( const paginationState = useMemo(
() => paginationToPaginationState(pagination), () => paginationToPaginationState(pagination),
[pagination] [pagination],
); );
const headlessSorting = useMemo( const headlessSorting = useMemo(
() => sortModelToSortingState(sortModel), () => sortModelToSortingState(sortModel),
[sortModel] [sortModel],
); );
/** /**
@@ -139,7 +139,7 @@ export const DataGrid = <T extends Row>({
// a TS error. // a TS error.
if (typeof newHeadlessSorting === "function") { if (typeof newHeadlessSorting === "function") {
onSortModelChange?.( onSortModelChange?.(
sortingStateToSortModel(newHeadlessSorting(headlessSorting)) sortingStateToSortModel(newHeadlessSorting(headlessSorting)),
); );
} }
}, },
@@ -221,7 +221,7 @@ export const DataGrid = <T extends Row>({
{ {
"c__datagrid__header--sortable": "c__datagrid__header--sortable":
header.column.getCanSort(), header.column.getCanSort(),
} },
)} )}
{...(header.column.getCanSort() {...(header.column.getCanSort()
? { ? {
@@ -240,13 +240,13 @@ export const DataGrid = <T extends Row>({
indeterminate={table.getIsSomeRowsSelected()} indeterminate={table.getIsSomeRowsSelected()}
onChange={table.getToggleAllRowsSelectedHandler()} onChange={table.getToggleAllRowsSelectedHandler()}
aria-label={t( aria-label={t(
"components.datagrid.rows_selection_aria" "components.datagrid.rows_selection_aria",
)} )}
/> />
) : ( ) : (
flexRender( flexRender(
header.column.columnDef.header, header.column.columnDef.header,
header.getContext() header.getContext(),
) )
)} )}
{header.column.getIsSorted() === "asc" && ( {header.column.getIsSorted() === "asc" && (
@@ -303,7 +303,7 @@ export const DataGrid = <T extends Row>({
> >
{flexRender( {flexRender(
cell.column.columnDef.cell, cell.column.columnDef.cell,
cell.getContext() cell.getContext(),
)} )}
</td> </td>
); );

9
packages/react/src/components/Forms/Checkbox/tokens.ts
View File

@@ -12,9 +12,12 @@ export const tokens = (defaults: DefaultTokens) => ({
"accent-color": defaults.contextuals.content.semantic.contextual.primary, "accent-color": defaults.contextuals.content.semantic.contextual.primary,
size: "1.5rem", size: "1.5rem",
"background-color--checked": defaults.contextuals.content.semantic.brand.tertiary, "background-color--checked":
defaults.contextuals.content.semantic.brand.tertiary,
"background-color--indeterminate": "background-color--indeterminate":
defaults.contextuals.content.semantic.brand.tertiary, defaults.contextuals.content.semantic.brand.tertiary,
"background-color--disabled": defaults.contextuals.content.semantic.disabled.primary, "background-color--disabled":
"border-color--disabled": defaults.contextuals.content.semantic.disabled.primary, defaults.contextuals.content.semantic.disabled.primary,
"border-color--disabled":
defaults.contextuals.content.semantic.disabled.primary,
}); });

29
packages/react/src/components/Forms/DatePicker/Calendar.tsx
View File

@@ -117,7 +117,7 @@ const CalendarAux = ({
const monthItems: Array<Option> = useMemo(() => { const monthItems: Array<Option> = useMemo(() => {
// Note that in some calendar systems, such as the Hebrew, the number of months may differ between years. // Note that in some calendar systems, such as the Hebrew, the number of months may differ between years.
const numberOfMonths = state.focusedDate.calendar.getMonthsInYear( const numberOfMonths = state.focusedDate.calendar.getMonthsInYear(
state.focusedDate state.focusedDate,
); );
return range(1, numberOfMonths).map((monthNumber) => { return range(1, numberOfMonths).map((monthNumber) => {
const date = state.focusedDate.set({ month: monthNumber }); const date = state.focusedDate.set({ month: monthNumber });
@@ -133,15 +133,16 @@ const CalendarAux = ({
const yearItems: Array<Option> = useMemo(() => { const yearItems: Array<Option> = useMemo(() => {
const calendarCurrentUser = createCalendar( const calendarCurrentUser = createCalendar(
new Intl.DateTimeFormat().resolvedOptions().calendar as CalendarIdentifier new Intl.DateTimeFormat().resolvedOptions()
.calendar as CalendarIdentifier,
); );
const minDate = toCalendar( const minDate = toCalendar(
new CalendarDate(new GregorianCalendar(), minYear, 1, 1), new CalendarDate(new GregorianCalendar(), minYear, 1, 1),
calendarCurrentUser calendarCurrentUser,
); );
const maxDate = toCalendar( const maxDate = toCalendar(
new CalendarDate(new GregorianCalendar(), maxYear, 12, 31), new CalendarDate(new GregorianCalendar(), maxYear, 12, 31),
calendarCurrentUser calendarCurrentUser,
); );
return range(minDate.year, maxDate.year).map((yearNumber) => { return range(minDate.year, maxDate.year).map((yearNumber) => {
const date = state.focusedDate.set({ year: yearNumber }); const date = state.focusedDate.set({ year: yearNumber });
@@ -157,7 +158,7 @@ const CalendarAux = ({
const useDownshiftSelect = ( const useDownshiftSelect = (
key: string, key: string,
items: Array<Option> items: Array<Option>,
): UseSelectReturnValue<Option> => { ): UseSelectReturnValue<Option> => {
return useSelect({ return useSelect({
items, items,
@@ -214,12 +215,12 @@ const CalendarAux = ({
const getToggleButtonProps = ( const getToggleButtonProps = (
key: string, key: string,
items: Array<Option>, items: Array<Option>,
downshift: UseSelectReturnValue<Option> downshift: UseSelectReturnValue<Option>,
) => ({ ) => ({
...downshift.getToggleButtonProps(), ...downshift.getToggleButtonProps(),
onClick: () => { onClick: () => {
const selectedItem = items.find( const selectedItem = items.find(
(item) => item.value === state.focusedDate[key as keyof CalendarDate] (item) => item.value === state.focusedDate[key as keyof CalendarDate],
); );
if (selectedItem) { if (selectedItem) {
downshift.selectItem(selectedItem); downshift.selectItem(selectedItem);
@@ -227,7 +228,7 @@ const CalendarAux = ({
downshift.toggleMenu(); downshift.toggleMenu();
}, },
"aria-label": t( "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, ...prevButtonOtherProps,
"aria-label": t( "aria-label": t(
"components.forms.date_picker.previous_month_button_aria_label" "components.forms.date_picker.previous_month_button_aria_label",
), ),
}} }}
disabled={isPrevButtonDisabled} disabled={isPrevButtonDisabled}
@@ -281,7 +282,7 @@ const CalendarAux = ({
{...getToggleButtonProps("month", monthItems, downshiftMonth)} {...getToggleButtonProps("month", monthItems, downshiftMonth)}
> >
{selectedMonthItemFormatter.format( {selectedMonthItemFormatter.format(
state.focusedDate.toDate(state.timeZone) state.focusedDate.toDate(state.timeZone),
)} )}
</Button> </Button>
<Button <Button
@@ -293,7 +294,7 @@ const CalendarAux = ({
{...{ {...{
...nextButtonOtherProps, ...nextButtonOtherProps,
"aria-label": t( "aria-label": t(
"components.forms.date_picker.next_month_button_aria_label" "components.forms.date_picker.next_month_button_aria_label",
), ),
}} }}
disabled={isNextButtonDisabled} disabled={isNextButtonDisabled}
@@ -312,7 +313,7 @@ const CalendarAux = ({
state.minValue.year > state.focusedDate.add({ years: -1 }).year state.minValue.year > state.focusedDate.add({ years: -1 }).year
} }
aria-label={t( aria-label={t(
"components.forms.date_picker.previous_year_button_aria_label" "components.forms.date_picker.previous_year_button_aria_label",
)} )}
type="button" type="button"
/> />
@@ -327,7 +328,7 @@ const CalendarAux = ({
{...getToggleButtonProps("year", yearItems, downshiftYear)} {...getToggleButtonProps("year", yearItems, downshiftYear)}
> >
{yearItemsFormatter.format( {yearItemsFormatter.format(
state.focusedDate.toDate(state.timeZone) state.focusedDate.toDate(state.timeZone),
)} )}
</Button> </Button>
<Button <Button
@@ -341,7 +342,7 @@ const CalendarAux = ({
state.maxValue.year < state.focusedDate.add({ years: 1 }).year state.maxValue.year < state.focusedDate.add({ years: 1 }).year
} }
aria-label={t( aria-label={t(
"components.forms.date_picker.next_year_button_aria_label" "components.forms.date_picker.next_year_button_aria_label",
)} )}
type="button" type="button"
/> />

4
packages/react/src/components/Forms/DatePicker/CalendarCell.tsx
View File

@@ -75,9 +75,9 @@ export const CalendarCell = ({ state, date }: CalendarCellProps) => {
isSelected, isSelected,
"c__calendar__wrapper__grid__week-row__button--today": isToday( "c__calendar__wrapper__grid__week-row__button--today": isToday(
date, date,
getLocalTimeZone() getLocalTimeZone(),
), ),
} },
)} )}
type="button" type="button"
disabled={isDisabled} disabled={isDisabled}

12
packages/react/src/components/Forms/DatePicker/DatePickerAux.tsx
View File

@@ -76,7 +76,7 @@ const DatePickerAux = ({
const isDateInvalid = useMemo( const isDateInvalid = useMemo(
() => pickerState.validationState === "invalid" || props.state === "error", () => pickerState.validationState === "invalid" || props.state === "error",
[pickerState.validationState, props.state] [pickerState.validationState, props.state],
); );
return ( return (
@@ -114,7 +114,7 @@ const DatePickerAux = ({
name={name && `${name}_start`} name={name && `${name}_start`}
value={convertDateValueToString( value={convertDateValueToString(
pickerState.value?.start ?? null, pickerState.value?.start ?? null,
props.timezone props.timezone,
)} )}
/> />
<input <input
@@ -122,7 +122,7 @@ const DatePickerAux = ({
name={name && `${name}_end`} name={name && `${name}_end`}
value={convertDateValueToString( value={convertDateValueToString(
pickerState.value?.end ?? null, pickerState.value?.end ?? null,
props.timezone props.timezone,
)} )}
/> />
</> </>
@@ -132,7 +132,7 @@ const DatePickerAux = ({
name={name} name={name}
value={convertDateValueToString( value={convertDateValueToString(
pickerState.value, pickerState.value,
props.timezone props.timezone,
)} )}
/> />
)} )}
@@ -148,7 +148,7 @@ const DatePickerAux = ({
aria-label={t( aria-label={t(
pickerState.isOpen pickerState.isOpen
? "components.forms.date_picker.toggle_button_aria_label_close" ? "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" color="neutral"
variant="tertiary" variant="tertiary"
@@ -178,7 +178,7 @@ const DatePickerAux = ({
} }
}} }}
aria-label={t( aria-label={t(
"components.forms.date_picker.clear_button_aria_label" "components.forms.date_picker.clear_button_aria_label",
)} )}
disabled={disabled} disabled={disabled}
type="button" type="button"

2
packages/react/src/components/Forms/DatePicker/index.stories.tsx
View File

@@ -140,7 +140,7 @@ export const ReactHookForm = () => {
resolver: yupResolver( resolver: yupResolver(
Yup.object().shape({ Yup.object().shape({
date: Yup.string().required(), date: Yup.string().required(),
}) }),
), ),
}); });

12
packages/react/src/components/Forms/DatePicker/tokens.ts
View File

@@ -2,7 +2,8 @@ import { DefaultTokens } from "@openfun/cunningham-tokens";
export const tokens = (defaults: DefaultTokens) => ({ export const tokens = (defaults: DefaultTokens) => ({
"border-color": defaults.contextuals.border.semantic.neutral.tertiary, "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--focus": defaults.contextuals.border.semantic.brand.primary,
"border-color--hover": defaults.contextuals.border.semantic.neutral.secondary, "border-color--hover": defaults.contextuals.border.semantic.neutral.secondary,
"border-radius": "8px", "border-radius": "8px",
@@ -11,7 +12,8 @@ export const tokens = (defaults: DefaultTokens) => ({
"border-style": "solid", "border-style": "solid",
"border-width": "1px", "border-width": "1px",
"value-color": defaults.contextuals.content.semantic.neutral.tertiary, "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, "font-size": defaults.globals.font.sizes.lg,
height: "3.5rem", height: "3.5rem",
"item-background-color--hover": "item-background-color--hover":
@@ -26,7 +28,9 @@ export const tokens = (defaults: DefaultTokens) => ({
defaults.contextuals.background.semantic.brand.tertiary, defaults.contextuals.background.semantic.brand.tertiary,
"range-selection-background-color--disabled": "range-selection-background-color--disabled":
defaults.contextuals.background.semantic.neutral.tertiary, defaults.contextuals.background.semantic.neutral.tertiary,
"grid-cell--border-color--today": defaults.contextuals.border.semantic.brand.primary, "grid-cell--border-color--today":
"grid-cell--color--today": defaults.contextuals.content.semantic.brand.primary, 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, "label-color--focus": defaults.contextuals.border.semantic.brand.secondary,
}); });

2
packages/react/src/components/Forms/FileUploader/FileUploaderMono.tsx
View File

@@ -13,7 +13,7 @@ export const FileUploaderMono = ({
const [file, setFile] = useState<File | undefined>( const [file, setFile] = useState<File | undefined>(
fakeDefaultFiles && fakeDefaultFiles.length > 0 fakeDefaultFiles && fakeDefaultFiles.length > 0
? fakeDefaultFiles[0] ? fakeDefaultFiles[0]
: undefined : undefined,
); );
// This is made to prevent useEffects inside DropZone that depends on `files` to trigger on each render, // 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. // doing this preserves the reference of the array.

2
packages/react/src/components/Forms/FileUploader/FileUploaderMulti.tsx
View File

@@ -45,7 +45,7 @@ export const FileUploaderMulti = ({
"components.forms.file_uploader.delete_file_name", "components.forms.file_uploader.delete_file_name",
{ {
name: file.name, name: file.name,
} },
)} )}
onClick={() => { onClick={() => {
setFiles(files.filter((f) => f !== file)); setFiles(files.filter((f) => f !== file));

2
packages/react/src/components/Forms/Input/InputPassword.tsx
View File

@@ -26,7 +26,7 @@ export const InputPassword = (props: Omit<InputProps, "rightIcon">) => {
color="neutral" color="neutral"
size="small" size="small"
aria-label={t( aria-label={t(
`components.forms.input.password.${showPassword ? "hide" : "show"}_password` `components.forms.input.password.${showPassword ? "hide" : "show"}_password`,
)} )}
/> />
} }

2
packages/react/src/components/Forms/Input/index.stories.tsx
View File

@@ -259,7 +259,7 @@ export const ReactHookForm = () => {
mode: "onChange", mode: "onChange",
reValidateMode: "onChange", reValidateMode: "onChange",
resolver: yupResolver(inputExampleSchema), resolver: yupResolver(inputExampleSchema),
} },
); );
return ( return (

3
packages/react/src/components/Forms/Input/tokens.ts
View File

@@ -18,5 +18,6 @@ export const tokens = (defaults: DefaultTokens) => ({
"label-color--focus": defaults.contextuals.content.semantic.brand.primary, "label-color--focus": defaults.contextuals.content.semantic.brand.primary,
"background-color": defaults.contextuals.background.surface.secondary, "background-color": defaults.contextuals.background.surface.secondary,
"value-color": defaults.contextuals.content.semantic.neutral.primary, "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,
}); });

3
packages/react/src/components/Forms/LabelledBox/tokens.ts
View File

@@ -5,5 +5,6 @@ export const tokens = (defaults: DefaultTokens) => ({
"label-color--big": defaults.contextuals.content.semantic.neutral.primary, "label-color--big": defaults.contextuals.content.semantic.neutral.primary,
"label-color--small--disabled": "label-color--small--disabled":
defaults.contextuals.content.semantic.neutral.secondary, 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,
}); });

3
packages/react/src/components/Forms/Radio/tokens.ts
View File

@@ -2,7 +2,8 @@ import { DefaultTokens } from "@openfun/cunningham-tokens";
export const tokens = (defaults: DefaultTokens) => ({ export const tokens = (defaults: DefaultTokens) => ({
"border-color": defaults.contextuals.border.semantic.neutral.tertiary, "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, "accent-color": defaults.contextuals.content.semantic.brand.tertiary,
"background-color": defaults.contextuals.background.surface.primary, "background-color": defaults.contextuals.background.surface.primary,
}); });

4
packages/react/src/components/Forms/Select/mono-common.tsx
View File

@@ -101,7 +101,7 @@ export const SelectMonoAux = ({
"c__select--" + state, "c__select--" + state,
{ {
"c__select--disabled": disabled, "c__select--disabled": disabled,
} },
)} )}
onBlur={() => onBlur={() =>
onBlur?.({ target: { value: downshiftReturn.selectedItem?.value } }) onBlur?.({ target: { value: downshiftReturn.selectedItem?.value } })
@@ -142,7 +142,7 @@ export const SelectMonoAux = ({
color="neutral" color="neutral"
size="nano" size="nano"
aria-label={t( aria-label={t(
"components.forms.select.clear_button_aria_label" "components.forms.select.clear_button_aria_label",
)} )}
className="c__select__inner__actions__clear" className="c__select__inner__actions__clear"
onClick={(e) => { onClick={(e) => {

8
packages/react/src/components/Forms/Select/multi-common.tsx
View File

@@ -24,14 +24,14 @@ import { SelectMultiMenu } from ":/components/Forms/Select/multi-menu";
*/ */
export function getMultiOptionsFilter( export function getMultiOptionsFilter(
selectedOptions: Option[], selectedOptions: Option[],
inputValue?: string inputValue?: string,
) { ) {
const optionsFilter = getOptionsFilter(inputValue); const optionsFilter = getOptionsFilter(inputValue);
return (option: Option) => { return (option: Option) => {
return ( return (
!selectedOptions.find( !selectedOptions.find(
(selectedOption) => (selectedOption) =>
optionToValue(selectedOption) === optionToValue(option) optionToValue(selectedOption) === optionToValue(option),
) && optionsFilter(option) ) && optionsFilter(option)
); );
}; };
@@ -83,7 +83,7 @@ export const SelectMultiAux = ({ children, ...props }: SelectMultiAuxProps) => {
"c__select--populated": props.selectedItems.length > 0, "c__select--populated": props.selectedItems.length > 0,
"c__select--monoline": props.monoline, "c__select--monoline": props.monoline,
"c__select--multiline": !props.monoline, "c__select--multiline": !props.monoline,
} },
)} )}
> >
<div <div
@@ -121,7 +121,7 @@ export const SelectMultiAux = ({ children, ...props }: SelectMultiAuxProps) => {
color="neutral" color="neutral"
size="nano" size="nano"
aria-label={t( 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" className="c__select__inner__actions__clear"
onClick={(e) => { onClick={(e) => {

2
packages/react/src/components/Forms/Select/multi-selected-items.tsx
View File

@@ -49,7 +49,7 @@ const SelectedItemsChips = ({
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
useMultipleSelectionReturn.removeSelectedItem( useMultipleSelectionReturn.removeSelectedItem(
selectedItemForRender selectedItemForRender,
); );
}} }}
icon={<span className="material-icons">close</span>} icon={<span className="material-icons">close</span>}

2
packages/react/src/components/Forms/Select/multi.stories.tsx
View File

@@ -509,7 +509,7 @@ export const ReactHookForm = () => {
.test({ .test({
test: (cityList) => test: (cityList) =>
cityList.every((city) => cityList.every((city) =>
[CitiesOptionEnum.PARIS, CitiesOptionEnum.TOKYO].includes(city) [CitiesOptionEnum.PARIS, CitiesOptionEnum.TOKYO].includes(city),
), ),
message: "Wrong answer!", message: "Wrong answer!",
}), }),

6
packages/react/src/components/Forms/Select/tokens.ts
View File

@@ -10,7 +10,8 @@ export const tokens = (defaults: DefaultTokens) => ({
"border-style": "solid", "border-style": "solid",
"border-width": "1px", "border-width": "1px",
"value-color": defaults.contextuals.content.semantic.neutral.primary, "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, "font-size": defaults.globals.font.sizes.md,
height: "3.5rem", height: "3.5rem",
"item-background-color--hover": "item-background-color--hover":
@@ -18,7 +19,8 @@ export const tokens = (defaults: DefaultTokens) => ({
"item-background-color--selected": "item-background-color--selected":
defaults.contextuals.background.semantic.brand.secondary, defaults.contextuals.background.semantic.brand.secondary,
"item-color": defaults.contextuals.content.semantic.neutral.primary, "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, "item-font-size": defaults.globals.font.sizes.md,
"background-color": defaults.contextuals.background.surface.primary, "background-color": defaults.contextuals.background.surface.primary,
"menu-background-color": defaults.contextuals.background.surface.primary, "menu-background-color": defaults.contextuals.background.surface.primary,

2
packages/react/src/components/Forms/Switch/index.tsx
View File

@@ -41,7 +41,7 @@ export const Switch = ({
{ {
"c__checkbox--disabled": props.disabled, "c__checkbox--disabled": props.disabled,
"c__switch--full-width": props.fullWidth, "c__switch--full-width": props.fullWidth,
} },
)} )}
> >
<Field compact={true} {...fieldProps}> <Field compact={true} {...fieldProps}>

6
packages/react/src/components/Forms/Switch/tokens.ts
View File

@@ -2,11 +2,13 @@ import { DefaultTokens } from "@openfun/cunningham-tokens";
export const tokens = (defaults: DefaultTokens) => ({ export const tokens = (defaults: DefaultTokens) => ({
"accent-color": defaults.contextuals.content.semantic.brand.tertiary, "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": "rail-background-color--disabled":
defaults.contextuals.content.semantic.disabled.primary, defaults.contextuals.content.semantic.disabled.primary,
"rail-border-radius": "50vw", "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": "handle-background-color--disabled":
defaults.contextuals.content.semantic.disabled.secondary, defaults.contextuals.content.semantic.disabled.secondary,
"handle-border-radius": "50%", "handle-border-radius": "50%",

6
packages/react/src/components/Forms/TextArea/tokens.ts
View File

@@ -10,10 +10,12 @@ export const tokens = (defaults: DefaultTokens) => ({
"border-color": defaults.contextuals.border.semantic.neutral.tertiary, "border-color": defaults.contextuals.border.semantic.neutral.tertiary,
"border-color--hover": defaults.contextuals.border.semantic.neutral.secondary, "border-color--hover": defaults.contextuals.border.semantic.neutral.secondary,
"border-color--focus": defaults.contextuals.border.semantic.brand.primary, "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", "border-style": "solid",
"label-color--focus": defaults.contextuals.border.semantic.brand.primary, "label-color--focus": defaults.contextuals.border.semantic.brand.primary,
"background-color": defaults.contextuals.background.surface.primary, "background-color": defaults.contextuals.background.surface.primary,
"value-color": defaults.contextuals.content.semantic.neutral.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,
}); });

2
packages/react/src/components/Modal/MessageModal.tsx
View File

@@ -26,7 +26,7 @@ export const MessageModal = ({
<span <span
className={classNames( className={classNames(
"material-icons", "material-icons",
`modal-message-${messageType}-icon` `modal-message-${messageType}-icon`,
)} )}
> >
{iconFromType(messageType)} {iconFromType(messageType)}

2
packages/react/src/components/Toast/index.tsx
View File

@@ -45,7 +45,7 @@ export const Toast = (props: ToastProps) => {
const removeAfterAnimation = async () => { const removeAfterAnimation = async () => {
await Promise.allSettled( await Promise.allSettled(
container.current!.getAnimations().map((animation) => animation.finished) container.current!.getAnimations().map((animation) => animation.finished),
); );
props.onDelete?.(); props.onDelete?.();
}; };

3
packages/react/src/components/Toast/tokens.ts
View File

@@ -4,7 +4,8 @@ export const tokens = (defaults: DefaultTokens) => {
return { return {
"slide-in-duration": "1000ms", "slide-in-duration": "1000ms",
"slide-out-duration": "300ms", "slide-out-duration": "300ms",
"background-color": defaults.contextuals.background.semantic.neutral.tertiary, "background-color":
defaults.contextuals.background.semantic.neutral.tertiary,
color: defaults.contextuals.content.semantic.neutral.primary, color: defaults.contextuals.content.semantic.neutral.primary,
"font-weight": defaults.globals.font.weights.regular, "font-weight": defaults.globals.font.weights.regular,
"icon-size": "19px", "icon-size": "19px",

10
packages/react/src/components/Tooltip/index.spec.tsx
View File

@@ -17,7 +17,7 @@ describe("<Tooltip />", () => {
<Button size="nano" variant="tertiary"> <Button size="nano" variant="tertiary">
⬅️ ⬅️
</Button> </Button>
</Tooltip> </Tooltip>,
); );
const button = screen.getByRole("button"); const button = screen.getByRole("button");
@@ -36,7 +36,7 @@ describe("<Tooltip />", () => {
<Button size="nano" variant="tertiary"> <Button size="nano" variant="tertiary">
⬅️ ⬅️
</Button> </Button>
</Tooltip> </Tooltip>,
); );
expect(screen.queryByText("Hi there")).not.toBeInTheDocument(); expect(screen.queryByText("Hi there")).not.toBeInTheDocument();
@@ -54,7 +54,7 @@ describe("<Tooltip />", () => {
<Button size="nano" variant="tertiary"> <Button size="nano" variant="tertiary">
⬅️ ⬅️
</Button> </Button>
</Tooltip> </Tooltip>,
); );
expect(screen.queryByText("Hi there")).not.toBeInTheDocument(); expect(screen.queryByText("Hi there")).not.toBeInTheDocument();
@@ -105,7 +105,7 @@ describe("<Tooltip />", () => {
<Button size="nano" variant="tertiary"> <Button size="nano" variant="tertiary">
⬅️ ⬅️
</Button> </Button>
</Tooltip> </Tooltip>,
); );
const button = screen.getByRole("button"); const button = screen.getByRole("button");
@@ -131,7 +131,7 @@ describe("<Tooltip />", () => {
<Button size="nano" variant="tertiary"> <Button size="nano" variant="tertiary">
⬅️ ⬅️
</Button> </Button>
</Tooltip> </Tooltip>,
); );
const button = screen.getByRole("button"); const button = screen.getByRole("button");

4
packages/react/src/docs/colors.stories.tsx
View File

@@ -99,7 +99,7 @@ export const ContextualBackgrounds: Story = {
})); }));
} }
return []; return [];
} },
); );
// Group by category // Group by category
@@ -111,7 +111,7 @@ export const ContextualBackgrounds: Story = {
acc[entry.category].push(entry); acc[entry.category].push(entry);
return acc; return acc;
}, },
{} as Record<string, typeof backgroundEntries> {} as Record<string, typeof backgroundEntries>,
); );
return ( return (

2
packages/react/src/docs/spacings.stories.tsx
View File

@@ -14,7 +14,7 @@ export const Default: Story = {
// Trier les espacements par valeur croissante avant de les afficher // Trier les espacements par valeur croissante avant de les afficher
// Sort spacings by value before rendering // Sort spacings by value before rendering
const sortedSpacings = Object.entries( const sortedSpacings = Object.entries(
tokens.themes.default.globals.spacings tokens.themes.default.globals.spacings,
).sort((a, b) => { ).sort((a, b) => {
// On retire les éventuelles unités pour comparer numériquement // On retire les éventuelles unités pour comparer numériquement
const parse = (v: any) => const parse = (v: any) =>