@shopify/shop-minis-react 0.3.4 → 0.4.1

package/src/stories/ProductCard.stories.tsx

@@ -1,92 +0,0 @@
-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 = {
-  decorators: [
-    Story => (
-      <div style={{maxWidth: 150}}>
-        <Story />
-      </div>
-    ),
-  ],
-  args: {
-    product: {
-      id: '1',
-      title: 'Teapot',
-
-      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://cdn.shopify.com/static/sample-images/teapot.jpg',
-        altText: 'Teapot',
-      },
-    },
-  },
-}
-
-export const Grid: Story = {
-  decorators: [
-    Story => (
-      <div className="grid grid-cols-2 gap-4">
-        <Story />
-        <Story />
-        <Story />
-        <Story />
-      </div>
-    ),
-  ],
-  args: {
-    product: createProduct('1', 'Teapot', '100', '120'),
-  },
-}

package/src/stories/ProductLink.stories.tsx

@@ -1,46 +0,0 @@
-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', 'Teapot', '100', '120'),
-  },
-}
-
-export const WithDiscount: Story = {
-  args: {
-    product: createProduct('2', 'Discounted Teapot', '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', 'Teapot', '100', '120'),
-  },
-}

package/src/stories/ProductVariantPrice.stories.tsx

@@ -1,70 +0,0 @@
-import {ProductVariantPrice} from '../components/atoms/product-variant-price'
-
-import type {Meta, StoryObj} from '@storybook/react-vite'
-
-type ProductVariantPriceProps = React.ComponentProps<typeof ProductVariantPrice>
-
-const meta = {
-  title: 'Atoms/ProductVariantPrice',
-  component: ProductVariantPrice,
-  parameters: {
-    layout: 'padded',
-  },
-  argTypes: {
-    amount: {
-      control: 'text',
-    },
-    currencyCode: {
-      control: 'select',
-      options: ['USD', 'CAD', 'EUR', 'GBP', 'JPY'],
-    },
-    compareAtPriceAmount: {
-      control: 'text',
-    },
-    compareAtPriceCurrencyCode: {
-      control: 'select',
-      options: ['USD', 'CAD', 'EUR', 'GBP', 'JPY'],
-    },
-    className: {
-      control: 'text',
-    },
-    currentPriceClassName: {
-      control: 'text',
-    },
-    originalPriceClassName: {
-      control: 'text',
-    },
-  },
-  tags: ['autodocs'],
-} satisfies Meta<ProductVariantPriceProps>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  args: {
-    amount: '29.99',
-    currencyCode: 'USD',
-  },
-}
-
-export const WithDiscount: Story = {
-  name: 'With Discount',
-  args: {
-    amount: '24.99',
-    currencyCode: 'USD',
-    compareAtPriceAmount: '39.99',
-  },
-}
-
-export const CustomStyling: Story = {
-  name: 'Custom Styling',
-  args: {
-    amount: '89.99',
-    currencyCode: 'USD',
-    compareAtPriceAmount: '119.99',
-    currentPriceClassName: 'text-2xl font-bold text-green-600',
-    originalPriceClassName: 'text-lg text-red-500 line-through',
-    className: 'gap-3 p-4 bg-gray-50 rounded-lg',
-  },
-}

package/src/stories/Progress.stories.tsx

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

@@ -1,122 +0,0 @@
-import {useState, useCallback} from 'react'
-
-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/PullToRefreshList',
-  component: List as any,
-  parameters: {
-    layout: 'padded',
-  },
-  argTypes: {
-    height: {
-      control: 'number',
-      description: 'Height of the virtualized list container',
-    },
-    enablePullToRefresh: {
-      control: 'boolean',
-      description: 'Enable pull-to-refresh functionality',
-      defaultValue: true,
-    },
-  },
-  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')
-  )
-}
-
-const PullToRefreshListWrapper = ({
-  initialItems,
-  renderItem,
-  ...props
-}: any) => {
-  const [items, setItems] = useState(initialItems)
-  const [refreshing, setRefreshing] = useState(false)
-
-  const handleRefresh = useCallback(async () => {
-    setRefreshing(true)
-
-    await new Promise(resolve => setTimeout(resolve, 2000))
-
-    const newItems = Array.from({length: 5}, (_, index) =>
-      createProduct(
-        `fresh-${Date.now()}-${index}`,
-        `Fresh Product ${index + 1}`,
-        '12.99'
-      )
-    )
-
-    setItems([...newItems, ...initialItems])
-    setRefreshing(false)
-  }, [initialItems])
-
-  return (
-    <List
-      {...props}
-      items={items}
-      renderItem={renderItem}
-      onRefresh={handleRefresh}
-      refreshing={refreshing}
-      enablePullToRefresh
-    />
-  )
-}
-
-const ProductLinkWithRefreshComponent = (args: any) => (
-  <PullToRefreshListWrapper
-    {...args}
-    initialItems={createProductList(20)}
-    renderItem={(product: Product) => (
-      <div className="p-4">
-        <ProductLink product={product} />
-      </div>
-    )}
-  />
-)
-
-export const ProductLinkWithRefresh: Story = {
-  render: ProductLinkWithRefreshComponent,
-  args: {
-    height: 600,
-    itemSizeForRow: () => 100,
-    showScrollbar: true,
-  },
-}
-
-const ProductGridWithRefreshComponent = (args: any) => (
-  <PullToRefreshListWrapper
-    {...args}
-    initialItems={createProductList(15)}
-    renderItem={(product: Product) => (
-      <div className="grid grid-cols-2 gap-4">
-        <ProductCard product={product} onFavoriteToggled={fn()} />
-        <ProductCard product={product} onFavoriteToggled={fn()} />
-      </div>
-    )}
-  />
-)
-
-export const ProductGridWithRefresh: Story = {
-  render: ProductGridWithRefreshComponent,
-  args: {
-    height: 600,
-    itemSizeForRow: () => 220,
-    showScrollbar: true,
-  },
-}

