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

package/src/components/CodeSnippet/index.tsx

@@ -0,0 +1,224 @@
+import { useCallback, useState, useEffect, useRef } from 'react'
+import { cn } from '../../lib/utils'
+import { ProgrammingLanguage, Size } from '../../types'
+import { AnimatePresence, motion } from 'motion/react'
+import '../../styles/codeSyntax.css'
+import './codeSnippet.css'
+import { Icon } from '../Icon'
+import {
+  highlightCode,
+  HighlightedCode,
+  LIGHT_THEME,
+  DARK_THEME,
+} from '../../lib/codeUtils'
+import { useConfig } from '../../hooks/useConfig'
+import { Pre } from '../CodeHighlight/Pre'
+
+export interface CodeSnippetProps {
+  /**
+   * The code to display.
+   */
+  code: string
+  /**
+   * Whether to show a copy button.
+   */
+  copyable?: boolean
+  /**
+   * One of the known Speakeasy target languages, or a language that Shiki supports.
+   * The full list of supported languages is available at https://shiki.style/languages
+   */
+  language: ProgrammingLanguage | string
+  /**
+   * The symbol to display before the code.
+   */
+  promptSymbol?: React.ReactNode
+  /**
+   * Whether to display the code snippet inline.
+   */
+  inline?: boolean
+  /**
+   * The font size of the code snippet.
+   */
+  fontSize?: Size
+  /**
+   * Whether to show line numbers.
+   */
+  showLineNumbers?: boolean
+  /**
+   * The callback to call when the code is selected or copied.
+   */
+  onSelectOrCopy?: () => void
+  /**
+   * Whether to shimmer the code snippet.
+   */
+  shimmer?: boolean
+  /**
+   * Additional CSS classes to apply to the code snippet container
+   */
+  className?: string
+
+  /**
+   * Additional CSS classes to apply to the code snippet inner container (e.g the Pre component).
+   */
+  snippetClassName?: string
+}
+
+const fontSizeMap: Record<Size, string> = {
+  small: 'text-sm',
+  medium: 'text-sm',
+  large: 'text-base',
+  xl: 'text-lg',
+  '2xl': 'text-xl',
+}
+
+const copyIconVariants = {
+  hidden: { opacity: 0, scale: 0.5 },
+  visible: { opacity: 1, scale: 1 },
+}
+
+export function CodeSnippet({
+  code,
+  copyable = false,
+  language,
+  promptSymbol,
+  inline = false,
+  fontSize = 'medium',
+  onSelectOrCopy,
+  shimmer = false,
+  className,
+  snippetClassName,
+  showLineNumbers = false,
+}: CodeSnippetProps) {
+  const [copying, setCopying] = useState(false)
+  const [containerWidth, setContainerWidth] = useState(0)
+  const containerRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const updateWidth = () => {
+      if (containerRef.current) {
+        const width = containerRef.current.getBoundingClientRect().width
+        // Only update if we have a non-zero width
+        if (width > 0) {
+          setContainerWidth(width)
+        }
+      }
+    }
+
+    // Initial measurement
+    updateWidth()
+
+    // Create ResizeObserver for more reliable width tracking
+    const resizeObserver = new ResizeObserver(updateWidth)
+    if (containerRef.current) {
+      resizeObserver.observe(containerRef.current)
+    }
+
+    return () => resizeObserver.disconnect()
+  }, [])
+
+  const [highlightedCodeState, setHighlightedCodeState] = useState<
+    HighlightedCode | undefined
+  >(undefined)
+  const isMultiline = code.split('\n').length > 1
+  const { theme } = useConfig()
+
+  // Directly highlight the code when code or language changes
+  useEffect(() => {
+    if (!language) return
+
+    const shikiTheme = theme === 'dark' ? DARK_THEME : LIGHT_THEME
+    // Use the highlightCode utility directly
+    highlightCode(code, language, shikiTheme).then((highlighted) => {
+      setHighlightedCodeState(highlighted)
+    })
+  }, [code, language, theme])
+
+  const handleCopy = useCallback(() => {
+    setCopying(true)
+    navigator.clipboard.writeText(highlightedCodeState?.code ?? code)
+    setTimeout(() => {
+      setCopying(false)
+      onSelectOrCopy?.()
+    }, 1000)
+  }, [highlightedCodeState?.code, code])
+
+  const handleBeforeInput = (event: React.KeyboardEvent<HTMLPreElement>) =>
+    event.preventDefault()
+
+  return (
+    <div
+      data-theme={theme}
+      className={cn(
+        'border-muted snippet bg-card relative box-border flex w-full overflow-hidden rounded-lg border',
+        inline && 'inline-flex',
+        shimmer && 'shimmer',
+        className
+      )}
+      style={{ '--width': `${containerWidth}px` } as React.CSSProperties}
+      ref={containerRef}
+    >
+      <div className="snippet-inner bg-card flex w-full flex-row gap-2 rounded-lg p-4">
+        {language === 'bash' && (
+          <div className="text-body self-center font-mono font-light select-none">
+            {promptSymbol ?? '$'}
+          </div>
+        )}
+        {highlightedCodeState && (
+          <Pre
+            code={highlightedCodeState}
+            onClick={onSelectOrCopy}
+            className={cn(
+              'highlighted-code inline-flex w-fit self-center font-mono outline-none',
+              fontSizeMap[fontSize],
+              isMultiline && 'min-w-32',
+              snippetClassName
+            )}
+            onBeforeInput={handleBeforeInput}
+            showLineNumbers={showLineNumbers}
+          />
+        )}
+
+        {copyable && (
+          <div
+            className={cn(
+              'mr-1 ml-auto flex self-center text-white',
+              isMultiline && 'mt-1 h-4 w-6 self-start'
+            )}
+          >
+            <button
+              role="button"
+              aria-label="copy"
+              className="relative ml-2 border-none bg-transparent outline-none"
+              onClick={handleCopy}
+            >
+              <AnimatePresence mode="wait" initial={false}>
+                {copying ? (
+                  <motion.span
+                    key="checkmark"
+                    variants={copyIconVariants}
+                    initial="hidden"
+                    animate="visible"
+                    className="text-green-500"
+                  >
+                    <Icon name="check" stroke="currentColor" />
+                  </motion.span>
+                ) : (
+                  <motion.span
+                    key="copy"
+                    variants={copyIconVariants}
+                    initial="hidden"
+                    animate="visible"
+                    className="text-body-muted hover:text-body"
+                    exit="hidden"
+                  >
+                    <Icon name="copy" stroke="currentColor" />
+                  </motion.span>
+                )}
+              </AnimatePresence>
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/components/Combobox/index.tsx

@@ -0,0 +1,193 @@
+import * as React from 'react'
+import { Virtuoso } from 'react-virtuoso'
+import { cn } from '../../lib/utils'
+import { Button } from '../Button'
+import {
+  Command,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '../Command'
+import { Popover, PopoverContent, PopoverTrigger } from '../Popover'
+import { ButtonProps } from '../Button'
+import { Icon } from '../Icon'
+
+// I don't like that these aren't based on REM but I'm not sure how to fix it right now
+const COMBOBOX_CONFIG = {
+  heights: {
+    row: 32,
+    header: 28,
+    padding: 8,
+    max: 300,
+  },
+} as const
+
+export interface ComboboxOption<T extends string = string> {
+  value: T
+  label: string
+  disabled?: boolean
+}
+
+export interface ComboboxGroup<T extends string = string> {
+  label: string
+  options: ComboboxOption<T>[]
+}
+
+type ComboboxDataProps<T extends string = string> =
+  | { options: ComboboxOption<T>[]; groups?: never }
+  | { options?: never; groups: ComboboxGroup<T>[] }
+
+interface ComboboxBaseProps<T extends string = string> {
+  value: T
+  onValueChange: (value: T | undefined) => void
+  variant?: ButtonProps['variant']
+  size?: ButtonProps['size']
+  disabled?: boolean
+  loading?: boolean
+  error?: boolean
+  errorText?: string
+  searchable?: boolean
+  placeholder?: string
+  emptyText?: string
+  searchPlaceholder?: string
+  iconOnly?: boolean
+}
+
+export type ComboboxProps<T extends string = string> = ComboboxBaseProps<T> &
+  ComboboxDataProps<T>
+
+export function Combobox<T extends string = string>({
+  options,
+  groups,
+  value,
+  onValueChange,
+  variant = 'secondary',
+  size = 'md',
+  disabled,
+  loading,
+  error,
+  errorText = 'An error occurred',
+  searchable = true,
+  placeholder = 'Select option...',
+  emptyText = 'No option found.',
+  searchPlaceholder = 'Search...',
+  iconOnly = false,
+}: ComboboxProps<T>) {
+  const [open, setOpen] = React.useState(false)
+  const [search, setSearch] = React.useState('')
+
+  const allOptions = React.useMemo(() => {
+    if (options) return options
+    if (groups) return groups.flatMap((group) => group.options)
+    return []
+  }, [options, groups])
+
+  // TODO: Make the search more efficient and fuzzier
+  const filteredItems = React.useMemo(() => {
+    const items = groups || (options ? [{ label: '', options }] : [])
+    if (!search) return items
+
+    return items
+      .map((group) => ({
+        label: group.label,
+        options: group.options.filter((option) =>
+          option.label.toLowerCase().includes(search.toLowerCase())
+        ),
+      }))
+      .filter((group) => group.options.length > 0)
+  }, [search, options, groups])
+
+  const virtuosoHeight = React.useMemo(() => {
+    const { row, header, padding, max } = COMBOBOX_CONFIG.heights
+    const shouldShowHeaders = filteredItems.some((group) => group.label)
+    const headerHeight = shouldShowHeaders ? filteredItems.length * header : 0
+    const contentHeight = filteredItems.reduce(
+      (sum, group) => sum + group.options.length * row,
+      headerHeight
+    )
+
+    return Math.min(contentHeight + padding, max)
+  }, [filteredItems])
+
+  const handleSelect = React.useCallback(
+    (currentValue: string) => {
+      const newValue = currentValue === value ? undefined : (currentValue as T)
+      onValueChange?.(newValue)
+      setOpen(false)
+      setSearch('')
+    },
+    [value, onValueChange]
+  )
+
+  const selectedOption = allOptions.find((option) => option.value === value)
+
+  return (
+    <Popover open={open} onOpenChange={disabled ? undefined : setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant={variant}
+          size={size}
+          disabled={disabled}
+          aria-expanded={open}
+        >
+          {loading ? (
+            <div className="h-4 w-4 animate-spin">
+              <Icon name="loader-circle" />
+            </div>
+          ) : (
+            <div className="h-4 w-4 shrink-0 opacity-50">
+              <Icon name="chevrons-up-down" />
+            </div>
+          )}
+          {!iconOnly && <span>{selectedOption?.label || placeholder}</span>}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[200px] p-0">
+        <Command shouldFilter={false}>
+          {searchable && (
+            <CommandInput
+              value={search}
+              onValueChange={setSearch}
+              placeholder={searchPlaceholder}
+            />
+          )}
+          <CommandList>
+            {error ? (
+              <CommandItem disabled>{errorText}</CommandItem>
+            ) : filteredItems.length === 0 ? (
+              <CommandItem disabled>{emptyText}</CommandItem>
+            ) : (
+              <Virtuoso
+                style={{ height: virtuosoHeight }}
+                data={filteredItems}
+                itemContent={(_, group) => (
+                  <CommandGroup heading={group.label}>
+                    {group.options.map((option) => (
+                      <CommandItem
+                        key={option.value}
+                        value={option.value}
+                        onSelect={() => handleSelect(option.value)}
+                        disabled={option.disabled}
+                      >
+                        <div
+                          className={cn(
+                            'mr-2 h-4 w-4',
+                            value === option.value ? 'opacity-100' : 'opacity-0'
+                          )}
+                        >
+                          <Icon name="check" />
+                        </div>
+                        {option.label}
+                      </CommandItem>
+                    ))}
+                  </CommandGroup>
+                )}
+              />
+            )}
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  )
+}

package/src/components/Command/index.tsx

@@ -0,0 +1,152 @@
+'use client'
+
+import * as React from 'react'
+import { Command as CommandPrimitive } from 'cmdk'
+import { cn } from '../../lib/utils'
+import { Icon } from '../Icon'
+import { DialogContent } from '@radix-ui/react-dialog'
+import { DialogProps } from '@radix-ui/react-dialog'
+import { Dialog } from '../Dialog'
+
+const Command = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive
+    ref={ref}
+    className={cn(
+      'bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md',
+      className
+    )}
+    {...props}
+  />
+))
+Command.displayName = CommandPrimitive.displayName
+
+const CommandInput = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Input>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
+>(({ ...props }, ref) => (
+  <div className="flex items-center gap-2 border-b px-3" cmdk-input-wrapper="">
+    <Icon name="search" />
+    <CommandPrimitive.Input
+      ref={ref}
+      className={cn(
+        'placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none disabled:cursor-not-allowed disabled:opacity-50'
+      )}
+      {...props}
+    />
+  </div>
+))
+
+CommandInput.displayName = CommandPrimitive.Input.displayName
+
+const CommandList = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.List
+    ref={ref}
+    className={cn('max-h-[300px] overflow-x-hidden overflow-y-auto', className)}
+    {...props}
+  />
+))
+
+CommandList.displayName = CommandPrimitive.List.displayName
+
+const CommandEmpty = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Empty>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+>((props, ref) => (
+  <CommandPrimitive.Empty
+    ref={ref}
+    className="py-6 text-center text-sm"
+    {...props}
+  />
+))
+
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName
+
+const CommandGroup = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Group>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Group
+    ref={ref}
+    className={cn(
+      'text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium',
+      className
+    )}
+    {...props}
+  />
+))
+
+CommandGroup.displayName = CommandPrimitive.Group.displayName
+
+const CommandDialog = ({ children, ...props }: DialogProps) => {
+  return (
+    <Dialog {...props}>
+      <DialogContent className="overflow-hidden p-0 shadow-lg">
+        <Command className="[&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+const CommandSeparator = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Separator
+    ref={ref}
+    className={cn('bg-border -mx-1 h-px', className)}
+    {...props}
+  />
+))
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName
+
+const CommandItem = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Item
+    ref={ref}
+    className={cn(
+      'data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+      className
+    )}
+    {...props}
+  />
+))
+
+CommandItem.displayName = CommandPrimitive.Item.displayName
+
+const CommandShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        'text-muted-foreground ml-auto text-xs tracking-widest',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+CommandShortcut.displayName = 'CommandShortcut'
+
+export {
+  Command,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+  CommandDialog,
+}

package/src/components/Container/index.tsx

@@ -0,0 +1,31 @@
+import { paddingMapper } from '../../lib/responsiveMappers'
+import { cn, getResponsiveClasses } from '../../lib/utils'
+import { Padding, ResponsiveValue } from '../../types'
+import { ReactNode } from 'react'
+
+export interface ContainerProps {
+  children: ReactNode
+  flex?: boolean
+  padding?: ResponsiveValue<Padding>
+  className?: string
+}
+
+export function Container({
+  children,
+  flex = false,
+  padding,
+  className,
+}: ContainerProps) {
+  return (
+    <div
+      className={cn(
+        'container h-full w-full md:mx-auto',
+        flex && 'flex',
+        padding && getResponsiveClasses(padding, paddingMapper),
+        className
+      )}
+    >
+      {children}
+    </div>
+  )
+}