@itcase/ui-react-native 1.10.81

package/src/components/Search/Search.tsx

@@ -0,0 +1,69 @@
+import React, { useCallback } from 'react'
+import { TextInput, View } from 'react-native'
+
+import { icons16 } from '@itcase/icons-default/default/svg'
+
+import { tokens } from '../../styles/tokens'
+import { Icon } from '../Icon'
+import type { SearchProps } from './Search.interface'
+import { styles } from './Search.styles'
+
+const IconCloseDefault = icons16.Action.Clear
+const IconSearchDefault = icons16.Security.Search
+
+const Search: React.FC<SearchProps> = (props) => {
+  const {
+    fill,
+    borderColor,
+    IconClose,
+    IconSearch,
+    inputValue,
+    placeholder,
+    style,
+    onChangeInputText,
+    onSubmitEditing,
+  } = props
+
+  const onPressIconClose = useCallback(() => {
+    onChangeInputText && onChangeInputText('')
+  }, [onChangeInputText])
+
+  return (
+    <View style={[styles.search, style]}>
+      <View
+        style={[
+          styles.search__wrapper,
+          fill && tokens[`fill_${fill}`],
+          borderColor && tokens[`border_color_${borderColor}`],
+        ]}
+      >
+        <Icon
+          fill="surfacePrimary"
+          iconFill="surfaceItemPrimary"
+          iconSize="16"
+          style={styles.search__before}
+          SVGIcon={IconSearch || IconSearchDefault}
+        />
+        <TextInput
+          placeholder={placeholder || 'Поиск'}
+          style={styles.search__input}
+          value={inputValue}
+          onChangeText={onChangeInputText}
+          onSubmitEditing={onSubmitEditing}
+        />
+        {inputValue && (
+          <Icon
+            fill="surfacePrimary"
+            iconFill="surfaceItemPrimary"
+            iconSize="16"
+            style={styles.search__after}
+            SVGIcon={IconClose || IconCloseDefault}
+            onPress={onPressIconClose}
+          />
+        )}
+      </View>
+    </View>
+  )
+}
+
+export { Search }

package/src/components/Search/index.ts

@@ -0,0 +1,5 @@
+import { Search } from './Search'
+import type { SearchProps } from './Search.interface'
+
+export { Search }
+export type { SearchProps }

package/src/components/Search/stories/Search.stories.tsx

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Search } from '../Search'
+
+const SearchMeta: Meta<typeof Search> = {
+  title: 'Atoms / Search',
+  component: Search,
+}
+
+export default SearchMeta
+
+const Default: StoryObj<typeof Search> = {
+  args: {
+    fill: 'surfacePrimary',
+    borderColor: 'successBorderPrimary',
+    style: { width: 200 },
+  },
+}
+
+export const Connect: StoryObj<typeof Search> = {
+  args: {
+    ...Default.args,
+  },
+}

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

@@ -0,0 +1,28 @@
+import { StyleSheet } from 'react-native'
+
+const searchStyles = StyleSheet.create({
+  search: {},
+  search__after: {
+    alignSelf: 'center',
+    paddingVertical: 5,
+    paddingHorizontal: 12,
+  },
+  search__before: {
+    alignSelf: 'center',
+    marginRight: 6,
+    marginLeft: 8,
+  },
+  search__input: {
+    flex: 1,
+    paddingVertical: 5,
+    fontSize: 16,
+    lineHeight: 20,
+  },
+  search__wrapper: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    borderRadius: 8,
+  },
+})
+
+export { searchStyles }

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

@@ -0,0 +1,22 @@
+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 type { SegmentedAppearance } from './Segmented.interface'
+
+const segmentedAppearance = {
+  ...segmentedAppearanceDisabled,
+  ...segmentedAppearanceSize,
+  ...segmentedAppearanceShape,
+  ...segmentedAppearanceStyle,
+  ...segmentedAppearanceError,
+  ...segmentedAppearanceSuccess,
+  ...segmentedAppearanceDefault,
+  ...segmentedAppearanceRequire,
+} satisfies SegmentedAppearance
+
+export { segmentedAppearance }

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

