test(new-webui): Add React Storybook for UI testing & docs; Extract TimeRangeInputBase and set up tests for it.

components/log-viewer-webui/client/.gitignore

@@ -7,3 +7,6 @@
 # IDEs
 /.idea
 /.vscode
+
+# Logs
+*storybook.log

components/log-viewer-webui/client/.storybook/main.ts

@@ -0,0 +1,20 @@
+import type {StorybookConfig} from "@storybook/react-vite";
+
+
+const config: StorybookConfig = {
+    stories: [
+        "../src/**/*.stories.@(ts|tsx)",
+    ],
+    addons: [
+        "@storybook/addon-essentials",
+        "@chromatic-com/storybook",
+        "@storybook/experimental-addon-test",
+    ],
+    framework: {
+        name: "@storybook/react-vite",
+        options: {},
+    },
+};
+
+
+export default config;

components/log-viewer-webui/client/.storybook/preview.ts

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

components/log-viewer-webui/client/.storybook/vitest.setup.ts

@@ -0,0 +1,11 @@
+import {setProjectAnnotations} from "@storybook/react";
+import {beforeAll} from "vitest";
+
+import * as projectAnnotations from "./preview";
+
+
+// This is an important step to apply the right configuration when testing your stories.
+// More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
+const project = setProjectAnnotations([projectAnnotations]);
+
+beforeAll(project.beforeAll);

components/log-viewer-webui/client/eslint.config.mjs

@@ -21,7 +21,11 @@ const EslintConfig = [
         "./tsconfig/tsconfig.app.json"
     ),
     createTsConfigOverride(
-        ["vite.config.ts"],
+        [
+            ".storybook/**/*.ts",
+            "vite.config.ts",
+            "vitest.workspace.ts",
+        ],
         "./tsconfig/tsconfig.node.json"
     ),
     ...StylisticConfigArray,