@itcase/ui-react-native 1.10.85 → 1.10.87

package/src/components/Divider/Divider.tsx

@@ -1,13 +1,13 @@
-import { useMemo } from 'react'
 import { View } from 'react-native'
 
+import {
+  useAppearanceConfig,
+  useDevicePropsGenerator,
+} from '@itcase/ui-core/hooks'
+
 import { tokens } from '../../styles/tokens'
 import { dividerAppearance } from './Divider.appearance'
-import type {
-  DividerAppearanceProps,
-  DividerConfig,
-  DividerProps,
-} from './Divider.interface'
+import type { DividerConfig, DividerProps } from './Divider.interface'
 import { styles } from './Divider.styles'
 
 const DEFAULT_DIVIDER_DIRECTION = 'horizontal'
@@ -23,30 +23,35 @@ const dividerConfig: DividerConfig = {
 dividerConfig.setAppearance(dividerAppearance)
 
 function Divider(props: DividerProps) {
-  const { appearance, width, direction, size, fill, style } = props
+  const {
+    appearance = 'surfaceQuaternary sizeL solid rounded',
+    width,
+    direction,
+    size,
+    fill,
+    style,
+    isDisabled,
+  } = props
 
-  const appearanceConfig = useMemo(() => {
-    if (!appearance || !dividerConfig.appearance) {
-      return undefined
-    }
+  const appearanceConfig = useAppearanceConfig(
+    appearance,
+    dividerConfig,
+    isDisabled,
+  )
+  const propsGenerator = useDevicePropsGenerator(props, appearanceConfig)
 
-    return appearance
-      .split(' ')
-      .reduce<DividerAppearanceProps>((resultConfig, appearanceKey) => {
-        return Object.assign(
-          resultConfig,
-          dividerConfig.appearance?.[
-            appearanceKey as keyof NonNullable<typeof dividerConfig.appearance>
-          ],
-        )
-      }, {})
-  }, [appearance])
+  const {
+    width: appearanceWidth,
+    direction: appearanceDirection,
+    size: appearanceSize,
+    fill: appearanceFill,
+  } = propsGenerator
 
   const directionKey =
-    direction || appearanceConfig?.direction || DEFAULT_DIVIDER_DIRECTION
-  const sizeKey = size || appearanceConfig?.size || DEFAULT_DIVIDER_SIZE
-  const fillKey = fill || appearanceConfig?.fill
-  const widthKey = width || appearanceConfig?.width
+    direction || appearanceDirection || DEFAULT_DIVIDER_DIRECTION
+  const sizeKey = size || appearanceSize || DEFAULT_DIVIDER_SIZE
+  const fillKey = fill || appearanceFill
+  const widthKey = width || appearanceWidth
 
   return (
     <View
@@ -55,8 +60,14 @@ function Divider(props: DividerProps) {
         styles[`divider_direction_${directionKey}`],
         styles[`divider_size_${sizeKey}_${directionKey}`],
         fillKey && tokens[`fill_${fillKey}`],
-        widthKey && tokens[`width_${widthKey}`],
-        style && style,
+        widthKey === 'fill' &&
+          directionKey === 'vertical' &&
+          styles.divider_width_fill_vertical,
+        widthKey === 'fill' &&
+          directionKey !== 'vertical' &&
+          styles.divider_width_fill,
+        widthKey && widthKey !== 'fill' && tokens[`width_${widthKey}`],
+        style,
       ]}
     />
   )

package/src/components/Divider/stories/DividerAppearance.stories.tsx

@@ -1,6 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/react'
 
 import { Divider } from '../Divider'
+import type { DividerProps } from '../Divider.interface'
+import { renderDividerStory } from './DividerStories.config'
 
 const meta = {
   title: 'Atoms / Divider / Appearance',
@@ -8,68 +10,84 @@ const meta = {
   args: {
     width: 'fill',
   },
+  parameters: {
+    layout: 'padded',
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/HmHn0BShJPXHU8SmuIP71M/ITCase---Atoms?node-id=18-78696',
+    },
+  },
 } satisfies Meta<typeof Divider>
-
 export default meta
 
-type Story = StoryObj<typeof Divider>
+type Story = StoryObj<typeof meta>
 
 export const SurfacePrimary: Story = {
   args: {
     appearance: 'surfacePrimary sizeL solid rounded',
   },
+  render: (args: DividerProps) => renderDividerStory(args),
 }
 
 export const SurfaceSecondary: Story = {
   args: {
     appearance: 'surfaceSecondary sizeL solid rounded',
   },
+  render: (args: DividerProps) => renderDividerStory(args),
 }
 
 export const SurfaceTertiary: Story = {
   args: {
     appearance: 'surfaceTertiary sizeL solid rounded',
   },
+  render: (args: DividerProps) => renderDividerStory(args),
 }
 
 export const SurfaceQuaternary: Story = {
   args: {
     appearance: 'surfaceQuaternary sizeL solid rounded',
   },
+  render: (args: DividerProps) => renderDividerStory(args),
 }
 
 export const Accent: Story = {
   args: {
     appearance: 'accentPrimary sizeL solid rounded',
   },
+  render: (args: DividerProps) => renderDividerStory(args),
 }
 
 export const Special: Story = {
   args: {
     appearance: 'specialPrimary sizeL solid rounded',
   },
+  render: (args: DividerProps) => renderDividerStory(args),
 }
 
 export const Extra: Story = {
   args: {
     appearance: 'extraPrimary sizeL solid rounded',
   },
+  render: (args: DividerProps) => renderDividerStory(args),
 }
 
 export const Error: Story = {
   args: {
     appearance: 'errorPrimary sizeL solid rounded',
   },
+  render: (args: DividerProps) => renderDividerStory(args),
 }
 
 export const Success: Story = {
   args: {
     appearance: 'successPrimary sizeL solid rounded',
   },
+  render: (args: DividerProps) => renderDividerStory(args),
 }
 
 export const Warning: Story = {
   args: {
     appearance: 'warningPrimary sizeL solid rounded',
   },
+  render: (args: DividerProps) => renderDividerStory(args),
 }

package/src/components/Divider/stories/DividerDirection.stories.tsx

@@ -3,32 +3,44 @@ import { View } from 'react-native'
 import type { Meta, StoryObj } from '@storybook/react'
 
 import { Divider } from '../Divider'
+import type { DividerProps } from '../Divider.interface'
+import { renderDividerStory } from './DividerStories.config'
 
 const meta = {
   title: 'Atoms / Divider / Direction',
   component: Divider,
   args: {
     appearance: 'surfaceQuaternary sizeL solid rounded',
+    width: 'fill',
+  },
+  parameters: {
+    layout: 'padded',
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/HmHn0BShJPXHU8SmuIP71M/ITCase---Atoms?node-id=18-78696',
+    },
   },
 } satisfies Meta<typeof Divider>
