@app-studio/web 0.1.0

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

@@ -0,0 +1,342 @@
+import React, { useCallback } from 'react';
+import { Element } from 'app-studio';
+import {Typography} from 'app-studio';
+import { Horizontal, Text } from 'src/components';
+import { FieldContainer } from 'src/components/Layout/Input/FieldContainer/FieldContainer';
+import { FieldContent } from 'src/components/Layout/Input/FieldContent/FieldContent';
+import { FieldIcons } from 'src/components/Layout/Input/FieldIcons/FieldIcons';
+import { FieldLabel } from 'src/components/Layout/Input/FieldLabel/FieldLabel';
+import { FieldWrapper } from 'src/components/Layout/Input/FieldWrapper/FieldWrapper';
+import { ArrowDownSvg, ArrowUpSvg, CloseSvg } from 'src/components/Svg';
+
+import {
+  DropDownProps,
+  HiddenSelectProps,
+  ItemProps,
+  MultiSelectProps,
+  SelectBoxProps,
+  SelectViewProps,
+} from './Select.props';
+import { useItemState } from './Select.state';
+import { IconSizes } from './Select.style';
+
+const Item: React.FC<ItemProps> = ({ isHovered, setIsHovered, option, size = 'md', callback = () => {}, ...props }) => {
+  const handleOptionClick = (option: string) => callback(option);
+  const handleHover = () => setIsHovered(!isHovered);
+
+  return (
+    <Element
+      as="li"
+      margin={0}
+      paddingVertical={8}
+      paddingHorizontal={12}
+      listStyleType="none"
+      onMouseEnter={handleHover}
+      onMouseLeave={handleHover}
+      fontSize={Typography.fontSizes[size]}
+      onPress={() => handleOptionClick(option)}
+      backgroundColor={isHovered ? 'trueGray.100' : 'transparent'}
+      {...props}
+    >
+      {option}
+    </Element>
+  );
+};
+
+const SelectBox: React.FC<SelectBoxProps> = ({
+  size = 'md',
+  styles = { field: {}, text: {} },
+  selected,
+  isDisabled,
+  placeholder,
+  removeOption = () => {},
+}) => {
+  const fieldStyles = {
+    margin: 0,
+    width: '95%',
+    heigth: '100%',
+    border: 'none',
+    paddingVertical: 8,
+    paddingHorizontal: 0,
+    fontSize: Typography.fontSizes[size],
+    backgroundColor: 'transparent',
+    color: isDisabled ? 'trueGray.600' : 'blueGray.700',
+    cursor: isDisabled ? 'not-allowed' : 'auto',
+    ...styles['field'],
+    ...styles['text'],
+  };
+
+  return (
+    <Text {...fieldStyles}>
+      {(selected === '' || (selected && selected.length === 0)) && !!placeholder ? (
+        placeholder
+      ) : (
+        <>
+          {typeof selected === 'string'
+            ? selected
+            : selected &&
+              selected.length > 0 && (
+                <Horizontal gap={6}>
+                  {selected.map((option) => (
+                    <MultiSelect key={option} option={option} removeOption={removeOption} />
+                  ))}
+                </Horizontal>
+              )}
+        </>
+      )}
+    </Text>
+  );
+};
+
+const HiddenSelect: React.FC<HiddenSelectProps> = ({
+  id,
+  name,
+  selected,
+  onChange,
+  isMulti = false,
+  isDisabled = false,
+  isReadOnly = false,
+  options = [],
+  ...props
+}) => {
+  const handleChange = (event: any) => {
+    if (onChange) onChange(event);
+  };
+  return (
+    <Element
+      id={id}
+      name={name}
+      as="select"
+      opacity={0}
+      width={0}
+      height={0}
+      position="absolute"
+      value={selected}
+      disabled={isDisabled}
+      readOnly={isReadOnly}
+      onChange={handleChange}
+      multiple={isMulti}
+      {...props}
+    >
+      {options.map((option) => {
+        return (
+          <option key={option} value={option}>
+            {option}
+          </option>
+        );
+      })}
+    </Element>
+  );
+};
+
+const DropDown: React.FC<DropDownProps> = ({ size, styles = { dropDown: {} }, options, callback = () => {} }) => {
+  const itemStates = useItemState();
+  const handleCallback = (option: string) => callback(option);
+  const shadow =
+    typeof document !== undefined
+      ? {
+          boxShadow:
+            'rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px',
+        }
+      : {
+          elevation: 2,
+          shadowColor: 'rgba(0, 0, 0, 0.07)',
+          shadowOffset: {
+            width: 0,
+            height: 1,
+          },
+          shadowOpacity: 1,
+          shadowRadius: 1,
+        };
+  return (
+    <Element
+      as="ul"
+      role="dropdown"
+      top="100%"
+      width="100%"
+      display="flex"
+      zIndex={1000}
+      overflowY="auto"
+      marginTop={5}
+      marginLeft={0}
+      marginRight={0}
+      marginBottom={0}
+      padding={0}
+      borderRadius={4}
+      position="absolute"
+      flexDirection="column"
+      backgroundColor="white"
+      justifyContent="space-evenly"
+      {...shadow}
+      {...styles['dropDown']}
+    >
+      {options.map((option) => (
+        <Item key={option} size={size} option={option} callback={handleCallback} {...itemStates} {...styles['text']} />
+      ))}
+    </Element>
+  );
+};
+
+export const MultiSelect: React.FC<MultiSelectProps> = ({
+  option,
+  size = 'md',
+  removeOption = () => {},
+  ...props
+}) => {
+  const handleClick = () => removeOption(option);
+
+  return (
+    <Horizontal
+      gap={10}
+      padding={6}
+      borderRadius={4}
+      alignItems="center"
+      fontSize={Typography.fontSizes[size]}
+      backgroundColor="trueGray.300"
+      onPress={(event: any) => event.stopPropagation()}
+      {...props}
+    >
+      <Text size={size}>{option}</Text>
+      <CloseSvg role="close-button" color="inherit" size={IconSizes[size]} onClick={handleClick} />
+    </Horizontal>
+  );
+};
+
+const SelectView: React.FC<SelectViewProps> = ({
+  id,
+  name,
+  label,
+  selected,
+  placeholder,
+  helperText,
+  hide = false,
+  error = false,
+  isMulti = false,
+  isFocused = false,
+  isHovered = false,
+  isDisabled = false,
+  isReadOnly = false,
+  options = [],
+  shadow = {},
+  size = 'md',
+  colorScheme = 'theme.primary',
+  shape = 'default',
+  variant = 'default',
+  styles = {
+    text: {},
+    icon: {},
+    dropDown: {},
+    selectBox: {},
+    label: {},
+    helperText: {},
+  },
+  onChange = () => {},
+  setHide = () => {},
+  setSelected = () => {},
+  setIsHovered = () => {},
+  setIsFocused = () => {},
+  ...props
+}) => {
+  const isWithLabel = !!(isFocused && label);
+
+  const handleHover = () => setIsHovered(!isHovered);
+  const handleFocus = () => setIsFocused(true);
+
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    event.stopPropagation();
+    setHide(!hide);
+    setIsFocused(!isFocused);
+  };
+
+  const handleCallback = useCallback(
+    (option: string) => {
+      setHide(!hide);
+      if (isMulti && Array.isArray(selected)) {
+        !selected.includes(option) && setSelected([...selected, option]);
+      } else {
+        setSelected(option);
+      }
+    },
+
+    [hide, isMulti, selected]
+  );
+
+  const handleRemoveOption = (selectedOption: string) => {
+    if (Array.isArray(selected) && selected.includes(selectedOption)) {
+      const newSelected = selected.filter((option) => option !== selectedOption);
+      setSelected(newSelected.length === 0 ? [] : newSelected);
+    }
+  };
+
+  return (
+    <FieldContainer
+      role="SelectBox"
+      helperText={helperText}
+      error={error}
+      styles={styles}
+      onPress={isDisabled || isReadOnly ? () => {} : handleClick}
+    >
+      <FieldContent
+        label={label}
+        size={size}
+        error={error}
+        shape={shape}
+        styles={styles}
+        shadow={shadow}
+        variant={variant}
+        value={selected}
+        color={colorScheme}
+        isHovered={isHovered}
+        isDisabled={isDisabled}
+        isReadOnly={isReadOnly}
+        isFocused={isFocused}
+        isWithLabel={isWithLabel}
+        colorScheme={colorScheme}
+        onMouseEnter={handleHover}
+        onMouseLeave={handleHover}
+      >
+        <FieldWrapper>
+          {isWithLabel && (
+            <FieldLabel htmlFor={id} color={colorScheme} error={error} {...styles}>
+              {label}
+            </FieldLabel>
+          )}
+          <HiddenSelect
+            id={id}
+            name={name}
+            options={options}
+            onChange={onChange}
+            selected={selected}
+            isDisabled={isDisabled}
+            isReadOnly={isReadOnly}
+            isMulti={isMulti}
+            onFocus={handleFocus}
+            {...props}
+          />
+          <SelectBox
+            size={size}
+            styles={styles}
+            selected={selected}
+            isDisabled={isDisabled}
+            placeholder={placeholder}
+            removeOption={handleRemoveOption}
+          />
+        </FieldWrapper>
+        <FieldIcons>
+          {!isReadOnly && !isDisabled && (
+            <>
+              {hide ? (
+                <ArrowDownSvg color="inherit" size={IconSizes[size]} style={styles.icon} />
+              ) : (
+                <ArrowUpSvg color="inherit" size={IconSizes[size]} style={styles.icon} />
+              )}
+            </>
+          )}
+        </FieldIcons>
+      </FieldContent>
+      {!hide && <DropDown size={size} styles={styles} options={options} callback={handleCallback} />}
+    </FieldContainer>
+  );
+};
+
+export default SelectView;

