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

package/src/context/ModalContext.tsx

@@ -0,0 +1,118 @@
+import { createContext, useState, type ReactNode } from 'react'
+
+export type Screen = {
+  id: string
+  title: string
+  component: ReactNode
+}
+
+type ModalContextType = {
+  screens: Screen[]
+  currentIndex: number
+  isOpen: boolean
+  openScreen: (screen: Screen) => void
+  close: () => void
+  navigateTo: (index: number) => void
+  pushScreen: (screen: Screen) => void
+  popScreen: () => void
+  navigationDirection: 'forward' | 'backward'
+}
+
+// eslint-disable-next-line react-refresh/only-export-components
+export const ModalContext = createContext<ModalContextType | undefined>(
+  undefined
+)
+
+export function ModalProvider({
+  children,
+}: {
+  children: ReactNode | ((props: ModalContextType) => ReactNode)
+}) {
+  const [screens, setScreens] = useState<Screen[]>([])
+  const [currentIndex, setCurrentIndex] = useState(0)
+  const [isOpen, setIsOpen] = useState(false)
+  const [navigationDirection, setNavigationDirection] = useState<
+    'forward' | 'backward'
+  >('forward')
+
+  const openScreen = (screen: Screen) => {
+    // Don't reopen if already open to prevent infinite loops
+    if (!isOpen) {
+      setScreens([screen])
+      setCurrentIndex(0)
+      setIsOpen(true)
+      setNavigationDirection('forward')
+    }
+  }
+
+  const close = () => {
+    setIsOpen(false)
+    // Reset after animation completes
+    setTimeout(() => {
+      setScreens([])
+      setCurrentIndex(0)
+    }, 200)
+  }
+
+  const navigateTo = (index: number) => {
+    setScreens((prevScreens) => {
+      if (index >= 0 && index < prevScreens.length) {
+        setNavigationDirection(index > currentIndex ? 'forward' : 'backward')
+        setCurrentIndex(index)
+      }
+      return prevScreens
+    })
+  }
+
+  const pushScreen = (screen: Screen) => {
+    setScreens((prev) => {
+      const newScreens = [...prev, screen]
+      setCurrentIndex(newScreens.length - 1)
+      return newScreens
+    })
+    setNavigationDirection('forward')
+  }
+
+  const popScreen = () => {
+    setScreens((prev) => {
+      if (prev.length > 1) {
+        setNavigationDirection('backward')
+        setCurrentIndex((idx) => idx - 1)
+        return prev.slice(0, prev.length - 1)
+      } else {
+        close()
+        return prev
+      }
+    })
+  }
+
+  return (
+    <ModalContext.Provider
+      value={{
+        screens,
+        currentIndex,
+        isOpen,
+        openScreen,
+        close,
+        navigateTo,
+        pushScreen,
+        popScreen,
+        navigationDirection,
+      }}
+    >
+      {typeof children === 'function'
+        ? children({
+            screens,
+            currentIndex,
+            isOpen,
+            openScreen,
+            close,
+            navigateTo,
+            pushScreen,
+            popScreen,
+            navigationDirection,
+          })
+        : children}
+    </ModalContext.Provider>
+  )
+}

package/src/context/theme.ts

@@ -0,0 +1 @@
+export type Theme = 'light' | 'dark'

package/src/hooks/useAppLayout.ts

@@ -0,0 +1,10 @@
+import { useContext } from 'react'
+import { AppLayoutContext } from '../components/AppLayout/context'
+
+export const useAppLayout = () => {
+  const context = useContext(AppLayoutContext)
+  if (!context) {
+    throw new Error('useAppLayout must be used within an AppLayoutProvider')
+  }
+  return context
+}

package/src/hooks/useConfig.ts

@@ -0,0 +1,10 @@
+import { useContext } from 'react'
+import { ConfigContext, ConfigContextType } from '../context/ConfigContext'
+
+export function useConfig(): ConfigContextType {
+  const context = useContext(ConfigContext)
+  if (!context) {
+    throw new Error('useConfig must be used within a MoonshineConfigProvider')
+  }
+  return context
+}

