@kopai/ui 0.0.5 → 0.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kopai/ui",
-  "version": "0.0.5",
+  "version": "0.1.0",
   "license": "Apache-2.0",
   "author": "Vladimir Adamic",
   "repository": {
@@ -18,33 +18,51 @@
       "types": "./dist/index.d.mts",
       "import": "./dist/index.mjs",
       "require": "./dist/index.cjs"
-    }
+    },
+    "./globals.css": "./src/styles/globals.css"
   },
   "main": "./dist/index.cjs",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.mts",
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
   "dependencies": {
-    "@kopai/core": "0.5.0"
+    "@tanstack/react-query": "^5",
+    "@tanstack/react-virtual": "^3.11.2",
+    "recharts": "^2.15.4",
+    "@kopai/core": "0.5.0",
+    "@kopai/sdk": "0.2.3"
   },
   "peerDependencies": {
     "react": "^19.2.4",
     "react-dom": "^19.2.4"
   },
   "devDependencies": {
+    "@storybook/addon-docs": "^8.6.14",
+    "@storybook/react": "^8.6.14",
+    "@storybook/react-vite": "^8.6.14",
+    "@testing-library/react": "^16.3.0",
     "@types/react": "^19.2.10",
     "@types/react-dom": "^19.1.0",
+    "@vitejs/plugin-react": "^4.5.2",
+    "autoprefixer": "^10.4.20",
+    "jsdom": "^26.1.0",
+    "postcss": "^8.5.3",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
-    "tsdown": "^0.20.1",
+    "storybook": "^8.6.14",
+    "tailwindcss": "^3.4.17",
+    "tsdown": "^0.20.3",
+    "vite": "^6.3.5",
     "@kopai/tsconfig": "0.2.0"
   },
   "scripts": {
     "build": "tsdown",
-    "dev": "tsdown --watch",
     "lint": "eslint src",
-    "type-check": "tsc --noEmit"
+    "type-check": "tsc --noEmit",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   }
 }

package/src/components/KeyboardShortcuts/KeyboardShortcutsProvider.tsx

