Changing value of control does not re-render a component fully in storybookjs storybook
Explanation of the problem
The issue pertains to a discrepancy in the behavior of the modal window in a component, “MyComponent.” The width of the modal window is expected to change in size when the “dialogModalSize” control is set to ‘s.’ However, the actual behavior observed is that the width of the modal window remains unchanged. When changes are made to the “save-button” component and then to “Dialog Modal > Default” the changes do apply. The difference with the “size” control is that the “title” text control is not set in the ngOnInit lifecycle method.
Code Snippets: The following code snippets provide an overview of the structure of the “MyComponent” and its associated parameters. A Storybook setup is utilized to demonstrate the behavior of the component.
export default {
title: 'Components/MyComponent',
component: MyComponent,
decorators: [...],
argTypes: {
size: { control: { type: 'select', options: ['xs', 's', 'm', 'l', 'xl'] } },
title: { control: { type: 'text' }
}
} as Meta;
const Template: Story<MyComponent> = (args) => ({
template: `
<my-component [title]="title" [size]="size">
</my-component>
`
});
The following code snippet represents the implementation of the “MyComponent.” The component has two inputs, “title” and “size,” which are utilized to configure the modal window’s width and height. The ngOnInit method sets the width of the modal window based on the value of “size.”
type Size = 'xs' | 's' | 'm' | 'l' | 'xl';
@Component({
selector: `my-component`,
templateUrl: './my.component.html,
})
export class MyComponent implements OnInit {
// ... left out for brevity
@Input()
title: string;
@Input()
size: Size;
ngOnInit(): void {
const width = this.size ? this.sizes[this.size].width : this.sizes[this.breakpoint].width;
this.config = Object.assign(
new MatDialogConfig(),
{ width, minHeight: '320px' }
);
}
}
The system running the code consists of a macOS operating system version 10.15.7. The CPU is an Intel® Core™ i7-6700HQ CPU with a clock speed of 2.60GHz. The code is executed using Node version 12.18.3, Yarn version 1.22.4, and npm version 6.14.6. The browsers used for testing are Chrome version 87.0.4280.88, Firefox version 83.0, and Safari version 14.0. The Storybook setup utilizes the following npm packages: @storybook/addon-actions, @storybook/addon-essentials, @storybook/addon-links, and @storybook/angular.
Troubleshooting with the Lightrun Developer Observability Platform
Getting a sense of what’s actually happening inside a live application is a frustrating experience, one that relies mostly on querying and observing whatever logs were written during development.
Lightrun is a Developer Observability Platform, allowing developers to add telemetry to live applications in real-time, on-demand, and right from the IDE.
- Instantly add logs to, set metrics in, and take snapshots of live applications
- Insights delivered straight to your IDE or CLI
- Works where you do: dev, QA, staging, CI/CD, and production
Start for free today
Problem solution for Changing value of control does not re-render a component fully in storybookjs storybook
The issue involves a component, “MyComponent”, in a StorybookJS storybook environment, that is not fully re-rendering when the value of a control is changed. The control, “dialogModalSize”, is a dropdown selection with the options [‘xs’, ‘s’, ‘m’, ‘l’, ‘xl’]. The desired behavior is for the modal window’s width size to change when a new selection is made in the dropdown.
However, when selecting ‘s’ in the dropdown and then clicking on the component’s button with the text ‘open modal’, the modal window does not change in width size. This behavior is unexpected and differs from other controls such as ‘dialogTitle’, which are working as expected. The difference between these controls is that the ‘title’ control is not set in the component’s ngOnInit lifecycle method.
The code snippets provided show the storybook definition, a template that uses the component, and the component’s implementation, including the ngOnInit method. The component uses inputs for the title and size properties and sets the width of the modal window in the ngOnInit method based on the size input value. The issue may be related to the component’s handling of input changes and the re-rendering of the component as a result.
Other popular problems with storybookjs storybook
Problem: Dynamic Parameters Not Updating the Component
One of the most common issues with Storybook is that dynamic parameters don’t update the component when changed. The component is not re-rendered, even when the state of the component is changed through Storybook’s API.
Solution:
To fix this issue, the state must be passed down to the component as a property. This allows the component to be re-rendered whenever the state is updated. In Storybook, this can be achieved by using the withProps
API to pass the state as a property to the component.
Problem: Inconsistent Rendering of Components with Dynamic Styles
Another issue that developers face with Storybook is that components that use dynamic styles, such as CSS-in-JS libraries, can be inconsistent when rendered in Storybook. This is because Storybook does not always accurately reflect the styles of the component as it appears in a production environment.
Solution:
To resolve this issue, it is recommended to use the Styled
component from the @emotion/core
library. This component provides a consistent rendering of styles, regardless of the environment. The Styled
component should be used to wrap the component and its styles, and then passed to Storybook for rendering.
Problem: Slow Initial Load Time for Storybook
A third common issue with Storybook is that the initial load time can be slow, especially for large projects with multiple stories. This can result in a frustrating user experience, and may cause developers to avoid using Storybook altogether.
Solution:
To fix this issue, it is recommended to use code splitting to load only the stories that are needed, instead of loading all stories at once. This can be achieved by using the @storybook/addon-docs
package, which allows developers to load only the stories that are currently being viewed. This significantly improves the initial load time and overall performance of Storybook.
A brief introduction to storybookjs storybook
Storybook is an open-source tool for developing and showcasing UI components in an isolated environment. It provides a way to build and test UI components outside of a real application, allowing developers to focus on individual components and their interactions.
Storybook integrates with various JavaScript frameworks such as React, Vue, and Angular, making it a versatile tool for building UI components. It has a number of features that make it an ideal choice for building UI components, including a flexible API, hot reloading, and an intuitive user interface. Additionally, Storybook provides the ability to add add-ons and plugins to extend its functionality, allowing developers to customize it to meet their specific needs.
Most popular use cases for storybookjs storybook
- Component Development and Testing: Storybook provides a development environment for building, testing, and debugging UI components in isolation. With its intuitive UI, developers can easily create and manipulate components in real-time, which speeds up the development process.
- Design System Documentation: Storybook can be used as a design system documentation tool, making it easier for designers and developers to work together. It provides a centralized repository for components, making it easier for developers to find and reuse components, and for designers to view and document design elements.
import { Button } from './Button';
export default {
title: 'Button',
component: Button,
};
export const Primary = () => <Button variant="primary">Primary</Button>;
export const Secondary = () => <Button variant="secondary">Secondary</Button>;
- Storybook supports multiple frontend frameworks, including React, Vue, Angular, and Svelte, making it versatile and flexible for developers working on projects using different technologies. It also supports integration with popular tools such as Jest, Webpack, and Babel, making it a complete solution for frontend development.
It’s Really not that Complicated.
You can actually understand what’s going on inside your live applications.