feat: add storybook and animated planet component

Author: shadowusr

.github/workflows/checks.yml

@@ -27,3 +27,27 @@ jobs:
                   cache: "npm"
             - run: npm ci
             - run: npm test
+
+    build-storybook:
+        runs-on: ubuntu-latest
+
+        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
+            - name: Save storybook static
+              uses: actions/upload-artifact@v4
+              with:
+                  name: storybook static
+                  path: |
+                      storybook-static

.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,72 @@
+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$/, // Test for .sass, .scss and .css files
+                        use: [
+                            // MiniCssExtractPlugin.loader, // Extract css into separate files
+                            "style-loader",
+                            "css-loader", // Translates CSS into CommonJS
+                            {
+                                loader: "postcss-loader", // Loader for webpack to process CSS with PostCSS
+                                options: {
+                                    postcssOptions: {
+                                        ident: "postcss",
+                                        plugins: [
+                                            require("postcss-import"),
+                                            require("tailwindcss"), // use tailwindcss
+                                            require("autoprefixer"), // add vendor prefixes
+                                        ],
+                                    },
+                                },
+                            },
+                            "sass-loader", // Compiles Sass to CSS
+                        ],
+                    },
+                ],
+            },
+        };
+    },
+};
+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;

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: {