@app-studio/web 0.1.0

package/src/components/Form/DatePicker/examples/Formik.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Field, Form, Formik } from 'formik';
+import { Button } from 'src/components';
+import { Horizontal } from 'src/components';
+
+import { DatePicker } from '../DatePicker';
+
+export const FormikDatePicker = () => {
+  const initialValues = {
+    selectdate: '2023-05-30',
+  };
+
+  const onSubmit = (values: any) => {
+    alert(`${values.selectdate}`);
+  };
+
+  return (
+    <Formik initialValues={initialValues} onSubmit={onSubmit}>
+      {({ values, handleChange }) => (
+        <Form>
+          <Horizontal gap={10}>
+            <Field
+              id="selectdate"
+              name="selectdate"
+              as={DatePicker}
+              value={values.selectdate}
+              onChange={handleChange}
+            />
+            <Button type="submit">Submit</Button>
+          </Horizontal>
+        </Form>
+      )}
+    </Formik>
+  );
+};

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

@@ -0,0 +1,5 @@
+import React from 'react';
+
+import { DatePicker } from '../DatePicker';
+
+export const ReadOnlyDatePicker = () => <DatePicker name="disabled" isReadOnly />;

package/src/components/Form/DatePicker/examples/Shadow.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { DatePicker } from 'src/components';
+
+export const ShadowDatePicker = () => (
+  <DatePicker
+    shadow={{
+      boxShadow: 'rgba(0, 0, 0, 0.20) 0px 3px 8px',
+    }}
+  />
+);

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

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

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

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import { DatePicker } from '../DatePicker';
+
+export const StyledDatePicker = () => (
+  <DatePicker
+    colorScheme="theme.primary"
+    shadow={{ boxShadow: 'rgba(93, 37, 85, 0.3) 0px 3px 8px' }}
+    styles={{
+      box: { borderRadius: 10, borderColor: 'theme.primary' },
+      label: { color: 'theme.primary' },
+    }}
+  />
+);

package/src/components/Form/DatePicker/examples/helperTextDatePicker.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { DatePicker } from 'src/components';
+
+export const HelperTextDatePicker = () => (
+  <DatePicker id="error" name="error" error helperText="Please select another date" />
+);

package/src/components/Form/DatePicker/examples/index.ts

@@ -0,0 +1,11 @@
+export * from 'src/components/Form/DatePicker/examples/ColorScheme';
+export * from 'src/components/Form/DatePicker/examples/Default';
+export * from 'src/components/Form/DatePicker/examples/DisabledInput';
+export * from 'src/components/Form/DatePicker/examples/ErrorCheckbox';
+export * from 'src/components/Form/DatePicker/examples/FormCheckout';
+export * from 'src/components/Form/DatePicker/examples/Formik';
+export * from 'src/components/Form/DatePicker/examples/helperTextDatePicker';
+export * from 'src/components/Form/DatePicker/examples/ReadOnlyInput';
+export * from 'src/components/Form/DatePicker/examples/Shadow';
+export * from 'src/components/Form/DatePicker/examples/SizeInput';
+export * from 'src/components/Form/DatePicker/examples/StylesInput';

package/src/components/Form/Label/Label/Label.props.ts

@@ -0,0 +1,36 @@
+import { Headings, Sizes, TextWeights } from './Label.type';
+
+export interface LabelProps {
+  /**
+   * The text content
+   */
+  children: React.ReactNode;
+  /**
+   * Specify a heading html tag.
+   */
+  heading?: Headings;
+  /**
+   * If true, the text is styled in italic
+   */
+  isItalic?: boolean;
+  /**
+   * Marks up a text to indicate that it is no longer valid
+   */
+  isStriked?: boolean;
+  /**
+   * If true, it underline the text
+   */
+  isUnderlined?: boolean;
+  /**
+   * Changes the text-size
+   */
+  size?: Sizes | number;
+  /**
+   * Changes the font weight of the text
+   */
+  weight?: TextWeights;
+  /**
+   * Other properties
+   */
+  [x: string]: any;
+}

package/src/components/Form/Label/Label/Label.style.ts

