@speakeasy-api/moonshine 2.0.0-alpha.1 → 2.0.0-alpha.3

package/src/components/ContextDropdown/index.tsx

@@ -0,0 +1,150 @@
+'use client'
+
+import { useEffect } from 'react'
+import { motion, AnimatePresence } from 'motion/react'
+import { Icon } from '../Icon'
+import { assert } from '../../lib/typeUtils'
+import { Heading } from '../Heading'
+import React from 'react'
+import { useModal } from '../../hooks/useModal'
+import { Screen } from '../../context/ModalContext'
+
+const MotionHeading = motion.create(Heading)
+
+const animationDuration = 0.15
+
+interface ContextDropdownProps {
+  renderTitle?: (screen: Screen, index: number) => React.ReactNode
+}
+
+export function ContextDropdown({ renderTitle }: ContextDropdownProps) {
+  const {
+    screens,
+    currentIndex,
+    isOpen,
+    close,
+    popScreen,
+    navigationDirection,
+  } = useModal()
+
+  // Animation variants for title and content
+  const slideVariants = {
+    enter: (isForward: boolean) => ({
+      x: isForward ? '100%' : '-100%',
+      opacity: 0,
+      width: '100%',
+    }),
+    center: {
+      x: 0,
+      opacity: 1,
+      width: '100%',
+    },
+    exit: (isForward: boolean) => ({
+      x: isForward ? '-100%' : '100%',
+      opacity: 0,
+      width: '100%',
+    }),
+  }
+
+  // Handle escape key to close modal
+  useEffect(() => {
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        close()
+      }
+    }
+
+    if (isOpen) {
+      document.addEventListener('keydown', handleEscape)
+      // Prevent body scrolling when modal is open
+      document.body.style.overflow = 'hidden'
+    }
+
+    return () => {
+      document.removeEventListener('keydown', handleEscape)
+      document.body.style.overflow = 'auto'
+    }
+  }, [isOpen, close])
+
+  if (!isOpen) return null
+
+  const currentScreen = screens[currentIndex]
+  assert(currentScreen, 'No current screen')
+  const isForward = navigationDirection === 'forward'
+
+  return (
+    <AnimatePresence>
+      {isOpen && (
+        <motion.div
+          className="fixed inset-0 z-50 flex flex-col bg-transparent"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          transition={{ duration: animationDuration }}
+        >
+          <div className="flex h-16 items-center justify-between border-b px-4">
+            <div className="flex items-center gap-2">
+              {currentIndex > 0 && (
+                <button
+                  onClick={popScreen}
+                  className="hover:bg-muted mr-2 rounded-full border p-2 disabled:opacity-50 disabled:hover:bg-transparent"
+                  aria-label="Go back"
+                >
+                  <Icon name="chevron-left" className="size-4" />
+                </button>
+              )}
+
+              {/* Animated title */}
+              <div className="relative h-7 w-fit min-w-xs overflow-x-hidden">
+                <AnimatePresence initial={false} mode="sync" custom={isForward}>
+                  <MotionHeading
+                    key={`title-${currentIndex}`}
+                    className="text-md absolute !leading-6 font-medium"
+                    custom={isForward}
+                    variants={slideVariants}
+                    initial="enter"
+                    animate="center"
+                    exit="exit"
+                    variant="sm"
+                    transition={{ type: 'tween', duration: animationDuration }}
+                  >
+                    {renderTitle
+                      ? renderTitle(currentScreen, currentIndex)
+                      : currentScreen.title}
+                  </MotionHeading>
+                </AnimatePresence>
+              </div>
+            </div>
+
+            {/* Static right side with close button */}
+            <button
+              onClick={close}
+              className="hover:bg-muted rounded-full border p-2"
+              aria-label="Close modal"
+            >
+              <Icon name="x" className="size-4" />
+            </button>
+          </div>
+
+          {/* Modal Content with Animation */}
+          <div className="relative flex-1 overflow-hidden">
+            <AnimatePresence initial={false} mode="wait" custom={isForward}>
+              <motion.div
+                key={currentIndex}
+                className="absolute inset-0 overflow-auto"
+                custom={isForward}
+                variants={slideVariants}
+                initial="enter"
+                animate="center"
+                exit="exit"
+                transition={{ type: 'tween', duration: animationDuration }}
+              >
+                {currentScreen.component}
+              </motion.div>
+            </AnimatePresence>
+          </div>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  )
+}

package/src/components/Dialog/index.tsx

@@ -0,0 +1,123 @@
+'use client'
+
+import * as React from 'react'
+import * as DialogPrimitive from '@radix-ui/react-dialog'
+import { X } from 'lucide-react'
+
+import { cn } from '../../lib/utils'
+
+const DialogTrigger = DialogPrimitive.Trigger
+
+const DialogPortal = DialogPrimitive.Portal
+
+const DialogClose = DialogPrimitive.Close
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80',
+      className
+    )}
+    {...props}
+  />
+))
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
+    closeable?: boolean
+  }
+>(({ className, children, closeable = true, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        'bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg',
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {closeable && (
+        <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none">
+          <X className="h-4 w-4" />
+          <span className="sr-only">Close</span>
+        </DialogPrimitive.Close>
+      )}
+    </DialogPrimitive.Content>
+  </DialogPortal>
+))
+DialogContent.displayName = DialogPrimitive.Content.displayName
+
+const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      'flex flex-col space-y-1.5 text-center sm:text-left',
+      className
+    )}
+    {...props}
+  />
+)
+DialogHeader.displayName = 'DialogHeader'
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
+      className
+    )}
+    {...props}
+  />
+)
+DialogFooter.displayName = 'DialogFooter'
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      'text-lg leading-none font-semibold tracking-tight',
+      className
+    )}
+    {...props}
+  />
+))
+DialogTitle.displayName = DialogPrimitive.Title.displayName
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn('text-muted-foreground text-sm', className)}
+    {...props}
+  />
+))
+DialogDescription.displayName = DialogPrimitive.Description.displayName
+
+export const Dialog = Object.assign(DialogPrimitive.Root, {
+  Portal: DialogPortal,
+  Overlay: DialogOverlay,
+  Close: DialogClose,
+  Trigger: DialogTrigger,
+  Content: DialogContent,
+  Header: DialogHeader,
+  Footer: DialogFooter,
+  Title: DialogTitle,
+  Description: DialogDescription,
+})

