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

package/src/components/Table/styles.module.css

@@ -0,0 +1,25 @@
+.table {
+  --table-cell-padding: var(--cell-padding-block, 0.75rem)
+    var(--cell-padding-inline, 1rem);
+
+  /* Density modes: condensed, normal, spacious */
+  &:where([data-cell-padding='condensed']) {
+    --cell-padding-block: 0.5rem;
+    --cell-padding-inline: 0.75rem;
+  }
+
+  &:where([data-cell-padding='normal']) {
+    --cell-padding-block: 0.75rem;
+    --cell-padding-inline: 1rem;
+  }
+
+  &:where([data-cell-padding='spacious']) {
+    --cell-padding-block: 1rem;
+    --cell-padding-inline: 1.25rem;
+  }
+}
+
+.tableHeader,
+.tableCell {
+  padding: var(--table-cell-padding);
+}

package/src/components/Tabs/index.tsx

@@ -0,0 +1,87 @@
+import { cn } from '../../lib/utils'
+import React, { ReactElement, useEffect, useState } from 'react'
+
+export interface TabProps<I extends string> {
+  children: React.ReactNode
+  active?: boolean
+  id: I
+  onClick?: () => void
+  className?: string
+}
+
+const Tab = function Tab<I extends string>({
+  children,
+  active,
+  onClick,
+  className,
+}: TabProps<I>) {
+  return (
+    <div
+      className={cn(
+        'text-body mb-[-1px] cursor-pointer px-4 py-2 text-sm',
+        active &&
+          'bg-background text-foreground rounded-t-lg border-t border-r border-l',
+        className
+      )}
+      onClick={onClick}
+    >
+      {children}
+    </div>
+  )
+}
+
+export interface TabsProps<I extends string> {
+  children: Array<ReactElement<TabProps<I>>>
+  selectedTab: I
+  onTabChange: (identifier: I) => void
+  className?: string
+}
+
+type TypeWithDisplayName = {
+  displayName?: string
+}
+
+export function Tabs<I extends string>({
+  children,
+  selectedTab,
+  onTabChange,
+  className,
+}: TabsProps<I>) {
+  const [activeTab, setActiveTab] = useState<I>(
+    selectedTab || children[0].props.id
+  )
+
+  useEffect(() => {
+    setActiveTab(selectedTab || children[0].props.id)
+  }, [selectedTab])
+
+  const validChildren = React.Children.toArray(children).filter(
+    (child) =>
+      React.isValidElement(child) &&
+      (child.type as TypeWithDisplayName).displayName === 'Tabs.Tab'
+  ) as Array<React.ReactElement<TabProps<I>>>
+
+  return (
+    <div
+      className={cn(
+        'border-border flex flex-row justify-start gap-2 border-b select-none',
+        className
+      )}
+    >
+      {React.Children.map(validChildren, (child) => {
+        return React.cloneElement(child, {
+          ...child.props,
+          active: child.props.id === activeTab,
+          onClick: () => {
+            setActiveTab(child.props.id)
+            child.props.onClick?.()
+            onTabChange?.(child.props.id)
+          },
+        })
+      })}
+    </div>
+  )
+}
+
+Tab.displayName = 'Tabs.Tab'
+Tabs.Tab = Tab

package/src/components/TargetLanguageIcon/index.tsx

