@itcase/ui-react-native 1.10.81

package/src/components/Select/Select.tsx

@@ -0,0 +1,178 @@
+import { useCallback, useMemo, useState } from 'react'
+import { Modal, Pressable, ScrollView, View } from 'react-native'
+
+import { icons16 } from '@itcase/icons-default/default/svg'
+
+import { tokens } from '../../styles/tokens'
+import { Group } from '../Group'
+import { Icon } from '../Icon'
+import { Text } from '../Text'
+import { selectAppearance } from './Select.appearance'
+import type {
+  SelectConfig,
+  SelectOptionItem,
+  SelectProps,
+} from './Select.interface'
+import { styles } from './Select.styles'
+
+const DEFAULT_SELECT_APPEARANCE = 'defaultPrimary'
+const IconChevronDefault = icons16.Arrow.ChevronDownSmall
+
+const selectConfig: SelectConfig = {
+  appearance: {},
+  setAppearance: (newComponent) => {
+    selectConfig.appearance = newComponent
+  },
+}
+
+selectConfig.setAppearance(selectAppearance)
+
+function Select(props: SelectProps) {
+  const {
+    appearance,
+    size,
+    fill,
+    borderColor,
+    optionsList,
+    placeholder,
+    style,
+    value,
+    isDisabled,
+    onValueChange,
+  } = props
+
+  const [isMenuOpen, setIsMenuOpen] = useState(false)
+
+  const appearanceConfig = useMemo(() => {
+    const appearanceKey = appearance || DEFAULT_SELECT_APPEARANCE
+
+    if (!selectConfig.appearance) {
+      return undefined
+    }
+
+    return selectConfig.appearance[appearanceKey]
+  }, [appearance])
+
+  const fillKey = isDisabled
+    ? appearanceConfig?.fillDisabled || appearanceConfig?.fill
+    : fill || appearanceConfig?.fill
+  const borderColorKey = borderColor || appearanceConfig?.borderColor
+  const shapeKey = appearanceConfig?.shape
+  const sizeKey = size || appearanceConfig?.size
+  const textSize = appearanceConfig?.textSize
+  const selectedOption = optionsList?.find((optionItem) => {
+    return optionItem.value === value
+  })
+  const fieldLabel = selectedOption?.label || placeholder || 'Select'
+  const fieldTextColor = selectedOption
+    ? appearanceConfig?.textColor
+    : appearanceConfig?.placeholderTextColor
+
+  const onPressField = useCallback(() => {
+    if (isDisabled) {
+      return
+    }
+
+    setIsMenuOpen(true)
+  }, [isDisabled])
+
+  const onPressOverlay = useCallback(() => {
+    setIsMenuOpen(false)
+  }, [])
+
+  const onPressOption = useCallback(
+    (optionItem: SelectOptionItem) => {
+      onValueChange?.(optionItem.value)
+      setIsMenuOpen(false)
+    },
+    [onValueChange],
+  )
+
+  return (
+    <View>
+      <Group
+        direction="horizontal"
+        justifyContent="space-between"
+        alignItems="center"
+        fill={fillKey}
+        borderColor={borderColorKey}
+        shape={shapeKey}
+        style={[
+          styles.select,
+          sizeKey && styles[`select_size_${sizeKey}`],
+          style && style,
+        ]}
+        isDisabled={isDisabled}
+        onPress={onPressField}
+      >
+        <Text size={textSize} textColor={fieldTextColor}>
+          {fieldLabel}
+        </Text>
+        <Icon
+          iconFill="surfaceItemPrimary"
+          iconSize="16"
+          SVGIcon={IconChevronDefault}
+        />
+      </Group>
+      <Modal
+        animationType="fade"
+        transparent={true}
+        visible={isMenuOpen}
+        onRequestClose={onPressOverlay}
+      >
+        <View style={styles.select__overlay}>
+          <Pressable
+            style={styles.select__overlayPress}
+            onPress={onPressOverlay}
+          />
+          <Group
+            direction="vertical"
+            fill={appearanceConfig?.menuFill || 'surfacePrimary'}
+            shape={shapeKey}
+            style={[
+              styles.select__menu,
+              appearanceConfig?.menuFill &&
+                tokens[`fill_${appearanceConfig.menuFill}`],
+              shapeKey && tokens[`shape_${shapeKey}`],
+            ]}
+          >
+            <ScrollView>
+              {optionsList?.map((optionItem) => {
+                const isSelected = optionItem.value === value
+
+                return (
+                  <Group
+                    key={optionItem.value}
+                    direction="horizontal"
+                    fill={
+                      isSelected
+                        ? appearanceConfig?.optionFillActive
+                        : appearanceConfig?.optionFill
+                    }
+                    style={styles.select__option}
+                    onPress={() => {
+                      onPressOption(optionItem)
+                    }}
+                  >
+                    <Text
+                      size={textSize}
+                      textColor={
+                        isSelected
+                          ? appearanceConfig?.optionTextColorActive
+                          : appearanceConfig?.optionTextColor
+                      }
+                    >
+                      {optionItem.label}
+                    </Text>
+                  </Group>
+                )
+              })}
+            </ScrollView>
+          </Group>
+        </View>
+      </Modal>
+    </View>
+  )
+}
+
+export { Select, selectConfig }

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

