@danielthurau/atlas-labs-codex 0.1.0

package/components/react/Modal/index.ts

@@ -0,0 +1,2 @@
+export { Modal, type ModalProps } from "./Modal";
+

package/components/react/RefreshButton/RefreshButton.module.css

@@ -0,0 +1,202 @@
+.container {
+  position: relative;
+  display: inline-flex;
+  flex-direction: column;
+}
+
+.buttonGroup {
+  display: flex;
+  position: relative;
+  flex-direction: column;
+}
+
+.buttons {
+  display: flex;
+}
+
+/* Main refresh button */
+.refreshButton {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-2) var(--space-3);
+  background: var(--color-bg-subtle);
+  border: 1px solid var(--color-border-default);
+  border-right: none;
+  border-radius: var(--radius-md) 0 0 var(--radius-md);
+  font-family: inherit;
+  font-size: var(--text-sm);
+  color: var(--color-text-primary);
+  cursor: pointer;
+  transition: background 150ms, color 150ms;
+}
+
+/* When progress bar is shown, remove bottom radius */
+.buttonGroup[data-has-progress="true"] .refreshButton {
+  border-radius: var(--radius-md) 0 0 0;
+}
+
+.refreshButton:hover:not(:disabled) {
+  background: var(--color-bg-muted);
+}
+
+.refreshButton:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.icon {
+  display: inline-block;
+  font-size: var(--text-base);
+}
+
+.spinning {
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+/* Dropdown trigger */
+.dropdownTrigger {
+  display: flex;
+  align-items: center;
+  gap: var(--space-1);
+  padding: var(--space-2) var(--space-2);
+  background: var(--color-bg-subtle);
+  border: 1px solid var(--color-border-default);
+  border-radius: 0 var(--radius-md) var(--radius-md) 0;
+  font-family: inherit;
+  font-size: var(--text-xs);
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  transition: background 150ms;
+  min-width: 60px;
+  justify-content: center;
+}
+
+/* When progress bar is shown, remove bottom radius */
+.buttonGroup[data-has-progress="true"] .dropdownTrigger {
+  border-radius: 0 var(--radius-md) 0 0;
+}
+
+.dropdownTrigger:hover:not(:disabled) {
+  background: var(--color-bg-muted);
+}
+
+.dropdownTrigger:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.intervalLabel {
+  font-weight: var(--font-medium);
+}
+
+.chevron {
+  font-size: 8px;
+  color: var(--color-text-muted);
+}
+
+/* Progress bar */
+.progressBar {
+  width: 100%;
+  height: 6px;
+  background: var(--color-bg-muted);
+  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
+  overflow: hidden;
+  border: 1px solid var(--color-border-default);
+  border-top: none;
+}
+
+.progressFill {
+  height: 100%;
+  background: linear-gradient(90deg, var(--color-intent-primary), var(--color-indigo-400));
+  transition: width 100ms linear;
+  min-width: 2px; /* Ensure always visible */
+}
+
+/* Dropdown menu */
+.dropdown {
+  position: absolute;
+  top: calc(100% + var(--space-1));
+  right: 0;
+  min-width: 120px;
+  background: var(--color-bg-elevated);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-lg);
+  z-index: 100;
+  overflow: hidden;
+}
+
+.dropdownItem {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: var(--space-2) var(--space-3);
+  background: transparent;
+  border: none;
+  font-family: inherit;
+  font-size: var(--text-sm);
+  color: var(--color-text-primary);
+  cursor: pointer;
+  transition: background 150ms;
+  text-align: left;
+}
+
+.dropdownItem:hover {
+  background: var(--color-bg-subtle);
+}
+
+.dropdownItem.selected {
+  background: var(--color-intent-primary-bg);
+  color: var(--color-intent-primary);
+}
+
+.checkmark {
+  font-size: var(--text-xs);
+  color: var(--color-intent-primary);
+}
+
+/* Dropdown divider */
+.dropdownDivider {
+  height: 1px;
+  background: var(--color-border-default);
+  margin: var(--space-1) 0;
+}
+
+/* Check Now button in dropdown */
+.checkNow {
+  color: var(--color-text-secondary);
+  font-weight: var(--font-medium);
+}
+
+.checkNow:hover {
+  background: var(--color-bg-muted);
+  color: var(--color-text-primary);
+}
+
+.checkNow:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+/* Responsive */
+@media (max-width: 640px) {
+  .refreshButton span:not(.icon) {
+    display: none;
+  }
+  
+  .refreshButton {
+    padding: var(--space-2);
+  }
+  
+  .dropdownTrigger {
+    min-width: 50px;
+  }
+}
+

