Add Grid Story

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: {

packages/go-ui-storybook/src/stories/Grid.stories.tsx

@@ -0,0 +1,104 @@
+import { GridProps } from '@ifrc-go/ui';
+import type {
+    Meta,
+    StoryObj,
+} from '@storybook/react';
+
+import Grid from './Grid';
+
+interface Option {
+    key: string;
+    label: string;
+}
+
+const options: Option[] = [
+    { key: '1', label: 'Cat' },
+    { key: '2', label: 'Dog' },
+    { key: '3', label: 'Elephant' },
+    { key: '4', label: 'Giraffe' },
+    { key: '5', label: 'Lion' },
+];
+
+type RendererProps = {
+    label: string;
+};
+
+type GridSpecificProps = GridProps<Option, string, RendererProps>;
+type Story = StoryObj<GridSpecificProps>;
+
+const meta: Meta<typeof Grid> = {
+    title: 'Components/Grid',
+    component: Grid,
+    parameters: {
+        layout: 'centered',
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/myeW85ibN5p2SlnXcEpxFD/IFRC-GO---UI-Current---1?type=design&node-id=0-4957&mode=design&t=KwxbuoUQxqcLyZbG-0',
+        },
+    },
+    tags: ['autodocs'],
+};
+
+export default meta;
+
+function Option({ label }: RendererProps) {
+    return (
+        <div className="grid-item">
+            {label}
+        </div>
+    );
+}
+
+const keySelector = (datum: Option) => datum.key;
+
+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,
+        pending: true,
+    },
+};
+
+export const Errored: Story = {
+    args: {
+        className: 'grid-story',
+        keySelector,
+        renderer: Option,
+        rendererParams,
+        errored: true,
+        errorMessage: 'Failed to fetch data!',
+    },
+};
+export const Filtered: Story = {
+    args: {
+        keySelector,
+        renderer: Option,
+        rendererParams,
+        filtered: true,
+    },
+};

packages/go-ui-storybook/src/stories/Grid.tsx

@@ -0,0 +1,18 @@
+import {
+    Grid as PureGrid,
+    GridProps as PureGridProps,
+    ListKey,
+} from '@ifrc-go/ui';
+
+interface GridProps< DATUM, KEY extends ListKey, RENDERER_PROPS>
+extends PureGridProps< DATUM, KEY, RENDERER_PROPS> {}
+
+function WrappedGrid
+// eslint-disable-next-line max-len
+<DATUM, KEY extends ListKey, RENDERER_PROPS>(props: GridProps<DATUM, KEY, RENDERER_PROPS>) {
+    return (
+        <PureGrid {...props} />// eslint-disable-line react/jsx-props-no-spreading
+    );
+}
+
+export default WrappedGrid;

packages/go-ui-storybook/src/stories/timeseries.css → packages/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);
+    }
+}