https://github.com/alterx/storybook-angular-wrapper
https://github.com/alterx/storybook-angular-wrapper
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/alterx/storybook-angular-wrapper
- Owner: alterx
- Created: 2018-08-16T21:34:18.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2018-08-16T21:42:03.000Z (almost 7 years ago)
- Last Synced: 2025-02-13T16:44:02.307Z (3 months ago)
- Language: TypeScript
- Size: 23.4 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Storybook Angular Wrapper
This decorator allows you to wrap all your stories with a template:
```typescript
import { storiesOf, moduleMetadata } from '@storybook/angular';
import { angularWrapper } from 'storybook-angular-wrapper';
import { YourModule } from '../path/to/your.module';
storiesOf('Your component', module)
.addDecorator(
moduleMetadata({
imports: [YourModule],
}),
)
.addDecorator(
angularWrapper(
`
@{template}
`,
'@{template}',
),
)
.add('with items', () => ({
template: `
`,
props: {
prop1: [
{
id: 1,
first: 'Carlos',
last: 'Vega',
handle: '@alterx',
status: 'active',
},
],
},
}))
.add('no items', () => ({
template: `
`,
props: {
prop1: [],
},
}));
```
This will result in a `3em` margin applied to both stories.
# Installation
`yarn add -D storybook-angular-wrapper`
or
`npm i --save-dev storybook-angular-wrapper`
# Disclaimer
This works better with `template` stories, it does support `component` stories but this is a mode that's limited and should only be used under certain very specific circumstances.