@itcase/ui-react-native 1.10.85 → 1.10.86

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

@@ -0,0 +1,62 @@
+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 / Style',
+  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 Solid: Story = {
+  args: {
+    appearance: 'surfacePrimary sizeXXL solid rounded',
+  },
+  render: (args: MenuItemProps) => {
+    return <MenuItem {...args} />
+  },
+}
+
+export const Outlined: Story = {
+  args: {
+    appearance: 'surfacePrimary sizeXXL outlined rounded',
+  },
+  render: (args: MenuItemProps) => {
+    return <MenuItem {...args} />
+  },
+}
+
+export const Full: Story = {
+  args: {
+    appearance: 'surfacePrimary sizeXXL full rounded',
+  },
+  render: (args: MenuItemProps) => {
+    return <MenuItem {...args} />
+  },
+}
+
+export const Ghost: Story = {
+  args: {
+    appearance: 'surfacePrimary sizeXXL ghost rounded',
+  },
+  render: (args: MenuItemProps) => {
+    return <MenuItem {...args} />
+  },
+}

package/src/components/Modal/stories/ModalDemo.stories.tsx

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Modal } from '../Modal'
+import type { ModalProps } from '../Modal.interface'
+
+const meta = {
+  title: 'Molecules / Modal',
+  component: Modal,
+  args: {
+    fill: 'surfacePrimary',
+    title: 'Title 123',
+    desc: 'Modal content',
+    btnLabel: 'OK',
+  },
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/FcCWZlLa17BPr0zh3Wq9DO/ITCase---Molecules?node-id=33-29851',
+    },
+  },
+} satisfies Meta<typeof Modal>
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Content: Story = {
+  render: (args: ModalProps) => {
+    return <Modal {...args} />
+  },
+}

package/src/components/Overlay/Overlay.tsx

@@ -1,6 +1,10 @@
-import { useMemo } from 'react'
 import { Pressable } from 'react-native'
 
+import {
+  useAppearanceConfig,
+  useDevicePropsGenerator,
+} from '@itcase/ui-core/hooks'
+
 import { tokens } from '../../styles/tokens'
 import { overlayAppearance } from './Overlay.appearance'
 import type { OverlayConfig, OverlayProps } from './Overlay.interface'
