@itcase/ui-react-native 1.10.81

package/src/components/Loader/Loader.interface.ts

@@ -0,0 +1,75 @@
+import type { ColorValue, StyleProp, ViewStyle } from 'react-native'
+
+import type {
+  AppearanceConfig,
+  AppearanceKeysDefault,
+  AppearancePartialRecord,
+  AppearanceRecord,
+  AppearanceShapeKey,
+  AppearanceSizeKey,
+  AppearanceStyleKey,
+  BorderColorProps,
+  CompositeAppearanceKeys,
+  FillProps,
+  ItemFillProps,
+  ShapeProps,
+  SizeProps,
+  TextColorProps,
+  TextSizeProps,
+} from '@itcase/types-ui'
+
+import type { loaderShapePropsType } from './styles/loaderShape'
+import type { loaderSizePropsType } from './styles/loaderSize'
+
+interface LoaderAppearanceProps {
+  borderColor?: BorderColorProps
+  fill?: FillProps
+  itemFill?: ItemFillProps
+  shape?: ShapeProps
+  size?: SizeProps
+  textColor?: TextColorProps
+  textSize?: TextSizeProps
+}
+
+type LoaderConfig = AppearanceConfig<
+  AppearanceKeysDefault,
+  LoaderAppearanceProps
+>
+type LoaderAppearance = LoaderConfig['appearance']
+type LoaderAppearanceStyle = AppearanceRecord<
+  AppearanceStyleKey,
+  LoaderAppearanceProps,
+  'borderColor' | 'fill'
+>
+type LoaderAppearanceShape = Partial<
+  Record<AppearanceShapeKey, Partial<Pick<LoaderAppearanceProps, 'shape'>>>
+>
+type LoaderAppearanceSize = AppearancePartialRecord<
+  AppearanceSizeKey,
+  LoaderAppearanceProps,
+  'size' | 'textSize'
+>
+type LoaderAppearanceKey = AppearanceKeysDefault | CompositeAppearanceKeys
+
+interface LoaderProps extends LoaderAppearanceProps {
+  appearance?: LoaderAppearanceKey
+  loaderColor?: ColorValue
+  loaderSize?: number | 'large' | 'small'
+  loaderTextColor?: TextColorProps
+  loaderTextSize?: TextSizeProps
+  shape?: loaderShapePropsType
+  size?: loaderSizePropsType
+  style?: StyleProp<ViewStyle>
+  text?: string
+}
+
+export type {
+  LoaderAppearance,
+  LoaderAppearanceKey,
+  LoaderAppearanceProps,
+  LoaderAppearanceShape,
+  LoaderAppearanceSize,
+  LoaderAppearanceStyle,
+  LoaderConfig,
+  LoaderProps,
+}

package/src/components/Loader/Loader.styles.ts

@@ -0,0 +1,11 @@
+import { loaderStyles as loaderBaseStyles } from './styles/loader'
+import { loaderShapeStyles } from './styles/loaderShape'
+import { loaderSizeStyles } from './styles/loaderSize'
+
+const styles = {
+  ...loaderBaseStyles,
+  ...loaderShapeStyles,
+  ...loaderSizeStyles,
+}
+
+export { styles }

package/src/components/Loader/Loader.tsx

