story: update overview examples for textarea component

apps/angular-kits-doc/stories/ui-components/form-field/textarea/color.stories.ts

@@ -0,0 +1,48 @@
+import { TextareaComponent } from '@cocokits/angular-form-field';
+import { renderWithPageTab, renderWithThemeProp } from '@cocokits/storybook-addon-theme';
+import { StoryObj } from '@cocokits/storybook-addon-theme-angular';
+
+export const Color: StoryObj<TextareaComponent> = {
+  name: 'Color',
+  parameters: {
+    docs: {
+      description: {
+        story: 'This demonstrates the different color variations of the textarea.',
+      },
+    },
+    cckAddon: {
+      renderConditions: [renderWithThemeProp('color'), renderWithPageTab('Overview')],
+      source: [
+        {
+          filename: 'example.component.html',
+          language: 'angular-html',
+          code: `
+          <% themeComponentConfig.color.values.map(color => { %>
+            <cck-form-field>
+              <cck-label><%= color %></cck-label>
+              <textarea
+                cckTextarea
+                [color]='"<%= color %>"'
+                placeholder="<%= color %>"
+              ></textarea>
+            </cck-form-field>
+          <% }) %>
+          `,
+        },
+      ],
+    },
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+    },
+    template: `
+      @for (color of cckControl.themeComponentConfig.color.values; let col = $index; track color) {
+        <cck-form-field>
+          <cck-label>{{color}}</cck-label>
+          <textarea cckTextarea [color]="color" [placeholder]="color"></textarea>
+        </cck-form-field>
+      }
+    `,
+  }),
+};

apps/angular-kits-doc/stories/ui-components/form-field/textarea/index.stories.ts

@@ -7,6 +7,9 @@ import descriptionMd from './description.md';
 
 export { Default } from './default.stories';
 export { AutoResize } from './auto-resize.stories';
+export { Color } from './color.stories';
+export { Size } from './size.stories';
+export { Type } from './type.stories';
 
 const meta: StoriesMeta = {
   component: TextareaComponent,

apps/angular-kits-doc/stories/ui-components/form-field/textarea/size.stories.ts

@@ -0,0 +1,48 @@
+import { TextareaComponent } from '@cocokits/angular-form-field';
+import { renderWithPageTab, renderWithThemeProp } from '@cocokits/storybook-addon-theme';
+import { StoryObj } from '@cocokits/storybook-addon-theme-angular';
+
+export const Size: StoryObj<TextareaComponent> = {
+  name: 'Size',
+  parameters: {
+    docs: {
+      description: {
+        story: 'This demonstrates the different size variations of the textarea.',
+      },
+    },
+    cckAddon: {
+      renderConditions: [renderWithThemeProp('size'), renderWithPageTab('Overview')],
+      source: [
+        {
+          filename: 'example.component.html',
+          language: 'angular-html',
+          code: `
+          <% themeComponentConfig.size.values.map(size => { %>
+            <cck-form-field>
+              <cck-label><%= size %></cck-label>
+              <textarea
+                cckTextarea
+                [size]='"<%= size %>"'
+                placeholder="<%= size %>"
+              ></textarea>
+            </cck-form-field>
+          <% }) %>
+          `,
+        },
+      ],
+    },
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+    },
+    template: `
+      @for (size of cckControl.themeComponentConfig.size.values; let index = $index; track size) {
+        <cck-form-field>
+          <cck-label>{{size}}</cck-label>
+          <textarea cckTextarea [size]="size" [placeholder]="size"></textarea>
+        </cck-form-field>
+      }
+    `,
+  }),
+};

apps/angular-kits-doc/stories/ui-components/form-field/textarea/type.stories.ts

@@ -0,0 +1,48 @@
+import { TextareaComponent } from '@cocokits/angular-form-field';
+import { renderWithPageTab, renderWithThemeProp } from '@cocokits/storybook-addon-theme';
+import { StoryObj } from '@cocokits/storybook-addon-theme-angular';
+
+export const Type: StoryObj<TextareaComponent> = {
+  name: 'Type',
+  parameters: {
+    docs: {
+      description: {
+        story: 'This demonstrates the different type variations of the textarea.',
+      },
+    },
+    cckAddon: {
+      renderConditions: [renderWithThemeProp('type'), renderWithPageTab('Overview')],
+      source: [
+        {
+          filename: 'example.component.html',
+          language: 'angular-html',
+          code: `
+          <% themeComponentConfig.type.values.map(type => { %>
+            <cck-form-field>
+              <cck-label><%= type %></cck-label>
+              <textarea
+                cckTextarea 
+                [type]='"<%= type %>"'
+                placeholder="<%= type %>"
+              ></textarea>
+            </cck-form-field>
+          <% }) %>
+          `,
+        },
+      ],
+    },
+  },
+  render: (args) => ({
+    props: {
+      ...args,
+    },
+    template: `
+      @for (type of cckControl.themeComponentConfig.type.values; let index = $index; track type) {
+        <cck-form-field>
+          <cck-label>{{type}}</cck-label>
+          <textarea cckTextarea [type]="type" [placeholder]="type"></textarea>
+        </cck-form-field>
+      }
+    `,
+  }),
+};

apps/react-kits-doc/stories/ui-components/form-field/textarea/index.stories.ts

@@ -4,6 +4,11 @@ import { StoriesMeta } from '@cocokits/storybook-addon-theme-react';
 import descriptionMd from './description.md?raw';
 
 export { Default } from './overview/default.stories';
