Add Official Support for Storybook 7.0 #192
Conversation
| "@types/react": "^17.0.0", | ||
| "@types/react-dom": "^17.0.0", | ||
| "@types/webpack-env": "^1.13.9", | ||
| "figma-js": "^1.13.0", | ||
| "react": "^18.2.0", | ||
| "react-dom": "^18.2.0", | ||
| "typescript": "^4.7.3" | ||
| }, | ||
| "peerDependencies": { | ||
| "@storybook/addon-docs": "^6.4.0 || ^7.0.0", |
There was a problem hiding this comment.
@pocka is addon-docs as peerdep a requirement because of the docs block? could it be added as optional in peerDepspendenciesMeta?
There was a problem hiding this comment.
There was a problem hiding this comment.
I'm 85 % sure that DocsContext can safely be imported from @storybook/blocks, making it possible to remove the dependency on @storybook/addon-docs completely.
Either way, I'm writing up a review here now that should make the usage of DocsContext entirely unneeded.
Co-authored-by: Yann Braga <yannbf@gmail.com>
Co-authored-by: Shota FUJI <pockawoooh@gmail.com> Co-authored-by: Yann Braga <yannbf@gmail.com>
|
Storybook 7.0 introduces a slightly different API for using and building Doc Blocks, that I'd recommend you adopt here as well. Instead of taking in a import * as ButtonStories from './Button.stories';
import { Design } from 'storybook-addon-designs/blocks';
<Design of={ButtonStories.Primary} />This is the relevant code: addon-designs/packages/storybook-addon-designs/src/blocks.tsx Lines 199 to 224 in e09d21d I would change it to something like this (haven't tested it, GitHub comments is my IDE 😎): import { useOf, Of } from '@storybook/blocks';
...
export interface DesignProps {
/**
* Specify which story to get the Figma spec from.
* If not specified, the primary story will be used in attached docs
*/
of?: Of;
}
export const Design: FC<DesignProps & Omit<BlocksCommonProps, "showLink">> = (props) => {
const {
of,
placeholder,
...rest
} = props;
const { story } = useOf(of || 'story', ['story']);
if ('of' in props && of === undefined) {
// MDX isn't always type-safe, it's often that users mistype their imports
throw new Error('Unexpected `of={undefined}`, did you mistype a CSF file reference?');
}
return (
<DocBlockBase placeholder={placeholder ?? "Design"} {...rest}>
<AbsoluteLocater>
<WrapperInternal config={story.parameters[ParameterName]} />
</AbsoluteLocater>
</DocBlockBase>
);
};My suggestion here would be a breaking change, but it should also be doable to do in a non-breaking way, deprecating but still supporting |
There was a problem hiding this comment.
Thanks so much for updating this @thafryer !! 🙏
Lots of minor comments, but the important ones are from @yannbf @JReinhold
|
New, updated, and removed dependencies detected. Learn more about Socket for GitHub ↗︎
🚮 Removed packages: @storybook/api@6.5.9, @storybook/client-api@6.5.9, @storybook/components@6.5.9, @storybook/core-events@6.5.9, @storybook/theming@6.5.9, examples@0.1.0, react@16.14.0, react-dom@16.14.0, storybook-addon-designs@6.3.1 |
Add auto release script
thafryer
dismissed
yannbf’s stale review
Comments are resolved and we are ready to merge.
This PR adds official support for Storybook 7.0.