How to use @storybook/angular - 10 common examples

import "./polyfills.js";

import { configure, addDecorator } from "@storybook/angular";
import { withOptions } from '@storybook/addon-options';

addDecorator(
	withOptions({
		name: "carbon components angular",
		url: "https://github.com/IBM/carbon-components-angular",
	})
);

// load global styles
require("!style-loader!css-loader!postcss-loader!sass-loader!./preview.scss");

require("../src/index.stories");
// automatically import all files ending in *.stories.ts
const req = require.context("../src", true, /.stories.ts$/);

function loadStories() {
	req.keys()
	.sort((path1, path2) => path1.split("/").slice(-1)[0] > path2.split("/").slice(-1)[0] ? 1 : -1)

import { withKnobs } from '@storybook/addon-knobs';
import { storiesOf } from '@storybook/angular';

// @ts-ignore
import readme from './readme.md';

storiesOf('Typography|Label', module)
    .addDecorator(withKnobs)
    .addParameters({
        notes: {
            markdown: readme
        }
    })
    .add('Size/Default', () => ({
        template: `
            The quick brown fox jumps over the lazy dog.
        `
    }))
    .add('Size/Small', () => ({
        template: `
            The quick brown fox jumps over the lazy dog.
        `
    }))

import { centered } from '@storybook/addon-centered/angular';
import { withKnobs } from '@storybook/addon-knobs';
import { storiesOf } from '@storybook/angular';

// @ts-ignore
import readme from './readme.md';

storiesOf('Design System|Map/Map HUD', module)
    .addDecorator(withKnobs)
    .addDecorator(centered)
    .addParameters({
        notes: {
            markdown: readme
        }
    })
    .add('Default', () => ({
        template: `
            
        `,
    }));

import { storiesOf, moduleMetadata } from '@storybook/angular';
// import { action } from '@storybook/addon-actions';

import { DotAvatarComponent } from './dot-avatar.component';

storiesOf('DotAvatarComponent', module)
    .addDecorator(
        moduleMetadata({
            declarations: [DotAvatarComponent]
        })
    )
    .add('default', () => {
        return {
            template: ``,
            props: {}
        };
    })
    .add('no url', () => {
        return {
            template: ``,
            props: {}
        };
    });

/**
   * id to select an addon panel
   * @type {String}
   */
  selectedAddonPanel: undefined, // The order of addons in the "Addon panel" is the same as you import them in 'addons.js'. The first panel will be opened by default as you run Storybook
});


// automatically import all files ending in *.stories.ts
const req = require.context('../src/main/ui/app', true, /.stories.ts$/);

function loadStories() {
  req.keys().forEach(filename => req(filename));
}

configure(loadStories, module);

panelPosition: 'bottom',
  showDownPanel: true
});

// load global styles
require("!style-loader!css-loader!sass-loader!./previews.scss");
require("!style-loader!css-loader!@carbon/charts/dist/styles.css");

const req = require.context("../stories", true, /.stories.ts$/);
function loadStories() {
	req.keys().forEach(filename => {
		req(filename);
	});
}

configure(loadStories, module);

import { configure } from '@storybook/angular';

// automatically import all files ending in *.stories.ts
configure(require.context('../src/stories', true, /\.stories\.(ts|mdx)$/), module);

import { configure } from '@storybook/angular';

// automatically import all files ending in *.stories.ts
configure(require.context('../src/stories', true, /\.stories\.ts$/), module);

/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */

import {
    configure,
    addDecorator
} from '@storybook/angular';

// automatically import all files ending in *.demo.ts
const req = require.context('.', true, /.demo.ts$/);

function loadStories() {
    req.keys().forEach((filename) => req(filename));
}

configure(loadStories, module);

import { addParameters, addDecorator } from '@storybook/angular';
import { withA11y } from '@storybook/addon-a11y';
import { setCompodocJson } from '@storybook/addon-docs/angular';
import addCssWarning from '../src/cssWarning';

// @ts-ignore
// eslint-disable-next-line import/extensions, import/no-unresolved
import docJson from '../documentation.json';

setCompodocJson(docJson);

addDecorator(withA11y);
addCssWarning();

addParameters({
  docs: {
    // inlineStories: true,
    iframeHeight: '60px',
  },
});