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

package/src/components/Card/index.tsx

@@ -0,0 +1,193 @@
+import { cn } from '../../lib/utils'
+import React, { FC, PropsWithChildren, ReactNode } from 'react'
+import { Icon } from '../Icon'
+import { Stack } from '../Stack'
+import { Button } from '../Button'
+import { Score } from '../Score'
+import { iconNames } from '../Icon/names'
+import { Children } from 'react'
+import { Range } from '../../lib/typeUtils'
+
+type RightElement =
+  | {
+      type: 'button'
+      label: string
+      onClick: () => void
+    }
+  | {
+      type: 'gauge'
+      value: Range<100>
+    }
+
+type IconProps = {
+  name: (typeof iconNames)[number]
+  size?: 'small' | 'medium' | 'large'
+}
+
+type CardHeaderProps = PropsWithChildren & {
+  subheader?: React.ReactNode
+  icon?: IconProps
+  rightElement?: RightElement
+  className?: string
+}
+
+const CardHeader: FC<CardHeaderProps> = ({
+  children,
+  subheader,
+  icon,
+  rightElement,
+  className,
+}) => (
+  <div
+    className={cn(
+      'flex w-full flex-row gap-4',
+      subheader ? 'items-start' : 'items-center',
+      className
+    )}
+  >
+    {icon && (
+      <div className="flex-shrink-0 rounded-[8px] border p-2">
+        <Icon name={icon.name} size={icon.size} />
+      </div>
+    )}
+
+    <div className="flex min-w-0 flex-grow flex-col gap-1">
+      <div className="text-md leading-none font-semibold tracking-tight">
+        {children}
+      </div>
+      {subheader && (
+        <div className="text-card-foreground mt-1 flex items-center text-sm">
+          {subheader}
+        </div>
+      )}
+    </div>
+
+    {rightElement && (
+      <div className="flex flex-shrink-0 justify-end gap-2">
+        {rightElement.type === 'button' && (
+          <Button onClick={rightElement.onClick} variant="secondary">
+            {rightElement.label}
+          </Button>
+        )}
+        {rightElement.type === 'gauge' && rightElement.value && (
+          <Score score={rightElement.value} size="small" />
+        )}
+      </div>
+    )}
+  </div>
+)
+CardHeader.displayName = 'CardHeader'
+
+interface CardContentProps extends PropsWithChildren {
+  className?: string
+}
+
+const CardContent: FC<CardContentProps> = ({ children, className }) => (
+  <div className={cn('text-sm', className)}>{children}</div>
+)
+CardContent.displayName = 'CardContent'
+
+type FooterContent = {
+  text: string
+  link?: {
+    label: string
+    href: string
+  }
+}
+
+type CardFooterProps = {
+  content: FooterContent
+  className?: string
+}
+
+const CardFooter: FC<CardFooterProps> = ({ content, className }) => (
+  <div className={cn('border-t px-6 py-4', className)}>
+    <div className="text-card-foreground flex items-center text-sm">
+      {content.text}
+      {content.link && (
+        <a
+          href={content.link.href}
+          className="text-primary ml-2 hover:underline"
+        >
+          {content.link.label}
+        </a>
+      )}
+    </div>
+  </div>
+)
+CardFooter.displayName = 'CardFooter'
+
+export type CardProps = {
+  children: ReactNode | ReactNode[]
+  onClick?: () => void
+  href?: string
+  className?: string
+}
+
+const Card: FC<CardProps> = ({ children, onClick, href, className }) => {
+  const validChildren = Children.toArray(children).filter(
+    (child) =>
+      React.isValidElement(child) &&
+      (child.type === CardHeader ||
+        child.type === CardContent ||
+        child.type === CardFooter)
+  )
+
+  const hasButtonElement = Children.toArray(validChildren).some((child) => {
+    if (React.isValidElement(child) && child.type === CardHeader) {
+      return child.props.rightElement?.type === 'button'
+    }
+    return false
+  })
+
+  if (hasButtonElement && (onClick || href)) {
+    console.warn(
+      'Card: Card-level interaction (onClick/href) will be ignored when header contains a button element. ' +
+        'This prevents confusing UX with nested clickable elements.'
+    )
+  }
+
+  const isInteractive = !hasButtonElement && Boolean(onClick || href)
+  const Wrapper = href && !hasButtonElement ? 'a' : 'div'
+  const wrapperProps = !hasButtonElement
+    ? href
+      ? { href }
+      : onClick
+        ? { onClick }
+        : {}
+    : {}
+
+  return (
+    <Wrapper
+      className={cn(
+        'bg-card text-card-foreground relative flex h-full w-full flex-col rounded-[8px] border shadow',
+        isInteractive && 'hover:bg-card/70 cursor-pointer',
+        className
+      )}
+      {...wrapperProps}
+    >
+      <div className="p-6">
+        <Stack gap={3}>
+          {validChildren.map((child) => {
+            if (React.isValidElement(child) && child.type === CardFooter) {
+              return null
+            }
+
+            return child
+          })}
+        </Stack>
+      </div>
+      {validChildren.find(
+        (child) => React.isValidElement(child) && child.type === CardFooter
+      )}
+    </Wrapper>
+  )
+}
+
+const CardWithSubcomponents = Object.assign(Card, {
+  Header: CardHeader,
+  Content: CardContent,
+  Footer: CardFooter,
+})
+
+export { CardWithSubcomponents as Card }

