@checkstack/ui 1.8.0 → 1.8.1

package/.storybook/main.ts

@@ -0,0 +1,22 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+
+const config: StorybookConfig = {
+  stories: [
+    "../stories/**/*.mdx",
+    "../stories/**/*.stories.@(ts|tsx)",
+  ],
+  addons: [
+    "@storybook/addon-docs",
+    "@storybook/addon-themes",
+    "@storybook/addon-a11y",
+  ],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+  typescript: {
+    reactDocgen: "react-docgen",
+  },
+};
+
+export default config;

package/.storybook/manager-head.html

@@ -0,0 +1,2 @@
+<title>Checkstack UI — Component Library</title>
+<meta name="description" content="Component library for Checkstack plugin developers." />

package/.storybook/mock-access-api.ts

@@ -0,0 +1,5 @@
+import type { AccessApi } from "@checkstack/frontend-api";
+
+export const mockAccessApi: AccessApi = {
+  useAccess: () => ({ loading: false, allowed: true }),
+};

package/.storybook/preview.css

@@ -0,0 +1,5 @@
+@import "../src/themes.css";
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/.storybook/preview.tsx

@@ -0,0 +1,73 @@
+import type { Preview } from "@storybook/react";
+import { withThemeByClassName } from "@storybook/addon-themes";
+import React from "react";
+import { MemoryRouter } from "react-router-dom";
+import {
+  ApiRegistryBuilder,
+  ApiProvider,
+  accessApiRef,
+} from "@checkstack/frontend-api";
+import { ThemeProvider } from "../src/components/ThemeProvider";
+import { ToastProvider } from "../src/components/ToastProvider";
+import { PerformanceProvider } from "../src/components/PerformanceProvider";
+import { mockAccessApi } from "./mock-access-api";
+import "./preview.css";
+
+const apiRegistry = new ApiRegistryBuilder()
+  .register(accessApiRef, mockAccessApi)
+  .build();
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+    backgrounds: {
+      default: "app",
+      values: [
+        { name: "app", value: "hsl(0 0% 100%)" },
+        { name: "app-dark", value: "hsl(240 10% 4%)" },
+      ],
+    },
+    layout: "padded",
+    options: {
+      storySort: {
+        order: [
+          "Introduction",
+          "Foundations",
+          "Components",
+          ["Inputs", "Display", "Feedback", "Navigation", "Overlays", "Forms", "Layout", "Data"],
+        ],
+      },
+    },
+  },
+  decorators: [
+    withThemeByClassName({
+      themes: {
+        light: "light",
+        dark: "dark",
+      },
+      defaultTheme: "light",
+    }),
+    (Story) => (
+      <MemoryRouter>
+        <ApiProvider registry={apiRegistry}>
+          <ThemeProvider defaultTheme="light" storageKey="checkstack-storybook-theme">
+            <ToastProvider>
+              <PerformanceProvider>
+                <div className="bg-background text-foreground p-4">
+                  <Story />
+                </div>
+              </PerformanceProvider>
+            </ToastProvider>
+          </ThemeProvider>
+        </ApiProvider>
+      </MemoryRouter>
+    ),
+  ],
+};
+
+export default preview;

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @checkstack/ui
 
