From 7bf400a954bea7628919fec4752e7d3479c24e1f Mon Sep 17 00:00:00 2001
From: Pavel Klibani <pavel@techloop.io>
Date: Sun, 17 Sep 2023 02:23:25 +0200
Subject: [PATCH] Docs(web-react): Add TextArea demo #DS-912

- TextArea demo in web-react is now same as demo in web and web-twig
---
 .../src/components/TextArea/demo/TextArea.tsx | 16 ------
 .../TextArea/demo/TextAreaAutoResize.tsx      |  8 +++
 .../TextArea/demo/TextAreaDefault.tsx         | 12 +++++
 .../TextArea/demo/TextAreaDisabled.tsx        | 23 +++++----
 .../TextArea/demo/TextAreaFluid.tsx           |  8 +--
 .../TextArea/demo/TextAreaHelperText.tsx      | 24 ++++-----
 .../TextArea/demo/TextAreaHiddenLabel.tsx     |  8 +++
 .../TextArea/demo/TextAreaInline.tsx          | 19 +++++++
 .../TextArea/demo/TextAreaInputHeight.tsx     | 10 ----
 .../TextArea/demo/TextAreaLabelHidden.tsx     | 10 ----
 .../TextArea/demo/TextAreaRequired.tsx        |  8 ++-
 .../TextArea/demo/TextAreaValidation.tsx      | 49 ++++++++++++++++++
 .../TextArea/demo/TextAreaValidationState.tsx | 32 ------------
 .../TextArea/demo/TextAreaWithAutoResize.tsx  |  8 ---
 .../src/components/TextArea/demo/index.tsx    | 50 +++++++++----------
 15 files changed, 150 insertions(+), 135 deletions(-)
 delete mode 100644 packages/web-react/src/components/TextArea/demo/TextArea.tsx
 create mode 100644 packages/web-react/src/components/TextArea/demo/TextAreaAutoResize.tsx
 create mode 100644 packages/web-react/src/components/TextArea/demo/TextAreaDefault.tsx
 create mode 100644 packages/web-react/src/components/TextArea/demo/TextAreaHiddenLabel.tsx
 create mode 100644 packages/web-react/src/components/TextArea/demo/TextAreaInline.tsx
 delete mode 100644 packages/web-react/src/components/TextArea/demo/TextAreaInputHeight.tsx
 delete mode 100644 packages/web-react/src/components/TextArea/demo/TextAreaLabelHidden.tsx
 create mode 100644 packages/web-react/src/components/TextArea/demo/TextAreaValidation.tsx
 delete mode 100644 packages/web-react/src/components/TextArea/demo/TextAreaValidationState.tsx
 delete mode 100644 packages/web-react/src/components/TextArea/demo/TextAreaWithAutoResize.tsx

