improve(home): interactive scheme

.eslintrc.js

@@ -4,8 +4,14 @@ module.exports = {
         browser: true,
         es6: true,
     },
-    extends: ["@eslint-kit/patch", "@eslint-kit/base", "@eslint-kit/react", "@eslint-kit/prettier"],
-    parser: "babel-eslint",
+    extends: [
+        "@eslint-kit/patch",
+        "@eslint-kit/base",
+        "@eslint-kit/react",
+        "@eslint-kit/prettier",
+        "@eslint-kit/typescript",
+    ],
+    parser: "@typescript-eslint/parser",
     rules: {
         // Sometime harmful =(
         "react/jsx-props-no-spreading": 0,
@@ -38,7 +44,7 @@ module.exports = {
                     ["@docusaurus", "./node_modules/@docusaurus/core/lib/client/exports"],
                     ["@theme", "./node_modules/@docusaurus/theme-classic/src/theme"],
                 ],
-                extensions: [".js", ".jsx", ".json"],
+                extensions: [".ts", ".tsx", ".js", ".jsx", ".json"],
             },
         },
     },

package.json

@@ -27,18 +27,24 @@
         "@docusaurus/plugin-ideal-image": "2.0.0-beta.8",
         "@docusaurus/preset-classic": "2.0.0-beta.8",
         "@fontsource/overpass": "^4.5.4",
+        "@fontsource/overpass-mono": "^4.5.9",
         "@fontsource/ubuntu": "^4.5.4",
+        "@mdi/js": "^7.0.96",
+        "@mdi/react": "^1.6.1",
         "@mdx-js/react": "^1.6.21",
         "@svgr/webpack": "^5.5.0",
         "clsx": "^1.1.1",
         "docusaurus-plugin-hotjar": "^0.0.2",
         "dotenv": "^10.0.0",
+        "effector": "^22.3.0",
+        "effector-react": "^22.1.6",
         "file-loader": "^6.2.0",
         "js-cookie": "^3.0.1",
         "picocolors": "^1.0.0",
         "react": "^17.0.1",
         "react-cookie-consent": "^6.4.1",
         "react-dom": "^17.0.1",
+        "react-use": "^17.4.0",
         "sha1": "^1.1.1",
         "sharp": "^0.29.3",
         "superstruct": "^0.15.3",
@@ -58,10 +64,14 @@
         ]
     },
     "devDependencies": {
+        "@docusaurus/module-type-aliases": "^2.0.1",
         "@eslint-kit/eslint-config-base": "4.1.0",
         "@eslint-kit/eslint-config-patch": "^1.0.0",
         "@eslint-kit/eslint-config-prettier": "3.0.0",
         "@eslint-kit/eslint-config-react": "^3.0.0",
+        "@eslint-kit/eslint-config-typescript": "^5.2.0",
+        "@tsconfig/docusaurus": "^1.0.6",
+        "@typescript-eslint/parser": "^5.33.0",
         "all-contributors-cli": "^6.20.0",
         "babel-eslint": "10.1.0",
         "docusaurus-plugin-sass": "^0.2.1",
@@ -72,6 +82,7 @@
         "stylelint": "^13.13.1",
         "stylelint-config-recess-order": "^2.4.0",
         "stylelint-config-recommended": "^5.0.0",
-        "stylelint-config-standard": "^22.0.0"
+        "stylelint-config-standard": "^22.0.0",
+        "typescript": "^4.7.4"
     }
 }

src/app/theme.scss

@@ -1,5 +1,6 @@
 @import "@fontsource/overpass/400.css";
 @import "@fontsource/ubuntu/400.css";
+@import "@fontsource/overpass-mono/variable.css";
 
 /* https://docusaurus.io/docs/styling-layout */
 
@@ -41,4 +42,5 @@
     --ifm-color-primary-grad2: #517aed;
     --ifm-font-family-base: 'Ubuntu', system-ui, -apple-system, segoe ui, roboto, ubuntu, cantarell, noto sans, sans-serif, blinkmacsystemfont, 'Segoe UI', helvetica, arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
     --ifm-heading-font-family: 'Overpass', var(--ifm-font-family-base);
+    --ifm-font-family-mono: 'Overpass MonoVariable', ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New", monospace;
 }

src/features/project/index.ts

