@itcase/ui-react-native 1.10.81

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

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Segmented } from '../Segmented'
+import {
+  segmentedLabelMock,
+  SegmentedStateful,
+} from './SegmentedStories.config'
+
+const meta = {
+  title: 'Atoms / Segmented / Disabled',
+  component: Segmented,
+  args: {
+    appearance: 'defaultPrimary sizeL solid rounded',
+    activeSegment: segmentedLabelMock[0],
+    segments: segmentedLabelMock,
+    isDisabled: true,
+  },
+  render: (args) => <SegmentedStateful {...args} />,
+} satisfies Meta<typeof Segmented>
+
+export default meta
+
+type Story = StoryObj<typeof Segmented>
+
+export const Disabled: Story = {}

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

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Segmented } from '../Segmented'
+import { segmentedIconMock, SegmentedStateful } from './SegmentedStories.config'
+
+const meta = {
+  title: 'Atoms / Segmented / Icon',
+  component: Segmented,
+  args: {
+    appearance: 'defaultPrimary sizeL solid rounded',
+    activeSegment: segmentedIconMock[0],
+    segments: segmentedIconMock,
+  },
+  render: (args) => <SegmentedStateful {...args} />,
+} satisfies Meta<typeof Segmented>
+
+export default meta
+
+type Story = StoryObj<typeof Segmented>
+
+export const Default: Story = {}
+
+export const Error: Story = {
+  args: {
+    appearance: 'errorPrimary sizeL solid rounded',
+  },
+}
+
+export const Success: Story = {
+  args: {
+    appearance: 'successPrimary sizeL solid rounded',
+  },
+}
+
+export const Require: Story = {
+  args: {
+    appearance: 'requirePrimary sizeL solid rounded',
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    appearance: 'disabledPrimary sizeL solid rounded',
+    isDisabled: true,
+  },
+}

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

@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Segmented } from '../Segmented'
+import {
+  segmentedLabelMock,
+  SegmentedStateful,
+} from './SegmentedStories.config'
+
+const meta = {
+  title: 'Atoms / Segmented / Label',
+  component: Segmented,
+  args: {
+    appearance: 'defaultPrimary sizeL solid rounded',
+    activeSegment: segmentedLabelMock[0],
+    segments: segmentedLabelMock,
+  },
+  render: (args) => <SegmentedStateful {...args} />,
+} satisfies Meta<typeof Segmented>
+
+export default meta
+
+type Story = StoryObj<typeof Segmented>
+
+export const Default: Story = {}
+
+export const Error: Story = {
+  args: {
+    appearance: 'errorPrimary sizeL solid rounded',
+  },
+}
+
+export const Success: Story = {
+  args: {
+    appearance: 'successPrimary sizeL solid rounded',
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    appearance: 'disabledPrimary sizeL solid rounded',
+    isDisabled: true,
+  },
+}

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

@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Segmented } from '../Segmented'
+import { segmentedMock, SegmentedStateful } from './SegmentedStories.config'
+
+const meta = {
+  title: 'Atoms / Segmented / Label + Icon',
+  component: Segmented,
+  args: {
+    appearance: 'defaultPrimary sizeL solid rounded',
+    activeSegment: segmentedMock[0],
+    segments: segmentedMock,
+  },
+  render: (args) => <SegmentedStateful {...args} />,
+} satisfies Meta<typeof Segmented>
+
+export default meta
+
+type Story = StoryObj<typeof Segmented>
+
+export const Default: Story = {}
+
+export const Error: Story = {
+  args: {
+    appearance: 'errorPrimary sizeL solid rounded',
+  },
+}
+
+export const Success: Story = {
+  args: {
+    appearance: 'successPrimary sizeL solid rounded',
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    appearance: 'disabledPrimary sizeL solid rounded',
+    isDisabled: true,
+  },
+}

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

