@app-studio/web 0.1.4 → 0.1.6

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

@@ -1,98 +0,0 @@
-import React from 'react';
-import { Typography } from 'app-studio';
-import { Center } from 'src/components';
-import { Label } from 'src/components/Form/Label/Label';
-import { CheckSvg, IndeterminateSvg } from 'src/components/Svg';
-
-import { CheckboxViewProps } from './Checkbox.props';
-import { IconSizes, Sizes } from './Checkbox.style';
-
-const CheckboxView: React.FC<CheckboxViewProps> = ({
-  id,
-  icon,
-  name,
-  label,
-  isChecked,
-  onChange,
-  onValueChange,
-  shadow = {},
-  size = 'md',
-  colorScheme = 'theme.primary',
-  error = false,
-  isSelected = false,
-  isHovered = false,
-  isDisabled = false,
-  isReadOnly = false,
-  isIndeterminate = false,
-  defaultIsSelected = false,
-  setIsSelected = () => {},
-  setIsHovered = () => {},
-  styles = { checkbox: {}, label: {} },
-  ...props
-}) => {
-  const handleHover = () => setIsHovered(!isHovered);
-
-  const handleChange = () => {
-    if (!isReadOnly && !isDisabled) {
-      if (isChecked === undefined) {
-        setIsSelected(!isSelected);
-      } else {
-        if (onChange) onChange(!isChecked);
-        if (onValueChange) onValueChange(!isChecked);
-      }
-    }
-  };
-
-  const checkboxStyle = {
-    container: {
-      gap: 10,
-      display: 'flex',
-      alignItems: 'center',
-      height: 'fit-content',
-      width: 'fit-content',
-      color: error ? 'theme.error' : isDisabled ? 'theme.disabled' : 'color.blueGray.700',
-      cursor: isDisabled ? 'not-allowed' : isReadOnly ? 'default' : 'pointer',
-      ...styles['label'],
-    },
-    checkbox: {
-      ...(isDisabled
-        ? { backgroundColor: 'theme.disabled' }
-        : ((isChecked || isSelected) && !isIndeterminate) || isIndeterminate
-        ? { backgroundColor: colorScheme }
-        : {
-            borderWidth: 2,
-            borderColor: error ? 'theme.error' : isHovered ? 'color.gray.500' : 'color.gray.300',
-            borderStyle: 'solid',
-          }),
-      borderRadius: 3,
-      filter: isHovered ? 'brightness(0.9)' : undefined,
-      ...Sizes[size],
-      ...shadow,
-      ...styles['checkbox'],
-    },
-  };
-
-  return (
-    <Label
-      htmlFor={id}
-      as="div"
-      onClick={handleChange}
-      onMouseEnter={handleHover}
-      onMouseLeave={handleHover}
-      size={Typography.fontSizes[size]}
-      {...checkboxStyle.container}
-      {...props}
-    >
-      <Center {...checkboxStyle.checkbox}>
-        {isIndeterminate ? (
-          <IndeterminateSvg />
-        ) : (
-          (isChecked || isSelected) && (icon ?? <CheckSvg size={IconSizes[size]} />)
-        )}
-      </Center>
-      {label}
-    </Label>
-  );
-};
-
-export default CheckboxView;

package/src/components/Form/Checkbox/Checkbox.md