package/src/components/DragNDrop/DragNDropArea.tsx

@@ -0,0 +1,30 @@
+import { CollisionDetection, DndContext, Modifier } from '@dnd-kit/core'
+import { restrictToWindowEdges } from '@dnd-kit/modifiers'
+
+export interface DragNDropAreaProps {
+  children: React.ReactNode
+
+  modifiers?: Modifier[]
+
+  className?: string
+
+  collisionDetectionAlgo?: CollisionDetection
+}
+
+const defaultModifiers: Modifier[] = [restrictToWindowEdges]
+
+export function DragNDropArea({
+  children,
+  modifiers = defaultModifiers,
+  className,
+  collisionDetectionAlgo,
+}: DragNDropAreaProps) {
+  return (
+    <DndContext
+      collisionDetection={collisionDetectionAlgo}
+      modifiers={modifiers}
+    >
+      <div className={className}>{children}</div>
+    </DndContext>
+  )
+}

package/src/components/DragNDrop/DragOverlay.tsx

@@ -0,0 +1,4 @@
+import { DragOverlay as DndOverlay } from '@dnd-kit/core'
+
+// TODO: Add a custom overlay component
+export const DragOverlay = DndOverlay

package/src/components/DragNDrop/Draggable.tsx

@@ -0,0 +1,97 @@
+import {
+  Active,
+  DndMonitorListener,
+  useDndMonitor,
+  useDraggable,
+  Over,
+  Data,
+  UniqueIdentifier,
+} from '@dnd-kit/core'
+import type { ClientRect } from '@dnd-kit/core/dist/types/rect'
+import { CSS } from '@dnd-kit/utilities'
+import { MutableRefObject } from 'react'
+
+export interface DraggableChildrenProps {
+  over: Over | null
+  active: Active | null
+  activeNodeRect: ClientRect | null
+  isDragging: boolean
+  node: MutableRefObject<HTMLElement | null> | null
+}
+
+export interface DraggableProps<TData> extends DndMonitorListener {
+  /**
+   * The children to render.
+   *
+   * If a function is provided, it will be called with the current state of the draggable.
+   */
+  children:
+    | React.ReactNode
+    | ((props: DraggableChildrenProps) => React.ReactNode)
+
+  /**
+   * The unique identifier for the draggable.
+   */
+  id: UniqueIdentifier
+
+  className?: string
+
+  disabled?: boolean
+
+  /**
+   * The data to pass to the draggable of generic type TData.
+   */
+  data?: TData
+}
+
+export function Draggable<TData extends Data>({
+  children,
+  id,
+  onDragEnd,
+  onDragStart,
+  onDragCancel,
+  onDragOver,
+  className,
+  disabled,
+  data,
+}: DraggableProps<TData>) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    over,
+    transform,
+    active,
+    isDragging,
+    activeNodeRect,
+    node,
+  } = useDraggable({
+    id,
+    data,
+    disabled,
+  })
+  useDndMonitor({
+    onDragEnd,
+    onDragStart,
+    onDragCancel,
+    onDragOver,
+  })
+
+  const style: React.CSSProperties = {
+    transform: CSS.Translate.toString(transform),
+  }
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      {...attributes}
+      {...listeners}
+      className={className}
+    >
+      {typeof children === 'function'
+        ? children({ over, active, activeNodeRect, isDragging, node })
+        : children}
+    </div>
+  )
+}

