alicia-design-system 0.1.0

package/.eslintrc.json

@@ -0,0 +1,23 @@
+{
+  "env": { "browser": true, "es2021": true },
+  "extends": [
+    "plugin:react/recommended",
+    "standard-with-typescript",
+    "prettier"
+  ],
+  "overrides": [],
+  "parserOptions": {
+    "ecmaVersion": "latest",
+    "project": ["./tsconfig.json"],
+    "sourceType": "module"
+  },
+  "plugins": ["react"],
+  "rules": {
+    "react/react-in-jsx-scope": "off",
+    "@typescript-eslint/consistent-type-assertions": "off",
+    "@typescript-eslint/strict-boolean-expressions": "off",
+    "@typescript-eslint/consistent-type-definitions": "off",
+    "@typescript-eslint/explicit-function-return-type": "off",
+    "react/display-name": "off"
+  }
+}

package/.github/workflows/deploy-storybook.yml

@@ -0,0 +1,29 @@
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  build:
+    name: Build application
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out repository
+        uses: actions/checkout@v2
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: "17"
+          cache: npm
+
+      - name: 🧰  Install
+        run: npm ci --production-only
+
+      - name: 🧹 Run lint
+        run: npm run lint
+
+      - name: 📜 Deploy to GH pages
+        run: npm run deploy --ci
+        env:
+          GH_TOKEN: ${{ github.actor }}:${{ secrets.GITHUB_TOKEN }}

package/.prettierrc

@@ -0,0 +1,6 @@
+{
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": false
+}

package/.storybook/AliciaTheme.js

@@ -0,0 +1,8 @@
+import { create } from "@storybook/theming";
+import AliciaLogo from "../src/assets/logo/alicia-logo.png";
+
+export default create({
+  base: "light",
+  brandTitle: "Alicia Insurance storybook",
+  brandImage: AliciaLogo,
+});

package/.storybook/main.js

@@ -0,0 +1,26 @@
+module.exports = {
+  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@chakra-ui/storybook-addon",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+    "@storybook/preset-create-react-app",
+    "storybook-addon-styled-component-theme/dist/preset",
+  ],
+  features: {
+    emotionAlias: false,
+  },
+  framework: "@storybook/react",
+  core: {
+    builder: "webpack5",
+  },
+  docsPage: {
+    docs: "automatic",
+  },
+  typescript: {
+    check: false,
+    checkOptions: {},
+    reactDocgen: false,
+ },
+};

package/.storybook/manager.js

@@ -0,0 +1,6 @@
+import { addons } from "@storybook/addons";
+import AliciaTheme from "./AliciaTheme";
+
+addons.setConfig({
+  theme: AliciaTheme,
+});

package/.storybook/preview-head.html

@@ -0,0 +1,20 @@
+<!--  .storybook/preview-body.html -->
+<link rel="preload" as="font" href="https://alicia-fe-assets.s3.eu-central-1.amazonaws.com/untitled-sans-regular.woff2" type="font/woff2" crossorigin="anonymous">
+<link rel="preload" as="font" href="https://alicia-fe-assets.s3.eu-central-1.amazonaws.com/untitled-sans-medium.woff2" type="font/woff2" crossorigin="anonymous">
+
+<style type="text/css">
+    @font-face {
+      font-family: 'UntitledSansRegular';
+      src: url('https://alicia-fe-assets.s3.eu-central-1.amazonaws.com/untitled-sans-regular.woff2') format('woff2'),
+        url('styles/ArmWrestler.woff') format('woff');
+      font-weight: normal;
+      font-style: normal;
+    }
+    @font-face {
+      font-family: 'UntitledSansMedium';
+      src: url('https://alicia-fe-assets.s3.eu-central-1.amazonaws.com/untitled-sans-medium.woff2') format('woff2'),
+        url('styles/ArmWrestler.woff') format('woff');
+      font-weight: normal;
+      font-style: normal;
+    }
+  </style>

package/.storybook/preview.js

@@ -0,0 +1,21 @@
+import { addDecorator } from "@storybook/react";
+import { withThemesProvider } from "storybook-addon-styled-component-theme";
+
+import agosTheme from "../src/styles/theme";
+import { chakraTheme as theme } from "../src/styles/chakraTheme";
+
+addDecorator(withThemesProvider([agosTheme]));
+addDecorator((storyFn) => <div id="modal">{storyFn()}</div>);
+
+export const parameters = {
+  chakra: {
+    theme,
+  },
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+};

