✨ Storybook

frontend/components/.gitignore

@@ -1,2 +1,4 @@
 # node
 node_modules/
+
+*storybook.log

frontend/components/.storybook/index.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

frontend/components/.storybook/main.ts

@@ -0,0 +1,40 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+import { mergeConfig } from "vite";
+import tsConfigPaths from "vite-tsconfig-paths";
+
+import { join, dirname } from "path";
+
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
+function getAbsolutePath(value: string): any {
+  return dirname(require.resolve(join(value, "package.json")));
+}
+const config: StorybookConfig = {
+  stories: [
+    "../stories/**/*.mdx",
+    "../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)",
+  ],
+  addons: [
+    getAbsolutePath("@storybook/addon-essentials"),
+    getAbsolutePath("@storybook/addon-onboarding"),
+    getAbsolutePath("@chromatic-com/storybook"),
+    getAbsolutePath("@storybook/experimental-addon-test"),
+  ],
+  framework: {
+    name: getAbsolutePath("@storybook/react-vite"),
+    options: {},
+  },
+  viteFinal: async (config) => {
+    return mergeConfig(config, {
+      plugins: [tsConfigPaths()],
+    });
+  },
+  typescript: {
+    reactDocgenTypescriptOptions: {
+      tsconfigPath: "./tsconfig.json",
+    },
+  },
+};
+export default config;

frontend/components/.storybook/preview.ts

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

frontend/components/.storybook/vitest.setup.ts

@@ -0,0 +1,9 @@
+import { beforeAll } from 'vitest';
+import { setProjectAnnotations } from '@storybook/react';
+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);

frontend/components/base/Buttons/IconButton.tsx

@@ -12,7 +12,6 @@ export type IconButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> &
     iconClassName?: string;
     loading?: boolean;
   };