-
 export default meta
 
-type Story = StoryObj<typeof Divider>
+type Story = StoryObj<typeof meta>
 
 export const Horizontal: Story = {
   args: {
     direction: 'horizontal',
   },
+  render: (args: DividerProps) => renderDividerStory(args),
 }
 
 export const Vertical: Story = {
   args: {
     direction: 'vertical',
   },
-  render: (args) => (
-    <View style={{ height: 200 }}>
-      <Divider {...args} />
-    </View>
-  ),
+  render: (args: DividerProps) => {
+    return (
+      <View style={{ height: 200 }}>
+        <Divider {...args} />
+      </View>
+    )
+  },
 }

package/src/components/Divider/stories/DividerSize.stories.tsx

@@ -1,6 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/react'
 
 import { Divider } from '../Divider'
+import type { DividerProps } from '../Divider.interface'
+import { renderDividerStory } from './DividerStories.config'
 
 const meta = {
   title: 'Atoms / Divider / Size',
@@ -8,26 +10,35 @@ const meta = {
   args: {
     width: 'fill',
   },
+  parameters: {
+    layout: 'padded',
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/HmHn0BShJPXHU8SmuIP71M/ITCase---Atoms?node-id=18-78696',
+    },
+  },
 } satisfies Meta<typeof Divider>
-
 export default meta
 
-type Story = StoryObj<typeof Divider>
+type Story = StoryObj<typeof meta>
 
 export const SizeL: Story = {
   args: {
     appearance: 'surfaceTertiary sizeL solid rounded',
   },
+  render: (args: DividerProps) => renderDividerStory(args),
 }
 
 export const SizeM: Story = {
   args: {
     appearance: 'surfaceTertiary sizeM solid rounded',
   },
+  render: (args: DividerProps) => renderDividerStory(args),
 }
 
 export const SizeS: Story = {
   args: {
     appearance: 'surfaceTertiary sizeS solid rounded',
   },
+  render: (args: DividerProps) => renderDividerStory(args),
 }

