@itcase/ui-react-native 1.10.85 → 1.10.86

package/src/components/Logo/stories/LogoSize.stories.tsx

@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import image from '../../../images/manager.png'
+import { Logo } from '../Logo'
+import type { LogoProps } from '../Logo.interface'
+
+const meta = {
+  title: 'Atoms / Logo / Size ',
+  component: Logo,
+  args: {
+    source: image,
+  },
+} satisfies Meta<typeof Logo>
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const S: Story = {
+  args: {
+    size: 's',
+  },
+  render: (args: LogoProps) => {
+    return <Logo {...args} />
+  },
+}
+
+export const M: Story = {
+  args: {
+    size: 'm',
+  },
+  render: (args: LogoProps) => {
+    return <Logo {...args} />
+  },
+}
+
+export const L: Story = {
+  args: {
+    size: 'l',
+  },
+  render: (args: LogoProps) => {
+    return <Logo {...args} />
+  },
+}

package/src/components/MenuItem/MenuItem.interface.ts

@@ -30,11 +30,13 @@ interface MenuItemAppearanceProps {
   fill?: FillProps
   fillActive?: FillActiveProps
   iconAfter?: SvgIconComponent
+  iconAfterAppearance?: string
   iconAfterFill?: IconProps['fill']
   iconAfterFillIcon?: IconProps['iconFill']
   iconAfterShape?: IconProps['shape']
   iconAfterSize?: IconProps['size']
   iconBefore?: SvgIconComponent
+  iconBeforeAppearance?: string
   iconBeforeFill?: IconProps['fill']
   iconBeforeFillIcon?: IconProps['iconFill']
   iconBeforeShape?: IconProps['shape']

package/src/components/MenuItem/MenuItem.tsx

@@ -1,15 +1,15 @@
-import { useMemo } from 'react'
 import { Pressable, View } from 'react-native'
 
+import {
+  useAppearanceConfig,
+  useDevicePropsGenerator,
+} from '@itcase/ui-core/hooks'
+
 import { tokens } from '../../styles/tokens'
 import { Icon } from '../Icon'
 import { Text } from '../Text'
 import { menuItemAppearance } from './MenuItem.appearance'
-import type {
-  MenuItemAppearanceProps,
-  MenuItemConfig,
-  MenuItemProps,
-} from './MenuItem.interface'
+import type { MenuItemConfig, MenuItemProps } from './MenuItem.interface'
 import { styles } from './MenuItem.styles'
 
 const menuItemConfig: MenuItemConfig = {
@@ -25,82 +25,57 @@ function MenuItem(props: MenuItemProps) {
   const {
     appearance,
     justifyContent,
+    label,
+    desc,
+    style,
+    before,
+    after,
+    isActive,
+    isDisabled,
+    onPress,
+    children,
+  } = props
+
+  const appearanceConfig = useAppearanceConfig(
+    appearance,
+    menuItemConfig,
+    isDisabled,
+  )
+  const propsGenerator = useDevicePropsGenerator(props, appearanceConfig)
+
+  const {
     size,
     fill,
-    label,
+    fillActive,
+    labelTextActiveColor,
     labelTextColor,
     labelTextColorDisabled,
     labelTextSize,
     labelWeight,
-    desc,
     descTextColor,
     descTextSize,
     borderColor,
     iconAfter,
+    iconAfterAppearance,
     iconAfterFill,
     iconAfterFillIcon,
     iconAfterShape,
     iconAfterSize,
     iconBefore,
+    iconBeforeAppearance,
     iconBeforeFill,
     iconBeforeFillIcon,
     iconBeforeShape,
     iconBeforeSize,
     shape,
-    style,
-    before,
-    after,
-    isActive,
-    isDisabled,
-    onPress,
-    children,
-  } = props
-
-  const appearanceConfig = useMemo(() => {
-    if (!appearance || !menuItemConfig.appearance) {
-      return undefined
-    }
-
-    const appearanceKeysList = appearance.split(' ')
-
-    return appearanceKeysList.reduce<MenuItemAppearanceProps>(
-      (resultConfig, appearanceKey) => {
-        const appearanceMap = menuItemConfig.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 : fill
   const labelColorKey = isDisabled
-    ? labelTextColorDisabled || appearanceConfig?.labelTextColorDisabled
+    ? labelTextColorDisabled
     : isActive
-      ? appearanceConfig?.labelTextActiveColor || labelTextColor
-      : labelTextColor || appearanceConfig?.labelTextColor
-  const labelSizeKey = labelTextSize || appearanceConfig?.labelTextSize
-  const iconBeforeComponent = iconBefore || appearanceConfig?.iconBefore
-  const iconAfterComponent = iconAfter || appearanceConfig?.iconAfter
-  const iconBeforeSizeKey = iconBeforeSize || appearanceConfig?.iconBeforeSize
-  const iconAfterSizeKey = iconAfterSize || appearanceConfig?.iconAfterSize
+      ? labelTextActiveColor || labelTextColor
+      : labelTextColor
 
   const content = children || (
     <View
@@ -109,42 +84,44 @@ function MenuItem(props: MenuItemProps) {
         justifyContent && styles[`menuItem_justify_${justifyContent}`],
       ]}
     >
-      {iconBeforeComponent && (
+      {iconBefore && (
         <Icon
-          size={iconBeforeSizeKey}
-          fill={iconBeforeFill || appearanceConfig?.iconBeforeFill}
-          iconFill={iconBeforeFillIcon || appearanceConfig?.iconBeforeFillIcon}
-          iconSize={iconBeforeSizeKey}
-          shape={iconBeforeShape || appearanceConfig?.iconBeforeShape}
+          appearance={iconBeforeAppearance}
+          size={iconBeforeSize}
+          fill={iconBeforeFill}
+          iconFill={iconBeforeFillIcon}
+          iconSize={iconBeforeSize}
+          shape={iconBeforeShape}
           style={styles.menuItem__icon}
-          SVGIcon={iconBeforeComponent}
+          SVGIcon={iconBefore}
         />
       )}
       <View style={styles.menuItem__label}>
         {label && (
           <Text
-            size={labelSizeKey}
+            size={labelTextSize}
             textColor={labelColorKey}
-            weight={labelWeight || appearanceConfig?.labelWeight}
+            weight={labelWeight}
           >
             {label}
           </Text>
         )}
         {desc && (
-          <Text size={descTextSize || 's'} textColor={descTextColor}>
+          <Text size={descTextSize} textColor={descTextColor}>
             {desc}
           </Text>
         )}
       </View>
-      {iconAfterComponent && (
+      {iconAfter && (
         <Icon
-          size={iconAfterSizeKey}
-          fill={iconAfterFill || appearanceConfig?.iconAfterFill}
-          iconFill={iconAfterFillIcon || appearanceConfig?.iconAfterFillIcon}
-          iconSize={iconAfterSizeKey}
-          shape={iconAfterShape || appearanceConfig?.iconAfterShape}
+          appearance={iconAfterAppearance}
+          size={iconAfterSize}
+          fill={iconAfterFill}
+          iconFill={iconAfterFillIcon}
+          iconSize={iconAfterSize}
+          shape={iconAfterShape}
           style={styles.menuItem__icon}
-          SVGIcon={iconAfterComponent}
+          SVGIcon={iconAfter}
         />
       )}
     </View>
@@ -156,9 +133,9 @@ function MenuItem(props: MenuItemProps) {
       style={[
         styles.menuItem,
         fillKey && tokens[`fill_${fillKey}`],
-        borderColorKey && tokens[`border_color_${borderColorKey}`],
-        shapeKey && styles[`menuItem_shape_${shapeKey}`],
-        sizeKey && styles[`menuItem_size_${sizeKey}`],
+        borderColor && tokens[`border_color_${borderColor}`],
+        shape && styles[`menuItem_shape_${shape}`],
+        size && styles[`menuItem_size_${size}`],
         style && style,
       ]}
       onPress={onPress}

package/src/components/MenuItem/appearance/menuItemAccent.ts

@@ -5,20 +5,26 @@ const menuItemAppearanceAccent = {
     fill: 'accentTertiary',
     labelTextColor: 'accentTextQuaternary',
     borderColor: 'accentBorderSecondary',
+    iconAfterAppearance: 'accentPrimary size16_16 ghost rounded',
     iconAfterFillIcon: 'accentItemQuaternary',
+    iconBeforeAppearance: 'accentPrimary size16_16 ghost rounded',
     iconBeforeFillIcon: 'accentItemQuaternary',
   },
   accentPrimary: {
     fill: 'accentPrimary',
     labelTextColor: 'accentTextPrimary',
     borderColor: 'accentBorderSecondary',
+    iconAfterAppearance: 'accentPrimary size16_16 ghost rounded',
     iconAfterFillIcon: 'accentItemPrimary',
+    iconBeforeAppearance: 'accentPrimary size16_16 ghost rounded',
     iconBeforeFillIcon: 'accentItemPrimary',
   },
   accentSecondary: {
     fill: 'accentPrimary',
     labelTextColor: 'accentTextSecondary',
+    iconAfterAppearance: 'accentPrimary size16_16 ghost rounded',
     iconAfterFillIcon: 'accentItemSecondary',
+    iconBeforeAppearance: 'accentPrimary size16_16 ghost rounded',
     iconBeforeFillIcon: 'accentItemSecondary',
   },
 } satisfies MenuItemAppearance

package/src/components/MenuItem/appearance/menuItemError.ts

@@ -4,14 +4,18 @@ const menuItemAppearanceError = {
   errorMutedPrimary: {
     fill: 'errorTertiary',
     labelTextColor: 'errorTextQuaternary',
+    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 MenuItemAppearance

package/src/components/MenuItem/appearance/menuItemSurface.ts

@@ -5,7 +5,9 @@ const menuItemAppearanceSurface = {
     fill: 'surfaceSecondary',
     fillActive: 'surfacePrimary',
     labelTextColor: 'surfaceTextQuaternary',
+    iconAfterAppearance: 'disabledPrimary size16_16 ghost rounded',
     iconAfterFillIcon: 'surfaceItemQuaternary',
+    iconBeforeAppearance: 'disabledPrimary size16_16 ghost rounded',
     iconBeforeFillIcon: 'surfaceItemQuaternary',
   },
   surfacePrimary: {
@@ -14,7 +16,9 @@ const menuItemAppearanceSurface = {
     labelTextActiveColor: 'accentTextSecondary',
     labelTextColor: 'surfaceTextPrimary',
     borderColor: 'surfaceBorderQuaternary',
+    iconAfterAppearance: 'surfacePrimary size16_16 ghost rounded',
     iconAfterFillIcon: 'surfaceItemPrimary',
+    iconBeforeAppearance: 'surfacePrimary size16_16 ghost rounded',
     iconBeforeFillIcon: 'surfaceItemPrimary',
   },
   surfaceQuaternary: {
@@ -26,7 +30,9 @@ const menuItemAppearanceSurface = {
     fillActive: 'surfaceSecondary',
     labelTextActiveColor: 'accentTextSecondary',
     borderColor: 'surfaceBorderQuaternary',
+    iconAfterAppearance: 'surfacePrimary size16_16 ghost rounded',
     iconAfterFillIcon: 'surfaceItemPrimary',
+    iconBeforeAppearance: 'surfacePrimary size16_16 ghost rounded',
     iconBeforeFillIcon: 'surfaceItemPrimary',
   },
   surfaceTertiary: {

package/src/components/MenuItem/stories/MenuItemDefault.stories.tsx

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { icons20 } from '@itcase/icons-default'
+
+import { MenuItem } from '../MenuItem'
+import type { MenuItemProps } from '../MenuItem.interface'
+
+const meta = {
+  title: 'Atoms / MenuItem / Default',
+  component: MenuItem,
+  args: {
+    label: 'Label',
+    iconAfter: icons20.Placeholder.Default,
+    iconBefore: icons20.Placeholder.Default,
+  },
+  parameters: {
+    layout: 'centered',
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/HmHn0BShJPXHU8SmuIP71M/ITCase---Atoms?node-id=26-22732',
+    },
+  },
+} satisfies Meta<typeof MenuItem>
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Surface: Story = {
+  args: {
+    appearance: 'surfacePrimary sizeXXL solid rounded',
+  },
+  render: (args: MenuItemProps) => {
+    return <MenuItem {...args} />
+  },
+}
+
+export const Accent: Story = {
+  args: {
+    appearance: 'accentPrimary sizeXXL solid rounded',
+  },
+  render: (args: MenuItemProps) => {
+    return <MenuItem {...args} />
+  },
+}
+
+export const Error: Story = {
+  args: {
+    appearance: 'errorPrimary sizeXXL solid rounded',
+  },
+  render: (args: MenuItemProps) => {
+    return <MenuItem {...args} />
+  },
+}

package/src/components/MenuItem/stories/MenuItemIcon.stories.tsx

@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { icons20 } from '@itcase/icons-default'
+
+import { MenuItem } from '../MenuItem'
+import type { MenuItemProps } from '../MenuItem.interface'
+
+const meta = {
+  title: 'Atoms / MenuItem / Icon / Default',
+  component: MenuItem,
+  args: {
+    label: 'Label',
+  },
+  parameters: {
+    layout: 'centered',
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/HmHn0BShJPXHU8SmuIP71M/ITCase---Atoms?node-id=26-22732',
+    },
+  },
+} satisfies Meta<typeof MenuItem>
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Surface: Story = {
+  args: {
+    appearance: 'surfacePrimary sizeXXL solid rounded',
+    iconBefore: icons20.Placeholder.Default,
+  },
+  render: (args: MenuItemProps) => {
+    return <MenuItem {...args} />
+  },
+}
+
+export const Accent: Story = {
+  args: {
+    appearance: 'accentPrimary sizeXXL solid rounded',
+    iconBefore: icons20.Placeholder.Default,
+  },
+  render: (args: MenuItemProps) => {
+    return <MenuItem {...args} />
+  },
+}
+
+export const Error: Story = {
+  args: {
+    appearance: 'errorPrimary sizeXXL solid rounded',
+    iconBefore: icons20.Placeholder.Default,
+  },
+  render: (args: MenuItemProps) => {
+    return <MenuItem {...args} />
+  },
+}

package/src/components/MenuItem/stories/MenuItemIconMuted.stories.tsx

@@ -0,0 +1,51 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { icons20 } from '@itcase/icons-default'
+
+import { MenuItem } from '../MenuItem'
+import type { MenuItemProps } from '../MenuItem.interface'
+
+const meta = {
+  title: 'Atoms / MenuItem / Icon / Muted',
+  component: MenuItem,
+  parameters: {
+    layout: 'centered',
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/HmHn0BShJPXHU8SmuIP71M/ITCase---Atoms?node-id=26-22732',
+    },
+  },
+} satisfies Meta<typeof MenuItem>
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Surface: Story = {
+  args: {
+    appearance: 'surfaceMutedPrimary sizeXXL solid rounded',
+    iconBefore: icons20.Placeholder.Default,
+  },
+  render: (args: MenuItemProps) => {
+    return <MenuItem {...args} />
+  },
+}
+
+export const Accent: Story = {
+  args: {
+    appearance: 'accentMutedPrimary sizeXXL solid rounded',
+    iconBefore: icons20.Placeholder.Default,
+  },
+  render: (args: MenuItemProps) => {
+    return <MenuItem {...args} />
+  },
+}
+
+export const Error: Story = {
+  args: {
+    appearance: 'errorMutedPrimary sizeXXL solid rounded',
+    iconBefore: icons20.Placeholder.Default,
+  },
+  render: (args: MenuItemProps) => {
+    return <MenuItem {...args} />
+  },
+}

package/src/components/MenuItem/stories/MenuItemMuted.stories.tsx

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { icons20 } from '@itcase/icons-default'
+
+import { MenuItem } from '../MenuItem'
+import type { MenuItemProps } from '../MenuItem.interface'
+
+const meta = {
+  title: 'Atoms / MenuItem / Muted',
+  component: MenuItem,
+  args: {
+    label: 'Label',
+    iconAfter: icons20.Placeholder.Default,
+    iconBefore: icons20.Placeholder.Default,
+  },
+  parameters: {
+    layout: 'centered',
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/HmHn0BShJPXHU8SmuIP71M/ITCase---Atoms?node-id=26-22732',
+    },
+  },
+} satisfies Meta<typeof MenuItem>
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Surface: Story = {
+  args: {
+    appearance: 'surfaceMutedPrimary sizeXXL solid rounded',
+  },
+  render: (args: MenuItemProps) => {
+    return <MenuItem {...args} />
+  },
+}
+
+export const Accent: Story = {
+  args: {
+    appearance: 'accentMutedPrimary sizeXXL solid rounded',
+  },
+  render: (args: MenuItemProps) => {
+    return <MenuItem {...args} />
+  },
+}
+
+export const Error: Story = {
+  args: {
+    appearance: 'errorMutedPrimary sizeXXL solid rounded',
+  },
+  render: (args: MenuItemProps) => {
+    return <MenuItem {...args} />
+  },
+}

package/src/components/MenuItem/stories/MenuItemSize.stories.tsx

@@ -0,0 +1,87 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { icons12, icons16, icons20 } from '@itcase/icons-default'
+
+import { MenuItem } from '../MenuItem'
+import type { MenuItemProps } from '../MenuItem.interface'
+
+const meta = {
+  title: 'Atoms / MenuItem / Size',
+  component: MenuItem,
+  args: {
+    label: 'Label',
+  },
+  parameters: {
+    layout: 'centered',
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/HmHn0BShJPXHU8SmuIP71M/ITCase---Atoms?node-id=26-22732',
+    },
+  },
+} satisfies Meta<typeof MenuItem>
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const SizeXXL: Story = {
+  args: {
+    appearance: 'surfacePrimary sizeXXL solid rounded',
+    iconAfter: icons20.Placeholder.Default,
+    iconBefore: icons20.Placeholder.Default,
+  },
+  render: (args: MenuItemProps) => <MenuItem {...args} />,
+}
+
+export const SizeXL: Story = {
+  args: {
+    appearance: 'surfacePrimary sizeXL solid rounded',
+    iconAfter: icons20.Placeholder.Default,
+    iconBefore: icons20.Placeholder.Default,
+  },
+  render: (args: MenuItemProps) => <MenuItem {...args} />,
+}
+
+export const SizeL: Story = {
+  args: {
+    appearance: 'surfacePrimary sizeL solid rounded',
+    iconAfter: icons16.Placeholder.Default,
+    iconBefore: icons16.Placeholder.Default,
+  },
+  render: (args: MenuItemProps) => <MenuItem {...args} />,
+}
+
+export const SizeM: Story = {
+  args: {
+    appearance: 'surfacePrimary sizeM solid rounded',
+    iconAfter: icons16.Placeholder.Default,
+    iconBefore: icons16.Placeholder.Default,
+  },
+  render: (args: MenuItemProps) => <MenuItem {...args} />,
+}
+
+export const SizeS: Story = {
+  args: {
+    appearance: 'surfacePrimary sizeS solid rounded',
+    iconAfter: icons12.Placeholder.Default,
+    iconBefore: icons12.Placeholder.Default,
+  },
+  render: (args: MenuItemProps) => <MenuItem {...args} />,
+}
+
+export const SizeXS: Story = {
+  args: {
+    appearance: 'surfacePrimary sizeXS solid rounded',
+    iconAfter: icons12.Placeholder.Default,
+    iconBefore: icons12.Placeholder.Default,
+  },
+  render: (args: MenuItemProps) => <MenuItem {...args} />,
+}
+
+export const SizeXXS: Story = {
+  args: {
+    appearance: 'surfacePrimary sizeXXS solid rounded',
+    iconAfter: icons12.Placeholder.Default,
+    iconBefore: icons12.Placeholder.Default,
+  },
+  render: (args: MenuItemProps) => <MenuItem {...args} />,
+}