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

package/src/components/Icon/index.tsx

@@ -0,0 +1,83 @@
+'use client'
+
+import { lazy, Suspense } from 'react'
+import { LucideProps } from 'lucide-react'
+import dynamicIconImports from 'lucide-react/dynamicIconImports'
+import { ResponsiveValue, Size } from '../../types'
+import useTailwindBreakpoint from '../../hooks/useTailwindBreakpoint'
+import { resolveSizeForBreakpoint } from '../../lib/responsiveUtils'
+
+import customDynamicIconImports from './customIcons'
+import { IconName } from './names'
+
+// TODO: Use skeleton
+function Skeleton() {
+  return <div />
+}
+
+// Skeleton fallback
+const fallback = <Skeleton />
+
+type SvgProps = Pick<
+  LucideProps,
+  | 'stroke'
+  | 'strokeWidth'
+  | 'strokeOpacity'
+  | 'size'
+  | 'viewBox'
+  | 'fill'
+  | 'fillOpacity'
+  | 'className'
+>
+
+const sizeMap: Record<Size, number> = {
+  small: 16,
+  medium: 24,
+  large: 32,
+  xl: 48,
+  '2xl': 64,
+}
+
+export interface IconProps extends Omit<SvgProps, 'size'> {
+  name: IconName
+  size?: ResponsiveValue<Size>
+}
+
+const iconCache = new Map<
+  string,
+  React.LazyExoticComponent<React.ComponentType<LucideProps>>
+>()
+
+function tryGetIcon(
+  name: string
+): React.LazyExoticComponent<React.ComponentType<LucideProps>> {
+  if (iconCache.has(name)) {
+    return iconCache.get(name) as React.LazyExoticComponent<
+      React.ComponentType<LucideProps>
+    >
+  }
+
+  const LucideIcon = customDynamicIconImports[
+    name as keyof typeof customDynamicIconImports
+  ]
+    ? lazy(
+        customDynamicIconImports[name as keyof typeof customDynamicIconImports]
+      )
+    : lazy(dynamicIconImports[name as keyof typeof dynamicIconImports])
+
+  iconCache.set(name, LucideIcon)
+  return LucideIcon
+}
+
+export function Icon({ name, size = 'small', ...props }: IconProps) {
+  const LucideIcon = tryGetIcon(name)
+  const breakpoint = useTailwindBreakpoint()
+  const resolvedSize = resolveSizeForBreakpoint(breakpoint, size, 'small')
+  const sizeNumber = sizeMap[resolvedSize]
+
+  return (
+    <Suspense fallback={fallback}>
+      <LucideIcon {...props} size={sizeNumber} />
+    </Suspense>
+  )
+}

package/src/components/Icon/isIconName.ts

@@ -0,0 +1,10 @@
+import { IconName, iconNames } from './names'
+
+const iconNameSet = new Set(Object.values(iconNames))
+
+export function isIconName(maybeIconName: unknown): maybeIconName is IconName {
+  return (
+    typeof maybeIconName === 'string' &&
+    iconNameSet.has(maybeIconName as IconName)
+  )
+}

package/src/components/Icon/names.ts

@@ -0,0 +1,14 @@
+import dynamicIconImports from 'lucide-react/dynamicIconImports'
+import customDynamicIconImports from './customIcons'
+
+export const lucideIconNames = Object.keys(
+  dynamicIconImports
+) as (keyof typeof dynamicIconImports)[]
+
+export const customIconNames = Object.keys(
+  customDynamicIconImports
+) as (keyof typeof customDynamicIconImports)[]
+
+export const iconNames = [...lucideIconNames, ...customIconNames]
+
+export type IconName = (typeof iconNames)[number]

package/src/components/IconButton/index.tsx

