feat(waffle): add waffle package (#202)

* feat(waffle): init waffle package

* feat(waffle): init html and canvas components

* feat(waffle): add support for interations on Waffle component

* feat(waffle): add animation support to Waffle & WaffleCanvas

* feat(waffle): add support for custom tooltip on all components

* feat(waffle): add opacity support for WaffleCanvas

* feat(waffle): add support for custom cell component for Waffle & WaffleHtml

* feat(waffle): add ability to customize fill direction

* feat(waffle): add waffle stories

* feat(waffle): add TypeScript definitions

* feat(waffle): add tests

* feat(waffle): add icon for waffle package

* feat(waffle): fix tests

.storybook/config.js

@@ -29,6 +29,9 @@ function loadStories() {
     require('../packages/nivo-sunburst/stories/sunburst.stories')
     require('../packages/nivo-treemap/stories/treemap.stories')
     require('../packages/nivo-treemap/stories/treemapHtml.stories')
+    require('../packages/nivo-waffle/stories/waffle.stories')
+    require('../packages/nivo-waffle/stories/waffle-html.stories')
+    require('../packages/nivo-waffle/stories/waffle-canvas.stories')
 }
 
 configure(loadStories, module)

CONTRIBUTING.md

@@ -1,23 +1,100 @@
 # Contributing
 
+- [setup](#setup)
+- [development](#development)
+  - [formatting](#formatting)
+  - [linting](#linting)
+  - [screenshots](#screenshots)
+- [website](#website)
+- [deploy](#deploy)
+
 ## Setup
-Nivo is structured into multiple packages handled by [lerna](https://lernajs.io/). In order to install all the
-required dependencies and to establish links between the various packages, please execute the following:
+
+Nivo is structured into multiple packages handled by [lerna](https://lernajs.io/).
+In order to install all the required dependencies and to establish links between
+the various packages, please execute the following:
 
 ```
+# please note that it can take a while as the repository contains a lot of packages
 make init
 ```
 
-## Development Mode
-The easiest way to work on Nivo, is to use our [storybook](https://storybook.js.org/). The storybook development mode
-can be started via:
+## Development
+
+The easiest way to work on Nivo, is to use our [storybook](https://storybook.js.org/).
+The storybook development mode can be started via:
 
 ```
 make storybook
 ```
 
-Once you have made changes to the packages, you will need to rebuild the respective package. In this case, you have two
-options:
+Once you have made changes to the packages, you will need to rebuild the respective package.
+In this case, you have two options:
 
  1. Rebuild all the packages via `make packages-build` or…
  2. Rebuild only a specific package via, e.g. for the package `bar`, `PACKAGE=bar make package-build-bar`.
+
+### Formatting
+
+Nivo uses prettier in order to provide a consistent code style.
+If you made some modification to the existing code base, please run the formatting
+command before submitting your modifications:
+
+```
+make fmt
+```
+
+### Linting
+
+Nivo code base also uses eslint to enforce consistent code style.
+eslint is only enabled on packages for now, if you want to run eslint
+against all packages, please run:
+
+```
+make packages-lint
+```
+
+If you only made modifications on a specific package,
+you can use the scoped form to speed up the process:
+
+```
+make package-lint-bar
+```
+
+where `bar` is the name of the targeted nivo package.
+
+### Screenshots
+
+Each package comes with its own README, we use screenshots from the website
+in order to illustrate available package components.
+
+The script takes screenshots from the website using config defined in
+`conf/base.yaml`, if you added a new package, please update this config accordingly.
+
+To refresh the screenshots, please make sure the website is running on port `3000`,
+otherwise run:
+
+```
+make website
+```
+
+Then run the corresponding script:
+
+```
+make packages-screenshots
+```
+
+## Website
+
+The website is a CRA based application.
+
+## Deploy
+
+The website is hosted on GitHub pages.
+In order to deploy the website (plus storybook), you need to have access
+to the nivo github repository.
+There's a convenient command to deploy both the website & storybook:
+
+```
+make deploy-all
+```

README.md

@@ -102,9 +102,16 @@ please try the [components explorer](http://nivo.rocks/components).
 |                                                                                                    | [ResponsiveTreeMapHtml](http://nivo.rocks/treemap/html)                                                                                                            |
 |                                                                                                    | [TreeMapCanvas](http://nivo.rocks/treemap/canvas)                                                                                                                  |
 |                                                                                                    | [ResponsiveTreeMapCanvas](http://nivo.rocks/treemap/canvas)                                                                                                        |
-| [**@nivo/voronoi**](https://github.com/plouc/nivo/tree/master/packages/nivo-voronoi)               | [![@nivo/voronoi NPM version](https://img.shields.io/npm/v/@nivo/voronoi.svg?style=flat-square)](https://www.npmjs.com/package/@nivo/voronoi)                      |
+| [**@nivo/waffle**](https://github.com/plouc/nivo/tree/master/packages/nivo-voronoi)                | [![@nivo/voronoi NPM version](https://img.shields.io/npm/v/@nivo/voronoi.svg?style=flat-square)](https://www.npmjs.com/package/@nivo/voronoi)                      |
 |                                                                                                    | [Voronoi](http://nivo.rocks/voronoi)                                                                                                                               |
 |                                                                                                    | [ResponsiveVoronoi](http://nivo.rocks/voronoi)                                                                                                                     |
+| [**@nivo/waffle**](https://github.com/plouc/nivo/tree/master/packages/nivo-waffle)                 | [![@nivo/waffle NPM version](https://img.shields.io/npm/v/@nivo/waffle.svg?style=flat-square)](https://www.npmjs.com/package/@nivo/waffle)                         |
+|                                                                                                    | [Waffle](http://nivo.rocks/waffle)                                                                                                                                 |
+|                                                                                                    | [ResponsiveWaffle](http://nivo.rocks/waffle)                                                                                                                       |
+|                                                                                                    | [WaffleHtml](http://nivo.rocks/waffle/html)                                                                                                                        |
+|                                                                                                    | [ResponsiveWaffleHtml](http://nivo.rocks/waffle/html)                                                                                                              |
+|                                                                                                    | [WaffleCanvas](http://nivo.rocks/waffle/canvas)                                                                                                                    |
+|                                                                                                    | [ResponsiveWaffleCanvas](http://nivo.rocks/waffle/canvas)                                                                                                          |
 
 ## [HTTP API](https://github.com/plouc/nivo-api)
 

conf/base.yaml

@@ -1,90 +1,102 @@
 capture:
     baseUrl: http://localhost:3000
     pages:
-      - path: /#/bar
+      - path: /bar
         selector: .chart-tabs--chart
         output: ./packages/nivo-bar/doc/bar.png
 
-      - path: /#/bar/canvas
+      - path: /bar/canvas
         selector: .chart-tabs--chart
         output: ./packages/nivo-bar/doc/bar-canvas.png
 
-      - path: /#/calendar
+      - path: /calendar
         selector: .chart-tabs--chart
         output: ./packages/nivo-calendar/doc/calendar.png
 
-      - path: /#/chord
+      - path: /chord
         selector: .chart-tabs--chart
         output: ./packages/nivo-chord/doc/chord.png
 
-      - path: /#/chord/canvas
+      - path: /chord/canvas
         selector: .chart-tabs--chart
         output: ./packages/nivo-chord/doc/chord-canvas.png
 
-      - path: /#/bubble
+      - path: /bubble
         selector: .chart-tabs--chart
         output: ./packages/nivo-circle-packing/doc/bubble.png
 
-      - path: /#/bubble/html
+      - path: /bubble/html
         selector: .chart-tabs--chart
         output: ./packages/nivo-circle-packing/doc/bubble-html.png
 
-      - path: /#/bubble/canvas
+      - path: /bubble/canvas
         selector: .chart-tabs--chart
         output: ./packages/nivo-circle-packing/doc/bubble-canvas.png
 
-      - path: /#/heatmap
+      - path: /heatmap
         selector: .chart-tabs--chart
         output: ./packages/nivo-heatmap/doc/heatmap.png
 
-      - path: /#/heatmap/canvas
+      - path: /heatmap/canvas
         selector: .chart-tabs--chart
         output: ./packages/nivo-heatmap/doc/heatmap-canvas.png
 
-      - path: /#/line
+      - path: /line
         selector: .chart-tabs--chart
         output: ./packages/nivo-line/doc/line.png
 
-      - path: /#/pie
+      - path: /pie
         selector: .chart-tabs--chart
         output: ./packages/nivo-pie/doc/pie.png
 
-      - path: /#/radar
+      - path: /radar
         selector: .chart-tabs--chart
         output: ./packages/nivo-radar/doc/radar.png
 
-      - path: /#/sankey
+      - path: /sankey
         selector: .chart-tabs--chart
         output: ./packages/nivo-sankey/doc/sankey.png
 
-      - path: /#/scatterplot
+      - path: /scatterplot
         selector: .chart-tabs--chart
         output: ./packages/nivo-scatterplot/doc/scatterplot.png
 
-      - path: /#/scatterplot/canvas
+      - path: /scatterplot/canvas
         selector: .chart-tabs--chart
         output: ./packages/nivo-scatterplot/doc/scatterplot-canvas.png
 
-      - path: /#/stream
+      - path: /stream
         selector: .chart-tabs--chart
         output: ./packages/nivo-stream/doc/stream.png
 
-      - path: /#/sunburst
+      - path: /sunburst
         selector: .chart-tabs--chart
         output: ./packages/nivo-sunburst/doc/sunburst.png
 
-      - path: /#/treemap
+      - path: /treemap
         selector: .chart-tabs--chart
         output: ./packages/nivo-treemap/doc/treemap.png
 
-      - path: /#/treemap/html
+      - path: /treemap/html
         selector: .chart-tabs--chart
         output: ./packages/nivo-treemap/doc/treemap-html.png
 
-      - path: /#/treemap/canvas
+      - path: /treemap/canvas
         selector: .chart-tabs--chart
         output: ./packages/nivo-treemap/doc/treemap-canvas.png
 
-      - path: /#/voronoi
+      - path: /voronoi
         selector: .chart-tabs--chart
         output: ./packages/nivo-voronoi/doc/voronoi.png
+
+      - path: /waffle
+        selector: .chart-tabs--chart
+        output: ./packages/nivo-waffle/doc/waffle.png
+
+      - path: /waffle/html
+        selector: .chart-tabs--chart
+        output: ./packages/nivo-waffle/doc/waffle-html.png
+
+      - path: /waffle/canvas
+        selector: .chart-tabs--chart
+        output: ./packages/nivo-waffle/doc/waffle-canvas.png

packages/nivo-waffle/README.md

@@ -0,0 +1,21 @@
+# `@nivo/waffle`
+
+[![version](https://img.shields.io/npm/v/@nivo/waffle.svg?style=flat-square)](https://www.npmjs.com/package/@nivo/waffle)
+
+## Waffle
+
+[documentation](http://nivo.rocks/waffle)
+
+![Waffle](./doc/waffle.png)
+
+## WaffleHtml
+
+[documentation](http://nivo.rocks/waffle/html)
+
+![WaffleHtml](./doc/waffle-html.png)
+
+## WaffleCanvas
+
+[documentation](http://nivo.rocks/waffle/canvas)
+
+![WaffleCanvas](./doc/waffle-canvas.png)

packages/nivo-waffle/index.d.ts

@@ -0,0 +1,80 @@
+import { FillDirection, WaffleCanvasProps, WaffleSvgProps } from "@nivo/waffle";
+
+declare module '@nivo/waffle' {
+    export class Waffle extends React.Component<WaffleBaseProps & WaffleCommonProps & WaffleSvgProps & MotionProps & Dimensions>{}
+    export class WaffleHtml extends React.Component<WaffleBaseProps & WaffleCommonProps & MotionProps & Dimensions>{}
+    export class WaffleCanvas extends React.Component<WaffleBaseProps & WaffleCommonProps & WaffleCanvasProps & Dimensions>{}
+    export class ResponsiveWaffle extends React.Component<WaffleBaseProps & WaffleCommonProps & WaffleSvgProps &MotionProps>{}
+    export class ResponsiveWaffleHtml extends React.Component<WaffleBaseProps & WaffleCommonProps & MotionProps>{}
+    export class ResponsiveWaffleCanvas extends React.Component<WaffleBaseProps & WaffleCommonProps & WaffleCanvasProps>{}
+
+    export type WaffleBaseProps = {
+        total: number;
+        data: object[];
+        rows: number;
+        columns: number;
+    }
+
+    export type FillDirection =
+        | 'top'
+        | 'right'
+        | 'bottom'
+        | 'left'
+
+    export type WaffleCommonProps = Partial<{
+        // layout
+        margin: Box;
+        fillDirection: FillDirection;
+        padding: number;
+
+        // styling
+        theme: Theme;
+        colors: string | string[] | Function;
+        colorBy: string | Function;
+        emptyColor: string;
+        emptyOpacity: number;
+        borderWidth: number;
+        borderColor: string | Function;
+
+        // interactivity
+        isInteractive: boolean;
+        tooltipFormat: string | Function;
+        tooltip: Function;
+        onClick: Function;
+    }>
+
+    export type WaffleSvgProps = Partial<{
+        defs: Array<{ id: string }>;
+        fill: Array<{ id?: string, match: object | Function | '*' }>;
+    }>
+
+    export type WaffleCanvasProps = Partial<{
+        pixelRatio: number;
+    }>
+
+    export type MotionProps = Partial<{
+        animate: boolean;
+        motionDamping: number;
+        motionStiffness: number;
+    }>
+
+    export type Box = Partial<{
+        bottom: number;
+        left: number;
+        right: number;
+        top: number;
+    }>
+
+    export type Theme = Partial<{
+        tooltip: Partial<{
+            basic: React.CSSProperties;
+            container: React.CSSProperties;
+        }>;
+        labels: React.CSSProperties;
+    }>
+
+    export type Dimensions = {
+        height: number;
+        width: number;
+    }
+}

packages/nivo-waffle/index.js

@@ -0,0 +1 @@
+module.exports = require('./cjs/nivo-waffle')

packages/nivo-waffle/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@nivo/waffle",
+  "version": "0.36.0",
+  "license": "MIT",
+  "main": "./index.js",
+  "files": [
+    "README.md",
+    "index.js",
+    "index.d.ts",
+    "cjs/"
+  ],
+  "dependencies": {
+    "@nivo/core": "0.36.0",
+    "lodash": "^4.17.4",
+    "react-motion": "^0.5.2",
+    "recompose": "^0.26.0"
+  },
+  "peerDependencies": {
+    "prop-types": "^15.5.10",
+    "react": ">= 16.2.0 < 17.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}