update eslint

.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<T extends keyof ThemeType, R extends keyof ThemeType[T]>({
   items,
 }: {
   component: T
-  items?: Array<R>
+  items?: R[]
 }): ReactElement {
   const theme = {
     [component]: items

.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)'],

.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) => (

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",

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 = {

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'],

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'

src/components/breadcrumbs/BreadcrumbLoading.tsx

@@ -13,7 +13,7 @@ export function BreadcrumbLoading({
   const { breadcrumbs } = useTheme()
 
   const { className: loadingBarClassName, ...restLoadingBarProps } =
-    loadingBarProps || {}
+    loadingBarProps ?? {}
 
   return (
     <div className={classNames(breadcrumbs.breadcrumbLoading.base, className)}>

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,

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'],

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' +
               '}'
             }
-          ></Source>
+          />
         </>
       ),
     },

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'

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,

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 &

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,

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 &

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'
 

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,

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) && (
         <DescriptionItemContainer className={className}>
           <DescriptionItemTitle>{title}</DescriptionItemTitle>
           <DescriptionItemContent {...contentProps}>
-            {props.content}
+            {content}
           </DescriptionItemContent>
         </DescriptionItemContainer>
       )}

src/components/content/WithPlaceholder/WithPlaceholder.tsx

@@ -20,7 +20,9 @@ export function WithPlaceholder({
         ? isNaN(children)
           ? placeholder
           : children
-        : children || placeholder}
+        : children === null || children === undefined || children === ''
+          ? placeholder
+          : children}
     </>
   )
 }

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 }

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'
 

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) => (
     <div className="flex flex-row space-x-4">
-      <InputField {...args} iconStart={IconSearch}></InputField>
-      <InputField {...args} iconEnd={IconBadge}></InputField>
+      <InputField {...args} iconStart={IconSearch} />
+      <InputField {...args} iconEnd={IconBadge} />
     </div>
   ),
 }

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,

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 = (