@itcase/ui-react-native 1.10.85 → 1.10.87

package/src/components/Radio/stories/RadioStyle.stories.tsx

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

package/src/components/Radio/stories/RadioSuccess.stories.tsx

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

package/src/components/RangeSlider/RangeSlider.helpers.ts

@@ -0,0 +1,37 @@
+import type { FillProps } from '@itcase/types-ui'
+
+import { tokens } from '../../styles/tokens'
+
+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 resolveFillColor(fillKey?: FillProps) {
+  if (!fillKey || fillKey === 'none') {
+    return 'transparent'
+  }
+
+  const fillStyle = tokens[`fill_${fillKey}`]
+
+  if (
+    fillStyle &&
+    'backgroundColor' in fillStyle &&
+    typeof fillStyle.backgroundColor === 'string'
+  ) {
+    return fillStyle.backgroundColor
+  }
+
+  return 'transparent'
+}
+
+export { clampNumber, getSteppedValue, resolveFillColor }

package/src/components/RangeSlider/RangeSlider.tsx

@@ -1,30 +1,14 @@
-import { useCallback, useState } from 'react'
-import { PanResponder, View } from 'react-native'
+import { useCallback } from 'react'
+
+import CommunitySlider from '@react-native-community/slider'
 
-import { tokens } from '../../styles/tokens'
 import { Group } from '../Group'
-import type {
-  RangeSliderGesture,
-  RangeSliderProps,
-  RangeSliderValue,
-} from './RangeSlider.interface'
+import { resolveFillColor } from './RangeSlider.helpers'
+import type { RangeSliderProps } from './RangeSlider.interface'
 import { styles } from './RangeSlider.styles'
+import { RangeSliderCustom } from './RangeSliderCustom'
 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,
@@ -45,112 +29,22 @@ function RangeSlider(props: RangeSliderProps) {
     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) => {
+  const handleValueChange = useCallback(
+    (nextValue: number) => {
       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
-    },
-  })
+  // Native community slider has a single thumb; range stays on the custom track.
+  if (isRangeValue) {
+    return <RangeSliderCustom {...props} />
+  }
 
