@itcase/ui-react-native 1.10.84 → 1.10.86

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

@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Group } from '../../Group'
+import { Drawer } from '../Drawer'
+import type { DrawerProps } from '../Drawer.interface'
+import { DrawerMock } from './__mock__'
+
+const swapSlot = (
+  <Group width="fill" fill="accentPrimary" style={{ height: 48 }} />
+)
+
+const meta = {
+  title: 'Molecules / Drawer / Swap',
+  component: Drawer,
+  args: {
+    ...DrawerMock,
+    appearance: 'surfacePrimary sizeH1 solid rounded',
+    before: swapSlot,
+    after: swapSlot,
+    isOpen: true,
+    children: swapSlot,
+  },
+  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>
+
+export const Default: Story = {
+  render: (args: DrawerProps) => {
+    return <Drawer {...args} />
+  },
+}

package/src/components/Drawer/stories/__mock__/index.ts

@@ -0,0 +1,8 @@
+const DrawerMock = {
+  title: 'Title 123',
+  desc: 'Text 123',
+  isOpen: true,
+  onClickClose: () => {},
+}
+
+export { DrawerMock }

package/src/components/Dropdown/Dropdown.interface.ts

@@ -10,6 +10,7 @@ import type {
   AppearanceSizeKey,
   AppearanceStyleKey,
   BorderColorProps,
+  CompositeAppearanceKeys,
   FillActiveProps,
   FillProps,
   ItemFillActiveProps,
@@ -21,26 +22,42 @@ import type {
 
 import type { BadgeProps } from '../Badge/Badge.interface'
 import type { dividerSizePropsType } from '../Divider/styles/dividerSize'
-import type { SvgIconComponent } from '../Icon/Icon.interface'
-import type { dropdownSizePropsType } from './styles/dropdownSize'
+import type { IconProps, SvgIconComponent } from '../Icon/Icon.interface'
+import type { dropdownItemSizePropsType } from './styles/dropdownItemSize'
 
 interface DropdownAppearanceProps {
+  badgeAppearance?: BadgeProps['appearance']
+  badgeShape?: BadgeProps['shape']
+  badgeSize?: BadgeProps['size']
+  badgeTextSize?: BadgeProps['badgeTextSize']
   borderColor?: BorderColorProps
+  dividerFill?: FillProps
+  dividerSize?: dividerSizePropsType
   elevation?: string
   emptyMessageTextColor?: TextColorProps
   emptyMessageTextSize?: TextSizeProps
   fill?: FillProps
   fillActive?: FillActiveProps
+  iconAfterAppearance?: string
   iconAfterFillIcon?: ItemFillActiveProps
+  iconAfterFillSize?: IconProps['fillSize']
+  iconAfterSize?: IconProps['iconSize']
+  iconBeforeAppearance?: string
   iconBeforeFillIcon?: ItemFillActiveProps
+  iconBeforeFillSize?: IconProps['fillSize']
+  iconBeforeSize?: IconProps['iconSize']
   labelTextColor?: TextColorProps
   labelTextColorActive?: TextColorProps
   labelTextSize?: TextSizeProps
   shape?: ShapeProps
-  size?: dropdownSizePropsType
+  size?: dropdownItemSizePropsType
 }
 
 interface DropdownItemAppearanceProps {
+  badgeAppearance?: BadgeProps['appearance']
+  badgeShape?: BadgeProps['shape']
+  badgeSize?: BadgeProps['size']
+  badgeTextSize?: BadgeProps['badgeTextSize']
   borderColor?: BorderColorProps
   descTextColor?: TextColorProps
   descTextSize?: TextSizeProps
@@ -51,13 +68,19 @@ interface DropdownItemAppearanceProps {
   fill?: FillProps
   fillActive?: FillActiveProps
   fillDisabled?: FillProps
+  iconAfterAppearance?: string
   iconAfterFillIcon?: ItemFillActiveProps
+  iconAfterFillSize?: IconProps['fillSize']
+  iconAfterSize?: IconProps['iconSize']
+  iconBeforeAppearance?: string
   iconBeforeFillIcon?: ItemFillActiveProps
+  iconBeforeFillSize?: IconProps['fillSize']
+  iconBeforeSize?: IconProps['iconSize']
   labelTextColor?: TextColorProps
   labelTextColorActive?: TextColorProps
   labelTextSize?: TextSizeProps
   shape?: ShapeProps
-  size?: dropdownSizePropsType
+  size?: dropdownItemSizePropsType
   width?: WidthProps
 }
 
@@ -107,7 +130,7 @@ interface DropdownItemProps extends DropdownItemAppearanceProps {
   style?: StyleProp<ViewStyle>
 }
 
-type DropdownAppearanceKey = AppearanceKeysDefault
+type DropdownAppearanceKey = CompositeAppearanceKeys
 type DropdownConfig = AppearanceConfig<
   AppearanceKeysDefault,
   DropdownAppearanceProps
@@ -126,7 +149,31 @@ type DropdownAppearanceShape = AppearancePartialRecord<
 type DropdownAppearanceSize = AppearancePartialRecord<
   AppearanceSizeKey,
   DropdownAppearanceProps,
-  'emptyMessageTextSize' | 'labelTextSize' | 'size'
+  | 'badgeSize'
+  | 'badgeTextSize'
+  | 'dividerSize'
+  | 'emptyMessageTextSize'
+  | 'iconAfterFillSize'
+  | 'iconAfterSize'
+  | 'iconBeforeFillSize'
+  | 'iconBeforeSize'
+  | 'labelTextSize'
+  | 'size'
+>
+
+type DropdownItemAppearanceSize = AppearancePartialRecord<
+  AppearanceSizeKey,
+  DropdownItemAppearanceProps,
+  | 'badgeSize'
+  | 'badgeTextSize'
+  | 'dividerSize'
+  | 'emptyMessageTextSize'
+  | 'iconAfterFillSize'
+  | 'iconAfterSize'
+  | 'iconBeforeFillSize'
+  | 'iconBeforeSize'
+  | 'labelTextSize'
+  | 'size'
 >
 
 type DropdownItemConfig = AppearanceConfig<
@@ -145,6 +192,7 @@ export type {
   DropdownConfig,
   DropdownItemAppearance,
   DropdownItemAppearanceProps,
+  DropdownItemAppearanceSize,
   DropdownItemConfig,
   DropdownItemProps,
   DropdownListItem,

package/src/components/Dropdown/Dropdown.styles.ts

@@ -1,9 +1,7 @@
 import { dropdownStyles as dropdownBaseStyles } from './styles/dropdown'
-import { dropdownSizeStyles } from './styles/dropdownSize'
 
 const styles = {
   ...dropdownBaseStyles,
-  ...dropdownSizeStyles,
 }
 
 export { styles }

package/src/components/Dropdown/Dropdown.tsx

@@ -1,6 +1,11 @@
-import { useCallback, useMemo, useState } from 'react'
+import { useCallback, useState } from 'react'
 import { Modal, Pressable, ScrollView, View } from 'react-native'
 
+import {
+  useAppearanceConfig,
+  useDevicePropsGenerator,
+} from '@itcase/ui-core/hooks'
+
 import { tokens } from '../../styles/tokens'
 import { Group } from '../Group'
 import { Text } from '../Text'
@@ -20,8 +25,6 @@ dropdownConfig.setAppearance(dropdownAppearance)
 
 function Dropdown(props: DropdownProps) {
   const {
-    appearance,
-    fill,
     label,
     dropdownList,
     showDivider,
@@ -40,17 +43,10 @@ function Dropdown(props: DropdownProps) {
   const [isInternalOpen, setIsInternalOpen] = useState(false)
   const isMenuOpen = isControlled ? isOpen : isInternalOpen
 
-  const appearanceConfig = useMemo(() => {
-    if (!appearance || !dropdownConfig.appearance) {
-      return undefined
-    }
-
-    return dropdownConfig.appearance[appearance]
-  }, [appearance])
+  const appearanceConfig = useAppearanceConfig(props.appearance, dropdownConfig)
+  const propsGenerator = useDevicePropsGenerator(props, appearanceConfig)
 
-  const fillKey = fill || appearanceConfig?.fill
-  const shapeKey = appearanceConfig?.shape
-  const borderColorKey = appearanceConfig?.borderColor
+  const { fill, borderColor, shape } = propsGenerator
 
   const setMenuOpen = useCallback(
     (nextIsOpen: boolean) => {
@@ -73,7 +69,7 @@ function Dropdown(props: DropdownProps) {
   }, [setMenuOpen])
 
   return (
-    <View style={[styles.dropdown, style && style]}>
+    <View style={[styles.dropdown, style]}>
       <Pressable style={styles.dropdown__trigger} onPress={onPressTrigger}>
         {trigger || (label && <Text>{label}</Text>)}
       </Pressable>
@@ -90,21 +86,21 @@ function Dropdown(props: DropdownProps) {
           />
           <Group
             direction="vertical"
-            fill={fillKey}
-            borderColor={borderColorKey}
-            shape={shapeKey}
+            fill={fill}
+            borderColor={borderColor}
+            shape={shape}
             style={[
               styles.dropdown__menu,
-              fillKey && tokens[`fill_${fillKey}`],
-              shapeKey && tokens[`shape_${shapeKey}`],
-              borderColorKey && tokens[`border_color_${borderColorKey}`],
+              fill && tokens[`fill_${fill}`],
+              shape && tokens[`shape_${shape}`],
+              borderColor && tokens[`border_color_${borderColor}`],
             ]}
           >
             {before}
             <ScrollView>
               {dropdownList?.map((item) => (
                 <DropdownItem
-                  appearance={appearance}
+                  appearance={props.appearance}
                   key={item.key ?? item.label}
                   label={item.label}
                   badgeValue={item.badgeValue}

package/src/components/Dropdown/DropdownItem.styles.ts

@@ -0,0 +1,9 @@
+import { dropdownItemStyles } from './styles/dropdownItem'
+import { dropdownItemSizeStyles } from './styles/dropdownItemSize'
+
+const styles = {
+  ...dropdownItemStyles,
+  ...dropdownItemSizeStyles,
+}
+
+export { styles }

package/src/components/Dropdown/DropdownItem.tsx

@@ -1,16 +1,21 @@
-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 { Divider } from '../Divider'
-import { Group } from '../Group'
 import { Icon } from '../Icon'
 import { Text } from '../Text'
 import type {
   DropdownItemConfig,
   DropdownItemProps,
 } from './Dropdown.interface'
-import { styles } from './Dropdown.styles'
 import { dropdownItemAppearance } from './DropdownItem.appearance'
+import { styles } from './DropdownItem.styles'
 
 const dropdownItemConfig: DropdownItemConfig = {
   appearance: {},
@@ -23,9 +28,6 @@ dropdownItemConfig.setAppearance(dropdownItemAppearance)
 
 function DropdownItem(props: DropdownItemProps) {
   const {
-    appearance,
-    size,
-    fill,
     label,
     desc,
     badgeValue,
@@ -42,99 +44,125 @@ function DropdownItem(props: DropdownItemProps) {
     children,
   } = props
 
-  const appearanceConfig = useMemo(() => {
-    if (!appearance || !dropdownItemConfig.appearance) {
-      return undefined
-    }
+  const appearanceConfig = useAppearanceConfig(
+    props.appearance,
+    dropdownItemConfig,
+    isDisabled,
+  )
+  const propsGenerator = useDevicePropsGenerator(props, appearanceConfig)
 
-    return dropdownItemConfig.appearance[appearance]
-  }, [appearance])
+  const {
+    size,
+    fill,
+    fillActive,
+    fillDisabled,
+    labelTextColor,
+    labelTextColorActive,
+    labelTextSize,
+    descTextColor,
+    descTextSize,
+    badgeAppearance,
+    badgeShape,
+    badgeSize,
+    badgeTextSize,
+    dividerFill,
+    dividerSize,
+    emptyMessageTextColor,
+    emptyMessageTextSize,
+    iconAfterAppearance,
+    iconAfterFillIcon,
+    iconAfterFillSize,
+    iconAfterSize,
+    iconBeforeAppearance,
+    iconBeforeFillIcon,
+    iconBeforeFillSize,
+    iconBeforeSize,
+  } = propsGenerator
 
   const fillKey = isDisabled
-    ? appearanceConfig?.fillDisabled
-    : fill || appearanceConfig?.fill
-  const sizeKey = size || appearanceConfig?.size
-  const labelTextColor = isActive
-    ? appearanceConfig?.labelTextColorActive || appearanceConfig?.labelTextColor
-    : appearanceConfig?.labelTextColor
-  const labelTextSize = appearanceConfig?.labelTextSize
+    ? fillDisabled || fill
+    : isActive
+      ? fillActive || fill
+      : fill
+
+  const content = children || (
+    <View style={styles.dropdown__item_wrapper}>
+      {iconBefore && (
+        <Icon
+          appearance={iconBeforeAppearance}
+          size={iconBeforeSize}
+          fillSize={iconBeforeFillSize}
+          iconFill={iconBeforeFillIcon}
+          iconSize={iconBeforeSize}
+          style={styles.dropdown__item_before}
+          SVGIcon={iconBefore}
+        />
+      )}
+      {label && (
+        <Text
+          size={labelTextSize}
+          textColor={labelTextColor}
+          textColorActive={labelTextColorActive}
+          style={styles.dropdown__item_label}
+          isActive={isActive}
+          isDisabled={isDisabled}
+        >
+          {label}
+        </Text>
+      )}
+      {badgeValue && (
+        <Badge
+          appearance={badgeAppearance}
+          size={badgeSize}
+          text={badgeValue}
+          badgeTextSize={badgeTextSize}
+          shape={badgeShape}
+        />
+      )}
+      {desc && (
+        <Text size={descTextSize} textColor={descTextColor}>
+          {desc}
+        </Text>
+      )}
+      {emptyMessage && (
+        <Text size={emptyMessageTextSize} textColor={emptyMessageTextColor}>
+          {emptyMessage}
+        </Text>
+      )}
+      {iconAfter && (
+        <Icon
+          appearance={iconAfterAppearance}
+          size={iconAfterSize}
+          fillSize={iconAfterFillSize}
+          iconFill={iconAfterFillIcon}
+          iconSize={iconAfterSize}
+          style={styles.dropdown__item_after}
+          SVGIcon={iconAfter}
+        />
+      )}
+    </View>
+  )
 
   return (
-    <Group width="fill" direction="vertical">
-      <Group
-        direction="horizontal"
-        alignItems="center"
-        fill={fillKey}
-        fillActive={appearanceConfig?.fillActive}
-        fillDisabled={appearanceConfig?.fillDisabled}
+    <View style={styles.dropdown__item}>
+      <Pressable
+        disabled={isDisabled}
         style={[
-          styles.dropdown__item,
-          sizeKey && styles[`dropdown__item_size_${sizeKey}`],
-          style && style,
+          styles.dropdown__item_link,
+          fillKey && tokens[`fill_${fillKey}`],
+          size && styles[`dropdown__item_size_${size}`],
+          style,
         ]}
-        isActive={isActive}
-        isDisabled={isDisabled}
         onPress={onPress}
       >
         {before}
-        {iconBefore && (
-          <Icon
-            iconFill={appearanceConfig?.iconBeforeFillIcon}
-            iconSize="16"
-            SVGIcon={iconBefore}
-          />
-        )}
-        {children || (
-          <Group direction="horizontal" alignItems="center" gap={8}>
-            {label && (
-              <Text size={labelTextSize} textColor={labelTextColor}>
-                {label}
-              </Text>
-            )}
-            {badgeValue && (
-              <Badge
-                appearance="accentPrimary"
-                size="s"
-                text={badgeValue}
-                badgeTextSize="xs"
-                shape="circular"
-              />
-            )}
-            {desc && (
-              <Text
-                size={appearanceConfig?.descTextSize}
-                textColor={appearanceConfig?.descTextColor}
-              >
-                {desc}
-              </Text>
-            )}
-            {emptyMessage && (
-              <Text
-                size={appearanceConfig?.emptyMessageTextSize}
-                textColor={appearanceConfig?.emptyMessageTextColor}
-              >
-                {emptyMessage}
-              </Text>
-            )}
-          </Group>
-        )}
+        {content}
         {after}
-        {iconAfter && (
-          <Icon
-            iconFill={appearanceConfig?.iconAfterFillIcon}
-            iconSize="16"
-            SVGIcon={iconAfter}
-          />
-        )}
-      </Group>
+      </Pressable>
       {showDivider && (
-        <Divider
-          width="fill"
-          size={appearanceConfig?.dividerSize || 's'}
-          fill={appearanceConfig?.dividerFill || 'surfaceTertiary'}
-        />
+        <Divider width="fill" size={dividerSize} fill={dividerFill} />
       )}
-    </Group>
+    </View>
   )
 }
 

package/src/components/Dropdown/appearance/dropdownAccent.ts

@@ -6,11 +6,29 @@ const dropdownAppearanceAccent = {
     fillActive: 'accentActivePrimary',
     labelTextColor: 'accentTextPrimary',
     labelTextColorActive: 'accentTextPrimary',
+    badgeAppearance: 'accentPrimary sizeM solid circular',
+    badgeShape: 'circular',
+    badgeSize: 's',
+    badgeTextSize: 'xs',
+    dividerFill: 'surfaceTertiary',
+    dividerSize: 's',
     emptyMessageTextColor: 'accentTextPrimary',
+    iconAfterAppearance: 'accentPrimary size16_16 ghost rounded',
+    iconAfterFillIcon: 'accentItemPrimary',
+    iconBeforeAppearance: 'accentPrimary size16_16 ghost rounded',
+    iconBeforeFillIcon: 'accentItemPrimary',
   },
   accentSecondary: {
     fill: 'accentPrimary',
     labelTextColor: 'accentTextSecondary',
+    badgeAppearance: 'accentPrimary sizeM solid circular',
+    badgeShape: 'circular',
+    badgeSize: 's',
+    badgeTextSize: 'xs',
+    dividerFill: 'surfaceTertiary',
+    dividerSize: 's',
+    iconAfterAppearance: 'accentPrimary size16_16 ghost rounded',
+    iconBeforeAppearance: 'accentPrimary size16_16 ghost rounded',
   },
 } satisfies DropdownAppearance
 

package/src/components/Dropdown/appearance/dropdownShape.ts

@@ -8,16 +8,16 @@ const dropdownAppearanceShape = {
     shape: 'rounded',
   },
   roundedXL: {
-    shape: 'rounded',
+    shape: 'roundedXL',
   },
   roundedL: {
-    shape: 'rounded',
+    shape: 'roundedL',
   },
   roundedM: {
-    shape: 'rounded',
+    shape: 'roundedM',
   },
   roundedS: {
-    shape: 'rounded',
+    shape: 'roundedS',
   },
 } satisfies DropdownAppearanceShape
 

package/src/components/Dropdown/appearance/dropdownSize.ts

@@ -1,21 +1,45 @@
-import type { DropdownAppearanceSize } from '../Dropdown.interface'
+import type {
+  DropdownAppearanceSize,
+  DropdownItemAppearanceSize,
+} from '../Dropdown.interface'
 
 const dropdownAppearanceSize = {
   sizeL: {
     size: 'l',
     labelTextSize: 'm',
+    badgeSize: 's',
+    badgeTextSize: 'xs',
+    dividerSize: 's',
     emptyMessageTextSize: 'm',
+    iconAfterFillSize: '24',
+    iconAfterSize: '24',
+    iconBeforeFillSize: '24',
+    iconBeforeSize: '24',
   },
   sizeS: {
     size: 's',
     labelTextSize: 's',
+    badgeSize: 's',
+    badgeTextSize: 'xs',
+    dividerSize: 's',
     emptyMessageTextSize: 'm',
+    iconAfterFillSize: '16',
+    iconAfterSize: '16',
+    iconBeforeFillSize: '16',
+    iconBeforeSize: '16',
   },
   sizeXS: {
     size: 'xs',
     labelTextSize: 'xs',
+    badgeSize: 's',
+    badgeTextSize: 'xs',
+    dividerSize: 's',
     emptyMessageTextSize: 'xs',
+    iconAfterFillSize: '12',
+    iconAfterSize: '12',
+    iconBeforeFillSize: '12',
+    iconBeforeSize: '12',
   },
-} satisfies DropdownAppearanceSize
+} satisfies DropdownAppearanceSize & DropdownItemAppearanceSize
 
 export { dropdownAppearanceSize }

package/src/components/Dropdown/appearance/dropdownSurface.ts

@@ -6,19 +6,53 @@ const dropdownAppearanceSurface = {
     fillActive: 'surfaceActivePrimary',
     labelTextColor: 'surfaceTextPrimary',
     labelTextColorActive: 'surfaceTextPrimary',
+    badgeAppearance: 'accentPrimary sizeM solid circular',
+    badgeShape: 'circular',
+    badgeSize: 's',
+    badgeTextSize: 'xs',
+    dividerFill: 'surfaceTertiary',
+    dividerSize: 's',
     emptyMessageTextColor: 'surfaceTextPrimary',
+    iconAfterAppearance: 'surfacePrimary size16_16 ghost rounded',
+    iconAfterFillIcon: 'surfaceItemPrimary',
+    iconBeforeAppearance: 'surfacePrimary size16_16 ghost rounded',
+    iconBeforeFillIcon: 'surfaceItemPrimary',
   },
   surfaceQuaternary: {
     fill: 'surfaceQuaternary',
     labelTextColor: 'surfaceTextPrimary',
+    badgeAppearance: 'accentPrimary sizeM solid circular',
+    badgeShape: 'circular',
+    badgeSize: 's',
+    badgeTextSize: 'xs',
+    dividerFill: 'surfaceTertiary',
+    dividerSize: 's',
+    iconAfterAppearance: 'surfacePrimary size16_16 ghost rounded',
+    iconBeforeAppearance: 'surfacePrimary size16_16 ghost rounded',
   },
   surfaceSecondary: {
     fill: 'surfaceSecondary',
     labelTextColor: 'surfaceTextPrimary',
+    badgeAppearance: 'accentPrimary sizeM solid circular',
+    badgeShape: 'circular',
+    badgeSize: 's',
+    badgeTextSize: 'xs',
+    dividerFill: 'surfaceTertiary',
+    dividerSize: 's',
+    iconAfterAppearance: 'surfacePrimary size16_16 ghost rounded',
+    iconBeforeAppearance: 'surfacePrimary size16_16 ghost rounded',
   },
   surfaceTertiary: {
     fill: 'surfaceTertiary',
     labelTextColor: 'surfaceTextPrimary',
+    badgeAppearance: 'accentPrimary sizeM solid circular',
+    badgeShape: 'circular',
+    badgeSize: 's',
+    badgeTextSize: 'xs',
+    dividerFill: 'surfaceTertiary',
+    dividerSize: 's',
+    iconAfterAppearance: 'surfacePrimary size16_16 ghost rounded',
+    iconBeforeAppearance: 'surfacePrimary size16_16 ghost rounded',
   },
 } satisfies DropdownAppearance