docs: update eCommerce example for product detail

mauroreisvieira · Dec 30, 2024 · 6101db2 · 6101db2
1 parent bb8f16b
commit 6101db2
Show file tree

Hide file tree

Showing 7 changed files with 455 additions and 193 deletions.
diff --git a/src/stories/ecommerce/Ecommerce.stories.tsx b/src/stories/ecommerce/Ecommerce.stories.tsx
@@ -10,73 +10,52 @@ const meta = {
   title: "Examples/Ecommerce",
   parameters: {
     layout: "fullscreen"
-  }
-};
-
-export default meta;
-
-export const Collections = {
-  render: function Render() {
-    return (
+  },
+  decorators: [
+    (Story) => (
       <Theme
         tokens={{
           default: {
             color: {
+              "primary-background": "slate-900",
+              "primary-background-hovered": "slate-800",
+              "primary-background-pressed": "slate-800",
+              "primary-foreground-on-background": "#fff",
               "secondary-background": "slate-100",
               "secondary-background-hovered": "slate-200",
               "secondary-background-pressed": "slate-200",
               "secondary-foreground-on-background": "slate-800"
             },
             components: {
               button: {
-                radius: "full"
+                radius: "md"
               }
             }
           }
         }}
       >
-        <CL />
+        <Story />
       </Theme>
-    );
-  }
+    )
+  ]
 };
 
-export const Details = {
+export default meta;
+
+export const Collections = {
   render: function Render() {
-    return (
-      <Theme
-        tokens={{
-          default: {
-            components: {
-              group: {
-                radius: "sm"
-              }
-            }
-          }
-        }}
-      >
-        <DT />
-      </Theme>
-    );
+    return <CL />;
   }
 };
 
 export const QuickViews = {
   render: function Render() {
-    return (
-      <Theme
-        tokens={{
-          default: {
-            components: {
-              group: {
-                radius: "sm"
-              }
-            }
-          }
-        }}
-      >
-        <QV />
-      </Theme>
-    );
+    return <QV />;
+  }
+};
+
+export const Details = {
+  render: function Render() {
+    return <DT />;
   }
 };
diff --git a/src/stories/ecommerce/examples/collections/Collections.tsx b/src/stories/ecommerce/examples/collections/Collections.tsx
@@ -44,7 +44,7 @@ export function Collections(): React.ReactElement {
     // If no filters are applied, return all products
     const filteredProducts = PRODUCTS.map((product) => ({
       ...product,
-      image: data?.results[product.id]?.urls.small
+      image: data?.results[product.id - 1]?.urls.small
     })).filter(({ category, color, tag }) => {
       // Check if the product matches the Tag filter (only if filters.tag is not empty)
       const matchesTag = filters.tag.length === 0 || filters.tag.includes(tag);