@kopai/ui 0.0.5 → 0.2.0

package/src/components/dashboard/Chart/Chart.stories.tsx

@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Chart } from "./index.js";
+
+const meta: Meta<typeof Chart> = {
+  title: "Dashboard/Chart",
+  component: Chart,
+};
+export default meta;
+type Story = StoryObj<typeof Chart>;
+
+export const Bar: Story = {
+  args: {
+    element: {
+      props: {
+        type: "bar",
+        dataPath: "analytics.weekly",
+        title: "Weekly Activity",
+        height: 150,
+      },
+    },
+  },
+};
+
+export const Line: Story = {
+  args: {
+    element: {
+      props: {
+        type: "line",
+        dataPath: "analytics.daily",
+        title: "Daily Trend",
+        height: 200,
+      },
+    },
+  },
+};
+
+export const NoTitle: Story = {
+  args: {
+    element: {
+      props: {
+        type: "area",
+        dataPath: "data",
+        title: null,
+        height: 120,
+      },
+    },
+  },
+};

package/src/components/dashboard/Chart/index.tsx

@@ -0,0 +1,74 @@
+import { dashboardCatalog } from "../../../lib/catalog.js";
+import type { CatalogueComponentProps } from "../../../lib/component-catalog.js";
+
+export function Chart({
+  element,
+}: CatalogueComponentProps<typeof dashboardCatalog.components.Chart>) {
+  const { type, dataPath, title, height } = element.props;
+
+  // Static mock data for example page
+  const mockData = [
+    { label: "Mon", value: 40 },
+    { label: "Tue", value: 65 },
+    { label: "Wed", value: 45 },
+    { label: "Thu", value: 80 },
+    { label: "Fri", value: 55 },
+  ];
+
+  const maxValue = Math.max(...mockData.map((d) => d.value));
+
+  return (
+    <div>
+      {title && (
+        <h4 style={{ margin: "0 0 16px", fontSize: 14, fontWeight: 600 }}>
+          {title}
+        </h4>
+      )}
+      <div
+        style={{
+          display: "flex",
+          gap: 8,
+          alignItems: "flex-end",
+          height: height || 120,
+        }}
+      >
+        {mockData.map((d, i) => (
+          <div
+            key={i}
+            style={{
+              flex: 1,
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              gap: 4,
+            }}
+          >
+            <div
+              style={{
+                width: "100%",
+                height: `${(d.value / maxValue) * 100}%`,
+                background: "hsl(var(--foreground))",
+                borderRadius: "4px 4px 0 0",
+                minHeight: 4,
+              }}
+            />
+            <span
+              style={{ fontSize: 12, color: "hsl(var(--muted-foreground))" }}
+            >
+              {d.label}
+            </span>
+          </div>
+        ))}
+      </div>
+      <p
+        style={{
+          margin: "8px 0 0",
+          fontSize: 12,
+          color: "hsl(var(--muted-foreground))",
+        }}
+      >
+        Type: {type} | Data: {dataPath}
+      </p>
+    </div>
+  );
+}

package/src/components/dashboard/DatePicker/DatePicker.stories.tsx

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { DatePicker } from "./index.js";
+
+const meta: Meta<typeof DatePicker> = {
+  title: "Dashboard/DatePicker",
+  component: DatePicker,
+};
+export default meta;
+type Story = StoryObj<typeof DatePicker>;
+
+export const Default: Story = {
+  args: {
+    element: {
+      props: {
+        label: "Select Date",
+        bindPath: "filters.date",
+        placeholder: "Choose a date",
+      },
+    },
+  },
+};
+
+export const NoLabel: Story = {
+  args: {
+    element: {
+      props: {
+        label: null,
+        bindPath: "filters.startDate",
+        placeholder: "Start date",
+      },
+    },
+  },
+};

package/src/components/dashboard/DatePicker/index.tsx

