@itcase/ui-react-native 1.10.81

package/src/components/RangeSlider/RangeSlider.tsx

@@ -0,0 +1,212 @@
+import { useCallback, useState } from 'react'
+import { PanResponder, View } from 'react-native'
+
+import { tokens } from '../../styles/tokens'
+import { Group } from '../Group'
+import type {
+  RangeSliderGesture,
+  RangeSliderProps,
+  RangeSliderValue,
+} from './RangeSlider.interface'
+import { styles } from './RangeSlider.styles'
+import { THUMB_SIZE } from './styles/rangeSlider'
+
+function clampNumber(value: number, min: number, max: number) {
+  return Math.min(max, Math.max(min, value))
+}
+
+function getSteppedValue(
+  value: number,
+  min: number,
+  max: number,
+  step: number,
+) {
+  const steppedValue = Math.round(value / step) * step
+  return clampNumber(Number(steppedValue.toFixed(10)), min, max)
+}
+
+function RangeSlider(props: RangeSliderProps) {
+  const {
+    width,
+    min = 0,
+    max = 100,
+    fillHandle,
+    fillRail,
+    fillTrack,
+    range,
+    step = 1,
+    style,
+    value = 0,
+    before,
+    after,
+    isDisabled,
+    onChangeSlider,
+    onValueChange,
+    children,
+  } = props
+
+  const [trackWidth, setTrackWidth] = useState(0)
+  const [gesture, setGesture] = useState<RangeSliderGesture | null>(null)
+
+  const isRangeValue = Array.isArray(value) || range === true
+  const startValue = Array.isArray(value) ? value[0] : min
+  const endValue = Array.isArray(value) ? value[1] : value
+  const currentRangeValue: [number, number] = Array.isArray(value)
+    ? value
+    : [min, value]
+
+  const notifyChange = useCallback(
+    (nextValue: RangeSliderValue) => {
+      onValueChange?.(nextValue)
+      onChangeSlider?.(nextValue)
+    },
+    [onChangeSlider, onValueChange],
+  )
+
+  const getValueFromPosition = useCallback(
+    (position: number) => {
+      if (trackWidth <= 0) {
+        return min
+      }
+
+      const ratio = clampNumber(position / trackWidth, 0, 1)
+      const rawValue = min + ratio * (max - min)
+      return getSteppedValue(rawValue, min, max, step)
+    },
+    [max, min, step, trackWidth],
+  )
+
+  const panResponder = PanResponder.create({
+    onMoveShouldSetPanResponder: () => {
+      return !isDisabled
+    },
+    onPanResponderGrant: (event) => {
+      const nextValue = getValueFromPosition(event.nativeEvent.locationX)
+
+      if (!isRangeValue) {
+        notifyChange(nextValue)
+        return
+      }
+
+      const distanceToStart = Math.abs(nextValue - currentRangeValue[0])
+      const distanceToEnd = Math.abs(nextValue - currentRangeValue[1])
+      const thumbKey = distanceToStart <= distanceToEnd ? 'start' : 'end'
+      setGesture({
+        rangeValue: currentRangeValue,
+        thumb: thumbKey,
+      })
+
+      if (thumbKey === 'start') {
+        notifyChange([
+          Math.min(nextValue, currentRangeValue[1]),
+          currentRangeValue[1],
+        ])
+        return
+      }
+
+      notifyChange([
+        currentRangeValue[0],
+        Math.max(nextValue, currentRangeValue[0]),
+      ])
+    },
+    onPanResponderMove: (event) => {
+      const nextValue = getValueFromPosition(event.nativeEvent.locationX)
+
+      if (!isRangeValue) {
+        notifyChange(nextValue)
+        return
+      }
+
+      const lockedRangeValue = gesture?.rangeValue || currentRangeValue
+      const thumbKey = gesture?.thumb
+      const distanceToStart = Math.abs(nextValue - lockedRangeValue[0])
+      const distanceToEnd = Math.abs(nextValue - lockedRangeValue[1])
+      const resolvedThumb =
+        thumbKey || (distanceToStart <= distanceToEnd ? 'start' : 'end')
+
+      if (resolvedThumb === 'start') {
+        notifyChange([
+          Math.min(nextValue, lockedRangeValue[1]),
+          lockedRangeValue[1],
+        ])
+        return
+      }
+
+      notifyChange([
+        lockedRangeValue[0],
+        Math.max(nextValue, lockedRangeValue[0]),
+      ])
+    },
+    onPanResponderRelease: () => {
+      setGesture(null)
+    },
+    onStartShouldSetPanResponder: () => {
+      return !isDisabled
+    },
+  })
+
+  const startOffset =
+    trackWidth === 0 ? 0 : ((startValue - min) / (max - min)) * trackWidth
+  const endOffset =
+    trackWidth === 0 ? 0 : ((endValue - min) / (max - min)) * trackWidth
+  const trackFillLeft = isRangeValue ? startOffset : 0
+  const trackFillWidth = isRangeValue ? endOffset - startOffset : endOffset
+
+  return (
+    <Group
+      width={width}
+      direction="vertical"
+      style={[styles.rangeSlider, style && style]}
+    >
+      {before}
+      <View
+        style={styles.rangeSlider__track}
+        onLayout={(event) => {
+          setTrackWidth(event.nativeEvent.layout.width)
+        }}
+        {...panResponder.panHandlers}
+      >
+        <View
+          pointerEvents="none"
+          style={[
+            styles.rangeSlider__rail,
+            tokens[`fill_${fillRail || 'surfaceTertiary'}`],
+          ]}
+        />
+        <View
+          pointerEvents="none"
+          style={[
+            styles.rangeSlider__trackFill,
+            tokens[`fill_${fillTrack || 'accentPrimary'}`],
+            {
+              width: Math.max(trackFillWidth, 0),
+              left: trackFillLeft,
+            },
+          ]}
+        />
+        {isRangeValue && (
+          <View
+            pointerEvents="none"
+            style={[
+              styles.rangeSlider__thumb,
+              tokens[`fill_${fillHandle || 'accentPrimary'}`],
+              { left: startOffset - THUMB_SIZE / 2 },
+            ]}
+          />
+        )}
+        <View
+          pointerEvents="none"
+          style={[
+            styles.rangeSlider__thumb,
+            tokens[`fill_${fillHandle || 'accentPrimary'}`],
+            { left: endOffset - THUMB_SIZE / 2 },
+          ]}
+        />
+      </View>
+      {children}
+      {after}
+    </Group>
+  )
+}
+
+export { RangeSlider }