+export { ErrorState } from './overview/error-state.stories';
+export { AutoResize } from './overview/autoresize.stories';
+export { Color } from './overview/color.stories';
+export { Size } from './overview/size.stories';
+export { Type } from './overview/type.stories';
 
 const meta: StoriesMeta<typeof Textarea> = {
   component: Textarea,

apps/react-kits-doc/stories/ui-components/form-field/textarea/overview/autoresize.stories.tsx

@@ -0,0 +1,51 @@
+import { FormField, Label, Textarea } from '@cocokits/react-components';
+import { renderWithPageTab } from '@cocokits/storybook-addon-theme';
+import { StoryObj } from '@cocokits/storybook-addon-theme-react';
+
+export const AutoResize: StoryObj<typeof Textarea> = {
+  name: 'Auto Resize',
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'This demonstrates the textarea with the autoResize property enabled, allowing it to automatically adjust its height based on content.',
+      },
+    },
+    cckAddon: {
+      renderConditions: [renderWithPageTab('Overview')],
+      source: [
+        {
+          filename: 'Source Code',
+          language: 'tsx',
+          code: `
+            import { FormField, Label, Textarea } from "@cocokits/react-components";
+
+            export const MyComponent = () => {
+            return (
+                <>
+                      <FormField>
+                        <Label>Auto Resize</Label>
+                        <Textarea
+                          autoResize
+                          placeholder="placeholder"
+                        >
+                          Auto Resize
+                        </Textarea>
+                      </FormField>
+                </>
+            );
+            }
+          `,
+        },
+      ],
+    },
+  },
+  render: () => (
+    <>
+      <FormField>
+        <Label>Auto Resize</Label>
+        <Textarea autoResize placeholder="placeholder" />
+      </FormField>
+    </>
+  ),
+};

apps/react-kits-doc/stories/ui-components/form-field/textarea/overview/color.stories.tsx

@@ -0,0 +1,55 @@
+import { FormField, Label, Textarea } from '@cocokits/react-components';
+import { renderWithPageTab, renderWithThemeProp } from '@cocokits/storybook-addon-theme';
+import { StoryObj } from '@cocokits/storybook-addon-theme-react';
+
+export const Color: StoryObj<typeof Textarea> = {
+  name: 'Color',
+  parameters: {
+    docs: {
+      description: {
+        story: 'This demonstrates the different color variations of the textarea to match various design contexts.',
+      },
+    },
+    cckAddon: {
+      renderConditions: [renderWithThemeProp('color'), renderWithPageTab('Overview')],
+      source: [
+        {
+          filename: 'Source Code',
+          language: 'tsx',
+          code: `
+              import { FormField, Label, Textarea } from "@cocokits/react-components";
+
+              export const MyComponent = () => {
+                return (
+                  <>
+                    <% themeComponentConfig.color.values.map(color => { %>
+                      <FormField>
+                        <Label><%= color %></Label>
+                        <Textarea
+                          color="<%= color %>"
+                          <% if (typeof type !== 'undefined') { %> type='<%= type %>' <% } %>
+                        >
+                          <%= color %>
+                        </Textarea>
+                      </FormField>
+
+                    <% }) %>
+                  </>
+                );
+              }
+          `,
+        },
+      ],
+    },
+  },
+  render: (args) => (
+    <>
+      {args.cckControl.themeComponentConfig.color?.values.map((color, index) => (
+        <FormField key={index}>
+          <Label>{color}</Label>
+          <Textarea color={color} />
+        </FormField>
+      ))}
+    </>
+  ),
+};

apps/react-kits-doc/stories/ui-components/form-field/textarea/overview/default.stories.tsx

@@ -18,12 +18,12 @@ export const Default: StoryObj<typeof Textarea> = {
           filename: 'Source Code',
           language: 'tsx',
           code: `
-                     import { FormField, Label, Textarea } from "@cocokits/react-components";
+            import { FormField, Label, Textarea } from "@cocokits/react-components";
 
             export const MyComponent = () => {
               return (
                 <>
-<FormField>
+            <FormField>
               <% if (label) { %>
                 <Label><%= label %></Label>
               <% } %>

apps/react-kits-doc/stories/ui-components/form-field/textarea/overview/error-state.stories.tsx

@@ -0,0 +1,55 @@
+import { FormField, Label, Textarea } from '@cocokits/react-components';
+import { renderWithPageTab } from '@cocokits/storybook-addon-theme';
+import { StoryObj } from '@cocokits/storybook-addon-theme-react';
+
+export const ErrorState: StoryObj<typeof Textarea> = {
+  name: 'Error State',
+  parameters: {
+    docs: {
+      description: {
+        story: 'This demonstrates both normal and error states for the textarea component.',
+      },
+    },
+    cckAddon: {
+      renderConditions: [renderWithPageTab('Overview')],
+      source: [
+        {
+          filename: 'Source Code',
+          language: 'tsx',
+          code: `
+          import { FormField, Label, Textarea, Text } from "@cocokits/react-components";
+
+          export const MyComponent = () => {
+            return (
+              <>
+                <FormField>
+                  <Label>Normal</Label>
+                  <Textarea placeholder="placeholder" />
+                </FormField>
+
+                <FormField invalid>
+                  <Label>Error State</Label>
+                  <Textarea invalid placeholder="placeholder" />
+                </FormField>
+              </>
+            );
+          };
+          `,
+        },
+      ],
+    },
+  },
+  render: () => (
+    <>
+      <FormField>
+        <Label>Normal</Label>
+        <Textarea placeholder="placeholder" />
+      </FormField>
+
+      <FormField invalid>
+        <Label>Error State</Label>
+        <Textarea invalid placeholder="placeholder" />
+      </FormField>
+    </>
+  ),
+};