diff --git a/packages/web-react/src/components/TextArea/demo/TextArea.tsx b/packages/web-react/src/components/TextArea/demo/TextArea.tsx
deleted file mode 100644
index 7de4440818..0000000000
--- a/packages/web-react/src/components/TextArea/demo/TextArea.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-// Because there is no `dist` directory during the CI run
-/* eslint-disable import/no-extraneous-dependencies, import/extensions, import/no-unresolved */
-import React from 'react';
-import { ComponentStory } from '@storybook/react';
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore: No declaration file
-import { SpiritTextAreaProps } from '../../../types';
-import TextArea from '../TextArea';
-
-const Story: ComponentStory<typeof TextArea> = (args: SpiritTextAreaProps) => <TextArea {...args} />;
-
-Story.args = {
-  id: 'textarea-example',
-};
-
-export default Story;
diff --git a/packages/web-react/src/components/TextArea/demo/TextAreaAutoResize.tsx b/packages/web-react/src/components/TextArea/demo/TextAreaAutoResize.tsx
new file mode 100644
index 0000000000..5b697f5683
--- /dev/null
+++ b/packages/web-react/src/components/TextArea/demo/TextAreaAutoResize.tsx
@@ -0,0 +1,8 @@
+import React from 'react';
+import TextArea from '../TextArea';
+
+const TextAreaAutoResize = () => {
+  return <TextArea id="textareaAutoResize" label="Label" name="textareaAutoResize" isAutoResizing />;
+};
+
+export default TextAreaAutoResize;
diff --git a/packages/web-react/src/components/TextArea/demo/TextAreaDefault.tsx b/packages/web-react/src/components/TextArea/demo/TextAreaDefault.tsx
new file mode 100644
index 0000000000..54702e7df2
--- /dev/null
+++ b/packages/web-react/src/components/TextArea/demo/TextAreaDefault.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import TextArea from '../TextArea';
+
+const TextAreaDefault = () => (
+  <>
+    <TextArea id="textareaDefault" label="Label" name="textareaDefault" placeholder="Placeholder" />
+
+    <TextArea id="textareaFilled" label="Label" name="textareaFilled" placeholder="Placeholder" value="Filled" />
+  </>
+);
+
+export default TextAreaDefault;
diff --git a/packages/web-react/src/components/TextArea/demo/TextAreaDisabled.tsx b/packages/web-react/src/components/TextArea/demo/TextAreaDisabled.tsx
index e4add40e9b..5604d33529 100644
--- a/packages/web-react/src/components/TextArea/demo/TextAreaDisabled.tsx
+++ b/packages/web-react/src/components/TextArea/demo/TextAreaDisabled.tsx
@@ -1,19 +1,20 @@
 import React from 'react';
 import TextArea from '../TextArea';
 