@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Segmented } from '../Segmented'
+import { segmentedMock, SegmentedStateful } from './SegmentedStories.config'
+
+const meta = {
+  title: 'Atoms / Segmented / Shape',
+  component: Segmented,
+  args: {
+    activeSegment: segmentedMock[0],
+    segments: segmentedMock,
+  },
+  render: (args) => <SegmentedStateful {...args} />,
+} satisfies Meta<typeof Segmented>
+
+export default meta
+
+type Story = StoryObj<typeof Segmented>
+
+export const Rounded: Story = {
+  args: {
+    appearance: 'defaultPrimary sizeL solid rounded',
+  },
+}
+
+export const RoundedS: Story = {
+  args: {
+    appearance: 'defaultPrimary sizeL solid roundedS',
+  },
+}
+
+export const RoundedM: Story = {
+  args: {
+    appearance: 'defaultPrimary sizeL solid roundedM',
+  },
+}
+
+export const RoundedL: Story = {
+  args: {
+    appearance: 'defaultPrimary sizeL solid roundedL',
+  },
+}
+
+export const RoundedXL: Story = {
+  args: {
+    appearance: 'defaultPrimary sizeL solid roundedXL',
+  },
+}
+
+export const Circular: Story = {
+  args: {
+    appearance: 'defaultPrimary sizeL solid circular',
+  },
+}

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

@@ -0,0 +1,56 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Segmented } from '../Segmented'
+import { segmentedMockSize, SegmentedStateful } from './SegmentedStories.config'
+
+const meta = {
+  title: 'Atoms / Segmented / Size',
+  component: Segmented,
+  args: {
+    activeSegment: segmentedMockSize[24][0],
+    segments: segmentedMockSize[24],
+  },
+  render: (args) => <SegmentedStateful {...args} />,
+} satisfies Meta<typeof Segmented>
+
+export default meta
+
+type Story = StoryObj<typeof Segmented>
+
+export const SizeL: Story = {
+  args: {
+    appearance: 'defaultPrimary sizeL solid rounded',
+    segments: segmentedMockSize[24],
+  },
+}
+
+export const SizeM: Story = {
+  args: {
+    appearance: 'defaultPrimary sizeM solid rounded',
+    segments: segmentedMockSize[24],
+  },
+}
+
+export const SizeS: Story = {
+  args: {
+    appearance: 'defaultPrimary sizeS solid rounded',
+    activeSegment: segmentedMockSize[20][0],
+    segments: segmentedMockSize[20],
+  },
+}
+
+export const SizeXS: Story = {
+  args: {
+    appearance: 'defaultPrimary sizeXS solid rounded',
+    activeSegment: segmentedMockSize[16][0],
+    segments: segmentedMockSize[16],
+  },
+}
+
+export const SizeXXS: Story = {
+  args: {
+    appearance: 'defaultPrimary sizeXXS solid rounded',
+    activeSegment: segmentedMockSize[16][0],
+    segments: segmentedMockSize[16],
+  },
+}

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

