Comments (31)
@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.
Related Issues (20)
- issue with enabled feature buildStoriesJson HOT 1
- Allow Control Types Config (ArgTypes) HOT 1
- Issue starting storybook-design-token HOT 6
- Storybook webpack autobuild no longer works with storybook-design-token options HOT 7
- Is there a way to disable scrolling container in table view? HOT 1
- Dependencies on Vite should be optional
- Getting warnings during startup and usage of addon in v3 beta HOT 3
- Monorepo import Css injection not working
- Disabling addon panel does not work HOT 8
- ? HOT 1
- Hide search in doc pages? HOT 1
- Missing "./dist/doc-blocks" specifier in "storybook-design-token" package? HOT 2
- Is there a way to only show the utilized Design Tokens in a given Story? HOT 5
- Getting React error when importing DesignTokenDocBlock HOT 2
- Issue with Managing Theme Switching HOT 2
- Storybook 8 compatibility HOT 4
- Tokens that change based on breakpoint do not update in the UI
- Tokens reset once the tab is re-selected
- Tokens that depend on other tokens don't work HOT 1
- Sizing Tokens
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from storybook-design-token.