@app-studio/web 0.1.0

package/src/components/Form/TextField/TextField.md

@@ -0,0 +1,193 @@
+### Import
+
+```tsx static
+import { TextField } from "app-studio";
+```
+
+### Default
+
+It has the attribute “name” as required, with type equals to “text” and isClearable set to true.
+
+```tsx
+<TextField name="default" placeholder="Enter your name..." />
+```
+
+### Disabled
+
+“**_isDisabled_**” makes the text field unusable.
+
+```tsx
+<TextField name="disabled" value="Disabled" isDisabled />
+```
+
+### Read Only
+
+“**_isReadOnly_**” makes the input field readable but not writable. Can only read the element.
+
+```tsx
+<TextField name="readOnly" value="Sarah" isReadOnly />
+```
+
+### Clear
+
+“**_isClearable_**” adds a clear button in the input field. The button will erase the existing data in the input field. By default, it is set to true.
+
+```tsx
+<TextField name="clear" isClearable />
+```
+
+### Sizes
+
+“**_size_**” changes the text size of the input field. It has a default value of “md”.
+
+```tsx
+import { Vertical } from "../../Layout/Vertical/Vertical";
+
+<Vertical gap={10} width="300px">
+  <TextField name="xs" placeholder="xs" size="xs" />
+  <TextField name="sm" placeholder="sm" size="xs" />
+  <TextField name="md" placeholder="md" size="md" />
+  <TextField name="lg" placeholder="lg" size="lg" />
+  <TextField name="xl" placeholder="xl" size="md" />
+</Vertical>;
+```
+
+### Variants
+
+“**_variant_**” changed the input styles. It has a default value of “outline”.
+
+```tsx
+import { Vertical } from "../../Layout/Vertical/Vertical";
+
+<Vertical gap={10} width="300px">
+  {["default", "outline", "unStyled"].map((variant, index) => (
+    <TextField
+      key={index}
+      name={variant}
+      placeholder={variant}
+      variant={variant}
+    />
+  ))}
+</Vertical>;
+```
+
+### Label
+
+“**_label_**” adds a label above the input field.
+
+```tsx
+<TextField name="label" label="Label" />
+```
+
+### Shadow
+
+“**_shadow_**” adds a shadow effect to the text field.
+
+```tsx
+<TextField
+  name="surname"
+  label="Surname"
+  shadow={{ boxShadow: "rgba(0, 0, 0, 0.20) 0px 3px 8px" }}
+/>
+```
+
+### Child
+
+“**_child_**” property allows you to place an element to the left or right of the text field.
+
+```tsx
+import { ProfileSvg } from "../../Svg/Profile";
+import { EditSvg } from "../../Svg/Edit";
+
+<TextField
+  name="name"
+  placeholder="Name"
+  leftchild={<ProfileSvg size={12} />}
+  rightChild={<EditSvg size={12} />}
+/>;
+```
+
+### ColorScheme
+
+“**_colorScheme_**” changes the label and border color .
+
+```tsx
+import { Vertical } from "../../Layout/Vertical/Vertical";
+
+<Vertical gap={10} width="300px">
+  <TextField name="surname" label="Surname" colorScheme="theme.secondary" />
+  <TextField name="name" label="Name" colorScheme="theme.primary" variant="outline" />
+</Vertical>;
+```
+
+### Styles
+
+“**_styles_**” changes the style of the input field.
+
+```tsx
+<TextField
+  name="surname"
+  label="Surname"
+  variant="unStyled"
+  isClearable="false"
+  shadow={{ boxShadow: "rgba(0, 0, 0, 0.20) 0px 3px 8px" }}
+  styles={{
+    box: { borderRadius: 8, borderColor: 'theme.primary',
+        borderStyle: 'solid',
+        borderWidth: 1, },
+    field: { color: "theme.primary"  },
+    label: { color: "theme.primary"  },
+  }}
+/>
+```
+
+### Error
+
+“**_error_**” if true, indicates that the text field value failed the validation criteria.
+
+```tsx
+<TextField placeholder="Enter your address..." error />
+```
+
+### Helper Text
+
+“**_helperText_**” provides information about the field.
+
+```tsx
+<TextField error helperText="Enter your address!" />
+```
+
+### **Types**
+
+```tsx static
+type Variant = "outline" | "default" | "unStyled";
+```
+
+```tsx static
+type Shape = "default" | "sharp" | "rounded" | "pillShaped";
+```
+
+```tsx static
+type Size = "xs" | "sm" | "md" | "lg" | "xl";
+```
+
+```tsx static
+type TextFieldStyles = {
+  box?: CSSProperties;
+  text?: CSSProperties;
+  label?: CSSProperties;
+  helperText?: CSSProperties;
+  field?: CSSProperties;
+};
+```
+
+## _Default Values_
+
+```tsx static
+const Shapes: Record<Shape, number | string> = {
+  default: "6px 6px 0 0",
+  sharp: 0,
+  rounded: 4,
+  pillShaped: 24,
+};
+```