@@ -0,0 +1,89 @@
+import { useState } from 'react'
+
+import { icons16, icons20, icons24 } from '@itcase/icons-default/default/svg'
+
+import { Segmented } from '../Segmented'
+import type { Segment, SegmentedProps } from '../Segmented.interface'
+
+const segmentedLabelMock: Segment[] = [
+  { label: 'Label 1', value: '1' },
+  { label: 'Label 2', value: '2' },
+  { label: 'Label 3', value: '3' },
+]
+
+const segmentedMock: Segment[] = [
+  {
+    label: 'Label 1',
+    iconAfter: icons24.Placeholder.Default,
+    iconBefore: icons24.Placeholder.Default,
+    value: '1',
+  },
+  {
+    label: 'Label 2',
+    iconAfter: icons24.Placeholder.Default,
+    iconBefore: icons24.Placeholder.Default,
+    value: '2',
+  },
+  {
+    label: 'Label 3',
+    iconAfter: icons24.Placeholder.Default,
+    iconBefore: icons24.Placeholder.Default,
+    value: '3',
+  },
+]
+
+const segmentedIconMock: Segment[] = [
+  { iconBefore: icons24.Placeholder.Default, value: '1' },
+  { iconBefore: icons24.Placeholder.Default, value: '2' },
+  { iconBefore: icons24.Placeholder.Default, value: '3' },
+]
+
+const segmentedMockSize = {
+  16: segmentedMock.map((segment) => ({
+    ...segment,
+    iconAfter: icons16.Placeholder.Default,
+    iconBefore: icons16.Placeholder.Default,
+  })),
+  20: segmentedMock.map((segment) => ({
+    ...segment,
+    iconAfter: icons20.Placeholder.Default,
+    iconBefore: icons20.Placeholder.Default,
+  })),
+  24: segmentedMock,
+}
+
+function SegmentedStateful(props: SegmentedProps) {
+  const { activeSegment, segments, value, setActiveSegment, onChange } = props
+  const [selectedSegment, setSelectedSegment] = useState<Segment>(() => {
+    return (
+      activeSegment ||
+      segments.find((segment) => {
+        return segment.value === value
+      }) ||
+      segments[0]
+    )
+  })
+
+  return (
+    <Segmented
+      {...props}
+      activeSegment={selectedSegment}
+      setActiveSegment={(segment) => {
+        setSelectedSegment(segment)
+
+        if (setActiveSegment) {
+          setActiveSegment(segment)
+        }
+      }}
+      onChange={onChange}
+    />
+  )
+}
+
+export {
+  segmentedIconMock,
+  segmentedLabelMock,
+  segmentedMock,
+  segmentedMockSize,
+  SegmentedStateful,
+}

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

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Segmented } from '../Segmented'
+import { segmentedMock, SegmentedStateful } from './SegmentedStories.config'
+
+const meta = {
+  title: 'Atoms / Segmented / Style',
+  component: Segmented,
+  args: {
+    activeSegment: segmentedMock[0],
+    segments: segmentedMock,
+  },
+  render: (args) => <SegmentedStateful {...args} />,
+} satisfies Meta<typeof Segmented>
+
+export default meta
+
+type Story = StoryObj<typeof Segmented>
+
+export const Solid: Story = {
+  args: {
+    appearance: 'defaultPrimary sizeL solid rounded',
+  },
+}
+
+export const Outlined: Story = {
+  args: {
+    appearance: 'disabledPrimary sizeL outlined rounded',
+  },
+}
+
+export const Full: Story = {
+  args: {
+    appearance: 'defaultPrimary sizeL full rounded',
+  },
+}
+
+export const Ghost: Story = {
+  args: {
+    appearance: 'defaultPrimary sizeL ghost rounded',
+  },
+}

package/src/components/Segmented/styles/segmented.ts

@@ -0,0 +1,27 @@
+import { StyleSheet } from 'react-native'
+
+const segmentedStyles = StyleSheet.create({
+  segmented: {
+    flexDirection: 'row',
+    alignItems: 'stretch',
+    padding: 2,
+  },
+  segmented__item: {
+    minWidth: 0,
+    flexBasis: 0,
+    flexDirection: 'row',
+    flexGrow: 1,
+    flexShrink: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    position: 'relative',
+  },
+  segmented__wrapper: {
+    flexDirection: 'row',
+    flexGrow: 1,
+    alignItems: 'stretch',
+    position: 'relative',
+  },
+})
+
+export { segmentedStyles }

package/src/components/Segmented/styles/segmentedShape.ts

