first commit

Author: davidctj

.editorconfig

@@ -0,0 +1,9 @@
+# top-most EditorConfig file
+root = true
+
+# Unix-style newlines with a newline ending every file
+[*]
+end_of_line = lf
+charset = utf-8
+indent_style = space
+indent_size = 4

.gitignore

@@ -0,0 +1,4 @@
+.idea
+node_modules
+coverage
+npm-debug.log

.npmignore

@@ -0,0 +1,4 @@
+node_modules
+__mocks__
+coverage
+tslint.json

README.md

@@ -0,0 +1,76 @@
+## About
+This project is an example for using Typescript, React to build UI components module, which could be used by other client
+typescript project.
+
+This project will generate TypeDefinitions(*.d.ts) files for the UI components, thus providing code completion and type
+checking.
+
+Libraries which used inside this project:
+* React
+* Typescript
+* Bootstrap@3
+* Storybook
+* Standard-version
+
+### Usage
+* Install dependencies
+```bash
+$ npm install -S bootstrap@3
+$ npm i -S NPM-path/ui-widgets-ts
+```
+
+* Import
+```js
+// CSS Assets
+import "bootstrap/dist/css/bootstrap.min.css";
+
+// JS Assets
+import "jquery";
+import "bootstrap/dist/js/bootstrap.js";
+
+```
+
+* Use components, e.g. Button
+```js
+
+import { Button as MyTestBtn } from  "ui-widgets-ts";
+or
+import { Button as MyTestBtn } from  "ui-widgets-ts/dist/Button";
+
+...
+<MyTestBtn type="danger">My Test Button</MyTestBtn>
+...
+```
+
+### Development
+
+* Open first terminal
+```
+$ npm install
+$ npm run watch
+```
+
+* open second terminal
+§```
+$ npm run build
+$ npm run storybook
+```
+visit: http://localhost:9001/
+
+Folder `src` is all the place we write our components
+
+Folder `storybook` is the place we view/test our components. New component
+should always be added as stories in the [react-storybook](https://storybooks.js.org/).
+
+#### Test
+[JEST](https://facebook.github.io/jest/) framework.
+
+Create files `*.(test|spec).tsx` under `src` folder and then write test code. Code coverage must be fulfilled.
+
+```
+$ npm run test
+```
+
+#### Production build
+* `npm run build`
+This `/dist` folder could be used as the module dependency such as in NPM, or in Github Repo

__mocks__/fileMock.js

@@ -0,0 +1,3 @@
+// __mocks__/fileMock.js
+
+module.exports = 'test-file-stub';

__mocks__/styleMock.js

@@ -0,0 +1,3 @@
+// __mocks__/styleMock.js
+
+module.exports = {};

dist/Button/index.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import * as React from "react";
+export declare type BtnType = "danger" | "info" | "warning" | "success" | "primary";
+export interface IBtnProps {
+    type: BtnType;
+    onClick?: any;
+}
+export declare class Button extends React.Component<IBtnProps, any> {
+    render(): JSX.Element;
+}

dist/Button/index.js

@@ -0,0 +1 @@
+export { Button } from "./Button";

dist/Button/index.js.map

@@ -0,0 +1,82 @@
+{
+    "name": "ui-react-module-typescript-storybook-jest",
+    "version": "1.0.0",
+    "description": "Module by React Typescript",
+    "author": "caitengjiao1987@gmail.com",
+    "keywords": [
+        "Component",
+        "Typescript",
+        "Module",
+        "React",
+        "Storybook",
+        "JEST"
+    ],
+    "main": "./dist/index.js",
+    "typings": "./dist/index.d.ts",
+    "scripts": {
+        "clean": "rimraf dist/*",
+        "copy": "cpx 'src/app/**/*.{png,jpg,css}' dist",
+        "build:ts": "tsc -p src",
+        "test": "jest --notify --coverage --bail",
+        "watch": "tsc -p src -w",
+        "prebuild": "npm run clean && npm run test && npm run copy",
+        "build": "npm run build:ts",
+        "storybook": "start-storybook -p 9001 -c storybook/.config"
+    },
+    "jest": {
+        "globals": {
+            "__TS_CONFIG__": "src/tsconfig.json"
+        },
+        "moduleFileExtensions": [
+            "ts",
+            "tsx",
+            "js"
+        ],
+        "moduleNameMapper": {
+            "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
+            "\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js"
+        },
+        "transform": {
+            ".(ts|tsx)": "<rootDir>/node_modules/ts-jest/preprocessor.js"
+        },
+        "testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx)$",
+        "coverageThreshold": {
+            "global": {
+                "lines": 75
+            }
+        }
+    },
+    "devDependencies": {
+        "@kadira/react-storybook-addon-info": "^3.4.0",
+        "@kadira/storybook": "^2.35.3",
+        "@kadira/storybook-addon-knobs": "^1.7.1",
+        "@types/enzyme": "^2.7.9",
+        "@types/jest": "^19.2.2",
+        "@types/node": "^7.0.13",
+        "@types/react": "^15.0.22",
+        "@types/react-dom": "^0.14.23",
+        "bootstrap": "^3.3.7",
+        "cpx": "^1.5.0",
+        "cross-env": "^4.0.0",
+        "css-loader": "^0.28.0",
+        "enzyme": "^2.8.2",
+        "expose-loader": "^0.7.3",
+        "file-loader": "^0.11.1",
+        "imports-loader": "^0.7.1",
+        "jest": "^19.0.2",
+        "jquery": "^2.2.4",
+        "react": "^15.5.4",
+        "react-dom": "^15.5.4",
+        "react-test-renderer": "^15.5.4",
+        "rimraf": "^2.6.1",
+        "source-map-loader": "^0.2.1",
+        "ts-jest": "^19.0.10",
+        "ts-loader": "^2.0.3",
+        "tslint": "^5.1.0",
+        "tslint-loader": "^3.5.2",
+        "typescript": "^2.3.0",
+        "url-loader": "^0.5.8",
+        "webpack": "^2.4.1",
+        "webpack-merge": "^4.1.0"
+    }
+}

dist/index.d.ts

@@ -0,0 +1,12 @@
+import {shallow} from "enzyme";
+import * as React from "react";
+import {Button} from "./index";
+
+test("Button should work", () => {
+    // Render a button with type
+    const btn = shallow(
+        <Button type="danger">Test</Button>,
+    );
+
+    expect(btn.text()).toEqual("Test");
+});

dist/index.js

@@ -0,0 +1,22 @@
+import * as React from "react";
+
+export type ButtonType = "danger" | "info" | "warning" | "success" | "primary" ;
+
+export interface IBtnProps {
+    type: ButtonType;
+    onClick?: () => {};
+}
+
+/**
+ * Implement Bootstrap button react component by Typescript.
+ * For the client project who used this, just add bootstrap CSS thus will work.
+ */
+export class Button extends React.Component<IBtnProps, any> {
+
+    public render() {
+        const {type, onClick, children} = this.props;
+        return (
+            <button onClick={onClick} type="button" className={`btn btn-${type}`}>{children}</button>
+        );
+    }
+}

dist/index.js.map

@@ -0,0 +1 @@
+export { Button } from "./Button";

package.json

@@ -0,0 +1,28 @@
+{
+    "compilerOptions": {
+        "sourceMap": true,
+        "noImplicitAny": false,
+        "suppressImplicitAnyIndexErrors": true,
+        "removeComments": true,
+        "pretty": false,
+        "module": "commonjs",
+        "target": "es6",
+        "jsx": "react",
+        "strictNullChecks": true,
+        "declaration": true,
+        "experimentalDecorators": true,
+        "emitDecoratorMetadata":true,
+        "lib": [
+            "es2015",
+            "es2016",
+            "es2017",
+            "dom"
+        ],
+        "outDir": "../dist"
+    },
+    "exclude": [
+        "node_modules",
+        "**/*.test.tsx",
+        "**/*.test.ts"
+    ]
+}

src/app/Button/button.test.tsx

@@ -0,0 +1,4 @@
+import '@kadira/storybook/addons';
+
+//  To add the knobs addon
+import '@kadira/storybook-addon-knobs/register'

src/app/Button/index.tsx

@@ -0,0 +1,12 @@
+import { configure, setAddon } from '@kadira/storybook';
+import infoAddon from '@kadira/react-storybook-addon-info';
+
+setAddon(infoAddon);
+
+const req = require.context('../stories', true, /.stories.tsx$/)
+
+function loadStories() {
+    req.keys().forEach((filename) => req(filename))
+}
+
+configure(loadStories, module);

src/app/index.tsx

@@ -0,0 +1,36 @@
+// load the default config generator.
+const genDefaultConfig = require('@kadira/storybook/dist/server/config/defaults/webpack.config.js');
+const path = require('path');
+const webpack = require('webpack');
+const webpackMerge = require('webpack-merge');
+
+/**
+ * Webpack config for Storybook
+ * In reality, most project will use Webpack2, TS, React to bundle the build
+ * So the configuration here is also a mimic/prove for the client projects who use ui-widgets-ts package.
+ */
+module.exports = function (config, env) {
+    const default_config = genDefaultConfig(config, env);
+
+    // Extend it as you need.
+    const final_config = webpackMerge.smart(default_config, {
+        module: {
+            loaders: [
+                {
+                    test: /\.ts(x)?$/,
+                    loaders: ['ts-loader']
+                },
+                { test: require.resolve("jquery"), loader: "expose-loader?$!expose-loader?jQuery" }
+            ]
+        },
+
+        resolve: {
+            // Resolve alias so as to make import { Button } from "ui-widgets" works
+            alias: {
+                "ui-widgets-ts": path.resolve(__dirname, "../../dist")
+            }
+        }
+    });
+
+    return final_config;
+};

src/tsconfig.json

@@ -0,0 +1,22 @@
+import {action, storiesOf} from "@kadira/storybook";
+import {text, withKnobs} from "@kadira/storybook-addon-knobs";
+
+import {Button} from "ui-widgets-ts";
+import * as React from "react";
+
+const stories: any = storiesOf("Bootstrap", module);
+stories.addDecorator(withKnobs);
+
+stories.addWithInfo("Button", "Demo bootstrap buttons", () => (
+    <div>
+        <Button type="danger"
+                onClick={action("clicked")}>
+            {text("Label", "danger Button")}
+        </Button>
+        <Button type="info"
+                onClick={action("clicked")}>
+            {text("Label", "info Button")}
+        </Button>
+    </div>
+));
+

storybook/.config/addons.js

@@ -0,0 +1,6 @@
+// CSS Assets
+import "bootstrap/dist/css/bootstrap.min.css";
+
+// JS Assets
+import "jquery";
+import "bootstrap/dist/js/bootstrap.js";