@moraby/app-launcher 0.1.8 → 2.0.1

package/dist/index.mjs

@@ -259,8 +259,525 @@ function AppLauncher({
     ] })
   ] });
 }
+
+// src/AppSettings.tsx
+import { useState as useState4 } from "react";
+import { FaTimes, FaPlus, FaEdit, FaTrash, FaDownload } from "react-icons/fa";
+
+// src/AddAppForm.tsx
+import { useState as useState3 } from "react";
+
+// src/IconPicker.tsx
+import { useState as useState2 } from "react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var allIcons = Object.keys(iconMap);
+function IconPicker({ selectedIcon, onSelect }) {
+  const [searchTerm, setSearchTerm] = useState2("");
+  const filteredIcons = allIcons.filter(
+    (name) => name.toLowerCase().includes(searchTerm.toLowerCase())
+  );
+  return /* @__PURE__ */ jsxs2("div", { className: "app-launcher-icon-picker", children: [
+    /* @__PURE__ */ jsx2(
+      "input",
+      {
+        type: "text",
+        placeholder: "Search icons...",
+        value: searchTerm,
+        onChange: (e) => setSearchTerm(e.target.value),
+        className: "app-launcher-icon-picker__search"
+      }
+    ),
+    /* @__PURE__ */ jsx2("div", { className: "app-launcher-icon-picker__grid", children: filteredIcons.map((iconName) => {
+      const Icon = iconMap[iconName];
+      const isSelected = selectedIcon === iconName;
+      return /* @__PURE__ */ jsx2(
+        "button",
+        {
+          className: `app-launcher-icon-picker__button ${isSelected ? "app-launcher-icon-picker__button--selected" : ""}`,
+          onClick: () => onSelect(iconName),
+          title: iconName,
+          type: "button",
+          children: /* @__PURE__ */ jsx2(Icon, { className: "app-launcher-icon-picker__icon" })
+        },
+        iconName
+      );
+    }) }),
+    filteredIcons.length === 0 && /* @__PURE__ */ jsx2("div", { className: "app-launcher-icon-picker__empty", children: "No icons found" })
+  ] });
+}
+
+// src/AddAppForm.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var presetColors = [
+  "#4285F4",
+  // Blue
+  "#EA4335",
+  // Red
+  "#FBBC04",
+  // Yellow
+  "#34A853",
+  // Green
+  "#FF6D01",
+  // Orange
+  "#46BDC6",
+  // Teal
+  "#7B1FA2",
+  // Purple
+  "#E91E63",
+  // Pink
+  "#607D8B",
+  // Gray
+  "#795548"
+  // Brown
+];
+function AddAppForm({
+  initialData,
+  onSubmit,
+  onCancel,
+  submitLabel = "Add App"
+}) {
+  const [name, setName] = useState3(initialData?.name || "");
+  const [url, setUrl] = useState3(initialData?.url || "");
+  const initialIcon = initialData?.icon || "FaRocket";
+  const isInitialCustom = initialIcon.startsWith("/") || initialIcon.startsWith("http");
+  const [iconName, setIconName] = useState3(isInitialCustom ? "FaRocket" : initialIcon);
+  const [customIconUrl, setCustomIconUrl] = useState3(isInitialCustom ? initialIcon : "");
+  const [iconMode, setIconMode] = useState3(isInitialCustom ? "custom" : "picker");
+  const [color, setColor] = useState3(initialData?.color || "#4285F4");
+  const [description, setDescription] = useState3(initialData?.description || "");
+  const [errors, setErrors] = useState3({});
+  const SelectedIcon = iconMap[iconName] || iconMap["FaRocket"];
+  const validate = () => {
+    const newErrors = {};
+    if (!name.trim()) {
+      newErrors.name = "Name is required";
+    }
+    if (!url.trim()) {
+      newErrors.url = "URL is required";
+    } else if (!url.startsWith("http://") && !url.startsWith("https://") && !url.startsWith("/")) {
+      newErrors.url = "URL must start with http://, https://, or /";
+    }
+    if (iconMode === "custom" && customIconUrl.trim()) {
+      if (!customIconUrl.startsWith("http://") && !customIconUrl.startsWith("https://") && !customIconUrl.startsWith("/")) {
+        newErrors.customIconUrl = "Icon URL must start with http://, https://, or /";
+      }
+    }
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  };
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (!validate()) return;
+    const finalIcon = iconMode === "custom" && customIconUrl.trim() ? customIconUrl.trim() : iconName;
+    onSubmit({
+      name: name.trim(),
+      url: url.trim(),
+      icon: finalIcon,
+      color,
+      description: description.trim() || void 0
+    });
+  };
+  return /* @__PURE__ */ jsxs3("form", { onSubmit: handleSubmit, className: "app-launcher-form", children: [
+    /* @__PURE__ */ jsxs3("div", { className: "app-launcher-form__preview", children: [
+      /* @__PURE__ */ jsx3("div", { className: "app-launcher-form__preview-icon", style: { backgroundColor: color + "20" }, children: iconMode === "custom" && customIconUrl ? customIconUrl.endsWith(".svg") ? /* @__PURE__ */ jsx3(
+        "div",
+        {
+          className: "app-launcher-form__preview-svg",
+          style: {
+            maskImage: `url(${customIconUrl})`,
+            WebkitMaskImage: `url(${customIconUrl})`,
+            backgroundColor: color === "transparent" ? "#5f6368" : color
+          }
+        }
+      ) : /* @__PURE__ */ jsx3(
+        "img",
+        {
+          src: customIconUrl,
+          alt: "Icon preview",
+          className: "app-launcher-form__preview-img"
+        }
+      ) : /* @__PURE__ */ jsx3(SelectedIcon, { style: { color, fontSize: 32 } }) }),
+      /* @__PURE__ */ jsx3("span", { className: "app-launcher-form__preview-name", children: name || "App Name" })
+    ] }),
+    /* @__PURE__ */ jsxs3("div", { className: "app-launcher-form__field", children: [
+      /* @__PURE__ */ jsx3("label", { htmlFor: "app-name", className: "app-launcher-form__label", children: "Name *" }),
+      /* @__PURE__ */ jsx3(
+        "input",
+        {
+          id: "app-name",
+          type: "text",
+          value: name,
+          onChange: (e) => setName(e.target.value),
+          placeholder: "My App",
+          className: `app-launcher-form__input ${errors.name ? "app-launcher-form__input--error" : ""}`
+        }
+      ),
+      errors.name && /* @__PURE__ */ jsx3("span", { className: "app-launcher-form__error", children: errors.name })
+    ] }),
+    /* @__PURE__ */ jsxs3("div", { className: "app-launcher-form__field", children: [
+      /* @__PURE__ */ jsx3("label", { htmlFor: "app-url", className: "app-launcher-form__label", children: "URL *" }),
+      /* @__PURE__ */ jsx3(
+        "input",
+        {
+          id: "app-url",
+          type: "text",
+          value: url,
+          onChange: (e) => setUrl(e.target.value),
+          placeholder: "https://myapp.com or /dashboard",
+          className: `app-launcher-form__input ${errors.url ? "app-launcher-form__input--error" : ""}`
+        }
+      ),
+      errors.url && /* @__PURE__ */ jsx3("span", { className: "app-launcher-form__error", children: errors.url })
+    ] }),
+    /* @__PURE__ */ jsxs3("div", { className: "app-launcher-form__field", children: [
+      /* @__PURE__ */ jsx3("label", { htmlFor: "app-description", className: "app-launcher-form__label", children: "Description" }),
+      /* @__PURE__ */ jsx3(
+        "input",
+        {
+          id: "app-description",
+          type: "text",
+          value: description,
+          onChange: (e) => setDescription(e.target.value),
+          placeholder: "Optional description (shown on hover)",
+          className: "app-launcher-form__input"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs3("div", { className: "app-launcher-form__field", children: [
+      /* @__PURE__ */ jsx3("label", { className: "app-launcher-form__label", children: "Color" }),
+      /* @__PURE__ */ jsxs3("div", { className: "app-launcher-form__color-picker", children: [
+        presetColors.map((presetColor) => /* @__PURE__ */ jsx3(
+          "button",
+          {
+            type: "button",
+            className: `app-launcher-form__color-button ${color === presetColor ? "app-launcher-form__color-button--selected" : ""}`,
+            style: { backgroundColor: presetColor },
+            onClick: () => setColor(presetColor),
+            title: presetColor
+          },
+          presetColor
+        )),
+        /* @__PURE__ */ jsx3(
+          "input",
+          {
+            type: "color",
+            value: color,
+            onChange: (e) => setColor(e.target.value),
+            className: "app-launcher-form__color-input",
+            title: "Custom color"
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs3("div", { className: "app-launcher-form__field", children: [
+      /* @__PURE__ */ jsx3("label", { className: "app-launcher-form__label", children: "Icon" }),
+      /* @__PURE__ */ jsxs3("div", { className: "app-launcher-form__icon-mode", children: [
+        /* @__PURE__ */ jsx3(
+          "button",
+          {
+            type: "button",
+            className: `app-launcher-form__mode-button ${iconMode === "picker" ? "app-launcher-form__mode-button--active" : ""}`,
+            onClick: () => setIconMode("picker"),
+            children: "Icon Picker"
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          "button",
+          {
+            type: "button",
+            className: `app-launcher-form__mode-button ${iconMode === "custom" ? "app-launcher-form__mode-button--active" : ""}`,
+            onClick: () => setIconMode("custom"),
+            children: "Custom URL"
+          }
+        )
+      ] }),
+      iconMode === "picker" ? /* @__PURE__ */ jsx3(IconPicker, { selectedIcon: iconName, onSelect: setIconName }) : /* @__PURE__ */ jsxs3("div", { className: "app-launcher-form__custom-icon", children: [
+        /* @__PURE__ */ jsx3(
+          "input",
+          {
+            id: "app-custom-icon",
+            type: "text",
+            value: customIconUrl,
+            onChange: (e) => setCustomIconUrl(e.target.value),
+            placeholder: "/icons/my-icon.svg or https://cdn.example.com/icon.svg",
+            className: `app-launcher-form__input ${errors.customIconUrl ? "app-launcher-form__input--error" : ""}`
+          }
+        ),
+        errors.customIconUrl && /* @__PURE__ */ jsx3("span", { className: "app-launcher-form__error", children: errors.customIconUrl }),
+        /* @__PURE__ */ jsx3("p", { className: "app-launcher-form__hint", children: "Enter a path from your public folder (e.g., /icons/logo.svg) or a full URL" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs3("div", { className: "app-launcher-form__actions", children: [
+      /* @__PURE__ */ jsx3(
+        "button",
+        {
+          type: "button",
+          onClick: onCancel,
+          className: "app-launcher-form__button app-launcher-form__button--cancel",
+          children: "Cancel"
+        }
+      ),
+      /* @__PURE__ */ jsx3(
+        "button",
+        {
+          type: "submit",
+          className: "app-launcher-form__button app-launcher-form__button--submit",
+          children: submitLabel
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/AppSettings.tsx
+import { Fragment, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function AppSettings({
+  isOpen,
+  onClose,
+  apps,
+  defaultApps = [],
+  onAdd,
+  onUpdate,
+  onDelete
+}) {
+  const [showAddForm, setShowAddForm] = useState4(false);
+  const [editingApp, setEditingApp] = useState4(null);
+  if (!isOpen) return null;
+  const handleAddSubmit = (data) => {
+    onAdd(data);
+    setShowAddForm(false);
+  };
+  const handleEditSubmit = (data) => {
+    if (editingApp) {
+      onUpdate(editingApp.id, data);
+      setEditingApp(null);
+    }
+  };
+  const handleDelete = (id) => {
+    if (confirm("Are you sure you want to delete this app?")) {
+      onDelete(id);
+    }
+  };
+  const handleExportConfig = () => {
+    const exportedApps = [
+      // User apps first (they appear at top)
+      ...apps,
+      // Then default apps
+      ...defaultApps.filter((da) => !apps.some((ua) => ua.id === da.id))
+      // Avoid duplicates if any
+    ];
+    const config = {
+      version: "1.0",
+      exportedAt: (/* @__PURE__ */ new Date()).toISOString(),
+      apps: exportedApps
+    };
+    const blob = new Blob([JSON.stringify(config, null, 2)], { type: "application/json" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = "app-launcher-config.json";
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  };
+  return /* @__PURE__ */ jsx4("div", { className: "app-settings__overlay", children: /* @__PURE__ */ jsxs4("div", { className: "app-settings__modal", onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ jsxs4("div", { className: "app-settings__header", children: [
+      /* @__PURE__ */ jsx4("h2", { className: "app-settings__title", children: showAddForm ? "Add New App" : editingApp ? "Edit App" : "Settings" }),
+      /* @__PURE__ */ jsx4("button", { className: "app-settings__close-button", onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ jsx4(FaTimes, {}) })
+    ] }),
+    /* @__PURE__ */ jsx4("div", { className: "app-settings__content", children: showAddForm ? /* @__PURE__ */ jsx4(
+      AddAppForm,
+      {
+        onSubmit: handleAddSubmit,
+        onCancel: () => setShowAddForm(false),
+        submitLabel: "Add App"
+      }
+    ) : editingApp ? /* @__PURE__ */ jsx4(
+      AddAppForm,
+      {
+        initialData: editingApp,
+        onSubmit: handleEditSubmit,
+        onCancel: () => setEditingApp(null),
+        submitLabel: "Save Changes"
+      }
+    ) : /* @__PURE__ */ jsxs4(Fragment, { children: [
+      /* @__PURE__ */ jsxs4("button", { className: "app-settings__add-button", onClick: () => setShowAddForm(true), children: [
+        /* @__PURE__ */ jsx4(FaPlus, { className: "app-settings__add-icon" }),
+        "Add New App"
+      ] }),
+      /* @__PURE__ */ jsxs4("div", { className: "app-settings__list", children: [
+        /* @__PURE__ */ jsx4("h3", { className: "app-settings__section-title", children: "My Custom Apps" }),
+        apps.length === 0 ? /* @__PURE__ */ jsx4("p", { className: "app-settings__empty-message", children: 'No custom apps yet. Click "Add New App" to get started.' }) : /* @__PURE__ */ jsx4("div", { className: "app-settings__grid", children: apps.map((app) => {
+          const isCustom = app.icon.startsWith("/") || app.icon.startsWith("http");
+          const Icon = !isCustom ? iconMap[app.icon] || iconMap["FaRocket"] : null;
+          return /* @__PURE__ */ jsxs4("div", { className: "app-settings__card", children: [
+            /* @__PURE__ */ jsxs4("div", { className: "app-settings__card-info", children: [
+              /* @__PURE__ */ jsx4(
+                "div",
+                {
+                  className: "app-settings__card-icon",
+                  style: { backgroundColor: app.color + "20" },
+                  children: isCustom ? app.icon.endsWith(".svg") ? /* @__PURE__ */ jsx4(
+                    "div",
+                    {
+                      style: {
+                        width: 20,
+                        height: 20,
+                        maskImage: `url(${app.icon})`,
+                        WebkitMaskImage: `url(${app.icon})`,
+                        maskSize: "contain",
+                        maskRepeat: "no-repeat",
+                        maskPosition: "center",
+                        WebkitMaskSize: "contain",
+                        WebkitMaskRepeat: "no-repeat",
+                        WebkitMaskPosition: "center",
+                        backgroundColor: app.color === "transparent" ? "#5f6368" : app.color
+                      }
+                    }
+                  ) : /* @__PURE__ */ jsx4(
+                    "img",
+                    {
+                      src: app.icon,
+                      alt: app.name,
+                      style: { width: 20, height: 20, objectFit: "contain" }
+                    }
+                  ) : Icon && /* @__PURE__ */ jsx4(Icon, { style: { color: app.color } })
+                }
+              ),
+              /* @__PURE__ */ jsxs4("div", { className: "app-settings__card-details", children: [
+                /* @__PURE__ */ jsx4("span", { className: "app-settings__card-name", children: app.name }),
+                /* @__PURE__ */ jsx4("span", { className: "app-settings__card-url", children: app.url })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs4("div", { className: "app-settings__card-actions", children: [
+              /* @__PURE__ */ jsx4(
+                "button",
+                {
+                  className: "app-settings__action-button",
+                  onClick: () => setEditingApp(app),
+                  title: "Edit",
+                  children: /* @__PURE__ */ jsx4(FaEdit, {})
+                }
+              ),
+              /* @__PURE__ */ jsx4(
+                "button",
+                {
+                  className: "app-settings__action-button app-settings__action-button--delete",
+                  onClick: () => handleDelete(app.id),
+                  title: "Delete",
+                  children: /* @__PURE__ */ jsx4(FaTrash, {})
+                }
+              )
+            ] })
+          ] }, app.id);
+        }) })
+      ] }),
+      /* @__PURE__ */ jsxs4("button", { className: "app-settings__export-button", onClick: handleExportConfig, children: [
+        /* @__PURE__ */ jsx4(FaDownload, { className: "app-settings__export-icon" }),
+        "Export Configuration"
+      ] }),
+      /* @__PURE__ */ jsx4("div", { className: "app-settings__info", children: /* @__PURE__ */ jsx4("p", { children: 'Custom apps are saved in your browser. Use "Export Configuration" to share with other apps.' }) })
+    ] }) })
+  ] }) });
+}
+
+// src/LocalAppLauncher.tsx
+import { useState as useState5, useEffect as useEffect2 } from "react";
+import { FaCog as FaCog2 } from "react-icons/fa";
+import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var STORAGE_KEY = "app-launcher-user-apps";
+function LocalAppLauncher({
+  defaultApps = [],
+  className,
+  mergeDefaultApps = true
+}) {
+  const [showSettings, setShowSettings] = useState5(false);
+  const [userApps, setUserApps] = useState5([]);
+  const [isLoaded, setIsLoaded] = useState5(false);
+  useEffect2(() => {
+    if (typeof window !== "undefined") {
+      try {
+        const stored = localStorage.getItem(STORAGE_KEY);
+        if (stored) {
+          setUserApps(JSON.parse(stored));
+        }
+      } catch (e) {
+        console.error("Failed to load apps from localStorage", e);
+      }
+      setIsLoaded(true);
+    }
+  }, []);
+  const saveApps = (apps) => {
+    setUserApps(apps);
+    if (typeof window !== "undefined") {
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(apps));
+    }
+  };
+  const handleAddApp = (data) => {
+    const newApp = {
+      ...data,
+      id: `custom-${Date.now()}`
+    };
+    saveApps([...userApps, newApp]);
+  };
+  const handleUpdateApp = (id, updates) => {
+    saveApps(userApps.map((app) => app.id === id ? { ...app, ...updates } : app));
+  };
+  const handleDeleteApp = (id) => {
+    saveApps(userApps.filter((app) => app.id !== id));
+  };
+  const displayApps = isLoaded ? mergeDefaultApps ? [...userApps, ...defaultApps.filter((da) => !userApps.some((ua) => ua.id === da.id))] : userApps.length > 0 ? userApps : defaultApps : [];
+  return /* @__PURE__ */ jsxs5(Fragment2, { children: [
+    /* @__PURE__ */ jsx5(
+      AppLauncher,
+      {
+        apps: displayApps,
+        className,
+        renderFooter: () => /* @__PURE__ */ jsxs5(
+          "button",
+          {
+            className: "app-launcher__footer-button",
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: "8px",
+              width: "100%",
+              justifyContent: "center",
+              border: "none",
+              background: "transparent",
+              cursor: "pointer",
+              color: "var(--al-text-secondary)",
+              fontSize: "14px",
+              fontWeight: 500
+            },
+            onClick: () => setShowSettings(true),
+            children: [
+              /* @__PURE__ */ jsx5(FaCog2, { style: { fontSize: "16px" } }),
+              "Settings"
+            ]
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx5(
+      AppSettings,
+      {
+        isOpen: showSettings,
+        onClose: () => setShowSettings(false),
+        apps: userApps,
+        defaultApps,
+        onAdd: handleAddApp,
+        onUpdate: handleUpdateApp,
+        onDelete: handleDeleteApp
+      }
+    )
+  ] });
+}
 export {
   AppLauncher,
+  AppSettings,
+  LocalAppLauncher,
   AppLauncher as default,
   getIcon,
   iconMap