package/README.md

@@ -0,0 +1,23 @@
+# Alicia Design System
+
+## Import Storybook into apps
+
+Add the GitHub repo to `package.json` dependencies:
+
+```bash
+// package.json
+...
+"dependencies": {
+"alicia-design-system": "username/repo#branch-name",
+}
+....
+
+```
+
+Run `npm install` and npm will download the project and save it into your `/node_modules/` folder.
+
+After new changes have been pushed to the branch, delete the package from your `node_modules` and run npm install again:
+
+```bash
+npm uninstall alicia-design-system && npm install username/repo#branch-name
+```

package/package.json

@@ -0,0 +1,103 @@
+{
+  "name": "alicia-design-system",
+  "version": "0.1.0",
+  "private": false,
+  "dependencies": {
+    "@chakra-ui/icons": "^2.0.17",
+    "@chakra-ui/react": "^2.4.9",
+    "@emotion/styled": "^11.10.5",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^13.5.0",
+    "@types/jest": "^27.5.2",
+    "@types/node": "^16.18.2",
+    "@types/react": "^18.0.24",
+    "@types/react-dom": "^18.0.8",
+    "body-scroll-lock": "^4.0.0-beta.0",
+    "date-fns": "^2.29.3",
+    "dayjs": "^1.11.6",
+    "framer-motion": "^9.0.1",
+    "lodash": "^4.17.21",
+    "react": "^18.2.0",
+    "react-day-picker": "^8.3.6",
+    "react-dom": "^18.2.0",
+    "react-dropzone": "^14.2.3",
+    "react-hook-form": "^7.38.0",
+    "react-router-dom": "^6.4.2",
+    "react-scripts": "5.0.1",
+    "react-select": "^5.5.7",
+    "react-table": "^7.8.0",
+    "storybook-addon-styled-component-theme": "^2.0.0",
+    "styled-components": "^5.3.6",
+    "web-vitals": "^2.1.4"
+  },
+  "scripts": {
+    "start": "start-storybook -p 6006 -s public",
+    "lint": "eslint ./src --cache",
+    "build": "build-storybook -s public",
+    "deploy": "storybook-to-ghpages",
+    "test": "react-scripts test --setupFiles ./setupFile.js"
+  },
+  "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": {
+    "@chakra-ui/storybook-addon": "^4.0.16",
+    "@storybook/addon-actions": "^6.5.13",
+    "@storybook/addon-essentials": "^6.5.13",
+    "@storybook/addon-interactions": "^6.5.13",
+    "@storybook/addon-links": "^6.5.13",
+    "@storybook/builder-webpack5": "^6.5.16",
+    "@storybook/manager-webpack5": "^6.5.16",
+    "@storybook/node-logger": "^6.5.13",
+    "@storybook/preset-create-react-app": "^4.1.2",
+    "@storybook/react": "^6.5.13",
+    "@storybook/storybook-deployer": "^2.8.16",
+    "@storybook/testing-library": "^0.0.13",
+    "@storybook/testing-react": "^1.3.0",
+    "@types/body-scroll-lock": "^3.1.0",
+    "@types/lodash.debounce": "^4.0.7",
+    "@types/mdx": "^2.0.3",
+    "@types/react-table": "^7.7.12",
+    "@types/styled-components": "^5.1.26",
+    "@typescript-eslint/eslint-plugin": "^5.43.0",
+    "@typescript-eslint/parser": "^5.41.0",
+    "babel-plugin-named-exports-order": "^0.0.2",
+    "eslint": "^8.27.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-config-standard-with-typescript": "^23.0.0",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-n": "^15.5.1",
+    "eslint-plugin-promise": "^6.1.1",
+    "eslint-plugin-react": "^7.31.10",
+    "prettier": "2.7.1",
+    "prop-types": "^15.8.1",
+    "typescript": "^4.9.3",
+    "webpack": "^5.74.0"
+  }
+}

package/public/index.html

@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+    <meta name="theme-color" content="#000000" />
+    <!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript> You need to enable JavaScript to run this app. </noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

package/setupFile.js

