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

package/src/components/Subnav/index.tsx

@@ -0,0 +1,315 @@
+import { cn } from '../../lib/utils'
+import { motion, Transition, AnimatePresence } from 'motion/react'
+import {
+  useState,
+  useRef,
+  useEffect,
+  useCallback,
+  useLayoutEffect,
+  memo,
+  forwardRef,
+} from 'react'
+
+export interface SubnavItem {
+  label: string
+  href: string
+  active?: boolean
+
+  [key: string]: unknown
+}
+
+export interface SubnavProps {
+  items: SubnavItem[]
+  renderItem: (item: SubnavItem) => React.ReactNode
+  className?: string
+}
+
+const POSITION_TRANSITION: Transition = {
+  type: 'spring',
+  stiffness: 300,
+  damping: 30,
+  mass: 0.8,
+  duration: 0.35,
+}
+
+const SCALE_TRANSITION: Transition = {
+  type: 'spring',
+  stiffness: 400,
+  damping: 40,
+  mass: 0.7,
+  duration: 0.25,
+}
+
+const FADE_TRANSITION: Transition = {
+  type: 'tween',
+  ease: [0.215, 0.61, 0.355, 1],
+  duration: 0.2,
+}
+
+const useDebounce = (callback: () => void, delay: number) => {
+  const timeoutRef = useRef<ReturnType<typeof setTimeout>>()
+
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current)
+      }
+    }
+  }, [])
+
+  return useCallback(() => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current)
+    }
+    timeoutRef.current = setTimeout(callback, delay)
+  }, [callback, delay])
+}
+
+export function Subnav({ items, renderItem, className }: SubnavProps) {
+  const [activeItem, setActiveItem] = useState<string | null>(
+    items.find((item) => item.active)?.href ?? null
+  )
+  const [hoveredItem, setHoveredItem] = useState<string | null>(null)
+  const [baseWidth, setBaseWidth] = useState<number>(0)
+  const [activeIndicatorProps, setActiveIndicatorProps] = useState<{
+    scaleX: number
+    left: number
+  } | null>(null)
+  const [indicatorProps, setIndicatorProps] = useState<{
+    scaleX: number
+    left: number
+  } | null>(null)
+
+  const itemRefs = useRef<Map<string, HTMLDivElement>>(new Map())
+  const previousHoveredItem = useRef<string | null>(null)
+  const isContainerHovered = useRef(false)
+  const hasInitialized = useRef(false)
+
+  useLayoutEffect(() => {
+    const newActiveItem: string =
+      items.find((item) => item.active)?.href ?? items[0]?.href
+    setActiveItem(newActiveItem)
+  }, [items])
+
+  useLayoutEffect(() => {
+    if (!hasInitialized.current && activeItem) {
+      const element = itemRefs.current.get(activeItem)
+      if (element) {
+        setBaseWidth(element.offsetWidth)
+        hasInitialized.current = true
+      }
+    }
+  }, [activeItem])
+
+  useLayoutEffect(() => {
+    if (!activeItem || !baseWidth) {
+      setActiveIndicatorProps(null)
+      return
+    }
+
+    const itemElement = itemRefs.current.get(activeItem)
+    if (!itemElement) {
+      setActiveIndicatorProps(null)
+      return
+    }
+
+    const itemWidth = itemElement.offsetWidth
+    const itemLeft = itemElement.offsetLeft
+    const centerOffset = (itemWidth - baseWidth) / 2
+
+    setActiveIndicatorProps({
+      scaleX: itemWidth / baseWidth,
+      left: itemLeft + centerOffset,
+    })
+
+    /**
+     * Subnav can be contextual to a page and therefore items can change.
+     * items needs to be in the dependancy array even though it's not used in the effect
+     * so the position of the indicator is accurate when the menu items change between pages
+     */
+  }, [activeItem, baseWidth, items])
+
+  useLayoutEffect(() => {
+    if (!hoveredItem || !baseWidth) {
+      setIndicatorProps(null)
+      return
+    }
+
+    const itemElement = itemRefs.current.get(hoveredItem)
+    if (!itemElement) {
+      setIndicatorProps(null)
+      return
+    }
+
+    const itemWidth = itemElement.offsetWidth
+    const itemLeft = itemElement.offsetLeft
+    const centerOffset = (itemWidth - baseWidth) / 2
+
+    setIndicatorProps({
+      scaleX: itemWidth / baseWidth,
+      left: itemLeft + centerOffset,
+    })
+
+    /**
+     * Subnav can be contextual to a page and therefore items can change.
+     * items needs to be in the dependancy array even though it's not used in the effect
+     * so the position of the indicator is accurate when the menu items change between pages
+     */
+  }, [hoveredItem, baseWidth, items])
+
+  const debouncedResize = useDebounce(() => {
+    if (activeItem) {
+      const element = itemRefs.current.get(activeItem)
+      if (element) {
+        setBaseWidth(element.offsetWidth)
+      }
+    }
+  }, 100)
+
+  useEffect(() => {
+    window.addEventListener('resize', debouncedResize)
+    return () => window.removeEventListener('resize', debouncedResize)
+  }, [debouncedResize])
+
+  const handleItemClick = useCallback((href: string) => {
+    setActiveItem(href)
+  }, [])
+
+  const handleContainerMouseEnter = useCallback(() => {
+    isContainerHovered.current = true
+  }, [])
+
+  const handleContainerMouseLeave = useCallback(() => {
+    isContainerHovered.current = false
+    previousHoveredItem.current = null
+    setHoveredItem(null)
+  }, [])
+
+  const handleItemHover = useCallback(
+    (href: string | null) => {
+      if (href !== null) {
+        previousHoveredItem.current = hoveredItem
+      }
+      setHoveredItem(href)
+    },
+    [hoveredItem]
+  )
+
+  const shouldSlide =
+    previousHoveredItem.current !== null && isContainerHovered.current
+
+  const getItemHandlers = useCallback(
+    (href: string) => {
+      return {
+        onClick: () => handleItemClick(href),
+        onMouseEnter: () => handleItemHover(href),
+        onMouseLeave: () => handleItemHover(null),
+      }
+    },
+    [handleItemClick, handleItemHover]
+  )
+
+  return (
+    <div
+      className={cn('relative flex items-center', className)}
+      onMouseEnter={handleContainerMouseEnter}
+      onMouseLeave={handleContainerMouseLeave}
+    >
+      <AnimatePresence>
+        {indicatorProps && baseWidth > 0 && (
+          <motion.div
+            className="bg-surface-secondary-default absolute inset-y-0 my-auto h-[calc(100%-10px)] rounded-xs"
+            style={{
+              width: baseWidth,
+              transformOrigin: '50% 50% 0px',
+            }}
+            initial={shouldSlide ? false : { opacity: 0 }}
+            animate={{
+              translateX: indicatorProps.left,
+              scaleX: indicatorProps.scaleX,
+              opacity: 1,
+            }}
+            exit={{ opacity: 0 }}
+            transition={{
+              opacity: FADE_TRANSITION,
+              translateX: shouldSlide ? POSITION_TRANSITION : { duration: 0 },
+              scaleX: shouldSlide ? SCALE_TRANSITION : { duration: 0 },
+            }}
+            layoutDependency={indicatorProps}
+          />
+        )}
+      </AnimatePresence>
+
+      {items.map((item) => (
+        <SubnavItem
+          key={item.href}
+          item={item}
+          isActive={activeItem === item.href}
+          isHovered={hoveredItem === item.href}
+          handlers={getItemHandlers(item.href)}
+          ref={(el) => {
+            if (el) {
+              itemRefs.current.set(item.href, el)
+            } else {
+              itemRefs.current.delete(item.href)
+            }
+          }}
+          renderItem={renderItem}
+        />
+      ))}
+
+      {activeIndicatorProps && baseWidth > 0 && (
+        <motion.div
+          className="bg-surface-primary-inverse absolute bottom-0 h-[2px]"
+          style={{
+            width: baseWidth,
+            transformOrigin: '50% 50% 0px',
+          }}
+          initial={false}
+          animate={{
+            translateX: activeIndicatorProps.left,
+            scaleX: activeIndicatorProps.scaleX,
+          }}
+          transition={{
+            translateX: POSITION_TRANSITION,
+            scaleX: SCALE_TRANSITION,
+          }}
+          layoutDependency={activeIndicatorProps}
+        />
+      )}
+    </div>
+  )
+}
+
+const SubnavItem = memo(
+  forwardRef<
+    HTMLDivElement,
+    {
+      item: SubnavItem
+      isActive: boolean
+      isHovered: boolean
+      handlers: {
+        onClick: () => void
+        onMouseEnter: () => void
+        onMouseLeave: () => void
+      }
+      renderItem: (item: SubnavItem & { hovered: boolean }) => React.ReactNode
+    }
+  >(function SubnavItem(
+    { item, isActive, isHovered, handlers, renderItem },
+    ref
+  ) {
+    return (
+      <motion.div
+        ref={ref}
+        className={cn(
+          'text-default relative z-10 cursor-pointer select-none',
+          isActive && 'text-highlight font-semibold'
+        )}
+        {...handlers}
+      >
+        {renderItem({ ...item, hovered: isHovered })}
+      </motion.div>
+    )
+  })
+)

