Skip to content

Commit 8da38fc

Browse files
octogonzoctogonz
committed
Create a sample project for testing Storybook+Heft
1 parent f86eb3a commit 8da38fc

File tree

17 files changed

+466
-0
lines changed

17 files changed

+466
-0
lines changed

‎build-tests-samples/heft-storybook-react-tutorial/.eslintrc.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
// This is a workaround for https://github.com/eslint/eslint/issues/3458
2+
require('@rushstack/eslint-config/patch/modern-module-resolution');
3+
4+
module.exports = {
5+
extends: ['@rushstack/eslint-config/profile/web-app', '@rushstack/eslint-config/mixins/react'],
6+
parserOptions: { tsconfigRootDir: __dirname }
7+
};

‎build-tests-samples/heft-storybook-react-tutorial/.vscode/launch.json

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
// Use IntelliSense to learn about possible attributes.
3+
// Hover to view descriptions of existing attributes.
4+
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
5+
"version": "0.2.0",
6+
"configurations": [
7+
{
8+
"type": "node",
9+
"request": "launch",
10+
"name": "Debug Jest tests",
11+
"program": "${workspaceFolder}/node_modules/@rushstack/heft/lib/start.js",
12+
"cwd": "${workspaceFolder}",
13+
"args": ["--debug", "test", "--clean"],
14+
"console": "integratedTerminal",
15+
"sourceMaps": true
16+
},
17+
]
18+
}

‎build-tests-samples/heft-storybook-react-tutorial/README.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
# heft-webpack-basic-tutorial
2+
3+
This is a copy of the
4+
[heft-storybook-react-tutorial](https://github.com/microsoft/rushstack-samples/tree/main/heft/heft-storybook-react-tutorial)
5+
tutorial project from the [rushstack-samples](https://github.com/microsoft/rushstack-samples) repo.
6+
7+
The copy here serves as a regression test, by using `"workspace:*"` references to the local projects in this repo.
8+
Please update the copy from time to time to keep it in sync with the official tutorial.

‎build-tests-samples/heft-storybook-react-tutorial/assets/index.html

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
<title>Example Application</title>
7+
</head>
8+
<body>
9+
<noscript>You need to enable JavaScript to run this app.</noscript>
10+
<div id="root"></div>
11+
</body>
12+
</html>

‎build-tests-samples/heft-storybook-react-tutorial/config/heft.json

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
/**
2+
* Defines configuration used by core Heft.
3+
*/
4+
{
5+
"$schema": "https://developer.microsoft.com/json-schemas/heft/heft.schema.json",
6+
7+
"eventActions": [
8+
{
9+
/**
10+
* The kind of built-in operation that should be performed.
11+
* The "deleteGlobs" action deletes files or folders that match the
12+
* specified glob patterns.
13+
*/
14+
"actionKind": "deleteGlobs",
15+
16+
/**
17+
* The stage of the Heft run during which this action should occur. Note that actions specified in heft.json
18+
* occur at the end of the stage of the Heft run.
19+
*/
20+
"heftEvent": "clean",
21+
22+
/**
23+
* A user-defined tag whose purpose is to allow configs to replace/delete handlers that were added by other
24+
* configs.
25+
*/
26+
"actionId": "defaultClean",
27+
28+
/**
29+
* Glob patterns to be deleted. The paths are resolved relative to the project folder.
30+
*/
31+
"globsToDelete": ["dist", "lib", "lib-commonjs", "temp"]
32+
}
33+
],
34+
35+
/**
36+
* The list of Heft plugins to be loaded.
37+
*/
38+
"heftPlugins": [
39+
{
40+
/**
41+
* The path to the plugin package.
42+
*/
43+
"plugin": "@rushstack/heft-webpack4-plugin"
44+
45+
/**
46+
* An optional object that provides additional settings that may be defined by the plugin.
47+
*/
48+
// "options": { }
49+
},
50+
{
51+
"plugin": "@rushstack/heft-jest-plugin"
52+
53+
/**
54+
* An optional object that provides additional settings that may be defined by the plugin.
55+
*/
56+
// "options": { }
57+
}
58+
]
59+
}

‎build-tests-samples/heft-storybook-react-tutorial/config/jest.config.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"extends": "@rushstack/heft-jest-plugin/includes/jest-shared.config.json"
3+
}

‎build-tests-samples/heft-storybook-react-tutorial/config/rush-project.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"projectOutputFolderNames": ["lib", "dist"]
3+
}