+## 1.8.1
+
+### Patch Changes
+
+- Updated dependencies [9016526]
+  - @checkstack/common@0.10.0
+  - @checkstack/frontend-api@0.5.1
+
 ## 1.8.0
 
 ### Minor Changes

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@checkstack/ui",
-  "version": "1.8.0",
+  "version": "1.8.1",
   "license": "Elastic-2.0",
   "type": "module",
   "main": "src/index.ts",
   "dependencies": {
-    "@checkstack/common": "0.8.0",
-    "@checkstack/frontend-api": "0.4.2",
+    "@checkstack/common": "0.9.0",
+    "@checkstack/frontend-api": "0.5.0",
     "@monaco-editor/react": "^4.7.0",
     "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-dialog": "^1.1.15",
@@ -23,26 +23,40 @@
     "monaco-editor": "^0.55.1",
     "react": "^18.2.0",
     "react-day-picker": "^9.13.0",
-    "react-dom": "^19.2.5",
+    "react-dom": "^18.2.0",
     "react-markdown": "^10.1.0",
     "react-router-dom": "^6.20.0",
     "recharts": "^3.6.0",
     "tailwind-merge": "^2.2.0"
   },
   "devDependencies": {
-    "@checkstack/scripts": "0.3.0",
+    "@checkstack/scripts": "0.3.1",
     "@checkstack/test-utils-frontend": "0.0.5",
     "@checkstack/tsconfig": "0.0.7",
+    "@storybook/addon-a11y": "^10.3.6",
+    "@storybook/addon-docs": "^10.3.6",
+    "@storybook/addon-themes": "^10.3.6",
+    "@storybook/react": "^10.3.6",
+    "@storybook/react-vite": "^10.3.6",
     "@testing-library/react": "^16.0.0",
     "@types/react": "^18.2.0",
-    "@types/react-dom": "^19.2.3",
-    "typescript": "^5.0.0"
+    "@types/react-dom": "^18.2.0",
+    "@vitejs/plugin-react": "^6.0.1",
+    "autoprefixer": "^10.4.18",
+    "postcss": "^8.4.35",
+    "storybook": "^10.3.6",
+    "tailwindcss": "^3.4.1",
+    "tailwindcss-animate": "^1.0.7",
+    "typescript": "^5.0.0",
+    "vite": "^8.0.8"
   },
   "scripts": {
     "typecheck": "tsgo -b",
     "lint": "bun run lint:code",
     "lint:code": "eslint . --max-warnings 0",
-    "test": "bun test"
+    "test": "bun test",
+    "storybook": "storybook dev -p 6006",
+    "storybook:build": "storybook build -o storybook-static"
   },
   "checkstack": {
     "type": "tooling"

package/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

package/stories/AccessDenied.stories.tsx

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { AccessDenied } from "../src/components/AccessDenied";
+
+const meta: Meta<typeof AccessDenied> = {
+  title: "Components/Feedback/AccessDenied",
+  component: AccessDenied,
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof AccessDenied>;
+
+export const Default: Story = {};
+
+export const CustomMessage: Story = {
+  args: { message: "You need 'catalog.manage' to view this page." },
+};

package/stories/AccessGate.stories.tsx

@@ -0,0 +1,49 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { AccessGate } from "../src/components/AccessGate";
+
+const allowed = () => ({ loading: false, allowed: true });
+const denied = () => ({ loading: false, allowed: false });
+const loading = () => ({ loading: true, allowed: false });
+
+const meta: Meta<typeof AccessGate> = {
+  title: "Components/Feedback/AccessGate",
+  component: AccessGate,
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof AccessGate>;
+
+export const Allowed: Story = {
+  args: {
+    accessRuleId: "demo.read",
+    useAccess: allowed,
+    children: <p className="text-sm">Gated content visible.</p>,
+  },
+};
+
+export const Hidden: Story = {
+  args: {
+    accessRuleId: "demo.read",
+    useAccess: denied,
+    children: <p className="text-sm">You should not see this.</p>,
+  },
+};
+
+export const ShowDenied: Story = {
+  args: {
+    accessRuleId: "demo.read",
+    useAccess: denied,
+    showDenied: true,
+    deniedMessage: "Demo access denied.",
+    children: <p>Hidden</p>,
+  },
+};
+
+export const Loading: Story = {
+  args: {
+    accessRuleId: "demo.read",
+    useAccess: loading,
+    children: <p>Resolves once access loads.</p>,
+  },
+};

package/stories/Accordion.stories.tsx

@@ -0,0 +1,56 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "../src/components/Accordion";
+
+const meta: Meta<typeof Accordion> = {
+  title: "Components/Display/Accordion",
+  component: Accordion,
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof Accordion>;
+
+export const Single: Story = {
+  render: () => (
+    <Accordion type="single" collapsible className="max-w-md">
+      <AccordionItem value="a">
+        <AccordionTrigger>What is a health check?</AccordionTrigger>
+        <AccordionContent>
+          A periodic probe that asserts a system property and reports a status.
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="b">
+        <AccordionTrigger>What is a strategy?</AccordionTrigger>
+        <AccordionContent>
+          A pluggable provider that defines how a check is executed.
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="c">
+        <AccordionTrigger>What is a satellite?</AccordionTrigger>
+        <AccordionContent>
+          A standalone agent that runs checks from a remote network location.
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  ),
+};
+
+export const Multiple: Story = {
+  render: () => (
+    <Accordion type="multiple" className="max-w-md">
+      <AccordionItem value="a">
+        <AccordionTrigger>Section one</AccordionTrigger>
+        <AccordionContent>Content one.</AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="b">
+        <AccordionTrigger>Section two</AccordionTrigger>
+        <AccordionContent>Content two.</AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  ),
+};

package/stories/Alert.stories.tsx

@@ -0,0 +1,88 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { CircleAlert, CircleCheck, Info, TriangleAlert } from "lucide-react";
+import {
+  Alert,
+  AlertContent,
+  AlertDescription,
+  AlertIcon,
+  AlertTitle,
+} from "../src/components/Alert";
+
+const meta: Meta<typeof Alert> = {
+  title: "Components/Feedback/Alert",
+  component: Alert,
+  tags: ["autodocs"],
+  argTypes: {
+    variant: {
+      control: "select",
+      options: ["default", "success", "warning", "error", "info"],
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Alert>;
+
+export const Default: Story = {
+  args: { variant: "default" },
+  render: (args) => (
+    <Alert {...args}>
+      <AlertIcon>
+        <Info className="h-4 w-4" />
+      </AlertIcon>
+      <AlertContent>
+        <AlertTitle>Heads up</AlertTitle>
+        <AlertDescription>
+          This is an informational alert for plugin developers.
+        </AlertDescription>
+      </AlertContent>
+    </Alert>
+  ),
+};
+
+export const Success: Story = {
+  args: { variant: "success" },
+  render: (args) => (
+    <Alert {...args}>
+      <AlertIcon>
+        <CircleCheck className="h-4 w-4" />
+      </AlertIcon>
+      <AlertContent>
+        <AlertTitle>Saved</AlertTitle>
+        <AlertDescription>Plugin configuration was saved.</AlertDescription>
+      </AlertContent>
+    </Alert>
+  ),
+};
+
+export const Warning: Story = {
+  args: { variant: "warning" },
+  render: (args) => (
+    <Alert {...args}>
+      <AlertIcon>
+        <TriangleAlert className="h-4 w-4" />
+      </AlertIcon>
+      <AlertContent>
+        <AlertTitle>Heads up</AlertTitle>
+        <AlertDescription>
+          The satellite token will expire in 24 hours.
+        </AlertDescription>
+      </AlertContent>
+    </Alert>
+  ),
+};
+
+export const Error: Story = {
+  args: { variant: "error" },
+  render: (args) => (
+    <Alert {...args}>
+      <AlertIcon>
+        <CircleAlert className="h-4 w-4" />
+      </AlertIcon>
+      <AlertContent>
+        <AlertTitle>Something went wrong</AlertTitle>
+        <AlertDescription>The health check failed to start.</AlertDescription>
+      </AlertContent>
+    </Alert>
+  ),
+};

package/stories/AmbientBackground.stories.tsx

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { AmbientBackground } from "../src/components/AmbientBackground";
+
+const meta: Meta<typeof AmbientBackground> = {
+  title: "Components/Layout/AmbientBackground",
+  component: AmbientBackground,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "fullscreen",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof AmbientBackground>;
+
+export const Default: Story = {
+  render: () => (
+    <AmbientBackground>
+      <div className="max-w-3xl mx-auto py-24 px-6">
+        <h1 className="text-4xl font-bold tracking-tight">Inverse glow grid</h1>
+        <p className="mt-4 text-muted-foreground">
+          Aurora blobs and a grid mask, with automatic graceful degradation when{" "}
+          <code>usePerformance().isLowPower</code> is true.
+        </p>
+      </div>
+    </AmbientBackground>
+  ),
+};

package/stories/AnimatedCounter.stories.tsx

@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useEffect, useState } from "react";
+import { AnimatedCounter } from "../src/components/AnimatedCounter";
+
+const meta: Meta<typeof AnimatedCounter> = {
+  title: "Components/Display/AnimatedCounter",
+  component: AnimatedCounter,
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof AnimatedCounter>;
+
+const Demo = () => {
+  const [value, setValue] = useState(0);
+  useEffect(() => {
+    const id = setInterval(
+      () => setValue((v) => (v >= 1000 ? 0 : v + Math.floor(Math.random() * 200))),
+      1500,
+    );
+    return () => clearInterval(id);
+  }, []);
+  return (
+    <div className="text-4xl font-bold">
+      <AnimatedCounter value={value} />
+    </div>
+  );
+};
+
+export const TickingUp: Story = {
+  render: () => <Demo />,
+};
+
+export const StaticValue: Story = {
+  args: { value: 1042 },
+  render: (args) => (
+    <span className="text-3xl font-bold">
+      <AnimatedCounter {...args} />
+    </span>
+  ),
+};

package/stories/AnimatedNumber.stories.tsx

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useEffect, useState } from "react";
+import { AnimatedNumber } from "../src/components/AnimatedNumber";
+
+const meta: Meta<typeof AnimatedNumber> = {
+  title: "Components/Display/AnimatedNumber",
+  component: AnimatedNumber,
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof AnimatedNumber>;
+
+const Demo = () => {
+  const [value, setValue] = useState(99.95);
+  useEffect(() => {
+    const id = setInterval(
+      () => setValue(95 + Math.random() * 5),
+      1500,
+    );
+    return () => clearInterval(id);
+  }, []);
+  return (
+    <div className="text-3xl font-bold text-success tabular-nums">
+      <AnimatedNumber value={value} suffix="%" decimals={2} />
+    </div>
+  );
+};
+
+export const Uptime: Story = { render: () => <Demo /> };
+
+export const NA: Story = {
+  args: { value: undefined },
+  render: (args) => (
+    <span className="text-2xl font-bold">
+      <AnimatedNumber {...args} />
+    </span>
+  ),
+};

package/stories/BackLink.stories.tsx

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { BackLink } from "../src/components/BackLink";
+
+const meta: Meta<typeof BackLink> = {
+  title: "Components/Navigation/BackLink",
+  component: BackLink,
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof BackLink>;
+
+export const Default: Story = {
+  args: {
+    onClick: () => {
+      /* navigate back */
+    },
+  },
+};
+
+export const CustomLabel: Story = {
+  args: {
+    children: "Back to systems",
+    onClick: () => {
+      /* navigate back */
+    },
+  },
+};
+
+export const AsLink: Story = {
+  args: { to: "/catalog" },
+};

package/stories/Badge.stories.tsx

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Badge } from "../src/components/Badge";
+
+const meta: Meta<typeof Badge> = {
+  title: "Components/Display/Badge",
+  component: Badge,
+  tags: ["autodocs"],
+  argTypes: {
+    variant: {
+      control: "select",
+      options: ["default", "secondary", "destructive", "outline", "success", "warning", "info"],
+    },
+  },
+  args: {
+    children: "Badge",
+    variant: "default",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Badge>;
+
+export const Default: Story = {};
+
+export const Variants: Story = {
+  render: () => (
+    <div className="flex flex-wrap gap-2">
+      <Badge variant="default">Default</Badge>
+      <Badge variant="secondary">Secondary</Badge>
+      <Badge variant="destructive">Destructive</Badge>
+      <Badge variant="outline">Outline</Badge>
+      <Badge variant="success">Success</Badge>
+      <Badge variant="warning">Warning</Badge>
+      <Badge variant="info">Info</Badge>
+    </div>
+  ),
+};

package/stories/Button.stories.tsx

@@ -0,0 +1,57 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Button } from "../src/components/Button";
+
+const meta: Meta<typeof Button> = {
+  title: "Components/Inputs/Button",
+  component: Button,
+  tags: ["autodocs"],
+  argTypes: {
+    variant: {
+      control: "select",
+      options: ["primary", "secondary", "outline", "ghost", "destructive", "link"],
+    },
+    size: {
+      control: "select",
+      options: ["default", "sm", "lg", "icon"],
+    },
+    disabled: { control: "boolean" },
+  },
+  args: {
+    children: "Click me",
+    variant: "primary",
+    size: "default",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+export const Primary: Story = {};
+
+export const Secondary: Story = { args: { variant: "secondary" } };
+
+export const Outline: Story = { args: { variant: "outline" } };
+
+export const Ghost: Story = { args: { variant: "ghost" } };
+
+export const Destructive: Story = { args: { variant: "destructive" } };
+
+export const Link: Story = { args: { variant: "link" } };
+
+export const AllSizes: Story = {
+  render: (args) => (
+    <div className="flex items-center gap-3">
+      <Button {...args} size="sm">
+        Small
+      </Button>
+      <Button {...args} size="default">
+        Default
+      </Button>
+      <Button {...args} size="lg">
+        Large
+      </Button>
+    </div>
+  ),
+};
+
+export const Disabled: Story = { args: { disabled: true } };