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

package/src/components/PullRequestLink/index.tsx

@@ -0,0 +1,64 @@
+// TODO: https://linear.app/speakeasy/issue/SXF-174/pull-request-link-component
+import { assertNever } from '../../lib/assert'
+import { cn } from '../../lib/utils'
+import { GitPullRequest, GitPullRequestClosed, Merge } from 'lucide-react'
+
+type Status = 'open' | 'closed' | 'merged'
+
+export interface PullRequestLinkProps {
+  href: string
+  prNumber?: number
+  status?: Status
+  target?: '_blank' | '_self' | '_parent' | '_top'
+  className?: string
+}
+
+export function PullRequestLink({
+  href,
+  prNumber,
+  status = 'open',
+  target = '_blank',
+  className,
+}: PullRequestLinkProps) {
+  // If prNumber is not provided, try to extract it from the href
+  const num = prNumber ?? (href.split('/').pop() || 'Unknown')
+
+  return (
+    <a
+      className={cn(
+        'hover:bg-muted-foreground/5 inline-flex flex-row items-center gap-1 rounded-lg border px-1.5 py-1 text-sm transition-colors duration-500',
+        className
+      )}
+      href={href}
+      target={target}
+    >
+      <span className={colors[status]}>
+        <PullRequestStatusIcon status={status} />
+      </span>
+      <span className="text-body text-xs font-semibold">{`#${num}`}</span>
+    </a>
+  )
+}
+
+const colors: Record<Status, string> = {
+  open: 'text-emerald-500',
+  closed: 'text-rose-500',
+  merged: 'text-violet-500',
+}
+
+function PullRequestStatusIcon({
+  status,
+}: {
+  status: 'open' | 'closed' | 'merged'
+}): React.ReactNode {
+  switch (status) {
+    case 'open':
+      return <GitPullRequest size={14} />
+    case 'closed':
+      return <GitPullRequestClosed size={14} />
+    case 'merged':
+      return <Merge size={14} />
+    default:
+      assertNever(status)
+  }
+}

package/src/components/ResizablePanel/index.tsx

