Comments (13)
Update: I just found out that I did not configure reactDocgen correctly in the main.ts. It must be
typescript: {
reactDocgen: "react-docgen-typescript",
},
With this, I can confirm that the documentation is generated properly.
from storybook.
Adding reactDocgen: "react-docgen-typescript" in the main.ts does not help.
I noticed that with react-docgen-typescript
generates controls only once, when you start storybook. That means that if you change your type annotations in your component props - it will not update controls. You will have to manually restart storybook. Maybe that will help.
from storybook.
There is some stuff that I found out recently, that might help somebody.
When using forwardRef
or memo
or HOC, it must be used like this:
export const Button = forwardRef<'button', ButtonProps>((props: ButtonProps) => {
Even if the second ButtonProps
is not needed, it has to be props: ButtonProps
, otherwise no controls show up.
The declaration of props have to be in a plain interface with no magic:
export interface ButtonProps {
color?: 'primary' | 'error';
}
This works as expected. But in one big project I use polymorphic components and the props are not declared using a simple interface, they are defined like this:
export interface ButtonOwnProps {
color?: 'primary' | 'error';
}
export interface ButtonTypeMap<C extends React.ElementType = 'button', P = {}> {
defaultAs: C;
props: P & ButtonOwnProps;
}
export type ButtonProps<
C extends React.ElementType = ButtonTypeMap['defaultAs'],
P = {},
> = OverrideProps<ButtonTypeMap<C, P>, C>;
This was working with v7 but does not work with Storybook 8 anymore.
Storybook config in main.ts:
For one project I was using docs: false
in the config to disable the "Docs" tab completely (because there's an extra documentation website for this).
addons: [
'@storybook/addon-a11y',
{
name: '@storybook/addon-essentials',
options: {
docs: false,
},
},
],
In v7 this was fine, but if you use the same in Storybook 8 no controls show up. Also it's not needed anymore, so just remove it or set docs: true
(which is the default).
from storybook.
It seems the autodocs shows only the args that you use in your first story or defined is the Meta object. All args are not displayed by default anymore. Try to add and set a value in one of your stories you will see it.
But for the controls options the problem occurs since they switch from react-docgen-typescript to react-docgen by default.
You can set it dirrectly in your main config under the typescript object but on my side when i do so it's worst ! Options which should be displayed as a select by default are displayed as string and setting up directly with argTypes in the Meta remove the field...
A curious choice...
from storybook.
@Astarosa explained why you see just an arg, but there are still issues with Description, Default and Control. I managed to get back my Descriptions (which I wrote as JSDocs to my interfaces) by switching to the old react-docgen-typescript
from storybook.
With no args specified except children by default in the Meta :
With an arg specified in THE FIRST story (won't shows up if specified in the second and not in the first) :
With react-docgen-typescript :
All these screenshots are V8 based.
In V7 everything works perfectly so i assume that using react-docgen
or react-docgen-typescript
is only part of the problem.
from storybook.
Thanks for reporting this. We switched to using react-docgen
for performance reasons. What is the remaining issue that is not solved by specifying to use react-docgen-typescript
for docgen?
from storybook.
Thanks for reporting this. We switched to using
react-docgen
for performance reasons. What is the remaining issue that is not solved by specifying to usereact-docgen-typescript
for docgen?
For some reasons controls are broken since V8. Change the version of react-docgen
doesn't fix it and on my side when i switch back to react-docgen-typescript
it interpret my button as this weird _c
from storybook.
Hey! This issue happened to me too, luckily switching to react-docgen-typescript
solved the problem
from storybook.
Having the same issue after upgrading to 8.0.4 from 7.6.17 :(
from storybook.
I'm facing the same issue. It's also hiding the type descriptions. I can manually add them by adding argtypes.field.description but it would be nice if this would be auto generated.
from storybook.
We have a similar issue, but already on the usual component's documentation page. Our project is based on Storybook 8.0.8, Vite, React, TypeScript.
Here is an example:
MyComponent.tsx:
export interface MyComponentProps {
/** The name that should be displayed */
name: string;
}
export const MyComponent = ({ name }: MyComponentProps) => {
return <div>Hello {name}</div>;
};
MyComponent.story.tsx:
import { Meta, StoryObj } from "@storybook/react";
import { MyComponent } from "./MyComponent";
import { action } from "@storybook/addon-actions";
import { useArgs } from "@storybook/preview-api";
const meta: Meta<typeof MyComponent> = {
title: "MyComponent",
component: MyComponent,
tags: ["autodocs"],
};
export default meta;
type Story = StoryObj<typeof MyComponent>;
export const Preview: Story = {
args: {
name: "Fred",
},
};
Result: there is "string" instead of my JSDoc description "The name that should be displayed" inside the Storybook component's table
Adding reactDocgen: "react-docgen-typescript"
in the main.ts does not help.
main.ts:
import { resolve } from "path";
const componentsDir = resolve(__dirname, "../src/components");
const globalDir = resolve(__dirname, "../src/global");
const config = {
stories: ["../CONTRIBUTING.mdx", "../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
addons: [
"@storybook/addon-essentials",
"@storybook/addon-links",
"@storybook/addon-storysource",
"@storybook/addon-a11y",
],
core: {},
reactDocgen: "react-docgen-typescript",
framework: {
name: "@storybook/react-vite",
options: {},
},
docs: {
autodocs: "tag",
defaultName: "Usage",
},
staticDirs: [{ from: "../public/images", to: "/images" }],
loader: { ".js": "jsx" },
};
export default config;
Any ideas?
from storybook.
Same for me. When using react-docgen-typescript
, the control seems correct, but it no longer reflects changes in types until rebuilt
from storybook.
Related Issues (20)
- [Bug]: a11y ignoring SVG fill property
- [Bug]: type error for required props when reusing story definitions according to the docs
- [Project SfC]: Tracking Ticket for Bugs
- [Project SfC]: Bug - Editing or saving stories for CSF2
- [Project SfC]: Bug - Toolbar gets long when Controls panel is small
- [Project SfC]: Bug - Arror navigation not implemented
- [Project SfC]: Bug - Link to a story if it is already available
- [Project SfC]: Bug - Update Story Banner isn't sticky
- [Bug]: First story dispayed in place of every other one in Docs (sb8 webcomponent) HOT 2
- [Project SfC]: Bug - X button is a bit unaligned
- [Project SfC]: Bug - Search input caret position ignored
- On Setting viewport to 320*256 pixels, Keyboard focus is moving to the hidden controls.[Bug]:
- [Bug]: Vite HMR Issue
- [Bug]: Response cookies are not available from the middleware
- [Bug]: Failure in Upgrading Storybook
- [Bug]: Importing anything that contains a word `raw` in NextJS+Storybook project from ant-design makes every other import null
- [Bug] :Storybook + vite shows "No Preview" but story still renders below
- Warn when a story is rendered in portable stories when there are lingering cleanup functions
- [Bug]: Module not found error when using CommonJS entry point in @storybook/test HOT 1
- [Bug]: v8 Loading @emotion/react more than once warning
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.