Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/titonobre/storybook-addon-angularjs
A simple addon to create Storybook stories with AngularJS components.
https://github.com/titonobre/storybook-addon-angularjs
angularjs javascript storybook
Last synced: 7 days ago
JSON representation
A simple addon to create Storybook stories with AngularJS components.
- Host: GitHub
- URL: https://github.com/titonobre/storybook-addon-angularjs
- Owner: titonobre
- License: mit
- Created: 2018-07-12T00:53:01.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-03-06T20:55:29.000Z (almost 2 years ago)
- Last Synced: 2025-01-01T06:17:09.804Z (about 1 month ago)
- Topics: angularjs, javascript, storybook
- Language: JavaScript
- Homepage: https://storybook-addon-angularjs.now.sh
- Size: 2.78 MB
- Stars: 65
- Watchers: 3
- Forks: 14
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Storybook Addon for AngularJS (1.x)
[](https://www.npmjs.com/package/storybook-addon-angularjs)
[](https://www.npmjs.com/package/storybook-addon-angularjs)
[](https://github.com/titonobre/storybook-addon-angularjs/issues)
[](https://github.com/titonobre/storybook-addon-angularjs/blob/master/LICENSE)
[](https://storybook.js.org/)
[](https://open.vscode.dev/titonobre/storybook-addon-angularjs)
> **Note**
> This addon is intended to be used with `@storybook/html`, available since Storybook 4.
## Installation
Use your favorite 📦 package manager to install the addon in your project's `devDependencies`:
**npm:**
```sh
npm install --save-dev storybook-addon-angularjs
```
**Yarn:**
```sh
yarn add --dev storybook-addon-angularjs
```
## Usage
This addon is flexible enough to let you choose how you want to write stories.
Your stories can be as simple as this:
```js
export default {
title: "QuoteCard",
decorators: [withAngularJs("myApp")],
};
export const simpleTemplate = () => `
It works with a simple template!
`;
```
But you may choose something more advanced:
```js
import { withKnobs, text } from "@storybook/addon-knobs";
import { action } from "@storybook/addon-actions";
import { html, withAngularJs } from "storybook-addon-angularjs";
class MockedAppService {
constructor() {
this.message = "Mocked message";
}
}
function mockLoggingService($log) {
return {
log: function(message) {
$log.log(message);
},
}
}
export default {
title: "QuoteCard",
decorators: [withKnobs, withAngularJs /* OR */ withAngularJs("myApp")],
parameters: {
ng: {
module: "myApp", // optional when provided in the decorator
rebuild: undefined, // optional, indicates when to rebuild the story. Can be "always", "mount" (when switching stories) or "update" (when updating knobs or controls)
hooks: {
beforeCompile() {
// called once before compiling the the component
},
beforeUpdate(SomeService) {
// called before updating the component with new props
SomeService.setValue("Hi!");
},
},
mock: {
// When the app depends on modules which cannot be provided in the story you can mock them
modules: ["some.external.module"],
// You can mock / override constants here
constants: {
API_URL: "https://example.com",
},
// You can mock / override services here (dependency injection also works)
services: {
AppService: MockedAppService,
},
// You can mock / override factories here (dependency injection also works)
factories: {
LoggingService: mockLoggingService,
},
}
},
},
};
export const fancyTemplate = () => {
const content = text("Content", "It works with a fancy tagged template string!");
const author = text("Author", "Me");
const onEvt = action("clicked");
return html`
{{${content}}}
`;
};
```
You can even write stories with Markdown files, with the support for the [MDX Story Format](https://storybook.js.org/docs/formats/mdx-syntax/). This is awesome for writing documentation for your components.
```md
import { Meta, Story, Preview } from "@storybook/addon-docs/blocks";
import { withAngularJs } from "storybook-addon-angularjs";
# Storybook Addon for AngularJS
This is a simple Quote Card:
{`
It works with a simple template!
`}
```
See these and more examples in the [example subfolder](./example).
## API
### `withAngularJs(module?: string | string[])`
Storybook decorator. Can optionally be used to initialize the module(s) used within the story.
## Development
Prepare your environment
```sh
npx lerna bootstrap
```
Build the Example Storybook
```sh
npx lerna bootstrap
```
## License
Use of this source code is governed by an MIT-style license that can be found in the [LICENSE](LICENSE) file.