@itcase/ui-react-native 1.10.85 → 1.10.87

package/src/components/Chips/Chips.tsx

@@ -1,16 +1,16 @@
-import { useMemo } from 'react'
 import { Pressable, View } from 'react-native'
 
+import {
+  useAppearanceConfig,
+  useDevicePropsGenerator,
+} from '@itcase/ui-core/hooks'
+
 import { tokens } from '../../styles/tokens'
 import { Badge } from '../Badge'
 import { Icon } from '../Icon'
 import { Text } from '../Text'
 import { chipsAppearance } from './Chips.appearance'
-import type {
-  ChipsAppearanceProps,
-  ChipsConfig,
-  ChipsProps,
-} from './Chips.interface'
+import type { ChipsConfig, ChipsProps } from './Chips.interface'
 import { styles } from './Chips.styles'
 
 const chipsConfig: ChipsConfig = {
@@ -25,9 +25,28 @@ chipsConfig.setAppearance(chipsAppearance)
 function Chips(props: ChipsProps) {
   const {
     appearance,
+    style,
+    isActive,
+    isDisabled,
+    onPress,
+    onPressIconAfter,
+    onPressIconBefore,
+    children,
+  } = props
+
+  const appearanceConfig = useAppearanceConfig(
+    appearance,
+    chipsConfig,
+    isDisabled,
+  )
+  const propsGenerator = useDevicePropsGenerator(props, appearanceConfig)
+
+  const {
     size,
     fill,
+    fillActive,
     label,
+    labelTextActiveColor,
     labelTextColor,
     labelTextSize,
     labelTextWeight,
@@ -40,6 +59,8 @@ function Chips(props: ChipsProps) {
     badgeValue,
     iconAfter,
     iconAfterActive,
+    iconAfterAppearance,
+    iconAfterAppearanceActive,
     iconAfterFill,
     iconAfterFillActiveIcon,
     iconAfterFillIcon,
@@ -47,77 +68,36 @@ function Chips(props: ChipsProps) {
     iconAfterSize,
     iconBefore,
     iconBeforeActive,
+    iconBeforeAppearance,
+    iconBeforeAppearanceActive,
     iconBeforeFill,
     iconBeforeFillActiveIcon,
     iconBeforeFillIcon,
     iconBeforeShape,
     iconBeforeSize,
     shape,
-    style,
-    isActive,
-    isDisabled,
-    onPress,
-    onPressIconAfter,
-    onPressIconBefore,
-    children,
-  } = props
-
-  const appearanceConfig = useMemo(() => {
-    if (!appearance || !chipsConfig.appearance) {
-      return undefined
-    }
-
-    const appearanceKeysList = appearance.split(' ')
-
-    return appearanceKeysList.reduce<ChipsAppearanceProps>(
-      (resultConfig, appearanceKey) => {
-        const appearanceMap = chipsConfig.appearance
-
-        if (!appearanceMap) {
-          return resultConfig
-        }
-
-        const appearanceEntry = Object.entries(appearanceMap).find((entry) => {
-          return entry[0] === appearanceKey
-        })
-
-        if (!appearanceEntry) {
-          return resultConfig
-        }
-
-        return Object.assign(resultConfig, appearanceEntry[1])
-      },
-      {},
-    )
-  }, [appearance])
+  } = propsGenerator
 
-  const fillKey = isActive
-    ? appearanceConfig?.fillActive
-    : fill || appearanceConfig?.fill
-  const sizeKey = size || appearanceConfig?.size
-  const shapeKey = shape || appearanceConfig?.shape
-  const borderColorKey = borderColor || appearanceConfig?.borderColor
+  const fillKey = isActive ? fillActive : fill
   const labelColorKey = isActive
-    ? appearanceConfig?.labelTextActiveColor || labelTextColor
-    : labelTextColor || appearanceConfig?.labelTextColor
-  const labelSizeKey = labelTextSize || appearanceConfig?.labelTextSize
+    ? labelTextActiveColor || labelTextColor
+    : labelTextColor
   const iconBeforeComponent =
-    isActive && iconBeforeActive
-      ? iconBeforeActive
-      : iconBefore || appearanceConfig?.iconBefore
+    isActive && iconBeforeActive ? iconBeforeActive : iconBefore
   const iconAfterComponent =
-    isActive && iconAfterActive
-      ? iconAfterActive
-      : iconAfter || appearanceConfig?.iconAfter
+    isActive && iconAfterActive ? iconAfterActive : iconAfter
   const iconBeforeFillIconKey = isActive
-    ? iconBeforeFillActiveIcon || appearanceConfig?.iconBeforeFillActiveIcon
-    : iconBeforeFillIcon || appearanceConfig?.iconBeforeFillIcon
+    ? iconBeforeFillActiveIcon || iconBeforeFillIcon
+    : iconBeforeFillIcon
   const iconAfterFillIconKey = isActive
-    ? iconAfterFillActiveIcon || appearanceConfig?.iconAfterFillActiveIcon
-    : iconAfterFillIcon || appearanceConfig?.iconAfterFillIcon
-  const iconBeforeSizeKey = iconBeforeSize || appearanceConfig?.iconBeforeSize
-  const iconAfterSizeKey = iconAfterSize || appearanceConfig?.iconAfterSize
-  const badgeText = badgeValue || appearanceConfig?.badgeValue
+    ? iconAfterFillActiveIcon || iconAfterFillIcon
+    : iconAfterFillIcon
+  const iconBeforeAppearanceKey = isActive
+    ? iconBeforeAppearanceActive || iconBeforeAppearance
+    : iconBeforeAppearance
+  const iconAfterAppearanceKey = isActive
+    ? iconAfterAppearanceActive || iconAfterAppearance
+    : iconAfterAppearance
 
   return (
     <Pressable
@@ -125,8 +105,8 @@ function Chips(props: ChipsProps) {
       style={[
         styles.chips,
         fillKey && tokens[`fill_${fillKey}`],
-        borderColorKey && tokens[`border_color_${borderColorKey}`],
-        shapeKey && styles[`chips_shape_${shapeKey}`],
+        borderColor && tokens[`border_color_${borderColor}`],
+        shape && styles[`chips_shape_${shape}`],
         style && style,
       ]}
       onPress={onPress}
@@ -134,25 +114,26 @@ function Chips(props: ChipsProps) {
       <View
         style={[
           styles.chips__inner,
-          sizeKey && styles[`chips__inner_size_${sizeKey}`],
+          size && styles[`chips__inner_size_${size}`],
         ]}
       >
         {iconBeforeComponent && (
           <Icon
-            size={iconBeforeSizeKey}
-            fill={iconBeforeFill || appearanceConfig?.iconBeforeFill}
+            appearance={iconBeforeAppearanceKey}
+            size={iconBeforeSize}
+            fill={iconBeforeFill}
             iconFill={iconBeforeFillIconKey}
-            iconSize={iconBeforeSizeKey}
-            shape={iconBeforeShape || appearanceConfig?.iconBeforeShape}
+            iconSize={iconBeforeSize}
+            shape={iconBeforeShape}
             SVGIcon={iconBeforeComponent}
             onPress={onPressIconBefore}
           />
         )}
         {label && (
           <Text
-            size={labelSizeKey}
+            size={labelTextSize}
             textColor={labelColorKey}
-            weight={labelTextWeight || appearanceConfig?.labelTextWeight}
+            weight={labelTextWeight}
           >
             {label}
           </Text>
@@ -160,23 +141,24 @@ function Chips(props: ChipsProps) {
         {children}
         {iconAfterComponent && (
           <Icon
-            size={iconAfterSizeKey}
-            fill={iconAfterFill || appearanceConfig?.iconAfterFill}
+            appearance={iconAfterAppearanceKey}
+            size={iconAfterSize}
+            fill={iconAfterFill}
             iconFill={iconAfterFillIconKey}
-            iconSize={iconAfterSizeKey}
-            shape={iconAfterShape || appearanceConfig?.iconAfterShape}
+            iconSize={iconAfterSize}
+            shape={iconAfterShape}
             SVGIcon={iconAfterComponent}
             onPress={onPressIconAfter}
           />
         )}
-        {badgeText && (
+        {badgeValue && (
           <Badge
-            appearance={badgeAppearance || appearanceConfig?.badgeAppearance}
-            size={badgeSize || appearanceConfig?.badgeSize}
-            text={badgeText}
-            badgeTextColor={badgeTextColor || appearanceConfig?.badgeTextColor}
-            badgeTextSize={badgeTextSize || appearanceConfig?.badgeTextSize}
-            shape={badgeShape || appearanceConfig?.badgeShape}
+            appearance={badgeAppearance}
+            size={badgeSize}
+            text={badgeValue}
+            badgeTextColor={badgeTextColor}
+            badgeTextSize={badgeTextSize}
+            shape={badgeShape}
           />
         )}
       </View>

package/src/components/Chips/appearance/chipsAccent.ts

@@ -5,7 +5,9 @@ const chipsAppearanceAccent = {
     fill: 'accentTertiary',
     labelTextColor: 'accentTextSecondary',
     borderColor: 'accentBorderSecondary',
+    iconAfterAppearance: 'accentPrimary size16_16 ghost rounded',
     iconAfterFillIcon: 'accentItemQuaternary',
+    iconBeforeAppearance: 'accentPrimary size16_16 ghost rounded',
     iconBeforeFillIcon: 'accentItemQuaternary',
   },
   accentPrimary: {
@@ -14,8 +16,12 @@ const chipsAppearanceAccent = {
     labelTextActiveColor: 'accentTextPrimary',
     labelTextColor: 'accentTextPrimary',
     borderColor: 'accentBorderPrimary',
+    iconAfterAppearance: 'accentPrimary size16_16 ghost rounded',
+    iconAfterAppearanceActive: 'accentPrimary size16_16 ghost rounded',
     iconAfterFillActiveIcon: 'accentItemPrimary',
     iconAfterFillIcon: 'accentItemPrimary',
+    iconBeforeAppearance: 'accentPrimary size16_16 ghost rounded',
+    iconBeforeAppearanceActive: 'accentPrimary size16_16 ghost rounded',
     iconBeforeFillActiveIcon: 'accentItemPrimary',
     iconBeforeFillIcon: 'accentItemPrimary',
   },

package/src/components/Chips/appearance/chipsDanger.ts

@@ -5,14 +5,18 @@ const chipsAppearanceDanger = {
     fill: 'dangerTertiary',
     labelTextColor: 'dangerTextQuaternary',
     borderColor: 'dangerBorderQuaternary',
+    iconAfterAppearance: 'dangerPrimary size16_16 ghost rounded',
     iconAfterFillIcon: 'dangerItemQuaternary',
+    iconBeforeAppearance: 'dangerPrimary size16_16 ghost rounded',
     iconBeforeFillIcon: 'dangerItemQuaternary',
   },
   dangerPrimary: {
     fill: 'dangerPrimary',
     labelTextColor: 'dangerTextPrimary',
     borderColor: 'dangerBorderSecondary',
+    iconAfterAppearance: 'dangerPrimary size16_16 ghost rounded',
     iconAfterFillIcon: 'dangerItemPrimary',
+    iconBeforeAppearance: 'dangerPrimary size16_16 ghost rounded',
     iconBeforeFillIcon: 'dangerItemPrimary',
   },
 } satisfies ChipsAppearance

package/src/components/Chips/appearance/chipsDisabled.ts

@@ -6,7 +6,9 @@ const chipsAppearanceDisabled = {
     labelTextActiveColor: 'surfaceTextQuaternary',
     labelTextColor: 'surfaceTextQuaternary',
     borderColor: 'disabledBorderPrimary',
+    iconAfterAppearance: 'disabledPrimary size16_16 ghost rounded',
     iconAfterFillIcon: 'disabledItemPrimary',
+    iconBeforeAppearance: 'disabledPrimary size16_16 ghost rounded',
     iconBeforeFillIcon: 'disabledItemPrimary',
   },
 } satisfies ChipsAppearance

package/src/components/Chips/appearance/chipsError.ts

@@ -5,14 +5,18 @@ const chipsAppearanceError = {
     fill: 'errorTertiary',
     labelTextColor: 'errorTextQuaternary',
     borderColor: 'errorBorderQuaternary',
+    iconAfterAppearance: 'errorPrimary size16_16 ghost rounded',
     iconAfterFillIcon: 'errorItemQuaternary',
+    iconBeforeAppearance: 'errorPrimary size16_16 ghost rounded',
     iconBeforeFillIcon: 'errorItemQuaternary',
   },
   errorPrimary: {
     fill: 'errorPrimary',
     labelTextColor: 'errorTextPrimary',
     borderColor: 'errorBorderSecondary',
+    iconAfterAppearance: 'errorPrimary size16_16 ghost rounded',
     iconAfterFillIcon: 'errorItemPrimary',
+    iconBeforeAppearance: 'errorPrimary size16_16 ghost rounded',
     iconBeforeFillIcon: 'errorItemPrimary',
   },
 } satisfies ChipsAppearance

package/src/components/Chips/appearance/chipsExtra.ts

@@ -5,14 +5,18 @@ const chipsAppearanceExtra = {
     fill: 'extraTertiary',
     labelTextColor: 'extraTextQuaternary',
     borderColor: 'extraBorderSecondary',
+    iconAfterAppearance: 'extraPrimary size16_16 ghost rounded',
     iconAfterFillIcon: 'extraItemQuaternary',
+    iconBeforeAppearance: 'extraPrimary size16_16 ghost rounded',
     iconBeforeFillIcon: 'extraItemQuaternary',
   },
   extraPrimary: {
     fill: 'extraPrimary',
     labelTextColor: 'extraTextPrimary',
     borderColor: 'extraBorderSecondary',
+    iconAfterAppearance: 'extraPrimary size16_16 ghost rounded',
     iconAfterFillIcon: 'extraItemPrimary',
+    iconBeforeAppearance: 'extraPrimary size16_16 ghost rounded',
     iconBeforeFillIcon: 'extraItemPrimary',
   },
 } satisfies ChipsAppearance

package/src/components/Chips/appearance/chipsInfo.ts

@@ -5,14 +5,18 @@ const chipsAppearanceInfo = {
     fill: 'infoTertiary',
     labelTextColor: 'infoTextSecondary',
     borderColor: 'infoBorderSecondary',
+    iconAfterAppearance: 'infoPrimary size16_16 ghost rounded',
     iconAfterFillIcon: 'infoItemPrimary',
+    iconBeforeAppearance: 'infoPrimary size16_16 ghost rounded',
     iconBeforeFillIcon: 'infoItemPrimary',
   },
   infoPrimary: {
     fill: 'infoPrimary',
     labelTextColor: 'infoTextPrimary',
     borderColor: 'infoBorderPrimary',
+    iconAfterAppearance: 'infoPrimary size16_16 ghost rounded',
     iconAfterFillIcon: 'infoItemPrimary',
+    iconBeforeAppearance: 'infoPrimary size16_16 ghost rounded',
     iconBeforeFillIcon: 'infoItemPrimary',
   },
 } satisfies ChipsAppearance

package/src/components/Chips/appearance/chipsSpecial.ts

@@ -5,14 +5,18 @@ const chipsAppearanceSpecial = {
     fill: 'specialTertiary',
     labelTextColor: 'specialTextSecondary',
     borderColor: 'specialBorderSecondary',
+    iconAfterAppearance: 'specialPrimary size16_16 ghost rounded',
     iconAfterFillIcon: 'specialItemSecondary',
+    iconBeforeAppearance: 'specialPrimary size16_16 ghost rounded',
     iconBeforeFillIcon: 'specialItemSecondary',
   },
   specialPrimary: {
     fill: 'specialPrimary',
     labelTextColor: 'specialTextPrimary',
     borderColor: 'specialBorderSecondary',
+    iconAfterAppearance: 'specialPrimary size16_16 ghost rounded',
     iconAfterFillIcon: 'specialItemPrimary',
+    iconBeforeAppearance: 'specialPrimary size16_16 ghost rounded',
     iconBeforeFillIcon: 'specialItemPrimary',
   },
 } satisfies ChipsAppearance

package/src/components/Chips/appearance/chipsSuccess.ts

@@ -5,14 +5,18 @@ const chipsAppearanceSuccess = {
     fill: 'successTertiary',
     labelTextColor: 'successTextQuaternary',
     borderColor: 'successBorderQuaternary',
+    iconAfterAppearance: 'successPrimary size16_16 ghost rounded',
     iconAfterFillIcon: 'successItemQuaternary',
+    iconBeforeAppearance: 'successPrimary size16_16 ghost rounded',
     iconBeforeFillIcon: 'successItemQuaternary',
   },
   successPrimary: {
     fill: 'successPrimary',
     labelTextColor: 'successTextPrimary',
     borderColor: 'successBorderSecondary',
+    iconAfterAppearance: 'successPrimary size16_16 ghost rounded',
     iconAfterFillIcon: 'successItemPrimary',
+    iconBeforeAppearance: 'successPrimary size16_16 ghost rounded',
     iconBeforeFillIcon: 'successItemPrimary',
   },
 } satisfies ChipsAppearance

package/src/components/Chips/appearance/chipsSurface.ts

@@ -5,7 +5,10 @@ const chipsAppearanceSurface = {
     fill: 'surfaceSecondary',
     labelTextColor: 'surfaceTextQuaternary',
     borderColor: 'surfaceBorderQuaternary',
+    badgeAppearance: 'accentPrimary sizeM solid rounded',
+    iconAfterAppearance: 'disabledPrimary size16_16 ghost rounded',
     iconAfterFillIcon: 'surfaceItemQuaternary',
+    iconBeforeAppearance: 'disabledPrimary size16_16 ghost rounded',
     iconBeforeFillIcon: 'surfaceItemQuaternary',
   },
   surfacePrimary: {
@@ -14,8 +17,13 @@ const chipsAppearanceSurface = {
     labelTextActiveColor: 'accentTextPrimary',
     labelTextColor: 'surfaceTextPrimary',
     borderColor: 'surfaceBorderTertiary',
+    badgeAppearance: 'accentPrimary sizeM solid rounded',
+    iconAfterAppearance: 'surfacePrimary size16_16 ghost rounded',
+    iconAfterAppearanceActive: 'accentPrimary size16_16 ghost rounded',
     iconAfterFillActiveIcon: 'accentItemPrimary',
     iconAfterFillIcon: 'surfaceItemPrimary',
+    iconBeforeAppearance: 'surfacePrimary size16_16 ghost rounded',
+    iconBeforeAppearanceActive: 'accentPrimary size16_16 ghost rounded',
     iconBeforeFillActiveIcon: 'accentItemPrimary',
     iconBeforeFillIcon: 'surfaceItemPrimary',
   },
@@ -25,8 +33,13 @@ const chipsAppearanceSurface = {
     labelTextActiveColor: 'accentTextPrimary',
     labelTextColor: 'surfaceTextPrimary',
     borderColor: 'surfaceBorderSecondary',
+    badgeAppearance: 'accentPrimary sizeM solid rounded',
+    iconAfterAppearance: 'surfacePrimary size16_16 ghost rounded',
+    iconAfterAppearanceActive: 'accentPrimary size16_16 ghost rounded',
     iconAfterFillActiveIcon: 'accentItemPrimary',
     iconAfterFillIcon: 'surfaceItemPrimary',
+    iconBeforeAppearance: 'surfacePrimary size16_16 ghost rounded',
+    iconBeforeAppearanceActive: 'accentPrimary size16_16 ghost rounded',
     iconBeforeFillActiveIcon: 'accentItemPrimary',
     iconBeforeFillIcon: 'surfaceItemPrimary',
   },
@@ -34,6 +47,11 @@ const chipsAppearanceSurface = {
     fill: 'surfaceTertiary',
     labelTextColor: 'surfaceTextPrimary',
     borderColor: 'surfaceBorderTertiary',
+    badgeAppearance: 'accentPrimary sizeM solid rounded',
+    iconAfterAppearance: 'surfacePrimary size16_16 ghost rounded',
+    iconAfterFillIcon: 'surfaceItemPrimary',
+    iconBeforeAppearance: 'surfacePrimary size16_16 ghost rounded',
+    iconBeforeFillIcon: 'surfaceItemPrimary',
   },
 } satisfies ChipsAppearance
 

package/src/components/Chips/appearance/chipsWarning.ts

@@ -5,14 +5,18 @@ const chipsAppearanceWarning = {
     fill: 'warningTertiary',
     labelTextColor: 'warningTextSecondary',
     borderColor: 'warningBorderSecondary',
+    iconAfterAppearance: 'warningPrimary size16_16 ghost rounded',
     iconAfterFillIcon: 'warningItemSecondary',
+    iconBeforeAppearance: 'warningPrimary size16_16 ghost rounded',
     iconBeforeFillIcon: 'warningItemSecondary',
   },
   warningPrimary: {
     fill: 'warningPrimary',
     labelTextColor: 'warningTextPrimary',
     borderColor: 'warningBorderSecondary',
+    iconAfterAppearance: 'warningPrimary size16_16 ghost rounded',
     iconAfterFillIcon: 'warningItemPrimary',
+    iconBeforeAppearance: 'warningPrimary size16_16 ghost rounded',
     iconBeforeFillIcon: 'warningItemPrimary',
   },
 } satisfies ChipsAppearance

package/src/components/Chips/stories/ChipsCheckLeft.stories.tsx

@@ -1,38 +1,44 @@
-import type { Meta, StoryObj } from '@storybook/react'
+import type { Meta } from '@storybook/react'
 
 import { icons20 } from '@itcase/icons-default'
 
+import { createAppearanceTierStories } from '../../../storybook'
 import { Chips } from '../Chips'
+import type { ChipsProps } from '../Chips.interface'
+import {
+  CHIPS_APPEARANCE_GROUPS,
+  chipsGallery,
+  chipsStoryParameters,
+} from './ChipsStories.config'
 
 const meta = {
   title: 'Atoms / Chips / CheckLeft',
   component: Chips,
   args: {
-    appearance: 'surfacePrimary sizeXL solid rounded',
     label: 'Chips',
     iconBefore: icons20.Form.Check,
   },
+  parameters: chipsStoryParameters,
 } satisfies Meta<typeof Chips>
 
 export default meta
 
-type Story = StoryObj<typeof Chips>
-
-export const Accent: Story = {
-  args: {
-    appearance: 'accentPrimary sizeXL solid rounded',
-  },
-}
-
-export const Surface: Story = {
-  args: {
-    appearance: 'surfacePrimary sizeXL solid rounded',
-  },
-}
-
-export const Disabled: Story = {
-  args: {
-    appearance: 'disabledPrimary sizeXL solid rounded',
-    isDisabled: true,
-  },
-}
+const stories = createAppearanceTierStories({
+  renderItem: ({ appearance, args }) => (
+    <Chips {...args} appearance={appearance as ChipsProps['appearance']} />
+  ),
+  appearanceGroups: CHIPS_APPEARANCE_GROUPS,
+  appearanceSize: 'sizeXL',
+  tiersByAppearance: chipsGallery.tiersByAppearance,
+})
+
+export const Accent = stories.Accent
+export const Special = stories.Special
+export const Extra = stories.Extra
+export const Surface = stories.Surface
+export const Error = stories.Error
+export const Success = stories.Success
+export const Warning = stories.Warning
+export const Danger = stories.Danger
+export const Info = stories.Info
+export const Disabled = stories.Disabled

package/src/components/Chips/stories/ChipsCheckRight.stories.tsx

@@ -1,38 +1,44 @@
-import type { Meta, StoryObj } from '@storybook/react'
+import type { Meta } from '@storybook/react'
 
 import { icons20 } from '@itcase/icons-default'
 
+import { createAppearanceTierStories } from '../../../storybook'
 import { Chips } from '../Chips'
+import type { ChipsProps } from '../Chips.interface'
+import {
+  CHIPS_APPEARANCE_GROUPS,
+  chipsGallery,
+  chipsStoryParameters,
+} from './ChipsStories.config'
 
 const meta = {
   title: 'Atoms / Chips / CheckRight',
   component: Chips,
   args: {
-    appearance: 'surfacePrimary sizeXL solid rounded',
     label: 'Chips',
     iconAfter: icons20.Form.Check,
   },
+  parameters: chipsStoryParameters,
 } satisfies Meta<typeof Chips>
 
 export default meta
 
-type Story = StoryObj<typeof Chips>
-
-export const Accent: Story = {
-  args: {
-    appearance: 'accentPrimary sizeXL solid rounded',
-  },
-}
-
-export const Surface: Story = {
-  args: {
-    appearance: 'surfacePrimary sizeXL solid rounded',
-  },
-}
-
-export const Disabled: Story = {
-  args: {
-    appearance: 'disabledPrimary sizeXL solid rounded',
-    isDisabled: true,
-  },
-}
+const stories = createAppearanceTierStories({
+  renderItem: ({ appearance, args }) => (
+    <Chips {...args} appearance={appearance as ChipsProps['appearance']} />
+  ),
+  appearanceGroups: CHIPS_APPEARANCE_GROUPS,
+  appearanceSize: 'sizeXL',
+  tiersByAppearance: chipsGallery.tiersByAppearance,
+})
+
+export const Accent = stories.Accent
+export const Special = stories.Special
+export const Extra = stories.Extra
+export const Surface = stories.Surface
+export const Error = stories.Error
+export const Success = stories.Success
+export const Warning = stories.Warning
+export const Danger = stories.Danger
+export const Info = stories.Info
+export const Disabled = stories.Disabled

package/src/components/Chips/stories/ChipsClear.stories.tsx

@@ -1,38 +1,44 @@
-import type { Meta, StoryObj } from '@storybook/react'
+import type { Meta } from '@storybook/react'
 
 import { icons24 } from '@itcase/icons-default'
 
+import { createAppearanceTierStories } from '../../../storybook'
 import { Chips } from '../Chips'
+import type { ChipsProps } from '../Chips.interface'
+import {
+  CHIPS_APPEARANCE_GROUPS,
+  chipsGallery,
+  chipsStoryParameters,
+} from './ChipsStories.config'
 
 const meta = {
   title: 'Atoms / Chips / Clear',
   component: Chips,
   args: {
-    appearance: 'surfacePrimary sizeXL solid rounded',
     label: 'Chips',
     iconAfter: icons24.Action.Close,
   },
+  parameters: chipsStoryParameters,
 } satisfies Meta<typeof Chips>
 
 export default meta
 
-type Story = StoryObj<typeof Chips>
-
-export const Accent: Story = {
-  args: {
-    appearance: 'accentPrimary sizeXL solid rounded',
-  },
-}
-
-export const Surface: Story = {
-  args: {
-    appearance: 'surfacePrimary sizeXL solid rounded',
-  },
-}
-
-export const Disabled: Story = {
-  args: {
-    appearance: 'disabledPrimary sizeXL solid rounded',
-    isDisabled: true,
-  },
-}
+const stories = createAppearanceTierStories({
+  renderItem: ({ appearance, args }) => (
+    <Chips {...args} appearance={appearance as ChipsProps['appearance']} />
+  ),
+  appearanceGroups: CHIPS_APPEARANCE_GROUPS,
+  appearanceSize: 'sizeXL',
+  tiersByAppearance: chipsGallery.tiersByAppearance,
+})
+
+export const Accent = stories.Accent
+export const Special = stories.Special
+export const Extra = stories.Extra
+export const Surface = stories.Surface
+export const Error = stories.Error
+export const Success = stories.Success
+export const Warning = stories.Warning
+export const Danger = stories.Danger
+export const Info = stories.Info
+export const Disabled = stories.Disabled