@@ -0,0 +1,135 @@
+import { useMemo } from 'react'
+import { ActivityIndicator, View } from 'react-native'
+
+import { tokens } from '../../styles/tokens'
+import { Text } from '../Text'
+import { loaderAppearance } from './Loader.appearance'
+import type {
+  LoaderAppearanceProps,
+  LoaderConfig,
+  LoaderProps,
+} from './Loader.interface'
+import { styles } from './Loader.styles'
+
+const loaderConfig: LoaderConfig = {
+  appearance: {},
+  setAppearance: (newComponent) => {
+    loaderConfig.appearance = newComponent
+  },
+}
+
+loaderConfig.setAppearance(loaderAppearance)
+
+function getActivityIndicatorSize(
+  loaderSize: LoaderProps['loaderSize'],
+  sizeKey: LoaderAppearanceProps['size'],
+) {
+  if (loaderSize) {
+    return loaderSize
+  }
+
+  if (sizeKey === 's') {
+    return 'small'
+  }
+
+  return 'large'
+}
+
+function getSpinnerColor(
+  loaderColor: LoaderProps['loaderColor'],
+  itemFillKey: LoaderAppearanceProps['itemFill'],
+) {
+  if (loaderColor) {
+    return loaderColor
+  }
+
+  if (!itemFillKey) {
+    return undefined
+  }
+
+  const iconFillStyle = tokens[`icon_fill_${itemFillKey}`]
+
+  if (iconFillStyle && 'color' in iconFillStyle) {
+    return iconFillStyle.color
+  }
+
+  return undefined
+}
+
+function Loader(props: LoaderProps) {
+  const {
+    appearance,
+    size,
+    fill,
+    borderColor,
+    text,
+    itemFill,
+    loaderColor,
+    loaderSize,
+    loaderTextColor,
+    loaderTextSize,
+    shape,
+    style,
+  } = props
+
+  const appearanceConfig = useMemo(() => {
+    if (!appearance || !loaderConfig.appearance) {
+      return undefined
+    }
+
+    const appearanceKeysList = appearance.split(' ')
+
+    return appearanceKeysList.reduce<LoaderAppearanceProps>(
+      (resultConfig, appearanceKey) => {
+        const appearanceMap = loaderConfig.appearance
+
+        if (!appearanceMap) {
+          return resultConfig
+        }
+
+        const appearanceEntry = Object.entries(appearanceMap).find((entry) => {
+          return entry[0] === appearanceKey
+        })
+
+        if (!appearanceEntry) {
+          return resultConfig
+        }
+
+        return Object.assign(resultConfig, appearanceEntry[1])
+      },
+      {},
+    )
+  }, [appearance])
+
+  const fillKey = fill || appearanceConfig?.fill
+  const sizeKey = size || appearanceConfig?.size
+  const shapeKey = shape || appearanceConfig?.shape
+  const borderColorKey = borderColor || appearanceConfig?.borderColor
+  const textColorKey = loaderTextColor || appearanceConfig?.textColor
+  const textSizeKey = loaderTextSize || appearanceConfig?.textSize
+  const itemFillKey = itemFill || appearanceConfig?.itemFill
+  const spinnerColor = getSpinnerColor(loaderColor, itemFillKey)
+  const activityIndicatorSize = getActivityIndicatorSize(loaderSize, sizeKey)
+
+  return (
+    <View
+      style={[
+        styles.loader,
+        fillKey && tokens[`fill_${fillKey}`],
+        borderColorKey && tokens[`border_color_${borderColorKey}`],
+        sizeKey && styles[`loader_size_${sizeKey}`],
+        shapeKey && styles[`loader_shape_${shapeKey}`],
+        style && style,
+      ]}
+    >
+      <ActivityIndicator size={activityIndicatorSize} color={spinnerColor} />
+      {text && (
+        <Text size={textSizeKey} textColor={textColorKey}>
+          {text}
+        </Text>
+      )}
+    </View>
+  )
+}
+
+export { Loader, loaderConfig }

package/src/components/Loader/appearance/loaderAccent.ts

@@ -0,0 +1,16 @@
+import type { LoaderAppearance } from '../Loader.interface'
+
+const loaderAppearanceAccent = {
+  accentPrimary: {
+    fill: 'accentPrimary',
+    borderColor: 'surfaceBorderSecondary',
+    itemFill: 'accentItemPrimary',
+  },
+  accentTertiary: {
+    fill: 'accentTertiary',
+    borderColor: 'surfaceBorderSecondary',
+    itemFill: 'accentItemSecondary',
+  },
+} satisfies LoaderAppearance
+
+export { loaderAppearanceAccent }