-
 const IconButton = ({
   icon: Icon,
   size,

frontend/components/base/Buttons/button.variants.ts

@@ -89,7 +89,7 @@ export const iconButtonVariants = tv({
         icon: "size-4",
       },
       xs: {
-        base: "size-6",
+        base: "size-5",
         icon: "size-[14px]",
       },
       sm: {

frontend/components/base/dialog/alert-dialog-provider.tsx

@@ -20,7 +20,7 @@ import {
 import { alertDialog, OpenAlertDialogProps } from "./alert-dialog-store";
 import { Spinner } from "../spinner";
 
-type AlertDialogProps = OpenAlertDialogProps & {
+export type AlertDialogProps = OpenAlertDialogProps & {
   isOpen: boolean;
 };
 

frontend/components/base/icons/greater-than-operator-icon.tsx

@@ -9,7 +9,7 @@ const GreaterThanOperatorIcon = ({
   <svg
     height={size}
     width={size}
-    viewBox="0 0 14 14"
+    viewBox="0 0 24 24"
     xmlns="http://www.w3.org/2000/svg"
     {...props}
   >

frontend/components/base/icons/greater-than-or-equal-operator-icon.tsx

@@ -9,7 +9,7 @@ const GreaterThanOrEqualOperatorIcon = ({
   <svg
     height={size}
     width={size}
-    viewBox="0 0 14 14"
+    viewBox="0 0 24 24"
     xmlns="http://www.w3.org/2000/svg"
     {...props}
   >

frontend/components/base/icons/less-than-operator-icon.tsx

@@ -9,7 +9,7 @@ const LessThanOperatorIcon = ({
   <svg
     height={size}
     width={size}
-    viewBox="0 0 14 14"
+    viewBox="0 0 24 24"
     xmlns="http://www.w3.org/2000/svg"
     {...props}
   >

frontend/components/base/icons/less-than-or-equal-operator-icon.tsx

@@ -9,7 +9,7 @@ const LessThanOrEqualOperatorIcon = ({
   <svg
     height={size}
     width={size}
-    viewBox="0 0 14 14"
+    viewBox="0 0 24 24"
     xmlns="http://www.w3.org/2000/svg"
     {...props}
   >

frontend/components/feature/query-builder/query-bar/query-bar-save-dialog.tsx

@@ -21,6 +21,7 @@ import {
 import { Input } from "@/components/base/ui/input";
 import { QueryInstance } from "@/components/model/query-builder-core";
 import { useQueryBuilderDictContext } from "../query-builder-context";
+import { useState } from "react";
 
 const formSchema = z.object({
   title: z.string(),
@@ -35,6 +36,7 @@ function QueryBarSaveDialog({
   onOpenChange: (open: boolean) => void;
   query: QueryInstance;
 }) {
+  const [saving, setSaving] = useState(false);
   const dict = useQueryBuilderDictContext();
 
   const form = useForm<z.infer<typeof formSchema>>({
@@ -45,9 +47,10 @@ function QueryBarSaveDialog({
   });
 
   const onSubmit = async (values: z.infer<typeof formSchema>) => {
-    return Promise.resolve(query.saveAsCustomPill(values.title)).then(() =>
-      onOpenChange(false)
-    );
+    setSaving(true);
+    return Promise.resolve(query.saveAsCustomPill(values.title))
+      .then(() => onOpenChange(false))
+      .finally(() => setSaving(false));
   };
 
   return (
@@ -85,7 +88,7 @@ function QueryBarSaveDialog({
                   {dict.queryBar.saveDialog.cancel}
                 </Button>
               </DialogClose>
-              <Button type="submit" variant="primary">
+              <Button type="submit" variant="primary" loading={saving}>
                 {dict.queryBar.saveDialog.ok}
               </Button>
             </DialogFooter>

frontend/components/feature/query-builder/query-pill/query-pill-custom-edit-dialog.tsx

@@ -71,6 +71,7 @@ function QueryPillCustomEditDialog({
   });
 
   const [title, setTitle] = useState(queryPill.title);
+  const [saving, setSaving] = useState(false);
 
   const coreQuery = customQueryBuilder.getQueries()[0];
   const coreSavedFilter = customQueryBuilder.getSelectedSavedFilter();
@@ -97,17 +98,21 @@ function QueryPillCustomEditDialog({
         return;
       }
 
+      setSaving(true);
+
       if (titleChanged) {
         const valid = await customPillConfig?.validateCustomPillTitle(title);
 
         if (valid !== undefined && valid === false) {
+          setSaving(false);
           openCustomPillTitleExistsDialog(dict);
           return;
         }
       }
 
-      const associatedSavedFilters =
-        await customPillConfig?.fetchSavedFiltersByCustomPillId(queryPill.id);
+      const associatedSavedFilters = await customPillConfig
+        ?.fetchSavedFiltersByCustomPillId(queryPill.id)
+        .finally(() => setSaving(false));
 
       openCustomPillSaveDialog(dict, title, associatedSavedFilters, async () =>
         coreSavedFilter?.save(SavedFilterTypeEnum.Query, {
@@ -143,7 +148,7 @@ function QueryPillCustomEditDialog({
               <div>
                 <EditableText onChangeText={setTitle}>{title}</EditableText>
               </div>
-              <div data-query-active className="flex group/query">
+              <div data-query-active className="flex flex-wrap group/query">
                 <QueryBarContext.Provider value={{ query: coreQuery }}>
                   <QueryPillBoolean sqon={coreQuery.raw()} />
                 </QueryBarContext.Provider>
@@ -157,6 +162,7 @@ function QueryPillCustomEditDialog({
                 <Button
                   type="submit"
                   variant="primary"
+                  loading={saving}
                   disabled={!hasChanged}
                   onClick={handleSave}
                 >

frontend/components/feature/query-builder/query-pill/query-pill-values.tsx

@@ -38,7 +38,7 @@ function QueryPillValues({ valueFilter }: QueryPillValuesProps) {
         ))
       )}
       {canExpand && (
-        <div className="absolute right-1">
+        <div className="absolute right-1 hover:cursor-pointer">
           {expanded ? (
             <ChevronLeft size={16} onClick={() => setExpanded(false)} />
           ) : (

frontend/components/model/query-builder-core/tests/query-builder.test.ts

@@ -1164,3 +1164,5 @@ describe("QueryBuilder Core", () => {
     expect(qb.isEmpty()).toBeFalsy();
   });
 });
+
+// TODO test fieldsToIgnore

frontend/components/package.json

@@ -4,15 +4,29 @@
   "main": "index.js",
   "scripts": {
     "test": "vite-jest",
-    "dev": "tailwindcss -i ./style/styles.css -o ./style/dist/styles.css"
+    "storybook": "THEME=radiant storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "description": "",
   "devDependencies": {
+    "@chromatic-com/storybook": "^3.2.5",
+    "@storybook/addon-essentials": "^8.6.3",
+    "@storybook/addon-onboarding": "^8.6.3",
+    "@storybook/blocks": "^8.6.3",
+    "@storybook/experimental-addon-test": "^8.6.3",
+    "@storybook/react": "^8.6.3",
+    "@storybook/react-vite": "^8.6.3",
+    "@storybook/test": "^8.6.3",
     "@types/lodash": "^4.17.14",
-    "tailwindcss": "^3.4.16"
+    "@vitest/browser": "^3.0.7",
+    "@vitest/coverage-v8": "^3.0.7",
+    "playwright": "^1.50.1",
+    "storybook": "^8.6.3",
+    "tailwindcss": "^3.4.16",
+    "vitest": "^3.0.7"
   },
   "dependencies": {
     "@dnd-kit/core": "^6.3.1",
@@ -33,6 +47,7 @@
     "@radix-ui/react-tabs": "^1.1.1",
     "@radix-ui/react-tooltip": "^1.1.8",
     "@tanstack/react-table": "^8.20.6",
+    "@vitejs/plugin-react": "^4.3.4",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lodash": "^4.17.21",

frontend/components/stories/base/buttons/action-button.stories.tsx

@@ -0,0 +1,97 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+
+import ActionButton from "@/components/base/Buttons/ActionButton";
+
+const meta = {
+  title: "Base/Buttons/Action Button",
+  component: ActionButton,
+  tags: ["autodocs"],
+  args: { onClick: fn(), size: "default", actions: [], onDefaultAction: fn() },
+} satisfies Meta<typeof ActionButton>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: "Button",
+    variant: "default",
+  },
+};
+
+export const Outline: Story = {
+  args: {
+    children: "Button",
+    variant: "outline",
+  },
+};
+
+export const Primary: Story = {
+  args: {
+    children: "Button",
+    variant: "primary",
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    children: "Button",
+    variant: "secondary",
+  },
+};
+
+export const Ghost: Story = {
+  args: {
+    children: "Button",
+    variant: "ghost",
+  },
+};
+
+export const Destructive: Story = {
+  args: {
+    children: "Button",
+    variant: "destructive",
+  },
+};
+
+export const Loading: Story = {
+  args: {
+    children: "Button",
+    variant: "primary",
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    children: "Button",
+    variant: "primary",
+    disabled: true,
+  },
+};
+
+export const Sizes: Story = {
+  args: {
+    children: "Button",
+  },
+  render: (args) => (
+    <div className="flex gap-2">
+      <ActionButton {...args} size="default" variant="primary">
+        Default
+      </ActionButton>
+      <ActionButton {...args} size="xs" variant="primary">
+        AButton xs
+      </ActionButton>
+      <ActionButton {...args} size="sm" variant="primary">
+        AButton sm
+      </ActionButton>
+      <ActionButton {...args} size="md" variant="primary">
+        AButton md
+      </ActionButton>
+      <ActionButton {...args} size="lg" variant="primary">
+        AButton lg
+      </ActionButton>
+    </div>
+  ),
+};