package/src/components/Form/Select/Select.md

@@ -0,0 +1,165 @@
+### **Import**
+
+```tsx static
+import { Select } from "app-studio";
+```
+
+### **Default**
+
+```tsx
+<Select label="Select an item" options={["Item1", "Item2", "Item3"]} />
+```
+
+### **Disabled**
+
+“**_isDisabled_**” makes the select field unclickable.
+
+```tsx
+<Select isDisabled options={["Item1", "Item2", "Item3"]} />
+```
+
+### **IsReadOnly**
+
+“**_isReadOnly_**” makes the field readable but not writable. Can only read the element.
+
+```tsx
+<Select options={["Item1", "Item2", "Item3"]} isReadOnly />
+```
+
+### **Sizes**
+
+“**_size_**” changes the text and icon size . It has a default value of “md”.
+
+```tsx
+import { Vertical } from "../../Layout/Vertical/Vertical";
+
+const options = ["Item1", "Item2", "Item3"];
+
+<Vertical gap={10}>
+  <Select name="xs" size="xs" placeholder="xs" options={options} />
+  <Select name="sm" size="sm" placeholder="sm" options={options} />
+  <Select name="md" size="md" placeholder="md" options={options} />
+  <Select name="lg" size="lg" placeholder="lg" options={options} />
+  <Select name="xl" size="xl" placeholder="xl" options={options} />
+</Vertical>;
+```
+
+### **ColorScheme**
+
+“**_colorScheme_**” modifies the border color of the select field.
+
+```tsx
+import { Vertical } from "../../Layout/Vertical/Vertical";
+
+<Vertical gap={15}>
+  {["theme.primary", "theme.secondary", "error", "success", "warning"].map((color) => (
+    <Select
+      key={color}
+      options={["Item1", "Item2", "Item3"]}
+      colorScheme={color}
+    />
+  ))}
+</Vertical>;
+```
+
+### **Shadow**
+
+“**_shadow_**” adds a shadow effect to the field.
+
+```tsx
+<Select
+  shadow={{
+    boxShadow:
+      "rgb(204, 219, 232) 3px 3px 6px 0px inset, rgba(255, 255, 255, 0.5) -3px -3px 6px 1px inset",
+  }}
+  options={["Item1", "Item2", "Item3"]}
+/>
+```
+
+### **Multiple**
+
+“**_isMulti_**” indicates whether the select component allows the selection of multiple options.
+
+```tsx
+<Select
+  options={["Item1", "Item2", "Item3"]}
+  placeholder="Select an item.."
+  isMulti
+/>
+```
+
+### **Error**
+
+“**error**” indicates whether the field has an error.
+
+```tsx
+<Select options={["Item1", "Item2", "Item3"]} error />
+```
+
+### **HelperText**
+
+“**_helperText_**” provides additional information about the field.
+
+```tsx
+<Select
+  options={["Item1", "Item2", "Item3"]}
+  helperText="select one item!"
+  error
+/>
+```
+
+### **Styles**
+
+“**_styles_**” changes the style of the select field.
+
+```tsx
+<Select
+  colorScheme="theme.primary"
+  options={["Item1", "Item2", "Item3"]}
+  styles={{
+    selectBox: { borderRadius: 10,  borderColor: 'theme.primary',
+        borderStyle: 'solid',
+        borderWidth: 1, },
+    text: { color: "theme.primary"  },
+    label: { fontWeight: "bold", color: "theme.primary"  },
+  }}
+/>
+```
+
+### **Default Value**
+
+```tsx static
+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 },
+};
+```
+
+```tsx static
+const IconSizes: Record<Size, string> = {
+  xs: "8px",
+  sm: "10px",
+  md: "12px",
+  lg: "14px",
+  xl: "16px",
+};
+```
+
+### Types
+
+```tsx static
+type Size = "xs" | "sm" | "md" | "lg" | "xl";
+```
+
+```tsx static
+type SelectStyles = {
+  box?: CSSProperties;
+  text?: CSSProperties;
+  label?: CSSProperties;
+  helperText?: CSSProperties;
+  field?: CSSProperties;
+};
+```

