feat(build): new import syntax

imports are now granular only, protecting users from importing the whole lib

imports default to esm,
`import Button from 'leaf-ui/Button/web';`

imports for commonjs are exposed through the /cjs/ namespace,
`import Button from 'leaf-ui/cjs/Button/web';`

.eslintignore

@@ -2,7 +2,7 @@
 .vscode
 .expo
 es
-lib
+cjs
 docs
 coverage
 node_modules

.gitignore

@@ -2,7 +2,7 @@
 .vscode
 .expo
 es
-lib
+cjs
 coverage
 node_modules
 docs

.stylelintignore

@@ -2,7 +2,7 @@
 .vscode
 .expo
 es
-lib
+cjs
 docs
 coverage
 node_modules

.travis.yml

@@ -8,7 +8,7 @@ before_script:
   - npm prune
 script:
   - npm run lint
-  # - npm run test
   - npm run build
+  - npm run build:prepare
 after_success:
   - npm run semantic-release

App.js

@@ -1,7 +1,7 @@
 import Expo from 'expo';
 import React from 'react';
 import { View } from 'react-native';
-import StorybookUI from './storybook/native';
+import StorybookUI from './storybook/native/config';
 
 // eslint-disable-next-line react/prefer-stateless-function
 class AwakeInDevApp extends React.Component {

README.md

@@ -1,7 +1,7 @@
 <div align="center">
 
 ## 🍃 Leaf-UI
-#### A react component library built using styled-components
+#### A react component library for web, native and amp built using styled-components
 #### [WARNING: This is a work in progress, API is subject to change]
 
 </div>
@@ -20,7 +20,7 @@ Wrap your App component with ThemeProvider and pass it the leaf-ui theme (or ove
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { ThemeProvider } from 'styled-components';
-import leafUiTheme, { injectBaseStyles } from 'leaf-ui/es/theme';
+import leafUiTheme, { injectBaseStyles } from 'leaf-ui/theme';
 import App from './App';
 
 injectBaseStyles(leafUiTheme);
@@ -37,7 +37,10 @@ Import and use the components in your App.js
 ```js
 // App.js
 import React from 'react';
-import Button from 'leaf-ui/es/Button/web';
+import Button from 'leaf-ui/Button/web';
+
+// for commonjs use,
+// import Button from 'leaf-ui/cjs/Button/web';
 
 const App = () => (
   <Button>
@@ -48,6 +51,12 @@ const App = () => (
 export default App;
 ```
 
+Supported Platforms
+* /web
+* /native
+* /amp
+
+
 # Contribute
 
 Web Components

package.json

@@ -2,34 +2,28 @@
   "name": "leaf-ui",
   "version": "0.0.0-development",
   "description": "🍃 Leaf-UI: A react component library built using styled-components",
-  "main": "lib/web.js",
-  "module": "es/web.js",
   "scripts": {
     "web": "run-s web:storybook",
     "web:storybook": "NODE_ENV=es start-storybook -p 9000 -c ./storybook/web",
     "web:storybook:build": "NODE_ENV=cjs build-storybook -o docs -c ./storybook/web",
     "native": "react-native-scripts start",
-    "native:storybook": "storybook start -p 7007 -c ./storybook/native",
+    "native:storybook": "storybook start -p 7007 -c ./storybook/native/config.js",
     "amp": "run-s amp:storybook",
     "amp:storybook": "NODE_ENV=es start-storybook -p 9001 -c ./storybook/amp",
     "amp:storybook:build": "NODE_ENV=cjs build-storybook -o docs -c ./storybook/amp",
     "semantic-release": "semantic-release",
     "build": "run-s build:clean && run-p build:es build:cjs",
-    "build:clean": "rimraf es lib",
+    "build:clean": "rimraf es cjs",
     "build:es": "NODE_ENV=es babel src -d es --ignore *.test.js --ignore *.story.js",
-    "build:cjs": "NODE_ENV=cjs babel src -d lib --ignore *.test.js --ignore *.story.js",
+    "build:cjs": "NODE_ENV=cjs babel src -d cjs --ignore *.test.js --ignore *.story.js",
+    "build:prepare": "node ./src/scripts/buildPrepare.js",
     "precommit": "lint-staged",
     "commit": "git-cz",
     "lint": "run-p lint:*",
     "lint:eslint": "eslint .",
     "lint:stylelint": "stylelint '**/*.js'",
     "test": "jest"
   },
-  "files": [
-    "lib/**/*",
-    "es/**/*",
-    "native.js"
-  ],
   "lint-staged": {
     "*.js": [
       "eslint",
@@ -72,6 +66,7 @@
     "husky": "0.14.3",
     "jest": "22.4.2",
     "lint-staged": "7.0.0",
+    "mkdirp": "0.5.1",
     "npm-run-all": "4.1.2",
     "prop-types": "15.6.1",
     "react": "16.2.0",

src/components/Button/native/Button.story.js → src/Button/native/Button.story.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react-native';
-import { Button, Text, Spacer } from '../../../native';
+import Spacer from '../../Spacer/native';
+import Text from '../../Text/native';
+import Button from '../native';
 
 storiesOf('Button', module)
   .add('with text', () => (

src/components/Button/web/Button.story.js → src/Button/web/Button.story.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { boolean, text, select } from '@storybook/addon-knobs';
-import theme from '../../../theme';
+import theme from '../../theme';
 import Button from './Button';
 
 storiesOf('Button', module)

src/components/Card/native/Card.story.js → src/Card/native/Card.story.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react-native';
-import { Card, Text, Spacer } from '../../../native';
+import Spacer from '../../Spacer/native';
+import Text from '../../Text/native';
+import Card from '../native';
 
 storiesOf('Card', module)
   .add('Lagoon', () => (

src/components/Card/web/Card.story.js → src/Card/web/Card.story.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { select, number } from '@storybook/addon-knobs';
-import theme from '../../../theme';
+import theme from '../../theme';
 import Card from './Card';
 
 const LoremIpsum = () => (

src/components/Divider/native/Divider.story.js → src/Divider/native/Divider.story.js

@@ -1,6 +1,10 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react-native';
-import { Divider, Text, Spacer, Card, Flex } from '../../../native';
+import Spacer from '../../Spacer/native';
+import Text from '../../Text/native';
+import Card from '../../Card/native';
+import Flex from '../../Flex/native';
+import Divider from '../native';
 
 storiesOf('Divider', module)
   .add('Horizontal', () => (

src/components/Divider/web/Divider.story.js → src/Divider/web/Divider.story.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { select } from '@storybook/addon-knobs';
-import theme from '../../../theme';
+import theme from '../../theme';
 import Divider from './Divider';
 
 storiesOf('Divider', module)

src/components/Dropdown/web/Dropdown.js → src/Dropdown/web/Dropdown.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Overlay } from 'react-overlays';
-import reactChildrenByType from '../../../utils/reactChildrenByType';
+import reactChildrenByType from '../../utils/reactChildrenByType';
 import Flex from '../../Flex/web';
 import DropdownTrigger from './DropdownTrigger';
 import DropdownContent from './DropdownContent';

src/components/Form/native/Form.story.js → src/Form/native/Form.story.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react-native';
-import { Form, TextInput, Spacer } from '../../../native';
+import Spacer from '../../Spacer/native';
+import TextInput from '../../TextInput/native';
+import Form from '../native';
 
 storiesOf('Form', module)
   .add('simple', () => (

src/components/Image/web/Image.js → src/Image/web/Image.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import isInViewport from '../../../utils/isInViewport';
+import isInViewport from '../../utils/isInViewport';
 import ImgContainer from './ImgContainer';
 import Img from './Img';
 

src/components/Select/web/Select.js → src/Select/web/Select.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Downshift from 'downshift';
-import pluralize from '../../../utils/pluralize';
+import pluralize from '../../utils/pluralize';
 import Text from '../../Text/web';
 import Spacer from '../../Spacer/web';
 import Checkbox from '../../Checkbox/web';

src/components/Select/web/Select.story.js → src/Select/web/Select.story.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
-import theme from '../../../theme';
+import theme from '../../theme';
 import Select from './Select';
 
 const options = Object.keys(theme.color).map((color) => ({

src/components/Tag/native/Tag.story.js → src/Tag/native/Tag.story.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react-native';
-import { Tag, Text, Spacer } from '../../../native';
+import Spacer from '../../Spacer/native';
+import Text from '../../Text/native';
+import Tag from '../native';
 
 storiesOf('Tag', module)
   .add('bluntEdged', () => (

src/components/Tag/web/Tag.story.js → src/Tag/web/Tag.story.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { text, select } from '@storybook/addon-knobs';
-import theme from '../../../theme';
+import theme from '../../theme';
 import Tag from './Tag';
 
 storiesOf('Tag', module)

src/Text/native/Text.story.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react-native';
+import Spacer from '../../Spacer/native';
+import Card from '../../Card/native';
+import theme from '../../theme';
+import Text from '../native';
+
+storiesOf('Text', module)
+  .add('sizes', () => (
+    <Spacer margin={[2]}>
+      <Card elevation={1}>
+        {
+          Object.keys(theme.fontSize).map((size) => (
+            <Spacer padding={[1]} key={size}>
+              <Text size={size}>
+                {`size="${size}" (${theme.fontSize[size]})`}
+              </Text>
+            </Spacer>
+          ))
+        }
+      </Card>
+    </Spacer>
+  ))
+  .add('weights', () => (
+    <Spacer margin={[2]}>
+      <Card elevation={1}>
+        {
+          Object.keys(theme.fontWeight).map((weight) => (
+            <Spacer padding={[1]} key={weight}>
+              <Text weight={weight}>
+                {`weight="${weight}" (${theme.fontWeight[weight]})`}
+              </Text>
+            </Spacer>
+          ))
+        }
+      </Card>
+    </Spacer>
+  ));

src/components/Text/web/Text.story.js → src/Text/web/Text.story.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { text, select, boolean } from '@storybook/addon-knobs';
-import theme from '../../../theme';
+import theme from '../../theme';
 import Text from './Text';
 
 storiesOf('Text', module)

src/components/TextInput/native/TextInput.story.js → src/TextInput/native/TextInput.story.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react-native';
-import { TextInput, Spacer } from '../../../native';
+import Spacer from '../../Spacer/native';
+import TextInput from '../native';
 
 storiesOf('TextInput', module)
   .add('simple', () => (

src/components/Tooltip/web/Tooltip.js → src/Tooltip/web/Tooltip.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Overlay } from 'react-overlays';
-import reactChildrenByType from '../../../utils/reactChildrenByType';
+import reactChildrenByType from '../../utils/reactChildrenByType';
 import Flex from '../../Flex/web';
 import TooltipTrigger from './TooltipTrigger';
 import TooltipContent from './TooltipContent';