Codebase migrations (danilowoz#126)

* test(Refactor): (danilowoz#117)

* test(Refactor):

* Holder / SVG tests

* Svg tests

* Removed old tests

* Coverage

* Migrate to travis

* Update travis

* Update travis

* ci(Release):

* test(package):

* ci(Travis):

* chore(devDependencies): Package to generate the changelog

* feat(Codebase): Format

* feat(Types): Export types

* ci(Build step):

* feat(RTL): Flip the content

BREAKING CHANGE: Flip all content instead of only flip the animation direction

Closes danilowoz#122

* Migrate codebase to Typescript (danilowoz#120)

* Ignore rpt2_cache

* Add typescript pkg; Add tsc runner script

* Replace babel with ts compiler

* Typescript configs

* Update lockfile

* Convert Holder to tsx

* Convert svg to tsx

* Convert index.js to ts

* Convert uid to ts

* Convert BulletListStyle to tsx

* Convert CodeStyle to tsx

* Convert FacebookStyle to tsx

* Convert InstagramStyle to tsx

* Convert ListStyle to tsx

* Remove flow preset

* Add ts-node for ts execustion env for nodejs

* Remove flow preset & rollup-babel plugin; Add ts-node for ts env in nodejs

* Update lockfile

* Update watch script for tsc

* Rename IProps to IContentLoaderProps; Use FC for validation

* Remove unwanted ISvgProps; import IContentLoaderProps for type validations

* import and re-export IContentLoaderProps for better types

* Import and use types from IContentLoaderProps

* Remove eslint; replaced by tslint and tslint-prettier

* Add tslint-config-prettier

* Implement stricter type checking

* Remove comments as it is handled by tslint-config-prettier now

* Replace lint by tsc

* remove eslint and flow configs

* Add style default props

* Add jest options to include ts test files

* Add options to load json file

* Migrate tests from JS to TS for better interoperability

* Updated snapshots

* Remove ts-node

* Break line after react import

* Remove export from bottom of file and move to component definition

BREAKING CHANGE: Migrate codebase to typescript

Closes danilowoz#120

Author: danilowoz

.babelrc.js

@@ -5,12 +5,12 @@ const loose = true
 module.exports = {
   presets: [
     [
-      '@babel/preset-env', {
+      '@babel/preset-env',
+      {
         modules,
         loose
       }
     ],
-    '@babel/preset-react',
-    '@babel/preset-flow'
-  ],
+    '@babel/preset-react'
+  ]
 }

.circleci/config.yml

@@ -11,4 +11,4 @@ coverage
 .docz/
 .rpt2_cache
 settings.json
-*.code-workspace
+*.code-workspace

.eslintrc

@@ -0,0 +1,5 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "trailingComma": "es5"
+}

.flowconfig

@@ -0,0 +1,16 @@
+language: node_js
+sudo: false
+node_js:
+  - 9
+cache:
+  directories:
+    - node_modules
+install:
+  - npm install
+  - npm install -g codecov
+script:
+  - npm run test
+  - npm run build
+after_success:
+  - npm run coverage
+  - npm run release

.gitignore

@@ -4,6 +4,7 @@ route: /
 ---
 
 # Introduction
+
 <p align="center">
   <img width="350" alt="react-content-loader" src="https://user-images.githubusercontent.com/4838076/34419335-5669c3f8-ebea-11e7-9668-c47b7846970b.png" />
 </p>
@@ -15,13 +16,14 @@ React component that uses SVG to create a collection of loaders which simulates
 the structure of the content that will be loaded, similar to Facebook cards loaders.
 
 ## Features
-* :gear: **Completely customizable:** you can change the colors, speed, sizes and even with RTL content support;
-* :pencil2: **Create your own loading:** use the
+
+- :gear: **Completely customizable:** you can change the colors, speed, sizes and even with RTL content support;
+- :pencil2: **Create your own loading:** use the
   [create-content-loader](https://danilowoz.github.io/create-content-loader/) to create
   your own custom loadings easily;
-* :ok_hand: **You can use right now:** there are a lot of presets to use it, see the
+- :ok_hand: **You can use right now:** there are a lot of presets to use it, see the
   [examples](usage#different-type-of-loaders);
-* :rocket: **Performance:** written using only the SVG API.
+- :rocket: **Performance:** written using only the SVG API.
 
 ## Installation
 
@@ -44,22 +46,21 @@ const MyFacebookLoader = () => <Facebook />
 **Or in custom mode, using the
 [online tool](https://danilowoz.github.io/create-react-content-loader/)**
 
-
 ## Options
 
-| <p align="left">Name</p>|<p align="left">Type</p>|<p align="left">Default</p>| <p align="left">Description</p>                             |
-| ----------------------- | ----------- | ---------------------- | ------------------------------------------------------------------------- |
-| **animate**             | `Boolean`   | `true`                 | `false` to render with no animation                                       |
-| **ariaLabel**           | `String | Boolean` | `Loading interface...` | Describe what element it is                                        |
-| **speed**               | `Number`    | `2`                    | Animation speed in seconds                                                |
-| **className**           | `String`    | ` `                    | Classname in the `<svg/>`                                                 |
-| **width**               | `Number`    | `400`                  | viewBox width of `<svg/>`                                                 |
-| **height**              | `Number`    | `130`                  | viewBox height of `<svg/>`                                                |
-| **rtl**                 | `Boolean`   | `false`                | Right-to-left animation                                                   |
-| **preserveAspectRatio** | `String`    | `xMidYMid meet`        | Aspect ratio option of `<svg/>`                                           |
-| **primaryColor**        | `String`    | `#f3f3f3`              | Background                                                                |
-| **secondaryColor**      | `String`    | `#ecebeb`              | Animation color                                                           |
-| **primaryOpacity**      | `Number`    | `1`                    | Background opacity (0 = transparent, 1 = opaque)                          |
-| **secondaryOpacity**    | `Number`    | `1`                    | Animation opacity (0 = transparent, 1 = opaque)                           |
-| **style**               | `Object`    | `null`                 | Ex: `{ width: '100%', height: '70px' }`                                   |
-| **uniquekey**           | `String`    | random unique id       | Use the same value of prop key, that will solve inconsistency on the SSR. |
+| Name                    | Type               | Default                | Description                                                               |
+| ----------------------- | ------------------ | ---------------------- | ------------------------------------------------------------------------- |
+| **animate**             | `Boolean`          | `true`                 | `false` to render with no animation                                       |
+| **ariaLabel**           | `String | Boolean` | `Loading interface...` | Describe what element it is                                               |
+| **speed**               | `Number`           | `2`                    | Animation speed in seconds                                                |
+| **className**           | `String`           | ``                     | Classname in the `<svg/>`                                                 |
+| **width**               | `Number`           | `400`                  | viewBox width of `<svg/>`                                                 |
+| **height**              | `Number`           | `130`                  | viewBox height of `<svg/>`                                                |
+| **rtl**                 | `Boolean`          | `false`                | Right-to-left animation                                                   |
+| **preserveAspectRatio** | `String`           | `xMidYMid meet`        | Aspect ratio option of `<svg/>`                                           |
+| **primaryColor**        | `String`           | `#f3f3f3`              | Background                                                                |
+| **secondaryColor**      | `String`           | `#ecebeb`              | Animation color                                                           |
+| **primaryOpacity**      | `Number`           | `1`                    | Background opacity (0 = transparent, 1 = opaque)                          |
+| **secondaryOpacity**    | `Number`           | `1`                    | Animation opacity (0 = transparent, 1 = opaque)                           |
+| **style**               | `Object`           | `null`                 | Ex: `{ width: '100%', height: '70px' }`                                   |
+| **uniquekey**           | `String`           | random unique id       | Use the same value of prop key, that will solve inconsistency on the SSR. |

.prettierrc

@@ -2,107 +2,125 @@
 name: Usage
 route: /usage
 ---
+
 import { Playground, PropsTable } from 'docz'
+
 import ContentLoader, {
   Facebook,
   Instagram,
   Code,
   List,
-  BulletList
-} from "../src/index"
-import FacebookStyle from "../src/stylized/FacebookStyle"
-
+  BulletList,
+} from '../src'
+import FacebookStyle from '../src/stylized/FacebookStyle'
 
 # React Content Loader
+
 <PropsTable of={FacebookStyle} />
 
 ## Different Type of Loaders
 
 ### Facebook Style Loader
+
 <Playground>
-		<Facebook/>
+  <Facebook />
 </Playground>
 
 ### Instagram Style Loader
+
 <Playground>
-		<Instagram/>
+  <Instagram />
 </Playground>
 
 ### Code Style Loader
+
 <Playground>
-		<Code/>
+  <Code />
 </Playground>
 
 ### List Style Loader
+
 <Playground>
-		<List/>
+  <List />
 </Playground>
 
 ### BulletList Style Loader
+
 <Playground>
-		<BulletList/>
+  <BulletList />
 </Playground>
 
 ### Custom Loader
+
 <Playground>
-	<ContentLoader
-      height={140}
-      speed={1}
-      primaryColor={"#333"}
-      secondaryColor={"#999"}
-    >
-      <rect x="80" y="17" rx="4" ry="4" width="300" height="13" />
-      <rect x="82" y="44" rx="3" ry="3" width="250" height="10" />
-      <circle cx="35" cy="35" r="35" />
-    </ContentLoader>
+  <ContentLoader
+    height={140}
+    speed={1}
+    primaryColor={'#333'}
+    secondaryColor={'#999'}
+  >
+    <rect x="80" y="17" rx="4" ry="4" width="300" height="13" />
+    <rect x="82" y="44" rx="3" ry="3" width="250" height="10" />
+    <circle cx="35" cy="35" r="35" />
+  </ContentLoader>
 </Playground>
 
 ## Unique key
+
 <Playground>
-		<Facebook uniquekey="unique-key" />
+  <Facebook uniquekey="unique-key" />
 </Playground>
 
 ## No Animation
+
 Set animate props to false to stop Animation
 
 <Playground>
-		<Facebook animate={false} />
+  <Facebook animate={false} />
 </Playground>
 
-## Right To Left Animation
+## RTL: Right To Left Animation
+
 Set rtl props to animate from right to left
+
 <Playground>
-		<Instagram rtl />
+  <Instagram rtl />
 </Playground>
 
 ## Use ViewBox
+
 Use viewbox props to set viewbox value.
 Additionally, pass viewBox props as empty string to remove viewBox.
+
 <Playground>
-		<ContentLoader viewBox=""  />
+  <ContentLoader viewBox="" />
 </Playground>
 
 ## Custom aria label
+
 <Playground>
-		<ContentLoader ariaLabel="My custom loader"  />
+  <ContentLoader ariaLabel="My custom loader" />
 </Playground>
 
 ### Remove aria label
+
 <Playground>
-		<ContentLoader ariaLabel={false}  />
+  <ContentLoader ariaLabel={false} />
 </Playground>
 
 ## BugFix in Safari
-When using `rgba` as a `primaryColor` or `secondaryColor` value, 
+
+When using `rgba` as a `primaryColor` or `secondaryColor` value,
 [Safari does not respect the alpha channel](https://github.com/w3c/svgwg/issues/180),
-meaning that the color will be opaque. To prevent this, instead of using an 
+meaning that the color will be opaque. To prevent this, instead of using an
 `rgba` value for `primaryColor`/`secondaryColor`, use the `rgb` equivalent and
 move the alpha channel value to the `primaryOpacity`/`secondaryOpacity` props.
+
 <Playground>
-	<ContentLoader
-        primaryColor="rgb(0,0,0)"
-        secondaryColor="rgb(0,0,0)"
-        primaryOpacity={0.06}
-        secondaryOpacity={0.12}
-      />
-</Playground>
+  <ContentLoader
+    primaryColor="rgb(0,0,0)"
+    secondaryColor="rgb(0,0,0)"
+    primaryOpacity={0.06}
+    secondaryOpacity={0.12}
+  />
+</Playground>

.travis.yml

@@ -1,6 +1,8 @@
 import emoji from "remark-emoji"
+
 export default {
   title: "React Content Loader",
+  typescript: true,
   mdPlugins: [emoji],
   codeSandbox: false,
   htmlContext: {