package/src/stories/QuantitySelector.stories.tsx

@@ -1,78 +0,0 @@
-import {fn} from 'storybook/test'
-
-import {QuantitySelector} from '../components/commerce/quantity-selector'
-
-import type {Meta, StoryObj} from '@storybook/react-vite'
-
-type QuantitySelectorProps = React.ComponentProps<typeof QuantitySelector>
-
-const meta: Meta<QuantitySelectorProps> = {
-  title: 'Commerce/QuantitySelector',
-  component: QuantitySelector,
-  parameters: {},
-  tags: ['autodocs'],
-  argTypes: {
-    quantity: {
-      control: 'number',
-      description: 'Current quantity value',
-    },
-    onQuantityChange: {
-      action: 'quantity changed',
-      description: 'Callback fired when quantity changes',
-    },
-    maxQuantity: {
-      control: 'number',
-      description: 'Maximum allowed quantity',
-    },
-    minQuantity: {
-      control: 'number',
-      description: 'Minimum allowed quantity',
-    },
-    disabled: {
-      control: 'boolean',
-      description: 'Whether the selector is disabled',
-    },
-  },
-  args: {
-    onQuantityChange: fn(),
-  },
-} satisfies Meta<QuantitySelectorProps>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  args: {
-    quantity: 2,
-    maxQuantity: 10,
-    minQuantity: 1,
-    disabled: false,
-  },
-}
-
-export const AtMinimum: Story = {
-  args: {
-    quantity: 1,
-    maxQuantity: 10,
-    minQuantity: 1,
-    disabled: false,
-  },
-}
-
-export const AtMaximum: Story = {
-  args: {
-    quantity: 10,
-    maxQuantity: 10,
-    minQuantity: 1,
-    disabled: false,
-  },
-}
-
-export const Disabled: Story = {
-  args: {
-    quantity: 3,
-    maxQuantity: 10,
-    minQuantity: 1,
-    disabled: true,
-  },
-}

package/src/stories/RadioGroup.stories.tsx

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

@@ -1,37 +0,0 @@
-import {fn} from 'storybook/test'
-
-import {
-  Search,
-  SearchInput,
-  SearchProvider,
-  SearchResultsList,
-} from '../components'
-
-import type {Meta, StoryObj} from '@storybook/react-vite'
-
-const meta = {
-  title: 'Commerce/Search',
-  component: Search,
-  parameters: {
-    layout: 'padded',
-  },
-  tags: ['autodocs'],
-} satisfies Meta<typeof Search>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  args: {
-    onProductClick: fn(),
-  },
-}
-
-export const Composite: Story = {
-  render: args => (
-    <SearchProvider {...args}>
-      <SearchInput placeholder="Search..." />
-      <SearchResultsList />
-    </SearchProvider>
-  ),
-}

package/src/stories/Select.stories.tsx

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

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

@@ -1,26 +0,0 @@
-import {fn} from 'storybook/test'
-
-import {TextInput} from '../components'
-
-import type {Meta, StoryObj} from '@storybook/react-vite'
-
-const meta = {
-  title: 'Atoms/TextInput',
-  component: TextInput,
-  parameters: {
-    layout: 'padded',
-  },
-  tags: ['autodocs'],
-} satisfies Meta<typeof TextInput>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  args: {
-    placeholder: 'Search...',
-    onFocus: fn(),
-    onBlur: fn(),
-    onChange: fn(),
-  },
-}

package/src/stories/Toaster.stories.tsx

@@ -1,46 +0,0 @@
-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: [
-    () => (
-      <Button onClick={() => toast.success('Success toast!')}>
-        Show success Toast
-      </Button>
-    ),
-  ],
-  args: {},
-}
-
-export const ErrorToast: Story = {
-  decorators: [
-    () => (
-      <Button onClick={() => toast.error('Error toast!')}>
-        Show error Toast
-      </Button>
-    ),
-  ],
-}