@danielthurau/atlas-labs-codex 0.1.0

package/components/react/Card/Card.stories.tsx

@@ -0,0 +1,114 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Card, CardHeader, CardContent, CardFooter } from "./Card";
+import { Button } from "../Button";
+
+const meta: Meta<typeof Card> = {
+  title: "Components/Card",
+  component: Card,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div style={{ width: "400px" }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: (
+      <p>
+        This is a basic card with some content. Cards are used to group related
+        content together.
+      </p>
+    ),
+  },
+};
+
+export const Elevated: Story = {
+  args: {
+    elevated: true,
+    children: (
+      <p>
+        This card has elevation (shadow) for a more prominent appearance.
+      </p>
+    ),
+  },
+};
+
+export const WithHeader: Story = {
+  render: () => (
+    <Card>
+      <CardHeader>
+        <h3>Card Title</h3>
+      </CardHeader>
+      <CardContent>
+        <p>This card has a header section separated from the content.</p>
+      </CardContent>
+    </Card>
+  ),
+};
+
+export const WithFooter: Story = {
+  render: () => (
+    <Card>
+      <CardContent>
+        <p>This card has content and a footer with actions.</p>
+      </CardContent>
+      <CardFooter>
+        <div style={{ display: "flex", gap: "8px", justifyContent: "flex-end" }}>
+          <Button variant="secondary">Cancel</Button>
+          <Button variant="primary">Save</Button>
+        </div>
+      </CardFooter>
+    </Card>
+  ),
+};
+
+export const Complete: Story = {
+  render: () => (
+    <Card>
+      <CardHeader>
+        <h3>Project Settings</h3>
+      </CardHeader>
+      <CardContent>
+        <p style={{ marginBottom: "16px" }}>
+          Configure your project settings here. Changes will be saved automatically.
+        </p>
+        <p>
+          Last updated: January 1, 2024
+        </p>
+      </CardContent>
+      <CardFooter>
+        <div style={{ display: "flex", gap: "8px", justifyContent: "flex-end" }}>
+          <Button variant="secondary">Reset</Button>
+          <Button variant="primary">Save Changes</Button>
+        </div>
+      </CardFooter>
+    </Card>
+  ),
+};
+
+export const PaddingVariants: Story = {
+  render: () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+      <Card padding="sm">
+        <p>Small padding</p>
+      </Card>
+      <Card padding="md">
+        <p>Medium padding (default)</p>
+      </Card>
+      <Card padding="lg">
+        <p>Large padding</p>
+      </Card>
+    </div>
+  ),
+};
+

package/components/react/Card/Card.tsx

