rename to react-jq-cloud

Author: Basone01

README.md

@@ -1,4 +1,4 @@
-# react-jqcloud
+# react-jq-cloud
 
 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-jqcloud
+npm install react-jq-cloud
 ```
 
 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-jqcloud';
-import 'react-jqcloud/styles.css';
+import { WordCloud } from 'react-jq-cloud';
+import 'react-jq-cloud/styles.css';
 
 const words = [
   { text: 'React',      weight: 10 },
@@ -102,15 +102,15 @@ interface Word {
 
 ### CSS weight classes
 
-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:
+When you import `react-jq-cloud/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-jqcloud .w10 { color: #e63946; }
-.react-jqcloud .w9  { color: #e63946; }
-.react-jqcloud .w8  { color: #457b9d; }
+.react-jq-cloud .w10 { color: #e63946; }
+.react-jq-cloud .w9  { color: #e63946; }
+.react-jq-cloud .w8  { color: #457b9d; }
 /* … */
-.react-jqcloud .w1  { color: #a8dadc; }
+.react-jq-cloud .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-jqcloud.git
-cd react-jqcloud
+git clone https://github.com/your-org/react-jq-cloud.git
+cd react-jq-cloud
 npm install
 ```
 

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "react-jqcloud",
+  "name": "react-jq-cloud",
   "version": "0.2.0",
   "description": "React word cloud component based on jQCloud layout algorithm",
   "keywords": [

src/WordCloud.tsx

@@ -156,7 +156,7 @@ export function WordCloud({
 
   return (
     <div
-      className={`react-jqcloud${className ? ` ${className}` : ''}`}
+      className={`react-jq-cloud${className ? ` ${className}` : ''}`}
       style={containerStyle}
     >
       {words.map((word, i) => {

src/styles.css

@@ -1,28 +1,28 @@
-.react-jqcloud {
+.react-jq-cloud {
   overflow: hidden;
   position: relative;
   font-family: "Helvetica", "Arial", sans-serif;
 }
 
-.react-jqcloud span {
+.react-jq-cloud span {
   position: absolute;
   padding: 0;
   cursor: default;
 }
 
-.react-jqcloud a {
+.react-jq-cloud a {
   text-decoration: none;
   color: inherit;
 }
 
 /* Weight classes for color theming (font sizes are inline) */
-.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; }
+.react-jq-cloud .w10 { color: #0cf; }
+.react-jq-cloud .w9  { color: #0cf; }
+.react-jq-cloud .w8  { color: #0cf; }
+.react-jq-cloud .w7  { color: #39d; }
+.react-jq-cloud .w6  { color: #90c5f0; }
+.react-jq-cloud .w5  { color: #90a0dd; }
+.react-jq-cloud .w4  { color: #90c5f0; }
+.react-jq-cloud .w3  { color: #a0ddff; }
+.react-jq-cloud .w2  { color: #99ccee; }
+.react-jq-cloud .w1  { color: #aab5f0; }

test/WordCloud.test.tsx

@@ -32,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-jqcloud')).toBe(true);
+    expect(div.classList.contains('react-jq-cloud')).toBe(true);
     expect(div.classList.contains('my-cloud')).toBe(true);
   });