🔀 Rewrite the whole framework in typescript! 🎉

Merge pull request #48 from slupjs/rewrite

.gitignore

@@ -9,3 +9,6 @@ vendor.js.map
 yarn-error.log
 .DS_Store
 dist
+lerna-debug.log
+cert.pem
+key.pem

.travis.yml

@@ -1,15 +1,10 @@
 language: node_js
-node_js: '7'
+node_js: 
+  - '6'
+  - '7'
+  - '8'
 sudo: required
-cache: yarn
-branches:
-  only:
-  - master
-
-before_install:
-  - echo "//registry.npmjs.org/:_authToken=\${NPM_TOKEN}" > .npmrc
 script:
-- yarn --production=false
 - yarn global add lerna
-- lerna exec --concurrency 1 -- yarn --production=false
-- lerna publish --canary --yes --cd-version=prepatch --preid=next --npm-tag=next
+- lerna bootstrap --loglevel=verbose
+- yarn test

README.md

@@ -2,17 +2,33 @@
   <img src='http://svgshare.com/i/344.svg' width='65%' />
 
   <h5 align='center'>Sets of material design components built with web technologies</h5>
+
+  <h5 align='center'>
+    <a href="https://lernajs.io/">
+      <img alt="Lerna" src="https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg">
+    </a>
+    <a href="https://travis-ci.org/slupjs/slup">
+      <img alt="Build Status" src="https://travis-ci.org/slupjs/slup.svg?branch=master">
+    </a>
+    <a>
+      <img alt="License" src="https://img.shields.io/github/license/slupjs/slup.svg">
+    </a>
+  </h5>
 </h1>
 
 > **NOTE: The library isn't complete yet**
 