package/src/components/CodeEditorLayout/index.tsx

@@ -0,0 +1,394 @@
+import { Icon } from '../Icon'
+import { cn } from '../../lib/utils'
+import {
+  isValidElement,
+  ReactNode,
+  Children,
+  PropsWithChildren,
+  useState,
+  useMemo,
+  HTMLAttributes,
+} from 'react'
+import {
+  Panel,
+  PanelGroup,
+  PanelProps,
+  PanelResizeHandle,
+} from 'react-resizable-panels'
+import styles from './styles.module.css'
+
+export interface CodeEditorLayoutProps {
+  children: ReactNode[] | ReactNode
+  className?: string
+}
+
+const CodeEditorLayout = ({ children, className }: CodeEditorLayoutProps) => {
+  const validChildren = Children.toArray(children).filter((child) => {
+    if (!isValidElement(child)) return false
+    const type = child.type as { displayName?: string }
+    const isValidSubType =
+      type.displayName === 'CodeEditor.Pane' ||
+      type.displayName === 'CodeEditor.Tabs' ||
+      type.displayName === 'CodeEditor.CommandBar' ||
+      type.displayName === 'CodeEditor.Empty'
+
+    if (!isValidSubType) {
+      console.warn(
+        `Invalid child type: ${type.displayName}. Must be one of: CodeEditor.Pane, CodeEditor.Tabs, CodeEditor.CommandBar, CodeEditor.Empty`
+      )
+    }
+
+    return isValidSubType
+  })
+
+  const panes = validChildren.filter((child) => {
+    if (!isValidElement(child)) return false
+    const type = child.type as { displayName?: string }
+    return type.displayName === 'CodeEditor.Pane'
+  })
+
+  const empty = validChildren.find((child) => {
+    if (!isValidElement(child)) return false
+    const type = child.type as { displayName?: string }
+    return type.displayName === 'CodeEditor.Empty'
+  })
+
+  const commandBar = validChildren.find((child) => {
+    if (!isValidElement(child)) return false
+    const type = child.type as { displayName?: string }
+    return type.displayName === 'CodeEditor.CommandBar'
+  })
+
+  return (
+    <div className="flex h-full w-full flex-col rounded-lg">
+      {commandBar}
+      <PanelGroup
+        className={cn('flex min-h-0 flex-row', className)}
+        direction="horizontal"
+      >
+        {Children.map(panes, (pane, index) =>
+          index < panes.length - 1 ? (
+            <>
+              {pane}
+
+              <PanelResizeHandle className="bg-background" />
+            </>
+          ) : (
+            pane
+          )
+        )}
+        {empty && <Panel>{empty}</Panel>}
+      </PanelGroup>
+    </div>
+  )
+}
+
+CodeEditorLayout.displayName = 'CodeEditor'
+
+export interface CodeEditorPaneProps extends PanelProps {
+  className?: string
+  containerRef?: React.RefObject<HTMLDivElement>
+
+  /**
+   * Optional tabs to display above the scrolling pane
+   */
+  tabs?: React.ReactNode
+}
+
+const CodeEditorPane = ({
+  children,
+  className,
+  minSize,
+  maxSize,
+  containerRef,
+  tabs,
+  ...props
+}: CodeEditorPaneProps) => {
+  return (
+    <Panel
+      {...props}
+      minSize={minSize}
+      maxSize={maxSize}
+      className={cn(className)}
+    >
+      {tabs}
+      <div
+        className={cn(
+          'bg-background [&::-webkit-scrollbar-thumb]:bg-foreground/10 [&::-webkit-scrollbar-thumb]:hover:bg-foreground/20 [&::-webkit-scrollbar-track]:bg-card border-neutral-softest h-full flex-1 overflow-x-hidden overflow-y-scroll border',
+          className
+        )}
+        ref={containerRef}
+      >
+        {children}
+      </div>
+    </Panel>
+  )
+}
+CodeEditorPane.displayName = 'CodeEditor.Pane'
+
+export interface CodeEditorTabsProps
+  extends PropsWithChildren,
+    HTMLAttributes<HTMLDivElement> {
+  className?: string
+}
+
+const CodeEditorTabs = ({
+  children,
+  className,
+  ...props
+}: CodeEditorTabsProps) => {
+  const validChildren = Children.toArray(children).filter((child) => {
+    if (!isValidElement(child)) return false
+    const type = child.type as { displayName?: string }
+    return (
+      type.displayName === 'CodeEditor.Tab' ||
+      type.displayName === 'CodeEditor.CustomTabElement'
+    )
+  })
+
+  return (
+    <div
+      {...props}
+      className={cn(
+        'code-editor-tabs bg-background border-neutral-softest flex w-full flex-row overflow-x-scroll overflow-y-hidden border-b [&::-webkit-scrollbar]:hidden',
+        className
+      )}
+    >
+      {validChildren}
+    </div>
+  )
+}
+CodeEditorTabs.displayName = 'CodeEditor.Tabs'
+
+export interface CodeEditorTabProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'onClick' | 'title'> {
+  id: string
+  title?: string | ReactNode
+  className?: string
+  active?: boolean
+  closable?: boolean
+  grow?: boolean
+  icon?: ReactNode
+  invalid?: boolean
+  dirty?: boolean
+  saving?: boolean
+  onClick?: (id: string) => void
+  onClose?: (id: string) => void
+
+  /**
+   * If true, the tab will not be interactive
+   * Useful for loading states
+   */
+  disabled?: boolean
+
+  /**
+   * Custom styles for the tab
+   */
+  customStyles?: CodeEditorTabStateCustomStyles
+}
+
+/**
+ * Allows for custom styles to be applied to the tab based on its state
+ *
+ * @example
+ * <CodeEditor.Tab
+ *   customStyles={{
+ *     active: 'text-foreground bg-background',
+ *     inactive: 'text-body-muted bg-muted',
+ *     dirty: 'text-yellow-700/90 italic dark:text-yellow-300/70',
+ *     invalid: 'text-red-700 dark:text-red-400',
+ *     disabled: 'cursor-not-allowed opacity-75',
+ *   }}
+ * />
+ */
+type CodeEditorTabStateCustomStyles = {
+  active?: string
+  inactive?: string
+  dirty?: string
+  invalid?: string
+  disabled?: string
+  saving?: string
+}
+
+const CodeEditorTab = ({
+  id,
+  title,
+  className,
+  active,
+  closable,
+  grow,
+  dirty,
+  invalid,
+  saving,
+  onClick,
+  onClose,
+  icon,
+  disabled,
+  customStyles,
+  ...props
+}: CodeEditorTabProps) => {
+  const [hoveredCloseIntent, setHoveredCloseIntent] = useState(false)
+  const handleClose = (e: React.MouseEvent<HTMLButtonElement>) => {
+    // stop the event from bubbling up to the parent tab click handler
+    e.stopPropagation()
+    onClose?.(id)
+    setHoveredCloseIntent(false)
+  }
+  const closeButton = useMemo(
+    () => (
+      <button
+        className={cn(
+          'text-body-muted hover:bg-muted hover:dark:bg-foreground/15 hover:text-foreground ml-auto h-full rounded-sm p-0.5',
+          hoveredCloseIntent && 'bg-background/80',
+          hoveredCloseIntent &&
+            dirty &&
+            `!bg-foreground/5 dark:!bg-foreground/10`
+        )}
+        onMouseEnter={() => setHoveredCloseIntent(true)}
+        onMouseLeave={() => setHoveredCloseIntent(false)}
+        onClick={handleClose}
+      >
+        <Icon name="x" className="h-3.5 w-3.5" />
+      </button>
+    ),
+    [hoveredCloseIntent, onClose, id, active]
+  )
+
+  return (
+    <div
+      {...props}
+      className={cn(
+        'code-editor-tab bg-background relative flex w-fit cursor-pointer items-center justify-start gap-2.5 rounded-sm rounded-t-none border-r py-2 pr-2 pl-3 text-sm whitespace-nowrap select-none first-of-type:border-l-0',
+        grow && 'flex-1',
+        active && 'text-foreground bg-background',
+        !active && 'text-body-muted bg-muted',
+        dirty && !saving && 'text-yellow-700/90 italic dark:text-yellow-300/70',
+        invalid && 'text-red-700 dark:text-red-400',
+        disabled && 'cursor-not-allowed opacity-75',
+        className,
+
+        // Override styles
+        customStyles && customStyles.active,
+        customStyles && customStyles.inactive,
+        customStyles && customStyles.dirty,
+        customStyles && customStyles.invalid,
+        customStyles && customStyles.disabled,
+        customStyles && customStyles.saving
+      )}
+      key={id}
+      onClick={() => onClick?.(id)}
+    >
+      <div className="flex items-center gap-1.5">
+        {icon && <span className="flex items-center">{icon}</span>}
+
+        <span title={typeof title === 'string' ? title : undefined}>
+          {title}
+        </span>
+      </div>
+      {closable && !dirty && closeButton}
+      {dirty && !saving && (
+        <span
+          onMouseEnter={() => setHoveredCloseIntent(true)}
+          className="text-body-muted ml-auto flex h-full w-3 items-center justify-center text-xs"
+        >
+          {!hoveredCloseIntent ? (
+            <Icon name="circle" className="fill-foreground h-2.5 w-2.5" />
+          ) : closable ? (
+            closeButton
+          ) : (
+            <Icon name="circle" className="fill-foreground h-2.5 w-2.5" />
+          )}
+        </span>
+      )}
+
+      {saving && (
+        <div className="text-muted-foreground ml-auto flex h-full w-3 items-center justify-center">
+          <Icon name="loader-circle" className="size-5 animate-spin" />
+        </div>
+      )}
+
+      {saving && (
+        <div className="pointer-events-none absolute bottom-0 left-0 h-0.5 w-full overflow-hidden">
+          <div
+            className={cn(
+              'absolute h-full w-3/4 -translate-x-full bg-blue-500 dark:bg-blue-300',
+              styles.editorTabLoadingBar
+            )}
+          />
+        </div>
+      )}
+    </div>
+  )
+}
+CodeEditorTab.displayName = 'CodeEditor.Tab'
+
+export interface CodeEditorCommandBarProps
+  extends PropsWithChildren,
+    HTMLAttributes<HTMLDivElement> {
+  className?: string
+}
+
+const CodeEditorCommandBar = ({
+  children,
+  className,
+  ...props
+}: CodeEditorCommandBarProps) => {
+  return (
+    <div
+      {...props}
+      className={cn(
+        'code-editor-command-bar bg-muted rounded-sm rounded-b-none px-3 py-1',
+        className
+      )}
+    >
+      {children}
+    </div>
+  )
+}
+CodeEditorCommandBar.displayName = 'CodeEditor.CommandBar'
+
+export interface CodeEditorCustomElementProps
+  extends PropsWithChildren,
+    HTMLAttributes<HTMLDivElement> {
+  className?: string
+}
+
+const CustomTabElement = ({
+  children,
+  className,
+  ...props
+}: CodeEditorCustomElementProps) => {
+  return (
+    <div className={cn('h-full w-full', className)} {...props}>
+      {children}
+    </div>
+  )
+}
+CustomTabElement.displayName = 'CodeEditor.CustomTabElement'
+
+export interface CodeEditorEmptyProps
+  extends PropsWithChildren,
+    HTMLAttributes<HTMLDivElement> {
+  className?: string
+}
+
+const Empty = ({ children, className, ...props }: CodeEditorEmptyProps) => {
+  return (
+    <div className={cn('h-full w-full', className)} {...props}>
+      {children}
+    </div>
+  )
+}
+
+Empty.displayName = 'CodeEditor.Empty'
+
+const CodeEditor = Object.assign(CodeEditorLayout, {
+  Pane: CodeEditorPane,
+  CommandBar: CodeEditorCommandBar,
+  Empty: Empty,
+  Tabs: CodeEditorTabs,
+  Tab: CodeEditorTab,
+  CustomTabElement: CustomTabElement,
+})
+
+export { CodeEditor }

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

