@app-studio/web 0.1.5 → 0.1.6

package/package.json

@@ -1,11 +1,10 @@
 {
   "name": "@app-studio/web",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
   "files": [
-    "dist",
-    "src/components"
+    "dist"
   ],
   "dependencies": {
     "app-studio": "^0.1.16",

package/src/components/Button/Button/Button.props.ts

@@ -1,79 +0,0 @@
-import React, { CSSProperties } from 'react';
-import { Shadow } from 'app-studio';
-import { Elevation } from 'src/utils/elevation';
-
-import { IconPosition, Shape, Size, Variant } from './Button.type';
-
-/**
- * Represents the properties for the Button component.
- */
-export interface ButtonProps {
-  /**
-   * The content to be rendered inside the button.
-   */
-  children?: React.ReactNode;
-  /**
-   * Sets the background color of the button.
-   */
-  colorScheme?: string;
-  /**
-   * Specifies the external URL used when the variant is set to "link".
-   */
-  externalHref?: string;
-  /**
-   * Indicates whether the button is in a loading state.
-   */
-  isLoading?: boolean;
-  /**
-   * The icon component rendered within the button.
-   */
-  icon?: React.ReactNode;
-  /**
-   * Specifies the position of the icon within the button.
-   */
-  iconPosition?: IconPosition;
-  /**
-   * Disables the button if set to true.
-   */
-  isDisabled?: boolean;
-  /**
-   * Adjusts the width of the button to take available space.
-   */
-  isFilled?: boolean;
-  /**
-   * Adjusts the width of the button based on content size.
-   */
-  isAuto?: boolean;
-  /**
-   * Makes the icon container shape rounded if set to true.
-   */
-  isIconRounded?: boolean;
-  /**
-   * The event handler called when the button is clicked or pressed.
-   */
-  onClick?: Function;
-  /**
-   * Specifies the size of the button's text and padding.
-   */
-  size?: Size;
-  /**
-   * Sets a shadow effect applied to the button.
-   */
-  shadow?: Shadow | Elevation | CSSProperties;
-  /**
-   * Specifies the shape of the button's corners.
-   */
-  shape?: Shape;
-  /**
-   * Descriptive label for accessibility (ARIA) purposes.
-   */
-  ariaLabel?: string;
-  /**
-   * Specifies the style variant of the button.
-   */
-  variant?: Variant;
-  /**
-   * Additional properties for the button component.
-   */
-  [x: string]: any;
-}

package/src/components/Button/Button/Button.state.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-
-export const useButtonState = () => {
-  const [isHovered, setIsHovered] = React.useState(false);
-
-  return { isHovered, setIsHovered };
-};

package/src/components/Button/Button/Button.style.ts

@@ -1,95 +0,0 @@
-import { CSSProperties } from 'react';
-
-import { Shape, Size } from './Button.type';
-
-export const ButtonSizes: Record<Size, CSSProperties> = {
-  xs: {
-    width: 79,
-    paddingTop: 8,
-    paddingBottom: 8,
-    paddingLeft: 12,
-    paddingRight: 12,
-    fontWeight: 600,
-    fontSize: 'xs',
-    lineHeight: 16,
-    letterSpacing: 1.25,
-  },
-  sm: {
-    width: 128,
-    paddingTop: 10,
-    paddingBottom: 10,
-    paddingLeft: 16,
-    paddingRight: 16,
-    fontWeight: 600,
-    fontSize: 'sm',
-    lineHeight: 20,
-    letterSpacing: 1.25,
-  },
-  md: {
-    width: 144,
-    paddingTop: 12,
-    paddingBottom: 12,
-    paddingLeft: 18,
-    paddingRight: 18,
-    fontWeight: 600,
-    fontSize: 'md',
-    lineHeight: 24,
-    letterSpacing: 1.25,
-  },
-  lg: {
-    width: 178,
-    paddingTop: 14,
-    paddingBottom: 14,
-    paddingLeft: 22,
-    paddingRight: 22,
-    fontWeight: 600,
-    fontSize: 'lg',
-    lineHeight: 24,
-    letterSpacing: 1.25,
-  },
-  xl: {
-    width: 220,
-    paddingTop: 16,
-    paddingBottom: 16,
-    paddingLeft: 26,
-    paddingRight: 26,
-    fontWeight: 600,
-    fontSize: 'xl',
-    lineHeight: 24,
-    letterSpacing: 1.25,
-  },
-};
-
-export const ButtonShapes: Record<Shape, number | string> = {
-  sharp: 0,
-  rounded: 4,
-  pillShaped: 24,
-};
-
-export const IconSizes: Record<Size, CSSProperties> = {
-  xs: {
-    width: 24,
-    height: 24,
-    padding: 12,
-  },
-  sm: {
-    width: 24,
-    height: 24,
-    padding: 15,
-  },
-  md: {
-    width: 36,
-    height: 36,
-    padding: 15,
-  },
-  lg: {
-    width: 36,
-    height: 36,
-    padding: 18,
-  },
-  xl: {
-    width: 36,
-    height: 36,
-    padding: 24,
-  },
-};

package/src/components/Button/Button/Button.type.d.ts

@@ -1,11 +0,0 @@
-export type BorderWeights = 'light' | 'normal' | 'bold' | 'extrabold' | 'black';
-
-export type Shape = 'sharp' | 'rounded' | 'pillShaped';
-
-export type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-
-export type Loaders = 'spinner' | 'points' | 'points-opacity';
-
-export type IconPosition = 'left' | 'right';
-
-export type Variant = 'filled' | 'outline' | 'link' | 'ghost';

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