
Research
Security News
Malicious npm Package Wipes Codebases with Remote Trigger
A malicious npm typosquat uses remote commands to silently delete entire project directories after a single mistyped install.
@storybook/angular
Advanced tools
Storybook for Angular: Develop Angular components in isolation with hot reloading.
@storybook/angular is a tool for developing UI components in isolation for Angular applications. It allows developers to build, test, and showcase components independently from the main application, which helps in creating a more modular and maintainable codebase.
Component Development
Allows developers to create and showcase individual components in isolation. This example demonstrates how to create a story for a Button component.
import { moduleMetadata, storiesOf } from '@storybook/angular';
import { ButtonComponent } from './button.component';
storiesOf('Button', module)
.addDecorator(
moduleMetadata({
declarations: [ButtonComponent],
})
)
.add('default', () => ({
component: ButtonComponent,
props: {
text: 'Click me',
},
}));
Interactive Stories
Enables the creation of interactive stories where components can respond to user actions. This example shows a Button component that displays an alert when clicked.
import { moduleMetadata, storiesOf } from '@storybook/angular';
import { ButtonComponent } from './button.component';
storiesOf('Button', module)
.addDecorator(
moduleMetadata({
declarations: [ButtonComponent],
})
)
.add('with click action', () => ({
component: ButtonComponent,
props: {
text: 'Click me',
onClick: () => alert('Button clicked!'),
},
}));
Addons Integration
Supports integration with various addons to enhance the development experience. This example uses the Knobs addon to dynamically change the text of the Button component.
import { moduleMetadata, storiesOf } from '@storybook/angular';
import { withKnobs, text } from '@storybook/addon-knobs';
import { ButtonComponent } from './button.component';
storiesOf('Button', module)
.addDecorator(withKnobs)
.addDecorator(
moduleMetadata({
declarations: [ButtonComponent],
})
)
.add('with knobs', () => ({
component: ButtonComponent,
props: {
text: text('Text', 'Click me'),
},
}));
@storybook/react is similar to @storybook/angular but is designed for React applications. It provides the same core functionalities such as component development, interactive stories, and addon integration, but tailored for the React ecosystem.
Docz is a documentation tool that allows developers to create interactive documentation for their React components. It offers similar functionalities to @storybook/angular, such as component isolation and interactive examples, but is more focused on documentation.
See documentation for installation instructions, usage examples, APIs, and more.
FAQs
Storybook for Angular: Develop Angular components in isolation with hot reloading.
The npm package @storybook/angular receives a total of 282,148 weekly downloads. As such, @storybook/angular popularity was classified as popular.
We found that @storybook/angular 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.
Research
Security News
A malicious npm typosquat uses remote commands to silently delete entire project directories after a single mistyped install.
Research
Security News
Malicious PyPI package semantic-types steals Solana private keys via transitive dependency installs using monkey patching and blockchain exfiltration.
Security News
New CNA status enables OpenJS Foundation to assign CVEs for security vulnerabilities in projects like ESLint, Fastify, Electron, and others, while leaving disclosure responsibility with individual maintainers.