feat: implement animated features demo component

.storybook/main.ts

@@ -6,7 +6,6 @@ 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",
@@ -29,6 +28,34 @@ const config: StorybookConfig = {
         },
     }),
     webpackFinal: config => {
+        if (config.module && config.module.rules) {
+            const { rules } = config.module;
+
+            const fileLoaderRule = rules.find(rule => rule?.test && rule.test.test(".svg")) as
+                | { exclude: RegExp }
+                | undefined;
+            if (fileLoaderRule) {
+                fileLoaderRule.exclude = /\.svg$/;
+            }
+
+            const cssLoaderIndex = rules.findIndex(rule => rule?.test && rule.test.test(".css"));
+            rules.splice(cssLoaderIndex, 1);
+        }
+
+        const postCssLoader = {
+            loader: "postcss-loader",
+            options: {
+                postcssOptions: {
+                    ident: "postcss",
+                    plugins: [
+                        require("postcss-import"),
+                        require("tailwindcss"),
+                        require("autoprefixer"),
+                    ],
+                },
+            },
+        };
+
         return {
             ...config,
             resolve: {
@@ -43,25 +70,16 @@ const config: StorybookConfig = {
                 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",
-                        ],
+                        test: /\.(sa|sc)ss$/,
+                        use: ["style-loader", "css-loader", postCssLoader, "sass-loader"],
+                    },
+                    {
+                        test: /\.css$/,
+                        use: ["style-loader", "css-loader", postCssLoader],
+                    },
+                    {
+                        test: /\.svg$/,
+                        use: ["@svgr/webpack"],
                     },
                 ],
             },

.storybook/preview-head.html

@@ -0,0 +1,6 @@
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link
+    href="https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap"
+    rel="stylesheet"
+/>

.storybook/preview.ts

@@ -1,6 +1,6 @@
 import type { Preview } from "@storybook/react";
 
-import "../src/scss/custom.scss";
+import "../src/scss/custom.css";
 
 const preview: Preview = {
     parameters: {

docusaurus.config.ts

@@ -25,7 +25,15 @@ const config: Config = {
         defaultLocale: "en",
         locales: ["en"],
     },
-
+    headTags: [
+        {
+            tagName: "link",
+            attributes: {
+                href: "https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap",
+                rel: "stylesheet",
+            },
+        },
+    ],
     presets: [
         [
             "classic",
@@ -39,7 +47,7 @@ const config: Config = {
                     editUrl: "https://github.com/gemini-testing/testplane-docs/tree/main/blog/",
                 },
                 theme: {
-                    customCss: "./src/scss/custom.scss",
+                    customCss: "./src/scss/custom.css",
                 },
             } satisfies Preset.Options,
         ],

eslint.config.mjs

@@ -3,6 +3,7 @@ import geminiTesting from "eslint-config-gemini-testing";
 import reactRecommended from "eslint-plugin-react/configs/recommended.js";
 import reactJsxRuntime from "eslint-plugin-react/configs/jsx-runtime.js";
 import prettier from "eslint-config-prettier";
+import _ from "lodash";
 import tseslint from "typescript-eslint";
 
 export default tseslint.config(
@@ -47,7 +48,11 @@ export default tseslint.config(
     reactRecommended,
     reactJsxRuntime,
     {
-        rules: geminiTesting.rules,
+        rules: _.omit(geminiTesting.rules, [
+            // Rules that conflict with typescript-eslint.
+            "no-undef",
+            "no-unused-vars",
+        ]),
     },
     prettier,
 );