@spree/dashboard-ui 0.1.0

package/src/ui/rich-text-editor.tsx

@@ -0,0 +1,263 @@
+import Link from '@tiptap/extension-link'
+import Placeholder from '@tiptap/extension-placeholder'
+import { EditorContent, useEditor } from '@tiptap/react'
+import StarterKit from '@tiptap/starter-kit'
+import {
+  BoldIcon,
+  ItalicIcon,
+  LinkIcon,
+  ListIcon,
+  ListOrderedIcon,
+  QuoteIcon,
+  RedoIcon,
+  StrikethroughIcon,
+  UndoIcon,
+} from 'lucide-react'
+import { useCallback, useEffect, useRef } from 'react'
+import { useTranslation } from 'react-i18next'
+import { cn } from '../lib/utils'
+
+interface RichTextEditorProps {
+  value?: string
+  onChange?: (html: string) => void
+  /**
+   * Fires when the editor loses focus. Useful for commit-on-blur flows where
+   * onChange is only for live updates and persistence happens once the user
+   * moves away.
+   */
+  onBlur?: () => void
+  placeholder?: string
+  className?: string
+  disabled?: boolean
+  /** Accessible name for the editor (e.g. matching a sibling FieldLabel). */
+  ariaLabel?: string
+  /**
+   * DOM id for the editable surface so callers can associate it with a
+   * `<FieldLabel htmlFor={...}>` for screen readers and `getByLabel`-style
+   * test locators.
+   */
+  id?: string
+}
+
+export function RichTextEditor({
+  value = '',
+  onChange,
+  onBlur,
+  placeholder,
+  className,
+  disabled = false,
+  ariaLabel,
+  id,
+}: RichTextEditorProps) {
+  const { t } = useTranslation()
+  const resolvedPlaceholder = placeholder ?? t('admin.components.rich_text_editor.placeholder')
+  const wrapperRef = useRef<HTMLDivElement | null>(null)
+  // tiptap's `useEditor` registers `onUpdate`/`onBlur` only at create time —
+  // later renders keep the first closure. Stash the latest callbacks in refs
+  // and call through them so commit-on-blur consumers (e.g. ApiBacked custom
+  // fields) see updated state after the first save: without this, the
+  // post-save `commit` closure runs with the pre-save definition id and
+  // attempts another create instead of an update.
+  const onChangeRef = useRef(onChange)
+  const onBlurRef = useRef(onBlur)
+  useEffect(() => {
+    onChangeRef.current = onChange
+    onBlurRef.current = onBlur
+  })
+
+  const editor = useEditor({
+    extensions: [
+      StarterKit.configure({ link: false }),
+      Placeholder.configure({ placeholder: resolvedPlaceholder }),
+      Link.configure({ openOnClick: false }),
+    ],
+    content: value,
+    editable: !disabled,
+    editorProps: {
+      attributes: {
+        ...(ariaLabel ? { 'aria-label': ariaLabel } : {}),
+        ...(id ? { id } : {}),
+      },
+    },
+    onUpdate: ({ editor }) => {
+      onChangeRef.current?.(editor.getHTML())
+    },
+    onBlur: ({ event }) => {
+      // Tiptap fires `onBlur` whenever the contenteditable loses focus —
+      // including when the user clicks a toolbar button INSIDE this same
+      // component, which then re-focuses the editor. Suppress those
+      // intra-component blurs so commit-on-blur callers don't persist
+      // stale HTML on every toolbar click.
+      //
+      // We check `relatedTarget` first (synchronous, covers the common
+      // case). When it's null — toolbar buttons that don't take focus,
+      // or click sequences that don't transfer focus — defer to a
+      // microtask and re-check `document.activeElement`: if focus is
+      // still inside the wrapper, the editor will get it back in the
+      // next tick and the blur is intra-component.
+      const relatedTarget = (event as FocusEvent).relatedTarget as Node | null
+      if (relatedTarget) {
+        if (wrapperRef.current?.contains(relatedTarget)) return
+        onBlurRef.current?.()
+        return
+      }
+      queueMicrotask(() => {
+        const active = document.activeElement as Node | null
+        if (active && wrapperRef.current?.contains(active)) return
+        onBlurRef.current?.()
+      })
+    },
+  })
+
+  // Sync external value changes (e.g. form reset)
+  useEffect(() => {
+    if (!editor) return
+    if (editor.getHTML() !== value) {
+      editor.commands.setContent(value, { emitUpdate: false })
+    }
+  }, [editor, value])
+
+  useEffect(() => {
+    editor?.setEditable(!disabled)
+  }, [editor, disabled])
+
+  const setLink = useCallback(() => {
+    if (!editor) return
+    const previous = editor.getAttributes('link').href
+    const url = window.prompt(t('admin.components.rich_text_editor.link_url_prompt'), previous)
+    if (url === null) return
+    if (url === '') {
+      editor.chain().focus().extendMarkRange('link').unsetLink().run()
+    } else {
+      editor.chain().focus().extendMarkRange('link').setLink({ href: url }).run()
+    }
+  }, [editor, t])
+
+  if (!editor) return null
+
+  return (
+    <div
+      ref={wrapperRef}
+      className={cn(
+        'rounded-lg border border-border bg-card text-foreground shadow-xs transition-all duration-100 ease-in-out focus-within:border-blue-500 focus-within:shadow-[0_0_0_3px_rgba(59,130,246,0.15)]',
+        disabled && 'pointer-events-none bg-muted border-border',
+        className,
+      )}
+    >
+      {/* Toolbar */}
+      <div className="flex items-center gap-0.5 border-b border-border px-2 py-1.5">
+        <ToolbarButton
+          active={editor.isActive('bold')}
+          onClick={() => editor.chain().focus().toggleBold().run()}
+          title={t('admin.components.rich_text_editor.bold')}
+        >
+          <BoldIcon className="size-4" />
+        </ToolbarButton>
+        <ToolbarButton
+          active={editor.isActive('italic')}
+          onClick={() => editor.chain().focus().toggleItalic().run()}
+          title={t('admin.components.rich_text_editor.italic')}
+        >
+          <ItalicIcon className="size-4" />
+        </ToolbarButton>
+        <ToolbarButton
+          active={editor.isActive('strike')}
+          onClick={() => editor.chain().focus().toggleStrike().run()}
+          title={t('admin.components.rich_text_editor.strikethrough')}
+        >
+          <StrikethroughIcon className="size-4" />
+        </ToolbarButton>
+
+        <ToolbarSeparator />
+
+        <ToolbarButton
+          active={editor.isActive('bulletList')}
+          onClick={() => editor.chain().focus().toggleBulletList().run()}
+          title={t('admin.components.rich_text_editor.bullet_list')}
+        >
+          <ListIcon className="size-4" />
+        </ToolbarButton>
+        <ToolbarButton
+          active={editor.isActive('orderedList')}
+          onClick={() => editor.chain().focus().toggleOrderedList().run()}
+          title={t('admin.components.rich_text_editor.ordered_list')}
+        >
+          <ListOrderedIcon className="size-4" />
+        </ToolbarButton>
+        <ToolbarButton
+          active={editor.isActive('blockquote')}
+          onClick={() => editor.chain().focus().toggleBlockquote().run()}
+          title={t('admin.components.rich_text_editor.blockquote')}
+        >
+          <QuoteIcon className="size-4" />
+        </ToolbarButton>
+
+        <ToolbarSeparator />
+
+        <ToolbarButton
+          active={editor.isActive('link')}
+          onClick={setLink}
+          title={t('admin.components.rich_text_editor.link')}
+        >
+          <LinkIcon className="size-4" />
+        </ToolbarButton>
+
+        <div className="ml-auto flex items-center gap-0.5">
+          <ToolbarButton
+            onClick={() => editor.chain().focus().undo().run()}
+            disabled={!editor.can().undo()}
+            title={t('admin.components.rich_text_editor.undo')}
+          >
+            <UndoIcon className="size-4" />
+          </ToolbarButton>
+          <ToolbarButton
+            onClick={() => editor.chain().focus().redo().run()}
+            disabled={!editor.can().redo()}
+            title={t('admin.components.rich_text_editor.redo')}
+          >
+            <RedoIcon className="size-4" />
+          </ToolbarButton>
+        </div>
+      </div>
+
+      {/* Editor */}
+      <EditorContent
+        editor={editor}
+        className="prose prose-sm max-w-none px-3 py-2 dark:prose-invert [&_.tiptap]:min-h-32 [&_.tiptap]:outline-none [&_.tiptap.is-editor-empty:first-child::before]:text-muted-foreground [&_.tiptap.is-editor-empty:first-child::before]:content-[attr(data-placeholder)] [&_.tiptap.is-editor-empty:first-child::before]:float-left [&_.tiptap.is-editor-empty:first-child::before]:h-0 [&_.tiptap.is-editor-empty:first-child::before]:pointer-events-none"
+      />
+    </div>
+  )
+}
+
+function ToolbarButton({
+  active,
+  disabled,
+  onClick,
+  children,
+  title,
+}: {
+  active?: boolean
+  disabled?: boolean
+  onClick: () => void
+  children: React.ReactNode
+  title: string
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      disabled={disabled}
+      title={title}
+      className={cn(
+        'inline-flex items-center justify-center rounded-md p-1.5 text-muted-foreground hover:bg-accent hover:text-foreground transition-colors disabled:opacity-40 disabled:pointer-events-none',
+        active && 'bg-accent text-foreground',
+      )}
+    >
+      {children}
+    </button>
+  )
+}
+
+function ToolbarSeparator() {
+  return <div className="mx-1 h-5 w-px bg-border" />
+}

