leandrowdgh-429: Emit types from source and update README

Author: leandrowd

README.md

@@ -1,9 +1,5 @@
 # React Responsive Carousel
 
-# Help wanted
-
-Things here are running very slowly as I have a lot of other stuff to take care at the moment so please don't be upset if I don't answer your question or if a PR sits unreviewed for a few days or weeks. Anyone interested in helping it move faster can help by submitting or reviewing PR's and answering each other's questions. (https://github.com/leandrowd/react-responsive-carousel/issues/160)
-
 [![npm version](https://badge.fury.io/js/react-responsive-carousel.svg)](https://badge.fury.io/js/react-responsive-carousel)
 [![Build Status](https://travis-ci.org/leandrowd/react-responsive-carousel.svg?branch=master)](https://travis-ci.org/leandrowd/react-responsive-carousel)
 [![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Fleandrowd%2Freact-responsive-carousel.svg?type=shield)](https://app.fossa.io/projects/git%2Bgithub.com%2Fleandrowd%2Freact-responsive-carousel?ref=badge_shield)
@@ -16,16 +12,19 @@ Powerful, lightweight and fully customizable carousel component for React apps.
 -   Mobile friendly
 -   Swipe to slide
 -   Mouse emulating touch
--   Server side rendering
+-   Server side rendering compatible
 -   Keyboard navigation
 -   Custom animation duration
--   Auto play
--   Custom auto play interval
+-   Auto play w/ custom interval
 -   Infinite loop
 -   Horizontal or Vertical directions
 -   Supports images, videos, text content or anything you want. Each direct child represents one slide!
--   Supports any flux library (use `selectedItem` prop to set from the app state, and `onChange` callback to get the new position)
--   Show/hide anything (thumbs, indicators, arrows, status)
+-   Supports external controls
+-   Highly customizable:
+    -   Custom thumbs
+    -   Custom arrows
+    -   Custom indicators
+    -   Custom status
 
 ### Important links:
 
@@ -54,7 +53,7 @@ Customize it yourself:
 ```javascript
 import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
-import "react-responsive-carousel/lib/styles/carousel.min.css";
+import "react-responsive-carousel/lib/styles/carousel.min.css"; // requires a loader
 import { Carousel } from 'react-responsive-carousel';
 
 class DemoCarousel extends Component {
@@ -82,11 +81,60 @@ ReactDOM.render(<DemoCarousel />, document.querySelector('.demo-carousel'));
 
 // Don't forget to include the css in your page
 
-// Using webpack
+// Using webpack or parcel with a style loader
 // import styles from 'react-responsive-carousel/lib/styles/carousel.min.css';
 
 // Using html tag:
 // <link rel="stylesheet" href="<NODE_MODULES_FOLDER>/react-responsive-carousel/lib/styles/carousel.min.css"/>
+```
+
+### Customizing
+
+#### Items (Slides)
+
+By default, each slide will be rendered as passed as children. If you need to customize them, use the prop `renderItem`.
+
+```
+renderItem: (item: React.ReactNode, options?: { isSelected: boolean }) => React.ReactNode;
+```
+
+#### Thumbs
+
+By default, thumbs are generated extracting the images in each slide. If you don't have images on your slides or if you prefer a different thumbnail, use the method `renderThumbs` to return a new list of images to be used as thumbs.
+
+```
+renderThumbs: (children: React.ReactChild[]) => React.ReactChild[]
+```
+
+#### Arrows
+
+By default, simple arrows are rendered on each side. If you need to customize them and the css is not enough, use the `renderArrowPrev` and `renderArrowNext`. The click handler is passed as argument to the prop and needs to be added as click handler in the custom arrow.
+
+```
+renderArrowPrev: (clickHandler: () => void, hasPrev: boolean, label: string) => React.ReactNode;
+renderArrowNext: (clickHandler: () => void, hasNext: boolean, label: string) => React.ReactNode;
+```
+
+#### Indicators
+
+By default, indicators will be rendered as those small little dots in the bottom part of the carousel. To customize them, use the `renderIndicator` prop.
+
+```
+renderIndicator: (
+    clickHandler: (e: React.MouseEvent | React.KeyboardEvent) => void,
+    isSelected: boolean,
+    index: number,
+    label: string
+) => React.ReactNode;
+```
+
+#### Take full control of the carousel
+
+If none of the previous options are enough, you can build your own controls for the carousel. Check an example at http://react-responsive-carousel.js.org/storybook/?path=/story/02-advanced--with-external-controls
+
+### Videos
+
+If your carousel is about videos, keep in mind that it's up to you to control which videos will play. Using the `renderItem` prop, you will get information saying if the slide is selected or not and can use that to change the video state. Only play videos on selected slides to avoid issues. Check an example at http://react-responsive-carousel.js.org/storybook/?path=/story/02-advanced--youtube-autoplay-with-custom-thumbs
 
 =======================
 
@@ -107,4 +155,7 @@ When raising an issue, please add as much details as possible. Screenshots, vide
 ## License
 
 [![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Fleandrowd%2Freact-responsive-carousel.svg?type=large)](https://app.fossa.io/projects/git%2Bgithub.com%2Fleandrowd%2Freact-responsive-carousel?ref=badge_large)
+
+```
+
 ```

index.d.ts

@@ -8,6 +8,7 @@
     },
     "main": "lib/cjs/index.js",
     "module": "lib/es/index.js",
+    "types": "lib/ts/index.d.ts",
     "license": "MIT",
     "keywords": [
         "react",
@@ -21,7 +22,14 @@
         "react-component",
         "view"
     ],
-    "types": "index.d.ts",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/leandrowd/react-responsive-carousel.git"
+    },
+    "bugs": {
+        "url": "https://github.com/leandrowd/react-responsive-carousel/issues"
+    },
+    "homepage": "http://leandrowd.github.io/react-responsive-carousel/",
     "scripts": {
         "start": "parcel src/index.html src/assets/**/*",
         "storybook": "start-storybook -p 9001 -s ./src -c .storybook",
@@ -30,16 +38,17 @@
         "format": "prettier '**/*.{js,json}'",
         "format:check": "yarn format --check",
         "format:write": "yarn format --write",
-        "test": "yarn format:check && yarn jest && yarn jest-ssr",
+        "test": "yarn format:check && yarn typecheck && yarn jest && yarn jest-ssr",
         "jest": "jest",
-        "jest-ssr": "jest --testEnvironment=node ./src/__tests__/SSR.js",
+        "jest-ssr": "jest --testEnvironment=node ./src/__tests__/SSR.tsx",
         "typecheck": "tsc -p tsconfig.json --noEmit",
         "update-snapshots": "jest --updateSnapshot",
         "build": "yarn lib:build",
-        "lib:build": "yarn lib:build-cjs && yarn lib:build-es && yarn lib:build-styles",
+        "lib:build": "yarn lib:build-cjs && yarn lib:build-es && yarn lib:build-styles && yarn lib:build-types",
         "lib:build-cjs": "babel ./src -d lib/cjs --ignore './src/__tests__'",
         "lib:build-es": "MODULE=true babel ./src -d lib/es --ignore './src/__tests__'",
         "lib:build-styles": "mkdir -p lib/styles && node-sass src/carousel.scss > lib/styles/carousel.css && node-sass --output-style compressed src/carousel.scss > lib/styles/carousel.min.css",
+        "lib:build-types": "tsc -p tsconfig.types.json",
         "lib:pre-publish": "npm version patch && git push origin master",
         "lib:publish": "npm publish && git push --tags",
         "lib:post-publish": "yarn changelog && yarn update-codesandbox && git add . && git commit -m 'Updating changelog and codesandbox' && git push origin master",
@@ -55,14 +64,6 @@
         "prepublish-prerelease-to-npm": "git pull && yarn build && git add . && git commit -m 'Prepare for publishing prerelease'",
         "publish-prerelease-to-npm": "(git pull && npm version prerelease --preid=next && npm publish)"
     },
-    "repository": {
-        "type": "git",
-        "url": "https://github.com/leandrowd/react-responsive-carousel.git"
-    },
-    "bugs": {
-        "url": "https://github.com/leandrowd/react-responsive-carousel/issues"
-    },
-    "homepage": "http://leandrowd.github.io/react-responsive-carousel/",
     "devDependencies": {
         "@babel/cli": "^7.8.4",
         "@babel/core": "^7.9.0",

package.json

@@ -9,7 +9,6 @@
         "strict": true,
         "target": "es5",
         "jsx": "react",
-        "outDir": "./ts-output",
         "baseUrl": "./src",
         "typeRoots": ["./node_modules/@types", "./types"],
         "paths": {

tsconfig.json

@@ -0,0 +1,13 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "outDir": "lib/ts",
+        "declaration": true,
+        "declarationMap": true,
+        "isolatedModules": false,
+        "noEmit": false,
+        "allowJs": false,
+        "emitDeclarationOnly": true
+    },
+    "exclude": ["src/__tests__"]
+}