@app-studio/web 0.1.5 → 0.1.6

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

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

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

@@ -1,65 +0,0 @@
-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 HelperTextPassword = () => {
-  const initialValues = {
-    firstName: '',
-    password: '',
-  };
-  const [formValues, setFormValues] = React.useState(initialValues);
-  const [formErrors, setFormErrors] = React.useState(initialValues);
-
-  const validate = (values: any) => {
-    const errors: any = {};
-    if (!values.firstName) {
-      errors.firstName = '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.firstName} ${formValues.password} `);
-    }
-  };
-
-  return (
-    <form onSubmit={handleSubmit}>
-      <Vertical gap={10} wrap="nowrap">
-        <TextField
-          name="firstName"
-          label="First Name"
-          helperText={formErrors.firstName}
-          error={!!formErrors.firstName}
-          onChange={handleChange}
-        />
-        <Password
-          name="password"
-          label="Password"
-          helperText={formErrors.password}
-          error={!!formErrors.password}
-          onChange={handleChange}
-          visibleIcon={<OpenEyeSvg size={14} />}
-          hiddenIcon={<CloseEyeSvg size={14} />}
-        />
-        <Button type="submit" height="40px">
-          Submit
-        </Button>
-      </Vertical>
-    </form>
-  );
-};

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

@@ -1,262 +0,0 @@
-import { CSSProperties } from 'react';
-import { Elevation } from 'src/utils/elevation';
-import { Shadow } from 'app-studio';
-
-import { SelectStyles, Shape, Size, Variant } from './Select.type';
-
-export interface SelectProps {
-  /**
-   * The identifier of the select field.
-   */
-  id?: string;
-
-  /**
-   * Indicates whether the field has an error.
-   */
-  error?: boolean;
-
-  /**
-   * The name of the select field.
-   */
-  name?: string;
-
-  /**
-   * The label text for the select field.
-   */
-  label?: string;
-
-  /**
-   * Changes the border color when hovering over the field.
-   */
-  colorScheme?: string;
-
-  /**
-   * Provides additional information or instructions about the field.
-   */
-  helperText?: string;
-
-  /**
-   * A brief text or hint that appears in the field before the user enters any value.
-   */
-  placeholder?: string;
-
-  /**
-   * An array of options for the select field.
-   */
-  options: Array<string>;
-
-  /**
-   * If true, allows multiple options to be selected.
-   */
-  isMulti?: boolean;
-
-  /**
-   * If true, the select field cannot be edited.
-   */
-  isReadOnly?: boolean;
-
-  /**
-   * If true, the select field is disabled and cannot be used.
-   */
-  isDisabled?: boolean;
-
-  /**
-   * Handler function to be called when the select value changes.
-   */
-  onChange?: (value: any) => void;
-  /**
-   * Changes the shape or outline of the input field.
-   */
-  shape?: Shape;
-  /**
-   * Changes the style variant of the input field.
-   */
-  variant?: Variant;
-  /**
-   * CSS styles for the select box and dropdown.
-   */
-  styles?: SelectStyles;
-
-  /**
-   * Specifies the height and width of the select.
-   */
-  size?: Size;
-
-  /**
-   * Applies a shadow effect to the select field.
-   */
-  shadow?: Shadow | Elevation | CSSProperties;
-
-  /**
-   * Additional properties and attributes for the select field.
-   */
-  [x: string]: any;
-}
-
-export interface SelectViewProps extends SelectProps {
-  /**
-   * Optional prop indicating if an option is selected
-   */
-  selected: string | Array<string>;
-
-  /**
-   * Optional callback prop to update the selected option
-   */
-  setSelected: Function;
-
-  /**
-   * Prop to determine if the select dropdown is hidden
-   */
-  hide: boolean;
-
-  /**
-   * Callback prop to update the visibility of the select dropdown
-   */
-  setHide: Function;
-
-  /**
-   * Prop indicating if the select is being hovered
-   */
-  isHovered: boolean;
-
-  /**
-   * Callback prop to update the hover state of the select
-   */
-  setIsHovered: Function;
-
-  /**
-   * Prop indicating if the select is currently focused
-   */
-  isFocused: boolean;
-
-  /**
-   * Callback prop to update the focus state of the select
-   */
-  setIsFocused: Function;
-}
-
-export interface SelectBoxProps {
-  /**
-   * The option that will be selected
-   */
-  selected?: string | Array<string>;
-  /**
-   * If true, the select will be unusable
-   */
-  isDisabled?: boolean;
-  /**
-   * A brief text or hint that appears in the field before the user enters any value
-   */
-  placeholder?: string;
-  /**
-   * Function to be called when clicked on close button
-   */
-  removeOption?: Function;
-  /**
-   * Css styles for the select box and dropdown
-   */
-  styles?: SelectStyles;
-  /**
-   * To set the select's height and width.
-   */
-  size?: Size;
-}
-
-export interface MultiSelectProps {
-  /**
-   * Option to be displayed
-   */
-  option: string;
-  /**
-   * Function to be called when clicked on close button
-   */
-  removeOption: Function;
-  /**
-   * To set the item's fontSize
-   */
-  size?: Size;
-  /**
-   * other properties
-   */
-  [x: string]: any;
-}
-
-export interface ItemProps {
-  /**
-   * Function that will be called when the option is clicked
-   */
-  callback?: Function;
-  /**
-   * Option to be displayed
-   */
-  option: string;
-  /**
-   * To set the item's fontSize
-   */
-  size?: Size;
-  /**
-   * other properties
-   */
-  [x: string]: any;
-}
-export interface HiddenSelectProps {
-  /**
-   * Identifier
-   */
-  id?: string;
-  /**
-   * The name of the field
-   */
-  name?: string;
-  /**
-   * The option that has been selected
-   */
-  selected: string | Array<string>;
-  /**
-   * If true, multiple options can be selected
-   */
-  isMulti?: boolean;
-  /**
-   * If true, select cannot be selected
-   */
-  isReadOnly?: boolean;
-  /**
-   * If true, the dropdown will be unusable
-   */
-  isDisabled?: boolean;
-  /**
-   * Handler when the field value changes
-   */
-  onChange?: (value: any) => void;
-  /**
-   * List of options
-   */
-  options: Array<string>;
-  /**
-   * other properties
-   */
-  [x: string]: any;
-}
-
-export interface DropDownProps {
-  /**
-   * To set the height and width of the item list.
-   */
-  size?: Size;
-  /**
-   * Function that will be called when the option is selected
-   */
-  callback?: Function;
-  /**
-   * List of options
-   */
-  options: Array<string>;
-  /**
-   * Css styles for the select container and label
-   */
-  styles?: SelectStyles;
-  /**
-   * other properties
-   */
-  [x: string]: any;
-}

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

