Integration: Storybook

[TazorDE]

Describe the feature in detail (code, mocks, or screenshots encouraged)

In order to integrate Skeletons styles into the Storybook framework several steps need to be taken to apply the styles in Storybook.

Requirements to get it working:

• installed SvelteKit, Tailwind, Skeleton, and Storybook in a single project
• updated the example components inserted as part of the Storybook setup to use Tailwind styles
• had to import the global stylesheet app.pcss in .storybook > preview.ts to enable Tailwind styles
• then switched the Button component styles to Skeleton - initially they were not working
• setup a Storybook Decorator (a wrapping component) that included the .dark class for enabling Tailwind dark
• added data-theme="skeleton" to the Decorator as well. This enabled Skeleton styles

@endigo9740 did a full test of the @storybook/addon-themes plugin. Unfortunately the results were mixed:

• This does enable a quick toggle for Tailwind's light/dark mode using the .dark class strategy
• They provide a means to adjust the wrapping data-theme property, but this does not seem to be in a functional state.
• The plugin also doesn't not appear to let you use both the mode and theme toggles in parallel --> https://github.com/storybookjs/storybook/issues/26625

The integration guide will be based around how that pans out. If we can use the plugin, it'll be 1000x easier for most users. If not, then we may look to create a universal wrapper component (the Decorator) that implements this. For most Skeleton users they will need to be able to toggle mode/theme at will

If they stall or don't fix the plugin quickly though we'll likely consider building either a custom Decorator -or- a custom plugin that replicates the required features specifically for Skeleton's use case

(thank you @endigo9740 for doing the actual hard work so far)

What type of pull request would this be?

Docs

Provide relevant links or additional information.

• Open issue with storybook: https://github.com/storybookjs/storybook/issues/26625
• https://storybook.js.org/docs/get-started/sveltekit#supported-features
• Addon: https://github.com/storybookjs/storybook/tree/next/code/addons/themes

[endigo9740]

Reference: https://discord.com/channels/1003691521280856084/1025279710609014805/1226418235079917629

[fattenap]

Hi, I was able to get Storybook global styles working using the following approach.

I used @storybook/addon-themes and configured withThemeByDataAttribute for switching the theme only, not for dark/light mode. Make sure to set parentSelector and point it to body. Once I did that I was able to set the global theme using the selector.

For dark mode, I used the storybook-dark-mode add-on, which you can see below I configured using darkMode: { stylePreview: true }

My config looks like this

import type { Preview, SvelteRenderer } from '@storybook/svelte';
import { withThemeByDataAttribute } from '@storybook/addon-themes';

import '../src/app.postcss';

const preview: Preview = {
    parameters: {
        darkMode: { stylePreview: true },
        controls: {
            matchers: {
                color: /(background|color)$/i,
                date: /Date$/i
            }
        }
    },
    decorators: [
        withThemeByDataAttribute<SvelteRenderer>({
            themes: {
                skeleton: 'skeleton',
                crimson: 'crimson',
                modern: 'modern'
            },
            defaultTheme: 'skeleton',
            parentSelector: 'body',
            attributeName: 'data-theme'
        })
    ]
};

export default preview;

[endigo9740]

@fattenap I've tested and confirmed this is working great in practice. Good find about the dark mode plugin. We'll use this instruction when generating the upcoming integration guide for Skeleton v3.

[endigo9740]

Note: we have more documentation incoming on this topic soon. But just noting the need for the CSF if you wish to document all Svelte components (including support for slots).

• https://github.com/storybookjs/addon-svelte-csf