@shopify/shop-minis-react 0.0.17 → 0.0.19

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/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'),
+  },
+}

package/src/stories/ProductLink.stories.tsx

@@ -0,0 +1,46 @@
+import {ProductLink} from '../components/commerce/product-link'
+import {createProduct, injectMocks} from '../mocks'
+
+import type {Meta, StoryObj} from '@storybook/react-vite'
+
+const meta = {
+  title: 'Commerce/ProductLink',
+  component: ProductLink,
+  parameters: {
+    layout: 'padded',
+  },
+  args: {},
+  tags: ['autodocs'],
+} satisfies Meta<typeof ProductLink>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+injectMocks()
+
+export const Default: Story = {
+  args: {
+    product: createProduct('1', 'Product 1', '100', '120'),
+  },
+}
+
+export const WithDiscount: Story = {
+  args: {
+    product: createProduct('2', 'Product with Discount', '80', '120'),
+  },
+}
+
+export const List: Story = {
+  decorators: [
+    Story => (
+      <div className="grid grid-cols-1 gap-4 max-w-md">
+        <Story />
+        <Story />
+        <Story />
+      </div>
+    ),
+  ],
+  args: {
+    product: createProduct('1', 'Product 1', '100', '120'),
+  },
+}

package/src/stories/Progress.stories.tsx

@@ -0,0 +1,30 @@
+import {Progress} from '../components/ui/progress'
+
+import type {Meta, StoryObj} from '@storybook/react-vite'
+
+const meta = {
+  title: 'UI/Progress',
+  component: Progress,
+  parameters: {},
+  tags: ['autodocs'],
+  argTypes: {
+    value: {
+      control: {type: 'range', min: 0, max: 100, step: 1},
+    },
+  },
+} satisfies Meta<typeof Progress>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const FiftyPercent: Story = {
+  args: {
+    value: 50,
+  },
+}
+
+export const OneHundredPercent: Story = {
+  args: {
+    value: 100,
+  },
+}

package/src/stories/RadioGroup.stories.tsx

@@ -0,0 +1,51 @@
+import {Label} from '../components/ui/label'
+import {RadioGroup, RadioGroupItem} from '../components/ui/radio-group'
+
+import type {Meta, StoryObj} from '@storybook/react-vite'
+
+const meta = {
+  title: 'UI/RadioGroup',
+  component: RadioGroup,
+  parameters: {},
+  args: {
+    defaultValue: 'option-1',
+    disabled: false,
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof RadioGroup>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: () => (
+    <RadioGroup defaultValue="option-1">
+      <div className="flex items-center space-x-2">
+        <RadioGroupItem value="option-1" id="option-1" />
+        <Label>Option 1</Label>
+      </div>
+      <div className="flex items-center space-x-2">
+        <RadioGroupItem value="option-2" id="option-2" />
+        <Label>Option 2</Label>
+      </div>
+    </RadioGroup>
+  ),
+}
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+  },
+  render: ({disabled}) => (
+    <RadioGroup defaultValue="option-1" disabled={disabled}>
+      <div className="flex items-center space-x-2">
+        <RadioGroupItem value="option-1" id="disabled-option-1" />
+        <Label>Option 1</Label>
+      </div>
+      <div className="flex items-center space-x-2">
+        <RadioGroupItem value="option-2" id="disabled-option-2" />
+        <Label>Option 2</Label>
+      </div>
+    </RadioGroup>
+  ),
+}