Format configuration files and add Storybook support (#35)

This pull request includes various commits that format configuration
files for consistency and readability. It also adds support for
Storybook configuration in the client app, including the initialization
of Storybook configuration files and the addition of necessary
dependencies. These changes enhance the development experience with
stories and improve UI component testing and documentation.

.gitignore

@@ -52,3 +52,5 @@ apps/server/src/client
 
 # Ignored for testing
 .aigraphr
+
+storybook-static

.prettierrc

@@ -7,5 +7,17 @@
     "trailingComma": "none",
     "arrowParens": "always",
     "jsxSingleQuote": false,
-    "jsxBracketSameLine": false
+    "jsxBracketSameLine": false,
+    "overrides": [
+        {
+            "files": [
+                "*.json",
+                "*.yaml",
+                "*.yml"
+            ],
+            "options": {
+                "tabWidth": 2
+            }
+        }
+    ]
 }

.vscode/extensions.json

@@ -1,8 +1,8 @@
 {
-  "recommendations": [
-    "nrwl.angular-console",
-    "esbenp.prettier-vscode",
-    "ms-playwright.playwright",
-    "firsttris.vscode-jest-runner"
-  ]
+    "recommendations": [
+        "nrwl.angular-console",
+        "esbenp.prettier-vscode",
+        "ms-playwright.playwright",
+        "firsttris.vscode-jest-runner"
+    ]
 }

apps/client-e2e/.eslintrc.json

@@ -1,22 +1,22 @@
 {
-    "extends": ["plugin:playwright/recommended", "../../.eslintrc.json"],
-    "ignorePatterns": ["!**/*"],
-    "overrides": [
-        {
-            "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
-            "rules": {}
-        },
-        {
-            "files": ["*.ts", "*.tsx"],
-            "rules": {}
-        },
-        {
-            "files": ["*.js", "*.jsx"],
-            "rules": {}
-        },
-        {
-            "files": ["src/**/*.{ts,js,tsx,jsx}"],
-            "rules": {}
-        }
-    ]
+  "extends": ["plugin:playwright/recommended", "../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["src/**/*.{ts,js,tsx,jsx}"],
+      "rules": {}
+    }
+  ]
 }

apps/client-e2e/project.json

@@ -1,9 +1,9 @@
 {
-    "name": "client-e2e",
-    "$schema": "../../node_modules/nx/schemas/project-schema.json",
-    "projectType": "application",
-    "sourceRoot": "apps/client-e2e/src",
-    "implicitDependencies": ["client"],
-    "// targets": "to see all targets run: nx show project client-e2e --web",
-    "targets": {}
+  "name": "client-e2e",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "projectType": "application",
+  "sourceRoot": "apps/client-e2e/src",
+  "implicitDependencies": ["client"],
+  "// targets": "to see all targets run: nx show project client-e2e --web",
+  "targets": {}
 }

apps/client-e2e/tsconfig.json

@@ -1,19 +1,19 @@
 {
-    "extends": "../../tsconfig.base.json",
-    "compilerOptions": {
-        "allowJs": true,
-        "outDir": "../../dist/out-tsc",
-        "module": "commonjs",
-        "sourceMap": false
-    },
-    "include": [
-        "**/*.ts",
-        "**/*.js",
-        "playwright.config.ts",
-        "src/**/*.spec.ts",
-        "src/**/*.spec.js",
-        "src/**/*.test.ts",
-        "src/**/*.test.js",
-        "src/**/*.d.ts"
-    ]
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "allowJs": true,
+    "outDir": "../../dist/out-tsc",
+    "module": "commonjs",
+    "sourceMap": false
+  },
+  "include": [
+    "**/*.ts",
+    "**/*.js",
+    "playwright.config.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.spec.js",
+    "src/**/*.test.ts",
+    "src/**/*.test.js",
+    "src/**/*.d.ts"
+  ]
 }

apps/client/.eslintrc.json

