feat(init): Add UI Library to init script

src/commands/init/command.ts

@@ -70,6 +70,10 @@ function installDependencies(appType: string, appFolderName: string): void {
       dependencies: ["react", "react-dom", "tslib"],
       devDependencies: ["@types/jest", "@types/react", "@types/react-dom", "exos-scripts", "typescript"],
     },
+    [AppTypes.UILibrary]: {
+      dependencies: ["react", "react-dom", "tslib"],
+      devDependencies: ["@storybook/addon-a11y", "@storybook/addon-actions", "@storybook/addon-knobs", "@storybook/react", "exos-scripts", "typescript"],
+    },
   };
 
   console.log("Installing dependencies..");

src/commands/init/templates/UILibrary/.editorconfig

@@ -0,0 +1,13 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+# Unix-style newlines with a newline ending every file
+[*]
+end_of_line = lf
+insert_final_newline = true
+charset = utf-8
+indent_style = space
+indent_size = 2
+max_line_length = 160

src/commands/init/templates/UILibrary/.storybook/_global.css

@@ -0,0 +1,3 @@
+#story-root {
+  padding: 20px 40px 40px;
+}

src/commands/init/templates/UILibrary/.storybook/config.js

@@ -0,0 +1,8 @@
+import { addDecorator } from "@storybook/react";
+import { withKnobs } from "@storybook/addon-knobs";
+import { withA11y } from "@storybook/addon-a11y";
+
+import "./_global.css";
+
+addDecorator(withKnobs);
+addDecorator(withA11y);

src/commands/init/templates/UILibrary/.storybook/main.js

@@ -0,0 +1,13 @@
+const path = require("path");
+const exosWebpack = require("exos-scripts/lib/webpack/webpack.config.js").default;
+
+module.exports = {
+  stories: ["../src/**/*.stories.tsx"],
+  addons: ["@storybook/addon-actions", "@storybook/addon-knobs", "@storybook/addon-a11y"],
+  webpackFinal: async config => {
+    config.resolve = exosWebpack.resolve;
+    config.module.rules = exosWebpack.module.rules;
+
+    return config;
+  }
+};

src/commands/init/templates/UILibrary/.storybook/middleware.js

@@ -0,0 +1,8 @@
+const express = require("express");
+const path = require("path");
+const NODE_MODULES_PATH = path.resolve(__dirname, "../node_modules");
+const ROOT_PATH = path.resolve(__dirname, "../../../");
+
+module.exports = router => {
+  // Modify the express router here
+};

src/commands/init/templates/UILibrary/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) Year AuthorName
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

src/commands/init/templates/UILibrary/README.md

@@ -0,0 +1,3 @@
+## EntityName
+
+TBC

src/commands/init/templates/UILibrary/gitignore

@@ -0,0 +1,87 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+lib
+dist
+tmp
+out-tsc
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# IDEs and editors
+.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode
+
+# misc
+.sass-cache
+connect.lock
+typings
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# next.js build output
+.next
+
+# Lerna
+lerna-debug.log
+
+# System Files
+.DS_Store
+Thumbs.db

src/commands/init/templates/UILibrary/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "entityName",
+  "version": "0.0.1",
+  "description": "TBC",
+  "types": "./dist/types/index.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/owner/entityName"
+  },
+  "keywords": [],
+  "author": "AuthorName",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/owner/entityName/issues"
+  },
+  "homepage": "https://github.com/owner/entityName#readme",
+  "scripts": {
+    "lint": "exos-scripts lint",
+    "stylelint": "exos-scripts stylelint",
+    "test": "exos-scripts test",
+    "start": "start-storybook -p 9001 -c .storybook",
+    "build": "exos-scripts build"
+  },
+  "dependencies": {},
+  "devDependencies": {}
+}

src/commands/init/templates/UILibrary/src/Button/Button.scss

@@ -0,0 +1,8 @@
+.button {
+  font-weight: bold;
+
+  &:disabled {
+    font-weight: normal;
+    color: gray;
+  }
+}

src/commands/init/templates/UILibrary/src/Button/Button.stories.templatex

@@ -0,0 +1,22 @@
+import React from "react";
+import { action } from "@storybook/addon-actions";
+import { boolean, text } from "@storybook/addon-knobs";
+
+import Button from "./Button";
+
+export default {
+  component: Button,
+  title: "Button",
+};
+
+export const basic = (): React.ReactNode => {
+  const disabled = boolean("Disabled", false);
+  const content = text("Content", "Hello button 😎");
+  const onClick = action("clicked");
+
+  return (
+    <Button disabled={disabled} onClick={onClick}>
+      {content}
+    </Button>
+  );
+};

src/commands/init/templates/UILibrary/src/Button/Button.templatex

@@ -0,0 +1,16 @@
+import React from "react";
+import type { Props } from './types';
+import styles from "./Button.scss";
+
+export default class Buttton extends React.PureComponent<Props> {
+  static defaultProps: Partial<Props> = {
+    children: "This is a button",
+    disabled: false,
+    onClick: () => {},
+  }
+
+  render(): React.ReactNode {
+    const { children, disabled, onClick } = this.props;
+    return <button disabled={disabled} className={styles.button} onClick={onClick}>{children}</button>;
+  }
+}

src/commands/init/templates/UILibrary/src/Button/types.template

@@ -0,0 +1,8 @@
+export interface Props {
+  /** Content to display inside the button */
+  children?: React.ReactNode;
+  /** True if the component is disabled. False otherwise */
+  disabled?: boolean;
+  /** Action executed when users click the button */
+  onClick?: () => unknown;
+}

src/commands/init/templates/UILibrary/src/global.d.template

@@ -0,0 +1,26 @@
+interface CssClasses {
+  [className: string]: string;
+}
+
+declare module "*.css" {
+  const content: CssClasses;
+  export default content;
+}
+
+declare module "*.scss" {
+  const content: CssClasses;
+  export default content;
+}
+
+declare module "*.svg" {
+  import React = require("react");
+  const src: string;
+
+  // Default export is a string
+  // This way, you can set SVGs as sources (for <img src={svgValue} />).
+  export default src;
+
+  // Named export is a React component
+  // This way, you can add SVGs to the JSX (<MySVG />).
+  export const ReactComponent: React.SFC<React.SVGProps<SVGSVGElement>>;
+}

src/commands/init/templates/UILibrary/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "jsx": "react",
+    "rootDir": "./src",
+    "outDir": "./dist",
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "target": "es2015",
+    "sourceMap": true,
+    "declaration": true,
+    "declarationDir": "dist/types",
+    "esModuleInterop": true,
+    "importHelpers": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "**/*/*.test.ts", "**/*/*.spec.ts"]
+}

src/commands/init/types.ts

@@ -1,6 +1,7 @@
 export enum AppTypes {
   ReactApp = "ReactApp",
   Library = "Library",
+  UILibrary = "UILibrary",
 }
 
 export interface CommandArguments {