@@ -1,128 +0,0 @@
-### **Import**
-
-```tsx static
-import { Checkbox } from "app-studio";
-```
-
-### **Default**
-
-```tsx
-<Checkbox>Agree to Terms and Conditions</Checkbox>
-```
-
-### **Disabled**
-
-“isDisabled” makes the Checkbox unusable and un-clickable with a “disabled” look.
-
-```tsx
-<Checkbox isDisabled>Disable</Checkbox>
-```
-
-### **Read Only**
-
-“isReadOnly” makes the field readable but not writable. Can only read the element.
-
-```tsx
-<Checkbox isReadOnly isChecked>
-  Read Only
-</Checkbox>
-```
-
-### **Indeterminate**
-
-“isIndeterminant” indicates that the checkbox is never checked or unchecked.
-
-```tsx
-<Checkbox id="indeterminate" name="indeterminate" isIndeterminate>
-  Select All
-</Checkbox>
-```
-
-### **Size**
-
-"size" property allows you to adjust the size of the checkbox. By default, it is set to "md" (medium) size.
-
-```jsx
-import { Vertical } from "../../Layout/Vertical/Vertical";
-
-<Vertical gap={10}>
-  <Checkbox name="xs" size="xs" isChecked>
-    xs
-  </Checkbox>
-  <Checkbox name="sm" size="sm" isChecked>
-    sm
-  </Checkbox>
-  <Checkbox name="md" size="md" isChecked>
-    md
-  </Checkbox>
-  <Checkbox name="lg" size="lg" isChecked>
-    lg
-  </Checkbox>
-  <Checkbox name="xl" size="xl" isChecked>
-    xl
-  </Checkbox>
-</Vertical>;
-```
-
-### **ColorScheme**
-
-“colorScheme” allows you to modify the background color of the Checkbox. It accepts a value from the "ColorThemes" type, with the default color set to "theme.primary".
-
-```tsx
-import { Horizontal } from "../../Layout/Horizontal/Horizontal";
-
-<Horizontal justify="space-evenly" gap={10}>
-  {["theme.primary", "theme.secondary", "theme.error", "theme.success", "theme.warning"].map(
-    (color, index) => (
-      <Checkbox key={index} name="name" colorScheme={color} isChecked>
-        {color}
-      </Checkbox>
-    )
-  )}
-</Horizontal>;
-```
-
-### **Shadow**
-
-"shadow" attribute applies a shadow effect to the Checkbox.
-
-```tsx
-<Checkbox shadow={{ boxShadow: "0 2px 4px rgba(0, 0, 0, 0.2)" }}>
-  Accept
-</Checkbox>
-```
-
-### **Styles**
-
-“styles” enables you to customize the styling of the input field.
-
-```tsx
-<Checkbox
-  styles={{
-    checkbox: { borderRadius: 10,
-       borderColor: 'theme.primary',
-        borderStyle: 'solid',
-        borderWidth: 1 },
-    label: { color: "teal" },
-  }}
->
-  Enable
-</Checkbox>
-```
-
-### Types
-
-#### Sizes
-
-```tsx static
-type Size = "xs" | "sm" | "md" | "lg" | "xl";
-```
-
-#### Styles
-
-```tsx static
-type CheckboxStyles = {
-  checkbox?: CSSProperties;
-  label?: CSSProperties;
-};
-```

package/src/components/Form/Checkbox/Checkbox.tsx

@@ -1,15 +0,0 @@
-import React from 'react';
-
-import { CheckboxProps } from './Checkbox/Checkbox.props';
-import { useCheckboxState } from './Checkbox/Checkbox.state';
-import CheckboxView from './Checkbox/Checkbox.view';
-
-const CheckboxComponent: React.FC<CheckboxProps> = (props) => {
-  const checkboxStates = useCheckboxState(props);
-  return <CheckboxView {...checkboxStates} {...props} />;
-};
-
-/**
- * Checkbox allows users to select one or more options from a list of choices.
- */
-export const Checkbox = CheckboxComponent;

package/src/components/Form/Checkbox/examples/ColorScheme.tsx

@@ -1,12 +0,0 @@
-import React from 'react';
-import { Vertical } from 'src/components/Layout/Vertical/examples';
-
-import { Checkbox } from '../Checkbox';
-
-export const ColorCheckbox = () => (
-  <Vertical gap={15}>
-    {['theme.primary', 'theme.secondary', 'theme.error', 'theme.success', 'theme.warning'].map((color) => (
-      <Checkbox key={color} name="name" colorScheme={color} label={color} defaultIsSelected />
-    ))}
-  </Vertical>
-);

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

