Security News
Supply Chain Attack Detected in Solana's web3.js Library
A supply chain attack has been detected in versions 1.95.6 and 1.95.7 of the popular @solana/web3.js library.
@storybook/nextjs
Advanced tools
@storybook/nextjs is a Storybook preset for Next.js applications. It allows developers to build and test UI components in isolation within a Next.js environment. This package integrates Storybook seamlessly with Next.js, providing a powerful toolset for developing, testing, and documenting UI components.
Component Isolation
Allows developers to create stories for individual components, enabling them to be rendered in isolation. This helps in testing and developing components independently of the application.
import { storiesOf } from '@storybook/react';
import MyComponent from '../components/MyComponent';
storiesOf('MyComponent', module)
.add('default', () => <MyComponent />)
.add('with props', () => <MyComponent prop1="value1" prop2="value2" />);
Next.js Routing
Supports Next.js routing in Storybook stories, allowing developers to simulate different routes and test components/pages as they would appear in the actual application.
import { storiesOf } from '@storybook/react';
import { RouterContext } from 'next/dist/shared/lib/router-context';
import MyPage from '../pages/mypage';
storiesOf('MyPage', module)
.addDecorator((story) => (
<RouterContext.Provider value={{ pathname: '/mypage', query: {} }}>
{story()}
</RouterContext.Provider>
))
.add('default', () => <MyPage />);
Static File Serving
Enables serving static files such as images, stylesheets, and other assets within Storybook, mimicking the Next.js static file serving capabilities.
import { storiesOf } from '@storybook/react';
import ImageComponent from '../components/ImageComponent';
storiesOf('ImageComponent', module)
.add('default', () => <ImageComponent src="/static/image.png" />);
@storybook/react is a Storybook preset for React applications. It provides similar functionality for building and testing UI components in isolation but does not include specific integrations for Next.js features like routing and static file serving.
next-storybook is another package that integrates Storybook with Next.js. It offers similar functionalities to @storybook/nextjs, such as support for Next.js routing and static file serving, but may have different configuration and setup processes.
react-cosmos is a tool for developing and testing React components in isolation. While it provides similar component isolation capabilities, it does not offer the same level of integration with Next.js as @storybook/nextjs.
See documentation for installation instructions, usage examples, APIs, and more.
This framework borrows heavily from these Storybook addons:
8.4.6
@sveltejs/vite-plugin-svelte
v5 - #29731, thanks @JReinhold!FAQs
Storybook for Next.js
The npm package @storybook/nextjs receives a total of 1,023,747 weekly downloads. As such, @storybook/nextjs popularity was classified as popular.
We found that @storybook/nextjs demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 12 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
A supply chain attack has been detected in versions 1.95.6 and 1.95.7 of the popular @solana/web3.js library.
Research
Security News
A malicious npm package targets Solana developers, rerouting funds in 2% of transactions to a hardcoded address.
Security News
Research
Socket researchers have discovered malicious npm packages targeting crypto developers, stealing credentials and wallet data using spyware delivered through typosquats of popular cryptographic libraries.