@app-studio/web 0.1.4 → 0.1.6

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,32 +0,0 @@
-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
-        onClick={() => {
-          if (!isDisabled) setIsVisible(!isVisible);
-        }}
-      >
-        {isVisible ? visibleIcon : hiddenIcon}
-      </View>
-    }
-    isClearable={false}
-    {...props}
-  />
-);
-
-export default PasswordView;

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

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

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

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

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

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

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