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

package/src/components/UserAvatar/index.tsx

@@ -0,0 +1,87 @@
+import { cn, getResponsiveClasses } from '../../lib/utils'
+import { ResponsiveValue, Size } from '../../types'
+import { userAvatarSizeMap } from './sizeMap'
+import useTailwindBreakpoint from '../../hooks/useTailwindBreakpoint'
+import { resolveSizeForBreakpoint } from '../../lib/responsiveUtils'
+import { userAvatarSizeMapper } from './sizeMap'
+
+export interface UserAvatarProps {
+  name: string
+  imageUrl?: string
+  size?: ResponsiveValue<Size>
+  border?: boolean
+  className?: string
+}
+
+const fallbackColors = [
+  'bg-red-500',
+  'bg-orange-500',
+  'bg-yellow-500',
+  'bg-green-500',
+  'bg-blue-500',
+  'bg-purple-500',
+  'bg-pink-500',
+]
+
+// deterministically returns a color based on the first letter of the name
+function getFallbackColor(name: string | undefined) {
+  if (!name) return 'bg-gray-900'
+  const firstLetter = name[0].toLowerCase()
+
+  const index = firstLetter.charCodeAt(0) - 'a'.charCodeAt(0)
+  return fallbackColors[index % fallbackColors.length]
+}
+
+export function UserAvatar({
+  name,
+  imageUrl,
+  size = 'medium',
+  border = false,
+  className,
+}: UserAvatarProps) {
+  const breakpoint = useTailwindBreakpoint()
+
+  const resolvedSize = resolveSizeForBreakpoint(breakpoint, size, 'medium')
+  const sizeValue = userAvatarSizeMap[resolvedSize]
+
+  const hasImage = !!imageUrl
+
+  return (
+    <div
+      className={cn(
+        'flex items-center justify-center overflow-hidden rounded-full bg-gray-200',
+        getResponsiveClasses(size, userAvatarSizeMapper),
+        !hasImage && getFallbackColor(name),
+        border && 'border-background border-2',
+        className
+      )}
+    >
+      {hasImage ? (
+        <img
+          src={imageUrl}
+          alt={name}
+          className="h-full w-full object-cover object-center select-none"
+        />
+      ) : (
+        <svg
+          className="h-full w-full select-none"
+          viewBox={`0 0 ${sizeValue} ${sizeValue}`}
+          preserveAspectRatio="xMidYMid meet"
+        >
+          <text
+            x="50%"
+            y="50%"
+            textAnchor="middle"
+            alignmentBaseline="middle"
+            fill="white"
+            fontSize={sizeValue * 0.75}
+            dy="0.075em"
+            fontWeight="semibold"
+          >
+            {name[0] || '✖️'}
+          </text>
+        </svg>
+      )}
+    </div>
+  )
+}

package/src/components/UserAvatar/sizeMap.ts

@@ -0,0 +1,12 @@
+import { Size } from '../../types'
+
+export const userAvatarSizeMap: Record<Size, number> = {
+  small: 8,
+  medium: 12,
+  large: 16,
+  xl: 24,
+  '2xl': 32,
+}
+
+export const userAvatarSizeMapper = (size: Size) =>
+  `size-${userAvatarSizeMap[size]}`

package/src/components/Wizard/index.tsx

