- - Use a higher-level connected component. Storybook helps you compose such data from the - "args" of child component stories + Use component composition to build complex UIs. Storybook allows you to nest component + stories within each other for hierarchical designs.
- - Assemble data in the page component from your services. You can mock these services out - using Storybook. + Implement responsive design patterns with Storybook's viewport addon to test across + different screen sizes and devices. + +
- + Create state management examples to showcase different UI states without needing to + trigger them manually in your app. + +
- + Document accessibility features directly in your stories to ensure components meet + WCAG guidelines and best practices. + +
- + Utilize Storybook's actions addon to verify event handlers are working correctly + without implementing the full business logic. + +
- + Showcase loading states and error handling in your components to ensure a robust user + experience in all scenarios. + +
- + Implement dark mode and theming variations to demonstrate how your components adapt to + different visual styles. + +
- + Create interactive documentation with MDX to combine markdown explanations with live + component examples. + +
- + Test edge cases like extremely long text, missing data, or boundary conditions to ensure + your components are resilient. + +
- + Develop a consistent design language by showcasing your component library's core elements + and how they work together. + +
- + Integrate internationalization examples to demonstrate how your components handle + different languages and text directions. + +
- + Use Storybook's knobs addon to create interactive controls that let stakeholders + experiment with component properties. + +
- + Document component API with prop tables generated automatically from your TypeScript + interfaces or PropTypes. + +
- + Showcase animation and transition states to ensure smooth user experiences during + interactive moments. + +
- + Create visual regression tests with Storybook's snapshot capabilities to catch + unintended UI changes during development.
diff --git a/storybook/src/stories/button.css b/storybook/src/stories/button.css index dc91dc7..b77a902 100644 --- a/storybook/src/stories/button.css +++ b/storybook/src/stories/button.css @@ -9,7 +9,7 @@ } .storybook-button--primary { color: white; - background-color: #1ea7fd; + background-color: #3b82f6; } .storybook-button--secondary { color: #333; @@ -28,3 +28,33 @@ font-size: 16px; padding: 12px 24px; } + +.lama { + display: none; +} + +@media (min-width: 1440px) and (max-width: 1500px) { + .lama { + display: block; + } +} + + +@media (min-width: 1900px) { + .storybook-button--primary.flaky { + background-color: orange; + } +} + + +@media (prefers-color-scheme: dark) { + .storybook-button--primary { + color: white; + background-color: #4f46e5; + } + .storybook-button--secondary { + color: #1a1a1a; + background-color: #e2e8f0; + box-shadow: rgba(255, 255, 255, 0.5) 0px 0px 0px 1px inset; + } +} \ No newline at end of file diff --git a/storybook/src/stories/header.css b/storybook/src/stories/header.css index d9a7052..8468de6 100644 --- a/storybook/src/stories/header.css +++ b/storybook/src/stories/header.css @@ -30,3 +30,32 @@ font-size: 14px; margin-right: 10px; } + +@media (prefers-color-scheme: dark) { + .storybook-header { + background-color: #1a1a1a; + border-bottom: 1px solid rgba(255, 255, 255, 0.1); + } + + .storybook-header h1 { + color: #f8fafc; + } + + .storybook-header .welcome { + color: #e2e8f0; + } + + /* Target the SVG background specifically */ + .storybook-header svg g path:first-child { + fill: #333; + } + + /* Make the blue parts of the logo slightly brighter in dark mode */ + .storybook-header svg g path[fill="#555AB9"] { + fill: #6366f1; + } + + .storybook-header svg g path[fill="#91BAF8"] { + fill: #a5b4fc; + } +} diff --git a/storybook/src/stories/page.css b/storybook/src/stories/page.css index 098dad1..4587824 100644 --- a/storybook/src/stories/page.css +++ b/storybook/src/stories/page.css @@ -67,3 +67,36 @@ .storybook-page .tip-wrapper svg path { fill: #1ea7fd; } + +@media (prefers-color-scheme: dark) { + + .storybook-page-wrapper { + background-color: #1a1a1a; + } + + .storybook-page { + background-color: #1a1a1a; + color: #e2e8f0; + } + + .storybook-page h2 { + color: #f8fafc; + } + + .storybook-page a { + color: #38bdf8; + } + + .storybook-page .tip { + background: #064e3b; + color: #4ade80; + } + + .storybook-page .tip-wrapper { + color: #d1d5db; + } + + .storybook-page .tip-wrapper svg path { + fill: #38bdf8; + } +}