From 329e7c89bac50be9db2c6d2ec6751ab0ffad42ac Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Wed, 22 Nov 2023 18:12:32 +0100
Subject: refactor(components): replace items prop in Grid with children prop

It is easier to read and to maintain this way. The `items` prop was not
useful since we are not manipulating the items. Changes:
* extract GridItem component from Grid component
* replace `items` prop of type Array<ReactNode> with `children` prop of
type ReactNode
* remove GridItem styles
---
 src/components/molecules/grid/grid.stories.tsx | 224 +++++++++++++++++--------
 1 file changed, 157 insertions(+), 67 deletions(-)

(limited to 'src/components/molecules/grid/grid.stories.tsx')

diff --git a/src/components/molecules/grid/grid.stories.tsx b/src/components/molecules/grid/grid.stories.tsx
index ce3ee2b..4e12af4 100644
--- a/src/components/molecules/grid/grid.stories.tsx
+++ b/src/components/molecules/grid/grid.stories.tsx
@@ -1,6 +1,6 @@
 import type { ComponentMeta, ComponentStory } from '@storybook/react';
-import type { FC, ReactNode } from 'react';
 import { Grid } from './grid';
+import { GridItem } from './grid-item';
 
 export default {
   title: 'Molecules/Grid',
@@ -19,107 +19,185 @@ export default {
 
 const Template: ComponentStory<typeof Grid> = (args) => <Grid {...args} />;
 
-type ItemProps = {
-  children: ReactNode;
-};
-
-const Item: FC<ItemProps> = ({ children }) => (
-  <div style={{ border: '1px solid #000', padding: '1rem' }}>{children}</div>
-);
-
 export const Default = Template.bind({});
 Default.args = {
-  items: [
-    { id: 'item-1', item: <Item>Item 1</Item> },
-    { id: 'item-2', item: <Item>Item 2</Item> },
-    { id: 'item-3', item: <Item>Item 3</Item> },
-    { id: 'item-4', item: <Item>Item 4</Item> },
-    { id: 'item-5', item: <Item>Item 5</Item> },
-  ],
+  children: (
+    <>
+      <GridItem style={{ border: '1px solid #000', padding: '1rem' }}>
+        Item 1
+      </GridItem>
+      <GridItem style={{ border: '1px solid #000', padding: '1rem' }}>
+        Item 2
+      </GridItem>
+      <GridItem style={{ border: '1px solid #000', padding: '1rem' }}>
+        Item 3
+      </GridItem>
+      <GridItem style={{ border: '1px solid #000', padding: '1rem' }}>
+        Item 4
+      </GridItem>
+      <GridItem style={{ border: '1px solid #000', padding: '1rem' }}>
+        Item 5
+      </GridItem>
+    </>
+  ),
 };
 
 export const OneColumn = Template.bind({});
 OneColumn.args = {
-  items: [
-    { id: 'item-1', item: <Item>Item 1</Item> },
-    { id: 'item-2', item: <Item>Item 2</Item> },
-    { id: 'item-3', item: <Item>Item 3</Item> },
-  ],
+  children: (
+    <>
+      <GridItem style={{ border: '1px solid #000', padding: '1rem' }}>
+        Item 1
+      </GridItem>
+      <GridItem style={{ border: '1px solid #000', padding: '1rem' }}>
+        Item 2
+      </GridItem>
+      <GridItem style={{ border: '1px solid #000', padding: '1rem' }}>
+        Item 3
+      </GridItem>
+    </>
+  ),
   col: 1,
   gap: 'sm',
 };
 
 export const TwoColumns = Template.bind({});
 TwoColumns.args = {
-  items: [
-    { id: 'item-1', item: <Item>Item 1</Item> },
-    { id: 'item-2', item: <Item>Item 2</Item> },
-    { id: 'item-3', item: <Item>Item 3</Item> },
-  ],
+  children: (
+    <>
+      <GridItem style={{ border: '1px solid #000', padding: '1rem' }}>
+        Item 1
+      </GridItem>
+      <GridItem style={{ border: '1px solid #000', padding: '1rem' }}>
+        Item 2
+      </GridItem>
+      <GridItem style={{ border: '1px solid #000', padding: '1rem' }}>
+        Item 3
+      </GridItem>
+    </>
+  ),
   col: 2,
   gap: 'sm',
 };
 
 export const ThreeColumns = Template.bind({});
 ThreeColumns.args = {
-  items: [
-    { id: 'item-1', item: <Item>Item 1</Item> },
-    { id: 'item-2', item: <Item>Item 2</Item> },
-    { id: 'item-3', item: <Item>Item 3</Item> },
-    { id: 'item-4', item: <Item>Item 4</Item> },
-  ],
+  children: (
+    <>
+      <GridItem style={{ border: '1px solid #000', padding: '1rem' }}>
+        Item 1
+      </GridItem>
+      <GridItem style={{ border: '1px solid #000', padding: '1rem' }}>
+        Item 2
+      </GridItem>
+      <GridItem style={{ border: '1px solid #000', padding: '1rem' }}>
+        Item 3
+      </GridItem>
+      <GridItem style={{ border: '1px solid #000', padding: '1rem' }}>
+        Item 4
+      </GridItem>
+    </>
+  ),
   col: 3,
   gap: 'sm',
 };
 
 export const FixedSize = Template.bind({});
 FixedSize.args = {
-  items: [
-    { id: 'item-1', item: <Item>Item 1</Item> },
-    { id: 'item-2', item: <Item>Item 2</Item> },
-    { id: 'item-3', item: <Item>Item 3</Item> },
-    { id: 'item-4', item: <Item>Item 4</Item> },
-    { id: 'item-5', item: <Item>Item 5</Item> },
-  ],
+  children: (
+    <>
+      <GridItem style={{ border: '1px solid #000', padding: '1rem' }}>
+        Item 1
+      </GridItem>
+      <GridItem style={{ border: '1px solid #000', padding: '1rem' }}>
+        Item 2
+      </GridItem>
+      <GridItem style={{ border: '1px solid #000', padding: '1rem' }}>
+        Item 3
+      </GridItem>
+      <GridItem style={{ border: '1px solid #000', padding: '1rem' }}>
+        Item 4
+      </GridItem>
+      <GridItem style={{ border: '1px solid #000', padding: '1rem' }}>
+        Item 5
+      </GridItem>
+    </>
+  ),
   size: '300px',
   gap: 'sm',
 };
 
 export const MaxSize = Template.bind({});
 MaxSize.args = {
-  items: [
-    { id: 'item-1', item: <Item>Item 1</Item> },
-    { id: 'item-2', item: <Item>Item 2</Item> },
-    { id: 'item-3', item: <Item>Item 3</Item> },
-    { id: 'item-4', item: <Item>Item 4</Item> },
-    { id: 'item-5', item: <Item>Item 5</Item> },
-  ],
+  children: (
+    <>
+      <GridItem style={{ border: '1px solid #000', padding: '1rem' }}>
+        Item 1
+      </GridItem>
+      <GridItem style={{ border: '1px solid #000', padding: '1rem' }}>
+        Item 2
+      </GridItem>
+      <GridItem style={{ border: '1px solid #000', padding: '1rem' }}>
+        Item 3
+      </GridItem>
+      <GridItem style={{ border: '1px solid #000', padding: '1rem' }}>
+        Item 4
+      </GridItem>
+      <GridItem style={{ border: '1px solid #000', padding: '1rem' }}>
+        Item 5
+      </GridItem>
+    </>
+  ),
   sizeMax: '300px',
   gap: 'sm',
 };
 
 export const MinSize = Template.bind({});
 MinSize.args = {
-  items: [
-    { id: 'item-1', item: <Item>Item 1</Item> },
-    { id: 'item-2', item: <Item>Item 2</Item> },
-    { id: 'item-3', item: <Item>Item 3</Item> },
-    { id: 'item-4', item: <Item>Item 4</Item> },
-    { id: 'item-5', item: <Item>Item 5</Item> },
-  ],
+  children: (
+    <>
+      <GridItem style={{ border: '1px solid #000', padding: '1rem' }}>
+        Item 1
+      </GridItem>
+      <GridItem style={{ border: '1px solid #000', padding: '1rem' }}>
+        Item 2
+      </GridItem>
+      <GridItem style={{ border: '1px solid #000', padding: '1rem' }}>
+        Item 3
+      </GridItem>
+      <GridItem style={{ border: '1px solid #000', padding: '1rem' }}>
+        Item 4
+      </GridItem>
+      <GridItem style={{ border: '1px solid #000', padding: '1rem' }}>
+        Item 5
+      </GridItem>
+    </>
+  ),
   sizeMin: '100px',
   gap: 'sm',
 };
 
 export const MinAndMaxSize = Template.bind({});
 MinAndMaxSize.args = {
-  items: [
-    { id: 'item-1', item: <Item>Item 1</Item> },
-    { id: 'item-2', item: <Item>Item 2</Item> },
-    { id: 'item-3', item: <Item>Item 3</Item> },
-    { id: 'item-4', item: <Item>Item 4</Item> },
-    { id: 'item-5', item: <Item>Item 5</Item> },
-  ],
+  children: (
+    <>
+      <GridItem style={{ border: '1px solid #000', padding: '1rem' }}>
+        Item 1
+      </GridItem>
+      <GridItem style={{ border: '1px solid #000', padding: '1rem' }}>
+        Item 2
+      </GridItem>
+      <GridItem style={{ border: '1px solid #000', padding: '1rem' }}>
+        Item 3
+      </GridItem>
+      <GridItem style={{ border: '1px solid #000', padding: '1rem' }}>
+        Item 4
+      </GridItem>
+      <GridItem style={{ border: '1px solid #000', padding: '1rem' }}>
+        Item 5
+      </GridItem>
+    </>
+  ),
   sizeMax: '300px',
   sizeMin: '100px',
   gap: 'sm',
@@ -127,13 +205,25 @@ MinAndMaxSize.args = {
 
 export const Fill = Template.bind({});
 Fill.args = {
-  items: [
-    { id: 'item-1', item: <Item>Item 1</Item> },
-    { id: 'item-2', item: <Item>Item 2</Item> },
-    { id: 'item-3', item: <Item>Item 3</Item> },
-    { id: 'item-4', item: <Item>Item 4</Item> },
-    { id: 'item-5', item: <Item>Item 5</Item> },
-  ],
+  children: (
+    <>
+      <GridItem style={{ border: '1px solid #000', padding: '1rem' }}>
+        Item 1
+      </GridItem>
+      <GridItem style={{ border: '1px solid #000', padding: '1rem' }}>
+        Item 2
+      </GridItem>
+      <GridItem style={{ border: '1px solid #000', padding: '1rem' }}>
+        Item 3
+      </GridItem>
+      <GridItem style={{ border: '1px solid #000', padding: '1rem' }}>
+        Item 4
+      </GridItem>
+      <GridItem style={{ border: '1px solid #000', padding: '1rem' }}>
+        Item 5
+      </GridItem>
+    </>
+  ),
   col: 'auto-fill',
   sizeMin: '100px',
   gap: 'sm',
-- 
cgit v1.2.3