sheriffmoose / storybook-extras

Storybook Extras Addons

Hi there 👋 call me Moose 🦌

• 🔭 I'm currently working on Creating the ultimate Addon.
• 💻 I work with many technologies - More experience in tho.
• 🌱 I'm currently learning - Nothing in particular, but I like new ideas, give me some.
• 👯 I'm looking to collaborate on - Giving back to the open source community.
• 📫 How to reach me - Find me on Twitter
• ⚡ Fun fact - I collect Action Figures

Connect With Me :

Languages & Tools

storybook-extras's Issues

Error loading markdown files (on Windows?)

I have been using this plugin on Mac, and our CI on linux, for a few weeks with no issues. However, my colleague @jgarayDH recently ran into this error on Windows:

Error loading: C:\sites\dh\design-system\docs\quality-checklist.md
Error loading: C:\sites\dh\design-system\CHANGELOG.md
Error loading: C:\sites\dh\design-system\README.md
Error loading: C:\sites\dh\design-system\dist\README.md
WARN Force closed preview build
ModuleBuildError: Module build failed (from ./node_modules/@storybook-extras/markdown/dist/loader.js):
TypeError: Cannot read properties of null (reading '1')
    at Object.makeTitle (C:\sites\dh\design-system\node_modules\@storybook-extras\devkit\dist\markdown\getMakeTitle.js:34:60)
    at _toMDX (C:\sites\dh\design-system\node_modules\@storybook-extras\devkit\dist\markdown\getMDX.js:39:25)
    at getMDX (C:\sites\dh\design-system\node_modules\@storybook-extras\devkit\dist\markdown\getMDX.js:44:29)
    at Object.<anonymous> (C:\sites\dh\design-system\node_modules\@storybook-extras\devkit\dist\markdown\getLoader.js:33:26)
    at processResult (C:\sites\dh\design-system\node_modules\webpack\lib\NormalModule.js:568:23)
    at C:\sites\dh\design-system\node_modules\webpack\lib\NormalModule.js:646:9
    at C:\sites\dh\design-system\node_modules\loader-runner\lib\LoaderRunner.js:361:14
    at C:\sites\dh\design-system\node_modules\loader-runner\lib\LoaderRunner.js:227:14
    at context.callback (C:\sites\dh\design-system\node_modules\loader-runner\lib\LoaderRunner.js:116:16)
    at Object.<anonymous> (C:\sites\dh\design-system\node_modules\@storybook-extras\devkit\dist\markdown\getLoader.js:39:12)
ModuleBuildError: Module build failed (from ./node_modules/@storybook-extras/markdown/dist/loader.js):
TypeError: Cannot read properties of null (reading '1')
    at Object.makeTitle (C:\sites\dh\design-system\node_modules\@storybook-extras\devkit\dist\markdown\getMakeTitle.js:34:60)
    at _toMDX (C:\sites\dh\design-system\node_modules\@storybook-extras\devkit\dist\markdown\getMDX.js:39:25)
    at getMDX (C:\sites\dh\design-system\node_modules\@storybook-extras\devkit\dist\markdown\getMDX.js:44:29)
    at Object.<anonymous> (C:\sites\dh\design-system\node_modules\@storybook-extras\devkit\dist\markdown\getLoader.js:33:26)
    at processResult (C:\sites\dh\design-system\node_modules\webpack\lib\NormalModule.js:568:23)
    at C:\sites\dh\design-system\node_modules\webpack\lib\NormalModule.js:646:9
    at C:\sites\dh\design-system\node_modules\loader-runner\lib\LoaderRunner.js:361:14
    at C:\sites\dh\design-system\node_modules\loader-runner\lib\LoaderRunner.js:227:14
    at context.callback (C:\sites\dh\design-system\node_modules\loader-runner\lib\LoaderRunner.js:116:16)
    at Object.<anonymous> (C:\sites\dh\design-system\node_modules\@storybook-extras\devkit\dist\markdown\getLoader.js:39:12)
ModuleBuildError: Module build failed (from ./node_modules/@storybook-extras/markdown/dist/loader.js):
TypeError: Cannot read properties of null (reading '1')
    at Object.makeTitle (C:\sites\dh\design-system\node_modules\@storybook-extras\devkit\dist\markdown\getMakeTitle.js:34:60)
    at _toMDX (C:\sites\dh\design-system\node_modules\@storybook-extras\devkit\dist\markdown\getMDX.js:39:25)
    at getMDX (C:\sites\dh\design-system\node_modules\@storybook-extras\devkit\dist\markdown\getMDX.js:44:29)
    at Object.<anonymous> (C:\sites\dh\design-system\node_modules\@storybook-extras\devkit\dist\markdown\getLoader.js:33:26)
    at processResult (C:\sites\dh\design-system\node_modules\webpack\lib\NormalModule.js:568:23)
    at C:\sites\dh\design-system\node_modules\webpack\lib\NormalModule.js:646:9
    at C:\sites\dh\design-system\node_modules\loader-runner\lib\LoaderRunner.js:361:14
    at C:\sites\dh\design-system\node_modules\loader-runner\lib\LoaderRunner.js:227:14
    at context.callback (C:\sites\dh\design-system\node_modules\loader-runner\lib\LoaderRunner.js:116:16)
    at Object.<anonymous> (C:\sites\dh\design-system\node_modules\@storybook-extras\devkit\dist\markdown\getLoader.js:39:12)