@@ -1,19 +0,0 @@
-import React from 'react';
-
-import { SelectProps } from './Select.props';
-
-export const useSelectState = ({ placeholder, isMulti, options }: SelectProps) => {
-  const defaultSelected = placeholder ? (isMulti ? [] : '') : options[0];
-
-  const [hide, setHide] = React.useState(true);
-  const [isHovered, setIsHovered] = React.useState(false);
-  const [isFocused, setIsFocused] = React.useState(false);
-  const [selected, setSelected] = React.useState<string | Array<string>>(defaultSelected);
-  return { selected, setSelected, hide, setHide, isHovered, setIsHovered, isFocused, setIsFocused };
-};
-
-export const useItemState = () => {
-  const [isHovered, setIsHovered] = React.useState(false);
-
-  return { isHovered, setIsHovered };
-};

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

@@ -1,19 +0,0 @@
-import { CSSProperties } from 'react';
-
-import { Size } from './Select.type';
-
-export const Sizes: Record<Size, CSSProperties> = {
-  xs: { height: 6, width: 6 },
-  sm: { height: 12, width: 12 },
-  md: { height: 18, width: 18 },
-  lg: { height: 24, width: 24 },
-  xl: { height: 30, width: 30 },
-};
-
-export const IconSizes: Record<Size, number> = {
-  xs: 8,
-  sm: 10,
-  md: 12,
-  lg: 14,
-  xl: 16,
-};

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

@@ -1,15 +0,0 @@
-export type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-
-export type Shape = 'default' | 'sharp' | 'rounded' | 'pillShaped';
-
-export type Variant = 'outline' | 'default' | 'unStyled';
-
-export type SelectStyles = {
-  text?: CSSProperties;
-  icon?: CSSProperties;
-  dropDown?: CSSProperties;
-  selectBox?: CSSProperties;
-  label?: CSSProperties;
-  helperText?: CSSProperties;
-  field?: CSSProperties;
-};