@@ -0,0 +1,41 @@
+import { dashboardCatalog } from "../../../lib/catalog.js";
+import type { CatalogueComponentProps } from "../../../lib/component-catalog.js";
+
+export function DatePicker({
+  element,
+}: CatalogueComponentProps<typeof dashboardCatalog.components.DatePicker>) {
+  const { label, bindPath } = element.props;
+  const inputId = `datepicker-${bindPath}`;
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
+      {label && (
+        <label htmlFor={inputId} style={{ fontSize: 14, fontWeight: 500 }}>
+          {label}
+        </label>
+      )}
+      <input
+        id={inputId}
+        type="date"
+        style={{
+          padding: "8px 12px",
+          borderRadius: "var(--radius)",
+          border: "1px solid hsl(var(--border))",
+          background: "hsl(var(--card))",
+          color: "hsl(var(--foreground))",
+          fontSize: 16,
+          outline: "none",
+        }}
+      />
+      <p
+        style={{
+          margin: "4px 0 0",
+          fontSize: 12,
+          color: "hsl(var(--muted-foreground))",
+        }}
+      >
+        Bound to: {bindPath}
+      </p>
+    </div>
+  );
+}

package/src/components/dashboard/Divider/Divider.stories.tsx

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Divider } from "./index.js";
+
+const meta: Meta<typeof Divider> = {
+  title: "Dashboard/Divider",
+  component: Divider,
+};
+export default meta;
+type Story = StoryObj<typeof Divider>;
+
+export const Default: Story = {
+  args: { element: { props: { label: null } } },
+};
+
+export const WithLabel: Story = {
+  args: { element: { props: { label: "Section Break" } } },
+};

package/src/components/dashboard/Divider/index.tsx

@@ -0,0 +1,49 @@
+import { dashboardCatalog } from "../../../lib/catalog.js";
+import type { CatalogueComponentProps } from "../../../lib/component-catalog.js";
+
+export function Divider({
+  element,
+}: CatalogueComponentProps<typeof dashboardCatalog.components.Divider>) {
+  const { label } = element.props;
+
+  if (label) {
+    return (
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          gap: 16,
+          margin: "16px 0",
+        }}
+      >
+        <hr
+          style={{
+            flex: 1,
+            border: "none",
+            borderTop: "1px solid hsl(var(--border))",
+          }}
+        />
+        <span style={{ fontSize: 12, color: "hsl(var(--muted-foreground))" }}>
+          {label}
+        </span>
+        <hr
+          style={{
+            flex: 1,
+            border: "none",
+            borderTop: "1px solid hsl(var(--border))",
+          }}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <hr
+      style={{
+        border: "none",
+        borderTop: "1px solid hsl(var(--border))",
+        margin: "16px 0",
+      }}
+    />
+  );
+}

package/src/components/dashboard/Empty/Empty.stories.tsx

@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Empty } from "./index.js";
+
+const meta: Meta<typeof Empty> = {
+  title: "Dashboard/Empty",
+  component: Empty,
+};
+export default meta;
+type Story = StoryObj<typeof Empty>;
+
+export const Default: Story = {
+  args: {
+    element: {
+      props: {
+        title: "No Data Available",
+        description: "Try adjusting your filters or adding new data.",
+        action: "addData",
+        actionLabel: "Add Data",
+      },
+    },
+  },
+};
+
+export const NoAction: Story = {
+  args: {
+    element: {
+      props: {
+        title: "Nothing Here",
+        description: "Check back later.",
+        action: null,
+        actionLabel: null,
+      },
+    },
+  },
+};
+
+export const TitleOnly: Story = {
+  args: {
+    element: {
+      props: {
+        title: "Empty",
+        description: null,
+        action: null,
+        actionLabel: null,
+      },
+    },
+  },
+};

package/src/components/dashboard/Empty/index.tsx

@@ -0,0 +1,46 @@
+import { dashboardCatalog } from "../../../lib/catalog.js";
+import type { CatalogueComponentProps } from "../../../lib/component-catalog.js";
+
+export function Empty({
+  element,
+  onAction,
+}: CatalogueComponentProps<typeof dashboardCatalog.components.Empty> & {
+  onAction?: (action: string) => void;
+}) {
+  const { title, description, action, actionLabel } = element.props;
+
+  return (
+    <div style={{ textAlign: "center", padding: "40px 20px" }}>
+      <h3 style={{ margin: "0 0 8px", fontSize: 16, fontWeight: 600 }}>
+        {title}
+      </h3>
+      {description && (
+        <p
+          style={{
+            margin: "0 0 16px",
+            fontSize: 14,
+            color: "hsl(var(--muted-foreground))",
+          }}
+        >
+          {description}
+        </p>
+      )}
+      {action && actionLabel && (
+        <button
+          onClick={() => onAction?.(action)}
+          style={{
+            padding: "8px 16px",
+            borderRadius: "var(--radius)",
+            border: "1px solid hsl(var(--border))",
+            background: "hsl(var(--card))",
+            color: "hsl(var(--foreground))",
+            fontSize: 14,
+            cursor: "pointer",
+          }}
+        >
+          {actionLabel}
+        </button>
+      )}
+    </div>
+  );
+}