@@ -16,27 +20,22 @@ const overlayConfig: OverlayConfig = {
 overlayConfig.setAppearance(overlayAppearance)
 
 function Overlay(props: OverlayProps) {
-  const { appearance, fill, opacity, style, isOverlay = true, onPress } = props
-
-  const appearanceConfig = useMemo(() => {
-    if (!appearance || !overlayConfig.appearance) {
-      return undefined
-    }
+  const { appearance, opacity, style, isOverlay = true, onPress } = props
 
-    return overlayConfig.appearance[appearance]
-  }, [appearance])
+  const appearanceConfig = useAppearanceConfig(appearance, overlayConfig)
+  const propsGenerator = useDevicePropsGenerator(props, appearanceConfig)
 
-  const fillKey = fill || appearanceConfig?.fill
-  const opacityValue = opacity ?? appearanceConfig?.opacity
+  const { fill, opacity: appearanceOpacity } = propsGenerator
+  const opacityValue = opacity ?? appearanceOpacity
 
   return (
     <Pressable
       style={[
         styles.overlay,
         !isOverlay && styles.overlay_hidden,
-        fillKey && tokens[`fill_${fillKey}`],
+        fill && tokens[`fill_${fill}`],
         opacityValue != null && { opacity: opacityValue },
-        style && style,
+        style,
       ]}
       onPress={onPress}
     />

package/src/components/Overlay/stories/Overlay.stories.tsx

@@ -1,24 +1,40 @@
-import { View } from 'react-native'
-
 import type { Meta, StoryObj } from '@storybook/react'
 
 import { Overlay } from '../Overlay'
+import type { OverlayProps } from '../Overlay.interface'
 
-const OverlayMeta: Meta<typeof Overlay> = {
+const meta = {
   title: 'Atoms / Overlay',
   component: Overlay,
   args: {
-    appearance: 'blackout',
     isOverlay: true,
   },
-}
+  parameters: {
+    layout: 'fullscreen',
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/HmHn0BShJPXHU8SmuIP71M/ITCase---Atoms?node-id=31-192649',
+    },
+  },
+} satisfies Meta<typeof Overlay>
+export default meta
 
-export default OverlayMeta
+type Story = StoryObj<typeof meta>
 
-export const Blackout: StoryObj<typeof Overlay> = {
-  render: (args) => (
-    <View style={{ width: 200, height: 120 }}>
-      <Overlay {...args} />
-    </View>
-  ),
+export const Blur: Story = {
+  args: {
+    appearance: 'blur',
+  },
+  render: (args: OverlayProps) => {
+    return <Overlay {...args} />
+  },
+}
+
+export const Blackout: Story = {
+  args: {
+    appearance: 'blackout',
+  },
+  render: (args: OverlayProps) => {
+    return <Overlay {...args} />
+  },
 }

package/src/components/Pagination/Pagination.interface.ts

@@ -3,6 +3,7 @@ import type { StyleProp, ViewStyle } from 'react-native'
 import type {
   AppearanceConfig,
   AppearanceKeysDefault,
+  CompositeAppearanceKeys,
   FillActiveProps,
   FillProps,
   TextColorProps,
@@ -20,7 +21,7 @@ interface PaginationAppearanceProps {
   textSize?: TextSizeProps
 }
 
-type PaginationAppearanceKey = AppearanceKeysDefault
+type PaginationAppearanceKey = CompositeAppearanceKeys
 type PaginationConfig = AppearanceConfig<
   AppearanceKeysDefault,
   PaginationAppearanceProps

package/src/components/Pagination/Pagination.tsx

@@ -1,6 +1,10 @@
-import { useMemo } from 'react'
 import { View } from 'react-native'
 
+import {
+  useAppearanceConfig,
+  useDevicePropsGenerator,
+} from '@itcase/ui-core/hooks'
+
 import { tokens } from '../../styles/tokens'
 import { Button } from '../Button'
 import { Text } from '../Text'
@@ -8,7 +12,6 @@ import { paginationAppearance } from './Pagination.appearance'
 import type { PaginationConfig, PaginationProps } from './Pagination.interface'
 import { styles } from './Pagination.styles'
 
-const DEFAULT_PAGINATION_APPEARANCE = 'surfacePrimary'
 const DEFAULT_PAGINATION_SIZE = 'm'
 
 const paginationConfig: PaginationConfig = {
@@ -22,13 +25,7 @@ paginationConfig.setAppearance(paginationAppearance)
 
 function Pagination(props: PaginationProps) {
   const {
-    appearance = DEFAULT_PAGINATION_APPEARANCE,
-    size,
-    fill,
-    fillActive,
-    textColor,
-    textColorActive,
-    textSize,
+    appearance = 'surfacePrimary sizeM solid rounded',
     page,
     pageCount,
     style,
@@ -36,31 +33,23 @@ function Pagination(props: PaginationProps) {
     onPageChange,
   } = props
 
-  const appearanceConfig = useMemo(() => {
-    if (!appearance || !paginationConfig.appearance) {
-      return undefined
-    }
+  const appearanceConfig = useAppearanceConfig(
+    appearance,
+    paginationConfig,
+    isDisabled,
+  )
+  const propsGenerator = useDevicePropsGenerator(props, appearanceConfig)
 
-    return paginationConfig.appearance[appearance]
-  }, [appearance])
+  const { size, fill, fillActive, textColor, textColorActive, textSize } =
+    propsGenerator
 
-  const sizeKey = size || appearanceConfig?.size || DEFAULT_PAGINATION_SIZE
-  const fillKey = fill || appearanceConfig?.fill
-  const fillActiveKey = fillActive || appearanceConfig?.fillActive
-  const textColorKey = textColor || appearanceConfig?.textColor
-  const textColorActiveKey =
-    textColorActive || appearanceConfig?.textColorActive
-  const textSizeKey = textSize || appearanceConfig?.textSize
+  const sizeKey = size || DEFAULT_PAGINATION_SIZE
   const isPrevDisabled = isDisabled || page <= 1
   const isNextDisabled = isDisabled || page >= pageCount
 
   return (
     <View
-      style={[
-        styles.pagination,
-        styles[`pagination_size_${sizeKey}`],
-        style && style,
-      ]}
+      style={[styles.pagination, styles[`pagination_size_${sizeKey}`], style]}
     >
       <Button
         appearance="surfaceSecondary"
@@ -75,20 +64,20 @@ function Pagination(props: PaginationProps) {
         style={[
           styles.pagination__current,
           styles[`pagination_size_${sizeKey}__current`],
-          fillActiveKey
-            ? tokens[`fill_${fillActiveKey}`]
-            : fillKey && tokens[`fill_${fillKey}`],
+          fillActive
+            ? tokens[`fill_${fillActive}`]
+            : fill && tokens[`fill_${fill}`],
         ]}
       >
         <Text
-          size={textSizeKey}
-          textColor={textColorActiveKey || textColorKey}
+          size={textSize}
+          textColor={textColorActive || textColor}
           weight="600"
         >
           {page}
         </Text>
       </View>
-      <Text size={textSizeKey} textColor={textColorKey}>
+      <Text size={textSize} textColor={textColor}>
         / {pageCount}
       </Text>
       <Button

package/src/components/Pagination/stories/PaginationDefault.stories.tsx

@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Pagination } from '../Pagination'
+import type { PaginationProps } from '../Pagination.interface'
+
+const meta = {
+  title: 'Molecules / Pagination / Default',
+  component: Pagination,
+  args: {
+    page: 1,
+    pageCount: 4,
+    onPageChange: () => {},
+  },
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/FcCWZlLa17BPr0zh3Wq9DO/ITCase---Molecules?node-id=33-43507',
+    },
+  },
+} satisfies Meta<typeof Pagination>
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const AccentPrimary: Story = {
+  args: {
+    appearance: 'accentPrimary sizeM solid rounded',
+  },
+  render: (args: PaginationProps) => {
+    return <Pagination {...args} />
+  },
+}
+
+export const SurfacePrimary: Story = {
+  args: {
+    appearance: 'surfacePrimary sizeM solid rounded',
+  },
+  render: (args: PaginationProps) => {
+    return <Pagination {...args} />
+  },
+}

package/src/components/Pagination/stories/PaginationDot.stories.tsx

@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Pagination } from '../Pagination'
+import type { PaginationProps } from '../Pagination.interface'
+
+const meta = {
+  title: 'Molecules / Pagination / Dot',
+  component: Pagination,
+  args: {
+    page: 1,
+    pageCount: 4,
+    onPageChange: () => {},
+  },
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/FcCWZlLa17BPr0zh3Wq9DO/ITCase---Molecules?node-id=33-43507',
+    },
+  },
+} satisfies Meta<typeof Pagination>
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const AccentPrimary: Story = {
+  args: {
+    appearance: 'accentPrimary sizeM solid rounded',
+  },
+  render: (args: PaginationProps) => {
+    return <Pagination {...args} />
+  },
+}
+
+export const SurfacePrimary: Story = {
+  args: {
+    appearance: 'surfacePrimary sizeM solid rounded',
+  },
+  render: (args: PaginationProps) => {
+    return <Pagination {...args} />
+  },
+}

package/src/components/Pagination/stories/PaginationNumber.stories.tsx

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Pagination } from '../Pagination'
+import type { PaginationProps } from '../Pagination.interface'
+
+const meta = {
+  title: 'Molecules / Pagination / Number',
+  component: Pagination,
+  args: {
+    page: 1,
+    pageCount: 4,
+    onPageChange: () => {},
+  },
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/FcCWZlLa17BPr0zh3Wq9DO/ITCase---Molecules?node-id=33-43507',
+    },
+  },
+} satisfies Meta<typeof Pagination>
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    appearance: 'surfacePrimary sizeM solid rounded',
+  },
+  render: (args: PaginationProps) => {
+    return <Pagination {...args} />
+  },
+}

