@shopify/shop-minis-react 0.0.19 → 0.0.20

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/styles/utilities.css

@@ -0,0 +1,22 @@
+/* Scrollbar utilities */
+
+.no-scrollbars {
+  scrollbar-width: thin;
+  scrollbar-color: transparent transparent;
+
+  &::-webkit-scrollbar {
+    width: 1px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: transparent;
+  }
+}
+
+.no-scrollbars::-webkit-scrollbar {
+  display: none; /* Safari and Chrome */
+}