@terrafirmagreg-team/discussions 0.0.0-stage → 1.2.1

package/package.json

@@ -1,6 +1,59 @@
 {
   "name": "@terrafirmagreg-team/discussions",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "1.2.1",
+  "type": "module",
+  "description": "GitHub Discussions comments and feedback",
+  "license": "LGPL-3.0-only",
+  "exports": {
+    "./lib": "./src/lib/index.ts",
+    "./lib/*": [
+      "./src/lib/*.ts",
+      "./src/lib/*/index.ts"
+    ],
+    "./components/*": [
+      "./src/components/*.tsx",
+      "./src/components/*/index.tsx",
+      "./src/components/*/index.ts"
+    ],
+    "./hooks/*": [
+      "./src/hooks/*.ts",
+      "./src/hooks/*/index.ts"
+    ],
+    "./locales": "./src/locales.ts"
+  },
+  "dependencies": {
+    "@floating-ui/react-dom": "^2.1.9",
+    "@fuma-comment/react": "1.6.0",
+    "@fuma-comment/server": "1.6.0",
+    "@terrafirmagreg-team/auth": "1.2.1",
+    "@terrafirmagreg-team/data": "1.2.1",
+    "@terrafirmagreg-team/translate": "1.2.1",
+    "@terrafirmagreg-team/ui": "1.2.1",
+    "class-variance-authority": "^0.7.1",
+    "fuma-comment-github-discussions": "1.1.1",
+    "lucide-react": "^0.577.0",
+    "server-only": "^0.0.1",
+    "swr": "^2.4.2",
+    "zod": "4.6.7"
+  },
+  "peerDependencies": {
+    "next": ">=15",
+    "react": ">=19"
+  },
+  "devDependencies": {
+    "@types/node": "^26.6.5",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/TerraFirmaGreg-Team/Web-Foundation.git",
+    "directory": "packages/discussions"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "src"
+  ]
 }

package/src/components/comments-view.tsx

@@ -0,0 +1,32 @@
+'use client';
+
+import { Comments as FumaComments } from '@fuma-comment/react';
+import { useCommentsEnabled } from '../hooks/comments/use-enabled';
+import { usePageThread } from '../hooks/comments/use-thread';
+import { redirectToCommentsLogin } from '../lib/comments/auth';
+
+export function Comments({
+  page,
+  apiUrl = '/api/comments',
+}: {
+  page?: string;
+  apiUrl?: string;
+}) {
+  const enabled = useCommentsEnabled(`${apiUrl}/config`);
+  const thread = usePageThread(page);
+  if (!enabled) return null;
+  return (
+    <div className="not-prose mt-8">
+      <FumaComments
+        page={thread}
+        apiUrl={apiUrl}
+        auth={{
+          type: 'api',
+          signIn: () => redirectToCommentsLogin(apiUrl),
+        }}
+        mention={{ enabled: true }}
+      />
+    </div>
+  );
+}
+

package/src/components/comments.tsx

@@ -0,0 +1,8 @@
+import { commentsView, type CommentsViewProps } from '../lib/comments';
+
+export function CommentsSlot(props: CommentsViewProps) {
+  const View = commentsView();
+  // eslint-disable-next-line react-hooks/static-components
+  return View ? <View {...props} /> : null;
+}
+

package/src/components/feedback/block.tsx

