@betterstart/cli 0.1.3 → 0.1.4

package/templates/tiptap/tiptap-ui-primitive/dropdown-menu/dropdown-menu.tsx

@@ -0,0 +1,95 @@
+'use client'
+
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
+import { forwardRef } from 'react'
+import { cn } from '../../lib/tiptap-utils'
+import './dropdown-menu.scss'
+
+function DropdownMenu({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return <DropdownMenuPrimitive.Root modal={false} {...props} />
+}
+
+function DropdownMenuPortal({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+  return <DropdownMenuPrimitive.Portal {...props} />
+}
+
+const DropdownMenuTrigger = forwardRef<
+  React.ComponentRef<typeof DropdownMenuPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Trigger>
+>(({ ...props }, ref) => <DropdownMenuPrimitive.Trigger ref={ref} {...props} />)
+DropdownMenuTrigger.displayName = DropdownMenuPrimitive.Trigger.displayName
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+
+const DropdownMenuItem = DropdownMenuPrimitive.Item
+
+const DropdownMenuSubTrigger = DropdownMenuPrimitive.SubTrigger
+
+const DropdownMenuSubContent = forwardRef<
+  React.ComponentRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent> & {
+    portal?: boolean | React.ComponentProps<typeof DropdownMenuPortal>
+  }
+>(({ className, portal = true, ...props }, ref) => {
+  const content = (
+    <DropdownMenuPrimitive.SubContent
+      ref={ref}
+      className={cn('tiptap-dropdown-menu', className)}
+      {...props}
+    />
+  )
+
+  return portal ? (
+    <DropdownMenuPortal {...(typeof portal === 'object' ? portal : {})}>
+      {content}
+    </DropdownMenuPortal>
+  ) : (
+    content
+  )
+})
+DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName
+
+const DropdownMenuContent = forwardRef<
+  React.ComponentRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> & {
+    portal?: boolean
+  }
+>(({ className, sideOffset = 4, portal = false, ...props }, ref) => {
+  const content = (
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      onCloseAutoFocus={(e) => e.preventDefault()}
+      className={cn('tiptap-dropdown-menu', className)}
+      {...props}
+    />
+  )
+
+  return portal ? (
+    <DropdownMenuPortal {...(typeof portal === 'object' ? portal : {})}>
+      {content}
+    </DropdownMenuPortal>
+  ) : (
+    content
+  )
+})
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuGroup,
+  DropdownMenuSub,
+  DropdownMenuPortal,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup
+}

package/templates/tiptap/tiptap-ui-primitive/dropdown-menu/index.tsx

@@ -0,0 +1 @@
+export * from './dropdown-menu'

package/templates/tiptap/tiptap-ui-primitive/input/index.tsx

@@ -0,0 +1 @@
+export * from './input'

package/templates/tiptap/tiptap-ui-primitive/input/input.scss

@@ -0,0 +1,45 @@
+:root {
+  --tiptap-input-placeholder: var(--tt-gray-light-a-400);
+}
+
+.dark {
+  --tiptap-input-placeholder: var(--tt-gray-dark-a-400);
+}
+
+.tiptap-input {
+  display: block;
+  width: 100%;
+  height: 2rem;
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.5;
+  padding: 0.375rem 0.5rem;
+  border-radius: 0.375rem;
+  background: none;
+  appearance: none;
+  outline: none;
+
+  &::placeholder {
+    color: var(--tiptap-input-placeholder);
+  }
+}
+
+.tiptap-input-clamp {
+  min-width: 12rem;
+  padding-right: 0;
+
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  &:focus {
+    text-overflow: clip;
+    overflow: visible;
+  }
+}
+
+.tiptap-input-group {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: stretch;
+}

package/templates/tiptap/tiptap-ui-primitive/input/input.tsx

@@ -0,0 +1,18 @@
+'use client'
+
+import { cn } from '../../lib/tiptap-utils'
+import './input.scss'
+
+function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
+  return <input type={type} className={cn('tiptap-input', className)} {...props} />
+}
+
+function InputGroup({ className, children, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div className={cn('tiptap-input-group', className)} {...props}>
+      {children}
+    </div>
+  )
+}
+
+export { Input, InputGroup }

package/templates/tiptap/tiptap-ui-primitive/popover/index.tsx

@@ -0,0 +1 @@
+export * from './popover'

package/templates/tiptap/tiptap-ui-primitive/popover/popover.scss

