@itcase/ui-react-native 1.10.89 → 1.10.94

package/.storybook-react-native/preview.tsx

@@ -5,36 +5,6 @@ import { ONDEVICE_BACKGROUNDS } from '@itcase/storybook-config/config/preview'
 
 import { UIProviderApp } from '../../core/src/context/UIProviderApp/UIProviderApp'
 
-const atomsMoleculesStoriesOrder = [
-  'Overview',
-  'Playground',
-  'Demo',
-  'Gallery',
-  'Skeleton',
-  'Appearance',
-  'Float',
-  'Toast',
-  'Default',
-  'Muted',
-  'Label',
-  'Icon',
-  'Loading',
-  '*',
-  'Accent',
-  'Special',
-  'Extra',
-  'Surface',
-  'Error',
-  'Success',
-  'Require',
-  'Warning',
-  'Danger',
-  'Info',
-  'Disabled',
-  'Size',
-  'Style',
-]
-
 const preview: Preview = {
   parameters: {
     backgrounds: {
@@ -42,16 +12,82 @@ const preview: Preview = {
     },
     options: {
       storySort: {
+        includeNames: true,
         order: [
           'Overview',
           'Mixins',
           'Hooks',
+          ['*', ['Overview', 'Playground', '*']],
           'Layout',
+          ['*', ['Overview', 'Playground', '*']],
           'Typography',
+          ['*', ['Overview', 'Playground', '*']],
           'Atoms',
-          ['*', atomsMoleculesStoriesOrder],
+          [
+            '*',
+            [
+              'Overview',
+              'Playground',
+              'Demo',
+              'Gallery',
+              'Skeleton',
+              'Appearance',
+              'Float',
+              'Toast',
+              'Default',
+              'Muted',
+              'Label',
+              'Icon',
+              'Loading',
+              '*',
+              'Accent',
+              'Special',
+              'Extra',
+              'Surface',
+              'Error',
+              'Success',
+              'Require',
+              'Warning',
+              'Danger',
+              'Info',
+              'Disabled',
+              'Size',
+              'Style',
+            ],
+          ],
           'Molecules',
-          ['*', atomsMoleculesStoriesOrder],
+          [
+            '*',
+            [
+              'Overview',
+              'Playground',
+              'Demo',
+              'Gallery',
+              'Skeleton',
+              'Appearance',
+              'Float',
+              'Toast',
+              'Default',
+              'Muted',
+              'Label',
+              'Icon',
+              'Loading',
+              '*',
+              'Accent',
+              'Special',
+              'Extra',
+              'Surface',
+              'Error',
+              'Success',
+              'Require',
+              'Warning',
+              'Danger',
+              'Info',
+              'Disabled',
+              'Size',
+              'Style',
+            ],
+          ],
           'Components',
           [
             '*',

package/.storybook-react-native-web/main.ts

@@ -21,49 +21,71 @@ const config = {
   viteFinal: async (
     viteConfig: Parameters<NonNullable<StorybookConfig['viteFinal']>>[0],
   ) => {
-    return mergeConfig(await storybookConfigViteFinal(viteConfig), {
-      resolve: {
-        alias: [
-          {
-            find: '@itcase/ui-core/context',
-            replacement: resolve(coreSrcDir, 'context'),
-          },
-          {
-            find: '@itcase/ui-core/hoc',
-            replacement: resolve(coreSrcDir, 'hoc'),
-          },
-          {
-            find: '@itcase/ui-core/hooks',
-            replacement: resolve(coreSrcDir, 'hooks'),
-          },
-          {
-            find: '@itcase/ui-core/types',
-            replacement: resolve(coreSrcDir, 'types'),
-          },
-          {
-            find: '@itcase/ui-core/storybook',
-            replacement: resolve(coreSrcDir, 'storybook'),
-          },
-          {
-            find: '@itcase/ui-core/utils',
-            replacement: resolve(coreSrcDir, 'utils'),
-          },
-          {
-            find: '@itcase/icons-default',
-            replacement: iconsDefaultNativeEntry,
-          },
-          {
-            find: 'react-native-linear-gradient',
-            replacement: 'react-native-web-linear-gradient',
-          },
-        ],
-      },
-    })
+    const vitePolling =
+      process.env.CHOKIDAR_USEPOLLING === 'true'
+        ? {
+            server: {
+              watch: {
+                interval: 1000,
+                usePolling: true,
+              },
+            },
+          }
+        : {}
+
+    return mergeConfig(
+      await storybookConfigViteFinal(viteConfig),
+      mergeConfig(vitePolling, {
+        resolve: {
+          alias: [
+            {
+              find: '@itcase/ui-core/context',
+              replacement: resolve(coreSrcDir, 'context'),
+            },
+            {
+              find: '@itcase/ui-core/hoc',
+              replacement: resolve(coreSrcDir, 'hoc'),
+            },
+            {
+              find: '@itcase/ui-core/hooks',
+              replacement: resolve(coreSrcDir, 'hooks'),
+            },
+            {
+              find: '@itcase/ui-core/types',
+              replacement: resolve(coreSrcDir, 'types'),
+            },
+            {
+              find: '@itcase/ui-core/storybook',
+              replacement: resolve(coreSrcDir, 'storybook'),
+            },
+            {
+              find: '@itcase/ui-core/utils',
+              replacement: resolve(coreSrcDir, 'utils'),
+            },
+            {
+              find: '@itcase/icons-default',
+              replacement: iconsDefaultNativeEntry,
+            },
+            {
+              find: 'react-native-linear-gradient',
+              replacement: 'react-native-web-linear-gradient',
+            },
+          ],
+        },
+      }),
+    )
+  },
+  // Production MCP host reads storybook-static/manifests/components.json.
+  // Core defaults this flag to false, so `storybook build` otherwise skips manifests.
+  features: {
+    componentsManifest: true,
   },
   stories: ['../src/components/**/*.stories.?(ts|tsx|js|jsx)'],
   typescript: {
-    ...mainConfigRest.typescript,
-    reactDocgen: 'react-docgen-typescript' as const,
+    // `react-docgen-typescript` explodes token/device unions into multi‑MB
+    // props. `JSON.stringify` then throws `Invalid string length` and
+    // `storybook-static/manifests/components.json` is never written.
+    reactDocgen: 'react-docgen',
   },
 } as unknown as StorybookConfig
 

package/.storybook-react-native-web/preview.tsx

@@ -8,79 +8,87 @@ const preview: Preview = {
     backgrounds: { value: 'figma' },
   },
   parameters: {
+    layout: 'centered',
     backgrounds: {
       options: { ...BACKGROUNDS },
     },
-    layout: 'centered',
     options: {
       storySort: {
+        includeNames: true,
         order: [
           'Overview',
           'Mixins',
           'Hooks',
+          ['*', ['Overview', 'Playground', '*']],
           'Layout',
+          ['*', ['Overview', 'Playground', '*']],
           'Typography',
+          ['*', ['Overview', 'Playground', '*']],
           'Atoms',
           [
             '*',
-            'Overview',
-            'Playground',
-            'Demo',
-            'Gallery',
-            'Skeleton',
-            'Appearance',
-            'Float',
-            'Toast',
-            'Default',
-            'Muted',
-            'Label',
-            'Icon',
-            'Loading',
-            '*',
-            'Accent',
-            'Special',
-            'Extra',
-            'Surface',
-            'Error',
-            'Success',
-            'Require',
-            'Warning',
-            'Danger',
-            'Info',
-            'Disabled',
-            'Size',
-            'Style',
+            [
+              'Overview',
+              'Playground',
+              'Demo',
+              'Gallery',
+              'Skeleton',
+              'Appearance',
+              'Float',
+              'Toast',
+              'Default',
+              'Muted',
+              'Label',
+              'Icon',
+              'Loading',
+              '*',
+              'Accent',
+              'Special',
+              'Extra',
+              'Surface',
+              'Error',
+              'Success',
+              'Require',
+              'Warning',
+              'Danger',
+              'Info',
+              'Disabled',
+              'Size',
+              'Style',
+            ],
           ],
           'Molecules',
           [
             '*',
-            'Overview',
-            'Playground',
-            'Demo',
-            'Gallery',
-            'Skeleton',
-            'Appearance',
-            'Float',
-            'Toast',
-            'Default',
-            'Muted',
-            'Label',
-            'Icon',
-            'Loading',
-            '*',
-            'Accent',
-            'Special',
-            'Extra',
-            'Surface',
-            'Error',
-            'Success',
-            'Require',
-            'Warning',
-            'Danger',
-            'Info',
-            'Disabled',
-            'Size',
-            'Style',
+            [
+              'Overview',
+              'Playground',
+              'Demo',
+              'Gallery',
+              'Skeleton',
+              'Appearance',
+              'Float',
+              'Toast',
+              'Default',
+              'Muted',
+              'Label',
+              'Icon',
+              'Loading',
+              '*',
+              'Accent',
+              'Special',
+              'Extra',
+              'Surface',
+              'Error',
+              'Success',
+              'Require',
+              'Warning',
+              'Danger',
+              'Info',
+              'Disabled',
+              'Size',
+              'Style',
+            ],
           ],
           'Components',
           [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/ui-react-native",
-  "version": "1.10.89",
+  "version": "1.10.94",
   "license": "MIT",
   "private": false,
   "main": "src/index.tsx",
@@ -23,8 +23,8 @@
   "dependencies": {
     "@itcase/icons-default": "^1.2.39",
     "@itcase/tokens-am": "^1.1.60",
-    "@itcase/types-ui": "^1.1.98",
-    "@itcase/ui-core": "^1.10.86",
+    "@itcase/types-ui": "^1.1.100",
+    "@itcase/ui-core": "^1.10.94",
     "@react-native-community/slider": "^5.2.1",
     "react-native-linear-gradient": "2.8.3",
     "react-native-otp-entry": "^1.8.6",
@@ -37,28 +37,28 @@
   },
   "devDependencies": {
     "@itcase/storybook-config": "^1.3.13",
-    "@react-native/assets-registry": "0.87.0",
-    "@react-native/typescript-config": "0.87.0",
-    "@storybook/addon-ondevice-actions": "^10.5.4",
-    "@storybook/addon-ondevice-backgrounds": "^10.5.4",
-    "@storybook/addon-ondevice-controls": "^10.5.4",
-    "@storybook/react": "^10.5.10",
-    "@storybook/react-native": "^10.5.4",
-    "@storybook/react-native-ui-lite": "^10.5.4",
-    "@storybook/react-native-web-vite": "^10.5.10",
-    "@storybook/react-vite": "^10.5.10",
+    "@react-native/assets-registry": "0.87.1",
+    "@react-native/typescript-config": "0.87.1",
+    "@storybook/addon-ondevice-actions": "^10.6.0",
+    "@storybook/addon-ondevice-backgrounds": "^10.6.0",
+    "@storybook/addon-ondevice-controls": "^10.6.0",
+    "@storybook/react": "^10.6.0",
+    "@storybook/react-native": "^10.6.0",
+    "@storybook/react-native-ui-lite": "^10.6.0",
+    "@storybook/react-native-web-vite": "^10.6.0",
+    "@storybook/react-vite": "^10.6.0",
     "@types/react": "^18.3.12",
     "@typescript/native": "npm:typescript@^7.0.2",
     "react": "19.2.3",
     "react-dom": "19.2.3",
-    "react-native": "0.87.0",
+    "react-native": "0.87.1",
     "react-native-reanimated": "^4.6.0",
     "react-native-svg-transformer": "^1.5.3",
     "react-native-web": "^0.21.2",
     "react-native-web-linear-gradient": "^1.1.2",
-    "storybook": "^10.5.10",
+    "storybook": "^10.6.0",
     "typescript": "npm:@typescript/typescript6@^6.0.2",
     "vite": "^8.2.2"
   },
-  "gitHead": "cff2c2ec07bc3c212d6bdddabc1d547e3aef2244"
+  "gitHead": "b5b9443df364936d7538670dd9d13b3de05bde91"
 }

package/src/components/Avatar/Avatar.interface.ts

@@ -29,8 +29,8 @@ import type {
 import type { ComponentGalleryArgs } from '../../storybook'
 import type { BadgeProps } from '../Badge/Badge.interface'
 import type { IconProps, SvgIconComponent } from '../Icon/Icon.interface'
-import type { avatarShapePropsType } from './styles/avatarShape'
-import type { avatarSizesPropsType } from './styles/avatarSize'
+import type { AvatarShapePropsType } from './styles/avatarShape'
+import type { AvatarSizesPropsType } from './styles/avatarSize'
 
 interface AvatarAppearanceProps {
   badge?: boolean
@@ -52,7 +52,7 @@ interface AvatarAppearanceProps {
   iconSize?: IconProps['iconSize']
   iconSrc?: string
   shape?: ShapeProps
-  size?: avatarSizesPropsType | SizePXProps
+  size?: AvatarSizesPropsType | SizePXProps
   textColor?: TextColorProps
   textSize?: TextSizeProps
   textWeight?: TextWeightProps
@@ -90,7 +90,7 @@ interface AvatarProps extends AvatarAppearanceProps {
   firstName?: string
   imageSrc?: ImageSourcePropType
   secondName?: string
-  shape?: avatarShapePropsType
+  shape?: AvatarShapePropsType
   style?: StyleProp<ViewStyle>
 }
 
@@ -125,6 +125,6 @@ export type {
   AvatarConfig,
   AvatarGalleryStory,
   AvatarProps,
-  avatarShapePropsType,
+  AvatarShapePropsType,
   AvatarStoryArgs,
 }

package/src/components/Avatar/index.ts

@@ -11,9 +11,9 @@ import type {
   AvatarProps,
 } from './Avatar.interface'
 import { avatarShapeList } from './styles/avatarShape'
-import type { avatarShapePropsType } from './styles/avatarShape'
+import type { AvatarShapePropsType } from './styles/avatarShape'
 import { avatarSizesList } from './styles/avatarSize'
-import type { avatarSizesPropsType } from './styles/avatarSize'
+import type { AvatarSizesPropsType } from './styles/avatarSize'
 
 export {
   Avatar,
@@ -31,6 +31,6 @@ export type {
   AvatarAppearanceStyle,
   AvatarConfig,
   AvatarProps,
-  avatarShapePropsType,
-  avatarSizesPropsType,
+  AvatarShapePropsType,
+  AvatarSizesPropsType,
 }

package/src/components/Avatar/stories/AvatarStories.config.ts

@@ -8,10 +8,7 @@ import type { AvatarAppearanceKey, AvatarProps } from '../Avatar.interface'
 
 type AvatarSizeKey = keyof typeof avatarAppearanceSize
 
-const isAvatarSizeKey = (value: string): value is AvatarSizeKey =>
-  value in avatarAppearanceSize
-
-const avatarSizeKeys = Object.keys(avatarAppearanceSize).filter(isAvatarSizeKey)
+const avatarSizeKeys = Object.keys(avatarAppearanceSize) as AvatarSizeKey[]
 
 const avatarTypeOptions = [
   'letters',

package/src/components/Avatar/styles/avatarShape.ts

@@ -28,7 +28,7 @@ const avatarShapeStyles = StyleSheet.create({
 
 const avatarShapeList = getVariantsPropsList(avatarShapeStyles, 'avatar_shape_')
 
-type avatarShapePropsType = (typeof avatarShapeList)[number]
+type AvatarShapePropsType = (typeof avatarShapeList)[number]
 
 export { avatarShapeList, avatarShapeStyles }
-export type { avatarShapePropsType }
+export type { AvatarShapePropsType }

package/src/components/Avatar/styles/avatarSize.ts

@@ -16,7 +16,7 @@ const avatarSizeStyles = StyleSheet.create({
   ),
 })
 
-type avatarSizesPropsType = (typeof avatarSizesList)[number]
+type AvatarSizesPropsType = (typeof avatarSizesList)[number]
 
 export { avatarSizesList, avatarSizeStyles }
-export type { avatarSizesPropsType }
+export type { AvatarSizesPropsType }

package/src/components/AvatarStack/AvatarStack.interface.ts

@@ -4,8 +4,8 @@ import type { CompositeAppearanceWithoutSizeKeys } from '@itcase/types-ui'
 
 import type { ComponentGalleryArgs } from '../../storybook'
 import type { AvatarProps } from '../Avatar/Avatar.interface'
-import type { avatarSizesPropsType } from '../Avatar/styles/avatarSize'
-import type { avatarStackDirectionPropsType } from './styles/avatarStackDirection'
+import type { AvatarSizesPropsType } from '../Avatar/styles/avatarSize'
+import type { AvatarStackDirectionPropsType } from './styles/avatarStackDirection'
 
 interface AvatarsItem {
   id: string
@@ -21,9 +21,9 @@ interface AvatarStackProps {
   avatarAppearance?: CompositeAppearanceWithoutSizeKeys
   avatarsList: AvatarsItem[]
   dataTestId?: string
-  direction?: avatarStackDirectionPropsType
+  direction?: AvatarStackDirectionPropsType
   length?: number
-  size?: avatarSizesPropsType
+  size?: AvatarSizesPropsType
   style?: StyleProp<ViewStyle>
 }
 

package/src/components/AvatarStack/index.ts

@@ -6,12 +6,12 @@ import type {
   AvatarStackStoryArgs,
 } from './AvatarStack.interface'
 import { avatarStackDirectionList } from './styles/avatarStackDirection'
-import type { avatarStackDirectionPropsType } from './styles/avatarStackDirection'
+import type { AvatarStackDirectionPropsType } from './styles/avatarStackDirection'
 
 export { AvatarStack, avatarStackDirectionList }
 export type {
   AvatarsItem,
-  avatarStackDirectionPropsType,
+  AvatarStackDirectionPropsType,
   AvatarStackGalleryStory,
   AvatarStackProps,
   AvatarStackStoryArgs,

package/src/components/AvatarStack/stories/AvatarStackDemo.stories.tsx

@@ -1,7 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react'
 
 import { createAppearanceOptions } from '../../../storybook'
-import { avatarAppearanceShape } from '../../Avatar/appearance/avatarShape'
 import { avatarAppearanceStyle } from '../../Avatar/appearance/avatarStyle'
 import { avatarAppearance } from '../../Avatar/Avatar.appearance'
 import { AvatarStack } from '../AvatarStack'
@@ -12,11 +11,11 @@ import type {
 import { avatarsListMock } from './__mock__'
 import {
   avatarStackAppearanceSize,
+  avatarStackShapeOptions,
   avatarStackStoryParameters,
 } from './AvatarStackStories.config'
 
 const { getAppearanceOptions } = createAppearanceOptions(avatarAppearance, {
-  appearanceShape: avatarAppearanceShape,
   appearanceSize: avatarStackAppearanceSize,
   appearanceStyle: avatarAppearanceStyle,
 })
@@ -49,7 +48,7 @@ const meta = {
   argTypes: {
     appearanceShape: {
       control: 'radio',
-      options: getAppearanceOptions('appearanceShape'),
+      options: [...avatarStackShapeOptions],
     },
     appearanceSize: {
       control: 'radio',

package/src/components/AvatarStack/stories/AvatarStackStories.config.ts

@@ -1,5 +1,6 @@
+import type { ShapeProps } from '@itcase/types-ui'
+
 import { createComponentGallery } from '../../../storybook'
-import { avatarAppearanceShape } from '../../Avatar/appearance/avatarShape'
 import { avatarAppearanceSize } from '../../Avatar/appearance/avatarSize'
 import { avatarAppearanceStyle } from '../../Avatar/appearance/avatarStyle'
 import { avatarAppearanceSurface } from '../../Avatar/appearance/avatarSurface'
@@ -18,12 +19,23 @@ const avatarStackAppearanceSize = {
 
 type AvatarStackSizeKey = keyof typeof avatarStackAppearanceSize
 
-const isAvatarStackSizeKey = (value: string): value is AvatarStackSizeKey =>
-  value in avatarStackAppearanceSize
+const avatarStackSizeKeys = Object.keys(
+  avatarStackAppearanceSize,
+) as AvatarStackSizeKey[]
+
+const avatarStackShapeOptions = [
+  'geometric',
+  'circular',
+  'rounded',
+  'roundedXL',
+  'roundedL',
+  'roundedM',
+  'roundedS',
+] as const satisfies readonly ShapeProps[]
 
-const avatarStackSizeKeys = Object.keys(avatarStackAppearanceSize).filter(
-  isAvatarStackSizeKey,
-)
+const avatarStackAppearanceShape = Object.fromEntries(
+  avatarStackShapeOptions.map((shape) => [shape, { shape }]),
+) as Record<ShapeProps, { shape: ShapeProps }>
 
 const avatarStackTypeOptions = ['overflow', 'all'] as const
 
@@ -46,7 +58,7 @@ const avatarStackGallery = createComponentGallery<AvatarAppearanceKey>({
   appearanceGroups: {
     surface: avatarAppearanceSurface,
   },
-  shape: avatarAppearanceShape,
+  shape: avatarStackAppearanceShape,
   style: avatarAppearanceStyle,
 })
 
@@ -65,6 +77,7 @@ export {
   AVATAR_STACK_FIGMA_URL,
   avatarStackAppearanceSize,
   avatarStackGallery,
+  avatarStackShapeOptions,
   avatarStackSizeKeys,
   avatarStackStoryParameters,
   avatarStackTypeOptions,

package/src/components/AvatarStack/styles/avatarStackDirection.ts

@@ -16,7 +16,7 @@ const avatarStackDirectionList = getVariantsPropsList(
   'avatarStack_direction_',
 )
 
-type avatarStackDirectionPropsType = (typeof avatarStackDirectionList)[number]
+type AvatarStackDirectionPropsType = (typeof avatarStackDirectionList)[number]
 
 export { avatarStackDirectionList, avatarStackDirectionStyles }
-export type { avatarStackDirectionPropsType }
+export type { AvatarStackDirectionPropsType }