[react-jss] Add flow typings (#818)

* First commit

* Fixes on createHOC and injectSheet

* More fixes on createHOC and injectSheet

* Better flow typings on createHOC

* Moved types/index.js just to types.js and added InnerProps and OuterProps utility types

* Simplified typings of injectSheet.js

* Updated and fixed some typings in createHOC.js

- Used OuterProps and InnerProps types
- Fixed the props of the returning component

* Removed unnecessary types in ns.js

* Added flow flag to some untyped files

* Exporting StyleSheetFactoryOptions now instead of StyleSheetOptions

* Fix typing of getDisplayName

* Added Context Type and updated Options to use StyleSheetFactoryOptions type

* Moved types/index.js just to types.js and added

* Improved Context Type

* Updated createHoc to use Context type

* Improved typing of the Theming option

* Formatted code with prettier

* Updated size snapshot and lockfile

* Make options in injectSheet optional an default it to an empty object

* Fixed types of the JssProvider props
- Made most props optional
- Only allow one child

* Remove semi eslint rule

* Removed unnecessary types

* Remove unnecessary check

* Updated a if statement and fixed removing dynamic sheet from global registry after component unmounts

* Fixed naming of some type names to always start with an uppercase char

* Renamed generic types of createHOC

packages/jss/src/Jss.js

@@ -18,7 +18,7 @@ import type {
   JssOptions,
   InternalJssOptions,
   JssStyle,
-  generateClassName
+  GenerateClassName
 } from './types'
 
 let instanceCounter = 0
@@ -36,7 +36,7 @@ export default class Jss {
     plugins: []
   }
 
-  generateClassName: generateClassName = createGenerateClassNameDefault()
+  generateClassName: GenerateClassName = createGenerateClassNameDefault()
 
   constructor(options?: JssOptions) {
     // eslint-disable-next-line prefer-spread

packages/jss/src/index.js

@@ -20,12 +20,12 @@ import type {JssOptions} from './types'
  * Export types for better typing inside plugins and integrations.
  */
 export type {
-  StyleSheetOptions,
+  StyleSheetFactoryOptions,
   JssValue,
   JssOptions,
   JssStyle,
   Plugin,
-  generateClassName,
+  GenerateClassName,
   RuleListOptions,
   Rule,
   Renderer,

packages/jss/src/types/jss.js

@@ -25,7 +25,7 @@ export type Rule =
   | SimpleRule
   | ViewportRule
 
-export type generateClassName = (rule: Rule, sheet?: StyleSheet) => string
+export type GenerateClassName = (rule: Rule, sheet?: StyleSheet) => string
 
 // TODO
 // Find a way to declare all types: Object|string|Array<Object>
@@ -61,7 +61,7 @@ export type RuleFactoryOptions = {
   sheet?: StyleSheet,
   index?: number,
   jss?: Jss,
-  generateClassName?: generateClassName,
+  generateClassName?: GenerateClassName,
   Renderer?: Class<Renderer>
 }
 
@@ -85,13 +85,13 @@ export type RuleOptions = {
   parent?: ContainerRule | StyleSheet,
   classes: Classes,
   jss: Jss,
-  generateClassName: generateClassName,
+  generateClassName: GenerateClassName,
   Renderer: Class<Renderer>
 }
 
 export type RuleListOptions = {
   classes: Classes,
-  generateClassName: generateClassName,
+  generateClassName: GenerateClassName,
   Renderer: Class<Renderer>,
   jss: Jss,
   sheet: StyleSheet,
@@ -109,18 +109,18 @@ export type Plugin = {
 
 export type InsertionPoint = string | HTMLElement
 
-type createGenerateClassName = () => generateClassName
+type CreateGenerateClassName = () => GenerateClassName
 
 export type JssOptions = {
-  createGenerateClassName?: createGenerateClassName,
+  createGenerateClassName?: CreateGenerateClassName,
   plugins?: Array<Plugin>,
   insertionPoint?: InsertionPoint,
   Renderer?: Class<Renderer>,
   virtual?: Boolean
 }
 
 export type InternalJssOptions = {
-  createGenerateClassName: createGenerateClassName,
+  createGenerateClassName: CreateGenerateClassName,
   plugins: Array<Plugin>,
   insertionPoint?: InsertionPoint,
   Renderer: Class<Renderer>
@@ -132,7 +132,7 @@ export type StyleSheetFactoryOptions = {
   index?: number,
   link?: boolean,
   element?: HTMLStyleElement,
-  generateClassName?: generateClassName,
+  generateClassName?: GenerateClassName,
   classNamePrefix?: string
 }
 
@@ -142,7 +142,7 @@ export type StyleSheetOptions = {
   link?: boolean,
   element?: HTMLStyleElement,
   index: number,
-  generateClassName: generateClassName,
+  generateClassName: GenerateClassName,
   classNamePrefix?: string,
   Renderer: Class<Renderer>,
   insertionPoint?: InsertionPoint,
@@ -157,7 +157,7 @@ export type InternalStyleSheetOptions = {
   index: number,
   insertionPoint?: InsertionPoint,
   Renderer: Class<Renderer>,
-  generateClassName: generateClassName,
+  generateClassName: GenerateClassName,
   classNamePrefix?: string,
   jss: Jss,
   sheet: StyleSheet,

packages/jss/src/utils/createGenerateClassName.js

@@ -1,6 +1,6 @@
 /* @flow */
 import warning from 'warning'
-import type {Rule, generateClassName} from '../types'
+import type {Rule, GenerateClassName} from '../types'
 import StyleSheet from '../StyleSheet'
 import moduleId from './moduleId'
 
@@ -13,7 +13,7 @@ const env = process.env.NODE_ENV
  * When new generator function is created, rule counter is reseted.
  * We need to reset the rule counter for SSR for each request.
  */
-export default (): generateClassName => {
+export default (): GenerateClassName => {
   let ruleCounter = 0
   const defaultPrefix = env === 'production' ? 'c' : ''
 

packages/react-jss/.size-snapshot.json

@@ -1,30 +1,30 @@
 {
   "dist/react-jss.js": {
-    "bundled": 237212,
-    "minified": 65434,
-    "gzipped": 17994
+    "bundled": 237652,
+    "minified": 65587,
+    "gzipped": 18039
   },
   "dist/react-jss.min.js": {
-    "bundled": 201910,
-    "minified": 56081,
-    "gzipped": 15810
+    "bundled": 202343,
+    "minified": 56230,
+    "gzipped": 15853
   },
   "dist/react-jss.cjs.js": {
-    "bundled": 17646,
-    "minified": 7319,
-    "gzipped": 2579
+    "bundled": 18359,
+    "minified": 7518,
+    "gzipped": 2649
   },
   "dist/react-jss.esm.js": {
-    "bundled": 17160,
-    "minified": 6889,
-    "gzipped": 2485,
+    "bundled": 17873,
+    "minified": 7088,
+    "gzipped": 2552,
     "treeshaked": {
       "rollup": {
-        "code": 1908,
+        "code": 2057,
         "import_statements": 214
       },
       "webpack": {
-        "code": 3079
+        "code": 3228
       }
     }
   }

packages/react-jss/src/JssProvider.js

@@ -1,11 +1,23 @@
-import {Component, Children} from 'react'
+// @flow
+import {Component, Children, type Element, type ElementType} from 'react'
 import PropTypes from 'prop-types'
+import type {Jss, GenerateClassName, SheetsRegistry} from 'jss'
 import {createGenerateClassNameDefault} from './jss'
 import * as ns from './ns'
 import contextTypes from './contextTypes'
 import propTypes from './propTypes'
+import type {Context} from './types'
 
-export default class JssProvider extends Component {
+type Props = {
+  jss?: Jss,
+  registry?: SheetsRegistry,
+  generateClassName?: GenerateClassName,
+  classNamePrefix?: string,
+  disableStylesGeneration?: boolean,
+  children: Element<ElementType>
+}
+
+export default class JssProvider extends Component<Props> {
   static propTypes = {
     ...propTypes,
     generateClassName: PropTypes.func,
@@ -22,7 +34,7 @@ export default class JssProvider extends Component {
   // 1. Check if there is a value passed over props.
   // 2. If value was passed, we set it on the child context.
   // 3. If value was not passed, we proxy parent context (default context behaviour).
-  getChildContext() {
+  getChildContext(): Context {
     const {
       registry,
       classNamePrefix,
@@ -31,7 +43,7 @@ export default class JssProvider extends Component {
       disableStylesGeneration
     } = this.props
     const sheetOptions = this.context[ns.sheetOptions] || {}
-    const context = {[ns.sheetOptions]: sheetOptions}
+    const context: Context = {[ns.sheetOptions]: sheetOptions}
 
     if (registry) {
       context[ns.sheetsRegistry] = registry
@@ -73,6 +85,12 @@ export default class JssProvider extends Component {
     return context
   }
 
+  registry: SheetsRegistry
+
+  managers: {}
+
+  generateClassName: GenerateClassName
+
   render() {
     return Children.only(this.props.children)
   }

packages/react-jss/src/compose.js

@@ -1,3 +1,5 @@
+// @flow
+import type {Classes} from 'jss'
 /**
  * Adds `composes` property to each top level rule
  * in order to have a composed class name for dynamic style sheets.
@@ -21,7 +23,7 @@
  * @param {Object} styles dynamic styles object without static properties
  * @return {Object|null}
  */
-export default (staticClasses, dynamicClasses) => {
+export default (staticClasses: Classes, dynamicClasses: Classes) => {
   const combinedClasses = {...staticClasses}
 
   for (const name in dynamicClasses) {

packages/react-jss/src/contextTypes.js

@@ -1,3 +1,4 @@
+// @flow
 import PropTypes from 'prop-types'
 import * as ns from './ns'
 import propTypes from './propTypes'