Move to Typescript

.eslintrc

@@ -1,5 +1,12 @@
 {
-  "parser": "babel-eslint",
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "useJSXTextNode": false
+  },
+  "plugins": ["@typescript-eslint"],
   "extends": [
     "standard",
     "standard-jsx",
@@ -30,6 +37,7 @@
       }
     ],
     "react/jsx-max-depth": 0,
+    "react/jsx-filename-extension": [1, { "extensions": [".tsx", ".jsx"] }],
     "react/no-set-state": 0,
     "react/jsx-child-element-spacing": 0,
     "react/forbid-component-props": 0,
@@ -90,7 +98,9 @@
         ],
         "newlines-between": "always"
       }
-    ]
+    ],
+    "no-unused-vars": 0,
+    "@typescript-eslint/no-unused-vars": "error"
   },
   "env": {
     "jest": true

.storybook/config.js

@@ -23,7 +23,7 @@ const ADDONS = [chaptersAddon]
 DECORATORS.forEach(decorator => addDecorator(decorator))
 ADDONS.forEach(addon => setAddon(addon))
 
-const req = require.context('../components', true, /\.example\.jsx$/)
+const req = require.context('../components', true, /\.example\.(tsx|jsx)$/)
 
 function loadStories() {
   require('./stories/Picasso'), req.keys().forEach(filename => req(filename))

.storybook/webpack.config.js

@@ -0,0 +1,15 @@
+const path = require('path')
+
+module.exports = (baseConfig, env, config) => {
+  config.module.rules.push({
+    test: /\.(ts|tsx)$/,
+    use: [
+      {
+        loader: require.resolve('ts-loader')
+      }
+    ]
+  })
+  config.resolve.extensions.push('.ts', '.tsx')
+
+  return config
+}

README.md

@@ -74,7 +74,6 @@ docker run -t -i --rm -e -v ${PWD}/components:/app/components NPM_TOKEN=$NPM_TOK
 | **yarn release:alpha**        | Bump alpha version in `package.json` and create new version git tag |
 | **yarn generate:component**   | Generate a new component template                                   |
 | **yarn build:docker**         | Build docker image                                                  |
-| **yarn build:es**             | Build ES6 version of library                                        |
-| **yarn build:es2015**         | Build ES2015 version of library                                     |
+| **yarn build**                | Build the library                                                   |
 | **yarn build:storybook**      | Build Storybook as static website                                   |
 | **yarn symlink**              | Symlink current version of library for development                  |

_templates/new-component/new/component.ejs.t

@@ -1,5 +1,5 @@
 ---
-to: components/<%= h.changeCase.pascalCase(name) %>/<%= h.changeCase.pascalCase(name) %>.jsx
+to: components/<%= h.changeCase.pascalCase(name) %>/<%= h.changeCase.pascalCase(name) %>.tsx
 ---
 <%
   Name = h.changeCase.pascalCase(name)
@@ -10,11 +10,11 @@ import { withStyles } from '@material-ui/core/styles'
 
 import styles from './styles'
 
-const <%= Name %> = props => {
-  return null
+interface Props {
 }
 
-<%= Name %>.propTypes = {
+const <%= Name %>: React.FunctionalComponent<Props> = props => {
+  return null
 }
 
 <%= Name %>.defaultProps = {

_templates/new-component/new/index.ejs.t

@@ -1,5 +1,5 @@
 ---
-to: components/<%= h.changeCase.pascalCase(name) %>/index.js
+to: components/<%= h.changeCase.pascalCase(name) %>/index.ts
 ---
 <%
   Name = h.changeCase.pascalCase(name)

_templates/new-component/new/styles.ejs.t

@@ -1,12 +1,12 @@
 ---
-to: components/<%= h.changeCase.pascalCase(name) %>/styles.js
+to: components/<%= h.changeCase.pascalCase(name) %>/styles.ts
 ---
 <%
   Name = h.changeCase.pascalCase(name)
 -%>
 import { PicassoProvider } from '../Picasso'
 
-PicassoProvider.override(({ palette }) => ({
+PicassoProvider.override(({ palette }: { palette: any }) => ({
 
 }))
 

_templates/new-component/new/test.ejs.t

@@ -1,12 +1,12 @@
 ---
-to: components/<%= h.changeCase.pascalCase(name) %>/test.jsx
+to: components/<%= h.changeCase.pascalCase(name) %>/test.tsx
 ---
 <%
   Name = h.changeCase.pascalCase(name)
 -%>
 import React from 'react'
-/* eslint-disable no-unused-vars */
-import { render, fireEvent, cleanup } from 'react-testing-library'
+/* eslint-disable-next-line */
+import { render, fireEvent, cleanup, RenderResult } from 'react-testing-library'
 
 import <%= Name %> from './index'
 
@@ -17,7 +17,7 @@ const render<%= Name %> = (children, props = {}) => {
 afterEach(cleanup)
 
 describe('', () => {
-  let api
+  let api: RenderResult
 
   beforeEach(() => {
     api = render<%= Name %>()

_templates/new-component/new/visual.test.ejs.t

@@ -1,5 +1,5 @@
 ---
-to: components/<%= h.changeCase.pascalCase(name) %>/visual.test.jsx
+to: components/<%= h.changeCase.pascalCase(name) %>/visual.test.tsx
 ---
 <%
   Name = h.changeCase.pascalCase(name)

bin/build

@@ -7,54 +7,44 @@ const yargs = require('yargs').argv
 const rimraf = require('rimraf').sync
 const exec = require('child_process').execSync
 
-const config = require(`./build.${yargs.config}.config.js`)
-const babelPath = path.resolve(__dirname, '../node_modules/.bin/babel')
+const config = require(`../tsconfig.json`)
 const packageJson = require(path.resolve(__dirname, '../package.json'))
-
+const tscPath = path.resolve(__dirname, '../node_modules/.bin/tsc')
 
 // General logging
 const log = function(text, color) {
   if (!color) color = 'blue'
   console.log(chalk[color](text))
 }
 
-// Babel compiler
-const babel = function(config) {
-  log(`Building ${packageJson.name}:${packageJson.version}`)
-  log(`Setting output to: ${yargs.config}`, 'green')
+const compile = function(config) {
+  const args = []
 
-  const args = [
-    `--config-file ${path.resolve(__dirname, '../babel.config.js')}`,
-    `${config.sourceFiles}`,
-    `--out-dir ${config.outDir}`,
-    `--ignore ${config.ignoredFiles.join(',')}`
-  ]
+  log(`Building ${packageJson.name}:${packageJson.version}`)
 
   function build() {
-    const cmd = `${babelPath} ${args.join(' ')}`
+    const cmd = `${tscPath} -p tsconfig.json ${args.join(' ')}`
     exec(cmd)
-    log(`Build ready in: ${config.outDir}`, 'green')
+    log(`Build ready in: ${config.compilerOptions.outDir}`, 'green')
   }
 
   function clean() {
-    log(`Removing: ${config.outDir}`, 'green')
-    rimraf(config.outDir)
+    log(`Removing: ${config.compilerOptions.outDir}`, 'green')
+    rimraf(config.compilerOptions.outDir)
   }
 
-
-  // Firstly build with babel and run again with watch
   clean()
   build()
 
   if (yargs.config == 'dev') {
-    generatePackageJson(config.outDir)
+    generatePackageJson(config.compilerOptions.outDir)
   }
 
   if (yargs.symlink) {
     log('Symlinking dev package...')
     try {
       exec('yarn unlink', {
-        cwd: config.outDir,
+        cwd: config.compilerOptions.outDir,
         stdio: 'ignore',
         stderr: 'ignore'
       })
@@ -63,15 +53,15 @@ const babel = function(config) {
     }
 
     exec('yarn link', {
-      cwd: config.outDir,
+      cwd: config.compilerOptions.outDir,
       stdio: 'inherit'
     })
   }
 
   if (yargs.watch) {
     args.unshift('--watch')
+    log(`Watching for changes in: ${config.include.join(', ')}`)
     build()
-    log(`Watching for changes in: ${config.sourceFiles}`)
   }
 }
 
@@ -89,4 +79,4 @@ function generatePackageJson(outDir) {
   fs.writeFileSync(out, JSON.stringify(data, null, 2))
 }
 
-babel(config)
+compile(config)

components/Label/Label.example.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { storiesOf } from '@storybook/react'
 
 import StoryTeller from '../../.storybook/StoryTeller'
-import Label from './'
+import Label from '.'
 import Spacer from '../Spacer'
 
 const stories = storiesOf('Label', module)
@@ -39,14 +39,14 @@ chapter.addSection('Flat', null, () => (
 ))
 
 chapter.addSection('Statuses', 'Use these to communicate status.', () => (
-  <React.Fragment>
+  <>
     <Spacer right={1}>
       <Label label={`Yay! It's done!`} variant='success' />
     </Spacer>
     <div>
       <Label label='Nope! Please, try one more time' variant='error' />
     </div>
-  </React.Fragment>
+  </>
 ))
 
 stories.addWithChapters('Label', teller.toStory())

components/Label/Label.jsx → components/Label/Label.tsx

@@ -1,20 +1,28 @@
-import React from 'react'
-import PropTypes from 'prop-types'
 import { withStyles } from '@material-ui/core/styles'
+import { ClassNameMap } from '@material-ui/core/styles/withStyles'
 import CloseIcon from '@material-ui/icons/Close'
+import React from 'react'
 
-import styles from './styles'
 import Chip from '../Chip'
 import LabelGroup from '../LabelGroup'
+import styles from './styles'
+
+interface Props {
+  classes: Partial<ClassNameMap<string>>
+  label?: string
+  onDelete?: () => void
+  variant?: 'flat' | 'success' | 'error'
+}
 
-const Label = props => {
+// should be moved to some global interfaces place
+interface GroupFunctionalComponent<T> extends React.FunctionComponent<T> {
+  Group: React.ReactNode
+}
+
+const Label: GroupFunctionalComponent<Props> = props => {
   const { classes, variant, ...rest } = props
 
-  let rootClass = {
-    flat: classes.flat,
-    success: classes.success,
-    error: classes.error
-  }[variant]
+  const rootClass = variant ? classes[variant] : ''
 
   return (
     <Chip
@@ -27,18 +35,12 @@ const Label = props => {
   )
 }
 
-Label.propTypes = {
-  label: PropTypes.string,
-  onDelete: PropTypes.func,
-  variant: PropTypes.oneOf(['flat', 'success', 'error'])
-}
-
 Label.defaultProps = {
-  label: null,
+  classes: {},
+  label: undefined,
   onDelete: undefined,
-  variant: null
+  variant: undefined
 }
-
 Label.Group = LabelGroup
 
 export default withStyles(styles)(Label)

components/Label/styles.js → components/Label/styles.ts

@@ -1,4 +1,4 @@
-export default ({ palette }) => ({
+export default ({ palette }: { palette: any }) => ({
   flat: {
     backgroundColor: palette.grey[75],
     color: palette.grey[100]