Tito

Posted on Aug 26, 2018 • Edited on May 7, 2019

Storybook Addon AngularJS (1.x)

#javascript #storybook #angular

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 and actions

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 📦 package manager to install the addon in your project's 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 =

…

View on GitHub

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 into storybook-addon-angularjs.

View on GitHub

Feedback is appreciated.
Thanks for reading.

Top comments (9)

Tito • Mar 28 '20

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:

export default {
  title: "QuoteCard",
  decorators: [withAngularJs("myApp")]
};

export const simpleTemplate = () => `
  <quote-card author="'Me'">
    It works with a simple template!
  </quote-card>
`;

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

New ways to write stories
Added support for hooks, thanks @is2ei
Added support for multiple modules, thanks @ofhouse

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

Haldun YILDIZ • Oct 16 '19

Great job, I will try in few days

Tito • Oct 17 '19

Hope it helps.
If something goes wrong just let me know.

Neil • Sep 13 '18

Looks great, will really help those of us still maintaining angularjS.

Any easy way to access the $scope?

Tito • Sep 13 '18

Hi Neil.
Do you have an example of what you are trying to achieve?

Neil • Sep 13 '18 • Edited

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.

index.html

<div ng-controller="ExampleController">
  <my-ng-element props='innerProps'></my-ng-element>
</div>

script.js

myModule.controller('ExampleController', ['$scope', ...deps,  
  function($scope, ...deps) {
     $scope.clickFn = function() {alert('Click!')};
     $scope.innerProps = [
       //Component relies on controller as syntax
       {key: 'data-ng-click', val: 'ctrl.click()'},
       {key: 'aria-label', val: 'Some label'}
     ]
  }

index.html (rendered)

<div ng-controller="ExampleController">
  <my-ng-element props='innerProps'>
    <div class="has-dynamically-generated-props"
         ng-click="ctrl.clickFn()"
         aria-label="Some label"
    >
    </div>
  </my-ng-element>
</div>

So yeah, with the above, since ctrl is undefined, it just doesn't work. There's no direct controller scope access or support for controller 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.

forModule("myApp").createElement(compile => {
  $scope = {};

  //Paste original code here
  $scope.clickFn = function() {alert('Click!')};
  $scope.innerProps = [
    // ctrl hard coded to become _prop0
    {key: 'data-ng-click', val: '_prop0.click()'},
    {key: 'aria-label', val: 'Some label'}
  ]
  //Add in hacky scopeShim workaround
  return compile`<my-ng-element scopeShim="${$scope}" props="${$scope.innerProps}"></my-ng-element>`;
})

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.