@@ -0,0 +1,51 @@
+import * as React from 'react'
+import { Button, ButtonIcon } from '../Button'
+import { ButtonVariant, ButtonSize, ButtonContext } from '../../types'
+import { cn } from '../../lib/utils'
+
+type Attributes = Pick<
+  React.ButtonHTMLAttributes<HTMLButtonElement>,
+  | 'disabled'
+  | 'onClick'
+  | 'type'
+  | 'role'
+  | 'onMouseEnter'
+  | 'onMouseLeave'
+  | 'onMouseDown'
+  | 'onMouseUp'
+>
+
+export interface IconButtonProps extends Attributes {
+  icon: React.ReactNode
+  variant?: ButtonVariant
+  size?: ButtonSize
+  context?: ButtonContext
+  className?: string
+  asChild?: boolean
+  'aria-label': string // Required for accessibility
+}
+
+const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
+  ({ icon, size = 'md', className, ...props }, ref) => {
+    // Map button sizes to square dimensions with proper icon sizing
+    const sizeClasses = {
+      xs: 'h-7 w-7 [&_svg]:size-3',
+      sm: 'h-8 w-8 [&_svg]:size-3.5',
+      md: 'h-9 w-9 [&_svg]:size-4',
+      lg: 'h-10 w-10 [&_svg]:size-5',
+    }
+
+    return (
+      <Button
+        ref={ref}
+        className={cn(sizeClasses[size], 'p-0', className)}
+        {...props}
+      >
+        <ButtonIcon>{icon}</ButtonIcon>
+      </Button>
+    )
+  }
+)
+IconButton.displayName = 'IconButton'
+
+export { IconButton }

package/src/components/Input/index.tsx

@@ -0,0 +1,98 @@
+// TODO: https://linear.app/speakeasy/issue/SXF-171/input-component
+import { cn } from '../../lib/utils'
+import { Icon } from '../Icon'
+import { IconName } from '../Icon/names'
+import { useCallback, useState } from 'react'
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement> {
+  icon?: IconName
+  multiline?: boolean
+  error?: boolean
+  className?: string
+}
+
+export function Input({
+  value,
+  onChange,
+  placeholder,
+  disabled,
+  icon,
+  multiline,
+  error,
+  className,
+  ...props
+}: InputProps) {
+  const [isFocused, setIsFocused] = useState(false)
+
+  const handleFocus = useCallback(
+    (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+      if (props.onFocus) {
+        props.onFocus(event)
+      }
+      setIsFocused(true)
+    },
+    [props.onFocus]
+  )
+  const handleBlur = useCallback(
+    (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+      if (props.onBlur) {
+        props.onBlur(event)
+      }
+      setIsFocused(false)
+    },
+    [props.onBlur]
+  )
+
+  const commonProps = {
+    value,
+    onChange,
+    placeholder,
+    disabled,
+  } as const
+
+  let element: React.ReactNode = (
+    <input
+      {...commonProps}
+      {...props}
+      onFocus={handleFocus}
+      onBlur={handleBlur}
+      className={cn(
+        'bg-surface-primary-default placeholder:text-placeholder text-default h-full w-full text-sm shadow-none outline-none disabled:cursor-not-allowed disabled:opacity-50',
+        isFocused && 'placeholder:text-default'
+      )}
+    />
+  )
+
+  if (multiline) {
+    element = (
+      <textarea
+        {...commonProps}
+        {...props}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+        cols={30}
+        rows={10}
+        className={cn(
+          'bg-surface-primary-default placeholder:text-placeholder text-default my-2 h-full max-h-60 min-h-16 w-full px-3 py-3 text-sm shadow-none outline-none disabled:cursor-not-allowed disabled:opacity-50',
+          isFocused && 'placeholder:text-default'
+        )}
+      />
+    )
+  }
+
+  return (
+    <div
+      className={cn(
+        'bg-surface-primary-default border-input text-muted-foreground flex items-center gap-3 rounded-md border px-4 py-3',
+        icon && 'px-3',
+        isFocused && 'text-default border-focus',
+        error && 'border-destructive-default',
+        className
+      )}
+    >
+      {icon && <Icon name={icon} size="small" />}
+      {element}
+    </div>
+  )
+}

package/src/components/KeyHint/index.tsx