@@ -0,0 +1,8 @@
+@keyframes editor-tab-loading-bar {
+  0% { transform: translateX(-100%); }
+  100% { transform: translateX(300%); }
+}
+
+.editorTabLoadingBar {
+  animation: editor-tab-loading-bar 2.5s linear infinite;
+}

package/src/components/CodeHighlight/Pre.tsx

@@ -0,0 +1,63 @@
+import { forwardRef, HTMLAttributes } from 'react'
+import { HighlightedCode } from '../../lib/codeUtils'
+import { cn } from '../../lib/utils'
+
+export interface PreProps
+  extends Omit<HTMLAttributes<HTMLPreElement>, 'children'> {
+  code: HighlightedCode
+  showLineNumbers?: boolean
+  wordWrap?: boolean
+}
+
+export const Pre = forwardRef<HTMLPreElement, PreProps>(
+  (
+    { code, showLineNumbers = false, wordWrap = false, className, ...props },
+    ref
+  ) => {
+    return (
+      <pre
+        ref={ref}
+        className={cn(
+          'inline-block font-mono outline-none',
+          wordWrap && 'whitespace-pre-wrap',
+          className
+        )}
+        {...props}
+      >
+        <code>
+          {code.lines.map((line, lineIndex) => (
+            <div
+              key={lineIndex}
+              className={cn('flex flex-row', wordWrap && 'flex-wrap')}
+            >
+              {showLineNumbers && (
+                <span className="text-body-muted pr-3 select-none">
+                  {lineIndex + 1}
+                </span>
+              )}
+              <span className={cn('inline-block', wordWrap && 'flex-1')}>
+                {line.tokens.map((token, tokenIndex) => (
+                  <span
+                    key={tokenIndex}
+                    style={{
+                      color: token.color,
+                      fontStyle: token.fontStyle ? 'italic' : undefined,
+                      fontWeight:
+                        token.fontStyle && token.fontStyle & 1
+                          ? 'bold'
+                          : undefined,
+                    }}
+                  >
+                    {token.content}
+                  </span>
+                ))}
+              </span>
+            </div>
+          ))}
+        </code>
+      </pre>
+    )
+  }
+)
+
+Pre.displayName = 'Pre'