ModuleBuildError: Module build failed (from ./node_modules/@storybook-extras/markdown/dist/loader.js):
TypeError: Cannot read properties of null (reading '1')
    at Object.makeTitle (C:\sites\dh\design-system\node_modules\@storybook-extras\devkit\dist\markdown\getMakeTitle.js:34:60)
    at _toMDX (C:\sites\dh\design-system\node_modules\@storybook-extras\devkit\dist\markdown\getMDX.js:39:25)
    at getMDX (C:\sites\dh\design-system\node_modules\@storybook-extras\devkit\dist\markdown\getMDX.js:44:29)
    at Object.<anonymous> (C:\sites\dh\design-system\node_modules\@storybook-extras\devkit\dist\markdown\getLoader.js:33:26)
    at processResult (C:\sites\dh\design-system\node_modules\webpack\lib\NormalModule.js:568:23)
    at C:\sites\dh\design-system\node_modules\webpack\lib\NormalModule.js:646:9
    at C:\sites\dh\design-system\node_modules\loader-runner\lib\LoaderRunner.js:361:14
    at C:\sites\dh\design-system\node_modules\loader-runner\lib\LoaderRunner.js:227:14
    at context.callback (C:\sites\dh\design-system\node_modules\loader-runner\lib\LoaderRunner.js:116:16)
    at Object.<anonymous> (C:\sites\dh\design-system\node_modules\@storybook-extras\devkit\dist\markdown\getLoader.js:39:12)

It looks like maybe it has to do with getMakeTitle, possibly something to do with slashes? (Just a guess, since that's a common issue with Node/shell stuff in Windows.)

@storybook-extras/variants with transclusion

I have a component that displays a simple message card with variable severity (colour / icon) via a type input and an optional close button via a closeBtn input.

The text content of the message is passed via transclusion, so usage looks like this

<message [type]="'info'" [closeBtn]="true">This is my text content!!</message>

I want the text content to be descriptive of the variant, i tried like this

export const VariantsStory: StoryObj<MessageComponent> = {
  render: (args) => ({
    template: '<aw-message #control [type]="type" [closeBtn]="closeBtn">Label Text {{ control.type }} / {{ type }}</aw-message>',
    props: args
  }),
  parameters: {
      variants: {
          enable: true,
          autoCalculate: true,
          groupBy: ['closeBtn'],
          include: ['type', 'closeBtn'],
      },
  },
};

But the result is that each variant successfully renders but the values in the text content are all "info" which is the first severity
value.

Is there any existing built in mechanism to achieve what i'm looking for?

@storybook-extras/variants not working with Lit web component

Hi @sheriffMoose, this addon is a cool project. Thanks for sharing it with the world.

I wanted to try it out on a new Storybook 7.0 project I'm working on, which is using @storybook/web-components and Vite. To get started I followed the instructions here: https://github.com/sheriffMoose/storybook-extras/tree/master/packages/variants#readme

But when I look at the story where I've added

parameters: {
    variants: {
      enable: true
    },
  },

I get the following error, and my component isn't rendered in the Storybook canvas:

I'm not sure if there's an issue in _populateStoryTemplate() or in one of the other functions called before it in _init(), but without modifying your code locally, my assumption is that there's an problem due to my component/story using @storybook/web-components and/or Lit's html template literal function.

Here are the relevant parts of my package.json:

  "dependencies": {
    "lit": "2.7.2"
  },
  "devDependencies": {
    "@storybook-extras/variants": "^0.0.68",
    "@storybook/addon-essentials": "7.0.3",
    "@storybook/addon-links": "7.0.3",
    "@storybook/blocks": "7.0.3",
    "@storybook/web-components": "7.0.3",
    "@storybook/web-components-vite": "7.0.3",
    "sass": "1.62.0",
    "storybook": "7.0.4",
    "typescript": "5.0.4",
    "vite": "4.2.1"
  },

Variants seems to do nothing under storybook v7.2.1

Hi!
I've installed variants addon using npm install -D @storybook-extras/variants --legacy-peer-deps command.
Added '@storybook-extras/variants' to addons section in main.ts, added variants: { enable: true, autoCalculate: true }, to meta.parameters, restarted my storybook and nothing changed in the interface.
I'm trying to get variants of standart MUI button via setting argTypes:

  argTypes: {
    children: { control: 'text', description: 'Button text' },
    variant: { control: 'select', options: ['text', 'contained', 'outlined'] },
    size: { control: 'select', options: ['small', 'medium', 'large'] },
    color: { control: 'select', options: ['primary', 'secondary', 'success', 'error', 'info', 'warning'] },
    disabled: { control: 'boolean' },
    href: { control: 'text' },
  },