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

🚨(lint) update file for prettier 3.0.0

Browse Source 
Prettier 3.0.0 comes with new standards so we need to upgrade our files
to comply with it.
This commit is contained in:
Nathan Vasse
2023-07-18 15:43:56 +02:00
committed by NathanVss
parent 5f63c2a606
commit d85f9edac8
61 changed files with 421 additions and 419 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/demo/src/main.tsx
View File

@@ -6,5 +6,5 @@ import { App } from "./App";
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
<React.StrictMode>
<App />
</React.StrictMode>
</React.StrictMode>,
);

4
packages/react/src/components/Button/index.spec.tsx
View File

@@ -33,7 +33,7 @@ describe("<Button/>", () => {
render(
<Button icon={<div>Icon</div>} iconPosition="right">
Test button
</Button>
</Button>,
);
const button = screen.getByText("Test button");
const classes = Array.from(button.classList);
@@ -57,7 +57,7 @@ describe("<Button/>", () => {
render(
<Button onClick={handleClick} disabled={true}>
Test button
</Button>
</Button>,
);
const button = screen.getByRole("button", { name: "Test button" });
expect(handleClick).not.toBeCalled();

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

@@ -22,7 +22,7 @@ export const Button = forwardRef<HTMLButtonElement, Props>(
fullWidth,
...props
},
ref
ref,
) => {
const classes = [
"c__button",
@@ -49,5 +49,5 @@ export const Button = forwardRef<HTMLButtonElement, Props>(
{!!icon && iconPosition === "right" && icon}
</button>
);
}
},
);

2
packages/react/src/components/DataGrid/DataList.spec.tsx
View File

@@ -19,7 +19,7 @@ describe("<DataList/>", () => {
columns={[{ field: "firstName" }, { field: "lastName" }]}
rows={rows}
/>
</CunninghamProvider>
</CunninghamProvider>,
);
const table = screen.getByRole("table");

14
packages/react/src/components/DataGrid/SimpleDataGrid.spec.tsx
View File

@@ -42,7 +42,7 @@ describe("<SimpleDataGrid/>", () => {
]}
rows={rows}
/>
</CunninghamProvider>
</CunninghamProvider>,
);
const table = screen.getByRole("table");
@@ -106,7 +106,7 @@ describe("<SimpleDataGrid/>", () => {
},
]}
/>
</CunninghamProvider>
</CunninghamProvider>,
);
// Verify first page rows.
@@ -309,7 +309,7 @@ describe("<SimpleDataGrid/>", () => {
},
]}
/>
</CunninghamProvider>
</CunninghamProvider>,
);
// Verify first page rows are sorted by firstName ASC.
@@ -461,7 +461,7 @@ describe("<SimpleDataGrid/>", () => {
},
]}
/>
</CunninghamProvider>
</CunninghamProvider>,
);
// Make sure the sort is enabled on the first name column.
@@ -506,7 +506,7 @@ describe("<SimpleDataGrid/>", () => {
]}
rows={rows}
/>
</CunninghamProvider>
</CunninghamProvider>,
);
screen.getByRole("img", { name: /illustration of an empty table/i });
@@ -526,12 +526,12 @@ describe("<SimpleDataGrid/>", () => {
rows={rows}
isLoading={true}
/>
</CunninghamProvider>
</CunninghamProvider>,
);
// Verify that the empty state is not rendered.
expect(
screen.queryByRole("img", { name: /illustration of an empty table/i })
screen.queryByRole("img", { name: /illustration of an empty table/i }),
).toBeNull();
expect(screen.queryByText(/this table is empty/i)).toBeNull();

4
packages/react/src/components/DataGrid/SimpleDataGrid.tsx
View File

@@ -52,8 +52,8 @@ export const SimpleDataGrid = <T extends Row>({
setRealRows(
sortedRows.slice(
(pagination.page - 1) * pagination.pageSize,
pagination.page * pagination.pageSize
)
pagination.page * pagination.pageSize,
),
);
} else {
setRealRows(sortedRows);

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

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

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

@@ -58,7 +58,7 @@ export const ClientSideWithoutPagination = () => {
email: faker.internet.email(),
address: faker.location.streetAddress(),
})),
[]
[],
);
return (
<CunninghamProvider>
@@ -110,7 +110,7 @@ export const ClientSideWithPagination = () => {
year: faker.date.past().getFullYear(),
price: +faker.commerce.price({ min: 5000, max: 5005 }),
})),
[]
[],
);
const [rowSelection, setRowSelection] = useState({});
@@ -163,7 +163,7 @@ export const FullServerSide = () => {
email: faker.internet.email(),
address: faker.location.streetAddress(),
})),
[]
[],
);
const [rowSelection, setRowSelection] = useState({});
const [isLoading, setIsLoading] = useState(true);
@@ -194,14 +194,14 @@ export const FullServerSide = () => {
setTimeout(() => {
// Set the pagination length.
pagination.setPagesCount(
Math.ceil(sortedDatabase.length / pagination.pageSize)
Math.ceil(sortedDatabase.length / pagination.pageSize),
);
// Select the rows to display on the current page.
setRows(
sortedDatabase.slice(
(pagination.page - 1) * pagination.pageSize,
pagination.page * pagination.pageSize
)
pagination.page * pagination.pageSize,
),
);
setIsLoading(false);
}, 1000);
@@ -261,7 +261,7 @@ export const DataListOnly = () => {
title: faker.word.sample(),
date: faker.date.past({ years: 1 }).toISOString(),
})),
[]
[],
);
return (

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

@@ -84,11 +84,11 @@ export const DataGrid = <T extends Row>({
*/
const paginationState = useMemo(
() => paginationToPaginationState(pagination),
[pagination]
[pagination],
);
const headlessSorting = useMemo(
() => sortModelToSortingState(sortModel),
[sortModel]
[sortModel],
);
/**
@@ -110,7 +110,7 @@ export const DataGrid = <T extends Row>({
// a TS error.
if (typeof newHeadlessSorting === "function") {
onSortModelChange?.(
sortingStateToSortModel(newHeadlessSorting(headlessSorting))
sortingStateToSortModel(newHeadlessSorting(headlessSorting)),
);
}
},
@@ -183,7 +183,7 @@ export const DataGrid = <T extends Row>({
>
{flexRender(
header.column.columnDef.header,
header.getContext()
header.getContext(),
)}
{header.column.getIsSorted() === "asc" && (
<span className="material-icons">
@@ -226,7 +226,7 @@ export const DataGrid = <T extends Row>({
>
{flexRender(
cell.column.columnDef.cell,
cell.getContext()
cell.getContext(),
)}
</td>
);

2
packages/react/src/components/DataGrid/utils.tsx
View File

@@ -92,7 +92,7 @@ export const sortingStateToSortModel = (sorting: SortingState): SortModel => {
};
export const paginationToPaginationState = (
pagination?: PaginationProps
pagination?: PaginationProps,
): PaginationState | undefined => {
if (!pagination) {
return undefined;

16
packages/react/src/components/Forms/Checkbox/index.spec.tsx
View File

@@ -48,14 +48,14 @@ describe("<Checkbox/>", () => {
render(<Checkbox label="Agree" state="success" text="Success text" />);
expect(screen.getByText("Success text")).toBeInTheDocument();
expect(
document.querySelector(".c__field.c__field--success")
document.querySelector(".c__field.c__field--success"),
).toBeInTheDocument();
});
it("renders with state=error", async () => {
render(<Checkbox label="Agree" state="error" text="Error text" />);
expect(screen.getByText("Error text")).toBeInTheDocument();
expect(
document.querySelector(".c__field.c__field--error")
document.querySelector(".c__field.c__field--error"),
).toBeInTheDocument();
});
@@ -64,7 +64,7 @@ describe("<Checkbox/>", () => {
<CheckboxGroup>
<Checkbox label="Agree" />
<Checkbox label="Disagree" />
</CheckboxGroup>
</CheckboxGroup>,
);
screen.getByRole("checkbox", {
name: "Agree",
@@ -78,7 +78,7 @@ describe("<Checkbox/>", () => {
<CheckboxGroup text="Text">
<Checkbox label="Agree" />
<Checkbox label="Disagree" />
</CheckboxGroup>
</CheckboxGroup>,
);
expect(screen.getByText("Text")).toBeInTheDocument();
});
@@ -87,11 +87,11 @@ describe("<Checkbox/>", () => {
<CheckboxGroup state="success" text="Success text">
<Checkbox label="Agree" />
<Checkbox label="Disagree" />
</CheckboxGroup>
</CheckboxGroup>,
);
expect(screen.getByText("Success text")).toBeInTheDocument();
expect(
document.querySelector(".c__checkbox__group.c__field.c__field--success")
document.querySelector(".c__checkbox__group.c__field.c__field--success"),
).toBeInTheDocument();
});
it("renders with group state=error", async () => {
@@ -99,11 +99,11 @@ describe("<Checkbox/>", () => {
<CheckboxGroup state="error" text="Error text">
<Checkbox label="Agree" />
<Checkbox label="Disagree" />
</CheckboxGroup>
</CheckboxGroup>,
);
expect(screen.getByText("Error text")).toBeInTheDocument();
expect(
document.querySelector(".c__checkbox__group.c__field.c__field--error")
document.querySelector(".c__checkbox__group.c__field.c__field--error"),
).toBeInTheDocument();
});
});

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

@@ -100,7 +100,7 @@ const CalendarAux = forwardRef(
nextButtonProps,
calendarProps,
}: CalendarAuxProps,
ref: Ref<HTMLDivElement>
ref: Ref<HTMLDivElement>,
) => {
const { t } = useCunningham();
@@ -118,7 +118,7 @@ const CalendarAux = forwardRef(
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 });
@@ -134,15 +134,15 @@ const CalendarAux = forwardRef(
const yearItems: Array<Option> = useMemo(() => {
const calendarCurrentUser = createCalendar(
new Intl.DateTimeFormat().resolvedOptions().calendar
new Intl.DateTimeFormat().resolvedOptions().calendar,
);
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 });
@@ -158,7 +158,7 @@ const CalendarAux = forwardRef(
const useDownshiftSelect = (
key: string,
items: Array<Option>
items: Array<Option>,
): UseSelectReturnValue<Option> => {
return useSelect({
items,
@@ -192,12 +192,12 @@ const CalendarAux = forwardRef(
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);
@@ -205,7 +205,7 @@ const CalendarAux = forwardRef(
downshift.toggleMenu();
},
"aria-label": t(
`components.forms.date_picker.${key}_select_button_aria_label`
`components.forms.date_picker.${key}_select_button_aria_label`,
),
});
@@ -228,7 +228,7 @@ const CalendarAux = forwardRef(
{...{
...prevButtonOtherProps,
"aria-label": t(
"components.forms.date_picker.previous_month_button_aria_label"
"components.forms.date_picker.previous_month_button_aria_label",
),
}}
disabled={isPrevButtonDisabled}
@@ -243,7 +243,7 @@ const CalendarAux = forwardRef(
{...getToggleButtonProps("month", monthItems, downshiftMonth)}
>
{selectedMonthItemFormatter.format(
state.focusedDate.toDate(state.timeZone)
state.focusedDate.toDate(state.timeZone),
)}
</Button>
<Button
@@ -253,7 +253,7 @@ const CalendarAux = forwardRef(
{...{
...nextButtonOtherProps,
"aria-label": t(
"components.forms.date_picker.next_month_button_aria_label"
"components.forms.date_picker.next_month_button_aria_label",
),
}}
disabled={isNextButtonDisabled}
@@ -272,7 +272,7 @@ const CalendarAux = forwardRef(
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",
)}
/>
<Button
@@ -284,7 +284,7 @@ const CalendarAux = forwardRef(
{...getToggleButtonProps("year", yearItems, downshiftYear)}
>
{yearItemsFormatter.format(
state.focusedDate.toDate(state.timeZone)
state.focusedDate.toDate(state.timeZone),
)}
</Button>
<Button
@@ -297,7 +297,7 @@ const CalendarAux = forwardRef(
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",
)}
/>
</div>
@@ -310,7 +310,7 @@ const CalendarAux = forwardRef(
<DropdownValues options={yearItems} downShift={downshiftYear} />
</div>
);
}
},
);
export const Calendar = (props: CalendarProps<DateValue>) => {

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

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

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

@@ -29,7 +29,7 @@ export const CalendarGrid = ({
startDate: state.visibleRange.start,
endDate: endOfMonth(state.visibleRange.start),
},
state
state,
);
const shortDayFormatter = useDateFormatter({
@@ -61,7 +61,7 @@ export const CalendarGrid = ({
.getDatesInWeek(weekIndex)
.map(
(date, i) =>
date && <CalendarCell key={i} state={state} date={date} />
date && <CalendarCell key={i} state={state} date={date} />,
)}
</tr>
))}

116
packages/react/src/components/Forms/DatePicker/DatePicker.spec.tsx
View File

@@ -20,7 +20,7 @@ describe("<DatePicker/>", () => {
expect(calendar).toBeDefined();
expect(calendar).not.toBeNull();
expect(Array.from(calendar!.classList)).contains(
"c__calendar__wrapper--opened"
"c__calendar__wrapper--opened",
);
};
@@ -28,7 +28,7 @@ describe("<DatePicker/>", () => {
const dateField = screen.queryByRole("presentation");
expect(dateField).toBeTruthy();
expect(Array.from(dateField!.parentElement!.classList)).contains(
"c__date-picker__inner--collapsed"
"c__date-picker__inner--collapsed",
);
};
@@ -38,12 +38,12 @@ describe("<DatePicker/>", () => {
const expectDatesToBeEqual = (
firstDate: Date | string | undefined | null,
secondDate: Date | string | undefined | null
secondDate: Date | string | undefined | null,
) => {
expect(firstDate).toBeDefined();
expect(secondDate).toBeDefined();
expect(new Date(firstDate!).toLocaleDateString()).eq(
new Date(secondDate!).toLocaleDateString()
new Date(secondDate!).toLocaleDateString(),
);
};
@@ -72,7 +72,7 @@ describe("<DatePicker/>", () => {
const expectMenuToBeClosed = (menu: HTMLElement) => {
expect(Array.from(menu.classList)).not.contains(
"c__calendar__menu--opened"
"c__calendar__menu--opened",
);
};
@@ -88,7 +88,7 @@ describe("<DatePicker/>", () => {
render(
<CunninghamProvider>
<DatePicker label="Pick a date" name="datepicker" />
</CunninghamProvider>
</CunninghamProvider>,
);
const [input, button] = await screen.findAllByRole("button");
@@ -135,7 +135,7 @@ describe("<DatePicker/>", () => {
render(
<CunninghamProvider>
<DatePicker label="Pick a date" name="datepicker" />
</CunninghamProvider>
</CunninghamProvider>,
);
const [input, toggleButton] = await screen.findAllByRole("button")!;
@@ -154,12 +154,12 @@ describe("<DatePicker/>", () => {
render(
<CunninghamProvider>
<DatePicker label="Pick a date" name="datepicker" />
</CunninghamProvider>
</CunninghamProvider>,
);
// Get elements that should receive focus when no date is picked.
const [input, toggleButton] = await screen.findAllByRole("button")!;
const [monthSegment, daySegment, yearSegment] = await screen.findAllByRole(
"spinbutton"
"spinbutton",
)!;
await user.keyboard("{Tab}");
@@ -187,7 +187,7 @@ describe("<DatePicker/>", () => {
name="datepicker"
defaultValue="2023-04-25"
/>
</CunninghamProvider>
</CunninghamProvider>,
);
// Get elements that should receive focus when a date is already picked.
@@ -196,7 +196,7 @@ describe("<DatePicker/>", () => {
name: "Clear date",
});
const [monthSegment, daySegment, yearSegment] = await screen.findAllByRole(
"spinbutton"
"spinbutton",
)!;
// Navigate through elements using Tab.
@@ -224,7 +224,7 @@ describe("<DatePicker/>", () => {
render(
<CunninghamProvider>
<DatePicker label="Pick a date" name="datepicker" />
</CunninghamProvider>
</CunninghamProvider>,
);
const [input, toggleButton] = await screen.findAllByRole("button");
await user.click(input);
@@ -235,8 +235,8 @@ describe("<DatePicker/>", () => {
// Select the first clickable grid-cell.
const gridCellButton = within(
gridCells.filter(
(gridCell) => !gridCell.getAttribute("aria-disabled")
)![0]
(gridCell) => !gridCell.getAttribute("aria-disabled"),
)![0],
).getByRole("button")!;
// Pick a date.
@@ -254,7 +254,7 @@ describe("<DatePicker/>", () => {
const selectedDate = within(
screen.getByRole("gridcell", {
selected: true,
})!
})!,
)
.getByRole("button")!
.getAttribute("aria-label")
@@ -276,10 +276,10 @@ describe("<DatePicker/>", () => {
name="datepicker"
defaultValue="2023-04-05"
/>
</CunninghamProvider>
</CunninghamProvider>,
);
const [monthSegment, daySegment, yearSegment] = await screen.findAllByRole(
"spinbutton"
"spinbutton",
)!;
// Select the first segment, month one.
await user.click(monthSegment);
@@ -312,10 +312,10 @@ describe("<DatePicker/>", () => {
defaultValue="2023-04-05"
minValue="2022-12-03"
/>
</CunninghamProvider>
</CunninghamProvider>,
);
const [monthSegment, daySegment, yearSegment] = await screen.findAllByRole(
"spinbutton"
"spinbutton",
)!;
// Select the first segment, month one.
await user.click(monthSegment);
@@ -356,7 +356,7 @@ describe("<DatePicker/>", () => {
name="datepicker"
defaultValue={defaultValue}
/>
</CunninghamProvider>
</CunninghamProvider>,
);
// Get picked date.
const dateFieldContent = screen.getByRole("presentation").textContent;
@@ -377,10 +377,10 @@ describe("<DatePicker/>", () => {
defaultValue={defaultValue}
value={value}
/>
</CunninghamProvider>
)
</CunninghamProvider>,
),
).toThrow(
"You cannot use both defaultValue and value props on DatePicker component"
"You cannot use both defaultValue and value props on DatePicker component",
);
});
@@ -396,12 +396,12 @@ describe("<DatePicker/>", () => {
name="datepicker"
defaultValue={invalidDate}
/>
</CunninghamProvider>
)
</CunninghamProvider>,
),
).toThrow(
"Invalid date format when initializing props on DatePicker component"
"Invalid date format when initializing props on DatePicker component",
);
}
},
);
it("clears date", async () => {
@@ -414,7 +414,7 @@ describe("<DatePicker/>", () => {
name="datepicker"
defaultValue={defaultValue}
/>
</CunninghamProvider>
</CunninghamProvider>,
);
const clearButton = screen.getByRole("button", {
name: "Clear date",
@@ -448,7 +448,7 @@ describe("<DatePicker/>", () => {
defaultValue="2023-01-01"
minValue="2023-02-01"
/>
</CunninghamProvider>
</CunninghamProvider>,
);
await expectDatePickerStateToBe("invalid");
});
@@ -462,7 +462,7 @@ describe("<DatePicker/>", () => {
defaultValue="2023-03-01"
maxValue="2023-02-01"
/>
</CunninghamProvider>
</CunninghamProvider>,
);
await expectDatePickerStateToBe("invalid");
});
@@ -478,7 +478,7 @@ describe("<DatePicker/>", () => {
maxValue="2023-04-01"
minValue="2023-05-01"
/>
</CunninghamProvider>
</CunninghamProvider>,
);
await expectDatePickerStateToBe("invalid");
});
@@ -517,7 +517,7 @@ describe("<DatePicker/>", () => {
expectCalendarToBeOpen();
const gridCell = within(
await screen.getByRole("gridcell", { name: "12" })
await screen.getByRole("gridcell", { name: "12" }),
).getByRole("button")!;
// Select a new value in the calendar grid.
@@ -547,7 +547,7 @@ describe("<DatePicker/>", () => {
defaultValue="2023-03-01"
disabled={true}
/>
</CunninghamProvider>
</CunninghamProvider>,
);
await expectDatePickerStateToBe("disabled");
@@ -559,13 +559,13 @@ describe("<DatePicker/>", () => {
// Make sure the clear button is not visible and disabled.
expect(
screen.queryByRole("button", { name: "Clear date", hidden: true })
screen.queryByRole("button", { name: "Clear date", hidden: true }),
).toBeDisabled();
// Make sure each segment of the date field is disabled.
const dateFieldInputs = await screen.queryAllByRole("spinbutton");
dateFieldInputs.forEach((dateFieldInput) =>
expect(dateFieldInput).toHaveAttribute("aria-disabled")
expect(dateFieldInput).toHaveAttribute("aria-disabled"),
);
});
@@ -578,7 +578,7 @@ describe("<DatePicker/>", () => {
name="datepicker"
defaultValue="2023-03-01"
/>
</CunninghamProvider>
</CunninghamProvider>,
);
const toggleButton = (await screen.findAllByRole("button"))![1];
await user.click(toggleButton);
@@ -674,7 +674,7 @@ describe("<DatePicker/>", () => {
name="datepicker"
defaultValue={defaultValue}
/>
</CunninghamProvider>
</CunninghamProvider>,
);
const toggleButton = (await screen.findAllByRole("button"))![1];
await user.click(toggleButton);
@@ -712,7 +712,7 @@ describe("<DatePicker/>", () => {
name="datepicker"
defaultValue={defaultValue}
/>
</CunninghamProvider>
</CunninghamProvider>,
);
const toggleButton = (await screen.findAllByRole("button"))![1];
await user.click(toggleButton);
@@ -754,7 +754,7 @@ describe("<DatePicker/>", () => {
minValue={minValue}
maxValue={maxValue}
/>
</CunninghamProvider>
</CunninghamProvider>,
);
const toggleButton = (await screen.findAllByRole("button"))![1];
@@ -787,7 +787,7 @@ describe("<DatePicker/>", () => {
minValue={minValue}
maxValue={maxValue}
/>
</CunninghamProvider>
</CunninghamProvider>,
);
const toggleButton = (await screen.findAllByRole("button"))![1];
@@ -819,7 +819,7 @@ describe("<DatePicker/>", () => {
minValue={minValue}
maxValue={maxValue}
/>
</CunninghamProvider>
</CunninghamProvider>,
);
// Open the calendar.
@@ -855,7 +855,9 @@ describe("<DatePicker/>", () => {
try {
const button = within(gridCell).getByRole("button")!;
const value = new Date(
button.getAttribute("aria-label")!.replace("First available date", "")
button
.getAttribute("aria-label")!
.replace("First available date", ""),
);
expect(value.getMonth() === minValue.getMonth());
if (value.getDate() < minValue.getDate()) {
@@ -866,7 +868,7 @@ describe("<DatePicker/>", () => {
} catch (e: any) {
// Make sure outside grid-cells render any button element, even disabled.
expect(e.message).contains(
'Unable to find an accessible element with the role "button"'
'Unable to find an accessible element with the role "button"',
);
}
});
@@ -897,7 +899,7 @@ describe("<DatePicker/>", () => {
} catch (e: any) {
// Make sure outside grid-cells render any button element, even disabled.
expect(e.message).contains(
'Unable to find an accessible element with the role "button"'
'Unable to find an accessible element with the role "button"',
);
}
});
@@ -913,7 +915,7 @@ describe("<DatePicker/>", () => {
name="datepicker"
defaultValue={defaultValue}
/>
</CunninghamProvider>
</CunninghamProvider>,
);
const toggleButton = (await screen.findAllByRole("button"))![1];
await user.click(toggleButton);
@@ -931,7 +933,7 @@ describe("<DatePicker/>", () => {
// Make sure the selected item matched the default value.
let focusedMonth = monthDropdown.textContent?.replace(
"arrow_drop_down",
""
"",
);
expect(focusedMonth).eq("May");
@@ -964,7 +966,7 @@ describe("<DatePicker/>", () => {
name="datepicker"
defaultValue={defaultValue}
/>
</CunninghamProvider>
</CunninghamProvider>,
);
const toggleButton = (await screen.findAllByRole("button"))![1];
await user.click(toggleButton);
@@ -1011,7 +1013,7 @@ describe("<DatePicker/>", () => {
name="datepicker"
defaultValue={defaultValue}
/>
</CunninghamProvider>
</CunninghamProvider>,
);
// Open the calendar.
const toggleButton = (await screen.findAllByRole("button"))![1];
@@ -1025,7 +1027,7 @@ describe("<DatePicker/>", () => {
try {
const button = within(gridCell).getByRole("button");
const value = new Date(
button.getAttribute("aria-label")!.replace("selected", "")
button.getAttribute("aria-label")!.replace("selected", ""),
);
expect(button).not.toBeDisabled();
expect(defaultValue.getMonth() === value.getMonth());
@@ -1033,7 +1035,7 @@ describe("<DatePicker/>", () => {
} catch (e: any) {
// Make sure outside grid-cells render any button element, even disabled.
expect(e.message).contains(
'Unable to find an accessible element with the role "button"'
'Unable to find an accessible element with the role "button"',
);
}
});
@@ -1051,7 +1053,7 @@ describe("<DatePicker/>", () => {
name="datepicker"
defaultValue={defaultValue}
/>
</CunninghamProvider>
</CunninghamProvider>,
);
// Open calendar.
@@ -1084,7 +1086,7 @@ describe("<DatePicker/>", () => {
name="datepicker"
defaultValue={defaultValue}
/>
</CunninghamProvider>
</CunninghamProvider>,
);
const toggleButton = (await screen.findAllByRole("button"))![1];
@@ -1115,7 +1117,7 @@ describe("<DatePicker/>", () => {
locale="hi-IN-u-ca-indian"
defaultValue="2023-06-25"
/>
</CunninghamProvider>
</CunninghamProvider>,
);
const input = (await screen.findAllByRole("button"))[0];
@@ -1160,7 +1162,7 @@ describe("<DatePicker/>", () => {
render(
<CunninghamProvider currentLocale="fr-FR">
<DatePicker label="Pick a date" defaultValue="2023-06-25" />
</CunninghamProvider>
</CunninghamProvider>,
);
const input = (await screen.findAllByRole("button"))[0];
@@ -1209,7 +1211,7 @@ describe("<DatePicker/>", () => {
defaultValue="2023-06-25"
locale="hi-IN-u-ca-indian"
/>
</CunninghamProvider>
</CunninghamProvider>,
);
const input = (await screen.findAllByRole("button"))[0];
@@ -1257,8 +1259,8 @@ describe("<DatePicker/>", () => {
render(
<CunninghamProvider>
<DatePicker label="Pick a date" locale="111" />
</CunninghamProvider>
)
</CunninghamProvider>,
),
).toThrow("Incorrect locale information provided");
});
});

6
packages/react/src/components/Forms/DatePicker/DatePicker.tsx
View File

@@ -26,7 +26,7 @@ export type DatePickerProps = DatePickerAuxSubProps & {
export const DatePicker = (props: DatePickerProps) => {
if (props.defaultValue && props.value) {
throw new Error(
"You cannot use both defaultValue and value props on DatePicker component"
"You cannot use both defaultValue and value props on DatePicker component",
);
}
const ref = useRef<HTMLDivElement>(null);
@@ -48,12 +48,12 @@ export const DatePicker = (props: DatePickerProps) => {
const { fieldProps, calendarProps, ...pickerProps } = useDatePicker(
options,
pickerState,
ref
ref,
);
const labelAsPlaceholder = useMemo(
() => !isFocused && !pickerState.isOpen && !pickerState.value,
[pickerState.value, pickerState.isOpen, isFocused]
[pickerState.value, pickerState.isOpen, isFocused],
);
const calendar = <Calendar {...calendarProps} />;

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

@@ -65,7 +65,7 @@ const DatePickerAux = forwardRef(
optionalClassName,
...props
}: DatePickerAuxProps,
ref: Ref<HTMLDivElement>
ref: Ref<HTMLDivElement>,
) => {
const { t, currentLocale } = useCunningham();
const pickerRef = useRef<HTMLDivElement>(null);
@@ -73,7 +73,7 @@ const DatePickerAux = forwardRef(
const isDateInvalid = useMemo(
() =>
pickerState.validationState === "invalid" || props.state === "error",
[pickerState.validationState, props.state]
[pickerState.validationState, props.state],
);
// onPress props don't exist on the <Button /> component.
@@ -133,7 +133,7 @@ const DatePickerAux = forwardRef(
"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="tertiary"
@@ -156,7 +156,7 @@ const DatePickerAux = forwardRef(
icon={<span className="material-icons">cancel</span>}
onClick={onClear}
aria-label={t(
"components.forms.date_picker.clear_button_aria_label"
"components.forms.date_picker.clear_button_aria_label",
)}
disabled={disabled}
/>
@@ -174,7 +174,7 @@ const DatePickerAux = forwardRef(
</Field>
</I18nProvider>
);
}
},
);
export default DatePickerAux;

100
packages/react/src/components/Forms/DatePicker/DateRangePicker.spec.tsx
View File

@@ -9,12 +9,12 @@ import { Button } from ":/components/Button";
describe("<DateRangePicker/>", () => {
const expectDatesToBeEqual = (
firstDate: Date | string | undefined | null,
secondDate: Date | string | undefined | null
secondDate: Date | string | undefined | null,
) => {
expect(firstDate).toBeDefined();
expect(secondDate).toBeDefined();
expect(new Date(firstDate!).toLocaleDateString()).eq(
new Date(secondDate!).toLocaleDateString()
new Date(secondDate!).toLocaleDateString(),
);
};
@@ -31,7 +31,7 @@ describe("<DateRangePicker/>", () => {
expect(dateFields.length).eq(2);
dateFields.forEach((dateField) => {
expect(Array.from(dateField.parentElement!.classList)).contains(
"c__date-picker__inner--collapsed"
"c__date-picker__inner--collapsed",
);
});
};
@@ -48,7 +48,7 @@ describe("<DateRangePicker/>", () => {
expect(calendar).toBeDefined();
expect(calendar).not.toBeNull();
expect(Array.from(calendar!.classList)).contains(
"c__calendar__wrapper--opened"
"c__calendar__wrapper--opened",
);
};
@@ -68,7 +68,7 @@ describe("<DateRangePicker/>", () => {
endLabel="Pick a date"
name="datepicker"
/>
</CunninghamProvider>
</CunninghamProvider>,
);
const [input, button] = await screen.findAllByRole("button");
@@ -119,7 +119,7 @@ describe("<DateRangePicker/>", () => {
endLabel="End date"
name="datepicker"
/>
</CunninghamProvider>
</CunninghamProvider>,
);
// Get elements that should receive focus when no date is picked.
const [input, toggleButton] = await screen.findAllByRole("button")!;
@@ -151,7 +151,7 @@ describe("<DateRangePicker/>", () => {
name="datepicker"
defaultValue={[start, end]}
/>
</CunninghamProvider>
</CunninghamProvider>,
);
// Get picked date.
const [startInput, endInput] = await screen.queryAllByRole("presentation");
@@ -170,7 +170,7 @@ describe("<DateRangePicker/>", () => {
name="datepicker"
defaultValue={["2023-04-25", "2023-05-25"]}
/>
</CunninghamProvider>
</CunninghamProvider>,
);
// Get elements that should receive focus when a date is already picked.
@@ -225,7 +225,7 @@ describe("<DateRangePicker/>", () => {
endLabel="End date"
name="datepicker"
/>
</CunninghamProvider>
</CunninghamProvider>,
);
const [input, toggleButton] = await screen.findAllByRole("button");
await user.click(input);
@@ -236,8 +236,8 @@ describe("<DateRangePicker/>", () => {
// Select the first clickable grid-cell.
const startGridCellButton = within(
gridCells.filter(
(gridCell) => !gridCell.getAttribute("aria-disabled")
)![0]
(gridCell) => !gridCell.getAttribute("aria-disabled"),
)![0],
).getByRole("button")!;
// Pick a start date.
@@ -249,8 +249,8 @@ describe("<DateRangePicker/>", () => {
// Select the second clickable grid-cell.
const endGridCellButton = within(
gridCells.filter(
(gridCell) => !gridCell.getAttribute("aria-disabled")
)![1]
(gridCell) => !gridCell.getAttribute("aria-disabled"),
)![1],
).getByRole("button")!;
// Pick an end date.
@@ -295,7 +295,7 @@ describe("<DateRangePicker/>", () => {
endLabel="End date"
name="datepicker"
/>
</CunninghamProvider>
</CunninghamProvider>,
);
const [input, toggleButton] = await screen.findAllByRole("button");
await user.click(input);
@@ -306,8 +306,8 @@ describe("<DateRangePicker/>", () => {
// Select the first clickable grid-cell.
const gridCellButton = within(
gridCells.filter(
(gridCell) => !gridCell.getAttribute("aria-disabled")
)![0]
(gridCell) => !gridCell.getAttribute("aria-disabled"),
)![0],
).getByRole("button")!;
// Pick a start date.
@@ -358,7 +358,7 @@ describe("<DateRangePicker/>", () => {
defaultValue={["2023-01-01", "2023-01-01"]}
name="datepicker"
/>
</CunninghamProvider>
</CunninghamProvider>,
);
const input = (await screen.findAllByRole("button"))![0];
await user.click(input);
@@ -419,7 +419,7 @@ describe("<DateRangePicker/>", () => {
name="datepicker"
defaultValue={["2023-01-01", "2023-01-01"]}
/>
</CunninghamProvider>
</CunninghamProvider>,
);
const input = (await screen.findAllByRole("button"))![0];
await user.click(input);
@@ -468,7 +468,7 @@ describe("<DateRangePicker/>", () => {
name="datepicker"
defaultValue={["2023-01-01", "2023-01-01"]}
/>
</CunninghamProvider>
</CunninghamProvider>,
);
const input = (await screen.findAllByRole("button"))![0];
await user.click(input);
@@ -516,7 +516,7 @@ describe("<DateRangePicker/>", () => {
endLabel="End date"
name="datepicker"
/>
</CunninghamProvider>
</CunninghamProvider>,
);
// Open calendar to display text segment
@@ -575,7 +575,7 @@ describe("<DateRangePicker/>", () => {
endLabel="End date"
name="datepicker"
/>
</CunninghamProvider>
</CunninghamProvider>,
);
// Open calendar to display text segment
@@ -640,10 +640,10 @@ describe("<DateRangePicker/>", () => {
defaultValue={["2022-05-25", "2022-05-26"]}
value={["2022-05-25", "2022-05-26"]}
/>
</CunninghamProvider>
)
</CunninghamProvider>,
),
).toThrow(
"You cannot use both defaultValue and value props on DateRangePicker component"
"You cannot use both defaultValue and value props on DateRangePicker component",
);
});
@@ -662,10 +662,10 @@ describe("<DateRangePicker/>", () => {
name="datepicker"
defaultValue={[start, end]}
/>
</CunninghamProvider>
)
</CunninghamProvider>,
),
).toThrow(
"Invalid date format when initializing props on DatePicker component"
"Invalid date format when initializing props on DatePicker component",
);
});
@@ -679,7 +679,7 @@ describe("<DateRangePicker/>", () => {
name="datepicker"
defaultValue={["2024-05-25", "2022-05-26"]}
/>
</CunninghamProvider>
</CunninghamProvider>,
);
await expectDateRangePickerStateToBe("invalid");
});
@@ -696,7 +696,7 @@ describe("<DateRangePicker/>", () => {
name="datepicker"
defaultValue={[start, end]}
/>
</CunninghamProvider>
</CunninghamProvider>,
);
const clearButton = screen.getByRole("button", {
@@ -707,7 +707,7 @@ describe("<DateRangePicker/>", () => {
// Date field's value should be set to a placeholder value.
const [startInput, endInput] = await screen.queryAllByRole(
"presentation"
"presentation",
);
expect(startInput.textContent).eq("mm/dd/yyyy");
expect(endInput.textContent).eq("mm/dd/yyyy");
@@ -720,8 +720,8 @@ describe("<DateRangePicker/>", () => {
expect(startGridCell.getAttribute("aria-selected")).toBeNull();
expect(
startGridCell.classList.contains(
"c__calendar__wrapper__grid__week-row__background--range--start"
)
"c__calendar__wrapper__grid__week-row__background--range--start",
),
).toBe(false);
// Make sure end grid-cell is not selected anymore.
@@ -731,8 +731,8 @@ describe("<DateRangePicker/>", () => {
expect(endGridCell.getAttribute("aria-selected")).toBeNull();
expect(
endGridCell.classList.contains(
"c__calendar__wrapper__grid__week-row__background--range--end"
)
"c__calendar__wrapper__grid__week-row__background--range--end",
),
).toBe(false);
// Close the calendar.
@@ -741,7 +741,7 @@ describe("<DateRangePicker/>", () => {
// Make sure the empty date field is hidden when closing the calendar.
await expectDateFieldsToBeHidden();
}
},
);
it.each([
@@ -759,10 +759,10 @@ describe("<DateRangePicker/>", () => {
defaultValue={[start, end]}
minValue="2023-02-01"
/>
</CunninghamProvider>
</CunninghamProvider>,
);
await expectDateRangePickerStateToBe("invalid");
}
},
);
it.each([
@@ -780,10 +780,10 @@ describe("<DateRangePicker/>", () => {
defaultValue={[start, end]}
maxValue="2023-02-01"
/>
</CunninghamProvider>
</CunninghamProvider>,
);
await expectDateRangePickerStateToBe("invalid");
}
},
);
it("renders disabled", async () => {
@@ -796,7 +796,7 @@ describe("<DateRangePicker/>", () => {
defaultValue={["2023-01-01", "2023-01-01"]}
disabled={true}
/>
</CunninghamProvider>
</CunninghamProvider>,
);
await expectDateRangePickerStateToBe("disabled");
@@ -808,13 +808,13 @@ describe("<DateRangePicker/>", () => {
// Make sure the clear button is not visible and disabled.
expect(
screen.queryByRole("button", { name: "Clear date", hidden: true })
screen.queryByRole("button", { name: "Clear date", hidden: true }),
).toBeDisabled();
// Make sure each segment of the date field is disabled.
const dateFieldInputs = await screen.queryAllByRole("spinbutton");
dateFieldInputs.forEach((dateFieldInput) =>
expect(dateFieldInput).toHaveAttribute("aria-disabled")
expect(dateFieldInput).toHaveAttribute("aria-disabled"),
);
});
@@ -828,7 +828,7 @@ describe("<DateRangePicker/>", () => {
name="datepicker"
defaultValue={["2023-01-01", "2023-01-01"]}
/>
</CunninghamProvider>
</CunninghamProvider>,
);
const toggleButton = (await screen.findAllByRole("button"))![1];
await user.click(toggleButton);
@@ -846,7 +846,7 @@ describe("<DateRangePicker/>", () => {
name="datepicker"
defaultValue={["2023-01-01", "2023-01-10"]}
/>
</CunninghamProvider>
</CunninghamProvider>,
);
// Toggle button opens the calendar.
const button = (await screen.findAllByRole("button"))![0];
@@ -860,7 +860,7 @@ describe("<DateRangePicker/>", () => {
selectedCells.forEach((selectedCell) => {
const cellButton = within(selectedCell).getByRole("button")!;
expect(Array.from(cellButton!.classList)).contains(
"c__calendar__wrapper__grid__week-row__button--selected"
"c__calendar__wrapper__grid__week-row__button--selected",
);
});
const commonClassName =
@@ -868,14 +868,14 @@ describe("<DateRangePicker/>", () => {
// Make sure the start of selection has the start styling.
const startCellButton = within(selectedCells[0]).getByRole("button")!;
expect(Array.from(startCellButton.parentElement!.classList)).contains(
`${commonClassName}--start`
`${commonClassName}--start`,
);
// Make sure the end of selection has the end styling.
const endCellButton = within(
selectedCells[selectedCells.length - 1]
selectedCells[selectedCells.length - 1],
).getByRole("button")!;
expect(Array.from(endCellButton.parentElement!.classList)).contains(
`${commonClassName}--end`
`${commonClassName}--end`,
);
});
@@ -917,11 +917,11 @@ describe("<DateRangePicker/>", () => {
expectCalendarToBeOpen();
const startGridCell = within(
await screen.getByRole("gridcell", { name: "12" })
await screen.getByRole("gridcell", { name: "12" }),
).getByRole("button")!;
const endGridCell = within(
await screen.getByRole("gridcell", { name: "14" })
await screen.getByRole("gridcell", { name: "14" }),
).getByRole("button")!;
// Select a new value in the calendar grid.

6
packages/react/src/components/Forms/DatePicker/DateRangePicker.tsx
View File

@@ -31,7 +31,7 @@ export const DateRangePicker = ({
}: DateRangePickerProps) => {
if (props.defaultValue && props.value) {
throw new Error(
"You cannot use both defaultValue and value props on DateRangePicker component"
"You cannot use both defaultValue and value props on DateRangePicker component",
);
}
const ref = useRef<HTMLDivElement>(null);
@@ -45,7 +45,7 @@ export const DateRangePicker = ({
props.onChange?.(
value?.start && value.end
? [value.start.toString(), value.end.toString()]
: null
: null,
);
},
};
@@ -59,7 +59,7 @@ export const DateRangePicker = ({
!pickerState.isOpen &&
!pickerState.value.start &&
!pickerState.value.end,
[pickerState.value, pickerState.isOpen, isFocused]
[pickerState.value, pickerState.isOpen, isFocused],
);
const calendar = <CalendarRange {...calendarProps} />;

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

@@ -9,7 +9,7 @@ const expectDateToBeEqual = (
parsedDate: CalendarDate | DateValue | undefined,
expectedYear: number,
expectedMonth: number,
expectedDay: number
expectedDay: number,
) => {
expect(parsedDate).not.eq(undefined);
expect(parsedDate?.year === expectedYear);
@@ -40,7 +40,7 @@ describe("parseCalendarDate", () => {
const stringDate = `${year}-${month}-${day}`;
const parsedDate = parseCalendarDate(stringDate);
expectDateToBeEqual(parsedDate, year, month, day);
}
},
);
it.each([
@@ -68,7 +68,7 @@ describe("parseCalendarDate", () => {
"2022-04-01 T00:00:00-00:00",
])("parse a wrong date", (wrongFormattedDate) => {
expect(() => parseCalendarDate(wrongFormattedDate)).toThrow(
"Invalid date format when initializing props on DatePicker component"
"Invalid date format when initializing props on DatePicker component",
);
});
@@ -96,7 +96,7 @@ describe("parseCalendarDate", () => {
// Make sure the ISO string have been converted to the local timezone
const nextDay = parseDate(dateString).add({ days: 1 });
expect(parsedDate?.compare(nextDay)).eq(0);
}
},
);
it.each([
@@ -123,7 +123,7 @@ describe("parseCalendarDate", () => {
// Make sure the ISO string have been converted to the local timezone
expect(parsedDate?.compare(sameDay)).eq(0);
}
},
);
});
@@ -146,7 +146,7 @@ describe("parseRangeCalendarDate", () => {
"parse a partially null or empty date range",
(start: StringOrDate, end: StringOrDate) => {
expect(parseRangeCalendarDate([start, end])).eq(undefined);
}
},
);
it("parse an undefined date range", () => {

6
packages/react/src/components/Forms/DatePicker/utils.ts
View File

@@ -11,7 +11,7 @@ import {
import { DatePickerAuxSubProps } from ":/components/Forms/DatePicker/DatePickerAux";
export const parseCalendarDate = (
rawDate: StringOrDate | undefined
rawDate: StringOrDate | undefined,
): undefined | CalendarDate => {
if (!rawDate) {
return undefined;
@@ -21,13 +21,13 @@ export const parseCalendarDate = (
return toCalendarDate(parseAbsoluteToLocal(ISODateString));
} catch (e) {
throw new Error(
"Invalid date format when initializing props on DatePicker component"
"Invalid date format when initializing props on DatePicker component",
);
}
};
export const parseRangeCalendarDate = (
rawRange: StringsOrDateRange | undefined
rawRange: StringsOrDateRange | undefined,
): DateRange | undefined => {
if (!rawRange || !rawRange[0] || !rawRange[1]) {
return undefined;

6
packages/react/src/components/Forms/FileUploader/DropZone.tsx
View File

@@ -36,7 +36,7 @@ export const DropZone = forwardRef<FileUploaderRefType, DropZoneProps>(
children,
...props
}: DropZoneProps,
ref
ref,
) => {
const [dragActive, setDragActive] = useState(false);
const container = useRef<HTMLLabelElement>(null);
@@ -98,7 +98,7 @@ export const DropZone = forwardRef<FileUploaderRefType, DropZoneProps>(
{
"c__file-uploader--active": dragActive,
"c__file-uploader--animate-icon": animateIcon,
}
},
)}
onDragEnter={() => {
setDragActive(true);
@@ -157,5 +157,5 @@ export const DropZone = forwardRef<FileUploaderRefType, DropZoneProps>(
</div>
</label>
);
}
},
);

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

@@ -15,7 +15,7 @@ export const FileUploaderMono = forwardRef<
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.

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

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

74
packages/react/src/components/Forms/FileUploader/index.spec.tsx
View File

@@ -26,7 +26,7 @@ describe("<FileUploader />", () => {
render(
<CunninghamProvider>
<FileUploader />
</CunninghamProvider>
</CunninghamProvider>,
);
const user = userEvent.setup();
const input: HTMLInputElement =
@@ -39,7 +39,7 @@ describe("<FileUploader />", () => {
await screen.findByText("hello.png");
expect(
screen.queryByLabelText(/Drag and drop or /)
screen.queryByLabelText(/Drag and drop or /),
).not.toBeInTheDocument();
});
@@ -47,7 +47,7 @@ describe("<FileUploader />", () => {
render(
<CunninghamProvider>
<FileUploader />
</CunninghamProvider>
</CunninghamProvider>,
);
const user = userEvent.setup();
const input: HTMLInputElement =
@@ -60,7 +60,7 @@ describe("<FileUploader />", () => {
await screen.findByText("hello.png");
expect(
screen.queryByLabelText(/Drag and drop or /)
screen.queryByLabelText(/Drag and drop or /),
).not.toBeInTheDocument();
const deleteButton = screen.getByRole("button", {
@@ -84,7 +84,7 @@ describe("<FileUploader />", () => {
render(
<CunninghamProvider>
<FileUploader name="file" />
</CunninghamProvider>
</CunninghamProvider>,
);
const user = userEvent.setup();
@@ -106,10 +106,10 @@ describe("<FileUploader />", () => {
render(
<CunninghamProvider>
<FileUploader state="uploading" />
</CunninghamProvider>
</CunninghamProvider>,
);
expect(
document.querySelector(".c__file-uploader--uploading")
document.querySelector(".c__file-uploader--uploading"),
).toBeInTheDocument();
screen.getByText("Uploading...");
screen.getByRole("status", { name: "Uploading..." });
@@ -119,13 +119,13 @@ describe("<FileUploader />", () => {
render(
<CunninghamProvider>
<FileUploader state="success" />
</CunninghamProvider>
</CunninghamProvider>,
);
expect(
document.querySelector(".c__file-uploader--success")
document.querySelector(".c__file-uploader--success"),
).toBeInTheDocument();
expect(document.querySelector(".material-icons")?.textContent).toContain(
"done"
"done",
);
});
@@ -133,19 +133,19 @@ describe("<FileUploader />", () => {
render(
<CunninghamProvider>
<FileUploader state="error" bigText="Error file is too big" />
</CunninghamProvider>
</CunninghamProvider>,
);
// Big text is shown is file is not selected.
expect(
document.querySelector(".c__file-uploader--error")
document.querySelector(".c__file-uploader--error"),
).toBeInTheDocument();
screen.getByText("Error file is too big");
// Upload a file.
const user = userEvent.setup();
const input: HTMLInputElement = screen.getByLabelText(
/Error file is too big/
/Error file is too big/,
);
const file = new File(["hello"], "hello.png", { type: "image/png" });
await act(async () => {
@@ -154,7 +154,7 @@ describe("<FileUploader />", () => {
// The filename is shown in place of the big text.
expect(
screen.queryByText("Error file is too big")
screen.queryByText("Error file is too big"),
).not.toBeInTheDocument();
await screen.findByText("hello.png");
});
@@ -163,7 +163,7 @@ describe("<FileUploader />", () => {
render(
<CunninghamProvider>
<FileUploader text="JPG, PNG or GIF - Max file size 2MB" />
</CunninghamProvider>
</CunninghamProvider>,
);
screen.getByText("JPG, PNG or GIF - Max file size 2MB");
});
@@ -176,11 +176,11 @@ describe("<FileUploader />", () => {
fileSelectedIcon={<span>file_selected_custom_icon</span>}
deleteIcon={<span>delete_custom_icon</span>}
/>
</CunninghamProvider>
</CunninghamProvider>,
);
screen.getByText("custom_icon");
expect(
screen.queryByText("file_selected_custom_icon")
screen.queryByText("file_selected_custom_icon"),
).not.toBeInTheDocument();
expect(screen.queryByText("delete_custom_icon")).not.toBeInTheDocument();
@@ -200,12 +200,12 @@ describe("<FileUploader />", () => {
// Hover delete file to show the custom delete icon.
const spanDelete = document.querySelector(
".c__file-uploader__inner__actions"
".c__file-uploader__inner__actions",
)!;
await act(async () => user.hover(spanDelete));
expect(screen.queryByText("custom_icon")).not.toBeInTheDocument();
expect(
screen.queryByText("file_selected_custom_icon")
screen.queryByText("file_selected_custom_icon"),
).not.toBeInTheDocument();
screen.getByText("delete_custom_icon");
});
@@ -217,7 +217,7 @@ describe("<FileUploader />", () => {
successIcon={<span>custom_success_icon</span>}
state="success"
/>
</CunninghamProvider>
</CunninghamProvider>,
);
screen.getByText("custom_success_icon");
});
@@ -229,7 +229,7 @@ describe("<FileUploader />", () => {
uploadingIcon={<span>custom_uploading_icon</span>}
state="uploading"
/>
</CunninghamProvider>
</CunninghamProvider>,
);
screen.getByText("custom_uploading_icon");
});
@@ -277,7 +277,7 @@ describe("<FileUploader />", () => {
describe("Multi", () => {
const expectFiles = (expectedFiles: { name: string; specs: string }[]) => {
const actualElements = document.querySelectorAll(
".c__file-uploader__file"
".c__file-uploader__file",
);
const actual = Array.from(actualElements).map((element) => {
return {
@@ -294,7 +294,7 @@ describe("<FileUploader />", () => {
render(
<CunninghamProvider>
<FileUploader multiple={true} />
</CunninghamProvider>
</CunninghamProvider>,
);
const user = userEvent.setup();
const input: HTMLInputElement =
@@ -318,7 +318,7 @@ describe("<FileUploader />", () => {
render(
<CunninghamProvider>
<FileUploader multiple={true} />
</CunninghamProvider>
</CunninghamProvider>,
);
const user = userEvent.setup();
const input: HTMLInputElement =
@@ -341,7 +341,7 @@ describe("<FileUploader />", () => {
await user.click(
screen.getByRole("button", {
name: "Delete file hello.png",
})
}),
);
});
@@ -351,7 +351,7 @@ describe("<FileUploader />", () => {
await user.click(
screen.getByRole("button", {
name: "Delete file foo.png",
})
}),
);
});
@@ -368,7 +368,7 @@ describe("<FileUploader />", () => {
render(
<CunninghamProvider>
<FileUploader name="files" multiple={true} />
</CunninghamProvider>
</CunninghamProvider>,
);
const user = userEvent.setup();
@@ -400,7 +400,7 @@ describe("<FileUploader />", () => {
render(
<CunninghamProvider>
<FileUploader name="files" multiple={true} />
</CunninghamProvider>
</CunninghamProvider>,
);
const user = userEvent.setup();
@@ -440,7 +440,7 @@ describe("<FileUploader />", () => {
render(
<CunninghamProvider>
<FileUploader state="uploading" multiple={true} />
</CunninghamProvider>
</CunninghamProvider>,
);
const user = userEvent.setup();
@@ -460,7 +460,7 @@ describe("<FileUploader />", () => {
]);
expect(
document.querySelector(".c__file-uploader--uploading")
document.querySelector(".c__file-uploader--uploading"),
).toBeInTheDocument();
screen.getByText("Uploading...");
screen.getByRole("status", { name: "Uploading..." });
@@ -470,13 +470,13 @@ describe("<FileUploader />", () => {
render(
<CunninghamProvider>
<FileUploader state="success" multiple={true} />
</CunninghamProvider>
</CunninghamProvider>,
);
expect(
document.querySelector(".c__file-uploader--success")
document.querySelector(".c__file-uploader--success"),
).toBeInTheDocument();
expect(document.querySelector(".material-icons")?.textContent).toContain(
"done"
"done",
);
});
@@ -488,12 +488,12 @@ describe("<FileUploader />", () => {
bigText="Error file is too big"
multiple={true}
/>
</CunninghamProvider>
</CunninghamProvider>,
);
// Big text is shown is file is not selected.
expect(
document.querySelector(".c__file-uploader--error")
document.querySelector(".c__file-uploader--error"),
).toBeInTheDocument();
screen.getByText("Error file is too big");
@@ -515,7 +515,7 @@ describe("<FileUploader />", () => {
// The error is still displayed if files are selected.
expect(
document.querySelector(".c__file-uploader--error")
document.querySelector(".c__file-uploader--error"),
).toBeInTheDocument();
screen.getByText("Error file is too big");
});
@@ -527,7 +527,7 @@ describe("<FileUploader />", () => {
text="JPG, PNG or GIF - Max file size 2MB"
multiple={true}
/>
</CunninghamProvider>
</CunninghamProvider>,
);
screen.getByText("JPG, PNG or GIF - Max file size 2MB");
});

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

@@ -37,5 +37,5 @@ export const FileUploader = forwardRef<FileUploaderRefType, FileUploaderProps>(
)}
</Field>
);
}
},
);

16
packages/react/src/components/Forms/Input/index.spec.tsx
View File

@@ -35,7 +35,7 @@ describe("<Input/>", () => {
<div>
<Input label="First name" />
<Input label="Second name" />
</div>
</div>,
);
const input: HTMLInputElement = screen.getByRole("textbox", {
@@ -67,14 +67,14 @@ describe("<Input/>", () => {
render(<Input label="First name" state="success" />);
expect(document.querySelector(".c__field--success")).toBeInTheDocument();
expect(
document.querySelector(".c__input__wrapper--success")
document.querySelector(".c__input__wrapper--success"),
).toBeInTheDocument();
});
it("renders with state=error", async () => {
render(<Input label="First name" state="error" />);
expect(document.querySelector(".c__field--error")).toBeInTheDocument();
expect(
document.querySelector(".c__input__wrapper--error")
document.querySelector(".c__input__wrapper--error"),
).toBeInTheDocument();
});
it("renders disabled", async () => {
@@ -84,7 +84,7 @@ describe("<Input/>", () => {
name: "First name",
});
expect(
document.querySelector(".c__input__wrapper--disabled")
document.querySelector(".c__input__wrapper--disabled"),
).toBeInTheDocument();
expect(input.value).toEqual("");
// Disabled inputs should not be able to type.
@@ -96,7 +96,7 @@ describe("<Input/>", () => {
<Input
label="First name"
icon={<span className="material-icons">apartment</span>}
/>
/>,
);
expect(document.querySelector(".material-icons")).toBeInTheDocument();
});
@@ -105,7 +105,7 @@ describe("<Input/>", () => {
<Input
label="First name"
rightIcon={<span className="material-icons">apartment</span>}
/>
/>,
);
expect(document.querySelector(".material-icons")).toBeInTheDocument();
});
@@ -115,7 +115,7 @@ describe("<Input/>", () => {
label="First name"
rightIcon={<span className="material-icons">apartment</span>}
text="Some text"
/>
/>,
);
screen.getByText("Some text");
});
@@ -125,7 +125,7 @@ describe("<Input/>", () => {
label="First name"
rightIcon={<span className="material-icons">apartment</span>}
rightText="Some text right"
/>
/>,
);
screen.getByText("Some text right");
});

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

@@ -42,7 +42,7 @@ export const Input = forwardRef<InputRefType, Props>(
charCounterMax,
...props
}: Props,
ref
ref,
) => {
const classes = ["c__input"];
if (className) {
@@ -100,7 +100,7 @@ export const Input = forwardRef<InputRefType, Props>(
"c__input__wrapper--" + state,
{
"c__input__wrapper--disabled": props.disabled,
}
},
)}
onClick={() => {
inputRef.current?.focus();
@@ -139,5 +139,5 @@ export const Input = forwardRef<InputRefType, Props>(
</div>
</Field>
);
}
},
);

18
packages/react/src/components/Forms/Radio/index.spec.tsx
View File

@@ -35,14 +35,14 @@ describe("<Radio/>", () => {
render(<Radio label="Yes" state="success" text="Success text" />);
expect(screen.getByText("Success text")).toBeInTheDocument();
expect(
document.querySelector(".c__field.c__field--success")
document.querySelector(".c__field.c__field--success"),
).toBeInTheDocument();
});
it("should render with state=error", async () => {
render(<Radio label="Yes" state="error" text="Error text" />);
expect(screen.getByText("Error text")).toBeInTheDocument();
expect(
document.querySelector(".c__field.c__field--error")
document.querySelector(".c__field.c__field--error"),
).toBeInTheDocument();
});
it("should render with group", async () => {
@@ -50,7 +50,7 @@ describe("<Radio/>", () => {
<RadioGroup>
<Radio label="Yes" />
<Radio label="No" />
</RadioGroup>
</RadioGroup>,
);
screen.getByRole("radio", {
name: "Yes",
@@ -64,7 +64,7 @@ describe("<Radio/>", () => {
<RadioGroup>
<Radio name="agree" label="Yes" />
<Radio name="agree" label="No" />
</RadioGroup>
</RadioGroup>,
);
const user = userEvent.setup();
const yesInput: HTMLInputElement = screen.getByLabelText("Yes");
@@ -83,7 +83,7 @@ describe("<Radio/>", () => {
<RadioGroup text="Text">
<Radio label="Yes" />
<Radio label="No" />
</RadioGroup>
</RadioGroup>,
);
expect(screen.getByText("Text")).toBeInTheDocument();
});
@@ -92,11 +92,11 @@ describe("<Radio/>", () => {
<RadioGroup state="success" text="Success text">
<Radio label="Yes" />
<Radio label="No" />
</RadioGroup>
</RadioGroup>,
);
expect(screen.getByText("Success text")).toBeInTheDocument();
expect(
document.querySelector(".c__radio__group.c__field.c__field--success")
document.querySelector(".c__radio__group.c__field.c__field--success"),
).toBeInTheDocument();
});
it("should render with group state=error", async () => {
@@ -104,11 +104,11 @@ describe("<Radio/>", () => {
<RadioGroup state="error" text="Error text">
<Radio label="Yes" />
<Radio label="No" />
</RadioGroup>
</RadioGroup>,
);
expect(screen.getByText("Error text")).toBeInTheDocument();
expect(
document.querySelector(".c__radio__group.c__field.c__field--error")
document.querySelector(".c__radio__group.c__field.c__field--error"),
).toBeInTheDocument();
});
});

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

@@ -5,7 +5,7 @@ import { SelectMono, SelectProps } from ":/components/Forms/Select/mono";
export const Select = (props: SelectProps) => {
if (props.defaultValue && props.value) {
throw new Error(
"You cannot use both defaultValue and value props on Select component"
"You cannot use both defaultValue and value props on Select component",
);
}

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

@@ -79,7 +79,7 @@ export const SelectMonoAux = ({
return;
}
const optionToSelect = options.find(
(option) => optionToValue(option) === value
(option) => optionToValue(option) === value,
);
downshiftReturn.selectItem(optionToSelect ?? null);
}, [value]);
@@ -98,7 +98,7 @@ export const SelectMonoAux = ({
"c__select--" + state,
{
"c__select--disabled": disabled,
}
},
)}
>
{/* We disabled linting for this specific line because we consider that the onClick props is only used for */}
@@ -134,7 +134,7 @@ export const SelectMonoAux = ({
color="tertiary"
size="small"
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) => {

2
packages/react/src/components/Forms/Select/mono-searchable.tsx
View File

@@ -26,7 +26,7 @@ export const SelectMonoSearchable = (props: SubProps) => {
});
const [labelAsPlaceholder, setLabelAsPlaceholder] = useState(
!downshiftReturn.selectedItem
!downshiftReturn.selectedItem,
);
useEffect(() => {
if (hasInputFocused || downshiftReturn.inputValue) {

60
packages/react/src/components/Forms/Select/mono.spec.tsx
View File

@@ -41,7 +41,7 @@ describe("<Select/>", () => {
]}
searchable={true}
/>
</CunninghamProvider>
</CunninghamProvider>,
);
const input = screen.getByRole("combobox", {
@@ -103,7 +103,7 @@ describe("<Select/>", () => {
]}
searchable={true}
/>
</CunninghamProvider>
</CunninghamProvider>,
);
const input = screen.getByRole("combobox", {
@@ -166,7 +166,7 @@ describe("<Select/>", () => {
searchable={true}
defaultValue="new_york"
/>
</CunninghamProvider>
</CunninghamProvider>,
);
const user = userEvent.setup();
@@ -207,7 +207,7 @@ describe("<Select/>", () => {
searchable={true}
defaultValue="New York"
/>
</CunninghamProvider>
</CunninghamProvider>,
);
const input = screen.getByRole("combobox", {
@@ -242,7 +242,7 @@ describe("<Select/>", () => {
searchable={true}
defaultValue="new_york"
/>
</CunninghamProvider>
</CunninghamProvider>,
);
const input = screen.getByRole("combobox", {
@@ -277,7 +277,7 @@ describe("<Select/>", () => {
searchable={true}
defaultValue="not_found"
/>
</CunninghamProvider>
</CunninghamProvider>,
);
const input = screen.getByRole("combobox", {
@@ -288,7 +288,7 @@ describe("<Select/>", () => {
it("works controlled", async () => {
const Wrapper = () => {
const [value, setValue] = useState<string | number | undefined>(
"london"
"london",
);
return (
<CunninghamProvider>
@@ -356,7 +356,7 @@ describe("<Select/>", () => {
await user.click(
screen.getByRole("option", {
name: "New York",
})
}),
);
// Make sure value is selected.
@@ -394,7 +394,7 @@ describe("<Select/>", () => {
disabled={true}
searchable={true}
/>
</CunninghamProvider>
</CunninghamProvider>,
);
const input = screen.getByRole("combobox", {
name: "City",
@@ -402,7 +402,7 @@ describe("<Select/>", () => {
expect(input).toHaveAttribute("disabled");
const button: HTMLButtonElement = document.querySelector(
".c__select__inner__actions__open"
".c__select__inner__actions__open",
)!;
expect(button).toBeDisabled();
@@ -505,7 +505,7 @@ describe("<Select/>", () => {
await user.click(
screen.getByRole("option", {
name: "New York",
})
}),
);
// Submit the form being fulfilled.
@@ -550,7 +550,7 @@ describe("<Select/>", () => {
},
]}
/>
</CunninghamProvider>
</CunninghamProvider>,
);
const input = screen.getByRole("combobox", {
name: "City",
@@ -565,7 +565,7 @@ describe("<Select/>", () => {
expect(valueRendered).toHaveTextContent("");
expectMenuToBeClosed(menu);
expect(
screen.queryByRole("option", { name: "Paris" })
screen.queryByRole("option", { name: "Paris" }),
).not.toBeInTheDocument();
// Make sure the label is set as placeholder.
@@ -576,7 +576,7 @@ describe("<Select/>", () => {
// Make sure the menu is opened and options are rendered.
expectMenuToBeOpen(menu);
expect(
screen.queryByRole("option", { name: "Paris" })
screen.queryByRole("option", { name: "Paris" }),
).toBeInTheDocument();
// Make sure the option is not selected.
@@ -639,7 +639,7 @@ describe("<Select/>", () => {
]}
defaultValue="Tokyo"
/>
</CunninghamProvider>
</CunninghamProvider>,
);
const menu: HTMLDivElement = screen.getByRole("listbox", {
name: "City",
@@ -679,7 +679,7 @@ describe("<Select/>", () => {
]}
defaultValue="new_york"
/>
</CunninghamProvider>
</CunninghamProvider>,
);
const menu: HTMLDivElement = screen.getByRole("listbox", {
name: "City",
@@ -697,7 +697,7 @@ describe("<Select/>", () => {
it("works controlled", async () => {
const Wrapper = () => {
const [value, setValue] = useState<string | number | undefined>(
"london"
"london",
);
return (
<CunninghamProvider>
@@ -754,7 +754,7 @@ describe("<Select/>", () => {
await user.click(
screen.getByRole("option", {
name: "New York",
})
}),
);
// Make sure value is selected.
@@ -795,7 +795,7 @@ describe("<Select/>", () => {
]}
disabled={true}
/>
</CunninghamProvider>
</CunninghamProvider>,
);
const input = screen.getByRole("combobox", {
name: "City",
@@ -803,7 +803,7 @@ describe("<Select/>", () => {
expect(input).toHaveAttribute("disabled");
const button: HTMLButtonElement = document.querySelector(
".c__select__inner__actions__open"
".c__select__inner__actions__open",
)!;
expect(button).toBeDisabled();
@@ -849,7 +849,7 @@ describe("<Select/>", () => {
]}
text="This is a text"
/>
</CunninghamProvider>
</CunninghamProvider>,
);
screen.getByText("This is a text");
});
@@ -879,10 +879,10 @@ describe("<Select/>", () => {
text="This is a text"
state="error"
/>
</CunninghamProvider>
</CunninghamProvider>,
);
expect(
document.querySelector(".c__select.c__select--error")
document.querySelector(".c__select.c__select--error"),
).toBeInTheDocument();
});
it("renders with state=success", async () => {
@@ -911,10 +911,10 @@ describe("<Select/>", () => {
text="This is a text"
state="success"
/>
</CunninghamProvider>
</CunninghamProvider>,
);
expect(
document.querySelector(".c__select.c__select--success")
document.querySelector(".c__select.c__select--success"),
).toBeInTheDocument();
});
it("submits form data", async () => {
@@ -986,7 +986,7 @@ describe("<Select/>", () => {
await user.click(
screen.getByRole("option", {
name: "New York",
})
}),
);
// Submit the form being fulfilled.
@@ -1030,7 +1030,7 @@ describe("<Select/>", () => {
clearable={false}
defaultValue="Paris"
/>
</CunninghamProvider>
</CunninghamProvider>,
);
screen.getByRole("combobox", {
name: "City",
@@ -1043,7 +1043,7 @@ describe("<Select/>", () => {
expect(
screen.queryByRole("button", {
name: "Clear selection",
})
}),
).not.toBeInTheDocument();
});
it("is not possible to select disabled options", async () => {
@@ -1067,7 +1067,7 @@ describe("<Select/>", () => {
},
]}
/>
</CunninghamProvider>
</CunninghamProvider>,
);
const input = screen.getByRole("combobox", {
name: "City",
@@ -1129,7 +1129,7 @@ describe("<Select/>", () => {
]}
hideLabel={true}
/>
</CunninghamProvider>
</CunninghamProvider>,
);
// Make sure the input is accessible.
screen.getByRole("combobox", {

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

@@ -31,7 +31,7 @@ export type SelectProps = PropsWithChildren &
export const SelectMono = (props: SelectProps) => {
const defaultSelectedItem = props.defaultValue
? props.options.find(
(option) => optionToValue(option) === props.defaultValue
(option) => optionToValue(option) === props.defaultValue,
)
: undefined;

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

@@ -23,14 +23,14 @@ import {
*/
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)
);
};
@@ -85,7 +85,7 @@ export const SelectMultiAux = ({
{
"c__select--disabled": disabled,
"c__select--populated": selectedItems.length > 0,
}
},
)}
>
<div
@@ -117,7 +117,7 @@ export const SelectMultiAux = ({
color="tertiary"
size="small"
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) => {
@@ -164,13 +164,13 @@ export const SelectMultiAux = ({
disabled={disabled}
size="small"
aria-label={t(
"components.forms.select.clear_button_aria_label"
"components.forms.select.clear_button_aria_label",
)}
className="c__select__inner__value__pill__clear"
onClick={(e) => {
e.stopPropagation();
useMultipleSelectionReturn.removeSelectedItem(
selectedItemForRender
selectedItemForRender,
);
}}
icon={<span className="material-icons">close</span>}

4
packages/react/src/components/Forms/Select/multi-searchable.tsx
View File

@@ -13,9 +13,9 @@ export const SelectMultiSearchable = (props: SubProps) => {
const options = React.useMemo(
() =>
props.options.filter(
getMultiOptionsFilter(props.selectedItems, inputValue)
getMultiOptionsFilter(props.selectedItems, inputValue),
),
[props.selectedItems, inputValue]
[props.selectedItems, inputValue],
);
const [hasInputFocused, setHasInputFocused] = useState(false);
const useMultipleSelectionReturn = useMultipleSelection({

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

@@ -10,7 +10,7 @@ import { optionToString } from ":/components/Forms/Select/mono-common";
export const SelectMultiSimple = (props: SubProps) => {
const options = React.useMemo(
() => props.options.filter(getMultiOptionsFilter(props.selectedItems, "")),
[props.selectedItems]
[props.selectedItems],
);
const useMultipleSelectionReturn = useMultipleSelection({

84
packages/react/src/components/Forms/Select/multi.spec.tsx
View File

@@ -42,7 +42,7 @@ describe("<Select multi={true} />", () => {
]}
multi={true}
/>
</CunninghamProvider>
</CunninghamProvider>,
);
const input = screen.getByRole("combobox", {
name: "Cities",
@@ -63,7 +63,7 @@ describe("<Select multi={true} />", () => {
// Make sure the menu is opened and options are rendered.
expectMenuToBeOpen(menu);
expect(
screen.queryByRole("option", { name: "Paris" })
screen.queryByRole("option", { name: "Paris" }),
).toBeInTheDocument();
// Make sure the option is not selected.
@@ -83,19 +83,19 @@ describe("<Select multi={true} />", () => {
// Make sure the option is removed from the menu.
expect(
screen.queryByRole("option", { name: "London" })
screen.queryByRole("option", { name: "London" }),
).not.toBeInTheDocument();
// Select other options.
await user.click(
screen.getByRole("option", {
name: "Tokyo",
})
}),
);
await user.click(
screen.getByRole("option", {
name: "Panama",
})
}),
);
await waitFor(() => expectSelectedOptions(["London", "Tokyo", "Panama"]));
@@ -103,30 +103,30 @@ describe("<Select multi={true} />", () => {
// Clear one option.
await user.click(
within(
screen.getByText("Panama").parentNode as HTMLDivElement
screen.getByText("Panama").parentNode as HTMLDivElement,
).getByRole("button", {
name: "Clear selection",
})
}),
);
await waitFor(() => expectSelectedOptions(["London", "Tokyo"]));
// Clear one option.
await user.click(
within(
screen.getByText("London").parentNode as HTMLDivElement
screen.getByText("London").parentNode as HTMLDivElement,
).getByRole("button", {
name: "Clear selection",
})
}),
);
await waitFor(() => expectSelectedOptions(["Tokyo"]));
// Clear one option.
await user.click(
within(
screen.getByText("Tokyo").parentNode as HTMLDivElement
screen.getByText("Tokyo").parentNode as HTMLDivElement,
).getByRole("button", {
name: "Clear selection",
})
}),
);
expectSelectedOptions([]);
});
@@ -156,7 +156,7 @@ describe("<Select multi={true} />", () => {
]}
multi={true}
/>
</CunninghamProvider>
</CunninghamProvider>,
);
const input = screen.getByRole("combobox", {
name: "Cities",
@@ -167,17 +167,17 @@ describe("<Select multi={true} />", () => {
await user.click(
screen.getByRole("option", {
name: "London",
})
}),
);
await user.click(
screen.getByRole("option", {
name: "Tokyo",
})
}),
);
await user.click(
screen.getByRole("option", {
name: "Panama",
})
}),
);
expectSelectedOptions(["London", "Tokyo", "Panama"]);
@@ -211,7 +211,7 @@ describe("<Select multi={true} />", () => {
defaultValue={["Tokyo", "New York"]}
multi={true}
/>
</CunninghamProvider>
</CunninghamProvider>,
);
expectSelectedOptions(["New York", "Tokyo"]);
});
@@ -242,7 +242,7 @@ describe("<Select multi={true} />", () => {
defaultValue={["tokyo", "new_york"]}
multi={true}
/>
</CunninghamProvider>
</CunninghamProvider>,
);
expectSelectedOptions(["New York", "Tokyo"]);
});
@@ -298,14 +298,14 @@ describe("<Select multi={true} />", () => {
// Make sure the option is removed from the menu.
expect(
screen.queryByRole("option", { name: "London" })
screen.queryByRole("option", { name: "London" }),
).not.toBeInTheDocument();
// Select an option.
await user.click(
screen.getByRole("option", {
name: "New York",
})
}),
);
// Make sure value is selected.
@@ -347,7 +347,7 @@ describe("<Select multi={true} />", () => {
disabled={true}
multi={true}
/>
</CunninghamProvider>
</CunninghamProvider>,
);
const input = screen.getByRole("combobox", {
name: "Cities",
@@ -355,7 +355,7 @@ describe("<Select multi={true} />", () => {
expect(input).toHaveAttribute("disabled");
const button: HTMLButtonElement = document.querySelector(
".c__select__inner__actions__open"
".c__select__inner__actions__open",
)!;
expect(button).toBeDisabled();
@@ -402,7 +402,7 @@ describe("<Select multi={true} />", () => {
text="This is a text"
multi={true}
/>
</CunninghamProvider>
</CunninghamProvider>,
);
screen.getByText("This is a text");
});
@@ -434,10 +434,10 @@ describe("<Select multi={true} />", () => {
state="error"
multi={true}
/>
</CunninghamProvider>
</CunninghamProvider>,
);
expect(
document.querySelector(".c__select.c__select--error")
document.querySelector(".c__select.c__select--error"),
).toBeInTheDocument();
});
@@ -468,10 +468,10 @@ describe("<Select multi={true} />", () => {
state="success"
multi={true}
/>
</CunninghamProvider>
</CunninghamProvider>,
);
expect(
document.querySelector(".c__select.c__select--success")
document.querySelector(".c__select.c__select--success"),
).toBeInTheDocument();
});
@@ -546,7 +546,7 @@ describe("<Select multi={true} />", () => {
await user.click(
screen.getByRole("option", {
name: "New York",
})
}),
);
expectSelectedOptions(["New York"]);
@@ -566,7 +566,7 @@ describe("<Select multi={true} />", () => {
await user.click(
await screen.findByRole("option", {
name: "Paris",
})
}),
);
expectSelectedOptions(["New York", "Paris"]);
@@ -616,7 +616,7 @@ describe("<Select multi={true} />", () => {
defaultValue={["Paris"]}
multi={true}
/>
</CunninghamProvider>
</CunninghamProvider>,
);
screen.getByRole("combobox", {
name: "Cities",
@@ -628,7 +628,7 @@ describe("<Select multi={true} />", () => {
expect(
screen.queryByRole("button", {
name: "Clear all selections",
})
}),
).not.toBeInTheDocument();
});
@@ -654,7 +654,7 @@ describe("<Select multi={true} />", () => {
},
]}
/>
</CunninghamProvider>
</CunninghamProvider>,
);
const input = screen.getByRole("combobox", {
name: "Cities",
@@ -715,7 +715,7 @@ describe("<Select multi={true} />", () => {
hideLabel={true}
multi={true}
/>
</CunninghamProvider>
</CunninghamProvider>,
);
// Make sure the input is accessible.
screen.getByRole("combobox", {
@@ -753,7 +753,7 @@ describe("<Select multi={true} />", () => {
searchable={true}
multi={true}
/>
</CunninghamProvider>
</CunninghamProvider>,
);
const input = screen.getByRole("combobox", {
@@ -815,7 +815,7 @@ describe("<Select multi={true} />", () => {
searchable={true}
multi={true}
/>
</CunninghamProvider>
</CunninghamProvider>,
);
const input = screen.getByRole("combobox", {
@@ -875,7 +875,7 @@ describe("<Select multi={true} />", () => {
searchable={true}
multi={true}
/>
</CunninghamProvider>
</CunninghamProvider>,
);
const input = screen.getByRole("combobox", {
@@ -936,7 +936,7 @@ describe("<Select multi={true} />", () => {
multi={true}
defaultValue={["panama", "tokyo", "new_york"]}
/>
</CunninghamProvider>
</CunninghamProvider>,
);
expectSelectedOptions(["Panama", "New York", "Tokyo"]);
@@ -996,7 +996,7 @@ describe("<Select multi={true} />", () => {
searchable={true}
defaultValue={["London", "Tokyo", "Panama"]}
/>
</CunninghamProvider>
</CunninghamProvider>,
);
expectSelectedOptions(["Panama", "London", "Tokyo"]);
@@ -1035,7 +1035,7 @@ describe("<Select multi={true} />", () => {
searchable={true}
defaultValue={["London", "Tokyo", "Panama"]}
/>
</CunninghamProvider>
</CunninghamProvider>,
);
expectSelectedOptions(["Panama", "London", "Tokyo"]);
@@ -1068,7 +1068,7 @@ describe("<Select multi={true} />", () => {
searchable={true}
multi={true}
/>
</CunninghamProvider>
</CunninghamProvider>,
);
expectSelectedOptions(["New York", "Tokyo"]);
});
@@ -1100,7 +1100,7 @@ describe("<Select multi={true} />", () => {
searchable={true}
multi={true}
/>
</CunninghamProvider>
</CunninghamProvider>,
);
expectSelectedOptions(["New York"]);
});
@@ -1199,7 +1199,7 @@ describe("<Select multi={true} />", () => {
searchable={true}
multi={true}
/>
</CunninghamProvider>
</CunninghamProvider>,
);
const input = screen.getByRole("combobox", {
name: "Cities",
@@ -1207,7 +1207,7 @@ describe("<Select multi={true} />", () => {
expect(input).toHaveAttribute("disabled");
const button: HTMLButtonElement = document.querySelector(
".c__select__inner__actions__open"
".c__select__inner__actions__open",
)!;
expect(button).toBeDisabled();

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

@@ -13,12 +13,12 @@ export const SelectMulti = (props: SelectMultiProps) => {
const getSelectedItemsFromProps = () => {
const valueToUse = props.defaultValue ?? props.value ?? [];
return props.options.filter((option) =>
(valueToUse as string[]).includes(optionToValue(option))
(valueToUse as string[]).includes(optionToValue(option)),
);
};
const [selectedItems, setSelectedItems] = React.useState<Option[]>(
getSelectedItemsFromProps()
getSelectedItemsFromProps(),
);
// If the component is used as a controlled component, we need to update the local value when the value prop changes.
@@ -36,7 +36,7 @@ export const SelectMulti = (props: SelectMultiProps) => {
}, [JSON.stringify(selectedItems)]);
const onSelectedItemsChange: SubProps["onSelectedItemsChange"] = (
newSelectedItems
newSelectedItems,
) => {
setSelectedItems(newSelectedItems);
// props.onSelectedItemsChange?.(newSelectedItems);

8
packages/react/src/components/Forms/Select/test-utils.tsx
View File

@@ -17,22 +17,22 @@ export const expectMenuToBeClosed = (menu: HTMLDivElement) => {
export const expectOptionToBeSelected = (option: HTMLLIElement) => {
expect(option).toHaveAttribute("aria-selected", "true");
expect(Array.from(option.classList)).contains(
"c__select__menu__item--selected"
"c__select__menu__item--selected",
);
expect(Array.from(option.classList)).contains(
"c__select__menu__item--highlight"
"c__select__menu__item--highlight",
);
};
export const expectOptionToBeUnselected = (option: HTMLLIElement) => {
expect(option).toHaveAttribute("aria-selected", "false");
expect(Array.from(option.classList)).not.contains(
"c__select__menu__item--selected"
"c__select__menu__item--selected",
);
};
export const expectOptionToBeDisabled = (option: HTMLLIElement) => {
expect(option).toHaveAttribute("disabled");
expect(Array.from(option.classList)).contains(
"c__select__menu__item--disabled"
"c__select__menu__item--disabled",
);
};

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

@@ -48,7 +48,7 @@ describe("<Switch/>", () => {
render(<Switch label="Newsletter" state="success" text="Success text" />);
screen.getByText("Success text");
expect(
document.querySelector(".c__field.c__field--success")
document.querySelector(".c__field.c__field--success"),
).toBeInTheDocument();
});
@@ -56,7 +56,7 @@ describe("<Switch/>", () => {
render(<Switch label="Newsletter" state="error" text="Error text" />);
screen.getByText("Error text");
expect(
document.querySelector(".c__field.c__field--error")
document.querySelector(".c__field.c__field--error"),
).toBeInTheDocument();
});
@@ -68,7 +68,7 @@ describe("<Switch/>", () => {
<Switch label="Newsletter" />
<Switch label="Notifications" />
<Switch label="Phone" />
</div>
</div>,
);
// expect all checkboxes to be unchecked
const newsletter: HTMLInputElement = screen.getByRole("checkbox", {

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

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

14
packages/react/src/components/Pagination/index.spec.tsx
View File

@@ -103,7 +103,7 @@ describe("<Pagination/>", () => {
{ text: "2", name: "You are currently on page 2" },
{ text: "3", name: "Go to page 3" },
{ text: "navigate_next", name: "Go to next page", disabled: false },
])
]),
);
// Go to page 3.
@@ -120,7 +120,7 @@ describe("<Pagination/>", () => {
{ text: "2", name: "Go to page 2" },
{ text: "3", name: "You are currently on page 3" },
{ text: "navigate_next", name: "Go to next page", disabled: true },
])
]),
);
const previousButton = screen.getByRole("button", {
@@ -141,7 +141,7 @@ describe("<Pagination/>", () => {
{ text: "2", name: "You are currently on page 2" },
{ text: "3", name: "Go to page 3" },
{ text: "navigate_next", name: "Go to next page", disabled: false },
])
]),
);
// Go to page 1.
@@ -158,7 +158,7 @@ describe("<Pagination/>", () => {
{ text: "2", name: "Go to page 2" },
{ text: "3", name: "Go to page 3" },
{ text: "navigate_next", name: "Go to next page", disabled: false },
])
]),
);
});
it("can goto page", async () => {
@@ -176,7 +176,7 @@ describe("<Pagination/>", () => {
});
await waitFor(() =>
screen.getByRole("button", { name: "You are currently on page 60" })
screen.getByRole("button", { name: "You are currently on page 60" }),
);
// Try to go to page > 100 and verify that it goes to 100.
@@ -187,7 +187,7 @@ describe("<Pagination/>", () => {
});
await waitFor(() =>
screen.getByRole("button", { name: "You are currently on page 100" })
screen.getByRole("button", { name: "You are currently on page 100" }),
);
// Try to go to page < 1 and verify that it goes to 1.
@@ -198,7 +198,7 @@ describe("<Pagination/>", () => {
});
await waitFor(() =>
screen.getByRole("button", { name: "You are currently on page 1" })
screen.getByRole("button", { name: "You are currently on page 1" }),
);
});
});

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

@@ -33,14 +33,14 @@ export const List = () => {
const timeout = setTimeout(() => {
// Sets the number of pages based on the number of items in the database.
pagination.setPagesCount(
Math.ceil(database.length / pagination.pageSize)
Math.ceil(database.length / pagination.pageSize),
);
// Sets the items to display on the current page.
setItems(
database.slice(
(pagination.page - 1) * pagination.pageSize,
pagination.page * pagination.pageSize
)
pagination.page * pagination.pageSize,
),
);
}, 500);
return () => {

2
packages/react/src/components/Pagination/utils.tsx
View File

@@ -1,5 +1,5 @@
export const expectPaginationList = (
expectations: { text: string; name?: string; disabled?: boolean }[]
expectations: { text: string; name?: string; disabled?: boolean }[],
) => {
const buttons = document.querySelectorAll(".c__pagination__list > *");
expect(buttons.length).toEqual(expectations.length);

2
packages/react/src/components/Provider/index.spec.tsx
View File

@@ -15,7 +15,7 @@ describe("<CunninghamProvider />", () => {
render(
<CunninghamProvider>
<h1>Hi</h1>
</CunninghamProvider>
</CunninghamProvider>,
);
screen.getByRole("heading", { level: 1, name: "Hi" });
});

6
packages/react/src/components/Provider/index.tsx
View File

@@ -37,7 +37,7 @@ export const SUPPORTED_LOCALES = Object.values(Locales);
const findTranslation = (
key: string,
locale: TranslationSet
locale: TranslationSet,
): string | undefined => {
const [namespace, ...keys] = key.split(".");
return keys.reduce((acc, subKey) => acc[subKey], (locale as any)[namespace]);
@@ -54,7 +54,7 @@ export const CunninghamProvider = ({
"fr-FR": frFR,
...customLocales,
}),
[customLocales]
[customLocales],
);
const locale = useMemo(() => {
@@ -80,7 +80,7 @@ export const CunninghamProvider = ({
},
currentLocale: locale,
}),
[currentLocale, locales]
[currentLocale, locales],
);
return (

2
packages/react/src/hooks/useHandleClickOutside.ts
View File

@@ -2,7 +2,7 @@ import { RefObject, useEffect } from "react";
export const useHandleClickOutside = (
ref: RefObject<HTMLDivElement>,
onClickOutside: any
onClickOutside: any,
) => {
useEffect(() => {
const outsideListenerEvent = (event: MouseEvent) => {

2
packages/react/src/tests/Theme.ts
View File

@@ -8,7 +8,7 @@ import path from "path";
*/
export const buildTheme = (debug?: boolean) => {
const child = child_process.exec(
"cd " + path.join(__dirname, "..", "..") + " && yarn build-theme"
"cd " + path.join(__dirname, "..", "..") + " && yarn build-theme",
);
return new Promise<void>((resolve) => {
child.stdout?.on("data", (data) => {

4
packages/react/src/utils/index.spec.tsx
View File

@@ -21,7 +21,7 @@ describe("range", () => {
// Check step between values.
output.forEach(
(item, index) =>
index < output.length - 1 && expect(output[index + 1] - item).eq(1)
index < output.length - 1 && expect(output[index + 1] - item).eq(1),
);
});
@@ -31,7 +31,7 @@ describe("range", () => {
[10, 0],
])("raises error if max is inferior to min", async (min, max) => {
expect(() => range(min, max)).toThrow(
"`min` arg must be inferior to `max` arg."
"`min` arg must be inferior to `max` arg.",
);
});
});

12
packages/tokens/src/bin/Generators/CssGenerator.spec.ts
View File

@@ -31,11 +31,11 @@ describe("CssGenerator", () => {
"..",
"tests",
"assets",
"expected-default-" + Config.tokenFilename + ".css"
)
"expected-default-" + Config.tokenFilename + ".css",
),
)
.toString()
.replace(":root", "html")
.replace(":root", "html"),
);
};
@@ -58,11 +58,11 @@ describe("CssGenerator", () => {
"..",
"tests",
"assets",
"expected-with-utility-classes-" + Config.tokenFilename + ".css"
)
"expected-with-utility-classes-" + Config.tokenFilename + ".css",
),
)
.toString()
.replace(":root", "html")
.replace(":root", "html"),
);
});
});

14
packages/tokens/src/bin/Generators/CssGenerator.ts
View File

@@ -52,7 +52,7 @@ function generateColorClasses(tokens: Tokens) {
function generateBgClasses(tokens: Tokens) {
return Object.keys(tokens.theme.colors).map(
(key) =>
`.bg-${key} { background-color: var(--${Config.sass.varPrefix}theme--colors--${key}); }`
`.bg-${key} { background-color: var(--${Config.sass.varPrefix}theme--colors--${key}); }`,
);
}
@@ -65,7 +65,7 @@ function generateBgClasses(tokens: Tokens) {
function generateClrClasses(tokens: Tokens) {
return Object.keys(tokens.theme.colors).map(
(key) =>
`.clr-${key} { color: var(--${Config.sass.varPrefix}theme--colors--${key}); }`
`.clr-${key} { color: var(--${Config.sass.varPrefix}theme--colors--${key}); }`,
);
}
@@ -86,7 +86,7 @@ function generateFontClasses(tokens: Tokens) {
function generateFwClasses(tokens: Tokens) {
return Object.keys(tokens.theme.font.weights).map(
(key) =>
`.fw-${key} { font-weight: var(--${Config.sass.varPrefix}theme--font--weights--${key}); }`
`.fw-${key} { font-weight: var(--${Config.sass.varPrefix}theme--font--weights--${key}); }`,
);
}
@@ -99,7 +99,7 @@ function generateFwClasses(tokens: Tokens) {
function generateFsClasses(tokens: Tokens) {
return Object.keys(tokens.theme.font.sizes).map(
(key) =>
`.fs-${key} { font-size: var(--${Config.sass.varPrefix}theme--font--sizes--${key}); }`
`.fs-${key} { font-size: var(--${Config.sass.varPrefix}theme--font--sizes--${key}); }`,
);
}
@@ -112,7 +112,7 @@ function generateFsClasses(tokens: Tokens) {
function generateFClasses(tokens: Tokens) {
return Object.keys(tokens.theme.font.families).map(
(key) =>
`.f-${key} { font-family: var(--${Config.sass.varPrefix}theme--font--families--${key}); }`
`.f-${key} { font-family: var(--${Config.sass.varPrefix}theme--font--families--${key}); }`,
);
}
@@ -133,7 +133,7 @@ function generateMarginClasses(tokens: Tokens) {
`.mb-${key} { margin-bottom: var(--${Config.sass.varPrefix}theme--spacings--${key}); }` +
`.mt-${key} { margin-top: var(--${Config.sass.varPrefix}theme--spacings--${key}); }` +
`.ml-${key} { margin-left: var(--${Config.sass.varPrefix}theme--spacings--${key}); }` +
`.mr-${key} { margin-right: var(--${Config.sass.varPrefix}theme--spacings--${key}); }`
`.mr-${key} { margin-right: var(--${Config.sass.varPrefix}theme--spacings--${key}); }`,
);
}
@@ -150,6 +150,6 @@ function generatePaddingClasses(tokens: Tokens) {
`.pb-${key} { padding-bottom: var(--${Config.sass.varPrefix}theme--spacings--${key}); }` +
`.pt-${key} { padding-top: var(--${Config.sass.varPrefix}theme--spacings--${key}); }` +
`.pl-${key} { padding-left: var(--${Config.sass.varPrefix}theme--spacings--${key}); }` +
`.pr-${key} { padding-right: var(--${Config.sass.varPrefix}theme--spacings--${key}); }`
`.pr-${key} { padding-right: var(--${Config.sass.varPrefix}theme--spacings--${key}); }`,
);
}

2
packages/tokens/src/bin/Generators/SassGenerator.ts
View File

@@ -35,7 +35,7 @@ function JSONToSassMap(json: Object, isDefault = true) {
[`'${key}'`]:
typeof value === "object" ? deepQuoteObjectKeys(value) : value,
}),
{}
{},
);
}
const jsonWithQuotedKeys = deepQuoteObjectKeys(json);

8
packages/tokens/src/bin/Generators/index.spec.ts
View File

@@ -12,7 +12,7 @@ describe("resolveRefs", () => {
tokens as unknown as Tokens,
(ref, resolvingTokens) => {
return resolve(resolvingTokens, ref);
}
},
);
expect(res).toEqual({
a: "b",
@@ -51,7 +51,7 @@ describe("resolveRefs", () => {
tokens as unknown as Tokens,
(ref, resolvingTokens) => {
return resolve(resolvingTokens, ref);
}
},
);
expect(res).toEqual({
a: "b",
@@ -77,7 +77,7 @@ describe("resolveRefs", () => {
tokens as unknown as Tokens,
(ref, resolvingTokens) => {
return resolve(resolvingTokens, ref);
}
},
);
expect(res).toEqual({
a: "value",
@@ -97,7 +97,7 @@ describe("resolveRefs", () => {
return `ref(${ref})`;
});
}).toThrow(
"Maximum resolveRefs iterations: please reduce usage of chained references."
"Maximum resolveRefs iterations: please reduce usage of chained references.",
);
});
});

6
packages/tokens/src/bin/Generators/index.ts
View File

@@ -7,7 +7,7 @@ import { resolve } from "Utils/resolve";
export type Generator = (
tokens: Tokens,
opts: { path: string; selector: string; utilityClasses?: boolean }
opts: { path: string; selector: string; utilityClasses?: boolean },
) => Promise<void>;
export const Generators: Record<string, Generator> = {
@@ -19,7 +19,7 @@ export const Generators: Record<string, Generator> = {
export const resolveRefs = (
tokens: Tokens,
callback: (ref: string, tokens: Tokens) => string
callback: (ref: string, tokens: Tokens) => string,
): Tokens => {
let refsCount = 0;
let resolved = tokens;
@@ -72,7 +72,7 @@ export const resolveRefs = (
// Prevent infinite loops.
if (iterations >= maxIterations) {
throw new Error(
"Maximum resolveRefs iterations: please reduce usage of chained references."
"Maximum resolveRefs iterations: please reduce usage of chained references.",
);
}
refsCount = 0;

12
packages/tokens/src/bin/ThemeGenerator.ts
View File

@@ -22,13 +22,13 @@ export const buildTheme = async () => {
selector: options.selector,
utilityClasses: options.utilityClasses,
});
})
}),
);
};
export const run = async (args: string[]) => {
console.log(
chalk.red(figlet.textSync("Cunningham", { horizontalLayout: "full" }))
chalk.red(figlet.textSync("Cunningham", { horizontalLayout: "full" })),
);
const commaSeparatedList = (value: string) => {
@@ -40,21 +40,21 @@ export const run = async (args: string[]) => {
.option(
"-s, --selector <selector>",
"Specify the css root selector element.",
":root"
":root",
)
.option(
"-cwd, --working-dir <directory>",
"Specify the working dir ( you might not need this )."
"Specify the working dir ( you might not need this ).",
)
.option(
"-o, --output <directory>",
"Specify the output dir of generated files."
"Specify the output dir of generated files.",
)
.option("--utility-classes", "Generate CSS utility classes.")
.requiredOption(
"-g, --generators <generators>",
"Specify the generators to use.",
commaSeparatedList
commaSeparatedList,
)
.parse(args);

2
packages/tokens/src/bin/Utils/Files.ts
View File

@@ -14,6 +14,6 @@ export const put = (path: string, content: string) => {
fs.writeFileSync(path, content);
console.log(
chalk.bgGreen(chalk.white("File " + path + " generated successfully."))
chalk.bgGreen(chalk.white("File " + path + " generated successfully.")),
);
};

2
packages/tokens/src/bin/Utils/resolve.ts
View File

@@ -1,7 +1,7 @@
export const resolve = (
object: Record<string, any>,
path: string,
separator: string = "."
separator: string = ".",
): any => {
return path.split(separator).reduce((acc, cur) => {
return acc[cur];

24
packages/tokens/src/bin/tests/Cunningham.spec.ts
View File

@@ -16,7 +16,7 @@ const runBin = async (args: string) => {
const promise = exec(
path.join(__dirname, "..", "..", "..", "dist", "bin", "Main.js") +
" " +
args
args,
);
promise.child.stdout?.on("data", (data) => {
@@ -61,10 +61,10 @@ describe("Cunningham Bin", () => {
path.join(
__dirname,
"assets",
"expected-default-" + Config.tokenFilename + ".css"
)
"expected-default-" + Config.tokenFilename + ".css",
),
)
.toString()
.toString(),
);
});
@@ -77,7 +77,7 @@ describe("Cunningham Bin", () => {
fs.copyFileSync(
path.join(__dirname, "assets", "cunningham.js"),
localConfigurationFile
localConfigurationFile,
);
expect(fs.existsSync(localConfigurationFile)).toEqual(true);
@@ -89,10 +89,10 @@ describe("Cunningham Bin", () => {
path.join(
__dirname,
"assets",
"expected-js-" + Config.tokenFilename + ".css"
)
"expected-js-" + Config.tokenFilename + ".css",
),
)
.toString()
.toString(),
);
});
@@ -105,7 +105,7 @@ describe("Cunningham Bin", () => {
fs.copyFileSync(
path.join(__dirname, "assets", "cunningham.ts"),
localConfigurationFile
localConfigurationFile,
);
expect(fs.existsSync(localConfigurationFile)).toEqual(true);
@@ -131,10 +131,10 @@ describe("Cunningham Bin", () => {
path.join(
__dirname,
"assets",
"expected-default-" + Config.tokenFilename + ".css"
)
"expected-default-" + Config.tokenFilename + ".css",
),
)
.toString()
.toString(),
);
};

2
packages/tokens/src/bin/tests/Utils.ts
View File

@@ -9,7 +9,7 @@ import { Generators } from "Generators";
*/
export const cleanup = (dir: string) => {
const tokenFilenames = Object.keys(Generators).map(
(extension) => Config.tokenFilename + "." + extension
(extension) => Config.tokenFilename + "." + extension,
);
tokenFilenames.forEach((filename) => {

2
packages/tokens/src/lib/index.spec.ts
View File

@@ -9,7 +9,7 @@ describe("buildRefs", () => {
"primary-500": "blue",
},
},
})
}),
).toEqual({
theme: {
colors: {