diff --git a/CHANGELOG.md b/CHANGELOG.md index 9562215..d33cd97 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,21 @@ +# v0.14.3 (Tue Oct 14 2025) + +#### 🐛 Bug Fix + +- Add library_wrapper ui_pattern story feature [#88](https://github.com/iberdinsky-skilld/sdc-addon/pull/88) ([@Fred-Boulanger](https://github.com/Fred-Boulanger) [@iberdinsky-skilld](https://github.com/iberdinsky-skilld)) + +#### ⚠️ Pushed to `main` + +- Bump (iberdinsky@skilld.cloud) + +#### Authors: 3 + +- [@iberdinsky-skilld](https://github.com/iberdinsky-skilld) +- fredb ([@Fred-Boulanger](https://github.com/Fred-Boulanger)) +- iberdinsky-skilld (iberdinsky@skilld.cloud) + +--- + # v0.14.2 (Fri Oct 10 2025) #### ⚠️ Pushed to `main` diff --git a/README.md b/README.md index 58f3399..0c45de6 100644 --- a/README.md +++ b/README.md @@ -19,10 +19,10 @@ This addon streamlines the integration of Drupal Single Directory Components (SD - [Configuration Options](#configuration-options) - [Setting Default Values](#setting-default-values) - [Story Configuration via thirdPartySettings.sdcStorybook](#story-configuration-via-thirdpartysettingssdcstorybook) +- [UI Patterns](#ui-patterns) - [Why Choose SDC Storybook Over Alternatives?](#why-choose-sdc-storybook-over-alternatives) - [Dependencies](#dependencies) - [Known Issues](#known-issues) -- [UI Patterns](#ui-patterns) --- @@ -599,7 +599,8 @@ thirdPartySettings: sdcStorybook: tags: - autodocs - disableBasicStory: true + disabledStories: + - basic parameters: layout: 'centered' stories: @@ -618,10 +619,27 @@ Below is a list of all available configuration options for `thirdPartySettings.s | Key | Type | Description | | ------------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `tags` | `array` | Optional. Adds additional [Storybook tags](https://storybook.js.org/docs/writing-docs/autodocs) (e.g. `autodocs`). | -| `disableBasicStory` | `boolean` | When set to `true`, disables the automatically generated “Basic” story. | +| `disabledStories` | `array` | Optional. Array of story names to disable. Supports `basic`, `preview`, or any custom story name. Use `all` to disable all stories. **Note:** `disableBasicStory` is deprecated in favor of `disabledStories: ['basic']`. | | `parameters` | `object` | Global [Storybook parameters](https://storybook.js.org/docs/writing-stories/parameters) applied to all generated stories. | | `stories` | `object` | Allows defining or overriding specific stories. Each key (e.g. `preview`) represents a story. Within each story, you can define `args`, `parameters`, and other Storybook options. | +### Disabled Stories Examples + +```yaml +# Disable only the basic story +disabledStories: + - basic + +# Disable basic and preview stories +disabledStories: + - basic + - preview + +# Disable all stories +disabledStories: + - all +``` + ### Example: Custom Preview Story ```yaml @@ -637,6 +655,14 @@ thirdPartySettings: This configuration creates an additional story named **Preview**, rendered using the provided `args` and `parameters`. +## UI Patterns + +Addon supports UI Patterns `library_wrapper` [for wrapping stories](https://project.pages.drupalcode.org/ui_patterns/2-authors/1-stories-and-library/#library-wrappers) in a specific HTML structure. + +--- + +- Custom Twig filters and functions are not supported ([UI Patterns TwigExtension](https://git.drupalcode.org/project/ui_patterns/-/blob/8.x-1.x/src/Template/TwigExtension.php)). + ## Why Choose SDC Storybook Over Alternatives? While solutions like [SDC Styleguide](https://www.drupal.org/project/sdc_styleguide) and [Drupal Storybook](https://www.drupal.org/project/storybook) are valuable, the SDC Storybook addon offers distinct advantages: @@ -690,8 +716,3 @@ While using Drupal to render components offers tighter integration, there are st ## Known Issues - The addon relies on [Experimental indexers](https://storybook.js.org/docs/api/main-config/main-config-indexers). - -## UI Patterns - -- Variants are partially supported ([Issue 3390712](https://www.drupal.org/project/drupal/issues/3390712)). -- Custom Twig filters and functions are not supported ([UI Patterns TwigExtension](https://git.drupalcode.org/project/ui_patterns/-/blob/8.x-1.x/src/Template/TwigExtension.php)). diff --git a/components/addon-features-examples/addon-features-examples.component.yml b/components/addon-features-examples/addon-features-examples.component.yml index e7c4317..d336a67 100644 --- a/components/addon-features-examples/addon-features-examples.component.yml +++ b/components/addon-features-examples/addon-features-examples.component.yml @@ -19,13 +19,19 @@ slots: thirdPartySettings: sdcStorybook: - disableBasicStory: true + disabledStories: + - basic tags: - autodocs stories: preview: name: Preview Example description: 'Addon Features preview description' + library_wrapper: ' +
+ UI PATTERNS library_wrapper + {{ _story }} +
' slots: content: - type: component diff --git a/components/banner/banner.component.yml b/components/banner/banner.component.yml index ea60025..d558777 100644 --- a/components/banner/banner.component.yml +++ b/components/banner/banner.component.yml @@ -33,7 +33,8 @@ slots: - thirdPartySettings: sdcStorybook: - disableBasicStory: true + disabledStories: + - basic stories: preview: slots: diff --git a/components/card/card.component.yml b/components/card/card.component.yml index a3e261e..5cbf45e 100644 --- a/components/card/card.component.yml +++ b/components/card/card.component.yml @@ -37,7 +37,8 @@ slots: thirdPartySettings: sdcStorybook: - disableBasicStory: true + disabledStories: + - basic parameters: layout: 'centered' stories: diff --git a/components/header/header.component.yml b/components/header/header.component.yml index 6541f52..b5d23d0 100644 --- a/components/header/header.component.yml +++ b/components/header/header.component.yml @@ -45,7 +45,8 @@ libraryOverrides: thirdPartySettings: sdcStorybook: - disableBasicStory: true + disabledStories: + - basic stories: preview: slots: diff --git a/package-lock.json b/package-lock.json index 96c3241..fbbd188 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "storybook-addon-sdc", - "version": "0.14.2", + "version": "0.15.1", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "storybook-addon-sdc", - "version": "0.14.2", + "version": "0.15.1", "license": "MIT", "dependencies": { "glob": "^11.0.1", diff --git a/package.json b/package.json index 2802b35..f1ef4c9 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "storybook-addon-sdc", - "version": "0.14.2", + "version": "0.15.1", "description": "Drupal Single Directory Components as stories", "keywords": [ "SDC", diff --git a/src/sdc.d.ts b/src/sdc.d.ts index 33c72d1..01c8f62 100644 --- a/src/sdc.d.ts +++ b/src/sdc.d.ts @@ -65,6 +65,13 @@ interface LibraryDefinition { interface ThirdPartySettings { [key: string]: Record } + +interface SDCStorybookSettings { + tags?: string[] + disabledStories?: string[] + parameters?: Record + stories?: Record +} export interface NamespaceDefinition { namespace?: string namespaces?: Record diff --git a/src/storiesGenerator.ts b/src/storiesGenerator.ts index 6a3357f..1f2e456 100644 --- a/src/storiesGenerator.ts +++ b/src/storiesGenerator.ts @@ -25,16 +25,20 @@ export const ${capitalize(storyKey)} = { ${generateArgs(slots, true)} ${generateVariants(variants)} }, - ${library_wrapper ? `decorators: [ - (Story) => { - const wrapper = ${JSON.stringify(library_wrapper)}; - if (!wrapper) return Story(); - - // Replace {{ _story }} with the actual story component - const wrappedHtml = wrapper.replace('{{ _story }}', Story()); - return wrappedHtml; - } - ],` : ''} + ${ + library_wrapper + ? `decorators: [ + (Story) => { + const wrapper = ${JSON.stringify(library_wrapper)}; + if (!wrapper) return Story(); + + // Replace {{ _story }} with the actual story component + const wrappedHtml = wrapper.replace('{{ _story }}', Story()); + return wrappedHtml; + } + ],` + : '' + } play: async ({ canvasElement }) => { Drupal.attachBehaviors(canvasElement, window.drupalSettings); }, diff --git a/src/vite-plugin-storybook-yaml-stories.ts b/src/vite-plugin-storybook-yaml-stories.ts index 5064cdd..98e8843 100755 --- a/src/vite-plugin-storybook-yaml-stories.ts +++ b/src/vite-plugin-storybook-yaml-stories.ts @@ -106,11 +106,16 @@ const createStoryIndex = ( fileName: string, baseTitle: string, stories: Record, - disableBasicStory: boolean, + disabledStories: string[], tags: string[] ): IndexInput[] => { const storiesIndex: IndexInput[] = [] - if (disableBasicStory === false) { + + // Check if all stories are disabled + const isAllDisabled = disabledStories.includes('all') + + // Add Basic story if not disabled + if (!isAllDisabled && !disabledStories.includes('basic')) { storiesIndex.push({ type: 'story', importPath: fileName, @@ -120,15 +125,19 @@ const createStoryIndex = ( }) } - if (stories) { + // Add custom stories if not all disabled + if (stories && !isAllDisabled) { Object.keys(stories).forEach((storyKey) => { - storiesIndex.push({ - type: 'story', - importPath: fileName, - exportName: storyKey, - title: baseTitle, - tags, - }) + // Skip if this specific story is disabled + if (!disabledStories.includes(storyKey)) { + storiesIndex.push({ + type: 'story', + importPath: fileName, + exportName: storyKey, + title: baseTitle, + tags, + }) + } }) } @@ -246,13 +255,25 @@ export const yamlStoriesIndexer: Indexer = { const storiesContent = loadStoryFilesSync(fileName) const mergedStories = { ...stories, ...storiesContent } const tags = content?.thirdPartySettings?.sdcStorybook?.tags ?? [] - const disableBasicStory = - content.thirdPartySettings?.sdcStorybook?.disableBasicStory ?? false + + // Handle both old and new configuration formats + const oldDisableBasicStory = content.thirdPartySettings?.sdcStorybook?.disableBasicStory + const newDisabledStories = content.thirdPartySettings?.sdcStorybook?.disabledStories + + let disabledStories: string[] = [] + + // Backward compatibility: convert old boolean to new array format + if (oldDisableBasicStory === true) { + disabledStories = ['basic'] + } else if (newDisabledStories) { + disabledStories = newDisabledStories + } + return createStoryIndex( fileName, baseTitle, mergedStories, - disableBasicStory, + disabledStories, tags ) } catch (error) {