Config

packages/universal/.storybook/babel.config.js

@@ -0,0 +1,8 @@
+module.exports = api => {
+  api.cache(true);
+
+  return {
+    // presets: ['module:metro-react-native-babel-preset'],
+    plugins: ['react-native-web'],
+  };
+};

packages/universal/.storybook/config.js

@@ -8,7 +8,7 @@ addDecorator(withKnobs);
 setOptions({
   name: 'Components library',
   // url: 'https://necolas.github.io/react-native-web',
-  addonPanelInRight: true,
+  addonPanelInRight: false,
 });
 
 // automatically import all files ending in *.stories.tsx

packages/universal/.storybook/webpack.config.js

@@ -2,18 +2,21 @@ module.exports = ({ config }) => {
   config.module.rules.push({
     test: /\.(ts|tsx)$/,
     use: [
+      {
+        loader: require.resolve('babel-loader'),
+      },
       {
         loader: require.resolve('awesome-typescript-loader'),
       },
       {
         loader: require.resolve('react-docgen-typescript-loader'),
       },
-      // {
-      //   loader: require.resolve('@storybook/addon-storysource/loader'),
-      //   options: {
-      //     parser: 'typescript',
-      //   },
-      // },
+      {
+        loader: require.resolve('@storybook/addon-storysource/loader'),
+        options: {
+          parser: 'typescript',
+        },
+      },
     ],
   });
   config.resolve.alias = {

packages/universal/babel.config.js

@@ -30,6 +30,7 @@ module.exports = api => {
           '**/*.test.ts',
           '**/*.story.tsx',
           '**/*.stories.tsx',
+          '**/*.d.ts',
           '__snapshots__',
           '__tests__',
           '__stories__',

packages/universal/package.json

@@ -7,42 +7,41 @@
     "react-native",
     "react-native-web",
     "storybook",
-    "babel",
     "typescript",
     "eslint",
     "styled-components"
   ],
   "author": "Gab Labelle <[email protected]>",
   "homepage": "https://github.com/gablabelle/",
   "license": "MIT",
-  "main": "lib/universal.js",
+  "types": "lib/index.d.js",
+  "main": "lib/index.js",
   "directories": {
-    "lib": "lib",
-    "test": "__tests__"
+    "lib": "lib"
   },
   "files": [
     "lib"
   ],
   "scripts": {
+    "build": "tsc -b ./src/components/**",
+    "watch": "tsc -b ./src/components/** --watch",
+    "clean": "rimraf ./lib && rimraf ./src/components/**/lib",
     "type-check": "tsc --noEmit",
-    "type-check:watch": "yarn run type-check -- --watch",
-    "build:types": "tsc --noEmit false --emitDeclarationOnly",
-    "build": "lerna run --parallel 'build:es'",
-    "postbuild": "lerna run --parallel 'build:declaration'",
-    "build:declaration": "tsc --project tsconfig.json",
-    "build:es": "BABEL_ENV=build babel universal.ts --root-mode upward --out-dir lib --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments",
+    "type-check:watch": "tsc --noEmit --watch",
     "test": "echo \"Error: run tests from root\" && exit 1",
+    "lint:ts": "eslint 'src/**/*.ts{,x}'",
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook",
-    "lint:ts": "eslint 'src/**/*.ts{,x}'",
     "generate": "plop"
   },
   "dependencies": {
-    "react": "^16.10.2",
-    "react-dom": "^16.10.2",
     "react-native-web": "^0.11.7",
     "styled-components": "^5.0.0-beta.9"
   },
+  "peerDependencies": {
+    "react": "^16.11.0",
+    "react-dom": "^16.11.0"
+  },
   "devDependencies": {
     "@babel/cli": "^7.6.4",
     "@babel/core": "^7.6.4",
@@ -53,15 +52,15 @@
     "@babel/preset-react": "^7.6.3",
     "@babel/preset-typescript": "^7.6.0",
     "@storybook/addon-a11y": "^5.2.4",
-    "@storybook/addon-actions": "^5.2.4",
+    "@storybook/addon-actions": "^5.2.5",
     "@storybook/addon-backgrounds": "^5.2.4",
     "@storybook/addon-knobs": "^5.2.4",
-    "@storybook/addon-links": "^5.2.4",
+    "@storybook/addon-links": "^5.2.5",
     "@storybook/addon-options": "^5.2.4",
     "@storybook/addon-storysource": "^5.2.4",
     "@storybook/addon-viewport": "^5.2.4",
-    "@storybook/addons": "^5.2.3",
-    "@storybook/react": "^5.2.3",
+    "@storybook/addons": "^5.2.5",
+    "@storybook/react": "^5.2.5",
     "@testing-library/jest-dom": "^4.1.2",
     "@testing-library/react": "^9.3.0",
     "@types/enzyme": "^3.10.3",
@@ -72,7 +71,7 @@
     "@types/react-dom": "^16.9.1",
     "@types/react-native": "^0.60.19",
     "@types/storybook__react": "^4.0.2",
-    "@types/styled-components": "^4.1.19",
+    "@types/styled-components": "^4.1.22",
     "@typescript-eslint/eslint-plugin": "^2.4.0",
     "@typescript-eslint/parser": "^2.4.0",
     "awesome-typescript-loader": "^5.2.1",
@@ -93,7 +92,9 @@
     "jest": "^24.9.0",
     "plop": "^2.5.2",
     "prettier": "^1.18.2",
+    "react": "^16.11.0",
     "react-docgen-typescript-loader": "^3.3.0",
+    "react-dom": "^16.11.0",
     "stylelint": "^11.1.1",
     "stylelint-config-prettier": "^6.0.0",
     "stylelint-config-recommended": "^3.0.0",
@@ -103,4 +104,4 @@
     "ts-jest": "^24.1.0",
     "typescript": "^3.6.4"
   }
-}
+}

