@shopify/shop-minis-react 0.0.18 → 0.0.20

package/src/stories/AlertDialog.stories.tsx

@@ -0,0 +1,48 @@
+import {fn} from 'storybook/test'
+
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+  Button,
+} from '../components'
+
+import type {Meta, StoryObj} from '@storybook/react-vite'
+
+const meta = {
+  title: 'Ui/AlertDialog',
+  render: () => (
+    <AlertDialog>
+      <AlertDialogTrigger asChild>
+        <Button variant="outline">Open Alert Dialog</Button>
+      </AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Are you sure?</AlertDialogTitle>
+          <AlertDialogDescription>
+            This action cannot be undone.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogAction onClick={() => fn()}>Continue</AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  ),
+  parameters: {},
+  tags: ['autodocs'],
+  argTypes: {},
+  args: {},
+} satisfies Meta<typeof AlertDialog>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}

package/src/stories/Avatar.stories.tsx

@@ -0,0 +1,29 @@
+import {Avatar, AvatarFallback, AvatarImage} from '../components/ui/avatar'
+
+import type {StoryObj} from '@storybook/react-vite'
+
+interface AvatarProps {
+  src: 'https://github.com/shadcn.png'
+  userInitials: string
+}
+
+const meta = {
+  title: 'UI/Avatar',
+  render: ({userInitials}: AvatarProps) => (
+    <Avatar>
+      <AvatarImage src="https://github.com/shadcn.png" />
+      <AvatarFallback>{userInitials}</AvatarFallback>
+    </Avatar>
+  ),
+  args: {
+    className: 'size-12',
+    src: 'https://github.com/shadcn.png',
+    userInitials: 'CN',
+  },
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}

package/src/stories/Badge.stories.tsx

@@ -0,0 +1,46 @@
+import {Badge} from '../components/ui/badge'
+
+import type {Meta, StoryObj} from '@storybook/react-vite'
+
+const meta = {
+  title: 'UI/Badge',
+  component: Badge,
+  parameters: {},
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'radio',
+      options: ['default', 'secondary', 'destructive', 'outline'],
+    },
+  },
+} satisfies Meta<typeof Badge>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    children: 'Badge',
+  },
+}
+
+export const Secondary: Story = {
+  args: {
+    variant: 'secondary',
+    children: 'Badge',
+  },
+}
+
+export const Destructive: Story = {
+  args: {
+    variant: 'destructive',
+    children: 'Badge',
+  },
+}
+
+export const Outline: Story = {
+  args: {
+    variant: 'outline',
+    children: 'Badge',
+  },
+}

package/src/stories/Button.stories.tsx

@@ -0,0 +1,81 @@
+import {fn} from 'storybook/test'
+
+import {Button} from '../components/atoms/button'
+
+import type {Meta, StoryObj} from '@storybook/react-vite'
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: 'Atoms/Button',
+  component: Button,
+  parameters: {},
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'radio',
+      options: [
+        'default',
+        'secondary',
+        'tertiary',
+        'outline',
+        'ghost',
+        'link',
+        'destructive',
+      ],
+    },
+  },
+  args: {onClick: fn()},
+} satisfies Meta<typeof Button>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    variant: 'default',
+    children: 'Button',
+  },
+}
+
+export const Secondary: Story = {
+  args: {
+    variant: 'secondary',
+    children: 'Button',
+  },
+}
+
+export const Tertiary: Story = {
+  args: {
+    variant: 'tertiary',
+    children: 'Button',
+  },
+}
+
+export const Outline: Story = {
+  args: {
+    variant: 'outline',
+    children: 'Button',
+  },
+}
+
+export const Ghost: Story = {
+  args: {
+    variant: 'ghost',
+    children: 'Button',
+  },
+}
+
+export const Link: Story = {
+  args: {
+    variant: 'link',
+    children: 'Button',
+  },
+}
+
+export const Destructive: Story = {
+  args: {
+    variant: 'destructive',
+    children: 'Button',
+  },
+}

package/src/stories/Card.stories.tsx

@@ -0,0 +1,40 @@
+import {Button} from '../components/atoms/button'
+import {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+} from '../components/ui/card'
+
+import type {Meta, StoryObj} from '@storybook/react-vite'
+
+const meta = {
+  title: 'UI/Card',
+  render: () => (
+    <Card>
+      <CardHeader>
+        <CardTitle>Card Title</CardTitle>
+        <CardDescription>Card description goes here</CardDescription>
+        <CardAction>
+          <Button>Action</Button>
+        </CardAction>
+      </CardHeader>
+      <CardContent>
+        <p>This is the main content of the card.</p>
+      </CardContent>
+      <CardFooter>
+        <p>Card footer content</p>
+      </CardFooter>
+    </Card>
+  ),
+  parameters: {},
+  tags: ['autodocs'],
+} satisfies Meta<typeof Card>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}

package/src/stories/Checkbox.stories.tsx

