npm - @jojovms/react-ninja-keys - Versions diffs - 0.0.1 - Mend

@jojovms/react-ninja-keys 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/README.md ADDED Viewed

@@ -0,0 +1,37 @@
+# @jojovms/react-ninja-keys 🥷
+React wrapper for `@jojovms/ninja-keys-core`.
+## Installation
+```bash
+npm install @jojovms/react-ninja-keys
+```
+## Usage
+```jsx
+import { NinjaKeys } from '@jojovms/react-ninja-keys';
+import { useRef } from 'react';
+function App() {
+  const ninjaRef = useRef(null);
+  const actions = [
+    { id: '1', title: 'Action 1', handler: () => alert('Action 1') }
+  ];
+  return (
+    <>
+      <button onClick={() => ninjaRef.current.toggle()}>Open Cmd+K</button>
+      <NinjaKeys
+        ref={ninjaRef}
+        actions={actions}
+        theme="dark"
+        hotkey="k"
+      />
+    </>
+  );
+}
+```

package/dist/index.d.ts ADDED Viewed

@@ -0,0 +1,10 @@
+import { NinjaKeysOptions } from '@jojovms/ninja-keys-core';
+export interface NinjaKeysRef {
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+}
+export type NinjaKeysProps = NinjaKeysOptions;
+export declare const NinjaKeys: import('react').ForwardRefExoticComponent<NinjaKeysOptions & import('react').RefAttributes<NinjaKeysRef>>;
+export type { NinjaAction } from '@jojovms/ninja-keys-core';

package/dist/index.mjs ADDED Viewed