@@ -0,0 +1,84 @@
+import { Size } from '../../types'
+import { SupportedLanguage } from '../../types'
+
+import TypeScriptIcon from '../../assets/icons/languages/typescript.svg?react'
+import GoIcon from '../../assets/icons/languages/go.svg?react'
+import JavaIcon from '../../assets/icons/languages/java.svg?react'
+import PythonIcon from '../../assets/icons/languages/python.svg?react'
+import CSharpIcon from '../../assets/icons/languages/csharp.svg?react'
+import TerraformIcon from '../../assets/icons/languages/terraform.svg?react'
+import UnityIcon from '../../assets/icons/languages/unity.svg?react'
+import PhpIcon from '../../assets/icons/languages/php.svg?react'
+import SwiftIcon from '../../assets/icons/languages/swift.svg?react'
+import RubyIcon from '../../assets/icons/languages/ruby.svg?react'
+import PostmanIcon from '../../assets/icons/languages/postman.svg?react'
+import JSONIcon from '../../assets/icons/languages/json.svg?react'
+import { cn } from '../../lib/utils'
+
+const sizeMap: Record<Size, number> = {
+  small: 32,
+  medium: 40,
+  large: 48,
+  xl: 64,
+  '2xl': 80,
+}
+
+const iconSizeMap: Record<Size, number> = {
+  small: 16,
+  medium: 24,
+  large: 32,
+  xl: 48,
+  '2xl': 64,
+}
+
+const icons: Record<
+  SupportedLanguage,
+  React.FC<React.SVGProps<SVGSVGElement>>
+> = {
+  typescript: TypeScriptIcon,
+  go: GoIcon,
+  java: JavaIcon,
+  python: PythonIcon,
+  csharp: CSharpIcon,
+  terraform: TerraformIcon,
+  unity: UnityIcon,
+  php: PhpIcon,
+  swift: SwiftIcon,
+  ruby: RubyIcon,
+  postman: PostmanIcon,
+  json: JSONIcon,
+}
+
+export interface TargetLanguageIconProps {
+  language: SupportedLanguage
+  size?: Size
+  className?: string
+}
+
+export function TargetLanguageIcon({
+  language,
+  size = 'medium',
+  className,
+}: TargetLanguageIconProps) {
+  const IconComponent = icons[language]
+
+  return (
+    <div
+      className={cn(
+        'bg-background/50 flex items-center justify-center rounded-lg border p-2',
+        className
+      )}
+      style={{
+        width: sizeMap[size],
+        height: sizeMap[size],
+      }}
+    >
+      <IconComponent
+        style={{
+          width: iconSizeMap[size],
+          height: iconSizeMap[size],
+        }}
+      />
+    </div>
+  )
+}

package/src/components/Text/index.tsx

@@ -0,0 +1,59 @@
+import { cn } from '../../lib/utils'
+import { ReactNode } from 'react'
+
+export type TextVariant = 'lg' | 'md' | 'sm' | 'xs'
+type TextElement = 'p' | 'span' | 'div' | 'label'
+type TextWhitespace = 'normal' | 'nowrap'
+
+export type TextProps = {
+  children: ReactNode
+  variant?: TextVariant
+  muted?: boolean
+  whiteSpace?: TextWhitespace
+  className?: string
+} & (
+  | {
+      as?: Exclude<TextElement, 'label'>
+      htmlFor?: never
+    }
+  | {
+      as: 'label'
+      htmlFor?: string
+    }
+)
+
+const variantStyles: Record<TextVariant, string> = {
+  lg: 'text-body-lg',
+  md: 'text-body-md',
+  sm: 'text-body-sm',
+  xs: 'text-body-xs',
+}
+
+const whitespaceStyles: Record<TextWhitespace, string> = {
+  normal: 'whitespace-normal',
+  nowrap: 'whitespace-nowrap',
+}
+
+export function Text({
+  children,
+  variant = 'md',
+  as: Component = 'span',
+  muted = false,
+  whiteSpace = 'normal',
+  className,
+  htmlFor,
+}: TextProps) {
+  return (
+    <Component
+      htmlFor={htmlFor}
+      className={cn(
+        variantStyles[variant],
+        whitespaceStyles[whiteSpace],
+        muted ? 'text-muted' : 'text-default',
+        className
+      )}
+    >
+      {children}
+    </Component>
+  )
+}

package/src/components/ThemeSwitcher/index.tsx