@@ -0,0 +1,119 @@
+import { Icon } from '../Icon'
+import { cn } from '../../lib/utils'
+import React, { Children, isValidElement, useMemo, useState } from 'react'
+import { ComponentProps, ReactNode } from 'react'
+import {
+  ImperativePanelHandle,
+  Panel,
+  PanelGroup,
+  PanelResizeHandle,
+} from 'react-resizable-panels'
+
+export interface ResizeHandleProps
+  extends ComponentProps<typeof PanelResizeHandle> {
+  children?: ReactNode
+}
+
+const ResizeHandle = ({ children, ...props }: ResizeHandleProps) => {
+  return <PanelResizeHandle {...props}>{children}</PanelResizeHandle>
+}
+
+ResizeHandle.displayName = 'ResizablePanel.ResizeHandle'
+
+export interface ResizablePanelProps extends ComponentProps<typeof PanelGroup> {
+  children: ReactNode
+  className?: string
+  useDefaultHandle?: boolean
+}
+
+const ResizablePanel = ({
+  children,
+  className,
+  useDefaultHandle = true,
+  onResize,
+  ...props
+}: ResizablePanelProps) => {
+  const validChildren = useMemo(
+    () =>
+      Children.toArray(children).filter((child) => {
+        if (!isValidElement(child)) return false
+        const type = child.type as { displayName?: string }
+        return (
+          type.displayName === 'ResizablePanel.Pane' ||
+          type.displayName === 'ResizablePanel.ResizeHandle'
+        )
+      }),
+    [children]
+  )
+
+  return (
+    <PanelGroup onResize={onResize} {...props} className={className}>
+      {React.Children.map(validChildren, (child, index) => {
+        if (!isValidElement(child)) return child
+        return (
+          <>
+            {child}
+
+            {index < validChildren.length - 1 && useDefaultHandle && (
+              <DefaultResizeHandle direction={props.direction} />
+            )}
+          </>
+        )
+      })}
+    </PanelGroup>
+  )
+}
+
+export interface PaneProps extends ComponentProps<typeof Panel> {
+  children: ReactNode
+  className?: string
+  panelRef?: React.LegacyRef<ImperativePanelHandle>
+}
+
+const Pane = ({ children, className, panelRef, ...props }: PaneProps) => {
+  return (
+    <Panel className={className} {...props} ref={panelRef}>
+      {children}
+    </Panel>
+  )
+}
+
+Pane.displayName = 'ResizablePanel.Pane'
+
+const DefaultResizeHandle = ({
+  direction,
+}: {
+  direction: 'horizontal' | 'vertical'
+}) => {
+  const [isResizing, setIsResizing] = useState(false)
+  return (
+    <PanelResizeHandle
+      onDragging={(dragging) => setIsResizing(dragging)}
+      hitAreaMargins={{
+        coarse: 10,
+        fine: 10,
+      }}
+      className={cn(
+        'relative border-[1.25px] border-zinc-900/50',
+        isResizing && 'border-foreground/10'
+      )}
+    >
+      <div
+        className={cn(
+          'bg-card text-body-muted absolute top-[50%] flex translate-x-[-50%] items-center justify-center rounded-md border shadow-sm shadow-zinc-400/5',
+          direction === 'vertical' ? 'cursor-ns-resize' : 'cursor-ew-resize',
+          isResizing && 'text-foreground'
+        )}
+      >
+        <Icon name="grip-vertical" className="h-8 w-5" />
+      </div>
+    </PanelResizeHandle>
+  )
+}
+
+const ResizablePanelWithSubcomponents = Object.assign(ResizablePanel, {
+  Pane,
+  ResizeHandle,
+})
+
+export { ResizablePanelWithSubcomponents as ResizablePanel }

package/src/components/Score/index.module.css

@@ -0,0 +1,32 @@
+.svg {
+  user-select: none;
+}
+
+.text {
+  fill: var(--progress-colour);
+  transition: fill var(--transition-length) ease var(--delay);
+  font-weight: bold;
+  font-size: 36px;
+}
+
+.circleBase {
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-dashoffset: 0;
+  transform-origin: 50% 50%;
+  shape-rendering: geometricprecision;
+  stroke-width: var(--stroke-width);
+  transition: stroke var(--transition-length) ease var(--delay);
+}
+
+.progress {
+  composes: circleBase;
+  stroke: var(--progress-colour);
+  stroke-dasharray: var(--progress-stroke-dasharray);
+}
+
+.track {
+  composes: circleBase;
+  stroke: var(--track-colour);
+  stroke-dasharray: var(--track-stroke-dasharray);
+}

package/src/components/Score/index.tsx

