generator-madge-capture 1.0.6 → 1.0.7
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 +85 -85
- package/package.json +63 -63
package/README.md
CHANGED
|
@@ -1,85 +1,85 @@
|
|
|
1
|
-
# generator-madge-capture
|
|
2
|
-
A yeoman generator to extract a React component's dependencies and create a storybook project OR add the component to an existing storybook project OR make a standalone dependency folder structure for the component.
|
|
3
|
-
|
|
4
|
-
If the file is determined to be a React component it is renamed with the .jsx extension so it can be run in storybook.
|
|
5
|
-
A file is considered to be a component based on this regex check:
|
|
6
|
-
```
|
|
7
|
-
isReactFile =
|
|
8
|
-
/import.*React/i.test(content) ||
|
|
9
|
-
/<[A-Z]/.test(content) ||
|
|
10
|
-
/return\s*\(/.test(content);
|
|
11
|
-
```
|
|
12
|
-
|
|
13
|
-
The resulting file structure will emulate the dependency tree of the original component:
|
|
14
|
-
```
|
|
15
|
-
|
|
|
16
|
-
+---Components
|
|
17
|
-
| +---Buttons
|
|
18
|
-
| | +---Button
|
|
19
|
-
| | | Button.jsx
|
|
20
|
-
| | | Button.perf.test.js
|
|
21
|
-
| | | Button.snapshot.test.js
|
|
22
|
-
| | | Button.stories.jsx
|
|
23
|
-
| | | Button.unit.test.js
|
|
24
|
-
| | | buttonPropTypes.js
|
|
25
|
-
| | |
|
|
26
|
-
| | +---__snapshots__
|
|
27
|
-
| | Button.snapshot.test.js.snap
|
|
28
|
-
| |
|
|
29
|
-
| +---CardWrapper
|
|
30
|
-
| | CardWrapper.json
|
|
31
|
-
| | CardWrapper.md
|
|
32
|
-
| | CardWrapper.stories.jsx
|
|
33
|
-
| |
|
|
34
|
-
| +---React
|
|
35
|
-
| | +---Components
|
|
36
|
-
| | | +---Layout
|
|
37
|
-
| | | +---Containers
|
|
38
|
-
| | | | CardWrapper.jsx
|
|
39
|
-
| | | |
|
|
40
|
-
| | | +---Error
|
|
41
|
-
| | | | DefaultErrorBoundary.jsx
|
|
42
|
-
| | | |
|
|
43
|
-
| | | +---Messages
|
|
44
|
-
| | | DefaultErrorMessage.jsx
|
|
45
|
-
| | | MessageStyles.js
|
|
46
|
-
| | |
|
|
47
|
-
| | +---Data
|
|
48
|
-
| | customPropTypes.js
|
|
49
|
-
| |
|
|
50
|
-
| +---utils
|
|
51
|
-
| logger.js
|
|
52
|
-
|
|
|
53
|
-
+---Hooks
|
|
54
|
-
| useFocusWhenVisible.js
|
|
55
|
-
| useOnScreen.js
|
|
56
|
-
|
|
|
57
|
-
+---Types
|
|
58
|
-
childNodePropType.js
|
|
59
|
-
|
|
60
|
-
```
|
|
61
|
-
|
|
62
|
-
The instructions for installing Yeoman can be found [here](https://yeoman.io/learning/) but basically it's as simple as
|
|
63
|
-
`npm install -g yo`
|
|
64
|
-
|
|
65
|
-
To run this generator run `yo madge-capture` then answer the prompts:
|
|
66
|
-
|
|
67
|
-
? Enter the location of the component: (C:\code\React\Components\Layout\Containers\CardWrapper.js)
|
|
68
|
-
|
|
69
|
-
You then have 3 options to choose from:
|
|
70
|
-
```
|
|
71
|
-
? How do you want to export this component?
|
|
72
|
-
Create a new Storybook Project ← Complete storybook project for the component
|
|
73
|
-
❯ Add to an existing Storybook Project ← Add component to an existing storybook project
|
|
74
|
-
Create component dependency folder and files only ← Recreate the depencency tree for the component
|
|
75
|
-
```
|
|
76
|
-
You will be prompted for an output folder:
|
|
77
|
-
```
|
|
78
|
-
? Where do you want to save the output files? (C:\Users\UserName\madge-capture)
|
|
79
|
-
```
|
|
80
|
-
If you elected to create a standalone storybook project, you will be asked if you want to create the project:
|
|
81
|
-
```
|
|
82
|
-
? Create sandbox files to run in StoryBoard? (Y/n)
|
|
83
|
-
? Open explorer to show copied files? (y/N) ← Opens your file explorer to view the newly copied component
|
|
84
|
-
```
|
|
85
|
-
The generator then provides instructions on how to run your storybook project if that option was chosen.
|
|
1
|
+
# generator-madge-capture
|
|
2
|
+
A yeoman generator to extract a React component's dependencies and create a storybook project OR add the component to an existing storybook project OR make a standalone dependency folder structure for the component.
|
|
3
|
+
|
|
4
|
+
If the file is determined to be a React component it is renamed with the .jsx extension so it can be run in storybook.
|
|
5
|
+
A file is considered to be a component based on this regex check:
|
|
6
|
+
```
|
|
7
|
+
isReactFile =
|
|
8
|
+
/import.*React/i.test(content) ||
|
|
9
|
+
/<[A-Z]/.test(content) ||
|
|
10
|
+
/return\s*\(/.test(content);
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
The resulting file structure will emulate the dependency tree of the original component:
|
|
14
|
+
```
|
|
15
|
+
|
|
|
16
|
+
+---Components
|
|
17
|
+
| +---Buttons
|
|
18
|
+
| | +---Button
|
|
19
|
+
| | | Button.jsx
|
|
20
|
+
| | | Button.perf.test.js
|
|
21
|
+
| | | Button.snapshot.test.js
|
|
22
|
+
| | | Button.stories.jsx
|
|
23
|
+
| | | Button.unit.test.js
|
|
24
|
+
| | | buttonPropTypes.js
|
|
25
|
+
| | |
|
|
26
|
+
| | +---__snapshots__
|
|
27
|
+
| | Button.snapshot.test.js.snap
|
|
28
|
+
| |
|
|
29
|
+
| +---CardWrapper
|
|
30
|
+
| | CardWrapper.json
|
|
31
|
+
| | CardWrapper.md
|
|
32
|
+
| | CardWrapper.stories.jsx
|
|
33
|
+
| |
|
|
34
|
+
| +---React
|
|
35
|
+
| | +---Components
|
|
36
|
+
| | | +---Layout
|
|
37
|
+
| | | +---Containers
|
|
38
|
+
| | | | CardWrapper.jsx
|
|
39
|
+
| | | |
|
|
40
|
+
| | | +---Error
|
|
41
|
+
| | | | DefaultErrorBoundary.jsx
|
|
42
|
+
| | | |
|
|
43
|
+
| | | +---Messages
|
|
44
|
+
| | | DefaultErrorMessage.jsx
|
|
45
|
+
| | | MessageStyles.js
|
|
46
|
+
| | |
|
|
47
|
+
| | +---Data
|
|
48
|
+
| | customPropTypes.js
|
|
49
|
+
| |
|
|
50
|
+
| +---utils
|
|
51
|
+
| logger.js
|
|
52
|
+
|
|
|
53
|
+
+---Hooks
|
|
54
|
+
| useFocusWhenVisible.js
|
|
55
|
+
| useOnScreen.js
|
|
56
|
+
|
|
|
57
|
+
+---Types
|
|
58
|
+
childNodePropType.js
|
|
59
|
+
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
The instructions for installing Yeoman can be found [here](https://yeoman.io/learning/) but basically it's as simple as
|
|
63
|
+
`npm install -g yo`
|
|
64
|
+
|
|
65
|
+
To run this generator run `yo madge-capture` then answer the prompts:
|
|
66
|
+
|
|
67
|
+
? Enter the location of the component: (C:\code\React\Components\Layout\Containers\CardWrapper.js)
|
|
68
|
+
|
|
69
|
+
You then have 3 options to choose from:
|
|
70
|
+
```
|
|
71
|
+
? How do you want to export this component?
|
|
72
|
+
Create a new Storybook Project ← Complete storybook project for the component
|
|
73
|
+
❯ Add to an existing Storybook Project ← Add component to an existing storybook project
|
|
74
|
+
Create component dependency folder and files only ← Recreate the depencency tree for the component
|
|
75
|
+
```
|
|
76
|
+
You will be prompted for an output folder:
|
|
77
|
+
```
|
|
78
|
+
? Where do you want to save the output files? (C:\Users\UserName\madge-capture)
|
|
79
|
+
```
|
|
80
|
+
If you elected to create a standalone storybook project, you will be asked if you want to create the project:
|
|
81
|
+
```
|
|
82
|
+
? Create sandbox files to run in StoryBoard? (Y/n)
|
|
83
|
+
? Open explorer to show copied files? (y/N) ← Opens your file explorer to view the newly copied component
|
|
84
|
+
```
|
|
85
|
+
The generator then provides instructions on how to run your storybook project if that option was chosen.
|
package/package.json
CHANGED
|
@@ -1,63 +1,63 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "generator-madge-capture",
|
|
3
|
-
"version": "1.0.
|
|
4
|
-
"description": "Capture madge output for a given file",
|
|
5
|
-
"author": {
|
|
6
|
-
"name": "Tony Edwards",
|
|
7
|
-
"url": "https://github.com/vomoir/generator-madge-capture"
|
|
8
|
-
},
|
|
9
|
-
"main": "index.js",
|
|
10
|
-
"type": "module",
|
|
11
|
-
"module": "dist/react-lib.esm.js",
|
|
12
|
-
"jsnext:main": "dist/react-lib.esm.js",
|
|
13
|
-
"scripts": {
|
|
14
|
-
"test": "echo \"Error: no test specified\" && exit 1"
|
|
15
|
-
},
|
|
16
|
-
"keywords": [
|
|
17
|
-
"yeoman-generator",
|
|
18
|
-
"yeoman",
|
|
19
|
-
"generator",
|
|
20
|
-
"inception",
|
|
21
|
-
"init",
|
|
22
|
-
"create",
|
|
23
|
-
"boilerplate"
|
|
24
|
-
],
|
|
25
|
-
"repository": {
|
|
26
|
-
"type": "git",
|
|
27
|
-
"url": "git+https://github.com/vomoir/generator-madge-capture.git"
|
|
28
|
-
},
|
|
29
|
-
"license": "ISC",
|
|
30
|
-
"dependencies": {
|
|
31
|
-
"chalk": "^4.0.0",
|
|
32
|
-
"command-exists": "^1.2.9",
|
|
33
|
-
"yeoman-generator": "^6.0.0",
|
|
34
|
-
"yosay": "^2.0.2",
|
|
35
|
-
"madge": "^8.0.0"
|
|
36
|
-
},
|
|
37
|
-
"eslintConfig": {
|
|
38
|
-
"extends": [
|
|
39
|
-
"xo-space/esnext",
|
|
40
|
-
"prettier"
|
|
41
|
-
],
|
|
42
|
-
"env": {
|
|
43
|
-
"jest": true,
|
|
44
|
-
"node": true
|
|
45
|
-
},
|
|
46
|
-
"rules": {
|
|
47
|
-
"prettier/prettier": [
|
|
48
|
-
"error",
|
|
49
|
-
{
|
|
50
|
-
"singleQuote": true,
|
|
51
|
-
"printWidth": 90
|
|
52
|
-
}
|
|
53
|
-
]
|
|
54
|
-
},
|
|
55
|
-
"plugins": [
|
|
56
|
-
"prettier"
|
|
57
|
-
]
|
|
58
|
-
},
|
|
59
|
-
"bugs": {
|
|
60
|
-
"url": "https://github.com/vomoir/generator-madge-capture/issues"
|
|
61
|
-
},
|
|
62
|
-
"homepage": "https://github.com/vomoir/generator-madge-capture"
|
|
63
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "generator-madge-capture",
|
|
3
|
+
"version": "1.0.7",
|
|
4
|
+
"description": "Capture madge output for a given file",
|
|
5
|
+
"author": {
|
|
6
|
+
"name": "Tony Edwards",
|
|
7
|
+
"url": "https://github.com/vomoir/generator-madge-capture"
|
|
8
|
+
},
|
|
9
|
+
"main": "index.js",
|
|
10
|
+
"type": "module",
|
|
11
|
+
"module": "dist/react-lib.esm.js",
|
|
12
|
+
"jsnext:main": "dist/react-lib.esm.js",
|
|
13
|
+
"scripts": {
|
|
14
|
+
"test": "echo \"Error: no test specified\" && exit 1"
|
|
15
|
+
},
|
|
16
|
+
"keywords": [
|
|
17
|
+
"yeoman-generator",
|
|
18
|
+
"yeoman",
|
|
19
|
+
"generator",
|
|
20
|
+
"inception",
|
|
21
|
+
"init",
|
|
22
|
+
"create",
|
|
23
|
+
"boilerplate"
|
|
24
|
+
],
|
|
25
|
+
"repository": {
|
|
26
|
+
"type": "git",
|
|
27
|
+
"url": "git+https://github.com/vomoir/generator-madge-capture.git"
|
|
28
|
+
},
|
|
29
|
+
"license": "ISC",
|
|
30
|
+
"dependencies": {
|
|
31
|
+
"chalk": "^4.0.0",
|
|
32
|
+
"command-exists": "^1.2.9",
|
|
33
|
+
"yeoman-generator": "^6.0.0",
|
|
34
|
+
"yosay": "^2.0.2",
|
|
35
|
+
"madge": "^8.0.0"
|
|
36
|
+
},
|
|
37
|
+
"eslintConfig": {
|
|
38
|
+
"extends": [
|
|
39
|
+
"xo-space/esnext",
|
|
40
|
+
"prettier"
|
|
41
|
+
],
|
|
42
|
+
"env": {
|
|
43
|
+
"jest": true,
|
|
44
|
+
"node": true
|
|
45
|
+
},
|
|
46
|
+
"rules": {
|
|
47
|
+
"prettier/prettier": [
|
|
48
|
+
"error",
|
|
49
|
+
{
|
|
50
|
+
"singleQuote": true,
|
|
51
|
+
"printWidth": 90
|
|
52
|
+
}
|
|
53
|
+
]
|
|
54
|
+
},
|
|
55
|
+
"plugins": [
|
|
56
|
+
"prettier"
|
|
57
|
+
]
|
|
58
|
+
},
|
|
59
|
+
"bugs": {
|
|
60
|
+
"url": "https://github.com/vomoir/generator-madge-capture/issues"
|
|
61
|
+
},
|
|
62
|
+
"homepage": "https://github.com/vomoir/generator-madge-capture"
|
|
63
|
+
}
|