@@ -0,0 +1,118 @@
+'use client'
+
+import { ReactNode, useId, useMemo } from 'react'
+import { cn } from '../../lib/utils'
+import { Moon, Sun } from 'lucide-react'
+import { useIsMounted } from '../../hooks/useIsMounted'
+import { useConfig } from '../../hooks/useConfig'
+import { Theme } from '../../context/theme'
+import { motion } from 'motion/react'
+
+const THEMES: { key: Theme; icon: ReactNode }[] = [
+  { key: 'light', icon: <Sun /> },
+  { key: 'dark', icon: <Moon /> },
+]
+
+export interface ThemeSwitcherProps {
+  onThemeSwitch?: (theme: string) => void
+  className?: string
+  orientation?: 'horizontal' | 'vertical'
+}
+
+export function ThemeSwitcher({
+  className,
+  onThemeSwitch,
+  orientation = 'horizontal',
+}: ThemeSwitcherProps) {
+  const isMounted = useIsMounted()
+  const { theme, setTheme } = useConfig()
+  const rId = useId()
+
+  const posX = useMemo(() => {
+    const themeIndex = THEMES.findIndex((opt) => opt.key === theme)
+    return 100 * themeIndex
+  }, [theme])
+
+  const isVertical = orientation === 'vertical'
+  const knobSizeRem = 2.125
+  const placeholderStyle = isVertical
+    ? {
+        width: `${knobSizeRem}rem`,
+        height: `calc(${knobSizeRem}rem * ${THEMES.length} + 2px)`,
+      }
+    : {
+        width: `calc(${knobSizeRem}rem * ${THEMES.length} + 2px)`,
+        height: `${knobSizeRem}rem`,
+      }
+
+  if (!isMounted) return <div style={placeholderStyle} />
+
+  return (
+    <div className="relative h-fit w-fit overflow-hidden rounded-full border border-neutral-300 bg-neutral-100 p-0 dark:border-neutral-800/30 dark:bg-neutral-900">
+      <fieldset
+        className={cn(
+          'group m-0 flex',
+          isVertical ? 'flex-col items-stretch' : 'flex-row items-center',
+          className
+        )}
+      >
+        <legend className="sr-only">Select a display theme:</legend>
+        {THEMES.map(({ key, icon }) => {
+          const checked = key === theme
+          const id = `theme-toggle-${key}-${rId}`
+          return (
+            <span key={key} className="h-full">
+              <input
+                tabIndex={checked ? -1 : 0}
+                className="peer absolute appearance-none outline-0"
+                aria-label={key}
+                checked={checked}
+                id={id}
+                onChange={(): void => {
+                  setTheme(key)
+                  onThemeSwitch?.(key)
+                }}
+                type="radio"
+                value={key}
+                suppressHydrationWarning
+              />
+              <label
+                className={cn(
+                  // Base
+                  'text-foreground relative flex size-[2.125rem] cursor-pointer items-center justify-center rounded-full opacity-50 transition-opacity duration-300 dark:text-neutral-300 dark:opacity-70',
+                  // Checked
+                  'peer-checked:cursor-default peer-checked:!opacity-100',
+                  // Hover
+                  'peer-interact:!opacity-100',
+                  // Focus
+                  'peer-focus-visible:ring-foreground peer-checked:!inset-ring-0 peer-focus-visible:inset-ring-2',
+                  // Icon
+                  'relative z-[1] [&_svg]:size-4 [&_svg]:text-current'
+                )}
+                htmlFor={id}
+              >
+                <span className="sr-only">{key}</span>
+                {icon}
+              </label>
+            </span>
+          )
+        })}
+      </fieldset>
+      <motion.div
+        initial={{
+          transform: isVertical
+            ? `translateY(${posX}%)`
+            : `translateX(${posX}%)`,
+        }}
+        animate={{
+          transform: isVertical
+            ? `translateY(${posX}%)`
+            : `translateX(${posX}%)`,
+        }}
+        transition={{ type: 'spring', duration: 0.7, bounce: 0.3 }}
+        className="absolute top-0 left-0 z-[10] size-[2.125rem] rounded-full shadow-[0px_0px_4px_0px_rgba(0,0,0,0.10),0px_2px_1px_0px_#FFF_inset,0px_-2px_1px_0px_rgba(0,0,0,0.05)_inset] dark:shadow-[0px_2px_4px_0px_rgba(0,0,0,0.60),0px_2px_1px_0px_#282828_inset,0px_-2px_1px_0px_rgba(0,0,0,0.05)_inset]"
+        suppressHydrationWarning
+      />
+    </div>
+  )
+}

package/src/components/Timeline/index.tsx

