@itcase/ui-react-native 1.10.85 → 1.10.87

package/src/components/Group/stories/GroupAlignItems.stories.tsx

@@ -0,0 +1,86 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Text } from '../../Text'
+import { Group } from '../Group'
+import type { GroupProps } from '../Group.interface'
+
+const meta = {
+  title: 'Layout / Group / AlignItems',
+  component: Group,
+  args: {
+    direction: 'vertical',
+    fill: 'surfacePrimary',
+    borderColor: 'surfaceBorderPrimary',
+    style: { width: 500 },
+  },
+  render: ({ ...args }) => (
+    <Group
+      width={args.width}
+      direction={args.direction}
+      alignItems={args.alignItems}
+      fill={args.fill}
+      borderColor={args.borderColor}
+      style={args.style}
+    >
+      <Group fill="accentPrimary">
+        <Text size="xl" textColor="white">
+          1
+        </Text>
+      </Group>
+      <Group fill="specialPrimary">
+        <Text size="xl" textColor="white">
+          2
+        </Text>
+      </Group>
+      <Group fill="extraPrimary">
+        <Text size="xl" textColor="white">
+          3
+        </Text>
+      </Group>
+      <Group fill="infoPrimary">
+        <Text size="xl" textColor="white">
+          4
+        </Text>
+      </Group>
+    </Group>
+  ),
+} satisfies Meta<typeof Group>
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: (args: GroupProps) => {
+    return <Group {...args} />
+  },
+}
+
+export const Stretch: Story = {
+  args: {
+    alignItems: 'stretch',
+  },
+}
+
+export const FlexStart: Story = {
+  args: {
+    alignItems: 'flex-start',
+  },
+}
+
+export const FlexEnd: Story = {
+  args: {
+    alignItems: 'flex-end',
+  },
+}
+
+export const Center: Story = {
+  args: {
+    alignItems: 'center',
+  },
+}
+
+export const Baseline: Story = {
+  args: {
+    alignItems: 'baseline',
+  },
+}

package/src/components/Group/stories/GroupDirection.stories.tsx

@@ -0,0 +1,90 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Text } from '../../Text'
+import { Group } from '../Group'
+import type { GroupProps } from '../Group.interface'
+
+const meta = {
+  title: 'Layout / Group / Direction',
+  component: Group,
+  args: {
+    fill: 'surfacePrimary',
+    borderColor: 'surfaceBorderPrimary',
+    style: { width: 500 },
+  },
+  render: ({ ...args }) => (
+    <Group
+      width={args.width}
+      direction={args.direction}
+      fill={args.fill}
+      borderColor={args.borderColor}
+      style={args.style}
+    >
+      <Group fill="accentPrimary">
+        <Text size="xl" textColor="white">
+          1
+        </Text>
+      </Group>
+      <Group fill="specialPrimary">
+        <Text size="xl" textColor="white">
+          2
+        </Text>
+      </Group>
+      <Group fill="extraPrimary">
+        <Text size="xl" textColor="white">
+          3
+        </Text>
+      </Group>
+      <Group fill="infoPrimary">
+        <Text size="xl" textColor="white">
+          4
+        </Text>
+      </Group>
+    </Group>
+  ),
+} satisfies Meta<typeof Group>
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: (args: GroupProps) => {
+    return <Group {...args} />
+  },
+}
+
+export const Row: Story = {
+  args: {
+    direction: 'row',
+  },
+}
+
+export const RowReverse: Story = {
+  args: {
+    direction: 'row-reverse',
+  },
+}
+
+export const Column: Story = {
+  args: {
+    direction: 'column',
+  },
+}
+
+export const ColumnReverse: Story = {
+  args: {
+    direction: 'column-reverse',
+  },
+}
+
+export const Horizontal: Story = {
+  args: {
+    direction: 'horizontal',
+  },
+}
+
+export const Vertical: Story = {
+  args: {
+    direction: 'vertical',
+  },
+}

package/src/components/Group/stories/GroupJustifyContent.stories.tsx

