From 8176a0aa189c9cc873b2ec8dffced414e6d8f7a5 Mon Sep 17 00:00:00 2001
From: Mollpo <97024183+mollpo@users.noreply.github.com>
Date: Fri, 15 Sep 2023 16:57:12 +0200
Subject: [PATCH] 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 <alex.lanz@aboutbits.it>

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

Co-authored-by: Alex Lanz <alex.lanz@aboutbits.it>

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

Co-authored-by: Alex Lanz <alex.lanz@aboutbits.it>

* remove options from placeholder and cleanup

* lint fix

* lint fix

* change props order

---------

Co-authored-by: Alex Lanz <alex.lanz@aboutbits.it>
---
 .../WithPlacehoder.stories.tsx                | 52 +++++++++++++++++++
 .../WithPlaceholder/WithPlaceholder.tsx       | 26 ++++++++++
 src/components/content/index.ts               |  1 +
 3 files changed, 79 insertions(+)
 create mode 100644 src/components/content/WithPlaceholder/WithPlacehoder.stories.tsx
 create mode 100644 src/components/content/WithPlaceholder/WithPlaceholder.tsx

diff --git a/src/components/content/WithPlaceholder/WithPlacehoder.stories.tsx b/src/components/content/WithPlaceholder/WithPlacehoder.stories.tsx
new file mode 100644
index 00000000..eb1147c4
--- /dev/null
+++ b/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 = {}
diff --git a/src/components/content/WithPlaceholder/WithPlaceholder.tsx b/src/components/content/WithPlaceholder/WithPlaceholder.tsx
new file mode 100644
index 00000000..8dd068f3
--- /dev/null
+++ b/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}
+    </>
+  )
+}
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'