@itcase/ui-react-native 1.10.91 → 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

@@ -75,10 +75,17 @@ const config = {
       }),
     )
   },
+  // 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.91",
+  "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.91",
+    "@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": "0c6b63619be073732f645fa1756d30112b29f5d4"
+  "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 }

package/src/components/Badge/Badge.interface.ts

@@ -19,9 +19,9 @@ import type {
 
 import type { ComponentGalleryArgs } from '../../storybook'
 import type { IconProps, SvgIconComponent } from '../Icon/Icon.interface'
-import type { badgeShapePropsType } from './styles/badgeShape'
-import type { badgeSizePropsType } from './styles/badgeSize'
-import type { badgeTypePropsType } from './styles/badgeType'
+import type { BadgeShapePropsType } from './styles/badgeShape'
+import type { BadgeSizePropsType } from './styles/badgeSize'
+import type { BadgeTypePropsType } from './styles/badgeType'
 
 type BadgeIconProp = false | SvgIconComponent
 
@@ -37,7 +37,7 @@ interface BadgeAppearanceProps {
   iconShape?: IconProps['shape']
   iconSize?: IconProps['iconSize']
   shape?: ShapeProps
-  size?: badgeSizePropsType
+  size?: BadgeSizePropsType
 }
 
 type BadgeConfig = AppearanceConfig<AppearanceKeysDefault, BadgeAppearanceProps>
@@ -59,10 +59,10 @@ interface BadgeProps extends BadgeAppearanceProps {
   appearance?: CompositeAppearanceKeys
   dot?: boolean
   icon?: BadgeIconProp
-  shape?: badgeShapePropsType
+  shape?: BadgeShapePropsType
   style?: StyleProp<TextStyle>
   text?: number | string
-  type?: badgeTypePropsType
+  type?: BadgeTypePropsType
 }
 
 type BadgeAppearanceKey = NonNullable<BadgeProps['appearance']>

package/src/components/Badge/index.ts

@@ -9,11 +9,11 @@ import type {
   BadgeProps,
 } from './Badge.interface'
 import { badgeShapeList } from './styles/badgeShape'
-import type { badgeShapePropsType } from './styles/badgeShape'
+import type { BadgeShapePropsType } from './styles/badgeShape'
 import { badgeSizeList } from './styles/badgeSize'
-import type { badgeSizePropsType } from './styles/badgeSize'
+import type { BadgeSizePropsType } from './styles/badgeSize'
 import { badgeTypeList } from './styles/badgeType'
-import type { badgeTypePropsType } from './styles/badgeType'
+import type { BadgeTypePropsType } from './styles/badgeType'
 
 export {
   Badge,
@@ -30,7 +30,7 @@ export type {
   BadgeAppearanceSize,
   BadgeConfig,
   BadgeProps,
-  badgeShapePropsType,
-  badgeSizePropsType,
-  badgeTypePropsType,
+  BadgeShapePropsType,
+  BadgeSizePropsType,
+  BadgeTypePropsType,
 }

package/src/components/Badge/stories/BadgeStories.config.ts

@@ -64,7 +64,7 @@ type BadgeSizeKey = keyof typeof badgeIconsBySizeKey
 const isBadgeSizeKey = (value: string): value is BadgeSizeKey =>
   value in badgeIconsBySizeKey
 
-const badgeSizeKeys = Object.keys(badgeIconsBySizeKey).filter(isBadgeSizeKey)
+const badgeSizeKeys = Object.keys(badgeIconsBySizeKey) as BadgeSizeKey[]
 
 const getBadgeTypeIcon = (appearanceSize: string = 'sizeM') =>
   isBadgeSizeKey(appearanceSize)

package/src/components/Badge/styles/badgeShape.ts

@@ -29,7 +29,7 @@ const badgeShapeStyles = StyleSheet.create({
 
 const badgeShapeList = getVariantsPropsList(badgeShapeStyles, 'badge_shape_')
 
-type badgeShapePropsType = (typeof badgeShapeList)[number]
+type BadgeShapePropsType = (typeof badgeShapeList)[number]
 
 export { badgeShapeList, badgeShapeStyles }
-export type { badgeShapePropsType }
+export type { BadgeShapePropsType }