@@ -1,5 +0,0 @@
-import React from 'react';
-
-import { Checkbox } from '../Checkbox';
-
-export const DefaultCheckbox = () => <Checkbox label="option" />;

package/src/components/Form/Checkbox/examples/DisabledInput.tsx

@@ -1,5 +0,0 @@
-import React from 'react';
-
-import { Checkbox } from '../Checkbox';
-
-export const DisabledCheckbox = () => <Checkbox label="disabled" isDisabled />;

package/src/components/Form/Checkbox/examples/ErrorCheckbox.tsx

@@ -1,5 +0,0 @@
-import React from 'react';
-
-import { Checkbox } from '../Checkbox';
-
-export const ErrorCheckbox = () => <Checkbox id="error" label="Option" name="error" error />;

package/src/components/Form/Checkbox/examples/FormCheckout.tsx

@@ -1,46 +0,0 @@
-import React, { useState } from 'react';
-import { Button } from 'src/components';
-import { Vertical } from 'src/components/Layout/Vertical/examples';
-import { View } from 'src/components/Layout/View/View';
-
-import { Checkbox } from '../Checkbox';
-
-export const FormCheckbox = () => {
-  const [isOnionChecked, setIsOnionChecked] = useState(false);
-  const [isCarrotChecked, setIsCarrotChecked] = useState(false);
-
-  const handleSubmit = (event: any) => {
-    event.preventDefault();
-
-    const selectedVegetables: Array<string> = [];
-    if (isOnionChecked) selectedVegetables.push('onion');
-    if (isCarrotChecked) selectedVegetables.push('carrot');
-    alert(`You selected: ${selectedVegetables.join(', ')}`);
-  };
-  return (
-    <form onSubmit={handleSubmit}>
-      <Vertical gap={10}>
-        <View>Choose your vegetables:</View>
-        <Checkbox
-          id="onion"
-          name="onion"
-          label="onion"
-          value="onion"
-          isChecked={isOnionChecked}
-          onChange={setIsOnionChecked}
-        />
-        <Checkbox
-          id="carrot"
-          name="carrot"
-          label="carrot"
-          value="carrot"
-          isChecked={isCarrotChecked}
-          onChange={setIsCarrotChecked}
-        />
-        <Button type="submit" onClick={handleSubmit}>
-          Submit
-        </Button>
-      </Vertical>
-    </form>
-  );
-};

package/src/components/Form/Checkbox/examples/IconCheckbox.tsx

@@ -1,8 +0,0 @@
-import React from 'react';
-import { EditSvg } from 'src/components/Svg';
-
-import { Checkbox } from '../Checkbox';
-
-export const IconCheckbox = () => (
-  <Checkbox id="child" name="child" colorScheme="theme.error" icon={<EditSvg size={14} />} label="Label" />
-);

package/src/components/Form/Checkbox/examples/IndeterminateCheckbox.tsx

@@ -1,5 +0,0 @@
-import React from 'react';
-
-import { Checkbox } from '../Checkbox';
-
-export const IndeterminateCheckbox = () => <Checkbox id="check" name="checkbox" isIndeterminate label="Select All" />;

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

@@ -1,5 +0,0 @@
-import React from 'react';
-
-import { Checkbox } from '../Checkbox';
-
-export const ReadOnlyCheckbox = () => <Checkbox name="disabled" label="Read Only" isReadOnly defaultIsSelected />;

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

@@ -1,11 +0,0 @@
-import React from 'react';
-import { Checkbox } from 'src/components';
-
-export const ShadowCheckbox = () => (
-  <Checkbox
-    id="shadowCheckbox"
-    name="shadowCheckbox"
-    shadow={{ boxShadow: 'rgb(249, 115, 22) 0px 4px 14px 0px' }}
-    defaultIsSelected
-  />
-);

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