@@ -0,0 +1,5 @@
+// setupFile.js - this will run before the tests in jest.
+import { setGlobalConfig } from '@storybook/testing-react';
+// path of your preview.js file
+import * as globalStorybookConfig from './.storybook/preview';
+setGlobalConfig(globalStorybookConfig);

package/src/App.css

@@ -0,0 +1,38 @@
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

package/src/App.test.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import App from './App';
+
+test('renders learn react link', () => {
+  render(<App />);
+  const linkElement = screen.getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});

package/src/App.tsx

@@ -0,0 +1,5 @@
+function App() {
+  return <div className="App">Hello.. Please use npm run storybook</div>;
+}
+
+export default App;

package/src/alicia/common/Buttons/Button.spec.tsx

@@ -0,0 +1,11 @@
+import { render } from "@testing-library/react";
+
+import { Button } from "./index";
+
+describe("Button component testing with testing-library", () => {
+    it("renders without crashing", () => {
+        const component = render(<Button onClick={() => undefined} />);
+
+        expect(component).toBeTruthy();
+    });
+});

package/src/alicia/common/Buttons/Buttons.stories.tsx

@@ -0,0 +1,21 @@
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import { Button } from "./Buttons";
+
+export default {
+  title: "Alicia/Common/Buttons",
+  component: Button,
+  argTypes: {},
+} as ComponentMeta<typeof Button>;
+
+const Template: ComponentStory<typeof Button> = (args) => {
+  return <Button {...args} />;
+};
+
+export const Primary = Template.bind({});
+
+Primary.args  = {
+  children: "Primary",
+  variant: "solid",
+  onChange: () => ({ variant: "primary" }),
+};

package/src/alicia/common/Buttons/Buttons.tsx

@@ -0,0 +1,15 @@
+import { Button as ChakraButton, ButtonProps as ChakraButtonProps} from '@chakra-ui/react'
+
+export const Button =  ( { children , ...rest } : ButtonProps) => {
+
+    return (
+      <>
+        <ChakraButton  w="full"  {...rest}>{children}</ChakraButton>
+      </>
+    );
+  };
+
+
+  interface ButtonProps extends ChakraButtonProps{
+    
+  }

package/src/alicia/common/Buttons/index.ts

@@ -0,0 +1 @@
+export { Button } from "./Buttons";

package/src/alicia/common/Checkbox/Checkbox.stories.tsx

@@ -0,0 +1,31 @@
+import { useEffect, useState } from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { CheckBox } from "./Checkbox";
+
+export default {
+  title: "Alicia/common/Checkbox",
+  component: CheckBox,
+} as ComponentMeta<typeof CheckBox>;
+
+const Template: ComponentStory<typeof CheckBox> = (args) => {
+  const [isChecked, setIsChecked] = useState(args.isActive);
+
+  useEffect(() => {
+    setIsChecked(args.isActive);
+  }, [args.isActive]);
+
+  return (
+    <CheckBox
+      {...args}
+      isActive={isChecked}
+      onChange={() => setIsChecked(!isChecked)}
+    />
+  );
+};
+
+export const Primary = Template.bind({});
+
+Primary.args = {
+  isActive: false,
+  label: "Checkbox",
+};

package/src/alicia/common/Checkbox/Checkbox.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import {
+  Checkbox,
+} from '@chakra-ui/react';
+
+export const CheckBox: React.FC<CheckboxProps> = ({
+  isActive,
+  onChange,
+  label,
+  ...props
+}) => {
+
+  return (
+    <Checkbox {...props} onChange={onChange} isChecked={isActive} variant="primary">{label}</Checkbox>
+  );
+};
+
+export type CheckboxProps = {
+  customClass?: string;
+  isActive?: boolean;
+  label?: string;
+  onChange: () => void;
+};

package/src/alicia/common/Checkbox/index.ts

@@ -0,0 +1 @@
+export { CheckBox } from "./Checkbox";

package/src/alicia/common/DateInput/DateInput.stories.tsx