package/src/components/RangeSlider/index.ts

@@ -0,0 +1,9 @@
+import { RangeSlider } from './RangeSlider'
+import type {
+  RangeSliderProps,
+  RangeSliderValue,
+} from './RangeSlider.interface'
+import { THUMB_SIZE } from './styles/rangeSlider'
+
+export { RangeSlider, THUMB_SIZE }
+export type { RangeSliderProps, RangeSliderValue }

package/src/components/RangeSlider/stories/RangeSlider.stories.tsx

@@ -0,0 +1,55 @@
+import { useState } from 'react'
+
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { RangeSlider } from '../RangeSlider'
+import type { RangeSliderProps } from '../RangeSlider.interface'
+
+function RangeSliderPlayground(props: RangeSliderProps) {
+  const { value, onValueChange, ...restProps } = props
+  const [sliderValue, setSliderValue] = useState(value ?? 20)
+
+  return (
+    <RangeSlider
+      {...restProps}
+      value={sliderValue}
+      onValueChange={(nextValue) => {
+        setSliderValue(nextValue)
+        onValueChange?.(nextValue)
+      }}
+    />
+  )
+}
+
+const RangeSliderMeta: Meta<typeof RangeSlider> = {
+  title: 'Molecules / RangeSlider',
+  component: RangeSlider,
+  args: {
+    min: 0,
+    max: 100,
+    step: 1,
+    value: 20,
+  },
+}
+
+export default RangeSliderMeta
+
+export const Default: StoryObj<typeof RangeSlider> = {
+  render: (args) => <RangeSliderPlayground {...args} />,
+}
+
+export const Range: StoryObj<typeof RangeSlider> = {
+  args: {
+    range: true,
+    value: [20, 70],
+  },
+  render: (args) => <RangeSliderPlayground {...args} />,
+}
+
+export const Disabled: StoryObj<typeof RangeSlider> = {
+  args: {
+    value: 40,
+    isDisabled: true,
+  },
+  render: (args) => <RangeSliderPlayground {...args} />,
+}