@@ -0,0 +1,79 @@
+import { forwardRef, type HTMLAttributes, type ReactNode } from "react";
+import { clsx } from "clsx";
+import styles from "./Card.module.css";
+
+export interface CardProps extends HTMLAttributes<HTMLDivElement> {
+  children: ReactNode;
+  padding?: "none" | "sm" | "md" | "lg";
+  elevated?: boolean;
+}
+
+export const Card = forwardRef<HTMLDivElement, CardProps>(
+  ({ className, children, padding = "md", elevated = false, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={clsx(
+          styles.card,
+          styles[`padding-${padding}`],
+          elevated && styles.elevated,
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+
+Card.displayName = "Card";
+
+export interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {
+  children: ReactNode;
+}
+
+export const CardHeader = forwardRef<HTMLDivElement, CardHeaderProps>(
+  ({ className, children, ...props }, ref) => {
+    return (
+      <div ref={ref} className={clsx(styles.header, className)} {...props}>
+        {children}
+      </div>
+    );
+  }
+);
+
+CardHeader.displayName = "CardHeader";
+
+export interface CardContentProps extends HTMLAttributes<HTMLDivElement> {
+  children: ReactNode;
+}
+
+export const CardContent = forwardRef<HTMLDivElement, CardContentProps>(
+  ({ className, children, ...props }, ref) => {
+    return (
+      <div ref={ref} className={clsx(styles.content, className)} {...props}>
+        {children}
+      </div>
+    );
+  }
+);
+
+CardContent.displayName = "CardContent";
+
+export interface CardFooterProps extends HTMLAttributes<HTMLDivElement> {
+  children: ReactNode;
+}
+
+export const CardFooter = forwardRef<HTMLDivElement, CardFooterProps>(
+  ({ className, children, ...props }, ref) => {
+    return (
+      <div ref={ref} className={clsx(styles.footer, className)} {...props}>
+        {children}
+      </div>
+    );
+  }
+);
+
+CardFooter.displayName = "CardFooter";
+

package/components/react/Card/index.ts

@@ -0,0 +1,11 @@
+export {
+  Card,
+  CardHeader,
+  CardContent,
+  CardFooter,
+  type CardProps,
+  type CardHeaderProps,
+  type CardContentProps,
+  type CardFooterProps,
+} from "./Card";
+

package/components/react/Input/Input.module.css

@@ -0,0 +1,63 @@
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+}
+
+.label {
+  font-size: var(--text-sm);
+  font-weight: var(--font-medium);
+  color: var(--color-text-primary);
+}
+
+.input {
+  height: var(--input-height);
+  padding: var(--input-padding-y) var(--input-padding-x);
+  font-size: var(--text-base);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--input-radius);
+  background-color: var(--color-bg-surface);
+  color: var(--color-text-primary);
+  transition: border-color 150ms ease, box-shadow 150ms ease;
+}
+
+.input::placeholder {
+  color: var(--color-text-muted);
+}
+
+.input:hover:not(:disabled) {
+  border-color: var(--color-border-strong);
+}
+
+.input:focus {
+  outline: none;
+  border-color: var(--color-intent-primary);
+  box-shadow: 0 0 0 3px var(--color-intent-primary-bg);
+}
+
+.input:disabled {
+  background-color: var(--color-bg-muted);
+  color: var(--color-text-muted);
+  cursor: not-allowed;
+}
+
+/* Error State */
+.hasError .input {
+  border-color: var(--color-intent-danger);
+}
+
+.hasError .input:focus {
+  border-color: var(--color-intent-danger);
+  box-shadow: 0 0 0 3px var(--color-intent-danger-bg);
+}
+
+.error {
+  font-size: var(--text-sm);
+  color: var(--color-intent-danger);
+}
+
+.helper {
+  font-size: var(--text-sm);
+  color: var(--color-text-secondary);
+}
+

package/components/react/Input/Input.stories.tsx

@@ -0,0 +1,88 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Input } from "./Input";
+
+const meta: Meta<typeof Input> = {
+  title: "Components/Input",
+  component: Input,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div style={{ width: "320px" }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    label: "Email",
+    placeholder: "you@example.com",
+  },
+};
+
+export const WithHelperText: Story = {
+  args: {
+    label: "Username",
+    placeholder: "Enter username",
+    helperText: "Choose a unique username",
+  },
+};
+
+export const WithError: Story = {
+  args: {
+    label: "Email",
+    placeholder: "you@example.com",
+    error: "Please enter a valid email address",
+    defaultValue: "invalid-email",
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    label: "Email",
+    placeholder: "you@example.com",
+    disabled: true,
+  },
+};
+
+export const Password: Story = {
+  args: {
+    label: "Password",
+    type: "password",
+    placeholder: "Enter password",
+  },
+};
+
+export const WithoutLabel: Story = {
+  args: {
+    placeholder: "Search...",
+    "aria-label": "Search",
+  },
+};
+
+export const AllStates: Story = {
+  render: () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: "24px" }}>
+      <Input label="Default" placeholder="Enter text" />
+      <Input
+        label="With Helper"
+        placeholder="Enter text"
+        helperText="This is helper text"
+      />
+      <Input
+        label="With Error"
+        placeholder="Enter text"
+        error="This field is required"
+      />
+      <Input label="Disabled" placeholder="Enter text" disabled />
+    </div>
+  ),
+};
+

package/components/react/Input/Input.tsx