@@ -0,0 +1,101 @@
+import type { ReactNode } from 'react'
+import type { StyleProp, ViewStyle } from 'react-native'
+
+import type {
+  AppearanceConfig,
+  AppearanceKeysDefaultState,
+  AppearancePartialRecord,
+  AppearanceRecord,
+  AppearanceShapeKey,
+  AppearanceSizeKey,
+  AppearanceStyleKey,
+  BorderColorProps,
+  CompositeAppearanceStateDefault,
+  FillActiveProps,
+  FillProps,
+  TextColorProps,
+  TextSizeProps,
+  WidthProps,
+} from '@itcase/types-ui'
+
+import type { IconProps, SvgIconComponent } from '../Icon/Icon.interface'
+import type { segmentedShapePropsType } from './styles/segmentedShape'
+import type { segmentedSizePropsType } from './styles/segmentedSize'
+
+interface SegmentedAppearanceProps {
+  borderColor?: BorderColorProps
+  fill?: FillProps
+  fillActive?: FillActiveProps
+  iconFill?: IconProps['iconFill']
+  iconFillActive?: IconProps['iconFill']
+  iconFillDisabled?: IconProps['iconFill']
+  iconSize?: IconProps['iconSize']
+  indicatorFill?: FillProps
+  labelTextActiveColor?: TextColorProps
+  labelTextColor?: TextColorProps
+  labelTextSize?: TextSizeProps
+  shape?: segmentedShapePropsType
+  size?: segmentedSizePropsType
+  width?: WidthProps
+}
+
+type Segment = {
+  icon?: SvgIconComponent
+  iconActive?: SvgIconComponent
+  iconAfter?: SvgIconComponent
+  iconAfterActive?: SvgIconComponent
+  iconBefore?: SvgIconComponent
+  iconBeforeActive?: SvgIconComponent
+  label?: string
+  value: string
+}
+
+type SegmentedConfig = AppearanceConfig<
+  AppearanceKeysDefaultState,
+  SegmentedAppearanceProps
+>
+type SegmentedAppearance = SegmentedConfig['appearance']
+type SegmentedAppearanceStyle = AppearanceRecord<
+  AppearanceStyleKey,
+  SegmentedAppearanceProps,
+  'borderColor' | 'fill' | 'fillActive'
+>
+type SegmentedAppearanceShape = AppearancePartialRecord<
+  AppearanceShapeKey,
+  SegmentedAppearanceProps,
+  'shape'
+>
+type SegmentedAppearanceSize = AppearancePartialRecord<
+  AppearanceSizeKey,
+  SegmentedAppearanceProps,
+  'iconSize' | 'labelTextSize' | 'size'
+>
+
+interface SegmentedProps extends SegmentedAppearanceProps {
+  isDisabled?: boolean
+  onChange?: (value: string) => void
+  setActiveSegment?: (segment: Segment) => void
+  activeSegment?: Segment
+  after?: ReactNode
+  appearance?: CompositeAppearanceStateDefault
+  before?: ReactNode
+  segments: Segment[]
+  shape?: segmentedShapePropsType
+  size?: segmentedSizePropsType
+  style?: StyleProp<ViewStyle>
+  value?: string
+}
+
+type SegmentedAppearanceKey = NonNullable<SegmentedProps['appearance']>
+
+export type {
+  Segment,
+  SegmentedAppearance,
+  SegmentedAppearanceKey,
+  SegmentedAppearanceProps,
+  SegmentedAppearanceShape,
+  SegmentedAppearanceSize,
+  SegmentedAppearanceStyle,
+  SegmentedConfig,
+  SegmentedProps,
+}

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

@@ -0,0 +1,13 @@
+import { segmentedStyles as segmentedBaseStyles } from './styles/segmented'
+import { segmentedShapeStyles } from './styles/segmentedShape'
+import { segmentedSizeStyles } from './styles/segmentedSize'
+import { segmentedWidthStyles } from './styles/segmentedWidth'
+
+const styles = {
+  ...segmentedBaseStyles,
+  ...segmentedShapeStyles,
+  ...segmentedSizeStyles,
+  ...segmentedWidthStyles,
+}
+
+export { styles }

package/src/components/Segmented/Segmented.tsx

