@itcase/ui-react-native 1.10.85 → 1.10.86

package/src/components/Pressable/Pressable.tsx

@@ -0,0 +1,110 @@
+import React, { useCallback } from 'react'
+import { Pressable as RNPressable } from 'react-native'
+
+import {
+  useAppearanceConfig,
+  useDevicePropsGenerator,
+} from '@itcase/ui-core/hooks'
+
+import { tokens } from '../../styles/tokens'
+import { pressableAppearance } from './Pressable.appearance'
+import type { PressableConfig, PressableProps } from './Pressable.interface'
+import { styles } from './Pressable.styles'
+
+const pressableConfig: PressableConfig = {
+  appearance: {},
+  setAppearance: (newComponent) => {
+    pressableConfig.appearance = newComponent
+  },
+}
+
+pressableConfig.setAppearance(pressableAppearance)
+
+const Pressable = React.forwardRef<
+  React.ElementRef<typeof RNPressable>,
+  PressableProps
+>(function Pressable(props, ref) {
+  const {
+    appearance = 'surfaceSecondary solid rounded',
+    width,
+    fill,
+    fillActive,
+    fillDisabled,
+    borderColor,
+    shape,
+    style,
+    isDisabled,
+    onPress,
+    children,
+  } = props
+
+  const appearanceConfig = useAppearanceConfig(
+    appearance,
+    pressableConfig,
+    isDisabled,
+  )
+  const propsGenerator = useDevicePropsGenerator(props, appearanceConfig)
+
+  const getWrapperStyles = useCallback(
+    (params: { pressed: boolean }) => {
+      const { pressed } = params
+
+      const borderColorKey = borderColor || propsGenerator.borderColor
+      const shapeKey = shape || propsGenerator.shape
+      const widthKey = width || propsGenerator.width
+
+      let fillStyle
+
+      if (isDisabled) {
+        const fillKey =
+          fillDisabled ||
+          propsGenerator.fillDisabled ||
+          fill ||
+          propsGenerator.fill
+        fillStyle = fillKey && fillKey !== 'none' && tokens[`fill_${fillKey}`]
+      } else if (pressed) {
+        const fillKey =
+          fillActive || propsGenerator.fillActive || fill || propsGenerator.fill
+        fillStyle = fillKey && fillKey !== 'none' && tokens[`fill_${fillKey}`]
+      } else {
+        const fillKey = fill || propsGenerator.fill
+        fillStyle = fillKey && fillKey !== 'none' && tokens[`fill_${fillKey}`]
+      }
+
+      return [
+        styles.pressable,
+        fillStyle,
+        borderColorKey &&
+          borderColorKey !== 'none' &&
+          tokens[`border_color_${borderColorKey}`],
+        shapeKey && tokens[`shape_${shapeKey}`],
+        widthKey && tokens[`width_${widthKey}`],
+        style && style,
+      ]
+    },
+    [
+      borderColor,
+      fill,
+      fillActive,
+      fillDisabled,
+      isDisabled,
+      propsGenerator,
+      shape,
+      style,
+      width,
+    ],
+  )
+
+  return (
+    <RNPressable
+      ref={ref}
+      disabled={isDisabled}
+      style={getWrapperStyles}
+      onPress={onPress}
+    >
+      {children}
+    </RNPressable>
+  )
+})
+
+export { Pressable, pressableConfig }

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

@@ -0,0 +1,18 @@
+import type { PressableAppearance } from '../Pressable.interface'
+
+const pressableAppearanceAccent = {
+  accentPrimary: {
+    fill: 'accentPrimary',
+    fillActive: 'accentActivePrimary',
+    fillDisabled: 'surfaceDisabled',
+    borderColor: 'accentBorderPrimary',
+  },
+  accentSecondary: {
+    fill: 'accentPrimary',
+    fillActive: 'accentActivePrimary',
+    fillDisabled: 'surfaceDisabled',
+    borderColor: 'accentBorderPrimary',
+  },
+} satisfies PressableAppearance
+
+export { pressableAppearanceAccent }

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

