Open
Description
Is your feature request related to a problem? Please describe.
Currently, the naming feature is incomplete for two reasons:
title
cannot be set consistently in the same format in a project, especially sincetitle
has to be statically discoverable.- multiple devs will eventually break consistency, wasting time discussing it
- 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 toconfig.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
}