From a6c9a3d3d62f62edac149ea89c30edf8dd4c4c61 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matth=C3=A4us=20N=C3=B6ssing?= Date: Tue, 27 Aug 2024 11:51:06 +0200 Subject: [PATCH 1/3] update eslint --- .storybook/components/Theme.tsx | 4 +-- .storybook/main.ts | 2 +- .storybook/preview.tsx | 2 +- package-lock.json | 8 ++--- package.json | 2 +- src/components/action/Actions.stories.tsx | 2 +- src/components/alert/Alert.stories.tsx | 10 +++--- src/components/alert/ConvenientAlerts.tsx | 2 +- .../breadcrumbs/BreadcrumbLoading.tsx | 2 +- .../breadcrumbs/Breadcrumbs.stories.tsx | 4 +-- src/components/button/Button.stories.tsx | 10 +++--- src/components/button/ButtonIcon.stories.tsx | 10 +++--- src/components/button/ButtonIcon.tsx | 2 +- .../button/ButtonIconLink.stories.tsx | 8 ++--- src/components/button/ButtonIconLink.tsx | 2 +- src/components/button/ButtonLink.stories.tsx | 4 +-- src/components/button/ButtonLink.tsx | 4 +-- .../button/SubmitButton.stories.tsx | 4 +-- .../ContentMessage/ContentMessage.stories.tsx | 2 +- .../DescriptionItem/DescriptionItem.tsx | 2 +- .../dialog/Dialog/Dialog.stories.tsx | 4 +-- .../DialogItem/DialogListItemButton.tsx | 2 +- src/components/form/InputField.stories.tsx | 6 ++-- src/components/form/SearchField.stories.tsx | 2 +- src/components/form/SelectField.stories.tsx | 2 +- .../form/SelectMonthField.stories.tsx | 2 +- src/components/form/SelectMonthField.tsx | 2 +- src/components/form/SelectYearField.tsx | 2 +- .../primitive/Checkbox/Checkbox.stories.tsx | 2 +- .../form/primitive/Checkbox/Checkbox.tsx | 2 +- .../form/primitive/Input.stories.tsx | 4 +-- .../primitive/InputIcon/InputIcon.stories.tsx | 4 +-- src/components/form/primitive/Radio/Radio.tsx | 4 +-- .../form/primitive/Select.stories.tsx | 14 ++++---- .../primitive/ToggleSwitch/ToggleSwitch.tsx | 2 +- src/components/link/TextLink.tsx | 2 +- src/components/menu/Menu.stories.tsx | 4 +-- src/components/menu/Menu.tsx | 8 ++--- src/components/menu/MenuItem.stories.tsx | 4 +-- src/components/menu/MenuItem.tsx | 4 +-- .../pagination/PaginationInMemory.tsx | 2 +- .../PaginationPreviousNextContent.tsx | 6 ++-- .../pagination/PaginationRouter.tsx | 12 +++---- src/components/react-hook-form/AutoSubmit.tsx | 2 +- .../CheckboxFormField.stories.tsx | 12 +++---- .../react-hook-form/DateFormField.stories.tsx | 6 ++-- .../FieldSetFormField.stories.tsx | 2 +- .../InputFormField.stories.tsx | 14 ++++---- .../NumberFormField.stories.tsx | 16 +++++----- .../SearchFormField.stories.tsx | 6 ++-- .../react-hook-form/SelectFormField.tsx | 6 ++-- .../SelectItemFormField.stories.tsx | 4 +-- .../SelectItemFormFieldDialog.tsx | 6 ++-- .../SelectItemFormFieldInput.tsx | 2 +- .../TextAreaFormField.stories.tsx | 12 +++---- .../ToggleSwitchFormField.stories.tsx | 12 +++---- .../__test__/useHandleSubmit.test.ts | 3 +- .../react-hook-form/useHandleSubmit.ts | 6 ++-- .../ConvenientSectionContentMessage.tsx | 2 +- .../Section/SectionAppendix.stories.tsx | 6 ++-- .../SectionFooterArea.stories.tsx | 4 +-- ...onFooterWithPaginationInMemory.stories.tsx | 8 ++--- ...tionFooterWithPaginationRouter.stories.tsx | 6 ++-- .../SectionHeader/SectionHeaderTitle.tsx | 2 +- .../section/SectionItem/SectionListItem.tsx | 2 +- src/components/tabs/TabsContext.ts | 2 +- .../util/__test__/useHandleRequest.test.ts | 2 +- src/components/util/useForwardedRef.ts | 3 +- src/components/util/useHandleRequest.ts | 2 +- src/components/util/useId.ts | 1 - src/examples/Form.stories.tsx | 32 +++++++++---------- src/examples/List.stories.tsx | 16 +++++----- src/examples/Menu.stories.tsx | 8 ++--- src/framework/ReactUIProvider.tsx | 6 ++-- src/framework/router/LinkComponentContext.tsx | 2 +- tsconfig.json | 4 +-- vite.config.ts | 2 +- 77 files changed, 201 insertions(+), 200 deletions(-) diff --git a/.storybook/components/Theme.tsx b/.storybook/components/Theme.tsx index 4fee0bec..d589c265 100644 --- a/.storybook/components/Theme.tsx +++ b/.storybook/components/Theme.tsx @@ -1,8 +1,8 @@ import { Markdown, Subheading } from '@storybook/addon-docs' import { ReactElement } from 'react' import { - defaultTheme, Theme as ThemeType, + defaultTheme, } from '../../src/framework/theme/theme' import { SourceJson } from './SourceJson' @@ -11,7 +11,7 @@ export function Theme({ items, }: { component: T - items?: Array + items?: R[] }): ReactElement { const theme = { [component]: items diff --git a/.storybook/main.ts b/.storybook/main.ts index 7576dc92..a8212d59 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -1,5 +1,5 @@ -import type { StorybookConfig } from '@storybook/react-vite' import remarkGfm from 'remark-gfm' +import type { StorybookConfig } from '@storybook/react-vite' const config: StorybookConfig = { stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'], diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index 3bab3f51..62d4d5ec 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -1,7 +1,7 @@ import { Preview } from '@storybook/react' import { ReactUIProvider, defaultTheme, makeLinkComponent } from '../src' -import { Background } from './types' import '../styles/index.css' +import { Background } from './types' const LinkComponent = makeLinkComponent( ({ children, _internal, href, ...props }, ref) => ( diff --git a/package-lock.json b/package-lock.json index c45e461b..e9909faf 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,7 +19,7 @@ "react-hook-form": "^7.51.2" }, "devDependencies": { - "@aboutbits/eslint-config": "^2.2.4", + "@aboutbits/eslint-config": "^3.0.0", "@aboutbits/prettier-config": "^1.6.1", "@aboutbits/react-pagination": "^3.0.12", "@aboutbits/ts-config": "^1.1.3", @@ -94,9 +94,9 @@ } }, "node_modules/@aboutbits/eslint-config": { - "version": "2.2.4", - "resolved": "https://registry.npmjs.org/@aboutbits/eslint-config/-/eslint-config-2.2.4.tgz", - "integrity": "sha512-JyF+oggMQyMlhZqZL95+mG5ct2IGfS13utb6oEA+i1iUiIJTTXKoGcUfjwpvD6w881b+JZ1Nc7vv1tqZKy7i/A==", + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@aboutbits/eslint-config/-/eslint-config-3.0.0.tgz", + "integrity": "sha512-GLgjA752rVnnK4io2qBs9nZcIC/RkvjihV9UKc2JZeZ94XfXBM6TGtqCxqNojNXmpVpdkZrkZ8mPVjD+08rHBg==", "dev": true, "dependencies": { "@typescript-eslint/parser": "^6.1.0 || ^7.3.1", diff --git a/package.json b/package.json index bf8da3f7..d6541748 100644 --- a/package.json +++ b/package.json @@ -64,7 +64,7 @@ "react-hook-form": "^7.51.2" }, "devDependencies": { - "@aboutbits/eslint-config": "^2.2.4", + "@aboutbits/eslint-config": "^3.0.0", "@aboutbits/prettier-config": "^1.6.1", "@aboutbits/react-pagination": "^3.0.12", "@aboutbits/ts-config": "^1.1.3", diff --git a/src/components/action/Actions.stories.tsx b/src/components/action/Actions.stories.tsx index 6e4cd9b4..a0bb9507 100644 --- a/src/components/action/Actions.stories.tsx +++ b/src/components/action/Actions.stories.tsx @@ -7,9 +7,9 @@ import { Title, } from '@storybook/addon-docs' import { Meta, StoryObj } from '@storybook/react' +import { Theme } from '../../../.storybook/components' import { Button, ButtonVariant } from '../button' import { Tone } from '../types' -import { Theme } from '../../../.storybook/components' import { Actions } from './Actions' const children = { diff --git a/src/components/alert/Alert.stories.tsx b/src/components/alert/Alert.stories.tsx index eba7c4cc..dd65dfb5 100644 --- a/src/components/alert/Alert.stories.tsx +++ b/src/components/alert/Alert.stories.tsx @@ -1,3 +1,6 @@ +import IconCheck from '@aboutbits/react-material-icons/dist/IconCheck' +import IconInfo from '@aboutbits/react-material-icons/dist/IconInfo' +import IconWarning from '@aboutbits/react-material-icons/dist/IconWarning' import { Controls, Markdown, @@ -7,20 +10,17 @@ import { Title, } from '@storybook/addon-docs' import { Meta, StoryObj } from '@storybook/react' -import IconWarning from '@aboutbits/react-material-icons/dist/IconWarning' -import IconCheck from '@aboutbits/react-material-icons/dist/IconCheck' -import IconInfo from '@aboutbits/react-material-icons/dist/IconInfo' +import { Theme } from '../../../.storybook/components' import { Button, ButtonVariant } from '../button' import { Size, Tone } from '../types' -import { Theme } from '../../../.storybook/components' import { Alert } from './Alert' -import { AlertActionsPosition } from './types' import { AlertCritical, AlertInformative, AlertSuccess, AlertWarning, } from './ConvenientAlerts' +import { AlertActionsPosition } from './types' const icons = { options: ['None', 'Warning', 'Check', 'Info'], diff --git a/src/components/alert/ConvenientAlerts.tsx b/src/components/alert/ConvenientAlerts.tsx index 8ac6b308..00646b9d 100644 --- a/src/components/alert/ConvenientAlerts.tsx +++ b/src/components/alert/ConvenientAlerts.tsx @@ -1,6 +1,6 @@ import IconCheck from '@aboutbits/react-material-icons/dist/IconCheck' -import IconWarning from '@aboutbits/react-material-icons/dist/IconWarning' import IconInfo from '@aboutbits/react-material-icons/dist/IconInfo' +import IconWarning from '@aboutbits/react-material-icons/dist/IconWarning' import { ReactElement } from 'react' import { Tone } from '../types' import { Alert } from './Alert' diff --git a/src/components/breadcrumbs/BreadcrumbLoading.tsx b/src/components/breadcrumbs/BreadcrumbLoading.tsx index 5f6baeb6..984ce67c 100644 --- a/src/components/breadcrumbs/BreadcrumbLoading.tsx +++ b/src/components/breadcrumbs/BreadcrumbLoading.tsx @@ -13,7 +13,7 @@ export function BreadcrumbLoading({ const { breadcrumbs } = useTheme() const { className: loadingBarClassName, ...restLoadingBarProps } = - loadingBarProps || {} + loadingBarProps ?? {} return (
diff --git a/src/components/breadcrumbs/Breadcrumbs.stories.tsx b/src/components/breadcrumbs/Breadcrumbs.stories.tsx index 4175ab9d..d97b96aa 100644 --- a/src/components/breadcrumbs/Breadcrumbs.stories.tsx +++ b/src/components/breadcrumbs/Breadcrumbs.stories.tsx @@ -8,11 +8,11 @@ import { } from '@storybook/addon-docs' import { Meta, StoryObj } from '@storybook/react' import { Theme } from '../../../.storybook/components' -import { Breadcrumbs } from './Breadcrumbs' import { BreadcrumbLink } from './BreadcrumbLink' +import { BreadcrumbLoading } from './BreadcrumbLoading' +import { Breadcrumbs } from './Breadcrumbs' import { BreadcrumbsLoading } from './BreadcrumbsLoading' import { BreadcrumbText } from './BreadcrumbText' -import { BreadcrumbLoading } from './BreadcrumbLoading' const meta = { component: Breadcrumbs, diff --git a/src/components/button/Button.stories.tsx b/src/components/button/Button.stories.tsx index 71f0409d..def02892 100644 --- a/src/components/button/Button.stories.tsx +++ b/src/components/button/Button.stories.tsx @@ -1,4 +1,5 @@ -import { Meta, StoryObj } from '@storybook/react' +import IconAdd from '@aboutbits/react-material-icons/dist/IconAdd' +import IconInfo from '@aboutbits/react-material-icons/dist/IconInfo' import { Controls, Description, @@ -9,14 +10,13 @@ import { Subheading, Title, } from '@storybook/blocks' -import IconAdd from '@aboutbits/react-material-icons/dist/IconAdd' -import IconInfo from '@aboutbits/react-material-icons/dist/IconInfo' +import { Meta, StoryObj } from '@storybook/react' import { Theme } from '../../../.storybook/components' -import { Mode, Size } from '../types' import { CustomTheme } from '../../../.storybook/components/CustomTheme' import { Background } from '../../../.storybook/types' -import { ButtonVariant } from './types' +import { Mode, Size } from '../types' import { Button } from './Button' +import { ButtonVariant } from './types' const icons = { options: ['None', 'Add', 'Info'], diff --git a/src/components/button/ButtonIcon.stories.tsx b/src/components/button/ButtonIcon.stories.tsx index 2b49db7c..88e08138 100644 --- a/src/components/button/ButtonIcon.stories.tsx +++ b/src/components/button/ButtonIcon.stories.tsx @@ -1,3 +1,5 @@ +import IconAdd from '@aboutbits/react-material-icons/dist/IconAdd' +import IconInfo from '@aboutbits/react-material-icons/dist/IconInfo' import { Controls, Description, @@ -7,14 +9,12 @@ import { Subheading, Title, } from '@storybook/addon-docs' -import { Meta, StoryObj } from '@storybook/react' -import IconAdd from '@aboutbits/react-material-icons/dist/IconAdd' -import IconInfo from '@aboutbits/react-material-icons/dist/IconInfo' import { Source } from '@storybook/blocks' +import { Meta, StoryObj } from '@storybook/react' import { Theme } from '../../../.storybook/components' import { Mode, Size, Tone } from '../types' -import { ButtonVariant } from './types' import { ButtonIcon } from './ButtonIcon' +import { ButtonVariant } from './types' const icons = { options: ['Info', 'Add'], @@ -75,7 +75,7 @@ const meta = { ' },\n' + '}' } - > + /> ), }, diff --git a/src/components/button/ButtonIcon.tsx b/src/components/button/ButtonIcon.tsx index 5aa4afff..7557ac38 100644 --- a/src/components/button/ButtonIcon.tsx +++ b/src/components/button/ButtonIcon.tsx @@ -1,5 +1,5 @@ -import React, { forwardRef } from 'react' import classNames from 'classnames' +import React, { forwardRef } from 'react' import { useTheme } from '../../framework' import { Mode, Size, Tone } from '../types' import { ButtonIconCommonProps, ButtonStyleProps, ButtonVariant } from './types' diff --git a/src/components/button/ButtonIconLink.stories.tsx b/src/components/button/ButtonIconLink.stories.tsx index ff64f958..1503005a 100644 --- a/src/components/button/ButtonIconLink.stories.tsx +++ b/src/components/button/ButtonIconLink.stories.tsx @@ -1,3 +1,5 @@ +import IconAdd from '@aboutbits/react-material-icons/dist/IconAdd' +import IconInfo from '@aboutbits/react-material-icons/dist/IconInfo' import { Controls, Description, @@ -6,12 +8,10 @@ import { Title, } from '@storybook/addon-docs' import { Meta, StoryObj } from '@storybook/react' -import IconAdd from '@aboutbits/react-material-icons/dist/IconAdd' -import IconInfo from '@aboutbits/react-material-icons/dist/IconInfo' -import { Mode, Size, Tone } from '../types' import { Theme } from '../../../.storybook/components' -import { ButtonVariant } from './types' +import { Mode, Size, Tone } from '../types' import { ButtonIconLink } from './ButtonIconLink' +import { ButtonVariant } from './types' const meta = { component: ButtonIconLink, diff --git a/src/components/button/ButtonIconLink.tsx b/src/components/button/ButtonIconLink.tsx index f93311bb..254c6edf 100644 --- a/src/components/button/ButtonIconLink.tsx +++ b/src/components/button/ButtonIconLink.tsx @@ -5,8 +5,8 @@ import { Mode, Size, Tone } from '../types' import { ButtonIconCommonProps, ButtonStyleProps, - LinkCommonProps, ButtonVariant, + LinkCommonProps, } from './types' export type ButtonIconLinkProps = LinkComponentProps & diff --git a/src/components/button/ButtonLink.stories.tsx b/src/components/button/ButtonLink.stories.tsx index b427ae10..c190c93f 100644 --- a/src/components/button/ButtonLink.stories.tsx +++ b/src/components/button/ButtonLink.stories.tsx @@ -9,10 +9,10 @@ import { Title, } from '@storybook/addon-docs' import { Meta, StoryObj } from '@storybook/react' -import { Mode, Size, Tone } from '../types' import { Theme } from '../../../.storybook/components' -import { ButtonVariant } from './types' +import { Mode, Size, Tone } from '../types' import { ButtonLink } from './ButtonLink' +import { ButtonVariant } from './types' const meta = { component: ButtonLink, diff --git a/src/components/button/ButtonLink.tsx b/src/components/button/ButtonLink.tsx index 9d56179a..6e73a6fa 100644 --- a/src/components/button/ButtonLink.tsx +++ b/src/components/button/ButtonLink.tsx @@ -1,12 +1,12 @@ import classNames from 'classnames' import { forwardRef } from 'react' -import { useLinkComponent, LinkComponentProps, useTheme } from '../../framework' +import { LinkComponentProps, useLinkComponent, useTheme } from '../../framework' import { Mode, Size, Tone } from '../types' import { ButtonCommonProps, ButtonStyleProps, - LinkCommonProps, ButtonVariant, + LinkCommonProps, } from './types' export type ButtonLinkProps = LinkComponentProps & diff --git a/src/components/button/SubmitButton.stories.tsx b/src/components/button/SubmitButton.stories.tsx index b4198994..fa2ecbb2 100644 --- a/src/components/button/SubmitButton.stories.tsx +++ b/src/components/button/SubmitButton.stories.tsx @@ -1,3 +1,5 @@ +import IconAdd from '@aboutbits/react-material-icons/dist/IconAdd' +import IconInfo from '@aboutbits/react-material-icons/dist/IconInfo' import { Controls, Description, @@ -8,8 +10,6 @@ import { } from '@storybook/addon-docs' import { Meta, StoryObj } from '@storybook/react' import { useForm } from 'react-hook-form' -import IconAdd from '@aboutbits/react-material-icons/dist/IconAdd' -import IconInfo from '@aboutbits/react-material-icons/dist/IconInfo' import { Form } from '../react-hook-form' import { SubmitButton } from './SubmitButton' diff --git a/src/components/content/ContentMessage/ContentMessage.stories.tsx b/src/components/content/ContentMessage/ContentMessage.stories.tsx index 56e602b7..a9840315 100644 --- a/src/components/content/ContentMessage/ContentMessage.stories.tsx +++ b/src/components/content/ContentMessage/ContentMessage.stories.tsx @@ -1,6 +1,6 @@ +import IconError from '@aboutbits/react-material-icons/dist/IconError' import IconInfo from '@aboutbits/react-material-icons/dist/IconInfo' import IconWarning from '@aboutbits/react-material-icons/dist/IconWarning' -import IconError from '@aboutbits/react-material-icons/dist/IconError' import { Controls, Description, diff --git a/src/components/content/DescriptionItem/DescriptionItem.tsx b/src/components/content/DescriptionItem/DescriptionItem.tsx index 063db19a..29ecdb9c 100644 --- a/src/components/content/DescriptionItem/DescriptionItem.tsx +++ b/src/components/content/DescriptionItem/DescriptionItem.tsx @@ -51,7 +51,7 @@ export function DescriptionItem({ }: DescriptionItemProps) { return ( <> - {((props.hideIfEmpty && props.content) || !props.hideIfEmpty) && ( + {((props.hideIfEmpty && props.content) ?? !props.hideIfEmpty) && ( {title} diff --git a/src/components/dialog/Dialog/Dialog.stories.tsx b/src/components/dialog/Dialog/Dialog.stories.tsx index 426f4b52..21a5b881 100644 --- a/src/components/dialog/Dialog/Dialog.stories.tsx +++ b/src/components/dialog/Dialog/Dialog.stories.tsx @@ -1,6 +1,5 @@ import { ComponentMeta, ComponentStory, DecoratorFn } from '@storybook/react' import { ReactElement, ReactNode, useState } from 'react' -import { Button } from '../../button' import { Dialog, DialogContent, @@ -11,15 +10,16 @@ import { DialogHeader, DialogHeaderArea, DialogHeaderCloseAction, + DialogHeaderGroup, DialogHeaderLeftActionIcon, DialogHeaderRow, - DialogHeaderGroup, DialogHeaderTitle, DialogHeaderWithClose, DialogPosition, DialogProps, DialogSize, } from '../' +import { Button } from '../../button' import DialogDocs from './Dialog.docs.mdx' type TemplateArgs = DialogProps & { content: ReactNode } diff --git a/src/components/dialog/DialogItem/DialogListItemButton.tsx b/src/components/dialog/DialogItem/DialogListItemButton.tsx index 9349bfce..a2686d71 100644 --- a/src/components/dialog/DialogItem/DialogListItemButton.tsx +++ b/src/components/dialog/DialogItem/DialogListItemButton.tsx @@ -1,6 +1,6 @@ import IconKeyboardArrowRight from '@aboutbits/react-material-icons/dist/IconKeyboardArrowRight' import classNames from 'classnames' -import { forwardRef, MouseEventHandler } from 'react' +import { MouseEventHandler, forwardRef } from 'react' import { useTheme } from '../../../framework' import { ClassNameProps } from '../../types' diff --git a/src/components/form/InputField.stories.tsx b/src/components/form/InputField.stories.tsx index f897da21..4cd51736 100644 --- a/src/components/form/InputField.stories.tsx +++ b/src/components/form/InputField.stories.tsx @@ -1,5 +1,5 @@ -import IconSearch from '@aboutbits/react-material-icons/dist/IconSearch' import IconBadge from '@aboutbits/react-material-icons/dist/IconBadge' +import IconSearch from '@aboutbits/react-material-icons/dist/IconSearch' import { Controls, Description, @@ -115,8 +115,8 @@ export const Disabled: Story = { export const WithIcons: Story = { render: (args) => (
- - + +
), } diff --git a/src/components/form/SearchField.stories.tsx b/src/components/form/SearchField.stories.tsx index 74efc37d..2b12bc5f 100644 --- a/src/components/form/SearchField.stories.tsx +++ b/src/components/form/SearchField.stories.tsx @@ -1,4 +1,3 @@ -import { Meta, StoryObj } from '@storybook/react' import { Controls, Description, @@ -7,6 +6,7 @@ import { Subheading, Title, } from '@storybook/blocks' +import { Meta, StoryObj } from '@storybook/react' import { InternationalizationMessages, Theme, diff --git a/src/components/form/SelectField.stories.tsx b/src/components/form/SelectField.stories.tsx index 012a145d..c00f2c7a 100644 --- a/src/components/form/SelectField.stories.tsx +++ b/src/components/form/SelectField.stories.tsx @@ -7,8 +7,8 @@ import { Title, } from '@storybook/addon-docs' import { Meta, StoryObj } from '@storybook/react' -import { SelectField } from './SelectField' import { Option } from './primitive/Option' +import { SelectField } from './SelectField' import { Status } from './types' const children = ( diff --git a/src/components/form/SelectMonthField.stories.tsx b/src/components/form/SelectMonthField.stories.tsx index 6277735d..9458c5fa 100644 --- a/src/components/form/SelectMonthField.stories.tsx +++ b/src/components/form/SelectMonthField.stories.tsx @@ -45,7 +45,7 @@ const meta = { 'month.november', 'month.december', ]} - > + /> ), }, diff --git a/src/components/form/SelectMonthField.tsx b/src/components/form/SelectMonthField.tsx index 89c5a66f..df792aaf 100644 --- a/src/components/form/SelectMonthField.tsx +++ b/src/components/form/SelectMonthField.tsx @@ -1,8 +1,8 @@ import { forwardRef } from 'react' import { useInternationalization } from '../../framework' import { Mode } from '../types' -import { SelectField, SelectFieldProps } from './SelectField' import { Option } from './primitive' +import { SelectField, SelectFieldProps } from './SelectField' export const MONTHS = [ 'JANUARY', diff --git a/src/components/form/SelectYearField.tsx b/src/components/form/SelectYearField.tsx index 9d4e7d1f..6f71e61b 100644 --- a/src/components/form/SelectYearField.tsx +++ b/src/components/form/SelectYearField.tsx @@ -1,7 +1,7 @@ import { forwardRef } from 'react' import { Mode } from '../types' -import { SelectField, SelectFieldProps } from './SelectField' import { Option } from './primitive' +import { SelectField, SelectFieldProps } from './SelectField' export type SelectYearFieldProps = Omit & SelectYearFieldOptionsProps diff --git a/src/components/form/primitive/Checkbox/Checkbox.stories.tsx b/src/components/form/primitive/Checkbox/Checkbox.stories.tsx index f331a7e3..e7e45ca2 100644 --- a/src/components/form/primitive/Checkbox/Checkbox.stories.tsx +++ b/src/components/form/primitive/Checkbox/Checkbox.stories.tsx @@ -1,4 +1,3 @@ -import { Meta, StoryObj } from '@storybook/react' import { Controls, Description, @@ -7,6 +6,7 @@ import { Subheading, Title, } from '@storybook/addon-docs' +import { Meta, StoryObj } from '@storybook/react' import { Theme } from '../../../../../.storybook/components' import { Checkbox } from './Checkbox' diff --git a/src/components/form/primitive/Checkbox/Checkbox.tsx b/src/components/form/primitive/Checkbox/Checkbox.tsx index e75cfdf8..26b8a710 100644 --- a/src/components/form/primitive/Checkbox/Checkbox.tsx +++ b/src/components/form/primitive/Checkbox/Checkbox.tsx @@ -1,7 +1,7 @@ import IconCheckBoxOutlineBlankRounded from '@aboutbits/react-material-icons/dist/IconCheckBoxOutlineBlankRounded' import IconCheckBoxRounded from '@aboutbits/react-material-icons/dist/IconCheckBoxRounded' import classNames from 'classnames' -import { forwardRef, ReactNode } from 'react' +import { ReactNode, forwardRef } from 'react' import { useTheme } from '../../../../framework' import { HideRequiredProps, diff --git a/src/components/form/primitive/Input.stories.tsx b/src/components/form/primitive/Input.stories.tsx index d8ad959e..facdf92a 100644 --- a/src/components/form/primitive/Input.stories.tsx +++ b/src/components/form/primitive/Input.stories.tsx @@ -1,3 +1,5 @@ +import IconBadge from '@aboutbits/react-material-icons/dist/IconBadge' +import IconSearch from '@aboutbits/react-material-icons/dist/IconSearch' import { Controls, Description, @@ -7,8 +9,6 @@ import { Title, } from '@storybook/addon-docs' import { Meta, StoryObj } from '@storybook/react' -import IconSearch from '@aboutbits/react-material-icons/dist/IconSearch' -import IconBadge from '@aboutbits/react-material-icons/dist/IconBadge' import { Theme } from '../../../../.storybook/components' import { FormTone, FormVariant } from '../types' import { Input } from './Input' diff --git a/src/components/form/primitive/InputIcon/InputIcon.stories.tsx b/src/components/form/primitive/InputIcon/InputIcon.stories.tsx index de87c1f1..8b1ca549 100644 --- a/src/components/form/primitive/InputIcon/InputIcon.stories.tsx +++ b/src/components/form/primitive/InputIcon/InputIcon.stories.tsx @@ -1,3 +1,5 @@ +import IconBadge from '@aboutbits/react-material-icons/dist/IconBadge' +import IconSearch from '@aboutbits/react-material-icons/dist/IconSearch' import { Controls, Description, @@ -7,8 +9,6 @@ import { Title, } from '@storybook/addon-docs' import { Meta, StoryObj } from '@storybook/react' -import IconBadge from '@aboutbits/react-material-icons/dist/IconBadge' -import IconSearch from '@aboutbits/react-material-icons/dist/IconSearch' import { Theme } from '../../../../../.storybook/components' import { InputIcon } from './InputIcon' import { IconPosition } from './types' diff --git a/src/components/form/primitive/Radio/Radio.tsx b/src/components/form/primitive/Radio/Radio.tsx index 9a259c5e..d76f2a30 100644 --- a/src/components/form/primitive/Radio/Radio.tsx +++ b/src/components/form/primitive/Radio/Radio.tsx @@ -1,7 +1,7 @@ -import classNames from 'classnames' -import { forwardRef, ReactNode } from 'react' import IconRadioButtonCheckedRounded from '@aboutbits/react-material-icons/dist/IconRadioButtonCheckedRounded' import IconRadioButtonUncheckedOutlined from '@aboutbits/react-material-icons/dist/IconRadioButtonUncheckedOutlined' +import classNames from 'classnames' +import { ReactNode, forwardRef } from 'react' import { IconProps, Mode, ModeProps, Size } from '../../../types' import { useRadioCss, diff --git a/src/components/form/primitive/Select.stories.tsx b/src/components/form/primitive/Select.stories.tsx index 8ccc8697..65682e5e 100644 --- a/src/components/form/primitive/Select.stories.tsx +++ b/src/components/form/primitive/Select.stories.tsx @@ -9,8 +9,8 @@ import { import { Meta, StoryObj } from '@storybook/react' import { Theme } from '../../../../.storybook/components' import { FormTone, FormVariant } from '../types' -import { Select } from './Select' import { Option } from './Option' +import { Select } from './Select' const meta = { component: Select, @@ -53,10 +53,10 @@ export const Default: Story = {} export const Variants: Story = { render: (args) => (
- - - - + +
), } @@ -64,8 +64,8 @@ export const Variants: Story = { export const Tone: Story = { render: (args) => (
- - +
), } diff --git a/src/components/form/primitive/ToggleSwitch/ToggleSwitch.tsx b/src/components/form/primitive/ToggleSwitch/ToggleSwitch.tsx index 6daf1c31..cbec729e 100644 --- a/src/components/form/primitive/ToggleSwitch/ToggleSwitch.tsx +++ b/src/components/form/primitive/ToggleSwitch/ToggleSwitch.tsx @@ -1,5 +1,5 @@ import classNames from 'classnames' -import { forwardRef, ReactNode } from 'react' +import { ReactNode, forwardRef } from 'react' import { HideRequiredProps, Mode, diff --git a/src/components/link/TextLink.tsx b/src/components/link/TextLink.tsx index 5f01203b..a0dcbd3f 100644 --- a/src/components/link/TextLink.tsx +++ b/src/components/link/TextLink.tsx @@ -1,6 +1,6 @@ import classNames from 'classnames' import { forwardRef } from 'react' -import { useTheme, useLinkComponent, LinkComponentProps } from '../../framework' +import { LinkComponentProps, useLinkComponent, useTheme } from '../../framework' export const TextLink = forwardRef( function TextLink({ children, className, internal = true, ...props }, ref) { diff --git a/src/components/menu/Menu.stories.tsx b/src/components/menu/Menu.stories.tsx index 565ced0f..9cb55095 100644 --- a/src/components/menu/Menu.stories.tsx +++ b/src/components/menu/Menu.stories.tsx @@ -1,15 +1,15 @@ import IconArrowDropUp from '@aboutbits/react-material-icons/dist/IconArrowDropUp' import IconMoreVert from '@aboutbits/react-material-icons/dist/IconMoreVert' import { action } from '@storybook/addon-actions' -import { Meta, StoryObj } from '@storybook/react' import { Controls, + Description, Primary, Stories, Subheading, Title, - Description, } from '@storybook/addon-docs' +import { Meta, StoryObj } from '@storybook/react' import classNames from 'classnames' import { ReactNode, forwardRef, useEffect, useRef } from 'react' import { Theme } from '../../../.storybook/components' diff --git a/src/components/menu/Menu.tsx b/src/components/menu/Menu.tsx index 67695fc3..dbe4ba7a 100644 --- a/src/components/menu/Menu.tsx +++ b/src/components/menu/Menu.tsx @@ -1,13 +1,13 @@ -import { Menu as HeadlessMenu } from '@headlessui/react' -import { Fragment, ReactElement, ReactNode, ReactPortal } from 'react' import { + FloatingPortal, autoUpdate, - useFloating, flip, offset, - FloatingPortal, + useFloating, } from '@floating-ui/react' +import { Menu as HeadlessMenu } from '@headlessui/react' import classNames from 'classnames' +import { Fragment, ReactElement, ReactNode, ReactPortal } from 'react' import { useTheme } from '../../framework' import { remToPx } from '../util/remToPx' diff --git a/src/components/menu/MenuItem.stories.tsx b/src/components/menu/MenuItem.stories.tsx index 46ea8cd4..29549e93 100644 --- a/src/components/menu/MenuItem.stories.tsx +++ b/src/components/menu/MenuItem.stories.tsx @@ -1,13 +1,13 @@ import { action } from '@storybook/addon-actions' -import { Meta, StoryObj } from '@storybook/react' import { Controls, + Description, Primary, Stories, Subheading, Title, - Description, } from '@storybook/addon-docs' +import { Meta, StoryObj } from '@storybook/react' import { useEffect, useRef } from 'react' import { Theme } from '../../../.storybook/components' import { Button } from '../button' diff --git a/src/components/menu/MenuItem.tsx b/src/components/menu/MenuItem.tsx index 7ec553d7..c9f188ba 100644 --- a/src/components/menu/MenuItem.tsx +++ b/src/components/menu/MenuItem.tsx @@ -1,8 +1,8 @@ import { Menu as HeadlessMenu } from '@headlessui/react' -import { Fragment, ReactNode } from 'react' import classNames from 'classnames' -import { ClassNameProps, Tone } from '../types' +import { Fragment, ReactNode } from 'react' import { useLinkComponent, useTheme } from '../../framework' +import { ClassNameProps, Tone } from '../types' export type MenuItemProps = ClassNameProps & { children: ReactNode diff --git a/src/components/pagination/PaginationInMemory.tsx b/src/components/pagination/PaginationInMemory.tsx index 7efa0f85..206972e7 100644 --- a/src/components/pagination/PaginationInMemory.tsx +++ b/src/components/pagination/PaginationInMemory.tsx @@ -1,4 +1,4 @@ -import { calculatePagination, IndexType } from '@aboutbits/pagination' +import { IndexType, calculatePagination } from '@aboutbits/pagination' import classNames from 'classnames' import { ReactNode } from 'react' import { useInternationalization, useTheme } from '../../framework' diff --git a/src/components/pagination/PaginationPreviousNextContent.tsx b/src/components/pagination/PaginationPreviousNextContent.tsx index 667dbefc..c6c36fc4 100644 --- a/src/components/pagination/PaginationPreviousNextContent.tsx +++ b/src/components/pagination/PaginationPreviousNextContent.tsx @@ -1,7 +1,7 @@ -import { ReactElement } from 'react' -import IconKeyboardArrowRight from '@aboutbits/react-material-icons/dist/IconKeyboardArrowRight' import IconKeyboardArrowLeft from '@aboutbits/react-material-icons/dist/IconKeyboardArrowLeft' -import { useTheme, useInternationalization } from '../../framework' +import IconKeyboardArrowRight from '@aboutbits/react-material-icons/dist/IconKeyboardArrowRight' +import { ReactElement } from 'react' +import { useInternationalization, useTheme } from '../../framework' export function PaginationPreviousContent(): ReactElement { const { pagination } = useTheme() diff --git a/src/components/pagination/PaginationRouter.tsx b/src/components/pagination/PaginationRouter.tsx index 06e6e23e..0ada2639 100644 --- a/src/components/pagination/PaginationRouter.tsx +++ b/src/components/pagination/PaginationRouter.tsx @@ -1,21 +1,21 @@ +import { IndexType, calculatePagination } from '@aboutbits/pagination' import classNames from 'classnames' -import { calculatePagination, IndexType } from '@aboutbits/pagination' import { LinkComponentProps, + useInternationalization, useLinkComponent, useTheme, - useInternationalization, } from '../../framework' import { ClassNameProps } from '../types' import { PaginationContainer } from './PaginationContainer' -import { - PaginationNextContent, - PaginationPreviousContent, -} from './PaginationPreviousNextContent' import { PaginationPagesList, PaginationPagesListItem, } from './PaginationPagesList' +import { + PaginationNextContent, + PaginationPreviousContent, +} from './PaginationPreviousNextContent' export type PaginationRouterProps = ClassNameProps & { /** diff --git a/src/components/react-hook-form/AutoSubmit.tsx b/src/components/react-hook-form/AutoSubmit.tsx index 032986d9..10a05c16 100644 --- a/src/components/react-hook-form/AutoSubmit.tsx +++ b/src/components/react-hook-form/AutoSubmit.tsx @@ -1,6 +1,6 @@ +import { useDebounce } from '@aboutbits/react-toolbox' import { ReactElement, useEffect, useRef } from 'react' import { useWatch } from 'react-hook-form' -import { useDebounce } from '@aboutbits/react-toolbox' export function AutoSubmit({ interval = 200, diff --git a/src/components/react-hook-form/CheckboxFormField.stories.tsx b/src/components/react-hook-form/CheckboxFormField.stories.tsx index ae077e0c..bcac7fd5 100644 --- a/src/components/react-hook-form/CheckboxFormField.stories.tsx +++ b/src/components/react-hook-form/CheckboxFormField.stories.tsx @@ -1,16 +1,16 @@ +import { zodResolver } from '@hookform/resolvers/zod' +import { action } from '@storybook/addon-actions' import { - Title, + Controls, Primary, Stories, Subheading, - Controls, + Title, } from '@storybook/addon-docs' import { Description } from '@storybook/blocks' -import { z } from 'zod' -import { DefaultValues, useForm } from 'react-hook-form' -import { zodResolver } from '@hookform/resolvers/zod' -import { action } from '@storybook/addon-actions' import { Meta, StoryObj } from '@storybook/react' +import { DefaultValues, useForm } from 'react-hook-form' +import { z } from 'zod' import { CheckboxFormField } from './CheckboxFormField' import { Form } from './Form' diff --git a/src/components/react-hook-form/DateFormField.stories.tsx b/src/components/react-hook-form/DateFormField.stories.tsx index a1f2dc10..1ecbd93c 100644 --- a/src/components/react-hook-form/DateFormField.stories.tsx +++ b/src/components/react-hook-form/DateFormField.stories.tsx @@ -1,3 +1,5 @@ +import IconInfo from '@aboutbits/react-material-icons/dist/IconInfo' +import IconWarning from '@aboutbits/react-material-icons/dist/IconWarning' import { zodResolver } from '@hookform/resolvers/zod' import { action } from '@storybook/addon-actions' import { @@ -11,10 +13,8 @@ import { Description } from '@storybook/blocks' import { Meta, StoryObj } from '@storybook/react' import { DefaultValues, useForm } from 'react-hook-form' import { z } from 'zod' -import IconWarning from '@aboutbits/react-material-icons/dist/IconWarning' -import IconInfo from '@aboutbits/react-material-icons/dist/IconInfo' -import { Form } from './Form' import { DateFormField } from './DateFormField' +import { Form } from './Form' const icons = { options: ['None', 'Warning', 'Info'], diff --git a/src/components/react-hook-form/FieldSetFormField.stories.tsx b/src/components/react-hook-form/FieldSetFormField.stories.tsx index b435ba40..ee46b1f8 100644 --- a/src/components/react-hook-form/FieldSetFormField.stories.tsx +++ b/src/components/react-hook-form/FieldSetFormField.stories.tsx @@ -11,8 +11,8 @@ import { Description } from '@storybook/blocks' import { Meta, StoryObj } from '@storybook/react' import { useForm } from 'react-hook-form' import { z } from 'zod' -import { Form } from './Form' import { FieldSetFormField } from './FieldSetFormField' +import { Form } from './Form' import { RadioFormField } from './RadioFormField' const YES_NO = ['YES', 'NO'] as const diff --git a/src/components/react-hook-form/InputFormField.stories.tsx b/src/components/react-hook-form/InputFormField.stories.tsx index b52213e5..675ce44c 100644 --- a/src/components/react-hook-form/InputFormField.stories.tsx +++ b/src/components/react-hook-form/InputFormField.stories.tsx @@ -1,20 +1,20 @@ import IconBadge from '@aboutbits/react-material-icons/dist/IconBadge' import IconSearch from '@aboutbits/react-material-icons/dist/IconSearch' +import { zodResolver } from '@hookform/resolvers/zod' +import { action } from '@storybook/addon-actions' import { - Title, + Controls, Primary, Stories, Subheading, - Controls, + Title, } from '@storybook/addon-docs' import { Description } from '@storybook/blocks' -import { z } from 'zod' -import { DefaultValues, useForm } from 'react-hook-form' -import { zodResolver } from '@hookform/resolvers/zod' -import { action } from '@storybook/addon-actions' import { Meta, StoryObj } from '@storybook/react' -import { InputFormField } from './InputFormField' +import { DefaultValues, useForm } from 'react-hook-form' +import { z } from 'zod' import { Form } from './Form' +import { InputFormField } from './InputFormField' const icons = { options: ['None', 'Badge', 'Search'], diff --git a/src/components/react-hook-form/NumberFormField.stories.tsx b/src/components/react-hook-form/NumberFormField.stories.tsx index 1977d4bf..1e571c45 100644 --- a/src/components/react-hook-form/NumberFormField.stories.tsx +++ b/src/components/react-hook-form/NumberFormField.stories.tsx @@ -1,18 +1,18 @@ +import IconInfo from '@aboutbits/react-material-icons/dist/IconInfo' +import IconWarning from '@aboutbits/react-material-icons/dist/IconWarning' +import { zodResolver } from '@hookform/resolvers/zod' +import { action } from '@storybook/addon-actions' import { - Title, + Controls, Primary, Stories, Subheading, - Controls, + Title, } from '@storybook/addon-docs' import { Description } from '@storybook/blocks' -import { z } from 'zod' -import { DefaultValues, useForm } from 'react-hook-form' -import { zodResolver } from '@hookform/resolvers/zod' -import { action } from '@storybook/addon-actions' import { Meta, StoryObj } from '@storybook/react' -import IconWarning from '@aboutbits/react-material-icons/dist/IconWarning' -import IconInfo from '@aboutbits/react-material-icons/dist/IconInfo' +import { DefaultValues, useForm } from 'react-hook-form' +import { z } from 'zod' import { Form } from './Form' import { NumberFormField } from './NumberFormField' diff --git a/src/components/react-hook-form/SearchFormField.stories.tsx b/src/components/react-hook-form/SearchFormField.stories.tsx index e069767f..bcc6a1de 100644 --- a/src/components/react-hook-form/SearchFormField.stories.tsx +++ b/src/components/react-hook-form/SearchFormField.stories.tsx @@ -1,4 +1,4 @@ -import { Meta, StoryObj } from '@storybook/react' +import { action } from '@storybook/addon-actions' import { Controls, Description, @@ -7,15 +7,15 @@ import { Subheading, Title, } from '@storybook/blocks' -import { action } from '@storybook/addon-actions' +import { Meta, StoryObj } from '@storybook/react' import { useForm } from 'react-hook-form' import { InternationalizationMessages, Theme, } from '../../../.storybook/components' import { Section, SectionHeaderArea } from '../section' -import { SearchFormField } from './SearchFormField' import { Form } from './Form' +import { SearchFormField } from './SearchFormField' const meta = { component: SearchFormField, diff --git a/src/components/react-hook-form/SelectFormField.tsx b/src/components/react-hook-form/SelectFormField.tsx index dac996e9..f193c7b4 100644 --- a/src/components/react-hook-form/SelectFormField.tsx +++ b/src/components/react-hook-form/SelectFormField.tsx @@ -2,10 +2,10 @@ import { Children, ComponentProps, ForwardedRef, - forwardRef, - isValidElement, ReactElement, ReactNode, + forwardRef, + isValidElement, useEffect, useMemo, } from 'react' @@ -57,7 +57,7 @@ export const SelectFormField = forwardRef(function SelectFormField< const setValueAs = useMemo(() => { return ( - registerOptions?.setValueAs || + registerOptions?.setValueAs ?? ((input: unknown) => { return input === '' && transformEmptyToNull ? null : input }) diff --git a/src/components/react-hook-form/SelectItemFormField/SelectItemFormField.stories.tsx b/src/components/react-hook-form/SelectItemFormField/SelectItemFormField.stories.tsx index 1bf574f2..09bb7e0f 100644 --- a/src/components/react-hook-form/SelectItemFormField/SelectItemFormField.stories.tsx +++ b/src/components/react-hook-form/SelectItemFormField/SelectItemFormField.stories.tsx @@ -10,7 +10,7 @@ import { } from '@storybook/addon-docs' import { Description } from '@storybook/blocks' import { Meta, StoryObj } from '@storybook/react' -import { useState, useEffect } from 'react' +import { useEffect, useState } from 'react' import { DefaultValues, useForm } from 'react-hook-form' import { z } from 'zod' import { @@ -20,8 +20,8 @@ import { import { ErrorBody } from '../../util' import { Form } from '../Form' import { - SearchQueryParameters, PaginatedResponse, + SearchQueryParameters, SelectItemFormField, } from '.' diff --git a/src/components/react-hook-form/SelectItemFormField/SelectItemFormFieldDialog.tsx b/src/components/react-hook-form/SelectItemFormField/SelectItemFormFieldDialog.tsx index 2344f3a0..8330199b 100644 --- a/src/components/react-hook-form/SelectItemFormField/SelectItemFormFieldDialog.tsx +++ b/src/components/react-hook-form/SelectItemFormField/SelectItemFormFieldDialog.tsx @@ -1,9 +1,9 @@ +import { IndexType } from '@aboutbits/pagination' import IconSearch from '@aboutbits/react-material-icons/dist/IconSearch' +import { useQueryAndPagination } from '@aboutbits/react-pagination/dist/routers/inMemory' import { AsyncView } from '@aboutbits/react-toolbox' import { ReactElement, ReactNode } from 'react' import { FormProvider, useForm } from 'react-hook-form' -import { IndexType } from '@aboutbits/pagination' -import { useQueryAndPagination } from '@aboutbits/react-pagination/dist/routers/inMemory' import { useInternationalization, useTheme } from '../../../framework' import { Dialog, @@ -23,8 +23,8 @@ import { } from '../../dialog' import { FormVariant } from '../../form' import { PaginationInMemoryProps } from '../../pagination' -import { InputFormField } from '../InputFormField' import { AutoSubmit } from '../AutoSubmit' +import { InputFormField } from '../InputFormField' type FilterParameters = { search: string diff --git a/src/components/react-hook-form/SelectItemFormField/SelectItemFormFieldInput.tsx b/src/components/react-hook-form/SelectItemFormField/SelectItemFormFieldInput.tsx index a0f2e242..0def1c95 100644 --- a/src/components/react-hook-form/SelectItemFormField/SelectItemFormFieldInput.tsx +++ b/src/components/react-hook-form/SelectItemFormField/SelectItemFormFieldInput.tsx @@ -5,7 +5,7 @@ import { ReactNode, useMemo, useRef } from 'react' import { useInternationalization, useTheme } from '../../../framework' import { FormTone, FormVariant, InputLabel, InputMessage } from '../../form' import { useInputCss } from '../../form/primitive/useThemedCss' -import { Mode, RequiredProps, HideRequiredProps } from '../../types' +import { HideRequiredProps, Mode, RequiredProps } from '../../types' import { useId } from '../../util' import { useFieldError } from '../util/useFieldError' import { replacePlaceholderColorWithTextColor } from './replacePlaceholderColorWithTextColor' diff --git a/src/components/react-hook-form/TextAreaFormField.stories.tsx b/src/components/react-hook-form/TextAreaFormField.stories.tsx index ca93f2f0..6e546eab 100644 --- a/src/components/react-hook-form/TextAreaFormField.stories.tsx +++ b/src/components/react-hook-form/TextAreaFormField.stories.tsx @@ -1,16 +1,16 @@ +import { zodResolver } from '@hookform/resolvers/zod' +import { action } from '@storybook/addon-actions' import { - Title, + Controls, Primary, Stories, Subheading, - Controls, + Title, } from '@storybook/addon-docs' import { Description } from '@storybook/blocks' -import { z } from 'zod' -import { DefaultValues, useForm } from 'react-hook-form' -import { zodResolver } from '@hookform/resolvers/zod' -import { action } from '@storybook/addon-actions' import { Meta, StoryObj } from '@storybook/react' +import { DefaultValues, useForm } from 'react-hook-form' +import { z } from 'zod' import { Form } from './Form' import { TextAreaFormField } from './TextAreaFormField' diff --git a/src/components/react-hook-form/ToggleSwitchFormField.stories.tsx b/src/components/react-hook-form/ToggleSwitchFormField.stories.tsx index e82c6c31..172d8f78 100644 --- a/src/components/react-hook-form/ToggleSwitchFormField.stories.tsx +++ b/src/components/react-hook-form/ToggleSwitchFormField.stories.tsx @@ -1,16 +1,16 @@ +import { zodResolver } from '@hookform/resolvers/zod' +import { action } from '@storybook/addon-actions' import { - Title, + Controls, Primary, Stories, Subheading, - Controls, + Title, } from '@storybook/addon-docs' import { Description } from '@storybook/blocks' -import { z } from 'zod' -import { DefaultValues, useForm } from 'react-hook-form' -import { zodResolver } from '@hookform/resolvers/zod' -import { action } from '@storybook/addon-actions' import { Meta, StoryObj } from '@storybook/react' +import { DefaultValues, useForm } from 'react-hook-form' +import { z } from 'zod' import { Form } from './Form' import { ToggleSwitchFormField } from './ToggleSwitchFormField' diff --git a/src/components/react-hook-form/__test__/useHandleSubmit.test.ts b/src/components/react-hook-form/__test__/useHandleSubmit.test.ts index edf8c8c3..eaf7fe59 100644 --- a/src/components/react-hook-form/__test__/useHandleSubmit.test.ts +++ b/src/components/react-hook-form/__test__/useHandleSubmit.test.ts @@ -1,8 +1,8 @@ import { act, renderHook, waitFor } from '@testing-library/react' +import { AxiosError, AxiosHeaders } from 'axios' import { FieldValues, useForm } from 'react-hook-form' import { vi } from 'vitest' import { undefined } from 'zod' -import { AxiosError, AxiosHeaders } from 'axios' import { defaultMessages } from '../../../framework/internationalization/defaultMessages.en' import { useHandleSubmit } from '../useHandleSubmit' @@ -27,6 +27,7 @@ describe('useHandleSubmit', () => { }: { response: unknown values: FieldValues + // eslint-disable-next-line @typescript-eslint/no-empty-function }) => {} const headers = new AxiosHeaders() diff --git a/src/components/react-hook-form/useHandleSubmit.ts b/src/components/react-hook-form/useHandleSubmit.ts index d3232765..b8588364 100644 --- a/src/components/react-hook-form/useHandleSubmit.ts +++ b/src/components/react-hook-form/useHandleSubmit.ts @@ -1,11 +1,11 @@ -import { FieldValues, Path, UseFormReturn } from 'react-hook-form' import { useCallback } from 'react' +import { FieldValues, Path, UseFormReturn } from 'react-hook-form' import { - joinFieldErrorMessages, - useHandleRequest, UseHandleRequestOptions, UseHandleRequestReturn, UseHandleRequestTrigger, + joinFieldErrorMessages, + useHandleRequest, } from '../util' const DEFAULT_ERROR_FIELD_PATH = 'apiError' diff --git a/src/components/section/Section/ConvenientSectionContentMessage.tsx b/src/components/section/Section/ConvenientSectionContentMessage.tsx index d2f49021..7d73523a 100644 --- a/src/components/section/Section/ConvenientSectionContentMessage.tsx +++ b/src/components/section/Section/ConvenientSectionContentMessage.tsx @@ -1,6 +1,6 @@ -import { ReactElement } from 'react' import IconList from '@aboutbits/react-material-icons/dist/IconList' import IconWarning from '@aboutbits/react-material-icons/dist/IconWarning' +import { ReactElement } from 'react' import { Tone } from '../../types' import { SectionContentMessage, diff --git a/src/components/section/Section/SectionAppendix.stories.tsx b/src/components/section/Section/SectionAppendix.stories.tsx index ee0895cb..a1880ad8 100644 --- a/src/components/section/Section/SectionAppendix.stories.tsx +++ b/src/components/section/Section/SectionAppendix.stories.tsx @@ -1,4 +1,3 @@ -import { Meta, StoryObj } from '@storybook/react' import { Controls, Description, @@ -7,11 +6,12 @@ import { Subheading, Title, } from '@storybook/blocks' +import { Meta, StoryObj } from '@storybook/react' +import { Theme } from '../../../../.storybook/components/Theme' import { Button, ButtonVariant } from '../../button' import { Tone } from '../../types' -import { Theme } from '../../../../.storybook/components/Theme' -import { SectionAppendix } from './SectionAppendix' import { Section } from './Section' +import { SectionAppendix } from './SectionAppendix' import { SectionContainer } from './SectionContainer' import { SectionContent } from './SectionContent' diff --git a/src/components/section/SectionFooter/SectionFooterArea.stories.tsx b/src/components/section/SectionFooter/SectionFooterArea.stories.tsx index 238a5c47..c137f342 100644 --- a/src/components/section/SectionFooter/SectionFooterArea.stories.tsx +++ b/src/components/section/SectionFooter/SectionFooterArea.stories.tsx @@ -1,12 +1,12 @@ -import { Meta, StoryObj } from '@storybook/react' import { Controls, + Description, Primary, Stories, Subheading, Title, - Description, } from '@storybook/addon-docs' +import { Meta, StoryObj } from '@storybook/react' import { Theme } from '../../../../.storybook/components' import { SectionFooterArea } from '../index' import { SectionFooterVariant } from './types' diff --git a/src/components/section/SectionFooter/SectionFooterWithPaginationInMemory.stories.tsx b/src/components/section/SectionFooter/SectionFooterWithPaginationInMemory.stories.tsx index b4eb39a5..43095ba2 100644 --- a/src/components/section/SectionFooter/SectionFooterWithPaginationInMemory.stories.tsx +++ b/src/components/section/SectionFooter/SectionFooterWithPaginationInMemory.stories.tsx @@ -1,19 +1,19 @@ -import { Meta, StoryObj } from '@storybook/react' +import { IndexType } from '@aboutbits/pagination' import { Controls, + Description, Primary, Stories, Subheading, Title, - Description, } from '@storybook/addon-docs' -import { IndexType } from '@aboutbits/pagination' +import { Meta, StoryObj } from '@storybook/react' import { useState } from 'react' -import { SectionFooterVariant } from './types' import { SectionFooterWithPaginationInMemory, SectionFooterWithPaginationInMemoryProps, } from './SectionFooterWithPaginationInMemory' +import { SectionFooterVariant } from './types' const Template = (args: SectionFooterWithPaginationInMemoryProps) => { const [page, setPage] = useState(args.page) diff --git a/src/components/section/SectionFooter/SectionFooterWithPaginationRouter.stories.tsx b/src/components/section/SectionFooter/SectionFooterWithPaginationRouter.stories.tsx index 613d01bb..60a0bd37 100644 --- a/src/components/section/SectionFooter/SectionFooterWithPaginationRouter.stories.tsx +++ b/src/components/section/SectionFooter/SectionFooterWithPaginationRouter.stories.tsx @@ -1,13 +1,13 @@ -import { Meta, StoryObj } from '@storybook/react' +import { IndexType } from '@aboutbits/pagination' import { Controls, + Description, Primary, Stories, Subheading, Title, - Description, } from '@storybook/addon-docs' -import { IndexType } from '@aboutbits/pagination' +import { Meta, StoryObj } from '@storybook/react' import { SectionFooterWithPaginationRouter } from './SectionFooterWithPaginationRouter' import { SectionFooterVariant } from './types' diff --git a/src/components/section/SectionHeader/SectionHeaderTitle.tsx b/src/components/section/SectionHeader/SectionHeaderTitle.tsx index abfdcbb6..47693707 100644 --- a/src/components/section/SectionHeader/SectionHeaderTitle.tsx +++ b/src/components/section/SectionHeader/SectionHeaderTitle.tsx @@ -1,5 +1,5 @@ -import { ReactNode } from 'react' import classNames from 'classnames' +import { ReactNode } from 'react' import { useTheme } from '../../../framework' import { ClassNameProps } from '../../types' diff --git a/src/components/section/SectionItem/SectionListItem.tsx b/src/components/section/SectionItem/SectionListItem.tsx index 96d7dcde..cbc46311 100644 --- a/src/components/section/SectionItem/SectionListItem.tsx +++ b/src/components/section/SectionItem/SectionListItem.tsx @@ -1,5 +1,5 @@ -import classNames from 'classnames' import IconKeyboardArrowRight from '@aboutbits/react-material-icons/dist/IconKeyboardArrowRight' +import classNames from 'classnames' import { ReactNode, forwardRef } from 'react' import { LinkComponentProps, diff --git a/src/components/tabs/TabsContext.ts b/src/components/tabs/TabsContext.ts index 9dfde698..a3f508d1 100644 --- a/src/components/tabs/TabsContext.ts +++ b/src/components/tabs/TabsContext.ts @@ -1,6 +1,6 @@ import { createContext } from 'react' -export interface TabsContextInterface { +export type TabsContextInterface = { /** * Define the active tab by its name */ diff --git a/src/components/util/__test__/useHandleRequest.test.ts b/src/components/util/__test__/useHandleRequest.test.ts index faed68d7..32dd9676 100644 --- a/src/components/util/__test__/useHandleRequest.test.ts +++ b/src/components/util/__test__/useHandleRequest.test.ts @@ -1,6 +1,6 @@ import { act, renderHook, waitFor } from '@testing-library/react' -import { vi } from 'vitest' import { AxiosError, AxiosHeaders } from 'axios' +import { vi } from 'vitest' import { defaultMessages } from '../../../framework/internationalization/defaultMessages.en' import { useHandleRequest } from '../useHandleRequest' diff --git a/src/components/util/useForwardedRef.ts b/src/components/util/useForwardedRef.ts index 54fb88ba..a2bf0101 100644 --- a/src/components/util/useForwardedRef.ts +++ b/src/components/util/useForwardedRef.ts @@ -5,6 +5,7 @@ import { ForwardedRef, useImperativeHandle, useRef } from 'react' */ export function useForwardedRef(ref: ForwardedRef) { const forwardedRef = useRef(null) - useImperativeHandle(ref, () => forwardedRef.current as T) + // eslint-disable-next-line @typescript-eslint/no-non-null-assertion + useImperativeHandle(ref, () => forwardedRef.current!) return forwardedRef } diff --git a/src/components/util/useHandleRequest.ts b/src/components/util/useHandleRequest.ts index 873170a5..328bd1c6 100644 --- a/src/components/util/useHandleRequest.ts +++ b/src/components/util/useHandleRequest.ts @@ -1,5 +1,5 @@ -import { useCallback, useState } from 'react' import { useIsMounted } from '@aboutbits/react-toolbox' +import { useCallback, useState } from 'react' import { useInternationalization } from '../../framework' import { isAxiosErrorWithErrorBody } from './helpers' import { ErrorBody } from './types' diff --git a/src/components/util/useId.ts b/src/components/util/useId.ts index 897cae95..4b57d971 100644 --- a/src/components/util/useId.ts +++ b/src/components/util/useId.ts @@ -22,7 +22,6 @@ const useIsomorphicLayoutEffect = canUseDOM() ? useLayoutEffect : useEffect function canUseDOM() { return Boolean( typeof window !== 'undefined' && - typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined', ) } diff --git a/src/examples/Form.stories.tsx b/src/examples/Form.stories.tsx index ecddad07..b4a24166 100644 --- a/src/examples/Form.stories.tsx +++ b/src/examples/Form.stories.tsx @@ -1,42 +1,42 @@ import { IndexType } from '@aboutbits/pagination' -import { action } from '@storybook/addon-actions' +import IconCheck from '@aboutbits/react-material-icons/dist/IconCheck' import { zodResolver } from '@hookform/resolvers/zod' +import { action } from '@storybook/addon-actions' import { Markdown, Primary, Title } from '@storybook/addon-docs' import { Meta, StoryFn } from '@storybook/react' +import { AxiosError, AxiosHeaders } from 'axios' import { useEffect, useState } from 'react' import { DefaultValues, useForm } from 'react-hook-form' import { z } from 'zod' -import IconCheck from '@aboutbits/react-material-icons/dist/IconCheck' -import { AxiosError, AxiosHeaders } from 'axios' import { + Alert, + CheckboxFormField, ContentArea, DescriptionItem, DescriptionItemContentAlignVertical, - Section, - SectionContainer, - SectionContent, - SectionContentLayout, - SectionFooterWithSubmit, - SectionHeader, - Alert, FieldSetField, - FieldSetIndent, - FormError, - Option, - ToggleSwitchLayout, - CheckboxFormField, FieldSetFormField, + FieldSetIndent, Form, + FormError, InputFormField, + Option, PaginatedResponse, RadioFormField, SearchQueryParameters, + Section, + SectionContainer, + SectionContent, + SectionContentLayout, + SectionFooterWithSubmit, + SectionHeader, SelectFormField, SelectItemFormField, TextAreaFormField, ToggleSwitchFormField, - useHandleSubmit, + ToggleSwitchLayout, Tone, + useHandleSubmit, } from '../components' const meta = { diff --git a/src/examples/List.stories.tsx b/src/examples/List.stories.tsx index a5f2d2b8..75e96522 100644 --- a/src/examples/List.stories.tsx +++ b/src/examples/List.stories.tsx @@ -1,15 +1,17 @@ -import { Title, Stories } from '@storybook/blocks' -import { action } from '@storybook/addon-actions' -import { Meta, StoryFn } from '@storybook/react' -import { useMemo, useState } from 'react' import { IndexType } from '@aboutbits/pagination' import IconAdd from '@aboutbits/react-material-icons/dist/IconAdd' import { useMatchMediaQuery } from '@aboutbits/react-toolbox' +import { action } from '@storybook/addon-actions' import { Markdown } from '@storybook/addon-docs' +import { Stories, Title } from '@storybook/blocks' +import { Meta, StoryFn } from '@storybook/react' +import { useMemo, useState } from 'react' import { ButtonIcon, ButtonVariant, FormVariant, + Option, + SearchField, Section, SectionContainer, SectionContentEmpty, @@ -24,13 +26,11 @@ import { SectionHeaderSpacer, SectionHeaderTitle, SectionListItemButton, + SectionListItemButtonProps, + SectionListItemLink, SelectField, Tone, - Option, useFilter, - SearchField, - SectionListItemButtonProps, - SectionListItemLink, } from '../components' const meta = { diff --git a/src/examples/Menu.stories.tsx b/src/examples/Menu.stories.tsx index 083e1a05..42f60407 100644 --- a/src/examples/Menu.stories.tsx +++ b/src/examples/Menu.stories.tsx @@ -1,14 +1,14 @@ import { action } from '@storybook/addon-actions' +import { Markdown, Primary, Title } from '@storybook/addon-docs' import { Meta, StoryFn } from '@storybook/react' -import { Primary, Title, Markdown } from '@storybook/addon-docs' import { useEffect, useRef, useState } from 'react' import { - Tone, + Button, + ButtonVariant, Menu, MenuItem, MenuPlacement, - Button, - ButtonVariant, + Tone, } from '../components' const meta = { diff --git a/src/framework/ReactUIProvider.tsx b/src/framework/ReactUIProvider.tsx index a025c0ec..cf2d507a 100644 --- a/src/framework/ReactUIProvider.tsx +++ b/src/framework/ReactUIProvider.tsx @@ -9,8 +9,8 @@ import { LinkComponentContext, } from './router/LinkComponentContext' import { Router, RouterContext } from './router/RouterContext' -import { ThemeContext } from './theme/ThemeContext' import { Theme } from './theme/theme' +import { ThemeContext } from './theme/ThemeContext' export type ReactUIProviderProps = { theme?: Theme @@ -51,9 +51,9 @@ export function ReactUIProvider({ return ( - + {children} diff --git a/src/framework/router/LinkComponentContext.tsx b/src/framework/router/LinkComponentContext.tsx index 3111b34f..020242bf 100644 --- a/src/framework/router/LinkComponentContext.tsx +++ b/src/framework/router/LinkComponentContext.tsx @@ -1,9 +1,9 @@ import { AnchorHTMLAttributes, ComponentType, + ForwardRefRenderFunction, createContext, forwardRef, - ForwardRefRenderFunction, useContext, } from 'react' diff --git a/tsconfig.json b/tsconfig.json index 9b408e36..eb723618 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -3,8 +3,8 @@ "compilerOptions": { "moduleResolution": "node", "module": "esnext", - "skipLibCheck": true, + "skipLibCheck": true }, "exclude": ["node_modules", "dist"], - "include": ["**/*.ts", "**/*.tsx", "**/*.js", ".storybook/**/*"] + "include": ["**/*.ts", "**/*.tsx", "**/*.js", ".storybook/**/*", "**/**.json"] } diff --git a/vite.config.ts b/vite.config.ts index 137431f5..68412316 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,7 +1,7 @@ /// -import { defineConfig } from 'vite' import react from '@vitejs/plugin-react-swc' +import { defineConfig } from 'vite' export default defineConfig({ plugins: [react()], From 4424cc9ad4cd9bbe0a9b0b4280d7c456403b912b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matth=C3=A4us=20N=C3=B6ssing?= Date: Tue, 27 Aug 2024 11:54:49 +0200 Subject: [PATCH 2/3] disable eslint ?? operator rule for with placeholder --- src/components/content/WithPlaceholder/WithPlaceholder.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/content/WithPlaceholder/WithPlaceholder.tsx b/src/components/content/WithPlaceholder/WithPlaceholder.tsx index 8dd068f3..9a913dff 100644 --- a/src/components/content/WithPlaceholder/WithPlaceholder.tsx +++ b/src/components/content/WithPlaceholder/WithPlaceholder.tsx @@ -14,6 +14,7 @@ export function WithPlaceholder({ placeholder = '-', children, }: WithPlaceholderProps) { + /* eslint-disable @typescript-eslint/prefer-nullish-coalescing */ return ( <> {typeof children === 'number' From 99cee5f7c458ed6f800b0a3af28560dd96633424 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matth=C3=A4us=20N=C3=B6ssing?= Date: Tue, 27 Aug 2024 16:15:27 +0200 Subject: [PATCH 3/3] fix lint errors --- .../content/DescriptionItem/DescriptionItem.tsx | 11 ++++++++--- .../content/WithPlaceholder/WithPlaceholder.tsx | 5 +++-- src/components/util/useId.ts | 2 ++ 3 files changed, 13 insertions(+), 5 deletions(-) diff --git a/src/components/content/DescriptionItem/DescriptionItem.tsx b/src/components/content/DescriptionItem/DescriptionItem.tsx index 29ecdb9c..19d0e16d 100644 --- a/src/components/content/DescriptionItem/DescriptionItem.tsx +++ b/src/components/content/DescriptionItem/DescriptionItem.tsx @@ -47,15 +47,20 @@ export function DescriptionItem({ title, className, contentProps, - ...props + hideIfEmpty = false, + content, }: DescriptionItemProps) { return ( <> - {((props.hideIfEmpty && props.content) ?? !props.hideIfEmpty) && ( + {((hideIfEmpty && + content !== null && + content !== undefined && + content !== '') || + !hideIfEmpty) && ( {title} - {props.content} + {content} )} diff --git a/src/components/content/WithPlaceholder/WithPlaceholder.tsx b/src/components/content/WithPlaceholder/WithPlaceholder.tsx index 9a913dff..4cf4ee8d 100644 --- a/src/components/content/WithPlaceholder/WithPlaceholder.tsx +++ b/src/components/content/WithPlaceholder/WithPlaceholder.tsx @@ -14,14 +14,15 @@ export function WithPlaceholder({ placeholder = '-', children, }: WithPlaceholderProps) { - /* eslint-disable @typescript-eslint/prefer-nullish-coalescing */ return ( <> {typeof children === 'number' ? isNaN(children) ? placeholder : children - : children || placeholder} + : children === null || children === undefined || children === '' + ? placeholder + : children} ) } diff --git a/src/components/util/useId.ts b/src/components/util/useId.ts index 4b57d971..8338457c 100644 --- a/src/components/util/useId.ts +++ b/src/components/util/useId.ts @@ -22,6 +22,8 @@ const useIsomorphicLayoutEffect = canUseDOM() ? useLayoutEffect : useEffect function canUseDOM() { return Boolean( typeof window !== 'undefined' && + // eslint-disable-next-line @typescript-eslint/prefer-optional-chain + typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined', ) }