Redesign UI

.eslintignore

@@ -12,5 +12,4 @@ src/assets
 src/config
 src/serviceWorker.js
 
-/.eslintrc.js
-/jest.config.js
+!.storybook

.eslintrc.js → .eslintrc.json

@@ -1,27 +1,29 @@
-module.exports = {
-  root: true,
-  parser: "@typescript-eslint/parser",
-  plugins: ["@typescript-eslint"],
-  parserOptions: {
-    project: "./tsconfig.json",
+{
+  "root": true,
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["@typescript-eslint"],
+  "parserOptions": {
+    "project": "./tsconfig.json"
   },
-  extends: [
+  "extends": [
     "eslint:recommended",
     "plugin:@typescript-eslint/eslint-recommended",
     "plugin:@typescript-eslint/recommended",
     "plugin:react/recommended",
-    "prettier",
+    "plugin:storybook/recommended",
+    "prettier"
   ],
-  rules: {
+  "rules": {
     "react/jsx-props-no-spreading": 0,
     "import/no-cycle": 0,
     "react/destructuring-assignment": 0,
     "import/prefer-default-export": 0,
-    "max-len": ["error", { code: 120 }],
+    "max-len": ["error", { "code": 120 }],
     "react/button-has-type": 0,
     "react/react-in-jsx-scope": "off",
     "@typescript-eslint/no-explicit-any": "off",
     "@typescript-eslint/ban-ts-comment": "off",
-    "@typescript-eslint/no-unused-vars": 1,
+    "@typescript-eslint/no-unused-vars": 1
   },
-};
+  "ignorePatterns": ["jest.config.js", ".storybook/*"]
+}

.storybook/main.ts

@@ -0,0 +1,23 @@
+import type { StorybookConfig } from "@storybook/react-webpack5";
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/preset-create-react-app",
+    "@storybook/addon-onboarding",
+    "@storybook/addon-interactions",
+    "@storybook/addon-a11y",
+  ],
+  framework: {
+    name: "@storybook/react-webpack5",
+    options: {},
+  },
+  docs: {
+    autodocs: "tag",
+  },
+  staticDirs: ["../public"],
+};
+
+export default config;

.storybook/preview.ts

@@ -0,0 +1,15 @@
+import type { Preview } from "@storybook/react";
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+};
+
+export default preview;

package.json

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "@apollo/client": "^3.8.0",
+    "@sandercamp/ui-components": "^1.0.0",
     "apollo-upload-client": "^14.1.3",
     "chroma-js": "^2.1.0",
     "copy-to-clipboard": "^3.3.1",
@@ -34,7 +35,9 @@
     "eject": "react-scripts eject",
     "lint:check": "eslint ./src --ext .js,.jsx,.ts,.tsx ./",
     "lint:run": "eslint ./src --ext .js,.jsx,.ts,.tsx --fix",
-    "format": "prettier --write './**/*.{js,jsx,ts,tsx,css,md,json}' --config ./.prettierrc"
+    "format": "prettier --write './**/*.{js,jsx,ts,tsx,css,md,json}' --config ./.prettierrc",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -52,6 +55,16 @@
     ]
   },
   "devDependencies": {
+    "@storybook/addon-a11y": "^7.3.2",
+    "@storybook/addon-essentials": "^7.3.2",
+    "@storybook/addon-interactions": "^7.3.2",
+    "@storybook/addon-links": "^7.3.2",
+    "@storybook/addon-onboarding": "^1.0.8",
+    "@storybook/blocks": "^7.3.2",
+    "@storybook/preset-create-react-app": "^7.3.2",
+    "@storybook/react": "^7.3.2",
+    "@storybook/react-webpack5": "^7.3.2",
+    "@storybook/testing-library": "^0.2.0",
     "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/react": "^12.1.5",
     "@testing-library/user-event": "^14.4.3",
@@ -67,18 +80,22 @@
     "@typescript-eslint/eslint-plugin": "^6.3.0",
     "@typescript-eslint/parser": "^6.3.0",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
+    "babel-plugin-named-exports-order": "^0.0.2",
     "enzyme": "^3.11.0",
     "eslint": "^7.1.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-import": "^2.18.2",
     "eslint-plugin-jsx-a11y": "^6.2.3",
     "eslint-plugin-react": "^7.15.1",
     "eslint-plugin-react-hooks": "^1.7.0",
+    "eslint-plugin-storybook": "^0.6.13",
     "jest-environment-jsdom": "^29.6.2",
     "prettier": "^3.0.1",
     "react-responsive": "^9.0.2",
+    "storybook": "^7.3.2",
     "ts-jest": "^29.1.1",
-    "typescript": "^5.1.6"
+    "typescript": "^5.1.6",
+    "webpack": "^5.88.2"
   },
   "resolutions": {
     "@types/react": "17.0.2"

public/index.html

@@ -15,7 +15,9 @@
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

src/components/Circle/Circle.module.scss

@@ -15,7 +15,6 @@
 
 .current {
   color: #ffffff;
-  font-family: Rajdhani, sans-serif;
   font-size: 40px;
   font-weight: bold;
   margin: 0;
@@ -29,7 +28,6 @@
 
 .needed {
   color: #ffffff;
-  font-family: Rajdhani, sans-serif;
   font-size: 18px;
   font-weight: 500;
   margin: 0;

src/components/button/Button.stories.ts

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Button } from "./Button";
+
+const meta = {
+  title: "Kabisa/Button",
+  component: Button,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {};

src/components/button/Button.tsx

@@ -0,0 +1,6 @@
+import React from "react";
+import { Button as KabisaButton } from "@sandercamp/ui-components";
+
+export const Button = () => {
+  return <KabisaButton>Hello there!</KabisaButton>;
+};

src/modules/feed/components/Transaction/Header.module.scss

@@ -8,7 +8,6 @@
   height: 28px;
   width: 23px;
   color: #081721;
-  font-family: Rajdhani, sans-serif;
   font-size: 22px;
   font-weight: 600;
   text-align: right
@@ -33,7 +32,6 @@
   height: 13px;
   width: 48px;
   color: #081721;
-  font-family: Calibri, sans-serif;
   font-size: 11px;
 }
 

src/modules/feed/components/Transaction/Transaction.module.scss

@@ -6,7 +6,6 @@
 .transaction_text {
   margin-top: 16px;
   color: #081721;
-  font-family: Calibri, sans-serif;
   font-size: 14px;
   text-align: left;
 }

src/modules/statistics/Statistics.module.scss

@@ -1,5 +1,4 @@
 .container {
-  font-family: Rajdhani, sans-serif;
   color: #ffffff;
   margin-bottom: 16px;
 }