@storybook/angular 7.1.0-alpha.0 → 7.1.0-alpha.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -27,12 +27,12 @@ So you can develop UI components in isolation without worrying about app specifi
|
|
|
27
27
|
|
|
28
28
|
```sh
|
|
29
29
|
cd my-angular-app
|
|
30
|
-
npx storybook init
|
|
30
|
+
npx storybook@latest init
|
|
31
31
|
```
|
|
32
32
|
|
|
33
33
|
## Setup Storybook for your Angular projects
|
|
34
34
|
|
|
35
|
-
Storybook supports Angular multi-project workspace. You can setup Storybook for each project in the workspace. When running `npx storybook init` you will be asked for which project Storybook should be set up. Essentially, during initialization, the `.storybook` folder will be created and the `angular.json` will be edited to add the Storybook configuration for the selected project. The configuration looks approximately like this:
|
|
35
|
+
Storybook supports Angular multi-project workspace. You can setup Storybook for each project in the workspace. When running `npx storybook@latest init` you will be asked for which project Storybook should be set up. Essentially, during initialization, the `.storybook` folder will be created and the `angular.json` will be edited to add the Storybook configuration for the selected project. The configuration looks approximately like this:
|
|
36
36
|
|
|
37
37
|
```json
|
|
38
38
|
// angular.json
|
|
@@ -6,9 +6,11 @@ const operators_1 = require("rxjs/operators");
|
|
|
6
6
|
const find_up_1 = require("find-up");
|
|
7
7
|
const read_pkg_up_1 = require("read-pkg-up");
|
|
8
8
|
const cli_1 = require("@storybook/cli");
|
|
9
|
+
const telemetry_1 = require("@storybook/telemetry");
|
|
9
10
|
const core_server_1 = require("@storybook/core-server");
|
|
10
11
|
const run_compodoc_1 = require("../utils/run-compodoc");
|
|
11
12
|
const error_handler_1 = require("../utils/error-handler");
|
|
13
|
+
(0, telemetry_1.addToGlobalContext)('cliVersion', cli_1.versions.storybook);
|
|
12
14
|
exports.default = (0, architect_1.createBuilder)(commandBuilder);
|
|
13
15
|
function commandBuilder(options, context) {
|
|
14
16
|
return (0, rxjs_1.from)(setup(options, context)).pipe((0, operators_1.switchMap)(({ tsConfig }) => {
|
|
@@ -6,9 +6,11 @@ const operators_1 = require("rxjs/operators");
|
|
|
6
6
|
const find_up_1 = require("find-up");
|
|
7
7
|
const read_pkg_up_1 = require("read-pkg-up");
|
|
8
8
|
const cli_1 = require("@storybook/cli");
|
|
9
|
+
const telemetry_1 = require("@storybook/telemetry");
|
|
9
10
|
const core_server_1 = require("@storybook/core-server");
|
|
10
11
|
const run_compodoc_1 = require("../utils/run-compodoc");
|
|
11
12
|
const error_handler_1 = require("../utils/error-handler");
|
|
13
|
+
(0, telemetry_1.addToGlobalContext)('cliVersion', cli_1.versions.storybook);
|
|
12
14
|
exports.default = (0, architect_1.createBuilder)(commandBuilder);
|
|
13
15
|
function commandBuilder(options, context) {
|
|
14
16
|
return (0, rxjs_1.from)(setup(options, context)).pipe((0, operators_1.switchMap)(({ tsConfig }) => {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@storybook/angular",
|
|
3
|
-
"version": "7.1.0-alpha.
|
|
3
|
+
"version": "7.1.0-alpha.2",
|
|
4
4
|
"description": "Storybook for Angular: Develop Angular components in isolation with hot reloading.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"storybook",
|
|
@@ -36,20 +36,21 @@
|
|
|
36
36
|
"prep": "../../../scripts/prepare/tsc.ts"
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@storybook/builder-webpack5": "7.1.0-alpha.
|
|
40
|
-
"@storybook/cli": "7.1.0-alpha.
|
|
41
|
-
"@storybook/client-logger": "7.1.0-alpha.
|
|
42
|
-
"@storybook/core-client": "7.1.0-alpha.
|
|
43
|
-
"@storybook/core-common": "7.1.0-alpha.
|
|
44
|
-
"@storybook/core-events": "7.1.0-alpha.
|
|
45
|
-
"@storybook/core-server": "7.1.0-alpha.
|
|
46
|
-
"@storybook/core-webpack": "7.1.0-alpha.
|
|
47
|
-
"@storybook/docs-tools": "7.1.0-alpha.
|
|
39
|
+
"@storybook/builder-webpack5": "7.1.0-alpha.2",
|
|
40
|
+
"@storybook/cli": "7.1.0-alpha.2",
|
|
41
|
+
"@storybook/client-logger": "7.1.0-alpha.2",
|
|
42
|
+
"@storybook/core-client": "7.1.0-alpha.2",
|
|
43
|
+
"@storybook/core-common": "7.1.0-alpha.2",
|
|
44
|
+
"@storybook/core-events": "7.1.0-alpha.2",
|
|
45
|
+
"@storybook/core-server": "7.1.0-alpha.2",
|
|
46
|
+
"@storybook/core-webpack": "7.1.0-alpha.2",
|
|
47
|
+
"@storybook/docs-tools": "7.1.0-alpha.2",
|
|
48
48
|
"@storybook/global": "^5.0.0",
|
|
49
|
-
"@storybook/manager-api": "7.1.0-alpha.
|
|
50
|
-
"@storybook/node-logger": "7.1.0-alpha.
|
|
51
|
-
"@storybook/preview-api": "7.1.0-alpha.
|
|
52
|
-
"@storybook/
|
|
49
|
+
"@storybook/manager-api": "7.1.0-alpha.2",
|
|
50
|
+
"@storybook/node-logger": "7.1.0-alpha.2",
|
|
51
|
+
"@storybook/preview-api": "7.1.0-alpha.2",
|
|
52
|
+
"@storybook/telemetry": "7.1.0-alpha.2",
|
|
53
|
+
"@storybook/types": "7.1.0-alpha.2",
|
|
53
54
|
"@types/node": "^16.0.0",
|
|
54
55
|
"@types/react": "^16.14.34",
|
|
55
56
|
"@types/react-dom": "^16.9.14",
|
|
@@ -123,5 +124,5 @@
|
|
|
123
124
|
"bundler": {
|
|
124
125
|
"tsConfig": "tsconfig.build.json"
|
|
125
126
|
},
|
|
126
|
-
"gitHead": "
|
|
127
|
+
"gitHead": "3f0c9a6636b9e69006ffb841234cf785598e0572"
|
|
127
128
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import type { Meta, StoryObj } from '@storybook/angular';
|
|
2
2
|
import Button from './button.component';
|
|
3
3
|
|
|
4
|
-
// More on how to set up stories at: https://storybook.js.org/docs/
|
|
4
|
+
// More on how to set up stories at: https://storybook.js.org/docs/angular/writing-stories/introduction
|
|
5
5
|
const meta: Meta<Button> = {
|
|
6
6
|
title: 'Example/Button',
|
|
7
7
|
component: Button,
|
|
@@ -22,7 +22,7 @@ const meta: Meta<Button> = {
|
|
|
22
22
|
export default meta;
|
|
23
23
|
type Story = StoryObj<Button>;
|
|
24
24
|
|
|
25
|
-
// More on writing stories with args: https://storybook.js.org/docs/
|
|
25
|
+
// More on writing stories with args: https://storybook.js.org/docs/angular/writing-stories/args
|
|
26
26
|
export const Primary: Story = {
|
|
27
27
|
args: {
|
|
28
28
|
primary: true,
|
|
@@ -8,7 +8,7 @@ import Header from './header.component';
|
|
|
8
8
|
const meta: Meta<Header> = {
|
|
9
9
|
title: 'Example/Header',
|
|
10
10
|
component: Header,
|
|
11
|
-
// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/
|
|
11
|
+
// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/angular/writing-docs/autodocs
|
|
12
12
|
tags: ['autodocs'],
|
|
13
13
|
render: (args) => ({ props: args }),
|
|
14
14
|
decorators: [
|
|
@@ -18,7 +18,7 @@ const meta: Meta<Header> = {
|
|
|
18
18
|
}),
|
|
19
19
|
],
|
|
20
20
|
parameters: {
|
|
21
|
-
// More on how to position stories at: https://storybook.js.org/docs/
|
|
21
|
+
// More on how to position stories at: https://storybook.js.org/docs/angular/configure/story-layout
|
|
22
22
|
layout: 'fullscreen',
|
|
23
23
|
},
|
|
24
24
|
};
|
|
@@ -11,7 +11,7 @@ const meta: Meta<Page> = {
|
|
|
11
11
|
title: 'Example/Page',
|
|
12
12
|
component: Page,
|
|
13
13
|
parameters: {
|
|
14
|
-
// More on how to position stories at: https://storybook.js.org/docs/
|
|
14
|
+
// More on how to position stories at: https://storybook.js.org/docs/angular/configure/story-layout
|
|
15
15
|
layout: 'fullscreen',
|
|
16
16
|
},
|
|
17
17
|
decorators: [
|
|
@@ -31,7 +31,7 @@ export const LoggedOut: Story = {
|
|
|
31
31
|
}),
|
|
32
32
|
};
|
|
33
33
|
|
|
34
|
-
// More on interaction testing: https://storybook.js.org/docs/
|
|
34
|
+
// More on interaction testing: https://storybook.js.org/docs/angular/writing-tests/interaction-testing
|
|
35
35
|
export const LoggedIn: Story = {
|
|
36
36
|
render: (args: Page) => ({
|
|
37
37
|
props: args,
|