@@ -0,0 +1,92 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Text } from '../../Text'
+import { Group } from '../Group'
+import type { GroupProps } from '../Group.interface'
+
+const meta = {
+  title: 'Layout / Group / JustifyContent',
+  component: Group,
+  args: {
+    direction: 'horizontal',
+    fill: 'surfacePrimary',
+    borderColor: 'surfaceBorderPrimary',
+    style: { width: 500 },
+  },
+  render: ({ ...args }) => (
+    <Group
+      width={args.width}
+      direction={args.direction}
+      justifyContent={args.justifyContent}
+      fill={args.fill}
+      borderColor={args.borderColor}
+      style={args.style}
+    >
+      <Group fill="accentPrimary">
+        <Text size="xl" textColor="white">
+          1
+        </Text>
+      </Group>
+      <Group fill="specialPrimary">
+        <Text size="xl" textColor="white">
+          2
+        </Text>
+      </Group>
+      <Group fill="extraPrimary">
+        <Text size="xl" textColor="white">
+          3
+        </Text>
+      </Group>
+      <Group fill="infoPrimary">
+        <Text size="xl" textColor="white">
+          4
+        </Text>
+      </Group>
+    </Group>
+  ),
+} satisfies Meta<typeof Group>
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: (args: GroupProps) => {
+    return <Group {...args} />
+  },
+}
+
+export const FlexStart: Story = {
+  args: {
+    justifyContent: 'flex-start',
+  },
+}
+
+export const FlexEnd: Story = {
+  args: {
+    justifyContent: 'flex-end',
+  },
+}
+
+export const Center: Story = {
+  args: {
+    justifyContent: 'center',
+  },
+}
+
+export const SpaceBetween: Story = {
+  args: {
+    justifyContent: 'space-between',
+  },
+}
+
+export const SpaceAround: Story = {
+  args: {
+    justifyContent: 'space-around',
+  },
+}
+
+export const SpaceEvenly: Story = {
+  args: {
+    justifyContent: 'space-evenly',
+  },
+}

package/src/components/Group/stories/GroupWrap.stories.tsx

@@ -0,0 +1,74 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Text } from '../../Text'
+import { Group } from '../Group'
+import type { GroupProps } from '../Group.interface'
+
+const meta = {
+  title: 'Layout / Group / Wrap',
+  component: Group,
+  args: {
+    direction: 'horizontal',
+    fill: 'surfacePrimary',
+    borderColor: 'surfaceBorderPrimary',
+    style: { width: 500 },
+  },
+  render: ({ ...args }) => (
+    <Group
+      width={args.width}
+      direction={args.direction}
+      fill={args.fill}
+      borderColor={args.borderColor}
+      style={args.style}
+      wrap={args.wrap}
+    >
+      <Group fill="accentPrimary">
+        <Text size="xl" textColor="white">
+          1
+        </Text>
+      </Group>
+      <Group fill="specialPrimary">
+        <Text size="xl" textColor="white">
+          2
+        </Text>
+      </Group>
+      <Group fill="extraPrimary">
+        <Text size="xl" textColor="white">
+          3
+        </Text>
+      </Group>
+      <Group fill="infoPrimary">
+        <Text size="xl" textColor="white">
+          4
+        </Text>
+      </Group>
+    </Group>
+  ),
+} satisfies Meta<typeof Group>
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: (args: GroupProps) => {
+    return <Group {...args} />
+  },
+}
+
+export const Nowrap: Story = {
+  args: {
+    wrap: 'nowrap',
+  },
+}
+
+export const Wrap: Story = {
+  args: {
+    wrap: 'wrap',
+  },
+}
+
+export const WrapReverse: Story = {
+  args: {
+    wrap: 'wrap-reverse',
+  },
+}

package/src/components/HeroTitle/HeroTitle.interface.ts

