@shopify/shop-minis-react 0.0.18 → 0.0.19

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

package/src/stories/Select.stories.tsx

@@ -0,0 +1,85 @@
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from '../components/ui/select'
+
+import type {Meta, StoryObj} from '@storybook/react-vite'
+
+const meta = {
+  title: 'UI/Select',
+  component: Select,
+  parameters: {},
+  tags: ['autodocs'],
+} satisfies Meta<typeof Select>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    defaultValue: 'option-1',
+    disabled: false,
+  },
+  render: args => (
+    <Select {...args}>
+      <SelectTrigger>
+        <SelectValue placeholder="Select an option" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="option-1">Option 1</SelectItem>
+        <SelectItem value="option-2">Option 2</SelectItem>
+        <SelectItem value="option-3">Option 3</SelectItem>
+      </SelectContent>
+    </Select>
+  ),
+}
+
+export const WithGroups: Story = {
+  args: {
+    defaultValue: 'option-1',
+    disabled: false,
+  },
+  render: args => (
+    <Select {...args}>
+      <SelectTrigger>
+        <SelectValue placeholder="Select an option" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectGroup>
+          <SelectLabel>Group 1</SelectLabel>
+          <SelectItem value="option-1">Option 1</SelectItem>
+          <SelectItem value="option-2">Option 2</SelectItem>
+        </SelectGroup>
+        <SelectGroup>
+          <SelectLabel>Group 2</SelectLabel>
+          <SelectItem value="option-3">Option 3</SelectItem>
+          <SelectItem value="option-4">Option 4</SelectItem>
+        </SelectGroup>
+      </SelectContent>
+    </Select>
+  ),
+}
+
+export const Disabled: Story = {
+  args: {
+    defaultValue: 'option-1',
+    disabled: true,
+  },
+  render: args => (
+    <Select {...args}>
+      <SelectTrigger>
+        <SelectValue placeholder="Select an option" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="option-1">Option 1</SelectItem>
+        <SelectItem value="option-2">Option 2</SelectItem>
+        <SelectItem value="option-3">Option 3</SelectItem>
+      </SelectContent>
+    </Select>
+  ),
+}

package/src/stories/Skeleton.stories.tsx

@@ -0,0 +1,19 @@
+import {Skeleton} from '../components/ui/skeleton'
+
+import type {Meta, StoryObj} from '@storybook/react-vite'
+
+const meta = {
+  title: 'UI/Skeleton',
+  component: Skeleton,
+  parameters: {},
+  tags: ['autodocs'],
+} satisfies Meta<typeof Skeleton>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    className: 'h-4 w-20',
+  },
+}

package/src/stories/Toaster.stories.tsx

@@ -0,0 +1,46 @@
+import {toast} from 'sonner'
+
+import {Button} from '../components/atoms/button'
+import {Toaster} from '../components/ui/sonner'
+
+import type {Meta, StoryObj} from '@storybook/react-vite'
+
+const meta = {
+  title: 'Ui/Toaster',
+  component: Toaster,
+  decorators: [
+    Story => (
+      <>
+        <Story />
+        <Toaster />
+      </>
+    ),
+  ],
+  tags: ['autodocs'],
+  parameters: {},
+  args: {},
+} satisfies Meta
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const SuccessToast: Story = {
+  decorators: [
+    Story => (
+      <Button onClick={() => toast.success('Success toast!')}>
+        Show success Toast
+      </Button>
+    ),
+  ],
+  args: {},
+}
+
+export const ErrorToast: Story = {
+  decorators: [
+    Story => (
+      <Button onClick={() => toast.error('Error toast!')}>
+        Show error Toast
+      </Button>
+    ),
+  ],
+}

package/src/stories/Touchable.stories.tsx

@@ -0,0 +1,40 @@
+import {fn} from 'storybook/test'
+
+import {Touchable} from '../components/atoms/touchable'
+
+import type {Meta, StoryObj} from '@storybook/react-vite'
+
+const meta = {
+  title: 'Atoms/Touchable',
+  component: Touchable,
+  parameters: {},
+  tags: ['autodocs'],
+  argTypes: {
+    stopPropagation: {
+      control: 'boolean',
+    },
+  },
+  args: {
+    onClick: fn(),
+    stopPropagation: false,
+  },
+} satisfies Meta<typeof Touchable>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    children: <div>Click me</div>,
+  },
+}
+
+export const WithStyledChild: Story = {
+  args: {
+    children: (
+      <div className="bg-secondary text-white p-4 rounded-md cursor-pointer hover:bg-secondary/90 transition-colors">
+        Custom styled touchable
+      </div>
+    ),
+  },
+}