@codav/slug-generator 1.0.0

package/README.md

@@ -0,0 +1,217 @@
+# @codav/slug-generator
+
+A lightweight, reusable and TypeScript-first React component for generating clean, URL-friendly slugs directly from titles.
+
+Built for modern React and Next.js applications with a simple API, zero unnecessary complexity, and easy integration.
+
+## ✨ Features
+
+- Generate slugs directly from titles
+- Supports Persian, English, numbers and Unicode characters
+- Automatically removes unnecessary characters
+- Converts spaces into `-`
+- Prevents duplicate hyphens
+- Removes leading and trailing hyphens
+- Fully controlled React component
+- Written in TypeScript
+- React 18 and React 19 compatible
+- Next.js compatible
+- Customizable labels and button text
+- Supports custom classes
+- Lightweight package architecture
+- ESM and CommonJS builds
+- Built-in TypeScript declarations
+
+## 📦 Installation
+
+```bash
+npm install @codav/slug-generator
+```
+
+Or:
+
+```bash
+yarn add @codav/slug-generator
+```
+
+```bash
+pnpm add @codav/slug-generator
+```
+
+## 🚀 Basic Usage
+
+```tsx
+"use client";
+
+import { useState } from "react";
+import { SlugGenerator } from "@codav/slug-generator";
+
+export default function Example() {
+  const [title, setTitle] = useState("");
+  const [slug, setSlug] = useState("");
+
+  return (
+    <SlugGenerator
+      title={title}
+      value={slug}
+      onChange={setSlug}
+    />
+  );
+}
+```
+
+## 🧩 With a Title Input
+
+```tsx
+"use client";
+
+import { useState } from "react";
+import { SlugGenerator } from "@codav/slug-generator";
+
+export default function BlogForm() {
+  const [title, setTitle] = useState("");
+  const [slug, setSlug] = useState("");
+
+  return (
+    <div>
+      <input
+        value={title}
+        onChange={(event) => setTitle(event.target.value)}
+        placeholder="Article title"
+      />
+
+      <SlugGenerator
+        title={title}
+        value={slug}
+        onChange={setSlug}
+        label="Slug"
+        buttonText="Generate Slug"
+      />
+    </div>
+  );
+}
+```
+
+## 🌍 Persian Support
+
+The component is designed to work with Unicode text, making it suitable for Persian and other non-Latin languages.
+
+For example:
+
+```text
+آموزش لاراول برای مبتدیان
+```
+
+can become:
+
+```text
+آموزش-لاراول-برای-مبتدیان
+```
+
+English titles are supported as well:
+
+```text
+Learn Laravel From Scratch
+```
+
+becomes:
+
+```text
+learn-laravel-from-scratch
+```
+
+## ⚙️ API
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `title` | `string` | — | Source title used to generate the slug |
+| `value` | `string` | — | Current slug value |
+| `onChange` | `(slug: string) => void` | — | Called when the slug changes |
+| `label` | `string` | `"Slug"` | Input label |
+| `placeholder` | `string` | `"your-slug"` | Input placeholder |
+| `buttonText` | `string` | `"Generate"` | Generate button text |
+| `disabled` | `boolean` | `false` | Disables the component |
+| `className` | `string` | `""` | Custom CSS class |
+| `icon` | `ReactNode` | — | Optional label icon |
+
+## 🏗️ Build From Source
+
+Clone the repository:
+
+```bash
+git clone https://github.com/YOUR_USERNAME/slug-generator.git
+cd slug-generator
+```
+
+Install dependencies:
+
+```bash
+npm install
+```
+
+Build the package:
+
+```bash
+npm run build
+```
+
+Development mode:
+
+```bash
+npm run dev
+```
+
+## 📁 Package Architecture
+
+```text
+slug-generator/
+├── src/
+│   ├── SlugGenerator.tsx
+│   ├── index.ts
+│   └── types.ts
+├── package.json
+├── tsconfig.json
+├── tsup.config.ts
+└── README.md
+```
+
+## 🎯 Design Philosophy
+
+`@codav/slug-generator` is intentionally focused on one responsibility:
+
+> Convert user-provided titles into clean, URL-friendly slugs through a reusable React component.
+
+The package is designed to remain independent from any specific CMS, blog system, backend framework, database or application architecture.
+
+This makes it suitable for:
+
+- Blogs
+- Products
+- Categories
+- Pages
+- Courses
+- Documentation
+- News systems
+- E-commerce platforms
+- Admin dashboards
+- Content management systems
+
+## 🛠️ Tech Stack
+
+- React
+- TypeScript
+- tsup
+- ESM
+- CommonJS
+
+## 📄 License
+
+MIT
+
+## 👨‍💻 Author
+
+Developed and maintained by **CODAV**.
+
+---
+
+If you find this package useful, consider giving the repository a ⭐ on GitHub.

