From ea0a3cef6204a37d4f8fb0271e853b269ec45923 Mon Sep 17 00:00:00 2001 From: roshni73 Date: Tue, 21 May 2024 14:37:43 +0545 Subject: [PATCH 1/2] Add Grid Story --- .../src/stories/Grid.stories.tsx | 108 ++++++++++++++++++ packages/go-ui-storybook/src/stories/Grid.tsx | 18 +++ 2 files changed, 126 insertions(+) create mode 100644 packages/go-ui-storybook/src/stories/Grid.stories.tsx create mode 100644 packages/go-ui-storybook/src/stories/Grid.tsx diff --git a/packages/go-ui-storybook/src/stories/Grid.stories.tsx b/packages/go-ui-storybook/src/stories/Grid.stories.tsx new file mode 100644 index 000000000..eb9697697 --- /dev/null +++ b/packages/go-ui-storybook/src/stories/Grid.stories.tsx @@ -0,0 +1,108 @@ +import { + GridProps, + ListKey, +} from '@ifrc-go/ui'; +import { useArgs } from '@storybook/preview-api'; +import type { + Meta, + StoryObj, +} from '@storybook/react'; + +import Grid from './Grid'; + +interface Option { + key: string; + label: string; +} + +const options: Option[] = [ + { key: '1', label: 'Vegetables' }, + { key: '2', label: 'Fruits' }, + { key: '3', label: 'Dairy' }, +]; +type RendererProps = { + children: React.ReactNode + +}; + +type GridSpecificProps = GridProps; + +type Story = StoryObj; + +const meta: Meta = { + 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'], + decorators: [ + function Component(_, ctx) { + const componentArgs = ctx.args as GridSpecificProps; + const [args] = useArgs(); + const { data } = args; + return ( + + ); + }, + ], + +}; + +export default meta; + +function Option({ children }: RendererProps) { + return ( +
+ { children } +
+ ); +} + +const keySelector = (datum: Option) => datum.key; + +const rendererParams = (_key: string, option: Option) => ({ children: option.label }); + +export const Default: Story = { + args: { + data: options, + keySelector, + renderer: Option, + rendererParams, + }, +}; + +export const Pending: Story = { + args: { + keySelector, + renderer: Option, + rendererParams, + pending: true, + }, +}; + +export const Errored: Story = { + args: { + keySelector, + renderer: Option, + rendererParams, + errored: true, + errorMessage: 'Failed to fetch data!', + }, +}; +export const Filtered: Story = { + args: { + keySelector, + renderer: Option, + rendererParams, + filtered: true, + }, +}; diff --git a/packages/go-ui-storybook/src/stories/Grid.tsx b/packages/go-ui-storybook/src/stories/Grid.tsx new file mode 100644 index 000000000..6dd930cd0 --- /dev/null +++ b/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 +(props: GridProps) { + return ( + // eslint-disable-line react/jsx-props-no-spreading + ); +} + +export default WrappedGrid; From d5eb4376a3d3d159f77ed7fd04391ccd289461d0 Mon Sep 17 00:00:00 2001 From: samshara Date: Wed, 5 Jun 2024 17:38:31 +0545 Subject: [PATCH 2/2] refactor: Grid story --- .../go-ui-storybook/.storybook/preview.ts | 2 +- .../src/stories/Grid.stories.tsx | 58 +++++++++---------- .../src/stories/{timeseries.css => index.css} | 12 ++++ 3 files changed, 40 insertions(+), 32 deletions(-) rename packages/go-ui-storybook/src/stories/{timeseries.css => index.css} (69%) diff --git a/packages/go-ui-storybook/.storybook/preview.ts b/packages/go-ui-storybook/.storybook/preview.ts index 9fb5de8d1..f939f1aff 100644 --- 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 index eb9697697..57361b6e1 100644 --- 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; - +type GridSpecificProps = GridProps; type Story = StoryObj; const meta: Meta = { @@ -40,48 +37,46 @@ const meta: Meta = { }, }, tags: ['autodocs'], - decorators: [ - function Component(_, ctx) { - const componentArgs = ctx.args as GridSpecificProps; - const [args] = useArgs(); - const { data } = args; - return ( - - ); - }, - ], - }; export default meta; -function Option({ children }: RendererProps) { +function Option({ label }: RendererProps) { return ( -
- { children } +
+ {label}
); } 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/packages/go-ui-storybook/src/stories/timeseries.css b/packages/go-ui-storybook/src/stories/index.css similarity index 69% rename from packages/go-ui-storybook/src/stories/timeseries.css rename to packages/go-ui-storybook/src/stories/index.css index 0980c5d01..95dbf920a 100644 --- a/packages/go-ui-storybook/src/stories/timeseries.css +++ b/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); + } +}