react-d3-cloud-modern 1.0.0

package/.babelrc

@@ -0,0 +1,11 @@
+{
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react",
+    "@babel/preset-typescript"
+  ],
+  "plugins": [
+    "@babel/plugin-proposal-class-properties",
+    "@babel/plugin-proposal-object-rest-spread"
+  ]
+}

package/.idea/inspectionProfiles/Project_Default.xml

@@ -0,0 +1,40 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="DuplicatedCode" enabled="false" level="WEAK WARNING" enabled_by_default="false" />
+    <inspection_tool class="HttpUrlsUsage" enabled="false" level="WEAK WARNING" enabled_by_default="false" />
+    <inspection_tool class="PyBroadExceptionInspection" enabled="false" level="WEAK WARNING" enabled_by_default="false" />
+    <inspection_tool class="PyPackageRequirementsInspection" enabled="true" level="WARNING" enabled_by_default="true">
+      <option name="ignoredPackages">
+        <value>
+          <list size="3">
+            <item index="0" class="java.lang.String" itemvalue="langchain_experimental" />
+            <item index="1" class="java.lang.String" itemvalue="langchain_decorators" />
+            <item index="2" class="java.lang.String" itemvalue="huggingface_hub" />
+          </list>
+        </value>
+      </option>
+    </inspection_tool>
+    <inspection_tool class="PyPep8Inspection" enabled="true" level="WEAK WARNING" enabled_by_default="true">
+      <option name="ignoredErrors">
+        <list>
+          <option value="E501" />
+          <option value="E722" />
+          <option value="W605" />
+        </list>
+      </option>
+    </inspection_tool>
+    <inspection_tool class="PyPep8NamingInspection" enabled="true" level="WEAK WARNING" enabled_by_default="true">
+      <option name="ignoredErrors">
+        <list>
+          <option value="N803" />
+        </list>
+      </option>
+    </inspection_tool>
+    <inspection_tool class="SpellCheckingInspection" enabled="false" level="TYPO" enabled_by_default="false">
+      <option name="processCode" value="true" />
+      <option name="processLiterals" value="true" />
+      <option name="processComments" value="true" />
+    </inspection_tool>
+  </profile>
+</component>

package/.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/react-d3-cloud-modern.iml" filepath="$PROJECT_DIR$/.idea/react-d3-cloud-modern.iml" />
+    </modules>
+  </component>
+</project>

package/.idea/react-d3-cloud-modern.iml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/temp" />
+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

package/.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+  </component>
+</project>

package/LICENSE

@@ -0,0 +1,22 @@
+The MIT License (MIT)
+
+Copyright (c) 2016-present Yoctol (github.com/Yoctol/react-d3-cloud)
+Copyright (c) 2024 Carlos Alvidrez (github.com/carlosalvidrez/react-d3-cloud-modern)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/README.md

