add tailwind to wave, support shadcn + donut chart as a POC (#1775)

Author: sawka

.storybook/global.css

@@ -16,3 +16,5 @@ body {
         background-color: orange;
     }
 }
+
+@import "../frontend/tailwindsetup.css";

.vscode/settings.json

@@ -45,5 +45,8 @@
     },
     "[md]": {
         "editor.wordWrap": "on"
+    },
+    "files.associations": {
+        "*.css": "tailwindcss"
     }
 }

electron.vite.config.ts

@@ -1,6 +1,7 @@
 // Copyright 2025, Command Line Inc.
 // SPDX-License-Identifier: Apache-2.0
 
+import tailwindcss from "@tailwindcss/vite";
 import react from "@vitejs/plugin-react-swc";
 import { defineConfig } from "electron-vite";
 import flow from "rollup-plugin-flow";
@@ -63,15 +64,23 @@ export default defineConfig({
         server: {
             open: false,
         },
+        css: {
+            preprocessorOptions: {
+                scss: {
+                    silenceDeprecations: ["mixed-decls"],
+                },
+            },
+        },
         plugins: [
             ViteImageOptimizer(),
             tsconfigPaths(),
+            flow(),
             svgr({
                 svgrOptions: { exportType: "default", ref: true, svgo: false, titleProp: true },
                 include: "**/*.svg",
             }),
             react({}),
-            flow(),
+            tailwindcss(),
             viteStaticCopy({
                 targets: [{ src: "node_modules/monaco-editor/min/vs/*", dest: "monaco" }],
             }),

frontend/app/app.tsx

@@ -29,6 +29,9 @@ import { NotificationBubbles } from "./notification/notificationbubbles";
 
 import "./app.scss";
 
+// this should come after app.scss (don't remove the newline above otherwise prettier will reorder these imports)
+import "../tailwindsetup.css";
+
 const dlog = debug("wave:app");
 const focusLog = debug("wave:focus");
 

frontend/app/element/donutchart.stories.tsx

@@ -0,0 +1,73 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import DonutChart from "./donutchart";
+
+const meta = {
+    title: "Components/DonutChart",
+    component: DonutChart,
+    parameters: {
+        layout: "centered",
+        docs: {
+            description: {
+                component:
+                    "The `DonutChart` component displays data in a donut-style chart with customizable colors, labels, and tooltip. Useful for visualizing proportions or percentages.",
+            },
+        },
+    },
+    argTypes: {
+        data: {
+            description:
+                "The data for the chart, where each item includes `label`, `value`, and optional `displayvalue`.",
+            control: { type: "object" },
+        },
+        config: {
+            description: "config for the chart",
+            control: { type: "object" },
+        },
+        innerLabel: {
+            description: "The label displayed inside the donut chart (e.g., percentages).",
+            control: { type: "text" },
+        },
+    },
+    decorators: [
+        (Story) => (
+            <div
+                style={{
+                    width: "200px",
+                    height: "200px",
+                    display: "flex",
+                    justifyContent: "center",
+                    alignItems: "center",
+                    border: "1px solid #ddd",
+                }}
+            >
+                <Story />
+            </div>
+        ),
+    ],
+} satisfies Meta<typeof DonutChart>;
+
+export default meta;
+type Story = StoryObj<typeof DonutChart>;
+
+export const Default: Story = {
+    args: {
+        config: {
+            chrome: { label: "Chrome", color: "#8884d8" },
+            safari: { label: "Safari", color: "#82ca9d" },
+            firefox: { label: "Firefox", color: "#ffc658" },
+            edge: { label: "Edge", color: "#ff8042" },
+            other: { label: "Other", color: "#8dd1e1" },
+        },
+        data: [
+            { label: "chrome", value: 275, fill: "#8884d8" }, // Purple
+            { label: "safari", value: 200, fill: "#82ca9d" }, // Green
+            { label: "firefox", value: 287, fill: "#ffc658" }, // Yellow
+            { label: "edge", value: 173, fill: "#ff8042" }, // Orange
+            { label: "other", value: 190, fill: "#8dd1e1" }, // Light Blue
+        ],
+        innerLabel: "50%",
+        innerSubLabel: "50/100",
+        dataKey: "value",
+        nameKey: "label",
+    },
+};

frontend/app/element/donutchart.tsx

@@ -0,0 +1,92 @@
+import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from "@/app/shadcn/chart";
+import { isBlank } from "@/util/util";
+import { Label, Pie, PieChart } from "recharts";
+import { ViewBox } from "recharts/types/util/types";
+
+const DEFAULT_COLORS = [
+    "#3498db", // blue
+    "#2ecc71", // green
+    "#e74c3c", // red
+    "#f1c40f", // yellow
+    "#9b59b6", // purple
+    "#1abc9c", // turquoise
+    "#e67e22", // orange
+    "#34495e", // dark blue
+];
+
+const NO_DATA_COLOR = "#E0E0E0";
+
+const PieInnerLabel = ({
+    innerLabel,
+    innerSubLabel,
+    viewBox,
+}: {
+    innerLabel: string;
+    innerSubLabel: string;
+    viewBox: ViewBox;
+}) => {
+    if (isBlank(innerLabel)) {
+        return null;
+    }
+    if (!viewBox || !("cx" in viewBox) || !("cy" in viewBox)) {
+        return null;
+    }
+    return (
+        <text x={viewBox.cx} y={viewBox.cy} textAnchor="middle" dominantBaseline="middle">
+            <tspan x={viewBox.cx} y={viewBox.cy} fill="white" className="fill-foreground text-2xl font-bold">
+                {innerLabel}
+            </tspan>
+            {innerSubLabel && (
+                <tspan x={viewBox.cx} y={(viewBox.cy || 0) + 24} className="fill-muted-foreground">
+                    {innerSubLabel}
+                </tspan>
+            )}
+        </text>
+    );
+};
+
+const DonutChart = ({
+    data,
+    config,
+    innerLabel,
+    innerSubLabel,
+    dataKey,
+    nameKey,
+}: {
+    data: any[];
+    config: ChartConfig;
+    innerLabel?: string;
+    innerSubLabel?: string;
+    dataKey: string;
+    nameKey: string;
+}) => {
+    return (
+        <div className="flex flex-col items-center w-full h-full">
+            <ChartContainer config={config} className="mx-auto w-full h-full aspect-square max-h-[250px]">
+                <PieChart>
+                    <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />
+                    <Pie
+                        data={data}
+                        dataKey={dataKey}
+                        nameKey={nameKey}
+                        innerRadius={60}
+                        strokeWidth={5}
+                        isAnimationActive={false}
+                    >
+                        <Label
+                            content={({ viewBox }) => (
+                                <PieInnerLabel
+                                    innerLabel={innerLabel}
+                                    innerSubLabel={innerSubLabel}
+                                    viewBox={viewBox}
+                                />
+                            )}
+                        />
+                    </Pie>
+                </PieChart>
+            </ChartContainer>
+        </div>
+    );
+};
+
+export default DonutChart;

frontend/app/element/markdown.scss

@@ -93,12 +93,12 @@
         ul {
             list-style-type: disc;
             list-style-position: outside;
-            margin-left: 1.143em;
+            margin-left: 1em;
         }
 
         ol {
             list-style-position: outside;
-            margin-left: 1.357em;
+            margin-left: 1.2em;
         }
 
         blockquote {