@shopify/shop-minis-react 0.3.2 → 0.4.0

package/src/stories/Badge.stories.tsx

@@ -1,46 +0,0 @@
-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

@@ -1,81 +0,0 @@
-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

@@ -1,40 +0,0 @@
-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

@@ -1,44 +0,0 @@
-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

@@ -1,58 +0,0 @@
-import {fn} from 'storybook/test'
-
-import {FavoriteButton} from '../components/commerce/favorite-button'
-
-import type {Meta, StoryObj} from '@storybook/react-vite'
-
-const meta = {
-  title: 'Commerce/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

@@ -1,68 +0,0 @@
-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/ImageContentWrapper.stories.tsx

@@ -1,65 +0,0 @@
-import {fn} from 'storybook/test'
-
-import {ImageContentWrapper} from '../components/content/image-content-wrapper'
-import {injectMocks} from '../mocks'
-
-import type {Meta, StoryObj} from '@storybook/react-vite'
-
-const meta = {
-  title: 'Atoms/ImageContentWrapper',
-  component: ImageContentWrapper,
-  parameters: {
-    layout: 'padded',
-  },
-  args: {
-    onLoad: fn(),
-  },
-  argTypes: {
-    publicId: {
-      control: 'text',
-    },
-    externalId: {
-      control: 'text',
-    },
-    width: {
-      control: 'number',
-    },
-    height: {
-      control: 'number',
-    },
-    className: {
-      control: 'text',
-    },
-  },
-  tags: ['autodocs'],
-} satisfies Meta<typeof ImageContentWrapper>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-injectMocks()
-
-export const WithPublicId: Story = {
-  args: {
-    publicId: 'content-123',
-    width: 400,
-    height: 300,
-  },
-}
-
-export const WithExternalId: Story = {
-  args: {
-    externalId: 'external-123',
-    width: 400,
-    height: 300,
-  },
-}
-
-export const WithCustomLoader: Story = {
-  args: {
-    publicId: 'content-123',
-    width: 400,
-    height: 300,
-    Loader: 'Loading image...',
-  },
-}

package/src/stories/Input.stories.tsx

@@ -1,44 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

@@ -1,64 +0,0 @@
-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',
-    },
-  },
-  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

@@ -1,127 +0,0 @@
-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',
-    },
-    featuredImagesLimit: {
-      control: 'number',
-    },
-  },
-  tags: ['autodocs'],
-} satisfies Meta<MerchantCardProps>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-injectMocks()
-
-export const Default: Story = {
-  decorators: [
-    Story => (
-      <div style={{maxWidth: 200}}>
-        <Story />
-      </div>
-    ),
-  ],
-  args: {
-    shop: {
-      ...createShop('shop1', 'Amazing Store'),
-      reviewAnalytics: {averageRating: 4.8, reviewCount: 1250},
-    },
-  },
-}
-
-export const CoverImageDark: Story = {
-  decorators: [
-    Story => (
-      <div style={{maxWidth: 200}}>
-        <Story />
-      </div>
-    ),
-  ],
-  name: 'Cover Image',
-  args: {
-    shop: createShop('cover3', 'Midnight Store', {
-      themeType: 'coverImage',
-      coverDominantColor: '#2C3E50',
-    }),
-  },
-}
-
-export const BrandColorWordmark: Story = {
-  decorators: [
-    Story => (
-      <div style={{maxWidth: 200}}>
-        <Story />
-      </div>
-    ),
-  ],
-  name: 'Brand Color + Wordmark',
-  args: {
-    shop: createShop('brand2', 'Amazing Store', {
-      themeType: 'brandColor',
-      wordmarkUrl:
-        'https://merrypeople.com/cdn/shop/files/Transparent_Background_1.png?v=1696465429&width=1024',
-      primaryColor: '#E3F2FD',
-    }),
-  },
-}
-
-export const Grid: Story = {
-  decorators: [
-    () => (
-      <div className="grid grid-cols-2 gap-4">
-        {/* Default */}
-        <MerchantCard
-          shop={{
-            ...createShop('shop1', 'Amazing Store'),
-            reviewAnalytics: {averageRating: 4.8, reviewCount: 1250},
-          }}
-        />
-
-        {/* Cover Image (Dark) */}
-        <MerchantCard
-          shop={createShop('cover3', 'Amazing Store', {
-            themeType: 'coverImage',
-            coverDominantColor: '#2C3E50',
-          })}
-        />
-
-        {/* Brand Color + Wordmark (Light) */}
-        <MerchantCard
-          shop={createShop('brand2', 'Amazing Store', {
-            themeType: 'brandColor',
-            wordmarkUrl:
-              'https://merrypeople.com/cdn/shop/files/Transparent_Background_1.png?v=1696465429&width=1024',
-            primaryColor: '#E3F2FD',
-          })}
-        />
-
-        {/* Brand Color + Wordmark (Dark) */}
-        <MerchantCard
-          shop={createShop('brand4', 'Amazing Store', {
-            themeType: 'brandColor',
-            wordmarkUrl:
-              'https://merrypeople.com/cdn/shop/files/Transparent_Background_1.png?v=1696465429&width=1024',
-            primaryColor: '#808080',
-          })}
-        />
-      </div>
-    ),
-  ],
-  args: {
-    shop: createShop('shop1', 'Amazing Store'),
-  },
-}