v1.0.6

.eslintrc.js

@@ -7,23 +7,20 @@ module.exports = {
     'prettier/@typescript-eslint',
   ],
   parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaVersion: 2018,
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true,
+    }
+  },
   plugins: [
     '@typescript-eslint',
     'prettier',
     'react-hooks',
   ],
   rules: {
-    'prettier/prettier': [
-      'error',
-      {
-        bracketSpacing: true,
-        jsxBracketSameLine: true,
-        singleQuote: true,
-        tabWidth: 2,
-        trailingComma: 'all',
-        useTabs: false,
-      },
-    ],
+    '@typescript-eslint/explicit-function-return-type': 'off',
     'react-hooks/rules-of-hooks': 'error',
     'react-hooks/exhaustive-deps': 'warn',
   },
@@ -32,4 +29,4 @@ module.exports = {
       version: 'detect',
     },
   },
-};
+};

.npmignore

@@ -0,0 +1,2 @@
+public/
+node_modules/

.prettierrc.js

@@ -0,0 +1,8 @@
+module.exports = {
+  'bracketSpacing': true,
+  'jsxBracketSameLine': true,
+  'singleQuote': true,
+  'tabWidth': 2,
+  'trailingComma': 'all',
+  'useTabs': false,
+};

CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.0.6](https://github.com/chrisrzhou/react-wordcloud/compare/v1.0.5...v1.0.6) (2019-06-08)
+
+- Support deterministic behavior for randomn layout and colors by configuring the `options.deterministic` field. This makes testing and creating fixed wordcloud views convenient.
+- Expose Typescript types.
+- Use various `d3-*` packages instead of importing `d3` entirely.
+- Update `docz` and docs. Add Codesandbox examples.
+- Move prettier rules from `.eslintrc.js` to `.prettierrc.js`. This supports better formatting in MDX files with VSCode.
+
 ## [1.0.5](https://github.com/chrisrzhou/react-wordcloud/compare/v1.0.4...v1.0.5) (2019-03-16)
 
 ### New:

README.md

@@ -2,7 +2,7 @@
 
 Simple React + D3 wordcloud component with powerful features. Uses the [`d3-cloud`](https://github.com/jasondavies/d3-cloud) layout.
 
-![image](https://github.com/chrisrzhou/react-wordcloud/raw/master/wordcloud.png)
+![image](/public/wordcloud.png)
 
 ## Install
 
@@ -16,37 +16,28 @@ Note that `react-wordcloud` requires `react^16.8.3` as a peer dependency.
 
 ### Documented Examples
 
-View all documented examples and gallery of `react-globe` applications at https://react-globe.netlify.com/.
+View all documented examples and gallery of `react-wordcloud` applications at https://react-wordcloud.netlify.com/.
 
 ### Local Examples
 
 You can also run the examples locally:
 
 ```bash
-git clone git@github.com:chrisrzhou/react-globe
-
-cd react-globe
-yarn
-yarn dev
+git clone git@github.com:chrisrzhou/react-wordcloud
+cd react-wordcloud && yarn && yarn dev
 ```
 
 ### Basic Example (no props)
 
-<img src="/public/basic.png" width="500px" />
-
-[![Edit react-globe-simple](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/bgov9)
+[![Edit react-wordcloud-simple](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/bgov9)
 
 ### Responsive Example
 
-<img src="/public/basic.png" width="500px" />
-
-[![Edit react-globe-simple](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/55sb8)
+[![Edit react-wordcloud-simple](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/55sb8)
 
 ### Configurable Options Example
 
-<img src="/public/options.png" width="500px" />
-
-[![Edit react-globe-interactive](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/fnk8w)
+[![Edit react-wordcloud-interactive](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/fnk8w)
 
 ## Development
 
@@ -71,22 +62,15 @@ Feel free to contribute by submitting a pull request.
 
 ## Wordcloud Generator
 
-Create wordclouds using this wordcloud generator: https://chrisrzhou.github.io/wordcloud-generator/
+Create wordclouds using this wordcloud generator: https://wordcloud-generator.netlify.com/
 
 Features supported:
 
-- Editing and uploading text inputs
+- Edit and Upload text inputs
 - Various NLP methods (stopwords, ngrams)
 - Wordcloud configurations
 - Export/save/share wordclouds
 
-## TODOs
-
-- [ ] Update dependencies and `docz`
-- [ ] Expose types
-- [ ] Update CHANGELOG
-- [ ] Update `react-wordcloud-generator`
-
 ## Donate
 
 My projects will always be (ads-)free. I constantly learn from the community, so these projects are a way of giving back to the community. If you liked this project or find it useful, feel free to buy me a cup of coffee ☕️ through a small donation!

docs/ReactWordcloud.tsx

@@ -0,0 +1 @@
+export { default } from '../src';

docs/changelog.mdx

@@ -3,6 +3,6 @@ name: CHANGELOG
 route: /changelog
 ---
 
-import Changelog from "./../CHANGELOG.md";
+import Changelog from '../CHANGELOG.md';
 
 <Changelog />

docs/faq.mdx

@@ -3,8 +3,9 @@ name: FAQ
 route: /faq
 ---
 
-import { Playground } from "docz";
-import ReactWordcloud from "./../src";
+import { Playground } from 'docz';
+
+import ReactWordcloud from './ReactWordcloud';
 
 # FAQ
 
@@ -22,9 +23,9 @@ This issue happens when the most frequent word is also the **longest** word. For
   <ReactWordcloud
     size={[200, 200]}
     words={[
-      { text: "this_is_a_long_word_and_also_the_most_frequent", value: 45 },
-      { text: "some_word", value: 35 },
-      { text: "another_word", value: 20 }
+      { text: 'this_is_a_long_word_and_also_the_most_frequent', value: 45 },
+      { text: 'some_word', value: 35 },
+      { text: 'another_word', value: 20 },
     ]}
   />
 </Playground>

docs/introduction.mdx

@@ -3,6 +3,6 @@ name: README
 route: /
 ---
 
-import ReadMe from "./../README.md";
+import ReadMe from './../README.md';
 
 <ReadMe />

docs/props.mdx

@@ -0,0 +1,12 @@
+---
+name: Props
+route: /props
+---
+
+import { Props } from 'docz';
+
+import ReactWordcloud from './ReactWordcloud';
+
+# Props
+
+<Props of={ReactWordcloud} />

docs/usage/basic.mdx

@@ -4,9 +4,10 @@ route: /usage/basic
 menu: Usage
 ---
 
-import { Playground } from "docz";
-import ReactWordcloud from "./../../src";
-import words from "./words";
+import { Playground } from 'docz';
+
+import ReactWordcloud from '../ReactWordcloud';
+import words from './words';
 
 # Basic Example
 

docs/usage/callbacks.mdx

@@ -4,10 +4,11 @@ route: /usage/callbacks
 menu: Usage
 ---
 
-import { useState } from "react";
-import { Playground } from "docz";
-import ReactWordcloud from "./../../src";
-import words from "./words";
+import { Playground } from 'docz';
+import { useState } from 'react';
+
+import ReactWordcloud from '../ReactWordcloud';
+import words from './words';
 
 # Callbacks
 
@@ -24,11 +25,11 @@ In the example below, we can pass custom `getWordColor` and `getWordTooltip` cal
     words={words}
     callbacks={{
       getWordColor: ({ value }) => {
-        return value > 50 ? "blue" : "red";
+        return value > 50 ? 'blue' : 'red';
       },
       getWordTooltip: ({ text, value }) => {
         return value > 50 ? `${text.toUpperCase()} (> 50)` : `${text} (<= 50)`;
-      }
+      },
     }}
   />
 </Playground>
@@ -42,14 +43,14 @@ You can pass callbacks such as `onWordClick`, `onWordMouseEnter` and `onWordMous
     function getCallback(callback) {
       return function(word) {
         console.log(
-          `Callback: "${callback}". Word: ${JSON.stringify(word, null, 2)}`
+          `Callback: "${callback}". Word: ${JSON.stringify(word, null, 2)}`,
         );
       };
     }
     const callbacks = {
-      onWordClick: getCallback("onWordClick"),
-      onWordMouseOut: getCallback("onWordMouseOut"),
-      onWordMouseOver: getCallback("onWordMouseOver")
+      onWordClick: getCallback('onWordClick'),
+      onWordMouseOut: getCallback('onWordMouseOut'),
+      onWordMouseOver: getCallback('onWordMouseOver'),
     };
     return <ReactWordcloud words={words} callbacks={callbacks} />;
   }}

docs/usage/options.mdx

@@ -4,9 +4,10 @@ route: /usage/options
 menu: Usage
 ---
 
-import { Playground } from "docz";
-import ReactWordcloud from "./../../src";
-import words from "./words";
+import { Playground } from 'docz';
+
+import ReactWordcloud from '../ReactWordcloud';
+import words from './words';
 
 # Options
 
@@ -19,7 +20,7 @@ You can customize many visual and layout properties of `ReactWordcloud` by using
 <Playground>
   <ReactWordcloud
     options={{
-      colors: ["#1f77b4", "#9467bd", "#8c564b"]
+      colors: ['#1f77b4', '#9467bd', '#8c564b'],
     }}
     words={words}
   />
@@ -32,7 +33,7 @@ If enabled, will produce the same output given a certain input. In contrast, the
 <Playground>
   <ReactWordcloud
     options={{
-      deterministic: true
+      deterministic: true,
     }}
     words={words}
   />
@@ -45,10 +46,10 @@ Configure wordfont styles using the `fontFamily`, `fontSizes`, `fontStyle`, `fon
 <Playground>
   <ReactWordcloud
     options={{
-      fontFamily: "courier new",
+      fontFamily: 'courier new',
       fontSizes: [10, 20],
-      fontStyle: "italic",
-      fontWeight: "bold"
+      fontStyle: 'italic',
+      fontWeight: 'bold',
     }}
     words={words}
   />
@@ -62,7 +63,7 @@ By default `ReactWordcloud` will apply random rotations if the `rotations` optio
   <ReactWordcloud
     options={{
       rotations: 3,
-      rotationAngles: [0, 90]
+      rotationAngles: [0, 90],
     }}
     words={words}
   />
@@ -75,8 +76,8 @@ Configure the wordcloud layout by using the `scale`, `spiral` options.
 <Playground>
   <ReactWordcloud
     options={{
-      scale: "log",
-      spiral: "rectangular"
+      scale: 'log',
+      spiral: 'rectangular',
     }}
     words={words}
   />
@@ -91,25 +92,25 @@ Use the code editor to edit and play around with some of these options!
     words={words}
     options={{
       colors: [
-        "#1f77b4",
-        "#ff7f0e",
-        "#2ca02c",
-        "#d62728",
-        "#9467bd",
-        "#8c564b"
+        '#1f77b4',
+        '#ff7f0e',
+        '#2ca02c',
+        '#d62728',
+        '#9467bd',
+        '#8c564b',
       ],
       enableTooltip: true,
       deterministic: false,
-      fontFamily: "impact",
+      fontFamily: 'impact',
       fontSizes: [5, 60],
-      fontStyle: "normal",
-      fontWeight: "normal",
+      fontStyle: 'normal',
+      fontWeight: 'normal',
       padding: 1,
       rotations: 3,
       rotationAngles: [0, 90],
-      scale: "sqrt",
-      spiral: "archimedean",
-      transitionDuration: 1000
+      scale: 'sqrt',
+      spiral: 'archimedean',
+      transitionDuration: 1000,
     }}
   />
 </Playground>