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
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",
);
};