@@ -0,0 +1,366 @@
+'use client';
+import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
+import { injectHighlightStyle } from '@terrafirmagreg-team/ui/lib/utils/highlight-style';
+import { autoUpdate, flip, offset, shift, useFloating } from '@floating-ui/react-dom';
+import { buttonVariants } from '@terrafirmagreg-team/ui/components/ui/button';
+import { CornerDownRightIcon } from 'lucide-react';
+import {
+  type CSSProperties,
+  type HTMLAttributes,
+  type ReactNode,
+  type SyntheticEvent,
+  useEffect,
+  useEffectEvent,
+  useRef,
+  useState,
+  useTransition,
+} from 'react';
+import {
+  actionResponse,
+  blockFeedback,
+  type ActionResponse,
+  type BlockFeedback,
+} from '../../lib/feedback-schema';
+import { z } from 'zod/mini';
+import { usePathname } from 'next/navigation';
+import { useTranslations } from '@terrafirmagreg-team/translate/hooks/use-translations';
+import { useSubmissionStorage } from '../../hooks/feedback/use-submission-storage';
+
+const blockFeedbackResult = z.extend(blockFeedback, {
+  response: actionResponse,
+});
+
+export interface FeedbackTextProps {
+  onSendAction: (feedback: BlockFeedback) => Promise<ActionResponse>;
+  children?: ReactNode;
+}
+
+export function FeedbackText({ onSendAction, children }: FeedbackTextProps) {
+  const [popup, _setPopup] = useState<{
+    mode: 'tooltip' | 'expanded';
+    blockId: string;
+    selection: string;
+    range: Range;
+  } | null>(null);
+
+  const containerRef = useRef<HTMLDivElement>(null);
+  const { refs, floatingStyles } = useFloating({
+    open: popup !== null,
+    placement: 'bottom',
+    middleware: [offset(6), flip(), shift({ padding: 8 })],
+    whileElementsMounted: autoUpdate,
+  });
+
+  function expandPopup() {
+    if (popup?.mode !== 'tooltip') return;
+
+    const highlight = new Highlight(popup.range);
+    CSS.highlights.set('fd-feedback-text', highlight);
+    injectHighlightStyle(
+      'fd-feedback-text',
+      'background-color:var(--color-fd-primary);color:var(--color-fd-primary-foreground)',
+    );
+
+    _setPopup({ ...popup, mode: 'expanded' });
+  }
+
+  function closePopup() {
+    if (popup?.mode === 'expanded') {
+      CSS.highlights.delete('fd-feedback-text');
+    }
+
+    _setPopup(null);
+  }
+
+  const updateSelectionPopover = useEffectEvent(() => {
+    if (popup && popup.mode === 'expanded') return;
+
+    const container = containerRef.current;
+    const selection = window.getSelection();
+
+    if (!container || !selection || selection.isCollapsed || selection.rangeCount === 0) {
+      closePopup();
+      return;
+    }
+
+    const range = selection.getRangeAt(0).cloneRange();
+    if (!container.contains(range.commonAncestorContainer)) {
+      closePopup();
+      return;
+    }
+
+    const selectionText = selection.toString().trim();
+    if (selectionText.length === 0 || selectionText.includes('\n')) {
+      closePopup();
+      return;
+    }
+
+    const element =
+      range.startContainer instanceof Element
+        ? range.startContainer
+        : range.startContainer.parentElement;
+    const blockId = element?.closest('[data-block="feedback"]')?.id;
+    if (!blockId) {
+      closePopup();
+      return;
+    }
+
+    refs.setReference({
+      getBoundingClientRect() {
+        return range.getBoundingClientRect();
+      },
+      contextElement: container,
+    });
+
+    _setPopup({ mode: 'tooltip', range, selection: selectionText, blockId });
+  });
+
+  const closeOnEscape = useEffectEvent((event: KeyboardEvent) => {
+    if (popup === null) return;
+    if (event.key === 'Escape') closePopup();
+  });
+
+  const closeOnPointerDown = useEffectEvent((event: PointerEvent) => {
+    const target = event.target;
+    if (popup === null || !(target instanceof Node)) return;
+
+    if (
+      refs.floating.current?.contains(target) ||
+      (popup.mode === 'tooltip' && containerRef.current?.contains(target))
+    ) {
+      return;
+    }
+
+    closePopup();
+  });
+
+  useEffect(() => {
+    let frame: number | null = null;
+
+    function scheduleSelectionPopover() {
+      if (frame !== null) window.cancelAnimationFrame(frame);
+
+      frame = window.requestAnimationFrame(() => {
+        frame = null;
+        updateSelectionPopover();
+      });
+    }
+
+    document.addEventListener('selectionchange', scheduleSelectionPopover);
+    document.addEventListener('keydown', closeOnEscape);
+    document.addEventListener('pointerdown', closeOnPointerDown);
+
+    return () => {
+      document.removeEventListener('keydown', closeOnEscape);
+      document.removeEventListener('pointerdown', closeOnPointerDown);
+      document.removeEventListener('selectionchange', scheduleSelectionPopover);
+      if (frame !== null) window.cancelAnimationFrame(frame);
+    };
+  }, []);
+
+  return (
+    <>
+      <div
+        ref={containerRef}
+        className="prose-no-margin"
+      >
+        {children}
+      </div>
+
+      {popup && (
+        <FeedbackTextPopup
+          popup={popup}
+          refs={refs}
+          floatingStyles={floatingStyles}
+          expandPopup={expandPopup}
+          closePopup={closePopup}
+          onSendAction={onSendAction}
+        />
+      )}
+    </>
+  );
+}
+
+function FeedbackTextPopup({
+  popup,
+  refs,
+  floatingStyles,
+  expandPopup,
+  closePopup,
+  onSendAction,
+}: {
+  popup: {
+    mode: 'tooltip' | 'expanded';
+    blockId: string;
+    selection: string;
+    range: Range;
+  };
+  refs: ReturnType<typeof useFloating>['refs'];
+  floatingStyles: CSSProperties;
+  expandPopup: () => void;
+  closePopup: () => void;
+  onSendAction: (feedback: BlockFeedback) => Promise<ActionResponse>;
+}) {
+  const t = useTranslations();
+  return (
+    <div
+      ref={(el) => refs.setFloating(el)}
+      className={cn(
+        'not-prose z-40 text-sm bg-fd-popover text-fd-popover-foreground border overflow-hidden shadow-lg rounded-xl w-30 h-9.5 box-content transition-[width,height]',
+        popup.mode === 'expanded' ? 'w-[300px] h-32 max-w-[98vw]' : 'select-none',
+      )}
+      style={floatingStyles}
+    >
+      {popup.mode === 'tooltip' ? (
+        <div className="w-30 h-9.5 p-1">
+          <button
+            className={cn(
+              buttonVariants({ variant: 'ghost', size: 'sm' }),
+              'size-full gap-1.5',
+            )}
+            onClick={expandPopup}
+          >
+            <CornerDownRightIcon className="size-4 text-fd-muted-foreground" />
+            {t('Feedback', { note: 'ui.feedback.tooltip' })}
+          </button>
+        </div>
+      ) : (
+        <FeedbackTextForm
+          blockId={popup.blockId}
+          selection={popup.selection}
+          onSendAction={onSendAction}
+          onClose={closePopup}
+          container={{ className: 'p-2 w-[300px] h-32 max-w-[98vw] animate-fd-fade-in' }}
+        />
+      )}
+    </div>
+  );
+}
+
+function FeedbackTextForm({
+  blockId,
+  selection,
+  onSendAction,
+  onClose,
+  container,
+}: {
+  container: HTMLAttributes<HTMLElement>;
+  blockId: string;
+  selection: string;
+  onSendAction: (feedback: BlockFeedback) => Promise<ActionResponse>;
+  onClose: () => void;
+}) {
+  const t = useTranslations();
+  const pathname = usePathname();
+  const { previous, setPrevious } = useSubmissionStorage(`${pathname}-${blockId}`, (v) => {
+    const result = blockFeedbackResult.safeParse(v);
+    if (result.success) return result.data;
+    return null;
+  });
+  const [message, setMessage] = useState('');
+  const [isPending, startTransition] = useTransition();
+
+  function submit(e?: SyntheticEvent) {
+    startTransition(async () => {
+      const feedback: BlockFeedback = {
+        blockId,
+        blockBody: selection,
+        url: location.href,
+        message,
+      };
+
+      const response = await onSendAction(feedback);
+      setPrevious({
+        response,
+        ...feedback,
+      });
+      setMessage('');
+    });
+
+    e?.preventDefault();
+  }
+
+  if (previous)
+    return (
+      <div
+        {...container}
+        className={cn(
+          'flex flex-col items-center justify-center gap-2 text-fd-muted-foreground text-center',
+          container.className,
+        )}
+      >
+        <p>{t('Thank you for your feedback!', { note: 'ui.feedback.thanks' })}</p>
+        <div className="flex flex-row items-center gap-2">
+          <a
+            href={previous.response?.githubUrl}
+            rel="noreferrer noopener"
+            target="_blank"
+            className={cn(
+              buttonVariants({
+                variant: 'default',
+              }),
+              'text-xs',
+            )}
+          >
+            {t('View on GitHub', { note: 'ui.feedback.view_on_github' })}
+          </a>
+
+          <button
+            className={cn(
+              buttonVariants({
+                variant: 'secondary',
+              }),
+              'text-xs',
+            )}
+            onClick={() => {
+              setPrevious(null);
+            }}
+          >
+            {t('Submit Again', { note: 'ui.feedback.submit_again' })}
+          </button>
+        </div>
+      </div>
+    );
+
+  return (
+    <form
+      {...container}
+      className={cn('flex flex-col gap-2', container.className)}
+      onSubmit={submit}
+    >
+      <textarea
+        autoFocus
+        required
+        value={message}
+        onChange={(e) => setMessage(e.target.value)}
+        className="border rounded-lg bg-fd-secondary text-fd-secondary-foreground p-3 resize-none focus-visible:outline-none placeholder:text-fd-muted-foreground"
+        placeholder={t('Leave your feedback…', { note: 'ui.feedback.placeholder' })}
+        onKeyDown={(e) => {
+          if (e.nativeEvent.isComposing || e.keyCode === 229) return;
+          if (!e.shiftKey && e.key === 'Enter') {
+            submit(e);
+          }
+        }}
+      />
+      <div className="grid grid-cols-2 gap-2 mt-auto">
+        <button
+          type="submit"
+          className={cn(buttonVariants({ variant: 'default', size: 'sm' }), 'gap-1.5')}
+          disabled={isPending}
+        >
+          <CornerDownRightIcon className="size-4" />
+          {t('Submit', { note: 'ui.feedback.submit' })}
+        </button>
+        <button
+          type="button"
+          className={cn(buttonVariants({ variant: 'secondary', size: 'sm' }), 'gap-1.5')}
+          disabled={isPending}
+          onClick={onClose}
+        >
+          {t('Close', { note: 'ui.feedback.close' })}
+        </button>
+      </div>
+    </form>
+  );
+}
+

package/src/components/feedback/page.tsx

@@ -0,0 +1,181 @@
+'use client';
+import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
+import { buttonVariants } from '@terrafirmagreg-team/ui/components/ui/button';
+import { ThumbsDown, ThumbsUp } from 'lucide-react';
+import {
+  type SyntheticEvent,
+  useState,
+  useTransition,
+} from 'react';
+import { Collapsible, CollapsibleContent } from '@terrafirmagreg-team/ui/components/ui/collapsible';
+import { cva } from 'class-variance-authority';
+import {
+  actionResponse,
+  pageFeedback,
+  type ActionResponse,
+  type PageFeedback,
+} from '../../lib/feedback-schema';
+import { z } from 'zod/mini';
+import { usePathname } from 'next/navigation';
+import { useTranslations } from '@terrafirmagreg-team/translate/hooks/use-translations';
+import { useSubmissionStorage } from '../../hooks/feedback/use-submission-storage';
+
+const rateButtonVariants = cva(
+  'inline-flex items-center gap-2 px-3 py-2 rounded-full font-medium border text-sm [&_svg]:size-4 disabled:cursor-not-allowed',
+  {
+    variants: {
+      active: {
+        true: 'bg-fd-accent text-fd-accent-foreground [&_svg]:fill-current',
+        false: 'text-fd-muted-foreground',
+      },
+    },
+  },
+);
+
+const pageFeedbackResult = z.extend(pageFeedback, {
+  response: actionResponse,
+});
+
+export function Feedback({
+  onSendAction,
+}: {
+  onSendAction: (feedback: PageFeedback) => Promise<ActionResponse>;
+}) {
+  const t = useTranslations();
+  const pathname = usePathname();
+  const { previous, setPrevious } = useSubmissionStorage(pathname, (v) => {
+    const result = pageFeedbackResult.safeParse(v);
+    return result.success ? result.data : null;
+  });
+  const [opinion, setOpinion] = useState<'good' | 'bad' | null>(null);
+  const [message, setMessage] = useState('');
+  const [isPending, startTransition] = useTransition();
+
+  function submit(e?: SyntheticEvent) {
+    if (opinion == null) return;
+
+    startTransition(async () => {
+      const feedback: PageFeedback = {
+        url: location.href,
+        opinion: opinion!,
+        message,
+      };
+
+      const response = await onSendAction(feedback);
+      setPrevious({
+        response,
+        ...feedback,
+      });
+      setMessage('');
+      setOpinion(null);
+    });
+
+    e?.preventDefault();
+  }
+
+  const activeOpinion = previous?.opinion ?? opinion;
+
+  return (
+    <Collapsible
+      open={opinion !== null || previous !== null}
+      onOpenChange={(v) => {
+        if (!v) setOpinion(null);
+      }}
+      className="border-y py-3"
+    >
+      <div className="flex flex-row items-center gap-2">
+        <p className="text-sm font-medium pe-2">{t('How is this page?', { note: 'ui.feedback.question' })}</p>
+        <button
+          disabled={previous !== null}
+          className={cn(
+            rateButtonVariants({
+              active: activeOpinion === 'good',
+            }),
+          )}
+          onClick={() => {
+            setOpinion('good');
+          }}
+        >
+          <ThumbsUp />
+          {t('Good', { note: 'ui.feedback.good' })}
+        </button>
+        <button
+          disabled={previous !== null}
+          className={cn(
+            rateButtonVariants({
+              active: activeOpinion === 'bad',
+            }),
+          )}
+          onClick={() => {
+            setOpinion('bad');
+          }}
+        >
+          <ThumbsDown />
+          {t('Bad', { note: 'ui.feedback.bad' })}
+        </button>
+      </div>
+      <CollapsibleContent className="mt-3">
+        {previous ? (
+          <div className="px-3 py-6 flex flex-col items-center gap-3 bg-fd-card text-fd-muted-foreground text-sm text-center rounded-xl">
+            <p>{t('Thank you for your feedback!', { note: 'ui.feedback.thanks' })}</p>
+            <div className="flex flex-row items-center gap-2">
+              <a
+                href={previous.response?.githubUrl}
+                rel="noreferrer noopener"
+                target="_blank"
+                className={cn(
+                  buttonVariants({
+                    variant: 'default',
+                  }),
+                  'text-xs',
+                )}
+              >
+                {t('View on GitHub', { note: 'ui.feedback.view_on_github' })}
+              </a>
+
+              <button
+                className={cn(
+                  buttonVariants({
+                    variant: 'secondary',
+                  }),
+                  'text-xs',
+                )}
+                onClick={() => {
+                  setOpinion(previous.opinion);
+                  setPrevious(null);
+                }}
+              >
+                {t('Submit Again', { note: 'ui.feedback.submit_again' })}
+              </button>
+            </div>
+          </div>
+        ) : (
+          <form className="flex flex-col gap-3" onSubmit={submit}>
+            <textarea
+              autoFocus
+              required
+              value={message}
+              onChange={(e) => setMessage(e.target.value)}
+              className="border rounded-lg bg-fd-secondary text-fd-secondary-foreground p-3 resize-none focus-visible:outline-none placeholder:text-fd-muted-foreground"
+              placeholder={t('Leave your feedback…', { note: 'ui.feedback.placeholder' })}
+              onKeyDown={(e) => {
+                if (e.nativeEvent.isComposing || e.keyCode === 229) return;
+                if (!e.shiftKey && e.key === 'Enter') {
+                  submit(e);
+                }
+              }}
+            />
+            <button
+              type="submit"
+              className={cn(buttonVariants({ variant: 'outline' }), 'w-fit px-3')}
+              disabled={isPending}
+            >
+              {t('Submit', { note: 'ui.feedback.submit' })}
+            </button>
+          </form>
+        )}
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}
+

package/src/hooks/comments/use-enabled.ts

@@ -0,0 +1,37 @@
+'use client';
+
+import { useMemo, useSyncExternalStore } from 'react';
+
+let enabled: boolean | null = null;
+let pending: Promise<void> | null = null;
+const listeners = new Set<() => void>();
+
+function makeSubscribe(configUrl: string) {
+  return function subscribe(listener: () => void) {
+    listeners.add(listener);
+    if (enabled === null && !pending) {
+      pending = fetch(configUrl)
+        .then((res) => (res.ok ? res.json() : null))
+        .then((data) => {
+          enabled = Boolean(data?.enabled);
+        })
+        .catch(() => {
+          enabled = false;
+        })
+        .finally(() => listeners.forEach((notify) => notify()));
+    }
+    return () => {
+      listeners.delete(listener);
+    };
+  };
+}
+
+export function useCommentsEnabled(configUrl: string): boolean {
+  const subscribe = useMemo(() => makeSubscribe(configUrl), [configUrl]);
+  return useSyncExternalStore(
+    subscribe,
+    () => enabled === true,
+    () => false,
+  );
+}
+