How do I generate the 'Design System' content?

[victorlmneves]

Is the Design System menu available on the demo set up on the config?

[hugoattal]

All the examples are available here: https://github.com/histoire-dev/histoire/tree/main/examples

The design system section is generated by a built-in tailwind plugin that checks for a tailwind configuration file like this:

'tailwind.config.js',
'tailwind.config.cjs',
'tailwind.config.mjs',
'tailwind.config.ts',
'tailwind-config.js',
'tailwind-config.cjs',
'tailwind-config.mjs',
'tailwind-config.ts',

This example uses this file: https://github.com/histoire-dev/histoire/blob/main/tailwind.config.cjs

(We should document this, I don't think it's in the doc yet 🤔...)

[victorlmneves]

@hugoattal If it is I didn't see or didn't search well :D
I was asking because I'm not using tailwind or any other CSS framework, but we use StyleDictionary where we get all the tokens and, my idea is to generate something like that, but based on StyleDictionary tokens.
Thanks

[hugoattal]

If you want to build a plugin like this for StyleDictionary, you can take a look at the tailwind plugin source here 🙂
https://github.com/histoire-dev/histoire/blob/main/packages/histoire/src/node/builtin-plugins/tailwind-tokens.ts

Also, here is the plugin creation documentation here: https://histoire.dev/guide/plugins.html#plugin-development