@@ -0,0 +1,50 @@
+import { forwardRef, type InputHTMLAttributes, useId } from "react";
+import { clsx } from "clsx";
+import styles from "./Input.module.css";
+
+export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+  helperText?: string;
+  error?: string;
+}
+
+export const Input = forwardRef<HTMLInputElement, InputProps>(
+  ({ className, label, helperText, error, id, disabled, ...props }, ref) => {
+    const generatedId = useId();
+    const inputId = id || generatedId;
+    const helperId = `${inputId}-helper`;
+    const errorId = `${inputId}-error`;
+
+    return (
+      <div className={clsx(styles.field, error && styles.hasError)}>
+        {label && (
+          <label htmlFor={inputId} className={styles.label}>
+            {label}
+          </label>
+        )}
+        <input
+          ref={ref}
+          id={inputId}
+          className={clsx(styles.input, className)}
+          disabled={disabled}
+          aria-invalid={!!error}
+          aria-describedby={error ? errorId : helperText ? helperId : undefined}
+          {...props}
+        />
+        {error && (
+          <span id={errorId} className={styles.error} role="alert">
+            {error}
+          </span>
+        )}
+        {helperText && !error && (
+          <span id={helperId} className={styles.helper}>
+            {helperText}
+          </span>
+        )}
+      </div>
+    );
+  }
+);
+
+Input.displayName = "Input";
+

package/components/react/Input/index.ts

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

package/components/react/Modal/Modal.module.css

@@ -0,0 +1,103 @@
+.overlay {
+  background-color: rgba(0, 0, 0, 0.5);
+  position: fixed;
+  inset: 0;
+  animation: fadeIn 150ms ease-out;
+}
+
+.content {
+  background-color: var(--color-bg-elevated);
+  border-radius: var(--modal-radius);
+  box-shadow: var(--shadow-xl);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  padding: var(--modal-padding);
+  animation: slideUp 150ms ease-out;
+  max-height: 85vh;
+  overflow-y: auto;
+}
+
+.content:focus {
+  outline: none;
+}
+
+/* Sizes */
+.sm {
+  width: 90vw;
+  max-width: 400px;
+}
+
+.md {
+  width: 90vw;
+  max-width: 500px;
+}
+
+.lg {
+  width: 90vw;
+  max-width: 640px;
+}
+
+.title {
+  font-size: var(--text-lg);
+  font-weight: var(--font-semibold);
+  color: var(--color-text-primary);
+  margin: 0 0 var(--space-2) 0;
+  padding-right: var(--space-8);
+}
+
+.description {
+  font-size: var(--text-sm);
+  color: var(--color-text-secondary);
+  margin: 0 0 var(--space-4) 0;
+  line-height: var(--leading-base);
+}
+
+.close {
+  position: absolute;
+  top: var(--space-4);
+  right: var(--space-4);
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-sm);
+  color: var(--color-text-secondary);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  transition: background-color 150ms ease, color 150ms ease;
+}
+
+.close:hover {
+  background-color: var(--color-bg-subtle);
+  color: var(--color-text-primary);
+}
+
+.close:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translate(-50%, -48%) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+}
+

package/components/react/Modal/Modal.stories.tsx

