@app-studio/web 0.9.30 → 0.9.32

package/docs/components/TextArea.mdx

@@ -0,0 +1,136 @@
+# TextArea
+
+A text input field for multi-line text editing with customizable features.
+
+### **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" />
+);
+
+```
+
+### **colorScheme**
+Optional color scheme for the component.
+
+```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" colorScheme="theme.secondary" />
+      <TextArea
+        name="name"
+        label="Name"
+        colorScheme="theme.primary"
+        variant="outline"
+      />
+    </Vertical>
+  );
+};
+
+```
+
+### **helperText**
+Helper text that appears below the text area.
+
+```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**
+Placeholder text for the text area when it is empty.
+
+```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>
+  );
+};
+
+```
+

package/docs/components/TextField.mdx

@@ -0,0 +1,225 @@
+# TextField
+
+A customizable text input field with optional helpers, labels, and icons.
+
+### **Import**
+  ```tsx
+  import { TextField } from '@app-studio/web';
+  ```
+
+### **Default**
+```tsx
+import React from 'react';
+import { Button } from '../../../Button/Button';
+
+import { Horizontal } from 'app-studio';
+
+import { TextField } from '../TextField';
+
+export const DefaultInput = () => {
+  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">
+        <TextField name="surname" />
+        <Button type="submit" height="40px" isAuto>
+          Submit
+        </Button>
+      </Horizontal>
+    </form>
+  );
+};
+
+```
+
+### **helperText**
+Optional helper text that appears below the TextField.
+
+```tsx
+import { useState } from 'react';
+import React from 'react';
+import { Button } from '../../../Button/Button';
+
+import { TextField } from '../../../Form/TextField/TextField';
+
+import { Vertical } from 'app-studio';
+
+export const HelperTextInput = () => {
+  const initialValues = {
+    firstName: '',
+    lastName: '',
+  };
+  const [formValues, setFormValues] = useState(initialValues);
+  const [formErrors, setFormErrors] = useState(initialValues);
+
+  const validate = (values: any) => {
+    const errors: any = {};
+    if (!values.firstName) {
+      errors.firstName = 'Required';
+    }
+    if (!values.lastName) {
+      errors.lastName = '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(`Hello, ${formValues.firstName} ${formValues.lastName} `);
+    }
+  };
+  return (
+    <form onSubmit={handleSubmit}>
+      <Vertical gap={10} alignItems="center" flexWrap="nowrap">
+        <TextField
+          name="firstName"
+          placeholder="First Name"
+          helperText={formErrors.firstName}
+          error={!!formErrors.firstName}
+          onChange={handleChange}
+        />
+        <TextField
+          name="lastName"
+          placeholder="Last Name"
+          helperText={formErrors.lastName}
+          error={!!formErrors.lastName}
+          onChange={handleChange}
+        />
+        <Button type="submit" height="40px" isAuto>
+          Submit
+        </Button>
+      </Vertical>
+    </form>
+  );
+};
+
+```
+
+### **colorScheme**
+Optional property to specify the color scheme of the TextField.
+
+```tsx
+import React from 'react';
+import { Vertical } from 'app-studio';
+
+import { TextField } from '../TextField';
+
+export const ColorSchemeDemo = () => {
+  return (
+    <Vertical gap={10} width="300px">
+      <TextField name="surname" label="Surname" colorScheme="theme.secondary" />
+      <TextField
+        name="name"
+        label="Name"
+        colorScheme="theme.primary"
+        variant="outline"
+      />
+    </Vertical>
+  );
+};
+
+```
+
+### **left**
+Optional React node to be rendered on the left side of the TextField.
+
+```tsx
+import React from 'react';
+import { ProfileIcon } from '../../../Icon';
+
+import { TextField } from '../TextField';
+
+export const LeftInput = () => {
+  return (
+    <TextField
+      name="name"
+      placeholder="Name"
+      left={<ProfileIcon color="black" size={16} />}
+    />
+  );
+};
+
+```
+
+### **right**
+Optional React node to be rendered on the right side of the TextField.
+
+```tsx
+import React from 'react';
+import { EditIcon } from '../../../Icon';
+
+import { TextField } from '../TextField';
+
+export const RightInput = () => {
+  return (
+    <TextField
+      name="name"
+      placeholder="Name"
+      right={<EditIcon color="black" size={16} />}
+    />
+  );
+};
+
+```
+
+### **placeholder**
+Optional placeholder text shown inside the TextField when empty.
+
+```tsx
+import React from 'react';
+import { Button } from '../../../Button/Button';
+
+import { Horizontal } from 'app-studio';
+
+import { TextField } from '../TextField';
+
+export const Placeholder = () => {
+  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">
+        <TextField name="surname" placeholder="Surname" />
+        <Button type="submit" height="40px" isAuto>
+          Submit
+        </Button>
+      </Horizontal>
+    </form>
+  );
+};
+
+```
+
+### **isClearable**
+Optional flag that when true allows the TextField to be cleared.
+
+```tsx
+import React from 'react';
+import { Vertical } from 'app-studio';
+
+import { TextField } from '../TextField';
+
+export const IsClearableDemo = () => {
+  return (
+    <Vertical gap={10} width="300px">
+      <TextField value="Clear Button" size="xs" />
+      <TextField size="xs" value="No Clear Button" isClearable={false} />
+    </Vertical>
+  );
+};
+
+```
+