WithPlaceholder component (#283)

* make select item form field fix height

* lint fix

* write store in tsx

* lint fix

* add default option to placeholder

* fix lint error

* fix typo in props description

* Update src/components/content/WithPlaceholder/WithPlaceholder.tsx

Co-authored-by: Alex Lanz <[email protected]>

* Update src/components/content/WithPlaceholder/WithPlaceholder.tsx

Co-authored-by: Alex Lanz <[email protected]>

* Update src/components/content/WithPlaceholder/WithPlacehoder.stories.tsx

Co-authored-by: Alex Lanz <[email protected]>

* remove options from placeholder and cleanup

* lint fix

* lint fix

* change props order

---------

Co-authored-by: Alex Lanz <[email protected]>

src/components/content/WithPlaceholder/WithPlacehoder.stories.tsx

@@ -0,0 +1,52 @@
+import {
+  Controls,
+  Description,
+  Primary,
+  Stories,
+  Subheading,
+  Title,
+} from '@storybook/blocks'
+import { Meta, StoryObj } from '@storybook/react'
+import { WithPlaceholder } from './WithPlaceholder'
+
+const children = {
+  options: ['Null', 'Undefined', 'Empty text', 'ReactNode'],
+  mapping: {
+    Null: null,
+    Undefined: undefined,
+    'Empty text': '',
+    ReactNode: 'John Doe',
+  },
+  control: { type: 'select' },
+}
+
+const meta = {
+  title: 'Components/Content/WithPlaceHolder',
+  component: WithPlaceholder,
+  args: {
+    placeholder: '-',
+    children: 'John Doe',
+  },
+  argTypes: {
+    children,
+  },
+  parameters: {
+    docs: {
+      page: () => (
+        <>
+          <Title />
+          <Description />
+          <Primary />
+          <Subheading>Props</Subheading>
+          <Controls />
+          <Stories />
+        </>
+      ),
+    },
+  },
+} satisfies Meta<typeof WithPlaceholder>
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}

src/components/content/WithPlaceholder/WithPlaceholder.tsx

@@ -0,0 +1,26 @@
+import { PropsWithChildren, ReactNode } from 'react'
+
+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.
+ */
+export function WithPlaceholder({
+  placeholder = '-',
+  children,
+}: WithPlaceholderProps) {
+  return (
+    <>
+      {typeof children === 'number'
+        ? isNaN(children)
+          ? placeholder
+          : children
+        : children || placeholder}
+    </>
+  )
+}

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'