feat(components): Project set-up

- Set-up project dependencies

Use Atomic Design architecture for components
- Add basic elements (atoms)
- Add sample widgets (molecules)

Author: booleanhunter

.storybook/main.js

@@ -0,0 +1,12 @@
+module.exports = {
+  "stories": [
+    "../src/**/*.stories.mdx",
+    "../src/**/*.stories.@(js|jsx|ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-controls",
+    "@storybook/preset-create-react-app"
+  ]
+}

.storybook/preview.js

@@ -0,0 +1,4 @@
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+}

package.json

@@ -10,8 +10,10 @@
     "@types/node": "^12.0.0",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
+    "antd": "^4.12.3",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "react-router": "^5.2.0",
     "react-scripts": "4.0.2",
     "typescript": "^4.1.2",
     "web-vitals": "^1.0.1"
@@ -20,7 +22,9 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "storybook": "start-storybook -p 6006 -s public",
+    "build-storybook": "build-storybook -s public"
   },
   "eslintConfig": {
     "extends": [
@@ -39,5 +43,14 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@storybook/addon-actions": "^6.1.18",
+    "@storybook/addon-controls": "^6.1.18",
+    "@storybook/addon-essentials": "^6.1.18",
+    "@storybook/addon-links": "^6.1.18",
+    "@storybook/node-logger": "^6.1.18",
+    "@storybook/preset-create-react-app": "^3.1.6",
+    "@storybook/react": "^6.1.18"
   }
 }

src/App.tsx

@@ -1,23 +1,11 @@
-import React from 'react';
 import logo from './logo.svg';
 import './App.css';
 
 function App() {
   return (
     <div className="App">
       <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
+        User Analytics
       </header>
     </div>
   );

src/components/elements/Button/index.stories.tsx

@@ -0,0 +1,38 @@
+import { action } from '@storybook/addon-actions';
+import { Story } from '@storybook/react/types-6-0';
+
+import Button, { ButtonProps } from './index';
+
+export default {
+    title: 'Components/Elements/Button',
+    component: Button,
+    argTypes: {
+        type: {
+            control: {
+                type: 'select',
+                options: [
+                    "default",
+                    "primary",
+                    "ghost",
+                    "dashed",
+                ],
+            },
+        },
+    },
+};
+
+const Template: Story<ButtonProps> = (args) => <Button {...args} />;
+
+export const Primary = Template.bind({});
+
+Primary.args = {
+    type: "primary" as ButtonProps["type"],
+    label: "I am a button",
+};
+
+export const Ghost = Template.bind({});
+
+Ghost.args = {
+    type: "ghost",
+    label: "I am a ghost button"
+};

src/components/elements/Button/index.tsx

@@ -0,0 +1,25 @@
+import { useState, useEffect } from 'react';
+import {
+    Button as AntButton,
+    ButtonProps as AntButtonProps,
+} from 'antd';
+
+import 'antd/lib/button/style/css';
+
+export interface ButtonProps extends AntButtonProps {
+    label: string;
+}
+
+function Button(props: ButtonProps) {
+    const {label, ...rest} = props;
+
+    return (
+        <AntButton
+            {...rest}
+        >
+            {props.label}
+        </AntButton>
+    )
+}
+
+export default Button;

src/components/elements/Header/index.stories.tsx

@@ -0,0 +1,18 @@
+import { action } from '@storybook/addon-actions';
+import { Story } from '@storybook/react/types-6-0';
+
+import Header, { HeaderProps } from './index';
+
+export default {
+    title: 'Components/Elements/Header',
+    component: Header,
+};
+
+const Template: Story<HeaderProps> = (args) => <Header {...args} />;
+
+export const Primary = Template.bind({});
+
+Primary.args = {
+    title: "I am a Header",
+    subTitle: "I am a subtitle",
+};

src/components/elements/Header/index.tsx

@@ -0,0 +1,19 @@
+import { useState, useEffect } from 'react';
+import { PageHeader, PageHeaderProps } from 'antd';
+
+import 'antd/lib/page-header/style/css';
+
+export interface HeaderProps extends PageHeaderProps {
+
+}
+
+function Header(props: HeaderProps) {
+
+    return (
+        <PageHeader
+            {...props}
+        />
+    );
+}
+
+export default Header;

src/components/elements/Input/index.stories.tsx

@@ -0,0 +1,31 @@
+import { action } from '@storybook/addon-actions';
+import { Story } from '@storybook/react/types-6-0';
+
+import Input, { InputProps } from './index';
+
+export default {
+    title: 'Components/Elements/Input',
+    component: Input,
+    argTypes: {
+        size: {
+            control: {
+                type: 'select',
+                options: [
+                    "small",
+                    "default",
+                    "large",
+                ],
+            },
+        },
+    },
+};
+
+const Template: Story<InputProps> = (args) => <Input {...args} />;
+
+export const Default = Template.bind({});
+
+Default.args = {
+    value: "",
+    placeholder: "I am a placeholder",
+    size: "default" as InputProps["size"],
+};

src/components/elements/Input/index.tsx

@@ -0,0 +1,19 @@
+import { useState, useEffect } from 'react';
+import { Input as AntInput, InputProps as AntInputProps } from 'antd';
+
+import 'antd/lib/input/style/css';
+
+export interface InputProps extends AntInputProps {
+
+}
+
+function Input(props: InputProps) {
+
+    return (
+        <AntInput
+            {...props}
+        />
+    );
+}
+
+export default Input;