Michał Romanmichalroman.hashnode.dev·Jul 11, 2024Build your own styleguide with StorybookWhy build a styleguide? A styleguide is a comprehensive document that outlines the visual and functional elements of a web project. It serves as a single source of truth for the design and development teams, detailing everything from typography and c...Discussstyleguide
Howardhowardphung.hashnode.dev·Jul 6, 2024Adding Variants, Sizes, Controls, Styles and Default Arguments to the Story - [My Notes on Storybook]Let's continue with the Button stories we have from the previous article. If you're new to my blog. Please check it out to make sure we're on the same page. Adding Variants There are a lot of flavors of buttons in the world. For our purposes, we’re g...Discuss·1 likeStorybook
Howardhowardphung.hashnode.dev·Jul 6, 2024How to Write Stories in StorybookLet's say we have a very simple button. In the src/components/button.tsx import { ComponentProps } from 'react'; type ButtonProps = ComponentProps<'button'>; export const Button = (props: ButtonProps) => { return <button {...props} />; }; Next...DiscussStorybook
Tally Baraktallybarak.com·Jun 22, 2024The UI Testing Panorama: From E2E to Isolation and Everything in BetweenIn today's digital landscape, user interfaces have evolved far beyond simple forms and basic interactions. Modern UIs are rich tapestries of intricate interactions, micro-animations, advanced gestures, and media-rich content. As users demand smooth, ...Discuss·522 readsTesting
Esther Adebayoestheragbaje.hashnode.dev·Jun 15, 2024Learn to use StorybookJS in your React ProjectStorybook is a UI development environment that allows developers interact with components in isolation because it runs outside the app. It is like a playground for UI components. To understand this better, imagine you have a couple of components in y...DiscussUI
Ashmit JaiSarita Guptaengineeringwithashmit.hashnode.dev·Jun 1, 2024Integrating Storybook and Chromatic to AsyncAPI WebsiteThe AsyncAPI website is built using Next.js v14 and TypeScript. Next.js, a powerful framework that leverages React's capabilities, allows us to create feature-rich web applications. In this blog post, I will delve into setting up Storybook v8, a fron...Discuss·11 likes·49 readsGSoC'24chromatic
Borrislinkb.hashnode.dev·May 24, 2024Configure next/font with Tailwind in StorybookNext.js has font optimization option using their package next/font using google fonts and local. When adding a storybook to a Next.js project, you will start to wonder on how we can achieve the same font to be loaded into the storybook itself as well...Borris and 1 other are discussing this2 people are discussing thisDiscuss·13 likes·114 readsnext/font
Meenu MakkarforGeekyAnts Tech Blogtechblog.geekyants.com·May 24, 2024Setting Up Universal Storybook (with NativeWind): A Step-by-Step GuideIn this tutorial, we will walk through the process of setting up a Universal Storybook with NativeWind in an Expo project.Storybook is a powerful tool for developing UI components in isolation, and NativeWind provides a set of utility classes for bui...Discuss·103 readsUniversal Storybook
Sailesh ShresthaforJoBins Engineeringblog.jobins.jp·May 22, 2024Storybook Setup with Vue 3In modern JavaScript Frameworks, we quickly realize that a user interface are becomming component-driven. By splitting interfaces into components provides better code reuse and improve code sharing in projectes with similar needs. This approach broug...Discuss·11 likes·51 readsStorybook
Ashmit JaiSarita Guptaengineeringwithashmit.hashnode.dev·May 6, 2024AsyncAPI Website UI Kit DevelopmentThis summer I will be working as a Google Summer of Code mentee at the AsyncAPI Initiative to develop a UI Kit for the AsyncAPI Website using Storybook v8 in Next.js v14 and Typescript under the mentorship of Akshat Nema, Elegbede Azeez, and Aishat M...Discuss·11 likes·116 readsGSoC'24AsyncApi
![Adding Variants, Sizes, Controls, Styles and Default Arguments to the Story - [My Notes on Storybook]](https://cdn.hashnode.com/res/hashnode/image/upload/v1720256926058/36e2a812-94be-48ea-b33e-825dbb542e70.jpeg?w=1600&h=840&fit=crop&crop=entropy&auto=compress,format&format=webp)