package/src/components/DragNDrop/Droppable.tsx

@@ -0,0 +1,51 @@
+import { Over, UniqueIdentifier, useDroppable } from '@dnd-kit/core'
+import type { ClientRect } from '@dnd-kit/core/dist/types/rect'
+import type { MutableRefObject, ReactNode } from 'react'
+
+interface DroppableData {
+  isOver: boolean
+  over: Over | null
+  rect: MutableRefObject<ClientRect | null>
+  node: MutableRefObject<HTMLElement | null>
+}
+
+export interface DroppableProps<TData extends Record<string, unknown>> {
+  /**
+   * A function that returns a React node or a React node.
+   * If a function is provided, it will be called with the droppable data.
+   */
+  children: ReactNode | ((props: DroppableData) => ReactNode)
+
+  /**
+   * The unique identifier for the droppable container.
+   */
+  id: UniqueIdentifier
+
+  /**
+   * The data to pass to the droppable container.
+   * Will be returned in any dragOver events for draggables that are over this droppable.
+   */
+  data?: TData
+
+  className?: string
+}
+
+export function Droppable<TData extends Record<string, unknown>>({
+  children,
+  id,
+  data,
+  className,
+}: DroppableProps<TData>) {
+  const { setNodeRef, isOver, over, rect, node } = useDroppable({
+    id,
+    data,
+  })
+
+  return (
+    <div ref={setNodeRef} className={className}>
+      {typeof children === 'function'
+        ? children({ isOver, over, rect, node })
+        : children}
+    </div>
+  )
+}

package/src/components/Dropdown/index.tsx

@@ -0,0 +1,201 @@
+'use client'
+
+import * as React from 'react'
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
+import { Check, ChevronRight, Circle } from 'lucide-react'
+
+import { cn } from '../../lib/utils'
+
+const DropdownMenu = DropdownMenuPrimitive.Root
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      'focus:bg-accent data-[state=open]:bg-accent flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+      inset && 'pl-8',
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto" />
+  </DropdownMenuPrimitive.SubTrigger>
+))
+DropdownMenuSubTrigger.displayName =
+  DropdownMenuPrimitive.SubTrigger.displayName
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      'bg-popover text-popover-foreground 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 z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-lg',
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuSubContent.displayName =
+  DropdownMenuPrimitive.SubContent.displayName
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        'bg-popover text-popover-foreground z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 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',
+        className
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+))
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm transition-colors outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0',
+      inset && 'pl-8',
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center rounded-sm py-1.5 pr-2 pl-8 text-sm transition-colors outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+))
+DropdownMenuCheckboxItem.displayName =
+  DropdownMenuPrimitive.CheckboxItem.displayName
+
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center rounded-sm py-1.5 pr-2 pl-8 text-sm transition-colors outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+))
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      'px-2 py-1.5 text-sm font-semibold',
+      inset && 'pl-8',
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn('bg-muted -mx-1 my-1 h-px', className)}
+    {...props}
+  />
+))
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
+
+const DropdownMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn('ml-auto text-xs tracking-widest opacity-60', className)}
+      {...props}
+    />
+  )
+}
+DropdownMenuShortcut.displayName = 'DropdownMenuShortcut'
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+}