package/src/components/Loader/appearance/loaderDanger.ts

@@ -0,0 +1,11 @@
+import type { LoaderAppearance } from '../Loader.interface'
+
+const loaderAppearanceDanger = {
+  dangerPrimary: {
+    fill: 'dangerPrimary',
+    borderColor: 'surfaceBorderSecondary',
+    itemFill: 'dangerItemPrimary',
+  },
+} satisfies LoaderAppearance
+
+export { loaderAppearanceDanger }

package/src/components/Loader/appearance/loaderError.ts

@@ -0,0 +1,11 @@
+import type { LoaderAppearance } from '../Loader.interface'
+
+const loaderAppearanceError = {
+  errorPrimary: {
+    fill: 'errorPrimary',
+    borderColor: 'surfaceBorderSecondary',
+    itemFill: 'errorItemPrimary',
+  },
+} satisfies LoaderAppearance
+
+export { loaderAppearanceError }

package/src/components/Loader/appearance/loaderExtra.ts

@@ -0,0 +1,11 @@
+import type { LoaderAppearance } from '../Loader.interface'
+
+const loaderAppearanceExtra = {
+  extraPrimary: {
+    fill: 'extraPrimary',
+    borderColor: 'surfaceBorderSecondary',
+    itemFill: 'extraItemPrimary',
+  },
+} satisfies LoaderAppearance
+
+export { loaderAppearanceExtra }

package/src/components/Loader/appearance/loaderInfo.ts

@@ -0,0 +1,11 @@
+import type { LoaderAppearance } from '../Loader.interface'
+
+const loaderAppearanceInfo = {
+  infoPrimary: {
+    fill: 'infoPrimary',
+    borderColor: 'surfaceBorderSecondary',
+    itemFill: 'infoItemPrimary',
+  },
+} satisfies LoaderAppearance
+
+export { loaderAppearanceInfo }

package/src/components/Loader/appearance/loaderShape.ts

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

package/src/components/Loader/appearance/loaderSize.ts

@@ -0,0 +1,18 @@
+import type { LoaderAppearanceSize } from '../Loader.interface'
+
+const loaderAppearanceSize = {
+  sizeL: {
+    size: 'l',
+    textSize: 'm',
+  },
+  sizeM: {
+    size: 'm',
+    textSize: 's',
+  },
+  sizeS: {
+    size: 's',
+    textSize: 'xs',
+  },
+} satisfies LoaderAppearanceSize
+
+export { loaderAppearanceSize }

package/src/components/Loader/appearance/loaderSpecial.ts

@@ -0,0 +1,11 @@
+import type { LoaderAppearance } from '../Loader.interface'
+
+const loaderAppearanceSpecial = {
+  specialPrimary: {
+    fill: 'specialPrimary',
+    borderColor: 'surfaceBorderSecondary',
+    itemFill: 'specialItemPrimary',
+  },
+} satisfies LoaderAppearance
+
+export { loaderAppearanceSpecial }

package/src/components/Loader/appearance/loaderStyle.ts

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

package/src/components/Loader/appearance/loaderSuccess.ts

@@ -0,0 +1,11 @@
+import type { LoaderAppearance } from '../Loader.interface'
+
+const loaderAppearanceSuccess = {
+  successPrimary: {
+    fill: 'successPrimary',
+    borderColor: 'surfaceBorderSecondary',
+    itemFill: 'successItemPrimary',
+  },
+} satisfies LoaderAppearance
+
+export { loaderAppearanceSuccess }

package/src/components/Loader/appearance/loaderSurface.ts

