traefik / traefik/faency

[Storybook] implement uuid generation for stories

Open
#208 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

enhancement kind/proposal
Dominant language
TypeScript
Stars
41
Forks
16
Avg merge
3d 1h
Merged PRs (30d)
3

Description

Description

Some stories require one or more unique ids to bind inner components together.

For example:

  • Label stories require to bind htmlFor from a Label on an input id prop
  • TextField stories require a unique id prop
  • Input stories require to bind htmlFor from a Label on Input id prop

Radix-UI already implemented an IdProvider for its primitives, but it seems not to expose its api.

Requirements

We need to be able duplicate a story (with .bind({})) without duplicating these unique ids.

As we may need multiple unique ids inside of a single story, it would be helpful to be able to configure how many ids we want, and receive them as an array.

Ex:

const [id1, id2, id3, id4] = makeUniqueIds(4);
Dependencies

uuid and uuid-browser are already dependencies of @storybook/addon-actions. We could reuse the library if we have no better option.

Contributor guide

No contributing guide indexed for this repository

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.

Research direction

Start by locating the Storybook stories that need unique ids and inspecting how @storybook/addon-actions uses its existing uuid and uuid-browser dependencies. Compare the available Radix-UI IdProvider API before choosing an approach. Done means duplicated stories receive distinct ids and a story can request multiple ids as an array.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend, tooling
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.