-Slup was created by our desire for a performing UI framework following strictly [Material Design guidelines](https://material.io/guidelines). It packs lightweight components, based on the blazing-fast React-like library [Inferno](https://infernojs.org) and the [Styled Components](https://styled-components.com) UI library to provide easy theamability and fast rendering. This set of libraries makes us able to provide a complete asset of components
+Slup was created by our desire for a performing UI framework following strictly [Material Design guidelines](https://material.io/guidelines). It packs lightweight components, based on the blazing-fast React-like library [Inferno](https://infernojs.org) and our own styling method inspired by the well known styled-component, but rewritten in a smaller and lightweight fashion. The speed and small size of our libraries provides some of the most goreous components in the design history with a lightweight and performant approach, perfect for your next PWA or web application. 
 
+Plus we've also got an amazing support provided by [Typescript](https://www.typescriptlang.org/)(the most loved `compile-to-javascript` language from the comminty)!
 
-So we started developing it with three core concepts in mind:
+## Philosophy
 
 * High Performance
 * Meticulousness
+* Beautiful and well commented(understandable) code
+* Be as indipendent from other libraries as possible
+* Enhance compatibility with other frameworks like (p)react [NOT YET]
 * Small size and small footprint
 
 ## Getting Started

lerna.json

@@ -1,8 +1,13 @@
 {
-  "lerna": "2.0.0",
+  "lerna": "2.4.0",
   "npmClient": "yarn",
   "packages": [
     "packages/*"
   ],
-	"version": "0.0.1"
+  "commands": {
+    "publish": {
+      "ignore": [ "@slup/site" ]
+    }
+  },
+  "version": "0.0.1"
 }

package.json

@@ -1,33 +1,57 @@
 {
-  "name": "slup-demo",
-  "devDependencies": {
-    "babel-core": "6.25.0",
-    "babel-loader": "7.1.1",
-    "babel-plugin-inferno": "3.2.0",
-    "babel-plugin-syntax-dynamic-import": "6.18.0",
-    "babel-plugin-transform-class-properties": "6.24.1",
-    "babel-plugin-transform-decorators-legacy": "1.3.4",
-    "babel-plugin-transform-object-rest-spread": "6.23.0",
-    "babel-preset-env": "1.6.0",
-    "babili-webpack-plugin": "0.1.2",
-    "copy-webpack-plugin": "4.1.0",
-    "decko": "1.2.0",
-    "inferno": "3.7.1",
-    "inferno-compat": "3.7.1",
-    "inferno-component": "3.7.1",
-    "inferno-router": "3.8.2",
-    "polished": "1.7.0",
-    "prismjs": "1.8.1",
-    "styled-components": "2.1.2",
-    "webpack": "3.5.1",
-    "webpack-dev-server": "2.7.1"
-  },
+  "name": "slup",
+  "main": "./packages",
+  "version": "0.0.1",
   "scripts": {
-    "start": "webpack-dev-server --progress --hot",
-    "build": "webpack -p --progress",
-    "test": "webpack --progress -p --json > stats.json"
+    "test": "bundlesize"
   },
-  "publishConfig": {
-    "access": "public"
+  "bundlesize": [
+    {
+      "path": "./packages/Theming/dist.js",
+      "maxSize": "10.5 kB"
+    },
+    {
+      "path": "./packages/Common/dist.js",
+      "maxSize": "1 kB"
+    },
+    {
+      "path": "./packages/Controls/dist.js",
+      "maxSize": "2.5 kB"
+    },
+    {
+      "path": "./packages/Grid/dist.js",
+      "maxSize": "1 kB"
+    },
+    {
+      "path": "./packages/Navbar/dist.js",
+      "maxSize": "1.5 kB"
+    },
+    {
+      "path": "./packages/Ripple/dist.js",
+      "maxSize": "1.5 kB"
+    },
+    {
+      "path": "./packages/Tabs/dist.js",
+      "maxSize": "2.5 kB"
+    },
+    {
+      "path": "./packages/Sidenav/dist.js",
+      "maxSize": "1.5 kB"
+    },
+    {
+      "path": "./packages/Lists/dist.js",
+      "maxSize": "1.5 kB"
+    },
+    {
+      "path": "./packages/Slider/dist.js",
+      "maxSize": "1.25 kB"
+    },
+    {
+      "path": "./packages/Site/dist/vendor.js",
+      "maxSize": "35 kB"
+    }
+  ],
+  "devDependencies": {
+    "bundlesize": "0.15.2"
   }
 }

packages/Buttons/.babelrc

@@ -1,9 +1,6 @@
 {
-  "presets": [ "es2015" ],
   "plugins": [
-    "inferno",
-    "transform-decorators-legacy",
-    "transform-class-properties",
+    ["inferno", {"imports": true}],
     "transform-object-rest-spread"
   ]
-}
+}

packages/Buttons/package.json

@@ -1,35 +1,34 @@
 {
   "name": "@slup/buttons",
-  "version": "0.1.0",
-  "description": "Material design buttons",
+  "version": "0.0.1",
+  "description": "Button elements built upon Inferno with the Slup framework",
+  "repository": "https://github.com/slupjs/slup/tree/master/packages/Buttons",
   "main": "dist.js",
-  "author": "Gejsi",
+  "module": "src/index.ts",
+  "author": "Luca <[email protected]>, Gejsi <[email protected]>",
   "license": "MIT",
+  "dependencies": {
+    "@slup/theming": "0.0.1",
+    "@slup/ripple": "0.0.1"
+  },
   "devDependencies": {
-    "@slup/ripple": "0.0.2",
-    "@slup/theming": "0.0.2",
-    "babel-core": "6.25.0",
-    "babel-loader": "7.1.1",
+    "@types/node": "8.0.34",
     "babel-plugin-inferno": "3.2.0",
-    "babel-plugin-transform-class-properties": "6.24.1",
-    "babel-plugin-transform-decorators-legacy": "1.3.4",
-    "babel-plugin-transform-object-rest-spread": "6.23.0",
-    "babel-preset-es2015": "6.24.1",
-    "babili-webpack-plugin": "0.1.2",
-    "decko": "1.2.0",
-    "polished": "1.7.0",
-    "webpack": "3.4.1"
-  },
-  "scripts": {
-    "compile:watch": "webpack --watch --progress",
-    "compile:build": "webpack -p --progress",
-    "test": "webpack -p --progress --json > stats.json",
-    "prepublish": "yarn run compile:build"
+    "babel-plugin-transform-object-rest-spread": "6.26.0",
+    "rollup": "0.50.0",
+    "rollup-plugin-babel": "3.0.2",
+    "rollup-plugin-babel-minify": "3.1.2",
+    "rollup-plugin-commonjs": "8.2.1",
+    "rollup-plugin-node-resolve": "3.0.0",
+    "rollup-plugin-typescript2": "0.7.0",
+    "typescript": "2.5.3"
   },
   "peerDependencies": {
     "inferno": "3.9.0",
-    "inferno-compat": "3.9.0",
-    "inferno-component": "3.9.0",
-    "styled-components": "2.1.2"
+    "inferno-component": "3.9.0"
+  },
+  "scripts": {
+    "build": "rollup -c",
+    "prepublish": "npm run build"
   }
-}
+}

packages/Buttons/rollup.config.js

@@ -0,0 +1,27 @@
+/** Impprt the base configuration */
+import extend, { base } from '../../rollup.base'
+import Babel from 'rollup-plugin-babel'
+
+/** Utils */
+import { join } from 'path'
+
+export default extend({
+  /** Import path */
+  input: join(__dirname, 'src', 'index.ts'),
+
+  output: {
+    /** Export path */
+    file: join(__dirname, 'dist.js'),
+
+    /** Output options */
+    format: 'umd',
+
+    /** Name for the umd export */
+    name: 'Slup.Buttons'
+  },
+
+  plugins: [
+    ...base.plugins,
+    Babel()
+  ]
+})

packages/Buttons/src/fab.js → packages/Buttons/src/fab.tsx

@@ -1,9 +1,8 @@
 import Inferno   from 'inferno'
 import Component from 'inferno-component'
-import styled    from 'styled-components'
 
-import { Ripple }     from '@slup/ripple'
-import { lightTheme } from '@slup/theming'
+import { Ripple } from '@slup/ripple'
+import styled, { lightTheme } from '@slup/theming'
 
 const Circle = styled.button`
   position: relative;
@@ -42,7 +41,7 @@ const Circle = styled.button`
   }
 `
 
-export class Fab extends Component {
+export class Fab extends Component<any, any> {
   render(props) {
     return(
       <Circle {...props}>

packages/Buttons/src/flatbutton.js → packages/Buttons/src/flatButton.tsx

@@ -1,10 +1,8 @@
 import Inferno   from 'inferno'
 import Component from 'inferno-component'
-import styled    from 'styled-components'
 
-import { Ripple }     from '@slup/ripple'
-import { lightTheme } from '@slup/theming'
-import { rgba }       from 'polished'
+import { Ripple } from '@slup/ripple'
+import styled, { lightTheme, rgba } from '@slup/theming'
 
 const FlatBase = styled.button`
   /* Not changing values */
@@ -45,7 +43,7 @@ const FlatBase = styled.button`
   }
 `
 
-export class FlatButton extends Component {
+export class FlatButton extends Component<any, any> {
   render(props) {
     return(
       <FlatBase {...props}>

packages/Buttons/src/iconButton.js → packages/Buttons/src/iconButton.tsx

@@ -1,9 +1,7 @@
 import Inferno   from 'inferno'
-import styled    from 'styled-components'
-import { rgba }  from 'polished'
 
-import { lightTheme } from '@slup/theming'
-import { Ripple }     from '@slup/ripple'
+import styled, { lightTheme, rgba } from '@slup/theming'
+import { Ripple } from '@slup/ripple'
 
 const IconBase = styled.button`
   /**

packages/Buttons/src/index.ts

@@ -0,0 +1,4 @@
+export * from './raisedButton'
+export * from './flatButton'
+export * from './iconButton'
+export * from './fab'