Skip to content
This repository was archived by the owner on May 3, 2023. It is now read-only.

Commit 5c68165

Browse files
Sameer Goyalsameergoyal
Sameer Goyal
authored and
sameergoyal
committed
feat(docs): Use storybook for test environment & for documentation
1 parent 400933b commit 5c68165

File tree

271 files changed

+13387
-6859
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

271 files changed

+13387
-6859
lines changed

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
.DS_Store
22
coverage/
33
dist/
4+
docs/
45
node_modules/
56
npm-debug.log
67
cypress/screenshots/*

‎.storybook/main.js

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
2+
const custom = require('../webpack.common');
3+
4+
module.exports = {
5+
stories: [
6+
"../storybook/**/*.stories.mdx",
7+
"../integ/*.stories.@(js|jsx|ts|tsx)"
8+
],
9+
addons: [
10+
"@storybook/addon-essentials",
11+
"@storybook/addon-storysource",
12+
],
13+
core : { builder: 'webpack5'},
14+
webpackFinal: async (config) => {
15+
return {
16+
...config,
17+
module: {
18+
...config.module,
19+
rules: [
20+
...config.module.rules,
21+
...custom.module.rules,
22+
{
23+
test: /\.tsx?$/,
24+
include: [
25+
/src/
26+
],
27+
exclude: [
28+
/node_modules/,
29+
/\.spec\.tsx?$/
30+
],
31+
enforce: 'post',
32+
loader: 'babel-loader',
33+
options: {
34+
plugins: [
35+
[ "istanbul", { "useInlineSourceMaps": false } ]
36+
]
37+
}
38+
}
39+
]
40+
},
41+
resolve: {
42+
...config.resolve,
43+
alias: {
44+
...config.resolve.alias,
45+
...custom.resolve.alias
46+
}
47+
},
48+
plugins: [
49+
...config.plugins,
50+
new MiniCssExtractPlugin()
51+
],
52+
// This is because of a limitation in ts-loader
53+
// https://github.com/TypeStrong/ts-loader#transpileonly-boolean-defaultfalse
54+
ignoreWarnings: [/export .* was not found in/]
55+
};
56+
}
57+
}

‎.storybook/manager.js

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import { addons } from '@storybook/addons';
2+
import theme from './theme';
3+
4+
addons.setConfig({ theme });

‎.storybook/preview.js

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import theme from './theme';
2+
3+
export const parameters = {
4+
actions: { argTypesRegex: "^on[A-Z].*" },
5+
backgrounds: { disable: true, grid: { disable: true } },
6+
docs: { theme },
7+
options: {
8+
storySort: {
9+
order: [
10+
'Docs',
11+
[
12+
'Introduction',
13+
'Features',
14+
'Explore',
15+
[
16+
'Demos',
17+
'Plugins',
18+
'Showcase'
19+
],
20+
'Getting Started',
21+
[
22+
'Installation'
23+
],
24+
'Usage',
25+
[
26+
'Architecture',
27+
'Initialization',
28+
'Configuration',
29+
'State',
30+
'API',
31+
'Declarative DOM APIs',
32+
'Troubleshooting'
33+
],
34+
'Plugins',
35+
[
36+
'Introduction',
37+
'Render UI',
38+
'Store State',
39+
'Detect Interaction',
40+
'Specify Behavior'
41+
]
42+
],
43+
'Demos'
44+
]
45+
}
46+
},
47+
previewTabs: {
48+
'storybook/docs/panel': {
49+
hidden: true
50+
}
51+
},
52+
viewport: { disable: true }
53+
}

‎.storybook/theme.js

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { create } from '@storybook/theming';
2+
3+
export default create({
4+
base: 'dark',
5+
brandTitle: 'DIAGRAM MAKER',
6+
brandUrl: 'https://awslabs.github.io/diagram-maker',
7+
});

‎.travis.yml

+7
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,10 @@ language: node_js
22
node_js:
33
- 12
44
script: npm run release
5+
deploy:
6+
provider: pages
7+
skip_cleanup: true
8+
github_token: $GITHUB_TOKEN
9+
local_dir: docs
10+
on:
11+
branch: master

‎README.md

