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

package/src/components/WorkspaceSelector/OrgList.tsx

@@ -0,0 +1,115 @@
+import { Org } from '.'
+import { CommandItem } from '../Command'
+import { GradientCircle } from '../GradientCircle'
+import { Icon } from '../Icon'
+import { cn } from '../../lib/utils'
+import { ScrollingList } from './ScrollingList'
+import { VirtuosoHandle } from 'react-virtuoso'
+import { useEffect, useRef, useState } from 'react'
+import { SearchBox } from './SearchBox'
+import { Text } from '../Text'
+
+interface OrgListProps {
+  orgs: Org[]
+  enableRecents: boolean
+  showRecents: boolean
+  selectedOrg: Org | null
+  setSelectedOrg: (org: Org) => void
+  onSelectRecent: () => void
+  filterOrgFunc: (org: Org, search: string) => boolean
+}
+
+export function OrgList({
+  orgs,
+  showRecents,
+  selectedOrg,
+  setSelectedOrg,
+  enableRecents,
+  onSelectRecent,
+  filterOrgFunc,
+}: OrgListProps) {
+  const virtuoso = useRef<VirtuosoHandle | null>(null)
+  const [search, setSearch] = useState('')
+  const inputRef = useRef<HTMLInputElement>(null)
+  const [filteredOrgs, setFilteredOrgs] = useState(orgs)
+
+  useEffect(() => {
+    setFilteredOrgs(orgs.filter((org) => filterOrgFunc(org, search)))
+  }, [search, filterOrgFunc, orgs])
+
+  useEffect(() => {
+    if (selectedOrg && virtuoso.current) {
+      const index = orgs.findIndex((org) => org.slug === selectedOrg.slug)
+
+      setTimeout(() => {
+        virtuoso.current?.scrollIntoView({
+          index,
+          behavior: orgs.length < 10 ? 'smooth' : 'auto',
+        })
+      }, 100)
+    }
+  }, [selectedOrg, orgs])
+
+  return (
+    <div className="border-neutral-softest flex w-1/3 flex-col border-r">
+      <SearchBox
+        inputRef={inputRef}
+        placeholder="Search organizations..."
+        search={search}
+        setSearch={setSearch}
+      />
+
+      {filteredOrgs.length > 0 ? (
+        <ScrollingList
+          items={filteredOrgs}
+          ref={virtuoso}
+          renderItem={(org) => (
+            <CommandItem
+              key={org.slug}
+              onSelect={() => setSelectedOrg(org)}
+              value={`org-${org.slug}`}
+              className={cn(
+                'hover:!bg-accent/40 flex max-w-lg cursor-pointer flex-row gap-3 rounded-none p-4 text-base',
+                !showRecents &&
+                  selectedOrg?.slug === org.slug &&
+                  'bg-accent/40 text-accent-foreground font-semibold'
+              )}
+            >
+              <GradientCircle name={org.label} />
+              <Text className="truncate">{org.slug}</Text>
+              {!showRecents && selectedOrg?.slug === org.slug && (
+                <div className="ml-auto">
+                  <Icon name="chevron-right" size="small" />
+                </div>
+              )}
+            </CommandItem>
+          )}
+        />
+      ) : (
+        <div className="text-muted-foreground m-auto flex h-full max-w-2/3 items-center justify-center p-6 text-center">
+          No organizations found
+        </div>
+      )}
+
+      {enableRecents && (
+        <div className="bg-background border-neutral-softest border-t">
+          <CommandItem
+            onSelect={onSelectRecent}
+            className={cn(
+              'bg-background text-foreground/80 sticky top-0 z-10 m-1 flex cursor-pointer items-center p-4 text-base',
+              showRecents && 'text-accent-foreground font-semibold'
+            )}
+          >
+            <Icon name="history" />
+            <Text>Recently used</Text>
+            {showRecents && (
+              <div className="ml-auto">
+                <Icon name="chevron-right" size="2xl" />
+              </div>
+            )}
+          </CommandItem>
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/WorkspaceSelector/OrgSelector.tsx

@@ -0,0 +1,207 @@
+import * as React from 'react'
+
+import { Command, CommandInput, CommandItem, CommandList } from '../Command'
+import { Popover, PopoverContent, PopoverTrigger } from '../Popover'
+import { Org } from '.'
+import { Icon } from '../Icon'
+import { Virtuoso, VirtuosoHandle } from 'react-virtuoso'
+import { cn } from '../../lib/utils'
+
+interface OrgSelectorProps {
+  orgs: Org[]
+  selectedOrg: Org | null
+  onSelect: (org: Org) => void
+  searchable?: boolean
+  error?: boolean
+  errorText?: string
+  emptyText?: string
+  searchPlaceholder?: string
+}
+
+const COMBOBOX_CONFIG = {
+  heights: {
+    row: 16,
+    header: 28,
+    padding: 8,
+    max: 250,
+  },
+} as const
+
+function uniqBy<T>(arr: T[], key: keyof T) {
+  return [...new Map(arr.map((item) => [item[key], item])).values()]
+}
+
+export function OrgSelector({
+  orgs = [],
+  selectedOrg,
+  onSelect,
+  searchable = true,
+  error = false,
+  errorText = 'An error occurred',
+  emptyText = 'No organizations found',
+  searchPlaceholder = 'Search...',
+}: OrgSelectorProps) {
+  const [open, setOpen] = React.useState(false)
+  const [search, setSearch] = React.useState('')
+  const [activeIndex, setActiveIndex] = React.useState(0)
+  const triggerRef = React.useRef<HTMLButtonElement>(null)
+  const handleSelect = (org: Org, index: number) => {
+    onSelect(org)
+    setOpen(false)
+    setActiveIndex(index)
+  }
+
+  const filteredItems = React.useMemo(() => {
+    if (!search) return uniqBy(orgs, 'slug')
+    return uniqBy(
+      orgs.filter((org) => org.slug.includes(search)),
+      'slug'
+    )
+  }, [search, orgs])
+
+  const getSelectorMedianWidth = React.useMemo(() => {
+    if (!orgs.length) return 0
+
+    // Get lengths of all slugs
+    const lengths = orgs.map((org) => org.slug.length)
+
+    // Sort lengths to find the middle value(s)
+    const sortedLengths = [...lengths].sort((a, b) => a - b)
+    const mid = Math.floor(sortedLengths.length / 2)
+
+    // Get median length (average of two middle values for even-length arrays)
+    const medianLength =
+      sortedLengths.length % 2 === 0
+        ? (sortedLengths[mid - 1] + sortedLengths[mid]) / 2
+        : sortedLengths[mid]
+
+    // Base width calculation:
+    // - Average lowercase letter: ~8px at 16px font size
+    // - Average uppercase letter: ~10px at 16px font size
+    // - Numbers: ~8px at 16px font size
+    // - Font size adjustment (text-lg = 1.125rem = 18px): 18/16 = 1.125
+    const baseCharWidth = 8 * 1.125
+
+    return Math.round(medianLength * baseCharWidth * 1.2)
+  }, [orgs])
+
+  const virtuosoRef = React.useRef<VirtuosoHandle>(null)
+
+  const handleOpenChange = (open: boolean) => {
+    setOpen(open)
+    if (open) {
+      virtuosoRef.current?.scrollToIndex({ index: activeIndex, align: 'start' })
+    }
+  }
+
+  const VirtuosoItem = React.memo(
+    ({ index, org }: { index: number; org: Org }) => {
+      return (
+        <CommandItem
+          key={org.slug}
+          value={org.slug}
+          onSelect={() => handleSelect(org, index)}
+          className="relative block w-full cursor-pointer items-center gap-2 truncate rounded-sm px-2 py-1.5 text-sm outline-none select-none"
+        >
+          {org.label}
+        </CommandItem>
+      )
+    }
+  )
+
+  // When the search changes, reset the active index and scroll to the top
+  React.useEffect(() => {
+    setActiveIndex(0)
+    virtuosoRef.current?.scrollToIndex({ index: 0, align: 'start' })
+  }, [search])
+
+  const handleKeyDown = React.useCallback(
+    (e: React.KeyboardEvent<HTMLDivElement>) => {
+      if (!['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(e.key)) return
+      if (!virtuosoRef.current) return
+
+      let newIndex = activeIndex
+      switch (e.key) {
+        case 'ArrowDown':
+          newIndex = Math.min(activeIndex + 1, filteredItems.length - 1)
+          break
+        case 'ArrowUp':
+          newIndex = Math.max(activeIndex - 1, 0)
+          break
+        case 'Home':
+          newIndex = 0
+          break
+      }
+      setActiveIndex(newIndex)
+      virtuosoRef.current?.scrollToIndex({ index: newIndex, align: 'start' })
+    },
+    [activeIndex, filteredItems.length]
+  )
+
+  const virtuosoHeight = React.useMemo(() => {
+    const { row, header, padding, max } = COMBOBOX_CONFIG.heights
+    const shouldShowHeaders = filteredItems.some((group) => group.label)
+    const headerHeight = shouldShowHeaders ? filteredItems.length * header : 0
+    const contentHeight = filteredItems.reduce((sum) => row + sum, headerHeight)
+
+    return Math.min(contentHeight + padding, max)
+  }, [filteredItems])
+
+  return (
+    <Popover open={open} onOpenChange={handleOpenChange}>
+      <PopoverTrigger asChild className="flex flex-row items-center">
+        <button
+          type="button"
+          role="combobox"
+          ref={triggerRef}
+          aria-expanded={open}
+          title={selectedOrg ? selectedOrg.slug : 'Select organization...'}
+          className="flex flex-row items-center gap-2 outline-none"
+        >
+          <div
+            className={cn(
+              'min-w-0 flex-1 truncate text-left text-lg font-semibold lowercase',
+              open ? 'text-foreground' : 'text-foreground/80'
+            )}
+            style={{ width: getSelectorMedianWidth }}
+          >
+            {selectedOrg ? selectedOrg.slug : 'Select organization...'}
+          </div>
+          <Icon
+            name={open ? 'chevron-up' : 'chevron-down'}
+            className="flex-shrink-0"
+          />
+        </button>
+      </PopoverTrigger>
+      <PopoverContent className="w-fit p-0" align="start" sideOffset={10}>
+        <Command shouldFilter={false} onKeyDown={handleKeyDown}>
+          {searchable && (
+            <CommandInput
+              value={search}
+              onValueChange={setSearch}
+              placeholder={searchPlaceholder}
+            />
+          )}
+          <CommandList>
+            {error ? (
+              <CommandItem disabled>{errorText}</CommandItem>
+            ) : filteredItems.length === 0 ? (
+              <CommandItem disabled>{emptyText}</CommandItem>
+            ) : (
+              <Virtuoso
+                style={{ height: virtuosoHeight }}
+                data={filteredItems}
+                ref={virtuosoRef}
+                initialTopMostItemIndex={activeIndex}
+                totalCount={filteredItems.length}
+                itemContent={(index, org) => (
+                  <VirtuosoItem index={index} org={org} />
+                )}
+              />
+            )}
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  )
+}

package/src/components/WorkspaceSelector/RecentWorkspaces.tsx

@@ -0,0 +1,83 @@
+import { cn } from '../../lib/utils'
+import { Org, Workspace } from '.'
+import { WorkspaceItem } from './WorkspaceItem'
+import { ScrollingList } from './ScrollingList'
+import { CommandGroup, CommandItem } from '../Command'
+import { Icon } from '../Icon'
+import { useState, useRef, useEffect } from 'react'
+import { SearchBox } from './SearchBox'
+import { Text } from '../Text'
+
+interface RecentWorkspacesProps {
+  orgsWithFilteredWorkspaces: Org[]
+  onSelect: (org: Org, workspace: Workspace) => void
+  fullWidth?: boolean
+  selectedOrg: Org | null
+  selectedWorkspace: Workspace | null
+  handleCreateViewOpen: () => void
+}
+
+export function RecentWorkspaces({
+  orgsWithFilteredWorkspaces,
+  onSelect,
+  fullWidth = false,
+  selectedOrg,
+  selectedWorkspace,
+  handleCreateViewOpen,
+}: RecentWorkspacesProps) {
+  const [search, setSearch] = useState('')
+  const inputRef = useRef<HTMLInputElement>(null)
+  const [filteredRecents, setFilteredRecents] = useState<Org[]>(
+    orgsWithFilteredWorkspaces
+  )
+
+  useEffect(() => {
+    setFilteredRecents(
+      orgsWithFilteredWorkspaces.filter((org) =>
+        org.workspaces.some((workspace) => workspace.slug.includes(search))
+      )
+    )
+  }, [search, orgsWithFilteredWorkspaces])
+
+  return (
+    <div className={cn('flex h-full flex-col', fullWidth ? 'w-full' : 'w-2/3')}>
+      <SearchBox
+        inputRef={inputRef}
+        placeholder="Search workspaces..."
+        search={search}
+        setSearch={setSearch}
+      />
+      <ScrollingList
+        items={filteredRecents}
+        renderItem={(org) => {
+          return (
+            <CommandGroup key={org.id} heading={org.slug}>
+              {org.workspaces.map((workspace) => (
+                <WorkspaceItem
+                  key={workspace.id}
+                  workspace={workspace}
+                  isSelected={
+                    selectedOrg?.id === org.id &&
+                    selectedWorkspace?.id === workspace.id
+                  }
+                  selectedOrg={org}
+                  handleSelect={onSelect}
+                />
+              ))}
+            </CommandGroup>
+          )
+        }}
+      />
+
+      <div className="bg-background border-neutral-softest border-t">
+        <CommandItem
+          onSelect={handleCreateViewOpen}
+          className={cn('m-1 cursor-pointer !items-center p-4 text-base')}
+        >
+          <Icon name="plus" />
+          <Text>Create workspace</Text>
+        </CommandItem>
+      </div>
+    </div>
+  )
+}

package/src/components/WorkspaceSelector/ScrollingList.tsx

@@ -0,0 +1,84 @@
+import React from 'react'
+import {
+  GroupedVirtuoso,
+  GroupedVirtuosoHandle,
+  Virtuoso,
+  VirtuosoHandle,
+} from 'react-virtuoso'
+
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+const forwardRefWithGenerics = <T, P = {}>(
+  render: (props: P, ref: React.Ref<T>) => React.ReactNode | null
+): ((props: P & React.RefAttributes<T>) => React.ReactNode | null) =>
+  // @ts-expect-error cant type this correctly
+  React.forwardRef<T, P>(render)
+
+const DEFAULT_SCROLLBAR_CLASSES =
+  '[&::-webkit-scrollbar-thumb]:bg-gray-200 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb:active]:bg-black/20 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb:active]:bg-white/50 [&::-webkit-scrollbar-track]:bg-gray-100 dark:[&::-webkit-scrollbar-track]:bg-neutral-900 [&::-webkit-scrollbar]:w-2'
+
+interface ScrollingListProps<T> {
+  items: T[]
+  renderItem: (item: T) => React.ReactNode
+  ref?: React.RefObject<VirtuosoHandle>
+}
+
+function ScrollingListInner<T>(
+  { items, renderItem }: ScrollingListProps<T>,
+  ref: React.ForwardedRef<VirtuosoHandle>
+) {
+  return (
+    <Virtuoso
+      className={DEFAULT_SCROLLBAR_CLASSES}
+      totalCount={items.length}
+      data={items}
+      itemContent={(_, item) => renderItem(item)}
+      ref={ref}
+    />
+  )
+}
+
+export const ScrollingList = forwardRefWithGenerics(ScrollingListInner)
+
+interface GroupedScrollingListProps<G> {
+  groups: G[]
+
+  /**
+   * An array of integers to represent the number of items in each group.
+   * e.g [10, 20, 30] means there are 3 groups with 10, 20, and 30 items respectively.
+   */
+  groupCounts: number[]
+  renderGroupHeader: (group: G) => React.ReactNode
+  renderItem: (group: G, itemIndex: number) => React.ReactNode
+  ref?: React.RefObject<GroupedVirtuosoHandle>
+}
+
+function GroupedScrollingListInner<G>(
+  {
+    groups,
+    groupCounts,
+    renderGroupHeader,
+    renderItem,
+  }: GroupedScrollingListProps<G>,
+  ref: React.ForwardedRef<GroupedVirtuosoHandle>
+) {
+  return (
+    <GroupedVirtuoso
+      style={{
+        height: '100%',
+      }}
+      className={DEFAULT_SCROLLBAR_CLASSES}
+      groupCounts={groupCounts}
+      groupContent={(index) => renderGroupHeader(groups[index])}
+      itemContent={(itemIndex, groupIndex) => {
+        const group = groups[groupIndex]
+
+        return renderItem(group, itemIndex)
+      }}
+      ref={ref}
+    />
+  )
+}
+
+export const GroupedScrollingList = forwardRefWithGenerics(
+  GroupedScrollingListInner
+)

package/src/components/WorkspaceSelector/SearchBox.tsx

@@ -0,0 +1,40 @@
+import { RefObject } from 'react'
+import { Icon } from '../Icon'
+
+interface SearchBoxProps {
+  inputRef: RefObject<HTMLInputElement>
+  search: string
+  setSearch: (search: string) => void
+  placeholder: string
+}
+
+export function SearchBox({
+  inputRef,
+  search,
+  setSearch,
+  placeholder,
+}: SearchBoxProps) {
+  return (
+    <div className="border-neutral-softest relative flex items-center gap-2 border-b p-3">
+      <Icon name="search" className="text-muted-foreground" />
+      <input
+        ref={inputRef}
+        placeholder={placeholder}
+        value={search}
+        className="placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-base outline-none disabled:cursor-not-allowed disabled:opacity-50"
+        onChange={(e) => setSearch(e.target.value)}
+      />
+
+      <div className="absolute right-3">
+        {search && (
+          <button
+            className="hover:bg-accent text-muted-foreground flex h-8 w-8 cursor-pointer items-center justify-center rounded-sm"
+            onClick={() => setSearch('')}
+          >
+            <Icon name="x" size="small" />
+          </button>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/components/WorkspaceSelector/WorkspaceItem.tsx

@@ -0,0 +1,37 @@
+import { cn } from '../../lib/utils'
+import { CommandItem } from '../Command'
+import { GradientCircle } from '../GradientCircle'
+import { Org, Workspace } from '.'
+import { Text } from '../Text'
+import { forwardRef } from 'react'
+
+interface WorkspaceItemProps {
+  workspace: Workspace
+  selectedOrg: Org
+  isSelected: boolean
+  handleSelect: (org: Org, workspace: Workspace) => void
+}
+
+export const WorkspaceItem = forwardRef<HTMLDivElement, WorkspaceItemProps>(
+  function WorkspaceItem(
+    { workspace, selectedOrg, handleSelect, isSelected },
+    ref
+  ) {
+    return (
+      <CommandItem
+        key={workspace.id}
+        ref={ref}
+        value={`workspace-${selectedOrg.id}-${workspace.id}`}
+        onSelect={() => handleSelect(selectedOrg, workspace)}
+        className={cn(
+          'hover:!bg-accent/40 data-[selected=true]:!bg-accent/40 flex w-full max-w-full cursor-pointer flex-row gap-3 rounded-none p-4 text-base',
+          isSelected && 'font-semibold',
+          !workspace.active && 'opacity-50'
+        )}
+      >
+        <GradientCircle name={workspace.label} />
+        <Text className="truncate">{workspace.label}</Text>
+      </CommandItem>
+    )
+  }
+)

package/src/components/WorkspaceSelector/WorkspaceList.tsx

@@ -0,0 +1,107 @@
+import { CommandItem } from '../Command'
+import { Icon } from '../Icon'
+import { Org, Workspace } from '.'
+import { cn } from '../../lib/utils'
+import { WorkspaceItem } from './WorkspaceItem'
+import { useEffect, useRef, useState } from 'react'
+import { ScrollingList } from './ScrollingList'
+import { VirtuosoHandle } from 'react-virtuoso'
+import { SearchBox } from './SearchBox'
+import { Text } from '../Text'
+
+interface WorkspaceListProps {
+  selectedOrg: Org
+  selectedWorkspace: Workspace | null
+  handleCreateViewOpen: () => void
+  handleSelect: (org: Org, workspace: Workspace) => void
+  enableCreate?: boolean
+  filterWorkspaceFunc: (workspace: Workspace, search: string) => boolean
+}
+
+export function WorkspaceList({
+  selectedOrg,
+  selectedWorkspace,
+  handleCreateViewOpen,
+  handleSelect,
+  enableCreate = true,
+  filterWorkspaceFunc,
+}: WorkspaceListProps) {
+  const virtuoso = useRef<VirtuosoHandle | null>(null)
+  const [search, setSearch] = useState('')
+  const inputRef = useRef<HTMLInputElement>(null)
+  const [filteredWorkspaces, setFilteredWorkspaces] = useState<Workspace[]>(
+    selectedOrg?.workspaces || []
+  )
+
+  useEffect(() => {
+    setFilteredWorkspaces(
+      selectedOrg?.workspaces.filter((workspace) =>
+        filterWorkspaceFunc(workspace, search)
+      )
+    )
+  }, [search, selectedOrg?.workspaces, filterWorkspaceFunc])
+
+  useEffect(() => {
+    if (selectedWorkspace && virtuoso.current) {
+      const index = selectedOrg?.workspaces.findIndex(
+        (workspace) => workspace.slug === selectedWorkspace.slug
+      )
+
+      // wait for the ref to update
+      setTimeout(() => {
+        virtuoso.current?.scrollToIndex({
+          index,
+          behavior: selectedOrg?.workspaces.length < 10 ? 'smooth' : 'auto',
+        })
+      }, 100)
+    }
+  }, [selectedWorkspace, selectedOrg?.workspaces])
+
+  return (
+    <div className="flex w-2/3 flex-col">
+      <SearchBox
+        inputRef={inputRef}
+        placeholder="Search workspaces..."
+        search={search}
+        setSearch={setSearch}
+      />
+      {filteredWorkspaces.length === 0 ? (
+        <div className="flex flex-grow items-center justify-center">
+          <p className="text-body">
+            {search.length > 0
+              ? 'No workspaces found'
+              : 'No workspaces in this organization'}
+          </p>
+        </div>
+      ) : (
+        <ScrollingList
+          ref={virtuoso}
+          items={filteredWorkspaces}
+          renderItem={(workspace) => (
+            <WorkspaceItem
+              key={workspace.id}
+              workspace={workspace}
+              selectedOrg={selectedOrg}
+              handleSelect={handleSelect}
+              isSelected={
+                selectedOrg.id === selectedOrg.id &&
+                selectedWorkspace?.id === workspace.id
+              }
+            />
+          )}
+        />
+      )}
+      {enableCreate && (
+        <div className="bg-background border-neutral-softest border-t">
+          <CommandItem
+            onSelect={handleCreateViewOpen}
+            className={cn('m-1 cursor-pointer !items-center p-4 text-base')}
+          >
+            <Icon name="plus" />
+            <Text>Create workspace</Text>
+          </CommandItem>
+        </div>
+      )}
+    </div>
+  )
+}