@@ -0,0 +1,13 @@
+import { mocks } from "./mocks";
+import { scheme } from "./ui/scheme";
+import { createProjectController, ProjectStatefulProvider, useProjectStateful } from "./model";
+
+export const project = {
+    mocks,
+    scheme,
+    model: {
+        createProjectController,
+        ProjectStatefulProvider,
+        useProjectStateful,
+    },
+};

src/features/project/mocks/index.ts

@@ -0,0 +1,5 @@
+import { marketplace } from "./marketplace";
+
+export const mocks = {
+    marketplace,
+};

src/features/project/mocks/marketplace.ts

@@ -0,0 +1,107 @@
+import { projectDecompress } from "./project-decompress";
+
+export const marketplace = projectDecompress({
+    app: {
+        description: "Initializing application logic",
+        dependencies: ["verification", "checkout", "onboarding"],
+    },
+    processes: {
+        description: "Application processes running over pages",
+        slices: {
+            verification: {
+                dependencies: ["auth", "user"],
+            },
+            checkout: {
+                dependencies: ["cart", "user"],
+            },
+            onboarding: {
+                dependencies: ["review-id", "profile", "cart", "user"],
+            },
+        },
+    },
+    pages: {
+        description: "Application pages corresponding to a specific route",
+        slices: {
+            "auth": {
+                dependencies: ["register-form", "login-form", "user"],
+            },
+            "review-id": {
+                dependencies: ["profile-card", "review", "product", "ui"],
+            },
+            "review-post": {
+                dependencies: ["create-review", "review", "ui"],
+            },
+            "feed": {
+                dependencies: ["review-card"],
+            },
+            "profile": {
+                dependencies: ["user", "ui"],
+            },
+            "cart": {
+                dependencies: ["deal-banner", "product", "user"],
+            },
+        },
+    },
+    widgets: {
+        description: "Independent and self-contained blocks for pages",
+        slices: {
+            "register-form": {
+                dependencies: ["create-user", "user", "ui"],
+            },
+            "login-form": {
+                dependencies: ["user", "ui"],
+            },
+            "profile-card": {
+                dependencies: ["user", "ui"],
+            },
+            "review-card": {
+                dependencies: ["review", "product", "ui"],
+            },
+            "deal-banner": {
+                dependencies: ["product", "ui"],
+            },
+        },
+    },
+    features: {
+        description: "Processing of user scenarios",
+        slices: {
+            "create-user": {
+                dependencies: ["user", "ui"],
+            },
+            "create-review": {
+                dependencies: ["review", "ui"],
+            },
+            "search-product": {
+                dependencies: ["product", "ui"],
+            },
+        },
+    },
+    entities: {
+        description: "Business entities that domain logic operates with",
+        slices: {
+            user: {
+                dependencies: ["ui", "api"],
+            },
+            review: {
+                dependencies: ["ui", "api"],
+            },
+            product: {
+                dependencies: ["ui", "api"],
+            },
+        },
+    },
+    shared: {
+        description: "Reused modules, non business specific",
+        slices: {
+            ui: {
+                description: "Application UI kit",
+            },
+            api: {
+                description: "Preconfigured backend API",
+            },
+            config: {
+                description: "Application environment and configuration",
+            },
+        },
+    },
+});

src/features/project/mocks/project-decompress.ts

@@ -0,0 +1,65 @@
+import { LayerData, Project, SliceData, UnitName } from "../model";
+
+type ProjectCompressed = Record<
+    UnitName,
+    {
+        description?: string;
+        dependencies?: Array<UnitName>;
+        slices?: Record<
+            UnitName,
+            {
+                description?: string;
+                dependencies?: Array<UnitName>;
+            }
+        >;
+    }
+>;
+
+export const projectDecompress = (projectCompressed: ProjectCompressed): Project => {
+    // map of units
+
+    const map = {} as Record<UnitName, LayerData | SliceData>;
+
+    Object.entries(projectCompressed).forEach(([layerName, layerData]) => {
+        map[layerName] = {
+            name: layerName,
+            kind: "layer",
+            description: layerData.description ?? null,
+            dependents: [],
+            dependencies: layerData.dependencies ?? [],
+            children: layerData.slices ? Object.keys(layerData.slices) : [],
+        };
+
+        if (layerData.slices) {
+            Object.entries(layerData.slices).forEach(([sliceName, sliceData]) => {
+                map[sliceName] = {
+                    name: sliceName,
+                    kind: "slice",
+                    description: sliceData.description ?? null,
+                    dependents: [],
+                    dependencies: sliceData.dependencies ?? [],
+                    parent: layerName,
+                };
+            });
+        }
+    });
+
+    // back-linking relations
+
+    Object.entries(map).forEach(([unitName, unitData]) => {
+        unitData.dependencies.forEach((dependencyName) => {
+            map[dependencyName].dependents.push(unitName);
+        });
+    });
+
+    // list of units
+
+    const list = Object.entries(map).map(([unitName, unitData]) => unitData);
+
+    // result
+
+    return {
+        unitsList: list,
+        unitsMap: map,
+    };
+};