-// @see: https://github.com/storybookjs/storybook/issues/8104#issuecomment-932310244
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const Story = (props: unknown) => (
-  <div style={{ display: 'flex', flexWrap: 'wrap', gap: '1.5rem 1rem' }}>
-    <TextArea id="textarea-disabled" label="Disabled" name="textarea-disabled" isDisabled />
+const TextAreaDisabled = () => (
+  <>
+    <TextArea id="textareaDisabled" label="Label" name="textareaDisabled" placeholder="Placeholder" isDisabled />
+
     <TextArea
-      id="textarea-disabled-filled"
-      label="Disabled filled"
-      name="textarea-disabled-filled"
-      value="TextArea value"
+      id="textareaDisabledFilled"
+      label="Label"
+      name="textareaDisabledFilled"
+      placeholder="Placeholder"
+      value="Filled"
       isDisabled
+      isRequired
     />
-  </div>
+  </>
 );
 
-export default Story;
+export default TextAreaDisabled;
diff --git a/packages/web-react/src/components/TextArea/demo/TextAreaFluid.tsx b/packages/web-react/src/components/TextArea/demo/TextAreaFluid.tsx
index fd9f00d4b6..e86ef2b05c 100644
--- a/packages/web-react/src/components/TextArea/demo/TextAreaFluid.tsx
+++ b/packages/web-react/src/components/TextArea/demo/TextAreaFluid.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import TextArea from '../TextArea';
 
-// @see: https://github.com/storybookjs/storybook/issues/8104#issuecomment-932310244
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const Story = (props: unknown) => <TextArea id="textarea-fluid" label="Fluid" name="textarea-fluid" isFluid />;
+const TextAreaFluid = () => (
+  <TextArea id="textareaFluid" isFluid label="Label" name="textareaFluid" placeholder="Placeholder" value="Filled" />
+);
 
-export default Story;
+export default TextAreaFluid;
diff --git a/packages/web-react/src/components/TextArea/demo/TextAreaHelperText.tsx b/packages/web-react/src/components/TextArea/demo/TextAreaHelperText.tsx
index ad5b15773c..56874dbde9 100644
--- a/packages/web-react/src/components/TextArea/demo/TextAreaHelperText.tsx
+++ b/packages/web-react/src/components/TextArea/demo/TextAreaHelperText.tsx
@@ -1,18 +1,14 @@
-// Because there is no `dist` directory during the CI run
-/* eslint-disable import/no-extraneous-dependencies, import/extensions, import/no-unresolved */
 import React from 'react';
-import { ComponentStory } from '@storybook/react';
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore: No declaration file
-import { SpiritTextAreaProps } from '../../../types';
 import TextArea from '../TextArea';
 
-const Story: ComponentStory<typeof TextArea> = (args: SpiritTextAreaProps) => <TextArea {...args} />;
+const TextAreaHelperText = () => (
+  <TextArea
+    helperText="Helper text"
+    id="textareaHelperText"
+    label="Label"
+    name="textareaHelperText"
+    placeholder="Placeholder"
+  />
+);
 
-Story.args = {
-  id: 'textarea-helper-text-example',
-  label: 'Label with helper text',
-  helperText: 'Custom helper text',
-};
-
-export default Story;
+export default TextAreaHelperText;
diff --git a/packages/web-react/src/components/TextArea/demo/TextAreaHiddenLabel.tsx b/packages/web-react/src/components/TextArea/demo/TextAreaHiddenLabel.tsx
new file mode 100644
index 0000000000..6e12435381
--- /dev/null
+++ b/packages/web-react/src/components/TextArea/demo/TextAreaHiddenLabel.tsx
@@ -0,0 +1,8 @@
+import React from 'react';
+import TextArea from '../TextArea';
+
+const TextAreaHiddenLabel = () => (
+  <TextArea id="textareaHiddenLabel" label="Label" name="textareaHiddenLabel" placeholder="Placeholder" isLabelHidden />
+);
+
+export default TextAreaHiddenLabel;
diff --git a/packages/web-react/src/components/TextArea/demo/TextAreaInline.tsx b/packages/web-react/src/components/TextArea/demo/TextAreaInline.tsx
new file mode 100644
index 0000000000..cd4f69b8ac
--- /dev/null
+++ b/packages/web-react/src/components/TextArea/demo/TextAreaInline.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { Button } from '../../Button';
+import TextArea from '../TextArea';
+
+const TextAreaInline = () => (
+  <div style={{ display: 'flex', gap: '1rem', alignItems: 'flex-start' }}>
+    <TextArea
+      id="textareaInline"
+      isLabelHidden
+      label="Hidden Label"
+      name="textareaInline"
+      placeholder="Placeholder"
+      value="Filled"
+    />
+    <Button>Button</Button>
+  </div>
+);
+
+export default TextAreaInline;
diff --git a/packages/web-react/src/components/TextArea/demo/TextAreaInputHeight.tsx b/packages/web-react/src/components/TextArea/demo/TextAreaInputHeight.tsx
deleted file mode 100644
index a99cc6e6b4..0000000000
--- a/packages/web-react/src/components/TextArea/demo/TextAreaInputHeight.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from 'react';
-import TextArea from '../TextArea';
-
-// @see: https://github.com/storybookjs/storybook/issues/8104#issuecomment-932310244
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const Story = (props: unknown) => (
-  <TextArea id="textarea-with-rows" label="Visible 5 rows" name="textarea-with-rows" rows={5} />
-);
-
-export default Story;
diff --git a/packages/web-react/src/components/TextArea/demo/TextAreaLabelHidden.tsx b/packages/web-react/src/components/TextArea/demo/TextAreaLabelHidden.tsx
deleted file mode 100644
index bec520b193..0000000000
--- a/packages/web-react/src/components/TextArea/demo/TextAreaLabelHidden.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from 'react';
-import TextArea from '../TextArea';
-
-// @see: https://github.com/storybookjs/storybook/issues/8104#issuecomment-932310244
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const Story = (props: unknown) => (
-  <TextArea id="textarea-label-hidden" label="Hidden label" name="textarea-label-hidden" isLabelHidden />
-);
-
-export default Story;
diff --git a/packages/web-react/src/components/TextArea/demo/TextAreaRequired.tsx b/packages/web-react/src/components/TextArea/demo/TextAreaRequired.tsx
index 0b933a9974..704b76acce 100644
--- a/packages/web-react/src/components/TextArea/demo/TextAreaRequired.tsx
+++ b/packages/web-react/src/components/TextArea/demo/TextAreaRequired.tsx
@@ -1,10 +1,8 @@
 import React from 'react';
 import TextArea from '../TextArea';
 
-// @see: https://github.com/storybookjs/storybook/issues/8104#issuecomment-932310244
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const Story = (props: unknown) => (
-  <TextArea id="textarea-required" label="Required" name="textarea-required" isRequired />
+const TextAreaRequired = () => (
+  <TextArea id="textareaRequired" label="Label" name="textareaRequired" placeholder="Placeholder" isRequired />
 );
 
-export default Story;
+export default TextAreaRequired;
diff --git a/packages/web-react/src/components/TextArea/demo/TextAreaValidation.tsx b/packages/web-react/src/components/TextArea/demo/TextAreaValidation.tsx
new file mode 100644
index 0000000000..d11ed503b1
--- /dev/null
+++ b/packages/web-react/src/components/TextArea/demo/TextAreaValidation.tsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import TextArea from '../TextArea';
+
+const TextAreaValidation = () => (
+  <>
+    <TextArea
+      id="textareaSuccess"
+      label="Label"
+      name="textareaSuccess"
+      placeholder="Placeholder"
+      validationState="success"
+      value="Filled"
+    />
+
+    <TextArea
+      id="textareaWarning"
+      label="Label"
+      validationText="Validation text"
+      name="textareaWarning"
+      placeholder="Placeholder"
+      validationState="warning"
+      value="Filled"
+    />
+
+    <TextArea
+      id="textareaDanger"
+      label="Label"
+      validationText={['Validation text', 'Second validation text']}
+      name="textareaDanger"
+      placeholder="Placeholder"
+      validationState="danger"
+      value="Filled"
+    />
+
+    <TextArea
+      id="textareaDangerHelper"
+      isRequired
+      label="Label"
+      helperText="This is helper text"
+      validationText="Danger validation text"
+      validationState="danger"
+      name="textareaDangerHelper"
+      placeholder="Placeholder"
+      value="Filled"
+    />
+  </>
+);
+
+export default TextAreaValidation;
diff --git a/packages/web-react/src/components/TextArea/demo/TextAreaValidationState.tsx b/packages/web-react/src/components/TextArea/demo/TextAreaValidationState.tsx
deleted file mode 100644
index d969fa3d8a..0000000000
--- a/packages/web-react/src/components/TextArea/demo/TextAreaValidationState.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import React from 'react';
-import TextArea from '../TextArea';
-
-// @see: https://github.com/storybookjs/storybook/issues/8104#issuecomment-932310244
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const Story = (props: unknown) => (
-  <div style={{ display: 'flex', flexWrap: 'wrap', gap: '1.5rem 1rem' }}>
-    <TextArea
-      id="textarea-success"
-      label="Validation success"
-      name="textarea-success"
-      validationState="success"
-      validationText="Validation text"
-    />
-    <TextArea
-      id="textarea-warning"
-      label="Validation warning"
-      name="textarea-warning"
-      validationState="warning"
-      validationText="Validation text"
-    />
-    <TextArea
-      id="textarea-danger"
-      label="Validation danger"
-      name="textarea-danger"
-      validationState="danger"
-      validationText={['Validation text', 'Second validation text']}
-    />
-  </div>
-);
-
-export default Story;
diff --git a/packages/web-react/src/components/TextArea/demo/TextAreaWithAutoResize.tsx b/packages/web-react/src/components/TextArea/demo/TextAreaWithAutoResize.tsx
deleted file mode 100644
index badbcadf36..0000000000
--- a/packages/web-react/src/components/TextArea/demo/TextAreaWithAutoResize.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import React from 'react';
-import TextArea from '../TextArea';
-
-const Story = () => (
-  <TextArea id="textarea-autoResizing" label="Auto Resizing" name="textarea-autoResizing" isAutoResizing />
-);
-
-export default Story;
diff --git a/packages/web-react/src/components/TextArea/demo/index.tsx b/packages/web-react/src/components/TextArea/demo/index.tsx
index 89a93340d0..e5a6c2531f 100644
--- a/packages/web-react/src/components/TextArea/demo/index.tsx
+++ b/packages/web-react/src/components/TextArea/demo/index.tsx
@@ -5,47 +5,47 @@ import ReactDOM from 'react-dom/client';
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment, import/extensions, import/no-unresolved
 // @ts-ignore: No declaration file
 import icons from '@lmc-eu/spirit-icons/dist/icons';
-import { IconsProvider } from '../../../context';
 import DocsSection from '../../../../docs/DocsSections';
-import TextArea from './TextArea';
+import { IconsProvider } from '../../../context';
+import TextAreaDefault from './TextAreaDefault';
+import TextAreaRequired from './TextAreaRequired';
+import TextAreaHiddenLabel from './TextAreaHiddenLabel';
+import TextAreaHelperText from './TextAreaHelperText';
 import TextAreaDisabled from './TextAreaDisabled';
+import TextAreaValidation from './TextAreaValidation';
 import TextAreaFluid from './TextAreaFluid';
-import TextAreaInputHeight from './TextAreaInputHeight';
-import TextAreaLabelHidden from './TextAreaLabelHidden';
-import TextAreaLabelRequired from './TextAreaRequired';
-import TextAreaValidationState from './TextAreaValidationState';
-import TextAreaWithAutoResize from './TextAreaWithAutoResize';
-import TextAreaHelperText from './TextAreaHelperText';
+import TextAreaInline from './TextAreaInline';
+import TextAreaAutoResize from './TextAreaAutoResize';
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
     <IconsProvider value={icons}>
       <DocsSection title="Default">
-        <TextArea {...TextArea.args} />
+        <TextAreaDefault />
       </DocsSection>
-      <DocsSection title="Disabled">
-        <TextAreaDisabled />
+      <DocsSection title="Required">
+        <TextAreaRequired />
       </DocsSection>
-      <DocsSection title="Fluid">
-        <TextAreaFluid />
+      <DocsSection title="Hidden Label">
+        <TextAreaHiddenLabel />
       </DocsSection>
-      <DocsSection title="Input Height">
-        <TextAreaInputHeight />
+      <DocsSection title="Helper Text">
+        <TextAreaHelperText />
       </DocsSection>
-      <DocsSection title="Label Hidden">
-        <TextAreaLabelHidden />
+      <DocsSection title="Disabled">
+        <TextAreaDisabled />
       </DocsSection>
-      <DocsSection title="Required">
-        <TextAreaLabelRequired />
+      <DocsSection title="Validation State with Validation Text">
+        <TextAreaValidation />
       </DocsSection>
-      <DocsSection title="Validation State">
-        <TextAreaValidationState />
+      <DocsSection title="Fluid">
+        <TextAreaFluid />
       </DocsSection>
-      <DocsSection title="With Auto Resize">
-        <TextAreaWithAutoResize />
+      <DocsSection title="Inline">
+        <TextAreaInline />
       </DocsSection>
-      <DocsSection title="Helper Text">
-        <TextAreaHelperText {...TextAreaHelperText.args} />
+      <DocsSection title="AutoResize">
+        <TextAreaAutoResize />
       </DocsSection>
     </IconsProvider>
   </React.StrictMode>,