package/dist/index.d.mts

@@ -0,0 +1,18 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+type SlugGeneratorProps = {
+    title: string;
+    value: string;
+    onChange: (slug: string) => void;
+    label?: string;
+    placeholder?: string;
+    buttonText?: string;
+    disabled?: boolean;
+    className?: string;
+    icon?: ReactNode;
+};
+
+declare function SlugGenerator({ title, value, onChange, label, placeholder, buttonText, disabled, className, icon, }: SlugGeneratorProps): react.JSX.Element;
+
+export { SlugGenerator, type SlugGeneratorProps };

package/dist/index.d.ts

@@ -0,0 +1,18 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+type SlugGeneratorProps = {
+    title: string;
+    value: string;
+    onChange: (slug: string) => void;
+    label?: string;
+    placeholder?: string;
+    buttonText?: string;
+    disabled?: boolean;
+    className?: string;
+    icon?: ReactNode;
+};
+
+declare function SlugGenerator({ title, value, onChange, label, placeholder, buttonText, disabled, className, icon, }: SlugGeneratorProps): react.JSX.Element;
+
+export { SlugGenerator, type SlugGeneratorProps };

package/dist/index.js

@@ -0,0 +1,82 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  SlugGenerator: () => SlugGenerator
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/SlugGenerator.tsx
+var import_lucide_react = require("lucide-react");
+var import_jsx_runtime = require("react/jsx-runtime");
+function SlugGenerator({
+  title,
+  value,
+  onChange,
+  label = "Slug",
+  placeholder = "your-slug",
+  buttonText = "Generate",
+  disabled = false,
+  className = "",
+  icon
+}) {
+  const generateSlug = () => {
+    const slug = title.toLowerCase().trim().replace(/[^\p{L}\p{N}\s-]/gu, "").replace(/\s+/g, "-").replace(/-+/g, "-").replace(/^-|-$/g, "");
+    onChange(slug);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mb-2 flex items-center justify-between gap-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { className: "text-sm font-medium", children: [
+        icon,
+        label
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "button",
+        {
+          type: "button",
+          onClick: generateSlug,
+          disabled: disabled || !title.trim(),
+          className: "inline-flex items-center gap-1.5 rounded-lg px-3 py-2 text-xs font-medium transition disabled:cursor-not-allowed disabled:opacity-50",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.WandSparkles, { className: "size-4" }),
+            buttonText
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "input",
+      {
+        dir: "ltr",
+        value,
+        onChange: (event) => onChange(event.target.value),
+        placeholder,
+        disabled,
+        className: "w-full rounded-lg border px-3 py-3 text-sm outline-none"
+      }
+    )
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  SlugGenerator
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/SlugGenerator.tsx"],"sourcesContent":["export { default as SlugGenerator } from \"./SlugGenerator\";\r\nexport type { SlugGeneratorProps } from \"./types\";","\"use client\";\r\n\r\nimport { WandSparkles } from \"lucide-react\";\r\nimport type { SlugGeneratorProps } from \"./types\";\r\n\r\nexport default function SlugGenerator({\r\n  title,\r\n  value,\r\n  onChange,\r\n  label = \"Slug\",\r\n  placeholder = \"your-slug\",\r\n  buttonText = \"Generate\",\r\n  disabled = false,\r\n  className = \"\",\r\n  icon,\r\n}: SlugGeneratorProps) {\r\n  const generateSlug = () => {\r\n    const slug = title\r\n      .toLowerCase()\r\n      .trim()\r\n      .replace(/[^\\p{L}\\p{N}\\s-]/gu, \"\")\r\n      .replace(/\\s+/g, \"-\")\r\n      .replace(/-+/g, \"-\")\r\n      .replace(/^-|-$/g, \"\");\r\n\r\n    onChange(slug);\r\n  };\r\n\r\n  return (\r\n    <div className={className}>\r\n      <div className=\"mb-2 flex items-center justify-between gap-3\">\r\n        <label className=\"text-sm font-medium\">\r\n          {icon}\r\n          {label}\r\n        </label>\r\n\r\n        <button\r\n          type=\"button\"\r\n          onClick={generateSlug}\r\n          disabled={disabled || !title.trim()}\r\n          className=\"inline-flex items-center gap-1.5 rounded-lg px-3 py-2 text-xs font-medium transition disabled:cursor-not-allowed disabled:opacity-50\"\r\n        >\r\n          <WandSparkles className=\"size-4\" />\r\n          {buttonText}\r\n        </button>\r\n      </div>\r\n\r\n      <input\r\n        dir=\"ltr\"\r\n        value={value}\r\n        onChange={(event) => onChange(event.target.value)}\r\n        placeholder={placeholder}\r\n        disabled={disabled}\r\n        className=\"w-full rounded-lg border px-3 py-3 text-sm outline-none\"\r\n      />\r\n    </div>\r\n  );\r\n}"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACEA,0BAA6B;AA6BrB;AA1BO,SAAR,cAA+B;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,aAAa;AAAA,EACb,WAAW;AAAA,EACX,YAAY;AAAA,EACZ;AACF,GAAuB;AACrB,QAAM,eAAe,MAAM;AACzB,UAAM,OAAO,MACV,YAAY,EACZ,KAAK,EACL,QAAQ,sBAAsB,EAAE,EAChC,QAAQ,QAAQ,GAAG,EACnB,QAAQ,OAAO,GAAG,EAClB,QAAQ,UAAU,EAAE;AAEvB,aAAS,IAAI;AAAA,EACf;AAEA,SACE,6CAAC,SAAI,WACH;AAAA,iDAAC,SAAI,WAAU,gDACb;AAAA,mDAAC,WAAM,WAAU,uBACd;AAAA;AAAA,QACA;AAAA,SACH;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAS;AAAA,UACT,UAAU,YAAY,CAAC,MAAM,KAAK;AAAA,UAClC,WAAU;AAAA,UAEV;AAAA,wDAAC,oCAAa,WAAU,UAAS;AAAA,YAChC;AAAA;AAAA;AAAA,MACH;AAAA,OACF;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,KAAI;AAAA,QACJ;AAAA,QACA,UAAU,CAAC,UAAU,SAAS,MAAM,OAAO,KAAK;AAAA,QAChD;AAAA,QACA;AAAA,QACA,WAAU;AAAA;AAAA,IACZ;AAAA,KACF;AAEJ;","names":[]}

package/dist/index.mjs

@@ -0,0 +1,55 @@
+// src/SlugGenerator.tsx
+import { WandSparkles } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function SlugGenerator({
+  title,
+  value,
+  onChange,
+  label = "Slug",
+  placeholder = "your-slug",
+  buttonText = "Generate",
+  disabled = false,
+  className = "",
+  icon
+}) {
+  const generateSlug = () => {
+    const slug = title.toLowerCase().trim().replace(/[^\p{L}\p{N}\s-]/gu, "").replace(/\s+/g, "-").replace(/-+/g, "-").replace(/^-|-$/g, "");
+    onChange(slug);
+  };
+  return /* @__PURE__ */ jsxs("div", { className, children: [
+    /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center justify-between gap-3", children: [
+      /* @__PURE__ */ jsxs("label", { className: "text-sm font-medium", children: [
+        icon,
+        label
+      ] }),
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: generateSlug,
+          disabled: disabled || !title.trim(),
+          className: "inline-flex items-center gap-1.5 rounded-lg px-3 py-2 text-xs font-medium transition disabled:cursor-not-allowed disabled:opacity-50",
+          children: [
+            /* @__PURE__ */ jsx(WandSparkles, { className: "size-4" }),
+            buttonText
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        dir: "ltr",
+        value,
+        onChange: (event) => onChange(event.target.value),
+        placeholder,
+        disabled,
+        className: "w-full rounded-lg border px-3 py-3 text-sm outline-none"
+      }
+    )
+  ] });
+}
+export {
+  SlugGenerator
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/SlugGenerator.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { WandSparkles } from \"lucide-react\";\r\nimport type { SlugGeneratorProps } from \"./types\";\r\n\r\nexport default function SlugGenerator({\r\n  title,\r\n  value,\r\n  onChange,\r\n  label = \"Slug\",\r\n  placeholder = \"your-slug\",\r\n  buttonText = \"Generate\",\r\n  disabled = false,\r\n  className = \"\",\r\n  icon,\r\n}: SlugGeneratorProps) {\r\n  const generateSlug = () => {\r\n    const slug = title\r\n      .toLowerCase()\r\n      .trim()\r\n      .replace(/[^\\p{L}\\p{N}\\s-]/gu, \"\")\r\n      .replace(/\\s+/g, \"-\")\r\n      .replace(/-+/g, \"-\")\r\n      .replace(/^-|-$/g, \"\");\r\n\r\n    onChange(slug);\r\n  };\r\n\r\n  return (\r\n    <div className={className}>\r\n      <div className=\"mb-2 flex items-center justify-between gap-3\">\r\n        <label className=\"text-sm font-medium\">\r\n          {icon}\r\n          {label}\r\n        </label>\r\n\r\n        <button\r\n          type=\"button\"\r\n          onClick={generateSlug}\r\n          disabled={disabled || !title.trim()}\r\n          className=\"inline-flex items-center gap-1.5 rounded-lg px-3 py-2 text-xs font-medium transition disabled:cursor-not-allowed disabled:opacity-50\"\r\n        >\r\n          <WandSparkles className=\"size-4\" />\r\n          {buttonText}\r\n        </button>\r\n      </div>\r\n\r\n      <input\r\n        dir=\"ltr\"\r\n        value={value}\r\n        onChange={(event) => onChange(event.target.value)}\r\n        placeholder={placeholder}\r\n        disabled={disabled}\r\n        className=\"w-full rounded-lg border px-3 py-3 text-sm outline-none\"\r\n      />\r\n    </div>\r\n  );\r\n}"],"mappings":";AAEA,SAAS,oBAAoB;AA6BrB,SAWE,KAXF;AA1BO,SAAR,cAA+B;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,aAAa;AAAA,EACb,WAAW;AAAA,EACX,YAAY;AAAA,EACZ;AACF,GAAuB;AACrB,QAAM,eAAe,MAAM;AACzB,UAAM,OAAO,MACV,YAAY,EACZ,KAAK,EACL,QAAQ,sBAAsB,EAAE,EAChC,QAAQ,QAAQ,GAAG,EACnB,QAAQ,OAAO,GAAG,EAClB,QAAQ,UAAU,EAAE;AAEvB,aAAS,IAAI;AAAA,EACf;AAEA,SACE,qBAAC,SAAI,WACH;AAAA,yBAAC,SAAI,WAAU,gDACb;AAAA,2BAAC,WAAM,WAAU,uBACd;AAAA;AAAA,QACA;AAAA,SACH;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAS;AAAA,UACT,UAAU,YAAY,CAAC,MAAM,KAAK;AAAA,UAClC,WAAU;AAAA,UAEV;AAAA,gCAAC,gBAAa,WAAU,UAAS;AAAA,YAChC;AAAA;AAAA;AAAA,MACH;AAAA,OACF;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,KAAI;AAAA,QACJ;AAAA,QACA,UAAU,CAAC,UAAU,SAAS,MAAM,OAAO,KAAK;AAAA,QAChD;AAAA,QACA;AAAA,QACA,WAAU;AAAA;AAAA,IACZ;AAAA,KACF;AAEJ;","names":[]}

package/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@codav/slug-generator",
+  "version": "1.0.0",
+  "description": "A lightweight, reusable TypeScript-first React slug generator component",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "lucide-react": "^0.400.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "lucide-react": "^0.400.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0"
+  },
+  "license": "MIT"
+}