package/src/components/Pagination/stories/PaginationSize.stories.tsx

@@ -0,0 +1,59 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Pagination } from '../Pagination'
+import type { PaginationProps } from '../Pagination.interface'
+
+const meta = {
+  title: 'Molecules / Pagination / Size',
+  component: Pagination,
+  args: {
+    page: 1,
+    pageCount: 4,
+    onPageChange: () => {},
+  },
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/FcCWZlLa17BPr0zh3Wq9DO/ITCase---Molecules?node-id=33-43507',
+    },
+  },
+} satisfies Meta<typeof Pagination>
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const SizeL: Story = {
+  args: {
+    appearance: 'surfacePrimary sizeL solid rounded',
+  },
+  render: (args: PaginationProps) => {
+    return <Pagination {...args} />
+  },
+}
+
+export const SizeM: Story = {
+  args: {
+    appearance: 'surfacePrimary sizeM solid rounded',
+  },
+  render: (args: PaginationProps) => {
+    return <Pagination {...args} />
+  },
+}
+
+export const SizeS: Story = {
+  args: {
+    appearance: 'surfacePrimary sizeS solid rounded',
+  },
+  render: (args: PaginationProps) => {
+    return <Pagination {...args} />
+  },
+}
+
+export const SizeXS: Story = {
+  args: {
+    appearance: 'surfacePrimary sizeXS solid rounded',
+  },
+  render: (args: PaginationProps) => {
+    return <Pagination {...args} />
+  },
+}