@@ -0,0 +1,268 @@
+import { Size } from '../../types'
+import type { Range } from '../../lib/typeUtils'
+import { useEffect, useMemo, useState, type CSSProperties } from 'react'
+import styles from './index.module.css'
+import { cn } from '../../lib/utils'
+
+export type ScoreValue = Range<100>
+
+interface ThresholdStyles {
+  /**
+   * The color of the track when the score is greater than the threshold.
+   */
+  [key: number]: string
+}
+
+export interface ScoreProps {
+  /**
+   * The score to display. Must be between 0 and 100.
+   */
+  score: ScoreValue
+  /**
+   * The size of the score component e.g small, medium, large, xl, 2xl
+   */
+  size?: Size
+  /**
+   * Whether to show the label.
+   */
+  showLabel?: boolean
+  /**
+   * The color of the track.
+   */
+  trackColor?: string
+  /**
+   * Custom definition of thresholds for color changes.
+   * e.g [50, 75] will change color to green at 75%, orange at 50%. Otherwise red.
+   */
+  thresholds?: ThresholdStyles
+
+  animate?: boolean
+
+  animationDuration?: number
+  className?: string
+}
+
+const transition = {
+  length: 1000, // ms
+  step: 200, // ms
+  delay: 0, // ms
+}
+const gapPercent = 5
+const strokeWidth = 10
+const circleSize = 100
+const radius = circleSize / 2 - strokeWidth / 2
+const circumference = 2 * Math.PI * radius
+const percentToDegree = 360 / 100 // deg
+const percentToPx = circumference / 100 // px
+const offsetFactor = 0
+const offsetFactorSecondary = 1 - offsetFactor
+
+const sizeMap: Record<Size, number> = {
+  small: 40,
+  medium: 50,
+  large: 60,
+  xl: 70,
+  '2xl': 80,
+}
+
+const defaultThresholds: ThresholdStyles = {
+  0: 'var(--score-low)',
+  40: 'var(--score-mid)',
+  60: 'var(--score-high)',
+}
+
+const defaultTrackColor = 'var(--score-track)'
+
+export function Score({
+  score,
+  size = 'large',
+  showLabel = true,
+  trackColor = defaultTrackColor,
+  thresholds = defaultThresholds,
+  animate = false,
+  animationDuration = 40,
+  className,
+}: ScoreProps) {
+  const [scoreInternal, setScoreInternal] = useState<ScoreValue>(
+    animate ? 0 : score
+  )
+  const strokePercent = scoreInternal // %
+
+  useEffect(() => {
+    if (animate) {
+      const stepSize = Math.max(1, Math.floor(score / 20)) // Increase by 5% of total at minimum
+      const interval = setInterval(() => {
+        setScoreInternal((prevScore) => {
+          if (prevScore >= score) {
+            clearInterval(interval)
+            return score
+          }
+          return Math.min(prevScore + stepSize, score) as ScoreValue
+        })
+      }, animationDuration) // Reduced interval time for smoother animation
+      return () => clearInterval(interval)
+    }
+  }, [])
+
+  const progressColour = useMemo(() => {
+    for (const [threshold, color] of Object.entries(thresholds).reverse()) {
+      if (scoreInternal >= Number(threshold)) return color
+    }
+  }, [scoreInternal, thresholds])
+
+  const primaryStrokeDasharray = () => {
+    if (
+      offsetFactor > 0 &&
+      strokePercent > 100 - gapPercent * 2 * offsetFactor
+    ) {
+      // calculation to gradually shift back to 0 offset as progress nears 100% when offsetFactor > 0
+      const subtract = -strokePercent + 100
+
+      return `${Math.max(strokePercent * percentToPx - subtract * percentToPx, 0)} ${circumference}`
+    } else {
+      const subtract = gapPercent * 2 * offsetFactor
+
+      return `${Math.max(strokePercent * percentToPx - subtract * percentToPx, 0)} ${circumference}`
+    }
+  }
+
+  const secondaryStrokeDasharray = () => {
+    if (
+      offsetFactorSecondary < 1 &&
+      strokePercent < gapPercent * 2 * offsetFactorSecondary
+    ) {
+      // calculation to gradually shift back to 1 secondary offset as progress nears 100% when offsetFactorSecondary < 1
+      const subtract = strokePercent
+
+      return `${Math.max((100 - strokePercent) * percentToPx - subtract * percentToPx, 0)} ${circumference}`
+    } else {
+      const subtract = gapPercent * 2 * offsetFactorSecondary
+
+      return `${Math.max((100 - strokePercent) * percentToPx - subtract * percentToPx, 0)} ${circumference}`
+    }
+  }
+
+  const primaryTransform = () => {
+    if (
+      offsetFactor > 0 &&
+      strokePercent > 100 - gapPercent * 2 * offsetFactor
+    ) {
+      // calculation to gradually shift back to 0 offset as progress nears 100% when offsetFactor > 0
+      const add = 0.5 * (-strokePercent + 100)
+
+      return `rotate(${-90 + add * percentToDegree}deg)`
+    } else {
+      const add = gapPercent * offsetFactor
+
+      return `rotate(${-90 + add * percentToDegree}deg)`
+    }
+  }
+
+  const secondaryTransform = () => {
+    if (
+      offsetFactorSecondary < 1 &&
+      strokePercent < gapPercent * 2 * offsetFactorSecondary
+    ) {
+      // calculation to gradually shift back to 1 secondary offset as progress nears 100% when offsetFactorSecondary < 1
+      const subtract = 0.5 * strokePercent
+
+      return `rotate(${360 - 90 - subtract * percentToDegree}deg) scaleY(-1)`
+    } else {
+      const subtract = gapPercent * offsetFactorSecondary
+
+      return `rotate(${360 - 90 - subtract * percentToDegree}deg) scaleY(-1)`
+    }
+  }
+
+  const primaryOpacity = () => {
+    if (
+      offsetFactor > 0 &&
+      strokePercent < gapPercent * 2 * offsetFactor &&
+      strokePercent < gapPercent * 2 * offsetFactorSecondary
+    ) {
+      return 0
+    } else return 1
+  }
+
+  const secondaryOpacity = () => {
+    if (
+      (offsetFactor === 0 && strokePercent > 100 - gapPercent * 2) ||
+      (offsetFactor > 0 &&
+        strokePercent > 100 - gapPercent * 2 * offsetFactor &&
+        strokePercent > 100 - gapPercent * 2 * offsetFactorSecondary)
+    ) {
+      return 0
+    } else return 1
+  }
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox={`0 0 ${circleSize} ${circleSize}`}
+      shapeRendering="crispEdges"
+      width={sizeMap[size]}
+      height={sizeMap[size]}
+      className={cn(styles.svg, className)}
+      style={
+        {
+          '--stroke-width': strokeWidth,
+          '--transition-length': `${transition?.length}ms`,
+          '--delay': `${transition?.delay}ms`,
+        } as CSSProperties
+      }
+      fill="none"
+    >
+      <circle
+        cx={circleSize / 2}
+        cy={circleSize / 2}
+        r={radius}
+        style={
+          {
+            '--track-colour': trackColor,
+            '--track-stroke-dasharray': secondaryStrokeDasharray(),
+            transform: secondaryTransform(),
+            opacity: secondaryOpacity(),
+          } as CSSProperties
+        }
+        className={styles.track}
+      />
+
+      <circle
+        cx={circleSize / 2}
+        cy={circleSize / 2}
+        r={radius}
+        style={
+          {
+            '--progress-colour': progressColour,
+            '--progress-stroke-dasharray': primaryStrokeDasharray(),
+            '--transition-length': `${transition?.length}ms`,
+            '--delay': `${transition?.delay}ms`,
+            transform: primaryTransform(),
+            opacity: primaryOpacity(),
+          } as CSSProperties
+        }
+        className={styles.progress}
+      />
+
+      {showLabel && (
+        <text
+          x="50%"
+          y="50%"
+          textAnchor="middle"
+          dominantBaseline="middle"
+          alignmentBaseline="central"
+          className={styles.text}
+          style={
+            {
+              '--progress-colour': progressColour,
+              '--transition-length': `${transition?.length}ms`,
+              '--delay': `${transition?.delay}ms`,
+            } as CSSProperties
+          }
+        >
+          {Math.round(strokePercent)}
+        </text>
+      )}
+    </svg>
+  )
+}

