Add SVG file selector control to Recolorize stories

[Copilot]

Added a Storybook control to select which SVG file displays in the Recolorize stories.

Changes

• New assets: Added abstract.svg, geometric.svg, shapes.svg with varied color distributions for testing recolorization
• Story controls: Added svgFile select control to RecolorizeSvgSt1 and RecolorizeSvgSt2 with options: example, abstract, geometric, shapes
• Implementation: Explicit SVG imports for type safety, story-level control with type casting for Storybook's ArgTypes system

// Import all SVG files
import exampleSvgRaw from "./assets/example.svg?raw";
import abstractSvgRaw from "./assets/abstract.svg?raw";
// ... etc

const svgFiles = {
  example: exampleSvgRaw,
  abstract: abstractSvgRaw,
  // ... etc
} as const;

// In story definition
argTypes: {
  svgFile: {
    control: "select",
    options: svgFileNames,
  },
} as any, // Story-level control, not a component prop

Defaults to example.svg when no selection is made, maintaining backward compatibility.

Screenshots

Control panel showing SVG file selector:

Different SVG selected via dropdown (shapes.svg):

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• storybook.js.org
  • Triggering command: /home/REDACTED/work/_temp/ghcca-node/node/bin/node node /home/REDACTED/work/react-mcu/react-mcu/node_modules/.bin/../storybook/dist/bin/dispatcher.js dev -p 6006 (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.