package/components/react/RefreshButton/RefreshButton.stories.tsx

@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { RefreshButton } from "./RefreshButton";
+
+const meta: Meta<typeof RefreshButton> = {
+  title: "Components/RefreshButton",
+  component: RefreshButton,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof RefreshButton>;
+
+const mockRefresh = async () => {
+  await new Promise((resolve) => setTimeout(resolve, 1000));
+};
+
+const mockForceCheck = async () => {
+  await new Promise((resolve) => setTimeout(resolve, 2000));
+};
+
+export const Default: Story = {
+  args: {
+    onRefresh: mockRefresh,
+  },
+};
+
+export const WithForceCheck: Story = {
+  args: {
+    onRefresh: mockRefresh,
+    onForceCheck: mockForceCheck,
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    onRefresh: mockRefresh,
+    disabled: true,
+  },
+};
+

package/components/react/RefreshButton/RefreshButton.tsx

@@ -0,0 +1,222 @@
+"use client";
+
+import { useState, useEffect, useRef, useCallback } from "react";
+import styles from "./RefreshButton.module.css";
+
+interface RefreshButtonProps {
+  onRefresh: () => Promise<void>;
+  onForceCheck?: () => Promise<void>;
+  disabled?: boolean;
+}
+
+type IntervalOption = {
+  label: string;
+  value: number | null; // null means manual only
+};
+
+const INTERVAL_OPTIONS: IntervalOption[] = [
+  { label: "Manual", value: null },
+  { label: "10s", value: 10000 },
+  { label: "30s", value: 30000 },
+  { label: "1m", value: 60000 },
+  { label: "5m", value: 300000 },
+];
+
+export function RefreshButton({ onRefresh, onForceCheck, disabled }: RefreshButtonProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [isRefreshing, setIsRefreshing] = useState(false);
+  const [isChecking, setIsChecking] = useState(false);
+  const [selectedInterval, setSelectedInterval] = useState<IntervalOption>(INTERVAL_OPTIONS[0]);
+  const [progress, setProgress] = useState(0);
+  const [timeLeft, setTimeLeft] = useState<number | null>(null);
+  
+  const intervalRef = useRef<NodeJS.Timeout | null>(null);
+  const progressRef = useRef<NodeJS.Timeout | null>(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const onRefreshRef = useRef(onRefresh);
+  const onForceCheckRef = useRef(onForceCheck);
+  
+  // Keep refs updated
+  useEffect(() => {
+    onRefreshRef.current = onRefresh;
+    onForceCheckRef.current = onForceCheck;
+  }, [onRefresh, onForceCheck]);
+
+  // Handle manual refresh
+  const handleRefresh = useCallback(async () => {
+    if (isRefreshing || disabled) return;
+    
+    setIsRefreshing(true);
+    setProgress(0);
+    
+    try {
+      await onRefreshRef.current();
+    } finally {
+      setIsRefreshing(false);
+      // Reset progress timer if auto-refresh is active
+      if (selectedInterval.value) {
+        setProgress(0);
+        setTimeLeft(selectedInterval.value);
+      }
+    }
+  }, [isRefreshing, disabled, selectedInterval.value]);
+
+  // Handle interval selection
+  const handleSelectInterval = (option: IntervalOption) => {
+    setSelectedInterval(option);
+    setIsOpen(false);
+    setProgress(0);
+    setTimeLeft(option.value);
+  };
+
+  // Handle force check (runs actual health checks)
+  const handleForceCheck = useCallback(async () => {
+    if (isChecking || disabled || !onForceCheckRef.current) return;
+    
+    setIsChecking(true);
+    setIsOpen(false);
+    
+    try {
+      await onForceCheckRef.current();
+    } finally {
+      setIsChecking(false);
+    }
+  }, [isChecking, disabled]);
+
+  // Auto-refresh logic
+  useEffect(() => {
+    // Clear existing intervals
+    if (intervalRef.current) clearInterval(intervalRef.current);
+    if (progressRef.current) clearInterval(progressRef.current);
+
+    if (!selectedInterval.value) {
+      setProgress(0);
+      setTimeLeft(null);
+      return;
+    }
+
+    const intervalMs = selectedInterval.value;
+    setProgress(0);
+    setTimeLeft(intervalMs);
+
+    // Progress update every 100ms
+    const progressStep = 100 / (intervalMs / 100);
+    progressRef.current = setInterval(() => {
+      setProgress((prev) => {
+        const next = prev + progressStep;
+        return next >= 100 ? 0 : next; // Reset to 0 when reaching 100
+      });
+      setTimeLeft((prev) => {
+        if (prev === null) return intervalMs;
+        const next = prev - 100;
+        return next <= 0 ? intervalMs : next; // Reset to full when reaching 0
+      });
+    }, 100);
+
+    // Trigger refresh at interval
+    intervalRef.current = setInterval(async () => {
+      setIsRefreshing(true);
+      try {
+        await onRefreshRef.current();
+      } finally {
+        setIsRefreshing(false);
+      }
+    }, intervalMs);
+
+    return () => {
+      if (intervalRef.current) clearInterval(intervalRef.current);
+      if (progressRef.current) clearInterval(progressRef.current);
+    };
+  }, [selectedInterval.value]);
+
+  // Close dropdown on outside click
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  const isAutoRefresh = selectedInterval.value !== null;
+
+  return (
+    <div className={styles.container} ref={dropdownRef}>
+      <div className={styles.buttonGroup} data-has-progress={isAutoRefresh}>
+        <div className={styles.buttons}>
+          {/* Main refresh button */}
+          <button
+            className={styles.refreshButton}
+            onClick={handleRefresh}
+            disabled={isRefreshing || disabled}
+            title="Refresh now"
+          >
+            <span className={`${styles.icon} ${isRefreshing ? styles.spinning : ""}`}>
+              ↻
+            </span>
+            {isRefreshing ? "Refreshing..." : "Refresh"}
+          </button>
+
+          {/* Dropdown trigger */}
+          <button
+            className={styles.dropdownTrigger}
+            onClick={() => setIsOpen(!isOpen)}
+            disabled={disabled}
+            title="Set auto-refresh interval"
+          >
+            <span className={styles.intervalLabel}>
+              {selectedInterval.label}
+            </span>
+            <span className={styles.chevron}>{isOpen ? "▲" : "▼"}</span>
+          </button>
+        </div>
+
+        {/* Progress bar - only shows when auto-refresh is active */}
+        {isAutoRefresh && (
+          <div className={styles.progressBar}>
+            <div 
+              className={styles.progressFill} 
+              style={{ width: `${progress}%` }}
+            />
+          </div>
+        )}
+      </div>
+
+      {/* Dropdown menu */}
+      {isOpen && (
+        <div className={styles.dropdown}>
+          {INTERVAL_OPTIONS.map((option) => (
+            <button
+              key={option.label}
+              className={`${styles.dropdownItem} ${
+                selectedInterval.label === option.label ? styles.selected : ""
+              }`}
+              onClick={() => handleSelectInterval(option)}
+            >
+              {option.label}
+              {selectedInterval.label === option.label && (
+                <span className={styles.checkmark}>✓</span>
+              )}
+            </button>
+          ))}
+          {onForceCheck && (
+            <>
+              <div className={styles.dropdownDivider} />
+              <button
+                className={`${styles.dropdownItem} ${styles.checkNow}`}
+                onClick={handleForceCheck}
+                disabled={isChecking}
+              >
+                {isChecking ? "Checking..." : "Check Now"}
+              </button>
+            </>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+

package/components/react/RefreshButton/index.ts

@@ -0,0 +1,2 @@
+export { RefreshButton } from "./RefreshButton";
+

package/components/react/Tabs/Tabs.module.css

@@ -0,0 +1,58 @@
+.root {
+  display: flex;
+  flex-direction: column;
+}
+
+.list {
+  display: flex;
+  gap: var(--space-1);
+  border-bottom: 1px solid var(--color-border-default);
+  margin-bottom: var(--space-4);
+}
+
+.trigger {
+  padding: var(--space-2) var(--space-4);
+  font-size: var(--text-sm);
+  font-weight: var(--font-medium);
+  color: var(--color-text-secondary);
+  background: transparent;
+  border: none;
+  border-bottom: 2px solid transparent;
+  margin-bottom: -1px;
+  cursor: pointer;
+  transition: color 150ms ease, border-color 150ms ease;
+}
+
+.trigger:hover:not(:disabled) {
+  color: var(--color-text-primary);
+}
+
+.trigger:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+  border-radius: var(--radius-sm);
+}
+
+.trigger[data-state="active"] {
+  color: var(--color-intent-primary);
+  border-bottom-color: var(--color-intent-primary);
+}
+
+.trigger:disabled {
+  color: var(--color-text-muted);
+  cursor: not-allowed;
+}
+
+.content {
+  outline: none;
+}
+
+.content:focus-visible {
+  box-shadow: var(--focus-ring);
+  border-radius: var(--radius-sm);
+}
+
+.content[data-state="inactive"] {
+  display: none;
+}
+

package/components/react/Tabs/Tabs.stories.tsx

@@ -0,0 +1,101 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Tabs } from "./Tabs";
+import { Card } from "../Card";
+
+const meta: Meta<typeof Tabs> = {
+  title: "Components/Tabs",
+  component: Tabs,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div style={{ width: "500px" }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    tabs: [
+      {
+        id: "account",
+        label: "Account",
+        content: (
+          <Card>
+            <h3>Account Settings</h3>
+            <p style={{ marginTop: "8px" }}>
+              Manage your account settings and preferences.
+            </p>
+          </Card>
+        ),
+      },
+      {
+        id: "password",
+        label: "Password",
+        content: (
+          <Card>
+            <h3>Password Settings</h3>
+            <p style={{ marginTop: "8px" }}>
+              Update your password and security options.
+            </p>
+          </Card>
+        ),
+      },
+      {
+        id: "notifications",
+        label: "Notifications",
+        content: (
+          <Card>
+            <h3>Notification Preferences</h3>
+            <p style={{ marginTop: "8px" }}>
+              Configure how you receive notifications.
+            </p>
+          </Card>
+        ),
+      },
+    ],
+  },
+};
+
+export const WithDisabledTab: Story = {
+  args: {
+    tabs: [
+      {
+        id: "active",
+        label: "Active",
+        content: <Card>This tab is active and clickable.</Card>,
+      },
+      {
+        id: "disabled",
+        label: "Disabled",
+        content: <Card>You shouldn't see this.</Card>,
+        disabled: true,
+      },
+      {
+        id: "another",
+        label: "Another",
+        content: <Card>This tab is also active.</Card>,
+      },
+    ],
+  },
+};
+
+export const ManyTabs: Story = {
+  args: {
+    tabs: [
+      { id: "1", label: "Overview", content: <Card>Overview content</Card> },
+      { id: "2", label: "Analytics", content: <Card>Analytics content</Card> },
+      { id: "3", label: "Reports", content: <Card>Reports content</Card> },
+      { id: "4", label: "Settings", content: <Card>Settings content</Card> },
+      { id: "5", label: "Users", content: <Card>Users content</Card> },
+    ],
+  },
+};
+

package/components/react/Tabs/Tabs.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+import { forwardRef, type ReactNode } from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import { clsx } from "clsx";
+import styles from "./Tabs.module.css";
+
+export interface TabItem {
+  id: string;
+  label: ReactNode;
+  content: ReactNode;
+  disabled?: boolean;
+}
+
+export interface TabsProps {
+  tabs: TabItem[];
+  defaultValue?: string;
+  value?: string;
+  onValueChange?: (value: string) => void;
+  className?: string;
+}
+
+export const Tabs = forwardRef<HTMLDivElement, TabsProps>(
+  ({ tabs, defaultValue, value, onValueChange, className }, ref) => {
+    const defaultTab = defaultValue || tabs[0]?.id;
+
+    return (
+      <TabsPrimitive.Root
+        ref={ref}
+        defaultValue={defaultTab}
+        value={value}
+        onValueChange={onValueChange}
+        className={clsx(styles.root, className)}
+      >
+        <TabsPrimitive.List className={styles.list}>
+          {tabs.map((tab) => (
+            <TabsPrimitive.Trigger
+              key={tab.id}
+              value={tab.id}
+              disabled={tab.disabled}
+              className={styles.trigger}
+            >
+              {tab.label}
+            </TabsPrimitive.Trigger>
+          ))}
+        </TabsPrimitive.List>
+        {tabs.map((tab) => (
+          <TabsPrimitive.Content
+            key={tab.id}
+            value={tab.id}
+            className={styles.content}
+          >
+            {tab.content}
+          </TabsPrimitive.Content>
+        ))}
+      </TabsPrimitive.Root>
+    );
+  }
+);
+
+Tabs.displayName = "Tabs";
+

package/components/react/Tabs/index.ts

@@ -0,0 +1,2 @@
+export { Tabs, type TabsProps, type TabItem } from "./Tabs";
+