@fewchurs/react 1.0.1 → 1.2.0

package/dist/index.d.ts

@@ -2,7 +2,7 @@ import { ReactNode, CSSProperties } from 'react';
 
 type FewchursError = {
     code: "invalid_key";
-    status: 401;
+    status: 401 | 403;
     message: string;
 } | {
     code: "validation_failed";
@@ -110,6 +110,11 @@ interface FewchursClientOptions {
     deviceId?: string | null | (() => string | null);
     /** Sent as `Accept-Language`, so server-side copy and emails match the visitor. */
     language?: string;
+    /**
+     * The domain the API key is checked against, for calls made from a server. A browser reports
+     * its own domain through `Origin`, which always wins, so leave this out in a SPA.
+     */
+    appId?: string;
     fetch?: FetchLike;
     retries?: number;
     retryDelayMs?: number;
@@ -308,9 +313,9 @@ declare function useBoard(): BoardContextValue;
 
 declare function Branding(): React.JSX.Element | null;
 
-declare const SDK_VERSION = "1.0.1";
+declare const SDK_VERSION = "1.2.0";
 
-declare const SDK_HEADER = "react/1.0.1";
+declare const SDK_HEADER = "react/1.2.0";
 declare const DEFAULT_BASE_URL = "https://www.fewchurs.com/api/v1";
 declare const DEFAULT_PAGE_SIZE = 20;
 /** Mirrors the server's zod schemas, so the UI can reject input before a round trip. */
@@ -381,8 +386,17 @@ interface FewchursBoardDialogProps extends FewchursBoardProps {
     open: boolean;
     onClose: () => void;
     ariaLabel?: string;
+    variant?: "dialog" | "sheet";
 }
-declare function FewchursBoardDialog({ open, onClose, ariaLabel, ...boardProps }: FewchursBoardDialogProps): React.JSX.Element | null;
+declare function FewchursBoardDialog({ open, onClose, ariaLabel, variant, ...boardProps }: FewchursBoardDialogProps): React.JSX.Element | null;
+
+interface FewchursButtonProps extends Omit<FewchursBoardProps, "children" | "className" | "style"> {
+    children?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+    ariaLabel?: string;
+}
+declare function FewchursButton({ children, className, style, ariaLabel, ...board }: FewchursButtonProps): React.JSX.Element;
 
 declare function FeatureCard({ feature, defaultCommentsOpen, }: {
     feature: Feature;
@@ -520,4 +534,4 @@ declare function validateFeatureInput(input: SubmitFeatureInput): FewchursError
 declare function validateCommentInput(input: CreateCommentInput): FewchursError | null;
 declare function validateEmail(email: string): FewchursError | null;
 
-export { type BoardContextValue, type BoardLabels, BoardRoot, type BoardTab, BoardTabs, type BoardTheme, Branding, type Comment, CommentForm, CommentList, type CommentPage, type CommentsState, type CreateCommentInput, DEFAULT_BASE_URL, DEFAULT_LABELS, DEFAULT_PAGE_SIZE, COOKIE_NAME as DEVICE_ID_COOKIE, type EmailFieldMode, type EventHandler, type Feature, type FeatureActions, FeatureCard, FeatureList, type FeaturePage, type FeatureSort, type FeatureStatus, type FetchLike, FewchursBoard, FewchursBoardDialog, type FewchursBoardDialogProps, type FewchursBoardProps, type FewchursClient, type FewchursClientOptions, type FewchursConfig, type FewchursContextValue, type FewchursError, type FewchursEvent, type FewchursEventName, FewchursProvider, type FewchursProviderProps, FollowForm, LIMITS, type ListCommentsParams, type ListFeaturesParams, type ListQuery, type ListState, type LoadStatus, ROADMAP_STATUSES, type Result, SDK_HEADER, SDK_VERSION, StatusBadge, type Store, type StoreOptions, type StoreState, type SubmitFeatureInput, SubmitForm, SubmitTrigger, type UseCommentsOptions, type UseCommentsResult, type UseFeatureOptions, type UseFeatureResult, type UseFeaturesOptions, type UseFeaturesResult, type UseFewchursConfigResult, type UseFollowResult, type UseSubmitFeatureResult, type UseVoteResult, VoteButton, commentsStateOf, createDeviceId, createFewchursClient, createStore, errorFromResponse, featureKey, listKey, listStateOf, mergeLabels, networkError, normalizeComment, normalizeCommentPage, normalizeConfig, normalizeFeature, normalizeFeaturePage, normalizeStatus, normalizeVote, readDeviceId, resolveDeviceId, useBoard, useComments, useFeature, useFeatures, useFewchurs, useFewchursConfig, useFollow, useSubmitFeature, useVote, userMessage, validateCommentInput, validateEmail, validateFeatureInput, validationError };
+export { type BoardContextValue, type BoardLabels, BoardRoot, type BoardTab, BoardTabs, type BoardTheme, Branding, type Comment, CommentForm, CommentList, type CommentPage, type CommentsState, type CreateCommentInput, DEFAULT_BASE_URL, DEFAULT_LABELS, DEFAULT_PAGE_SIZE, COOKIE_NAME as DEVICE_ID_COOKIE, type EmailFieldMode, type EventHandler, type Feature, type FeatureActions, FeatureCard, FeatureList, type FeaturePage, type FeatureSort, type FeatureStatus, type FetchLike, FewchursBoard, FewchursBoardDialog, type FewchursBoardDialogProps, type FewchursBoardProps, FewchursButton, type FewchursButtonProps, type FewchursClient, type FewchursClientOptions, type FewchursConfig, type FewchursContextValue, type FewchursError, type FewchursEvent, type FewchursEventName, FewchursProvider, type FewchursProviderProps, FollowForm, LIMITS, type ListCommentsParams, type ListFeaturesParams, type ListQuery, type ListState, type LoadStatus, ROADMAP_STATUSES, type Result, SDK_HEADER, SDK_VERSION, StatusBadge, type Store, type StoreOptions, type StoreState, type SubmitFeatureInput, SubmitForm, SubmitTrigger, type UseCommentsOptions, type UseCommentsResult, type UseFeatureOptions, type UseFeatureResult, type UseFeaturesOptions, type UseFeaturesResult, type UseFewchursConfigResult, type UseFollowResult, type UseSubmitFeatureResult, type UseVoteResult, VoteButton, commentsStateOf, createDeviceId, createFewchursClient, createStore, errorFromResponse, featureKey, listKey, listStateOf, mergeLabels, networkError, normalizeComment, normalizeCommentPage, normalizeConfig, normalizeFeature, normalizeFeaturePage, normalizeStatus, normalizeVote, readDeviceId, resolveDeviceId, useBoard, useComments, useFeature, useFeatures, useFewchurs, useFewchursConfig, useFollow, useSubmitFeature, useVote, userMessage, validateCommentInput, validateEmail, validateFeatureInput, validationError };

package/dist/index.js

@@ -34,6 +34,7 @@ __export(src_exports, {
   FeatureList: () => FeatureList,
   FewchursBoard: () => FewchursBoard,
   FewchursBoardDialog: () => FewchursBoardDialog,
+  FewchursButton: () => FewchursButton,
   FewchursProvider: () => FewchursProvider,
   FollowForm: () => FollowForm,
   LIMITS: () => LIMITS,
@@ -84,7 +85,7 @@ module.exports = __toCommonJS(src_exports);
 var import_react = require("react");
 
 // src/client/version.ts
-var SDK_VERSION = "1.0.1";
+var SDK_VERSION = "1.2.0";
 
 // src/client/constants.ts
 var SDK_HEADER = `react/${SDK_VERSION}`;
@@ -127,6 +128,8 @@ function errorFromResponse(status, body) {
   switch (code) {
     case "invalid_key":
       return { code: "invalid_key", status: 401, message };
+    case "wrong_app":
+      return { code: "invalid_key", status: 403, message };
     // missing_device_id is a client mistake the caller fixes the same way a bad field is fixed,
     // so it collapses into validation_failed rather than widening the public union.
     case "missing_device_id":
@@ -276,6 +279,7 @@ function createFewchursClient(options = {}) {
     const deviceId = getDeviceId();
     if (deviceId) result["X-Device-Id"] = deviceId;
     if (options.language) result["Accept-Language"] = options.language;
+    if (options.appId) result["X-Fewchurs-App-Id"] = options.appId;
     return result;
   }
   function url(path, query) {
@@ -314,7 +318,7 @@ function createFewchursClient(options = {}) {
         continue;
       }
       const failure = errorFromResponse(response.status, await readJson(response));
-      warnAboutKey(failure.code);
+      warnAboutKey(failure);
       return { ok: false, error: failure };
     }
     return { ok: false, error: networkError() };
@@ -406,12 +410,12 @@ function messageOf(error) {
   return error instanceof Error ? error.message : "Network request failed.";
 }
 var warnedAboutKey = false;
-function warnAboutKey(code) {
-  if (code !== "invalid_key" || warnedAboutKey) return;
+function warnAboutKey(error) {
+  if (error.code !== "invalid_key" || warnedAboutKey) return;
   if (typeof process !== "undefined" && process.env?.NODE_ENV === "production") return;
   warnedAboutKey = true;
   console.error(
-    "[fewchurs] The API key was rejected. Check FEWCHURS_API_KEY (server) or the apiKey passed to FewchursProvider, and that the key is active in your Fewchurs dashboard."
+    error.status === 403 ? `[fewchurs] ${error.message}` : "[fewchurs] The API key was rejected. Check FEWCHURS_API_KEY (server) or the apiKey passed to FewchursProvider, and that the key is active in your Fewchurs dashboard."
   );
 }
 
@@ -1726,6 +1730,7 @@ function FewchursBoardDialog({
   open,
   onClose,
   ariaLabel = "Feature requests",
+  variant = "dialog",
   ...boardProps
 }) {
   const dialogRef = (0, import_react16.useRef)(null);
@@ -1744,11 +1749,14 @@ function FewchursBoardDialog({
     };
   }, [open, onClose]);
   if (!open) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "fw-overlay", onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+  const isSheet = variant === "sheet";
+  const { colorScheme } = boardProps;
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: isSheet ? "fw-overlay fw-overlay--sheet" : "fw-overlay", onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
     "div",
     {
       ref: dialogRef,
-      className: "fw-dialog",
+      className: isSheet ? "fw-dialog fw-dialog--sheet" : "fw-dialog",
+      "data-theme": colorScheme === "system" ? void 0 : colorScheme,
       role: "dialog",
       "aria-modal": "true",
       "aria-label": ariaLabel,
@@ -1761,6 +1769,49 @@ function FewchursBoardDialog({
     }
   ) });
 }
+
+// src/components/BoardButton.tsx
+var import_react17 = require("react");
+var import_react_dom = require("react-dom");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function FewchursButton({
+  children = "Feedback",
+  className,
+  style,
+  ariaLabel,
+  ...board
+}) {
+  const [open, setOpen] = (0, import_react17.useState)(false);
+  const close = (0, import_react17.useCallback)(() => setOpen(false), []);
+  const classes = [board.unstyled ? "" : "fw-launcher", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      "button",
+      {
+        type: "button",
+        className: classes || void 0,
+        style: { ...themeToStyle(board.theme), ...style },
+        "aria-haspopup": "dialog",
+        "aria-expanded": open,
+        onClick: () => setOpen(true),
+        children
+      }
+    ),
+    open ? (0, import_react_dom.createPortal)(
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        FewchursBoardDialog,
+        {
+          ...board,
+          variant: "sheet",
+          ariaLabel,
+          open: true,
+          onClose: close
+        }
+      ),
+      document.body
+    ) : null
+  ] });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   BoardRoot,
@@ -1776,6 +1827,7 @@ function FewchursBoardDialog({
   FeatureList,
   FewchursBoard,
   FewchursBoardDialog,
+  FewchursButton,
   FewchursProvider,
   FollowForm,
   LIMITS,