feat(components): add a generic Grid component

* merge Columns, Gallery and CardsList into Grid component
* add more options to control the grid

1 files changed, 140 insertions, 0 deletions

diff --git a/src/components/molecules/grid/grid.stories.tsx b/src/components/molecules/grid/grid.stories.tsx
new file mode 100644
index 0000000..ce3ee2b
--- /dev/null
+++ b/src/components/molecules/grid/grid.stories.tsx
@@ -0,0 +1,140 @@
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { FC, ReactNode } from 'react';
+import { Grid } from './grid';
+
+export default {
+  title: 'Molecules/Grid',
+  component: Grid,
+  argTypes: {
+    items: {
+      description: 'The grid items.',
+      type: {
+        name: 'object',
+        required: true,
+        value: {},
+      },
+    },
+  },
+} as ComponentMeta<typeof Grid>;
+
+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> },
+  ],
+};
+
+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> },
+  ],
+  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> },
+  ],
+  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> },
+  ],
+  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> },
+  ],
+  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> },
+  ],
+  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> },
+  ],
+  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> },
+  ],
+  sizeMax: '300px',
+  sizeMin: '100px',
+  gap: 'sm',
+};
+
+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> },
+  ],
+  col: 'auto-fill',
+  sizeMin: '100px',
+  gap: 'sm',
+};