@@ -0,0 +1,12 @@
+import type { PressableAppearance } from '../Pressable.interface'
+
+const pressableAppearanceDanger = {
+  dangerPrimary: {
+    fill: 'dangerPrimary',
+    fillActive: 'dangerActivePrimary',
+    fillDisabled: 'surfaceDisabled',
+    borderColor: 'dangerBorderSecondary',
+  },
+} satisfies PressableAppearance
+
+export { pressableAppearanceDanger }

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

@@ -0,0 +1,12 @@
+import type { PressableAppearance } from '../Pressable.interface'
+
+const pressableAppearanceDisabled = {
+  disabledPrimary: {
+    fill: 'surfaceDisabled',
+    fillActive: 'surfaceDisabled',
+    fillDisabled: 'surfaceDisabled',
+    borderColor: 'surfaceBorderPrimary',
+  },
+} satisfies PressableAppearance
+
+export { pressableAppearanceDisabled }

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

@@ -0,0 +1,12 @@
+import type { PressableAppearance } from '../Pressable.interface'
+
+const pressableAppearanceError = {
+  errorPrimary: {
+    fill: 'errorPrimary',
+    fillActive: 'errorActivePrimary',
+    fillDisabled: 'surfaceDisabled',
+    borderColor: 'errorBorderPrimary',
+  },
+} satisfies PressableAppearance
+
+export { pressableAppearanceError }

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

@@ -0,0 +1,12 @@
+import type { PressableAppearance } from '../Pressable.interface'
+
+const pressableAppearanceExtra = {
+  extraPrimary: {
+    fill: 'extraPrimary',
+    fillActive: 'extraActivePrimary',
+    fillDisabled: 'surfaceDisabled',
+    borderColor: 'extraBorderQuaternary',
+  },
+} satisfies PressableAppearance
+
+export { pressableAppearanceExtra }

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

@@ -0,0 +1,11 @@
+import type { PressableAppearance } from '../Pressable.interface'
+
+const pressableAppearanceInfo = {
+  infoPrimary: {
+    fill: 'infoPrimary',
+    fillDisabled: 'surfaceDisabled',
+    borderColor: 'infoBorderPrimary',
+  },
+} satisfies PressableAppearance
+
+export { pressableAppearanceInfo }

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

@@ -0,0 +1,24 @@
+import type { PressableAppearanceShape } from '../Pressable.interface'
+
+const pressableAppearanceShape = {
+  circular: {
+    shape: 'circular',
+  },
+  rounded: {
+    shape: 'rounded',
+  },
+  roundedXL: {
+    shape: 'roundedXL',
+  },
+  roundedL: {
+    shape: 'roundedL',
+  },
+  roundedM: {
+    shape: 'roundedM',
+  },
+  roundedS: {
+    shape: 'roundedS',
+  },
+} satisfies PressableAppearanceShape
+
+export { pressableAppearanceShape }

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

@@ -0,0 +1,12 @@
+import type { PressableAppearance } from '../Pressable.interface'
+
+const pressableAppearanceSpecial = {
+  specialPrimary: {
+    fill: 'specialPrimary',
+    fillActive: 'specialActivePrimary',
+    fillDisabled: 'surfaceDisabled',
+    borderColor: 'specialBorderQuaternary',
+  },
+} satisfies PressableAppearance
+
+export { pressableAppearanceSpecial }

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

@@ -0,0 +1,17 @@
+import type { PressableAppearanceStyle } from '../Pressable.interface'
+
+const pressableAppearanceStyle = {
+  solid: {
+    borderColor: 'none',
+  },
+  outlined: {
+    fill: 'none',
+  },
+  full: {},
+  ghost: {
+    fill: 'none',
+    borderColor: 'none',
+  },
+} satisfies PressableAppearanceStyle
+
+export { pressableAppearanceStyle }

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

