@app-studio/web 0.1.4 → 0.1.6

package/src/components/Button/Button/Button.view.tsx

@@ -1,113 +0,0 @@
-import React, { CSSProperties } from 'react';
-import { Element } from 'app-studio';
-import { Link } from 'src/components';
-
-import { ButtonProps } from './Button.props';
-import { ButtonShapes, ButtonSizes, IconSizes } from './Button.style';
-import { Variant } from './Button.type';
-
-const ButtonView: React.FC<ButtonProps> = ({
-  icon,
-  shadow,
-  children,
-  ariaLabel,
-  externalHref,
-  isAuto = false,
-  isFilled = false,
-  isIconRounded = false,
-  isLoading = false,
-  isDisabled = false,
-  size = 'md',
-  variant = 'filled',
-  iconPosition = 'left',
-  colorScheme = 'theme.primary',
-  shape = 'rounded',
-  onClick = () => {},
-  ...props
-}) => {
-  const isActive = !(isDisabled || isLoading);
-
-  const defaultNativeProps = { disabled: !isActive };
-
-  const buttonColor = isActive ? colorScheme : 'theme.disabled';
-
-  const ButtonVariants: Record<Variant, CSSProperties> = {
-    filled: {
-      backgroundColor: buttonColor,
-      color: 'color.white',
-    },
-    outline: {
-      backgroundColor: 'transparent',
-      borderWidth: 1,
-      borderStyle: 'solid',
-      borderColor: colorScheme,
-      color: buttonColor,
-    },
-    link: {
-      backgroundColor: 'transparent',
-      border: 'none',
-      color: buttonColor,
-      textDecorationLine: 'underline',
-    },
-    ghost: {
-      backgroundColor: 'transparent',
-      border: 'none',
-      color: buttonColor,
-    },
-  };
-
-  const buttonSizeStyles = ButtonSizes[size];
-
-  const buttonVariant = ButtonVariants[variant];
-
-  const scaleWidth = {
-    width: isAuto ? 'fit-content' : isFilled ? '100%' : buttonSizeStyles.width,
-  };
-
-  const changePadding = {
-    padding: isIconRounded ? IconSizes[size].padding : ButtonSizes[size].padding,
-  };
-
-  const content = (
-    <>
-      {icon && iconPosition === 'left' && !isLoading && icon}
-      {children}
-      {icon && iconPosition === 'right' && !isLoading && icon}
-    </>
-  );
-
-  return (
-    <Element
-      gap={8}
-      as="button"
-      role="button"
-      border="none"
-      color="color.white"
-      display="flex"
-      alignItems="center"
-      justifyContent="center"
-      ariaLabel={ariaLabel}
-      backgroundColor={buttonColor}
-      borderRadius={ButtonShapes[shape]}
-      onClick={props.onClick ?? onClick}
-      cursor={isActive ? 'pointer' : 'default'}
-      {...defaultNativeProps} // set default native html button properties
-      {...buttonSizeStyles} // set default width, paddings and fonts
-      {...buttonVariant} // changes default background color, color and border
-      {...scaleWidth} //changes the actual fixed width when isAuto or isFilled are true
-      {...changePadding} // changes the actual padding when variant equals to circled
-      {...shadow}
-      {...props}
-    >
-      {variant === 'link' && externalHref ? (
-        <Link href={externalHref} textDecorationColor={colorScheme} colorScheme={colorScheme} isExternal>
-          {content}
-        </Link>
-      ) : (
-        content
-      )}
-    </Element>
-  );
-};
-
-export default ButtonView;

package/src/components/Button/Button.md

