Skip to content

Commit

Permalink
Merge pull request #10946 from storybookjs/10583-controls-for-angular
Browse files Browse the repository at this point in the history 
Addon-controls: Angular support
  • Loading branch information
@shilman
shilman authored May 28, 2020
2 parents 056c04a + fc0f6be commit 93658d5
Show file tree
Hide file tree
Showing 12 changed files with 178 additions and 67 deletions.
8 changes: 4 additions & 4 deletions addons/controls/src/register.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,19 +3,19 @@ import addons, { types } from '@storybook/addons';
import { AddonPanel } from '@storybook/components';
import { API } from '@storybook/api';
import { ControlsPanel } from './components/ControlsPanel';
import { ADDON_ID } from './constants';
import { ADDON_ID, PARAM_KEY } from './constants';

addons.register(ADDON_ID, (api: API) => {
addons.addPanel(ADDON_ID, {
title: 'Controls',
type: types.PANEL,
render: ({ active }) => {
paramKey: PARAM_KEY,
render: ({ key, active }) => {
if (!active || !api.getCurrentStoryData()) {
return null;
}
return (
<AddonPanel active={active}>
{false}
<AddonPanel key={key} active={active}>
<ControlsPanel />
</AddonPanel>
);
Expand Down
1 change: 1 addition & 0 deletions addons/docs/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@
"@storybook/addons": "6.0.0-beta.16",
"@storybook/api": "6.0.0-beta.16",
"@storybook/client-api": "6.0.0-beta.16",
"@storybook/client-logger": "6.0.0-beta.16",
"@storybook/components": "6.0.0-beta.16",
"@storybook/core": "6.0.0-beta.16",
"@storybook/core-events": "6.0.0-beta.16",
Expand Down
130 changes: 76 additions & 54 deletions addons/docs/src/frameworks/angular/__testfixtures__/doc-button/argtypes.snapshot
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,7 @@
exports[`angular component properties doc-button 1`] = `
Object {
"_inputValue": Object {
"defaultValue": Object {
"summary": "'some value'",
},
"defaultValue": "some value",
"description": "",
"name": "_inputValue",
"table": Object {
Expand All @@ -15,11 +13,12 @@ Object {
"summary": "string",
},
},
"type": Object {
"name": "void",
},
},
"_value": Object {
"defaultValue": Object {
"summary": "'Private hello'",
},
"defaultValue": "Private hello",
"description": "<p>Private value. </p>
",
"name": "_value",
Expand All @@ -30,11 +29,12 @@ Object {
"summary": "string",
},
},
"type": Object {
"name": "void",
},
},
"appearance": Object {
"defaultValue": Object {
"summary": "'secondary'",
},
"defaultValue": "secondary",
"description": "<p>Appearance style of the button. </p>
",
"name": "appearance",
Expand All @@ -45,11 +45,16 @@ Object {
"summary": "\\"primary\\" | \\"secondary\\"",
},
},
"type": Object {
"name": "enum",
"value": Array [
"primary",
"secondary",
],
},
},
"buttonRef": Object {
"defaultValue": Object {
"summary": undefined,
},
"defaultValue": undefined,
"description": "",
"name": "buttonRef",
"table": Object {
Expand All @@ -59,11 +64,12 @@ Object {
"summary": "ElementRef",
},
},
"type": Object {
"name": "void",
},
},
"calc": Object {
"defaultValue": Object {
"summary": "",
},
"defaultValue": undefined,
"description": "<p>An internal calculation method which adds <code>x</code> and <code>y</code> together.</p>
",
"name": "calc",
Expand All @@ -74,11 +80,12 @@ Object {
"summary": "(x: number, y: string | number) => number",
},
},
"type": Object {
"name": "void",
},
},
"inputValue": Object {
"defaultValue": Object {
"summary": undefined,
},
"defaultValue": undefined,
"description": "<p>Setter for <code>inputValue</code> that is also an <code>@Input</code>. </p>
",
"name": "inputValue",
Expand All @@ -89,11 +96,12 @@ Object {
"summary": "string",
},
},
"type": Object {
"name": "string",
},
},
"internalProperty": Object {
"defaultValue": Object {
"summary": "'Public hello'",
},
"defaultValue": "Public hello",
"description": "<p>Public value. </p>
",
"name": "internalProperty",
Expand All @@ -104,11 +112,12 @@ Object {
"summary": "string",
},
},
"type": Object {
"name": "void",
},
},
"isDisabled": Object {
"defaultValue": Object {
"summary": "false",
},
"defaultValue": false,
"description": "<p>Sets the button to a disabled state. </p>
",
"name": "isDisabled",
Expand All @@ -119,11 +128,12 @@ Object {
"summary": undefined,
},
},
"type": Object {
"name": "boolean",
},
},
"item": Object {
"defaultValue": Object {
"summary": undefined,
},
"defaultValue": undefined,
"description": undefined,
"name": "item",
"table": Object {
Expand All @@ -133,11 +143,12 @@ Object {
"summary": "[]",
},
},
"type": Object {
"name": "object",
},
},
"label": Object {
"defaultValue": Object {
"summary": undefined,
},
"defaultValue": undefined,
"description": "<p>The inner text of the button.</p>
",
"name": "label",
Expand All @@ -148,11 +159,12 @@ Object {
"summary": "string",
},
},
"type": Object {
"name": "string",
},
},
"onClick": Object {
"defaultValue": Object {
"summary": "new EventEmitter<Event>()",
},
"defaultValue": undefined,
"description": "<p>Handler to be called when the button is clicked by a user.</p>
<p>Will also block the emission of the event if <code>isDisabled</code> is true.</p>
",
Expand All @@ -164,11 +176,12 @@ Object {
"summary": "EventEmitter",
},
},
"type": Object {
"name": "void",
},
},
"privateMethod": Object {
"defaultValue": Object {
"summary": "",
},
"defaultValue": undefined,
"description": "<p>A private method.</p>
",
"name": "privateMethod",
Expand All @@ -179,11 +192,12 @@ Object {
"summary": "(password: string) => void",
},
},
"type": Object {
"name": "void",
},
},
"processedItem": Object {
"defaultValue": Object {
"summary": undefined,
},
"defaultValue": undefined,
"description": "",
"name": "processedItem",
"table": Object {
Expand All @@ -193,11 +207,12 @@ Object {
"summary": "T[]",
},
},
"type": Object {
"name": "void",
},
},
"protectedMethod": Object {
"defaultValue": Object {
"summary": "",
},
"defaultValue": undefined,
"description": "<p>A protected method.</p>
",
"name": "protectedMethod",
Expand All @@ -208,11 +223,12 @@ Object {
"summary": "(id?: number) => void",
},
},
"type": Object {
"name": "void",
},
},
"publicMethod": Object {
"defaultValue": Object {
"summary": "",
},
"defaultValue": undefined,
"description": "<p>A public method using an interface. </p>
",
"name": "publicMethod",
Expand All @@ -223,11 +239,12 @@ Object {
"summary": "(things: ISomeInterface) => void",
},
},
"type": Object {
"name": "void",
},
},
"showKeyAlias": Object {
"defaultValue": Object {
"summary": undefined,
},
"defaultValue": undefined,
"description": undefined,
"name": "showKeyAlias",
"table": Object {
Expand All @@ -237,11 +254,12 @@ Object {
"summary": "",
},
},
"type": Object {
"name": "void",
},
},
"size": Object {
"defaultValue": Object {
"summary": "'medium'",
},
"defaultValue": "medium",
"description": "<p>Size of the button. </p>
",
"name": "size",
Expand All @@ -252,11 +270,12 @@ Object {
"summary": "ButtonSize",
},
},
"type": Object {
"name": "object",
},
},
"somethingYouShouldNotUse": Object {
"defaultValue": Object {
"summary": "false",
},
"defaultValue": false,
"description": "<p>Some input you shouldn&#39;t use.</p>
",
"name": "somethingYouShouldNotUse",
Expand All @@ -267,6 +286,9 @@ Object {
"summary": undefined,
},
},
"type": Object {
"name": "boolean",
},
},
}
`;
41 changes: 41 additions & 0 deletions addons/docs/src/frameworks/angular/compodoc.test.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
import { extractType } from './compodoc';
import { Decorator } from './types';

const makeProperty = (compodocType?: string) => ({
type: compodocType,
name: 'dummy',
decorators: [] as Decorator[],
optional: true,
});

describe('extractType', () => {
describe('with compodoc type', () => {
it.each([
['string', { name: 'string' }],
['boolean', { name: 'boolean' }],
['number', { name: 'number' }],
['object', { name: 'object' }],
['foo', { name: 'object' }],
[null, { name: 'void' }],
[undefined, { name: 'void' }],
['T[]', { name: 'object' }],
['[]', { name: 'object' }],
['"primary" | "secondary"', { name: 'enum', value: ['primary', 'secondary'] }],
])('%s', (compodocType, expected) => {
expect(extractType(makeProperty(compodocType), null)).toEqual(expected);
});
});

describe('without compodoc type', () => {
it.each([
['string', { name: 'string' }],
[false, { name: 'boolean' }],
[10, { name: 'number' }],
[['abc'], { name: 'object' }],
[{ foo: 1 }, { name: 'object' }],
[undefined, { name: 'void' }],
])('%s', (defaultValue, expected) => {
expect(extractType(makeProperty(null), defaultValue)).toEqual(expected);
});
});
});
Loading

0 comments on commit 93658d5

Please sign in to comment.