package/src/components/Form/Select/Select.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import { SelectProps } from './Select/Select.props';
+import { useSelectState } from './Select/Select.state';
+import SelectView from './Select/Select.view';
+
+const SelectComponent: React.FC<SelectProps> = (props) => {
+  const selectStates = useSelectState(props);
+  return <SelectView {...selectStates} {...props} />;
+};
+
+/**
+ * Select provides a dropdown list of options for the user to choose from.
+ */
+
+export const Select = SelectComponent;

package/src/components/Form/Select/examples/Color.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Vertical } from 'src/components/Layout/Vertical/examples';
+
+import { Select } from '../Select';
+
+export const ColorSelect = () => (
+  <Vertical gap={15}>
+    {['theme.primary', 'theme.secondary', 'theme.error', 'theme.success', 'theme.warning'].map((color) => (
+      <Select key={color} options={['Item1', 'Item2', 'Item3']} colorScheme={color} />
+    ))}
+  </Vertical>
+);

package/src/components/Form/Select/examples/Default.tsx

@@ -0,0 +1,4 @@
+import React from 'react';
+import { Select } from 'src/components';
+
+export const DefaultSelect = () => <Select options={['Item1', 'Item2', 'Item3']} label="Select an item" />;

package/src/components/Form/Select/examples/Disabled.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+import { Select } from '../Select';
+
+export const DisabledSelect = () => <Select isDisabled options={['Item1', 'Item2', 'Item3']} />;