@@ -0,0 +1,12 @@
+import type { PressableAppearance } from '../Pressable.interface'
+
+const pressableAppearanceSuccess = {
+  successPrimary: {
+    fill: 'successPrimary',
+    fillActive: 'successActivePrimary',
+    fillDisabled: 'surfaceDisabled',
+    borderColor: 'successBorderPrimary',
+  },
+} satisfies PressableAppearance
+
+export { pressableAppearanceSuccess }

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

@@ -0,0 +1,27 @@
+import type { PressableAppearance } from '../Pressable.interface'
+
+const pressableAppearanceSurface = {
+  surfacePrimary: {
+    fill: 'surfacePrimary',
+    fillActive: 'surfaceActivePrimary',
+    fillDisabled: 'surfaceDisabled',
+    borderColor: 'surfaceBorderPrimary',
+  },
+  surfaceQuaternary: {
+    fill: 'surfaceQuaternary',
+    fillActive: 'surfaceActivePrimary',
+    fillDisabled: 'surfaceDisabled',
+  },
+  surfaceSecondary: {
+    fill: 'surfaceSecondary',
+    fillActive: 'surfaceActivePrimary',
+    fillDisabled: 'surfaceDisabled',
+  },
+  surfaceTertiary: {
+    fill: 'surfaceTertiary',
+    fillActive: 'surfaceActivePrimary',
+    fillDisabled: 'surfaceDisabled',
+  },
+} satisfies PressableAppearance
+
+export { pressableAppearanceSurface }

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

@@ -0,0 +1,12 @@
+import type { PressableAppearance } from '../Pressable.interface'
+
+const pressableAppearanceWarning = {
+  warningPrimary: {
+    fill: 'warningPrimary',
+    fillActive: 'warningActivePrimary',
+    fillDisabled: 'surfaceDisabled',
+    borderColor: 'warningBorderSecondary',
+  },
+} satisfies PressableAppearance
+
+export { pressableAppearanceWarning }

package/src/components/Pressable/index.ts

@@ -0,0 +1,22 @@
+import { Pressable, pressableConfig } from './Pressable'
+import { pressableAppearance } from './Pressable.appearance'
+import type {
+  PressableAppearance,
+  PressableAppearanceKey,
+  PressableAppearanceProps,
+  PressableAppearanceShape,
+  PressableAppearanceStyle,
+  PressableConfig,
+  PressableProps,
+} from './Pressable.interface'
+
+export { Pressable, pressableAppearance, pressableConfig }
+export type {
+  PressableAppearance,
+  PressableAppearanceKey,
+  PressableAppearanceProps,
+  PressableAppearanceShape,
+  PressableAppearanceStyle,
+  PressableConfig,
+  PressableProps,
+}

package/src/components/Pressable/stories/PressableDefault.stories.tsx

@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { createAppearanceTierStories } from '../../../storybook'
+import { Text } from '../../Text'
+import { Pressable } from '../Pressable'
+import type { PressableProps } from '../Pressable.interface'
+import {
+  PRESSABLE_APPEARANCE_GROUPS,
+  pressableGallery,
+  pressableStoryParameters,
+} from './PressableStories.config'
+
+const meta = {
+  title: 'Atoms / Pressable / Default',
+  component: Pressable,
+  parameters: pressableStoryParameters,
+} satisfies Meta<typeof Pressable>
+
+export default meta
+
+const stories = createAppearanceTierStories({
+  renderItem: ({ appearance }) => (
+    <Pressable
+      appearance={appearance as PressableProps['appearance']}
+      onPress={() => undefined}
+    >
+      <Text>Press</Text>
+    </Pressable>
+  ),
+  appearanceGroups: PRESSABLE_APPEARANCE_GROUPS,
+  appearanceShape: 'rounded',
+  appearanceStyle: 'solid',
+  tiersByAppearance: pressableGallery.tiersByAppearance,
+})
+
+export const Accent = stories.Accent
+export const Special = stories.Special
+export const Extra = stories.Extra
+export const Surface = stories.Surface
+export const Error = stories.Error
+export const Success = stories.Success
+export const Warning = stories.Warning
+export const Danger = stories.Danger
+export const Info = stories.Info
+export const Disabled = stories.Disabled

