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

package/src/components/ExternalPill/index.tsx

@@ -0,0 +1,58 @@
+// TODO: https://linear.app/speakeasy/issue/SXF-173/external-pill-component
+import React, { useState, useEffect } from 'react'
+import { Icon as FallbackIcon } from '../Icon'
+import { cn } from '../../lib/utils'
+
+type AllExternalIcons =
+  | 'github'
+  | 'npm'
+  | 'rubygems'
+  | 'nuget'
+  | 'maven'
+  | 'pypi'
+  | 'packagist'
+  | 'terraform'
+const supportedExternals = ['github', 'npm', 'rubygems']
+
+export interface ExternalPillProps {
+  href: string
+  icon: AllExternalIcons
+  text: React.ReactNode
+  title?: string
+  target?: '_blank' | '_self' | '_parent' | '_top'
+  className?: string
+}
+
+export function ExternalPill({
+  href,
+  icon,
+  text,
+  target = '_blank',
+  title,
+  className,
+}: ExternalPillProps) {
+  const [Icon, setIcon] = useState<React.ComponentType | null>(null)
+
+  useEffect(() => {
+    if (supportedExternals.includes(icon)) {
+      import(`../../assets/icons/external/${icon}.svg?react`).then((module) =>
+        setIcon(module.default)
+      )
+    }
+  }, [icon])
+
+  return (
+    <a
+      href={href}
+      target={target}
+      title={title}
+      className={cn(
+        'inline-flex flex-row items-center gap-1.5 rounded-xl border px-3.5 py-2 text-zinc-700 transition-colors duration-500 hover:border-zinc-300 hover:bg-zinc-50 hover:text-black dark:text-zinc-300 dark:hover:border-zinc-700 dark:hover:bg-zinc-900 hover:dark:text-white',
+        className
+      )}
+    >
+      {Icon ? <Icon /> : <FallbackIcon name="external-link" />}
+      <p className="text-xs font-normal">{text}</p>
+    </a>
+  )
+}

package/src/components/Facepile/index.tsx

