Fred-Boulanger · Fred-Boulanger · Oct 14, 2025 · Oct 14, 2025 · Oct 14, 2025 · Oct 14, 2025
diff --git 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
@@ -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
@@ -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: '
+          <fieldset>
+          <legend>UI PATTERNS library_wrapper</legend>
+          {{ _story }}
+          </fieldset>'
         slots:
           content:
             - type: component

diff --git a/components/banner/banner.component.yml b/components/banner/banner.component.yml
@@ -33,7 +33,8 @@ slots:
       - <img src="https://placehold.co/600x400"/>
 thirdPartySettings:
   sdcStorybook:
-    disableBasicStory: true
+    disabledStories:
+      - basic
     stories:
       preview:
         slots:

diff --git 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
@@ -45,7 +45,8 @@ libraryOverrides:
 
 thirdPartySettings:
   sdcStorybook:
-    disableBasicStory: true
+    disabledStories:
+      - basic
     stories:
       preview:
         slots:

diff --git a/package-lock.json b/package-lock.json
diff --git 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
@@ -65,6 +65,13 @@ interface LibraryDefinition {
 interface ThirdPartySettings {
   [key: string]: Record<string, any>
 }
+
+interface SDCStorybookSettings {
+  tags?: string[]
+  disabledStories?: string[]
+  parameters?: Record<string, any>
+  stories?: Record<string, Component>
+}
 export interface NamespaceDefinition {
   namespace?: string
   namespaces?: Record<string, string>

diff --git 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
@@ -106,11 +106,16 @@ const createStoryIndex = (
   fileName: string,
   baseTitle: string,
   stories: Record<string, any>,
-  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) {