@djangocfg/ui-tools 2.1.382 → 2.1.384

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>
-  );
-};

package/src/tools/Gallery/Gallery.story.tsx

@@ -1,237 +0,0 @@
-import { defineStory, useBoolean, useSelect, useNumber } from '@djangocfg/playground';
-import { Gallery, GalleryCompact, type GalleryMediaItem, type GalleryAspectRatio } from './index';
-
-// Sample images for testing
-const SAMPLE_IMAGES: GalleryMediaItem[] = [
-  {
-    id: '1',
-    src: 'https://images.unsplash.com/photo-1494976388531-d1058494cdd8?w=800',
-    thumbnail: 'https://images.unsplash.com/photo-1494976388531-d1058494cdd8?w=200',
-    alt: 'Classic car',
-  },
-  {
-    id: '2',
-    src: 'https://images.unsplash.com/photo-1503376780353-7e6692767b70?w=800',
-    thumbnail: 'https://images.unsplash.com/photo-1503376780353-7e6692767b70?w=200',
-    alt: 'Porsche',
-  },
-  {
-    id: '3',
-    src: 'https://images.unsplash.com/photo-1542362567-b07e54358753?w=800',
-    thumbnail: 'https://images.unsplash.com/photo-1542362567-b07e54358753?w=200',
-    alt: 'BMW',
-  },
-  {
-    id: '4',
-    src: 'https://images.unsplash.com/photo-1555215695-3004980ad54e?w=800',
-    thumbnail: 'https://images.unsplash.com/photo-1555215695-3004980ad54e?w=200',
-    alt: 'Mercedes',
-  },
-  {
-    id: '5',
-    src: 'https://images.unsplash.com/photo-1617531653332-bd46c24f2068?w=800',
-    thumbnail: 'https://images.unsplash.com/photo-1617531653332-bd46c24f2068?w=200',
-    alt: 'Tesla',
-  },
-];
-
-export default defineStory({
-  title: 'Tools/Gallery',
-  component: Gallery,
-  description: 'Full-featured gallery with lightbox, thumbnails, and keyboard navigation.',
-});
-
-export const CarouselMode = () => (
-  <div className="max-w-4xl">
-    <Gallery
-      images={SAMPLE_IMAGES}
-      previewMode="carousel"
-      showThumbnails
-      showControls
-      showCounter
-      enableLightbox
-      enableKeyboard
-      aspectRatio={16 / 9}
-    />
-  </div>
-);
-
-export const GridMode = () => (
-  <div className="max-w-4xl">
-    <Gallery
-      images={SAMPLE_IMAGES}
-      previewMode="grid"
-      previewCount={5}
-      enableLightbox
-      aspectRatio={16 / 9}
-    />
-  </div>
-);
-
-export const WithoutThumbnails = () => (
-  <div className="max-w-4xl">
-    <Gallery
-      images={SAMPLE_IMAGES}
-      previewMode="carousel"
-      showThumbnails={false}
-      showControls
-      enableLightbox
-      aspectRatio={16 / 9}
-    />
-  </div>
-);
-
-export const Compact = {
-  render: (args: {
-    showDots: boolean;
-    showArrows: boolean;
-    enableZoom: boolean;
-    showCounter: boolean;
-  }) => (
-    <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-      <div className="rounded-xl border border-border overflow-hidden">
-        <div className="aspect-[4/3]">
-          <GalleryCompact
-            images={SAMPLE_IMAGES}
-            showDots={args.showDots}
-            showArrows={args.showArrows}
-            enableZoom={args.enableZoom}
-            showCounter={args.showCounter}
-          />
-        </div>
-        <div className="p-4">
-          <h3 className="font-medium">Vehicle Title</h3>
-          <p className="text-sm text-muted-foreground">$25,000</p>
-        </div>
-      </div>
-    </div>
-  ),
-  args: {
-    showDots: true,
-    showArrows: true,
-    enableZoom: true,
-    showCounter: false,
-  },
-  argTypes: {
-    showDots: { control: 'boolean', description: 'Show navigation dots' },
-    showArrows: { control: 'boolean', description: 'Show arrow buttons' },
-    enableZoom: { control: 'boolean', description: 'Enable zoom on hover' },
-    showCounter: { control: 'boolean', description: 'Show image counter' },
-  },
-};
-
-export const SingleImage = () => (
-  <div className="w-64">
-    <div className="rounded-xl border border-border overflow-hidden">
-      <div className="aspect-[4/3]">
-        <GalleryCompact images={SAMPLE_IMAGES.slice(0, 1)} enableZoom />
-      </div>
-    </div>
-  </div>
-);
-
-export const EmptyState = () => (
-  <div className="w-64">
-    <div className="rounded-xl border border-border overflow-hidden">
-      <div className="aspect-[4/3]">
-        <GalleryCompact images={[]} />
-      </div>
-    </div>
-  </div>
-);
-
-/**
- * Interactive story using fixture hooks
- * Controls appear automatically in the right sidebar
- */
-export const Interactive = () => {
-  // These hooks auto-register controls in the Properties panel
-  const [showDots] = useBoolean('showDots', {
-    defaultValue: true,
-    label: 'Show Dots',
-    description: 'Display navigation dots at the bottom',
-  });
-
-  const [showArrows] = useBoolean('showArrows', {
-    defaultValue: true,
-    label: 'Show Arrows',
-    description: 'Display navigation arrows on hover',
-  });
-
-  const [enableZoom] = useBoolean('enableZoom', {
-    defaultValue: true,
-    label: 'Enable Zoom',
-    description: 'Zoom effect on image hover',
-  });
-
-  const [showCounter] = useBoolean('showCounter', {
-    defaultValue: false,
-    label: 'Show Counter',
-    description: 'Display image counter badge',
-  });
-
-  const [maxDots] = useNumber('maxDots', {
-    defaultValue: 5,
-    min: 1,
-    max: 10,
-    label: 'Max Dots',
-    description: 'Maximum number of dots to display',
-  });
-
-  const [previewMode] = useSelect('previewMode', {
-    options: ['carousel', 'grid'] as const,
-    defaultValue: 'carousel',
-    label: 'Preview Mode',
-    description: 'Gallery preview display mode',
-  });
-
-  const [aspectRatio] = useSelect('aspectRatio', {
-    options: ['auto', '16/9', '4/3', '3/2', '1/1'] as const,
-    defaultValue: '4/3' as GalleryAspectRatio,
-    label: 'Aspect Ratio',
-    description: 'Image container aspect ratio',
-  });
-
-  return (
-    <div className="space-y-8">
-      {/* GalleryCompact */}
-      <div>
-        <h3 className="text-lg font-semibold mb-4">GalleryCompact</h3>
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-          <div className="rounded-xl border border-border overflow-hidden bg-black">
-            <GalleryCompact
-              images={SAMPLE_IMAGES}
-              aspectRatio={aspectRatio}
-              showDots={showDots}
-              showArrows={showArrows}
-              enableZoom={enableZoom}
-              showCounter={showCounter}
-              maxDots={maxDots}
-            />
-            <div className="p-4">
-              <h3 className="font-medium">Interactive Card</h3>
-              <p className="text-sm text-muted-foreground">Use controls on the right →</p>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {/* Full Gallery */}
-      <div>
-        <h3 className="text-lg font-semibold mb-4">Full Gallery ({previewMode})</h3>
-        <div className="max-w-4xl">
-          <Gallery
-            images={SAMPLE_IMAGES}
-            previewMode={previewMode}
-            showThumbnails
-            showControls
-            showCounter={showCounter}
-            enableLightbox
-            enableKeyboard
-            aspectRatio={16 / 9}
-          />
-        </div>
-      </div>
-    </div>
-  );
-};

