Added rollup build for use in external apps

.babelrc

@@ -0,0 +1,14 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "modules": false
+      }
+    ],
+    "@babel/preset-react"
+  ],
+  "plugins": [
+    "@babel/plugin-proposal-class-properties"
+  ]
+}

.gitignore

@@ -10,6 +10,7 @@
 
 # production
 /build
+/dist
 
 # misc
 .DS_Store

README.md

@@ -11,10 +11,20 @@ npm install
 npm start
 ```
 
-For use in the KaiOS emulator you must build
+To use the example app in the KaiOS emulator you must build
 
 ```
-npm build
+npm build:example
+```
+
+To build the library itself
+```
+npm run build
+```
+
+You can also automatically rebuild on changes
+```
+npm run build:watch
 ```
 
 And update the hashes of the JS and CSS files in [index.html](https://github.com/AdrianMachado/KaiUI/blob/master/index.html) manually before running.

package.json

@@ -1,6 +1,11 @@
 {
   "name": "KaiUI",
   "version": "0.1.0",
+  "main": "dist/index.js",
+  "module": "dist/index.es.js",
+  "files": [
+    "dist"
+  ],
   "private": true,
   "dependencies": {
     "classnames": "^2.2.6",
@@ -12,7 +17,9 @@
   },
   "scripts": {
     "start": "react-scripts start",
-    "build": "react-scripts build",
+    "build": "rollup -c",
+    "build:watch": "rollup -c -w",
+    "build:example": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "app:install": "kdeploy build install",
@@ -37,6 +44,14 @@
     ]
   },
   "devDependencies": {
-    "kdeploy": "kaiostech/kdeploy"
+    "@babel/plugin-proposal-class-properties": "^7.5.5",
+    "@babel/preset-env": "^7.6.3",
+    "@babel/preset-react": "^7.6.3",
+    "kdeploy": "kaiostech/kdeploy",
+    "rollup": "^1.24.0",
+    "rollup-plugin-babel": "^4.3.3",
+    "rollup-plugin-commonjs": "^10.1.0",
+    "rollup-plugin-node-resolve": "^5.2.0",
+    "rollup-plugin-sass": "^1.2.2"
   }
 }

rollup.config.js

@@ -0,0 +1,35 @@
+import babel from 'rollup-plugin-babel';
+import commonjs from 'rollup-plugin-commonjs';
+import sass from 'rollup-plugin-sass';
+import resolve from 'rollup-plugin-node-resolve';
+
+import pkg from './package.json';
+
+export default {
+  input: 'src/lib/index.js',
+  output: [
+    {
+      file: pkg.main,
+      format: 'cjs'
+    },
+    {
+      file: pkg.module,
+      format: 'es'
+    }
+  ],
+  external: [
+    'react',
+    'react-dom',
+    'prop-types'
+  ],
+  plugins: [
+    resolve({
+      extensions: ['.mjs', '.js', '.jsx', '.json']
+    }),
+    sass(),
+    babel({
+      exclude: 'node_modules/**'
+    }),
+    commonjs()
+  ]
+}

src/App.js → src/example-app/App.js

@@ -1,22 +1,22 @@
 import React, { useState } from 'react';
-import Header from './components/Header/Header';
-import { SoftKeyProvider } from './components/SoftKey/SoftKeyProvider';
-import TabView from './views/TabView/TabView';
-import ListView from './views/ListView/ListView';
-import CheckboxListItem from './components/CheckboxListItem/CheckboxListItem';
-import IconListItem from './components/IconListItem/IconListItem';
-import TextListItem from './components/TextListItem/TextListItem';
-import BodyTextListItem from './components/BodyTextListItem/BodyTextListItem';
-import ArrowListItem from './components/ArrowListItem/ArrowListItem';
-import RadioButtonListItem from './components/RadioButtonListItem/RadioButtonListItem';
-import Separator from './components/Separator/Separator';
-import ProgressBar from './components/ProgressBar/ProgressBar';
-import Slider from './components/Slider/Slider';
-import Button from './components/Button/Button';
-import TextInput from './components/TextInput/TextInput';
+import Header from '../lib/components/Header/Header';
+import { SoftKeyProvider } from '../lib/components/SoftKey/SoftKeyProvider';
+import TabView from '../lib/views/TabView/TabView';
+import ListView from '../lib/views/ListView/ListView';
+import CheckboxListItem from '../lib/components/CheckboxListItem/CheckboxListItem';
+import IconListItem from '../lib/components/IconListItem/IconListItem';
+import TextListItem from '../lib/components/TextListItem/TextListItem';
+import BodyTextListItem from '../lib/components/BodyTextListItem/BodyTextListItem';
+import ArrowListItem from '../lib/components/ArrowListItem/ArrowListItem';
+import RadioButtonListItem from '../lib/components/RadioButtonListItem/RadioButtonListItem';
+import Separator from '../lib/components/Separator/Separator';
+import ProgressBar from '../lib/components/ProgressBar/ProgressBar';
+import Slider from '../lib/components/Slider/Slider';
+import Button from '../lib/components/Button/Button';
+import TextInput from '../lib/components/TextInput/TextInput';
 import './App.scss';
-import colors from './theme/colors.scss';
-import exampleIcon from './assets/example.png';
+import colors from '../lib/theme/colors.scss';
+import exampleIcon from '../lib/assets/example.png';
 
 function App() {
   const handleInputChange = newVal => {

src/index.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import App from './App';
-import * as serviceWorker from './serviceWorker';
+import App from './example-app/App';
+import * as serviceWorker from './example-app/serviceWorker';
 
 ReactDOM.render(<App />, document.getElementById('root'));
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.
 // Learn more about service workers: https://bit.ly/CRA-PWA
-serviceWorker.unregister();
+serviceWorker.unregister();

src/lib/index.js

@@ -0,0 +1,41 @@
+import ListView from './views/ListView/ListView';
+import TabView from './views/TabView/TabView';
+import ArrowListItem from './components/ArrowListItem/ArrowListItem';
+import BodyTextListItem from './components/BodyTextListItem/BodyTextListItem';
+import Button from './components/Button/Button';
+import CheckboxListItem from './components/CheckboxListItem/CheckboxListItem';
+import Header from './components/Header/Header';
+import IconListItem from './components/IconListItem/IconListItem';
+import ProgressBar from './components/ProgressBar/ProgressBar';
+import RadioButtonListItem from './components/RadioButtonListItem/RadioButtonListItem';
+import Separator from './components/Separator/Separator';
+import Slider from './components/Slider/Slider';
+import SoftKey from './components/SoftKey/SoftKey';
+import { SoftKeyProvider } from './components/SoftKey/SoftKeyProvider';
+import { withSoftKeyManager } from './components/SoftKey/withSoftKeyManager';
+import Tab from './components/Tab/Tab';
+import Tabs from './components/Tabs/Tabs';
+import TextInput from './components/TextListItem/TextInput';
+import TextListItem from './components/TextListItem/TextListItem';
+
+export {
+    ListView,
+    TabView,
+    ArrowListItem,
+    BodyTextListItem,
+    Button,
+    CheckboxListItem,
+    Header,
+    IconListItem,
+    ProgressBar,
+    RadioButtonListItem,
+    Separator,
+    Slider,
+    SoftKey,
+    SoftKeyProvider,
+    withSoftKeyManager,
+    Tab,
+    Tabs,
+    TextInput,
+    TextListItem
+}