[BUILD]: Apply scalabale arch (#6)

* feat: add @vercel/analytics

* docs: fix mismatch heading

* ci: implement commitlint

* build: add debugging configuration

* refactor: implement scalable arch

.eslintignore

@@ -1,4 +1,5 @@
-# Ignore artifacts:
+.yarn
 .next
 public
 node_modules
+!.storybook

.eslintrc.json

@@ -0,0 +1,21 @@
+{
+  "extends": [
+    "plugin:storybook/recommended",
+    "plugin:cypress/recommended",
+    "next",
+    "next/core-web-vitals",
+    "prettier"
+  ],
+  "rules": {
+    "no-unused-vars": [
+      "warn",
+      {
+        "args": "after-used",
+        "argsIgnorePattern": "^_",
+        "destructuredArrayIgnorePattern": "^_"
+      }
+    ],
+    "no-console": ["error", { "allow": ["info", "warn", "error"] }],
+    "no-alert": "error"
+  }
+}

.husky/commit-msg

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx --no -- commitlint --edit "$1"

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+yarn lint

.husky/pre-push

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+yarn build

.prettierignore

@@ -1,4 +1,5 @@
-# Ignore artifacts:
+.yarn
 .next
 public
 node_modules
+!.storybook

.storybook/main.js

@@ -1,8 +1,7 @@
 module.exports = {
-  stories: [
-    "../components/**/*.stories.mdx",
-    "../components/**/*.stories.@(js|jsx|ts|tsx)",
-  ],
+  stories: ["../**/*.stories.mdx", "../**/*.stories.@(js|jsx|ts|tsx)"],
+  /** Expose public folder to storybook as static */
+  staticDirs: ["../public"],
   addons: [
     "@storybook/addon-links",
     "@storybook/addon-essentials",

.storybook/preview.js

@@ -1,6 +1,31 @@
 import * as NextImage from "next/image";
 import "../styles/globals.css";
 
+const BREAKPOINTS_INT = {
+  xs: 375,
+  sm: 600,
+  md: 900,
+  lg: 1200,
+  xl: 1536,
+};
+
+const customViewports = Object.fromEntries(
+  Object.entries(BREAKPOINTS_INT).map(([key, val], idx) => {
+    console.log(val);
+    return [
+      key,
+      {
+        name: key,
+        styles: {
+          width: `${val}px`,
+          height: `${(idx + 5) * 10}vh`,
+        },
+      },
+    ];
+  })
+);
+
+// Allow Storybook to handle Next's <Image> component
 const OriginalNextImage = NextImage.default;
 
 Object.defineProperty(NextImage, "default", {
@@ -16,4 +41,5 @@ export const parameters = {
       date: /Date$/,
     },
   },
+  viewport: { viewports: customViewports },
 };

.vscode/settings.json

@@ -22,4 +22,4 @@
     "editor.formatOnSave": true
   },
   "typescript.enablePromptUseWorkspaceTsdk": true
-}
+}

README.md

@@ -69,7 +69,7 @@ This is the Trusted Web Activity for the CardusApp project. It is a webapp that
 1. Edit `cors.json`
 2. Run `gcloud storage buckets update gs://BUCKET_NAME --cors-file="cors.json"`
 
