@djangocfg/widget-visual 0.1.1

package/src/qrcode/qr-code.stories.tsx

@@ -0,0 +1,102 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import {
+  QRCode,
+  QRCodeCanvas,
+  QRCodeSvg,
+  QRCodeImage,
+  QRCodeDownload,
+  QRCodeOverlay,
+  QRCodeSkeleton,
+} from '.';
+
+const meta = {
+  title: 'Widgets/Visual/QRCode',
+  component: QRCode,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'A QR code generator with canvas, SVG, and image output formats.',
+      },
+    },
+  },
+  argTypes: {
+    value: { control: 'text' },
+    size: { control: 'number' },
+    level: { control: 'select', options: ['L', 'M', 'Q', 'H'] },
+    margin: { control: 'number' },
+  },
+  args: {
+    value: 'https://djangocfg.dev',
+  },
+} satisfies Meta<typeof QRCode>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <QRCode value="https://djangocfg.dev" size={200}>
+      <QRCodeCanvas />
+      <QRCodeSkeleton />
+    </QRCode>
+  ),
+};
+
+export const Svg: Story = {
+  render: () => (
+    <QRCode value="https://djangocfg.dev" size={200}>
+      <QRCodeSvg />
+      <QRCodeSkeleton />
+    </QRCode>
+  ),
+};
+
+export const Image: Story = {
+  render: () => (
+    <QRCode value="https://djangocfg.dev" size={200}>
+      <QRCodeImage />
+      <QRCodeSkeleton />
+    </QRCode>
+  ),
+};
+
+export const WithOverlay: Story = {
+  render: () => (
+    <QRCode value="https://djangocfg.dev" size={200}>
+      <QRCodeCanvas />
+      <QRCodeOverlay className="size-10 rounded-full bg-white p-1">
+        <span className="text-xs font-bold">DC</span>
+      </QRCodeOverlay>
+      <QRCodeSkeleton />
+    </QRCode>
+  ),
+};
+
+export const CustomColors: Story = {
+  render: () => (
+    <QRCode
+      value="https://djangocfg.dev"
+      size={200}
+      foregroundColor="#3b82f6"
+      backgroundColor="#f8fafc"
+    >
+      <QRCodeCanvas />
+      <QRCodeSkeleton />
+    </QRCode>
+  ),
+};
+
+export const WithDownload: Story = {
+  render: () => (
+    <div className="flex flex-col items-center gap-4">
+      <QRCode value="https://djangocfg.dev" size={200}>
+        <QRCodeCanvas />
+        <QRCodeSkeleton />
+      </QRCode>
+      <QRCodeDownload format="png" filename="djangocfg-qr">
+        Download PNG
+      </QRCodeDownload>
+    </div>
+  ),
+};

package/src/qrcode/types.ts

@@ -0,0 +1,57 @@
+import * as React from 'react';
+
+export type QRCodeLevel = 'L' | 'M' | 'Q' | 'H';
+
+export interface QRCodeCanvasOpts {
+  errorCorrectionLevel: QRCodeLevel;
+  type?: 'image/png' | 'image/jpeg' | 'image/webp';
+  quality?: number;
+  margin?: number;
+  color?: {
+    dark: string;
+    light: string;
+  };
+  width?: number;
+  rendererOpts?: {
+    quality?: number;
+  };
+}
+
+export interface StoreState {
+  dataUrl: string | null;
+  svgString: string | null;
+  isGenerating: boolean;
+  error: Error | null;
+  generationKey: string;
+}
+
+export interface Store {
+  subscribe: (callback: () => void) => () => void;
+  getState: () => StoreState;
+  setState: <K extends keyof StoreState>(key: K, value: StoreState[K]) => void;
+  setStates: (updates: Partial<StoreState>) => void;
+  notify: () => void;
+}
+
+export interface QRCodeContextValue {
+  value: string;
+  size: number;
+  margin: number;
+  level: QRCodeLevel;
+  backgroundColor: string;
+  foregroundColor: string;
+  canvasRef: React.RefObject<HTMLCanvasElement | null>;
+}
+
+export interface QRCodeProps extends Omit<React.ComponentProps<'div'>, 'onError'> {
+  value: string;
+  size?: number;
+  level?: QRCodeLevel;
+  margin?: number;
+  quality?: number;
+  backgroundColor?: string;
+  foregroundColor?: string;
+  onError?: (error: Error) => void;
+  onGenerated?: () => void;
+  asChild?: boolean;
+}