balacolor 1.0.0 → 3.0.1

package/README.md

@@ -0,0 +1,233 @@
+# 📦 Creating & Publishing an npm Package (`balacolor`)
+
+---
+
+## 1️⃣ Create the Package Folder
+
+1. Create a folder named **`balacolor`** (this will be your **package name**).
+2. Inside the folder, create an **`index.js`** file.
+3. Initialize npm:
+
+   ```bash
+   npm init
+   ```
+
+   - Fill in **Name**, **Version**, and **Entrypoint** when prompted.
+
+---
+
+## 2️⃣ Create an npm Account
+
+1. Create a new account at **npmjs.com**.
+2. Log in to your account.
+3. Complete **2FA (Two-Factor Authentication)**.
+
+---
+
+## 3️⃣ Publish the Package to the npm Registry
+
+> ⚠️ Make sure **Chrome** is set as your default browser before logging in, as I
+> faced an issue with **2FA** in other browsers. Otherwise, you may get a
+> **403** Forbidden error when running the **npm publish** command before
+> completing 2FA.
+
+```bash
+npm notice Publishing to https://registry.npmjs.org/ with tag latest and default access
+npm ERR! code E403
+npm ERR! 403 403 Forbidden - PUT https://registry.npmjs.org/balacolor - Two-factor authentication or granular
+access token with bypass 2fa enabled is required to publish packages.
+
+npm ERR! 403 In most cases, you or one of your dependencies are requesting
+npm ERR! 403 a package version that is forbidden by your security policy, or
+npm ERR! 403 on a server you do not have access to.
+```
+
+1. Log in to npm from the VS code terminal:
+
+   ```bash
+   npm login
+   ```
+
+2. Publish the package:
+
+   ```bash
+   npm publish
+   ```
+
+> 🎉 **Reload the npm website and search for your package. That’s it you’ve
+> completed the process.👍🏼**
+
+---
+
+## 4️⃣ Next version update & publish procedure (npm): Process for Updating the Package Version (Very Important)
+
+You **must update the version** in `package.json` before publishing again.
+
+You can do this **manually** or by using the commands below:
+
+### Version Types
+
+- **Patch (1.0.1)** – Small bug fixes
+
+  ```bash
+  npm version patch
+  ```
+
+- **Minor (1.1.0)** – New features (example: adding a new `"neon"` palette)
+
+  ```bash
+  npm version minor
+  ```
+
+- **Major (2.0.0)** – Breaking changes
+
+  ```bash
+  npm version major
+  ```
+
+### Publish Again
+
+```bash
+npm publish
+```
+
+> 🎉 Now, your package got updated in the npm registry
+
+---
+
+## 5️⃣ How to uUpdate the Package in Your Project
+
+After publishing a new version, update it in your project:
+
+```bash
+npm install balacolor@latest
+```
+
+---
+
+## 6️⃣ Publishing Public vs Scoped Packages
+
+```bash
+npm publish
+npm publish --access public
+```
+
+| Package Name Example | Command to Use                | Result                      |
+| -------------------- | ----------------------------- | --------------------------- |
+| `balacolor`          | `npm publish`                 | ✅ Public (Free)            |
+| `@johndoe/balacolor` | `npm publish`                 | ❌ Error 402 (Paid account) |
+| `@johndoe/balacolor` | `npm publish --access public` | ✅ Public (Free)            |
+
+---
+
+## 💡Basic Code to Publish on npm / Old Package Version
+
+This is the **initial version** of the code that we will publish to npm.
+
+```jsx
+const palettes = {
+ocean: ["#0077be"],
+sunset: ["#ff5f6d"],
+forest: ["#2d5a27"],
+};
+
+functiongetPalette(name) {
+const palette = palettes[name.toLowerCase()];
+return palette ||"Palette not found. Try 'ocean', 'sunset', or 'forest'.";
+}
+
+// Required for npm export
+module.exports = getPalette;
+```
+
+---
+
+## 💡 Updated Package Version
+
+```jsx
+const palettes = {
+ocean: ["#0077be"],
+sunset: ["#ff5f6d"],
+forest: ["#2d5a27"],
+desert: ["#edc9af"],
+mountain: ["#6b8e23"],
+rose: ["#ff007f"],
+yellow: ["#ffea00"],
+purple: ["#9b30ff"],
+};
+
+functiongetPalette(name) {
+const palette = palettes[name.toLowerCase()];
+return (
+        palette ||
+"Palette not found. Try 'ocean', 'sunset', 'forest', 'desert', 'mountain', 'rose', 'yellow', or 'purple'."
+    );
+}
+
+// Required for npm export
+module.exports = getPalette;
+```
+
+---
+
+## 💡 Updated Package (`node_modules/balacolor/index.js`)
+
+---
+
+## 🧩 Using `balacolor` NPM Package in a React App
+
+### 📦 Install the Package
+
+```bash
+npm install balacolor
+```
+
+---
+
+## 🧪 Example: `App.jsx`
+
+```jsx
+import "./App.css";
+import getPalette from "balacolor";
+
+function App() {
+    // Get the "purple" color palette
+    const colors = getPalette("purple");
+
+    // Use the first color from the palette
+    const myColor = colors[0];
+
+    return (
+        <div style={{ padding: "50px" }}>
+            <h1 style={{ color: myColor }}>
+                Hello! This H1 is colored using Balacolor.
+            </h1>
+
+            <p>The hex code is: {myColor}</p>
+        </div>
+    );
+}
+
+export default App;
+```
+
+---
+
+## 📄 `package.json` Dependencies
+
+```json
+{
+    "dependencies": {
+        "balacolor": "^3.0.0",
+        "react": "^19.2.0",
+        "react-dom": "^19.2.0"
+    }
+}
+```
+
+---
+
+## 🎨 Result
+
+- The `<h1>` text color is dynamically applied from the **Balacolor palette**
+- The selected hex code is displayed below the heading

package/index.js

@@ -1,12 +1,17 @@
 const palettes = {
-    "ocean": ["#0077be", "#5f9ea0", "#4682b4", "#b0c4de"],
-    "sunset": ["#ff5f6d", "#ffc371", "#ff9a9e", "#fecfef"],
-    "forest": ["#2d5a27", "#4b7a47", "#76a665", "#a8c69f"]
+    "ocean": ["#0077be"],
+    "sunset": ["#ff5f6d"],
+    "forest": ["#2d5a27"],
+    "desert": ["#edc9af"],
+    "mountain": ["#6b8e23"],
+    "rose": ["#ff007f"],
+    "yellow": ["#ffea00"],
+    "purple": ["#9b30ff"],
 };
 
 function getPalette(name) {
     const palette = palettes[name.toLowerCase()];
-    return palette || "Palette not found. Try 'ocean', 'sunset', or 'forest'.";
+    return palette || "Palette not found. Try 'ocean', 'sunset', 'forest', 'desert', 'mountain', 'rose', 'yellow', or 'purple'.";
 }
 
 // This is the important part for npm!

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "balacolor",
-  "version": "1.0.0",
+  "version": "3.0.1",
   "description": "demo project for npm registry",
   "main": "index.js",
   "scripts": {