Storybook 7 Support? about storybook-design-token HOT 31 CLOSED

@Sqrrl - Managed to everything work nice and easy with beta.3 :) I have one issue though, it seems the disable of the tab is not working with Storybook 7 i guess. I have disabled as per documentation I think, but the tab does not get removed (it is not the default tab that shows though). Any ideas on this one?

I am using code below in preview.js to disable the tab as we only need the docs side of things because we have a theme switcher within stories and require style guide docs instead (via cssVariablesTheme).

export const parameters = {
  designToken: {
    disable: true, /* Disabled as we will only use Doc Blocks for Documentation Pages */
  }
};

from storybook-design-token.

@Sqrrl does this add-on work out of the box with storybook-7? or is it still being developed?

No, the addon won't work with SB 7 as is. I'm on it.

from storybook-design-token.

Thanks for reaching out. I'm a little behind schedule, but working on it. I've just published v3.0.0-beta.0 with Storybook 7 support.

For anyone interested, you can check out the v3 branch and install it with npm install --save-dev storybook-design-token@next or yarn add storybook-design-token@next.

from storybook-design-token.

You can try 3.0.0-beta.2. I got a little frustrated with the setup and switched to using the SB addon kit. I hope this resolves some issues.

Breaking change: Doc blocks have to be imported via import { DesignTokenDocBlock } from 'storybook-design-token'; instead of import { DesignTokenDocBlock } from 'storybook-design-token/dist/doc-blocks';

from storybook-design-token.

I got it working with 3.0.0-beta.2 and @storybook/react-vite as the framework.

I had to manually fix a packaging problem (I think?) with the written exports. Vite was throwing an error because of this line:
https://github.com/UX-and-I/storybook-design-token/blob/v3/addon/package.json#L38

At first I thought that was only a typo... but changing this to "./doc-blocks": { did not help, either. When changing it to "./dist/doc-blocks": { everything works! Pretty sure that's just fixing symptoms, though. Only related thing I could find was:
https://github.com/UX-and-I/storybook-design-token/blob/v3/addon/src/index.ts#L1

... where the export doesn't specify a file extension. I think that could be a problem for Vite?

It gets written as "export { DesignTokenDocBlock } from \"./doc-blocks\"; in the installed / compiled package, as part of the index.js.map.

The error when not fixing this looks like this with Vite:

from storybook-design-token.

I got 3.0.0-beta.2 working as well, removed my vite dev dependency but had to add all of these, which seems like it may have been overkill (not sure, so leaving it up to you):

  "peerDependencies": {
    "@storybook/blocks": "^7.0.0",
    "@storybook/components": "^7.0.0",
    "@storybook/core-events": "^7.0.0",
    "@storybook/manager-api": "^7.0.0",
    "@storybook/preview-api": "^7.0.0",
    "@storybook/theming": "^7.0.0",
    "@storybook/types": "^7.0.0",
    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
  },

I noticed that the tabs are not working as of 3.x thus far, in case you hadn't seen this yet:

I could write that up as a separate issue if that would help you. Thanks for your work on this plugin @Sqrrl , it's by far the best one out there right now for this purpose!

from storybook-design-token.

3.0.0-beta.2 is currently broken for me due to a typo in the exports.

The typo is doc-blocks is incorrectly doc-bocks.

In the published beta version, both the name of the export & the resolves files are incorrectly spelt.

In the branch, the name of the export is incorrect, and the corrected filenames are not published to a beta version.

https://github.com/UX-and-I/storybook-design-token/blob/v3/addon/package.json#L38

from storybook-design-token.

Fixed with 3.0.0-beta.3. Thanks for the PR, @bmalinconico.

from storybook-design-token.

Anyone have a working example of the beta for storybook 7 working with vite? i can't get my tokens to show up.

preview.ts

import type { Preview } from "@storybook/react";
import "../src/style.css";

const preview: Preview = {
  parameters: {
    actions: { argTypesRegex: "^on[A-Z].*" },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/,
      },
    },
  },
};

export default preview;

main.ts

import type { StorybookConfig } from "@storybook/react-vite";

const config: StorybookConfig = {
  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx|mdx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
    { name: "storybook-design-token", options: { preserveCSSVars: true } },
  ],
  framework: {
    name: "@storybook/react-vite",
    options: {},
  },
  docs: {
    autodocs: "tag",
  },
};
export default config;

And my CSS Variables are imported into styles via an npm package, but has the comments in there:

:where(html) {
  /**
  * @tokens Brand Colors
  * @presenter Color
  */
  --pink-6: #67004c;

from storybook-design-token.

Using create-react-app & Storybook 7, it added a whopping 12 high severity security vulnerabilities.

from storybook-design-token.

Will look into this. Can't say for sure I'll get to it before 7 leaves beta, but I'll try.

from storybook-design-token.

Using create-react-app & Storybook 7, it added a whopping 12 high severity security vulnerabilities.

I didn't use create-react-app, but rather just built using react and react-dom as dependencies (I am building a component library). I had 3 high vulnerabilities, however it is still in Beta officially so I assume some fixes will occur for this before official release anyway.

Will look into this. Can't say for sure I'll get to it before 7 leaves beta, but I'll try.

Sqrrl - Thanks! :) Keep us updated how you go, or if any help is needed

from storybook-design-token.

@Sqrrl does this add-on work out of the box with storybook-7? or is it still being developed?

