@djangocfg/ui-tools 2.1.381 → 2.1.383

package/src/tools/CodeEditor/CodeEditor.story.tsx

@@ -1,202 +0,0 @@
-import { defineStory, useSelect, useBoolean } from '@djangocfg/playground';
-import { Editor, DiffEditor } from './components';
-
-export default defineStory({
-  title: 'Tools/Code Editor',
-  component: Editor,
-  description: 'Monaco-based code editor with syntax highlighting, diff view, and full IDE features.',
-});
-
-const SAMPLE_CODE = {
-  typescript: `import { useState, useCallback, useMemo } from 'react';
-
-interface User {
-  id: string;
-  name: string;
-  email: string;
-  role: 'admin' | 'user' | 'viewer';
-}
-
-export function useUsers() {
-  const [users, setUsers] = useState<User[]>([]);
-
-  const addUser = useCallback((user: Omit<User, 'id'>) => {
-    setUsers(prev => [...prev, { ...user, id: crypto.randomUUID() }]);
-  }, []);
-
-  const admins = useMemo(
-    () => users.filter(u => u.role === 'admin'),
-    [users],
-  );
-
-  return { users, admins, addUser };
-}`,
-
-  python: `from __future__ import annotations
-
-from dataclasses import dataclass
-from datetime import datetime
-from typing import AsyncIterator
-
-import httpx
-from pydantic import BaseModel, Field
-
-
-class User(BaseModel):
-    id: str
-    name: str
-    email: str
-    role: str = "user"
-    created_at: datetime = Field(default_factory=datetime.utcnow)
-
-
-@dataclass
-class UserService:
-    base_url: str
-    client: httpx.AsyncClient | None = None
-
-    async def list_users(self, page: int = 1) -> list[User]:
-        async with httpx.AsyncClient(base_url=self.base_url) as client:
-            response = await client.get("/users", params={"page": page})
-            response.raise_for_status()
-            return [User(**u) for u in response.json()["data"]]`,
-
-  json: `{
-  "name": "@djangocfg/ui-tools",
-  "version": "2.1.0",
-  "description": "Heavy React tools with lazy loading",
-  "dependencies": {
-    "monaco-editor": "^0.55.1",
-    "react": "^19.1.0"
-  },
-  "exports": {
-    ".": "./src/index.ts",
-    "./code-editor": "./src/tools/CodeEditor/index.ts"
-  }
-}`,
-
-  css: `/* Design tokens */
-:root {
-  --radius: 0.5rem;
-  --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
-}
-
-.editor-container {
-  position: relative;
-  border-radius: var(--radius);
-  border: 1px solid hsl(var(--border));
-  overflow: hidden;
-
-  &:focus-within {
-    outline: 2px solid hsl(var(--ring));
-    outline-offset: 2px;
-  }
-}`,
-};
-
-const DIFF_ORIGINAL = `function greet(name: string) {
-  console.log("Hello, " + name);
-}
-
-greet("World");`;
-
-const DIFF_MODIFIED = `function greet(name: string, greeting = "Hello") {
-  console.log(\`\${greeting}, \${name}!\`);
-}
-
-function farewell(name: string) {
-  console.log(\`Goodbye, \${name}!\`);
-}
-
-greet("World");
-farewell("World");`;
-
-export const Interactive = () => {
-  const [language] = useSelect('language', {
-    options: ['typescript', 'python', 'json', 'css'] as const,
-    defaultValue: 'typescript',
-    label: 'Language',
-  });
-
-  const [readOnly] = useBoolean('readOnly', {
-    defaultValue: false,
-    label: 'Read Only',
-  });
-
-  const [minimap] = useBoolean('minimap', {
-    defaultValue: false,
-    label: 'Minimap',
-  });
-
-  const [autoHeight] = useBoolean('autoHeight', {
-    defaultValue: false,
-    label: 'Auto Height',
-    description: 'Resize editor to fit content',
-  });
-
-  return autoHeight ? (
-    <Editor
-      value={SAMPLE_CODE[language]}
-      language={language}
-      autoHeight
-      minHeight={100}
-      maxHeight={500}
-      options={{ readOnly, minimap, fontSize: 14 }}
-    />
-  ) : (
-    <div style={{ height: 400 }}>
-      <Editor
-        value={SAMPLE_CODE[language]}
-        language={language}
-        options={{ readOnly, minimap, fontSize: 14 }}
-      />
-    </div>
-  );
-};
-
-export const TypeScript = () => (
-  <div style={{ height: 350 }}>
-    <Editor value={SAMPLE_CODE.typescript} language="typescript" />
-  </div>
-);
-
-export const Python = () => (
-  <div style={{ height: 350 }}>
-    <Editor value={SAMPLE_CODE.python} language="python" />
-  </div>
-);
-
-export const ReadOnly = () => (
-  <div style={{ height: 300 }}>
-    <Editor
-      value={SAMPLE_CODE.json}
-      language="json"
-      options={{ readOnly: true, lineNumbers: 'on' }}
-    />
-  </div>
-);
-
-export const AutoHeight = () => (
-  <div className="flex flex-col gap-4 max-w-3xl">
-    <p className="text-sm text-muted-foreground">
-      Editor grows with content (min 100px, max 400px). Try typing new lines.
-    </p>
-    <Editor
-      value={`const x = 1;\nconst y = 2;\nconst z = x + y;`}
-      language="typescript"
-      autoHeight
-      minHeight={100}
-      maxHeight={400}
-    />
-  </div>
-);
-
-export const DiffView = () => (
-  <div style={{ height: 400 }}>
-    <DiffEditor
-      original={DIFF_ORIGINAL}
-      modified={DIFF_MODIFIED}
-      language="typescript"
-    />
-  </div>
-);

