@app-studio/web 0.1.0

package/package.json

@@ -0,0 +1,153 @@
+{
+  "name": "@app-studio/web",
+  "version": "0.1.0",
+  "main": "dist/index.js",
+  "typings": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "src/components"
+  ],
+  "dependencies": {
+    "app-studio": "^0.1.16",
+    "date-fns": "^2.30.0",
+    "formik": "^2.2.9"
+  },
+  "engines": {
+    "node": ">=10"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "tsdx build ./src/components/index.tsx --tsconfig tsconfig.build.json",
+    "test": "react-scripts test",
+    "test:unwatch": "react-scripts test --watchAll=false",
+    "eject": "react-scripts eject",
+    "storybook": "start-storybook -p 6006 -s public",
+    "build-storybook": "build-storybook -s public",
+    "styleguide": "styleguidist server",
+    "styleguide:build": "styleguidist build",
+    "eslint": "eslint --cache --ext .ts,.tsx",
+    "eslint:fix": "eslint --fix --cache --ext .ts,.tsx",
+    "lint": "npm run eslint && npm run prettier",
+    "lint-staged": "lint-staged",
+    "lint-staged:eslint": "eslint --fix --cache --ext .ts,.tsx",
+    "lint:fix": "npm run eslint:fix && npm run prettier:fix",
+    "docker": "npm run build && docker-compose up",
+    "prettier": "prettier --write \"src/**/*.{js,jsx,ts,tsx, json}\"",
+    "prettier:fix": "prettier --write \"src/**/*.{js,jsx,ts,tsx, json}\"",
+    "prepare": "husky install",
+    "commit:lint": "npm run test:unwatch && npm run lint:fix",
+    "lighthouse": "lighthouse http://localhost:3000 --view --budget-path=./budget.json",
+    "bundle-analyzer": "node ./scripts/analyse.js",
+    "size": "size-limit",
+    "analyze": "size-limit --why"
+  },
+  "config": {
+    "commitizen": {
+      "path": "git-cz"
+    }
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ],
+    "overrides": [
+      {
+        "files": [
+          "**/*.stories.*"
+        ],
+        "rules": {
+          "import/no-anonymous-default-export": "off"
+        }
+      }
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@babel/core": "^7.21.8",
+    "@babel/preset-env": "^7.23.2",
+    "@babel/preset-react": "^7.18.6",
+    "@commitlint/cli": "^17.6.5",
+    "@commitlint/config-conventional": "^17.6.5",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^13.5.0",
+    "@types/jest": "^27.5.2",
+    "@types/node": "^16.18.14",
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "@types/react-test-renderer": "^18.0.0",
+    "@types/styled-components": "^5.1.26",
+    "@typescript-eslint/eslint-plugin": "^5.59.7",
+    "@typescript-eslint/parser": "^5.59.7",
+    "babel-jest": "^29.5.0",
+    "babel-loader": "^9.1.2",
+    "babel-plugin-named-exports-order": "^0.0.2",
+    "babel-plugin-react-require": "^4.0.0",
+    "brotli-webpack-plugin": "^1.1.0",
+    "commitizen": "^4.3.0",
+    "compression": "^1.7.4",
+    "compression-webpack-plugin": "^10.0.0",
+    "core-js": "^3.33.2",
+    "css-loader": "^6.7.3",
+    "dotenv": "^16.1.4",
+    "env-cmd": "^10.1.0",
+    "eslint": "^8.41.0",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-simple-import-sort": "^10.0.0",
+    "express": "^4.18.2",
+    "git-conventional-commits": "^1.4.2",
+    "git-cz": "^4.9.0",
+    "husky": "^8.0.0",
+    "lighthouse": "^10.2.0",
+    "lint-staged": "^13.2.2",
+    "prettier": "^2.8.8",
+    "react": "^18.2.0",
+    "react-docgen-typescript": "^2.2.2",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.11.1",
+    "react-scripts": "5.0.1",
+    "react-styleguidist": "^13.1.1",
+    "react-test-renderer": "^18.2.0",
+    "router": "^1.3.8",
+    "style-loader": "^3.3.2",
+    "styled-components": "^5.3.11",
+    "ts-loader": "^9.4.2",
+    "tsdx": "^0.14.1",
+    "tslib": "^2.3.1",
+    "typescript": "^4.9.5",
+    "web-vitals": "^2.1.4",
+    "webpack": "^5.85.1",
+    "webpack-bundle-analyzer": "^4.8.0",
+    "webpack-cli": "^5.1.3",
+    "zustand": "^4.3.8"
+  },
+  "peerDependencies": {
+    "react": ">= 16",
+    "styled-components": ">= 5"
+  },
+  "size-limit": [
+    {
+      "path": "dist/app-studio-web.esm.cjs.production.min.js",
+      "limit": "10 KB"
+    },
+    {
+      "path": "dist/app-studio-web.esm.esm.js",
+      "limit": "10 KB"
+    }
+  ],
+  "module": "dist/app-studio-web.esm.js"
+}

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

@@ -0,0 +1,79 @@
+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.
+   */
+  onPress?: 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

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

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

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

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

@@ -0,0 +1,116 @@
+import React, { CSSProperties } from 'react';
+import { Element, useTheme } 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',
+  onPress = () => {},
+  ...props
+}) => {
+  const isActive = !(isDisabled || isLoading);
+  const {getColor} = useTheme()
+
+  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}
+    </>
+  );
+
+  console.log({buttonColor, r: getColor(buttonColor)})
+
+  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]}
+      onPress={props.onClick ?? onPress}
+      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

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

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

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

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

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