From 65f9803cd4db98ecaae6bf363f97fd5e2ae8df06 Mon Sep 17 00:00:00 2001 From: ThibaudAv Date: Sun, 27 Dec 2020 22:08:25 +0100 Subject: [PATCH 1/5] fix(angular): add right Parameters type in StoryContext type --- app/angular/src/client/preview/types-6-0.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/app/angular/src/client/preview/types-6-0.ts b/app/angular/src/client/preview/types-6-0.ts index 501b2e76667a..f50f2924a6ce 100644 --- a/app/angular/src/client/preview/types-6-0.ts +++ b/app/angular/src/client/preview/types-6-0.ts @@ -4,10 +4,11 @@ import { BaseMeta, BaseStory, Parameters as DefaultParameters, + StoryContext as DefaultStoryContext, } from '@storybook/addons'; import { StoryFnAngularReturnType } from './types'; -export { Args, ArgTypes, StoryContext } from '@storybook/addons'; +export { Args, ArgTypes } from '@storybook/addons'; type AngularComponent = any; type AngularReturnType = StoryFnAngularReturnType; @@ -33,3 +34,5 @@ export type Parameters = DefaultParameters & { angularLegacyRendering?: boolean; component: unknown; }; + +export type StoryContext = DefaultStoryContext & { parameters: Parameters }; From 326588496124412fc73df39464df4ec89f92b4f0 Mon Sep 17 00:00:00 2001 From: ThibaudAv Date: Fri, 15 Jan 2021 19:53:57 +0100 Subject: [PATCH 2/5] feat(angular): add inline stories support in the docs addon The configuration has to be set up in each angular project to avoid forcing dependencies to `@angular/elements` ans `@webcomponents/custom-elements` --- addons/docs/README.md | 4 +- addons/docs/angular/README.md | 24 ++++++++ addons/docs/angular/inline.js | 1 + addons/docs/package.json | 5 ++ .../frameworks/angular/prepareForInline.ts | 47 +++++++++++++++ app/angular/element-renderer.d.ts | 1 + app/angular/element-renderer.js | 1 + app/angular/package.json | 10 ++++ .../angular-beta/ElementRendererService.ts | 59 +++++++++++++++++++ .../preview/angular-beta/RendererService.ts | 5 +- app/angular/src/element-renderer.ts | 1 + examples/angular-cli/.storybook/preview.ts | 7 ++- examples/angular-cli/package.json | 2 + .../__snapshots__/core.stories.storyshot | 2 +- yarn.lock | 12 ++++ 15 files changed, 173 insertions(+), 8 deletions(-) create mode 100644 addons/docs/angular/inline.js create mode 100644 addons/docs/src/frameworks/angular/prepareForInline.ts create mode 100644 app/angular/element-renderer.d.ts create mode 100644 app/angular/element-renderer.js create mode 100644 app/angular/src/client/preview/angular-beta/ElementRendererService.ts create mode 100644 app/angular/src/element-renderer.ts diff --git a/addons/docs/README.md b/addons/docs/README.md index bf29ade7155a..2bd4dfe66004 100644 --- a/addons/docs/README.md +++ b/addons/docs/README.md @@ -87,9 +87,9 @@ Storybook Docs supports all view layers that Storybook supports except for React | Source | + | + | + | + | + | + | + | + | + | + | + | | Notes / Info | + | + | + | + | + | + | + | + | + | + | + | | Props table | + | + | + | + | + | | | | | | | -| Props controls | + | + | | | | | | | | | | +| Props controls | + | + | + | | | | | | | | | | Description | + | + | + | + | + | | | | | | | -| Inline stories | + | + | | | + | + | | | | | | +| Inline stories | + | + | + | | + | + | | | | | | **Note:** `#` = WIP support diff --git a/addons/docs/angular/README.md b/addons/docs/angular/README.md index e5ad349a6834..0a62e2399682 100644 --- a/addons/docs/angular/README.md +++ b/addons/docs/angular/README.md @@ -206,6 +206,30 @@ And for `MDX` you can modify it as an attribute on the `Story` element: {...} ``` +## Inline Stories + +Storybook Docs renders all Angular stories inside IFrames by default. But it is possible to use an inline rendering: + +To get this, you'll first need to install Angular elements: + +```sh +yarn add -D @angular/elements @webcomponents/custom-elements +``` + +Then update `.storybook/preview.js`: + +```js +import { addParameters } from '@storybook/angular'; +import { prepareForInline } from '@storybook/addon-docs/angular/inline'; + +addParameters({ + docs: { + inlineStories: true, + prepareForInline, + }, +}); +``` + ## More resources Want to learn more? Here are some more articles on Storybook Docs: diff --git a/addons/docs/angular/inline.js b/addons/docs/angular/inline.js new file mode 100644 index 000000000000..5e94eb81966a --- /dev/null +++ b/addons/docs/angular/inline.js @@ -0,0 +1 @@ +module.exports = require('../dist/esm/frameworks/angular/prepareForInline'); diff --git a/addons/docs/package.json b/addons/docs/package.json index cd237cc5a914..c955ef319398 100644 --- a/addons/docs/package.json +++ b/addons/docs/package.json @@ -92,6 +92,7 @@ "@babel/core": "^7.12.10", "@emotion/core": "^10.1.1", "@emotion/styled": "^10.0.27", + "@storybook/angular": "6.2.0-alpha.18", "@storybook/react": "6.2.0-alpha.18", "@storybook/vue": "6.2.0-alpha.18", "@storybook/web-components": "6.2.0-alpha.18", @@ -123,6 +124,7 @@ }, "peerDependencies": { "@babel/core": "^7.11.5", + "@storybook/angular": "6.2.0-alpha.18", "@storybook/vue": "6.2.0-alpha.18", "babel-loader": "^8.0.0", "react": "^16.8.0 || ^17.0.0", @@ -132,6 +134,9 @@ "webpack": ">=4" }, "peerDependenciesMeta": { + "@storybook/angular": { + "optional": true + }, "@storybook/vue": { "optional": true }, diff --git a/addons/docs/src/frameworks/angular/prepareForInline.ts b/addons/docs/src/frameworks/angular/prepareForInline.ts new file mode 100644 index 000000000000..0f85b8469d54 --- /dev/null +++ b/addons/docs/src/frameworks/angular/prepareForInline.ts @@ -0,0 +1,47 @@ +import React from 'react'; +import { IStory, StoryContext } from '@storybook/angular'; +import { ElementRendererService } from '@storybook/angular/element-renderer'; +import { StoryFn } from '@storybook/addons'; + +const customElementsVersions: Record = {}; + +/** + * Uses angular element to generate on-the-fly web components and reference it with `customElements` + * then it is added into react + */ +export const prepareForInline = (storyFn: StoryFn, { id, parameters }: StoryContext) => { + // Upgrade story version in order that the next defined component has a unique key + customElementsVersions[id] = + customElementsVersions[id] !== undefined ? customElementsVersions[id] + 1 : 0; + + const customElementsName = `${id}_${customElementsVersions[id]}`; + + const Story = class Story extends React.Component { + wrapperRef: React.RefObject; + + elementName: string; + + constructor(props: any) { + super(props); + this.wrapperRef = React.createRef(); + } + + async componentDidMount() { + // eslint-disable-next-line no-undef + customElements.define( + customElementsName, + await new ElementRendererService().renderAngularElement({ + storyFnAngular: storyFn(), + parameters, + }) + ); + } + + render() { + return React.createElement(customElementsName, { + ref: this.wrapperRef, + }); + } + }; + return React.createElement(Story); +}; diff --git a/app/angular/element-renderer.d.ts b/app/angular/element-renderer.d.ts new file mode 100644 index 000000000000..83074120d822 --- /dev/null +++ b/app/angular/element-renderer.d.ts @@ -0,0 +1 @@ +export * from './dist/ts3.9/element-renderer.d'; diff --git a/app/angular/element-renderer.js b/app/angular/element-renderer.js new file mode 100644 index 000000000000..9c6e428015d8 --- /dev/null +++ b/app/angular/element-renderer.js @@ -0,0 +1 @@ +module.exports = require('./dist/ts3.9/element-renderer'); diff --git a/app/angular/package.json b/app/angular/package.json index 51200ccf435c..fedae656416b 100644 --- a/app/angular/package.json +++ b/app/angular/package.json @@ -71,12 +71,14 @@ "@angular/compiler": "^11.1.0", "@angular/compiler-cli": "^11.1.0", "@angular/core": "^11.1.0", + "@angular/elements": "^11.1.0", "@angular/forms": "^11.1.0", "@angular/platform-browser": "^11.1.0", "@angular/platform-browser-dynamic": "^11.1.0", "@nrwl/workspace": "^11.1.5", "@types/autoprefixer": "^9.7.2", "@types/jest": "^25.2.3", + "@webcomponents/custom-elements": "^1.4.3", "jest": "^26.6.3", "jest-preset-angular": "^8.3.2", "ts-jest": "^26.4.4" @@ -88,18 +90,26 @@ "@angular/compiler": ">=6.0.0", "@angular/compiler-cli": ">=6.0.0", "@angular/core": ">=6.0.0", + "@angular/elements": ">=6.0.0", "@angular/forms": ">=6.0.0", "@angular/platform-browser": ">=6.0.0", "@angular/platform-browser-dynamic": ">=6.0.0", "@babel/core": "*", "@nrwl/workspace": ">=11.1.0", + "@webcomponents/custom-elements": ">=1.4.3", "rxjs": "^6.0.0", "typescript": "^3.4.0 || >=4.0.0", "zone.js": "^0.8.29 || ^0.9.0 || ^0.10.0 || ^0.11.0" }, "peerDependenciesMeta": { + "@angular/elements": { + "optional": true + }, "@nrwl/workspace": { "optional": true + }, + "@webcomponents/custom-elements": { + "optional": true } }, "engines": { diff --git a/app/angular/src/client/preview/angular-beta/ElementRendererService.ts b/app/angular/src/client/preview/angular-beta/ElementRendererService.ts new file mode 100644 index 000000000000..16d7cfb524d4 --- /dev/null +++ b/app/angular/src/client/preview/angular-beta/ElementRendererService.ts @@ -0,0 +1,59 @@ +// Should be added first : +// Custom Elements polyfill. Required for browsers that do not natively support Custom Elements. +import '@webcomponents/custom-elements'; +// Custom Elements ES5 shim. Required when using ES5 bundles on browsers that natively support +// Custom Elements (either because the browser does not support ES2015 modules or because the app +// is explicitly configured to generate ES5 only bundles). +import '@webcomponents/custom-elements/src/native-shim'; + +import { Injector, NgModule, Type } from '@angular/core'; +import { createCustomElement, NgElementConstructor } from '@angular/elements'; + +import { BehaviorSubject } from 'rxjs'; +import { ICollection, StoryFnAngularReturnType } from '../types'; +import { Parameters } from '../types-6-0'; +import { getStorybookModuleMetadata } from './StorybookModule'; +import { RendererService } from './RendererService'; + +/** + * Bootstrap angular application to generate a web component with angular element + */ +export class ElementRendererService { + private platform = RendererService.getInstance().platform; + + /** + * Returns a custom element generated by Angular elements + */ + public async renderAngularElement({ + storyFnAngular, + parameters, + }: { + storyFnAngular: StoryFnAngularReturnType; + parameters: Parameters; + }): Promise { + const ngModule = getStorybookModuleMetadata( + { storyFnAngular, parameters }, + new BehaviorSubject(storyFnAngular.props) + ); + + return this.platform + .bootstrapModule(createElementsModule(ngModule)) + .then((m) => m.instance.ngEl); + } +} + +const createElementsModule = (ngModule: NgModule): Type<{ ngEl: CustomElementConstructor }> => { + @NgModule({ ...ngModule }) + class ElementsModule { + public ngEl: NgElementConstructor; + + constructor(private injector: Injector) { + this.ngEl = createCustomElement(ngModule.bootstrap[0] as Type, { + injector: this.injector, + }); + } + + ngDoBootstrap() {} + } + return ElementsModule; +}; diff --git a/app/angular/src/client/preview/angular-beta/RendererService.ts b/app/angular/src/client/preview/angular-beta/RendererService.ts index 558a1347de8a..bd7ce441bf14 100644 --- a/app/angular/src/client/preview/angular-beta/RendererService.ts +++ b/app/angular/src/client/preview/angular-beta/RendererService.ts @@ -23,7 +23,7 @@ export class RendererService { return RendererService.instance; } - private platform: PlatformRef; + public platform: PlatformRef; private staticRoot = document.getElementById('root'); @@ -43,6 +43,7 @@ export class RendererService { } // platform should be set after enableProdMode() this.platform = platformBrowserDynamic(); + this.initAngularBootstrapElement(); } /** @@ -83,7 +84,7 @@ export class RendererService { ); } - initAngularBootstrapElement() { + private initAngularBootstrapElement() { // Adds DOM element that angular will use as bootstrap component const storybookWrapperElement = document.createElement( RendererService.SELECTOR_STORYBOOK_WRAPPER diff --git a/app/angular/src/element-renderer.ts b/app/angular/src/element-renderer.ts new file mode 100644 index 000000000000..e49b411e80a2 --- /dev/null +++ b/app/angular/src/element-renderer.ts @@ -0,0 +1 @@ +export { ElementRendererService } from './client/preview/angular-beta/ElementRendererService'; diff --git a/examples/angular-cli/.storybook/preview.ts b/examples/angular-cli/.storybook/preview.ts index 55e7cb6c6436..ea3ecd41c449 100644 --- a/examples/angular-cli/.storybook/preview.ts +++ b/examples/angular-cli/.storybook/preview.ts @@ -1,5 +1,6 @@ -import { addParameters, addDecorator } from '@storybook/angular'; +import { addParameters } from '@storybook/angular'; import { setCompodocJson } from '@storybook/addon-docs/angular'; +import { prepareForInline } from '@storybook/addon-docs/angular/inline'; import addCssWarning from '../src/cssWarning'; // @ts-ignore @@ -18,7 +19,7 @@ addCssWarning(); addParameters({ docs: { - // inlineStories: true, - iframeHeight: '60px', + inlineStories: true, + prepareForInline, }, }); diff --git a/examples/angular-cli/package.json b/examples/angular-cli/package.json index 135e7ec2ee2b..395f0da96053 100644 --- a/examples/angular-cli/package.json +++ b/examples/angular-cli/package.json @@ -36,6 +36,7 @@ "@angular-devkit/core": "^11.1.0", "@angular/cli": "^11.1.0", "@angular/compiler-cli": "^11.1.0", + "@angular/elements": "^11.1.0", "@compodoc/compodoc": "^1.1.11", "@storybook/addon-a11y": "6.2.0-alpha.18", "@storybook/addon-actions": "6.2.0-alpha.18", @@ -54,6 +55,7 @@ "@types/jest": "^25.2.3", "@types/node": "^14.14.20", "@types/webpack-env": "^1.16.0", + "@webcomponents/custom-elements": "^1.4.3", "babel-plugin-require-context-hook": "^1.0.0", "global": "^4.4.0", "jasmine-core": "~3.6.0", diff --git a/examples/angular-cli/src/stories/__snapshots__/core.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/core.stories.storyshot index 44a39058994a..791e5a49d4a8 100644 --- a/examples/angular-cli/src/stories/__snapshots__/core.stories.storyshot +++ b/examples/angular-cli/src/stories/__snapshots__/core.stories.storyshot @@ -13,7 +13,7 @@ exports[`Storyshots Core/Parameters passed to story 1`] = ` > Parameters are { "docs": { - "iframeHeight": "60px" + "inlineStories": true }, "globalParameter": "globalParameter", "framework": "angular", diff --git a/yarn.lock b/yarn.lock index 16f7391e9f95..373d9c0a9cf3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -280,6 +280,13 @@ dependencies: tslib "^2.0.0" +"@angular/elements@^11.1.0": + version "11.1.0" + resolved "https://registry.yarnpkg.com/@angular/elements/-/elements-11.1.0.tgz#fd81e8dc01d4fa0ab36ee1ad2778ff5886ff8fd1" + integrity sha512-Bj6lwVg/uILRt2fFSKW+suezYJMXEkVJx+D+2a486ZnD/jT1UN5kJ21GfGy9c4tY4XtHlWTWc2CMPXGKDAhd7A== + dependencies: + tslib "^2.0.0" + "@angular/forms@^11.1.0": version "11.1.0" resolved "https://registry.yarnpkg.com/@angular/forms/-/forms-11.1.0.tgz#6ab2e81df80dc9a9d0898d2a57270de5d9eb30e5" @@ -6482,6 +6489,11 @@ "@webassemblyjs/wast-parser" "1.9.0" "@xtuc/long" "4.2.2" +"@webcomponents/custom-elements@^1.4.3": + version "1.4.3" + resolved "https://registry.yarnpkg.com/@webcomponents/custom-elements/-/custom-elements-1.4.3.tgz#1800d49f38bb4425ebfd160b50115e62776109d7" + integrity sha512-iD0YW46SreUQANGccywK/eC+gZELNHocZZrY2fGwrIlx/biQOTkAF9IohisibHbrmIHmA9pVCIdGwzfO+W0gig== + "@webpack-contrib/schema-utils@^1.0.0-beta.0": version "1.0.0-beta.0" resolved "https://registry.yarnpkg.com/@webpack-contrib/schema-utils/-/schema-utils-1.0.0-beta.0.tgz#bf9638c9464d177b48209e84209e23bee2eb4f65" From 104002269e959a299b2ac8c48b6dcf05ed7b2b2e Mon Sep 17 00:00:00 2001 From: ThibaudAv Date: Thu, 21 Jan 2021 18:58:43 +0100 Subject: [PATCH 3/5] refactor(angular): move docs stories in Addon/Docs --- .../addon-links.stories.storyshot | 4 +- .../src/stories/addon-controls.stories.ts | 3 +- .../addon-docs.stories.storyshot | 8 +- .../{ => addons/docs}/addon-docs.stories.mdx | 0 .../doc-button.stories.storyshot | 2 +- .../doc-button/doc-button.component.html | 0 .../doc-button/doc-button.component.scss | 0 .../docs}/doc-button/doc-button.component.ts | 0 .../docs}/doc-button/doc-button.stories.ts | 3 +- .../doc-directive.stories.storyshot | 2 +- .../doc-directive/doc-directive.directive.ts | 0 .../doc-directive/doc-directive.stories.ts | 3 +- .../doc-injectable.stories.storyshot | 2 +- .../doc-injectable/doc-injectable.service.ts | 0 .../doc-injectable/doc-injectable.stories.ts | 3 +- .../__snapshots__/doc-pipe.stories.storyshot | 2 +- .../docs}/doc-pipe/doc-pipe.pipe.ts | 0 .../docs}/doc-pipe/doc-pipe.stories.ts | 3 +- .../decorators.stories.storyshot | 80 ------------------- .../issues/12009-unknown-component.stories.ts | 1 - 20 files changed, 15 insertions(+), 101 deletions(-) rename examples/angular-cli/src/stories/{ => addons/docs}/__snapshots__/addon-docs.stories.storyshot (93%) rename examples/angular-cli/src/stories/{ => addons/docs}/addon-docs.stories.mdx (100%) rename examples/angular-cli/src/stories/{ => addons/docs}/doc-button/__snapshots__/doc-button.stories.storyshot (96%) rename examples/angular-cli/src/stories/{ => addons/docs}/doc-button/doc-button.component.html (100%) rename examples/angular-cli/src/stories/{ => addons/docs}/doc-button/doc-button.component.scss (100%) rename examples/angular-cli/src/stories/{ => addons/docs}/doc-button/doc-button.component.ts (100%) rename examples/angular-cli/src/stories/{ => addons/docs}/doc-button/doc-button.stories.ts (76%) rename examples/angular-cli/src/stories/{ => addons/docs}/doc-directive/__snapshots__/doc-directive.stories.storyshot (81%) rename examples/angular-cli/src/stories/{ => addons/docs}/doc-directive/doc-directive.directive.ts (100%) rename examples/angular-cli/src/stories/{ => addons/docs}/doc-directive/doc-directive.stories.ts (81%) rename examples/angular-cli/src/stories/{ => addons/docs}/doc-injectable/__snapshots__/doc-injectable.stories.storyshot (70%) rename examples/angular-cli/src/stories/{ => addons/docs}/doc-injectable/doc-injectable.service.ts (100%) rename examples/angular-cli/src/stories/{ => addons/docs}/doc-injectable/doc-injectable.stories.ts (85%) rename examples/angular-cli/src/stories/{ => addons/docs}/doc-pipe/__snapshots__/doc-pipe.stories.storyshot (72%) rename examples/angular-cli/src/stories/{ => addons/docs}/doc-pipe/doc-pipe.pipe.ts (100%) rename examples/angular-cli/src/stories/{ => addons/docs}/doc-pipe/doc-pipe.stories.ts (86%) diff --git a/examples/angular-cli/src/stories/__snapshots__/addon-links.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/addon-links.stories.storyshot index 12978b2c037d..9d2d69c005e3 100644 --- a/examples/angular-cli/src/stories/__snapshots__/addon-links.stories.storyshot +++ b/examples/angular-cli/src/stories/__snapshots__/addon-links.stories.storyshot @@ -3,11 +3,11 @@ exports[`Storyshots Addon/Links button with link to another story 1`] = ` diff --git a/examples/angular-cli/src/stories/addon-controls.stories.ts b/examples/angular-cli/src/stories/addon-controls.stories.ts index 278ea3bdddcd..83196180608b 100644 --- a/examples/angular-cli/src/stories/addon-controls.stories.ts +++ b/examples/angular-cli/src/stories/addon-controls.stories.ts @@ -1,10 +1,9 @@ import { Story, Meta } from '@storybook/angular/types-6-0'; -import { DocButtonComponent } from './doc-button/doc-button.component'; +import { DocButtonComponent } from './addons/docs/doc-button/doc-button.component'; export default { title: 'Addon/Controls', component: DocButtonComponent, - parameters: { docs: { iframeHeight: 120 } }, } as Meta; const Template: Story = (args) => ({ diff --git a/examples/angular-cli/src/stories/__snapshots__/addon-docs.stories.storyshot b/examples/angular-cli/src/stories/addons/docs/__snapshots__/addon-docs.stories.storyshot similarity index 93% rename from examples/angular-cli/src/stories/__snapshots__/addon-docs.stories.storyshot rename to examples/angular-cli/src/stories/addons/docs/__snapshots__/addon-docs.stories.storyshot index bc11d28ce3ee..84e6c570f31b 100644 --- a/examples/angular-cli/src/stories/__snapshots__/addon-docs.stories.storyshot +++ b/examples/angular-cli/src/stories/addons/docs/__snapshots__/addon-docs.stories.storyshot @@ -3,11 +3,11 @@ exports[`Storyshots Addon/Docs with some emoji 1`] = ` @@ -18,11 +18,11 @@ exports[`Storyshots Addon/Docs with some emoji 1`] = ` exports[`Storyshots Addon/Docs with text 1`] = ` diff --git a/examples/angular-cli/src/stories/addon-docs.stories.mdx b/examples/angular-cli/src/stories/addons/docs/addon-docs.stories.mdx similarity index 100% rename from examples/angular-cli/src/stories/addon-docs.stories.mdx rename to examples/angular-cli/src/stories/addons/docs/addon-docs.stories.mdx diff --git a/examples/angular-cli/src/stories/doc-button/__snapshots__/doc-button.stories.storyshot b/examples/angular-cli/src/stories/addons/docs/doc-button/__snapshots__/doc-button.stories.storyshot similarity index 96% rename from examples/angular-cli/src/stories/doc-button/__snapshots__/doc-button.stories.storyshot rename to examples/angular-cli/src/stories/addons/docs/doc-button/__snapshots__/doc-button.stories.storyshot index 505d50ad46d3..1a70957da877 100644 --- a/examples/angular-cli/src/stories/doc-button/__snapshots__/doc-button.stories.storyshot +++ b/examples/angular-cli/src/stories/addons/docs/doc-button/__snapshots__/doc-button.stories.storyshot @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Storyshots DocButton Basic 1`] = ` +exports[`Storyshots Addon/Docs/DocButton Basic 1`] = ` ({ diff --git a/examples/angular-cli/src/stories/doc-directive/__snapshots__/doc-directive.stories.storyshot b/examples/angular-cli/src/stories/addons/docs/doc-directive/__snapshots__/doc-directive.stories.storyshot similarity index 81% rename from examples/angular-cli/src/stories/doc-directive/__snapshots__/doc-directive.stories.storyshot rename to examples/angular-cli/src/stories/addons/docs/doc-directive/__snapshots__/doc-directive.stories.storyshot index 41f59c6352ae..a7558ae3df89 100644 --- a/examples/angular-cli/src/stories/doc-directive/__snapshots__/doc-directive.stories.storyshot +++ b/examples/angular-cli/src/stories/addons/docs/doc-directive/__snapshots__/doc-directive.stories.storyshot @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Storyshots DocDirective Basic 1`] = ` +exports[`Storyshots Addon/Docs/DocDirective Basic 1`] = `