package/src/tools/ImageViewer/ImageViewer.story.tsx

@@ -1,85 +0,0 @@
-import { defineStory, useSelect, useBoolean, useNumber } from '@djangocfg/playground';
-import { ImageViewer } from './index';
-
-export default defineStory({
-  title: 'Tools/ImageViewer',
-  component: ImageViewer,
-  description: 'Image viewer with zoom, pan, rotate, flip and gallery navigation.',
-});
-
-const IMAGES = [
-  {
-    file: { name: 'Mountain landscape', path: 'https://picsum.photos/seed/mountain/1200/800' },
-    src: 'https://picsum.photos/seed/mountain/1200/800',
-  },
-  {
-    file: { name: 'City skyline', path: 'https://picsum.photos/seed/city/1200/800' },
-    src: 'https://picsum.photos/seed/city/1200/800',
-  },
-  {
-    file: { name: 'Forest path', path: 'https://picsum.photos/seed/forest/1200/800' },
-    src: 'https://picsum.photos/seed/forest/1200/800',
-  },
-  {
-    file: { name: 'Ocean sunset', path: 'https://picsum.photos/seed/ocean/1200/800' },
-    src: 'https://picsum.photos/seed/ocean/1200/800',
-  },
-];
-
-export const Interactive = () => {
-  const [count] = useNumber('imageCount', {
-    defaultValue: 4,
-    min: 1,
-    max: 4,
-    label: 'Number of images',
-    description: 'How many images to show in gallery',
-  });
-
-  const [initialIndex] = useNumber('initialIndex', {
-    defaultValue: 0,
-    min: 0,
-    max: 3,
-    label: 'Initial index',
-    description: 'Which image to open first',
-  });
-
-  const [inDialog] = useBoolean('inDialog', {
-    defaultValue: false,
-    label: 'inDialog',
-    description: 'Hide the fullscreen expand button',
-  });
-
-  return (
-    <div className="w-full h-[500px]">
-      <ImageViewer
-        images={IMAGES.slice(0, count)}
-        initialIndex={Math.min(initialIndex, count - 1)}
-        inDialog={inDialog}
-      />
-    </div>
-  );
-};
-
-export const SingleImage = () => (
-  <div className="w-full h-[500px]">
-    <ImageViewer images={[IMAGES[0]]} />
-  </div>
-);
-
-export const Gallery = () => (
-  <div className="w-full h-[500px]">
-    <ImageViewer images={IMAGES} initialIndex={0} />
-  </div>
-);
-
-export const OpenAtIndex = () => (
-  <div className="w-full h-[500px]">
-    <ImageViewer images={IMAGES} initialIndex={2} />
-  </div>
-);
-
-export const InDialog = () => (
-  <div className="w-full h-[500px]">
-    <ImageViewer images={IMAGES} inDialog />
-  </div>
-);