Skip to content

Add ability to pass stories as object[] #596

Open
@o-alexandrov

Description

@o-alexandrov

Is your feature request related to a problem? Please describe.

Currently, the naming feature is incomplete for two reasons:

  1. title cannot be set consistently in the same format in a project, especially since title has to be statically discoverable.
    • multiple devs will eventually break consistency, wasting time discussing it
  2. manually specifying name is mentally tedious (is a time waste)

Describe the solution you'd like

In config.mjs, I'd like to be able to pass stories as a list of:

{
  "src": "/path-to-file.tsx",
  "title": "custom-generated-title"
}

This way, devs would be able to create their own custom standardization of story naming.
For example, I'd create a function:

import fg from "fast-glob"
import path from "node:path"

const nestedSeparator = `--` // see: https://ladle.dev/docs/stories#navigation-and-routes
const regexLeadingSlashOrEndingStoriesPostfix = /(^\/|\/stories\.(ts|tsx)$)/g

const getStories = () => {
  const pathToUi = new URL("../src/ui", import.meta.url).pathname
  const filenames = fg.sync(`${pathToUi}/**/stories.{ts,tsx}`)

  return filenames.map((filename) => {
    const [_, pathFromUiRaw] = filename.split(pathToUi)
    const pathFromUi = pathFromUiRaw.replace(
      regexLeadingSlashOrEndingStoriesPostfix,
      "",
    )
    return {
      src: filename,
      title: pathFromUi.split(path.sep).join(nestedSeparator),
    }
  })
}

So a story located at: src/ui/inputs/textfield/stories.tsx
Results in: inputs--textfield

Describe alternatives you've considered

An alternative would be to:

  • add storyTitle config option to config.mjs
// config.mjs

export default {
  stories: "src/ui/**/*.stories.{ts,tsx}",
  storyTitle: (pathToFile: string, title: string) => formatTitle() // user can customize the final title on a per-story basis
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions