ontheway-sdk 0.1.0

package/dist/components.d.cts

@@ -0,0 +1,51 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface HelpMenuProps {
+    /** 按钮文字，默认 "?" */
+    label?: string | React.ReactNode;
+    /** 菜单标题 */
+    title?: string;
+    /** 自定义位置 */
+    position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+    /** 自定义样式类 */
+    className?: string;
+    /** 自定义按钮样式类 */
+    buttonClassName?: string;
+}
+/**
+ * 帮助菜单组件 - 显示所有可用的 onboarding 任务
+ *
+ * @example
+ * ```tsx
+ * // 基础用法
+ * <HelpMenu />
+ *
+ * // 自定义
+ * <HelpMenu label="Need help?" title="Guides" position="bottom-left" />
+ * ```
+ */
+declare function HelpMenu({ label, title, position, className, buttonClassName, }: HelpMenuProps): react_jsx_runtime.JSX.Element;
+interface HelpTriggerProps {
+    /** 要触发的任务 slug */
+    taskSlug: string;
+    children: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * 内联触发按钮 - 包裹任何元素，点击启动指定任务
+ *
+ * @example
+ * ```tsx
+ * <HelpTrigger taskSlug="welcome">
+ *   <button>Show Tour</button>
+ * </HelpTrigger>
+ *
+ * <HelpTrigger taskSlug="settings-guide">
+ *   <span className="text-blue-500 cursor-pointer">Learn more</span>
+ * </HelpTrigger>
+ * ```
+ */
+declare function HelpTrigger({ taskSlug, children, className, style, }: HelpTriggerProps): react_jsx_runtime.JSX.Element;
+
+export { HelpMenu, HelpTrigger, HelpMenu as default };

package/dist/components.d.ts

@@ -0,0 +1,51 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface HelpMenuProps {
+    /** 按钮文字，默认 "?" */
+    label?: string | React.ReactNode;
+    /** 菜单标题 */
+    title?: string;
+    /** 自定义位置 */
+    position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+    /** 自定义样式类 */
+    className?: string;
+    /** 自定义按钮样式类 */
+    buttonClassName?: string;
+}
+/**
+ * 帮助菜单组件 - 显示所有可用的 onboarding 任务
+ *
+ * @example
+ * ```tsx
+ * // 基础用法
+ * <HelpMenu />
+ *
+ * // 自定义
+ * <HelpMenu label="Need help?" title="Guides" position="bottom-left" />
+ * ```
+ */
+declare function HelpMenu({ label, title, position, className, buttonClassName, }: HelpMenuProps): react_jsx_runtime.JSX.Element;
+interface HelpTriggerProps {
+    /** 要触发的任务 slug */
+    taskSlug: string;
+    children: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * 内联触发按钮 - 包裹任何元素，点击启动指定任务
+ *
+ * @example
+ * ```tsx
+ * <HelpTrigger taskSlug="welcome">
+ *   <button>Show Tour</button>
+ * </HelpTrigger>
+ *
+ * <HelpTrigger taskSlug="settings-guide">
+ *   <span className="text-blue-500 cursor-pointer">Learn more</span>
+ * </HelpTrigger>
+ * ```
+ */
+declare function HelpTrigger({ taskSlug, children, className, style, }: HelpTriggerProps): react_jsx_runtime.JSX.Element;
+
+export { HelpMenu, HelpTrigger, HelpMenu as default };

package/dist/components.js

@@ -0,0 +1,205 @@
+import { useOnTheWay } from './chunk-RNQLNLNI.js';
+import './chunk-OKJ5GEH3.js';
+import { __spreadProps, __spreadValues } from './chunk-DDAAVRWG.js';
+import { useState, useRef, useEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function HelpMenu({
+  label = "?",
+  title = "Help & Guides",
+  position = "bottom-right",
+  className = "",
+  buttonClassName = ""
+}) {
+  var _a;
+  const { otw, ready, start } = useOnTheWay();
+  const [open, setOpen] = useState(false);
+  const menuRef = useRef(null);
+  const tasks = ready ? (_a = otw == null ? void 0 : otw.getTasks()) != null ? _a : [] : [];
+  useEffect(() => {
+    const handleClick = (e) => {
+      if (menuRef.current && !menuRef.current.contains(e.target)) {
+        setOpen(false);
+      }
+    };
+    if (open) document.addEventListener("mousedown", handleClick);
+    return () => document.removeEventListener("mousedown", handleClick);
+  }, [open]);
+  const positionStyles = {
+    "bottom-right": { position: "fixed", bottom: 24, right: 24 },
+    "bottom-left": { position: "fixed", bottom: 24, left: 24 },
+    "top-right": { position: "fixed", top: 24, right: 24 },
+    "top-left": { position: "fixed", top: 24, left: 24 }
+  };
+  const menuPosition = {
+    "bottom-right": { bottom: "100%", right: 0, marginBottom: 8 },
+    "bottom-left": { bottom: "100%", left: 0, marginBottom: 8 },
+    "top-right": { top: "100%", right: 0, marginTop: 8 },
+    "top-left": { top: "100%", left: 0, marginTop: 8 }
+  };
+  const triggerLabels = {
+    auto: "\u{1F504}",
+    manual: "\u{1F446}",
+    "first-visit": "\u{1F44B}"
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: menuRef,
+      style: __spreadProps(__spreadValues({}, positionStyles[position]), { zIndex: 2147483640 }),
+      className,
+      children: [
+        open && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: __spreadProps(__spreadValues({
+              position: "absolute"
+            }, menuPosition[position]), {
+              width: 280,
+              background: "#fff",
+              borderRadius: 12,
+              boxShadow: "0 8px 32px rgba(0,0,0,0.15)",
+              border: "1px solid #e5e7eb",
+              overflow: "hidden",
+              fontFamily: "system-ui, -apple-system, sans-serif"
+            }),
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    padding: "14px 16px",
+                    borderBottom: "1px solid #f3f4f6",
+                    fontWeight: 600,
+                    fontSize: 14,
+                    color: "#111"
+                  },
+                  children: title
+                }
+              ),
+              /* @__PURE__ */ jsx("div", { style: { maxHeight: 320, overflowY: "auto" }, children: tasks.length === 0 ? /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    padding: "24px 16px",
+                    textAlign: "center",
+                    color: "#9ca3af",
+                    fontSize: 13
+                  },
+                  children: ready ? "No guides available" : "Loading..."
+                }
+              ) : tasks.map((task) => {
+                var _a2;
+                return /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    onClick: () => {
+                      start(task.slug);
+                      setOpen(false);
+                    },
+                    style: {
+                      display: "flex",
+                      alignItems: "center",
+                      gap: 10,
+                      width: "100%",
+                      padding: "12px 16px",
+                      border: "none",
+                      background: "none",
+                      cursor: "pointer",
+                      textAlign: "left",
+                      fontSize: 14,
+                      color: "#374151",
+                      borderBottom: "1px solid #f9fafb",
+                      transition: "background 0.15s"
+                    },
+                    onMouseEnter: (e) => e.currentTarget.style.background = "#f9fafb",
+                    onMouseLeave: (e) => e.currentTarget.style.background = "none",
+                    children: [
+                      /* @__PURE__ */ jsx("span", { style: { fontSize: 16 }, children: (_a2 = triggerLabels[task.trigger]) != null ? _a2 : "\u{1F4D6}" }),
+                      /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
+                        /* @__PURE__ */ jsx("div", { style: { fontWeight: 500 }, children: task.slug.replace(/[-_]/g, " ").replace(/\b\w/g, (c) => c.toUpperCase()) }),
+                        /* @__PURE__ */ jsxs("div", { style: { fontSize: 12, color: "#9ca3af" }, children: [
+                          task.steps.length,
+                          " steps"
+                        ] })
+                      ] }),
+                      /* @__PURE__ */ jsx("span", { style: { color: "#d1d5db", fontSize: 18 }, children: "\u203A" })
+                    ]
+                  },
+                  task.id
+                );
+              }) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => setOpen(!open),
+            className: buttonClassName,
+            style: buttonClassName ? void 0 : {
+              width: 48,
+              height: 48,
+              borderRadius: "50%",
+              border: "none",
+              background: "#111",
+              color: "#fff",
+              fontSize: 20,
+              fontWeight: 700,
+              cursor: "pointer",
+              boxShadow: "0 4px 14px rgba(0,0,0,0.2)",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              transition: "transform 0.2s, box-shadow 0.2s"
+            },
+            onMouseEnter: (e) => {
+              if (!buttonClassName) {
+                e.currentTarget.style.transform = "scale(1.1)";
+                e.currentTarget.style.boxShadow = "0 6px 20px rgba(0,0,0,0.25)";
+              }
+            },
+            onMouseLeave: (e) => {
+              if (!buttonClassName) {
+                e.currentTarget.style.transform = "scale(1)";
+                e.currentTarget.style.boxShadow = "0 4px 14px rgba(0,0,0,0.2)";
+              }
+            },
+            "aria-label": "Help menu",
+            children: label
+          }
+        )
+      ]
+    }
+  );
+}
+function HelpTrigger({
+  taskSlug,
+  children,
+  className,
+  style
+}) {
+  const { start, ready } = useOnTheWay();
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      onClick: () => ready && start(taskSlug),
+      className,
+      style: __spreadValues({ cursor: ready ? "pointer" : "default" }, style),
+      role: "button",
+      tabIndex: 0,
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          ready && start(taskSlug);
+        }
+      },
+      children
+    }
+  );
+}
+var components_default = HelpMenu;
+
+export { HelpMenu, HelpTrigger, components_default as default };
+//# sourceMappingURL=components.js.map
+//# sourceMappingURL=components.js.map

