@app-studio/web 0.1.4 → 0.1.6

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

@@ -1,193 +0,0 @@
-### 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

@@ -1,14 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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

@@ -1,74 +0,0 @@
-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

@@ -1,76 +0,0 @@
-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

@@ -1,62 +0,0 @@
-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

@@ -1,60 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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>
-  );
-};

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

@@ -1,33 +0,0 @@
-import React from 'react';
-import { Button } from 'src/components';
-import { Horizontal } from 'src/components';
-
-import { TextField } from '../TextField';
-
-export const StyledInput = () => {
-  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"
-          variant="unStyled"
-          shadow={{ boxShadow: 'rgba(0, 0, 0, 0.20) 0px 3px 8px' }}
-          styles={{
-            box: { borderRadius: 8, borderColor: 'theme.primary', borderStyle: 'solid', borderWidth: 1 },
-            text: { color: 'theme.primary' },
-            label: { color: 'theme.primary' },
-          }}
-        />
-        <Button type="submit" height="40px" colorScheme="theme.primary" isAuto>
-          Submit
-        </Button>
-      </Horizontal>
-    </form>
-  );
-};