@app-studio/web 0.1.0

package/src/components/Button/examples/DefaultButton.tsx

@@ -0,0 +1,4 @@
+import React from 'react';
+import { Button } from 'src/components';
+
+export const DefaultButton = () => <Button onPress={() => alert('Hello, World!')}>Default</Button>;

package/src/components/Button/examples/DisabledButton.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Button } from 'src/components';
+
+export const DisabledButton = () => (
+  <Button
+    onPress={() => {
+      alert('Disabled');
+    }}
+    isDisabled
+  >
+    Disabled
+  </Button>
+);

package/src/components/Button/examples/IconButtons.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Button, Center } from 'src/components';
+import { DustBinSvg } from 'src/components/Svg';
+
+import { Shape } from '../Button/Button.type';
+
+export const IconButtons = () => (
+  <Center gap={15}>
+    <Button icon={<DustBinSvg size={24} />} height={48}>
+      Delete
+    </Button>
+    <Button
+      height={48}
+      icon={<DustBinSvg size={24} />}
+      shape={'pillShaped' as Shape}
+      iconPosition="right"
+      colorScheme="theme.secondary"
+    >
+      Delete
+    </Button>
+    <Button icon={<DustBinSvg size={24} />} colorScheme="theme.primary" isIconRounded isAuto />
+  </Center>
+);

package/src/components/Button/examples/LoadingButtons.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Button, Loading, Vertical } from 'src/components';
+
+export const LoadingButtons = () => (
+  <Vertical gap={15}>
+    <Button isLoading isFilled>
+      {<Loading />}
+    </Button>
+    <Button isLoading isFilled>
+      <Loading
+        type="dotted"
+        styles={{
+          loader: { color: 'color.white' },
+          text: {
+            color: 'color.black',
+          },
+        }}
+      >
+        Loading
+      </Loading>
+    </Button>
+    <Button isLoading isFilled>
+      <Loading type="quarter" textPosition="right" styles={{ loader: { color: 'color.black' }, text: { color: 'color.black' } }}>
+        Submitting
+      </Loading>
+    </Button>
+  </Vertical>
+);

package/src/components/Button/examples/ShadowButton.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Button } from 'src/components';
+
+export const ShadowButton = () => (
+  <Button shadow={{ boxShadow: 'rgb(249, 115, 22) 0px 4px 14px 0px' }}>Click Me</Button>
+);

package/src/components/Button/examples/SizeButtons.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Button, Vertical } from 'src/components';
+
+import { Size } from '../Button/Button.type';
+
+export const ButtonSizes = () => (
+  <Vertical gap={10}>
+    {['xs', 'sm', 'md', 'lg', 'xl'].map((size, index) => (
+      <Button key={index} size={size as Size}>
+        Button
+      </Button>
+    ))}
+    <Button isAuto>Auto Width</Button>
+    <Button isFilled>Fill Width</Button>
+  </Vertical>
+);

package/src/components/Button/examples/VariantButtons.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Button, Vertical } from 'src/components';
+
+import { Variant } from '../Button/Button.type';
+
+export const VariantButtons = () => (
+  <Vertical gap={15}>
+    {['filled', 'outline', 'link', 'ghost'].map((variant, index) => (
+      <Button
+        key={index}
+        externalHref="https://www.npmjs.com/package/app-studio"
+        variant={variant as Variant}
+        colorScheme="theme.primary"
+        isFilled
+      >
+        {variant}
+      </Button>
+    ))}
+  </Vertical>
+);

package/src/components/Button/examples/index.ts

@@ -0,0 +1,9 @@
+export * from 'src/components/Button/examples/BorderedButtons';
+export * from 'src/components/Button/examples/ColoredButtons';
+export * from 'src/components/Button/examples/DefaultButton';
+export * from 'src/components/Button/examples/DisabledButton';
+export * from 'src/components/Button/examples/IconButtons';
+export * from 'src/components/Button/examples/LoadingButtons';
+export * from 'src/components/Button/examples/ShadowButton';
+export * from 'src/components/Button/examples/SizeButtons';
+export * from 'src/components/Button/examples/VariantButtons';

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

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

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

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

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

@@ -0,0 +1,98 @@
+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.grey.500' : 'color.grey.300',
+            borderStyle: 'solid',
+          }),
+      borderRadius: 3,
+      filter: isHovered ? 'brightness(0.9)' : undefined,
+      ...Sizes[size],
+      ...shadow,
+      ...styles['checkbox'],
+    },
+  };
+
+  return (
+    <Label
+      htmlFor={id}
+      as="checkbox"
+      onPress={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

@@ -0,0 +1,128 @@
+### **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

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

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

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

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

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

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

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

@@ -0,0 +1,46 @@
+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" onPress={handleSubmit}>
+          Submit
+        </Button>
+      </Vertical>
+    </form>
+  );
+};

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

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

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

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

@@ -0,0 +1,11 @@
+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
+  />
+);