@@ -0,0 +1,113 @@
+import { useState, useCallback, useEffect, useMemo } from "react";
+import type { ReactNode } from "react";
+import type { ShortcutGroup, ShortcutsRegistry } from "./types.js";
+import { KeyboardShortcutsContext } from "./context.js";
+import { ShortcutsHelpDialog } from "./ShortcutsHelpDialog.js";
+
+const GENERAL_GROUP: ShortcutGroup = {
+  name: "General",
+  shortcuts: [
+    { keys: ["Shift", "?"], description: "Toggle shortcuts help" },
+    { keys: ["Shift", "S"], description: "Services tab" },
+    { keys: ["Shift", "L"], description: "Logs tab" },
+    { keys: ["Shift", "M"], description: "Metrics tab" },
+  ],
+};
+
+interface KeyboardShortcutsProviderProps {
+  children: ReactNode;
+  onNavigateServices: () => void;
+  onNavigateLogs: () => void;
+  onNavigateMetrics: () => void;
+}
+
+export function KeyboardShortcutsProvider({
+  children,
+  onNavigateServices,
+  onNavigateLogs,
+  onNavigateMetrics,
+}: KeyboardShortcutsProviderProps) {
+  const [registry, setRegistry] = useState<ShortcutsRegistry>(() => new Map());
+  const [isOpen, setIsOpen] = useState(false);
+
+  const register = useCallback((id: string, group: ShortcutGroup) => {
+    setRegistry((prev) => {
+      const next = new Map(prev);
+      next.set(id, group);
+      return next;
+    });
+  }, []);
+
+  const unregister = useCallback((id: string) => {
+    setRegistry((prev) => {
+      const next = new Map(prev);
+      next.delete(id);
+      return next;
+    });
+  }, []);
+
+  useEffect(() => {
+    function handleKeyDown(e: KeyboardEvent) {
+      const target = e.target as HTMLElement;
+      if (
+        target.tagName === "INPUT" ||
+        target.tagName === "TEXTAREA" ||
+        target.tagName === "SELECT" ||
+        target.isContentEditable
+      ) {
+        return;
+      }
+
+      if (e.shiftKey && e.key === "?") {
+        e.preventDefault();
+        setIsOpen((v) => !v);
+        return;
+      }
+
+      if (e.key === "Escape" && isOpen) {
+        e.preventDefault();
+        setIsOpen(false);
+        return;
+      }
+
+      if (e.shiftKey && e.key === "S") {
+        e.preventDefault();
+        onNavigateServices();
+        return;
+      }
+      if (e.shiftKey && e.key === "L") {
+        e.preventDefault();
+        onNavigateLogs();
+        return;
+      }
+      if (e.shiftKey && e.key === "M") {
+        e.preventDefault();
+        onNavigateMetrics();
+        return;
+      }
+    }
+
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [isOpen, onNavigateServices, onNavigateLogs, onNavigateMetrics]);
+
+  const groups = useMemo(() => {
+    return [GENERAL_GROUP, ...registry.values()];
+  }, [registry]);
+
+  const contextValue = useMemo(
+    () => ({ register, unregister }),
+    [register, unregister]
+  );
+
+  return (
+    <KeyboardShortcutsContext.Provider value={contextValue}>
+      {children}
+      <ShortcutsHelpDialog
+        open={isOpen}
+        onClose={() => setIsOpen(false)}
+        groups={groups}
+      />
+    </KeyboardShortcutsContext.Provider>
+  );
+}

package/src/components/KeyboardShortcuts/ShortcutsHelpDialog.tsx

@@ -0,0 +1,82 @@
+import type { ShortcutGroup } from "./types.js";
+
+interface ShortcutsHelpDialogProps {
+  open: boolean;
+  onClose: () => void;
+  groups: ShortcutGroup[];
+}
+
+export function ShortcutsHelpDialog({
+  open,
+  onClose,
+  groups,
+}: ShortcutsHelpDialogProps) {
+  if (!open) return null;
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Escape") {
+      e.stopPropagation();
+      onClose();
+    }
+  };
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/60"
+      onClick={onClose}
+      onKeyDown={handleKeyDown}
+    >
+      <div
+        role="dialog"
+        aria-modal="true"
+        aria-label="Keyboard Shortcuts"
+        className="bg-zinc-900 border border-zinc-700 rounded-lg shadow-xl max-w-2xl w-full mx-4 max-h-[80vh] overflow-y-auto"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="flex items-center justify-between px-6 py-4 border-b border-zinc-700">
+          <h2 className="text-lg font-semibold text-zinc-100">
+            Keyboard Shortcuts
+          </h2>
+          <button
+            onClick={onClose}
+            aria-label="Close"
+            className="text-zinc-400 hover:text-zinc-200 text-xl leading-none"
+          >
+            &times;
+          </button>
+        </div>
+        <div className="p-6 grid grid-cols-1 sm:grid-cols-2 gap-6">
+          {groups.map((group) => (
+            <div key={group.name}>
+              <h3 className="text-sm font-medium text-zinc-400 mb-3">
+                {group.name}
+              </h3>
+              <ul className="space-y-2">
+                {group.shortcuts.map((shortcut) => (
+                  <li
+                    key={shortcut.keys.join("+")}
+                    className="flex items-center justify-between text-sm"
+                  >
+                    <span className="text-zinc-300">
+                      {shortcut.description}
+                    </span>
+                    <span className="flex gap-1 ml-4">
+                      {shortcut.keys.map((key) => (
+                        <kbd
+                          key={key}
+                          className="px-1.5 py-0.5 text-xs font-mono bg-zinc-800 border border-zinc-600 rounded text-zinc-300"
+                        >
+                          {key}
+                        </kbd>
+                      ))}
+                    </span>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/KeyboardShortcuts/context.ts

@@ -0,0 +1,23 @@
+import { createContext, useContext, useEffect } from "react";
+import type { ShortcutGroup } from "./types.js";
+
+interface KeyboardShortcutsContextValue {
+  register: (id: string, group: ShortcutGroup) => void;
+  unregister: (id: string) => void;
+}
+
+const noop = () => {};
+
+export const KeyboardShortcutsContext =
+  createContext<KeyboardShortcutsContextValue>({
+    register: noop,
+    unregister: noop,
+  });
+
+export function useRegisterShortcuts(id: string, group: ShortcutGroup) {
+  const { register, unregister } = useContext(KeyboardShortcutsContext);
+  useEffect(() => {
+    register(id, group);
+    return () => unregister(id);
+  }, [id, group, register, unregister]);
+}

package/src/components/KeyboardShortcuts/index.ts

@@ -0,0 +1,8 @@
+export { KeyboardShortcutsProvider } from "./KeyboardShortcutsProvider.js";
+export { ShortcutsHelpDialog } from "./ShortcutsHelpDialog.js";
+export { useRegisterShortcuts } from "./context.js";
+export type {
+  KeyboardShortcut,
+  ShortcutGroup,
+  ShortcutsRegistry,
+} from "./types.js";

package/src/components/KeyboardShortcuts/types.ts

@@ -0,0 +1,11 @@
+export interface KeyboardShortcut {
+  keys: string[];
+  description: string;
+}
+
+export interface ShortcutGroup {
+  name: string;
+  shortcuts: KeyboardShortcut[];
+}
+
+export type ShortcutsRegistry = Map<string, ShortcutGroup>;

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

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Badge } from "./index.js";
+
+const meta: Meta<typeof Badge> = {
+  title: "Dashboard/Badge",
+  component: Badge,
+};
+export default meta;
+type Story = StoryObj<typeof Badge>;
+
+export const Default: Story = {
+  args: { element: { props: { text: "Default", variant: "default" } } },
+};
+
+export const Success: Story = {
+  args: { element: { props: { text: "Success", variant: "success" } } },
+};
+
+export const Warning: Story = {
+  args: { element: { props: { text: "Warning", variant: "warning" } } },
+};
+
+export const Danger: Story = {
+  args: { element: { props: { text: "Danger", variant: "danger" } } },
+};
+
+export const Info: Story = {
+  args: { element: { props: { text: "Info", variant: "info" } } },
+};

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

@@ -0,0 +1,32 @@
+import { dashboardCatalog } from "../../../lib/catalog.js";
+import type { CatalogueComponentProps } from "../../../lib/component-catalog.js";
+
+export function Badge({
+  element,
+}: CatalogueComponentProps<typeof dashboardCatalog.components.Badge>) {
+  const { text, variant } = element.props;
+
+  const colors: Record<string, string> = {
+    default: "hsl(var(--foreground))",
+    success: "#22c55e",
+    warning: "#eab308",
+    danger: "#ef4444",
+    info: "hsl(var(--muted-foreground))",
+  };
+
+  return (
+    <span
+      style={{
+        display: "inline-block",
+        padding: "2px 8px",
+        borderRadius: 12,
+        fontSize: 12,
+        fontWeight: 500,
+        background: "hsl(var(--border))",
+        color: colors[variant || "default"],
+      }}
+    >
+      {text}
+    </span>
+  );
+}

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

@@ -0,0 +1,107 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Button } from "./index.js";
+
+const meta: Meta<typeof Button> = {
+  title: "Dashboard/Button",
+  component: Button,
+};
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+export const Primary: Story = {
+  args: {
+    element: {
+      props: {
+        label: "Primary",
+        variant: "primary",
+        size: "md",
+        action: "click",
+        disabled: null,
+      },
+    },
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    element: {
+      props: {
+        label: "Secondary",
+        variant: "secondary",
+        size: "md",
+        action: "click",
+        disabled: null,
+      },
+    },
+  },
+};
+
+export const Danger: Story = {
+  args: {
+    element: {
+      props: {
+        label: "Danger",
+        variant: "danger",
+        size: "md",
+        action: "click",
+        disabled: null,
+      },
+    },
+  },
+};
+
+export const Ghost: Story = {
+  args: {
+    element: {
+      props: {
+        label: "Ghost",
+        variant: "ghost",
+        size: "md",
+        action: "click",
+        disabled: null,
+      },
+    },
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    element: {
+      props: {
+        label: "Disabled",
+        variant: "primary",
+        size: "md",
+        action: "click",
+        disabled: true,
+      },
+    },
+  },
+};
+
+export const Small: Story = {
+  args: {
+    element: {
+      props: {
+        label: "Small",
+        variant: "primary",
+        size: "sm",
+        action: "click",
+        disabled: null,
+      },
+    },
+  },
+};
+
+export const Large: Story = {
+  args: {
+    element: {
+      props: {
+        label: "Large",
+        variant: "primary",
+        size: "lg",
+        action: "click",
+        disabled: null,
+      },
+    },
+  },
+};

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

@@ -0,0 +1,63 @@
+import { dashboardCatalog } from "../../../lib/catalog.js";
+import type { CatalogueComponentProps } from "../../../lib/component-catalog.js";
+
+export function Button({
+  element,
+}: CatalogueComponentProps<typeof dashboardCatalog.components.Button>) {
+  const { label, variant, size, action, disabled } = element.props;
+
+  const variants: Record<
+    string,
+    { bg: string; color: string; border: string }
+  > = {
+    primary: {
+      bg: "hsl(var(--foreground))",
+      color: "hsl(var(--background))",
+      border: "hsl(var(--foreground))",
+    },
+    secondary: {
+      bg: "hsl(var(--card))",
+      color: "hsl(var(--foreground))",
+      border: "hsl(var(--border))",
+    },
+    danger: {
+      bg: "#ef4444",
+      color: "white",
+      border: "#ef4444",
+    },
+    ghost: {
+      bg: "transparent",
+      color: "hsl(var(--foreground))",
+      border: "transparent",
+    },
+  };
+
+  const sizes: Record<string, { padding: string; fontSize: number }> = {
+    sm: { padding: "6px 12px", fontSize: 12 },
+    md: { padding: "8px 16px", fontSize: 14 },
+    lg: { padding: "12px 24px", fontSize: 16 },
+  };
+
+  const v = variants[variant || "primary"] ?? variants["primary"]!;
+  const s = sizes[size || "md"] ?? sizes["md"]!;
+
+  return (
+    <button
+      disabled={disabled || false}
+      onClick={() => console.log("Action:", action)}
+      style={{
+        padding: s.padding,
+        fontSize: s.fontSize,
+        fontWeight: 500,
+        borderRadius: "var(--radius)",
+        border: `1px solid ${v.border}`,
+        background: v.bg,
+        color: v.color,
+        cursor: disabled ? "not-allowed" : "pointer",
+        opacity: disabled ? 0.5 : 1,
+      }}
+    >
+      {label}
+    </button>
+  );
+}

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

@@ -0,0 +1,81 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Card } from "./index.js";
+
+const meta: Meta<typeof Card> = {
+  title: "Dashboard/Card",
+  component: Card,
+};
+export default meta;
+type Story = StoryObj<typeof Card>;
+
+export const Default: Story = {
+  render: () => (
+    <Card
+      element={{
+        key: "card",
+        type: "Card",
+        children: [],
+        parentKey: "",
+        props: {
+          title: "Card Title",
+          description: "A description",
+          padding: "md",
+        },
+      }}
+      hasData={false}
+    >
+      <p style={{ margin: 0 }}>Card content goes here</p>
+    </Card>
+  ),
+};
+
+export const TitleOnly: Story = {
+  render: () => (
+    <Card
+      element={{
+        key: "card",
+        type: "Card",
+        children: [],
+        parentKey: "",
+        props: { title: "Title Only", description: null, padding: null },
+      }}
+      hasData={false}
+    >
+      <p style={{ margin: 0 }}>Content</p>
+    </Card>
+  ),
+};
+
+export const NoHeader: Story = {
+  render: () => (
+    <Card
+      element={{
+        key: "card",
+        type: "Card",
+        children: [],
+        parentKey: "",
+        props: { title: null, description: null, padding: "lg" },
+      }}
+      hasData={false}
+    >
+      <p style={{ margin: 0 }}>Card without header</p>
+    </Card>
+  ),
+};
+
+export const SmallPadding: Story = {
+  render: () => (
+    <Card
+      element={{
+        key: "card",
+        type: "Card",
+        children: [],
+        parentKey: "",
+        props: { title: "Compact", description: null, padding: "sm" },
+      }}
+      hasData={false}
+    >
+      <p style={{ margin: 0 }}>Small padding</p>
+    </Card>
+  ),
+};

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

@@ -0,0 +1,58 @@
+import { dashboardCatalog } from "../../../lib/catalog.js";
+import type { RendererComponentProps } from "../../../lib/renderer.js";
+
+export function Card({
+  element,
+  children,
+}: RendererComponentProps<typeof dashboardCatalog.components.Card>) {
+  const { title, description, padding } = element.props as {
+    title?: string | null;
+    description?: string | null;
+    padding?: string | null;
+  };
+
+  const paddings: Record<string, string> = {
+    sm: "12px",
+    md: "16px",
+    lg: "24px",
+  };
+
+  return (
+    <div
+      style={{
+        background: "hsl(var(--card))",
+        border: "1px solid hsl(var(--border))",
+        borderRadius: "var(--radius)",
+      }}
+    >
+      {(title || description) && (
+        <div
+          style={{
+            padding: "16px 20px",
+            borderBottom: "1px solid hsl(var(--border))",
+          }}
+        >
+          {title && (
+            <h3 style={{ margin: 0, fontSize: 16, fontWeight: 600 }}>
+              {title}
+            </h3>
+          )}
+          {description && (
+            <p
+              style={{
+                margin: "4px 0 0",
+                fontSize: 14,
+                color: "hsl(var(--muted-foreground))",
+              }}
+            >
+              {description}
+            </p>
+          )}
+        </div>
+      )}
+      <div style={{ padding: paddings[padding || ""] || "16px" }}>
+        {children}
+      </div>
+    </div>
+  );
+}