@@ -0,0 +1,219 @@
+import { useState } from 'react'
+import { Pressable, View } from 'react-native'
+
+import {
+  useAppearanceConfig,
+  useDevicePropsGenerator,
+} from '@itcase/ui-core/hooks'
+
+import { tokens } from '../../styles/tokens'
+import { Icon } from '../Icon'
+import { Text } from '../Text'
+import { segmentedAppearance } from './Segmented.appearance'
+import type {
+  Segment,
+  SegmentedConfig,
+  SegmentedProps,
+} from './Segmented.interface'
+import { styles } from './Segmented.styles'
+
+const DEFAULT_SEGMENTED_APPEARANCE = 'defaultPrimary sizeM solid rounded'
+
+const segmentedConfig: SegmentedConfig = {
+  appearance: {},
+  setAppearance: (newComponent) => {
+    segmentedConfig.appearance = newComponent
+  },
+}
+
+segmentedConfig.setAppearance(segmentedAppearance)
+
+function getSegmentByValue(segmentsList: Segment[], value?: string) {
+  if (!value) {
+    return undefined
+  }
+
+  return segmentsList.find((segment) => {
+    return segment.value === value
+  })
+}
+
+function getInitialSegment(props: SegmentedProps) {
+  const { activeSegment, segments, value } = props
+
+  return activeSegment || getSegmentByValue(segments, value) || segments[0]
+}
+
+function Segmented(props: SegmentedProps) {
+  const {
+    appearance = DEFAULT_SEGMENTED_APPEARANCE,
+    activeSegment,
+    segments,
+    style,
+    value,
+    before,
+    after,
+    isDisabled,
+    setActiveSegment,
+    onChange,
+  } = props
+
+  const isControlled = Boolean(setActiveSegment || onChange)
+  const [internalSegment, setInternalSegment] = useState<Segment | undefined>(
+    () => {
+      return getInitialSegment(props)
+    },
+  )
+
+  const appearanceConfig = useAppearanceConfig(
+    appearance,
+    segmentedConfig,
+    isDisabled,
+  )
+  const propsGenerator = useDevicePropsGenerator(props, appearanceConfig)
+
+  const {
+    width,
+    size,
+    fill,
+    fillActive,
+    labelTextActiveColor,
+    labelTextColor,
+    labelTextSize,
+    borderColor,
+    iconFill,
+    iconFillActive,
+    iconFillDisabled,
+    iconSize,
+    shape,
+  } = propsGenerator
+
+  const selectedSegment = isControlled
+    ? activeSegment || getSegmentByValue(segments, value) || internalSegment
+    : internalSegment || getInitialSegment(props)
+
+  const isFillWidth = width === 'fill'
+
+  function handleSegmentPress(segment: Segment) {
+    if (isDisabled) {
+      return
+    }
+
+    if (!isControlled) {
+      setInternalSegment(segment)
+    }
+
+    if (setActiveSegment) {
+      setActiveSegment(segment)
+    }
+
+    if (onChange) {
+      onChange(segment.value)
+    }
+  }
+
+  return (
+    <View
+      style={[
+        styles.segmented,
+        isFillWidth ? styles.segmented_width_fill : styles.segmented_width_hug,
+        fill && tokens[`fill_${fill}`],
+        borderColor && tokens[`border_color_${borderColor}`],
+        shape && styles[`segmented_shape_${shape}`],
+        style && style,
+      ]}
+    >
+      {before}
+      <View
+        style={[
+          styles.segmented__wrapper,
+          isFillWidth
+            ? styles.segmented_width_fill__wrapper
+            : styles.segmented_width_hug__wrapper,
+        ]}
+      >
+        {segments.map((segment) => {
+          const isActive = selectedSegment?.value === segment.value
+          const iconBeforeComponent = isActive
+            ? segment.iconBeforeActive || segment.iconBefore
+            : segment.iconBefore
+          const iconComponent = isActive
+            ? segment.iconActive || segment.icon
+            : segment.icon
+          const iconAfterComponent = isActive
+            ? segment.iconAfterActive || segment.iconAfter
+            : segment.iconAfter
+
+          return (
+            <Pressable
+              key={segment.value}
+              disabled={isDisabled}
+              style={[
+                styles.segmented__item,
+                size && styles[`segmented__item_size_${size}`],
+                isActive && fillActive && tokens[`fill_${fillActive}`],
+                isFillWidth
+                  ? styles.segmented_width_fill__item
+                  : styles.segmented_width_hug__item,
+              ]}
+              onPress={() => {
+                handleSegmentPress(segment)
+              }}
+            >
+              {iconBeforeComponent && (
+                <Icon
+                  size={iconSize}
+                  iconFill={iconFill}
+                  iconFillActive={iconFillActive}
+                  iconFillDisabled={iconFillDisabled}
+                  iconSize={iconSize}
+                  SVGIcon={iconBeforeComponent}
+                  isActive={isActive}
+                  isDisabled={isDisabled}
+                />
+              )}
+              {segment.label && (
+                <Text
+                  size={labelTextSize}
+                  textColor={labelTextColor}
+                  textColorActive={labelTextActiveColor}
+                  isActive={isActive}
+                  isDisabled={isDisabled}
+                >
+                  {segment.label}
+                </Text>
+              )}
+              {iconComponent && (
+                <Icon
+                  size={iconSize}
+                  iconFill={iconFill}
+                  iconFillActive={iconFillActive}
+                  iconFillDisabled={iconFillDisabled}
+                  iconSize={iconSize}
+                  SVGIcon={iconComponent}
+                  isActive={isActive}
+                  isDisabled={isDisabled}
+                />
+              )}
+              {iconAfterComponent && (
+                <Icon
+                  size={iconSize}
+                  iconFill={iconFill}
+                  iconFillActive={iconFillActive}
+                  iconFillDisabled={iconFillDisabled}
+                  iconSize={iconSize}
+                  SVGIcon={iconAfterComponent}
+                  isActive={isActive}
+                  isDisabled={isDisabled}
+                />
+              )}
+            </Pressable>
+          )
+        })}
+      </View>
+      {after}
+    </View>
+  )
+}
+
+export { Segmented, segmentedConfig }

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

