srcdev-nuxt-components 9.6.18 → 9.6.20

package/app/components/02.molecules/qr-code/stories/CaptureQrCode.stories.ts

@@ -1,18 +1,27 @@
-import type { Meta, StoryFn } from "@nuxtjs/storybook";
-import CaptureQrCodeComponent from "../CaptureQrCode.vue";
+import { ref, type ComponentPublicInstance } from "vue";
+import type { Meta, StoryObj } from "@nuxtjs/storybook";
+import CaptureQrCode from "../CaptureQrCode.vue";
+import CanvasSwitcher from "../../../01.atoms/canvas-switcher/CanvasSwitcher.vue";
+import type { MediaCanvas } from "~/types/components";
 
-const meta: Meta<typeof CaptureQrCodeComponent> = {
+const meta: Meta<typeof CaptureQrCode> = {
   title: "Molecules/QR Code/CaptureQrCode",
-  component: CaptureQrCodeComponent,
+  component: CaptureQrCode,
   argTypes: {
     cameraStoppedLabel: {
       control: { type: "text" },
       description: "Message shown while the camera is stopped (e.g. the tab is hidden)",
-      table: { category: "Content" },
+      table: { category: "Content", defaultValue: { summary: "Camera stopped" } },
     },
     resetCameraLabel: {
       control: { type: "text" },
       description: "Reset button text in the error state",
+      table: { category: "Content", defaultValue: { summary: "Reset camera" } },
+    },
+    errorMessages: {
+      control: "object",
+      description:
+        "Error copy keyed by camera error name (`NotAllowedError`, `NotFoundError`, ...) plus `default`. Merged over the built-in English messages",
       table: { category: "Content" },
     },
     styleClassPassthrough: { table: { disable: true } },
@@ -20,37 +29,116 @@ const meta: Meta<typeof CaptureQrCodeComponent> = {
   args: {
     cameraStoppedLabel: "Camera stopped",
     resetCameraLabel: "Reset camera",
-    styleClassPassthrough: [],
+    errorMessages: {},
   },
+  decorators: [
+    (story, context) => ({
+      components: { story, CanvasSwitcher },
+      setup() {
+        const canvasName = ref<MediaCanvas>(context.parameters.initialCanvas ?? "fullWidthCanvas");
+        return { canvasName };
+      },
+      template: `
+        <div style="padding: 1.2rem 1.6rem; border-block-end: 1px solid currentColor;">
+          <CanvasSwitcher v-model:canvas-name="canvasName" />
+        </div>
+        <div :class="canvasName" style="margin-inline: auto; padding: 2rem; outline: 1px dashed currentColor;">
+          <story />
+        </div>
+      `,
+    }),
+  ],
   parameters: {
+    layout: "fullscreen",
     docs: {
       description: {
         component:
-          "Live QR code scanner using the device camera. Needs camera permission; the camera stops when the tab is hidden or the route changes. Results are announced through a polite live region.",
+          "Live QR code scanner using the device camera. Needs camera permission; the camera stops while the tab is hidden and restarts when it's shown again, and stops on route leave. " +
+          "Results are announced through a polite live region. Copy props: `cameraStoppedLabel`, `resetCameraLabel`, `errorMessages`; the `#error` slot replaces the error block.",
       },
     },
   },
 };
 
 export default meta;
+type Story = StoryObj<typeof CaptureQrCode>;
 
-const Template: StoryFn<typeof CaptureQrCodeComponent> = (args) => ({
-  components: { CaptureQrCodeComponent },
-  setup() {
-    return { args };
-  },
-  template: `
-    <div style="padding: 40px; max-width: 600px; margin: 0 auto;">
-      <p style="margin: 0 0 16px; font-size: 14px; opacity: 0.8;">
-        Allow camera access when prompted, then hold a QR code up to the camera.
-      </p>
-      <CaptureQrCodeComponent
-        :camera-stopped-label="args.cameraStoppedLabel"
-        :reset-camera-label="args.resetCameraLabel"
-        :style-class-passthrough="args.styleClassPassthrough"
-      />
-    </div>
-  `,
-});
+export const Default: Story = {
+  render: (args) => ({
+    components: { CaptureQrCode },
+    setup() {
+      return { args };
+    },
+    template: `
+      <p style="margin: 0 0 1.6rem;">Allow camera access when prompted, then hold a QR code up to the camera.</p>
+      <CaptureQrCode v-bind="args" />
+    `,
+  }),
+};
+
+interface CaptureSetupState {
+  onDetect: (codes: { rawValue: string }[]) => void;
+  onError: (err: Error) => void;
+  state: { cameraOn: boolean };
+}
+
+const namedError = (name: string, message = "") => Object.assign(new Error(message), { name });
 
-export const Default = Template.bind({});
+const hostileResults = [
+  "https://example.com/a/very/long/unbroken/path/that/never/wraps/on/its/own?utm_source=northtown&utm_medium=print&utm_campaign=autumn",
+  "WIFI:T:WPA;S:Alex Morgan's very long network name for the upstairs studio;P:correcthorsebatterystaple;;",
+  "<script>alert('not run')</script>",
+  "🙂🙂🙂",
+  "مرحبا بالعالم",
+  "x",
+];
+
+export const StressTest: Story = {
+  name: "Stress Test (Worst-Case Data)",
+  args: {
+    cameraStoppedLabel:
+      "Die Kamera wurde angehalten, weil dieser Tab im Hintergrund ist. Kehren Sie zu diesem Tab zurück, um fortzufahren.",
+    resetCameraLabel: "Kamerazugriff erneut anfordern und den Scanvorgang neu starten",
+    errorMessages: {
+      default: "Supercalifragilisticexpialidociousandthensomemoretextwithoutanyspacesatall",
+    },
+  },
+  render: (args) => ({
+    components: { CaptureQrCode },
+    setup() {
+      // Story-only: drive the component's internal handlers, since a camera can't be faked here.
+      const captureRef = ref<ComponentPublicInstance | null>(null);
+      const internals = () => (captureRef.value?.$ as unknown as { setupState: CaptureSetupState } | undefined)?.setupState;
+      const simulateResults = () => internals()?.onDetect(hostileResults.map((rawValue) => ({ rawValue })));
+      const simulateKnownError = () => internals()?.onError(namedError("NotAllowedError"));
+      const simulateUnknownError = () => internals()?.onError(namedError("SomethingElse", "raw library text"));
+      const simulateStopped = () => {
+        const state = internals()?.state;
+        if (state) state.cameraOn = false;
+      };
+      return { args, captureRef, simulateResults, simulateKnownError, simulateUnknownError, simulateStopped };
+    },
+    template: `
+      <div style="display: flex; flex-wrap: wrap; gap: 0.8rem; margin-block-end: 1.6rem;">
+        <button type="button" @click="simulateResults">Simulate hostile results</button>
+        <button type="button" @click="simulateKnownError">Simulate NotAllowedError</button>
+        <button type="button" @click="simulateUnknownError">Simulate unknown error</button>
+        <button type="button" @click="simulateStopped">Simulate stopped camera</button>
+      </div>
+      <CaptureQrCode ref="captureRef" v-bind="args" />
+    `,
+  }),
+  parameters: {
+    initialCanvas: "mobileCanvas",
+    docs: {
+      story: { inline: false, height: "720px" },
+      description: {
+        story:
+          "Hostile copy and results at every `CanvasSwitcher` width; the buttons call the component's internal handlers because a real camera can't be faked here. " +
+          "Check that: the long URL and Wi-Fi string wrap inside the canvas, `<script>` renders as text, emoji and right-to-left results read correctly, and a single character still shows as a list item; " +
+          "`NotAllowedError` shows the built-in plain-language message, an unknown error shows the long unbroken `errorMessages.default` wrapped, and the long German reset label wraps inside its button; " +
+          "the stopped message wraps. Switch tabs and back: the camera restarts.",
+      },
+    },
+  },
+};

package/app/components/02.molecules/qr-code/stories/DecodeQrCode.stories.ts

@@ -1,53 +1,144 @@
-import type { Meta, StoryFn } from "@nuxtjs/storybook";
-import DecodeQrCodeComponent from "../DecodeQrCode.vue";
+import { ref, type ComponentPublicInstance } from "vue";
+import type { Meta, StoryObj } from "@nuxtjs/storybook";
+import DecodeQrCode from "../DecodeQrCode.vue";
+import CanvasSwitcher from "../../../01.atoms/canvas-switcher/CanvasSwitcher.vue";
+import type { MediaCanvas } from "~/types/components";
 
-const meta: Meta<typeof DecodeQrCodeComponent> = {
+const meta: Meta<typeof DecodeQrCode> = {
   title: "Molecules/QR Code/DecodeQrCode",
-  component: DecodeQrCodeComponent,
+  component: DecodeQrCode,
   argTypes: {
     uploadLabel: {
       control: { type: "text" },
       description: "Visible label for the file input",
-      table: { category: "Content" },
+      table: { category: "Content", defaultValue: { summary: "Upload a QR code image" } },
     },
     dropLabel: {
       control: { type: "text" },
       description: "Instruction text inside the drop zone",
-      table: { category: "Content" },
+      table: { category: "Content", defaultValue: { summary: "Or drop a QR code image here" } },
+    },
+    noResultLabel: {
+      control: { type: "text" },
+      description: "Shown when an image is decoded but contains no QR code",
+      table: { category: "Content", defaultValue: { summary: "No QR code was found in that image." } },
+    },
+    readErrorLabel: {
+      control: { type: "text" },
+      description: "Shown when a dropped file or URL can't be read as an image",
+      table: { category: "Content", defaultValue: { summary: "That file couldn't be read as an image." } },
     },
     styleClassPassthrough: { table: { disable: true } },
   },
   args: {
     uploadLabel: "Upload a QR code image",
     dropLabel: "Or drop a QR code image here",
-    styleClassPassthrough: [],
+    noResultLabel: "No QR code was found in that image.",
+    readErrorLabel: "That file couldn't be read as an image.",
   },
+  decorators: [
+    (story, context) => ({
+      components: { story, CanvasSwitcher },
+      setup() {
+        const canvasName = ref<MediaCanvas>(context.parameters.initialCanvas ?? "fullWidthCanvas");
+        return { canvasName };
+      },
+      template: `
+        <div style="padding: 1.2rem 1.6rem; border-block-end: 1px solid currentColor;">
+          <CanvasSwitcher v-model:canvas-name="canvasName" />
+        </div>
+        <div :class="canvasName" style="margin-inline: auto; padding: 2rem; outline: 1px dashed currentColor;">
+          <story />
+        </div>
+      `,
+    }),
+  ],
   parameters: {
+    layout: "fullscreen",
     docs: {
       description: {
         component:
-          "Decodes QR codes from an uploaded or dropped image (PNG, JPEG, WEBP and other common formats). Results are announced through a polite live region.",
+          "Decodes QR codes from an uploaded or dropped image (PNG, JPEG, WEBP and other common formats). Results, or a no-code/unreadable-file message, are announced through a polite live region. " +
+          "Copy props: `uploadLabel`, `dropLabel`, `noResultLabel`, `readErrorLabel`.",
       },
     },
   },
 };
 
 export default meta;
+type Story = StoryObj<typeof DecodeQrCode>;
 
-const Template: StoryFn<typeof DecodeQrCodeComponent> = (args) => ({
-  components: { DecodeQrCodeComponent },
-  setup() {
-    return { args };
-  },
-  template: `
-    <div style="padding: 40px; max-width: 600px; margin: 0 auto;">
-      <DecodeQrCodeComponent
-        :upload-label="args.uploadLabel"
-        :drop-label="args.dropLabel"
-        :style-class-passthrough="args.styleClassPassthrough"
-      />
-    </div>
-  `,
-});
+export const Default: Story = {
+  render: (args) => ({
+    components: { DecodeQrCode },
+    setup() {
+      return { args };
+    },
+    template: `<DecodeQrCode v-bind="args" />`,
+  }),
+};
+
+interface DecodeSetupState {
+  onDetect: (codes: { rawValue: string }[]) => void;
+  onDropping: (dropping: boolean) => void;
+  onDropError: () => void;
+}
+
+const hostileResults = [
+  "https://example.com/a/very/long/unbroken/path/that/never/wraps/on/its/own?utm_source=northtown&utm_medium=print&utm_campaign=autumn",
+  "<b>Not bold</b>",
+  "🙂🙂🙂",
+  "مرحبا بالعالم",
+  "x",
+  ...Array.from({ length: 10 }, (_, i) => `Code ${i + 1}`),
+];
 
-export const Default = Template.bind({});
+export const StressTest: Story = {
+  name: "Stress Test (Worst-Case Data)",
+  args: {
+    uploadLabel: "Laden Sie ein Bild mit einem QR-Code von Ihrem Gerät hoch, um ihn zu entschlüsseln",
+    dropLabel: "Supercalifragilisticexpialidociousandthensomemoretextwithoutanyspacesatall",
+    noResultLabel: "In diesem Bild wurde kein QR-Code gefunden. Versuchen Sie es mit einem schärferen Foto.",
+    readErrorLabel: "",
+  },
+  render: (args) => ({
+    components: { DecodeQrCode },
+    setup() {
+      // Story-only: drive the component's internal handlers to show states without a real image.
+      const decodeRef = ref<ComponentPublicInstance | null>(null);
+      const internals = () => (decodeRef.value?.$ as unknown as { setupState: DecodeSetupState } | undefined)?.setupState;
+      const dropping = ref(false);
+      const simulateResults = () => internals()?.onDetect(hostileResults.map((rawValue) => ({ rawValue })));
+      const simulateEmpty = () => internals()?.onDetect([]);
+      const simulateError = () => internals()?.onDropError();
+      const toggleDropping = () => {
+        dropping.value = !dropping.value;
+        internals()?.onDropping(dropping.value);
+      };
+      return { args, decodeRef, simulateResults, simulateEmpty, simulateError, toggleDropping };
+    },
+    template: `
+      <div style="display: flex; flex-wrap: wrap; gap: 0.8rem; margin-block-end: 1.6rem;">
+        <button type="button" @click="simulateResults">Simulate hostile results</button>
+        <button type="button" @click="simulateEmpty">Simulate image with no code</button>
+        <button type="button" @click="simulateError">Simulate unreadable file</button>
+        <button type="button" @click="toggleDropping">Toggle dragging state</button>
+      </div>
+      <DecodeQrCode ref="decodeRef" v-bind="args" />
+    `,
+  }),
+  parameters: {
+    initialCanvas: "mobileCanvas",
+    docs: {
+      story: { inline: false, height: "720px" },
+      description: {
+        story:
+          "Hostile copy and results at every `CanvasSwitcher` width; the buttons call the component's internal handlers so each state shows without a real image. " +
+          "Check that: the long German upload label wraps and the file input stays inside the canvas; the unbroken drop label wraps inside the drop zone; " +
+          "the long URL wraps, `<b>` renders as text, emoji and right-to-left results read correctly, and 15 results stack without overflow; " +
+          "the no-code message wraps; `readErrorLabel` is empty here, so the unreadable-file button clears the results and renders no message element at all; " +
+          "the dragging state shows the active border and background.",
+      },
+    },
+  },
+};