@app-studio/components 0.10.17

package/dist/files/media/TextArea.mdx

@@ -0,0 +1,724 @@
+# TextArea
+
+Renders a multi-line text input field with various styles and states according to the design guidelines.
+
+### **Import**
+```tsx
+import { TextArea } from '@app-studio/web';
+```
+
+### **Default**
+```tsx
+import React from 'react';
+
+import { TextArea } from '../TextArea';
+
+export const DefaultArea = () => (
+  <TextArea name="comments" placeholder="Enter your thoughts" />
+);
+```
+
+### **helperText**
+Supplementary text displayed below the textarea to provide additional guidance.
+
+- **Type:** `string`
+
+```tsx
+import { useState } from 'react';
+import React from 'react';
+
+import { Button } from '../../../Button/Button';
+import { TextArea } from '../../../Form/TextArea/TextArea';
+
+import { Vertical } from 'app-studio';
+
+export const HelperTextArea = () => {
+  const initialValues = {
+    guess: '',
+  };
+  const [formValues, setFormValues] = useState(initialValues);
+  const [formErrors, setFormErrors] = useState(initialValues);
+
+  const validate = (values: any) => {
+    const errors: any = {};
+    if (!values.guess) {
+      errors.guess = 'Required';
+    }
+
+    setFormErrors(errors);
+  };
+
+  const handleChange = (event: any) => {
+    setFormValues({ ...formValues, [event.target.name]: event.target.value });
+  };
+
+  const handleSubmit = (event: any) => {
+    event.preventDefault();
+    validate(formValues);
+    if (Object.values(formErrors).length === 0) {
+      alert(formValues.guess);
+    }
+  };
+  return (
+    <form onSubmit={handleSubmit}>
+      <Vertical gap={10}>
+        <TextArea
+          name="guess"
+          placeholder="Write here..."
+          helperText={formErrors.guess}
+          error={!!formErrors.guess}
+          onChange={handleChange}
+        />
+        <Button type="submit" height="40px" isAuto>
+          Submit
+        </Button>
+      </Vertical>
+    </form>
+  );
+};
+```
+
+### **placeholder**
+The placeholder text displayed when the textarea is empty.
+
+- **Type:** `string`
+
+```tsx
+import React from 'react';
+import { Button } from '../../../Button/Button';
+
+import { Horizontal } from 'app-studio';
+
+import { TextArea } from '../TextArea';
+
+export const PlaceholderArea = () => {
+  const handleSubmit = (event: any) => {
+    event.preventDefault();
+    const formData = new FormData(event.target);
+    alert(formData.get('comment'));
+  };
+  return (
+    <form onSubmit={handleSubmit}>
+      <Horizontal gap={10} alignItems="center" flexWrap="nowrap">
+        <TextArea name="comment" placeholder="Type your comment here..." />
+        <Button type="submit" height="40px" isAuto>
+          Submit
+        </Button>
+      </Horizontal>
+    </form>
+  );
+};
+```
+
+### **ColorScheme**
+
+```tsx
+import React from 'react';
+import { Vertical } from 'app-studio';
+
+import { TextArea } from '../TextArea';
+
+export const ColorArea = () => {
+  return (
+    <Vertical gap={10}>
+      <TextArea name="surname" label="Surname" />
+      <TextArea name="name" label="Name" variant="outline" />
+    </Vertical>
+  );
+};
+```
+
+### **Default**
+
+```tsx
+import React from 'react';
+
+import { TextArea } from '../TextArea';
+
+export const DefaultArea = () => (
+  <TextArea name="comments" placeholder="Enter your thoughts" />
+);
+```
+
+### **DisabledInput**
+
+```tsx
+import React from 'react';
+
+import { TextArea } from '../TextArea';
+
+export const DisabledArea = () => {
+  return (
+    <TextArea
+      name="disabled"
+      value="Enter your thought"
+      label="Thoughts"
+      isDisabled
+    />
+  );
+};
+```
+
+### **ErrorInput**
+
+```tsx
+import { useState } from 'react';
+import React from 'react';
+import { Button } from '../../../Button/Button';
+
+import { TextArea } from '../../../Form/TextArea/TextArea';
+
+import { Vertical } from 'app-studio';
+
+export const ErrorArea = () => {
+  const initialValues = {
+    thoughts: '',
+  };
+  const [formValues, setFormValues] = useState(initialValues);
+  const [formErrors, setFormErrors] = useState(initialValues);
+
+  const validate = (values: any) => {
+    const errors: any = {};
+
+    if (!values.thoughts) {
+      errors.thoughts = 'Required';
+    }
+    setFormErrors(errors);
+  };
+
+  const handleChange = (event: any) => {
+    setFormValues({ ...formValues, [event.target.name]: event.target.value });
+  };
+
+  const handleSubmit = (event: any) => {
+    event.preventDefault();
+    validate(formValues);
+    if (Object.values(formErrors).length === 0) {
+      alert(formValues.thoughts);
+    }
+  };
+  return (
+    <form onSubmit={handleSubmit}>
+      <Vertical gap={10}>
+        <TextArea
+          name="thoughts"
+          placeholder="Write your thoughts here..."
+          error={!!formErrors.thoughts}
+          onChange={handleChange}
+        />
+        <Button type="submit" height="40px" isAuto>
+          Submit
+        </Button>
+      </Vertical>
+    </form>
+  );
+};
+```
+
+### **HelperText**
+
+```tsx
+import { useState } from 'react';
+import React from 'react';
+
+import { Button } from '../../../Button/Button';
+import { TextArea } from '../../../Form/TextArea/TextArea';
+
+import { Vertical } from 'app-studio';
+
+export const HelperTextArea = () => {
+  const initialValues = {
+    guess: '',
+  };
+  const [formValues, setFormValues] = useState(initialValues);
+  const [formErrors, setFormErrors] = useState(initialValues);
+
+  const validate = (values: any) => {
+    const errors: any = {};
+    if (!values.guess) {
+      errors.guess = 'Required';
+    }
+
+    setFormErrors(errors);
+  };
+
+  const handleChange = (event: any) => {
+    setFormValues({ ...formValues, [event.target.name]: event.target.value });
+  };
+
+  const handleSubmit = (event: any) => {
+    event.preventDefault();
+    validate(formValues);
+    if (Object.values(formErrors).length === 0) {
+      alert(formValues.guess);
+    }
+  };
+  return (
+    <form onSubmit={handleSubmit}>
+      <Vertical gap={10}>
+        <TextArea
+          name="guess"
+          placeholder="Write here..."
+          helperText={formErrors.guess}
+          error={!!formErrors.guess}
+          onChange={handleChange}
+        />
+        <Button type="submit" height="40px" isAuto>
+          Submit
+        </Button>
+      </Vertical>
+    </form>
+  );
+};
+```
+
+### **LabelInput**
+
+```tsx
+import React from 'react';
+import { Button } from '../../../Button/Button';
+
+import { Horizontal } from 'app-studio';
+
+import { TextArea } from '../TextArea';
+
+export const LabelArea = () => {
+  const handleSubmit = (event: any) => {
+    event.preventDefault();
+    const formData = new FormData(event.target);
+    alert(formData.get('description'));
+  };
+  return (
+    <form onSubmit={handleSubmit}>
+      <Horizontal gap={10} alignItems="center" flexWrap="nowrap">
+        <TextArea name="description" label="Description" />
+        <Button type="submit" height="40px" isAuto>
+          Submit
+        </Button>
+      </Horizontal>
+    </form>
+  );
+};
+```
+
+### **MaxRowCol**
+
+```tsx
+import React from 'react';
+
+import { TextArea } from '../TextArea';
+
+export const MaxArea = () => {
+  return (
+    <TextArea name="max" value="Enter your thought" maxRows={5} maxCols={20} />
+  );
+};
+```
+
+### **Placeholder**
+
+```tsx
+import React from 'react';
+import { Button } from '../../../Button/Button';
+
+import { Horizontal } from 'app-studio';
+
+import { TextArea } from '../TextArea';
+
+export const PlaceholderArea = () => {
+  const handleSubmit = (event: any) => {
+    event.preventDefault();
+    const formData = new FormData(event.target);
+    alert(formData.get('comment'));
+  };
+  return (
+    <form onSubmit={handleSubmit}>
+      <Horizontal gap={10} alignItems="center" flexWrap="nowrap">
+        <TextArea name="comment" placeholder="Type your comment here..." />
+        <Button type="submit" height="40px" isAuto>
+          Submit
+        </Button>
+      </Horizontal>
+    </form>
+  );
+};
+```
+
+### **ReadOnlyInput**
+
+```tsx
+import React from 'react';
+
+import { TextArea } from '../TextArea';
+
+export const ReadOnlyArea = () => {
+  return (
+    <TextArea
+      name="readOnly"
+      value="Almost before we knew it, we had left the ground."
+      isReadOnly
+    />
+  );
+};
+```
+
+### **ShadowArea**
+
+```tsx
+import React from 'react';
+import { Button } from '../../../Button/Button';
+
+import { Horizontal } from 'app-studio';
+
+import { TextArea } from '../TextArea';
+
+export const ShadowArea = () => {
+  const handleSubmit = (event: any) => {
+    event.preventDefault();
+    const formData = new FormData(event.target);
+    alert(`Hello, ${formData.get('surname')}`);
+  };
+  return (
+    <form onSubmit={handleSubmit}>
+      <Horizontal gap={10} alignItems="center" flexWrap="nowrap">
+        <TextArea
+          name="surname"
+          label="Surname"
+          variant="none"
+          shadow={{ boxShadow: 'rgba(0, 0, 0, 0.20) 0px 3px 8px' }}
+        />
+        <Button type="submit" height="40px" isAuto>
+          Submit
+        </Button>
+      </Horizontal>
+    </form>
+  );
+};
+```
+
+### **ShapeInput**
+
+```tsx
+import React from 'react';
+import { Vertical } from 'app-studio';
+
+import { TextArea } from '../TextArea';
+import { Shape } from '../TextArea/TextArea.type';
+
+export const ShapesArea = () => {
+  return (
+    <Vertical gap={10} width="300px">
+      {['default', 'square', 'rounded'].map((shape, index) => (
+        <TextArea
+          key={index}
+          name={shape}
+          placeholder={shape}
+          shape={shape as Shape}
+          variant="outline"
+        />
+      ))}
+    </Vertical>
+  );
+};
+```
+
+### **SizeInput**
+
+```tsx
+import React from 'react';
+import { Vertical } from 'app-studio';
+
+import { TextArea } from '../TextArea';
+
+export const SizeArea = () => {
+  return (
+    <Vertical gap={10}>
+      <TextArea name="xs" placeholder="xs" size="xs" />
+      <TextArea name="sm" placeholder="sm" size="sm" />
+      <TextArea name="md" placeholder="md" size="md" />
+      <TextArea name="lg" placeholder="lg" size="lg" />
+      <TextArea name="xl" placeholder="xl" size="xl" />
+    </Vertical>
+  );
+};
+```
+
+### **StylesInput**
+
+```tsx
+import React from 'react';
+import { Button } from '../../../Button/Button';
+
+import { Horizontal } from 'app-studio';
+
+import { TextArea } from '../TextArea';
+
+export const StyledArea = () => {
+  const handleSubmit = (event: any) => {
+    event.preventDefault();
+    const formData = new FormData(event.target);
+    alert(`Hello, ${formData.get('surname')}`);
+  };
+  return (
+    <form onSubmit={handleSubmit}>
+      <Horizontal gap={10} alignItems="center" flexWrap="nowrap">
+        <TextArea
+          name="surname"
+          label="Surname"
+          variant="none"
+          views={{
+            container: {
+              borderRadius: 8,
+              padding: 5,
+              borderColor: 'theme-primary',
+              borderStyle: 'solid',
+              borderWidth: 1,
+            },
+            field: { color: 'theme-primary', padding: 0 },
+            label: { color: 'theme-primary' },
+          }}
+        />
+        <Button type="submit" height="40px" isAuto>
+          Submit
+        </Button>
+      </Horizontal>
+    </form>
+  );
+};
+```
+
+### **VariantsInputs**
+
+```tsx
+import React from 'react';
+import { Vertical } from 'app-studio';
+
+import { TextArea } from '../TextArea';
+import { Variant } from '../TextArea/TextArea.type';
+
+export const VariantsArea = () => {
+  return (
+    <Vertical gap={10} width="300px">
+      {['default', 'outline', 'none'].map((variant, index) => (
+        <TextArea
+          key={index}
+          name={variant}
+          placeholder={variant}
+          variant={variant as Variant}
+        />
+      ))}
+    </Vertical>
+  );
+};
+```
+
+### **DesignSystem**
+
+```tsx
+/**
+ * TextArea Examples - Design System
+ *
+ * Showcases the TextArea component following the design guidelines:
+ * - Typography: Inter/Geist font, specific sizes/weights
+ * - Spacing: 4px grid system
+ * - Colors: Neutral palette with semantic colors
+ * - Rounded corners: Consistent border radius
+ * - Transitions: Subtle animations
+ */
+
+import React from 'react';
+import { TextArea } from '../TextArea';
+import { Vertical } from 'app-studio';
+import { Text } from 'app-studio';
+import { View } from 'app-studio';
+
+export const DesignSystemTextAreas = () => (
+  <Vertical gap={24}>
+    {/* Size Variants */}
+    <View>
+      <Text marginBottom={8} fontWeight="600">
+        Size Variants
+      </Text>
+      <Vertical gap={16}>
+        <TextArea size="xs" placeholder="Extra Small TextArea" />
+
+        <TextArea size="sm" placeholder="Small TextArea" />
+
+        <TextArea size="md" placeholder="Medium TextArea (Default)" />
+
+        <TextArea size="lg" placeholder="Large TextArea" />
+
+        <TextArea size="xl" placeholder="Extra Large TextArea" />
+      </Vertical>
+    </View>
+
+    {/* Shape Variants */}
+    <View>
+      <Text marginBottom={8} fontWeight="600">
+        Shape Variants
+      </Text>
+      <Vertical gap={16}>
+        <TextArea shape="default" placeholder="Default Shape (Rounded)" />
+
+        <TextArea shape="square" placeholder="square Corners" />
+
+        <TextArea shape="rounded" placeholder="Rounded Corners" />
+      </Vertical>
+    </View>
+
+    {/* Style Variants */}
+    <View>
+      <Text marginBottom={8} fontWeight="600">
+        Style Variants
+      </Text>
+      <Vertical gap={16}>
+        <TextArea variant="outline" placeholder="Outline Variant" />
+
+        <TextArea variant="default" placeholder="Default Variant (Underline)" />
+
+        <TextArea
+          variant="none"
+          placeholder="No Border Variant"
+          shadow={{
+            boxShadow:
+              '0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06)',
+          }}
+        />
+      </Vertical>
+    </View>
+
+    {/* States */}
+    <View>
+      <Text marginBottom={8} fontWeight="600">
+        States
+      </Text>
+      <Vertical gap={16}>
+        <TextArea placeholder="Default State" />
+
+        <TextArea placeholder="Disabled State" isDisabled />
+
+        <TextArea
+          placeholder="Read-only State"
+          isReadOnly
+          value="This is read-only text that cannot be edited. It demonstrates how the TextArea component appears when in a read-only state."
+        />
+
+        <TextArea
+          placeholder="Error State"
+          error={true}
+          //error="This field is required"
+        />
+
+        <TextArea
+          placeholder="With Helper Text"
+          helperText="This is some helpful information about this field"
+        />
+      </Vertical>
+    </View>
+
+    {/* With Labels */}
+    <View>
+      <Text marginBottom={8} fontWeight="600">
+        With Labels
+      </Text>
+      <Vertical gap={16}>
+        <TextArea label="Comments" placeholder="Enter your comments" />
+
+        <TextArea label="Feedback" placeholder="Please provide your feedback" />
+
+        <TextArea label="Description" placeholder="Describe your experience" />
+      </Vertical>
+    </View>
+
+    {/* Rows and Columns */}
+    <View>
+      <Text marginBottom={8} fontWeight="600">
+        Rows and Columns
+      </Text>
+      <Vertical gap={16}>
+        <TextArea label="Small Area" placeholder="2 rows" maxRows={2} />
+
+        <TextArea label="Medium Area" placeholder="4 rows" maxRows={4} />
+
+        <TextArea label="Large Area" placeholder="6 rows" maxRows={6} />
+      </Vertical>
+    </View>
+
+    {/* Custom Styling */}
+    <View>
+      <Text marginBottom={8} fontWeight="600">
+        Custom Styling
+      </Text>
+      <Vertical gap={16}>
+        <TextArea
+          placeholder="Primary Theme"
+          views={{
+            container: {
+              borderColor: 'theme-primary',
+              borderWidth: '2px',
+            },
+            label: {
+              color: 'theme-primary',
+              fontWeight: '600',
+            },
+            field: {
+              color: 'theme-primary',
+            },
+          }}
+        />
+
+        <TextArea
+          placeholder="Custom Border Radius"
+          views={{
+            container: {
+              borderRadius: '16px',
+              borderColor: 'color-purple-400',
+              backgroundColor: 'color-purple-50',
+            },
+          }}
+        />
+
+        <TextArea
+          placeholder="Custom Shadow"
+          variant="none"
+          shadow={{
+            boxShadow: '0 4px 14px rgba(0, 0, 0, 0.1)',
+          }}
+          views={{
+            container: {
+              borderRadius: '8px',
+              backgroundColor: 'color-white',
+              transition: 'all 0.3s ease',
+              _hover: {
+                boxShadow: '0 6px 20px rgba(0, 0, 0, 0.15)',
+                transform: 'translateY(-2px)',
+              },
+            },
+          }}
+        />
+      </Vertical>
+    </View>
+  </Vertical>
+);
+```
+
+### **Index**
+
+```tsx
+export * from './ColorScheme';
+export * from './Default';
+export * from './designSystem';
+export * from './DisabledInput';
+export * from './ErrorInput';
+export * from './HelperText';
+export * from './LabelInput';
+export * from './MaxRowCol';
+export * from './Placeholder';
+export * from './ReadOnlyInput';
+export * from './ShadowArea';
+export * from './ShapeInput';
+export * from './SizeInput';
+export * from './StylesInput';
+export * from './VariantsInputs';
+```
+