package/src/components/Pressable/Pressable.appearance.ts

@@ -0,0 +1,30 @@
+import { pressableAppearanceAccent } from './appearance/pressableAccent'
+import { pressableAppearanceDanger } from './appearance/pressableDanger'
+import { pressableAppearanceDisabled } from './appearance/pressableDisabled'
+import { pressableAppearanceError } from './appearance/pressableError'
+import { pressableAppearanceExtra } from './appearance/pressableExtra'
+import { pressableAppearanceInfo } from './appearance/pressableInfo'
+import { pressableAppearanceShape } from './appearance/pressableShape'
+import { pressableAppearanceSpecial } from './appearance/pressableSpecial'
+import { pressableAppearanceStyle } from './appearance/pressableStyle'
+import { pressableAppearanceSuccess } from './appearance/pressableSuccess'
+import { pressableAppearanceSurface } from './appearance/pressableSurface'
+import { pressableAppearanceWarning } from './appearance/pressableWarning'
+import type { PressableAppearance } from './Pressable.interface'
+
+const pressableAppearance = {
+  ...pressableAppearanceDisabled,
+  ...pressableAppearanceStyle,
+  ...pressableAppearanceAccent,
+  ...pressableAppearanceShape,
+  ...pressableAppearanceDanger,
+  ...pressableAppearanceError,
+  ...pressableAppearanceInfo,
+  ...pressableAppearanceSpecial,
+  ...pressableAppearanceExtra,
+  ...pressableAppearanceSuccess,
+  ...pressableAppearanceSurface,
+  ...pressableAppearanceWarning,
+} satisfies PressableAppearance
+
+export { pressableAppearance }

package/src/components/Pressable/Pressable.interface.ts

@@ -0,0 +1,75 @@
+import type { ReactNode } from 'react'
+import type { GestureResponderEvent, StyleProp, ViewStyle } from 'react-native'
+
+import type {
+  AppearanceConfig,
+  AppearanceKeysDefault,
+  AppearanceRecord,
+  AppearanceShapeKey,
+  AppearanceStyleKey,
+  BorderColorProps,
+  CompositeAppearanceKeys,
+  FillActiveProps,
+  FillProps,
+  ShapeProps,
+  WidthProps,
+} from '@itcase/types-ui'
+
+interface PressableAppearanceProps {
+  borderColor?: BorderColorProps
+  fill?: FillProps
+  fillActive?: FillActiveProps
+  fillDisabled?: FillProps
+  shape?: ShapeProps
+  width?: WidthProps
+}
+
+type PressableConfig = AppearanceConfig<
+  AppearanceKeysDefault,
+  PressableAppearanceProps
+>
+type PressableAppearance = PressableConfig['appearance']
+type PressableAppearanceStyle = AppearanceRecord<
+  AppearanceStyleKey,
+  PressableAppearanceProps,
+  'borderColor' | 'fill'
+>
+type PressableAppearanceShape = Partial<
+  Record<AppearanceShapeKey, Partial<Pick<PressableAppearanceProps, 'shape'>>>
+>
+
+interface PressableProps extends PressableAppearanceProps {
+  isDisabled?: boolean
+  onPress?: (event: GestureResponderEvent) => void
+  appearance?: string | AppearanceKeysDefault | CompositeAppearanceKeys
+  children?: ReactNode
+  style?: StyleProp<ViewStyle>
+}
+
+type PressableAppearanceKey = NonNullable<PressableProps['appearance']>
+
+type PressableGalleryStory = {
+  appearance: string
+  isDisabled?: boolean
+  shape: string
+  style: string
+  tier: string
+}
+
+type PressableStoryArgs = Omit<PressableProps, 'appearance'> & {
+  appearanceShape: string
+  appearanceStyle: string
+  appearanceType: string
+}
+
+export type {
+  PressableAppearance,
+  PressableAppearanceKey,
+  PressableAppearanceProps,
+  PressableAppearanceShape,
+  PressableAppearanceStyle,
+  PressableConfig,
+  PressableGalleryStory,
+  PressableProps,
+  PressableStoryArgs,
+}

package/src/components/Pressable/Pressable.styles.ts

@@ -0,0 +1,7 @@
+import { pressableStyles as pressableBaseStyles } from './styles/pressable'
+
+const styles = {
+  ...pressableBaseStyles,
+}
+
+export { styles }