Storybook Plan: Gluestack UI Migration

Status: Ready for Deployment (Dec 2024) Version: 0.2.0

Goal

Provide a comprehensive, developer-friendly and business-friendly catalog of the new @digiwedge/gluestack-ui components and migrated screens. This should document behavior, states, motion, and theming to accelerate QA and stakeholder sign-off.

Scope

Must Cover

• Primitives: Box, Text, Icon, Divider, Spinner
• Forms: Button, IconButton, TextInput, Searchbar, Switch, Checkbox, Radio, Chip, SegmentedButtons
• Feedback: Toast, Loader, ProgressBar, Badge, Skeleton
• Overlays: Modal, Dialog, Menu, Popover, Tooltip
• Layout: Card, Appbar, Avatar, StaggeredList, SwipeableRow
• Motion: Reduced-motion toggle, key presets, press/hover states

Business Demos

• Booking flow fragments (tee times, bookings list)
• Profile/settings fragments
• Auth entry fragments (login, MFA, error states)

Tooling

• Storybook 10.1.10 (React + Vite)
• Stories colocated next to components as <Name>.stories.tsx.
• One interactive story per component minimum (default, disabled, loading, error).

Storybook Targets (Two Total)

1) Tee Time Web

• Project: libs/tee-time-ui
• Run: pnpm nx run tee-time-ui:storybook
• Build: pnpm nx run tee-time-ui:build-storybook

2) Tee Time Mobile + Gluestack

• Project: libs/ui/gluestack-ui
• Run: pnpm nx run gluestack-ui:storybook
• Build: pnpm nx run gluestack-ui:build-storybook
• Notes: Uses react-native-web via Vite to render RN components in Storybook.

Story Structure

libs/ui/gluestack-ui/src/components/
  forms/
    Button.tsx
    Button.stories.tsx
  overlays/
    Modal.tsx
    Modal.stories.tsx

Coverage Checklist

Area	Stories	States	Status
Primitives	Box, Text, Icon, Divider, Spinner	typography, colors, sizes	✅ Complete
Buttons	Button	modes, states, loading, icons	✅ Complete
Inputs	TextInput	default, error, helper, disabled, validation	✅ Complete
Toggles	Switch, Checkbox, Radio	off/on, disabled, custom colors	✅ Complete
Feedback	Toast, Badge, Skeleton	variants, sizes, loading patterns	✅ Complete
Overlays	Modal, Menu, Tooltip	animations, placements	✅ Complete
Layout	Card	sections, interactive, media	✅ Complete
Animation	Hooks Reference	28 hooks documented	✅ Complete
Business Flows	Booking, Auth, Profile	-	✅ Complete

Motion and Accessibility

• Provide a global "Reduced Motion" toggle for stories.
• Provide a theme toggle (light/dark) where applicable.
• Use animation hooks in interactive stories (press feedback, staggered list, swipe).

Acceptance Criteria

• 100% of gluestack-ui components have at least one story.
• Each form component has at least 3 states documented.
• Overlay components demonstrate open/close transitions + reduced motion.
• Business flows have at least one story each (booking, profile, auth).
• Storybook can be run locally and captured for stakeholder review.

Implementation Progress (Dec 2024)

Created Files

libs/ui/gluestack-ui/
├── .storybook/
│   ├── main.ts                          # Storybook config with Vite
│   ├── preview.tsx                       # Theme/reduced-motion decorators
│   └── mocks/
│       └── reanimated.ts                 # Reanimated mock for web
└── src/
    ├── animation/
    │   └── Animation.stories.tsx         # Animation system docs
    └── components/
        ├── primitives/
        │   ├── Box.stories.tsx
        │   ├── Text.stories.tsx
        │   ├── Icon.stories.tsx
        │   ├── Divider.stories.tsx
        │   └── Spinner.stories.tsx
        ├── forms/
        │   ├── Button.stories.tsx
        │   ├── TextInput.stories.tsx
        │   ├── Switch.stories.tsx
        │   ├── Checkbox.stories.tsx
        │   └── Radio.stories.tsx
        ├── overlays/
        │   ├── Modal.stories.tsx
        │   ├── Toast.stories.tsx
        │   ├── Menu.stories.tsx
        │   └── Tooltip.stories.tsx
        ├── feedback/
        │   ├── Skeleton.stories.tsx
        │   └── Badge.stories.tsx
        └── layout/
            └── Card.stories.tsx
libs/ui/tee-time-ui-mobile/
└── src/stories/
    ├── BookingFlow.stories.tsx
    ├── AuthFlow.stories.tsx
    └── ProfileFlow.stories.tsx

Total: 21 Story Files

• 5 Primitive stories
• 5 Form stories
• 4 Overlay stories
• 2 Feedback stories
• 1 Layout story
• 3 Business flow stories (Booking, Auth, Profile)

Resolved Questions

• Storybook approach: Use react-native-web via Vite for mobile UI stories.
• Location: Stories are colocated in libs/ui/gluestack-ui/src/.
• Reanimated: Mocked for web environment using the shared test stub.
• Static build: Use pnpm nx run gluestack-ui:build-storybook for publishable output.
• Business flow demos: Added booking/auth/profile stories under libs/ui/tee-time-ui-mobile/src/stories.

Deployment

URLs

Storybook	FQDN	Status
Gluestack UI (Mobile)	gluestack-storybook.uat.digiwedge.com	Image pushed (0.2.0)
Tee Time Web UI	teetime-storybook.uat.digiwedge.com	Live

Build & Push Commands

# Build storybook static files
pnpm nx run gluestack-ui:build-storybook

# Build Docker image (from repo root)
docker build -f docker/gluestack-storybook/Dockerfile -t registry.digiwedge.com/digiwedge/gluestack-storybook:0.2.0 .
docker tag registry.digiwedge.com/digiwedge/gluestack-storybook:0.2.0 registry.digiwedge.com/digiwedge/gluestack-storybook:latest

# Push to registry
docker push registry.digiwedge.com/digiwedge/gluestack-storybook:0.2.0
docker push registry.digiwedge.com/digiwedge/gluestack-storybook:latest

# Deploy to Kubernetes
kubectl apply -k kubernetes/teetime/gluestack-storybook/

Infrastructure Files

docker/gluestack-storybook/
└── Dockerfile

kubernetes/teetime/gluestack-storybook/
├── deployment.yaml
├── service.yaml
├── httproute.yaml
└── kustomization.yaml

kubernetes/kub-jhb-02/gateway/certificates/
└── gluestack-storybook-uat-certificate.yaml

Open Questions

• Should we add visual regression testing with Chromatic?