1. Styles
1.1. bad
1.2. good
1.3. not as good
1.4. not as bad
1.5. important
1.6. warning
2. main
2.1. sample code
2.1.1. render
2.1.1.1. It will work without renders too
2.1.1.1.1. I mean just passing the args
2.1.1.2. Or you can customize it like this with or without args
2.1.1.2.1. with args
2.1.1.2.2. without args
2.1.2. args
2.1.2.1. 2
2.1.2.2. the args can be changed on run time
2.1.2.3. Btw in args order matters in terms of display
2.1.2.3.1. legacy is first and the kccontext is the second
2.1.3. meta
2.1.3.1. title controls the path in the navbar
2.1.3.1.1. You can set hierachy through this too
2.1.3.2. args
2.1.3.2.1. sets the default props
2.1.4. tags
2.1.4.1. autodocks
2.1.4.1.1. 2
2.2. file structure
2.2.1. main.ts
2.2.1.1. configuration files
2.2.1.1.1. setting up compiler like webpack
2.2.1.1.2. addons
2.2.1.1.3. static directories
2.2.2. preview.ts
2.2.2.1. where you can add your decorators
2.2.2.1.1. for example you can add redux here
2.2.2.1.2. dark theme here
2.2.3. Decorators. ***(Optional) * **
2.2.3.1. for decorators order matters
2.2.3.1.1. this is equivalent to this
2.2.3.2. you cand do this for adding the redux for all the stories
2.2.3.2.1. using preview tsx
2.3. react dom router
2.3.1. how to setup storybook
2.3.1.1. init
2.3.1.1.1. 'storybook-addon-remix-react-router'
2.3.1.1.2. for all storiest
2.3.1.2. for every story
2.3.1.3. If you want to only specific one
2.3.1.3.1. this is a prefered method because you cannot have storybook for components that their children uses router too
2.3.1.3.2. import { withRouter } from "storybook-addon-remix-react-router";
2.3.1.3.3. decorators: [withRouter],
2.4. View Port
2.4.1. // Replace your-renderer with the renderer you are using (e.g., react, vue3, angular, etc.) import { Preview } from '@storybook/your-renderer'; import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'; const preview: Preview = { parameters: { viewport: { viewports: INITIAL_VIEWPORTS, defaultViewport: 'ipad', }, }, }; export default preview;
2.4.1.1. this is installed out of the shelf
2.4.2. You can even set this for a story
2.4.2.1. here is the code
2.4.2.1.1. // Replace your-framework with the name of your framework import type { Meta, StoryObj } from '@storybook/your-framework'; import { Button } from './Button'; const meta: Meta<typeof Button> = { component: Button, parameters: { // 👇 Set default viewport for all component stories viewport: { defaultViewport: 'tablet' }, }, }; export default meta; type Story = StoryObj<typeof Button>; export const OnPhone: Story = { parameters: { // 👇 Override default viewport for this story viewport: { defaultViewport: 'mobile1' }, }, };
2.4.3. common view ports
2.4.3.1. MINIMAL_VIEWPORTS
2.4.3.2. INITIAL_VIEWPORTS
2.5. storybook static website
2.5.1. build
2.5.1.1. "build-storybook": "storybook build -o ./docs/storybook"
2.5.1.2. "homepage": "./",
2.5.2. for assets :scream: :scream: :scream: :scream: :scream: :scream: :scream:
2.5.2.1. **the link should be like this only**
2.5.2.1.1. *** images/Hero image.jpg * **
2.5.2.2. ** this will not load properly **
2.5.2.2.1. *** /images/Hero image.jpg * **
2.6. test coverage
2.6.1. link
2.6.1.1. @storybook/addon-coverage
2.6.1.1.1. npm install @storybook/addon-coverage --save-dev
2.6.2. test-runner
2.6.2.1. npx playwright install
2.6.2.2. npm i @storybook/jest
2.6.2.3. npm i @storybook/testing-library