package/src/components/Divider/stories/DividerStories.config.tsx

@@ -0,0 +1,16 @@
+import { View } from 'react-native'
+
+import { Divider } from '../Divider'
+import type { DividerProps } from '../Divider.interface'
+
+const DIVIDER_STORY_WIDTH = 480
+
+function renderDividerStory(args: DividerProps) {
+  return (
+    <View style={{ width: '100%', maxWidth: DIVIDER_STORY_WIDTH }}>
+      <Divider {...args} />
+    </View>
+  )
+}
+
+export { DIVIDER_STORY_WIDTH, renderDividerStory }

package/src/components/Divider/styles/divider.ts

@@ -2,6 +2,16 @@ import { StyleSheet } from 'react-native'
 
 const dividerStyles = StyleSheet.create({
   divider: {
+    flexShrink: 0,
+    alignSelf: 'stretch',
+  },
+  divider_width_fill: {
+    width: '100%',
+    alignSelf: 'stretch',
+  },
+  divider_width_fill_vertical: {
+    width: undefined,
+    height: '100%',
     alignSelf: 'stretch',
   },
 })

package/src/components/Divider/styles/dividerDirection.ts

@@ -4,11 +4,9 @@ import { getVariantsPropsList } from '../../../utils'
 
 const dividerDirectionStyles = StyleSheet.create({
   divider_direction_horizontal: {
-    width: '100%',
-    height: 1,
+    alignSelf: 'stretch',
   },
   divider_direction_vertical: {
-    width: 1,
     height: '100%',
     alignSelf: 'stretch',
   },

package/src/components/Dot/stories/Dot.stories.tsx

@@ -1,8 +1,9 @@
 import type { Meta, StoryObj } from '@storybook/react'
 
 import { Dot } from '../Dot'
+import type { DotProps } from '../Dot.interface'
 
-const DotMeta: Meta<typeof Dot> = {
+const meta = {
   title: 'Atoms / Dot',
   component: Dot,
   args: {
@@ -10,14 +11,40 @@ const DotMeta: Meta<typeof Dot> = {
     fill: 'accentPrimary',
     shape: 'circular',
   },
+} satisfies Meta<typeof Dot>
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: (args: DotProps) => {
+    return <Dot {...args} />
+  },
 }
 
-export default DotMeta
+export const Accent: Story = {
+  args: {
+    fill: 'accentPrimary',
+  },
+  render: (args: DotProps) => {
+    return <Dot {...args} />
+  },
+}
 
-export const Default: StoryObj<typeof Dot> = {}
+export const Special: Story = {
+  args: {
+    fill: 'specialPrimary',
+  },
+  render: (args: DotProps) => {
+    return <Dot {...args} />
+  },
+}
 
-export const Large: StoryObj<typeof Dot> = {
+export const Extra: Story = {
   args: {
-    size: 'l',
+    fill: 'extraPrimary',
+  },
+  render: (args: DotProps) => {
+    return <Dot {...args} />
   },
 }

package/src/components/Drawer/Drawer.interface.ts

@@ -6,6 +6,7 @@ import type {
   AppearanceHeadingSizeKey,
   AppearanceKeysHeading,
   AppearancePartialRecord,
+  CompositeAppearanceTitleKeys,
   FillProps,
   TextColorProps,
   TextSizeProps,
@@ -14,6 +15,7 @@ import type {
 } from '@itcase/types-ui'
 
 import type { dividerSizePropsType } from '../Divider/styles/dividerSize'
+import type { IconProps } from '../Icon/Icon.interface'
 
 type DrawerPosition = 'bottom' | 'left' | 'right'
 
@@ -23,6 +25,8 @@ interface DrawerAppearanceProps {
   divider?: boolean
   dividerFill?: FillProps
   dividerSize?: dividerSizePropsType
+  fill?: FillProps
+  iconCloseAppearance?: IconProps['appearance']
   titleTextColor?: TextColorProps
   titleTextSize?: TitleSizeProps
   titleTextWeight?: TextWeightProps
@@ -33,7 +37,7 @@ interface DrawerProps extends DrawerAppearanceProps {
   onClickClose?: () => void
   onClose?: () => void
   after?: ReactNode
-  appearance?: DrawerAppearanceKey
+  appearance?: CompositeAppearanceTitleKeys
   before?: ReactNode
   children?: ReactNode
   desc?: string
@@ -44,7 +48,7 @@ interface DrawerProps extends DrawerAppearanceProps {
   title?: ReactNode
 }
 
-type DrawerAppearanceKey = AppearanceKeysHeading
+type DrawerAppearanceKey = CompositeAppearanceTitleKeys
 type DrawerConfig = AppearanceConfig<
   AppearanceKeysHeading,
   DrawerAppearanceProps

package/src/components/Drawer/Drawer.tsx

@@ -1,7 +1,11 @@
-import { useCallback, useMemo } from 'react'
+import { useCallback } from 'react'
 import { Modal, Pressable, View } from 'react-native'
 
 import { icons24 } from '@itcase/icons-default'
+import {
+  useAppearanceConfig,
+  useDevicePropsGenerator,
+} from '@itcase/ui-core/hooks'
 
 import { tokens } from '../../styles/tokens'
 import { Divider } from '../Divider'
@@ -27,8 +31,6 @@ drawerConfig.setAppearance(drawerAppearance)
 
 function Drawer(props: DrawerProps) {
   const {
-    appearance,
-    fill,
     position,
     title,
     desc,
@@ -42,18 +44,23 @@ function Drawer(props: DrawerProps) {
     children,
   } = props
 
-  const appearanceConfig = useMemo(() => {
-    if (!appearance || !drawerConfig.appearance) {
-      return undefined
-    }
+  const appearanceConfig = useAppearanceConfig(props.appearance, drawerConfig)
+  const propsGenerator = useDevicePropsGenerator(props, appearanceConfig)
 
-    return drawerConfig.appearance[appearance]
-  }, [appearance])
+  const {
+    fill,
+    titleTextColor,
+    titleTextSize,
+    titleTextWeight,
+    descTextColor,
+    descTextSize,
+    divider,
+    dividerFill,
+    dividerSize,
+    iconCloseAppearance,
+  } = propsGenerator
 
   const positionKey = position || DEFAULT_DRAWER_POSITION
-  const fillKey = fill || 'surfacePrimary'
-  const shouldShowDivider = appearanceConfig?.divider
-
   const onPressClose = useCallback(() => {
     onClickClose?.()
     onClose?.()
@@ -75,29 +82,25 @@ function Drawer(props: DrawerProps) {
         )}
         <Group
           direction="vertical"
-          fill={fillKey}
+          fill={fill}
           style={[
             styles.drawer__panel,
             styles[`drawer__panel_${positionKey}`],
-            fillKey && tokens[`fill_${fillKey}`],
-            style && style,
+            fill && tokens[`fill_${fill}`],
+            style,
           ]}
         >
           {before && <View style={styles.drawer__before}>{before}</View>}
           <Pressable style={styles.drawer__close} onPress={onPressClose}>
-            <Icon
-              iconFill="surfaceItemPrimary"
-              iconSize="24"
-              SVGIcon={IconCloseDefault}
-            />
+            <Icon appearance={iconCloseAppearance} SVGIcon={IconCloseDefault} />
           </Pressable>
           {(title || desc) && (
             <View style={styles.drawer__header}>
               {typeof title === 'string' ? (
                 <Title
-                  size={appearanceConfig?.titleTextSize}
-                  textColor={appearanceConfig?.titleTextColor}
-                  weight={appearanceConfig?.titleTextWeight}
+                  size={titleTextSize}
+                  textColor={titleTextColor}
+                  weight={titleTextWeight}
                 >
                   {title}
                 </Title>
@@ -105,21 +108,14 @@ function Drawer(props: DrawerProps) {
                 title
               )}
               {desc && (
-                <Text
-                  size={appearanceConfig?.descTextSize}
-                  textColor={appearanceConfig?.descTextColor}
-                >
+                <Text size={descTextSize} textColor={descTextColor}>
                   {desc}
                 </Text>
               )}
             </View>
           )}
-          {shouldShowDivider && (
-            <Divider
-              width="fill"
-              size={appearanceConfig?.dividerSize || 's'}
-              fill={appearanceConfig?.dividerFill || 'surfaceTertiary'}
-            />
+          {divider && (
+            <Divider width="fill" size={dividerSize} fill={dividerFill} />
           )}
           {children && <View style={styles.drawer__wrapper}>{children}</View>}
           {after && <View style={styles.drawer__after}>{after}</View>}

package/src/components/Drawer/appearance/drawerSurface.ts

@@ -2,10 +2,13 @@ import type { DrawerAppearance } from '../Drawer.interface'
 
 const drawerAppearanceSurface = {
   surfacePrimary: {
+    fill: 'surfacePrimary',
     titleTextColor: 'surfaceTextPrimary',
     descTextColor: 'surfaceTextPrimary',
     divider: true,
     dividerFill: 'surfaceTertiary',
+    dividerSize: 's',
+    iconCloseAppearance: 'surfacePrimary size24_24 ghost rounded',
   },
 } satisfies DrawerAppearance
 

package/src/components/Drawer/stories/Drawer.stories.tsx

@@ -3,69 +3,76 @@ import { Fragment, useState } from 'react'
 import type { Meta, StoryObj } from '@storybook/react'
 
 import { Button } from '../../Button'
-import { Text } from '../../Text'
+import { Title } from '../../Title'
 import { Drawer } from '../Drawer'
 import type { DrawerProps } from '../Drawer.interface'
+import { DrawerMock } from './__mock__'
 
-function DrawerPlayground(props: DrawerProps) {
-  const { isOpen, onClose, ...restProps } = props
-  const [isDrawerOpen, setIsDrawerOpen] = useState(Boolean(isOpen))
+const drawerContent = (
+  <Title size="h4" textColor="surfaceTextPrimary">
+    Drawer content
+  </Title>
+)
+
+const meta = {
+  title: 'Molecules / Drawer',
+  component: Drawer,
+  args: {
+    ...DrawerMock,
+    appearance: 'surfacePrimary sizeH1 solid rounded',
+    children: drawerContent,
+  },
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/FcCWZlLa17BPr0zh3Wq9DO/ITCase---Molecules?node-id=33-29659',
+    },
+  },
+} satisfies Meta<typeof Drawer>
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+function DrawerStory(args: DrawerProps) {
+  const [isOpen, setIsOpen] = useState(args.isOpen)
 
   return (
     <Fragment>
       <Button
-        label="Open drawer"
+        label="open drawer"
         onPress={() => {
-          setIsDrawerOpen(true)
+          setIsOpen(true)
         }}
       />
       <Drawer
-        {...restProps}
-        isOpen={isDrawerOpen}
-        onClose={() => {
-          setIsDrawerOpen(false)
-          onClose?.()
+        {...args}
+        isOpen={isOpen}
+        onClickClose={() => {
+          setIsOpen(false)
+          args.onClickClose?.()
         }}
       />
     </Fragment>
   )
 }
 
-const DrawerMeta: Meta<typeof Drawer> = {
-  title: 'Molecules / Drawer',
-  component: Drawer,
-  args: {
-    appearance: 'surfacePrimary',
-    position: 'right',
-    title: 'Drawer title',
-    desc: 'Drawer description',
-    children: <Text>Drawer content</Text>,
-  },
-}
-
-export default DrawerMeta
-
-export const Default: StoryObj<typeof Drawer> = {
-  render: (args) => <DrawerPlayground {...args} />,
-}
-
-export const Left: StoryObj<typeof Drawer> = {
+export const Default: Story = {
   args: {
-    position: 'left',
+    isOpen: true,
   },
-  render: (args) => <DrawerPlayground {...args} />,
+  render: DrawerStory,
 }
 
-export const Bottom: StoryObj<typeof Drawer> = {
+export const Close: Story = {
   args: {
-    position: 'bottom',
+    isOpen: true,
   },
-  render: (args) => <DrawerPlayground {...args} />,
+  render: DrawerStory,
 }
 
-export const Open: StoryObj<typeof Drawer> = {
+export const Open: Story = {
   args: {
-    isOpen: true,
+    isOpen: false,
   },
-  render: (args) => <DrawerPlayground {...args} />,
+  render: DrawerStory,
 }