@itcase/ui-react-native 1.10.85 → 1.10.86

package/src/components/Search/styles/searchSize.ts

@@ -0,0 +1,48 @@
+import { StyleSheet } from 'react-native'
+
+import { getVariantsPropsList } from '../../../utils'
+
+const searchSizeStyles = StyleSheet.create({
+  search_size_l: {
+    minHeight: 48,
+    paddingHorizontal: 12,
+    gap: 4,
+  },
+  search_size_m: {
+    minHeight: 40,
+    paddingHorizontal: 8,
+    gap: 4,
+  },
+  search_size_s: {
+    minHeight: 28,
+    paddingHorizontal: 8,
+    gap: 4,
+  },
+  search_size_xl: {
+    minHeight: 56,
+    paddingHorizontal: 12,
+    gap: 4,
+  },
+  search_size_xs: {
+    minHeight: 24,
+    paddingHorizontal: 8,
+    gap: 4,
+  },
+  search_size_xxl: {
+    minHeight: 62,
+    paddingHorizontal: 12,
+    gap: 4,
+  },
+  search_size_xxs: {
+    minHeight: 20,
+    paddingHorizontal: 8,
+    gap: 4,
+  },
+})
+
+const searchSizeList = getVariantsPropsList(searchSizeStyles, 'search_size_')
+
+type searchSizePropsType = (typeof searchSizeList)[number]
+
+export { searchSizeList, searchSizeStyles }
+export type { searchSizePropsType }

package/src/components/Segmented/Segmented.interface.ts

