@betterstart/cli 0.1.3 → 0.1.5

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

@@ -0,0 +1,374 @@
+'use client'
+
+import { useEditorImageUpload } from '@cms/hooks/use-editor-image-upload'
+import { cn } from '@cms/utils/cn'
+import { Highlight } from '@tiptap/extension-highlight'
+import { Image } from '@tiptap/extension-image'
+import { TaskItem, TaskList } from '@tiptap/extension-list'
+import Placeholder from '@tiptap/extension-placeholder'
+import { Subscript } from '@tiptap/extension-subscript'
+import { Superscript } from '@tiptap/extension-superscript'
+import { TextAlign } from '@tiptap/extension-text-align'
+import { Typography } from '@tiptap/extension-typography'
+import { Selection } from '@tiptap/extensions'
+import { EditorContent, EditorContext, useEditor } from '@tiptap/react'
+import { StarterKit } from '@tiptap/starter-kit'
+import { Loader2 } from 'lucide-react'
+import * as React from 'react'
+import { Markdown, type MarkdownStorage } from 'tiptap-markdown'
+// --- TipTap Extensions ---
+import { NodeBackground } from './tiptap/tiptap-extension/node-background-extension'
+// --- TipTap Nodes ---
+import { HorizontalRule } from './tiptap/tiptap-node/horizontal-rule-node/horizontal-rule-node-extension'
+import { ImageUploadNode } from './tiptap/tiptap-node/image-upload-node/image-upload-node-extension'
+import { Button } from './tiptap/tiptap-ui-primitive/button'
+// --- TipTap UI Components ---
+import { Spacer } from './tiptap/tiptap-ui-primitive/spacer'
+import { Toolbar, ToolbarGroup, ToolbarSeparator } from './tiptap/tiptap-ui-primitive/toolbar'
+import './tiptap/tiptap-node/blockquote-node/blockquote-node.scss'
+import './tiptap/tiptap-node/code-block-node/code-block-node.scss'
+import './tiptap/tiptap-node/heading-node/heading-node.scss'
+import './tiptap/tiptap-node/horizontal-rule-node/horizontal-rule-node.scss'
+import './tiptap/tiptap-node/image-node/image-node.scss'
+import './tiptap/tiptap-node/list-node/list-node.scss'
+import './tiptap/tiptap-node/paragraph-node/paragraph-node.scss'
+
+// --- TipTap Hooks ---
+import { useIsBreakpoint } from './tiptap/hooks/use-is-breakpoint'
+// --- TipTap Icons ---
+import { ArrowLeftIcon } from './tiptap/tiptap-icons/arrow-left-icon'
+import { HighlighterIcon } from './tiptap/tiptap-icons/highlighter-icon'
+import { LinkIcon } from './tiptap/tiptap-icons/link-icon'
+// --- TipTap UI Controls ---
+import { BlockquoteButton } from './tiptap/tiptap-ui/blockquote-button'
+import { CodeBlockButton } from './tiptap/tiptap-ui/code-block-button'
+import {
+  ColorHighlightPopover,
+  ColorHighlightPopoverButton,
+  ColorHighlightPopoverContent
+} from './tiptap/tiptap-ui/color-highlight-popover'
+import { HeadingDropdownMenu } from './tiptap/tiptap-ui/heading-dropdown-menu'
+import { ImageUploadButton } from './tiptap/tiptap-ui/image-upload-button'
+import { LinkButton, LinkContent, LinkPopover } from './tiptap/tiptap-ui/link-popover'
+import { ListDropdownMenu } from './tiptap/tiptap-ui/list-dropdown-menu'
+import { MarkButton } from './tiptap/tiptap-ui/mark-button'
+
+// --- TipTap Styles ---
+import './tiptap/styles/_variables.scss'
+import './tiptap/styles/_keyframe-animations.scss'
+
+export interface RichTextEditorProps {
+  value?: string
+  onChange?: (value: string) => void
+  placeholder?: string
+  disabled?: boolean
+  className?: string
+}
+
+const MainToolbarContent = ({
+  onHighlighterClick,
+  onLinkClick,
+  isMobile
+}: {
+  onHighlighterClick: () => void
+  onLinkClick: () => void
+  isMobile: boolean
+}) => (
+  <>
+    <Spacer />
+
+    <ToolbarGroup>
+      <HeadingDropdownMenu portal />
+      <ListDropdownMenu types={['bulletList', 'orderedList', 'taskList']} portal />
+      <BlockquoteButton />
+      <CodeBlockButton />
+    </ToolbarGroup>
+
+    <ToolbarSeparator />
+
+    <ToolbarGroup>
+      <MarkButton type="bold" />
+      <MarkButton type="italic" />
+      <MarkButton type="strike" />
+      <MarkButton type="code" />
+      <MarkButton type="underline" />
+      {!isMobile ? (
+        <ColorHighlightPopover />
+      ) : (
+        <ColorHighlightPopoverButton onClick={onHighlighterClick} />
+      )}
+      {!isMobile ? <LinkPopover /> : <LinkButton onClick={onLinkClick} />}
+    </ToolbarGroup>
+
+    <ToolbarSeparator />
+
+    <ToolbarGroup>
+      <ImageUploadButton text="Image" />
+    </ToolbarGroup>
+
+    <Spacer />
+  </>
+)
+
+const MobileToolbarContent = ({
+  type,
+  onBack
+}: {
+  type: 'highlighter' | 'link'
+  onBack: () => void
+}) => (
+  <>
+    <ToolbarGroup>
+      <Button variant="ghost" onClick={onBack}>
+        <ArrowLeftIcon className="tiptap-button-icon" />
+        {type === 'highlighter' ? (
+          <HighlighterIcon className="tiptap-button-icon" />
+        ) : (
+          <LinkIcon className="tiptap-button-icon" />
+        )}
+      </Button>
+    </ToolbarGroup>
+
+    <ToolbarSeparator />
+
+    {type === 'highlighter' ? <ColorHighlightPopoverContent /> : <LinkContent />}
+  </>
+)
+
+export const RichTextEditor = ({
+  value = '',
+  onChange,
+  placeholder,
+  disabled = false,
+  className
+}: RichTextEditorProps) => {
+  const isInternalChange = React.useRef(false)
+  const editorRef = React.useRef<ReturnType<typeof useEditor>>(null)
+  const isMobile = useIsBreakpoint()
+  const [mobileView, setMobileView] = React.useState<'main' | 'highlighter' | 'link'>('main')
+
+  const { isUploading, progress, uploadImages } = useEditorImageUpload({
+    onImagesUploaded: (images) => {
+      const ed = editorRef.current
+      if (!ed) return
+      for (const img of images) {
+        ed.chain().focus().setImage({ src: img.url, alt: img.filename }).run()
+      }
+    }
+  })
+
+  const uploadImagesRef = React.useRef(uploadImages)
+  uploadImagesRef.current = uploadImages
+
+  // Image upload handler for the ImageUploadNode extension
+  const handleImageUpload = React.useCallback(
+    async (
+      file: File,
+      onProgress?: (event: { progress: number }) => void,
+      _abortSignal?: AbortSignal
+    ): Promise<string> => {
+      return new Promise((resolve, reject) => {
+        const formData = new FormData()
+        formData.append('file0', file)
+        formData.append('prefix', 'images')
+
+        const xhr = new XMLHttpRequest()
+        xhr.open('POST', '/api/upload')
+
+        xhr.upload.addEventListener('progress', (e) => {
+          if (e.lengthComputable) {
+            onProgress?.({ progress: Math.round((e.loaded / e.total) * 100) })
+          }
+        })
+
+        xhr.addEventListener('load', () => {
+          if (xhr.status >= 200 && xhr.status < 300) {
+            try {
+              const result = JSON.parse(xhr.responseText)
+              if (result.success && result.files?.[0]?.url) {
+                resolve(result.files[0].url)
+              } else {
+                reject(new Error('Upload failed: No URL returned'))
+              }
+            } catch {
+              reject(new Error('Failed to parse upload response'))
+            }
+          } else {
+            reject(new Error(`Upload failed with status ${xhr.status}`))
+          }
+        })
+
+        xhr.addEventListener('error', () => reject(new Error('Upload failed')))
+        xhr.send(formData)
+      })
+    },
+    []
+  )
+
+  const editor = useEditor({
+    immediatelyRender: false,
+    editorProps: {
+      attributes: {
+        autocomplete: 'off',
+        autocorrect: 'off',
+        autocapitalize: 'off',
+        class: 'simple-editor'
+      },
+      handlePaste: (_view, event) => {
+        const items = event.clipboardData?.items
+        if (!items) return false
+        const imageFiles: File[] = []
+        for (const item of items) {
+          if (item.type.startsWith('image/')) {
+            const file = item.getAsFile()
+            if (file) imageFiles.push(file)
+          }
+        }
+        if (imageFiles.length > 0) {
+          event.preventDefault()
+          uploadImagesRef.current(imageFiles)
+          return true
+        }
+        return false
+      },
+      handleDrop: (_view, event) => {
+        const files = Array.from(event.dataTransfer?.files || []).filter((f) =>
+          f.type.startsWith('image/')
+        )
+        if (files.length > 0) {
+          event.preventDefault()
+          uploadImagesRef.current(files)
+          return true
+        }
+        return false
+      }
+    },
+    extensions: [
+      StarterKit.configure({
+        horizontalRule: false,
+        link: {
+          openOnClick: false,
+          enableClickSelection: true
+        }
+      }),
+      HorizontalRule,
+      TextAlign.configure({ types: ['heading', 'paragraph'] }),
+      TaskList,
+      TaskItem.configure({ nested: true }),
+      Highlight.configure({ multicolor: true }),
+      Image,
+      Typography,
+      Superscript,
+      Subscript,
+      Selection,
+      NodeBackground,
+      Placeholder.configure({ placeholder: placeholder || 'Start writing...' }),
+      Markdown.configure({
+        html: false,
+        transformCopiedText: true,
+        transformPastedText: true
+      }),
+      ImageUploadNode.configure({
+        accept: 'image/*',
+        maxSize: 10 * 1024 * 1024,
+        limit: 3,
+        upload: handleImageUpload,
+        onError: (error: Error) => console.error('Upload failed:', error)
+      })
+    ],
+    content: value,
+    editable: !disabled,
+    onUpdate: ({ editor: e }) => {
+      isInternalChange.current = true
+      const md = (e.storage as unknown as Record<string, MarkdownStorage>).markdown.getMarkdown()
+      onChange?.(md)
+    }
+  })
+
+  editorRef.current = editor
+
+  // Sync external value changes (e.g., form reset) without disrupting typing
+  React.useEffect(() => {
+    if (!editor) return
+    if (isInternalChange.current) {
+      isInternalChange.current = false
+      return
+    }
+    const currentMd = (
+      editor.storage as unknown as Record<string, MarkdownStorage>
+    ).markdown.getMarkdown()
+    if (currentMd !== value) {
+      editor.commands.setContent(value)
+    }
+  }, [value, editor])
+
+  // Update editable state
+  React.useEffect(() => {
+    if (editor) {
+      editor.setEditable(!disabled)
+    }
+  }, [disabled, editor])
+
+  // Reset mobile view when switching to desktop
+  React.useEffect(() => {
+    if (!isMobile && mobileView !== 'main') {
+      setMobileView('main')
+    }
+  }, [isMobile, mobileView])
+
+  if (!editor) return null
+
+  const overallProgress =
+    progress.length > 0
+      ? Math.round(progress.reduce((sum, p) => sum + p.progress, 0) / progress.length)
+      : 0
+
+  return (
+    <div
+      className={cn(
+        'rich-text-editor-wrapper border rounded-md overflow-hidden flex flex-col resize-y min-h-[200px] max-h-[90vh] relative',
+        { 'opacity-50 pointer-events-none': disabled },
+        className
+      )}
+    >
+      <EditorContext.Provider value={{ editor }}>
+        <Toolbar>
+          {mobileView === 'main' ? (
+            <MainToolbarContent
+              onHighlighterClick={() => setMobileView('highlighter')}
+              onLinkClick={() => setMobileView('link')}
+              isMobile={isMobile}
+            />
+          ) : (
+            <MobileToolbarContent
+              type={mobileView === 'highlighter' ? 'highlighter' : 'link'}
+              onBack={() => setMobileView('main')}
+            />
+          )}
+        </Toolbar>
+
+        <EditorContent
+          editor={editor}
+          role="presentation"
+          className="simple-editor-content flex-1 min-h-0 overflow-auto p-5 bg-input"
+        />
+      </EditorContext.Provider>
+
+      {/* Upload progress overlay */}
+      {isUploading && (
+        <div className="absolute inset-0 bg-background/60 flex items-center justify-center z-10">
+          <div className="flex flex-col items-center gap-2">
+            <Loader2 className="size-6 animate-spin text-primary" />
+            <div className="text-sm text-muted-foreground">Uploading... {overallProgress}%</div>
+            <div className="w-48 h-1.5 bg-muted rounded-full overflow-hidden">
+              <div
+                className="h-full bg-primary rounded-full transition-all duration-200"
+                style={{ width: `${overallProgress}%` }}
+              />
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

package/templates/ui/scroll-area.tsx

@@ -0,0 +1,45 @@
+'use client'
+
+import { cn } from '@cms/utils/cn'
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area'
+import * as React from 'react'
+
+const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root
+    ref={ref}
+    className={cn('relative overflow-hidden', className)}
+    {...props}
+  >
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+))
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
+
+const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = 'vertical', ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      'flex touch-none select-none transition-colors',
+      orientation === 'vertical' && 'h-full w-2.5 border-l border-l-transparent p-[1px]',
+      orientation === 'horizontal' && 'h-2.5 flex-col border-t border-t-transparent p-[1px]',
+      className
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+))
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
+
+export { ScrollArea, ScrollBar }