-  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
+  const sliderValue = typeof value === 'number' ? value : 0
 
   return (
     <Group
@@ -159,50 +53,20 @@ function RangeSlider(props: RangeSliderProps) {
       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>
+      <CommunitySlider
+        minimumTrackTintColor={resolveFillColor(fillTrack || 'accentPrimary')}
+        minimumValue={min}
+        maximumTrackTintColor={resolveFillColor(fillRail || 'surfaceTertiary')}
+        maximumValue={max}
+        disabled={isDisabled}
+        step={step}
+        style={styles.rangeSlider__control}
+        tapToSeek={true}
+        thumbSize={THUMB_SIZE}
+        thumbTintColor={resolveFillColor(fillHandle || 'accentPrimary')}
+        value={sliderValue}
+        onValueChange={handleValueChange}
+      />
       {children}
       {after}
     </Group>

package/src/components/RangeSlider/RangeSlider.web.tsx

@@ -0,0 +1,3 @@
+import { RangeSliderCustom as RangeSlider } from './RangeSliderCustom'
+
+export { RangeSlider }

package/src/components/RangeSlider/RangeSliderCustom.tsx

@@ -0,0 +1,199 @@
+import { useCallback, useState } from 'react'
+import { PanResponder, View } from 'react-native'
+
+import { tokens } from '../../styles/tokens'
+import { Group } from '../Group'
+import { clampNumber, getSteppedValue } from './RangeSlider.helpers'
+import type {
+  RangeSliderGesture,
+  RangeSliderProps,
+  RangeSliderValue,
+} from './RangeSlider.interface'
+import { styles } from './RangeSlider.styles'
+import { THUMB_SIZE } from './styles/rangeSlider'
+
+function RangeSliderCustom(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 { RangeSliderCustom }

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

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { RangeSlider } from '../RangeSlider'
+import type { RangeSliderProps } from '../RangeSlider.interface'
+
+const meta = {
+  title: 'Molecules / RangeSlider ',
+  component: RangeSlider,
+  args: {
+    min: 0,
+    max: 100,
+  },
+  parameters: {
+    layout: 'centered',
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/FcCWZlLa17BPr0zh3Wq9DO/ITCase---Molecules?node-id=13-61',
+    },
+  },
+} satisfies Meta<typeof RangeSlider>
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Disabled: Story = {
+  args: {
+    isDisabled: true,
+  },
+  render: (args: RangeSliderProps) => {
+    return <RangeSlider {...args} />
+  },
+}

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

@@ -10,6 +10,10 @@ const rangeSliderStyles = StyleSheet.create({
     minHeight: THUMB_SIZE,
     justifyContent: 'center',
   },
+  rangeSlider__control: {
+    width: '100%',
+    height: THUMB_SIZE,
+  },
   rangeSlider__rail: {
     width: '100%',
     height: TRACK_HEIGHT,

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

@@ -0,0 +1,75 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Response } from '../Response'
+import type { ResponseProps } from '../Response.interface'
+
+const meta = {
+  title: 'Molecules / Response / Confirm',
+  component: Response,
+  parameters: {
+    layout: 'centered',
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/FcCWZlLa17BPr0zh3Wq9DO/ITCase---Molecules?node-id=33-35525',
+    },
+  },
+} satisfies Meta<typeof Response>
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const IconTitleDesc: Story = {
+  args: {
+    title: 'Title',
+    text: 'Description',
+  },
+  render: (args: ResponseProps) => {
+    return <Response {...args} />
+  },
+}
+
+export const IconTitle: Story = {
+  args: {
+    title: 'Title',
+  },
+  render: (args: ResponseProps) => {
+    return <Response {...args} />
+  },
+}
+
+export const IconDesc: Story = {
+  args: {
+    text: 'Description',
+  },
+  render: (args: ResponseProps) => {
+    return <Response {...args} />
+  },
+}
+
+export const TitleDesc: Story = {
+  args: {
+    title: 'Title',
+    text: 'Description',
+  },
+  render: (args: ResponseProps) => {
+    return <Response {...args} />
+  },
+}
+
+export const Title: Story = {
+  args: {
+    title: 'Title',
+  },
+  render: (args: ResponseProps) => {
+    return <Response {...args} />
+  },
+}
+
+export const Desc: Story = {
+  args: {
+    text: 'Description',
+  },
+  render: (args: ResponseProps) => {
+    return <Response {...args} />
+  },
+}

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

@@ -0,0 +1,75 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Response } from '../Response'
+import type { ResponseProps } from '../Response.interface'
+
+const meta = {
+  title: 'Molecules / Response / Error',
+  component: Response,
+  parameters: {
+    layout: 'centered',
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/FcCWZlLa17BPr0zh3Wq9DO/ITCase---Molecules?node-id=33-35525',
+    },
+  },
+} satisfies Meta<typeof Response>
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const IconTitleDesc: Story = {
+  args: {
+    title: 'Title',
+    text: 'Description',
+  },
+  render: (args: ResponseProps) => {
+    return <Response {...args} />
+  },
+}
+
+export const IconTitle: Story = {
+  args: {
+    title: 'Title',
+  },
+  render: (args: ResponseProps) => {
+    return <Response {...args} />
+  },
+}
+
+export const IconDesc: Story = {
+  args: {
+    text: 'Description',
+  },
+  render: (args: ResponseProps) => {
+    return <Response {...args} />
+  },
+}
+
+export const TitleDesc: Story = {
+  args: {
+    title: 'Title',
+    text: 'Description',
+  },
+  render: (args: ResponseProps) => {
+    return <Response {...args} />
+  },
+}
+
+export const Title: Story = {
+  args: {
+    title: 'Title',
+  },
+  render: (args: ResponseProps) => {
+    return <Response {...args} />
+  },
+}
+
+export const Desc: Story = {
+  args: {
+    text: 'Description',
+  },
+  render: (args: ResponseProps) => {
+    return <Response {...args} />
+  },
+}