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

package/src/components/ActionBar/index.tsx

@@ -0,0 +1,184 @@
+import { Icon } from '../Icon/index'
+import { IconName } from '../Icon/names'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '../Tooltip/index'
+import { cn } from '../../lib/utils'
+import {
+  useDraggable,
+  DraggableAttributes,
+  useDndMonitor,
+  Translate,
+  DragEndEvent,
+  DragStartEvent,
+  Modifier,
+} from '@dnd-kit/core'
+import { SyntheticListenerMap } from '@dnd-kit/core/dist/hooks/utilities'
+import { useState } from 'react'
+import { DragNDropArea } from '../DragNDrop/DragNDropArea'
+
+interface ActionBarProps {
+  children: React.ReactNode
+  id: string
+  initialPosition: Translate
+  onChangePosition?: (position: Translate) => void
+  onDragStart?: (event: DragStartEvent) => void
+  onDragEnd?: (event: DragEndEvent) => void
+  draggable?: boolean
+
+  /**
+   * dnd-kit modifiers (https://docs.dndkit.com/api-documentation/modifiers)
+   */
+  modifiers?: Modifier[]
+}
+
+const ActionBarInternal = ({
+  children,
+  modifiers,
+  ...props
+}: ActionBarProps) => {
+  return (
+    <DragNDropArea modifiers={modifiers}>
+      <Root {...props}>{children}</Root>
+    </DragNDropArea>
+  )
+}
+
+ActionBarInternal.displayName = 'ActionBar'
+
+const Root = ({
+  children,
+  id,
+  initialPosition = { x: 0, y: 0 },
+  onChangePosition,
+  draggable = true,
+  onDragStart,
+  onDragEnd,
+}: ActionBarProps) => {
+  const { setNodeRef, attributes, listeners, transform } = useDraggable({
+    id,
+  })
+
+  const [state, setState] = useState<Translate>(initialPosition)
+
+  useDndMonitor({
+    onDragEnd: (event: DragEndEvent) => {
+      setState((prev) => ({
+        x: prev.x + event.delta.x,
+        y: prev.y + event.delta.y,
+      }))
+      onChangePosition?.({
+        x: state.x + event.delta.x,
+        y: state.y + event.delta.y,
+      })
+      onDragEnd?.(event)
+    },
+    onDragStart: (event: DragStartEvent) => {
+      onDragStart?.(event)
+    },
+  })
+
+  const transformStyle: React.CSSProperties = transform
+    ? {
+        transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
+      }
+    : {}
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={{
+        top: state.y,
+        left: state.x,
+        ...transformStyle,
+      }}
+      className="bg-card fixed flex min-w-36 flex-row items-center justify-center gap-3 rounded-lg border py-2 pr-2 pl-2 shadow-lg shadow-white/5"
+    >
+      {draggable && (
+        <>
+          <ActionBarHandle listeners={listeners} attributes={attributes} />
+          <ActionBarSeparator />
+        </>
+      )}
+      {children}
+    </div>
+  )
+}
+
+Root.displayName = 'ActionBar.Root'
+
+interface ActionBarItemProps {
+  children: React.ReactNode
+  onClick?: () => void
+  disabled?: boolean
+  className?: string
+  iconName: IconName
+}
+
+const ActionBarItem = ({
+  children,
+  onClick,
+  disabled,
+  className,
+  iconName,
+}: ActionBarItemProps) => {
+  return (
+    <TooltipProvider>
+      <Tooltip delayDuration={100}>
+        <TooltipTrigger
+          onClick={onClick}
+          className={cn(
+            'text-foreground flex cursor-pointer items-center justify-center select-none last-of-type:mr-1',
+            'focus: focus:rounded-md focus:ring-1 focus:ring-blue-500/70 focus:ring-offset-4 focus:ring-offset-slate-900 focus:outline-none',
+            !disabled && 'hover:text-foreground cursor-pointer',
+            disabled && 'text-body-muted/70 cursor-not-allowed',
+            className
+          )}
+        >
+          <Icon name={iconName} size="small" />
+        </TooltipTrigger>
+        <TooltipContent className="border-zinc-100 px-2 py-1 text-xs shadow-none select-none dark:border-zinc-900">
+          {children}
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  )
+}
+
+ActionBarItem.displayName = 'ActionBar.Item'
+
+const ActionBarSeparator = () => {
+  return (
+    <div className="h-full min-h-4 w-[0.5px] bg-zinc-200 dark:bg-zinc-700" />
+  )
+}
+
+ActionBarSeparator.displayName = 'ActionBar.Separator'
+
+const ActionBarHandle = ({
+  listeners,
+  attributes,
+}: {
+  listeners: SyntheticListenerMap | undefined
+  attributes: DraggableAttributes | undefined
+}) => {
+  return (
+    <div
+      {...listeners}
+      {...attributes}
+      className="text-body-muted hover:text-foreground active:text-foreground h-full cursor-move"
+    >
+      <Icon name="grip-vertical" className="h-4 w-4" />
+    </div>
+  )
+}
+
+export const ActionBar = Object.assign(ActionBarInternal, {
+  Item: ActionBarItem,
+  Separator: ActionBarSeparator,
+})
+
+export type { ActionBarProps, ActionBarItemProps }