@@ -1,34 +1,31 @@
 {
-    "extends": [
-        "plugin:@nx/react-typescript",
-        "next",
-        "next/core-web-vitals",
-        "../../.eslintrc.json"
-    ],
-    "ignorePatterns": ["!**/*", ".next/**/*"],
-    "overrides": [
-        {
-            "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
-            "rules": {
-                "@next/next/no-html-link-for-pages": [
-                    "error",
-                    "apps/client/pages"
-                ]
-            }
-        },
-        {
-            "files": ["*.ts", "*.tsx"],
-            "rules": {}
-        },
-        {
-            "files": ["*.js", "*.jsx"],
-            "rules": {}
-        },
-        {
-            "files": ["*.spec.ts", "*.spec.tsx", "*.spec.js", "*.spec.jsx"],
-            "env": {
-                "jest": true
-            }
-        }
-    ]
+  "extends": [
+    "plugin:@nx/react-typescript",
+    "next",
+    "next/core-web-vitals",
+    "../../.eslintrc.json"
+  ],
+  "ignorePatterns": ["!**/*", ".next/**/*", "storybook-static"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {
+        "@next/next/no-html-link-for-pages": ["error", "apps/client/pages"]
+      }
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.spec.ts", "*.spec.tsx", "*.spec.js", "*.spec.jsx"],
+      "env": {
+        "jest": true
+      }
+    }
+  ]
 }

apps/client/.storybook/decorators/AppDecorator.tsx

@@ -0,0 +1,13 @@
+import {ReactRenderer} from '@storybook/react';
+import {DecoratorFunction} from '@storybook/types';
+import {AppProvider} from '../../src/components/app/AppProvider';
+
+export const AppDecorator =
+    // eslint-disable-next-line react/display-name
+    (): DecoratorFunction<ReactRenderer> => (Story, context) => {
+        return (
+            <AppProvider>
+                <Story />
+            </AppProvider>
+        );
+    };

apps/client/.storybook/main.ts

@@ -0,0 +1,16 @@
+import type {StorybookConfig} from '@storybook/nextjs';
+
+const config: StorybookConfig = {
+    stories: ['../**/*.stories.tsx'],
+    addons: ['@storybook/addon-essentials', '@storybook/addon-interactions'],
+    framework: {
+        name: '@storybook/nextjs',
+        options: {}
+    }
+};
+
+export default config;
+
+// To customize your webpack configuration you can use the webpackFinal field.
+// Check https://storybook.js.org/docs/react/builders/webpack#extending-storybooks-webpack-config
+// and https://nx.dev/recipes/storybook/custom-builder-configs

apps/client/.storybook/preview.ts

@@ -0,0 +1,6 @@
+import {ReactRenderer} from '@storybook/react';
+import {DecoratorFunction} from '@storybook/types';
+import {AppDecorator} from './decorators/AppDecorator';
+import './../app/global.css';
+
+export const decorators: DecoratorFunction<ReactRenderer>[] = [AppDecorator()];

apps/client/app/global.css

@@ -1,4 +1,4 @@
-@import '../../../node_modules/@mantine/core/styles.css';
+@import '@mantine/core/styles.css';
 
 @tailwind base;
 @tailwind components;

apps/client/app/layout.tsx

@@ -1,7 +1,7 @@
 import './global.css';
-import {ColorSchemeScript, MantineProvider} from '@mantine/core';
+import {ColorSchemeScript} from '@mantine/core';
 import {FC, PropsWithChildren} from 'react';