+12-7
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
# Diagram Maker
22
[![Build Status](https://travis-ci.com/awslabs/diagram-maker.svg?branch=master)](https://travis-ci.com/awslabs/diagram-maker)
3+
[![NPM Version](https://img.shields.io/npm/v/diagram-maker)](https://npmjs.org/package/diagram-maker)
4+
[![License](https://img.shields.io/npm/l/diagram-maker)](https://github.com/awslabs/diagram-maker/blob/master/LICENSE)
5+
[![Bundle Size](https://img.shields.io/bundlephobia/minzip/diagram-maker)](https://bundlephobia.com/result?p=diagram-maker)
6+
[![Downloads](https://img.shields.io/npm/dw/diagram-maker)](https://npmjs.org/package/diagram-maker)
7+
[![Github Stars](https://img.shields.io/github/stars/awslabs/diagram-maker?style=social)](https://github.com/awslabs/diagram-maker)
38

49
[Diagram Maker](https://awslabs.github.io/diagram-maker) is a library to display an interactive editor for any graph-like data.
510

@@ -10,29 +15,29 @@ Following is a screenshot from another one of the consumers of this library, [AW
1015
![IoT Things Graph Screenshot](docs/assets/IoTThingsGraphScreenshot.png)
1116

1217
## Why Diagram Maker?
13-
Diagram Maker is a framework & data format agnostic library that is fully customizable in terms of look & feel as well as behavior. It also exposes a declarative interface to reduce the code required to integrate the library in any application and comes with many interactive features built in. Read more about the features of the library [here](https://awslabs.github.io/diagram-maker/why/features.html).
18+
Diagram Maker is a framework & data format agnostic library that is fully customizable in terms of look & feel as well as behavior. It also exposes a declarative interface to reduce the code required to integrate the library in any application and comes with many interactive features built in. Read more about the features of the library [here](https://awslabs.github.io/diagram-maker/?path=/story/docs-features--page).
1419

1520
## Explore
1621

1722
### Interactive Demo
18-
Check out one of our interactive demos [here](https://awslabs.github.io/diagram-maker/examples/LeftRightRectangular.html) or see the full list of interactive demos [here](https://awslabs.github.io/diagram-maker/explore/demos.html). The code for these demos can be found [here](https://github.com/awslabs/diagram-maker/tree/master/integ).
23+
Check out one of our interactive demos [here](https://awslabs.github.io/diagram-maker/?path=/story/demos-diagram-maker--left-right-rectangular) or see the full list of interactive demos [here](https://awslabs.github.io/diagram-maker/?path=/story/docs-explore-demos--page). The code for these demos can be found [here](https://github.com/awslabs/diagram-maker/tree/master/integ/demos.stories.ts).
1924

2025
### Plugins
21-
Check out the plugins that can be used alongside the library for additional functionality [here](https://awslabs.github.io/diagram-maker/explore/plugins.html).
26+
Check out the plugins that can be used alongside the library for additional functionality [here](https://awslabs.github.io/diagram-maker/?path=/story/docs-explore-plugins--page).
2227

2328
### Showcase
24-
Check out some of the consumers of this library [here](https://awslabs.github.io/diagram-maker/explore/showcase.html).
29+
Check out some of the consumers of this library [here](https://awslabs.github.io/diagram-maker/?path=/story/docs-explore-showcase--page).
2530

2631
## How do I use it?
2732

2833
### Installation
29-
Check out our installation guide [here](https://awslabs.github.io/diagram-maker/getting-started/install.html).
34+
Check out our installation guide [here](https://awslabs.github.io/diagram-maker/?path=/story/docs-getting-started-installation--page).
3035

3136
### Usage
32-
Check out our usage guide [here](https://awslabs.github.io/diagram-maker/usage/initialization.html).
37+
Check out our usage guide [here](https://awslabs.github.io/diagram-maker/?path=/story/docs-usage-initialization--page).
3338

3439
### Architecture
35-
Read more about the architecture of diagram maker [here](https://awslabs.github.io/diagram-maker/usage/architecture.html).
40+
Read more about the architecture of diagram maker [here](https://awslabs.github.io/diagram-maker/?path=/story/docs-usage-architecture--page).
3641

3742
## Docs
3843
Check out our full documentation [here](https://awslabs.github.io/diagram-maker).

‎cypress/support/commands.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
Cypress.Commands.overwrite('visit', (originalVisit, filename, options) => {
2-
const visitUrl = Cypress.config().baseUrl ? filename : 'dist/examples'.concat(filename);
2+
const visitUrl = Cypress.config().baseUrl ? filename : 'docs'.concat(filename);
33
originalVisit(visitUrl, options);
44
});

‎cypress/tests/api.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { convertScaleToMatrix, convertTranslate2dToMatrix } from '../common/util
99

1010
describe('DiagramMaker.API', () => {
1111
beforeEach(() => {
12-
cy.visit('/LeftRightRectangular.html');
12+
cy.visit('/iframe.html?id=demos-diagram-maker--left-right-rectangular&args=&viewMode=story');
1313
});
1414

1515
const toolsType = 'DiagramMaker.Tools';

‎cypress/tests/configurations.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import { convertScaleToMatrix, convertTranslate2dToMatrix } from '../common/util
1010
describe('DiagramMaker.Configurations', () => {
1111
describe('nodeTypeConfiguration', () => {
1212
beforeEach(() => {
13-
cy.visit('/LeftRightRectangular.html');
13+
cy.visit('/iframe.html?id=demos-diagram-maker--left-right-rectangular&args=&viewMode=story');
1414
});
1515

1616
describe('size', () => {
@@ -225,7 +225,7 @@ describe('DiagramMaker.Configurations', () => {
225225

226226
describe('context menu', () => {
227227
beforeEach(() => {
228-
cy.visit('/LeftRightRectangular.html');
228+
cy.visit('/iframe.html?id=demos-diagram-maker--left-right-rectangular&args=&viewMode=story');
229229
});
230230

231231
describe('workspace', () => {
@@ -409,7 +409,7 @@ describe('DiagramMaker.Configurations', () => {
409409

410410
describe('action interceptor', () => {
411411
beforeEach(() => {
412-
cy.visit('/ActionInterceptor.html');
412+
cy.visit('/iframe.html?id=demos-diagram-maker--action-interceptor&args=&viewMode=story');
413413
});
414414

415415
describe('logging an action', () => {

‎cypress/tests/edges.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import {
88
describe('DiagramMaker.Edges', () => {
99
describe('Edges with left right rectangular nodes', () => {
1010
beforeEach(() => {
11-
cy.visit('/LeftRightRectangular.html');
11+
cy.visit('/iframe.html?id=demos-diagram-maker--left-right-rectangular&args=&viewMode=story');
1212
});
1313

1414
describe('edge rendering', () => {
@@ -95,7 +95,7 @@ describe('DiagramMaker.Edges', () => {
9595

9696
describe('Edges with circular boundary nodes', () => {
9797
beforeEach(() => {
98-
cy.visit('/BoundaryCircular.html');
98+
cy.visit('/iframe.html?id=demos-diagram-maker--boundary-circular&args=&viewMode=story');
9999
});
100100

101101
describe('edge rendering', () => {
@@ -195,7 +195,7 @@ describe('DiagramMaker.Edges', () => {
195195

196196
describe('Edges with top bottom rectangular nodes', () => {
197197
beforeEach(() => {
198-
cy.visit('/TopBottomRectangular.html');
198+
cy.visit('/iframe.html?id=demos-diagram-maker--top-bottom-rectangular&args=&viewMode=story');
199199
});
200200

201201
describe('edge rendering', () => {

‎cypress/tests/index.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { convertTranslate2dToMatrix } from '../common/utils';
33

44
describe('DiagramMaker', () => {
55
beforeEach(() => {
6-
cy.visit('/LeftRightRectangular.html');
6+
cy.visit('/iframe.html?id=demos-diagram-maker--left-right-rectangular&args=&viewMode=story');
77
});
88

99
it('successfully loads DiagramMaker', () => {

‎cypress/tests/layout.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { convertTranslate2dToMatrix } from '../common/utils';
33

44
describe('DiagramMaker Layout', () => {
55
beforeEach(() => {
6-
cy.visit('/Layout.html');
6+
cy.visit('/iframe.html?id=demos-diagram-maker--layout&args=&viewMode=story');
77
});
88
const toolsType = 'DiagramMaker.Tools';
99
const workspace = { width: 1200, height: 800 };

‎cypress/tests/nodes.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ describe('DiagramMaker.Nodes', () => {
1010
const nodeRect = { width: 100, height: 50 };
1111

1212
beforeEach(() => {
13-
cy.visit('/LeftRightRectangular.html');
13+
cy.visit('/iframe.html?id=demos-diagram-maker--left-right-rectangular&args=&viewMode=story');
1414
});
1515

1616
describe('node rendering', () => {

‎cypress/tests/panels.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ describe('DiagramMaker.Panels', () => {
1010
const viewContainer = { width: 1200, height: 900 };
1111

1212
beforeEach(() => {
13-
cy.visit('/LeftRightRectangular.html');
13+
cy.visit('/iframe.html?id=demos-diagram-maker--left-right-rectangular&args=&viewMode=story');
1414
});
1515

1616
describe('panel rendering', () => {

‎cypress/tests/plugins.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { convertTranslate2dToMatrix } from '../common/utils';
77

88
describe('DiagramMakerPlugin', () => {
99
beforeEach(() => {
10-
cy.visit('/Plugins.html');
10+
cy.visit('/iframe.html?id=demos-diagram-maker--plugins&args=&viewMode=story');
1111
});
1212

1313
describe('render testPlugin', () => {

‎cypress/tests/workspace.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ describe('DiagramMaker.Workspace', () => {
1111
const viewport = { width: 1200, height: 900 };
1212

1313
beforeEach(() => {
14-
cy.visit('/LeftRightRectangular.html');
14+
cy.visit('/iframe.html?id=demos-diagram-maker--left-right-rectangular&args=&viewMode=story');
1515
});
1616

1717
describe('workspace rendering', () => {

‎docs/.gitignore

-5
This file was deleted.

‎docs/404.html

-25
This file was deleted.

‎docs/Gemfile

-29
This file was deleted.

0 commit comments

Comments
 (0)