package/src/components/Alert/index.tsx

@@ -0,0 +1,118 @@
+import { cva, type VariantProps } from 'class-variance-authority'
+import { Modifier, Variant } from './types'
+import { Icon } from '../Icon'
+import { iconNames } from '../Icon/names'
+import { useState } from 'react'
+import { cn } from '../../lib/utils'
+
+const flexClasses = 'flex flex-row items-center gap-3'
+
+const alertVariants = cva<{
+  variant: {
+    [k in Variant]: string
+  }
+  modifiers: {
+    [k in Modifier]: string
+  }
+}>(
+  `min-w-48 max-h-fit flex flex-row subpixel-antialiased font-light items-center px-3 pr-2 py-2 w-full border`,
+  {
+    variants: {
+      variant: {
+        default: 'bg-card',
+        success:
+          'bg-success-softest text-default-success border-success-softest',
+        error:
+          'bg-destructive-softest text-default-destructive border-destructive-softest',
+        warning:
+          'bg-warning-softest text-default-warning border-warning-softest',
+        info: 'bg-information-softest text-default-information border-information-softest',
+        feature: 'bg-feature text-feature-foreground',
+      },
+      modifiers: {
+        inline: 'inline-flex',
+      },
+    },
+  }
+)
+
+export type AlertProps = {
+  variant: NonNullable<VariantProps<typeof alertVariants>['variant']>
+  children: React.ReactNode
+  inline?: boolean
+  dismissible?: boolean
+  onDismiss?: () => void
+  iconName?: (typeof iconNames)[number]
+  useContainer?: boolean
+  className?: string
+}
+
+const iconForVariant: Record<Variant, (typeof iconNames)[number] | undefined> =
+  {
+    default: 'info',
+    success: 'check',
+    error: 'circle-alert',
+    warning: 'circle-alert',
+    info: 'info',
+    feature: 'star',
+  }
+
+export function Alert({
+  variant = 'default',
+  children,
+  inline = false,
+  dismissible = true,
+  onDismiss,
+  iconName,
+  useContainer = false,
+  className,
+}: AlertProps) {
+  const [isDismissing, setIsDismissing] = useState(false)
+  const handleDismiss = () => {
+    setIsDismissing(true)
+    onDismiss?.()
+  }
+  const icon = iconName ?? iconForVariant[variant]
+  const innerContent = (
+    <div className={flexClasses}>
+      <div className="flex-shrink-0">
+        {icon && <Icon name={icon} size="small" />}
+      </div>
+      <div>{children}</div>
+    </div>
+  )
+
+  const dismissableContent = dismissible && (
+    <div className="ml-auto self-start">
+      <button
+        className="hover:bg-accent/10 p-2 hover:rounded-lg"
+        onClick={handleDismiss}
+      >
+        <Icon name="x" />
+      </button>
+    </div>
+  )
+
+  return (
+    <div
+      role="alert"
+      className={cn(
+        alertVariants({ variant, modifiers: inline ? 'inline' : undefined }),
+        isDismissing && 'opacity-0 transition-opacity duration-500',
+        className
+      )}
+    >
+      {useContainer ? (
+        <div className="container flex">
+          {innerContent}
+          {dismissableContent}
+        </div>
+      ) : (
+        <>
+          {innerContent}
+          {dismissableContent}
+        </>
+      )}
+    </div>
+  )
+}

package/src/components/Alert/types.ts

@@ -0,0 +1,12 @@
+export const variants = [
+  'default',
+  'success',
+  'error',
+  'warning',
+  'info',
+  'feature',
+] as const
+export type Variant = (typeof variants)[number]
+
+export const modifiers = ['inline'] as const
+export type Modifier = (typeof modifiers)[number]

package/src/components/AppLayout/context.tsx

@@ -0,0 +1,31 @@
+import { createContext } from 'react'
+
+export interface KeybindConfig {
+  /**
+   * The keybind to trigger the action
+   * Will be CMDOrCTRL + key
+   */
+  key: string
+  description: string
+}
+
+export interface AppLayoutContextType {
+  collapsed: boolean
+  setCollapsed: (collapsed: boolean) => void
+
+  // keybind config
+  keybinds: {
+    toggle: KeybindConfig
+  }
+}
+
+export const AppLayoutContext = createContext<AppLayoutContextType>({
+  collapsed: false,
+  setCollapsed: () => {},
+  keybinds: {
+    toggle: {
+      key: 'L',
+      description: 'Toggle',
+    },
+  },
+})