package/src/components/Form/TextField/TextField.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import { TextFieldProps } from './TextField/TextField.props';
+import { useTextFieldState } from './TextField/TextField.state';
+import TextFieldView from './TextField/TextField.view';
+
+const TextFieldComponent: React.FC<TextFieldProps> = (props: TextFieldProps) => {
+  const textFieldStates = useTextFieldState(props);
+  return <TextFieldView {...textFieldStates} {...props} />;
+};
+/**
+ * TextField is used to capture text data from users.
+ */
+export const TextField = TextFieldComponent;

package/src/components/Form/TextField/examples/ClearInput.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Vertical } from 'src/components/Layout/Vertical/examples';
+
+import { TextField } from '../TextField';
+
+export const ClearInput = () => {
+  return (
+    <Vertical gap={10} width="300px">
+      <TextField value="Clear Button" size="xs" />
+      <TextField size="xs" value="No Clear Button" isClearable={false} />
+    </Vertical>
+  );
+};

package/src/components/Form/TextField/examples/ColorScheme.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Vertical } from 'src/components/Layout/Vertical/examples';
+
+import { TextField } from '../TextField';
+
+export const ColorInput = () => {
+  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>
+  );
+};

package/src/components/Form/TextField/examples/Default.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Button } from 'src/components';
+import { Horizontal } from 'src/components';
+
+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" wrap="nowrap">
+        <TextField name="surname" />
+        <Button type="submit" height="40px" isAuto>
+          Submit
+        </Button>
+      </Horizontal>
+    </form>
+  );
+};

package/src/components/Form/TextField/examples/DisabledInput.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+import { TextField } from '../TextField';
+
+export const DisabledInput = () => {
+  return <TextField name="disabled" placeholder="Disabled" isDisabled />;
+};

package/src/components/Form/TextField/examples/ErrorInput.tsx