@@ -0,0 +1,26 @@
+import type { SegmentedAppearance } from '../Segmented.interface'
+
+const segmentedAppearanceDefault = {
+  defaultPrimary: {
+    fill: 'surfacePrimary',
+    fillActive: 'accentPrimary',
+    labelTextActiveColor: 'accentTextPrimary',
+    labelTextColor: 'surfaceTextPrimary',
+    borderColor: 'surfaceBorderQuaternary',
+    iconFill: 'surfaceItemQuaternary',
+    iconFillActive: 'surfaceItemSecondary',
+    indicatorFill: 'accentPrimary',
+  },
+  defaultSecondary: {
+    fill: 'surfaceSecondary',
+    fillActive: 'accentPrimary',
+    labelTextActiveColor: 'accentTextPrimary',
+    labelTextColor: 'surfaceTextPrimary',
+    borderColor: 'surfaceBorderQuaternary',
+    iconFill: 'surfaceItemQuaternary',
+    iconFillActive: 'surfaceItemSecondary',
+    indicatorFill: 'accentPrimary',
+  },
+} satisfies SegmentedAppearance
+
+export { segmentedAppearanceDefault }

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

@@ -0,0 +1,15 @@
+import type { SegmentedAppearance } from '../Segmented.interface'
+
+const segmentedAppearanceDisabled = {
+  disabledPrimary: {
+    fill: 'surfaceDisabled',
+    fillActive: 'surfaceTertiary',
+    labelTextActiveColor: 'surfaceTextQuaternary',
+    labelTextColor: 'surfaceTextQuaternary',
+    borderColor: 'surfaceBorderPrimary',
+    iconFill: 'surfaceItemPrimary',
+    iconFillActive: 'surfaceItemPrimary',
+  },
+} satisfies SegmentedAppearance
+
+export { segmentedAppearanceDisabled }

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

@@ -0,0 +1,15 @@
+import type { SegmentedAppearance } from '../Segmented.interface'
+
+const segmentedAppearanceError = {
+  errorPrimary: {
+    fill: 'errorTertiary',
+    fillActive: 'errorPrimary',
+    labelTextActiveColor: 'errorTextPrimary',
+    labelTextColor: 'errorTextSecondary',
+    borderColor: 'errorBorderQuaternary',
+    iconFill: 'errorItemSecondary',
+    iconFillActive: 'errorItemTertiary',
+  },
+} satisfies SegmentedAppearance
+
+export { segmentedAppearanceError }

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