package/src/components/Pressable/stories/PressableDemo.stories.tsx

@@ -0,0 +1,66 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { createAppearanceOptions } from '../../../storybook'
+import { Text } from '../../Text'
+import { pressableAppearanceShape } from '../appearance/pressableShape'
+import { pressableAppearanceStyle } from '../appearance/pressableStyle'
+import { Pressable } from '../Pressable'
+import { pressableAppearance } from '../Pressable.appearance'
+import type { PressableProps, PressableStoryArgs } from '../Pressable.interface'
+import { pressableStoryParameters } from './PressableStories.config'
+
+const { getAppearanceOptions } = createAppearanceOptions(pressableAppearance, {
+  appearanceShape: pressableAppearanceShape,
+  appearanceStyle: pressableAppearanceStyle,
+})
+
+const meta = {
+  title: 'Atoms / Pressable',
+  component: Pressable,
+  args: {
+    appearanceShape: 'rounded',
+    appearanceStyle: 'solid',
+    appearanceType: 'surfaceSecondary',
+  },
+  parameters: {
+    ...pressableStoryParameters,
+    controls: {
+      include: [
+        'appearanceType',
+        'appearanceShape',
+        'appearanceStyle',
+        'isDisabled',
+      ],
+    },
+  },
+  argTypes: {
+    appearanceShape: {
+      control: 'radio',
+      options: getAppearanceOptions('appearanceShape'),
+    },
+    appearanceStyle: {
+      control: 'radio',
+      options: getAppearanceOptions('appearanceStyle'),
+    },
+    appearanceType: {
+      control: 'select',
+      options: getAppearanceOptions('appearance'),
+    },
+  },
+} satisfies Meta<PressableStoryArgs>
+
+export default meta
+
+export const Demo: StoryObj<PressableStoryArgs> = {
+  render: ({ appearanceShape, appearanceStyle, appearanceType, ...rest }) => (
+    <Pressable
+      {...rest}
+      appearance={
+        `${appearanceType} ${appearanceStyle} ${appearanceShape}` as PressableProps['appearance']
+      }
+      onPress={() => undefined}
+    >
+      <Text>Press me</Text>
+    </Pressable>
+  ),
+}

package/src/components/Pressable/stories/PressableGallery.stories.tsx

@@ -0,0 +1,68 @@
+/* eslint-disable perfectionist/sort-objects */
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { icons24 } from '@itcase/icons-default'
+
+import { Icon } from '../../Icon'
+import { Text } from '../../Text'
+import { Pressable } from '../Pressable'
+import type { PressableGalleryStory } from '../Pressable.interface'
+import {
+  pressableGallery,
+  pressableStoryParameters,
+} from './PressableStories.config'
+
+const meta = {
+  title: 'Atoms / Pressable',
+  args: {
+    appearance: 'surface',
+    tier: 'Primary',
+    style: 'solid',
+    shape: 'rounded',
+    isDisabled: false,
+  },
+  parameters: pressableStoryParameters,
+  argTypes: {
+    appearance: pressableGallery.argTypes.appearance,
+    tier: pressableGallery.argTypes.tier,
+    style: pressableGallery.argTypes.style,
+    shape: pressableGallery.argTypes.shape,
+  },
+} satisfies Meta<PressableGalleryStory>
+
+export default meta
+
+type Story = StoryObj<PressableGalleryStory>
+
+const renderPressableGallery = (args: PressableGalleryStory) =>
+  pressableGallery.render(args, ({ appearance, args: storyArgs }) => (
+    <Pressable
+      appearance={appearance}
+      isDisabled={storyArgs.isDisabled}
+      onPress={() => undefined}
+    >
+      <Text>Press</Text>
+    </Pressable>
+  ))
+
+export const Label: Story = {
+  name: 'Label',
+  render: (args) => renderPressableGallery(args),
+}
+
+export const WithIcon: Story = {
+  name: 'With Icon',
+  render: (args) =>
+    pressableGallery.render(args, ({ appearance, args: storyArgs }) => (
+      <Pressable
+        appearance={appearance}
+        isDisabled={storyArgs.isDisabled}
+        onPress={() => undefined}
+      >
+        <Icon
+          appearance="surfacePrimary size24_24 ghost"
+          SVGIcon={icons24.Placeholder.Default}
+        />
+      </Pressable>
+    )),
+}

