rename to react-jq-cloud

Basone01 · Basone01 · commit 60b97336e2e9 · 2026-03-11T17:55:44.000+07:00
diff --git a/.npmrc b/.npmrc
@@ -0,0 +1,2 @@
+registry=https://registry.npmjs.org/
+access=public
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-# react-word-cloud
+# react-jqcloud
 
 A React + TypeScript word cloud component based on the layout algorithm from [jQCloud](https://github.com/lucaong/jQCloud).
 
@@ -31,7 +31,7 @@ Words are placed on a spiral (elliptic or rectangular) starting from the center
 ## Installation
 
 ```bash
-npm install react-word-cloud
+npm install react-jqcloud
 ```
 
 Peer dependencies (`react` and `react-dom` ≥ 17) must already be installed in your project.
@@ -41,8 +41,8 @@ Peer dependencies (`react` and `react-dom` ≥ 17) must already be installed in
 ## Quick start
 
 ```tsx
-import { WordCloud } from 'react-word-cloud';
-import 'react-word-cloud/styles.css';
+import { WordCloud } from 'react-jqcloud';
+import 'react-jqcloud/styles.css';
 
 const words = [
   { text: 'React',      weight: 10 },
@@ -102,15 +102,15 @@ interface Word {
 
 ### CSS weight classes
 
-When you import `react-word-cloud/styles.css` each word receives a class `w1`–`w10` (1 = lightest, 10 = heaviest). You can override these classes in your own stylesheet:
+When you import `react-jqcloud/styles.css` each word receives a class `w1`–`w10` (1 = lightest, 10 = heaviest). You can override these classes in your own stylesheet:
 
 ```css
 /* your-styles.css */
-.react-word-cloud .w10 { color: #e63946; }
-.react-word-cloud .w9  { color: #e63946; }
-.react-word-cloud .w8  { color: #457b9d; }
+.react-jqcloud .w10 { color: #e63946; }
+.react-jqcloud .w9  { color: #e63946; }
+.react-jqcloud .w8  { color: #457b9d; }
 /* … */
-.react-word-cloud .w1  { color: #a8dadc; }
+.react-jqcloud .w1  { color: #a8dadc; }
 ```
 
 ### Inline colors
@@ -277,8 +277,8 @@ Contributions are welcome — bug reports, feature requests, and pull requests a
 ### Development setup
 
 ```bash
-git clone https://github.com/your-org/react-word-cloud.git
-cd react-word-cloud
+git clone https://github.com/your-org/react-jqcloud.git
+cd react-jqcloud
 npm install
 ```
 
diff --git a/example/App.tsx b/example/App.tsx
@@ -479,7 +479,7 @@ export default function App() {
 
   return (
     <div style={{ fontFamily: 'sans-serif', padding: 24, maxWidth: 800 }}>
-      <h1 style={{ margin: '0 0 4px' }}>React Word Cloud</h1>
+      <h1 style={{ margin: '0 0 4px' }}>React JQCloud</h1>
       <p style={{ margin: '0 0 20px', color: '#666', fontSize: 14 }}>Demos</p>
 
       {/* Demo selector */}
diff --git a/example/index.html b/example/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>React Word Cloud — Example</title>
+    <title>React JQCloud — Example</title>
   </head>
   <body>
     <div id="root"></div>
diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "react-word-cloud",
+  "name": "react-jqcloud",
   "version": "0.1.0",
   "description": "React word cloud component based on jQCloud layout algorithm",
   "keywords": ["react", "word-cloud", "tag-cloud", "visualization"],
diff --git a/src/WordCloud.tsx b/src/WordCloud.tsx
@@ -156,7 +156,7 @@ export function WordCloud({
 
   return (
     <div
-      className={`react-word-cloud${className ? ` ${className}` : ''}`}
+      className={`react-jqcloud${className ? ` ${className}` : ''}`}
       style={containerStyle}
     >
       {words.map((word, i) => {
diff --git a/src/styles.css b/src/styles.css
@@ -1,28 +1,28 @@
-.react-word-cloud {
+.react-jqcloud {
   overflow: hidden;
   position: relative;
   font-family: "Helvetica", "Arial", sans-serif;
 }
 
-.react-word-cloud span {
+.react-jqcloud span {
   position: absolute;
   padding: 0;
   cursor: default;
 }
 
-.react-word-cloud a {
+.react-jqcloud a {
   text-decoration: none;
   color: inherit;
 }
 
 /* Weight classes for color theming (font sizes are inline) */
-.react-word-cloud .w10 { color: #0cf; }
-.react-word-cloud .w9  { color: #0cf; }
-.react-word-cloud .w8  { color: #0cf; }
-.react-word-cloud .w7  { color: #39d; }
-.react-word-cloud .w6  { color: #90c5f0; }
-.react-word-cloud .w5  { color: #90a0dd; }
-.react-word-cloud .w4  { color: #90c5f0; }
-.react-word-cloud .w3  { color: #a0ddff; }
-.react-word-cloud .w2  { color: #99ccee; }
-.react-word-cloud .w1  { color: #aab5f0; }
+.react-jqcloud .w10 { color: #0cf; }
+.react-jqcloud .w9  { color: #0cf; }
+.react-jqcloud .w8  { color: #0cf; }
+.react-jqcloud .w7  { color: #39d; }
+.react-jqcloud .w6  { color: #90c5f0; }
+.react-jqcloud .w5  { color: #90a0dd; }
+.react-jqcloud .w4  { color: #90c5f0; }
+.react-jqcloud .w3  { color: #a0ddff; }
+.react-jqcloud .w2  { color: #99ccee; }
+.react-jqcloud .w1  { color: #aab5f0; }
diff --git a/test/WordCloud.test.tsx b/test/WordCloud.test.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import { describe, it, expect, vi } from 'vitest';
 import { render, screen, fireEvent } from '@testing-library/react';
 import { WordCloud } from '../src/WordCloud';
@@ -31,7 +32,7 @@ describe('WordCloud', () => {
       <WordCloud words={words} width={600} height={400} className="my-cloud" />
     );
     const div = container.firstChild as HTMLElement;
-    expect(div.classList.contains('react-word-cloud')).toBe(true);
+    expect(div.classList.contains('react-jqcloud')).toBe(true);
     expect(div.classList.contains('my-cloud')).toBe(true);
   });
 
diff --git a/test/setup.ts b/test/setup.ts
@@ -1 +1 @@
-import '@testing-library/jest-dom';
+import '@testing-library/jest-dom/vitest';
diff --git a/tsconfig.json b/tsconfig.json
@@ -4,6 +4,7 @@
     "module": "ESNext",
     "moduleResolution": "bundler",
     "jsx": "react-jsx",
+    "allowUmdGlobalAccess": true,
     "strict": true,
     "noUncheckedIndexedAccess": true,
     "declaration": true,
@@ -13,6 +14,6 @@
     "skipLibCheck": true,
     "forceConsistentCasingInFileNames": true
   },
-  "include": ["src"],
-  "exclude": ["node_modules", "dist", "test", "example"]
+  "include": ["src", "test"],
+  "exclude": ["node_modules", "dist", "example"]
 }

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+registry=https://registry.npmjs.org/`
	`2`	`+access=public`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`{`
`2`		`- "name": "react-word-cloud",`
	`2`	`+ "name": "react-jqcloud",`
`3`	`3`	`"version": "0.1.0",`
`4`	`4`	`"description": "React word cloud component based on jQCloud layout algorithm",`
`5`	`5`	`"keywords": ["react", "word-cloud", "tag-cloud", "visualization"],`
Original file line number	Diff line number	Diff line change
`@@ -156,7 +156,7 @@ export function WordCloud({`
`156`	`156`
`157`	`157`	`return (`
`158`	`158`	`<div`
`159`		- className={`react-word-cloud${className ? ` ${className}` : ''}`}
	`159`	+ className={`react-jqcloud${className ? ` ${className}` : ''}`}
`160`	`160`	`style={containerStyle}`
`161`	`161`	`>`
`162`	`162`	`{words.map((word, i) => {`
Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		`-import '@testing-library/jest-dom';`
	`1`	`+import '@testing-library/jest-dom/vitest';`