package/src/hooks/useIsMounted.ts

@@ -0,0 +1,13 @@
+import { useEffect, useState } from 'react'
+
+export const useIsMounted = () => {
+  const [isMounted, setIsMounted] = useState(false)
+
+  useEffect(() => {
+    setIsMounted(true)
+
+    return () => setIsMounted(false)
+  }, [])
+
+  return isMounted
+}

package/src/hooks/useModal.tsx

@@ -0,0 +1,10 @@
+import { useContext } from 'react'
+import { ModalContext } from '../context/ModalContext'
+
+export function useModal() {
+  const context = useContext(ModalContext)
+  if (context === undefined) {
+    throw new Error('useModal must be used within a ModalProvider')
+  }
+  return context
+}

package/src/hooks/useTailwindBreakpoint.ts

@@ -0,0 +1,47 @@
+import { useState, useLayoutEffect } from 'react'
+import { Breakpoint } from '../types.js'
+import debounce from '../lib/debounce'
+
+// Define breakpoints in pixels matching Tailwind's default breakpoints
+const breakpointValues = {
+  xs: 0, // Default/mobile first
+  sm: 640, // @media (min-width: 640px)
+  md: 768, // @media (min-width: 768px)
+  lg: 1024, // @media (min-width: 1024px)
+  xl: 1280, // @media (min-width: 1280px)
+  '2xl': 1536, // @media (min-width: 1536px)
+} as const
+
+const getBreakpoint = (width: number): Breakpoint => {
+  const breakpoints = Object.entries(breakpointValues).sort(
+    (a, b) => b[1] - a[1]
+  )
+
+  for (const [key, minWidth] of breakpoints) {
+    if (width >= minWidth) {
+      return key as Breakpoint
+    }
+  }
+
+  return 'xs'
+}
+
+const useTailwindBreakpoint = (): Breakpoint => {
+  const [breakpoint, setBreakpoint] = useState<Breakpoint>(
+    getBreakpoint(window.innerWidth)
+  )
+
+  useLayoutEffect(() => {
+    const handleResize = debounce(() => {
+      const newBreakpoint = getBreakpoint(window.innerWidth)
+      setBreakpoint(newBreakpoint)
+    }, 100)
+    window.addEventListener('resize', handleResize)
+    handleResize()
+    return () => window.removeEventListener('resize', handleResize)
+  }, [])
+
+  return breakpoint
+}
+
+export default useTailwindBreakpoint

package/src/hooks/useTheme.ts

@@ -0,0 +1,13 @@
+import { useConfig } from './useConfig'
+
+export type Theme = 'dark' | 'light'
+
+/**
+ * Hook to get the current theme (light or dark) from the tailwind class element.
+ * @deprecated get the theme from useMoonshineConfig
+ */
+export function useTheme() {
+  const { theme } = useConfig()
+
+  return theme
+}

package/src/index.ts

