feat(build): adds SFC, prettierrc, styleguidist wrapper, styled-compo…

…nents

.prettierrc

@@ -0,0 +1,3 @@
+{
+  "singleQuote": true
+}

README.md

@@ -26,10 +26,10 @@ yarn storybook
 
 ## Generating new component skeletons
 
-### JSX
+### JSX (SFC)
 
 ```
-yarn generate-jsx
+yarn generate-sfc-jsx
 ```
 
 ### TSX

package.json

@@ -13,7 +13,8 @@
     "commitmsg": "commitlint -e $GIT_PARAMS",
     "styleguidist": "styleguidist server",
     "generate-jsx": "ft jsx-component ./packages",
-    "generate-tsx": "ft tsx-component ./packages"
+    "generate-tsx": "ft tsx-component ./packages",
+    "postinstall": "yarn build"
   },
   "dependencies": {
     "@babel/cli": "7.1.2",
@@ -35,18 +36,19 @@
     "@babel/preset-stage-1": "7.0.0",
     "@babel/preset-typescript": "7.1.0",
     "@babel/runtime": "7.1.2",
+    "@rebass/components": "^4.0.0-1",
     "babel-core": "npm:@babel/core",
     "babel-loader": "8.0.2",
     "babel-plugin-react-docgen": "2.0.0",
     "babel-plugin-react-docgen-typescript": "1.0.1",
     "babel-plugin-styled-components": "1.7.1",
     "babel-plugin-transform-es2015-modules-simple-commonjs": "0.3.0",
     "lerna": "3.4.3",
+    "prop-types": "^15.6.2",
     "react-docgen-typescript": "1.10.0",
     "react-docgen-typescript-loader": "3.0.0",
-    "react-docgen-typescript-webpack-plugin": "1.1.0"
-  },
-  "devDependencies": {
+    "react-docgen-typescript-webpack-plugin": "1.1.0",
+    "styled-system": "^3.1.11",
     "@commitlint/cli": "7.1.2",
     "@commitlint/config-conventional": "7.1.2",
     "@material-ui/core": "3.0.3",
@@ -61,12 +63,12 @@
     "@types/react": "16.4.14",
     "folder-template": "0.1.4",
     "husky": "1.0.0-rc.14",
-    "react": "16.5.1",
-    "react-dom": "16.5.1",
-    "styled-components": "3.4.6",
-    "webpack": "4.19.0",
-    "react-styleguidist": "7.3.11",
-    "typescript": "3.1.3"
+    "react": "^16.7.0",
+    "react-dom": "^16.7.0",
+    "react-styleguidist": "^8.0.6",
+    "styled-components": "^4.1.3",
+    "typescript": "3.1.3",
+    "webpack": "4.19.0"
   },
   "commitlint": {
     "extends": [

packages/Hello/Readme.md

@@ -0,0 +1,3 @@
+# Hello
+
+`npm install @coinsquare/hello-component`

packages/Hello/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@coinsquare/Hello-component",
+  "name": "@coinsquare/hello-component",
   "version": "0.0.0",
   "description": "Hello component",
   "scripts": {
@@ -14,11 +14,15 @@
   "author": "",
   "license": "ISC",
   "peerDependencies": {
-    "react": "^16.5.1",
-    "styled-components": "^3.4.6"
+    "react": "^16.7.0",
+    "react-dom": "^16.7.0",
+    "styled-components": "^4.1.3",
+    "styled-system": "^3.1.3"
   },
   "dependencies": {
-    "styled-system": "^3.1.3",
+
+  },
+  "devDependencies": {
     "@coinsquare/build": "^0.0.0",
     "@coinsquare/storybook": "^0.0.0"
   }

packages/Hello/src/Hello.jsx

@@ -1,19 +1,16 @@
-import React from "react";
-import PropTypes from "prop-types";
+import React from 'react';
 
-export default class Hello extends React.PureComponent {
-  static propTypes = {
-    /** Sample prop that you can change */
-    dummyProp: PropTypes.string
-  };
+import PropTypes from 'prop-types';
 
-  static defaultProps = {
-    dummyProp: 'My dummy prop default value'
-  };
+export const Hello = props => (
+  <p>Hello Component {props.dummyProp}</p>
+);
 
-  render() {
-    return (
-      <p>Hello Component - {this.props.dummyProp}</p>
-    );
-  }
-}
+Hello.propTypes = {
+  /** Sample prop that you can change */
+  dummyProp: PropTypes.string
+};
+
+Hello.defaultProps = {
+  dummyProp: 'My dummy prop default value'
+};

packages/Hello/src/Hello.story.jsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { text } from '@storybook/addon-knobs';
 import { withInfo } from '@storybook/addon-info';
 
-import Hello from './Hello';
+import { Hello } from './Hello';
 
 import { createStorySetWithDefault, getKnob, getStoryProps } from '@coinsquare/storybook';
 

packages/Hello/src/Hello.test.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
 
-import Hello from './Hello';
+import { Hello } from './Hello';
 
 const createComponent = newProps => {
   const component = renderer.create(

packages/Hello/src/index.js

@@ -1,2 +1 @@
-export { default } from "./Hello";
-export { default as Hello } from "./Hello";
+export { Hello } from "./Hello";

packages/World/package.json

@@ -17,9 +17,15 @@
   "author": "",
   "license": "ISC",
   "peerDependencies": {
-    "react": "^16.5.1"
+    "react": "^16.7.0",
+    "react-dom": "^16.7.0",
+    "styled-components": "^4.1.3",
+    "styled-system": "^3.1.3"
   },
   "dependencies": {
+
+  },
+  "devDependencies": {
     "@coinsquare/build": "^0.0.0",
     "@coinsquare/storybook": "^0.0.0"
   }

packages/World/src/World.tsx

@@ -1,17 +1,14 @@
-import * as React from "react";
+import * as React from 'react';
 
 interface WorldProps {
   /** Sample prop description */
   dummyProp?: string;
 }
 
-const World: React.SFC<WorldProps> = props => (
+export const World: React.SFC<WorldProps> = props => (
   <p>World Component - {props.dummyProp}</p>
 );
 
 World.defaultProps = {
-  /* Sample prop that you can change */
   dummyProp: 'My dummy prop default value'
-}
-
-export default World;
+};

packages/World/src/index.ts

@@ -1,2 +1 @@
-export { default } from './World';
-export { default as World } from './World';
+export { World } from "./World";

packages/_build/babel.config.js

@@ -4,38 +4,38 @@ module.exports = function(api) {
     api.cache(false);
   }
   const presets = [
-    [
-      "@babel/preset-env",
-      {
-        modules: false,
-        targets: { browsers: ["last 2 versions", "ie >= 11"] },
-        include: ["es6.object.assign", "es6.promise", "es6.object.keys"],
-        useBuiltIns: "usage"
-      }
-    ],
-    "@babel/preset-react",
-    "@babel/preset-typescript"
+    // [
+    //   '@babel/preset-env',
+    //   {
+    //     modules: false,
+    //     targets: { browsers: ['last 2 versions', 'ie >= 11'] },
+    //     include: ['es6.object.assign', 'es6.promise', 'es6.object.keys'],
+    //     useBuiltIns: 'usage'
+    //   }
+    // ],
+    '@babel/preset-react',
+    '@babel/preset-typescript'
   ];
   const plugins = [
-    "@babel/plugin-proposal-export-default-from",
-    "@babel/plugin-proposal-logical-assignment-operators",
-    ["@babel/plugin-proposal-optional-chaining", { loose: false }],
-    ["@babel/plugin-proposal-pipeline-operator", { proposal: "minimal" }],
-    ["@babel/plugin-proposal-nullish-coalescing-operator", { loose: false }],
-    "@babel/plugin-proposal-do-expressions",
-    "babel-plugin-styled-components",
+    '@babel/plugin-proposal-export-default-from',
+    '@babel/plugin-proposal-logical-assignment-operators',
+    ['@babel/plugin-proposal-optional-chaining', { loose: false }],
+    ['@babel/plugin-proposal-pipeline-operator', { proposal: 'minimal' }],
+    ['@babel/plugin-proposal-nullish-coalescing-operator', { loose: false }],
+    '@babel/plugin-proposal-do-expressions',
+    'babel-plugin-styled-components',
     // "@babel/transform-runtime",
-    "@babel/plugin-proposal-object-rest-spread",
-    "@babel/plugin-transform-react-jsx-source",
-    "@babel/plugin-proposal-class-properties",
-    "@babel/plugin-transform-modules-commonjs",
-    "babel-plugin-react-docgen",
+    '@babel/plugin-proposal-object-rest-spread',
+    '@babel/plugin-transform-react-jsx-source',
+    '@babel/plugin-proposal-class-properties',
+    // "@babel/plugin-transform-modules-commonjs",
+    'babel-plugin-react-docgen',
     [
-      "babel-plugin-react-docgen-typescript",
+      'babel-plugin-react-docgen-typescript',
       {
-        docgenCollectionName: "STORYBOOK_REACT_CLASSES",
+        docgenCollectionName: 'STORYBOOK_REACT_CLASSES',
         // include: ".tsx$",
-        exclude: "story\\.tsx$"
+        exclude: 'story\\.tsx$'
       }
     ]
   ];
@@ -45,10 +45,10 @@ module.exports = function(api) {
     plugins,
     // extensions: [".ts", ".tsx", ".js", ".jsx"],
     ignore: [
-      "src/*.test.js",
-      "src/*.story.jsx",
-      "src/*.test.ts",
-      "src/*.story.tsx"
+      'src/*.test.js',
+      'src/*.story.jsx',
+      'src/*.test.ts',
+      'src/*.story.tsx'
     ]
   };
 };

styleguide.config.js

@@ -1,12 +1,18 @@
+const path = require('path');
+
 module.exports = {
-  title: "Coinsquare Styleguide",
-  components: "packages/**/src/!(*.story).*sx"
+  title: 'Coinsquare Styleguide',
+  components: 'packages/**/src/!(*.story).*sx',
   // resolver: require("react-docgen").resolver.findAllComponentDefinitions,
   // propsParser: (filePath, source, resolver, handlers) => {
   //   return filePath.indexOf(".tsx") > -1
   //     ? require("react-docgen-typescript")
   //         .withDefaultConfig()
   //         .parse(filePath, source, resolver, handlers)
   //     : require("react-docgen").parse(source, resolver, handlers);
-  // }
+  // },
+  styleguideComponents: {
+    Wrapper: path.join(__dirname, 'styleguide.wrapper.jsx')
+  },
+  assetsDir: path.join(__dirname, 'assets')
 };

styleguide.wrapper.jsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import { ThemeProvider } from 'styled-components'
+import { theme } from './packages/Theme'
+
+const Wrapper = props => (
+  <ThemeProvider theme={theme}>
+    {props.children}
+  </ThemeProvider>
+)
+
+export default Wrapper;

templates/jsx-component/{{pascalcase name}}/package.json.tpl

@@ -14,11 +14,15 @@
   "author": "",
   "license": "ISC",
   "peerDependencies": {
-    "react": "^16.5.1",
-    "styled-components": "^3.4.6"
+    "react": "^16.7.0",
+    "react-dom": "^16.7.0",
+    "styled-components": "^4.1.3",
+    "styled-system": "^3.1.3"
   },
   "dependencies": {
-    "styled-system": "^3.1.3",
+
+  },
+  "devDependencies": {
     "@coinsquare/build": "^0.0.0",
     "@coinsquare/storybook": "^0.0.0"
   }

templates/jsx-component/{{pascalcase name}}/src/index.js.tpl

@@ -1,2 +1 @@
-export { default } from "./{{pascalcase name}}";
-export { default as {{pascalcase name}} } from "./{{pascalcase name}}";
+export { {{pascalcase name}} } from "./{{pascalcase name}}";

templates/jsx-component/{{pascalcase name}}/src/{{pascalcase name}}.jsx.tpl

@@ -1,19 +1,16 @@
-import React from "react";
-import PropTypes from "prop-types";
+import React from 'react';
 
-export default class {{pascalcase name}} extends React.PureComponent {
-  static propTypes = {
-    /** Sample prop that you can change */
-    dummyProp: PropTypes.string
-  };
+import PropTypes from 'prop-types';
 
-  static defaultProps = {
-    dummyProp: 'My dummy prop default value'
-  };
+export const {{pascalcase name}} = props => (
+  <p>{{pascalcase name}} Component {props.dummyProp}</p>
+);
 
-  render() {
-    return (
-      <p>{{pascalcase name}} Component - {this.props.dummyProp}</p>
-    );
-  }
-}
+{{pascalcase name}}.propTypes = {
+  /** Sample prop that you can change */
+  dummyProp: PropTypes.string
+};
+
+{{pascalcase name}}.defaultProps = {
+  dummyProp: 'My dummy prop default value'
+};

templates/jsx-component/{{pascalcase name}}/src/{{pascalcase name}}.story.jsx.tpl

@@ -3,7 +3,7 @@ import React from 'react';
 import { text } from '@storybook/addon-knobs';
 import { withInfo } from '@storybook/addon-info';
 
-import {{pascalcase name}} from './{{pascalcase name}}';
+import { {{pascalcase name}} } from './{{pascalcase name}}';
 
 import { createStorySetWithDefault, getKnob, getStoryProps } from '@coinsquare/storybook';
 

templates/jsx-component/{{pascalcase name}}/src/{{pascalcase name}}.test.js.tpl

@@ -1,7 +1,7 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
 
-import {{pascalcase name}} from './{{pascalcase name}}';
+import { {{pascalcase name}} } from './{{pascalcase name}}';
 
 const createComponent = newProps => {
   const component = renderer.create(