package/src/ui/select.tsx

@@ -0,0 +1,213 @@
+import { Select as SelectPrimitive } from '@base-ui/react/select'
+import { CheckIcon, ChevronDownIcon } from 'lucide-react'
+import type * as React from 'react'
+import { cn } from '../lib/utils'
+
+function Select({
+  children,
+  onValueChange,
+  ...props
+}: Omit<SelectPrimitive.Root.Props<string, false>, 'onValueChange'> & {
+  onValueChange?: (value: string) => void
+}) {
+  return (
+    <SelectPrimitive.Root
+      data-slot="select"
+      onValueChange={
+        onValueChange
+          ? (value: string | null) => {
+              if (value !== null) onValueChange(value)
+            }
+          : undefined
+      }
+      {...props}
+    >
+      {children}
+    </SelectPrimitive.Root>
+  )
+}
+
+function SelectGroup({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Group>) {
+  return (
+    <SelectPrimitive.Group
+      data-slot="select-group"
+      className={cn('scroll-my-1 p-1', className)}
+      {...props}
+    />
+  )
+}
+
+function SelectValue({ ...props }: React.ComponentProps<typeof SelectPrimitive.Value>) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />
+}
+
+function SelectTrigger({
+  className,
+  size = 'default',
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+  size?: 'sm' | 'default'
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        // `min-h-9.5` (default) and `data-[size=sm]:min-h-[1.9375rem]` lock
+        // the trigger to the same natural height as `<Input>` so the field
+        // doesn't collapse to chevron-height when the SelectValue render-prop
+        // returns an empty string (e.g., when value is unset and the
+        // placeholder isn't surfaced through the render-prop).
+        "flex w-full min-h-8.5 items-center justify-between gap-1.5 rounded-lg border border-border bg-card py-1.5 pr-2 pl-2.5 text-base font-normal leading-normal text-foreground shadow-xs transition-all duration-100 ease-in-out outline-none select-none focus:border-blue-500 focus:shadow-[0_0_0_3px_rgba(59,130,246,0.15)] disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-muted disabled:border-border disabled:text-muted-foreground disabled:shadow-none aria-invalid:border-destructive data-[placeholder]:text-muted-foreground data-[size=sm]:py-1 data-[size=sm]:px-2 data-[size=sm]:text-sm data-[size=sm]:min-h-[1.9375rem] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon>
+        <ChevronDownIcon className="pointer-events-none size-4 text-muted-foreground" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  )
+}
+
+function SelectContent({
+  className,
+  children,
+  position = 'popper',
+  align = 'start',
+  side = 'bottom',
+  ...props
+}: {
+  className?: string
+  children?: React.ReactNode
+  position?: 'item-aligned' | 'popper'
+  align?: 'start' | 'center' | 'end'
+  side?: 'top' | 'bottom' | 'left' | 'right'
+} & Omit<React.ComponentProps<typeof SelectPrimitive.Popup>, 'className'>) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Positioner
+        side={side}
+        align={align}
+        alignItemWithTrigger={position === 'item-aligned'}
+        className="z-[100]"
+      >
+        <SelectPrimitive.Popup
+          data-slot="select-content"
+          data-align-trigger={position === 'item-aligned'}
+          className={cn(
+            'relative z-[100] max-h-[var(--available-height)] min-w-[var(--anchor-width)] overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[starting-style]:opacity-0 data-[starting-style]:scale-95 data-[ending-style]:opacity-0 data-[ending-style]:scale-95 transition-[opacity,transform]',
+            position === 'popper' &&
+              'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+            className,
+          )}
+          {...props}
+        >
+          {children}
+        </SelectPrimitive.Popup>
+      </SelectPrimitive.Positioner>
+    </SelectPrimitive.Portal>
+  )
+}
+
+function SelectLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.GroupLabel>) {
+  return (
+    <SelectPrimitive.GroupLabel
+      data-slot="select-label"
+      className={cn('px-1.5 py-1 text-xs text-muted-foreground', className)}
+      {...props}
+    />
+  )
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        // Padding + font sized to match `<Input>` and `<SelectTrigger>` so
+        // the dropdown rows feel like a continuation of the trigger field.
+        // `pr-8` reserves room for the absolute-positioned check indicator.
+        "relative flex w-full cursor-default items-center gap-2 rounded-md py-1.5 pr-8 pl-2.5 text-base font-normal leading-normal outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className,
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center">
+        <SelectPrimitive.ItemIndicator>
+          <CheckIcon className="pointer-events-none" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  )
+}
+
+function SelectSeparator({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      role="separator"
+      data-slot="select-separator"
+      className={cn('pointer-events-none -mx-1 my-1 h-px bg-border', className)}
+      {...props}
+    />
+  )
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpArrow>) {
+  return (
+    <SelectPrimitive.ScrollUpArrow
+      data-slot="select-scroll-up-button"
+      className={cn(
+        "z-10 flex cursor-default items-center justify-center bg-popover py-2 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    >
+      <ChevronDownIcon className="rotate-180" />
+    </SelectPrimitive.ScrollUpArrow>
+  )
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownArrow>) {
+  return (
+    <SelectPrimitive.ScrollDownArrow
+      data-slot="select-scroll-down-button"
+      className={cn(
+        "z-10 flex cursor-default items-center justify-center bg-popover py-2 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    >
+      <ChevronDownIcon />
+    </SelectPrimitive.ScrollDownArrow>
+  )
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+}

package/src/ui/separator.tsx

@@ -0,0 +1,31 @@
+'use client'
+
+import { Separator as SeparatorPrimitive } from '@base-ui/react/separator'
+import * as React from 'react'
+
+import { cn } from '../lib/utils'
+
+function Separator({
+  className,
+  orientation = 'horizontal',
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive> & {
+  decorative?: boolean
+}) {
+  return (
+    <SeparatorPrimitive
+      data-slot="separator"
+      aria-hidden={decorative ? true : undefined}
+      orientation={orientation}
+      data-orientation={orientation}
+      className={cn(
+        'shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px',
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Separator }