@@ -0,0 +1,208 @@
+import * as React from 'react'
+import { cn } from '../../lib/utils'
+import { CodeSnippet, Heading, Text } from '../../index'
+import { useMemo } from 'react'
+import { WizardStep } from './types'
+
+export interface WizardProps {
+  /**
+   * The steps to display in the wizard
+   */
+  steps: WizardStep[]
+
+  /**
+   * The current step number, starting from 1
+   */
+  currentStep: number
+
+  /**
+   * The steps that have been completed, starting from 1
+   */
+  completedSteps: number[]
+
+  headerContent: (
+    completedSteps: number[],
+    steps: WizardStep[]
+  ) => React.ReactNode
+
+  className?: string
+}
+
+export function Wizard({
+  steps,
+  currentStep,
+  completedSteps,
+  headerContent,
+  className,
+}: WizardProps) {
+  const [stepHeights, setStepHeights] = React.useState<Map<number, number>>(
+    new Map()
+  )
+  const stepRefs = React.useRef<Map<number, HTMLDivElement | null>>(new Map())
+
+  React.useEffect(() => {
+    const currentElement = stepRefs.current.get(currentStep)
+    if (currentElement) {
+      setStepHeights((prev) => {
+        const newMap = new Map(prev)
+        newMap.set(currentStep, currentElement.clientHeight)
+        return newMap
+      })
+    }
+  }, [currentStep, completedSteps])
+
+  // Add ResizeObserver to monitor size changes
+  React.useEffect(() => {
+    const resizeObserver = new ResizeObserver((entries) => {
+      entries.forEach((entry) => {
+        const stepNumber = Array.from(stepRefs.current.entries()).find(
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          ([_, el]) => el === entry.target
+        )?.[0]
+
+        if (stepNumber) {
+          setStepHeights((prev) => {
+            const newMap = new Map(prev)
+            newMap.set(stepNumber, entry.target.clientHeight)
+            return newMap
+          })
+        }
+      })
+    })
+
+    // Observe all step elements
+    stepRefs.current.forEach((element) => {
+      if (element) {
+        resizeObserver.observe(element)
+      }
+    })
+
+    return () => {
+      resizeObserver.disconnect()
+    }
+  }, []) // Empty dependency array since we want to set up the observer once
+
+  const getStepStatus = (index: number) => {
+    if (completedSteps.includes(index + 1)) return 'completed'
+    if (index + 1 === currentStep) return 'current'
+    return 'upcoming'
+  }
+
+  const trackHeight = useMemo(() => {
+    return Array.from(
+      {
+        length:
+          completedSteps.length === steps.length
+            ? currentStep
+            : currentStep - 1,
+      },
+      (_, i) => i + 1
+    )
+      .map((step) => {
+        const height = stepHeights.get(step) || 0
+        // Add the top and bottom padding (py-4 = 1rem * 2 = 32px total)
+        return height + 16
+      })
+      .reduce((acc, curr) => acc + curr, 0)
+  }, [currentStep, stepHeights])
+
+  return (
+    <div className={cn('max-w-screen-x flex flex-col gap-2', className)}>
+      <div className="border-b p-6">
+        <div className="flex items-center justify-between">
+          <div className="space-y-1">
+            {headerContent(completedSteps, steps)}
+          </div>
+        </div>
+      </div>
+
+      <div className="relative mt-8 pl-3">
+        <div className="bg-border absolute top-0 bottom-0 left-7 w-px overflow-y-hidden">
+          <div
+            className="bg-primary absolute top-0 left-0 w-full transition-all duration-500"
+            style={{
+              height: trackHeight,
+            }}
+          />
+        </div>
+
+        <div className="flex flex-col gap-8">
+          {steps.map((step, index) => {
+            const status = getStepStatus(index)
+            const stepNumber = index + 1
+
+            return (
+              <div
+                key={index}
+                ref={(el) => stepRefs.current.set(stepNumber, el)}
+              >
+                <div
+                  className={cn(
+                    'relative pl-16',
+                    status === 'completed' && 'text-body'
+                  )}
+                >
+                  <div className="flex items-center gap-2">
+                    <div
+                      className={cn(
+                        'absolute left-0 flex h-8 w-8 items-center justify-center rounded-full text-sm font-semibold',
+                        // TODO: update these to use new color tokens
+                        status === 'completed' &&
+                          'bg-success-default text-highlight-fixed-light',
+                        status === 'current' &&
+                          'bg-surface-primary-inverse text-default-inverse scale-110',
+                        status === 'upcoming' && 'bg-muted text-muted'
+                      )}
+                    >
+                      {stepNumber}
+                    </div>
+
+                    {/* TODO: is this the best way to handle the opacity? */}
+                    <div className={cn(status === 'upcoming' && 'opacity-50')}>
+                      <Heading variant="md" as="h2">
+                        {step.title}
+                      </Heading>
+                    </div>
+                  </div>
+
+                  {/* TODO: is this the best way to handle the opacity? */}
+                  <div
+                    className={cn(
+                      'mt-2 mb-4',
+                      status === 'upcoming' && 'opacity-50'
+                    )}
+                  >
+                    <Text muted>{step.description}</Text>
+                  </div>
+
+                  <div
+                    className={cn(
+                      'mt-8 flex w-full flex-col gap-5',
+                      status === 'upcoming' && 'opacity-50'
+                    )}
+                  >
+                    {/* TODO: update this to CodeBlock component */}
+                    {status === 'current' &&
+                      step.commands?.map((command, cmdIndex) => (
+                        <CodeSnippet
+                          key={cmdIndex}
+                          code={command.code}
+                          language={command.language}
+                          onSelectOrCopy={() =>
+                            command.onSelectOrCopy?.(command.id)
+                          }
+                          copyable
+                          fontSize="small"
+                          shimmer={command.active}
+                        />
+                      ))}
+                  </div>
+                </div>
+              </div>
+            )
+          })}
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/Wizard/types.ts

@@ -0,0 +1,17 @@
+import { ProgrammingLanguage } from '../../types'
+
+export interface WizardCommand {
+  id: string
+  code: string
+  language: ProgrammingLanguage
+  comment?: string
+  active?: boolean
+  path?: string
+  onSelectOrCopy?: (id: string) => void
+}
+
+export interface WizardStep {
+  title: string
+  description: string
+  commands?: WizardCommand[]
+}

package/src/components/WorkspaceSelector/CreateOrg.tsx

@@ -0,0 +1,95 @@
+import { useRef, useState, useEffect } from 'react'
+import { Org } from '.'
+import { Command } from '../Command'
+import { Stack } from '../Stack'
+import { GradientCircle } from '../GradientCircle'
+import { Separator } from '../Separator'
+import { Text } from '../Text'
+import { Button } from '../Button'
+import { Heading } from '../../index'
+
+interface CreateOrgProps {
+  onSubmit: (name: string) => Promise<Org>
+}
+
+export function CreateOrg({ onSubmit }: CreateOrgProps) {
+  const [companyName, setCompanyName] = useState('')
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.focus()
+    }
+  }, [])
+
+  return (
+    <Command className="relative">
+      <div className="flex h-full w-full flex-row items-center">
+        <div className="flex w-1/3 flex-col items-center justify-center gap-4 px-8 text-center">
+          <div className="flex flex-col items-center justify-center gap-4">
+            <GradientCircle
+              name={companyName}
+              size="2xl"
+              transition
+              showInitial
+            />
+            <Stack align="center" gap={2}>
+              <Heading variant="xl">Create new company</Heading>
+              <div className="max-w-64">
+                <Text muted>
+                  Once you have created your company, we'll take you through
+                  some onboarding steps to get you started with Speakeasy.
+                </Text>
+              </div>
+            </Stack>
+          </div>
+        </div>
+
+        <Separator orientation="vertical" />
+
+        <div className="flex w-2/3 flex-col items-center justify-center px-8">
+          <div className="flex max-w-lg flex-col">
+            <div className="flex flex-col gap-4">
+              <Stack align="start" gap={2}>
+                <Text variant="lg">Enter your company name</Text>
+                <Text muted>
+                  We will automatically generate a unique, URL-friendly slug
+                  based off your company name.
+                </Text>
+              </Stack>
+            </div>
+            <div className="flex flex-col">
+              <div className="focus-within:outline-muted/50 shadow-muted bg-input/10 border-neutral-softest ease-in-out-expo mt-5 flex w-full max-w-[660px] flex-row items-center justify-stretch gap-2 rounded-md border px-4 py-1 transition-[border-color] duration-500 focus-within:shadow-sm focus-within:outline focus-within:outline-offset-0 data-[invalid=true]:border-red-400/75">
+                <div className="flex w-full">
+                  <input
+                    type="text"
+                    role="textbox"
+                    name="companyName"
+                    pattern="^[a-z0-9]+(?:-[a-z0-9]+)*$"
+                    ref={inputRef}
+                    placeholder="Your company name"
+                    value={companyName}
+                    onChange={(e) => setCompanyName(e.target.value)}
+                    className="border-neutral-softest text-foreground/80 placeholder:text-muted-foreground/50 ring-offset-background text-md flex h-10 w-full min-w-fit flex-1 flex-grow bg-transparent px-2 py-1.5 pl-0 text-lg outline-none"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="border-neutral-softest bg-background flex border-t px-8 py-4">
+        <div className="ml-auto">
+          <Button
+            variant="secondary"
+            disabled={!companyName}
+            onClick={() => onSubmit(companyName)}
+          >
+            Next
+          </Button>
+        </div>
+      </div>
+    </Command>
+  )
+}