@@ -0,0 +1,17 @@
+import type { SelectAppearance } from '../Select.interface'
+
+const selectAppearanceDefault = {
+  defaultPrimary: {
+    fill: 'surfaceSecondary',
+    borderColor: 'surfaceBorderTertiary',
+    textColor: 'surfaceTextPrimary',
+    menuFill: 'surfacePrimary',
+    optionFill: 'surfacePrimary',
+    optionFillActive: 'accentPrimary',
+    optionTextColor: 'surfaceTextPrimary',
+    optionTextColorActive: 'accentTextPrimary',
+    placeholderTextColor: 'surfaceTextQuaternary',
+  },
+} satisfies SelectAppearance
+
+export { selectAppearanceDefault }

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

@@ -0,0 +1,13 @@
+import type { SelectAppearance } from '../Select.interface'
+
+const selectAppearanceDisabled = {
+  disabledPrimary: {
+    fill: 'surfaceDisabled',
+    fillDisabled: 'surfaceDisabled',
+    borderColor: 'surfaceBorderTertiary',
+    textColor: 'surfaceTextPrimary',
+    placeholderTextColor: 'surfaceTextQuaternary',
+  },
+} satisfies SelectAppearance
+
+export { selectAppearanceDisabled }

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

@@ -0,0 +1,17 @@
+import type { SelectAppearance } from '../Select.interface'
+
+const selectAppearanceError = {
+  errorPrimary: {
+    fill: 'errorTertiary',
+    borderColor: 'surfaceBorderTertiary',
+    textColor: 'surfaceTextPrimary',
+    menuFill: 'surfacePrimary',
+    optionFill: 'surfacePrimary',
+    optionFillActive: 'accentPrimary',
+    optionTextColor: 'surfaceTextPrimary',
+    optionTextColorActive: 'accentTextPrimary',
+    placeholderTextColor: 'surfaceTextQuaternary',
+  },
+} satisfies SelectAppearance
+
+export { selectAppearanceError }

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

@@ -0,0 +1,17 @@
+import type { SelectAppearance } from '../Select.interface'
+
+const selectAppearanceRequire = {
+  requirePrimary: {
+    fill: 'warningTertiary',
+    borderColor: 'surfaceBorderTertiary',
+    textColor: 'surfaceTextPrimary',
+    menuFill: 'surfacePrimary',
+    optionFill: 'surfacePrimary',
+    optionFillActive: 'accentPrimary',
+    optionTextColor: 'surfaceTextPrimary',
+    optionTextColorActive: 'accentTextPrimary',
+    placeholderTextColor: 'surfaceTextQuaternary',
+  },
+} satisfies SelectAppearance
+
+export { selectAppearanceRequire }

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

@@ -0,0 +1,21 @@
+import type { SelectAppearanceShape } from '../Select.interface'
+
+const selectAppearanceShape = {
+  rounded: {
+    shape: 'rounded',
+  },
+  roundedXL: {
+    shape: 'rounded',
+  },
+  roundedL: {
+    shape: 'rounded',
+  },
+  roundedM: {
+    shape: 'rounded',
+  },
+  roundedS: {
+    shape: 'rounded',
+  },
+} satisfies SelectAppearanceShape
+
+export { selectAppearanceShape }

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

@@ -0,0 +1,30 @@
+import type { SelectAppearanceSize } from '../Select.interface'
+
+const selectAppearanceSize = {
+  sizeXL: {
+    size: 'xl',
+    textSize: 'm',
+  },
+  sizeL: {
+    size: 'l',
+    textSize: 'm',
+  },
+  sizeM: {
+    size: 'm',
+    textSize: 'm',
+  },
+  sizeS: {
+    size: 's',
+    textSize: 's',
+  },
+  sizeXS: {
+    size: 'xs',
+    textSize: 'xs',
+  },
+  sizeXXS: {
+    size: 'xxs',
+    textSize: 'xs',
+  },
+} satisfies SelectAppearanceSize
+
+export { selectAppearanceSize }

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

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

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