package/src/components/dashboard/Grid/Grid.stories.tsx

@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Grid } from "./index.js";
+
+const meta: Meta<typeof Grid> = {
+  title: "Dashboard/Grid",
+  component: Grid,
+};
+export default meta;
+type Story = StoryObj<typeof Grid>;
+
+const GridItem = ({ label }: { label: string }) => (
+  <div
+    style={{
+      padding: 16,
+      background: "hsl(var(--card))",
+      border: "1px solid hsl(var(--border))",
+      borderRadius: "var(--radius)",
+    }}
+  >
+    {label}
+  </div>
+);
+
+export const TwoColumns: Story = {
+  render: () => (
+    <Grid element={{ props: { columns: 2, gap: "md" } }}>
+      <GridItem label="Item 1" />
+      <GridItem label="Item 2" />
+      <GridItem label="Item 3" />
+      <GridItem label="Item 4" />
+    </Grid>
+  ),
+};
+
+export const ThreeColumns: Story = {
+  render: () => (
+    <Grid element={{ props: { columns: 3, gap: "md" } }}>
+      <GridItem label="Item 1" />
+      <GridItem label="Item 2" />
+      <GridItem label="Item 3" />
+    </Grid>
+  ),
+};
+
+export const SmallGap: Story = {
+  render: () => (
+    <Grid element={{ props: { columns: 2, gap: "sm" } }}>
+      <GridItem label="Item 1" />
+      <GridItem label="Item 2" />
+    </Grid>
+  ),
+};

package/src/components/dashboard/Grid/index.tsx

@@ -0,0 +1,26 @@
+import { dashboardCatalog } from "../../../lib/catalog.js";
+import type { CatalogueComponentProps } from "../../../lib/component-catalog.js";
+
+export function Grid({
+  element,
+  children,
+}: CatalogueComponentProps<typeof dashboardCatalog.components.Grid>) {
+  const { columns, gap } = element.props;
+  const gaps: Record<string, string> = {
+    sm: "8px",
+    md: "16px",
+    lg: "24px",
+  };
+
+  return (
+    <div
+      style={{
+        display: "grid",
+        gridTemplateColumns: `repeat(${columns || 2}, 1fr)`,
+        gap: gaps[gap || "md"],
+      }}
+    >
+      {children}
+    </div>
+  );
+}

package/src/components/dashboard/Heading/Heading.stories.tsx

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Heading } from "./index.js";
+
+const meta: Meta<typeof Heading> = {
+  title: "Dashboard/Heading",
+  component: Heading,
+};
+export default meta;
+type Story = StoryObj<typeof Heading>;
+
+export const H1: Story = {
+  args: { element: { props: { text: "Heading Level 1", level: "h1" } } },
+};
+
+export const H2: Story = {
+  args: { element: { props: { text: "Heading Level 2", level: "h2" } } },
+};
+
+export const H3: Story = {
+  args: { element: { props: { text: "Heading Level 3", level: "h3" } } },
+};
+
+export const H4: Story = {
+  args: { element: { props: { text: "Heading Level 4", level: "h4" } } },
+};

package/src/components/dashboard/Heading/index.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { dashboardCatalog } from "../../../lib/catalog.js";
+import type { CatalogueComponentProps } from "../../../lib/component-catalog.js";
+
+export function Heading({
+  element,
+}: CatalogueComponentProps<typeof dashboardCatalog.components.Heading>) {
+  const { text, level } = element.props;
+  const Tag = (level || "h2") as keyof React.JSX.IntrinsicElements;
+  const sizes: Record<string, string> = {
+    h1: "28px",
+    h2: "24px",
+    h3: "20px",
+    h4: "16px",
+  };
+  return (
+    <Tag
+      style={{
+        margin: "0 0 16px",
+        fontSize: sizes[level || "h2"],
+        fontWeight: 600,
+      }}
+    >
+      {text}
+    </Tag>
+  );
+}