@@ -0,0 +1,119 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import { Modal } from "./Modal";
+import { Button } from "../Button";
+import { Input } from "../Input";
+
+const meta: Meta<typeof Modal> = {
+  title: "Components/Modal",
+  component: Modal,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    trigger: <Button>Open Modal</Button>,
+    title: "Modal Title",
+    description: "This is a description of the modal content.",
+    children: (
+      <div style={{ display: "flex", gap: "8px", justifyContent: "flex-end", marginTop: "16px" }}>
+        <Button variant="secondary">Cancel</Button>
+        <Button variant="primary">Confirm</Button>
+      </div>
+    ),
+  },
+};
+
+export const WithForm: Story = {
+  args: {
+    trigger: <Button>Add User</Button>,
+    title: "Add Team Member",
+    children: (
+      <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+        <Input label="Email address" placeholder="user@example.com" />
+        <Input label="Role" placeholder="Developer" />
+        <div style={{ display: "flex", gap: "8px", justifyContent: "flex-end" }}>
+          <Button variant="secondary">Cancel</Button>
+          <Button variant="primary">Add Member</Button>
+        </div>
+      </div>
+    ),
+  },
+};
+
+export const Confirmation: Story = {
+  args: {
+    trigger: <Button variant="danger">Delete Project</Button>,
+    title: "Delete project?",
+    description:
+      'This will permanently delete "My Project" and all its contents. This action cannot be undone.',
+    children: (
+      <div style={{ display: "flex", gap: "8px", justifyContent: "flex-end" }}>
+        <Button variant="secondary">Cancel</Button>
+        <Button variant="danger">Delete</Button>
+      </div>
+    ),
+    size: "sm",
+  },
+};
+
+export const LargeModal: Story = {
+  args: {
+    trigger: <Button>Open Large Modal</Button>,
+    title: "Large Modal",
+    description: "This modal uses the large size variant.",
+    children: (
+      <div>
+        <p style={{ marginBottom: "16px" }}>
+          Large modals are suitable for complex content that needs more space,
+          such as detailed forms or previews.
+        </p>
+        <p style={{ marginBottom: "16px" }}>
+          However, if your modal content is very complex, consider using a
+          dedicated page instead.
+        </p>
+        <div style={{ display: "flex", gap: "8px", justifyContent: "flex-end" }}>
+          <Button variant="secondary">Cancel</Button>
+          <Button variant="primary">Confirm</Button>
+        </div>
+      </div>
+    ),
+    size: "lg",
+  },
+};
+
+const ControlledExample = () => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <Button onClick={() => setOpen(true)}>Open Controlled Modal</Button>
+      <Modal
+        open={open}
+        onOpenChange={setOpen}
+        title="Controlled Modal"
+        description="This modal is controlled via state."
+      >
+        <p style={{ marginBottom: "16px" }}>
+          This modal's open state is controlled by the parent component.
+        </p>
+        <div style={{ display: "flex", gap: "8px", justifyContent: "flex-end" }}>
+          <Button variant="secondary" onClick={() => setOpen(false)}>
+            Close
+          </Button>
+        </div>
+      </Modal>
+    </>
+  );
+};
+
+export const Controlled: Story = {
+  render: () => <ControlledExample />,
+};
+

package/components/react/Modal/Modal.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+import { forwardRef, type ReactNode } from "react";
+import * as Dialog from "@radix-ui/react-dialog";
+import { clsx } from "clsx";
+import styles from "./Modal.module.css";
+
+export interface ModalProps {
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  trigger?: ReactNode;
+  title?: string;
+  description?: string;
+  children: ReactNode;
+  size?: "sm" | "md" | "lg";
+}
+
+export const Modal = forwardRef<HTMLDivElement, ModalProps>(
+  (
+    {
+      open,
+      onOpenChange,
+      trigger,
+      title,
+      description,
+      children,
+      size = "md",
+    },
+    ref
+  ) => {
+    return (
+      <Dialog.Root open={open} onOpenChange={onOpenChange}>
+        {trigger && <Dialog.Trigger asChild>{trigger}</Dialog.Trigger>}
+        <Dialog.Portal>
+          <Dialog.Overlay className={styles.overlay} />
+          <Dialog.Content
+            ref={ref}
+            className={clsx(styles.content, styles[size])}
+          >
+            {title && (
+              <Dialog.Title className={styles.title}>{title}</Dialog.Title>
+            )}
+            {description && (
+              <Dialog.Description className={styles.description}>
+                {description}
+              </Dialog.Description>
+            )}
+            {children}
+            <Dialog.Close asChild>
+              <button className={styles.close} aria-label="Close">
+                <svg
+                  width="15"
+                  height="15"
+                  viewBox="0 0 15 15"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z"
+                    fill="currentColor"
+                    fillRule="evenodd"
+                    clipRule="evenodd"
+                  />
+                </svg>
+              </button>
+            </Dialog.Close>
+          </Dialog.Content>
+        </Dialog.Portal>
+      </Dialog.Root>
+    );
+  }
+);
+
+Modal.displayName = "Modal";
+