src/features/project/model.tsx

@@ -0,0 +1,114 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+
+import React, { createContext, FunctionComponent, ReactNode, useContext } from "react";
+import { useStore } from "effector-react";
+import { createEvent, createStore, sample, Store } from "effector";
+
+export type UnitName = string;
+
+export interface UnitData {
+    name: UnitName;
+    kind: "layer" | "slice";
+    description: string | null;
+    dependents: Array<UnitName>;
+    dependencies: Array<UnitName>;
+}
+
+export interface LayerData extends UnitData {
+    kind: "layer";
+    children: Array<UnitName>;
+}
+
+export interface SliceData extends UnitData {
+    kind: "slice";
+    parent: UnitName;
+}
+
+export interface Project {
+    unitsList: Array<LayerData | SliceData>;
+    unitsMap: Record<UnitName, LayerData | SliceData>;
+}
+
+// controller
+
+export interface ProjectStatefulController {
+    unitsList: Store<Project["unitsList"]>;
+    unitsMap: Store<Project["unitsMap"]>;
+    unitSelected: Store<LayerData | SliceData | null>;
+    unitHighlighted: Store<LayerData | SliceData | null>;
+    setUnitSelected: (unit: UnitName | null) => void;
+    setUnitHighlighted: (unit: UnitName | null) => void;
+}
+
+export const createProjectController = (project: Project): ProjectStatefulController => {
+    const unitsList = createStore(project.unitsList);
+    const unitsMap = createStore(project.unitsMap);
+
+    const unitSelected = createStore<LayerData | SliceData | null>(null);
+    const setUnitSelected = createEvent<UnitName | null>();
+    sample({
+        clock: setUnitSelected,
+        source: { unitsMap, unitSelected },
+        fn: ({ unitsMap, unitSelected }, payload) =>
+            payload ? unitsMap[payload] ?? unitSelected : null,
+        target: unitSelected,
+    });
+
+    const unitHighlighted = createStore<LayerData | SliceData | null>(null);
+    const setUnitHighlighted = createEvent<UnitName | null>();
+    sample({
+        clock: setUnitHighlighted,
+        source: { unitsMap, unitHighlighted },
+        fn: ({ unitsMap, unitHighlighted }, payload) =>
+            payload ? unitsMap[payload] ?? unitHighlighted : null,
+        target: unitHighlighted,
+    });
+
+    return {
+        unitsList,
+        unitsMap,
+        unitSelected,
+        setUnitSelected,
+        unitHighlighted,
+        setUnitHighlighted,
+    };
+};
+
+// context
+
+export interface ProjectStateful {
+    unitsList: Project["unitsList"];
+    unitsMap: Project["unitsMap"];
+    unitSelected: LayerData | SliceData | null;
+    setUnitSelected: (unit: UnitName | null) => void;
+    unitHighlighted: LayerData | SliceData | null;
+    setUnitHighlighted: (unit: UnitName | null) => void;
+}
+
+const projectStatefulContext = createContext<ProjectStateful | null>(null);
+
+export const ProjectStatefulProvider: FunctionComponent<{
+    projectController?: ProjectStatefulController;
+    children?: ReactNode;
+}> = ({ projectController, children }) => {
+    return (
+        <projectStatefulContext.Provider
+            value={
+                projectController
+                    ? {
+                          unitsList: useStore(projectController.unitsList),
+                          unitsMap: useStore(projectController.unitsMap),
+                          unitSelected: useStore(projectController.unitSelected),
+                          unitHighlighted: useStore(projectController.unitHighlighted),
+                          setUnitSelected: projectController.setUnitSelected,
+                          setUnitHighlighted: projectController.setUnitHighlighted,
+                      }
+                    : null
+            }
+        >
+            {children}
+        </projectStatefulContext.Provider>
+    );
+};
+
+export const useProjectStateful = () => useContext(projectStatefulContext);