@@ -0,0 +1,17 @@
+import type { SelectAppearance } from '../Select.interface'
+
+const selectAppearanceSuccess = {
+  successPrimary: {
+    fill: 'successTertiary',
+    borderColor: 'surfaceBorderTertiary',
+    textColor: 'surfaceTextPrimary',
+    menuFill: 'surfacePrimary',
+    optionFill: 'surfacePrimary',
+    optionFillActive: 'accentPrimary',
+    optionTextColor: 'surfaceTextPrimary',
+    optionTextColorActive: 'accentTextPrimary',
+    placeholderTextColor: 'surfaceTextQuaternary',
+  },
+} satisfies SelectAppearance
+
+export { selectAppearanceSuccess }

package/src/components/Select/index.ts

@@ -0,0 +1,29 @@
+import { Select, selectConfig } from './Select'
+import { selectAppearance } from './Select.appearance'
+import type {
+  SelectAppearance,
+  SelectAppearanceKey,
+  SelectAppearanceProps,
+  SelectAppearanceShape,
+  SelectAppearanceSize,
+  SelectAppearanceStyle,
+  SelectConfig,
+  SelectOptionItem,
+  SelectProps,
+} from './Select.interface'
+import { selectSizeList } from './styles/selectSize'
+import type { selectSizePropsType } from './styles/selectSize'
+
+export { Select, selectAppearance, selectConfig, selectSizeList }
+export type {
+  SelectAppearance,
+  SelectAppearanceKey,
+  SelectAppearanceProps,
+  SelectAppearanceShape,
+  SelectAppearanceSize,
+  SelectAppearanceStyle,
+  SelectConfig,
+  SelectOptionItem,
+  SelectProps,
+  selectSizePropsType,
+}

package/src/components/Select/stories/Select.stories.tsx

@@ -0,0 +1,67 @@
+import { useState } from 'react'
+
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Select } from '../Select'
+import type { SelectProps } from '../Select.interface'
+
+const optionsList = [
+  { label: 'Apple', value: 'apple' },
+  { label: 'Orange', value: 'orange' },
+  { label: 'Banana', value: 'banana' },
+  { label: 'Grape', value: 'grape' },
+]
+
+function SelectPlayground(props: SelectProps) {
+  const { value, onValueChange, ...restProps } = props
+  const [selectedValue, setSelectedValue] = useState(value)
+
+  return (
+    <Select
+      {...restProps}
+      value={selectedValue}
+      onValueChange={(nextValue) => {
+        setSelectedValue(nextValue)
+        onValueChange?.(nextValue)
+      }}
+    />
+  )
+}
+
+const SelectMeta: Meta<typeof Select> = {
+  title: 'Atoms / Select',
+  component: Select,
+  args: {
+    appearance: 'defaultPrimary',
+    optionsList: optionsList,
+    placeholder: 'Choose fruit',
+  },
+}
+
+export default SelectMeta
+
+export const Default: StoryObj<typeof Select> = {
+  render: (args) => <SelectPlayground {...args} />,
+}
+
+export const WithValue: StoryObj<typeof Select> = {
+  args: {
+    value: 'orange',
+  },
+  render: (args) => <SelectPlayground {...args} />,
+}
+
+export const Disabled: StoryObj<typeof Select> = {
+  args: {
+    value: 'apple',
+    isDisabled: true,
+  },
+  render: (args) => <SelectPlayground {...args} />,
+}
+
+export const Error: StoryObj<typeof Select> = {
+  args: {
+    appearance: 'errorPrimary',
+  },
+  render: (args) => <SelectPlayground {...args} />,
+}

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

@@ -0,0 +1,30 @@
+import { StyleSheet } from 'react-native'
+
+const selectStyles = StyleSheet.create({
+  select: {
+    minHeight: 44,
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+  },
+  select__menu: {
+    width: '100%',
+    maxHeight: '80%',
+    overflow: 'hidden',
+  },
+  select__option: {
+    minHeight: 44,
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+  },
+  select__overlay: {
+    flex: 1,
+    justifyContent: 'center',
+    padding: 24,
+    backgroundColor: 'hsla(0, 0%, 45%, 0.8)',
+  },
+  select__overlayPress: {
+    ...StyleSheet.absoluteFill,
+  },
+})
+
+export { selectStyles }

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