@@ -0,0 +1,118 @@
+import { cn } from '../../lib/utils'
+import { Icon } from '../Icon'
+
+type Modifier = 'shift' | 'ctrlorcommand' | 'alt' | 'meta' | 'esc'
+
+function checkIsMac(): boolean {
+  if (typeof window === 'undefined') {
+    return false
+  }
+  return /Mac|iPod|iPhone|iPad/.test(window.navigator.platform)
+}
+
+const modifierMap: Record<Modifier, string> = {
+  shift: '⇧',
+  ctrlorcommand: checkIsMac() ? '⌘' : 'Ctrl',
+  alt: checkIsMac() ? '⌥' : 'Alt',
+  meta: checkIsMac() ? '⌘' : 'Win',
+  esc: 'Esc',
+}
+
+export interface KeyProps {
+  value: string
+  className?: string
+}
+
+export function Key({ value, className }: KeyProps) {
+  return (
+    <span
+      className={cn(
+        'from-background to-card text-foreground/70 dark:text-foreground rounded-lg border bg-gradient-to-br px-2 py-0.5 text-sm',
+        className
+      )}
+    >
+      {value}
+    </span>
+  )
+}
+
+interface KeyHintItemProps {
+  modifiers: Modifier[]
+  keys: string[]
+  actionText?: string
+}
+
+function KeyHintKeys({ modifiers, keys }: KeyHintItemProps) {
+  return (
+    <div className="flex flex-row items-center gap-1">
+      {modifiers.map((modifier, index) => (
+        <>
+          <Key value={modifierMap[modifier]} />
+          {index < modifiers.length - 1 && (
+            <span className="text-body-muted text-sm">+</span>
+          )}
+        </>
+      ))}
+      {keys.length > 0 && <span className="text-body-muted text-sm">+</span>}
+      {keys.map((key, index) => (
+        <>
+          <Key value={key.toUpperCase()} />
+          {index < keys.length - 1 && (
+            <span className="text-body-muted text-sm">+</span>
+          )}
+        </>
+      ))}
+    </div>
+  )
+}
+
+export interface KeyHintProps extends React.HTMLAttributes<HTMLDivElement> {
+  modifiers: Modifier[]
+  keys: string[]
+  actionText: string
+  titleText?: string
+  dismissable?: boolean
+  onDismiss?: () => void
+}
+
+export function KeyHint({
+  modifiers,
+  keys,
+  actionText,
+  className,
+  dismissable = true,
+  onDismiss,
+  titleText = 'Key hint',
+  ...props
+}: KeyHintProps) {
+  return (
+    <div
+      className={cn(
+        'inline-flex min-w-24 flex-col items-start gap-1 rounded-lg border text-base font-semibold tracking-tight text-black shadow-sm shadow-black/5 select-none dark:text-white dark:shadow-white/10',
+        className
+      )}
+      {...props}
+    >
+      <div className="text-body-muted dark:text-body-muted/80 flex w-full flex-row items-center self-start border-b px-2.5 py-0.5 text-[10px] font-semibold tracking-wide uppercase select-none">
+        <div>{titleText}</div>
+        {dismissable && (
+          <div
+            className="hover:text-foreground ml-auto cursor-pointer"
+            onClick={onDismiss}
+            title="Close"
+          >
+            <Icon name="x" className="h-3.5 w-3.5" />
+          </div>
+        )}
+      </div>
+      <div className="flex flex-row items-center gap-1 px-4 py-3.5">
+        <KeyHintKeys modifiers={modifiers} keys={keys} />
+        {actionText && (
+          <div className="text-body-muted text-sm font-normal">
+            {actionText}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/components/LanguageIndicator/index.tsx

@@ -0,0 +1,68 @@
+// TODO: https://linear.app/speakeasy/issue/SXF-172/language-indicator-component
+import { cn } from '../../lib/utils'
+import { SupportedLanguage } from '../../types'
+
+export interface LanguageIndicatorProps {
+  language: SupportedLanguage
+  className?: string
+  indicatorOnly?: boolean
+}
+
+const languageLabelMap: Record<string, string> = {
+  typescript: 'TypeScript',
+  go: 'Go',
+  java: 'Java',
+  python: 'Python',
+  csharp: 'C#',
+  terraform: 'Terraform',
+  unity: 'Unity',
+  php: 'PHP',
+  swift: 'Swift',
+  ruby: 'Ruby',
+  postman: 'Postman',
+
+  // Unsupported languages but used elsewhere
+  bash: 'Bash',
+  json: 'JSON',
+  dotnet: 'C#',
+  javascript: 'JavaScript',
+}
+
+const languageColorMap: Record<string, string> = {
+  typescript: 'bg-yellow-500',
+  go: 'bg-green-600',
+  java: 'bg-orange-500',
+  python: 'bg-indigo-500',
+  csharp: 'bg-purple-500',
+  terraform: 'bg-blue-500',
+  unity: 'bg-emerald-300',
+  php: 'bg-orange-500',
+  swift: 'bg-sky-300',
+  ruby: 'bg-red-500',
+  postman: 'bg-pink-500',
+
+  // Unsupported languages but used elsewhere
+  bash: 'bg-gray-500',
+  json: 'bg-gray-500',
+  dotnet: 'bg-gray-500',
+  javascript: 'bg-yellow-500',
+}
+
+export function LanguageIndicator({
+  language,
+  className,
+  indicatorOnly = false,
+}: LanguageIndicatorProps) {
+  return (
+    <div className={cn('gap flex items-center gap-2 select-none', className)}>
+      <div
+        className={`mx-1 h-2 w-2 rounded-full ${languageColorMap[language]}`}
+      />
+      {!indicatorOnly && (
+        <span className="text-body font-medium">
+          {languageLabelMap[language]}
+        </span>
+      )}
+    </div>
+  )
+}

package/src/components/Link/index.tsx

@@ -0,0 +1,153 @@
+import React, { forwardRef, ReactNode } from 'react'
+import { cn } from '../../lib/utils'
+import { cva } from 'class-variance-authority'
+import { Slot, Slottable } from '@radix-ui/react-slot'
+import { IconName } from '../Icon/names'
+import { Icon as IconComponent } from '../Icon'
+import { TextVariant } from '../Text'
+
+type LinkVariant = 'primary' | 'secondary'
+
+const linkVariants = cva(
+  'group/link items-center inline-flex flex-row cursor-pointer',
+  {
+    variants: {
+      variant: {
+        primary: 'text-link-primary visited:text-link-visited',
+        secondary: 'text-link-secondary visited:text-link-visited',
+      },
+      size: {
+        xs: 'text-body-xs gap-1',
+        sm: 'text-body-sm gap-1',
+        md: 'text-body-md gap-2',
+        lg: 'text-body-lg gap-2',
+      },
+    },
+  }
+)
+
+const linkTextVariants = cva(
+  'underline-offset-4 decoration-1 inline-flex flex-row items-center',
+  {
+    variants: {
+      variant: {
+        primary: '',
+        secondary: '',
+      },
+      underline: {
+        false: 'no-underline group-hover/link:underline',
+        true: 'underline group-hover/link:no-underline',
+      },
+    },
+  }
+)
+
+const iconWrapperVariants = cva('inline-block', {
+  variants: {
+    size: {
+      xs: 'size-3 [&>svg]:size-3',
+      sm: 'size-3 [&>svg]:size-3',
+      md: 'size-4 [&>svg]:size-4',
+      lg: 'size-4 [&>svg]:size-4',
+    },
+  },
+})
+
+export interface LinkProps
+  extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+  children: ReactNode
+  variant?: LinkVariant
+  size?: TextVariant
+  underline?: boolean
+  iconPrefixName?: IconName
+  iconSuffixName?: IconName
+  asChild?: boolean
+}
+
+export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
+  (
+    {
+      children,
+      variant = 'primary',
+      size = 'md',
+      underline = true,
+      target = '_blank',
+      iconPrefixName,
+      iconSuffixName,
+      className,
+      asChild = false,
+      ...rest
+    },
+    ref
+  ) => {
+    const Comp = asChild ? Slot : 'a'
+
+    // When asChild is true, we need to apply underline styles to the main component
+    // since the Text wrapper won't be used
+    const underlineClasses = asChild
+      ? linkTextVariants({ underline, variant })
+      : ''
+
+    return (
+      <Comp
+        ref={ref}
+        target={target}
+        className={cn(
+          linkVariants({ size, variant }),
+          underlineClasses,
+          className
+        )}
+        {...rest}
+      >
+        {iconPrefixName && (
+          <IconWrapper size={size}>
+            <IconComponent name={iconPrefixName} size="small" />
+          </IconWrapper>
+        )}
+
+        {asChild ? (
+          <Slottable>{children}</Slottable>
+        ) : (
+          <Text underline={underline} variant={variant}>
+            {children}
+          </Text>
+        )}
+
+        {iconSuffixName && (
+          <IconWrapper size={size}>
+            <IconComponent name={iconSuffixName} size="small" />
+          </IconWrapper>
+        )}
+      </Comp>
+    )
+  }
+)
+Link.displayName = 'Link'
+
+interface TextProps {
+  underline?: boolean
+  variant?: LinkVariant
+}
+
+const Text = ({
+  children,
+  underline,
+  variant,
+}: React.PropsWithChildren<TextProps>) => {
+  return (
+    <span className={cn(linkTextVariants({ underline, variant }))}>
+      {children}
+    </span>
+  )
+}
+
+interface IconWrapperProps {
+  size?: TextVariant
+}
+
+const IconWrapper = ({
+  children,
+  size,
+}: React.PropsWithChildren<IconWrapperProps>) => {
+  return <span className={cn(iconWrapperVariants({ size }))}>{children}</span>
+}