@@ -0,0 +1,171 @@
+import { forwardRef as h, useRef as p, useEffect as u, useImperativeHandle as y } from "react";
+var f = Object.defineProperty, v = (n, e, t) => e in n ? f(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t, r = (n, e, t) => v(n, typeof e != "symbol" ? e + "" : e, t);
+class m {
+  constructor(e) {
+    r(this, "options"), r(this, "isOpen", !1), r(this, "overlay", null), r(this, "input", null), r(this, "resultsList", null), r(this, "selectedIndex", 0), r(this, "filteredActions", []), r(this, "cleanupFns", []), this.options = {
+      placeholder: "Type a command or search...",
+      theme: "light",
+      hotkey: "k",
+      ...e
+    }, this.filteredActions = this.options.actions;
+  }
+  init() {
+    this.createOverlay();
+    const e = (t) => {
+      (t.ctrlKey || t.metaKey) && t.key === (this.options.hotkey || "k") && (t.preventDefault(), this.toggle()), t.key === "Escape" && this.isOpen && this.close(), this.isOpen && (t.key === "ArrowDown" ? (t.preventDefault(), this.moveSelection(1)) : t.key === "ArrowUp" ? (t.preventDefault(), this.moveSelection(-1)) : t.key === "Enter" && (t.preventDefault(), this.executeSelected()));
+    };
+    window.addEventListener("keydown", e), this.cleanupFns.push(() => window.removeEventListener("keydown", e));
+  }
+  cleanup() {
+    this.cleanupFns.forEach((e) => e()), this.overlay && this.overlay.remove();
+  }
+  open() {
+    this.isOpen || !this.overlay || (this.isOpen = !0, this.overlay.style.display = "flex", this.overlay.style.opacity = "0", requestAnimationFrame(() => {
+      this.overlay && (this.overlay.style.opacity = "1");
+    }), this.input && (this.input.value = "", this.input.focus(), this.filterActions("")));
+  }
+  close() {
+    !this.isOpen || !this.overlay || (this.overlay.style.opacity = "0", setTimeout(() => {
+      this.overlay && (this.overlay.style.display = "none"), this.isOpen = !1;
+    }, 200));
+  }
+  toggle() {
+    this.isOpen ? this.close() : this.open();
+  }
+  createOverlay() {
+    if (this.overlay) return;
+    this.overlay = document.createElement("div"), Object.assign(this.overlay.style, {
+      position: "fixed",
+      top: "0",
+      left: "0",
+      width: "100%",
+      height: "100%",
+      background: "rgba(0,0,0,0.5)",
+      zIndex: "9999",
+      display: "none",
+      justifyContent: "center",
+      alignItems: "flex-start",
+      paddingTop: "10vh",
+      transition: "opacity 0.2s ease",
+      fontFamily: "sans-serif",
+      backdropFilter: "blur(2px)"
+    }), this.overlay.addEventListener("click", (l) => {
+      l.target === this.overlay && this.close();
+    });
+    const e = document.createElement("div"), t = this.options.theme === "dark" ? "#1f2937" : "#ffffff", i = this.options.theme === "dark" ? "#f3f4f6" : "#111827", o = this.options.theme === "dark" ? "#374151" : "#e5e7eb";
+    Object.assign(e.style, {
+      width: "600px",
+      maxWidth: "90%",
+      maxHeight: "80vh",
+      background: t,
+      color: i,
+      borderRadius: "8px",
+      boxShadow: "0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04)",
+      overflow: "hidden",
+      display: "flex",
+      flexDirection: "column",
+      border: `1px solid ${o}`
+    });
+    const s = document.createElement("div");
+    s.style.borderBottom = `1px solid ${o}`, s.style.padding = "16px", this.input = document.createElement("input"), Object.assign(this.input.style, {
+      width: "100%",
+      background: "transparent",
+      border: "none",
+      outline: "none",
+      fontSize: "18px",
+      color: i
+    }), this.input.placeholder = this.options.placeholder || "Type to search...", this.input.addEventListener("input", (l) => {
+      this.filterActions(l.target.value);
+    }), s.appendChild(this.input), e.appendChild(s), this.resultsList = document.createElement("div"), Object.assign(this.resultsList.style, {
+      overflowY: "auto",
+      padding: "8px 0",
+      maxHeight: "50vh"
+    }), e.appendChild(this.resultsList), this.overlay.appendChild(e), document.body.appendChild(this.overlay);
+  }
+  filterActions(e) {
+    const t = e.toLowerCase().trim();
+    t ? this.filteredActions = this.options.actions.filter((i) => {
+      var o, s;
+      return i.title.toLowerCase().includes(t) || ((o = i.keywords) == null ? void 0 : o.toLowerCase().includes(t)) || ((s = i.section) == null ? void 0 : s.toLowerCase().includes(t));
+    }) : this.filteredActions = this.options.actions, this.selectedIndex = 0, this.renderList();
+  }
+  moveSelection(e) {
+    this.selectedIndex += e, this.selectedIndex < 0 && (this.selectedIndex = this.filteredActions.length - 1), this.selectedIndex >= this.filteredActions.length && (this.selectedIndex = 0), this.renderList(), this.ensureVisible();
+  }
+  ensureVisible() {
+    if (!this.resultsList) return;
+    const e = this.resultsList.children[this.selectedIndex];
+    e && e.scrollIntoView({ block: "nearest" });
+  }
+  executeSelected() {
+    const e = this.filteredActions[this.selectedIndex];
+    e && e.handler && (e.handler(), this.close());
+  }
+  renderList() {
+    if (!this.resultsList) return;
+    this.resultsList.innerHTML = "";
+    const e = this.options.theme === "dark" ? "#374151" : "#f3f4f6", t = this.options.theme === "dark" ? "#9ca3af" : "#6b7280";
+    if (this.filteredActions.forEach((i, o) => {
+      const s = document.createElement("div"), l = o === this.selectedIndex;
+      Object.assign(s.style, {
+        padding: "12px 16px",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        cursor: "pointer",
+        background: l ? e : "transparent",
+        borderLeft: l ? "4px solid #6366f1" : "4px solid transparent"
+      });
+      const a = document.createElement("div");
+      if (a.style.display = "flex", a.style.alignItems = "center", a.style.gap = "12px", i.icon) {
+        const d = document.createElement("span");
+        d.innerHTML = i.icon, a.appendChild(d);
+      }
+      const c = document.createElement("span");
+      if (c.textContent = i.title, a.appendChild(c), s.appendChild(a), i.hotkey) {
+        const d = document.createElement("div");
+        d.textContent = i.hotkey, Object.assign(d.style, {
+          fontSize: "12px",
+          padding: "2px 6px",
+          borderRadius: "4px",
+          background: this.options.theme === "dark" ? "#4b5563" : "#e5e7eb",
+          color: t
+        }), s.appendChild(d);
+      }
+      s.addEventListener("click", () => {
+        i.handler && (i.handler(), this.close());
+      }), s.addEventListener("mouseenter", () => {
+        this.selectedIndex = o, this.renderList();
+      }), this.resultsList.appendChild(s);
+    }), this.filteredActions.length === 0) {
+      const i = document.createElement("div");
+      i.textContent = "No results found.", Object.assign(i.style, {
+        padding: "20px",
+        textAlign: "center",
+        color: t
+      }), this.resultsList.appendChild(i);
+    }
+  }
+}
+const g = h((n, e) => {
+  const t = p(null);
+  return u(() => (t.current = new m(n), t.current.init(), () => {
+    t.current && t.current.cleanup();
+  }), [JSON.stringify(n.actions), n.theme, n.placeholder, n.hotkey]), y(e, () => ({
+    open: () => {
+      var i;
+      return (i = t.current) == null ? void 0 : i.open();
+    },
+    close: () => {
+      var i;
+      return (i = t.current) == null ? void 0 : i.close();
+    },
+    toggle: () => {
+      var i;
+      return (i = t.current) == null ? void 0 : i.toggle();
+    }
+  })), null;
+});
+export {
+  g as NinjaKeys
+};

package/dist/index.umd.js ADDED Viewed

@@ -0,0 +1 @@

package/package.json ADDED Viewed

@@ -0,0 +1,55 @@
+{
+    "name": "@jojovms/react-ninja-keys",
+    "version": "0.0.1",
+    "description": "Commandō: React wrapper for @jojovms/ninja-keys-core. Your commands, unleashed.",
+    "keywords": [
+        "react",
+        "commando",
+        "command-palette",
+        "ninja-keys",
+        "keyboard-shortcuts",
+        "hook",
+        "component",
+        "jojovms"
+    ],
+    "author": "Shijo Shaji (https://shijoshaji.in)",
+    "homepage": "https://shijoshaji.in",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/shijoshaji/ninja-keys.git",
+        "directory": "react"
+    },
+    "bugs": {
+        "url": "https://github.com/shijoshaji/ninja-keys/issues"
+    },
+    "license": "MIT",
+    "main": "dist/index.js",
+    "module": "dist/index.mjs",
+    "types": "dist/index.d.ts",
+    "files": [
+        "dist"
+    ],
+    "scripts": {
+        "build": "vite build",
+        "dev": "vite build --watch"
+    },
+    "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+    },
+    "dependencies": {
+        "@jojovms/ninja-keys-core": "*"
+    },
+    "devDependencies": {
+        "@types/react": "^18.0.0",
+        "@types/react-dom": "^18.0.0",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0",
+        "typescript": "^5.0.0",
+        "vite": "^5.0.0",
+        "vite-plugin-dts": "^3.0.0"
+    },
+    "publishConfig": {
+        "access": "public"
+    }
+}