@@ -0,0 +1,309 @@
+import React, { useState, useRef, useEffect } from 'react'
+import { motion, AnimatePresence } from 'motion/react'
+import { ResponsiveValue, Size } from '../../types'
+import { UserAvatar, UserAvatarProps } from '../UserAvatar'
+import { userAvatarSizeMap, userAvatarSizeMapper } from '../UserAvatar/sizeMap'
+import { cn, getResponsiveClasses } from '../../lib/utils'
+import useTailwindBreakpoint from '../../hooks/useTailwindBreakpoint'
+import { resolveSizeForBreakpoint } from '../../lib/responsiveUtils'
+
+type FacepileVariant = 'interactive' | 'static'
+type AvatarProps = Omit<UserAvatarProps, 'size'> & { href?: string }
+
+export interface FacepileProps {
+  avatars: AvatarProps[]
+  maxFaces?: number
+  avatarSize?: ResponsiveValue<Size>
+  variant?: FacepileVariant
+  tooltips?: boolean
+  className?: string
+}
+
+export function Facepile({
+  avatars = [],
+  maxFaces = 3,
+  avatarSize = 'medium',
+  variant = 'interactive',
+  tooltips = true,
+  className,
+}: FacepileProps) {
+  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null)
+  const [prevHoveredIndex, setPrevHoveredIndex] = useState<number | null>(null)
+  const [tooltipVisible, setTooltipVisible] = useState(false)
+  const [isExpanded, setIsExpanded] = useState(false)
+  const isHovered = useRef(false)
+
+  const breakpoint = useTailwindBreakpoint()
+  const resolvedSize = resolveSizeForBreakpoint(
+    breakpoint,
+    avatarSize,
+    'medium'
+  )
+
+  const overlap = 0.6
+  const size = userAvatarSizeMap[resolvedSize] * 4 // *4 as avatarSizeMap is a record of tailwind sizes - possibly a better way to do this
+  const offsetX = size * overlap // How much each avatar overlaps
+
+  const visibleFaces = avatars.slice(0, maxFaces)
+  const hiddenFaces = avatars.slice(maxFaces)
+  const extraFaces = Math.max(0, avatars.length - maxFaces)
+
+  const containerRef = useRef<HTMLDivElement>(null)
+  const tooltipRef = useRef<HTMLDivElement>(null)
+  const [tooltipWidth, setTooltipWidth] = useState(0)
+
+  useEffect(() => {
+    if (tooltipRef.current) {
+      const updateTooltipWidth = () => {
+        if (tooltipRef.current?.offsetWidth) {
+          setTooltipWidth(tooltipRef.current!.offsetWidth)
+        }
+      }
+      updateTooltipWidth()
+      const resizeObserver = new ResizeObserver(updateTooltipWidth)
+      resizeObserver.observe(tooltipRef.current)
+      return () => resizeObserver.disconnect()
+    }
+  }, [hoveredIndex, visibleFaces])
+
+  useEffect(() => {
+    if (hoveredIndex !== null) {
+      setTooltipVisible(true)
+      setPrevHoveredIndex(hoveredIndex)
+    } else {
+      setTooltipVisible(false)
+    }
+  }, [hoveredIndex])
+
+  const getTooltipPosition = (index: number, tooltipWidth: number) => {
+    const avatarCenter = index * offsetX + size / 2
+    return avatarCenter - tooltipWidth / 2
+  }
+
+  const handleContainerMouseLeave = () => {
+    setHoveredIndex(null)
+    setIsExpanded(false)
+    isHovered.current = false
+  }
+
+  const handleContainerMouseEnter = () => {
+    isHovered.current = true
+  }
+
+  const handleMouseEnter = (index: number) => {
+    setHoveredIndex(index)
+    if (index < maxFaces) {
+      setIsExpanded(false)
+    } else {
+      setIsExpanded(true)
+    }
+  }
+
+  const handleHoverExpand = () => {
+    if (variant === 'interactive') {
+      setTimeout(() => {
+        if (isHovered.current) {
+          setIsExpanded(true)
+        }
+      }, 400)
+    }
+  }
+
+  const containerWidth = isExpanded
+    ? avatars.length * offsetX + size - offsetX
+    : visibleFaces.length * offsetX +
+      size -
+      offsetX +
+      (extraFaces > 0 ? offsetX : 0)
+
+  const getTooltipAnimation = (index: number | null) => {
+    if (prevHoveredIndex === null || index === null) return {}
+    const direction = index > prevHoveredIndex ? 1 : -1
+    return {
+      initial: { opacity: 0, x: -15 * direction },
+      animate: { opacity: 1, x: 0 },
+      exit: { opacity: 0, x: 20 * direction },
+      transition: { duration: 0.2 },
+    }
+  }
+
+  return (
+    <motion.div
+      ref={containerRef}
+      className={cn('relative', className)}
+      style={{ height: size }}
+      animate={{ width: containerWidth }}
+      transition={{ duration: 0.3, ease: 'easeInOut' }}
+      onMouseEnter={handleContainerMouseEnter}
+      onMouseLeave={handleContainerMouseLeave}
+    >
+      {visibleFaces.map((face, index) => (
+        <AvatarWrapper
+          key={face.name}
+          avatar={face}
+          avatarSize={avatarSize}
+          index={index}
+          size={size}
+          offsetX={offsetX}
+          hoveredIndex={variant === 'interactive' ? hoveredIndex : null}
+          handleMouseEnter={handleMouseEnter}
+          totalFaces={visibleFaces.length}
+          isExpanded={isExpanded}
+          maxFaces={maxFaces}
+          interactive={variant === 'static' ? false : true}
+        />
+      ))}
+
+      {variant === 'interactive' && (
+        <AnimatePresence>
+          {isExpanded &&
+            hiddenFaces.map((face, index) => (
+              <AvatarWrapper
+                key={face.name}
+                avatar={face}
+                avatarSize={avatarSize}
+                index={index + maxFaces}
+                size={size}
+                offsetX={offsetX}
+                hoveredIndex={hoveredIndex}
+                handleMouseEnter={handleMouseEnter}
+                totalFaces={avatars.length}
+                isExpanded={isExpanded}
+                maxFaces={maxFaces}
+                interactive={true}
+                initial={{ opacity: 0, scale: 0.5, x: -size / 2 }}
+                animate={{ opacity: 1, scale: 1, x: 0 }}
+                exit={{ opacity: 0, scale: 0.5, x: -size / 2 }}
+                transition={{ duration: 0.3, ease: 'easeInOut' }}
+              />
+            ))}
+        </AnimatePresence>
+      )}
+
+      <AnimatePresence>
+        {tooltips && tooltipVisible && hoveredIndex !== null && (
+          <motion.div
+            ref={tooltipRef}
+            layout
+            initial={{ opacity: 0 }}
+            animate={{
+              opacity: 1,
+              x: getTooltipPosition(hoveredIndex ?? 0, tooltipWidth),
+            }}
+            exit={{ opacity: 0 }}
+            transition={{ duration: 0.15, ease: 'easeOut' }}
+            className={`pointer-events-none absolute left-0 z-10 flex h-5 items-center justify-center rounded-full bg-black px-2 text-xs font-medium whitespace-nowrap text-white`}
+            style={{
+              top: size + 4,
+            }}
+          >
+            <AnimatePresence mode="wait">
+              <motion.span
+                key={avatars[hoveredIndex].name}
+                {...getTooltipAnimation(hoveredIndex)}
+              >
+                {avatars[hoveredIndex].name}
+              </motion.span>
+            </AnimatePresence>
+          </motion.div>
+        )}
+      </AnimatePresence>
+
+      {extraFaces > 0 && !isExpanded && (
+        <motion.div
+          className="absolute z-0"
+          style={{
+            left: visibleFaces.length * offsetX,
+          }}
+          onMouseEnter={handleHoverExpand}
+          whileHover={{ scale: variant === 'interactive' ? 1.1 : 1 }}
+        >
+          <div
+            className={cn(
+              'border-background ml-1.5 flex items-center justify-center rounded-full border-2 bg-gray-200 text-sm font-medium text-gray-600',
+              getResponsiveClasses(avatarSize, userAvatarSizeMapper)
+            )}
+          >
+            +{extraFaces}
+          </div>
+        </motion.div>
+      )}
+    </motion.div>
+  )
+}
+
+function AvatarWrapper({
+  avatar,
+  avatarSize,
+  index,
+  size,
+  offsetX,
+  hoveredIndex,
+  handleMouseEnter,
+  totalFaces,
+  isExpanded,
+  maxFaces,
+  interactive,
+  ...motionProps
+}: {
+  avatar: AvatarProps
+  avatarSize?: ResponsiveValue<Size>
+  index: number
+  size: number
+  offsetX: number
+  hoveredIndex: number | null
+  handleMouseEnter: (index: number) => void
+  totalFaces: number
+  isExpanded: boolean
+  maxFaces: number
+  interactive: boolean
+} & React.ComponentProps<typeof motion.div>) {
+  return (
+    <motion.div
+      className="absolute"
+      style={{
+        left: index * offsetX,
+        zIndex:
+          interactive && hoveredIndex === index
+            ? totalFaces + 1
+            : isExpanded
+              ? totalFaces - index
+              : index < maxFaces
+                ? maxFaces - index
+                : 0,
+      }}
+      whileHover={{ scale: interactive ? 1.1 : 1 }}
+      animate={{
+        x:
+          hoveredIndex === null || !interactive
+            ? 0
+            : hoveredIndex === index
+              ? 0
+              : hoveredIndex < index
+                ? size * 0.2
+                : -size * 0.2,
+      }}
+      transition={{ type: 'spring', stiffness: 300, damping: 20 }}
+      onMouseEnter={() => handleMouseEnter(index)}
+      {...motionProps}
+    >
+      {avatar.href ? (
+        <a href={avatar.href}>
+          <UserAvatar
+            name={avatar.name}
+            imageUrl={avatar.imageUrl}
+            size={avatarSize}
+            border
+          />
+        </a>
+      ) : (
+        <UserAvatar
+          name={avatar.name}
+          imageUrl={avatar.imageUrl}
+          size={avatarSize}
+          border
+        />
+      )}
+    </motion.div>
+  )
+}