@@ -0,0 +1,212 @@
+# react-d3-cloud-modern
+
+[![npm version](https://badge.fury.io/js/react-d3-cloud.svg)](https://badge.fury.io/js/react-d3-cloud)
+[![Build Status](https://github.com/Yoctol/react-d3-cloud/workflows/CI/badge.svg?branch=master)](https://github.com/Yoctol/react-d3-cloud/actions?query=branch%3Amaster)
+
+A word cloud react component built with [d3-cloud](https://github.com/jasondavies/d3-cloud).
+
+Forked from [react-d3-cloud] in order to modernize its dependency on libraries with multiple high-level vulnerabilities.
+
+![image](https://cloud.githubusercontent.com/assets/6868283/20619528/fa83334c-b32f-11e6-81dd-6fe4fa6c52d9.png)
+
+## Installation
+
+```sh
+npm install react-d3-cloud-modern
+```
+
+## Usage
+
+Simple:
+
+```jsx
+import React from 'react';
+import { render } from 'react-dom';
+import WordCloud from 'react-d3-cloud-modern';
+
+const data = [
+  { text: 'Hey', value: 1000 },
+  { text: 'lol', value: 200 },
+  { text: 'first impression', value: 800 },
+  { text: 'very cool', value: 1000000 },
+  { text: 'duck', value: 10 },
+];
+
+render(<WordCloud data={data} />, document.getElementById('root'));
+```
+
+More configuration:
+
+```jsx
+import React from 'react';
+import { render } from 'react-dom';
+import WordCloud from 'react-d3-cloud-modern';
+import { scaleOrdinal } from 'd3-scale';
+import { schemeCategory10 } from 'd3-scale-chromatic';
+
+const data = [
+  { text: 'Hey', value: 1000 },
+  { text: 'lol', value: 200 },
+  { text: 'first impression', value: 800 },
+  { text: 'very cool', value: 1000000 },
+  { text: 'duck', value: 10 },
+];
+
+const schemeCategory10ScaleOrdinal = scaleOrdinal(schemeCategory10);
+
+render(
+  <WordCloud
+    data={data}
+    width={500}
+    height={500}
+    font="Times"
+    fontStyle="italic"
+    fontWeight="bold"
+    fontSize={(word) => Math.log2(word.value) * 5}
+    spiral="rectangular"
+    rotate={(word) => word.value % 360}
+    padding={5}
+    random={Math.random}
+    fill={(d, i) => schemeCategory10ScaleOrdinal(i)}
+    onWordClick={(event, d) => {
+      console.log(`onWordClick: ${d.text}`);
+    }}
+    onWordMouseOver={(event, d) => {
+      console.log(`onWordMouseOver: ${d.text}`);
+    }}
+    onWordMouseOut={(event, d) => {
+      console.log(`onWordMouseOut: ${d.text}`);
+    }}
+  />,
+  document.getElementById('root')
+);
+```
+
+Please checkout [demo](https://codesandbox.io/embed/react-d3-cloud-demo-forked-50wzl)
+
+for more detailed props, please refer to below:
+
+## Props
+
+| name            | description                                                                                                                                                                                                              | type                                                                 | required | default                                     |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------- | -------- | ------------------------------------------- |
+| data            | The words array                                                                                                                                                                                                          | `{ text: string, value: number }>[]`                                 | ✓        |
+| width           | Width of the layout (px)                                                                                                                                                                                                 | `number`                                                             |          | `700`                                       |
+| height          | Height of the layout (px)                                                                                                                                                                                                | `number`                                                             |          | `600`                                       |
+| font            | The font accessor function, which indicates the font face for each word. A constant may be specified instead of a function.                                                                                              | `string \| (d) => string`                                            |          | `'serif'`                                   |
+| fontStyle       | The fontStyle accessor function, which indicates the font style for each word. A constant may be specified instead of a function.                                                                                        | `string \| (d) => string`                                            |          | `'normal'`                                  |
+| fontWeight      | The fontWeight accessor function, which indicates the font weight for each word. A constant may be specified instead of a function.                                                                                      | `string \| number \| (d) => string \| number`                        |          | `'normal'`                                  |
+| fontSize        | The fontSize accessor function, which indicates the numerical font size for each word.                                                                                                                                   | `(d) => number`                                                      |          | `(d) => Math.sqrt(d.value)`                 |
+| rotate          | The rotate accessor function, which indicates the rotation angle (in degrees) for each word.                                                                                                                             | `(d) => number`                                                      |          | `() => (~~(Math.random() * 6) - 3) * 30`    |
+| spiral          | The current type of spiral used for positioning words. This can either be one of the two built-in spirals, "archimedean" and "rectangular", or an arbitrary spiral generator can be used                                 | `'archimedean' \| 'rectangular' \| ([width, height]) => t => [x, y]` |          | `'archimedean'`                             |
+| padding         | The padding accessor function, which indicates the numerical padding for each word.                                                                                                                                      | `number \| (d) => number`                                            |          | `1`                                         |
+| random          | The internal random number generator, used for selecting the initial position of each word, and the clockwise/counterclockwise direction of the spiral for each word. This should return a number in the range `[0, 1)`. | `(d) => number`                                                      |          | `Math.random`                               |
+| fill            | The fill accessor function, which indicates the color for each word.                                                                                                                                                     | `(d, i) => string`                                                   |          | `(d, i) => schemeCategory10ScaleOrdinal(i)` |
+| onWordClick     | The function will be called when `click` event is triggered on a word                                                                                                                                                    | `(event, d) => {}`                                                   |          | null                                        |
+| onWordMouseOver | The function will be called when `mouseover` event is triggered on a word                                                                                                                                                | `(event, d) => {}`                                                   |          | null                                        |
+| onWordMouseOut  | The function will be called when `mouseout` event is triggered on a word                                                                                                                                                 | `(event, d) => {}`                                                   |          | null                                        |
+
+## FAQ
+
+### How to Use with Next.js/SSR
+
+To make `<WordCloud />` work with Server-Side Rendering (SSR), you need to avoid rendering it on the server:
+
+```js
+{
+  typeof window !== 'undefined' && <WordCloud data={data} />;
+}
+```
+
+### How to Avoid Unnecessary Re-render
+
+As of version 0.10.1, `<WordCloud />` has been wrapped by `React.memo()` and deep equal comparison under the hood to avoid unnecessary re-render. All you need to do is to make your function props deep equal comparable using `useCallback()`:
+
+```js
+import React, { useCallback } from 'react';
+import { render } from 'react-dom';
+import WordCloud from 'react-d3-cloud-modern';
+import { scaleOrdinal } from 'd3-scale';
+import { schemeCategory10 } from 'd3-scale-chromatic';
+
+function App() {
+  const data = [
+    { text: 'Hey', value: 1000 },
+    { text: 'lol', value: 200 },
+    { text: 'first impression', value: 800 },
+    { text: 'very cool', value: 1000000 },
+    { text: 'duck', value: 10 },
+  ];
+
+  const fontSize = useCallback((word) => Math.log2(word.value) * 5, []);
+  const rotate = useCallback((word) => word.value % 360, []);
+  const fill = useCallback((d, i) => scaleOrdinal(schemeCategory10)(i), []);
+  const onWordClick = useCallback((word) => {
+    console.log(`onWordClick: ${word}`);
+  }, []);
+  const onWordMouseOver = useCallback((word) => {
+    console.log(`onWordMouseOver: ${word}`);
+  }, []);
+  const onWordMouseOut = useCallback((word) => {
+    console.log(`onWordMouseOut: ${word}`);
+  }, []);
+
+  return (
+    <WordCloud
+      data={data}
+      width={500}
+      height={500}
+      font="Times"
+      fontStyle="italic"
+      fontWeight="bold"
+      fontSize={fontSize}
+      spiral="rectangular"
+      rotate={rotate}
+      padding={5}
+      random={Math.random}
+      fill={fill}
+      onWordClick={onWordClick}
+      onWordMouseOver={onWordMouseOver}
+      onWordMouseOut={onWordMouseOut}
+    />
+  );
+);
+```
+
+## Build
+
+```sh
+npm run build
+```
+
+## Test
+
+### pre-install
+
+#### Mac OS X
+
+```sh
+brew install pkg-config cairo pango libpng jpeg giflib librsvg
+npm install
+```
+
+#### Ubuntu and Other Debian Based Systems
+
+```sh
+sudo apt-get update
+sudo apt-get install libcairo2-dev libjpeg8-dev libpango1.0-dev libgif-dev build-essential g++
+npm install
+```
+
+For more details, please check out [Installation guides](https://github.com/Automattic/node-canvas/wiki) at node-canvas wiki.
+
+### Run Tests
+
+```sh
+npm test
+```
+
+## License
+
+MIT © [Yoctol](https://github.com/Yoctol/react-d3-cloud) 
+| [carlosalvidrez](https://github.com/carlosalvidrez/react-d3-cloud-modern)

package/babel.config.js

@@ -0,0 +1,11 @@
+module.exports = {
+  presets: [
+    "@babel/preset-env",
+    "@babel/preset-react",
+    "@babel/preset-typescript"
+  ],
+  plugins: [
+    "@babel/plugin-proposal-class-properties",
+    "@babel/plugin-proposal-object-rest-spread"
+  ]
+};

package/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>React D3 Could Modern demo</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script src="demo/bundle.js"></script>
+  </body>
+</html>

package/jest.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  testEnvironment: 'jsdom',
+  setupFilesAfterEnv: ['./test/jest-setup.ts'],
+  testPathIgnorePatterns: ['/node_modules/', '/examples/', '/lib/'],
+  timers: 'fake',
+  resetModules: true,
+  resetMocks: true,
+};

package/lib/WordCloud.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+import cloud from 'd3-cloud';
+import { BaseType, ValueFn } from 'd3-selection';
+interface Datum {
+    text: string;
+    value: number;
+}
+export interface Word extends cloud.Word {
+    text: string;
+    value: number;
+}
+type WordCloudProps = {
+    data: Datum[];
+    width?: number;
+    height?: number;
+    font?: string | ((word: Word, index: number) => string);
+    fontStyle?: string | ((word: Word, index: number) => string);
+    fontWeight?: string | number | ((word: Word, index: number) => string | number);
+    fontSize?: number | ((word: Word, index: number) => number);
+    rotate?: number | ((word: Word, index: number) => number);
+    spiral?: 'archimedean' | 'rectangular' | ((size: [number, number]) => (t: number) => [number, number]);
+    padding?: number | ((word: Word, index: number) => number);
+    random?: () => number;
+    fill?: ValueFn<SVGTextElement, Word, string>;
+    onWordClick?: (this: BaseType, event: any, d: Word) => void;
+    onWordMouseOver?: (this: BaseType, event: any, d: Word) => void;
+    onWordMouseOut?: (this: BaseType, event: any, d: Word) => void;
+};
+declare function WordCloud({ data, width, height, font, fontStyle, fontWeight, fontSize, rotate, spiral, padding, random, fill, onWordClick, onWordMouseOver, onWordMouseOut, }: WordCloudProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+declare const _default: React.MemoExoticComponent<typeof WordCloud>;
+export default _default;

package/lib/WordCloud.js

@@ -0,0 +1,99 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactFauxDom = _interopRequireDefault(require("react-faux-dom"));
+var _d3Cloud = _interopRequireDefault(require("d3-cloud"));
+var _reactFastCompare = _interopRequireDefault(require("react-fast-compare"));
+var _d3Selection = require("d3-selection");
+var _d3Scale = require("d3-scale");
+var _d3ScaleChromatic = require("d3-scale-chromatic");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+var defaultScaleOrdinal = (0, _d3Scale.scaleOrdinal)(_d3ScaleChromatic.schemeCategory10);
+function WordCloud(_ref) {
+  var data = _ref.data,
+    _ref$width = _ref.width,
+    width = _ref$width === void 0 ? 700 : _ref$width,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? 600 : _ref$height,
+    _ref$font = _ref.font,
+    font = _ref$font === void 0 ? 'serif' : _ref$font,
+    _ref$fontStyle = _ref.fontStyle,
+    fontStyle = _ref$fontStyle === void 0 ? 'normal' : _ref$fontStyle,
+    _ref$fontWeight = _ref.fontWeight,
+    fontWeight = _ref$fontWeight === void 0 ? 'normal' : _ref$fontWeight,
+    _ref$fontSize = _ref.fontSize,
+    fontSize = _ref$fontSize === void 0 ? function (d) {
+      return Math.sqrt(d.value);
+    } : _ref$fontSize,
+    _ref$rotate = _ref.rotate,
+    rotate = _ref$rotate === void 0 ? function () {
+      return (~~(Math.random() * 6) - 3) * 30;
+    } : _ref$rotate,
+    _ref$spiral = _ref.spiral,
+    spiral = _ref$spiral === void 0 ? 'archimedean' : _ref$spiral,
+    _ref$padding = _ref.padding,
+    padding = _ref$padding === void 0 ? 1 : _ref$padding,
+    _ref$random = _ref.random,
+    random = _ref$random === void 0 ? Math.random : _ref$random,
+    _ref$fill = _ref.fill,
+    fill = _ref$fill === void 0 ? function (_, i) {
+      return defaultScaleOrdinal(i);
+    } : _ref$fill,
+    onWordClick = _ref.onWordClick,
+    onWordMouseOver = _ref.onWordMouseOver,
+    onWordMouseOut = _ref.onWordMouseOut;
+  var elementRef = (0, _react.useRef)();
+  if (!elementRef.current) {
+    elementRef.current = _reactFauxDom["default"].createElement('div');
+  }
+  var el = elementRef.current;
+
+  // clear old words
+  (0, _d3Selection.select)(el).selectAll('*').remove();
+
+  // render based on new data
+  var layout = (0, _d3Cloud["default"])().words(data).size([width, height]).font(font).fontStyle(fontStyle).fontWeight(fontWeight).fontSize(fontSize).rotate(rotate).spiral(spiral).padding(padding).random(random).on('end', function (words) {
+    var _layout$size = layout.size(),
+      _layout$size2 = _slicedToArray(_layout$size, 2),
+      w = _layout$size2[0],
+      h = _layout$size2[1];
+    var texts = (0, _d3Selection.select)(el).append('svg').attr('viewBox', "0 0 ".concat(w, " ").concat(h)).attr('preserveAspectRatio', 'xMinYMin meet').append('g').attr('transform', "translate(".concat(w / 2, ",").concat(h / 2, ")")).selectAll('text').data(words).enter().append('text').style('font-family', function (d) {
+      return d.font;
+    }).style('font-style', function (d) {
+      return d.style;
+    }).style('font-weight', function (d) {
+      return d.weight;
+    }).style('font-size', function (d) {
+      return "".concat(d.size, "px");
+    }).style('fill', fill).attr('text-anchor', 'middle').attr('transform', function (d) {
+      return "translate(".concat([d.x, d.y], ")rotate(").concat(d.rotate, ")");
+    }).text(function (d) {
+      return d.text;
+    });
+    if (onWordClick) {
+      texts.on('click', onWordClick);
+    }
+    if (onWordMouseOver) {
+      texts.on('mouseover', onWordMouseOver);
+    }
+    if (onWordMouseOut) {
+      texts.on('mouseout', onWordMouseOut);
+    }
+  });
+  layout.start();
+  return el.toReact();
+}
+var _default = exports["default"] = /*#__PURE__*/_react["default"].memo(WordCloud, _reactFastCompare["default"]);

package/lib/esm/WordCloud.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+import cloud from 'd3-cloud';
+import { BaseType, ValueFn } from 'd3-selection';
+interface Datum {
+    text: string;
+    value: number;
+}
+export interface Word extends cloud.Word {
+    text: string;
+    value: number;
+}
+type WordCloudProps = {
+    data: Datum[];
+    width?: number;
+    height?: number;
+    font?: string | ((word: Word, index: number) => string);
+    fontStyle?: string | ((word: Word, index: number) => string);
+    fontWeight?: string | number | ((word: Word, index: number) => string | number);
+    fontSize?: number | ((word: Word, index: number) => number);
+    rotate?: number | ((word: Word, index: number) => number);
+    spiral?: 'archimedean' | 'rectangular' | ((size: [number, number]) => (t: number) => [number, number]);
+    padding?: number | ((word: Word, index: number) => number);
+    random?: () => number;
+    fill?: ValueFn<SVGTextElement, Word, string>;
+    onWordClick?: (this: BaseType, event: any, d: Word) => void;
+    onWordMouseOver?: (this: BaseType, event: any, d: Word) => void;
+    onWordMouseOut?: (this: BaseType, event: any, d: Word) => void;
+};
+declare function WordCloud({ data, width, height, font, fontStyle, fontWeight, fontSize, rotate, spiral, padding, random, fill, onWordClick, onWordMouseOver, onWordMouseOut, }: WordCloudProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+declare const _default: React.MemoExoticComponent<typeof WordCloud>;
+export default _default;

package/lib/esm/WordCloud.js

@@ -0,0 +1,99 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactFauxDom = _interopRequireDefault(require("react-faux-dom"));
+var _d3Cloud = _interopRequireDefault(require("d3-cloud"));
+var _reactFastCompare = _interopRequireDefault(require("react-fast-compare"));
+var _d3Selection = require("d3-selection");
+var _d3Scale = require("d3-scale");
+var _d3ScaleChromatic = require("d3-scale-chromatic");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+var defaultScaleOrdinal = (0, _d3Scale.scaleOrdinal)(_d3ScaleChromatic.schemeCategory10);
+function WordCloud(_ref) {
+  var data = _ref.data,
+    _ref$width = _ref.width,
+    width = _ref$width === void 0 ? 700 : _ref$width,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? 600 : _ref$height,
+    _ref$font = _ref.font,
+    font = _ref$font === void 0 ? 'serif' : _ref$font,
+    _ref$fontStyle = _ref.fontStyle,
+    fontStyle = _ref$fontStyle === void 0 ? 'normal' : _ref$fontStyle,
+    _ref$fontWeight = _ref.fontWeight,
+    fontWeight = _ref$fontWeight === void 0 ? 'normal' : _ref$fontWeight,
+    _ref$fontSize = _ref.fontSize,
+    fontSize = _ref$fontSize === void 0 ? function (d) {
+      return Math.sqrt(d.value);
+    } : _ref$fontSize,
+    _ref$rotate = _ref.rotate,
+    rotate = _ref$rotate === void 0 ? function () {
+      return (~~(Math.random() * 6) - 3) * 30;
+    } : _ref$rotate,
+    _ref$spiral = _ref.spiral,
+    spiral = _ref$spiral === void 0 ? 'archimedean' : _ref$spiral,
+    _ref$padding = _ref.padding,
+    padding = _ref$padding === void 0 ? 1 : _ref$padding,
+    _ref$random = _ref.random,
+    random = _ref$random === void 0 ? Math.random : _ref$random,
+    _ref$fill = _ref.fill,
+    fill = _ref$fill === void 0 ? function (_, i) {
+      return defaultScaleOrdinal(i);
+    } : _ref$fill,
+    onWordClick = _ref.onWordClick,
+    onWordMouseOver = _ref.onWordMouseOver,
+    onWordMouseOut = _ref.onWordMouseOut;
+  var elementRef = (0, _react.useRef)();
+  if (!elementRef.current) {
+    elementRef.current = _reactFauxDom["default"].createElement('div');
+  }
+  var el = elementRef.current;
+
+  // clear old words
+  (0, _d3Selection.select)(el).selectAll('*').remove();
+
+  // render based on new data
+  var layout = (0, _d3Cloud["default"])().words(data).size([width, height]).font(font).fontStyle(fontStyle).fontWeight(fontWeight).fontSize(fontSize).rotate(rotate).spiral(spiral).padding(padding).random(random).on('end', function (words) {
+    var _layout$size = layout.size(),
+      _layout$size2 = _slicedToArray(_layout$size, 2),
+      w = _layout$size2[0],
+      h = _layout$size2[1];
+    var texts = (0, _d3Selection.select)(el).append('svg').attr('viewBox', "0 0 ".concat(w, " ").concat(h)).attr('preserveAspectRatio', 'xMinYMin meet').append('g').attr('transform', "translate(".concat(w / 2, ",").concat(h / 2, ")")).selectAll('text').data(words).enter().append('text').style('font-family', function (d) {
+      return d.font;
+    }).style('font-style', function (d) {
+      return d.style;
+    }).style('font-weight', function (d) {
+      return d.weight;
+    }).style('font-size', function (d) {
+      return "".concat(d.size, "px");
+    }).style('fill', fill).attr('text-anchor', 'middle').attr('transform', function (d) {
+      return "translate(".concat([d.x, d.y], ")rotate(").concat(d.rotate, ")");
+    }).text(function (d) {
+      return d.text;
+    });
+    if (onWordClick) {
+      texts.on('click', onWordClick);
+    }
+    if (onWordMouseOver) {
+      texts.on('mouseover', onWordMouseOver);
+    }
+    if (onWordMouseOut) {
+      texts.on('mouseout', onWordMouseOut);
+    }
+  });
+  layout.start();
+  return el.toReact();
+}
+var _default = exports["default"] = /*#__PURE__*/_react["default"].memo(WordCloud, _reactFastCompare["default"]);

package/lib/esm/index.d.ts

@@ -0,0 +1,2 @@
+import WordCloud from './WordCloud';
+export default WordCloud;

package/lib/esm/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _WordCloud = _interopRequireDefault(require("./WordCloud"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var _default = exports["default"] = _WordCloud["default"];

package/lib/index.d.ts

@@ -0,0 +1,2 @@
+import WordCloud from './WordCloud';
+export default WordCloud;

package/lib/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _WordCloud = _interopRequireDefault(require("./WordCloud"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var _default = exports["default"] = _WordCloud["default"];

package/lint-staged.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  '*package.json': ['prettier-package-json --write'],
+  '*.(js|ts)': ['eslint --fix'],
+  '*.(md|json|yml)': ['prettier --write'],
+};

package/package.json

@@ -0,0 +1,95 @@
+{
+  "name": "react-d3-cloud-modern",
+  "version": "1.0.0",
+  "description": "A word cloud component using d3-cloud",
+  "license": "MIT",
+  "author": "cph",
+  "homepage": "https://github.com/carlosalvidrez/react-d3-cloud-modern",
+  "repository": "carlosalvidrez/react-d3-cloud-modern",
+  "bugs": {
+    "url": "https://github.com/carlosalvidrez/react-d3-cloud-modern/issues"
+  },
+  "exports": {
+    "import": "./lib/esm/index.js",
+    "require": "./lib/index.js"
+  },
+  "main": "lib/index.js",
+  "scripts": {
+    "build": "npm run clean && npm run build:cjs && npm run build:esm",
+    "build:cjs": "babel src -d lib --extensions '.ts,.tsx' --ignore '**/__tests__/**' && tsc -p tsconfig.build.json -m commonjs --emitDeclarationOnly",
+    "build:esm": "cross-env ESM=true babel src -d lib/esm --extensions '.ts,.tsx' --ignore '**/__tests__/**' && tsc -p tsconfig.build.json -m esnext --emitDeclarationOnly --outDir lib/esm",
+    "check": "tsc --noEmit",
+    "clean": "rimraf lib",
+    "lint": "eslint .",
+    "lint:fix": "npm run lint -- --fix",
+    "lint:staged": "lint-staged",
+    "prepare": "husky install",
+    "prepublishOnly": "npm run build",
+    "test": "npm run lint && npm run testonly",
+    "testonly": "jest",
+    "testonly:watch": "npm run testonly -- --watch",
+    "prettier": "prettier --write --list-different .",
+    "prettier:check": "prettier --check .",
+    "preversion": "npm test"
+  },
+  "types": "lib/index.d.ts",
+  "dependencies": {
+    "d3-cloud": "^1.2.5",
+    "d3-scale": "^3.3.0",
+    "d3-scale-chromatic": "^2.0.0",
+    "d3-selection": "^2.0.0",
+    "prop-types": "^15.7.2",
+    "react-fast-compare": "^3.2.0",
+    "react-faux-dom": "^4.5.0"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0-0 || ^18.0.0-0",
+    "react-dom": "^16.8.0 || ^17.0.0-0 || ^18.0.0-0"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.14.8",
+    "@babel/core": "^7.15.0",
+    "@babel/preset-env": "^7.15.0",
+    "@babel/preset-react": "^7.14.5",
+    "@babel/preset-typescript": "^7.24.7",
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^12.1.1",
+    "@types/d3-cloud": "^1.2.5",
+    "@types/d3-scale": "^4.0.1",
+    "@types/d3-scale-chromatic": "^3.0.0",
+    "@types/d3-selection": "^3.0.1",
+    "@types/jest": "^27.0.1",
+    "@types/react": "^17.0.80",
+    "@types/react-dom": "^18.3.0",
+    "@types/react-faux-dom": "^4.1.5",
+    "@typescript-eslint/eslint-plugin": "^4.29.3",
+    "@typescript-eslint/parser": "^4.29.3",
+    "babel-eslint": "^10.1.0",
+    "babel-plugin-typescript-to-proptypes": "^1.4.2",
+    "canvas": "^2.8.0",
+    "cross-env": "^7.0.3",
+    "eslint": "^7.32.0",
+    "eslint-config-yoctol": "^0.26.2",
+    "eslint-plugin-import": "^2.24.0",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-prettier": "^3.4.0",
+    "eslint-plugin-react": "^7.25.2",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "eslint-plugin-sort-imports-es6-autofix": "^0.6.0",
+    "husky": "^7.0.1",
+    "jest": "^27.0.6",
+    "lint-staged": "^11.1.2",
+    "prettier": "^2.3.2",
+    "prettier-package-json": "^2.6.0",
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0",
+    "regenerator-runtime": "^0.13.9",
+    "rimraf": "^3.0.2",
+    "typescript": "^4.4.2"
+  },
+  "keywords": [
+    "d3",
+    "react",
+    "word-cloud"
+  ]
+}

package/prettier.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+  singleQuote: true,
+  trailingComma: 'es5',
+};

package/src/WordCloud.tsx

@@ -0,0 +1,138 @@
+import React, { useRef } from 'react';
+import ReactFauxDom from 'react-faux-dom';
+import cloud from 'd3-cloud';
+import isDeepEqual from 'react-fast-compare';
+import { BaseType, ValueFn, select } from 'd3-selection';
+import { scaleOrdinal } from 'd3-scale';
+import { schemeCategory10 } from 'd3-scale-chromatic';
+
+interface Datum {
+  text: string;
+  value: number;
+}
+
+export interface Word extends cloud.Word {
+  text: string;
+  value: number;
+}
+
+type WordCloudProps = {
+  data: Datum[];
+  width?: number;
+  height?: number;
+  font?: string | ((word: Word, index: number) => string);
+  fontStyle?: string | ((word: Word, index: number) => string);
+  fontWeight?:
+    | string
+    | number
+    | ((word: Word, index: number) => string | number);
+  fontSize?: number | ((word: Word, index: number) => number);
+  rotate?: number | ((word: Word, index: number) => number);
+  spiral?:
+    | 'archimedean'
+    | 'rectangular'
+    | ((size: [number, number]) => (t: number) => [number, number]);
+  padding?: number | ((word: Word, index: number) => number);
+  random?: () => number;
+  fill?: ValueFn<SVGTextElement, Word, string>;
+  onWordClick?: (this: BaseType, event: any, d: Word) => void;
+  onWordMouseOver?: (this: BaseType, event: any, d: Word) => void;
+  onWordMouseOut?: (this: BaseType, event: any, d: Word) => void;
+};
+
+const defaultScaleOrdinal = scaleOrdinal(schemeCategory10);
+
+function WordCloud({
+  data,
+  width = 700,
+  height = 600,
+  font = 'serif',
+  fontStyle = 'normal',
+  fontWeight = 'normal',
+  fontSize = (d) => Math.sqrt(d.value),
+  // eslint-disable-next-line no-bitwise
+  rotate = () => (~~(Math.random() * 6) - 3) * 30,
+  spiral = 'archimedean',
+  padding = 1,
+  random = Math.random,
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore The ordinal function should accept number
+  fill = (_, i) => defaultScaleOrdinal(i),
+  onWordClick,
+  onWordMouseOver,
+  onWordMouseOut,
+}: WordCloudProps) {
+  const elementRef = useRef<ReactFauxDom.Element>();
+
+  if (!elementRef.current) {
+    elementRef.current = ReactFauxDom.createElement('div');
+  }
+
+  const el = elementRef.current;
+
+  // clear old words
+  select(el).selectAll('*').remove();
+
+  // render based on new data
+  const layout = cloud<Word>()
+    .words(data)
+    .size([width, height])
+    .font(font)
+    .fontStyle(fontStyle)
+    .fontWeight(fontWeight)
+    .fontSize(fontSize)
+    .rotate(rotate)
+    .spiral(spiral)
+    .padding(padding)
+    .random(random)
+    .on('end', (words) => {
+      const [w, h] = layout.size();
+
+      const texts = select(el)
+        .append('svg')
+        .attr('viewBox', `0 0 ${w} ${h}`)
+        .attr('preserveAspectRatio', 'xMinYMin meet')
+        .append('g')
+        .attr('transform', `translate(${w / 2},${h / 2})`)
+        .selectAll('text')
+        .data(words)
+        .enter()
+        .append('text')
+        .style(
+          'font-family',
+          ((d) => d.font) as ValueFn<SVGTextElement, Word, string>
+        )
+        .style(
+          'font-style',
+          ((d) => d.style) as ValueFn<SVGTextElement, Word, string>
+        )
+        .style(
+          'font-weight',
+          ((d) => d.weight) as ValueFn<SVGTextElement, Word, string | number>
+        )
+        .style(
+          'font-size',
+          ((d) => `${d.size}px`) as ValueFn<SVGTextElement, Word, string>
+        )
+        .style('fill', fill)
+        .attr('text-anchor', 'middle')
+        .attr('transform', (d) => `translate(${[d.x, d.y]})rotate(${d.rotate})`)
+        .text((d) => d.text);
+
+      if (onWordClick) {
+        texts.on('click', onWordClick);
+      }
+      if (onWordMouseOver) {
+        texts.on('mouseover', onWordMouseOver);
+      }
+      if (onWordMouseOut) {
+        texts.on('mouseout', onWordMouseOut);
+      }
+    });
+
+  layout.start();
+
+  return el.toReact();
+}
+
+export default React.memo(WordCloud, isDeepEqual);

package/src/__tests__/WordCloud.spec.tsx

@@ -0,0 +1,167 @@
+import React from 'react';
+import {
+  RenderResult,
+  fireEvent,
+  render,
+  screen,
+} from '@testing-library/react';
+
+import WordCloud, { Word } from '../WordCloud';
+
+const data = [
+  { text: 'Hey', value: 1 },
+  { text: 'Ok', value: 5 },
+  { text: 'Cool', value: 10 },
+];
+
+function renderInStrictMode(ui: React.ReactElement): RenderResult {
+  return render(ui, { wrapper: React.StrictMode });
+}
+
+it('should render words', async () => {
+  renderInStrictMode(<WordCloud data={data} />);
+
+  await screen.findByText('Hey');
+
+  expect(screen.getByText('Hey')).toBeInTheDocument();
+  expect(screen.getByText('Ok')).toBeInTheDocument();
+  expect(screen.getByText('Cool')).toBeInTheDocument();
+});
+
+it('should render correct words after re-render', async () => {
+  const { rerender } = renderInStrictMode(<WordCloud data={data} />);
+
+  const newData = [
+    { text: 'New', value: 1 },
+    { text: 'World', value: 5 },
+  ];
+  rerender(<WordCloud data={newData} />);
+
+  await screen.findByText('New');
+
+  expect(screen.queryByText('Hey')).not.toBeInTheDocument();
+  expect(screen.queryByText('Ok')).not.toBeInTheDocument();
+  expect(screen.queryByText('Cool')).not.toBeInTheDocument();
+
+  expect(screen.getByText('New')).toBeInTheDocument();
+  expect(screen.getByText('World')).toBeInTheDocument();
+});
+
+it('should render with custom font', async () => {
+  const font = 'sans-serif';
+
+  renderInStrictMode(<WordCloud data={data} font={font} />);
+
+  await screen.findByText('Hey');
+
+  expect(screen.getByText('Hey')).toHaveStyle('font-family: sans-serif');
+  expect(screen.getByText('Ok')).toHaveStyle('font-family: sans-serif');
+  expect(screen.getByText('Cool')).toHaveStyle('font-family: sans-serif');
+});
+
+it('should render with custom fontStyle', async () => {
+  const fontStyle = 'bold';
+
+  renderInStrictMode(<WordCloud data={data} fontStyle={fontStyle} />);
+
+  await screen.findByText('Hey');
+
+  expect(screen.getByText('Hey')).toHaveStyle('font-style: bold');
+  expect(screen.getByText('Ok')).toHaveStyle('font-style: bold');
+  expect(screen.getByText('Cool')).toHaveStyle('font-style: bold');
+});
+
+it('should render with custom fontWeight', async () => {
+  const fontWeight = 900;
+
+  renderInStrictMode(<WordCloud data={data} fontWeight={fontWeight} />);
+
+  await screen.findByText('Hey');
+
+  expect(screen.getByText('Hey')).toHaveStyle('font-weight: 900');
+  expect(screen.getByText('Ok')).toHaveStyle('font-weight: 900');
+  expect(screen.getByText('Cool')).toHaveStyle('font-weight: 900');
+});
+
+it('should render with custom fontSize', async () => {
+  const fontSize = (d: Word) => d.value * 2;
+
+  renderInStrictMode(<WordCloud data={data} fontSize={fontSize} />);
+
+  await screen.findByText('Hey');
+
+  expect(screen.getByText('Hey')).toHaveStyle('font-size: 2px');
+  expect(screen.getByText('Ok')).toHaveStyle('font-size: 10px');
+  expect(screen.getByText('Cool')).toHaveStyle('font-size: 20px');
+});
+
+it('should render with custom rotate', async () => {
+  const rotate = (_: Word, i: number) => (i + 1) * 30;
+
+  renderInStrictMode(<WordCloud data={data} rotate={rotate} />);
+
+  await screen.findByText('Hey');
+
+  expect(screen.getByText('Hey')).toHaveAttribute(
+    'transform',
+    expect.stringContaining('rotate(30)')
+  );
+  expect(screen.getByText('Ok')).toHaveAttribute(
+    'transform',
+    expect.stringContaining('rotate(60)')
+  );
+  expect(screen.getByText('Cool')).toHaveAttribute(
+    'transform',
+    expect.stringContaining('rotate(90)')
+  );
+});
+
+it('should render with custom fill', async () => {
+  const fill = () => '#000000';
+
+  renderInStrictMode(<WordCloud data={data} fill={fill} />);
+
+  await screen.findByText('Hey');
+
+  expect(screen.getByText('Hey')).toHaveStyle('fill: #000000');
+  expect(screen.getByText('Ok')).toHaveStyle('fill: #000000');
+  expect(screen.getByText('Cool')).toHaveStyle('fill: #000000');
+});
+
+it('should support click handler', async () => {
+  const onWordClick = jest.fn();
+
+  renderInStrictMode(<WordCloud data={data} onWordClick={onWordClick} />);
+
+  await screen.findByText('Hey');
+
+  fireEvent.click(screen.getByText('Hey'));
+
+  expect(onWordClick).toBeCalled();
+});
+
+it('should support mouse over handler', async () => {
+  const onWordMouseOver = jest.fn();
+
+  renderInStrictMode(
+    <WordCloud data={data} onWordMouseOver={onWordMouseOver} />
+  );
+
+  await screen.findByText('Hey');
+
+  fireEvent.mouseOver(screen.getByText('Hey'));
+
+  expect(onWordMouseOver).toBeCalled();
+});
+
+it('should support mouse out handler', async () => {
+  const onWordMouseOut = jest.fn();
+
+  renderInStrictMode(<WordCloud data={data} onWordMouseOut={onWordMouseOut} />);
+
+  await screen.findByText('Hey');
+
+  fireEvent.mouseOut(screen.getByText('Hey'));
+
+  expect(onWordMouseOut).toBeCalled();
+});

package/src/index.ts

@@ -0,0 +1,3 @@
+import WordCloud from './WordCloud';
+
+export default WordCloud;

package/test/jest-setup.ts

@@ -0,0 +1,2 @@
+import '@testing-library/jest-dom';
+import 'regenerator-runtime/runtime';

package/tsconfig.build.json

@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.json",
+  "include": ["src/**/*"],
+  "exclude": ["src/**/__tests__/**/*"],
+  "compilerOptions": {
+    "outDir": "lib",
+    "rootDir": "src"
+  }
+}

package/tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "include": ["./test/jest-setup.ts"],
+  "compilerOptions": {
+    "target": "es2018",
+    "module": "es2015",
+    "lib": ["es2018", "dom"],
+    "jsx": "react",
+    "declaration": true,
+    "isolatedModules": true,
+    "strict": true,
+    "noImplicitAny": true,
+    "strictNullChecks": true,
+    "strictFunctionTypes": true,
+    "strictBindCallApply": true,
+    "strictPropertyInitialization": true,
+    "noImplicitThis": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedIndexedAccess": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true
+  }
+}