@djangocfg/ui-tools 2.1.381 → 2.1.383

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

package/src/tools/JsonForm/JsonForm.story.tsx

@@ -1,350 +0,0 @@
-import { defineStory, useSelect, useBoolean } from '@djangocfg/playground';
-import { useState } from 'react';
-import { JsonSchemaForm } from './index';
-
-export default defineStory({
-  title: 'Tools/Json Schema Form',
-  component: JsonSchemaForm,
-  description:
-    'Dynamic form generator from JSON Schema using react-jsonschema-form. Supports density (compact), conditional disable via `ui:disabledWhen`, and collapsible sub-sections via `ui:groups`.',
-});
-
-const SCHEMAS = {
-  simple: {
-    schema: {
-      type: 'object' as const,
-      required: ['name', 'email'],
-      properties: {
-        name: { type: 'string' as const, title: 'Name' },
-        email: { type: 'string' as const, title: 'Email', format: 'email' },
-        age: { type: 'integer' as const, title: 'Age', minimum: 0, maximum: 120 },
-      },
-    },
-    uiSchema: {},
-  },
-  vehicle: {
-    schema: {
-      type: 'object' as const,
-      required: ['make', 'model', 'year'],
-      properties: {
-        make: {
-          type: 'string' as const,
-          title: 'Make',
-          enum: ['BMW', 'Mercedes', 'Audi', 'Porsche', 'Tesla'],
-        },
-        model: { type: 'string' as const, title: 'Model' },
-        year: { type: 'integer' as const, title: 'Year', minimum: 1990, maximum: 2025 },
-        price: { type: 'number' as const, title: 'Price ($)' },
-        features: {
-          type: 'array' as const,
-          title: 'Features',
-          items: {
-            type: 'string' as const,
-            enum: ['Leather', 'Navigation', 'Sunroof', 'Heated Seats', 'Parking Sensors'],
-          },
-          uniqueItems: true,
-        },
-        description: { type: 'string' as const, title: 'Description' },
-      },
-    },
-    uiSchema: {
-      description: { 'ui:widget': 'textarea' },
-      features: { 'ui:widget': 'checkboxes' },
-    },
-  },
-  contact: {
-    schema: {
-      type: 'object' as const,
-      required: ['firstName', 'lastName', 'email'],
-      properties: {
-        firstName: { type: 'string' as const, title: 'First Name' },
-        lastName: { type: 'string' as const, title: 'Last Name' },
-        email: { type: 'string' as const, title: 'Email', format: 'email' },
-        phone: { type: 'string' as const, title: 'Phone' },
-        message: { type: 'string' as const, title: 'Message' },
-        subscribe: { type: 'boolean' as const, title: 'Subscribe to newsletter' },
-      },
-    },
-    uiSchema: {
-      message: { 'ui:widget': 'textarea' },
-    },
-  },
-};
-
-export const Interactive = () => {
-  const [schemaType] = useSelect('schemaType', {
-    options: ['simple', 'vehicle', 'contact'] as const,
-    defaultValue: 'vehicle',
-    label: 'Schema Type',
-    description: 'Select form schema',
-  });
-
-  const [density] = useSelect('density', {
-    options: ['comfortable', 'compact'] as const,
-    defaultValue: 'comfortable',
-    label: 'Density',
-    description: '`compact` shrinks rows and moves description into label tooltip.',
-  });
-
-  const [liveValidate] = useBoolean('liveValidate', {
-    defaultValue: false,
-    label: 'Live Validate',
-    description: 'Validate on every change',
-  });
-
-  const config = SCHEMAS[schemaType];
-
-  return (
-    <div className="max-w-lg">
-      <JsonSchemaForm
-        schema={config.schema}
-        uiSchema={config.uiSchema}
-        liveValidate={liveValidate}
-        density={density}
-        onSubmit={(data) => console.log('Submitted:', data.formData)}
-      />
-    </div>
-  );
-};
-
-export const SimpleForm = () => (
-  <div className="max-w-md">
-    <JsonSchemaForm
-      schema={SCHEMAS.simple.schema}
-      onSubmit={(data) => console.log('Submitted:', data.formData)}
-    />
-  </div>
-);
-
-export const VehicleForm = () => (
-  <div className="max-w-lg">
-    <JsonSchemaForm
-      schema={SCHEMAS.vehicle.schema}
-      uiSchema={SCHEMAS.vehicle.uiSchema}
-      onSubmit={(data) => console.log('Submitted:', data.formData)}
-    />
-  </div>
-);
-
-export const WithDefaultValues = () => (
-  <div className="max-w-lg">
-    <JsonSchemaForm
-      schema={SCHEMAS.vehicle.schema}
-      uiSchema={SCHEMAS.vehicle.uiSchema}
-      formData={{
-        make: 'BMW',
-        model: 'X5',
-        year: 2023,
-        price: 65000,
-        features: ['Leather', 'Navigation'],
-      }}
-      onSubmit={(data) => console.log('Submitted:', data.formData)}
-    />
-  </div>
-);
-
-/**
- * Compact density — shrinks rows, moves description into a tooltip on the
- * label. Pair with `ui:groups` for dense sidebar / playground configurators.
- */
-export const Compact = () => (
-  <div className="max-w-md">
-    <JsonSchemaForm
-      schema={SCHEMAS.simple.schema}
-      density="compact"
-      showSubmitButton={false}
-      onSubmit={(data) => console.log('Submitted:', data.formData)}
-    />
-  </div>
-);
-
-/**
- * `ui:disabledWhen` greys out a field based on another field's value.
- * Here `phone` is disabled until `subscribe` is checked, and `email` is
- * disabled when `firstName` is empty.
- */
-export const ConditionalDisable = () => {
-  const [data, setData] = useState<Record<string, unknown>>({
-    firstName: '',
-    subscribe: false,
-  });
-  return (
-    <div className="max-w-lg">
-      <JsonSchemaForm
-        schema={SCHEMAS.contact.schema}
-        uiSchema={{
-          ...SCHEMAS.contact.uiSchema,
-          email: {
-            'ui:disabledWhen': { path: 'firstName', falsy: true },
-          },
-          phone: {
-            'ui:disabledWhen': { path: 'subscribe', falsy: true },
-          },
-          subscribe: { 'ui:widget': 'switch' },
-        }}
-        formData={data}
-        onChange={(e) => setData(e.formData ?? {})}
-        showSubmitButton={false}
-      />
-      <pre className="mt-3 text-[11px] text-muted-foreground">
-        {JSON.stringify(data, null, 2)}
-      </pre>
-    </div>
-  );
-};
-
-/**
- * `ui:groups` splits a flat object into collapsible sub-sections without
- * restructuring the schema. Fields not listed in any group render flat above
- * the groups.
- */
-export const CollapsibleGroups = () => (
-  <div className="max-w-lg">
-    <JsonSchemaForm
-      schema={{
-        type: 'object',
-        properties: {
-          identity: { type: 'string', title: 'Display name' },
-          firstName: { type: 'string', title: 'First name' },
-          lastName: { type: 'string', title: 'Last name' },
-          email: { type: 'string', title: 'Email', format: 'email' },
-          phone: { type: 'string', title: 'Phone' },
-          newsletter: { type: 'boolean', title: 'Newsletter' },
-          marketing: { type: 'boolean', title: 'Marketing emails' },
-          tracking: { type: 'boolean', title: 'Usage analytics' },
-        },
-      }}
-      uiSchema={{
-        'ui:groups': [
-          {
-            title: 'Personal',
-            fields: ['firstName', 'lastName'],
-            defaultOpen: true,
-          },
-          { title: 'Contact', fields: ['email', 'phone'], defaultOpen: false },
-          {
-            title: 'Preferences',
-            fields: ['newsletter', 'marketing', 'tracking'],
-            defaultOpen: false,
-          },
-        ],
-        newsletter: { 'ui:widget': 'switch' },
-        marketing: { 'ui:widget': 'switch' },
-        tracking: { 'ui:widget': 'switch' },
-      }}
-      density="compact"
-      showSubmitButton={false}
-      onChange={(e) => console.log('changed:', e.formData)}
-    />
-  </div>
-);
-
-/**
- * Empty-string enum values are now allowed — Radix `<Select.Item value="" />`
- * is reserved, so the ui-core `Select` wrapper substitutes a sentinel
- * internally. From the schema's perspective `''` is just another option.
- */
-export const EmptyStringSelect = () => {
-  const [data, setData] = useState<Record<string, unknown>>({ plan: '' });
-  return (
-    <div className="max-w-md">
-      <JsonSchemaForm
-        schema={{
-          type: 'object',
-          properties: {
-            plan: {
-              type: 'string',
-              title: 'Plan',
-              enum: ['', 'Free', 'Pro', 'Max', 'Enterprise'],
-              description: 'An empty string is a valid enum value here.',
-            },
-          },
-        }}
-        uiSchema={{
-          plan: {
-            'ui:enumNames': ['— none —', 'Free', 'Pro', 'Max', 'Enterprise'],
-          },
-        }}
-        formData={data}
-        onChange={(e) => setData(e.formData ?? {})}
-        showSubmitButton={false}
-      />
-      <pre className="mt-3 text-[11px] text-muted-foreground">
-        {JSON.stringify(data, null, 2)}
-      </pre>
-    </div>
-  );
-};
-
-/**
- * Live demo of all extensions wired together — compact density, collapsible
- * groups, conditional disable, slider with unit. Mirrors what the layouts
- * playground sidebar uses.
- */
-export const PlaygroundStyle = () => {
-  const [data, setData] = useState<Record<string, unknown>>({
-    shell: { variant: 'boxed', inset: 12, radius: '2xl', border: true },
-    sidebar: {
-      density: 'default',
-      activeIndicator: 'background',
-      collapsibleGroups: false,
-    },
-  });
-  return (
-    <div className="max-w-md">
-      <JsonSchemaForm
-        schema={{
-          type: 'object',
-          properties: {
-            shell: {
-              type: 'object',
-              title: 'Shell',
-              properties: {
-                variant: { type: 'string', title: 'Variant', enum: ['full-bleed', 'boxed'] },
-                inset: { type: 'integer', title: 'Inset', minimum: 0, maximum: 32 },
-                radius: { type: 'string', title: 'Radius', enum: ['sm', 'md', 'lg', 'xl', '2xl', '3xl'] },
-                border: { type: 'boolean', title: 'Border' },
-              },
-            },
-            sidebar: {
-              type: 'object',
-              title: 'Sidebar',
-              properties: {
-                density: { type: 'string', title: 'Density', enum: ['sparse', 'default', 'dense'] },
-                activeIndicator: {
-                  type: 'string',
-                  title: 'Active indicator',
-                  enum: ['background', 'rail', 'both'],
-                },
-                collapsibleGroups: { type: 'boolean', title: 'Collapsible groups' },
-              },
-            },
-          },
-        }}
-        uiSchema={{
-          shell: {
-            'ui:collapsible': true,
-            inset: {
-              'ui:widget': 'slider',
-              'ui:options': { unit: 'px', step: 2, showInput: false },
-              'ui:disabledWhen': { path: 'shell.variant', notEq: 'boxed' },
-            },
-            radius: { 'ui:disabledWhen': { path: 'shell.variant', notEq: 'boxed' } },
-            border: {
-              'ui:widget': 'switch',
-              'ui:disabledWhen': { path: 'shell.variant', notEq: 'boxed' },
-            },
-          },
-          sidebar: {
-            'ui:collapsible': true,
-            collapsibleGroups: { 'ui:widget': 'switch' },
-          },
-        }}
-        formData={data}
-        onChange={(e) => setData(e.formData ?? {})}
-        density="compact"
-        showSubmitButton={false}
-      />
-    </div>
-  );
-};