@@ -26,6 +26,8 @@ interface SegmentedAppearanceProps {
   borderColor?: BorderColorProps
   fill?: FillProps
   fillActive?: FillActiveProps
+  iconAppearance?: string
+  iconAppearanceActive?: string
   iconFill?: IconProps['iconFill']
   iconFillActive?: IconProps['iconFill']
   iconFillDisabled?: IconProps['iconFill']
@@ -86,6 +88,13 @@ interface SegmentedProps extends SegmentedAppearanceProps {
   value?: string
 }
 
+type SegmentedStoryArgs = Omit<SegmentedProps, 'appearance'> & {
+  appearanceShape: string
+  appearanceSize: string
+  appearanceStyle: string
+  appearanceType: string
+}
+
 type SegmentedAppearanceKey = NonNullable<SegmentedProps['appearance']>
 
 export type {
@@ -98,4 +107,5 @@ export type {
   SegmentedAppearanceStyle,
   SegmentedConfig,
   SegmentedProps,
+  SegmentedStoryArgs,
 }

package/src/components/Segmented/Segmented.tsx

@@ -17,8 +17,6 @@ import type {
 } from './Segmented.interface'
 import { styles } from './Segmented.styles'
 
-const DEFAULT_SEGMENTED_APPEARANCE = 'defaultPrimary sizeM solid rounded'
-
 const segmentedConfig: SegmentedConfig = {
   appearance: {},
   setAppearance: (newComponent) => {
@@ -46,7 +44,7 @@ function getInitialSegment(props: SegmentedProps) {
 
 function Segmented(props: SegmentedProps) {
   const {
-    appearance = DEFAULT_SEGMENTED_APPEARANCE,
+    appearance = 'defaultPrimary sizeM solid rounded',
     activeSegment,
     segments,
     style,
@@ -81,6 +79,8 @@ function Segmented(props: SegmentedProps) {
     labelTextColor,
     labelTextSize,
     borderColor,
+    iconAppearance,
+    iconAppearanceActive,
     iconFill,
     iconFillActive,
     iconFillDisabled,
@@ -143,7 +143,9 @@ function Segmented(props: SegmentedProps) {
           const iconAfterComponent = isActive
             ? segment.iconAfterActive || segment.iconAfter
             : segment.iconAfter
-
+          const segmentIconAppearance = isActive
+            ? iconAppearanceActive || iconAppearance
+            : iconAppearance
           return (
             <Pressable
               key={segment.value}
@@ -162,6 +164,7 @@ function Segmented(props: SegmentedProps) {
             >
               {iconBeforeComponent && (
                 <Icon
+                  appearance={segmentIconAppearance}
                   size={iconSize}
                   iconFill={iconFill}
                   iconFillActive={iconFillActive}
@@ -185,6 +188,7 @@ function Segmented(props: SegmentedProps) {
               )}
               {iconComponent && (
                 <Icon
+                  appearance={segmentIconAppearance}
                   size={iconSize}
                   iconFill={iconFill}
                   iconFillActive={iconFillActive}
@@ -197,6 +201,7 @@ function Segmented(props: SegmentedProps) {
               )}
               {iconAfterComponent && (
                 <Icon
+                  appearance={segmentIconAppearance}
                   size={iconSize}
                   iconFill={iconFill}
                   iconFillActive={iconFillActive}

package/src/components/Segmented/appearance/segmentedDefault.ts

@@ -7,6 +7,8 @@ const segmentedAppearanceDefault = {
     labelTextActiveColor: 'accentTextPrimary',
     labelTextColor: 'surfaceTextPrimary',
     borderColor: 'surfaceBorderQuaternary',
+    iconAppearance: 'disabledPrimary size24_24 ghost rounded',
+    iconAppearanceActive: 'surfacePrimary size24_24 ghost rounded',
     iconFill: 'surfaceItemQuaternary',
     iconFillActive: 'surfaceItemSecondary',
     indicatorFill: 'accentPrimary',
@@ -17,6 +19,8 @@ const segmentedAppearanceDefault = {
     labelTextActiveColor: 'accentTextPrimary',
     labelTextColor: 'surfaceTextPrimary',
     borderColor: 'surfaceBorderQuaternary',
+    iconAppearance: 'disabledPrimary size24_24 ghost rounded',
+    iconAppearanceActive: 'surfacePrimary size24_24 ghost rounded',
     iconFill: 'surfaceItemQuaternary',
     iconFillActive: 'surfaceItemSecondary',
     indicatorFill: 'accentPrimary',

package/src/components/Segmented/appearance/segmentedDisabled.ts

@@ -7,6 +7,8 @@ const segmentedAppearanceDisabled = {
     labelTextActiveColor: 'surfaceTextQuaternary',
     labelTextColor: 'surfaceTextQuaternary',
     borderColor: 'surfaceBorderPrimary',
+    iconAppearance: 'surfacePrimary size24_24 ghost rounded',
+    iconAppearanceActive: 'surfacePrimary size24_24 ghost rounded',
     iconFill: 'surfaceItemPrimary',
     iconFillActive: 'surfaceItemPrimary',
   },

package/src/components/Segmented/appearance/segmentedError.ts

@@ -7,6 +7,8 @@ const segmentedAppearanceError = {
     labelTextActiveColor: 'errorTextPrimary',
     labelTextColor: 'errorTextSecondary',
     borderColor: 'errorBorderQuaternary',
+    iconAppearance: 'errorPrimary size24_24 ghost rounded',
+    iconAppearanceActive: 'errorPrimary size24_24 ghost rounded',
     iconFill: 'errorItemSecondary',
     iconFillActive: 'errorItemTertiary',
   },

package/src/components/Segmented/appearance/segmentedRequire.ts

@@ -7,6 +7,7 @@ const segmentedAppearanceRequire = {
     labelTextActiveColor: 'warningTextPrimary',
     labelTextColor: 'warningTextSecondary',
     borderColor: 'warningBorderSecondary',
+    iconAppearance: 'warningPrimary size24_24 ghost rounded',
     iconFill: 'warningItemSecondary',
   },
 } satisfies SegmentedAppearance

package/src/components/Segmented/appearance/segmentedSuccess.ts

@@ -7,6 +7,7 @@ const segmentedAppearanceSuccess = {
     labelTextActiveColor: 'successTextPrimary',
     labelTextColor: 'successTextQuaternary',
     borderColor: 'successBorderSecondary',
+    iconAppearance: 'successPrimary size24_24 ghost rounded',
     iconFill: 'successItemSecondary',
     indicatorFill: 'accentPrimary',
   },

package/src/components/Segmented/stories/SegmenetedIcon.stories.tsx

@@ -0,0 +1,45 @@
+import type { Meta } from '@storybook/react'
+
+import { createAppearanceTierStories } from '../../../storybook'
+import { Segmented } from '../Segmented'
+import type { SegmentedProps } from '../Segmented.interface'
+import {
+  SEGMENTED_APPEARANCE_GROUPS,
+  segmentedGallery,
+  segmentedIconMock,
+  SegmentedStateful,
+  segmentedStoryParameters,
+} from './SegmentedStories.config'
+
+const meta = {
+  title: 'Atoms / Segmented / Icon',
+  component: Segmented,
+  args: {
+    activeSegment: segmentedIconMock[0],
+    segments: segmentedIconMock,
+    shape: 'rounded',
+  },
+  parameters: segmentedStoryParameters,
+} satisfies Meta<typeof Segmented>
+
+export default meta
+
+const stories = createAppearanceTierStories<
+  SegmentedProps & { dataTestId?: string }
+>({
+  renderItem: ({ appearance, args }) => (
+    <SegmentedStateful
+      {...args}
+      appearance={appearance as SegmentedProps['appearance']}
+    />
+  ),
+  appearanceGroups: SEGMENTED_APPEARANCE_GROUPS,
+  appearanceSize: 'sizeL',
+  tiersByAppearance: segmentedGallery.tiersByAppearance,
+})
+
+export const Default = stories.Default
+export const Error = stories.Error
+export const Success = stories.Success
+export const Require = stories.Require
+export const Disabled = stories.Disabled

package/src/components/Segmented/stories/SegmentedDemo.stories.tsx

@@ -0,0 +1,81 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { createAppearanceOptions } from '../../../storybook'
+import { segmentedAppearanceShape } from '../appearance/segmentedShape'
+import { segmentedAppearanceSize } from '../appearance/segmentedSize'
+import { segmentedAppearanceStyle } from '../appearance/segmentedStyle'
+import { Segmented } from '../Segmented'
+import { segmentedAppearance } from '../Segmented.appearance'
+import type { SegmentedProps, SegmentedStoryArgs } from '../Segmented.interface'
+import { segmentedStoryParameters } from './SegmentedStories.config'
+
+const { getAppearanceOptions } = createAppearanceOptions(segmentedAppearance, {
+  appearanceShape: segmentedAppearanceShape,
+  appearanceSize: segmentedAppearanceSize,
+  appearanceStyle: segmentedAppearanceStyle,
+})
+
+const meta = {
+  title: 'Atoms / Segmented',
+  component: Segmented,
+  args: {
+    appearanceShape: 'rounded',
+    appearanceSize: 'sizeM',
+    appearanceStyle: 'solid',
+    appearanceType: 'defaultPrimary',
+  },
+  parameters: {
+    ...segmentedStoryParameters,
+    controls: {
+      include: [
+        'appearanceType',
+        'appearanceSize',
+        'appearanceStyle',
+        'appearanceShape',
+      ],
+    },
+  },
+  argTypes: {
+    appearanceShape: {
+      control: 'radio',
+      options: getAppearanceOptions('appearanceShape'),
+    },
+    appearanceSize: {
+      control: 'radio',
+      options: getAppearanceOptions('appearanceSize'),
+    },
+    appearanceStyle: {
+      control: 'radio',
+      options: getAppearanceOptions('appearanceStyle'),
+    },
+    appearanceType: {
+      control: 'select',
+      options: getAppearanceOptions('appearance'),
+    },
+  },
+} satisfies Meta<SegmentedStoryArgs>
+
+export default meta
+
+export const Demo: StoryObj<SegmentedStoryArgs> = {
+  args: {
+    segments: [
+      { label: 'One', value: 'one' },
+      { label: 'Two', value: 'two' },
+    ],
+  },
+  render: ({
+    appearanceShape,
+    appearanceSize,
+    appearanceStyle,
+    appearanceType,
+    ...rest
+  }) => (
+    <Segmented
+      {...rest}
+      appearance={
+        `${appearanceType} ${appearanceSize} ${appearanceStyle} ${appearanceShape}` as SegmentedProps['appearance']
+      }
+    />
+  ),
+}

package/src/components/Segmented/stories/SegmentedDisabled.stories.tsx

@@ -20,6 +20,6 @@ const meta = {
 
 export default meta
 
-type Story = StoryObj<typeof Segmented>
+type Story = StoryObj<typeof meta>
 
 export const Disabled: Story = {}

package/src/components/Segmented/stories/SegmentedGallery.stories.tsx

@@ -0,0 +1,89 @@
+/* eslint-disable perfectionist/sort-objects */
+import type { Meta, StoryObj } from '@storybook/react'
+
+import type { Segment } from '../Segmented.interface'
+import {
+  segmentedGallery,
+  segmentedIconMock,
+  segmentedLabelMock,
+  segmentedMock,
+  segmentedMockSize,
+  SegmentedStateful,
+  segmentedStoryParameters,
+} from './SegmentedStories.config'
+
+type SegmentedGalleryStory = {
+  appearance: string
+  isDisabled?: boolean
+  segments: Segment[]
+  shape: string
+  style: string
+  tier: string
+}
+
+const meta = {
+  title: 'Atoms / Segmented',
+  args: {
+    appearance: 'default',
+    tier: 'Primary',
+    style: 'solid',
+    shape: 'rounded',
+    segments: segmentedLabelMock,
+    isDisabled: false,
+  },
+  parameters: segmentedStoryParameters,
+  argTypes: {
+    appearance: segmentedGallery.argTypes.appearance,
+    tier: segmentedGallery.argTypes.tier,
+    style: segmentedGallery.argTypes.style,
+    shape: segmentedGallery.argTypes.shape,
+  },
+} satisfies Meta<SegmentedGalleryStory>
+
+export default meta
+
+type Story = StoryObj<SegmentedGalleryStory>
+
+const renderSegmentedGallery = (
+  args: SegmentedGalleryStory,
+  getSegments: (sizeKey: string) => Segment[],
+) =>
+  segmentedGallery.render(args, ({ appearance, args: storyArgs, sizeKey }) => (
+    <SegmentedStateful
+      appearance={appearance}
+      key={`${sizeKey}-${storyArgs.isDisabled}`}
+      segments={getSegments(sizeKey)}
+      isDisabled={storyArgs.isDisabled}
+    />
+  ))
+
+export const Label: Story = {
+  name: 'Label',
+  args: {
+    segments: segmentedLabelMock,
+  },
+  render: (args) => renderSegmentedGallery(args, () => segmentedLabelMock),
+}
+
+export const Icon: Story = {
+  name: 'Icon',
+  args: {
+    segments: segmentedIconMock,
+  },
+  render: (args) => renderSegmentedGallery(args, () => segmentedIconMock),
+}
+
+export const LabelIcon: Story = {
+  name: 'Label + Icon',
+  args: {
+    segments: segmentedMock,
+  },
+  render: (args) =>
+    renderSegmentedGallery(
+      args,
+      (sizeKey) =>
+        segmentedMockSize[
+          sizeKey as unknown as keyof typeof segmentedMockSize
+        ] ?? segmentedMock,
+    ),
+}

package/src/components/Segmented/stories/SegmentedLabel.stories.tsx

@@ -19,7 +19,7 @@ const meta = {
 
 export default meta
 
-type Story = StoryObj<typeof Segmented>
+type Story = StoryObj<typeof meta>
 
 export const Default: Story = {}
 

package/src/components/Segmented/stories/SegmentedLabelIcon.stories.tsx

@@ -16,7 +16,7 @@ const meta = {
 
 export default meta
 
-type Story = StoryObj<typeof Segmented>
+type Story = StoryObj<typeof meta>
 
 export const Default: Story = {}
 

package/src/components/Segmented/stories/SegmentedShape.stories.tsx

@@ -15,7 +15,7 @@ const meta = {
 
 export default meta
 
-type Story = StoryObj<typeof Segmented>
+type Story = StoryObj<typeof meta>
 
 export const Rounded: Story = {
   args: {

package/src/components/Segmented/stories/SegmentedSize.stories.tsx

@@ -15,7 +15,7 @@ const meta = {
 
 export default meta
 
-type Story = StoryObj<typeof Segmented>
+type Story = StoryObj<typeof meta>
 
 export const SizeL: Story = {
   args: {

package/src/components/Segmented/stories/SegmentedStories.config.tsx

@@ -2,8 +2,21 @@ import { useState } from 'react'
 
 import { icons16, icons20, icons24 } from '@itcase/icons-default'
 
+import { createComponentGallery } from '../../../storybook'
+import { segmentedAppearanceDefault } from '../appearance/segmentedDefault'
+import { segmentedAppearanceDisabled } from '../appearance/segmentedDisabled'
+import { segmentedAppearanceError } from '../appearance/segmentedError'
+import { segmentedAppearanceRequire } from '../appearance/segmentedRequire'
+import { segmentedAppearanceShape } from '../appearance/segmentedShape'
+import { segmentedAppearanceSize } from '../appearance/segmentedSize'
+import { segmentedAppearanceStyle } from '../appearance/segmentedStyle'
+import { segmentedAppearanceSuccess } from '../appearance/segmentedSuccess'
 import { Segmented } from '../Segmented'
-import type { Segment, SegmentedProps } from '../Segmented.interface'
+import type {
+  Segment,
+  SegmentedAppearanceKey,
+  SegmentedProps,
+} from '../Segmented.interface'
 
 const segmentedLabelMock: Segment[] = [
   { label: 'Label 1', value: '1' },
@@ -87,3 +100,38 @@ export {
   segmentedMockSize,
   SegmentedStateful,
 }
+
+// Appearance gallery
+const SEGMENTED_APPEARANCE_GROUPS = [
+  'error',
+  'success',
+  'disabled',
+  'default',
+  'require',
+] as const
+
+const segmentedStoryParameters = {
+  layout: 'centered' as const,
+}
+
+const segmentedGallery = createComponentGallery<SegmentedAppearanceKey>({
+  size: segmentedAppearanceSize,
+  appearanceGroups: {
+    error: segmentedAppearanceError,
+    default: segmentedAppearanceDefault,
+    disabled: segmentedAppearanceDisabled,
+    require: segmentedAppearanceRequire,
+    success: segmentedAppearanceSuccess,
+  },
+  shape: segmentedAppearanceShape,
+  style: segmentedAppearanceStyle,
+})
+
+export {
+  SEGMENTED_APPEARANCE_GROUPS,
+  segmentedAppearanceShape,
+  segmentedAppearanceSize,
+  segmentedAppearanceStyle,
+  segmentedGallery,
+  segmentedStoryParameters,
+}

package/src/components/Segmented/stories/SegmentedStyle.stories.tsx

@@ -15,7 +15,7 @@ const meta = {
 
 export default meta
 
-type Story = StoryObj<typeof Segmented>
+type Story = StoryObj<typeof meta>
 
 export const Solid: Story = {
   args: {

package/src/components/Select/Select.interface.ts

@@ -9,12 +9,14 @@ import type {
   AppearanceSizeKey,
   AppearanceStyleKey,
   BorderColorProps,
+  CompositeAppearanceStateDefault,
   FillProps,
   ShapeProps,
   TextColorProps,
   TextSizeProps,
 } from '@itcase/types-ui'
 
+import type { ComponentGalleryArgs } from '../../storybook'
 import type { selectSizePropsType } from './styles/selectSize'
 
 interface SelectOptionItem {
@@ -26,6 +28,8 @@ interface SelectAppearanceProps {
   borderColor?: BorderColorProps
   fill?: FillProps
   fillDisabled?: FillProps
+  iconAppearance?: string
+  iconCloseAppearance?: string
   menuFill?: FillProps
   optionFill?: FillProps
   optionFillActive?: FillProps
@@ -42,13 +46,15 @@ interface SelectProps extends SelectAppearanceProps {
   isDisabled?: boolean
   onValueChange?: (value: string) => void
   appearance?: SelectAppearanceKey
+  menu?: SelectMenu
   optionsList?: SelectOptionItem[]
   placeholder?: string
   style?: StyleProp<ViewStyle>
   value?: string
 }
 
-type SelectAppearanceKey = AppearanceKeysState
+type SelectMenu = 'bottom' | 'overlay' | 'screen'
+type SelectAppearanceKey = AppearanceKeysState | CompositeAppearanceStateDefault
 type SelectConfig = AppearanceConfig<AppearanceKeysState, SelectAppearanceProps>
 type SelectAppearance = SelectConfig['appearance']
 type SelectAppearanceStyle = AppearanceRecord<
@@ -67,6 +73,17 @@ type SelectAppearanceSize = AppearancePartialRecord<
   'size' | 'textSize'
 >
 
+type SelectGalleryStory = ComponentGalleryArgs & {
+  placeholder?: string
+}
+
+type SelectStoryArgs = Omit<SelectProps, 'appearance'> & {
+  appearanceShape: string
+  appearanceSize: string
+  appearanceStyle: string
+  appearanceType: string
+}
+
 export type {
   SelectAppearance,
   SelectAppearanceKey,
@@ -75,6 +92,9 @@ export type {
   SelectAppearanceSize,
   SelectAppearanceStyle,
   SelectConfig,
+  SelectGalleryStory,
+  SelectMenu,
   SelectOptionItem,
   SelectProps,
+  SelectStoryArgs,
 }