@@ -0,0 +1,63 @@
+.tiptap-popover {
+  --tt-popover-bg-color: var(--white);
+  --tt-popover-border-color: var(--tt-gray-light-a-100);
+  --tt-popover-text-color: var(--tt-gray-light-a-600);
+
+  .dark & {
+    --tt-popover-border-color: var(--tt-gray-dark-a-50);
+    --tt-popover-bg-color: var(--tt-gray-dark-50);
+    --tt-popover-text-color: var(--tt-gray-dark-a-600);
+  }
+}
+
+/* --------------------------------------------
+    --------- POPOVER STYLING SETTINGS -----------
+    -------------------------------------------- */
+.tiptap-popover {
+  z-index: 50;
+  outline: none;
+  transform-origin: var(--radix-popover-content-transform-origin);
+  max-height: var(--radix-popover-content-available-height);
+
+  > * {
+    max-height: var(--radix-popover-content-available-height);
+  }
+
+  /* Animation states */
+  &[data-state="open"] {
+    animation:
+      fadeIn 150ms cubic-bezier(0.16, 1, 0.3, 1),
+      zoomIn 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  }
+
+  &[data-state="closed"] {
+    animation:
+      fadeOut 150ms cubic-bezier(0.16, 1, 0.3, 1),
+      zoomOut 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  }
+
+  /* Position-based animations */
+  &[data-side="top"],
+  &[data-side="top-start"],
+  &[data-side="top-end"] {
+    animation: slideFromBottom 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  }
+
+  &[data-side="right"],
+  &[data-side="right-start"],
+  &[data-side="right-end"] {
+    animation: slideFromLeft 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  }
+
+  &[data-side="bottom"],
+  &[data-side="bottom-start"],
+  &[data-side="bottom-end"] {
+    animation: slideFromTop 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  }
+
+  &[data-side="left"],
+  &[data-side="left-start"],
+  &[data-side="left-end"] {
+    animation: slideFromRight 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  }
+}

package/templates/tiptap/tiptap-ui-primitive/popover/popover.tsx

