refactor: Grid story

IFRCGo · Jun 6, 2024 · d5eb437 · d5eb437
1 parent ea0a3ce
commit d5eb437
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 32 deletions.
diff --git a/packages/go-ui-storybook/.storybook/preview.ts b/packages/go-ui-storybook/.storybook/preview.ts
@@ -1,7 +1,7 @@
 import '@ifrc-go/ui/index.css';
 import type { Preview } from "@storybook/react";
 
-import '../src/stories/timeseries.css';
+import '../src/stories/index.css';
 
 const preview: Preview = {
     parameters: {

diff --git a/packages/go-ui-storybook/src/stories/Grid.stories.tsx b/packages/go-ui-storybook/src/stories/Grid.stories.tsx
@@ -1,8 +1,4 @@
-import {
-    GridProps,
-    ListKey,
-} from '@ifrc-go/ui';
-import { useArgs } from '@storybook/preview-api';
+import { GridProps } from '@ifrc-go/ui';
 import type {
     Meta,
     StoryObj,
@@ -16,17 +12,18 @@ interface Option {
 }
 
 const options: Option[] = [
-    { key: '1', label: 'Vegetables' },
-    { key: '2', label: 'Fruits' },
-    { key: '3', label: 'Dairy' },
+    { key: '1', label: 'Cat' },
+    { key: '2', label: 'Dog' },
+    { key: '3', label: 'Elephant' },
+    { key: '4', label: 'Giraffe' },
+    { key: '5', label: 'Lion' },
 ];
-type RendererProps = {
-    children: React.ReactNode
 
+type RendererProps = {
+    label: string;
 };
 
-type GridSpecificProps = GridProps<Option, ListKey, RendererProps>;
-
+type GridSpecificProps = GridProps<Option, string, RendererProps>;
 type Story = StoryObj<GridSpecificProps>;
 
 const meta: Meta<typeof Grid> = {
@@ -40,48 +37,46 @@ const meta: Meta<typeof Grid> = {
         },
     },
     tags: ['autodocs'],
-    decorators: [
-        function Component(_, ctx) {
-            const componentArgs = ctx.args as GridSpecificProps;
-            const [args] = useArgs();
-            const { data } = args;
-            return (
-                <Grid
-                    // eslint-disable-next-line react/jsx-props-no-spreading
-                    {...componentArgs}
-                    data={data}
-                />
-            );
-        },
-    ],
-
 };
 
 export default meta;
 
-function Option({ children }: RendererProps) {
+function Option({ label }: RendererProps) {
     return (
-        <div>
-            { children }
+        <div className="grid-item">
+            {label}
         </div>
     );
 }
 
 const keySelector = (datum: Option) => datum.key;
 
-const rendererParams = (_key: string, option: Option) => ({ children: option.label });
+const rendererParams = (_key: string, option: Option) => ({ label: option.label });
 
 export const Default: Story = {
     args: {
+        className: 'grid-story',
+        data: options,
+        keySelector,
+        renderer: Option,
+        rendererParams,
+    },
+};
+
+export const WithPreferredColumns: Story = {
+    args: {
+        className: 'grid-story',
         data: options,
         keySelector,
         renderer: Option,
         rendererParams,
+        numPreferredColumns: 2,
     },
 };
 
 export const Pending: Story = {
     args: {
+        className: 'grid-story',
         keySelector,
         renderer: Option,
         rendererParams,
@@ -91,6 +86,7 @@ export const Pending: Story = {
 
 export const Errored: Story = {
     args: {
+        className: 'grid-story',
         keySelector,
         renderer: Option,
         rendererParams,

diff --git a/...o-ui-storybook/src/stories/timeseries.css → ...ges/go-ui-storybook/src/stories/index.css b/...o-ui-storybook/src/stories/timeseries.css → ...ges/go-ui-storybook/src/stories/index.css
@@ -27,3 +27,15 @@
 .list-story {
     width: 30rem;
 }
+
+.grid-story {
+    .grid-item {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-grow: 0;
+        padding: var(--go-ui-spacing-sm);
+        border-radius: var(--go-ui-border-radius-md);
+        box-shadow: var(--go-ui-box-shadow-md);
+    }
+}