package/src/components/dashboard/List/List.stories.tsx

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { List } from "./index.js";
+
+const meta: Meta<typeof List> = {
+  title: "Dashboard/List",
+  component: List,
+};
+export default meta;
+type Story = StoryObj<typeof List>;
+
+export const Default: Story = {
+  render: () => (
+    <List element={{ props: { dataPath: "items", emptyMessage: "No items" } }}>
+      <div
+        style={{ padding: "8px 0", borderBottom: "1px solid var(--border)" }}
+      >
+        Item 1
+      </div>
+      <div
+        style={{ padding: "8px 0", borderBottom: "1px solid var(--border)" }}
+      >
+        Item 2
+      </div>
+      <div style={{ padding: "8px 0" }}>Item 3</div>
+    </List>
+  ),
+};
+
+export const Empty: Story = {
+  render: () => (
+    <List
+      element={{ props: { dataPath: "items", emptyMessage: "Nothing here" } }}
+    >
+      {null}
+    </List>
+  ),
+};

package/src/components/dashboard/List/index.tsx

@@ -0,0 +1,24 @@
+import { dashboardCatalog } from "../../../lib/catalog.js";
+import type { CatalogueComponentProps } from "../../../lib/component-catalog.js";
+
+export function List({
+  element,
+  children,
+}: CatalogueComponentProps<typeof dashboardCatalog.components.List>) {
+  const { dataPath, emptyMessage } = element.props;
+
+  return (
+    <div>
+      {children}
+      <p
+        style={{
+          margin: "8px 0 0",
+          fontSize: 12,
+          color: "hsl(var(--muted-foreground))",
+        }}
+      >
+        Data: {dataPath} {emptyMessage && `| Empty: "${emptyMessage}"`}
+      </p>
+    </div>
+  );
+}

package/src/components/dashboard/Metric/Metric.stories.tsx

@@ -0,0 +1,65 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Metric } from "./index.js";
+
+const meta: Meta<typeof Metric> = {
+  title: "Dashboard/Metric",
+  component: Metric,
+};
+export default meta;
+type Story = StoryObj<typeof Metric>;
+
+export const TrendUp: Story = {
+  args: {
+    element: {
+      props: {
+        label: "Total Users",
+        valuePath: "1,234",
+        format: "number",
+        trend: "up",
+        trendValue: "12%",
+      },
+    },
+  },
+};
+
+export const TrendDown: Story = {
+  args: {
+    element: {
+      props: {
+        label: "Bounce Rate",
+        valuePath: "23%",
+        format: "percent",
+        trend: "down",
+        trendValue: "5%",
+      },
+    },
+  },
+};
+
+export const Neutral: Story = {
+  args: {
+    element: {
+      props: {
+        label: "Sessions",
+        valuePath: "890",
+        format: "number",
+        trend: "neutral",
+        trendValue: "0%",
+      },
+    },
+  },
+};
+
+export const NoTrend: Story = {
+  args: {
+    element: {
+      props: {
+        label: "Revenue",
+        valuePath: "$45,678",
+        format: "currency",
+        trend: null,
+        trendValue: null,
+      },
+    },
+  },
+};

package/src/components/dashboard/Metric/index.tsx

@@ -0,0 +1,36 @@
+import { dashboardCatalog } from "../../../lib/catalog.js";
+import type { CatalogueComponentProps } from "../../../lib/component-catalog.js";
+
+export function Metric({
+  element,
+}: CatalogueComponentProps<typeof dashboardCatalog.components.Metric>) {
+  const { label, valuePath, trend, trendValue } = element.props;
+
+  // For example page, we just display the valuePath as placeholder
+  const displayValue = valuePath;
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
+      <span style={{ fontSize: 14, color: "hsl(var(--muted-foreground))" }}>
+        {label}
+      </span>
+      <span style={{ fontSize: 32, fontWeight: 600 }}>{displayValue}</span>
+      {trendValue && (
+        <span
+          style={{
+            fontSize: 14,
+            color:
+              trend === "up"
+                ? "#22c55e"
+                : trend === "down"
+                  ? "#ef4444"
+                  : "hsl(var(--muted-foreground))",
+          }}
+        >
+          {trend === "up" ? "+" : trend === "down" ? "-" : ""}
+          {trendValue}
+        </span>
+      )}
+    </div>
+  );
+}