package/src/components/GradientCircle/gradientCircle.css

@@ -0,0 +1,34 @@
+@reference '../../global.css';
+
+@property --from-color {
+  syntax: '<color>';
+  inherits: false;
+  initial-value: red;
+}
+
+@property --to-color {
+  syntax: '<color>';
+  inherits: false;
+  initial-value: blue;
+}
+
+.gradient-circle {
+  box-sizing: border-box;
+  background: linear-gradient(var(--from-color), var(--to-color));
+}
+
+.gradient-circle-initial {
+  @apply text-5xl;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(var(--translate));
+  font-weight: bold;
+  color: white;
+  line-height: 1em;
+  text-align: center;
+  display: flex;
+  align-items: center;
+  text-shadow: 1px 0 5px rgb(0, 0, 0, 0.2);
+  justify-content: center;
+}

package/src/components/GradientCircle/index.tsx

@@ -0,0 +1,143 @@
+import { cn } from '../../lib/utils'
+import { Size } from '../../types'
+import './gradientCircle.css'
+import { useMemo } from 'react'
+
+export interface GradientCircleProps {
+  name: string
+  size?: Size
+  transition?: boolean
+  showInitial?: boolean
+  inactive?: boolean
+  className?: string
+}
+
+const initialSizeMap: Record<Size, number> = {
+  small: 16,
+  medium: 24,
+  large: 24,
+  xl: 36,
+  '2xl': 48,
+}
+
+const sizeClasses = {
+  small: 'h-6 w-6 border-2',
+  medium: 'h-8 w-8 border-2',
+  large: 'h-10 w-10 border-4',
+  xl: 'h-12 w-12 border-4',
+  '2xl': 'h-20 w-20 border-4',
+}
+
+export function GradientCircle({
+  name,
+  size = 'small',
+  transition = false,
+  showInitial = false,
+  inactive = false,
+  className,
+}: GradientCircleProps) {
+  const initial = useMemo<string | undefined>(
+    () => (name.length > 0 ? name[0].toUpperCase() : undefined),
+    [name]
+  )
+  // Define vibrant base colors (in HSL)
+  const baseColors = [
+    0, // Red
+    30, // Orange
+    60, // Yellow
+    120, // Green
+    180, // Cyan
+    210, // Blue
+    270, // Purple
+    300, // Pink
+    330, // Magenta
+  ]
+
+  // Generate hash for color selection
+  const hash = name.split('').reduce((acc, char, i) => {
+    const charCode = char.charCodeAt(0)
+    return (acc * 31 + charCode * (i + 1)) >>> 0
+  }, 5381)
+
+  // Select base color from hash
+  const baseColorIndex = hash % baseColors.length
+  const baseHue = baseColors[baseColorIndex]
+
+  // Create harmonious color pair using analogous colors (30° apart)
+  const hue1 = baseHue
+  const hue2 = (baseHue + 30) % 360 // Wrap around 360 degrees
+
+  // Adjust saturation and lightness for better blending
+  // First color is more saturated, second is slightly lighter
+  const fromColor = `hsl(${hue1}, 85%, 60%)`
+  const toColor = `hsl(${hue2}, 75%, 65%)`
+
+  return (
+    <div
+      className={cn(
+        'gradient-circle relative min-h-6 min-w-6 rounded-full border-white',
+        size && `${sizeClasses[size]}`,
+        inactive && 'opacity-50',
+        className
+      )}
+      style={
+        {
+          '--from-color': fromColor,
+          '--to-color': toColor,
+          transition: transition
+            ? '--from-color 0.5s, --to-color 2s'
+            : undefined,
+        } as React.CSSProperties
+      }
+    >
+      {showInitial && name.length > 0 && (
+        <div
+          className="gradient-circle-initial"
+          style={
+            {
+              '--translate': initial
+                ? getInitialTranslateY(initial)
+                : undefined,
+              fontSize: initialSizeMap[size],
+            } as React.CSSProperties
+          }
+        >
+          {name[0].toUpperCase()}
+        </div>
+      )}
+    </div>
+  )
+}
+
+/**
+ * every letter has a different central focal point
+ * so may need some adjustment in order to center them
+ */
+function getInitialTranslateY(letter: string): [string, string] {
+  switch (letter) {
+    case 'A':
+      return ['-50%', '-55%']
+    case 'B':
+      return ['-50%', '-55%']
+    case 'C':
+      return ['-54%', '-50%']
+    case 'D':
+      return ['-46%', '-50%']
+    case 'E':
+      return ['-52%', '-50%']
+    case 'F':
+      return ['-50%', '-52%']
+    case 'G':
+      return ['-52%', '-52%']
+    case 'J':
+      return ['-55%', '-52%']
+    case 'L':
+      return ['-47%', '-54%']
+    case 'Q':
+      return ['-53%', '-55%']
+    case 'R':
+      return ['-52%', '-55%']
+    default:
+      return ['-50%', '-50%']
+  }
+}