package/src/components/RangeSlider/styles/rangeSlider.ts

@@ -0,0 +1,37 @@
+import { StyleSheet } from 'react-native'
+
+const THUMB_SIZE = 20
+
+const TRACK_HEIGHT = 4
+
+const rangeSliderStyles = StyleSheet.create({
+  rangeSlider: {
+    width: '100%',
+    minHeight: THUMB_SIZE,
+    justifyContent: 'center',
+  },
+  rangeSlider__rail: {
+    width: '100%',
+    height: TRACK_HEIGHT,
+    borderRadius: 2,
+  },
+  rangeSlider__thumb: {
+    width: THUMB_SIZE,
+    height: THUMB_SIZE,
+    position: 'absolute',
+    top: (TRACK_HEIGHT - THUMB_SIZE) / 2,
+    borderRadius: THUMB_SIZE / 2,
+  },
+  rangeSlider__track: {
+    width: '100%',
+    height: TRACK_HEIGHT,
+    justifyContent: 'center',
+  },
+  rangeSlider__trackFill: {
+    height: TRACK_HEIGHT,
+    position: 'absolute',
+    borderRadius: 2,
+  },
+})
+
+export { rangeSliderStyles, THUMB_SIZE }

package/src/components/Response/Response.interface.ts

@@ -0,0 +1,29 @@
+import type { ReactNode } from 'react'
+import type { StyleProp, TextStyle } from 'react-native'
+
+import type {
+  FillProps,
+  TextColorProps,
+  TextSizeProps,
+  TextWeightProps,
+  TitleSizeProps,
+} from '@itcase/types-ui'
+
+interface ResponseProps {
+  after?: ReactNode
+  afterContent?: ReactNode
+  before?: ReactNode
+  beforeContent?: ReactNode
+  fill?: FillProps
+  text?: string
+  textColor?: TextColorProps
+  textSize?: TextSizeProps
+  textStyle?: StyleProp<TextStyle>
+  title?: string
+  titleColor?: TextColorProps
+  titleSize?: TitleSizeProps
+  titleStyle?: StyleProp<TextStyle>
+  titleWeight?: TextWeightProps
+}
+
+export type { ResponseProps }

package/src/components/Response/Response.styles.ts

@@ -0,0 +1,7 @@
+import { responseStyles as responseBaseStyles } from './styles/response'
+
+const styles = {
+  ...responseBaseStyles,
+}
+
+export { styles }

package/src/components/Response/Response.tsx