@@ -1,18 +0,0 @@
-import React from 'react';
-import { Vertical } from 'src/components/Layout/Vertical/examples';
-
-import { Checkbox } from '../Checkbox';
-
-export const SizeCheckbox = () => (
-  <Vertical gap={10}>
-    <Checkbox name="sm" size="sm" label="sm" defaultIsSelected />
-    <Checkbox name="md" size="md" label="md" defaultIsSelected />
-    <Checkbox name="lg" size="lg" label="lg" defaultIsSelected />
-    <Checkbox name="xl" size="xl" label="xl" defaultIsSelected />
-    <Checkbox name="2xl" size="2xl" label="2xl" defaultIsSelected />
-    <Checkbox name="3xl" size="3xl" label="3xl" defaultIsSelected />
-    <Checkbox name="4xl" size="4xl" label="4xl" defaultIsSelected />
-    <Checkbox name="5xl" size="5xl" label="5xl" defaultIsSelected />
-    <Checkbox name="6xl" size="6xl" label="6xl" defaultIsSelected />
-  </Vertical>
-);

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

@@ -1,22 +0,0 @@
-import React from 'react';
-
-import { Checkbox } from '../Checkbox';
-
-export const StyledCheckbox = () => (
-  <Checkbox
-    colorScheme="theme.primary"
-    label="Active"
-    styles={{
-      checkbox: {
-        borderRadius: '50%',
-        borderColor: 'theme.primary',
-        borderStyle: 'solid',
-        borderWidth: 1,
-        height: '16px',
-        width: '16px',
-      },
-      label: { color: 'theme.primary' },
-    }}
-    defaultIsSelected
-  />
-);

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

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

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

@@ -1,187 +0,0 @@
-import { CSSProperties } from 'react';
-import { Elevation } from 'src/utils/elevation';
-import { Shadow } from 'app-studio';
-
-import { Country, CountryPickerStyles, Shape, Size, Variant } from './CountryPicker.type';
-
-export interface CountryPickerProps {
-  /**
-   * The identifier for the CountryPicker component.
-   */
-  id?: string;
-  /**
-   * Indicates whether the field has an error.
-   */
-  error?: boolean;
-  /**
-   * The name of the field.
-   */
-  name?: string;
-  /**
-   * The label text for the field.
-   */
-  label?: string;
-  /**
-   * The color scheme that changes the border color on hover of the field.
-   */
-  colorScheme?: string;
-  /**
-   * Additional helper text that provides information about the field.
-   */
-  helperText?: string;
-  /**
-   * A brief text or hint that appears in the field before the user enters any value.
-   */
-  placeholder?: string;
-  /**
-   * The shape that changes the outlines of the CountryPicker.
-   */
-  shape?: Shape;
-  /**
-   * If true, the field will be automatically focused.
-   */
-  isAutoFocus?: boolean;
-  /**
-   * If true, the CountryPicker cannot be edited.
-   */
-  isReadOnly?: boolean;
-  /**
-   * If true, the field will be unusable.
-   */
-  isDisabled?: boolean;
-  /**
-   * Callback function triggered when the CountryPicker loses focus.
-   */
-  onBlur?: (value: any) => void;
-  /**
-   * Callback function triggered when the field value changes.
-   */
-  onChange?: (value: any) => void;
-  /**
-   * CSS styles for the CountryPicker component.
-   */
-  styles?: CountryPickerStyles;
-  /**
-   * The font size of the CountryPicker.
-   */
-  size?: Size;
-  /**
-   * The default value of the input field.
-   */
-  value?: string | number;
-  /**
-   * Changes the style of the input field.
-   */
-  variant?: Variant;
-  /**
-   * Adds a shadow effect to the CountryPicker.
-   */
-  shadow?: Shadow | Elevation | CSSProperties;
-  /**
-   * Other properties that can be passed to the component.
-   */
-  [x: string]: any;
-}
-
-export interface CountryPickerViewProps extends CountryPickerProps {
-  /**
-   * Indicates whether the country picker is currently being hovered.
-   */
-  isHovered?: boolean;
-
-  /**
-   * A function to set the hovered state of the country picker.
-   * @param hovered - The hovered state to set.
-   */
-  setIsHovered?: (hovered: boolean) => void;
-
-  /**
-   * Indicates whether the country picker is focused.
-   */
-  isFocused?: boolean;
-
-  /**
-   * A function to set the focus state of the country picker.
-   * @param focused - The focus state to set.
-   */
-  setIsFocused?: (focused: boolean) => void;
-
-  /**
-   * Indicates the currently selected country.
-   */
-  selected?: string;
-
-  /**
-   * A function to set the selected country.
-   * @param selected - The selected country to set.
-   */
-  setSelected?: (selected: string) => void;
-
-  /**
-   * Indicates whether the country picker should be hidden.
-   */
-  hide?: boolean;
-
-  /**
-   * A function to set the hide state of the country picker.
-   * @param hide - The hide state to set.
-   */
-  setHide?: (hide: boolean) => void;
-
-  /**
-   * Options for the country picker.
-   */
-  newOptions?: Array<Country>;
-
-  /**
-   * A function to set the new options for the country picker.
-   * @param newOptions - The new options to set.
-   */
-  setNewOptions?: (newOptions: Array<Country>) => void;
-}
-
-export interface DropDownProps {
-  /**
-   * To set the height and width of the item list.
-   */
-  size?: Size;
-  /**
-   * Function that will be called when the option is CountryPickered
-   */
-  callback?: Function;
-  /**
-   * List of options
-   */
-  options: Array<Country>;
-  /**
-   * Css styles for the CountryPicker container and label
-   */
-  styles?: CountryPickerStyles;
-  /**
-   * other properties
-   */
-  [x: string]: any;
-}
-
-export interface DropDownItemProps {
-  /**
-   * Function that will be called when the option is clicked
-   */
-  callback?: Function;
-  /**
-   * Option to be displayed
-   */
-  option: string;
-  /**
-   * To set the DropDownItem's fontSize
-   */
-  size?: Size;
-  /**
-   * Css styles
-   */
-  styles?: CountryPickerStyles;
-  /**
-   * other properties
-   */
-  [x: string]: any;
-}

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