package/src/components/Form/Select/examples/Error.tsx

@@ -0,0 +1,4 @@
+import React from 'react';
+import { Select } from 'src/components';
+
+export const ErrorSelect = () => <Select id="error" name="error" error options={['Item1', 'Item2', 'Item3']} />;

package/src/components/Form/Select/examples/Form.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Button } from 'src/components';
+import { Vertical } from 'src/components/Layout/Vertical/examples';
+
+import { Select } from '../Select';
+
+export const FormSelect = () => {
+  const handleSubmit = (event: any) => {
+    event.preventDefault();
+    const formData = new FormData(event.target);
+    alert(`You selected: ${formData.getAll('formItem')}`);
+  };
+  return (
+    <form onSubmit={handleSubmit}>
+      <Vertical gap={10} width="100%">
+        <Select id="formItem" name="formItem" options={['Item1', 'Item2', 'Item3']} placeholder="Select an item..." />
+        <Button type="submit" alignSelf="center">
+          Submit
+        </Button>
+      </Vertical>
+    </form>
+  );
+};

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

@@ -0,0 +1,41 @@
+import React from 'react';
+import { Field, Form, Formik } from 'formik';
+import { Button } from 'src/components';
+import { Vertical } from 'src/components/Layout/Vertical/examples';
+
+import { Select } from '../Select';
+
+export const FormikSelect = () => {
+  const options = ['Item1', 'Item2', 'Item3'];
+  const initialValues = {
+    formik: options[0],
+  };
+
+  const onSubmit = (values: any) => {
+    alert(`${values.formik}`);
+  };
+
+  return (
+    <Formik initialValues={initialValues} onSubmit={onSubmit}>
+      {({ values, handleChange }) => (
+        <Form>
+          <Vertical gap={10}>
+            <Field
+              id="formik"
+              name="formik"
+              as={Select}
+              value={values.formik}
+              options={options}
+              onChange={handleChange}
+              placeholder="Select an item..."
+            />
+
+            <Button type="submit" alignSelf="center">
+              Submit
+            </Button>
+          </Vertical>
+        </Form>
+      )}
+    </Formik>
+  );
+};