@@ -0,0 +1,37 @@
+import { StyleSheet } from 'react-native'
+
+import { getVariantsPropsList } from '../../../utils'
+
+const segmentedShapeStyles = StyleSheet.create({
+  segmented_shape_circular: {
+    borderRadius: 100,
+  },
+  segmented_shape_geometric: {
+    borderRadius: 0,
+  },
+  segmented_shape_rounded: {
+    borderRadius: 8,
+  },
+  segmented_shape_roundedL: {
+    borderRadius: 12,
+  },
+  segmented_shape_roundedM: {
+    borderRadius: 6,
+  },
+  segmented_shape_roundedS: {
+    borderRadius: 4,
+  },
+  segmented_shape_roundedXL: {
+    borderRadius: 16,
+  },
+})
+
+const segmentedShapeList = getVariantsPropsList(
+  segmentedShapeStyles,
+  'segmented_shape_',
+)
+
+type segmentedShapePropsType = (typeof segmentedShapeList)[number]
+
+export { segmentedShapeList, segmentedShapeStyles }
+export type { segmentedShapePropsType }

package/src/components/Segmented/styles/segmentedSize.ts

@@ -0,0 +1,65 @@
+import { StyleSheet } from 'react-native'
+
+import { getVariantsPropsList } from '../../../utils'
+
+const segmentedSizeStyles = StyleSheet.create({
+  segmented__item_size_l: {
+    minWidth: 120,
+    minHeight: 40,
+    borderRadius: 6,
+    paddingHorizontal: 12,
+    gap: 12,
+  },
+  segmented__item_size_m: {
+    minWidth: 120,
+    minHeight: 36,
+    borderRadius: 6,
+    paddingHorizontal: 10,
+    gap: 8,
+  },
+  segmented__item_size_s: {
+    minWidth: 80,
+    minHeight: 28,
+    borderRadius: 6,
+    paddingHorizontal: 8,
+    gap: 8,
+  },
+  segmented__item_size_xl: {
+    minWidth: 120,
+    minHeight: 40,
+    borderRadius: 6,
+    paddingHorizontal: 12,
+    gap: 12,
+  },
+  segmented__item_size_xs: {
+    minWidth: 80,
+    minHeight: 20,
+    borderRadius: 6,
+    paddingHorizontal: 8,
+    gap: 4,
+  },
+  segmented__item_size_xxl: {
+    minWidth: 120,
+    minHeight: 40,
+    borderRadius: 6,
+    paddingHorizontal: 12,
+    gap: 12,
+  },
+  segmented__item_size_xxs: {
+    minWidth: 60,
+    minHeight: 16,
+    borderRadius: 6,
+    paddingHorizontal: 4,
+    gap: 4,
+  },
+})
+
+const segmentedSizeList = getVariantsPropsList(
+  segmentedSizeStyles,
+  'segmented__item_size_',
+)
+
+type segmentedSizePropsType = (typeof segmentedSizeList)[number]
+
+export { segmentedSizeList, segmentedSizeStyles }
+export type { segmentedSizePropsType }

package/src/components/Segmented/styles/segmentedWidth.ts

@@ -0,0 +1,33 @@
+import { StyleSheet } from 'react-native'
+
+const segmentedWidthStyles = StyleSheet.create({
+  segmented_width_fill: {
+    width: '100%',
+    alignSelf: 'stretch',
+  },
+  segmented_width_fill__item: {
+    minWidth: 0,
+    flexBasis: 0,
+    flexGrow: 1,
+    flexShrink: 1,
+  },
+  segmented_width_fill__wrapper: {
+    width: '100%',
+    minWidth: 0,
+    flexGrow: 1,
+    flexShrink: 1,
+  },
+  segmented_width_hug: {
+    flexGrow: 0,
+    alignSelf: 'flex-start',
+  },
+  segmented_width_hug__item: {
+    flexBasis: 'auto',
+    flexGrow: 0,
+  },
+  segmented_width_hug__wrapper: {
+    flexGrow: 0,
+  },
+})
+
+export { segmentedWidthStyles }

package/src/components/Select/Select.appearance.ts