@@ -1,165 +0,0 @@
-### **Import**
-
-```tsx static
-import { Button } from 'app-studio';
-```
-
-### **Default**
-
-```tsx
-import { Center } from '../Layout/Center/Center';
-
-<Center width="100%">
-  <Button>Push Me</Button>
-</Center>;
-```
-
-### **Disabled**
-
-“isDisabled” makes the button unusable and un-clickable with a “disabled” look.
-
-```tsx
-import { Center } from '../Layout/Center/Center';
-<Center width="100%">
-  <Button isDisabled>Disabled</Button>
-</Center>;
-```
-
-### **Size**
-
-“size” alters the padding, text size, and border of the button. This attribute belongs to the "Sizes" type and has a default value of "md".
-
-```jsx
-import { Vertical } from '../Layout/Vertical/Vertical';
-
-<Vertical gap={10}>
-  {['xs', 'sm', 'md', 'lg', 'xl'].map((size, index) => (
-    <Button key={index} size={size}>
-      {size}
-    </Button>
-  ))}
-  <Button isAuto>Auto Width</Button>
-  <Button isFilled>Full Width</Button>
-</Vertical>;
-```
-
-### **ColorScheme**
-
-“colorScheme” allows you to modify the background color of the button. 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.warning', 'theme.success', 'theme.error'].map((color, index) => (
-    <Button key={index} colorScheme={color} isAuto>
-      {color}
-    </Button>
-  ))}
-</Horizontal>;
-```
-
-### **Shadow**
-
-"shadow" attribute applies a shadow effect to the button.
-
-```tsx
-import { Center } from '../Layout/Center/Center';
-<Center width="100%">
-  <Button shadow={{ boxShadow: 'rgb(249, 115, 22) 0px 4px 14px 0px' }}>Click Me</Button>
-</Center>;
-```
-
-### **Loading**
-
-"isLoading" and "loading" attributes display a loading animation, which indicates that an action is in progress.
-
-```tsx
-import { Loading } from '../Loader/Loader';
-import { Text } from '../Text/Text';
-import { Center } from '../Layout/Center/Center';
-
-<Center width="100%">
-  <Button isLoading>
-    <Loading loaderColor="white" />
-    <Text size="sm">Submitting</Text>
-  </Button>
-</Center>;
-```
-
-### **Variant**
-
-"variant" allows for the customization of the button's styles. The attribute belongs to the "Variants" type and has a default variant of "filled".
-
-```tsx
-import { Horizontal } from '../Layout/Horizontal/Horizontal';
-
-<Horizontal justify="space-evenly" gap={10}>
-  {['filled', 'outline', 'link', 'ghost'].map((variant, index) => (
-    <Button key={index} variant={variant} colorScheme="theme.primary" isAuto>
-      {variant}
-    </Button>
-  ))}
-</Horizontal>;
-```
-
-### **Shape**
-
-“shape” property changes the edges of the button. This property belongs to the "Shapes" type and has a default value of "rounded".
-
-```tsx
-import { Horizontal } from '../Layout/Horizontal/Horizontal';
-
-<Horizontal justify="space-evenly" wrap="nowrap" gap={10}>
-  {['sharp', 'rounded', 'pillShaped'].map((border, index) => (
-    <Button key={index} shape={border} isAuto>
-      {border}
-    </Button>
-  ))}
-</Horizontal>;
-```
-
-### **Icon**
-
-“icon” provides the flexibility to incorporate any desired icon within the button.
-
-```tsx
-import { Center } from '../Layout/Center/Center';
-import { DustBinSvg } from '../Svg/DustBin';
-
-<Center justifyContent="space-evenly">
-  <Button icon={<BsBucket size={24} />} height={48}>
-    Delete
-  </Button>
-  <Button height={48} icon={<DustBinSvg size={24} />} shape={'pillShaped'} iconPosition="right" colorScheme="theme.secondary">
-    Delete
-  </Button>
-  <Button icon={<DustBinSvg size={24} />} colorScheme="color.black" isIconRounded isAuto />
-</Center>;
-```
-
-### Types
-
-#### Sizes
-
-```tsx static
-type ButtonSizes = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-```
-
-#### Variants
-
-```tsx static
-type Variants = 'filled' | 'outline' | 'link' | 'ghost';
-```
-
-#### IconPositions
-
-```tsx static
-type IconPositions = 'left' | 'right';
-```
-
-#### Shapes
-
-```tsx static
-type Shapes = 'sharp' | 'rounded' | 'pillShaped';
-```

package/src/components/Button/Button.tsx

@@ -1,24 +0,0 @@
-import React from 'react';
-
-import { ButtonProps } from './Button/Button.props';
-import { useButtonState } from './Button/Button.state';
-import ButtonView from './Button/Button.view';
-
-const ButtonComponent: React.FC<ButtonProps> = (props) => {
-  const { isHovered, setIsHovered } = useButtonState();
-  const handleHover = () => setIsHovered(!isHovered);
-
-  return (
-    <ButtonView
-      onMouseEnter={handleHover}
-      onMouseLeave={handleHover}
-      filter={isHovered ? 'brightness(0.85)' : 'brightness(1)'}
-      {...props}
-    />
-  );
-};
-
-/**
- * Buttons allow us to trigger an event or an action with a single click.
- */
-export const Button = ButtonComponent;

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

@@ -1,13 +0,0 @@
-import React from 'react';
-import { Button, Horizontal } from 'src/components';
-
-export const ExternalButton = () => (
-  <Horizontal gap={10}>
-    <Button colorScheme="theme.secondary" type="button" autofocus>
-      Button
-    </Button>
-    <Button colorScheme="theme.secondary" type="submit">
-      Button
-    </Button>
-  </Horizontal>
-);

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

@@ -1,14 +0,0 @@
-import React from 'react';
-import { Button, Horizontal } from 'src/components';
-
-import { Shape } from '../Button/Button.type';
-
-export const BorderedButtons = () => (
-  <Horizontal gap={15}>
-    {['sharp', 'rounded', 'pillShaped'].map((border, index) => (
-      <Button key={index} shape={border as Shape} isAuto>
-        {border}
-      </Button>
-    ))}
-  </Horizontal>
-);

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

@@ -1,12 +0,0 @@
-import React from 'react';
-import { Button, Horizontal } from 'src/components';
-
-export const ColoredButtons = () => (
-  <Horizontal gap={10}>
-    {['theme.primary', 'theme.secondary', 'theme.warning', 'theme.success', 'theme.error'].map((color, index) => (
-      <Button key={index} colorScheme={color} isAuto>
-        {color}
-      </Button>
-    ))}
-  </Horizontal>
-);

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

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

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

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

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

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

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

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

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

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

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

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