@@ -0,0 +1,48 @@
+import { StyleSheet } from 'react-native'
+
+import { getVariantsPropsList } from '../../../utils'
+
+const selectSizeStyles = StyleSheet.create({
+  select_size_l: {
+    minHeight: 48,
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+  },
+  select_size_m: {
+    minHeight: 44,
+    paddingVertical: 10,
+    paddingHorizontal: 16,
+  },
+  select_size_s: {
+    minHeight: 40,
+    paddingVertical: 8,
+    paddingHorizontal: 12,
+  },
+  select_size_xl: {
+    minHeight: 52,
+    paddingVertical: 14,
+    paddingHorizontal: 16,
+  },
+  select_size_xs: {
+    minHeight: 36,
+    paddingVertical: 6,
+    paddingHorizontal: 10,
+  },
+  select_size_xxl: {
+    minHeight: 56,
+    paddingVertical: 16,
+    paddingHorizontal: 16,
+  },
+  select_size_xxs: {
+    minHeight: 32,
+    paddingVertical: 4,
+    paddingHorizontal: 8,
+  },
+})
+
+const selectSizeList = getVariantsPropsList(selectSizeStyles, 'select_size_')
+
+type selectSizePropsType = (typeof selectSizeList)[number]
+
+export { selectSizeList, selectSizeStyles }
+export type { selectSizePropsType }

package/src/components/Switch/Switch.appearance.ts

@@ -0,0 +1,20 @@
+import { switchAppearanceDefault } from './appearance/switchDefault'
+import { switchAppearanceDisabled } from './appearance/switchDisabled'
+import { switchAppearanceError } from './appearance/switchError'
+import { switchAppearanceRequire } from './appearance/switchRequire'
+import { switchAppearanceSize } from './appearance/switchSize'
+import { switchAppearanceStyle } from './appearance/switchStyle'
+import { switchAppearanceSuccess } from './appearance/switchSuccess'
+import type { SwitchAppearance } from './Switch.interface'
+
+const switchAppearance = {
+  ...switchAppearanceSize,
+  ...switchAppearanceDisabled,
+  ...switchAppearanceRequire,
+  ...switchAppearanceStyle,
+  ...switchAppearanceError,
+  ...switchAppearanceDefault,
+  ...switchAppearanceSuccess,
+} satisfies SwitchAppearance
+
+export { switchAppearance }

package/src/components/Switch/Switch.interface.ts

@@ -0,0 +1,70 @@
+import type { GestureResponderEvent, StyleProp, ViewStyle } from 'react-native'
+
+import type {
+  AppearanceConfig,
+  AppearanceKeysState,
+  AppearancePartialRecord,
+  AppearanceRecord,
+  AppearanceSizeKey,
+  AppearanceStyleKey,
+  BorderColorProps,
+  CompositeAppearanceKeys,
+  FillActiveProps,
+  FillProps,
+  TextColorProps,
+  TextSizeProps,
+  WidthProps,
+} from '@itcase/types-ui'
+
+import type { switchAlignPropsType } from './styles/switchAlign'
+import type { switchSizePropsType } from './styles/switchSize'
+
+interface SwitchAppearanceProps {
+  borderColor?: BorderColorProps
+  descTextColor?: TextColorProps
+  descTextSize?: TextSizeProps
+  fill?: FillProps
+  fillActive?: FillActiveProps
+  fillToggle?: FillProps
+  fillToggleActive?: FillActiveProps
+  size?: switchSizePropsType
+  titleTextColor?: TextColorProps
+  titleTextSize?: TextSizeProps
+}
+
+type SwitchAppearanceKey = AppearanceKeysState | CompositeAppearanceKeys
+type SwitchConfig = AppearanceConfig<AppearanceKeysState, SwitchAppearanceProps>
+type SwitchAppearance = SwitchConfig['appearance']
+type SwitchAppearanceStyle = AppearanceRecord<
+  AppearanceStyleKey,
+  SwitchAppearanceProps,
+  'borderColor' | 'fill'
+>
+type SwitchAppearanceSize = AppearancePartialRecord<
+  AppearanceSizeKey,
+  SwitchAppearanceProps,
+  'descTextSize' | 'size' | 'titleTextSize'
+>
+
+interface SwitchProps extends SwitchAppearanceProps {
+  isActive?: boolean
+  isDisabled?: boolean
+  onPress?: (event: GestureResponderEvent) => void
+  align?: switchAlignPropsType
+  appearance?: SwitchAppearanceKey
+  appearanceStyle?: AppearanceStyleKey
+  desc?: string
+  style?: StyleProp<ViewStyle>
+  title?: string
+  width?: WidthProps
+}
+
+export type {
+  SwitchAppearance,
+  SwitchAppearanceKey,
+  SwitchAppearanceProps,
+  SwitchAppearanceSize,
+  SwitchAppearanceStyle,
+  SwitchConfig,
+  SwitchProps,
+}

package/src/components/Switch/Switch.styles.ts

@@ -0,0 +1,11 @@
+import { switchStyles as switchBaseStyles } from './styles/switch'
+import { switchAlignStyles } from './styles/switchAlign'
+import { switchSizeStyles } from './styles/switchSize'
+
+const styles = {
+  ...switchBaseStyles,
+  ...switchAlignStyles,
+  ...switchSizeStyles,
+}
+
+export { styles }