diff --git a/examples/angular-cli/src/stories/doc-injectable/doc-injectable.service.ts b/examples/angular-cli/src/stories/addons/docs/doc-injectable/doc-injectable.service.ts similarity index 100% rename from examples/angular-cli/src/stories/doc-injectable/doc-injectable.service.ts rename to examples/angular-cli/src/stories/addons/docs/doc-injectable/doc-injectable.service.ts diff --git a/examples/angular-cli/src/stories/doc-injectable/doc-injectable.stories.ts b/examples/angular-cli/src/stories/addons/docs/doc-injectable/doc-injectable.stories.ts similarity index 85% rename from examples/angular-cli/src/stories/doc-injectable/doc-injectable.stories.ts rename to examples/angular-cli/src/stories/addons/docs/doc-injectable/doc-injectable.stories.ts index de480ab5cef8..ec9ccfd32f3d 100644 --- a/examples/angular-cli/src/stories/doc-injectable/doc-injectable.stories.ts +++ b/examples/angular-cli/src/stories/addons/docs/doc-injectable/doc-injectable.stories.ts @@ -1,10 +1,9 @@ import { DocInjectableService } from './doc-injectable.service'; export default { - title: 'DocInjectable', + title: 'Addon/Docs/DocInjectable', component: DocInjectableService, parameters: { - docs: { iframeHeight: 120 }, controls: { hideNoControlsWarning: true }, }, }; diff --git a/examples/angular-cli/src/stories/doc-pipe/__snapshots__/doc-pipe.stories.storyshot b/examples/angular-cli/src/stories/addons/docs/doc-pipe/__snapshots__/doc-pipe.stories.storyshot similarity index 72% rename from examples/angular-cli/src/stories/doc-pipe/__snapshots__/doc-pipe.stories.storyshot rename to examples/angular-cli/src/stories/addons/docs/doc-pipe/__snapshots__/doc-pipe.stories.storyshot index 0bc6d2644bb9..8582167a51b9 100644 --- a/examples/angular-cli/src/stories/doc-pipe/__snapshots__/doc-pipe.stories.storyshot +++ b/examples/angular-cli/src/stories/addons/docs/doc-pipe/__snapshots__/doc-pipe.stories.storyshot @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Storyshots DocPipe Basic 1`] = ` +exports[`Storyshots Addon/Docs/DocPipe Basic 1`] = `

diff --git a/examples/angular-cli/src/stories/doc-pipe/doc-pipe.pipe.ts b/examples/angular-cli/src/stories/addons/docs/doc-pipe/doc-pipe.pipe.ts similarity index 100% rename from examples/angular-cli/src/stories/doc-pipe/doc-pipe.pipe.ts rename to examples/angular-cli/src/stories/addons/docs/doc-pipe/doc-pipe.pipe.ts diff --git a/examples/angular-cli/src/stories/doc-pipe/doc-pipe.stories.ts b/examples/angular-cli/src/stories/addons/docs/doc-pipe/doc-pipe.stories.ts similarity index 86% rename from examples/angular-cli/src/stories/doc-pipe/doc-pipe.stories.ts rename to examples/angular-cli/src/stories/addons/docs/doc-pipe/doc-pipe.stories.ts index 90aeb82b1ec4..2766293ae1e9 100644 --- a/examples/angular-cli/src/stories/doc-pipe/doc-pipe.stories.ts +++ b/examples/angular-cli/src/stories/addons/docs/doc-pipe/doc-pipe.stories.ts @@ -1,10 +1,9 @@ import { DocPipe } from './doc-pipe.pipe'; export default { - title: 'DocPipe', + title: 'Addon/Docs/DocPipe', component: DocPipe, parameters: { - docs: { iframeHeight: 120 }, controls: { hideNoControlsWarning: true }, }, }; diff --git a/examples/angular-cli/src/stories/decorators/__snapshots__/decorators.stories.storyshot b/examples/angular-cli/src/stories/decorators/__snapshots__/decorators.stories.storyshot index afda93eff155..e173e4bc5e2c 100644 --- a/examples/angular-cli/src/stories/decorators/__snapshots__/decorators.stories.storyshot +++ b/examples/angular-cli/src/stories/decorators/__snapshots__/decorators.stories.storyshot @@ -39,86 +39,6 @@ exports[`Storyshots Core / Decorators With Component 1`] = ` `; -exports[`Storyshots Core / Decorators With Component Decorator And Args 1`] = ` - - Grandparent
- - Parent -
- Input text: -
- Output : - -
-
- - Child -
- Input text: Child text -
- Output : - -
- Private text: Child private text -
- -
- -
- -`; - -exports[`Storyshots Core / Decorators With Component Decorator And Props 1`] = ` - - Grandparent
- - Parent -
- Input text: Parent text -
- Output : - -
-
- - Child -
- Input text: Child text -
- Output : - -
- Private text: Child private text -
- -
- -
- -`; - exports[`Storyshots Core / Decorators With Component Wrapper Decorator 1`] = ` Grandparent
({ From 9113153f2a5389ddcbe2598527c4ee336c085dce Mon Sep 17 00:00:00 2001 From: ThibaudAv Date: Thu, 21 Jan 2021 20:09:28 +0100 Subject: [PATCH 4/5] chore(angular): add more examples for docs addon --- .../__snapshots__/core.stories.storyshot | 4 +- .../custom-styles.stories.storyshot | 12 +- .../__snapshots__/simple.stories.storyshot | 16 ++ .../stories/addons/docs/docs-only.stories.mdx | 80 ++++++++++ .../__snapshots__/iframe.stories.storyshot | 16 ++ .../addons/docs/iframe/iframe.stories.ts | 12 ++ .../stories/addons/docs/markdown.stories.mdx | 149 ++++++++++++++++++ .../stories/addons/docs/simple.stories.mdx | 29 ++++ .../12009-unknown-component.stories.storyshot | 4 +- 9 files changed, 312 insertions(+), 10 deletions(-) create mode 100644 examples/angular-cli/src/stories/addons/docs/__snapshots__/simple.stories.storyshot create mode 100644 examples/angular-cli/src/stories/addons/docs/docs-only.stories.mdx create mode 100644 examples/angular-cli/src/stories/addons/docs/iframe/__snapshots__/iframe.stories.storyshot create mode 100644 examples/angular-cli/src/stories/addons/docs/iframe/iframe.stories.ts create mode 100644 examples/angular-cli/src/stories/addons/docs/markdown.stories.mdx create mode 100644 examples/angular-cli/src/stories/addons/docs/simple.stories.mdx diff --git a/examples/angular-cli/src/stories/__snapshots__/core.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/core.stories.storyshot index 791e5a49d4a8..c389b6841161 100644 --- a/examples/angular-cli/src/stories/__snapshots__/core.stories.storyshot +++ b/examples/angular-cli/src/stories/__snapshots__/core.stories.storyshot @@ -3,13 +3,13 @@ exports[`Storyshots Core/Parameters passed to story 1`] = ` @@ -19,12 +19,12 @@ exports[`Storyshots Custom/Style Default 1`] = ` exports[`Storyshots Custom/Style With Knobs 1`] = ` diff --git a/examples/angular-cli/src/stories/addons/docs/__snapshots__/simple.stories.storyshot b/examples/angular-cli/src/stories/addons/docs/__snapshots__/simple.stories.storyshot new file mode 100644 index 000000000000..151d5b1761ea --- /dev/null +++ b/examples/angular-cli/src/stories/addons/docs/__snapshots__/simple.stories.storyshot @@ -0,0 +1,16 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Storyshots Addons/Docs/SimpleButton with text 1`] = ` + + + + + +`; diff --git a/examples/angular-cli/src/stories/addons/docs/docs-only.stories.mdx b/examples/angular-cli/src/stories/addons/docs/docs-only.stories.mdx new file mode 100644 index 000000000000..e699cf0f079f --- /dev/null +++ b/examples/angular-cli/src/stories/addons/docs/docs-only.stories.mdx @@ -0,0 +1,80 @@ +import { Meta, Canvas } from '@storybook/addon-docs/blocks'; + + + +# Documentation-only MDX + +# [Link](http://https://storybook.js.org/) in heading + +This file is a documentation-only MDX file, i.e. it doesn't contain any `` definitions. + +Therefore, it shows up in the [navigation](https://github.com/) UI as a document icon. + +It can, however, still contain a `` definition: + + +
+

This is a preview block within a documentation-only MDX file

+

+ You may need to wrap certain documentation in a `Preview` in order to reset the styles for use + cases such as documenting a design system. +

+
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +## Bottom + +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc faucibus urna id nibh mollis, varius facilisis sapien scelerisque. Pellentesque lobortis convallis mi, at accumsan nisl sollicitudin id. Aliquam vitae elementum libero. Nulla blandit est turpis, a consectetur ante rhoncus a. Integer eu quam eu mauris pharetra elementum. Donec ex nisl, tincidunt ut tincidunt id, bibendum ut sem. Sed in congue tortor, a congue dolor. Fusce a magna vel nulla laoreet sagittis. + +# [Link](https://storybook.js.org/) in heading + +## [Link](https://storybook.js.org/) in heading + +### [Link](https://storybook.js.org/) in heading + +#### [Link](https://storybook.js.org/) in heading + +##### [Link](https://storybook.js.org/) in heading + +###### [Link](https://storybook.js.org/) in heading + +He stared at the clinic, [Molly](https://storybook.js.org/) took him to the _[Tank War](https://storybook.js.org/)_, mouth touched with hot gold as a gliding cursor struck sparks from the wall of a **[skyscraper](https://storybook.js.org/)** canyon. diff --git a/examples/angular-cli/src/stories/addons/docs/iframe/__snapshots__/iframe.stories.storyshot b/examples/angular-cli/src/stories/addons/docs/iframe/__snapshots__/iframe.stories.storyshot new file mode 100644 index 000000000000..f7aab4666943 --- /dev/null +++ b/examples/angular-cli/src/stories/addons/docs/iframe/__snapshots__/iframe.stories.storyshot @@ -0,0 +1,16 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Storyshots Addons/Docs/Iframe Basic 1`] = ` + + + + + +`; diff --git a/examples/angular-cli/src/stories/addons/docs/iframe/iframe.stories.ts b/examples/angular-cli/src/stories/addons/docs/iframe/iframe.stories.ts new file mode 100644 index 000000000000..8f5b470415c6 --- /dev/null +++ b/examples/angular-cli/src/stories/addons/docs/iframe/iframe.stories.ts @@ -0,0 +1,12 @@ +import { Button } from '@storybook/angular/demo'; + +export default { + title: 'Addons/Docs/Iframe', + component: Button, + parameters: { docs: { iframeHeight: 120, inlineStories: true } }, +}; + +export const Basic = (args) => ({ + props: args, +}); +Basic.args = { text: 'Add 👾' }; diff --git a/examples/angular-cli/src/stories/addons/docs/markdown.stories.mdx b/examples/angular-cli/src/stories/addons/docs/markdown.stories.mdx new file mode 100644 index 000000000000..2d5ff78e9971 --- /dev/null +++ b/examples/angular-cli/src/stories/addons/docs/markdown.stories.mdx @@ -0,0 +1,149 @@ +import { Meta } from '@storybook/addon-docs/blocks'; + + + +# h1 Heading + +## h2 Heading + +### h3 Heading + +#### h4 Heading + +##### h5 Heading + +###### h6 Heading + +## Paragraphs + +The Storybook design system codifies existing UI components into a central, well-maintained repository. It is built to address having to paste the same components into multiple projects again and again. This simplifies building UI's with Storybook's design patterns. + +SDS was created by Kyle Suss, Dominic Nguyen (me!), and Michael Shilman with invaluable accessibility contributions from Jimmy Somsanith. + +## Emphasis + +**This is bold text** + +**_This is bold italic text_** + +_This is italic text_ + +_This is italic text_ + +~~Strikethrough~~ + +## Blockquotes + +> Blockquotes can also be nested... +> +> > ...by using additional greater-than signs right next to each other... +> > +> > > ...or with spaces between arrows. + +## Lists + +Unordered + +- Create a list by starting a line with `+`, `-`, or `*` +- Sub-lists are made by indenting 2 spaces: + - Marker character change forces new list start: + - Ac tristique libero volutpat at + * Facilisis in pretium nisl aliquet + - Nulla volutpat aliquam velit +- Very easy! + - Marker character change forces new list start: + - Ac tristique libero volutpat at + * Facilisis in pretium nisl aliquet + - Nulla volutpat aliquam velit +- Final item + +Ordered + +1. Lorem ipsum dolor sit amet +2. Consectetur adipiscing elit +3. Integer molestie lorem at massa + +Start numbering with offset: + +57. foo +1. bar + +## Code + +Inline `code` + +Indented code + + // Some comments + line 1 of code + line 2 of code + line 3 of code + +Block code "fences" + +``` +Sample text here... +``` + +JS syntax highlighting + +```js +var foo = function (bar) { + return bar++; +}; + +console.log(foo(5)); +``` + +CSS syntax + +```css +.foo { + color: #eee; +} +``` + +HTML syntax + +```html +

yo html

+ +

And here we go

+``` + +## Tables + +| Option | Description | +| ------ | ------------------------------------------------------------------------- | +| data | path to data files to supply the data that will be passed into templates. | +| engine | engine to be used for processing templates. Handlebars is the default. | +| ext | extension to be used for dest files. | + +Right aligned columns + +| Option | Description | +| -----: | ------------------------------------------------------------------------: | +| data | path to data files to supply the data that will be passed into templates. | +| engine | engine to be used for processing templates. Handlebars is the default. | +| ext | extension to be used for dest files. | + +## Links + +[external link](https://hichroma.com) + +[external link with title](https://hichroma.com 'Insert title!') + +[link to in page anchor](#h1-heading) + +[link to another story (docs)](?path=/docs/addons-docs-docs-only--page) + +[link to another story (canvas)](?path=/story/addons-docs-buttongroup--basic) + +[link to about page](?path=/settings/about) + +[link to absolute local url](/absolute) + +## Images + +![Minion](https://octodex.github.com/images/minion.png) +![Stormtroopocat](https://octodex.github.com/images/stormtroopocat.jpg 'The Stormtroopocat') diff --git a/examples/angular-cli/src/stories/addons/docs/simple.stories.mdx b/examples/angular-cli/src/stories/addons/docs/simple.stories.mdx new file mode 100644 index 000000000000..cfcdfad0ccfd --- /dev/null +++ b/examples/angular-cli/src/stories/addons/docs/simple.stories.mdx @@ -0,0 +1,29 @@ +import { Story, Meta, ArgsTable } from '@storybook/addon-docs/blocks'; +import { Button } from '@storybook/angular/demo'; +import { action } from '@storybook/addon-actions'; + + + +# Simple Button + + + {(args) => ({ + props: { + text: args.text, + onClick: action('clicked'), + }, + })} + + + diff --git a/examples/angular-cli/src/stories/issues/__snapshots__/12009-unknown-component.stories.storyshot b/examples/angular-cli/src/stories/issues/__snapshots__/12009-unknown-component.stories.storyshot index 93360d7b090b..e27c4ff4ed94 100644 --- a/examples/angular-cli/src/stories/issues/__snapshots__/12009-unknown-component.stories.storyshot +++ b/examples/angular-cli/src/stories/issues/__snapshots__/12009-unknown-component.stories.storyshot @@ -3,11 +3,11 @@ exports[`Storyshots Addon/Issues/12009 unknown component Basic 1`] = ` From 53248cafb44eff97ca5897b2231aa20162a20d6a Mon Sep 17 00:00:00 2001 From: ThibaudAv Date: Thu, 21 Jan 2021 20:41:55 +0100 Subject: [PATCH 5/5] chore(angular): add theme-decorator example --- examples/angular-cli/.storybook/main.js | 1 + examples/angular-cli/.storybook/preview.ts | 15 ++++++++++++++ .../__snapshots__/core.stories.storyshot | 20 +++++++++++++++++++ .../decorators.stories.storyshot | 11 ++++++++++ .../theme-decorator/decorators.stories.ts | 18 +++++++++++++++++ examples/angular-cli/src/styles.scss | 9 +++++++++ 6 files changed, 74 insertions(+) create mode 100644 examples/angular-cli/src/stories/theme-decorator/__snapshots__/decorators.stories.storyshot create mode 100644 examples/angular-cli/src/stories/theme-decorator/decorators.stories.ts diff --git a/examples/angular-cli/.storybook/main.js b/examples/angular-cli/.storybook/main.js index 1f934f0b01bc..5345ec67fd0f 100644 --- a/examples/angular-cli/.storybook/main.js +++ b/examples/angular-cli/.storybook/main.js @@ -11,5 +11,6 @@ module.exports = { '@storybook/addon-jest', '@storybook/addon-backgrounds', '@storybook/addon-a11y', + '@storybook/addon-toolbars', ], }; diff --git a/examples/angular-cli/.storybook/preview.ts b/examples/angular-cli/.storybook/preview.ts index ea3ecd41c449..366164a97c8a 100644 --- a/examples/angular-cli/.storybook/preview.ts +++ b/examples/angular-cli/.storybook/preview.ts @@ -23,3 +23,18 @@ addParameters({ prepareForInline, }, }); + +export const globalTypes = { + theme: { + name: 'Theme', + description: 'Global theme for components', + defaultValue: 'light', + toolbar: { + icon: 'paintbrush', + items: [ + { value: 'light', title: 'Light theme' }, + { value: 'dark', title: 'Dark theme' }, + ], + }, + }, +}; diff --git a/examples/angular-cli/src/stories/__snapshots__/core.stories.storyshot b/examples/angular-cli/src/stories/__snapshots__/core.stories.storyshot index c389b6841161..3f7adc08164c 100644 --- a/examples/angular-cli/src/stories/__snapshots__/core.stories.storyshot +++ b/examples/angular-cli/src/stories/__snapshots__/core.stories.storyshot @@ -15,6 +15,26 @@ exports[`Storyshots Core/Parameters passed to story 1`] = ` "docs": { "inlineStories": true }, + "globalTypes": { + "theme": { + "name": "Theme", + "description": "Global theme for components", + "defaultValue": "light", + "toolbar": { + "icon": "paintbrush", + "items": [ + { + "value": "light", + "title": "Light theme" + }, + { + "value": "dark", + "title": "Dark theme" + } + ] + } + } + }, "globalParameter": "globalParameter", "framework": "angular", "chapterParameter": "chapterParameter", diff --git a/examples/angular-cli/src/stories/theme-decorator/__snapshots__/decorators.stories.storyshot b/examples/angular-cli/src/stories/theme-decorator/__snapshots__/decorators.stories.storyshot new file mode 100644 index 000000000000..31dc967f0565 --- /dev/null +++ b/examples/angular-cli/src/stories/theme-decorator/__snapshots__/decorators.stories.storyshot @@ -0,0 +1,11 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Storyshots Core / Theme Decorators Base 1`] = ` + +
+ Change theme with the brush in toolbar +
+ +`; diff --git a/examples/angular-cli/src/stories/theme-decorator/decorators.stories.ts b/examples/angular-cli/src/stories/theme-decorator/decorators.stories.ts new file mode 100644 index 000000000000..5a961b27490d --- /dev/null +++ b/examples/angular-cli/src/stories/theme-decorator/decorators.stories.ts @@ -0,0 +1,18 @@ +import { componentWrapperDecorator, Meta } from '@storybook/angular'; + +export default { + title: 'Core / Theme Decorators', + decorators: [ + componentWrapperDecorator( + (story) => `
${story}
`, + ({ globals }) => ({ myTheme: `${globals.theme}-theme` }) + ), + ], +} as Meta; + +export const Base = (args) => ({ + template: 'Change theme with the brush in toolbar', + props: { + ...args, + }, +}); diff --git a/examples/angular-cli/src/styles.scss b/examples/angular-cli/src/styles.scss index b71e7cceb9be..2bcb866267c9 100644 --- a/examples/angular-cli/src/styles.scss +++ b/examples/angular-cli/src/styles.scss @@ -6,3 +6,12 @@ .green-color { color: $color; } + +.light-theme { + background-color: white; +} + +.dark-theme { + background-color: rgb(75, 75, 75); + color: white; +}