@@ -1,28 +0,0 @@
-import React from 'react';
-
-import countryList from '../countries.json';
-
-import { CountryPickerProps } from './CountryPicker.props';
-import { Country } from './CountryPicker.type';
-
-export const useCountryPickerState = ({ placeholder }: CountryPickerProps) => {
-  const [newOptions, setNewOptions] = React.useState<Array<Country>>(countryList);
-  const [selected, setSelected] = React.useState<string>(placeholder ?? countryList[0].name);
-
-  const [hide, setHide] = React.useState(true);
-  const [isFocused, setIsFocused] = React.useState(false);
-  const [isHovered, setIsHovered] = React.useState(false);
-
-  return {
-    hide,
-    setHide,
-    newOptions,
-    setNewOptions,
-    isHovered,
-    setIsHovered,
-    isFocused,
-    setIsFocused,
-    selected,
-    setSelected,
-  };
-};

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

@@ -1,17 +0,0 @@
-import { Size } from './CountryPicker.type';
-
-export const IconSizes: Record<Size, number> = {
-  xs: 8,
-  sm: 10,
-  md: 12,
-  lg: 14,
-  xl: 16,
-};
-
-export const LabelSizes: Record<Size, number> = {
-  xs: 8,
-  sm: 10,
-  md: 12,
-  lg: 14,
-  xl: 16,
-};

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

@@ -1,22 +0,0 @@
-export type CountryPickerStyles = {
-  text?: CSSProperties;
-  icon?: CSSProperties;
-  dropDown?: CSSProperties;
-  box?: CSSProperties;
-  label?: CSSProperties;
-  helperText?: CSSProperties;
-  field?: CSSProperties;
-};
-
-export type Country = {
-  name: string;
-  dial_code: string;
-  emoji: string;
-  code: string;
-};
-
-export type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-
-export type Shape = 'default' | 'sharp' | 'rounded' | 'pillShaped';
-
-export type Variant = 'default' | 'outline' | 'unStyled';