package/src/components/Switch/index.tsx

@@ -0,0 +1,29 @@
+'use client'
+
+import * as React from 'react'
+import * as SwitchPrimitives from '@radix-ui/react-switch'
+
+import { cn } from '../../lib/utils'
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      'focus-visible:ring-ring focus-visible:ring-offset-background peer data-[state=unchecked]:bg-surface-tertiary-default inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-emerald-700',
+      className
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        'data-[state=unchecked]:bg-surface-tertiary-inverse pointer-events-none block h-5 w-5 rounded-full shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=checked]:bg-white data-[state=unchecked]:translate-x-0'
+      )}
+    />
+  </SwitchPrimitives.Root>
+))
+Switch.displayName = SwitchPrimitives.Root.displayName
+
+export { Switch, type SwitchPrimitives as SwitchProps }

package/src/components/Table/context/context.tsx

@@ -0,0 +1,19 @@
+import { createContext, useContext } from 'react'
+
+type TableContextValue = {
+  depth: number
+  expandedRowKeys: Set<string | number>
+  toggleExpanded: (rowKey: string | number) => void
+}
+
+export const TableContext = createContext<TableContextValue>({
+  depth: 0,
+  expandedRowKeys: new Set(),
+  toggleExpanded: () => {},
+})
+
+export function useTable() {
+  const context = useContext(TableContext)
+
+  return context
+}

package/src/components/Table/context/tableProvider.tsx

@@ -0,0 +1,39 @@
+import { useCallback, useState } from 'react'
+import { TableContext } from './context'
+
+export interface TableProviderProps {
+  children: React.ReactNode
+  depth: number
+  expandedRowKeys?: Set<string | number>
+}
+
+export function TableProvider({
+  children,
+  depth,
+  expandedRowKeys: defaultExpanded,
+}: TableProviderProps) {
+  const [expandedRowKeys, setExpandedRowKeys] = useState<Set<string | number>>(
+    defaultExpanded ?? new Set()
+  )
+
+  const toggleExpanded = useCallback(
+    (rowKey: string | number) => {
+      setExpandedRowKeys((prev) => {
+        const newSet = new Set(prev)
+        if (newSet.has(rowKey)) {
+          newSet.delete(rowKey)
+        } else {
+          newSet.add(rowKey)
+        }
+        return newSet
+      })
+    },
+    [expandedRowKeys, setExpandedRowKeys]
+  )
+
+  return (
+    <TableContext.Provider value={{ depth, expandedRowKeys, toggleExpanded }}>
+      {children}
+    </TableContext.Provider>
+  )
+}