Skip to content

Commit cfda6e3

Browse files
Piotr Oleśpiotr-oles
Piotr OleÅ›
authored and
piotr-oles
committed
feat: 🎸 add storybook and react configuration generator
1 parent fa17972 commit cfda6e3

11 files changed

Lines changed: 244 additions & 35 deletions

File tree

‎generators/app/index.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,5 +12,11 @@ export = class AppGenerator extends Generator {
1212
this.composeWith(require.resolve("../config-test"), {});
1313
this.composeWith(require.resolve("../config-lint"), {});
1414
this.composeWith(require.resolve("../config-webpack"), {});
15+
this.composeWith(require.resolve("../config-react"), {});
16+
this.composeWith(require.resolve("../config-storybook"), {});
17+
}
18+
19+
public install() {
20+
this.yarnInstall();
1521
}
1622
};

‎generators/config-react/index.ts‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import Generator from "yeoman-generator";
2+
import traits from "../../traits";
3+
4+
export = class ConfigReactGenerator extends Generator {
5+
public traits = traits(this);
6+
7+
public configuring() {
8+
this.traits.extendPackageJson({
9+
dependencies: {
10+
react: "^16.8.6",
11+
"react-dom": "^16.8.6"
12+
},
13+
devDependencies: {
14+
"@testing-library/react": "^8.0.1",
15+
"@types/react": "^16.8.20",
16+
"@types/react-dom": "^16.8.4"
17+
},
18+
jest: {
19+
testEnvironment: "jsdom",
20+
setupFilesAfterEnv: ["@testing-library/react/cleanup-after-each"]
21+
}
22+
});
23+
}
24+
25+
public install() {
26+
this.yarnInstall();
27+
}
28+
};

‎generators/config-storybook/index.ts‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import Generator from "yeoman-generator";
2+
import traits from "../../traits";
3+
4+
export = class ConfigStorybookGenerator extends Generator {
5+
public traits = traits(this);
6+
7+
public configuring() {
8+
this.traits.extendPackageJson({
9+
scripts: {
10+
storybook: "start-storybook",
11+
"storybook:build": "build-storybook -o storybook_dist"
12+
},
13+
devDependencies: {
14+
"@babel/core": "^7.0.0",
15+
"@storybook/react": "^5.0.5",
16+
"@types/storybook__react": "^4.0.0",
17+
"babel-loader": "^8.0.0"
18+
}
19+
});
20+
this.traits.addReadmeBadges(
21+
"[![uses Storybook](https://cdn.jsdelivr.net/gh/storybookjs/brand@master/badge/badge-storybook.svg)](https://storybook.js.org/)"
22+
);
23+
}
24+
25+
public writing() {
26+
[
27+
".storybook/config.ts",
28+
".storybook/webpack.config.js",
29+
"src/index.story.tsx"
30+
].forEach(file => {
31+
this.fs.copy(this.templatePath(file), this.destinationPath(file));
32+
});
33+
}
34+
35+
public install() {
36+
this.yarnInstall();
37+
}
38+
};

‎generators/config-storybook/templates/.storybook/config.ts‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { addParameters, configure } from '@storybook/react';
2+
3+
const req = require.context('../src', true, /\.story\.tsx$/);
4+
5+
/**
6+
* Configure parameters
7+
*/
8+
addParameters({
9+
options: {
10+
addonPanelInRight: true
11+
}
12+
});
13+
14+
/**
15+
* Load stories
16+
*/
17+
function loadStories() {
18+
req.keys().forEach(req);
19+
}
20+
21+
configure(loadStories, module);

‎generators/config-storybook/templates/.storybook/webpack.config.js‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
const HtmlPlugin = require('html-webpack-plugin');
2+
3+
module.exports = ({ config: storybookConfig, mode }) => {
4+
const appConfig = require('../webpack.config')({}, { mode });
5+
const storybookResolve = storybookConfig.resolve || {};
6+
const storybookModule = storybookConfig.module || {};
7+
8+
return {
9+
...storybookConfig,
10+
context: appConfig.context,
11+
devtool: appConfig.devtool,
12+
output: appConfig.output,
13+
resolve: {
14+
...storybookResolve,
15+
extensions: [...appConfig.resolve.extensions, ...(storybookResolve.extensions || [])],
16+
plugins: [...appConfig.resolve.plugins, ...(storybookResolve.plugins || [])]
17+
},
18+
plugins: [
19+
...appConfig.plugins.filter((plugin) => !(plugin instanceof HtmlPlugin)),
20+
...(storybookConfig.plugins || [])
21+
],
22+
module: {
23+
...appConfig.module,
24+
rules: [
25+
...appConfig.module.rules
26+
// there is a conflict in svg loading rule
27+
//...(storybookModule.rules || [])
28+
]
29+
}
30+
};
31+
};