@@ -0,0 +1,33 @@
+'use client'
+
+import * as PopoverPrimitive from '@radix-ui/react-popover'
+import { cn } from '../../lib/tiptap-utils'
+import './popover.scss'
+
+function Popover({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+  return <PopoverPrimitive.Root {...props} />
+}
+
+function PopoverTrigger({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+  return <PopoverPrimitive.Trigger {...props} />
+}
+
+function PopoverContent({
+  className,
+  align = 'center',
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        align={align}
+        sideOffset={sideOffset}
+        className={cn('tiptap-popover', className)}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  )
+}
+
+export { Popover, PopoverTrigger, PopoverContent }

package/templates/tiptap/tiptap-ui-primitive/separator/index.tsx

@@ -0,0 +1 @@
+export * from './separator'

package/templates/tiptap/tiptap-ui-primitive/separator/separator.scss

@@ -0,0 +1,23 @@
+.tiptap-separator {
+  --tt-link-border-color: var(--tt-gray-light-a-200);
+
+  .dark & {
+    --tt-link-border-color: var(--tt-gray-dark-a-200);
+  }
+}
+
+.tiptap-separator {
+  flex-shrink: 0;
+  background-color: var(--tt-link-border-color);
+
+  &[data-orientation="horizontal"] {
+    height: 1px;
+    width: 100%;
+    margin: 0.5rem 0;
+  }
+
+  &[data-orientation="vertical"] {
+    height: 1.5rem;
+    width: 1px;
+  }
+}

package/templates/tiptap/tiptap-ui-primitive/separator/separator.tsx

@@ -0,0 +1,33 @@
+'use client'
+
+import { forwardRef } from 'react'
+import './separator.scss'
+import { cn } from '../../lib/tiptap-utils'
+
+export type Orientation = 'horizontal' | 'vertical'
+
+export interface SeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
+  orientation?: Orientation
+  decorative?: boolean
+}
+
+export const Separator = forwardRef<HTMLDivElement, SeparatorProps>(
+  ({ decorative, orientation = 'vertical', className, ...divProps }, ref) => {
+    const ariaOrientation = orientation === 'vertical' ? orientation : undefined
+    const semanticProps = decorative
+      ? { role: 'none' }
+      : { 'aria-orientation': ariaOrientation, role: 'separator' }
+
+    return (
+      <div
+        className={cn('tiptap-separator', className)}
+        data-orientation={orientation}
+        {...semanticProps}
+        {...divProps}
+        ref={ref}
+      />
+    )
+  }
+)
+
+Separator.displayName = 'Separator'

package/templates/tiptap/tiptap-ui-primitive/spacer/index.tsx

@@ -0,0 +1 @@
+export * from './spacer'

package/templates/tiptap/tiptap-ui-primitive/spacer/spacer.tsx

@@ -0,0 +1,21 @@
+'use client'
+
+export type SpacerOrientation = 'horizontal' | 'vertical'
+
+export interface SpacerProps extends React.HTMLAttributes<HTMLDivElement> {
+  orientation?: SpacerOrientation
+  size?: string | number
+}
+
+export function Spacer({ orientation = 'horizontal', size, style = {}, ...props }: SpacerProps) {
+  const computedStyle = {
+    ...style,
+    ...(orientation === 'horizontal' && !size && { flex: 1 }),
+    ...(size && {
+      width: orientation === 'vertical' ? '1px' : size,
+      height: orientation === 'horizontal' ? '1px' : size
+    })
+  }
+
+  return <div {...props} style={computedStyle} />
+}

package/templates/tiptap/tiptap-ui-primitive/toolbar/index.tsx

@@ -0,0 +1 @@
+export * from './toolbar'

package/templates/tiptap/tiptap-ui-primitive/toolbar/toolbar.scss

@@ -0,0 +1,98 @@
+:root {
+  --tt-toolbar-height: 2.75rem;
+  --tt-safe-area-bottom: env(safe-area-inset-bottom, 0px);
+  --tt-toolbar-bg-color: var(--white);
+  --tt-toolbar-border-color: var(--tt-gray-light-a-100);
+}
+
+.dark {
+  --tt-toolbar-bg-color: var(--black);
+  --tt-toolbar-border-color: var(--tt-gray-dark-a-50);
+}
+
+.tiptap-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+
+  &-group {
+    display: flex;
+    align-items: center;
+    gap: 0.125rem;
+
+    &:empty {
+      display: none;
+    }
+
+    &:empty + .tiptap-separator,
+    .tiptap-separator + &:empty {
+      display: none;
+    }
+  }
+
+  &[data-variant="fixed"] {
+    position: sticky;
+    top: 0;
+    z-index: 10;
+    width: 100%;
+    min-height: var(--tt-toolbar-height);
+    background: var(--tt-toolbar-bg-color);
+    border-bottom: 1px solid var(--tt-toolbar-border-color);
+    padding: 0 0.5rem;
+    overflow-x: auto;
+    overscroll-behavior-x: contain;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    @media (max-width: 480px) {
+      position: absolute;
+      top: auto;
+      height: calc(var(--tt-toolbar-height) + var(--tt-safe-area-bottom));
+      border-top: 1px solid var(--tt-toolbar-border-color);
+      border-bottom: none;
+      padding: 0 0.5rem var(--tt-safe-area-bottom);
+      flex-wrap: nowrap;
+      justify-content: flex-start;
+
+      .tiptap-toolbar-group {
+        flex: 0 0 auto;
+      }
+    }
+  }
+
+  &[data-variant="floating"] {
+    --tt-toolbar-padding: 0.125rem;
+    --tt-toolbar-border-width: 1px;
+
+    padding: 0.188rem;
+    border-radius: calc(
+      var(--tt-toolbar-padding) + var(--tt-radius-lg) +
+        var(--tt-toolbar-border-width)
+    );
+    border: var(--tt-toolbar-border-width) solid var(--tt-toolbar-border-color);
+    background-color: var(--tt-toolbar-bg-color);
+    box-shadow: var(--tt-shadow-elevated-md);
+    outline: none;
+    overflow: hidden;
+
+    &[data-plain="true"] {
+      padding: 0;
+      border-radius: 0;
+      border: none;
+      box-shadow: none;
+      background-color: transparent;
+    }
+
+    @media screen and (max-width: 480px) {
+      width: 100%;
+      border-radius: 0;
+      border: none;
+      box-shadow: none;
+    }
+  }
+}

package/templates/tiptap/tiptap-ui-primitive/toolbar/toolbar.tsx