-### 🔍 How to Check
+#### 🔍 How to Check
 
 ```bash
 gcloud storage buckets describe gs://BUCKET_NAME --format="default(cors)"

commitlint.config.js

@@ -0,0 +1,50 @@
+// build: Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)
+// ci: Changes to our CI configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs)
+// docs: Documentation only changes
+// feat: A new feature
+// fix: A bug fix
+// perf: A code change that improves performance
+// refactor: A code change that neither fixes a bug nor adds a feature
+// style: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
+// test: Adding missing tests or correcting existing tests
+
+module.exports = {
+  extends: ["@commitlint/config-conventional"],
+  rules: {
+    "body-leading-blank": [1, "always"],
+    "body-max-line-length": [2, "always", 100],
+    "footer-leading-blank": [1, "always"],
+    "footer-max-line-length": [2, "always", 100],
+    "header-max-length": [2, "always", 100],
+    "scope-case": [2, "always", "lower-case"],
+    "subject-case": [
+      2,
+      "never",
+      ["sentence-case", "start-case", "pascal-case", "upper-case"],
+    ],
+    "subject-empty": [2, "never"],
+    "subject-full-stop": [2, "never", "."],
+    "type-case": [2, "always", "lower-case"],
+    "type-empty": [2, "never"],
+    "type-enum": [
+      2,
+      "always",
+      [
+        "build",
+        "chore",
+        "ci",
+        "docs",
+        "feat",
+        "fix",
+        "perf",
+        "refactor",
+        "revert",
+        "style",
+        "test",
+        "translation",
+        "security",
+        "changeset",
+      ],
+    ],
+  },
+};

components/ui/image/add-image.tsx → components/image/add-image.tsx

@@ -10,7 +10,7 @@ type Props = {
 };
 
 const AddImage = ({ className }: Props) => {
-  const [_, setIsWaitingUpload] = useAtom(isWaitingUploadAtom);
+  const [_isWaitingUpload, setIsWaitingUpload] = useAtom(isWaitingUploadAtom);
   const [imageState, setImageState] = useAtom(imageAtom);
 
   /** Index to access imageState Map */
@@ -109,7 +109,7 @@ const AddImage = ({ className }: Props) => {
                         updateImageState("progress", progress);
                       },
                     })
-                    .then((res) => {
+                    .then(() => {
                       updateImageState("status", "uploaded");
                       updateImageState("url", publicUrl);
                     })

components/ui/image/image-preview.tsx → components/image/image-preview.tsx

@@ -1,6 +1,6 @@
 import { XMarkIcon } from "@heroicons/react/24/solid";
 import axios from "axios";
-import Modal from "components/ui/modal";
+import Modal from "components/modal";
 import { useAtom } from "jotai";
 import { IImageAtom, imageAtom } from "lib/atoms";
 import Image from "next/image";

components/layout/auth-layout.tsx → components/layouts/auth-layout.tsx

@@ -1,7 +1,6 @@
-import OnboardingScreen from "components/screen/onboarding";
-import PromptScreen from "components/screen/prompt/prompt-screen";
-import BottomNav from "components/ui/nav/bottom-nav";
-import TopNav from "components/ui/nav/top-nav";
+import TopNav from "components/nav/top-nav";
+import OnboardingScreen from "components/screens/onboarding";
+import PromptScreen from "components/screens/prompt/prompt-screen";
 import Head from "next/head";
 import { ReactNode, useEffect, useState } from "react";
 

components/layout/mobile-layout.tsx → components/layouts/mobile-layout.tsx

@@ -1,6 +1,6 @@
-import PromptScreen from "components/screen/prompt/prompt-screen";
-import BottomNav from "components/ui/nav/bottom-nav";
-import TopNav from "components/ui/nav/top-nav";
+import BottomNav from "components/nav/bottom-nav";
+import TopNav from "components/nav/top-nav";
+import PromptScreen from "components/screens/prompt/prompt-screen";
 import { useAtom } from "jotai";
 import { isLoadingAtom, isMobileAtom } from "lib/atoms";
 import { useSession } from "next-auth/react";

components/ui/nav/bottom-nav/index.tsx → components/nav/bottom-nav/index.tsx

@@ -1,9 +1,9 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import axios from "axios";
-import Button from "components/ui/button";
-import InputField from "components/ui/form/input-field";
-import AddImage from "components/ui/image/add-image";
-import ImagePreview from "components/ui/image/image-preview";
+import Button from "components/button";
+import InputField from "components/form/input-field";
+import AddImage from "components/image/add-image";
+import ImagePreview from "components/image/image-preview";
 import { useAtom } from "jotai";
 import {
   bottomNavAtom,

components/ui/nav/bottom-nav/left-nav.tsx → components/nav/bottom-nav/left-nav.tsx

@@ -4,7 +4,7 @@ import {
   TrashIcon,
 } from "@heroicons/react/24/solid";
 import axios from "axios";
-import Tooltip from "components/ui/tooltip";
+import Tooltip from "components/tooltip";
 import { useAtom } from "jotai";
 import { bottomNavAtom, boxIdAtom, isLoadingAtom } from "lib/atoms";
 import Link from "next/link";
@@ -15,7 +15,7 @@ const LeftNav = () => {
   const router = useRouter();
 
   const [boxId] = useAtom(boxIdAtom);
-  const [_, setIsLoading] = useAtom(isLoadingAtom);
+  const [_isLoading, setIsLoading] = useAtom(isLoadingAtom);
   const [{ currentScreen, midButtonAction }] = useAtom(bottomNavAtom);
 
   const randomTooltipText = () => {

components/ui/nav/bottom-nav/middle-nav.tsx → components/nav/bottom-nav/middle-nav.tsx

@@ -1,5 +1,5 @@
 import { PencilSquareIcon, QrCodeIcon } from "@heroicons/react/24/solid";
-import AddImage from "components/ui/image/add-image";
+import AddImage from "components/image/add-image";
 import { useAtom } from "jotai";
 import { bottomNavAtom, boxIdAtom, midBottomNavAtom } from "lib/atoms";
 import Link from "next/link";

components/ui/nav/bottom-nav/right-nav.tsx → components/nav/bottom-nav/right-nav.tsx

@@ -3,8 +3,8 @@ import {
   QuestionMarkCircleIcon,
   UserCircleIcon,
 } from "@heroicons/react/24/solid";
-import ComponentToPrint from "components/ui/component-to-print";
-import Tooltip from "components/ui/tooltip";
+import ComponentToPrint from "components/component-to-print";
+import Tooltip from "components/tooltip";
 import { useAtom } from "jotai";
 import { bottomNavAtom, boxIdAtom, componentToPrintAtom } from "lib/atoms";
 import useImagePlaceholder from "lib/hooks/use-image-placeholder";

components/ui/quick-button.tsx → components/quick-button.tsx

@@ -3,7 +3,7 @@ import { useAtom } from "jotai";
 import { isHideCreateBoxAtom } from "lib/atoms";
 
 const QuickButton = () => {
-  const [_, setIsHideCreateBox] = useAtom(isHideCreateBoxAtom);
+  const [_ishideCreateBox, setIsHideCreateBox] = useAtom(isHideCreateBoxAtom);
 
   const handleOnClick = () => setIsHideCreateBox(false);
 

components/templates/base/base-template.mocks.ts

@@ -0,0 +1,9 @@
+import { IBaseTemplate } from "./base-template";
+
+const base: IBaseTemplate = {
+  sampleTextProp: "Hello world!",
+};
+
+export const mockBaseTemplateProps = {
+  base,
+};

components/templates/base/base-template.module.css

@@ -0,0 +1,2 @@
+.component {
+}

components/templates/base/base-template.stories.tsx

@@ -0,0 +1,22 @@
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+import BaseTemplate, { IBaseTemplate } from "./base-template";
+import { mockBaseTemplateProps } from "./base-template.mocks";
+
+export default {
+  title: "templates/BaseTemplate",
+  component: BaseTemplate,
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  argTypes: {},
+} as ComponentMeta<typeof BaseTemplate>;
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Template: ComponentStory<typeof BaseTemplate> = (args) => (
+  <BaseTemplate {...args} />
+);
+
+export const Base = Template.bind({});
+// More on args: https://storybook.js.org/docs/react/writing-stories/args
+
+Base.args = {
+  ...mockBaseTemplateProps.base,
+} as IBaseTemplate;

components/templates/base/base-template.tsx

@@ -0,0 +1,11 @@
+import styles from "./base-template.module.css";
+
+export interface IBaseTemplate {
+  sampleTextProp: string;
+}
+
+const BaseTemplate: React.FC<IBaseTemplate> = ({ sampleTextProp }) => {
+  return <div className={styles.container}>{sampleTextProp}</div>;
+};
+
+export default BaseTemplate;

components/ui/templates/base/base-template.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import styles from "./base-template.module.css";
+
+export interface IBaseTemplate {
+  sampleTextProp: string;
+}
+
+const BaseTemplate: React.FC<IBaseTemplate> = ({ sampleTextProp }) => {
+  return <div className={styles.container}>{sampleTextProp}</div>;
+};
+
+export default BaseTemplate;

cors.json

@@ -1,15 +1,8 @@
 [
   {
-    "origin": [
-      "*"
-    ],
-    "method": [
-      "POST",
-      "DELETE"
-    ],
-    "responseHeader": [
-      "*"
-    ],
+    "origin": ["*"],
+    "method": ["POST", "DELETE"],
+    "responseHeader": ["*"],
     "maxAgeSeconds": 3600
   }
 ]

cypress/fixtures/profile.json

@@ -2,4 +2,4 @@
   "id": 8739,
   "name": "Jane",
   "email": "[email protected]"
-}
+}

cypress/fixtures/users.json

@@ -229,4 +229,4 @@
       "bs": "target end-to-end models"
     }
   }
-]
+]

next.config.js

@@ -30,7 +30,7 @@ const nextConfig = withPWA({
     ],
   },
   experimental: {
-    // Required:
+    // Test appDir
     appDir: true,
   },
 });