‎build-tests-samples/heft-storybook-react-tutorial/config/typescript.json

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
/**
2+
* Configures the TypeScript plugin for Heft. This plugin also manages linting.
3+
*/
4+
{
5+
"$schema": "https://developer.microsoft.com/json-schemas/heft/typescript.schema.json",
6+
7+
/**
8+
* If provided, emit these module kinds in addition to the modules specified in the tsconfig.
9+
* Note that this option only applies to the main tsconfig.json configuration.
10+
*/
11+
"additionalModuleKindsToEmit": [
12+
// {
13+
// /**
14+
// * (Required) Must be one of "commonjs", "amd", "umd", "system", "es2015", "esnext"
15+
// */
16+
// "moduleKind": "amd",
17+
//
18+
// /**
19+
// * (Required) The name of the folder where the output will be written.
20+
// */
21+
// "outFolderName": "lib-amd"
22+
// }
23+
{
24+
"moduleKind": "commonjs",
25+
"outFolderName": "lib-commonjs"
26+
}
27+
],
28+
29+
/**
30+
* Specifies the intermediary folder that tests will use. Because Jest uses the
31+
* Node.js runtime to execute tests, the module format must be CommonJS.
32+
*
33+
* The default value is "lib".
34+
*/
35+
"emitFolderNameForTests": "lib-commonjs",
36+
37+
/**
38+
* If set to "true", the TSlint task will not be invoked.
39+
*/
40+
// "disableTslint": true,
41+
42+
/**
43+
* Set this to change the maximum number of file handles that will be opened concurrently for writing.
44+
* The default is 50.
45+
*/
46+
// "maxWriteParallelism": 50,
47+
48+
/**
49+
* Describes the way files should be statically coped from src to TS output folders
50+
*/
51+
"staticAssetsToCopy": {
52+
/**
53+
* File extensions that should be copied from the src folder to the destination folder(s).
54+
*/
55+
"fileExtensions": [".css"]
56+
57+
/**
58+
* Glob patterns that should be explicitly included.
59+
*/
60+
// "includeGlobs": [
61+
// "some/path/*.js"
62+
// ],
63+
64+
/**
65+
* Glob patterns that should be explicitly excluded. This takes precedence over globs listed
66+
* in "includeGlobs" and files that match the file extensions provided in "fileExtensions".
67+
*/
68+
// "excludeGlobs": [
69+
// "some/path/*.css"
70+
// ]
71+
}
72+
}

‎build-tests-samples/heft-storybook-react-tutorial/package.json

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
{
2+
"name": "heft-storybook-react-tutorial",
3+
"description": "(Copy of sample project) Building this project is a regression test for Heft",
4+
"version": "1.0.0",
5+
"private": true,
6+
"scripts": {
7+
"build": "heft test --clean",
8+
"start": "heft start"
9+
},
10+
"devDependencies": {
11+
"@rushstack/eslint-config": "workspace:*",
12+
"@rushstack/heft": "workspace:*",
13+
"@rushstack/heft-jest-plugin": "workspace:*",
14+
"@rushstack/heft-webpack4-plugin": "workspace:*",
15+
"@types/heft-jest": "1.0.1",
16+
"@types/react": "16.9.45",
17+
"@types/react-dom": "16.9.8",
18+
"@types/webpack-env": "1.13.0",
19+
"css-loader": "~4.2.1",
20+
"eslint": "~7.30.0",
21+
"html-webpack-plugin": "~4.5.0",
22+
"react": "~16.13.1",
23+
"react-dom": "~16.13.1",
24+
"style-loader": "~1.2.1",
25+
"typescript": "~3.9.7",
26+
"webpack": "~4.44.2",
27+
"source-map-loader": "~1.1.2"
28+
}
29+
}

‎build-tests-samples/heft-storybook-react-tutorial/src/ExampleApp.tsx

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import * as React from 'react';
2+
import { ToggleSwitch, IToggleEventArgs } from './ToggleSwitch';
3+
4+
/**
5+
* This React component renders the application page.
6+
*/
7+
export class ExampleApp extends React.Component {
8+
public render(): React.ReactNode {
9+
const appStyle: React.CSSProperties = {
10+
backgroundColor: '#ffffff',
11+
padding: '20px',
12+
borderRadius: '5px',
13+
width: '400px'
14+
};
15+
16+
return (
17+
<div style={{ padding: '20px' }}>
18+
<div style={appStyle}>
19+
<h2>Hello, world!</h2>
20+
Here is an example control:
21+
<ToggleSwitch leftColor={'#800000'} rightColor={'#008000'} onToggle={this._onToggle} />
22+
</div>
23+
</div>
24+
);
25+
}
26+
27+
// React event handlers should be represented as fields instead of methods to ensure the "this" pointer
28+
// is bound correctly. This form does not work with virtual/override inheritance, so use regular methods
29+
// everywhere else.
30+
private _onToggle = (sender: ToggleSwitch, args: IToggleEventArgs): void => {
31+
console.log('Toggle switch changed: ' + args.sliderPosition);
32+
};
33+
}

0 commit comments

Comments
 (0)