@@ -0,0 +1,44 @@
+import {Checkbox} from '../components/ui/checkbox'
+
+import type {Meta, StoryObj} from '@storybook/react-vite'
+
+const meta = {
+  title: 'UI/Checkbox',
+  component: Checkbox,
+  parameters: {},
+  tags: ['autodocs'],
+  argTypes: {
+    checked: {
+      control: 'boolean',
+    },
+    disabled: {
+      control: 'boolean',
+    },
+  },
+} satisfies Meta<typeof Checkbox>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {},
+}
+
+export const Checked: Story = {
+  args: {
+    checked: true,
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+  },
+}
+
+export const DisabledChecked: Story = {
+  args: {
+    disabled: true,
+    checked: true,
+  },
+}

package/src/stories/FavoriteButton.stories.tsx

@@ -0,0 +1,58 @@
+import {fn} from 'storybook/test'
+
+import {FavoriteButton} from '../components/atoms/favorite-button'
+
+import type {Meta, StoryObj} from '@storybook/react-vite'
+
+const meta = {
+  title: 'Atoms/FavoriteButton',
+  component: FavoriteButton,
+  parameters: {},
+  tags: ['autodocs'],
+  argTypes: {
+    filled: {
+      control: 'boolean',
+    },
+  },
+  args: {
+    onClick: fn(),
+    filled: false,
+  },
+} satisfies Meta<typeof FavoriteButton>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Favorited: Story = {
+  args: {
+    filled: true,
+    onClick: fn(),
+  },
+  render: ({onClick, filled}) => {
+    return (
+      <FavoriteButton
+        filled={filled}
+        onClick={() => {
+          onClick?.()
+        }}
+      />
+    )
+  },
+}
+
+export const Unfavorited: Story = {
+  args: {
+    filled: false,
+    onClick: fn(),
+  },
+  render: ({onClick, filled}) => {
+    return (
+      <FavoriteButton
+        filled={filled}
+        onClick={() => {
+          onClick?.()
+        }}
+      />
+    )
+  },
+}

package/src/stories/IconButton.stories.tsx

@@ -0,0 +1,68 @@
+import {Heart, Star, Settings, Home} from 'lucide-react'
+import {fn} from 'storybook/test'
+
+import {IconButton} from '../components/atoms/icon-button'
+
+import type {Meta, StoryObj} from '@storybook/react-vite'
+
+const meta = {
+  title: 'Atoms/IconButton',
+  component: IconButton,
+  parameters: {},
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'radio',
+      options: ['sm', 'default', 'lg'],
+    },
+    filled: {
+      control: 'boolean',
+    },
+    Icon: {
+      control: 'select',
+      options: ['Heart', 'Star', 'Settings', 'Home'],
+      mapping: {
+        Heart,
+        Star,
+        Settings,
+        Home,
+      },
+    },
+  },
+  args: {
+    onClick: fn(),
+    filled: false,
+    size: 'default',
+    Icon: Heart,
+  },
+} satisfies Meta<typeof IconButton>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    Icon: Heart,
+  },
+}
+
+export const Filled: Story = {
+  args: {
+    Icon: Heart,
+    filled: true,
+  },
+}
+
+export const Small: Story = {
+  args: {
+    Icon: Star,
+    size: 'sm',
+  },
+}
+
+export const Large: Story = {
+  args: {
+    Icon: Settings,
+    size: 'lg',
+  },
+}

package/src/stories/Input.stories.tsx

@@ -0,0 +1,44 @@
+import {Input} from '../components/ui/input'
+
+import type {Meta, StoryObj} from '@storybook/react-vite'
+
+const meta = {
+  title: 'UI/Input',
+  component: Input,
+  parameters: {},
+  tags: ['autodocs'],
+  argTypes: {
+    type: {
+      control: 'select',
+      options: ['text', 'email', 'password', 'number', 'search', 'tel', 'url'],
+    },
+    placeholder: {
+      control: 'text',
+    },
+    disabled: {
+      control: 'boolean',
+    },
+  },
+} satisfies Meta<typeof Input>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    placeholder: 'Enter text...',
+  },
+}
+
+export const WithValue: Story = {
+  args: {
+    value: 'This is an input',
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+    value: 'Disabled input',
+  },
+}

package/src/stories/Label.stories.tsx

@@ -0,0 +1,19 @@
+import {Label} from '../components/ui/label'
+
+import type {Meta, StoryObj} from '@storybook/react-vite'
+
+const meta = {
+  title: 'UI/Label',
+  component: Label,
+  parameters: {},
+  tags: ['autodocs'],
+} satisfies Meta<typeof Label>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    children: 'This is a text label',
+  },
+}

package/src/stories/List.stories.tsx

