@app-studio/web 0.1.0

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

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

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

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

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

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