@@ -0,0 +1,26 @@
+import type { LoaderAppearance } from '../Loader.interface'
+
+const loaderAppearanceSurface = {
+  surfacePrimary: {
+    fill: 'surfacePrimary',
+    borderColor: 'surfaceBorderPrimary',
+    itemFill: 'surfaceItemPrimary',
+  },
+  surfaceQuaternary: {
+    fill: 'surfaceQuaternary',
+    borderColor: 'surfaceBorderPrimary',
+    itemFill: 'surfaceItemPrimary',
+  },
+  surfaceSecondary: {
+    fill: 'surfaceSecondary',
+    borderColor: 'surfaceBorderPrimary',
+    itemFill: 'surfaceItemPrimary',
+  },
+  surfaceTertiary: {
+    fill: 'surfaceTertiary',
+    borderColor: 'surfaceBorderPrimary',
+    itemFill: 'surfaceItemPrimary',
+  },
+} satisfies LoaderAppearance
+
+export { loaderAppearanceSurface }

package/src/components/Loader/appearance/loaderWarning.ts

@@ -0,0 +1,11 @@
+import type { LoaderAppearance } from '../Loader.interface'
+
+const loaderAppearanceWarning = {
+  warningPrimary: {
+    fill: 'warningPrimary',
+    borderColor: 'surfaceBorderSecondary',
+    itemFill: 'warningItemPrimary',
+  },
+} satisfies LoaderAppearance
+
+export { loaderAppearanceWarning }

package/src/components/Loader/index.ts

@@ -0,0 +1,36 @@
+import { Loader, loaderConfig } from './Loader'
+import { loaderAppearance } from './Loader.appearance'
+import type {
+  LoaderAppearance,
+  LoaderAppearanceKey,
+  LoaderAppearanceProps,
+  LoaderAppearanceShape,
+  LoaderAppearanceSize,
+  LoaderAppearanceStyle,
+  LoaderConfig,
+  LoaderProps,
+} from './Loader.interface'
+import { loaderShapeList } from './styles/loaderShape'
+import type { loaderShapePropsType } from './styles/loaderShape'
+import { loaderSizeList } from './styles/loaderSize'
+import type { loaderSizePropsType } from './styles/loaderSize'
+
+export {
+  Loader,
+  loaderAppearance,
+  loaderConfig,
+  loaderShapeList,
+  loaderSizeList,
+}
+export type {
+  LoaderAppearance,
+  LoaderAppearanceKey,
+  LoaderAppearanceProps,
+  LoaderAppearanceShape,
+  LoaderAppearanceSize,
+  LoaderAppearanceStyle,
+  LoaderConfig,
+  LoaderProps,
+  loaderShapePropsType,
+  loaderSizePropsType,
+}

package/src/components/Loader/stories/LoaderDefault.stories.tsx