@@ -0,0 +1,68 @@
+import {fn} from 'storybook/test'
+
+import {List} from '../components/atoms/list'
+import {ProductCard} from '../components/commerce/product-card'
+import {ProductLink} from '../components/commerce/product-link'
+import {createProduct, injectMocks} from '../mocks'
+
+import type {Product} from '@shopify/shop-minis-platform'
+import type {Meta, StoryObj} from '@storybook/react-vite'
+
+const meta = {
+  title: 'Atoms/List',
+  component: List as any,
+  parameters: {
+    layout: 'padded',
+  },
+  argTypes: {
+    height: {
+      control: 'number',
+      description: 'Height of the virtualized list container',
+    },
+    itemSizeForRow: {
+      control: 'number',
+      description: 'Height of each item in the list',
+    },
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof List>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+injectMocks()
+
+const createProductList = (count: number) => {
+  return Array.from({length: count}, (_, index) =>
+    createProduct(`product-${index + 1}`, `Product ${index + 1}`, '9.99')
+  )
+}
+
+export const ProductLinkList: Story = {
+  args: {
+    items: createProductList(50),
+    height: 600,
+    itemSizeForRow: () => 100,
+    showScrollbar: true,
+    renderItem: (product: Product) => (
+      <div className="p-4">
+        <ProductLink product={product} />
+      </div>
+    ),
+  },
+}
+
+export const ProductGridList: Story = {
+  args: {
+    items: createProductList(20),
+    height: 600,
+    itemSizeForRow: () => 220,
+    showScrollbar: true,
+    renderItem: (product: Product) => (
+      <div className="grid grid-cols-2 gap-4">
+        <ProductCard product={product} onFavoriteToggled={fn()} />
+        <ProductCard product={product} onFavoriteToggled={fn()} />
+      </div>
+    ),
+  },
+}

package/src/stories/MerchantCard.stories.tsx

@@ -0,0 +1,55 @@
+import {MerchantCard} from '../components/commerce/merchant-card'
+import {createShop, injectMocks} from '../mocks'
+
+import type {Meta, StoryObj} from '@storybook/react-vite'
+
+type MerchantCardProps = React.ComponentProps<typeof MerchantCard>
+
+const meta = {
+  title: 'Commerce/MerchantCard',
+  component: MerchantCard,
+  parameters: {
+    layout: 'padded',
+  },
+  argTypes: {
+    touchable: {
+      control: 'boolean',
+    },
+    variant: {
+      control: 'radio',
+      options: ['default', 'compact'],
+    },
+  },
+  tags: ['autodocs'],
+} satisfies Meta<MerchantCardProps>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+injectMocks()
+
+export const Default: Story = {
+  args: {
+    shop: {
+      ...createShop('shop1', 'Amazing Store'),
+      reviewAnalytics: {averageRating: 4.8, reviewCount: 1250},
+    },
+    variant: 'default',
+  },
+}
+
+export const Grid: Story = {
+  decorators: [
+    Story => (
+      <div className="grid grid-cols-2 gap-4">
+        <Story />
+        <Story />
+        <Story />
+        <Story />
+      </div>
+    ),
+  ],
+  args: {
+    shop: createShop('shop1', 'Amazing Store'),
+  },
+}

package/src/stories/ProductCard.stories.tsx

@@ -0,0 +1,85 @@
+import {fn} from 'storybook/test'
+
+import {ProductCard} from '../components/commerce/product-card'
+import {createProduct, injectMocks} from '../mocks'
+
+import type {Meta, StoryObj} from '@storybook/react-vite'
+
+const meta = {
+  title: 'Commerce/ProductCard',
+  component: ProductCard,
+  parameters: {
+    layout: 'padded',
+  },
+  args: {onFavoriteToggled: fn()},
+  argTypes: {
+    variant: {
+      control: 'radio',
+      options: ['default', 'priceOverlay', 'compact'],
+    },
+    badgeVariant: {
+      control: 'radio',
+      options: ['default', 'secondary', 'destructive', 'outline'],
+    },
+    touchable: {
+      control: 'boolean',
+    },
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof ProductCard>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+injectMocks()
+
+export const Single: Story = {
+  args: {
+    product: {
+      id: '1',
+      title: 'Product 1',
+
+      price: {
+        amount: '100',
+        currencyCode: 'USD',
+      },
+
+      compareAtPrice: {
+        amount: '120',
+        currencyCode: 'USD',
+      },
+
+      reviewAnalytics: {
+        averageRating: 4.5,
+        reviewCount: 10,
+      },
+      shop: {
+        id: 'shop1',
+        name: 'Mock Shop',
+      },
+      defaultVariantId: 'variant-1',
+      isFavorited: true,
+
+      featuredImage: {
+        url: 'https://picsum.photos/400/400',
+        altText: 'Product 1',
+      },
+    },
+  },
+}
+
+export const Grid: Story = {
+  decorators: [
+    Story => (
+      <div className="grid grid-cols-2 gap-4">
+        <Story />
+        <Story />
+        <Story />
+        <Story />
+      </div>
+    ),
+  ],
+  args: {
+    product: createProduct('1', 'Product 1', '100', '120'),
+  },
+}