@@ -0,0 +1,26 @@
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import { DateInput } from "./DateInput";
+
+export default {
+    title: "Alicia/Common/DateInput",
+    component: DateInput,
+    argTypes: {},
+} as ComponentMeta<typeof DateInput>;
+
+const Template: ComponentStory<typeof DateInput> = (args) => {
+    return <DateInput {...args} onDateChange={(e) => console.log(e)} />;
+};
+
+export const Primary = Template.bind({});
+Primary.args = {
+    isRequired: false,
+    title: '',
+    dateString: '',
+    message: '',
+    minDate: { date: '2009-12-12', error: 'Date cannot be older than 2009-12-12' },
+    maxDate: { date: '2010-12-12', error: 'Date cannot be newer than 2010-12-12' },
+    controlName: 'birthdate',
+    infoMessage: ''
+};
+

package/src/alicia/common/DateInput/DateInput.tsx

@@ -0,0 +1,66 @@
+import { FormControl, FormLabel, Input, Text, Tooltip, Flex } from '@chakra-ui/react';
+import { FC, useState, useEffect } from 'react';
+import { differenceInMilliseconds } from 'date-fns';
+import { ReactComponent as InfoIcon } from "assets/vectors/info.svg";
+
+export const DateInput: FC<DateInputProps> = ({ title, dateString, message, isRequired = false, minDate, maxDate, controlName, infoMessage }) => {
+  const [value, setValue] = useState<string>('');
+  const [errorMessage, setErrorMessage] = useState(message);
+
+  const onChange = (item: string) => {
+    setValue(item);
+  };
+
+  useEffect(() => {
+    if (dateString) {
+      setValue(dateString);
+    }
+  }, [dateString]);
+
+  useEffect(() => {
+    const selectedDate = new Date(value);
+    setErrorMessage('');
+    if (minDate) {
+      const minDateToSelect = new Date(minDate.date);
+      const minDifference = differenceInMilliseconds(minDateToSelect, selectedDate);
+      if (minDifference > 0) {
+        setErrorMessage(minDate.error ? minDate.error : 'Selected date cannot be older than ' + minDate.date);
+      }
+    }
+    if (maxDate) {
+      const maxDateToSelect = new Date(maxDate.date);
+      const maxDifference = differenceInMilliseconds(maxDateToSelect, selectedDate);
+      if (maxDifference < 0) {
+        setErrorMessage(maxDate.error ? maxDate.error : 'Selected date cannot be newer than ' + maxDate.date);
+      }
+    }
+  }, [value, minDate, maxDate]);
+
+  return (
+    <FormControl isRequired={isRequired}>
+      {title && (<Flex color='white'><FormLabel htmlFor={controlName} color={errorMessage ? 'error' : 'black'}>{title}</FormLabel>
+        {infoMessage && (<Tooltip bg='white' color="black" label={infoMessage} aria-label='A tooltip' hasArrow ><InfoIcon width={16} /></Tooltip>)}
+      </Flex>)}
+      <Input color={errorMessage ? 'error' : 'black'} placeholder="DD-MM-YYYY" value={value} variant='flushed' id={controlName} name={controlName} type="date" data-date-format="DD MMMM YYYY" onChange={(e) => { onChange(e.target.value); }} />
+      {errorMessage && (<Text fontSize='xs' color="error">{errorMessage}</Text>)}
+    </FormControl>
+  );
+};
+
+type DateInputProps = {
+  title?: string;
+  dateString?: string;
+  onDateChange: (value: string) => void;
+  message?: string;
+  isRequired?: boolean;
+  minDate?: DateProps;
+  maxDate?: DateProps;
+  controlName: string;
+  infoMessage?: string;
+};
+
+type DateProps = {
+  date: string;
+  error: string | null;
+}
+

package/src/alicia/common/FileUpload/FileUpload.stories.tsx

@@ -0,0 +1,26 @@
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { useState } from "react";
+
+import { FileState, FileUpload } from "./FileUpload";
+
+export default {
+  title: "Alicia/Common/FileUpload",
+  component: FileUpload,
+  argTypes: {},
+} as ComponentMeta<typeof FileUpload>;
+
+const Template: ComponentStory<typeof FileUpload> = (args) => {
+  const [files, setFiles] = useState<FileState[]>([]);
+  return <FileUpload {...args} files={files} setFiles={setFiles}/>;
+};
+
+export const Primary = Template.bind({});
+
+Primary.args = {
+  maxFileSize: 25,
+  accept: {
+    'image/*': ['.jpeg', '.jpg', '.png'],
+    'application/pdf': ['.pdf'],
+  },
+  customError: ""
+};