@@ -0,0 +1,68 @@
+import React from 'react'
+import { View } from 'react-native'
+
+import { useStyles } from '@itcase/ui-core/hooks/useStylesReactNative'
+
+import { tokens } from '../../styles/tokens'
+import { Text } from '../Text'
+import { Title } from '../Title'
+import type { ResponseProps } from './Response.interface'
+import { styles } from './Response.styles'
+
+const Response: React.FC<ResponseProps> = (props) => {
+  const {
+    fill,
+    title,
+    titleColor,
+    titleSize,
+    titleStyle,
+    titleWeight,
+    text,
+    textColor,
+    textSize,
+    textStyle,
+    afterContent,
+    beforeContent,
+    before,
+    after,
+  } = props
+
+  // @ts-expect-error
+  const { styles: responseStyles } = useStyles(props)
+
+  return (
+    <View
+      style={[
+        styles.response,
+        fill && tokens[`fill_${fill}`],
+        responseStyles && responseStyles,
+      ]}
+    >
+      {before}
+      <View style={styles.response__wrapper}>
+        {beforeContent}
+        <View style={styles.response__wrapper_inner}>
+          {title && (
+            <Title
+              size={titleSize}
+              textColor={titleColor}
+              style={titleStyle}
+              weight={titleWeight}
+            >
+              {title}
+            </Title>
+          )}
+          {text && (
+            <Text size={textSize} textColor={textColor} style={textStyle}>
+              {text}
+            </Text>
+          )}
+        </View>
+        {afterContent}
+      </View>
+      {after}
+    </View>
+  )
+}
+
+export { Response }

package/src/components/Response/index.ts

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

package/src/components/Response/stories/Response.stories.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+
+import type { Meta, StoryObj } from '@storybook/react'
+
+import RejectImage from '../../../icons/reject.svg'
+import { Response } from '../Response'
+
+const ResponseMeta: Meta<typeof Response> = {
+  title: 'Molecules / Response',
+  component: Response,
+}
+
+export default ResponseMeta
+
+export const Default: StoryObj<typeof Response> = {
+  args: {
+    title: 'Response title',
+    titleSize: 'h4',
+    text: 'Response text',
+    beforeContent: <RejectImage width={179} height={179} />,
+  },
+}

package/src/components/Response/styles/response.ts

@@ -0,0 +1,22 @@
+import { StyleSheet } from 'react-native'
+
+const responseStyles = StyleSheet.create({
+  response: {
+    flex: 1,
+    justifyContent: 'space-between',
+    gap: 32,
+  },
+  response__wrapper: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    gap: 32,
+  },
+  response__wrapper_inner: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    gap: 8,
+  },
+})
+
+export { responseStyles }

package/src/components/Scrollbar/Scrollbar.interface.ts

@@ -0,0 +1,19 @@
+import type { ReactNode } from 'react'
+import type {
+  NativeScrollEvent,
+  NativeSyntheticEvent,
+  StyleProp,
+  ViewStyle,
+} from 'react-native'
+
+import type { DirectionHVProps } from '@itcase/types-ui'
+
+interface ScrollbarProps {
+  onScroll?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void
+  children?: ReactNode
+  direction?: DirectionHVProps
+  scrollHeight?: number | string
+  style?: StyleProp<ViewStyle>
+}
+
+export type { ScrollbarProps }

package/src/components/Scrollbar/Scrollbar.styles.ts

@@ -0,0 +1,7 @@
+import { scrollbarStyles as scrollbarBaseStyles } from './styles/scrollbar'
+
+const styles = {
+  ...scrollbarBaseStyles,
+}
+
+export { styles }

package/src/components/Scrollbar/Scrollbar.tsx

@@ -0,0 +1,38 @@
+import { ScrollView } from 'react-native'
+
+import type { ScrollbarProps } from './Scrollbar.interface'
+import { styles } from './Scrollbar.styles'
+
+const DEFAULT_SCROLLBAR_DIRECTION = 'vertical'
+const DEFAULT_SCROLL_HEIGHT = 200
+
+function Scrollbar(props: ScrollbarProps) {
+  const { direction, scrollHeight, style, onScroll, children } = props
+
+  const directionKey = direction || DEFAULT_SCROLLBAR_DIRECTION
+  const isHorizontal = directionKey === 'horizontal'
+  const heightValue = scrollHeight ?? DEFAULT_SCROLL_HEIGHT
+  const parsedHeight =
+    typeof heightValue === 'number' ? heightValue : Number(heightValue)
+
+  return (
+    <ScrollView
+      horizontal={isHorizontal}
+      showsHorizontalScrollIndicator={isHorizontal}
+      showsVerticalScrollIndicator={!isHorizontal}
+      style={[
+        styles.scrollbar,
+        isHorizontal && styles.scrollbar_horizontal,
+        !isHorizontal && Number.isFinite(parsedHeight)
+          ? { maxHeight: parsedHeight }
+          : undefined,
+        style && style,
+      ]}
+      onScroll={onScroll}
+    >
+      {children}
+    </ScrollView>
+  )
+}
+
+export { Scrollbar }