from storybook-design-token.

Thank you for the update @Sqrrl. Best of Luck

from storybook-design-token.

Hey @Sqrrl 👋

I'm a Storybook DX engineer 😁 Let me know if you need any support in getting your addon upgraded to 7.0

from storybook-design-token.

Just installed this with @storybook/angular and got these missing dependency errors:

ERR! Error: Build failed with 3 errors:
ERR! node_modules/storybook-design-token/dist/components/ClipboardButton.js:2:25: ERROR: Could not resolve "react-use-clipboard"
ERR! node_modules/storybook-design-token/dist/components/TokenTable.js:4:27: ERROR: Could not resolve "react-virtual"
ERR! node_modules/storybook-design-token/dist/hooks/useTokenTabs.js:2:32: ERROR: Could not resolve "react-storage-hooks"

Installing these manually worked, and now my doc blocks are working again. Thanks!

from storybook-design-token.

Just installed this with @storybook/angular and got these missing dependency errors:

ERR! Error: Build failed with 3 errors:
ERR! node_modules/storybook-design-token/dist/components/ClipboardButton.js:2:25: ERROR: Could not resolve "react-use-clipboard"
ERR! node_modules/storybook-design-token/dist/components/TokenTable.js:4:27: ERROR: Could not resolve "react-virtual"
ERR! node_modules/storybook-design-token/dist/hooks/useTokenTabs.js:2:32: ERROR: Could not resolve "react-storage-hooks"

Installing these manually worked, and now my doc blocks are working again. Thanks!

That's weird. The dependencies are in the package.json. Have you tried a clean install of your node_modules?

from storybook-design-token.

Tried 3.0.0-beta.0 with storybook 7 with Angular, have two issues:

• design-tokens.source.json wasn't generated (not for build, not for dev modes)
• when I use build command it shows error that vite module not found (but build is successful despite of that)

from storybook-design-token.

@Sqrrl if I edit node_modules/storybook-design-token/dist/preset.js and remove vite dependency usage , it works

from storybook-design-token.

@Sqrrl Looks like they're in devDependencies but since they're needed at runtime (for downstream projects) they need to be moved to either dependencies or peerDependencies. I'm guessing only those three showed up because the other React-oriented packages are already required by Storybook or something.

from storybook-design-token.

Actually, I think I had also already installed vite (as @dmytroyaremenkoleanix mentioned above), react, react-dom—possibly for this addon @2.x, but maybe for a different addon (maybe it was @storybook-extras/preset...I don't recall).

from storybook-design-token.

Another question about 3.0.0-beta.2, it contains path-scurry dependency, which has BlueOak-1.0.0 license... Any idea whats this? Is this still keeps stroybook-design-token as MIT ?

from storybook-design-token.

Thanks for the quick release. That with the following import got my build working again import { DesignTokenDocBlock } from 'storybook-design-token/doc-blocks';

from storybook-design-token.

I'm still seeing this error while using 3.0.0-beta.3 against Storybook 7.0.9

Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component.

I've tried both import { DesignTokenDocBlock } from 'storybook-design-token'; and import { DesignTokenDocBlock } from 'storybook-design-token/doc-blocks'; but get the same issue. The tokens panel and tabs work fine, it's just the doc block that causes the error.

from storybook-design-token.

Could you provide some more hints for reproduction? Storybook allows for so many different setups and frameworks, making it hard to reproduce such issues.

from storybook-design-token.

I was able to figure it out. There was a dependency resolution conflict which meant it didn't update the package correctly.
Clearing my lock file of the old version and readding it fixed the issues.

from storybook-design-token.

@Sqrrl - Managed to everything work nice and easy with beta.3 :) I have one issue though, it seems the disable of the tab is not working with Storybook 7 i guess. I have disabled as per documentation I think, but the tab does not get removed (it is not the default tab that shows though). Any ideas on this one?

Anyone else experienced this? Able to provide a work around? I have not been able to get around this disable tab issue yet so have had to remove the plugin from use unfortunately.

from storybook-design-token.

@Sqrrl Hi, any chance that the tab issue has been looked into or will be? I am also experiencing the same.

from storybook-design-token.

@Sqrrl - Managed to everything work nice and easy with beta.3 :) I have one issue though, it seems the disable of the tab is not working with Storybook 7 i guess. I have disabled as per documentation I think, but the tab does not get removed (it is not the default tab that shows though). Any ideas on this one?

Anyone else experienced this? Able to provide a work around? I have not been able to get around this disable tab issue yet so have had to remove the plugin from use unfortunately.

@tupkovic (cc @Sqrrl ). I have the same issue with SB7 and vite. I submitted a PR that should fix the issue: #180

from storybook-design-token.

@Sqrrl - Managed to everything work nice and easy with beta.3 :) I have one issue though, it seems the disable of the tab is not working with Storybook 7 i guess. I have disabled as per documentation I think, but the tab does not get removed (it is not the default tab that shows though). Any ideas on this one?

Anyone else experienced this? Able to provide a work around? I have not been able to get around this disable tab issue yet so have had to remove the plugin from use unfortunately.

@tupkovic (cc @Sqrrl ). I have the same issue with SB7 and vite. I submitted a PR that should fix the issue: #180

Thank you. Merged and released with 3.0.0-beta.4.

from storybook-design-token.

I will close this issue now. Please open a new one, if you experience issues with Storybook 7.

from storybook-design-token.