@@ -0,0 +1,35 @@
+
+import { Headings } from './Label.type';
+
+export const HeadingSizes: Record<Headings, Record<string, number | string>> = {
+  h1: {
+    fontSize: 96,
+    lineHeight: 112,
+    letterSpacing: -1.5,
+  },
+  h2: {
+    fontSize: 60,
+    lineHeight: 71,
+    letterSpacing: -0.5,
+  },
+  h3: {
+    fontSize: 48,
+    lineHeight: 57,
+    letterSpacing: 0,
+  },
+  h4: {
+    fontSize: 34,
+    lineHeight: 40,
+    letterSpacing: 0.25,
+  },
+  h5: {
+    fontSize: 24,
+    lineHeight: 28,
+    letterSpacing: 0,
+  },
+  h6: {
+    fontSize: 20,
+    lineHeight: 24,
+    letterSpacing: 0.15,
+  },
+};

package/src/components/Form/Label/Label/Label.type.ts

@@ -0,0 +1,14 @@
+export type TextWeights =
+  | 'hairline'
+  | 'thin'
+  | 'light'
+  | 'normal'
+  | 'medium'
+  | 'semiBold'
+  | 'bold'
+  | 'extraBold'
+  | 'black';
+
+export type Sizes = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl';
+
+export type Headings = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';

package/src/components/Form/Label/Label/Label.view.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Element,Typography } from 'app-studio';
+
+import { LabelProps } from './Label.props';
+import { HeadingSizes } from './Label.style';
+
+const LabelView: React.FC<LabelProps> = ({
+  children,
+  heading,
+  isItalic = false,
+  isUnderlined = false,
+  isStriked = false,
+  weight = 'normal',
+  size = 'sm',
+  ...props
+}) => {
+  const headingStyles = heading ? HeadingSizes[heading] : {};
+
+  return (
+    <Element
+      as="label"
+      width="100%"
+      fontSize={size}
+      fontStyle={isItalic ? 'italic' : 'normal'}
+      fontWeight={Typography.fontWeights[weight]}
+      textDecoration={isStriked ? 'line-through' : isUnderlined ? 'underline' : 'none'}
+      {...headingStyles}
+      {...props}
+    >
+      {children}
+    </Element>
+  );
+};
+
+export default LabelView;

package/src/components/Form/Label/Label.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+
+import { LabelProps } from './Label/Label.props';
+import LabelView from './Label/Label.view';
+
+const LabelComponent: React.FC<LabelProps> = (props) => <LabelView {...props} />;
+
+export const Label = LabelComponent;

package/src/components/Form/Password/Password/Password.props.ts

@@ -0,0 +1,36 @@
+import React from 'react';
+import { TextFieldProps } from 'src/components/Form/TextField/TextField/TextField.props';
+
+export interface PasswordProps extends TextFieldProps {
+  /**
+   * The name of the input field
+   */
+  name?: string;
+  /**
+   * If true, the Input will be unusable
+   */
+  isDisabled?: boolean;
+  /**
+   * Icon to Indicate that the password is visible
+   */
+  visibleIcon?: React.ReactNode;
+  /**
+   * Icon to Indicate that the password is hidden
+   */
+  hiddenIcon?: React.ReactNode;
+  /**
+   * other properties
+   */
+  [x: string]: any;
+}
+
+export interface PasswordViewProps extends PasswordProps {
+  /**
+   * Optional prop to determine if the password is visible
+   */
+  isVisible?: boolean;
+  /**
+   * Optional callback prop to update the visibility state
+   */
+  setIsVisible?: Function;
+}

package/src/components/Form/Password/Password/Password.state.ts

@@ -0,0 +1,6 @@
+import { useState } from 'react';
+
+export const usePasswordState = () => {
+  const [isVisible, setIsVisible] = useState(false);
+  return { isVisible, setIsVisible };
+};

package/src/components/Form/Password/Password/Password.type.d.ts

@@ -0,0 +1,14 @@
+import { CSSProperties } from 'react';
+
+export type Variant = 'outline' | 'default' | 'unStyled';
+
+export type Shape = 'default' | 'sharp' | 'rounded' | 'pillShaped';
+
+export type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl';
+
+export type PasswordStyles = {
+  box?: CSSProperties;
+  Password?: CSSProperties;
+  label?: CSSProperties;
+  helperText?: CSSProperties;
+};

