From ead0b57256fe9b00c7a6c2dce0e974c176680a2e Mon Sep 17 00:00:00 2001 From: Ruben Sibon Date: Wed, 11 Dec 2024 15:55:51 +0100 Subject: [PATCH] fix(eslint): address lint issues --- CONTRIBUTING.md | 8 ++++++-- documentation/storybook.md | 2 +- packages/css/README.md | 2 +- packages/react/README.md | 2 +- packages/react/babel.config.js | 1 - .../react/src/ImageSlider/ImageSliderContext.tsx | 1 - packages/react/src/Pagination/Pagination.tsx | 1 - packages/react/src/Tabs/TabsContext.tsx | 1 - packages/react/src/common/useKeyboardFocus.test.tsx | 1 - proprietary/assets/svgo.config.js | 1 - proprietary/react-icons/README.md | 10 ++++------ storybook/src/components/FieldSet/FieldSet.docs.mdx | 12 ++---------- .../components/SearchField/SearchField.stories.tsx | 1 - .../docs/developer-guide/getting-started.docs.mdx | 4 ++-- 14 files changed, 17 insertions(+), 30 deletions(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 12383c4a8b..b56ed48698 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -140,6 +140,8 @@ You can use any editor you like, but if you use [Visual Studio Code](https://cod To enable correct validation and to fix lint/style errors on save, add this to your VSCode `settings.json`: + + ```json "css.validate": false, "scss.validate": false, @@ -153,6 +155,8 @@ To enable correct validation and to fix lint/style errors on save, add this to y "editor.formatOnSave": true, ``` + + ### Run storybook @@ -196,7 +200,7 @@ The copyright holder for all files created by people working for the City of Ams If you use code from other EUPL-1.2 or higher licensed files that have a copyright notice, don’t forget to add this copyright notice as well. So, for a file with code written by someone working for the City of Amsterdam in 2023, but also containing code from another EUPL-1.2 or higher licensed file written by John Doe in 2021, the header would look like this: -```javascript +```js /** * @license EUPL-1.2+ * Copyright (c) 2021 John Doe @@ -208,7 +212,7 @@ All documentation files should also start with a license header. We use the Creative Commons Zero (CC0) license for this. The license header looks like this: -```md +```html ``` diff --git a/documentation/storybook.md b/documentation/storybook.md index 6894e63553..318fdbafcd 100644 --- a/documentation/storybook.md +++ b/documentation/storybook.md @@ -74,7 +74,7 @@ For example, when the child is a simple string (like in the default Button compo To do this, you can override the default like so: -```js +```txt argTypes: { children: { table: { disable: false }, diff --git a/packages/css/README.md b/packages/css/README.md index 836ac8723b..c8303a69fa 100644 --- a/packages/css/README.md +++ b/packages/css/README.md @@ -35,7 +35,7 @@ Other communities only need to overwrite design tokens to use our components wit Import the main stylesheet and use the class names in your markup. -```ts +```jsx import "@amsterdam/design-system-assets/font/index.css" import "@amsterdam/design-system-css/dist/index.css" import "@amsterdam/design-system-tokens/dist/index.css" diff --git a/packages/react/README.md b/packages/react/README.md index 8535fde08e..2a286d7f90 100644 --- a/packages/react/README.md +++ b/packages/react/README.md @@ -32,7 +32,7 @@ Import the stylesheets for the fonts, tokens, and components. Then import and use the components in your JSX. -```ts +```jsx import "@amsterdam/design-system-assets/font/index.css" import "@amsterdam/design-system-css/dist/index.css" import "@amsterdam/design-system-tokens/dist/index.css" diff --git a/packages/react/babel.config.js b/packages/react/babel.config.js index 8baca3ee36..c57c4cc6ee 100644 --- a/packages/react/babel.config.js +++ b/packages/react/babel.config.js @@ -1,4 +1,3 @@ -// eslint-disable-next-line no-undef module.exports = { presets: ['@babel/preset-env', '@babel/preset-react'], } diff --git a/packages/react/src/ImageSlider/ImageSliderContext.tsx b/packages/react/src/ImageSlider/ImageSliderContext.tsx index f20148ccd6..7923b9afac 100644 --- a/packages/react/src/ImageSlider/ImageSliderContext.tsx +++ b/packages/react/src/ImageSlider/ImageSliderContext.tsx @@ -11,7 +11,6 @@ export type ImageSliderContextValue = { isAtEnd: boolean goToNextSlide: () => void goToPreviousSlide: () => void - // eslint-disable-next-line no-unused-vars goToSlideId: (id: number) => void } diff --git a/packages/react/src/Pagination/Pagination.tsx b/packages/react/src/Pagination/Pagination.tsx index 6372884cfa..05efc51252 100644 --- a/packages/react/src/Pagination/Pagination.tsx +++ b/packages/react/src/Pagination/Pagination.tsx @@ -17,7 +17,6 @@ export type PaginationProps = { /** The accessible name for the next page-button. */ nextVisuallyHiddenLabel?: string /** A function to run when the page number changes. */ - // eslint-disable-next-line no-unused-vars onPageChange?: (page: number) => void /** The current page number. */ page?: number diff --git a/packages/react/src/Tabs/TabsContext.tsx b/packages/react/src/Tabs/TabsContext.tsx index 805a53efdb..bd530a88a7 100644 --- a/packages/react/src/Tabs/TabsContext.tsx +++ b/packages/react/src/Tabs/TabsContext.tsx @@ -11,7 +11,6 @@ export type TabsContextValue = { /** The identifier of the tab set. */ tabsId: string /** A function to update the active tab. */ - // eslint-disable-next-line no-unused-vars updateTab: (tab: number) => void } diff --git a/packages/react/src/common/useKeyboardFocus.test.tsx b/packages/react/src/common/useKeyboardFocus.test.tsx index 2dc6e7c529..3e4abf890b 100644 --- a/packages/react/src/common/useKeyboardFocus.test.tsx +++ b/packages/react/src/common/useKeyboardFocus.test.tsx @@ -8,7 +8,6 @@ describe('use focus with arrows', () => { const onFocusThreeMock = jest.fn() const getComponent = (rotate: boolean | undefined = undefined) => - // eslint-disable-next-line react/display-name function () { const ref = useRef(null) const { keyDown } = useKeyboardFocus(ref, { diff --git a/proprietary/assets/svgo.config.js b/proprietary/assets/svgo.config.js index 5ecb855c70..298dc82499 100644 --- a/proprietary/assets/svgo.config.js +++ b/proprietary/assets/svgo.config.js @@ -1,4 +1,3 @@ -/* eslint-disable no-undef */ module.exports = { plugins: [ 'removeDimensions', diff --git a/proprietary/react-icons/README.md b/proprietary/react-icons/README.md index 7fe4eb2d92..272af594f4 100644 --- a/proprietary/react-icons/README.md +++ b/proprietary/react-icons/README.md @@ -19,13 +19,11 @@ npm install @amsterdam/design-system-react-icons Import the component for the icon you need, as well as the generic Icon component, and use them in your JSX. -```ts -import { Icon } from '@amsterdam/design-system-react' -import { SearchIcon } from '@amsterdam/design-system-react-icons' +```js +import { Icon } from "@amsterdam/design-system-react"; +import { SearchIcon } from "@amsterdam/design-system-react-icons"; -export const App = () => ( - -) +export const App = () => ; ``` ## Updating diff --git a/storybook/src/components/FieldSet/FieldSet.docs.mdx b/storybook/src/components/FieldSet/FieldSet.docs.mdx index 4bd1217f67..53e289fc60 100644 --- a/storybook/src/components/FieldSet/FieldSet.docs.mdx +++ b/storybook/src/components/FieldSet/FieldSet.docs.mdx @@ -72,11 +72,7 @@ but we think that is preferable to missing the description entirely. Add an `id` to the Field Set and the description, and add both to the `aria-labelledby` attribute of Field Set, like so: ```jsx -
+
Description ...
@@ -93,11 +89,7 @@ we add the Error Message text to the label as well. Add an `id` to the Field Set and the Error Message, and add both to the `aria-labelledby` attribute of Field Set, like so: ```jsx -
+
Error message ...
diff --git a/storybook/src/components/SearchField/SearchField.stories.tsx b/storybook/src/components/SearchField/SearchField.stories.tsx index 5db2019d78..047e463569 100644 --- a/storybook/src/components/SearchField/SearchField.stories.tsx +++ b/storybook/src/components/SearchField/SearchField.stories.tsx @@ -75,7 +75,6 @@ export const Controlled: any = { const value = formData.get('search-box') // search actions should not be triggered without a value if (value) { - // eslint-disable-next-line no-alert alert(`Gezocht op '${value}'`) } }} diff --git a/storybook/src/docs/developer-guide/getting-started.docs.mdx b/storybook/src/docs/developer-guide/getting-started.docs.mdx index 67e0f585d6..a50071822e 100644 --- a/storybook/src/docs/developer-guide/getting-started.docs.mdx +++ b/storybook/src/docs/developer-guide/getting-started.docs.mdx @@ -16,7 +16,7 @@ npm install @amsterdam/design-system-assets @amsterdam/design-system-css @amster Import the components and stylesheets you need, for example: -```javascript +```js import "@amsterdam/design-system-assets/font/index.css"; import "@amsterdam/design-system-css/dist/index.css"; import "@amsterdam/design-system-tokens/dist/index.css"; @@ -35,7 +35,7 @@ For applications, the large text and ample white space of the theme can be count That’s why there is a compact mode. To use the compact mode, import the compact CSS **after** the theme CSS, like so: -```javascript +```js import "@amsterdam/design-system-tokens/dist/index.css"; import "@amsterdam/design-system-tokens/dist/compact.css"; ```