feat: add storybook and animated planet component

.github/workflows/checks.yml

@@ -27,3 +27,69 @@ jobs:
                   cache: "npm"
             - run: npm ci
             - run: npm test
+
+    deploy-static:
+        runs-on: ubuntu-latest
+        environment: CI
+
+        strategy:
+            matrix:
+                node-version: [20.x]
+                # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+
+        steps:
+            - uses: actions/checkout@v2
+            - name: Use Node.js ${{ matrix.node-version }}
+              uses: actions/setup-node@v2
+              with:
+                  node-version: ${{ matrix.node-version }}
+                  cache: "npm"
+            - run: npm ci
+            - run: npm run build-storybook
+            - run: npm run build
+              env:
+                  DOCUSAURUS_URL: https://storage.yandexcloud.net
+                  DOCUSAURUS_BASE_URL: ${{ secrets.AWS_S3_BUCKET }}/testplane-docs/website-static/${{ github.run_id }}-${{ github.run_number }}-${{ github.run_attempt }}/
+            - name: Upload storybook static
+              uses: jakejarvis/[email protected]
+              with:
+                  args: --acl public-read --follow-symlinks
+              env:
+                  AWS_S3_BUCKET: ${{ secrets.AWS_S3_BUCKET }}
+                  AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
+                  AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+                  AWS_S3_ENDPOINT: https://s3.yandexcloud.net/
+                  SOURCE_DIR: "storybook-static"
+                  DEST_DIR: "testplane-docs/storybook-static/${{ github.run_id }}-${{ github.run_number }}-${{ github.run_attempt }}/"
+            - name: Upload website static
+              uses: jakejarvis/[email protected]
+              with:
+                  args: --acl public-read --follow-symlinks
+              env:
+                  AWS_S3_BUCKET: ${{ secrets.AWS_S3_BUCKET }}
+                  AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
+                  AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+                  AWS_S3_ENDPOINT: https://s3.yandexcloud.net/
+                  SOURCE_DIR: "build"
+                  DEST_DIR: "testplane-docs/website-static/${{ github.run_id }}-${{ github.run_number }}-${{ github.run_attempt }}/"
+
+            - name: Comment PR with links to deployed static on success
+              if: ${{ success() }}
+              uses: thollander/actions-comment-pull-request@v2
+              with:
+                  message: |
+                      ### :white_check_mark: Successfully deployed static
+
+                      - [Docs website](https://storage.yandexcloud.net/testplane-ci/testplane-docs/website-static/${{ github.run_id }}-${{ github.run_number }}-${{ github.run_attempt }}/index.html)
+                      - [Storybook](https://storage.yandexcloud.net/testplane-ci/testplane-docs/storybook-static/${{ github.run_id }}-${{ github.run_number }}-${{ github.run_attempt }}/index.html)
+                  comment_tag: deployment_status
+
+            - name: Comment PR that static wasn't deployed on failure
+              if: ${{ failure() }}
+              uses: thollander/actions-comment-pull-request@v2
+              with:
+                  message: |
+                      ### :x: Failed to deploy static
+
+                      Please check the workflow logs for details.
+                  comment_tag: deployment_status

.gitignore

@@ -8,6 +8,7 @@
 .docusaurus
 .cache-loader
 .idea
+.eslintcache
 
 # Misc
 .DS_Store
@@ -17,3 +18,7 @@
 .env.production.local
 
 npm-debug.log*
+
+*storybook.log
+storybook-static
+tmp

.prettierignore

@@ -4,3 +4,6 @@ build
 LICENSE
 package.json
 package-lock.json
+storybook-static
+build
+tmp

.storybook/main.ts

@@ -0,0 +1,71 @@
+import * as path from "path";
+import { fileURLToPath } from "url";
+import type { StorybookConfig } from "@storybook/react-webpack5";
+
+const config: StorybookConfig = {
+    stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+    addons: [
+        "@storybook/addon-webpack5-compiler-swc",
+        "@storybook/addon-onboarding",
+        "@storybook/addon-links",
+        "@storybook/addon-essentials",
+        "@chromatic-com/storybook",
+        "@storybook/addon-interactions",
+    ],
+    framework: {
+        name: "@storybook/react-webpack5",
+        options: {},
+    },
+    docs: {
+        autodocs: "tag",
+    },
+    swc: () => ({
+        jsc: {
+            transform: {
+                react: {
+                    runtime: "automatic",
+                },
+            },
+        },
+    }),
+    webpackFinal: config => {
+        return {
+            ...config,
+            resolve: {
+                ...config.resolve,
+                alias: {
+                    ...config.resolve?.alias,
+                    "@site": path.resolve(fileURLToPath(import.meta.url), "../.."),
+                },
+            },
+            module: {
+                ...config.module,
+                rules: [
+                    ...(config.module?.rules as Record<string, any>[]),
+                    {
+                        test: /\.(sa|sc|c)ss$/,
+                        use: [
+                            "style-loader",
+                            "css-loader",
+                            {
+                                loader: "postcss-loader",
+                                options: {
+                                    postcssOptions: {
+                                        ident: "postcss",
+                                        plugins: [
+                                            require("postcss-import"),
+                                            require("tailwindcss"),
+                                            require("autoprefixer"),
+                                        ],
+                                    },
+                                },
+                            },
+                            "sass-loader",
+                        ],
+                    },
+                ],
+            },
+        };
+    },
+};
+export default config;

.storybook/preview.ts

@@ -0,0 +1,16 @@
+import type { Preview } from "@storybook/react";
+
+import "../src/scss/custom.scss";
+
+const preview: Preview = {
+    parameters: {
+        controls: {
+            matchers: {
+                color: /(background|color)$/i,
+                date: /Date$/i,
+            },
+        },
+    },
+};
+
+export default preview;

docusaurus.config.ts

@@ -9,10 +9,10 @@ const config: Config = {
     favicon: "img/favicon.ico",
 
     // Set the production url of your site here
-    url: "https://testplane.example.com",
+    url: process.env.DOCUSAURUS_URL ?? "https://testplane.example.com",
     // Set the /<baseUrl>/ pathname under which your site is served
     // For GitHub pages deployment, it is often '/<projectName>/'
-    baseUrl: "/",
+    baseUrl: process.env.DOCUSAURUS_BASE_URL ?? "/",
 
     // GitHub pages deployment config.
     organizationName: "gemini-testing",
@@ -60,7 +60,7 @@ const config: Config = {
                     position: "left",
                     label: "Tutorial",
                 },
-                { to: "/blog", label: "Blog", position: "left" },
+                { to: "#", label: "Blog", position: "left" },
                 {
                     href: "https://github.com/facebook/docusaurus",
                     label: "GitHub",
@@ -76,15 +76,15 @@ const config: Config = {
                     items: [
                         {
                             label: "Configuration",
-                            to: "/docs/config",
+                            to: "#",
                         },
                         {
                             label: "Events",
-                            to: "/docs/events",
+                            to: "#",
                         },
                         {
                             label: "API reference",
-                            to: "/docs/api",
+                            to: "#",
                         },
                     ],
                 },
@@ -110,11 +110,11 @@ const config: Config = {
                         },
                         {
                             label: "Installation",
-                            href: "/docs/installation",
+                            href: "#",
                         },
                         {
                             label: "First tests with testplane",
-                            href: "/docs/first-tests",
+                            href: "#",
                         },
                     ],
                 },

eslint.config.mjs

@@ -7,8 +7,19 @@ import tseslint from "typescript-eslint";
 
 export default tseslint.config(
     {
-        ignores: ["node_modules/**", ".docusaurus/**", "babel.config.js", "eslint.config.mjs"],
+        ignores: [
+            "node_modules/**",
+            ".docusaurus/**",
+            "babel.config.js",
+            "eslint.config.mjs",
+            "storybook-static/**",
+            "build/**",
+            "tmp/**",
+        ],
     },
+    eslint.configs.recommended,
+    ...tseslint.configs.recommendedTypeChecked,
+    ...tseslint.configs.stylisticTypeChecked,
     {
         files: ["plugins/tailwind.ts"],
         languageOptions: {
@@ -17,9 +28,6 @@ export default tseslint.config(
             },
         },
     },
-    eslint.configs.recommended,
-    ...tseslint.configs.recommendedTypeChecked,
-    ...tseslint.configs.stylisticTypeChecked,
     {
         languageOptions: {
             parserOptions: {