package/src/components/ScrollArea/index.tsx

@@ -0,0 +1,48 @@
+'use client'
+
+import * as React from 'react'
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area'
+
+import { cn } from '../../lib/utils'
+
+const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root
+    ref={ref}
+    className={cn('relative overflow-hidden', className)}
+    {...props}
+  >
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+))
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
+
+const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = 'vertical', ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      'flex touch-none transition-colors select-none',
+      orientation === 'vertical' &&
+        'h-full w-2.5 border-l border-l-transparent p-[1px]',
+      orientation === 'horizontal' &&
+        'h-2.5 flex-col border-t border-t-transparent p-[1px]',
+      className
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className="bg-border relative flex-1 rounded-full" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+))
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
+
+export { ScrollArea, ScrollBar }

package/src/components/SegmentedButton/index.module.css

@@ -0,0 +1,19 @@
+.active {
+  border-radius: 50px;
+  background: #f8f8f8;
+  box-shadow:
+    0 0 4px 0 rgba(0, 0, 0, 0.1),
+    0 2px 1px 0 #fff inset,
+    0 -2px 1px 0 rgba(0, 0, 0, 0.05) inset;
+}
+
+:global(.dark) {
+  .active {
+    background: #121212;
+    box-shadow:
+      0 0 6px 0 rgba(0, 0, 0, 0.35),
+      0 2px 1px 0 rgba(255, 255, 255, 0.08) inset,
+      0 -2px 1px 0 rgba(0, 0, 0, 0.45) inset;
+  }
+}
+

