@itcase/ui-react-native 1.10.85 → 1.10.86

package/src/components/Response/stories/ResponseFail.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 / Fail',
+  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/ResponseNothingFound.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 / NothingFound',
+  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/ResponseRefresh.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 / Refresh',
+  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/ResponseSuccess.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 / Success',
+  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/ResponseUnableLoadData.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 / UnableLoadData',
+  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/ResponseWarning.stories.tsx

@@ -0,0 +1,85 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Response } from '../Response'
+import type { ResponseProps } from '../Response.interface'
+
+const meta = {
+  title: 'Molecules / Response / Warning',
+  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 Default: Story = {
+  args: {
+    title: 'Title',
+    text: 'Description',
+  },
+  render: (args: ResponseProps) => {
+    return <Response {...args} />
+  },
+}
+
+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/Scrollbar/stories/Scrollbar.stories.tsx

@@ -4,8 +4,9 @@ import type { Meta, StoryObj } from '@storybook/react'
 
 import { Text } from '../../Text'
 import { Scrollbar } from '../Scrollbar'
+import type { ScrollbarProps } from '../Scrollbar.interface'
 
-const longContent = (
+const scrollbarMock = (
   <Fragment>
     <Text>Line 1 — scroll me</Text>
     <Text>Line 2</Text>
@@ -22,40 +23,37 @@ const longContent = (
   </Fragment>
 )
 
-const ScrollbarMeta: Meta<typeof Scrollbar> = {
+const meta = {
   title: 'Molecules / Scrollbar',
   component: Scrollbar,
   args: {
     direction: 'vertical',
     scrollHeight: 120,
-    children: longContent,
+    children: scrollbarMock,
   },
-}
-
-export default ScrollbarMeta
+  parameters: {
+    layout: 'centered',
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/HmHn0BShJPXHU8SmuIP71M/ITCase---Atoms?node-id=31-79833',
+    },
+  },
+} satisfies Meta<typeof Scrollbar>
+export default meta
 
-export const Vertical: StoryObj<typeof Scrollbar> = {}
+type Story = StoryObj<typeof meta>
 
-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 Demo: Story = {
+  render: (args: ScrollbarProps) => {
+    return <Scrollbar {...args} />
   },
 }
 
-export const Tall: StoryObj<typeof Scrollbar> = {
+export const Height: Story = {
   args: {
-    scrollHeight: 240,
+    scrollHeight: 500,
+  },
+  render: (args: ScrollbarProps) => {
+    return <Scrollbar {...args} />
   },
 }

package/src/components/Search/Search.appearance.ts

@@ -0,0 +1,22 @@
+import { searchAppearanceDefault } from './appearance/searchDefault'
+import { searchAppearanceDisabled } from './appearance/searchDisabled'
+import { searchAppearanceError } from './appearance/searchError'
+import { searchAppearanceRequire } from './appearance/searchRequire'
+import { searchAppearanceShape } from './appearance/searchShape'
+import { searchAppearanceSize } from './appearance/searchSize'
+import { searchAppearanceStyle } from './appearance/searchStyle'
+import { searchAppearanceSuccess } from './appearance/searchSuccess'
+import type { SearchAppearance } from './Search.interface'
+
+const searchAppearance = {
+  ...searchAppearanceSize,
+  ...searchAppearanceStyle,
+  ...searchAppearanceDefault,
+  ...searchAppearanceError,
+  ...searchAppearanceSuccess,
+  ...searchAppearanceRequire,
+  ...searchAppearanceDisabled,
+  ...searchAppearanceShape,
+} satisfies SearchAppearance
+
+export { searchAppearance }

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

@@ -4,20 +4,110 @@ import type {
   ViewStyle,
 } from 'react-native'
 
-import type { BorderColorProps, FillProps } from '@itcase/types-ui'
+import type {
+  AppearanceConfig,
+  AppearanceKeysState,
+  AppearancePartialRecord,
+  AppearanceRecord,
+  AppearanceShapeKey,
+  AppearanceSizeKey,
+  AppearanceStyleKey,
+  BorderColorProps,
+  CompositeAppearanceStateDefault,
+  FillProps,
+  ShapeProps,
+  SizeProps,
+  WidthProps,
+} from '@itcase/types-ui'
 
-import type { SvgIconComponent } from '../Icon/Icon.interface'
+import type { ComponentGalleryArgs } from '../../storybook'
+import type { IconProps, SvgIconComponent } from '../Icon/Icon.interface'
+import type { TextProps } from '../Text/Text.interface'
 
-interface SearchProps {
-  onChangeInputText?: (text: string) => void
-  onSubmitEditing?: (event: TextInputSubmitEditingEvent) => void
+interface SearchAppearanceProps {
   borderColor?: BorderColorProps
   fill?: FillProps
+  iconAfter?: IconProps['SvgImage']
+  iconAfterFill?: IconProps['iconFill']
+  iconAfterSize?: IconProps['iconSize']
+  iconBefore?: IconProps['SvgImage']
+  iconBeforeFill?: IconProps['iconFill']
+  iconBeforeSize?: IconProps['iconSize']
+  iconClear?: IconProps['SvgImage']
+  iconClearFill?: IconProps['iconFill']
+  iconClearSize?: IconProps['iconSize']
+  inputTextColor?: TextProps['textColor']
+  inputTextSize?: TextProps['size']
+  inputTextWeight?: TextProps['weight']
+  placeholderTextColor?: TextProps['textColor']
+  placeholderTextSize?: TextProps['size']
+  shape?: ShapeProps
+  size?: SizeProps
+  width?: WidthProps
+}
+
+interface SearchProps extends SearchAppearanceProps {
+  isDisabled?: boolean
+  onChange?: (value: string) => void
+  onChangeInputText?: (text: string) => void
+  onClickClean?: () => void
+  onSubmitEditing?: (event: TextInputSubmitEditingEvent) => void
+  appearance?: CompositeAppearanceStateDefault
+  dataTestId?: string
   IconClose?: SvgIconComponent
   IconSearch?: SvgIconComponent
   inputValue?: string
   placeholder?: string
   style?: StyleProp<ViewStyle>
+  value?: string
 }
 
-export type { SearchProps }
+type SearchConfig = AppearanceConfig<AppearanceKeysState, SearchAppearanceProps>
+type SearchAppearance = SearchConfig['appearance']
+type SearchAppearanceStyle = AppearanceRecord<
+  AppearanceStyleKey,
+  SearchAppearanceProps,
+  Extract<keyof SearchAppearanceProps, 'borderColor' | 'fill'>
+>
+type SearchAppearanceShape = Partial<
+  Record<AppearanceShapeKey, Partial<Pick<SearchAppearanceProps, 'shape'>>>
+>
+type SearchAppearanceSize = AppearancePartialRecord<
+  AppearanceSizeKey,
+  SearchAppearanceProps,
+  Extract<
+    keyof SearchAppearanceProps,
+    | 'iconBefore'
+    | 'iconBeforeSize'
+    | 'iconClear'
+    | 'iconClearSize'
+    | 'inputTextSize'
+    | 'placeholderTextSize'
+    | 'size'
+  >
+>
+
+type SearchAppearanceKey = NonNullable<SearchProps['appearance']>
+
+type SearchGalleryStory = ComponentGalleryArgs &
+  Pick<SearchProps, 'inputValue' | 'isDisabled' | 'placeholder' | 'value'>
+
+type SearchStoryArgs = Omit<SearchProps, 'appearance'> & {
+  appearanceShape: string
+  appearanceSize: string
+  appearanceStyle: string
+  appearanceType: string
+}
+
+export type {
+  SearchAppearance,
+  SearchAppearanceKey,
+  SearchAppearanceProps,
+  SearchAppearanceShape,
+  SearchAppearanceSize,
+  SearchAppearanceStyle,
+  SearchConfig,
+  SearchGalleryStory,
+  SearchProps,
+  SearchStoryArgs,
+}

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

@@ -1,7 +1,13 @@
 import { searchStyles as searchBaseStyles } from './styles/search'
+import { searchShapeStyles } from './styles/searchShape'
+import { searchSizeStyles } from './styles/searchSize'
 
 const styles = {
   ...searchBaseStyles,
-}
+  ...searchShapeStyles,
+  ...searchSizeStyles,
+} as typeof searchBaseStyles &
+  typeof searchShapeStyles &
+  typeof searchSizeStyles
 
 export { styles }