packages/universal/src/components/Button/index.tsx

@@ -0,0 +1 @@
+export * from './src/Button';

packages/universal/src/components/Button/package.json

@@ -4,11 +4,7 @@
   "license": "MIT",
   "main": "lib/Button.js",
   "types": "lib/Button.d.ts",
-  "scripts": {
-    "build:declaration": "tsc --project tsconfig.json",
-    "build:es": "BABEL_ENV=build babel src --root-mode upward --out-dir lib --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments"
-  },
-  "files": [
-    "lib"
-  ]
-}
+  "publishConfig": {
+    "access": "public"
+  }
+}

packages/universal/src/components/Button/src/Button.stories.tsx

@@ -1,5 +1,12 @@
-// import * as React from 'react';
-// import { storiesOf } from '@storybook/react';
-// import Button from './Button';
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import Button from './Button';
 
-// storiesOf('Button', module).add('Storybook', () => <Button>Submit</Button>);
+export default {
+  component: Button,
+  title: 'Button',
+};
+
+export const text = (): any => (
+  <Button onClick={action('click')}>Hello button</Button>
+);

packages/universal/src/components/Button/src/Button.tsx

@@ -1,15 +1,14 @@
-/* eslint-disable import/no-extraneous-dependencies */
 import React from 'react';
-import styled from 'styled-components/native';
 
-const StyledText = styled.Text`
-  color: red;
-`;
+interface Props {
+  children: string;
+  onClick: () => void;
+}
 
-function Button(): JSX.Element {
+function Button({ children, onClick }: Props): JSX.Element {
   return (
-    <button type="button">
-      <StyledText>Click me</StyledText>
+    <button type="button" onClick={onClick}>
+      {children}
     </button>
   );
 }

packages/universal/src/components/Button/tsconfig.json

@@ -1,10 +1,10 @@
 {
   "extends": "../../../tsconfig.json",
   "compilerOptions": {
-    "baseUrl": ".",
-    "rootDir": "src",
-    "outDir": "lib",
-    "declarationDir": "lib"
+    "baseUrl": "./",
+    "rootDir": "./src",
+    "outDir": "./lib",
+    "declarationDir": "./lib"
   },
-  "include": ["src"]
+  "include": ["./src"]
 }

packages/universal/src/index.ts

@@ -0,0 +1,3 @@
+/* eslint-disable import/prefer-default-export */
+/* INJECT_IMPORT */
+export { default as Button } from './components/Button';

packages/universal/templates/component/package.json.hbs

@@ -5,10 +5,14 @@
   "main": "lib/{{pascalCase name}}.js",
   "types": "lib/{{pascalCase name}}.d.ts",
   "scripts": {
-    "build:declaration": "tsc --project tsconfig.json",
-    "build:es": "BABEL_ENV=build babel src --root-mode upward --out-dir lib --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments"
+    "build:es": "BABEL_ENV=build babel src --root-mode upward --out-dir lib --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments",
+    "build:es:watch": "BABEL_ENV=build babel src --root-mode upward --watch --out-dir lib --source-maps --extensions .ts,.tsx --delete-dir-on-start --no-comments",
+    "build:types": "tsc --project tsconfig.json --noEmit false --emitDeclarationOnly"
   },
   "files": [
     "lib"
-  ]
+  ],
+  "publishConfig": {
+    "access": "public"
+  }
 }