package/dist/components.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components.tsx"],"names":["_a"],"mappings":"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","file":"components.js","sourcesContent":["'use client'\n\nimport { useState, useRef, useEffect } from 'react'\nimport { useOnTheWay } from './react'\n\n// ---- Types ----\n\ninterface HelpMenuProps {\n  /** 按钮文字，默认 \"?\" */\n  label?: string | React.ReactNode\n  /** 菜单标题 */\n  title?: string\n  /** 自定义位置 */\n  position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'\n  /** 自定义样式类 */\n  className?: string\n  /** 自定义按钮样式类 */\n  buttonClassName?: string\n}\n\n/**\n * 帮助菜单组件 - 显示所有可用的 onboarding 任务\n *\n * @example\n * ```tsx\n * // 基础用法\n * <HelpMenu />\n *\n * // 自定义\n * <HelpMenu label=\"Need help?\" title=\"Guides\" position=\"bottom-left\" />\n * ```\n */\nexport function HelpMenu({\n  label = '?',\n  title = 'Help & Guides',\n  position = 'bottom-right',\n  className = '',\n  buttonClassName = '',\n}: HelpMenuProps) {\n  const { otw, ready, start } = useOnTheWay()\n  const [open, setOpen] = useState(false)\n  const menuRef = useRef<HTMLDivElement>(null)\n\n  const tasks = ready ? otw?.getTasks() ?? [] : []\n\n  // 点击外部关闭\n  useEffect(() => {\n    const handleClick = (e: MouseEvent) => {\n      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {\n        setOpen(false)\n      }\n    }\n    if (open) document.addEventListener('mousedown', handleClick)\n    return () => document.removeEventListener('mousedown', handleClick)\n  }, [open])\n\n  const positionStyles: Record<string, React.CSSProperties> = {\n    'bottom-right': { position: 'fixed', bottom: 24, right: 24 },\n    'bottom-left': { position: 'fixed', bottom: 24, left: 24 },\n    'top-right': { position: 'fixed', top: 24, right: 24 },\n    'top-left': { position: 'fixed', top: 24, left: 24 },\n  }\n\n  const menuPosition: Record<string, React.CSSProperties> = {\n    'bottom-right': { bottom: '100%', right: 0, marginBottom: 8 },\n    'bottom-left': { bottom: '100%', left: 0, marginBottom: 8 },\n    'top-right': { top: '100%', right: 0, marginTop: 8 },\n    'top-left': { top: '100%', left: 0, marginTop: 8 },\n  }\n\n  const triggerLabels: Record<string, string> = {\n    auto: '🔄',\n    manual: '👆',\n    'first-visit': '👋',\n  }\n\n  return (\n    <div\n      ref={menuRef}\n      style={{ ...positionStyles[position], zIndex: 2147483640 }}\n      className={className}\n    >\n      {/* 菜单面板 */}\n      {open && (\n        <div\n          style={{\n            position: 'absolute',\n            ...menuPosition[position],\n            width: 280,\n            background: '#fff',\n            borderRadius: 12,\n            boxShadow: '0 8px 32px rgba(0,0,0,0.15)',\n            border: '1px solid #e5e7eb',\n            overflow: 'hidden',\n            fontFamily: 'system-ui, -apple-system, sans-serif',\n          }}\n        >\n          {/* Header */}\n          <div\n            style={{\n              padding: '14px 16px',\n              borderBottom: '1px solid #f3f4f6',\n              fontWeight: 600,\n              fontSize: 14,\n              color: '#111',\n            }}\n          >\n            {title}\n          </div>\n\n          {/* Task list */}\n          <div style={{ maxHeight: 320, overflowY: 'auto' }}>\n            {tasks.length === 0 ? (\n              <div\n                style={{\n                  padding: '24px 16px',\n                  textAlign: 'center',\n                  color: '#9ca3af',\n                  fontSize: 13,\n                }}\n              >\n                {ready ? 'No guides available' : 'Loading...'}\n              </div>\n            ) : (\n              tasks.map((task) => (\n                <button\n                  key={task.id}\n                  onClick={() => {\n                    start(task.slug)\n                    setOpen(false)\n                  }}\n                  style={{\n                    display: 'flex',\n                    alignItems: 'center',\n                    gap: 10,\n                    width: '100%',\n                    padding: '12px 16px',\n                    border: 'none',\n                    background: 'none',\n                    cursor: 'pointer',\n                    textAlign: 'left',\n                    fontSize: 14,\n                    color: '#374151',\n                    borderBottom: '1px solid #f9fafb',\n                    transition: 'background 0.15s',\n                  }}\n                  onMouseEnter={(e) =>\n                    (e.currentTarget.style.background = '#f9fafb')\n                  }\n                  onMouseLeave={(e) =>\n                    (e.currentTarget.style.background = 'none')\n                  }\n                >\n                  <span style={{ fontSize: 16 }}>\n                    {triggerLabels[task.trigger] ?? '📖'}\n                  </span>\n                  <div style={{ flex: 1, minWidth: 0 }}>\n                    <div style={{ fontWeight: 500 }}>\n                      {task.slug\n                        .replace(/[-_]/g, ' ')\n                        .replace(/\\b\\w/g, (c) => c.toUpperCase())}\n                    </div>\n                    <div style={{ fontSize: 12, color: '#9ca3af' }}>\n                      {task.steps.length} steps\n                    </div>\n                  </div>\n                  <span style={{ color: '#d1d5db', fontSize: 18 }}>›</span>\n                </button>\n              ))\n            )}\n          </div>\n        </div>\n      )}\n\n      {/* 触发按钮 */}\n      <button\n        onClick={() => setOpen(!open)}\n        className={buttonClassName}\n        style={\n          buttonClassName\n            ? undefined\n            : {\n                width: 48,\n                height: 48,\n                borderRadius: '50%',\n                border: 'none',\n                background: '#111',\n                color: '#fff',\n                fontSize: 20,\n                fontWeight: 700,\n                cursor: 'pointer',\n                boxShadow: '0 4px 14px rgba(0,0,0,0.2)',\n                display: 'flex',\n                alignItems: 'center',\n                justifyContent: 'center',\n                transition: 'transform 0.2s, box-shadow 0.2s',\n              }\n        }\n        onMouseEnter={(e) => {\n          if (!buttonClassName) {\n            e.currentTarget.style.transform = 'scale(1.1)'\n            e.currentTarget.style.boxShadow = '0 6px 20px rgba(0,0,0,0.25)'\n          }\n        }}\n        onMouseLeave={(e) => {\n          if (!buttonClassName) {\n            e.currentTarget.style.transform = 'scale(1)'\n            e.currentTarget.style.boxShadow = '0 4px 14px rgba(0,0,0,0.2)'\n          }\n        }}\n        aria-label=\"Help menu\"\n      >\n        {label}\n      </button>\n    </div>\n  )\n}\n\n// ---- Inline trigger ----\n\ninterface HelpTriggerProps {\n  /** 要触发的任务 slug */\n  taskSlug: string\n  children: React.ReactNode\n  className?: string\n  style?: React.CSSProperties\n}\n\n/**\n * 内联触发按钮 - 包裹任何元素，点击启动指定任务\n *\n * @example\n * ```tsx\n * <HelpTrigger taskSlug=\"welcome\">\n *   <button>Show Tour</button>\n * </HelpTrigger>\n *\n * <HelpTrigger taskSlug=\"settings-guide\">\n *   <span className=\"text-blue-500 cursor-pointer\">Learn more</span>\n * </HelpTrigger>\n * ```\n */\nexport function HelpTrigger({\n  taskSlug,\n  children,\n  className,\n  style,\n}: HelpTriggerProps) {\n  const { start, ready } = useOnTheWay()\n\n  return (\n    <span\n      onClick={() => ready && start(taskSlug)}\n      className={className}\n      style={{ cursor: ready ? 'pointer' : 'default', ...style }}\n      role=\"button\"\n      tabIndex={0}\n      onKeyDown={(e) => {\n        if (e.key === 'Enter' || e.key === ' ') {\n          e.preventDefault()\n          ready && start(taskSlug)\n        }\n      }}\n    >\n      {children}\n    </span>\n  )\n}\n\nexport default HelpMenu\n"]}