@@ -0,0 +1,69 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Loader } from '../Loader'
+
+const meta = {
+  title: 'Atoms / Loader / Default',
+  component: Loader,
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta<typeof Loader>
+
+export default meta
+
+type Story = StoryObj<typeof Loader>
+
+export const Accent: Story = {
+  args: {
+    appearance: 'accentPrimary sizeL solid rounded',
+  },
+}
+
+export const Special: Story = {
+  args: {
+    appearance: 'specialPrimary sizeL solid rounded',
+  },
+}
+
+export const Extra: Story = {
+  args: {
+    appearance: 'extraPrimary sizeL solid rounded',
+  },
+}
+
+export const Surface: Story = {
+  args: {
+    appearance: 'surfacePrimary sizeL solid rounded',
+  },
+}
+
+export const Error: Story = {
+  args: {
+    appearance: 'errorPrimary sizeL solid rounded',
+  },
+}
+
+export const Success: Story = {
+  args: {
+    appearance: 'successPrimary sizeL solid rounded',
+  },
+}
+
+export const Warning: Story = {
+  args: {
+    appearance: 'warningPrimary sizeL solid rounded',
+  },
+}
+
+export const Danger: Story = {
+  args: {
+    appearance: 'dangerPrimary sizeL solid rounded',
+  },
+}
+
+export const Info: Story = {
+  args: {
+    appearance: 'infoPrimary sizeL solid rounded',
+  },
+}

package/src/components/Loader/stories/LoaderShape.stories.tsx

@@ -0,0 +1,51 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Loader } from '../Loader'
+
+const meta = {
+  title: 'Atoms / Loader / Shape',
+  component: Loader,
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta<typeof Loader>
+
+export default meta
+
+type Story = StoryObj<typeof Loader>
+
+export const Rounded: Story = {
+  args: {
+    appearance: 'accentPrimary sizeL solid rounded',
+  },
+}
+
+export const RoundedS: Story = {
+  args: {
+    appearance: 'accentPrimary sizeL solid roundedS',
+  },
+}
+
+export const RoundedM: Story = {
+  args: {
+    appearance: 'accentPrimary sizeL solid roundedM',
+  },
+}
+
+export const RoundedL: Story = {
+  args: {
+    appearance: 'accentPrimary sizeL solid roundedL',
+  },
+}
+
+export const RoundedXL: Story = {
+  args: {
+    appearance: 'accentPrimary sizeL solid roundedXL',
+  },
+}
+
+export const Circular: Story = {
+  args: {
+    appearance: 'accentPrimary sizeL solid circular',
+  },
+}

package/src/components/Loader/stories/LoaderSize.stories.tsx

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Loader } from '../Loader'
+
+const meta = {
+  title: 'Atoms / Loader / Size',
+  component: Loader,
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta<typeof Loader>
+
+export default meta
+
+type Story = StoryObj<typeof Loader>
+
+export const SizeL: Story = {
+  args: {
+    appearance: 'accentPrimary sizeL solid rounded',
+  },
+}
+
+export const SizeM: Story = {
+  args: {
+    appearance: 'accentPrimary sizeM solid rounded',
+  },
+}
+
+export const SizeS: Story = {
+  args: {
+    appearance: 'accentPrimary sizeS solid rounded',
+  },
+}

package/src/components/Loader/stories/LoaderStyle.stories.tsx

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Loader } from '../Loader'
+
+const meta = {
+  title: 'Atoms / Loader / Style',
+  component: Loader,
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta<typeof Loader>
+
+export default meta
+
+type Story = StoryObj<typeof Loader>
+
+export const Solid: Story = {
+  args: {
+    appearance: 'accentPrimary sizeL solid rounded',
+  },
+}
+
+export const Outlined: Story = {
+  args: {
+    appearance: 'accentPrimary sizeL outlined rounded',
+  },
+}
+
+export const Full: Story = {
+  args: {
+    appearance: 'accentPrimary sizeL full rounded',
+  },
+}
+
+export const Ghost: Story = {
+  args: {
+    appearance: 'accentPrimary sizeL ghost rounded',
+  },
+}

package/src/components/Loader/stories/LoaderText.stories.tsx

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { Loader } from '../Loader'
+
+const meta = {
+  title: 'Atoms / Loader / Text',
+  component: Loader,
+  args: {
+    text: 'Loading',
+  },
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta<typeof Loader>
+
+export default meta
+
+type Story = StoryObj<typeof Loader>
+
+export const Accent: Story = {
+  args: {
+    appearance: 'accentPrimary sizeL solid rounded',
+  },
+}
+
+export const Surface: Story = {
+  args: {
+    appearance: 'surfacePrimary sizeL solid rounded',
+  },
+}

package/src/components/Loader/styles/loader.ts

@@ -0,0 +1,14 @@
+import { StyleSheet } from 'react-native'
+
+const loaderStyles = StyleSheet.create({
+  loader: {
+    flexDirection: 'column',
+    flexGrow: 0,
+    justifyContent: 'center',
+    alignItems: 'center',
+    alignSelf: 'flex-start',
+    gap: 8,
+  },
+})
+
+export { loaderStyles }