@@ -0,0 +1,234 @@
+import './global.css'
+
+export { isGroupOf } from './lib/typeUtils'
+export { Grid, type GridProps } from './components/Grid'
+export { Stack, type StackProps } from './components/Stack'
+export { Button, type ButtonProps } from './components/Button'
+export { Card, type CardProps } from './components/Card'
+export { Icon, type IconProps } from './components/Icon'
+export { isIconName } from './components/Icon/isIconName'
+export { type IconName } from './components/Icon/names'
+export { Separator, type SeparatorProps } from './components/Separator'
+export { Skeleton, type SkeletonProps } from './components/Skeleton'
+export { Badge, type BadgeProps } from './components/Badge'
+export { Heading, type HeadingProps } from './components/Heading'
+export { Text, type TextProps } from './components/Text'
+export { Score, type ScoreValue } from './components/Score'
+export { Logo, type LogoProps } from './components/Logo'
+export { AnimatedLogo } from './components/Logo/Animated'
+export { Container, type ContainerProps } from './components/Container'
+export { Combobox, type ComboboxProps } from './components/Combobox'
+export {
+  TargetLanguageIcon,
+  type TargetLanguageIconProps,
+} from './components/TargetLanguageIcon'
+export { UserAvatar, type UserAvatarProps } from './components/UserAvatar'
+export { Subnav, type SubnavItem, type SubnavProps } from './components/Subnav'
+export { CodeSnippet, type CodeSnippetProps } from './components/CodeSnippet'
+export { Pre, type PreProps } from './components/CodeHighlight/Pre'
+export {
+  highlightCode,
+  getMappedLanguage,
+  isProgrammingLanguage,
+  removeCodeHikeAnnotations,
+  LIGHT_THEME,
+  DARK_THEME,
+  type HighlightedCode,
+  type CodeLine,
+  type CodeToken,
+} from './lib/codeUtils'
+export {
+  LoggedInUserMenu,
+  type LoggedInUserProps,
+} from './components/LoggedInUserMenu'
+export {
+  PromptInput,
+  type PromptInputProps,
+  type Suggestion,
+  type Attachment,
+} from './components/PromptInput'
+export {
+  WorkspaceSelector,
+  type Org,
+  type Workspace,
+  type WorkspaceSelectorProps,
+} from './components/WorkspaceSelector'
+export { Wizard, type WizardProps } from './components/Wizard'
+export { type WizardStep, type WizardCommand } from './components/Wizard/types'
+export {
+  MoonshineConfigProvider,
+  type MoonshineConfigProviderProps,
+} from './context/ConfigContext'
+export { useConfig as useMoonshineConfig } from './hooks/useConfig'
+export { useTheme as useMoonshineTheme, type Theme } from './hooks/useTheme'
+export { default as useTailwindBreakpoint } from './hooks/useTailwindBreakpoint'
+export {
+  GradientCircle,
+  type GradientCircleProps,
+} from './components/GradientCircle'
+export { Alert, type AlertProps } from './components/Alert'
+export { Tabs, type TabProps } from './components/Tabs'
+export {
+  Table,
+  type TableProps,
+  type Column,
+  type Group,
+} from './components/Table'
+export { Input, type InputProps } from './components/Input'
+export {
+  type SupportedLanguage,
+  supportedLanguages,
+  isSupportedLanguage,
+} from './types'
+export { PageHeader, type PageHeaderProps } from './components/PageHeader'
+
+export { ExternalPill, type ExternalPillProps } from './components/ExternalPill'
+export {
+  LanguageIndicator,
+  type LanguageIndicatorProps,
+} from './components/LanguageIndicator'
+export {
+  PullRequestLink,
+  type PullRequestLinkProps,
+} from './components/PullRequestLink'
+export {
+  Select,
+  SelectGroup,
+  SelectItem,
+  SelectContent,
+  SelectTrigger,
+  SelectValue,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+} from './components/Select'
+export {
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+  TooltipProvider,
+  TooltipPortal,
+} from './components/Tooltip'
+export {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+  PopoverAnchor,
+  PopoverPortal,
+} from './components/Popover'
+export { Facepile, type FacepileProps } from './components/Facepile'
+export { Link, type LinkProps } from './components/Link'
+export { Dialog } from './components/Dialog'
+export { Switch, type SwitchProps } from './components/Switch'
+export { SegmentedButton } from './components/SegmentedButton'
+// AppLayout
+export {
+  AppLayout,
+  type AppLayoutNavItemProps,
+  type AppLayoutNavItemGroupProps,
+  type AppLayoutBreadcrumbItemProps,
+} from './components/AppLayout'
+export { AppLayoutProvider } from './components/AppLayout/provider'
+export { useAppLayout } from './hooks/useAppLayout'
+
+export { ActionBar, type ActionBarProps } from './components/ActionBar'
+export {
+  Key,
+  type KeyProps,
+  KeyHint,
+  type KeyHintProps,
+} from './components/KeyHint'
+export {
+  HighlightedText,
+  type HighlightedTextProps,
+} from './components/HighlightedText'
+export {
+  DragNDropArea,
+  type DragNDropAreaProps,
+} from './components/DragNDrop/DragNDropArea'
+export { DragOverlay } from './components/DragNDrop/DragOverlay'
+export {
+  Draggable,
+  type DraggableProps,
+} from './components/DragNDrop/Draggable'
+export {
+  Droppable,
+  type DroppableProps,
+} from './components/DragNDrop/Droppable'
+export {
+  ResizablePanel,
+  type ResizablePanelProps,
+} from './components/ResizablePanel'
+export {
+  CodePlayground,
+  type CodePlaygroundProps,
+  type CodePlaygroundSnippets,
+} from './components/CodePlayground'
+export {
+  CodeEditor,
+  type CodeEditorLayoutProps,
+} from './components/CodeEditorLayout'
+export {
+  Command,
+  CommandGroup,
+  CommandItem,
+  CommandEmpty,
+  CommandInput,
+  CommandList,
+  CommandSeparator,
+  CommandShortcut,
+  CommandDialog,
+} from './components/Command'
+export {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuGroup,
+  DropdownMenuTrigger,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+} from './components/Dropdown'
+
+// ContextDropdown
+export { ContextDropdown } from './components/ContextDropdown'
+export { ModalProvider } from './context/ModalContext'
+export { useModal } from './hooks/useModal'
+
+// Modal
+export { Modal, type ModalProps } from './components/Modal'
+
+export {
+  ThemeSwitcher,
+  type ThemeSwitcherProps,
+} from './components/ThemeSwitcher'
+
+export { cn } from './lib/utils'
+
+// Timeline
+export { Timeline } from './components/Timeline'
+
+/** START BETA COMPONENTS */
+import { CLIWizard } from './components/__beta__/CLIWizard'
+
+export const beta = {
+  // TODO: This component is not yet reusable, it's only for use on the SDK Overview page right now
+  // TODO: needs light mode tweaks too.
+  CLIWizard,
+}
+// DO NOT USE: EXPORTED TO UNBLOCK GRAM
+export {
+  AIChatContainer,
+  AIChatMessage,
+  AIChatMessageComposer,
+} from './components/AIChat'
+export { useToolCallApproval } from './components/AIChat/toolCallApproval'
+
+/** END BETA COMPONENTS */