package/src/components/Form/Password/Password/Password.view.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { TextField, View } from 'src/components';
+
+import { PasswordViewProps } from './Password.props';
+
+const PasswordView: React.FC<PasswordViewProps> = ({
+  name,
+  visibleIcon,
+  hiddenIcon,
+  isDisabled = false,
+  isVisible = false,
+  setIsVisible = () => {},
+  ...props
+}) => (
+  <TextField
+    name={name}
+    type={isVisible ? 'text' : 'password'}
+    rightChild={
+      <View
+        onPress={() => {
+          if (!isDisabled) setIsVisible(!isVisible);
+        }}
+      >
+        {isVisible ? visibleIcon : hiddenIcon}
+      </View>
+    }
+    isClearable={false}
+    {...props}
+  />
+);
+
+export default PasswordView;

package/src/components/Form/Password/Password.md

@@ -0,0 +1,108 @@
+### **Import**
+
+```tsx static
+import { Password } from "app-studio";
+```
+
+### **Default**
+
+It has type equals to “password” and isClearable set to false. It has all the props of the TextField component.
+
+```tsx
+<Password label="Password" value="123456" />
+```
+
+### **Disabled**
+
+“**_isDisabled_**” makes the field unusable.
+
+```tsx
+<Password value="password" isDisabled />
+```
+
+### **Icon**
+
+“**_visibleIcon_**” and “**_hiddenIcon_**” are icons indicating whether the password is visible or hidden.
+
+```tsx
+import { OpenEyeSvg } from "../../Svg/OpenEye";
+import { CloseEyeSvg } from "../../Svg/CloseEye";
+
+<Password
+  visibleIcon={<OpenEyeSvg size={14} />}
+  hiddenIcon={<CloseEyeSvg size={14} />}
+/>;
+```
+
+### **Error**
+
+“**_error_**” if true, indicates that the text field value failed the validation criteria.
+
+```tsx
+import { Vertical } from "../../Layout/Vertical/Vertical";
+import { Button } from "../../Button/Button";
+import { OpenEyeSvg } from "../../Svg/OpenEye";
+import { CloseEyeSvg } from "../../Svg/CloseEye";
+
+<Password
+  placeholder="Password"
+  colorScheme="theme.secondary"
+  visibleIcon={<OpenEyeSvg size={14} />}
+  hiddenIcon={<CloseEyeSvg size={14} />}
+  error
+/>;
+```
+
+### **HelperText**
+
+“**_helperText_**” is a string text used to inform the user that the content of the field is invalid.
+
+```tsx
+import { Vertical } from "../../Layout/Vertical/Vertical";
+import { Button } from "../../Button/Button";
+import { OpenEyeSvg } from "../../Svg/OpenEye";
+import { CloseEyeSvg } from "../../Svg/CloseEye";
+
+<Password
+  placeholder="Password"
+  helperText="Incorrect password"
+  visibleIcon={<OpenEyeSvg size={14} />}
+  hiddenIcon={<CloseEyeSvg size={14} />}
+  error
+/>;
+```
+
+## **Default Values**
+
+```tsx static
+const Shapes: Record<Shape, number | string> = {
+  default: "6px 6px 0 0",
+  sharp: 0,
+  rounded: 4,
+  pillShaped: 24,
+};
+```
+
+## 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;
+  field?: CSSProperties;
+  label?: CSSProperties;
+  helperText?: CSSProperties;
+  text?: CSSProperties;
+};
+```

package/src/components/Form/Password/Password.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import { PasswordProps } from './Password/Password.props';
+import { usePasswordState } from './Password/Password.state';
+import PasswordView from './Password/Password.view';
+
+const PasswordComponent: React.FC<PasswordProps> = (props) => {
+  const passwordState = usePasswordState();
+  return <PasswordView {...passwordState} {...props} />;
+};
+
+/**
+ * To allow users to securely enter sensitive information
+ */
+export const Password = PasswordComponent;

package/src/components/Form/Password/example/Default.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { CloseEyeSvg } from 'src/components/Svg/CloseEye';
+import { OpenEyeSvg } from 'src/components/Svg/OpenEye';
+
+import { Password } from '../Password';
+
+export const DefaultPassword = () => (
+  <Password visibleIcon={<OpenEyeSvg size={14} />} hiddenIcon={<CloseEyeSvg size={14} />} />
+);

package/src/components/Form/Password/example/DisabledInput.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { CloseEyeSvg } from 'src/components/Svg/CloseEye';
+import { OpenEyeSvg } from 'src/components/Svg/OpenEye';
+
+import { Password } from '../Password';
+
+export const DisabledPassword = () => {
+  return (
+    <Password
+      name="disabled"
+      value="disabled"
+      visibleIcon={<OpenEyeSvg size={14} />}
+      hiddenIcon={<CloseEyeSvg size={14} />}
+      isDisabled
+    />
+  );
+};

package/src/components/Form/Password/example/ErrorInput.tsx

@@ -0,0 +1,66 @@
+import { useState } from 'react';
+import React from 'react';
+import { Button } from 'src/components';
+import { Password, TextField } from 'src/components';
+import { Vertical } from 'src/components';
+import { CloseEyeSvg } from 'src/components/Svg/CloseEye';
+import { OpenEyeSvg } from 'src/components/Svg/OpenEye';
+
+export const ErrorPassword = () => {
+  const initialValues = {
+    name: '',
+    password: '',
+  };
+  const [formValues, setFormValues] = useState(initialValues);
+  const [formErrors, setFormErrors] = useState(initialValues);
+
+  const validate = (values: any) => {
+    const errors: any = {};
+
+    if (!values.name) {
+      errors.name = 'Required';
+    }
+    if (!values.password) {
+      errors.password = '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.name} ${formValues.password}`);
+    }
+  };
+  return (
+    <form onSubmit={handleSubmit}>
+      <Vertical gap={10} wrap="nowrap">
+        <TextField
+          name="name"
+          placeholder="Name"
+          error={!!formErrors.name}
+          onChange={handleChange}
+          colorScheme="theme.secondary"
+          isClearable={true}
+        />
+        <Password
+          name="password"
+          placeholder="Password"
+          error={!!formErrors.password}
+          onChange={handleChange}
+          colorScheme="theme.secondary"
+          visibleIcon={<OpenEyeSvg size={14} />}
+          hiddenIcon={<CloseEyeSvg size={14} />}
+        />
+        <Button type="submit" height="40px">
+          Submit
+        </Button>
+      </Vertical>
+    </form>
+  );
+};

