Plugin API

[Akryum]

Currently the Plugin API is barebone (and undocumented 😅 ) and doesn't allow customizing the books much. This thread is about discussing how we want to expand this API to allow more customization and flexibility.

What we can do with the Plugin API right now:

• Customize the Histoire config
• Hook on Histoire config resolved
• Hook on dev server start
• Hook on book build (ex: percy snapshots)
• Define support plugins (ex: vue, svelte, etc.)
• Automatically generate stories in a temp folder (ex: tailwind design tokens)
  So nothing about modifying the generated web app yet.

Wishlist:

• [widget] Be able to render a component to be used in the client (aka widget)
• [story-tab] Add a tab to the story pane (ex: A11y testing #85, Figma addon/plugin #154) and render a widget
• [main-menu] Add buttons to the main toolbar and render a menu with click callbacks (or external links) or a widget
• [story-menu] Add buttons to the story toolbar (next to background color and responsive pickers) and render a widget
• ???

Have any idea or questions, feel free to post them here!

[agritheory]

We're interested in developing a widget-like plugin that would allow for switching app-level themes in the story. Use case for this is the normal dark/light mode stuff, but also being able to apply client's themes to the components under development. I imagine the API for our use case to look something like. this:

import { defineConfig } from 'histoire'
import { ThemeSwitcherPlugin, pathResolver } from 'my-histoire-plugin'

export default defineConfig({
  plugins: [
    ThemeSwitcherPlugin({
        themes: [
           {title: 'Dark', path: 'path/to/style.css'},
           {title: 'Client A', path: 'path/to/cleint_a_style.css'},
           {title: 'Functional', path: () => {return pathResolver('special_case.css')}},
        ]
    }),
  ],
})

These would be shown in a <select>, ideally here:

Just providing this as a concept because I don't think we'll be the only ones with this kind of requirement.

[Akryum]

Added [story-menu]

[Akryum]

I guess it would be nice to have menus use a query variable in the URL

[agritheory]

This is a use case where I think that would be really valuable. Is [story-menu] another feature?

[Akryum]

See the original post :D

[alvarosabu]

Nice thread, some ideas from the a11y one

• Possibility to add extra tabs where the docs event tabs are, probably think how should it behave if there are too many tabs.
• Lifecycle hooks
• Access stories data
• How to render on sidebars.

[Akryum]

probably think how should it behave if there are too many tab

It already puts the overflowing tabs into a dropdown menu 😉

[MichaelTessier]

Hello, have you planned [story-tab] feature ?

[MichaelTessier]

up @Akryum please, any idea for the story-tab feature ?