-import {mantineTheme} from '../src/mantine-theme';
+import {AppProvider} from '../src/components/app/AppProvider';
 
 export const metadata = {
     title: 'Welcome to website',
@@ -20,9 +20,7 @@ const Layout: FC<PropsWithChildren> = ({children}) => {
                 <ColorSchemeScript />
             </head>
             <body>
-                <MantineProvider theme={mantineTheme}>
-                    {children}
-                </MantineProvider>
+                <AppProvider>{children}</AppProvider>
             </body>
         </html>
     );

apps/client/app/page.stories.tsx

@@ -0,0 +1,14 @@
+import {Meta, StoryObj} from '@storybook/react';
+import Index from './page';
+
+const meta = {
+    title: 'Pages/Home',
+    component: Index,
+    args: {}
+} satisfies Meta<typeof Index>;
+
+export default meta;
+
+export const Home = {
+    render: (props) => <Index {...props} />
+} satisfies StoryObj<typeof meta>;

apps/client/app/page.tsx

@@ -1,9 +1,9 @@
 import {FC} from 'react';
-import {Faq} from '../src/components/Faq';
-import {Features} from '../src/components/Features';
-import {Footer} from '../src/components/Footer';
-import {Header} from '../src/components/Header';
-import {Hero} from '../src/components/Hero';
+import {Faq} from '../src/components/home/Faq';
+import {Features} from '../src/components/home/Features';
+import {Footer} from '../src/components/home/Footer';
+import {Header} from '../src/components/home/Header';
+import {Hero} from '../src/components/home/Hero';
 
 const Index: FC = () => {
     return (

apps/client/jest.config.ts

@@ -4,9 +4,9 @@ export default {
     preset: '../../jest.preset.js',
     transform: {
         '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': '@nx/react/plugins/jest',
-        '^.+\\.[tj]sx?$': ['babel-jest', { presets: ['@nx/next/babel'] }]
+        '^.+\\.[tj]sx?$': ['babel-jest', {presets: ['@nx/next/babel']}]
     },
     moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
     coverageDirectory: '../../coverage/apps/client',
-    setupFilesAfterEnv: ['./apps/client/jest.setup.ts']
+    setupFilesAfterEnv: ['./jest.setup.ts']
 };

apps/client/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "client",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT"
+}

apps/client/project.json

@@ -1,9 +1,9 @@
 {
-    "name": "client",
-    "$schema": "../../node_modules/nx/schemas/project-schema.json",
-    "sourceRoot": "apps/client",
-    "projectType": "application",
-    "tags": [],
-    "// targets": "to see all targets run: nx show project website --web",
-    "targets": {}
+  "name": "client",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "apps/client",
+  "projectType": "application",
+  "tags": [],
+  "// targets": "to see all targets run: nx show project website --web",
+  "targets": {}
 }

apps/client/specs/index.spec.tsx

@@ -2,7 +2,7 @@ import {MantineProvider} from '@mantine/core';
 import {render as testingLibraryRender} from '@testing-library/react';
 import React from 'react';
 import Page from '../app/page';
-import {mantineTheme} from '../src/mantine-theme';
+import {mantineTheme} from '../src/configs/mantine-theme';
 
 function render(ui: React.ReactNode) {
     return testingLibraryRender(<>{ui}</>, {

apps/client/src/components/app/AppProvider.tsx

@@ -0,0 +1,9 @@
+'use client';
+
+import {MantineProvider} from '@mantine/core';
+import {FC, PropsWithChildren} from 'react';
+import {mantineTheme} from '../../configs/mantine-theme';
+
+export const AppProvider: FC<PropsWithChildren> = ({children}) => {
+    return <MantineProvider theme={mantineTheme}>{children}</MantineProvider>;
+};

apps/client/src/components/home/Faq.stories.tsx

@@ -0,0 +1,14 @@
+import {Meta, StoryObj} from '@storybook/react';
+import {Faq as Component} from './Faq';
+
+const meta = {
+    title: 'Components/Home/Faq',
+    component: Component,
+    args: {}
+} satisfies Meta<typeof Component>;
+
+export default meta;
+
+export const Faq = {
+    render: (props) => <Component {...props} />
+} satisfies StoryObj<typeof meta>;

apps/client/src/components/home/Features.stories.tsx

@@ -0,0 +1,14 @@
+import {Meta, StoryObj} from '@storybook/react';
+import {Features as Component} from './Features';
+
+const meta = {
+    title: 'Components/Home/Features',
+    component: Component,
+    args: {}
+} satisfies Meta<typeof Component>;
+
+export default meta;
+
+export const Features = {
+    render: (props) => <Component {...props} />
+} satisfies StoryObj<typeof meta>;

apps/client/src/components/home/Footer.stories.tsx

@@ -0,0 +1,14 @@
+import {Meta, StoryObj} from '@storybook/react';
+import {Footer as Component} from './Footer';
+
+const meta = {
+    title: 'Components/Home/Footer',
+    component: Component,
+    args: {}
+} satisfies Meta<typeof Component>;
+
+export default meta;
+
+export const Footer = {
+    render: (props) => <Component {...props} />
+} satisfies StoryObj<typeof meta>;