From 28e77cf219c5ad03c0cfc635cef317ba15bf51af Mon Sep 17 00:00:00 2001
From: qroll <quek.ruoling@gmail.com>
Date: Thu, 5 Dec 2024 13:57:38 +0800
Subject: [PATCH] [MOL-17154][RL] Update storybook docs

---
 stories/form/form-textarea/form-textarea.mdx    |  6 ++++++
 .../form-textarea/form-textarea.stories.tsx     | 17 +++++++++++++----
 stories/form/form-textarea/props-table.tsx      |  4 ++--
 3 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/stories/form/form-textarea/form-textarea.mdx b/stories/form/form-textarea/form-textarea.mdx
index 81f9aead2..a9ed2ba45 100644
--- a/stories/form/form-textarea/form-textarea.mdx
+++ b/stories/form/form-textarea/form-textarea.mdx
@@ -32,6 +32,12 @@ const renderCustomCounter = (maxLength: number, currentValueLength: number) => {
 };
 ```
 
+<Heading3>Transform value</Heading3>
+
+You can specify the `transformValue` prop to format or sanitise input.
+
+<Canvas of={FormTextareaStories.TransformValue} />
+
 <Heading3>Rendering in grid layouts</Heading3>
 
 You can also specify [ColDiv's](/docs/getting-started-layout-column-divs--docs)
diff --git a/stories/form/form-textarea/form-textarea.stories.tsx b/stories/form/form-textarea/form-textarea.stories.tsx
index efaf367e2..6eac3ed94 100644
--- a/stories/form/form-textarea/form-textarea.stories.tsx
+++ b/stories/form/form-textarea/form-textarea.stories.tsx
@@ -49,13 +49,22 @@ export const Default: StoryObj<Component> = {
                         label="This is does not have a counter"
                         placeholder="Enter here..."
                     />
+                </Container>
+            </StoryContainer>
+        );
+    },
+};
+
+export const TransformValue: StoryObj<Component> = {
+    render: () => {
+        return (
+            <StoryContainer>
+                <Container>
                     <Form.Textarea
-                        rows={2}
-                        label="This is a textarea with a handle change. "
-                        placeholder="Enter here. Replace \, <, >  and new line with empty string ..."
+                        label="This removes special characters"
                         maxLength={100}
                         transformValue={(value) =>
-                            value.replace(/[<>\\\n]/g, "")
+                            value.replace(/[^A-Za-z0-9 ]/g, "")
                         }
                     />
                 </Container>
diff --git a/stories/form/form-textarea/props-table.tsx b/stories/form/form-textarea/props-table.tsx
index 929cede87..1b5186210 100644
--- a/stories/form/form-textarea/props-table.tsx
+++ b/stories/form/form-textarea/props-table.tsx
@@ -47,8 +47,8 @@ const DATA: ApiTableSectionProps[] = [
             },
             {
                 name: "transformValue",
-                description: "Function to Transform field value */",
-                propTypes: ["(value: string) => JSX.Element"],
+                description: "Function to transform value",
+                propTypes: ["(value: string) => string"],
             },
         ],
     },