package/src/components/Pressable/stories/PressableShape.stories.tsx

@@ -0,0 +1,57 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Group } from '../../Group'
+import { Text } from '../../Text'
+import { Pressable } from '../Pressable'
+import { pressableStoryParameters } from './PressableStories.config'
+
+const meta = {
+  title: 'Atoms / Pressable / Shape',
+  component: Pressable,
+  parameters: pressableStoryParameters,
+} satisfies Meta<typeof Pressable>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Rounded: Story = {
+  args: {
+    appearance: 'surfaceSecondary solid rounded',
+  },
+  render: (args) => (
+    <Pressable {...args} onPress={() => undefined}>
+      <Text>Rounded</Text>
+    </Pressable>
+  ),
+}
+
+export const Circular: Story = {
+  args: {
+    appearance: 'surfaceSecondary solid circular',
+  },
+  render: (args) => (
+    <Pressable {...args} onPress={() => undefined}>
+      <Text>Circular</Text>
+    </Pressable>
+  ),
+}
+
+export const All: Story = {
+  render: () => (
+    <Group direction="horizontal" alignItems="center" gap={16}>
+      <Pressable
+        appearance="surfaceSecondary solid rounded"
+        onPress={() => undefined}
+      >
+        <Text>Rounded</Text>
+      </Pressable>
+      <Pressable
+        appearance="surfaceSecondary solid circular"
+        onPress={() => undefined}
+      >
+        <Text>O</Text>
+      </Pressable>
+    </Group>
+  ),
+}

package/src/components/Pressable/stories/PressableStories.config.ts

@@ -0,0 +1,62 @@
+/* eslint-disable perfectionist/sort-objects */
+import { createComponentGallery } from '../../../storybook'
+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 { PressableAppearanceKey } from '../Pressable.interface'
+
+const PRESSABLE_APPEARANCE_GROUPS = [
+  'accent',
+  'special',
+  'extra',
+  'surface',
+  'error',
+  'success',
+  'warning',
+  'danger',
+  'info',
+  'disabled',
+] as const
+
+const pressableStoryParameters = {
+  layout: 'centered' as const,
+}
+
+/** Pressable has no size axis — gallery uses a single column. */
+const pressableAppearanceSize = {
+  default: {},
+}
+
+const pressableGallery = createComponentGallery<PressableAppearanceKey>({
+  size: pressableAppearanceSize,
+  appearanceGroups: {
+    accent: pressableAppearanceAccent,
+    danger: pressableAppearanceDanger,
+    disabled: pressableAppearanceDisabled,
+    error: pressableAppearanceError,
+    extra: pressableAppearanceExtra,
+    info: pressableAppearanceInfo,
+    special: pressableAppearanceSpecial,
+    success: pressableAppearanceSuccess,
+    surface: pressableAppearanceSurface,
+    warning: pressableAppearanceWarning,
+  },
+  shape: pressableAppearanceShape,
+  style: pressableAppearanceStyle,
+})
+
+export {
+  PRESSABLE_APPEARANCE_GROUPS,
+  pressableAppearanceSize,
+  pressableGallery,
+  pressableStoryParameters,
+}