-
-
storybook
Storybook is a frontend workshop for building UI components and pages in isolation. Made for UI development, testing, and documentation.
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
-
import Avatar, { sizes } from "./Avatar"; export const Default = () => ( ); // We can now create an array of sizes from the exported object. // Unfortunately we have to cast the array using `as`, // because `Object.keys` only returns `string[]`. // https://github.com/Microsoft/TypeScript/issues/12870 const sizeKeys = Object.keys(sizes) as Size[]; export const Sizes = () => (
{/* We can loop over the array of sizes */} {sizeKeys.map(size) => ( )} div> );
Sometimes it is easier to build a component in isolation than in the place where it will be used. It is much easier to test all variations and edge cases of the component. There are tools out there which can help us to build our components in isolation. The most famous is Storybook, but I like to use Ladle. Ladle is much smaller than Storybook and it is built for speed. In this post we will set up Ladle and we will learn how we can use next/image within Ladle.
After another look at issue #100, we can tell next/image that it should skip the optimization if the component is rendered in Ladle. That is fine, because the bandwidth does not play a big role during the development. With the following code placed inside .ladle/components.tsx ...
And for most installations, that's it. Ladle has a useful default configuration, you only need to create a configuration if your installation differs from the default. But for most Next.js installations the default does not fit. Ladle expects stories and components in the "src" folder, but in many Next.js installations they are in a folder called components. So we have to create a configuration at .ladle/config.mjs: