@app-studio/web 0.1.5 → 0.1.6

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

@@ -1,118 +0,0 @@
-import React, { CSSProperties } from 'react';
-import { Elevation } from 'src/utils/elevation';
-import { Shadow } from 'app-studio';
-
-import { CheckboxStyles, Size } from './Checkbox.type';
-
-/**
- * Represents the properties for a checkbox component.
- */
-export interface CheckboxProps {
-  /**
-   * The identifier for the checkbox.
-   */
-  id?: string;
-
-  /**
-   * Custom icon to be displayed when the checkbox is checked.
-   */
-  icon?: React.ReactNode;
-
-  /**
-   * Indicates whether the checkbox has an error.
-   */
-  error?: boolean;
-
-  /**
-   * The name of the checkbox element.
-   */
-  name?: string;
-
-  /**
-   * The label of the checkbox.
-   */
-  label?: string;
-
-  /**
-   * Changes the background color of the checkbox.
-   */
-  colorScheme?: string;
-
-  /**
-   * Give control on the selected state of the checkbox component.
-   */
-  isChecked?: boolean;
-  /**
-   * Allows you to set the initial state of the checkbox without controlling its value
-   */
-  defaultIsSelected?: boolean;
-
-  /**
-   * If true, the checkbox cannot be interacted with.
-   */
-  isReadOnly?: boolean;
-
-  /**
-   * If true, the checkbox is disabled and cannot be selected.
-   */
-  isDisabled?: boolean;
-
-  /**
-   * Indicates that the checkbox is neither checked nor unchecked.
-   */
-  isIndeterminate?: boolean;
-
-  /**
-   * Handler function called when the controlled checkbox value changes.
-   */
-  onChange?: Function;
-
-  /**
-   * Handler function called when the checkbox value changes on iOS and Android devices.
-   */
-  onValueChange?: Function;
-
-  /**
-   * CSS styles
-   */
-  styles?: CheckboxStyles;
-
-  /**
-   * Sets the height and width of the checkbox.
-   */
-  size?: Size;
-
-  /**
-   * Sets a shadow effect for the checkbox.
-   */
-  shadow?: Shadow | Elevation | CSSProperties;
-
-  /**
-   * Other additional properties.
-   */
-  [x: string]: any;
-}
-
-export interface CheckboxViewProps extends CheckboxProps {
-  /**
-   * Indicates whether the checkbox is currently being hovered.
-   */
-  isHovered?: boolean;
-
-  /**
-   * A function to set the hovered state of the checkbox.
-   * @param hovered - The hovered state to set.
-   */
-  setIsHovered?: (hovered: boolean) => void;
-
-  /**
-   * Indicates whether the checkbox is selected/checked.
-   */
-  isChecked?: boolean;
-
-  /**
-   * A function to set the selected state of the checkbox.
-   * @param selected - The selected state to set.
-   */
-  setIsChecked?: (selected: boolean) => void;
-}

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

@@ -1,15 +0,0 @@
-import React from 'react';
-
-import { CheckboxProps } from './Checkbox.props';
-
-export const useCheckboxState = ({ defaultIsSelected = false }: CheckboxProps) => {
-  const [isHovered, setIsHovered] = React.useState(false);
-  const [isSelected, setIsSelected] = React.useState<boolean>(defaultIsSelected);
-
-  return {
-    isHovered,
-    setIsHovered,
-    isSelected,
-    setIsSelected,
-  };
-};

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

@@ -1,29 +0,0 @@
-import { CSSProperties } from 'react';
-
-import { Size } from './Checkbox.type';
-
-export const Sizes: Record<Size, CSSProperties> = {
-  xs: { height: 8, width: 8 },
-  sm: { height: 12, width: 12 },
-  md: { height: 18, width: 18 },
-  lg: { height: 24, width: 24 },
-  xl: { height: 30, width: 30 },
-  '2xl': { height: 36, width: 36 },
-  '3xl': { height: 42, width: 42 },
-  '4xl': { height: 48, width: 48 },
-  '5xl': { height: 54, width: 54 },
-  '6xl': { height: 60, width: 60 },
-};
-
-export const IconSizes: Record<Size, number> = {
-  xs: 6,
-  sm: 12,
-  md: 18,
-  lg: 24,
-  xl: 30,
-  '2xl': 36,
-  '3xl': 42,
-  '4xl': 48,
-  '5xl': 54,
-  '6xl': 60,
-};

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

@@ -1,8 +0,0 @@
-export type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl';
-
-export type CheckboxStyles = {
-  checkbox?: CSSProperties;
-  label?: CSSProperties;
-};
-
-export type Variant = 'selected' | 'unselected' | 'indeterminate';

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';