@djangocfg/ui-core 2.1.382 → 2.1.384

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-core",
-  "version": "2.1.382",
+  "version": "2.1.384",
   "description": "Pure React UI component library without Next.js dependencies - for Electron, Vite, CRA apps",
   "keywords": [
     "ui-components",
@@ -33,11 +33,6 @@
       "import": "./src/index.ts",
       "require": "./src/index.ts"
     },
-    "./stories": {
-      "types": "./src/stories/index.ts",
-      "import": "./src/stories/index.ts",
-      "require": "./src/stories/index.ts"
-    },
     "./components": {
       "types": "./src/components/index.ts",
       "import": "./src/components/index.ts",
@@ -92,11 +87,10 @@
   ],
   "scripts": {
     "lint": "eslint .",
-    "check": "tsc --noEmit",
-    "playground": "playground dev"
+    "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/i18n": "^2.1.382",
+    "@djangocfg/i18n": "^2.1.384",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
     "moment": "^2.30.1",
@@ -166,9 +160,8 @@
     "vaul": "1.1.2"
   },
   "devDependencies": {
-    "@djangocfg/i18n": "^2.1.382",
-    "@djangocfg/playground": "workspace:*",
-    "@djangocfg/typescript-config": "^2.1.382",
+    "@djangocfg/i18n": "^2.1.384",
+    "@djangocfg/typescript-config": "^2.1.384",
     "@types/node": "^24.7.2",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",

package/src/components/boundary/boundary.story.tsx

@@ -1,191 +0,0 @@
-import { defineStory, useSelect } from '@djangocfg/playground';
-import { useState } from 'react';
-
-import { Button } from '../forms/button';
-import { Boundary, useBoundary } from '.';
-import type { BoundaryRenderProps, BoundaryVariant } from '.';
-
-export default defineStory({
-  title: 'Core/Boundary',
-  component: Boundary,
-  description:
-    'React error boundary with multiple visual variants. Wrap untrusted subtrees (widgets, third-party iframes, dynamic renderers) so a single render error does not crash the whole page. Includes `useBoundary()` hook for async / event-handler errors.',
-});
-
-function BoomButton({ label = 'Throw render error' }: { label?: string }) {
-  const [boom, setBoom] = useState(false);
-  if (boom) throw new Error('Demo crash from BoomButton');
-  return (
-    <Button variant="outline" size="sm" onClick={() => setBoom(true)}>
-      {label}
-    </Button>
-  );
-}
-
-export const Interactive = () => {
-  const [variant] = useSelect('variant', {
-    options: ['silent', 'inline', 'card', 'fullscreen'] as const,
-    defaultValue: 'card',
-    label: 'Variant',
-    description: 'Fallback visual style',
-  });
-
-  return (
-    <div className="max-w-lg space-y-3">
-      <p className="text-sm text-muted-foreground">
-        Click the button to throw — the surrounding page stays alive, only this block swaps to the fallback.
-      </p>
-      <Boundary variant={variant as BoundaryVariant} name="story">
-        <div className="rounded-md border p-4">
-          <BoomButton />
-        </div>
-      </Boundary>
-    </div>
-  );
-};
-
-export const Silent = () => (
-  <div className="max-w-lg space-y-2">
-    <p className="text-sm text-muted-foreground">
-      variant=&quot;silent&quot; renders nothing on error. Use for non-critical widgets (chat launcher, embeds).
-    </p>
-    <Boundary variant="silent" name="silent-demo">
-      <BoomButton label="Crash silently" />
-    </Boundary>
-    <p className="text-xs text-muted-foreground">↑ button disappears after click. Page is fine.</p>
-  </div>
-);
-
-export const Inline = () => (
-  <div className="max-w-lg">
-    <Boundary variant="inline" name="inline-demo">
-      <BoomButton />
-    </Boundary>
-  </div>
-);
-
-export const Card = () => (
-  <div className="max-w-lg">
-    <Boundary variant="card" name="card-demo">
-      <BoomButton />
-    </Boundary>
-  </div>
-);
-
-export const CustomFallback = () => (
-  <div className="max-w-lg">
-    <Boundary
-      fallback={({ error, reset }) => (
-        <div className="rounded-md border-2 border-dashed border-amber-500 bg-amber-500/5 p-4">
-          <p className="text-sm font-semibold text-amber-700">Custom fallback</p>
-          <p className="mt-1 text-xs text-amber-700/80">{error.message}</p>
-          <Button size="sm" variant="outline" className="mt-2" onClick={reset}>
-            Reset boundary
-          </Button>
-        </div>
-      )}
-    >
-      <BoomButton />
-    </Boundary>
-  </div>
-);
-
-function MyFallback({ error, reset }: BoundaryRenderProps) {
-  return (
-    <div className="rounded-md border border-blue-500/40 bg-blue-500/5 p-4">
-      <p className="text-sm font-semibold text-blue-700">FallbackComponent prop</p>
-      <p className="mt-1 text-xs text-blue-700/80">{error.message}</p>
-      <Button size="sm" variant="outline" className="mt-2" onClick={reset}>
-        Reset
-      </Button>
-    </div>
-  );
-}
-
-export const FallbackComponentProp = () => (
-  <div className="max-w-lg space-y-2">
-    <p className="text-sm text-muted-foreground">
-      Pass a component type instead of a render function — better memoization, easier to test.
-    </p>
-    <Boundary FallbackComponent={MyFallback}>
-      <BoomButton />
-    </Boundary>
-  </div>
-);
-
-export const ResetKeys = () => {
-  const [key, setKey] = useState(0);
-  return (
-    <div className="max-w-lg space-y-3">
-      <p className="text-sm text-muted-foreground">
-        Pass <code className="text-xs">resetKeys</code> — when any value in the array changes, the boundary auto-resets.
-        Good for clearing errors on route change (e.g. <code className="text-xs">[pathname]</code>).
-      </p>
-      <Button size="sm" onClick={() => setKey((k) => k + 1)}>
-        Bump resetKey ({key})
-      </Button>
-      <Boundary variant="card" resetKeys={[key]} name="resetkeys-demo">
-        <BoomButton />
-      </Boundary>
-    </div>
-  );
-};
-
-export const OnResetCallback = () => {
-  const [resets, setResets] = useState<string[]>([]);
-  return (
-    <div className="max-w-lg space-y-3">
-      <p className="text-sm text-muted-foreground">
-        <code className="text-xs">onReset</code> fires when the boundary recovers — wire it to React Query invalidation, refetch, etc.
-      </p>
-      <Boundary
-        variant="card"
-        onReset={(details) =>
-          setResets((prev) => [...prev, `reset @ ${new Date().toISOString().slice(11, 19)} (${details.reason})`])
-        }
-      >
-        <BoomButton />
-      </Boundary>
-      <div className="text-xs text-muted-foreground">
-        Resets:
-        <ul className="mt-1 space-y-0.5">
-          {resets.map((r, i) => (
-            <li key={i}>· {r}</li>
-          ))}
-        </ul>
-      </div>
-    </div>
-  );
-};
-
-function AsyncCrasher() {
-  const { showBoundary } = useBoundary();
-  return (
-    <Button
-      variant="outline"
-      size="sm"
-      onClick={async () => {
-        // Regular React boundaries DON'T catch this. useBoundary() does.
-        await new Promise((r) => setTimeout(r, 200));
-        try {
-          throw new Error('Async fetch failed after 200ms');
-        } catch (err) {
-          showBoundary(err);
-        }
-      }}
-    >
-      Throw async error
-    </Button>
-  );
-}
-
-export const AsyncErrorsViaHook = () => (
-  <div className="max-w-lg space-y-2">
-    <p className="text-sm text-muted-foreground">
-      React error boundaries only catch <em>render</em> errors. Use <code className="text-xs">useBoundary().showBoundary(err)</code> to push async / event-handler errors into the nearest boundary.
-    </p>
-    <Boundary variant="card" name="async-demo">
-      <AsyncCrasher />
-    </Boundary>
-  </div>
-);

package/src/components/data/avatar/avatar.story.tsx

@@ -1,115 +0,0 @@
-import { defineStory, useSelect } from '@djangocfg/playground';
-import { Avatar, AvatarImage, AvatarFallback } from '.';
-
-export default defineStory({
-  title: 'Core/Avatar',
-  component: Avatar,
-  description: 'User avatar with image and fallback support.',
-});
-
-const AVATARS = [
-  { src: 'https://github.com/shadcn.png', fallback: 'CN' },
-  { src: 'https://github.com/vercel.png', fallback: 'VC' },
-  { src: 'https://github.com/radix-ui.png', fallback: 'RX' },
-];
-
-export const Interactive = () => {
-  const [size] = useSelect('size', {
-    options: ['sm', 'md', 'lg'] as const,
-    defaultValue: 'md',
-    label: 'Size',
-    description: 'Avatar size',
-  });
-
-  const sizeClasses = {
-    sm: 'h-8 w-8',
-    md: 'h-10 w-10',
-    lg: 'h-14 w-14',
-  };
-
-  return (
-    <Avatar className={sizeClasses[size]}>
-      <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
-      <AvatarFallback>CN</AvatarFallback>
-    </Avatar>
-  );
-};
-
-export const Default = () => (
-  <Avatar>
-    <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
-    <AvatarFallback>CN</AvatarFallback>
-  </Avatar>
-);
-
-export const Fallback = () => (
-  <Avatar>
-    <AvatarImage src="/broken-image.jpg" alt="User" />
-    <AvatarFallback>JD</AvatarFallback>
-  </Avatar>
-);
-
-export const Sizes = () => (
-  <div className="flex items-center gap-4">
-    <Avatar className="h-6 w-6">
-      <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
-      <AvatarFallback className="text-xs">CN</AvatarFallback>
-    </Avatar>
-    <Avatar className="h-8 w-8">
-      <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
-      <AvatarFallback>CN</AvatarFallback>
-    </Avatar>
-    <Avatar className="h-10 w-10">
-      <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
-      <AvatarFallback>CN</AvatarFallback>
-    </Avatar>
-    <Avatar className="h-14 w-14">
-      <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
-      <AvatarFallback>CN</AvatarFallback>
-    </Avatar>
-    <Avatar className="h-20 w-20">
-      <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
-      <AvatarFallback className="text-xl">CN</AvatarFallback>
-    </Avatar>
-  </div>
-);
-
-export const Group = () => (
-  <div className="flex -space-x-4">
-    {AVATARS.map((avatar, i) => (
-      <Avatar key={i} className="border-2 border-background">
-        <AvatarImage src={avatar.src} />
-        <AvatarFallback>{avatar.fallback}</AvatarFallback>
-      </Avatar>
-    ))}
-    <Avatar className="border-2 border-background">
-      <AvatarFallback>+5</AvatarFallback>
-    </Avatar>
-  </div>
-);
-
-export const WithStatus = () => (
-  <div className="flex gap-4">
-    <div className="relative">
-      <Avatar>
-        <AvatarImage src="https://github.com/shadcn.png" />
-        <AvatarFallback>CN</AvatarFallback>
-      </Avatar>
-      <span className="absolute bottom-0 right-0 h-3 w-3 rounded-full bg-green-500 border-2 border-background" />
-    </div>
-    <div className="relative">
-      <Avatar>
-        <AvatarImage src="https://github.com/vercel.png" />
-        <AvatarFallback>VC</AvatarFallback>
-      </Avatar>
-      <span className="absolute bottom-0 right-0 h-3 w-3 rounded-full bg-yellow-500 border-2 border-background" />
-    </div>
-    <div className="relative">
-      <Avatar>
-        <AvatarImage src="https://github.com/radix-ui.png" />
-        <AvatarFallback>RX</AvatarFallback>
-      </Avatar>
-      <span className="absolute bottom-0 right-0 h-3 w-3 rounded-full bg-gray-400 border-2 border-background" />
-    </div>
-  </div>
-);

package/src/components/data/badge/badge.story.tsx

@@ -1,56 +0,0 @@
-import { defineStory, useSelect } from '@djangocfg/playground';
-import { Badge } from '.';
-
-export default defineStory({
-  title: 'Core/Badge',
-  component: Badge,
-  description: 'Small status indicators and labels.',
-});
-
-export const Interactive = () => {
-  const [variant] = useSelect('variant', {
-    options: ['default', 'secondary', 'destructive', 'outline'] as const,
-    defaultValue: 'default',
-    label: 'Variant',
-    description: 'Badge style variant',
-  });
-
-  return (
-    <div className="flex gap-4">
-      <Badge variant={variant}>Badge</Badge>
-    </div>
-  );
-};
-
-export const Variants = () => (
-  <div className="flex flex-wrap gap-4">
-    <Badge variant="default">Default</Badge>
-    <Badge variant="secondary">Secondary</Badge>
-    <Badge variant="destructive">Destructive</Badge>
-    <Badge variant="outline">Outline</Badge>
-  </div>
-);
-
-export const StatusBadges = () => (
-  <div className="flex flex-wrap gap-4">
-    <Badge variant="default">Active</Badge>
-    <Badge variant="secondary">Pending</Badge>
-    <Badge variant="destructive">Expired</Badge>
-    <Badge variant="outline">Draft</Badge>
-  </div>
-);
-
-export const InContext = () => (
-  <div className="space-y-4">
-    <div className="flex items-center gap-2">
-      <span className="font-medium">Status:</span>
-      <Badge variant="default">Published</Badge>
-    </div>
-    <div className="flex items-center gap-2">
-      <span className="font-medium">Tags:</span>
-      <Badge variant="secondary">React</Badge>
-      <Badge variant="secondary">TypeScript</Badge>
-      <Badge variant="secondary">UI</Badge>
-    </div>
-  </div>
-);

package/src/components/data/calendar/calendar.story.tsx

@@ -1,127 +0,0 @@
-import { useState } from 'react';
-import { defineStory } from '@djangocfg/playground';
-import { Calendar } from '.';
-import { DatePicker, DateRangePicker, type DateRange } from './date-picker';
-
-export default defineStory({
-  title: 'Core/Calendar',
-  component: Calendar,
-  description: 'Calendar and date picker components.',
-});
-
-export const Default = () => {
-  const [date, setDate] = useState<Date | undefined>(new Date());
-
-  return (
-    <Calendar
-      mode="single"
-      selected={date}
-      onSelect={setDate}
-      className="rounded-md border"
-    />
-  );
-};
-
-export const Range = () => {
-  const [range, setRange] = useState<DateRange | undefined>({
-    from: new Date(),
-    to: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000),
-  });
-
-  return (
-    <Calendar
-      mode="range"
-      selected={range}
-      onSelect={setRange}
-      className="rounded-md border"
-      numberOfMonths={2}
-    />
-  );
-};
-
-export const Multiple = () => {
-  const [dates, setDates] = useState<Date[] | undefined>([]);
-
-  return (
-    <Calendar
-      mode="multiple"
-      selected={dates}
-      onSelect={setDates}
-      className="rounded-md border"
-    />
-  );
-};
-
-export const Picker = () => {
-  const [date, setDate] = useState<Date>();
-
-  return (
-    <div className="max-w-xs">
-      <DatePicker
-        value={date}
-        onChange={setDate}
-        placeholder="Pick a date"
-      />
-    </div>
-  );
-};
-
-export const PickerWithLabel = () => {
-  const [date, setDate] = useState<Date>();
-
-  return (
-    <div className="max-w-xs space-y-2">
-      <label className="text-sm font-medium">Date of birth</label>
-      <DatePicker
-        value={date}
-        onChange={setDate}
-        placeholder="Select your birth date"
-      />
-    </div>
-  );
-};
-
-export const RangePicker = () => {
-  const [range, setRange] = useState<DateRange>();
-
-  return (
-    <div className="max-w-sm">
-      <DateRangePicker
-        value={range}
-        onChange={setRange}
-        placeholder="Select date range"
-      />
-    </div>
-  );
-};
-
-export const RangePickerWithPresets = () => {
-  const [range, setRange] = useState<DateRange>();
-
-  return (
-    <div className="max-w-sm space-y-2">
-      <label className="text-sm font-medium">Booking dates</label>
-      <DateRangePicker
-        value={range}
-        onChange={setRange}
-        placeholder="Check-in — Check-out"
-        numberOfMonths={2}
-      />
-    </div>
-  );
-};
-
-export const Disabled = () => {
-  const [date, setDate] = useState<Date>();
-
-  return (
-    <div className="max-w-xs">
-      <DatePicker
-        value={date}
-        onChange={setDate}
-        placeholder="Pick a date"
-        disabled
-      />
-    </div>
-  );
-};