package/src/components/Grid/index.tsx

@@ -0,0 +1,150 @@
+import {
+  colSpanMapper,
+  gapMapper,
+  paddingMapper,
+} from '../../lib/responsiveMappers'
+import { cn, getResponsiveClasses } from '../../lib/utils'
+import { Columns, Gap, Padding, ResponsiveValue } from '../../types'
+import { isValidElement, ReactElement } from 'react'
+
+export interface GridProps {
+  /**
+   * The number of columns in the grid.
+   * @default 1
+   * @example Default
+   * <Grid columns={2}>
+   *   <Grid.Item>Item 1</Grid.Item>
+   *   <Grid.Item>Item 2</Grid.Item>
+   * </Grid>
+   * @example With responsive columns
+   * <Grid columns={{ xs: 1, md: 2 }}>
+   *   <Grid.Item>Item 1</Grid.Item>
+   *   <Grid.Item>Item 2</Grid.Item>
+   * </Grid>
+   */
+  columns?: ResponsiveValue<Columns>
+
+  /**
+   * The gap between the grid items.
+   * @default 0
+   * @example Default
+   * <Grid gap={4}>
+   *   <Grid.Item>Item 1</Grid.Item>
+   *   <Grid.Item>Item 2</Grid.Item>
+   * </Grid>
+   * @example With responsive gap
+   * <Grid gap={{ xs: 2, md: 4 }}>
+   *   <Grid.Item>Item 1</Grid.Item>
+   *   <Grid.Item>Item 2</Grid.Item>
+   * </Grid>
+   */
+  gap?: ResponsiveValue<Gap>
+
+  /**
+   * The Grid.Item children of the grid.
+   * @example
+   * <Grid>
+   *   <Grid.Item>Item 1</Grid.Item>
+   *   <Grid.Item>Item 2</Grid.Item>
+   * </Grid>
+   */
+  children: Array<ReactElement<typeof GridItem>>
+
+  /**
+   * If true, the grid will wrap its children.
+   * @default false
+   */
+  wrap?: boolean
+
+  /**
+   * Can be an object of responsive Padding values, or just Padding values.
+   *
+   * @example Simple Padding
+   * padding: 10
+   *
+   * @example Responsive Padding
+   * padding: { xs: 10, md: 20, lg: 30, xl: 40 }
+   *
+   * @example Padding per side
+   * padding: { top: 10, right: 0, bottom: 10, left: 0 }
+   *
+   * @example Responsive Padding per side (just x and y axis)
+   * padding: { xs: 0, md: 0, lg: 0, xl: { x: 10, y: 12 } }
+   *
+   * @example Responsive Padding per side with different values for each side
+   * padding: { xs: 0, md: 0, lg: 0, xl: { top: 10, right: 0, bottom: 10, left: 0 } }
+   */
+  padding?: ResponsiveValue<Padding>
+
+  className?: string
+}
+
+const columnsMapper = (columns: Columns) => `grid-cols-${columns}`
+
+const isValidGridChild = (child: ReactElement) =>
+  isValidElement(child) && child.type === GridItem
+
+const Grid = ({
+  children,
+  columns = 1,
+  gap = 0,
+  wrap = true,
+  padding = 0,
+  className,
+}: GridProps) => {
+  const validGridChildren = children.filter(isValidGridChild)
+  return (
+    <div
+      className={cn(
+        'grid',
+        getResponsiveClasses(columns, columnsMapper),
+        getResponsiveClasses(gap, gapMapper),
+        !wrap && 'grid-flow-col',
+        getResponsiveClasses(padding, paddingMapper),
+        className
+      )}
+    >
+      {validGridChildren}
+    </div>
+  )
+}
+
+type PermittedHTMLAttributes = Omit<
+  React.HTMLAttributes<HTMLDivElement>,
+  'className'
+>
+
+interface GridItemProps extends PermittedHTMLAttributes {
+  children: React.ReactNode
+  colSpan?: ResponsiveValue<number>
+  padding?: ResponsiveValue<Padding>
+  className?: string
+}
+
+const GridItem = ({
+  children,
+  colSpan,
+  padding,
+  className,
+  ...props
+}: GridItemProps) => {
+  return (
+    <div
+      className={cn(
+        'grid-item',
+        colSpan && getResponsiveClasses(colSpan, colSpanMapper),
+        padding && getResponsiveClasses(padding, paddingMapper),
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}
+
+const GridWithSubcomponents = Object.assign(Grid, {
+  Item: GridItem,
+})
+
+export { GridWithSubcomponents as Grid }