A few weeks ago I published the package storybook-addon-angularjs to help create stories for Storybook with AngularJS components.
Features:
- Simple syntax
- Supports integration with other addons like
knobs
andactions
The Tweet with the first announcement and a small screen capture:
Liquid error: internal
Creating a story with an AngularJS component is as simple as this:
import { storiesOf } from "@storybook/html";
import { withKnobs, text, number } from "@storybook/addon-knobs";
import { action } from "@storybook/addon-actions";
import { forModule } from "storybook-addon-angularjs";
storiesOf("Components/Demo", module)
.addDecorator(withKnobs)
.add(
"default",
forModule("myApp").createElement(compile => {
const name = text("Name", "Jane");
const foo = {
bar: number("Value", 20, { range: true, min: 0, max: 30, step: 1 })
};
const onEvt = action("clicked");
return compile`<demo-component
name="${name}"
foo="${foo}"
on-ev="${onEvt}(num, name)"></demo-component>`;
})
);
This depends on Storybook 4+ and the HTML Addon.
The code for the addon:
titonobre / storybook-addon-angularjs
A simple addon to create Storybook stories with AngularJS components.
Storybook Addon for AngularJS (1.x)
Note This addon is intended to be used with
@storybook/html
, available since Storybook 4.
Installation
Use your favorite devDependencies
:
npm:
npm install --save-dev storybook-addon-angularjs
Yarn:
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:
export default {
title: "QuoteCard",
decorators: [withAngularJs("myApp")],
};
export const simpleTemplate = () => `
<quote-card author="'Me'">
It works with a simple template!
</quote-card>
`;
But you may choose something more advanced:
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 =
…A working example:
titonobre / storybook-addon-angularjs-example
A working example with storybook-addon-angularjs. Moved to: https://github.com/titonobre/storybook-addon-angularjs
Storybook Addon for AngularJS (1.x) Example
Note
This repository was merged intostorybook-addon-angularjs
.
Feedback is appreciated.
Thanks for reading.
Top comments (9)
Finally v1 🎉
After a few attempts, I think this time I got this right.
With the new decorator
withAngularJs
, story can be as simple as this:Check the new examples for more advanced uses.
You can even write stories in markdown with the MDX story format supported by Storybook.
New Features
No Breaking Changes
Yes, you can migrate from v0.0.2 to v1.0 with no changes to your stories. 💪
Repository: github.com/titonobre/storybook-add...
Working Examples: storybook-addon-angularjs.now.sh
Great job, I will try in few days
Hope it helps.
If something goes wrong just let me know.
Looks great, will really help those of us still maintaining angularjS.
Any easy way to access the $scope?
Hi Neil.
Do you have an example of what you are trying to achieve?
I have component examples in a non-storybook ui documentation that I'm trying to see if I can convert over, but a lot of these examples just dump functions into the $scope.
I can't show you the actual code, but this should illustrate what I'm trying to accomplish.
So yeah, with the above, since
ctrl
is undefined, it just doesn't work. There's no direct controller scope access or support forcontroller as
syntax.I've found that to minimally change the existing code, I can do something like below, though it would be amazing if there was access to controller scope, or support for
controller as
syntax officially.There's a lot of examples, I'd like to do as much copy pasting as possible with preferably little to no additional editing of existing code, haha.
Hopefully the above makes sense, I also don't have access to my work codebase at the moment.
My first approach was to expose the
$scope
.Can you have a look at the first release here: github.com/titonobre/storybook-add...
And the example here: github.com/titonobre/storybook-add...
If it helps, I can add this back.
@hackily Did you had the chance to try the first version of the addon?
Amazing, will check it out