@@ -0,0 +1,14 @@
+import type { SegmentedAppearance } from '../Segmented.interface'
+
+const segmentedAppearanceRequire = {
+  requirePrimary: {
+    fill: 'warningTertiary',
+    fillActive: 'warningPrimary',
+    labelTextActiveColor: 'warningTextPrimary',
+    labelTextColor: 'warningTextSecondary',
+    borderColor: 'warningBorderSecondary',
+    iconFill: 'warningItemSecondary',
+  },
+} satisfies SegmentedAppearance
+
+export { segmentedAppearanceRequire }

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

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

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

@@ -0,0 +1,31 @@
+import type { SegmentedAppearanceSize } from '../Segmented.interface'
+
+const segmentedAppearanceSize = {
+  sizeL: {
+    size: 'l',
+    labelTextSize: 'm',
+    iconSize: '24',
+  },
+  sizeM: {
+    size: 'm',
+    labelTextSize: 'm',
+    iconSize: '24',
+  },
+  sizeS: {
+    size: 's',
+    labelTextSize: 's',
+    iconSize: '20',
+  },
+  sizeXS: {
+    size: 'xs',
+    labelTextSize: 'xs',
+    iconSize: '16',
+  },
+  sizeXXS: {
+    size: 'xxs',
+    labelTextSize: 'xxs',
+    iconSize: '16',
+  },
+} satisfies SegmentedAppearanceSize
+
+export { segmentedAppearanceSize }

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

@@ -0,0 +1,19 @@
+import type { SegmentedAppearanceStyle } from '../Segmented.interface'
+
+const segmentedAppearanceStyle = {
+  solid: {
+    borderColor: 'none',
+  },
+  outlined: {
+    fill: 'none',
+    fillActive: 'none',
+  },
+  full: {},
+  ghost: {
+    fill: 'none',
+    fillActive: 'none',
+    borderColor: 'none',
+  },
+} satisfies SegmentedAppearanceStyle
+
+export { segmentedAppearanceStyle }

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

@@ -0,0 +1,15 @@
+import type { SegmentedAppearance } from '../Segmented.interface'
+
+const segmentedAppearanceSuccess = {
+  successPrimary: {
+    fill: 'successTertiary',
+    fillActive: 'successSecondary',
+    labelTextActiveColor: 'successTextPrimary',
+    labelTextColor: 'successTextQuaternary',
+    borderColor: 'successBorderSecondary',
+    iconFill: 'successItemSecondary',
+    indicatorFill: 'accentPrimary',
+  },
+} satisfies SegmentedAppearance
+
+export { segmentedAppearanceSuccess }

package/src/components/Segmented/index.ts

@@ -0,0 +1,38 @@
+import { Segmented, segmentedConfig } from './Segmented'
+import { segmentedAppearance } from './Segmented.appearance'
+import type {
+  Segment,
+  SegmentedAppearance,
+  SegmentedAppearanceKey,
+  SegmentedAppearanceProps,
+  SegmentedAppearanceShape,
+  SegmentedAppearanceSize,
+  SegmentedAppearanceStyle,
+  SegmentedConfig,
+  SegmentedProps,
+} from './Segmented.interface'
+import { segmentedShapeList } from './styles/segmentedShape'
+import type { segmentedShapePropsType } from './styles/segmentedShape'
+import { segmentedSizeList } from './styles/segmentedSize'
+import type { segmentedSizePropsType } from './styles/segmentedSize'
+
+export {
+  Segmented,
+  segmentedAppearance,
+  segmentedConfig,
+  segmentedShapeList,
+  segmentedSizeList,
+}
+export type {
+  Segment,
+  SegmentedAppearance,
+  SegmentedAppearanceKey,
+  SegmentedAppearanceProps,
+  SegmentedAppearanceShape,
+  SegmentedAppearanceSize,
+  SegmentedAppearanceStyle,
+  SegmentedConfig,
+  SegmentedProps,
+  segmentedShapePropsType,
+  segmentedSizePropsType,
+}