package/src/components/Form/Select/examples/HelperText.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+import { Select } from '../Select';
+
+export const HelperTextSelect = () => (
+  <Select options={['Item1', 'Item2', 'Item3']} helperText="select one item!" error />
+);

package/src/components/Form/Select/examples/Multiple.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Select } from 'src/components';
+
+export const MultiSelect = () => (
+  <Select options={['Item1', 'Item2', 'Item3']} placeholder="Select an item.." isMulti />
+);

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

@@ -0,0 +1,5 @@
+import React from 'react';
+
+import { Select } from '../Select';
+
+export const ReadOnlySelect = () => <Select options={['Item1', 'Item2', 'Item3']} isReadOnly />;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Select } from 'src/components';
+
+export const ShadowSelect = () => (
+  <Select
+    shadow={{
+      boxShadow: 'rgb(204, 219, 232) 3px 3px 6px 0px inset, rgba(255, 255, 255, 0.5) -3px -3px 6px 1px inset',
+    }}
+    options={['Item1', 'Item2', 'Item3']}
+  />
+);

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Vertical } from 'src/components/Layout/Vertical/examples';
+
+import { Select } from '../Select';
+
+export const SizeSelect = () => {
+  const options = ['Item1', 'Item2', 'Item3'];
+  return (
+    <Vertical gap={10}>
+      <Select name="sm" size="sm" placeholder="sm" options={options} />
+      <Select name="md" size="md" placeholder="md" options={options} />
+      <Select name="lg" size="lg" placeholder="lg" options={options} />
+      <Select name="xl" size="xl" placeholder="xl" options={options} />
+    </Vertical>
+  );
+};

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

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import { Select } from '../Select';
+
+export const StyledSelect = () => (
+  <Select
+    colorScheme="theme.primary"
+    options={['Item1', 'Item2', 'Item3']}
+    styles={{
+      selectBox: { borderRadius: 10, border: '1px solid purple' },
+      text: { color: 'theme.primary' },
+      label: { fontWeight: 'bold', color: 'theme.primary' },
+    }}
+  />
+);