package/src/components/SegmentedButton/index.tsx

@@ -0,0 +1,101 @@
+import { cn } from '../../lib/utils'
+import { motion, MotionProps } from 'motion/react'
+import React, { useMemo } from 'react'
+import styles from './index.module.css'
+
+export interface SegmentedButtonProps {
+  children: React.ReactNode
+  className?: string
+}
+
+const SegmentedButtonBase = ({ children, className }: SegmentedButtonProps) => {
+  const [hoveredId, setHoveredId] = React.useState<string | null>(null)
+
+  const enhancedChildren = useMemo(
+    () =>
+      React.Children.map(children, (child) => {
+        if (!React.isValidElement<SegmentedButtonItemProps>(child)) return child
+        const childId: string | undefined = child.props.id
+
+        const onClick: React.MouseEventHandler<HTMLButtonElement> = (e) => {
+          setHoveredId(childId ?? null)
+          child.props.onClick?.(e)
+        }
+
+        const highlighted = hoveredId
+          ? childId === hoveredId
+          : child.props.active
+
+        return React.cloneElement(
+          child as React.ReactElement<SegmentedButtonItemProps>,
+          {
+            highlighted,
+            onClick,
+          }
+        )
+      }),
+    [children]
+  )
+
+  return (
+    <div
+      className={cn(
+        'border-neutral-softest relative inline-flex flex-row items-center overflow-hidden rounded-full border shadow-xs backdrop-blur-md',
+        className
+      )}
+    >
+      {enhancedChildren}
+    </div>
+  )
+}
+
+SegmentedButtonBase.displayName = 'SegmentedButton'
+
+export interface SegmentedButtonItemProps extends MotionProps {
+  children: React.ReactNode
+  className?: string
+  active?: boolean
+  highlighted?: boolean
+  id: string
+  onClick?: React.MouseEventHandler<HTMLButtonElement>
+}
+
+const SegmentedButtonItem = ({
+  children,
+  className,
+  highlighted,
+  ...props
+}: SegmentedButtonItemProps) => {
+  return (
+    <motion.button
+      className="text-codeline-xs hover:text-highlight relative flex items-center rounded-full px-5 py-1 uppercase"
+      {...props}
+    >
+      {highlighted && (
+        <motion.span
+          layoutId="segmented-highlight"
+          className={cn(
+            'absolute inset-0 -z-10 rounded-full shadow-sm',
+            styles.active
+          )}
+          transition={{ type: 'spring', duration: 0.7, bounce: 0.3 }}
+        />
+      )}
+      <span
+        className={cn(
+          'relative z-10',
+          highlighted && 'text-highlight',
+          className
+        )}
+      >
+        {children}
+      </span>
+    </motion.button>
+  )
+}
+
+SegmentedButtonItem.displayName = 'SegmentedButtonItem'
+
+export const SegmentedButton = Object.assign(SegmentedButtonBase, {
+  Item: SegmentedButtonItem,
+})