@@ -0,0 +1,290 @@
+'use client'
+
+import React, {
+  useLayoutEffect,
+  useRef,
+  useState,
+  isValidElement,
+  cloneElement,
+  Children,
+} from 'react'
+import type { ReactNode } from 'react'
+import { cn } from '../../lib/utils'
+import { Text } from '../Text'
+import { Heading } from '../Heading'
+
+const TIMELINE_STYLES = {
+  line: 'bg-surface-tertiary-default',
+  iconContainer:
+    'relative z-10 flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full',
+  iconBackground:
+    'bg-surface-primary-default border-border-neutral-softest absolute inset-0 rounded-full border-2 transition-all duration-300',
+  iconContent: 'relative z-10 flex h-full w-full items-center justify-center',
+  iconIcon:
+    'text-muted flex items-center justify-center transition-colors duration-300 [&>svg]:h-4 [&>svg]:w-4',
+  iconNumber: 'text-muted text-sm font-medium transition-colors duration-300',
+  transition: 'transition-opacity duration-300',
+} as const
+
+export interface TimelineItemProps {
+  icon?: ReactNode
+  children: ReactNode
+  className?: string
+  index?: number
+  isLast?: boolean
+  setsize?: number
+}
+
+function TimelineItem({
+  icon,
+  children,
+  className,
+  index = 0,
+  isLast = false,
+  setsize,
+}: TimelineItemProps) {
+  const enhancedChildren = Children.map(children, (child) => {
+    if (isValidElement(child) && child.type === TimelineContent) {
+      return cloneElement(child, {
+        ...child.props,
+        isLast,
+      })
+    }
+    return child
+  })
+
+  return (
+    <li
+      className={cn('relative flex items-start gap-4', className)}
+      data-timeline-item
+      aria-posinset={index + 1}
+      aria-setsize={setsize}
+    >
+      <div className={TIMELINE_STYLES.iconContainer}>
+        <div className={TIMELINE_STYLES.iconBackground} />
+        <div className={TIMELINE_STYLES.iconContent}>
+          {icon ? (
+            <div className={TIMELINE_STYLES.iconIcon}>{icon}</div>
+          ) : (
+            <div className={TIMELINE_STYLES.iconNumber}>{index + 1}</div>
+          )}
+        </div>
+      </div>
+
+      {enhancedChildren}
+    </li>
+  )
+}
+
+export interface TimelineContentProps {
+  children: ReactNode
+  className?: string
+  isLast?: boolean
+}
+
+function TimelineContent({
+  children,
+  className,
+  isLast,
+}: TimelineContentProps) {
+  const childrenArray = Children.toArray(children)
+  let titleElement: React.ReactNode = null
+  let timestampElement: React.ReactNode = null
+  const otherChildren: React.ReactNode[] = []
+
+  childrenArray.forEach((child) => {
+    if (isValidElement(child)) {
+      if (child.type === TimelineTitle) {
+        titleElement = child
+      } else if (child.type === TimelineTimestamp) {
+        timestampElement = child
+      } else {
+        otherChildren.push(child)
+      }
+    } else {
+      otherChildren.push(child)
+    }
+  })
+
+  return (
+    <div
+      className={cn('min-w-0 flex-1', !isLast && 'pb-6', className)}
+      data-testid={isLast ? 'timeline-content-last' : 'timeline-content'}
+    >
+      {(titleElement || timestampElement) && (
+        <div className="mb-1 flex items-start justify-between gap-4">
+          <div className="min-w-0 flex-1">{titleElement}</div>
+          {timestampElement && (
+            <div className="flex-shrink-0">{timestampElement}</div>
+          )}
+        </div>
+      )}
+      {otherChildren.length > 0 && (
+        <div className="space-y-1">{otherChildren}</div>
+      )}
+    </div>
+  )
+}
+
+export interface TimelineTitleProps {
+  children: ReactNode
+  className?: string
+  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div'
+}
+
+function TimelineTitle({
+  children,
+  className,
+  as = 'div',
+}: TimelineTitleProps) {
+  if (as === 'div') {
+    return (
+      <div
+        className={cn('text-heading-xs', TIMELINE_STYLES.transition, className)}
+      >
+        {children}
+      </div>
+    )
+  }
+
+  return (
+    <Heading
+      variant="xs"
+      as={as}
+      className={cn(TIMELINE_STYLES.transition, className)}
+    >
+      {children}
+    </Heading>
+  )
+}
+
+export interface TimelineDescriptionProps {
+  children: ReactNode
+  className?: string
+}
+
+function TimelineDescription({
+  children,
+  className,
+}: TimelineDescriptionProps) {
+  return (
+    <Text
+      variant="sm"
+      muted
+      className={cn('leading-relaxed', TIMELINE_STYLES.transition, className)}
+    >
+      {children}
+    </Text>
+  )
+}
+
+export interface TimelineTimestampProps {
+  children: ReactNode
+  className?: string
+}
+
+function TimelineTimestamp({ children, className }: TimelineTimestampProps) {
+  return (
+    <Text
+      variant="xs"
+      muted
+      className={cn(TIMELINE_STYLES.transition, className)}
+    >
+      {children}
+    </Text>
+  )
+}
+
+export interface TimelineSeparatorProps {
+  className?: string
+}
+
+export interface TimelineRootProps {
+  children: ReactNode
+  className?: string
+  hasMore?: boolean
+}
+
+function TimelineRoot({
+  children,
+  className,
+  hasMore = false,
+}: TimelineRootProps) {
+  const childrenArray = Children.toArray(children)
+  const itemsOnly = childrenArray.filter(
+    (child) => isValidElement(child) && child.type === TimelineItem
+  )
+  const itemCount = itemsOnly.length
+  const timelineRef = useRef<HTMLDivElement>(null)
+  const [lineHeight, setLineHeight] = useState<number | null>(null)
+
+  let itemIndex = 0
+  const enhancedChildren = childrenArray.map((child) => {
+    if (isValidElement(child) && child.type === TimelineItem) {
+      const cloned = cloneElement(child, {
+        ...child.props,
+        index: itemIndex,
+        isLast: itemIndex === itemCount - 1,
+        setsize: itemCount,
+      })
+      itemIndex += 1
+      return cloned
+    }
+    return child
+  })
+
+  useLayoutEffect(() => {
+    if (timelineRef.current && itemCount > 1) {
+      const timelineItems = timelineRef.current.querySelectorAll(
+        '[data-timeline-item]'
+      )
+      if (timelineItems.length >= 2) {
+        const lastItem = timelineItems[timelineItems.length - 1] as HTMLElement
+
+        // Calculate distance from center of first icon to center of last icon
+        const firstIconCenter = 24 // 1.5rem (top-6) + 0.75rem (half of 3rem icon height)
+        const lastItemTop = lastItem.offsetTop
+        const baseHeight = lastItemTop + 24 - firstIconCenter // 24px = center of last icon
+
+        // If hasMore is true, extend the line by an additional 2rem (32px) past the last icon
+        const calculatedHeight = hasMore ? baseHeight + 32 : baseHeight
+
+        setLineHeight(calculatedHeight)
+      }
+    }
+  }, [itemCount, children, hasMore])
+
+  return (
+    <div className={cn('relative', className)}>
+      {itemCount > 0 && (
+        <div className="relative" ref={timelineRef}>
+          {itemCount > 1 && (
+            <div
+              className={cn(TIMELINE_STYLES.line, 'absolute top-6 left-6 w-px')}
+              style={{
+                height: lineHeight
+                  ? `${lineHeight}px`
+                  : hasMore
+                    ? `calc(100% - 2.5rem)`
+                    : `calc(100% - 4.5rem)`,
+              }}
+              aria-hidden="true"
+              data-testid="timeline-connector"
+            />
+          )}
+          <ol className="space-y-6">{enhancedChildren}</ol>
+        </div>
+      )}
+    </div>
+  )
+}
+
+const Timeline = Object.assign(TimelineRoot, {
+  Item: TimelineItem,
+  Content: TimelineContent,
+  Title: TimelineTitle,
+  Description: TimelineDescription,
+  Timestamp: TimelineTimestamp,
+})
+
+export { Timeline }

package/src/components/Tooltip/index.tsx

@@ -0,0 +1,41 @@
+'use client'
+
+import * as React from 'react'
+import * as TooltipPrimitive from '@radix-ui/react-tooltip'
+
+import { cn } from '../../lib/utils'
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const Tooltip = TooltipPrimitive.Root
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipArrow = TooltipPrimitive.TooltipArrow
+
+const TooltipPortal = TooltipPrimitive.Portal
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      'bg-popover text-popover-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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 overflow-hidden rounded-md border px-3 py-1.5 text-sm shadow-md',
+      className
+    )}
+    {...props}
+  />
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export {
+  Tooltip,
+  TooltipPortal,
+  TooltipTrigger,
+  TooltipContent,
+  TooltipProvider,
+  TooltipArrow,
+}