package/src/lib/assert.ts

@@ -0,0 +1,9 @@
+export function assertNever(value: unknown): never {
+  throw new Error(`Unhandled value: ${JSON.stringify(value)}`)
+}
+
+export function assert(condition: boolean, message: string): asserts condition {
+  if (!condition) {
+    throw new Error(message)
+  }
+}

package/src/lib/codeUtils.ts

@@ -0,0 +1,177 @@
+import { codeToTokens, BundledLanguage, BundledTheme } from 'shiki'
+import { ProgrammingLanguage, SupportedLanguage } from '../types'
+
+export const LIGHT_THEME = 'github-light' as const
+export const DARK_THEME = 'github-dark' as const
+
+export interface CodeToken {
+  content: string
+  color?: string
+  fontStyle?: number
+}
+
+export interface CodeLine {
+  tokens: CodeToken[]
+}
+
+export interface HighlightedCode {
+  lines: CodeLine[]
+  code: string
+  lang: string
+}
+
+/**
+ * Highlights code using Shiki
+ */
+export async function highlightCode(
+  code: string,
+  language: SupportedLanguage | string,
+  theme: BundledTheme = LIGHT_THEME
+): Promise<HighlightedCode> {
+  // Clean the code by removing annotations
+  const cleanCode = removeCodeHikeAnnotations(code)
+
+  const lang = isProgrammingLanguage(language)
+    ? getMappedLanguage(language)
+    : (language as BundledLanguage)
+
+  try {
+    const tokens = await codeToTokens(cleanCode, {
+      lang,
+      theme,
+    })
+
+    const lines: CodeLine[] = tokens.tokens.map((line) => ({
+      tokens: line.map((token) => ({
+        content: token.content,
+        color: token.color,
+        fontStyle: token.fontStyle,
+      })),
+    }))
+
+    return {
+      lines,
+      code: cleanCode,
+      lang,
+    }
+  } catch (error) {
+    // Only log errors outside of test environment
+    if (!process.env.VITEST && !process.env.NODE_ENV?.includes('test')) {
+      console.error('Error highlighting code:', error)
+    }
+    // Fallback to plain text
+    return {
+      lines: cleanCode.split('\n').map((line) => ({
+        tokens: [{ content: line || '\n' }],
+      })),
+      code: cleanCode,
+      lang,
+    }
+  }
+}
+
+/**
+ * Maps language identifiers to their proper syntax highlighting aliases
+ */
+export function getMappedLanguage(
+  language: ProgrammingLanguage | SupportedLanguage
+): BundledLanguage {
+  switch (language) {
+    case 'javascript':
+      return 'js'
+    case 'typescript':
+      return 'ts'
+    case 'python':
+      return 'py'
+    case 'bash':
+      return 'bash'
+    case 'json':
+      return 'json'
+    case 'go':
+      return 'go'
+    case 'dotnet':
+    case 'csharp':
+      return 'csharp'
+    case 'java':
+      return 'java'
+    case 'ruby':
+      return 'ruby'
+    case 'php':
+      return 'php'
+    case 'swift':
+      return 'swift'
+    case 'terraform':
+      return 'hcl'
+    default:
+      return language as BundledLanguage
+  }
+}
+
+/**
+ * Helper to check if a language is in our supported set
+ */
+export function isProgrammingLanguage(
+  language: string
+): language is ProgrammingLanguage {
+  return [
+    'javascript',
+    'typescript',
+    'python',
+    'bash',
+    'json',
+    'go',
+    'dotnet',
+    'csharp',
+    'java',
+    'ruby',
+    'php',
+    'swift',
+    'terraform',
+  ].includes(language)
+}
+
+const ANNOTATION_TYPES = [
+  'callout',
+  'className',
+  'hover',
+  'collapse',
+  'diff',
+  'focus',
+  'fold',
+  'link',
+  'mark',
+  'tooltip',
+]
+
+const ANNOTATION_REGEX = new RegExp(
+  `^\\s*#\\s*!(${ANNOTATION_TYPES.join('|')})(\\s*$begin:math:text$[^)]*\\$end:math:text$)?.*$`
+)
+
+/**
+ * Removes CodeHike annotations from the code
+ * Useful for copying code / excluding annotations from clipboard
+ * @param code - The code string containing CodeHike annotations
+ * @returns Clean code string without annotations
+ */
+export function removeCodeHikeAnnotations(code: string): string {
+  const lines = code.split('\n')
+  const result: string[] = []
+  let skipEmpty = false
+
+  for (const line of lines) {
+    if (ANNOTATION_REGEX.test(line)) {
+      skipEmpty = true
+      continue
+    }
+
+    if (line.trim() === '' && skipEmpty) {
+      skipEmpty = false
+      continue
+    }
+
+    result.push(line)
+    skipEmpty = false
+  }
+
+  return result.join('\n')
+}

package/src/lib/debounce.ts

@@ -0,0 +1,9 @@
+// eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
+export default function debounce(func: Function, wait: number) {
+  let timeout: ReturnType<typeof setTimeout>
+
+  return (...args: unknown[]) => {
+    clearTimeout(timeout)
+    timeout = setTimeout(() => func(...args), wait)
+  }
+}