@@ -17,6 +17,8 @@ import type { IconProps } from '../Icon'
 interface HeroTitleAppearanceProps {
   direction?: DirectionProps
   fill?: FillProps
+  iconAfterAppearance?: IconProps['appearance']
+  iconBeforeAppearance?: IconProps['appearance']
   size?: TitleSizeProps
   textAlign?: TextAlignProps
   textColor?: TextColorProps

package/src/components/HeroTitle/HeroTitle.tsx

@@ -1,6 +1,10 @@
-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 { Title } from '../Title'
@@ -19,14 +23,7 @@ heroTitleConfig.setAppearance(heroTitleAppearance)
 
 function HeroTitle(props: HeroTitleProps) {
   const {
-    appearance,
-    direction,
-    size,
-    fill,
     text,
-    textAlign,
-    textColor,
-    textWeight,
     iconAfter,
     iconBefore,
     style,
@@ -36,13 +33,22 @@ function HeroTitle(props: HeroTitleProps) {
     children,
   } = props
 
-  const appearanceConfig = useMemo(() => {
-    if (!appearance || !heroTitleConfig.appearance) {
-      return undefined
-    }
+  const appearanceConfig = useAppearanceConfig(
+    props.appearance,
+    heroTitleConfig,
+  )
+  const propsGenerator = useDevicePropsGenerator(props, appearanceConfig)
 
-    return heroTitleConfig.appearance[appearance]
-  }, [appearance])
+  const {
+    direction,
+    size,
+    fill,
+    textAlign,
+    textColor,
+    textWeight,
+    iconAfterAppearance,
+    iconBeforeAppearance,
+  } = propsGenerator
 
   const content = (
     <View
@@ -53,17 +59,21 @@ function HeroTitle(props: HeroTitleProps) {
       ]}
     >
       {before}
-      {iconBefore && <Icon iconSize="24" SVGIcon={iconBefore} />}
+      {iconBefore && (
+        <Icon appearance={iconBeforeAppearance} SVGIcon={iconBefore} />
+      )}
       <Title
-        size={size || appearanceConfig?.size || 'h1'}
-        textAlign={textAlign || appearanceConfig?.textAlign}
-        textColor={textColor || appearanceConfig?.textColor}
+        size={size || 'h1'}
+        textAlign={textAlign}
+        textColor={textColor}
         style={style}
-        weight={textWeight || appearanceConfig?.textWeight}
+        weight={textWeight}
       >
         {children || text}
       </Title>
-      {iconAfter && <Icon iconSize="24" SVGIcon={iconAfter} />}
+      {iconAfter && (
+        <Icon appearance={iconAfterAppearance} SVGIcon={iconAfter} />
+      )}
       {after}
     </View>
   )

package/src/components/HeroTitle/appearance/heroTitleSize.ts

@@ -3,21 +3,33 @@ import type { HeroTitleAppearance } from '../HeroTitle.interface'
 const heroTitleAppearanceSize = {
   sizeH1: {
     size: 'h1',
+    iconAfterAppearance: 'surfacePrimary size24_24 ghost rounded',
+    iconBeforeAppearance: 'surfacePrimary size24_24 ghost rounded',
   },
   sizeH2: {
     size: 'h2',
+    iconAfterAppearance: 'surfacePrimary size24_24 ghost rounded',
+    iconBeforeAppearance: 'surfacePrimary size24_24 ghost rounded',
   },
   sizeH3: {
     size: 'h3',
+    iconAfterAppearance: 'surfacePrimary size24_24 ghost rounded',
+    iconBeforeAppearance: 'surfacePrimary size24_24 ghost rounded',
   },
   sizeH4: {
     size: 'h4',
+    iconAfterAppearance: 'surfacePrimary size24_24 ghost rounded',
+    iconBeforeAppearance: 'surfacePrimary size24_24 ghost rounded',
   },
   sizeH5: {
     size: 'h5',
+    iconAfterAppearance: 'surfacePrimary size24_24 ghost rounded',
+    iconBeforeAppearance: 'surfacePrimary size24_24 ghost rounded',
   },
   sizeH6: {
     size: 'h6',
+    iconAfterAppearance: 'surfacePrimary size24_24 ghost rounded',
+    iconBeforeAppearance: 'surfacePrimary size24_24 ghost rounded',
   },
 } satisfies HeroTitleAppearance
 

package/src/components/HeroTitle/stories/HeroTitle.stories.tsx

@@ -1,22 +1,30 @@
 import type { Meta, StoryObj } from '@storybook/react'
 
 import { HeroTitle } from '../HeroTitle'
+import type { HeroTitleProps } from '../HeroTitle.interface'
 
-const HeroTitleMeta: Meta<typeof HeroTitle> = {
-  title: 'Atoms / HeroTitle',
+const meta = {
+  title: 'Typography / Hero Title',
   component: HeroTitle,
   args: {
-    appearance: 'sizeH1',
-    text: 'Hero title',
+    appearance: 'sizeH3',
+    textColor: 'surfaceTextPrimary',
+    children: 'Hero Title',
   },
-}
-
-export default HeroTitleMeta
+  parameters: {
+    layout: 'centered',
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/FcCWZlLa17BPr0zh3Wq9DO/ITCase---Molecules?node-id=2555-2128',
+    },
+  },
+} satisfies Meta<typeof HeroTitle>
+export default meta
 
-export const Default: StoryObj<typeof HeroTitle> = {}
+type Story = StoryObj<typeof meta>
 
-export const SizeH3: StoryObj<typeof HeroTitle> = {
-  args: {
-    appearance: 'sizeH3',
+export const Default: Story = {
+  render: (args: HeroTitleProps) => {
+    return <HeroTitle {...args} />
   },
 }

package/src/components/HeroTitle/stories/HeroTitleIcon.stories.tsx

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { icons40 } from '@itcase/icons-default'
+
+import { HeroTitle } from '../HeroTitle'
+import type { HeroTitleProps } from '../HeroTitle.interface'
+
+const meta = {
+  title: 'Typography / Hero Title / Icon',
+  component: HeroTitle,
+  args: {
+    appearance: 'sizeH2',
+    children: 'Hero Title',
+  },
+  parameters: {
+    layout: 'centered',
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/FcCWZlLa17BPr0zh3Wq9DO/ITCase---Molecules?node-id=2555-2128',
+    },
+  },
+} satisfies Meta<typeof HeroTitle>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Before: Story = {
+  args: {
+    iconBefore: icons40.Placeholder.Default,
+    iconBeforeAppearance: 'surfaceSecondary size40_40 ghost rounded',
+  },
+  render: (args: HeroTitleProps) => <HeroTitle {...args} />,
+}
+
+export const After: Story = {
+  args: {
+    iconAfter: icons40.Placeholder.Default,
+    iconAfterAppearance: 'surfaceSecondary size40_40 ghost rounded',
+  },
+  render: (args: HeroTitleProps) => <HeroTitle {...args} />,
+}

package/src/components/HeroTitle/stories/HeroTitleSize.stories.tsx

@@ -0,0 +1,77 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { HeroTitle } from '../HeroTitle'
+import type { HeroTitleProps } from '../HeroTitle.interface'
+
+const meta = {
+  title: 'Typography / Hero Title / Size',
+  component: HeroTitle,
+  args: {
+    textColor: 'surfaceTextPrimary',
+    children: 'Hero Title',
+  },
+  parameters: {
+    layout: 'centered',
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/FcCWZlLa17BPr0zh3Wq9DO/ITCase---Molecules?node-id=2555-2128',
+    },
+  },
+} satisfies Meta<typeof HeroTitle>
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const SizeH1: Story = {
+  args: {
+    appearance: 'sizeH1',
+  },
+  render: (args: HeroTitleProps) => {
+    return <HeroTitle {...args} />
+  },
+}
+
+export const SizeH2: Story = {
+  args: {
+    appearance: 'sizeH2',
+  },
+  render: (args: HeroTitleProps) => {
+    return <HeroTitle {...args} />
+  },
+}
+
+export const SizeH3: Story = {
+  args: {
+    appearance: 'sizeH3',
+  },
+  render: (args: HeroTitleProps) => {
+    return <HeroTitle {...args} />
+  },
+}
+
+export const SizeH4: Story = {
+  args: {
+    appearance: 'sizeH4',
+  },
+  render: (args: HeroTitleProps) => {
+    return <HeroTitle {...args} />
+  },
+}
+
+export const SizeH5: Story = {
+  args: {
+    appearance: 'sizeH5',
+  },
+  render: (args: HeroTitleProps) => {
+    return <HeroTitle {...args} />
+  },
+}
+
+export const SizeH6: Story = {
+  args: {
+    appearance: 'sizeH6',
+  },
+  render: (args: HeroTitleProps) => {
+    return <HeroTitle {...args} />
+  },
+}

package/src/components/Icon/Icon.appearance.ts

@@ -0,0 +1,32 @@
+import { iconAppearanceAccent } from './appearance/iconAccent'
+import { iconAppearanceDanger } from './appearance/iconDanger'
+import { iconAppearanceDisabled } from './appearance/iconDisabled'
+import { iconAppearanceError } from './appearance/iconError'
+import { iconAppearanceExtra } from './appearance/iconExtra'
+import { iconAppearanceInfo } from './appearance/iconInfo'
+import { iconAppearanceShape } from './appearance/iconShape'
+import { iconAppearanceSize } from './appearance/iconSize'
+import { iconAppearanceSpecial } from './appearance/iconSpecial'
+import { iconAppearanceStyle } from './appearance/iconStyle'
+import { iconAppearanceSuccess } from './appearance/iconSuccess'
+import { iconAppearanceSurface } from './appearance/iconSurface'
+import { iconAppearanceWarning } from './appearance/iconWarning'
+import type { IconAppearance } from './Icon.interface'
+
+const iconAppearance = {
+  ...iconAppearanceDisabled,
+  ...iconAppearanceSize,
+  ...iconAppearanceStyle,
+  ...iconAppearanceAccent,
+  ...iconAppearanceShape,
+  ...iconAppearanceDanger,
+  ...iconAppearanceError,
+  ...iconAppearanceInfo,
+  ...iconAppearanceSpecial,
+  ...iconAppearanceExtra,
+  ...iconAppearanceSuccess,
+  ...iconAppearanceSurface,
+  ...iconAppearanceWarning,
+} satisfies IconAppearance
+
+export { iconAppearance }