package/templates/ui/select.tsx

@@ -0,0 +1,151 @@
+'use client'
+
+import { cn } from '@cms/utils/cn'
+import * as SelectPrimitive from '@radix-ui/react-select'
+import { Check, ChevronDown, ChevronUp } from 'lucide-react'
+import * as React from 'react'
+
+const Select = SelectPrimitive.Root
+
+const SelectGroup = SelectPrimitive.Group
+
+const SelectValue = SelectPrimitive.Value
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      'flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input-border bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="h-4 w-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+))
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn('flex cursor-default items-center justify-center py-1', className)}
+    {...props}
+  >
+    <ChevronUp className="h-4 w-4" />
+  </SelectPrimitive.ScrollUpButton>
+))
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn('flex cursor-default items-center justify-center py-1', className)}
+    {...props}
+  >
+    <ChevronDown className="h-4 w-4" />
+  </SelectPrimitive.ScrollDownButton>
+))
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = 'popper', ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        'relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]',
+        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
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          'p-1',
+          position === 'popper' &&
+            'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]'
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+))
+SelectContent.displayName = SelectPrimitive.Content.displayName
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn('px-2 py-1.5 text-sm font-semibold', className)}
+    {...props}
+  />
+))
+SelectLabel.displayName = SelectPrimitive.Label.displayName
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+))
+SelectItem.displayName = SelectPrimitive.Item.displayName
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn('-mx-1 my-1 h-px bg-muted', className)}
+    {...props}
+  />
+))
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton
+}

package/templates/ui/separator.tsx

@@ -0,0 +1,25 @@
+'use client'
+
+import { cn } from '@cms/utils/cn'
+import * as SeparatorPrimitive from '@radix-ui/react-separator'
+import * as React from 'react'
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(({ className, orientation = 'horizontal', decorative = true, ...props }, ref) => (
+  <SeparatorPrimitive.Root
+    ref={ref}
+    decorative={decorative}
+    orientation={orientation}
+    className={cn(
+      'shrink-0 bg-border',
+      orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
+      className
+    )}
+    {...props}
+  />
+))
+Separator.displayName = SeparatorPrimitive.Root.displayName
+
+export { Separator }