@@ -0,0 +1,113 @@
+'use client'
+
+import { forwardRef, useCallback, useEffect, useRef, useState } from 'react'
+import { Separator } from '../separator'
+import './toolbar.scss'
+import { useComposedRef } from '../../hooks/use-composed-ref'
+import { useMenuNavigation } from '../../hooks/use-menu-navigation'
+import { cn } from '../../lib/tiptap-utils'
+
+type BaseProps = React.HTMLAttributes<HTMLDivElement>
+
+interface ToolbarProps extends BaseProps {
+  variant?: 'floating' | 'fixed'
+}
+
+const useToolbarNavigation = (toolbarRef: React.RefObject<HTMLDivElement | null>) => {
+  const [items, setItems] = useState<HTMLElement[]>([])
+
+  const collectItems = useCallback(() => {
+    if (!toolbarRef.current) return []
+    return Array.from(
+      toolbarRef.current.querySelectorAll<HTMLElement>(
+        'button:not([disabled]), [role="button"]:not([disabled]), [tabindex="0"]:not([disabled])'
+      )
+    )
+  }, [toolbarRef])
+
+  useEffect(() => {
+    const toolbar = toolbarRef.current
+    if (!toolbar) return
+
+    const updateItems = () => setItems(collectItems())
+
+    updateItems()
+    const observer = new MutationObserver(updateItems)
+    observer.observe(toolbar, { childList: true, subtree: true })
+
+    return () => observer.disconnect()
+  }, [collectItems, toolbarRef])
+
+  const { selectedIndex } = useMenuNavigation<HTMLElement>({
+    containerRef: toolbarRef,
+    items,
+    orientation: 'horizontal',
+    onSelect: (el) => el.click(),
+    autoSelectFirstItem: false
+  })
+
+  useEffect(() => {
+    const toolbar = toolbarRef.current
+    if (!toolbar) return
+
+    const handleFocus = (e: FocusEvent) => {
+      const target = e.target as HTMLElement
+      if (toolbar.contains(target)) target.setAttribute('data-focus-visible', 'true')
+    }
+
+    const handleBlur = (e: FocusEvent) => {
+      const target = e.target as HTMLElement
+      if (toolbar.contains(target)) target.removeAttribute('data-focus-visible')
+    }
+
+    toolbar.addEventListener('focus', handleFocus, true)
+    toolbar.addEventListener('blur', handleBlur, true)
+
+    return () => {
+      toolbar.removeEventListener('focus', handleFocus, true)
+      toolbar.removeEventListener('blur', handleBlur, true)
+    }
+  }, [toolbarRef])
+
+  useEffect(() => {
+    if (selectedIndex !== undefined && items[selectedIndex]) {
+      items[selectedIndex].focus()
+    }
+  }, [selectedIndex, items])
+}
+
+export const Toolbar = forwardRef<HTMLDivElement, ToolbarProps>(
+  ({ children, className, variant = 'fixed', ...props }, ref) => {
+    const toolbarRef = useRef<HTMLDivElement>(null)
+    const composedRef = useComposedRef(toolbarRef, ref)
+    useToolbarNavigation(toolbarRef)
+
+    return (
+      <div
+        ref={composedRef}
+        role="toolbar"
+        aria-label="toolbar"
+        data-variant={variant}
+        className={cn('tiptap-toolbar border-border!', className)}
+        {...props}
+      >
+        {children}
+      </div>
+    )
+  }
+)
+Toolbar.displayName = 'Toolbar'
+
+export const ToolbarGroup = forwardRef<HTMLDivElement, BaseProps>(
+  ({ children, className, ...props }, ref) => (
+    <div ref={ref} role="group" className={cn('tiptap-toolbar-group', className)} {...props}>
+      {children}
+    </div>
+  )
+)
+ToolbarGroup.displayName = 'ToolbarGroup'
+
+export const ToolbarSeparator = forwardRef<HTMLDivElement, BaseProps>(({ ...props }, ref) => (
+  <Separator ref={ref} orientation="vertical" decorative {...props} />
+))
+ToolbarSeparator.displayName = 'ToolbarSeparator'

package/templates/tiptap/tiptap-ui-primitive/tooltip/index.tsx

@@ -0,0 +1 @@
+export * from './tooltip'

package/templates/tiptap/tiptap-ui-primitive/tooltip/tooltip.scss

@@ -0,0 +1,43 @@
+.tiptap-tooltip {
+  --tt-tooltip-bg: var(--tt-gray-light-900);
+  --tt-tooltip-text: var(--white);
+  --tt-kbd: var(--tt-gray-dark-a-400);
+
+  .dark & {
+    --tt-tooltip-bg: var(--white);
+    --tt-tooltip-text: var(--tt-gray-light-600);
+    --tt-kbd: var(--tt-gray-light-a-400);
+  }
+}
+
+.tiptap-tooltip {
+  z-index: 200;
+  overflow: hidden;
+  border-radius: var(--tt-radius-md, 0.375rem);
+  background-color: var(--tt-tooltip-bg);
+  padding: 0.375rem 0.5rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--tt-tooltip-text);
+  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+  text-align: center;
+
+  kbd {
+    display: inline-block;
+    text-align: center;
+    vertical-align: baseline;
+    font-family:
+      ui-sans-serif,
+      system-ui,
+      -apple-system,
+      BlinkMacSystemFont,
+      "Segoe UI",
+      Roboto,
+      "Helvetica Neue",
+      Arial,
+      "Noto Sans",
+      sans-serif;
+    text-transform: capitalize;
+    color: var(--tt-kbd);
+  }
+}