package/src/components/Scrollbar/index.ts

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

package/src/components/Scrollbar/stories/Scrollbar.stories.tsx

@@ -0,0 +1,61 @@
+import { Fragment } from 'react'
+
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Text } from '../../Text'
+import { Scrollbar } from '../Scrollbar'
+
+const longContent = (
+  <Fragment>
+    <Text>Line 1 — scroll me</Text>
+    <Text>Line 2</Text>
+    <Text>Line 3</Text>
+    <Text>Line 4</Text>
+    <Text>Line 5</Text>
+    <Text>Line 6</Text>
+    <Text>Line 7</Text>
+    <Text>Line 8</Text>
+    <Text>Line 9</Text>
+    <Text>Line 10</Text>
+    <Text>Line 11</Text>
+    <Text>Line 12</Text>
+  </Fragment>
+)
+
+const ScrollbarMeta: Meta<typeof Scrollbar> = {
+  title: 'Molecules / Scrollbar',
+  component: Scrollbar,
+  args: {
+    direction: 'vertical',
+    scrollHeight: 120,
+    children: longContent,
+  },
+}
+
+export default ScrollbarMeta
+
+export const Vertical: StoryObj<typeof Scrollbar> = {}
+
+export const Horizontal: StoryObj<typeof Scrollbar> = {
+  args: {
+    direction: 'horizontal',
+    children: (
+      <Fragment>
+        <Text>Alpha</Text>
+        <Text>Beta</Text>
+        <Text>Gamma</Text>
+        <Text>Delta</Text>
+        <Text>Epsilon</Text>
+        <Text>Zeta</Text>
+        <Text>Eta</Text>
+        <Text>Theta</Text>
+      </Fragment>
+    ),
+  },
+}
+
+export const Tall: StoryObj<typeof Scrollbar> = {
+  args: {
+    scrollHeight: 240,
+  },
+}

package/src/components/Scrollbar/styles/scrollbar.ts

@@ -0,0 +1,12 @@
+import { StyleSheet } from 'react-native'
+
+const scrollbarStyles = StyleSheet.create({
+  scrollbar: {
+    flexGrow: 0,
+  },
+  scrollbar_horizontal: {
+    flexDirection: 'row',
+  },
+})
+
+export { scrollbarStyles }

package/src/components/Search/Search.interface.ts

@@ -0,0 +1,23 @@
+import type {
+  StyleProp,
+  TextInputSubmitEditingEvent,
+  ViewStyle,
+} from 'react-native'
+
+import type { BorderColorProps, FillProps } from '@itcase/types-ui'
+
+import type { SvgIconComponent } from '../Icon/Icon.interface'
+
+interface SearchProps {
+  onChangeInputText?: (text: string) => void
+  onSubmitEditing?: (event: TextInputSubmitEditingEvent) => void
+  borderColor?: BorderColorProps
+  fill?: FillProps
+  IconClose?: SvgIconComponent
+  IconSearch?: SvgIconComponent
+  inputValue?: string
+  placeholder?: string
+  style?: StyleProp<ViewStyle>
+}
+
+export type { SearchProps }

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

@@ -0,0 +1,7 @@
+import { searchStyles as searchBaseStyles } from './styles/search'
+
+const styles = {
+  ...searchBaseStyles,
+}
+
+export { styles }