package/src/components/data/carousel/carousel.story.tsx

@@ -1,122 +0,0 @@
-import { defineStory, type StoryMeta } from '@djangocfg/playground';
-import {
-  Carousel,
-  CarouselContent,
-  CarouselItem,
-  CarouselNext,
-  CarouselPrevious,
-} from '.';
-import { Card, CardContent } from '../../layout/card';
-
-const meta: StoryMeta = defineStory({
-  title: 'Core/Carousel',
-  component: Carousel,
-  description: 'Carousel/slider component for cycling through content.',
-});
-
-export default meta;
-
-export const Default = () => (
-  <Carousel className="w-full max-w-xs">
-    <CarouselContent>
-      {Array.from({ length: 5 }).map((_, index) => (
-        <CarouselItem key={index}>
-          <div className="p-1">
-            <Card>
-              <CardContent className="flex aspect-square items-center justify-center p-6">
-                <span className="text-4xl font-semibold">{index + 1}</span>
-              </CardContent>
-            </Card>
-          </div>
-        </CarouselItem>
-      ))}
-    </CarouselContent>
-    <CarouselPrevious />
-    <CarouselNext />
-  </Carousel>
-);
-
-export const Multiple = () => (
-  <Carousel
-    opts={{ align: 'start' }}
-    className="w-full max-w-sm"
-  >
-    <CarouselContent>
-      {Array.from({ length: 5 }).map((_, index) => (
-        <CarouselItem key={index} className="basis-1/3">
-          <div className="p-1">
-            <Card>
-              <CardContent className="flex aspect-square items-center justify-center p-6">
-                <span className="text-3xl font-semibold">{index + 1}</span>
-              </CardContent>
-            </Card>
-          </div>
-        </CarouselItem>
-      ))}
-    </CarouselContent>
-    <CarouselPrevious />
-    <CarouselNext />
-  </Carousel>
-);
-
-export const Wide = () => (
-  <Carousel className="w-full max-w-lg">
-    <CarouselContent>
-      {Array.from({ length: 3 }).map((_, index) => (
-        <CarouselItem key={index}>
-          <div className="p-1">
-            <Card>
-              <CardContent className="flex aspect-video items-center justify-center p-6 bg-muted">
-                <span className="text-4xl font-semibold">Slide {index + 1}</span>
-              </CardContent>
-            </Card>
-          </div>
-        </CarouselItem>
-      ))}
-    </CarouselContent>
-    <CarouselPrevious />
-    <CarouselNext />
-  </Carousel>
-);
-
-export const WithImages = () => (
-  <Carousel className="w-full max-w-md">
-    <CarouselContent>
-      {[
-        'https://images.unsplash.com/photo-1494976388531-d1058494cdd8?w=400',
-        'https://images.unsplash.com/photo-1503376780353-7e6692767b70?w=400',
-        'https://images.unsplash.com/photo-1542362567-b07e54358753?w=400',
-      ].map((src, index) => (
-        <CarouselItem key={index}>
-          <div className="p-1">
-            <div className="aspect-video rounded-lg overflow-hidden">
-              <img src={src} alt={`Slide ${index + 1}`} className="w-full h-full object-cover" />
-            </div>
-          </div>
-        </CarouselItem>
-      ))}
-    </CarouselContent>
-    <CarouselPrevious />
-    <CarouselNext />
-  </Carousel>
-);
-
-export const Loop = () => (
-  <Carousel opts={{ loop: true }} className="w-full max-w-xs">
-    <CarouselContent>
-      {Array.from({ length: 5 }).map((_, index) => (
-        <CarouselItem key={index}>
-          <div className="p-1">
-            <Card>
-              <CardContent className="flex aspect-square items-center justify-center p-6">
-                <span className="text-4xl font-semibold">{index + 1}</span>
-              </CardContent>
-            </Card>
-          </div>
-        </CarouselItem>
-      ))}
-    </CarouselContent>
-    <CarouselPrevious />
-    <CarouselNext />
-  </Carousel>
-);