@@ -0,0 +1,22 @@
+import { selectAppearanceDefault } from './appearance/selectDefault'
+import { selectAppearanceDisabled } from './appearance/selectDisabled'
+import { selectAppearanceError } from './appearance/selectError'
+import { selectAppearanceRequire } from './appearance/selectRequire'
+import { selectAppearanceShape } from './appearance/selectShape'
+import { selectAppearanceSize } from './appearance/selectSize'
+import { selectAppearanceStyle } from './appearance/selectStyle'
+import { selectAppearanceSuccess } from './appearance/selectSuccess'
+import type { SelectAppearance } from './Select.interface'
+
+const selectAppearance = {
+  ...selectAppearanceRequire,
+  ...selectAppearanceDefault,
+  ...selectAppearanceDisabled,
+  ...selectAppearanceSuccess,
+  ...selectAppearanceSize,
+  ...selectAppearanceError,
+  ...selectAppearanceShape,
+  ...selectAppearanceStyle,
+} satisfies SelectAppearance
+
+export { selectAppearance }

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

@@ -0,0 +1,80 @@
+import type { StyleProp, ViewStyle } from 'react-native'
+
+import type {
+  AppearanceConfig,
+  AppearanceKeysState,
+  AppearancePartialRecord,
+  AppearanceRecord,
+  AppearanceShapeKey,
+  AppearanceSizeKey,
+  AppearanceStyleKey,
+  BorderColorProps,
+  FillProps,
+  ShapeProps,
+  TextColorProps,
+  TextSizeProps,
+} from '@itcase/types-ui'
+
+import type { selectSizePropsType } from './styles/selectSize'
+
+interface SelectOptionItem {
+  label: string
+  value: string
+}
+
+interface SelectAppearanceProps {
+  borderColor?: BorderColorProps
+  fill?: FillProps
+  fillDisabled?: FillProps
+  menuFill?: FillProps
+  optionFill?: FillProps
+  optionFillActive?: FillProps
+  optionTextColor?: TextColorProps
+  optionTextColorActive?: TextColorProps
+  placeholderTextColor?: TextColorProps
+  shape?: ShapeProps
+  size?: selectSizePropsType
+  textColor?: TextColorProps
+  textSize?: TextSizeProps
+}
+
+interface SelectProps extends SelectAppearanceProps {
+  isDisabled?: boolean
+  onValueChange?: (value: string) => void
+  appearance?: SelectAppearanceKey
+  optionsList?: SelectOptionItem[]
+  placeholder?: string
+  style?: StyleProp<ViewStyle>
+  value?: string
+}
+
+type SelectAppearanceKey = AppearanceKeysState
+type SelectConfig = AppearanceConfig<AppearanceKeysState, SelectAppearanceProps>
+type SelectAppearance = SelectConfig['appearance']
+type SelectAppearanceStyle = AppearanceRecord<
+  AppearanceStyleKey,
+  SelectAppearanceProps,
+  'borderColor' | 'fill'
+>
+type SelectAppearanceShape = AppearancePartialRecord<
+  AppearanceShapeKey,
+  SelectAppearanceProps,
+  'shape'
+>
+type SelectAppearanceSize = AppearancePartialRecord<
+  AppearanceSizeKey,
+  SelectAppearanceProps,
+  'size' | 'textSize'
+>
+
+export type {
+  SelectAppearance,
+  SelectAppearanceKey,
+  SelectAppearanceProps,
+  SelectAppearanceShape,
+  SelectAppearanceSize,
+  SelectAppearanceStyle,
+  SelectConfig,
+  SelectOptionItem,
+  SelectProps,
+}

package/src/components/Select/Select.styles.ts

@@ -0,0 +1,9 @@
+import { selectStyles as selectBaseStyles } from './styles/select'
+import { selectSizeStyles } from './styles/selectSize'
+
+const styles = {
+  ...selectBaseStyles,
+  ...selectSizeStyles,
+}
+
+export { styles }