package/src/tools/CronScheduler/CronScheduler.story.tsx

@@ -1,300 +0,0 @@
-import { useState } from 'react';
-import { defineStory, useBoolean, useSelect } from '@djangocfg/playground';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@djangocfg/ui-core/components';
-import { CronScheduler } from './index';
-
-export default defineStory({
-  title: 'Tools/Cron Scheduler',
-  component: CronScheduler,
-  description: 'Compact cron expression builder with Apple HIG-style UI.',
-});
-
-export const Interactive = () => {
-  const [cron, setCron] = useState('0 9 * * 1-5');
-
-  const [defaultType] = useSelect('defaultType', {
-    options: ['daily', 'weekly', 'monthly', 'custom'] as const,
-    defaultValue: 'weekly',
-    label: 'Default Type',
-    description: 'Initial schedule type',
-  });
-
-  const [showPreview] = useBoolean('showPreview', {
-    defaultValue: true,
-    label: 'Show Preview',
-    description: 'Show human-readable preview',
-  });
-
-  const [showCronExpression] = useBoolean('showCronExpression', {
-    defaultValue: true,
-    label: 'Show Cron Expression',
-    description: 'Show raw cron expression in preview',
-  });
-
-  const [allowCopy] = useBoolean('allowCopy', {
-    defaultValue: true,
-    label: 'Allow Copy',
-    description: 'Enable copy to clipboard',
-  });
-
-  const [timeFormat] = useSelect('timeFormat', {
-    options: ['24h', '12h'] as const,
-    defaultValue: '24h',
-    label: 'Time Format',
-    description: 'Time display format',
-  });
-
-  const [disabled] = useBoolean('disabled', {
-    defaultValue: false,
-    label: 'Disabled',
-    description: 'Disable all interactions',
-  });
-
-  return (
-    <div className="w-[400px]">
-      <CronScheduler
-        value={cron}
-        onChange={setCron}
-        defaultType={defaultType}
-        showPreview={showPreview}
-        showCronExpression={showCronExpression}
-        allowCopy={allowCopy}
-        timeFormat={timeFormat}
-        disabled={disabled}
-      />
-    </div>
-  );
-};
-
-export const Daily = () => {
-  const [cron, setCron] = useState('0 9 * * *');
-
-  return (
-    <div className="w-[400px]">
-      <CronScheduler
-        value={cron}
-        onChange={setCron}
-        defaultType="daily"
-        showPreview
-      />
-    </div>
-  );
-};
-
-export const Weekly = () => {
-  const [cron, setCron] = useState('30 14 * * 1,3,5');
-
-  return (
-    <div className="w-[400px]">
-      <CronScheduler
-        value={cron}
-        onChange={setCron}
-        defaultType="weekly"
-        showPreview
-      />
-    </div>
-  );
-};
-
-export const Monthly = () => {
-  const [cron, setCron] = useState('0 9 1,15 * *');
-
-  return (
-    <div className="w-[400px]">
-      <CronScheduler
-        value={cron}
-        onChange={setCron}
-        defaultType="monthly"
-        showPreview
-      />
-    </div>
-  );
-};
-
-export const Custom = () => {
-  const [cron, setCron] = useState('*/15 9-17 * * 1-5');
-
-  return (
-    <div className="w-[400px]">
-      <CronScheduler
-        value={cron}
-        onChange={setCron}
-        defaultType="custom"
-        showPreview
-        showCronExpression
-      />
-    </div>
-  );
-};
-
-export const WithCronExpression = () => {
-  const [cron, setCron] = useState('0 9 * * 1-5');
-
-  return (
-    <div className="w-[400px]">
-      <CronScheduler
-        value={cron}
-        onChange={setCron}
-        showPreview
-        showCronExpression
-        allowCopy
-      />
-    </div>
-  );
-};
-
-export const TwelveHourFormat = () => {
-  const [cron, setCron] = useState('0 14 * * *');
-
-  return (
-    <div className="w-[400px]">
-      <CronScheduler
-        value={cron}
-        onChange={setCron}
-        showPreview
-        timeFormat="12h"
-      />
-    </div>
-  );
-};
-
-export const Disabled = () => (
-  <div className="w-[400px]">
-    <CronScheduler
-      value="0 9 * * 1-5"
-      showPreview
-      disabled
-    />
-  </div>
-);
-
-export const Compact = () => {
-  const [cron, setCron] = useState('0 9 * * 1-5');
-
-  return (
-    <div className="w-[400px]">
-      <CronScheduler
-        value={cron}
-        onChange={setCron}
-        defaultType="weekly"
-        showPreview={false}
-      />
-    </div>
-  );
-};
-
-export const Controlled = () => {
-  const [cron, setCron] = useState('0 9 * * *');
-
-  const presets = [
-    { label: 'Every day at 9am', value: '0 9 * * *' },
-    { label: 'Weekdays at 6pm', value: '0 18 * * 1-5' },
-    { label: 'Every Monday', value: '0 0 * * 1' },
-    { label: '1st of month', value: '0 0 1 * *' },
-  ];
-
-  return (
-    <div className="w-[400px] space-y-4">
-      <div className="flex flex-wrap gap-2">
-        {presets.map(({ label, value }) => (
-          <button
-            key={value}
-            onClick={() => setCron(value)}
-            className={`px-2 py-1 text-xs rounded-md transition-colors ${
-              cron === value
-                ? 'bg-primary text-primary-foreground'
-                : 'bg-muted hover:bg-muted/80'
-            }`}
-          >
-            {label}
-          </button>
-        ))}
-      </div>
-      <CronScheduler
-        value={cron}
-        onChange={setCron}
-        showPreview
-        allowCopy
-      />
-    </div>
-  );
-};
-
-export const InDialog = () => {
-  const [cron, setCron] = useState('0 9 * * 1-5');
-  const [open, setOpen] = useState(false);
-
-  return (
-    <div className="p-4">
-      <Dialog open={open} onOpenChange={setOpen}>
-        <DialogTrigger asChild>
-          <button className="px-4 py-2 bg-primary text-primary-foreground rounded-md">
-            Open Schedule Dialog
-          </button>
-        </DialogTrigger>
-        <DialogContent className="max-w-2xl">
-          <DialogHeader>
-            <DialogTitle>Create Schedule</DialogTitle>
-            <DialogDescription>
-              Configure a cron schedule for automated execution
-            </DialogDescription>
-          </DialogHeader>
-          <div className="py-4">
-            <CronScheduler
-              value={cron}
-              onChange={setCron}
-              showPreview
-              showCronExpression
-              allowCopy
-            />
-          </div>
-        </DialogContent>
-      </Dialog>
-      <div className="mt-4 text-sm text-muted-foreground">
-        Current cron: <code className="bg-muted px-1 rounded">{cron}</code>
-      </div>
-    </div>
-  );
-};
-
-export const InDialogMonthly = () => {
-  const [cron, setCron] = useState('0 9 1,15 * *');
-  const [open, setOpen] = useState(false);
-
-  return (
-    <div className="p-4">
-      <Dialog open={open} onOpenChange={setOpen}>
-        <DialogTrigger asChild>
-          <button className="px-4 py-2 bg-primary text-primary-foreground rounded-md">
-            Open Monthly Schedule
-          </button>
-        </DialogTrigger>
-        <DialogContent className="max-w-2xl">
-          <DialogHeader>
-            <DialogTitle>Monthly Schedule</DialogTitle>
-            <DialogDescription>
-              Test monthly calendar grid inside dialog
-            </DialogDescription>
-          </DialogHeader>
-          <div className="py-4">
-            <CronScheduler
-              value={cron}
-              onChange={setCron}
-              defaultType="monthly"
-              showPreview
-              showCronExpression
-              allowCopy
-            />
-          </div>
-        </DialogContent>
-      </Dialog>
-    </div>
-  );
-};