package/src/components/Form/Password/example/FormikErrorInput.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { Field, Form, Formik } from 'formik';
+import { Button } from 'src/components';
+import { Password, TextField } from 'src/components';
+import { Vertical } from 'src/components';
+import { CloseEyeSvg } from 'src/components/Svg/CloseEye';
+import { OpenEyeSvg } from 'src/components/Svg/OpenEye';
+
+export const FormikErrorPassword = () => {
+  const initialValues = {
+    name: '',
+    password: '',
+  };
+
+  const validate = (values: any) => {
+    const errors: any = {};
+
+    if (!values.name) {
+      errors.name = 'Required';
+    }
+    if (!values.password) {
+      errors.password = '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="name" label="Name" error={touched.name && errors.name} colorScheme="theme.secondary" />
+            <Field
+              as={Password}
+              name="password"
+              label="Password"
+              colorScheme="theme.secondary"
+              visibleIcon={<OpenEyeSvg size={14} />}
+              hiddenIcon={<CloseEyeSvg size={14} />}
+              error={touched.password && errors.password}
+            />
+
+            <Button type="submit" isDisabled={isSubmitting}>
+              Submit
+            </Button>
+          </Vertical>
+        </Form>
+      )}
+    </Formik>
+  );
+};

package/src/components/Form/Password/example/FormikHelperText.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { Field, Form, Formik } from 'formik';
+import { Button } from 'src/components';
+import { Password, TextField } from 'src/components';
+import { Vertical } from 'src/components';
+import { CloseEyeSvg } from 'src/components/Svg/CloseEye';
+import { OpenEyeSvg } from 'src/components/Svg/OpenEye';
+
+export const FormikHelperTextPassword = () => {
+  const initialValues = {
+    firstName: '',
+    password: '',
+  };
+
+  const validate = (values: any) => {
+    const errors: any = {};
+
+    if (!values.firstName) {
+      errors.firstName = 'Required';
+    }
+    if (!values.password) {
+      errors.password = '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"
+              value="First Name"
+              error={touched.firstName && errors.firstName}
+              helperText={touched.firstName && errors.firstName}
+            />
+            <Field
+              as={Password}
+              name="password"
+              placeholder="Password"
+              error={touched.password && errors.password}
+              helperText={touched.password && errors.password}
+              visibleIcon={<OpenEyeSvg size={14} />}
+              hiddenIcon={<CloseEyeSvg size={14} />}
+            />
+            <Button type="submit" isDisabled={isSubmitting}>
+              Submit
+            </Button>
+          </Vertical>
+        </Form>
+      )}
+    </Formik>
+  );
+};