From c0986922960d25ad73ee247bd608f7c37cc55c6a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matth=C3=A4us=20N=C3=B6ssing?= Date: Fri, 15 Sep 2023 09:15:41 +0200 Subject: [PATCH 01/14] make select item form field fix height --- .../WithPlaceholder.stories.mdx | 47 +++++++++++++++++++ .../WithPlaceholder/WithPlaceholder.tsx | 21 +++++++++ src/components/content/index.ts | 1 + 3 files changed, 69 insertions(+) create mode 100644 src/components/content/WithPlaceholder/WithPlaceholder.stories.mdx create mode 100644 src/components/content/WithPlaceholder/WithPlaceholder.tsx diff --git a/src/components/content/WithPlaceholder/WithPlaceholder.stories.mdx b/src/components/content/WithPlaceholder/WithPlaceholder.stories.mdx new file mode 100644 index 00000000..312e1bb6 --- /dev/null +++ b/src/components/content/WithPlaceholder/WithPlaceholder.stories.mdx @@ -0,0 +1,47 @@ +import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs' +import {WithPlaceholder} from "./WithPlaceholder"; + + + + +# WithPlaceholder + +This component validates the content and displays a placeholder if the content is not valid e.g. empty, null or undefined. + +export const Template = ({ children, ...args }) => {children} + + + + {Template.bind({})} + + + +### Props + + diff --git a/src/components/content/WithPlaceholder/WithPlaceholder.tsx b/src/components/content/WithPlaceholder/WithPlaceholder.tsx new file mode 100644 index 00000000..5d03b5dd --- /dev/null +++ b/src/components/content/WithPlaceholder/WithPlaceholder.tsx @@ -0,0 +1,21 @@ +import { ReactNode } from 'react' + +export type WithPlaceholderProps = { + children: ReactNode + placeholder?: ReactNode +} + +export function WithPlaceholder({ + children, + placeholder = '-', + }: WithPlaceholderProps) { + return ( + <> + {typeof children === 'number' + ? isNaN(children) + ? placeholder + : children + : children || placeholder} + + ) +} diff --git a/src/components/content/index.ts b/src/components/content/index.ts index 617ae4a0..959a5cb9 100644 --- a/src/components/content/index.ts +++ b/src/components/content/index.ts @@ -11,3 +11,4 @@ export * from './DescriptionItem/DescriptionItemTitle' export * from './DescriptionItem/DescriptionItemContent' export * from './DescriptionItem/LoadingDescriptionItem' export * from './DescriptionItem/types' +export * from './WithPlaceholder/WithPlaceholder' From aee80ddf9f6ab0ecc69f766821414ead91915978 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matth=C3=A4us=20N=C3=B6ssing?= Date: Fri, 15 Sep 2023 09:19:44 +0200 Subject: [PATCH 02/14] lint fix --- src/components/content/WithPlaceholder/WithPlaceholder.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/content/WithPlaceholder/WithPlaceholder.tsx b/src/components/content/WithPlaceholder/WithPlaceholder.tsx index 5d03b5dd..b8fbeda1 100644 --- a/src/components/content/WithPlaceholder/WithPlaceholder.tsx +++ b/src/components/content/WithPlaceholder/WithPlaceholder.tsx @@ -6,9 +6,9 @@ export type WithPlaceholderProps = { } export function WithPlaceholder({ - children, - placeholder = '-', - }: WithPlaceholderProps) { + children, + placeholder = '-', +}: WithPlaceholderProps) { return ( <> {typeof children === 'number' From 59cc1f996737a526dda895b12f23a0b3ddc1fe0d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matth=C3=A4us=20N=C3=B6ssing?= Date: Fri, 15 Sep 2023 15:29:50 +0200 Subject: [PATCH 03/14] write store in tsx --- .../WithPlacehoder.stories.tsx | 56 +++++++++++++++++++ .../WithPlaceholder.stories.mdx | 47 ---------------- .../WithPlaceholder/WithPlaceholder.tsx | 9 +++ 3 files changed, 65 insertions(+), 47 deletions(-) create mode 100644 src/components/content/WithPlaceholder/WithPlacehoder.stories.tsx delete mode 100644 src/components/content/WithPlaceholder/WithPlaceholder.stories.mdx diff --git a/src/components/content/WithPlaceholder/WithPlacehoder.stories.tsx b/src/components/content/WithPlaceholder/WithPlacehoder.stories.tsx new file mode 100644 index 00000000..1bd09686 --- /dev/null +++ b/src/components/content/WithPlaceholder/WithPlacehoder.stories.tsx @@ -0,0 +1,56 @@ +import {WithPlaceholder} from "./WithPlaceholder"; +import {Controls, Description, Primary, Stories, Subheading, Title} from "@storybook/blocks"; +import {Meta, StoryObj} from "@storybook/react"; + + +const children ={ + options: ['null', 'undefined', 'empty', 'text'], + mapping: { + null: null, + undefined: undefined, + empty: '', + text: 'John Doe', +}, + control: { type: 'select' }, +} + +const placeholder = { + options: ['star', 'notFound'], + mapping: { + star: '*', + notFound: 'Not found', +}, +} +const meta = { + title:"Components/Content/WithPlaceHolder", + component: WithPlaceholder, + args: { + children: "Content", + placeholder: "Placeholder", + }, + argTypes: { + children: children, + placeholder: placeholder, + }, + parameters: { + docs: { + page: () => ( + <> + + <Description /> + <Primary /> + <Subheading>Props</Subheading> + <Controls /> + <Stories /> + </> + ), + }, + }, +} satisfies Meta<typeof WithPlaceholder> +export default meta + +type Story = StoryObj<typeof meta> + +export const Default: Story = {} + + diff --git a/src/components/content/WithPlaceholder/WithPlaceholder.stories.mdx b/src/components/content/WithPlaceholder/WithPlaceholder.stories.mdx deleted file mode 100644 index 312e1bb6..00000000 --- a/src/components/content/WithPlaceholder/WithPlaceholder.stories.mdx +++ /dev/null @@ -1,47 +0,0 @@ -import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs' -import {WithPlaceholder} from "./WithPlaceholder"; - - -<Meta title="Components/Content/WithPlaceHolder" component={WithPlaceholder} /> - -# WithPlaceholder - -This component validates the content and displays a placeholder if the content is not valid e.g. empty, null or undefined. - -export const Template = ({ children, ...args }) => <WithPlaceholder {...args}>{children}</WithPlaceholder> - -<Canvas> - <Story - name="Default" - args={{ - children: 'Text', - placeholder: '-', - }} - argTypes={{ - children: { - options: ['null', 'empty', 'undefined', 'Text'], - mapping: { - 'null': null, - 'Text': 'Joe Doe', - 'empty': '', - 'undefined': undefined, - }, - control: { type: 'select' }, - }, - placeholder: { - defaultValue: '-', - options: ['Custom star placeholder', 'Custom not found placeholder' ], - mapping: { - 'Custom star placeholder': '***', - 'Custom not found placeholder': 'not found', - }, - }, - }} - > - {Template.bind({})} - </Story> -</Canvas> - -### Props - -<ArgsTable story="Default" /> diff --git a/src/components/content/WithPlaceholder/WithPlaceholder.tsx b/src/components/content/WithPlaceholder/WithPlaceholder.tsx index b8fbeda1..ec9d00f8 100644 --- a/src/components/content/WithPlaceholder/WithPlaceholder.tsx +++ b/src/components/content/WithPlaceholder/WithPlaceholder.tsx @@ -1,10 +1,19 @@ import { ReactNode } from 'react' export type WithPlaceholderProps = { + /** + * Defineds the children to be rendered. + */ children: ReactNode + /** + * Defineds the placeholder to be rendered if the children is not valid. + */ placeholder?: ReactNode } +/** + * This component validates the content and displays a placeholder if the content is not valid e.g. empty, null or undefined. + */ export function WithPlaceholder({ children, placeholder = '-', From bd3d04f0e49f4b45327e62b4b445995702aad8fe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matth=C3=A4us=20N=C3=B6ssing?= <noessing.matthaeus@protonmail.com> Date: Fri, 15 Sep 2023 15:36:57 +0200 Subject: [PATCH 04/14] lint fix --- .../WithPlacehoder.stories.tsx | 44 ++++++++++--------- 1 file changed, 24 insertions(+), 20 deletions(-) diff --git a/src/components/content/WithPlaceholder/WithPlacehoder.stories.tsx b/src/components/content/WithPlaceholder/WithPlacehoder.stories.tsx index 1bd09686..21ee26aa 100644 --- a/src/components/content/WithPlaceholder/WithPlacehoder.stories.tsx +++ b/src/components/content/WithPlaceholder/WithPlacehoder.stories.tsx @@ -1,36 +1,42 @@ -import {WithPlaceholder} from "./WithPlaceholder"; -import {Controls, Description, Primary, Stories, Subheading, Title} from "@storybook/blocks"; -import {Meta, StoryObj} from "@storybook/react"; +import { + Controls, + Description, + Primary, + Stories, + Subheading, + Title, +} from '@storybook/blocks' +import { Meta, StoryObj } from '@storybook/react' +import { WithPlaceholder } from './WithPlaceholder' - -const children ={ +const children = { options: ['null', 'undefined', 'empty', 'text'], mapping: { - null: null, - undefined: undefined, - empty: '', - text: 'John Doe', -}, + null: null, + undefined, + empty: '', + text: 'John Doe', + }, control: { type: 'select' }, } const placeholder = { options: ['star', 'notFound'], mapping: { - star: '*', - notFound: 'Not found', -}, + star: '*', + notFound: 'Not found', + }, } const meta = { - title:"Components/Content/WithPlaceHolder", + title: 'Components/Content/WithPlaceHolder', component: WithPlaceholder, args: { - children: "Content", - placeholder: "Placeholder", + children: 'Content', + placeholder: 'Placeholder', }, argTypes: { - children: children, - placeholder: placeholder, + children, + placeholder, }, parameters: { docs: { @@ -52,5 +58,3 @@ export default meta type Story = StoryObj<typeof meta> export const Default: Story = {} - - From dc45e80c4458c40563ef7f2e9b3d0e7bfcf26b63 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matth=C3=A4us=20N=C3=B6ssing?= <noessing.matthaeus@protonmail.com> Date: Fri, 15 Sep 2023 15:42:57 +0200 Subject: [PATCH 05/14] add default option to placeholder --- .../content/WithPlaceholder/WithPlacehoder.stories.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/content/WithPlaceholder/WithPlacehoder.stories.tsx b/src/components/content/WithPlaceholder/WithPlacehoder.stories.tsx index 21ee26aa..fa2614e1 100644 --- a/src/components/content/WithPlaceholder/WithPlacehoder.stories.tsx +++ b/src/components/content/WithPlaceholder/WithPlacehoder.stories.tsx @@ -21,8 +21,9 @@ const children = { } const placeholder = { - options: ['star', 'notFound'], + options: ['default','star', 'notFound'], mapping: { + default: '-', star: '*', notFound: 'Not found', }, @@ -32,7 +33,6 @@ const meta = { component: WithPlaceholder, args: { children: 'Content', - placeholder: 'Placeholder', }, argTypes: { children, From 8e73d4b5b6564aeaa03b1f34419e8196047a4fb0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matth=C3=A4us=20N=C3=B6ssing?= <noessing.matthaeus@protonmail.com> Date: Fri, 15 Sep 2023 15:46:03 +0200 Subject: [PATCH 06/14] fix lint error --- .../content/WithPlaceholder/WithPlacehoder.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/content/WithPlaceholder/WithPlacehoder.stories.tsx b/src/components/content/WithPlaceholder/WithPlacehoder.stories.tsx index fa2614e1..f1851bdf 100644 --- a/src/components/content/WithPlaceholder/WithPlacehoder.stories.tsx +++ b/src/components/content/WithPlaceholder/WithPlacehoder.stories.tsx @@ -21,7 +21,7 @@ const children = { } const placeholder = { - options: ['default','star', 'notFound'], + options: ['default', 'star', 'notFound'], mapping: { default: '-', star: '*', From d492d6bb5769caf230bea49b079f098f9c52d309 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matth=C3=A4us=20N=C3=B6ssing?= <noessing.matthaeus@protonmail.com> Date: Fri, 15 Sep 2023 15:48:05 +0200 Subject: [PATCH 07/14] fix typo in props description --- src/components/content/WithPlaceholder/WithPlaceholder.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/content/WithPlaceholder/WithPlaceholder.tsx b/src/components/content/WithPlaceholder/WithPlaceholder.tsx index ec9d00f8..e7078d41 100644 --- a/src/components/content/WithPlaceholder/WithPlaceholder.tsx +++ b/src/components/content/WithPlaceholder/WithPlaceholder.tsx @@ -2,11 +2,11 @@ import { ReactNode } from 'react' export type WithPlaceholderProps = { /** - * Defineds the children to be rendered. + * Defines the children to be rendered. */ children: ReactNode /** - * Defineds the placeholder to be rendered if the children is not valid. + * Defines the placeholder to be rendered if the children is not valid. */ placeholder?: ReactNode } From 907d0a5de8ed08887525779bd3ae141df774a7a4 Mon Sep 17 00:00:00 2001 From: Mollpo <97024183+mollpo@users.noreply.github.com> Date: Fri, 15 Sep 2023 16:21:33 +0200 Subject: [PATCH 08/14] Update src/components/content/WithPlaceholder/WithPlaceholder.tsx Co-authored-by: Alex Lanz <alex.lanz@aboutbits.it> --- src/components/content/WithPlaceholder/WithPlaceholder.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/content/WithPlaceholder/WithPlaceholder.tsx b/src/components/content/WithPlaceholder/WithPlaceholder.tsx index e7078d41..25a328d9 100644 --- a/src/components/content/WithPlaceholder/WithPlaceholder.tsx +++ b/src/components/content/WithPlaceholder/WithPlaceholder.tsx @@ -12,7 +12,7 @@ export type WithPlaceholderProps = { } /** - * This component validates the content and displays a placeholder if the content is not valid e.g. empty, null or undefined. + * This component validates the content and displays a placeholder if the content is empty, null or undefined. */ export function WithPlaceholder({ children, From a8a3e3b57e7bab417b1519f138a71863b98abb00 Mon Sep 17 00:00:00 2001 From: Mollpo <97024183+mollpo@users.noreply.github.com> Date: Fri, 15 Sep 2023 16:22:03 +0200 Subject: [PATCH 09/14] Update src/components/content/WithPlaceholder/WithPlaceholder.tsx Co-authored-by: Alex Lanz <alex.lanz@aboutbits.it> --- .../content/WithPlaceholder/WithPlaceholder.tsx | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/src/components/content/WithPlaceholder/WithPlaceholder.tsx b/src/components/content/WithPlaceholder/WithPlaceholder.tsx index 25a328d9..2e70ee92 100644 --- a/src/components/content/WithPlaceholder/WithPlaceholder.tsx +++ b/src/components/content/WithPlaceholder/WithPlaceholder.tsx @@ -1,15 +1,11 @@ import { ReactNode } from 'react' -export type WithPlaceholderProps = { - /** - * Defines the children to be rendered. - */ - children: ReactNode +export type WithPlaceholderProps = PropsWithChildren<{ /** * Defines the placeholder to be rendered if the children is not valid. */ placeholder?: ReactNode -} +}> /** * This component validates the content and displays a placeholder if the content is empty, null or undefined. From 44470724e311a577969599665574ab54966f2b94 Mon Sep 17 00:00:00 2001 From: Mollpo <97024183+mollpo@users.noreply.github.com> Date: Fri, 15 Sep 2023 16:22:16 +0200 Subject: [PATCH 10/14] Update src/components/content/WithPlaceholder/WithPlacehoder.stories.tsx Co-authored-by: Alex Lanz <alex.lanz@aboutbits.it> --- .../content/WithPlaceholder/WithPlacehoder.stories.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/content/WithPlaceholder/WithPlacehoder.stories.tsx b/src/components/content/WithPlaceholder/WithPlacehoder.stories.tsx index f1851bdf..4e2f8e20 100644 --- a/src/components/content/WithPlaceholder/WithPlacehoder.stories.tsx +++ b/src/components/content/WithPlaceholder/WithPlacehoder.stories.tsx @@ -12,10 +12,10 @@ import { WithPlaceholder } from './WithPlaceholder' const children = { options: ['null', 'undefined', 'empty', 'text'], mapping: { - null: null, - undefined, - empty: '', - text: 'John Doe', + 'null': null, + 'undefined': undefined, + 'Empty text': '', + 'ReactNode': 'John Doe', }, control: { type: 'select' }, } From 9bc7faafb8cfcef403467d7bf3f2ba1c8672d81c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matth=C3=A4us=20N=C3=B6ssing?= <noessing.matthaeus@protonmail.com> Date: Fri, 15 Sep 2023 16:38:46 +0200 Subject: [PATCH 11/14] remove options from placeholder and cleanup --- .../WithPlacehoder.stories.tsx | 20 ++++++------------- .../WithPlaceholder/WithPlaceholder.tsx | 2 +- 2 files changed, 7 insertions(+), 15 deletions(-) diff --git a/src/components/content/WithPlaceholder/WithPlacehoder.stories.tsx b/src/components/content/WithPlaceholder/WithPlacehoder.stories.tsx index 4e2f8e20..ca3e95cf 100644 --- a/src/components/content/WithPlaceholder/WithPlacehoder.stories.tsx +++ b/src/components/content/WithPlaceholder/WithPlacehoder.stories.tsx @@ -10,33 +10,25 @@ import { Meta, StoryObj } from '@storybook/react' import { WithPlaceholder } from './WithPlaceholder' const children = { - options: ['null', 'undefined', 'empty', 'text'], + options: ['null', 'undefined', 'Empty text', 'ReactNode'], mapping: { - 'null': null, - 'undefined': undefined, + null: null, + undefined: undefined, 'Empty text': '', - 'ReactNode': 'John Doe', + ReactNode: 'John Doe', }, control: { type: 'select' }, } -const placeholder = { - options: ['default', 'star', 'notFound'], - mapping: { - default: '-', - star: '*', - notFound: 'Not found', - }, -} const meta = { title: 'Components/Content/WithPlaceHolder', component: WithPlaceholder, args: { - children: 'Content', + children: 'John Doe', + placeholder: '-', }, argTypes: { children, - placeholder, }, parameters: { docs: { diff --git a/src/components/content/WithPlaceholder/WithPlaceholder.tsx b/src/components/content/WithPlaceholder/WithPlaceholder.tsx index 2e70ee92..292ce324 100644 --- a/src/components/content/WithPlaceholder/WithPlaceholder.tsx +++ b/src/components/content/WithPlaceholder/WithPlaceholder.tsx @@ -1,4 +1,4 @@ -import { ReactNode } from 'react' +import { PropsWithChildren, ReactNode } from 'react' export type WithPlaceholderProps = PropsWithChildren<{ /** From 0094fd558004e99f12625149089f500f0dc8e038 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matth=C3=A4us=20N=C3=B6ssing?= <noessing.matthaeus@protonmail.com> Date: Fri, 15 Sep 2023 16:45:55 +0200 Subject: [PATCH 12/14] lint fix --- .../content/WithPlaceholder/WithPlacehoder.stories.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/content/WithPlaceholder/WithPlacehoder.stories.tsx b/src/components/content/WithPlaceholder/WithPlacehoder.stories.tsx index ca3e95cf..631a7580 100644 --- a/src/components/content/WithPlaceholder/WithPlacehoder.stories.tsx +++ b/src/components/content/WithPlaceholder/WithPlacehoder.stories.tsx @@ -10,10 +10,10 @@ import { Meta, StoryObj } from '@storybook/react' import { WithPlaceholder } from './WithPlaceholder' const children = { - options: ['null', 'undefined', 'Empty text', 'ReactNode'], + options: ['Null', 'Undefined', 'Empty text', 'ReactNode'], mapping: { - null: null, - undefined: undefined, + Null: null, + Undefined: undefined, 'Empty text': '', ReactNode: 'John Doe', }, From ba082af74313c7fa0c4f91648967eb947e03762d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matth=C3=A4us=20N=C3=B6ssing?= <noessing.matthaeus@protonmail.com> Date: Fri, 15 Sep 2023 16:53:58 +0200 Subject: [PATCH 13/14] lint fix --- src/components/content/WithPlaceholder/WithPlaceholder.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/content/WithPlaceholder/WithPlaceholder.tsx b/src/components/content/WithPlaceholder/WithPlaceholder.tsx index 292ce324..8dd068f3 100644 --- a/src/components/content/WithPlaceholder/WithPlaceholder.tsx +++ b/src/components/content/WithPlaceholder/WithPlaceholder.tsx @@ -11,8 +11,8 @@ export type WithPlaceholderProps = PropsWithChildren<{ * This component validates the content and displays a placeholder if the content is empty, null or undefined. */ export function WithPlaceholder({ - children, placeholder = '-', + children, }: WithPlaceholderProps) { return ( <> From 192ea4615166bb8342925b474d428e1854f50c3e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matth=C3=A4us=20N=C3=B6ssing?= <noessing.matthaeus@protonmail.com> Date: Fri, 15 Sep 2023 16:54:09 +0200 Subject: [PATCH 14/14] change props order --- .../content/WithPlaceholder/WithPlacehoder.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/content/WithPlaceholder/WithPlacehoder.stories.tsx b/src/components/content/WithPlaceholder/WithPlacehoder.stories.tsx index 631a7580..eb1147c4 100644 --- a/src/components/content/WithPlaceholder/WithPlacehoder.stories.tsx +++ b/src/components/content/WithPlaceholder/WithPlacehoder.stories.tsx @@ -24,8 +24,8 @@ const meta = { title: 'Components/Content/WithPlaceHolder', component: WithPlaceholder, args: { - children: 'John Doe', placeholder: '-', + children: 'John Doe', }, argTypes: { children,