‎generators/config-storybook/templates/src/index.story.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { storiesOf } from "@storybook/react";
2+
import React from "react";
3+
4+
const HelloWorld = () => <div>Hello world!</div>;
5+
6+
storiesOf("HelloWorld", module).add("with text", () => <HelloWorld />);

‎generators/config/index.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,10 @@ export = class ConfigGenerator extends Generator {
2121
name: `Lint setup ${chalk.dim("(tslint + prettier + commitlint)")}`,
2222
value: "lint"
2323
},
24+
{
25+
name: "Storybook setup",
26+
value: "storybook"
27+
},
2428
{
2529
name: `Rollup setup`,
2630
value: "rollup"
@@ -40,6 +44,10 @@ export = class ConfigGenerator extends Generator {
4044
{
4145
name: `Ignore files ${chalk.dim("(.gitignore)")}`,
4246
value: "ignore"
47+
},
48+
{
49+
name: `React setup ${chalk.dim("(+ @testing-library/react)")}`,
50+
value: "react"
4351
}
4452
]
4553
}

‎generators/library/index.ts‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,33 @@ export = class LibraryGenerator extends Generator {
2222
this.composeWith(require.resolve("../config-release"), {});
2323
}
2424

25+
public async prompting() {
26+
const { usesReact } = await this.prompt([
27+
{
28+
type: "expand",
29+
name: "usesReact",
30+
message: "Will this library use React?",
31+
default: "n",
32+
choices: [
33+
{
34+
key: "y",
35+
name: "Yes",
36+
value: true
37+
},
38+
{
39+
key: "n",
40+
name: "No",
41+
value: false
42+
}
43+
]
44+
}
45+
]);
46+
47+
if (usesReact) {
48+
this.composeWith(require.resolve("../config-react"), {});
49+
}
50+
}
51+
2552
public install() {
2653
this.yarnInstall();
2754
}

‎tests/config-react.spec.ts‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import assert from "yeoman-assert";
2+
import helpers from "yeoman-test";
3+
4+
describe("yo codibly-ts:config-react", () => {
5+
beforeAll(async () => {
6+
await helpers.run(require("../generators/config-react"), {
7+
resolved: require.resolve("../generators/config-react/index.js"),
8+
namespace: "codibly-ts:config-react"
9+
});
10+
});
11+
12+
it("generates required files", () => {
13+
assert.file(["package.json"]);
14+
});
15+
16+
it("extends package.json", () => {
17+
assert.jsonFileContent(`package.json`, {
18+
dependencies: {
19+
react: "^16.8.6",
20+
"react-dom": "^16.8.6"
21+
},
22+
devDependencies: {
23+
"@testing-library/react": "^8.0.1",
24+
"@types/react": "^16.8.20",
25+
"@types/react-dom": "^16.8.4"
26+
},
27+
jest: {
28+
testEnvironment: "jsdom",
29+
setupFilesAfterEnv: ["@testing-library/react/cleanup-after-each"]
30+
}
31+
});
32+
});
33+
});

‎tests/config-storybook.spec.ts‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import assert from "yeoman-assert";
2+
import helpers from "yeoman-test";
3+
4+
describe("yo codibly-ts:config-storybook", () => {
5+
beforeAll(async () => {
6+
await helpers.run(require("../generators/config-storybook"), {
7+
resolved: require.resolve("../generators/config-storybook/index.js"),
8+
namespace: "codibly-ts:config-storybook"
9+
});
10+
});
11+
12+
it("generates required files", () => {
13+
assert.file([
14+
"package.json",
15+
"README.md",
16+
".storybook/config.ts",
17+
".storybook/webpack.config.js",
18+
"src/index.story.tsx"
19+
]);
20+
});
21+
22+
it("extends package.json", () => {
23+
assert.jsonFileContent("package.json", {
24+
scripts: {
25+
storybook: "start-storybook",
26+
"storybook:build": "build-storybook -o storybook_dist"
27+
},
28+
devDependencies: {
29+
"@babel/core": "^7.0.0",
30+
"@storybook/react": "^5.0.5",
31+
"@types/storybook__react": "^4.0.0",
32+
"babel-loader": "^8.0.0"
33+
}
34+
});
35+
});
36+
37+
it("adds badges to the README.md", () => {
38+
assert.fileContent(
39+
"README.md",
40+
"[![uses Storybook](https://cdn.jsdelivr.net/gh/storybookjs/brand@master/badge/badge-storybook.svg)](https://storybook.js.org/)"
41+
);
42+
});
43+
});

0 commit comments

Comments
 (0)