@@ -0,0 +1,74 @@
+import { useState } from 'react';
+import React from 'react';
+import { Button } from 'src/components';
+import { TextField } from 'src/components';
+import { Vertical } from 'src/components/Layout/Vertical/examples';
+
+export const ErrorInput = () => {
+  const initialValues = {
+    firstName: '',
+    lastName: '',
+    email: '',
+  };
+  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';
+    }
+    if (!values.email) {
+      errors.email = 'Required';
+    } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)) {
+      errors.email = 'Invalid email address';
+    }
+    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} ${formValues.email}`);
+    }
+  };
+  return (
+    <form onSubmit={handleSubmit}>
+      <Vertical gap={10} alignItems="center" wrap="nowrap">
+        <TextField
+          name="firstName"
+          placeholder="First Name"
+          error={!!formErrors.firstName}
+          onChange={handleChange}
+          colorScheme="theme.secondary"
+        />
+        <TextField
+          name="lastName"
+          placeholder="Last Name"
+          error={!!formErrors.lastName}
+          onChange={handleChange}
+          colorScheme="theme.secondary"
+        />
+        <TextField
+          name="email"
+          placeholder="Email"
+          error={!!formErrors.email}
+          onChange={handleChange}
+          colorScheme="theme.secondary"
+        />
+        <Button type="submit" height="40px" isAuto>
+          Submit
+        </Button>
+      </Vertical>
+    </form>
+  );
+};

package/src/components/Form/TextField/examples/FormikErrorInput.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import { Field, Form, Formik } from 'formik';
+import { Button } from 'src/components';
+import { TextField } from 'src/components';
+import { Vertical } from 'src/components/Layout/Vertical/examples';
+
+export const FormikErrorInput = () => {
+  const initialValues = {
+    firstName: '',
+    lastName: '',
+    email: '',
+  };
+
+  const validate = (values: any) => {
+    const errors: any = {};
+
+    if (!values.firstName) {
+      errors.firstName = 'Required';
+    }
+    if (!values.lastName) {
+      errors.lastName = 'Required';
+    }
+    if (!values.email) {
+      errors.email = 'Required';
+    } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)) {
+      errors.email = 'Invalid email address';
+    }
+
+    return errors;
+  };
+
+  return (
+    <Formik
+      initialValues={initialValues}
+      validate={validate}
+      onSubmit={(values, { setSubmitting }) => {
+        setTimeout(() => {
+          alert(JSON.stringify(values, null, 2));
+          setSubmitting(false);
+        }, 400);
+      }}
+    >
+      {({ errors, touched, isSubmitting }) => (
+        <Form>
+          <Vertical gap={10}>
+            <Field
+              as={TextField}
+              name="firstName"
+              placeholder="First Name"
+              error={touched.firstName && errors.firstName}
+              colorScheme="theme.secondary"
+            />
+            <Field
+              as={TextField}
+              name="lastName"
+              placeholder="Last Name"
+              colorScheme="theme.secondary"
+              error={touched.lastName && errors.lastName}
+            />
+            <Field
+              type="email"
+              as={TextField}
+              name="email"
+              placeholder="Email"
+              colorScheme="theme.secondary"
+              error={touched.email && errors.email}
+            />
+            <Button type="submit" isDisabled={isSubmitting}>
+              Submit
+            </Button>
+          </Vertical>
+        </Form>
+      )}
+    </Formik>
+  );
+};

package/src/components/Form/TextField/examples/FormikHelperText.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { Field, Form, Formik } from 'formik';
+import { Button } from 'src/components';
+import { TextField } from 'src/components';
+import { Vertical } from 'src/components/Layout/Vertical/examples';
+
+export const FormikHelperTextInput = () => {
+  const initialValues = {
+    firstName: '',
+    lastName: '',
+  };
+
+  const validate = (values: any) => {
+    const errors: any = {};
+
+    if (!values.firstName) {
+      errors.firstName = 'Required';
+    }
+    if (!values.lastName) {
+      errors.lastName = 'Required';
+    }
+    return errors;
+  };
+
+  return (
+    <Formik
+      initialValues={initialValues}
+      validate={validate}
+      onSubmit={(values, { setSubmitting }) => {
+        setTimeout(() => {
+          alert(JSON.stringify(values, null, 2));
+          setSubmitting(false);
+        }, 400);
+      }}
+    >
+      {({ errors, touched, isSubmitting }) => (
+        <Form>
+          <Vertical gap={10}>
+            <Field
+              as={TextField}
+              name="firstName"
+              placeholder="First Name"
+              error={touched.firstName && errors.firstName}
+              helperText={touched.firstName && errors.firstName}
+            />
+            <Field
+              as={TextField}
+              name="lastName"
+              placeholder="Last Name"
+              error={touched.lastName && errors.lastName}
+              helperText={touched.lastName && errors.lastName}
+              styles={{ helperText: { color: 'red', size: 'sm' } }}
+            />
+            <Button type="submit" isDisabled={isSubmitting}>
+              Submit
+            </Button>
+          </Vertical>
+        </Form>
+      )}
+    </Formik>
+  );
+};

package/src/components/Form/TextField/examples/HelperText.tsx

@@ -0,0 +1,60 @@
+import { useState } from 'react';
+import React from 'react';
+import { Button } from 'src/components';
+import { TextField } from 'src/components';
+import { Vertical } from 'src/components/Layout/Vertical/examples';
+
+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" wrap="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>
+  );
+};

package/src/components/Form/TextField/examples/LabelInput.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Button } from 'src/components';
+import { Horizontal } from 'src/components';
+
+import { TextField } from '../TextField';
+
+export const LabelInput = () => {
+  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" wrap="nowrap">
+        <TextField name="surname" label="Surname" />
+        <Button type="submit" height="40px" isAuto>
+          Submit
+        </Button>
+      </Horizontal>
+    </form>
+  );
+};

package/src/components/Form/TextField/examples/LeftChild.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ProfileSvg } from 'src/components/Svg';
+
+import { TextField } from '../TextField';
+
+export const LeftInput = () => {
+  return <TextField name="name" placeholder="Name" leftChild={<ProfileSvg color="black" size={16} />} />;
+};

package/src/components/Form/TextField/examples/Placeholder.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Button } from 'src/components';
+import { Horizontal } from 'src/components';
+
+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" wrap="nowrap">
+        <TextField name="surname" placeholder="Surname" />
+        <Button type="submit" height="40px" isAuto>
+          Submit
+        </Button>
+      </Horizontal>
+    </form>
+  );
+};

package/src/components/Form/TextField/examples/ReadOnlyInput.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+import { TextField } from '../TextField';
+
+export const ReadOnlyInput = () => {
+  return <TextField name="disabled" value="Sarah Jane" isReadOnly />;
+};

package/src/components/Form/TextField/examples/RightChild.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { EditSvg } from 'src/components/Svg';
+
+import { TextField } from '../TextField';
+
+export const RightInput = () => {
+  return <TextField name="name" placeholder="Name" rightChild={<EditSvg color="black" size={16} />} />;
+};

package/src/components/Form/TextField/examples/ShapeInput.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Vertical } from 'src/components/Layout/Vertical/examples';
+
+import { TextField } from '../TextField';
+import { Shape } from '../TextField/TextField.type';
+
+export const ShapesInput = () => {
+  return (
+    <Vertical gap={10} width="300px">
+      {['default', 'sharp', 'rounded', 'pillShaped'].map((shape, index) => (
+        <TextField key={index} name={shape} placeholder={shape} shape={shape as Shape} variant="outline" />
+      ))}
+    </Vertical>
+  );
+};

package/src/components/Form/TextField/examples/SizeInput.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Vertical } from 'src/components/Layout/Vertical/examples';
+
+import { TextField } from '../TextField';
+
+export const SizeInput = () => {
+  return (
+    <Vertical gap={10} width="300px">
+      <TextField name="xs" placeholder="xs" size="xs" />
+      <TextField name="sm" placeholder="sm" size="xs" />
+      <TextField name="md" placeholder="md" size="md" />
+      <TextField name="lg" placeholder="lg" size="lg" />
+      <TextField name="xl" placeholder="xl" size="md" />
+    </Vertical>
+  );
+};