package/src/components/WorkspaceSelector/CreateWorkspace.tsx

@@ -0,0 +1,196 @@
+import React, { useCallback, useEffect, useState } from 'react'
+import { Org } from '.'
+import { Command } from '../Command'
+import { Text } from '../Text'
+import { Icon } from '../Icon'
+import { Button, Heading, Stack } from '../../index'
+import { Separator } from '../Separator'
+import { GradientCircle } from '../GradientCircle'
+
+import { cn } from '../../lib/utils'
+import { OrgSelector } from './OrgSelector'
+
+export interface CreateResult {
+  success: boolean
+  error?: string
+}
+
+interface CreateWorkspaceProps {
+  open: boolean
+  selectedOrg: Org
+  allOrgs: Org[]
+  onBack?: () => void
+  onSubmit: (org: Org, workspaceName: string) => Promise<CreateResult>
+  newWorkspaceName: string
+  setNewWorkspaceName: (name: string) => void
+  backButtonEnabled?: boolean
+}
+
+export function CreateWorkspace({
+  open,
+  selectedOrg,
+  allOrgs,
+  onBack,
+  onSubmit,
+  newWorkspaceName,
+  setNewWorkspaceName,
+  backButtonEnabled = true,
+}: CreateWorkspaceProps) {
+  const createInputRef = React.useRef<HTMLInputElement>(null)
+  const [isInvalid, setIsInvalid] = useState(false)
+  const [currentOrg, setCurrentOrg] = useState(selectedOrg)
+  const [isSubmitting, setIsSubmitting] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  React.useEffect(() => {
+    if (open) {
+      setTimeout(() => {
+        createInputRef.current?.focus()
+      }, 300)
+    }
+  }, [open])
+
+  useEffect(() => {
+    // Focus the input when the org changes
+    focusInput()
+  }, [currentOrg])
+
+  const focusInput = () => {
+    createInputRef.current?.focus()
+  }
+
+  const handleSubmit = async () => {
+    setIsSubmitting(true)
+    const result = await onSubmit(currentOrg, newWorkspaceName)
+    setIsSubmitting(false)
+    if (!result.success) {
+      setError(result.error ?? 'Unknown error')
+    }
+  }
+
+  const handleChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      setNewWorkspaceName(e.target.value)
+      setIsInvalid(!e.target.validity.valid)
+    },
+    [setNewWorkspaceName, setIsInvalid]
+  )
+
+  return (
+    <Command className="relative">
+      <div className="flex h-full w-full flex-row items-center">
+        <div className="flex w-1/3 flex-col items-center justify-center gap-4 px-8 text-center">
+          <div className="flex flex-col items-center justify-center gap-4">
+            <GradientCircle name={currentOrg.label} size="2xl" showInitial />
+            <Stack align="center" gap={2}>
+              <Heading variant="xl">Create new workspace</Heading>
+              <div className="max-w-64">
+                <Text muted>
+                  Workspaces are used to organize your SDK targets into logical
+                  groups.
+                </Text>
+              </div>
+            </Stack>
+          </div>
+        </div>
+
+        <Separator orientation="vertical" />
+
+        <div className="flex w-2/3 flex-col items-center justify-center px-8">
+          <div className="flex max-w-lg flex-col">
+            <div className="flex flex-col gap-4">
+              <Stack align="start" gap={2}>
+                <Text variant="lg">Choose your workspace name</Text>
+                <Text muted>
+                  Enter a name for your new workspace. Names must be in slug
+                  format; only lowercase letters, numbers, and hyphens are
+                  allowed.
+                </Text>
+              </Stack>
+            </div>
+            <div className="flex flex-col">
+              <div
+                className="focus-within:outline-muted/50 shadow-muted bg-input/10 border-neutral-softest ease-in-out-expo mt-5 flex w-full max-w-[660px] flex-row items-center justify-stretch gap-2 rounded-md border px-4 py-1 transition-[border-color] duration-500 focus-within:shadow-sm focus-within:outline focus-within:outline-1 focus-within:outline-offset-0 data-[invalid=true]:border-red-400/75"
+                onClick={focusInput}
+                data-invalid={isInvalid}
+              >
+                {allOrgs.length > 1 ? (
+                  <OrgSelector
+                    orgs={allOrgs}
+                    selectedOrg={currentOrg}
+                    onSelect={setCurrentOrg}
+                  />
+                ) : (
+                  <span
+                    title={currentOrg.slug}
+                    className={cn(
+                      'text-foreground/80 text-lg font-semibold whitespace-pre select-none',
+                      currentOrg.slug.length > 20 &&
+                        'max-w-40 truncate whitespace-pre'
+                    )}
+                  >
+                    {currentOrg.slug}
+                  </span>
+                )}
+                <span className="text-muted-foreground/50 mx-2 text-lg select-none">
+                  /
+                </span>
+                <div className="flex w-full">
+                  <input
+                    ref={createInputRef}
+                    type="text"
+                    pattern="^[a-z0-9]+(?:-[a-z0-9]+)*$"
+                    role="textbox"
+                    name="workspaceName"
+                    placeholder="your-new-workspace"
+                    value={newWorkspaceName}
+                    onChange={handleChange}
+                    className="border-neutral-softest text-foreground/80 placeholder:text-muted-foreground/50 ring-offset-background text-md flex h-10 w-full min-w-fit flex-1 flex-grow bg-transparent px-2 py-1.5 pl-0 text-lg outline-none"
+                  />
+                </div>
+              </div>
+
+              <div className="mt-2.5 min-h-6 self-start">
+                {newWorkspaceName &&
+                  !newWorkspaceName.match(/^[a-z0-9]+(?:-[a-z0-9]+)*$/) && (
+                    <div className="text-sm text-red-400/75">
+                      Workspace names can only contain lowercase letters,
+                      numbers, and hyphens
+                    </div>
+                  )}
+                {error && (
+                  <div className="text-sm text-red-400/75">{error}</div>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="border-neutral-softest bg-background flex border-t px-8 py-4">
+        {backButtonEnabled && onBack && (
+          <Button variant="secondary" onClick={onBack}>
+            <Icon name="chevron-left" size="small" />
+            Back
+          </Button>
+        )}
+        <div className="ml-auto">
+          <Button
+            variant="secondary"
+            disabled={
+              !newWorkspaceName ||
+              !newWorkspaceName.match(/^[a-z0-9]+(?:-[a-z0-9]+)*$/)
+            }
+            onClick={handleSubmit}
+          >
+            {isSubmitting ? (
+              <Icon name="loader" className="animate-spin" />
+            ) : (
+              'Create'
+            )}
+          </Button>
+        </div>
+      </div>
+    </Command>
+  )
+}