Backgrounds: merge the overlapping generators into variants

Closed
  • Is something wrong?
#408 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
5/5
Estimated time
Over a week
Newbie friendliness
55/100
Issue type
Refactor
Clarity
Clearly specified
Activity status
Active
Tech stack
react, typescript
Domain
design, frontend

Research direction

Start with the listed generators in lib/background/generators/, then read types/background.ts, lib/background/registry.ts, the picker and controls, and store/background-store.ts. Capture the old generators’ SVG output as fixtures before changing them, and run the existing tests to see how rendering and saved backgrounds are covered. Done means three variant-based generators preserve each old seeded SVG, old saved kinds still load, the picker shows three entries with variant controls, and README.md and CHANGELOG.md describe the merge.

Written by the indexing model from the issue text.

Description

area: backgrounds difficulty: medium enhancement help wanted v2.0.0

Summary

Several generators draw the same idea in a slightly different way. Merge three groups into one generator each with a variant control, taking nine generators to three, without losing a look and without breaking a saved background.

Part of the 2.0.0 plan: fewer, better and fully tested studios.

Where to look

  • lib/background/generators/: rings.ts, arcs.ts, squares.ts; argyle.ts, plaid.ts, checks.ts; zigzag.ts, chevron.ts, squiggle.ts
  • types/background.ts: BackgroundKind and BackgroundOptions
  • lib/background/registry.ts, components/backgrounds/generator-picker.tsx and background-controls.tsx
  • store/background-store.ts

Behaviour

  • Concentric (rings, arcs, squares), Diamonds and bands (argyle, plaid, checks) and Waves of lines (zigzag, chevron, squiggle) each get one generator with a variant option next to halftoneGradient in BackgroundOptions.
  • Each old kind keeps working: add an alias map so a saved or shared background with kind: "plaid" loads as the merged generator with the matching variant.
  • With the same seed and settings, a variant must draw exactly what the old generator drew.

Acceptance criteria

  • Golden test: for each old kind, the merged generator with its variant renders the same SVG as the old module did (commit the old output as fixtures before deleting the old code).
  • A saved background with each old kind still loads, covered by a store or registry test.
  • The picker shows three entries instead of nine, with a variant control.
  • README.md and CHANGELOG.md say what merged.

Getting started: fork the repo, then pnpm install and pnpm dev (Node 22+, pnpm 11, no API keys). Before opening a PR, run pnpm typecheck && pnpm test && pnpm lint && pnpm format:check && pnpm check:dashes && pnpm build (CI fails on unformatted files, so pnpm format first). See CONTRIBUTING.md and the first contribution walkthrough.

Everything needed is in the repository. This doesn't need maintainer access, secrets or paid services. Comment below to claim it, and ask questions here any time.

Dominant language
TypeScript
Stars
11
Forks
3
Avg merge
5h 23m
Merged PRs (30d)
74

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from yakew7/DesignHub

All issues in yakew7/DesignHub

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.