@oyolincc/create 0.3.0 → 0.5.0

package/templates/hono-fullstack/libs/ui/src/components/atoms/overlays/Menu.tsx

@@ -0,0 +1,74 @@
+'use client'
+import { Menu } from '@ark-ui/react/menu'
+import { CheckIcon, ChevronDownIcon } from 'lucide-react'
+import type { ComponentProps } from 'react'
+import { createSlotRecipeContext } from 'styled-system/jsx'
+import { menu } from 'styled-system/recipes'
+
+const { withRootProvider, withContext } = createSlotRecipeContext(menu)
+
+export type RootProps = ComponentProps<typeof Root>
+export const Root = withRootProvider(Menu.Root, {
+  defaultProps: { unmountOnExit: true, lazyMount: true },
+})
+export const RootProvider = withRootProvider(Menu.RootProvider, {
+  defaultProps: { unmountOnExit: true, lazyMount: true },
+})
+export const Arrow = withContext(Menu.Arrow, 'arrow')
+export const ArrowTip = withContext(Menu.ArrowTip, 'arrowTip')
+export const CheckboxItem = withContext(Menu.CheckboxItem, 'item')
+export const Content = withContext(Menu.Content, 'content')
+export const ContextTrigger = withContext(Menu.ContextTrigger, 'contextTrigger')
+export const Indicator = withContext(Menu.Indicator, 'indicator', {
+  defaultProps: { children: <ChevronDownIcon /> },
+})
+export const Item = withContext(Menu.Item, 'item')
+export const ItemGroup = withContext(Menu.ItemGroup, 'itemGroup')
+export const ItemGroupLabel = withContext(Menu.ItemGroupLabel, 'itemGroupLabel')
+export const ItemText = withContext(Menu.ItemText, 'itemText')
+export const Positioner = withContext(Menu.Positioner, 'positioner')
+export const RadioItem = withContext(Menu.RadioItem, 'item')
+export const RadioItemGroup = withContext(Menu.RadioItemGroup, 'itemGroup')
+export const Separator = withContext(Menu.Separator, 'separator')
+export const Trigger = withContext(Menu.Trigger, 'trigger')
+export const TriggerItem = withContext(Menu.TriggerItem, 'item')
+
+export {
+  MenuContext as Context,
+  MenuItemContext as ItemContext,
+  type MenuSelectionDetails as SelectionDetails,
+} from '@ark-ui/react/menu'
+
+export const ItemIndicator = withContext(Menu.ItemIndicator, 'itemIndicator', {
+  defaultProps: { children: <CheckIcon /> },
+})
+export type ItemIndicatorProps = ComponentProps<typeof ItemIndicator>
+
+export { useMenu, type UseMenuProps, type UseMenuReturn } from '@ark-ui/react/menu'
+
+export type RootProviderProps = ComponentProps<typeof RootProvider>
+export type ArrowProps = ComponentProps<typeof Arrow>
+export type ArrowTipProps = ComponentProps<typeof ArrowTip>
+export type CheckboxItemProps = ComponentProps<typeof CheckboxItem>
+export type ContentProps = ComponentProps<typeof Content>
+export type ContextTriggerProps = ComponentProps<typeof ContextTrigger>
+export type IndicatorProps = ComponentProps<typeof Indicator>
+export type ItemProps = ComponentProps<typeof Item>
+export type ItemGroupProps = ComponentProps<typeof ItemGroup>
+export type ItemGroupLabelProps = ComponentProps<typeof ItemGroupLabel>
+export type ItemTextProps = ComponentProps<typeof ItemText>
+export type PositionerProps = ComponentProps<typeof Positioner>
+export type RadioItemProps = ComponentProps<typeof RadioItem>
+export type RadioItemGroupProps = ComponentProps<typeof RadioItemGroup>
+export type SeparatorProps = ComponentProps<typeof Separator>
+export type TriggerProps = ComponentProps<typeof Trigger>
+export type TriggerItemProps = ComponentProps<typeof TriggerItem>
+
+export {
+  useMenuContext,
+  useMenuItemContext,
+  type MenuHighlightChangeDetails as HighlightChangeDetails,
+  type MenuOpenChangeDetails as OpenChangeDetails,
+  type MenuTriggerValueChangeDetails as TriggerValueChangeDetails,
+  type MenuValueChangeDetails as ValueChangeDetails,
+} from '@ark-ui/react/menu'

package/templates/hono-fullstack/libs/ui/src/components/atoms/overlays/OverlayManager.test.ts

@@ -0,0 +1,124 @@
+import { describe, expect, it, vi } from 'vite-plus/test'
+import { createOverlay } from './OverlayManager'
+
+const Component = () => null
+
+describe('createOverlay', () => {
+  it('settles a replaced instance without allowing stale callbacks to close its replacement', async () => {
+    const overlay = createOverlay<{ title: string }, boolean>(Component)
+    const first = overlay.open('confirm', { title: 'First' })
+    const stale = overlay.get('confirm')
+    const second = overlay.open('confirm', { title: 'Second' })
+    await expect(first).resolves.toBeUndefined()
+    stale.onOpenChange?.({ open: false })
+    stale.onExitComplete?.()
+    expect(overlay.get('confirm').title).toBe('Second')
+    expect(overlay.get('confirm').open).toBe(true)
+    await overlay.close('confirm', false)
+    await expect(second).resolves.toBe(false)
+  })
+
+  it('preserves falsy return values and handles closing before Viewport mounts', async () => {
+    const overlay = createOverlay<{}, number>(Component)
+    const result = overlay.open('queued', {})
+    const exit = overlay.waitForExit('queued')
+    await overlay.close('queued', 0)
+    await expect(result).resolves.toBe(0)
+    await exit
+    expect(overlay.has('queued')).toBe(false)
+    await overlay.close('queued')
+    await overlay.waitForExit('missing')
+  })
+
+  it('removes one instance without affecting others or stranding its pending promises', async () => {
+    const overlay = createOverlay<{}>(Component)
+    const first = overlay.open('first', {})
+    const second = overlay.open('second', {})
+    const exit = overlay.waitForExit('first')
+    overlay.remove('first')
+    await expect(first).resolves.toBeUndefined()
+    await exit
+    expect(overlay.has('second')).toBe(true)
+    overlay.removeAll()
+    await expect(second).resolves.toBeUndefined()
+    expect(overlay.getSnapshot()).toEqual([])
+  })
+
+  it('settles every result and exit promise on removeAll', async () => {
+    const overlay = createOverlay<{}>(Component)
+    const results = [overlay.open('a', {}), overlay.open('b', {})]
+    const exits = [overlay.waitForExit('a'), overlay.waitForExit('b')]
+    overlay.removeAll()
+    await expect(Promise.all(results)).resolves.toEqual([undefined, undefined])
+    await Promise.all(exits)
+    overlay.removeAll()
+    overlay.remove('missing')
+    expect(overlay.getSnapshot()).toEqual([])
+  })
+
+  it('updates business props and callbacks while retaining manager-owned controls', async () => {
+    const initialChange = vi.fn()
+    const nextChange = vi.fn()
+    const injectedReturn = vi.fn()
+    const overlay = createOverlay<{ title: string }>(Component, {
+      props: { onOpenChange: initialChange },
+    })
+    const result = overlay.open('edit', { title: 'Initial' })
+    const before = overlay.get('edit')
+    const snapshot = overlay.getSnapshot()
+    expect(overlay.getSnapshot()).toBe(snapshot)
+    overlay.update('edit', {
+      title: 'Updated',
+      open: false,
+      onOpenChange: nextChange,
+      setReturnValue: injectedReturn,
+    })
+    const after = overlay.get('edit')
+    expect(after.title).toBe('Updated')
+    expect(after.open).toBe(true)
+    expect(after.onOpenChange).toBe(before.onOpenChange)
+    expect(after.setReturnValue).toBe(before.setReturnValue)
+    expect(overlay.getSnapshot()).not.toBe(snapshot)
+    after.onOpenChange?.({ open: false })
+    await expect(result).resolves.toBeUndefined()
+    expect(nextChange).toHaveBeenCalledWith({ open: false })
+    expect(initialChange).not.toHaveBeenCalled()
+    expect(injectedReturn).not.toHaveBeenCalled()
+  })
+
+  it('keeps closing even if a user callback throws', async () => {
+    const overlay = createOverlay<{}>(Component, {
+      props: {
+        onOpenChange: () => {
+          throw new Error('User callback')
+        },
+      },
+    })
+    const result = overlay.open('error', {})
+    expect(() => overlay.get('error').onOpenChange?.({ open: false })).toThrow('User callback')
+    await expect(result).resolves.toBeUndefined()
+    expect(overlay.has('error')).toBe(false)
+  })
+
+  it('does not close a replacement opened from a user callback', async () => {
+    const overlay = createOverlay<{}>(Component)
+    let replacement: Promise<unknown> | undefined
+    const original = overlay.open('reentrant', {
+      onOpenChange: () => {
+        replacement = overlay.open('reentrant', {})
+      },
+    })
+    overlay.get('reentrant').onOpenChange?.({ open: false })
+    await expect(original).resolves.toBeUndefined()
+    expect(overlay.get('reentrant').open).toBe(true)
+    overlay.removeAll()
+    await replacement
+  })
+
+  it('rejects reads and updates of unknown IDs without creating phantom entries', () => {
+    const overlay = createOverlay<{}>(Component)
+    expect(() => overlay.get('missing')).toThrow('not found')
+    expect(() => overlay.update('missing', {})).toThrow('not found')
+    expect(overlay.getSnapshot()).toEqual([])
+  })
+})

package/templates/hono-fullstack/libs/ui/src/components/atoms/overlays/OverlayManager.tsx

@@ -0,0 +1,189 @@
+'use client'
+import { useEffect, useState, useSyncExternalStore, type ComponentType, type JSX } from 'react'
+
+export interface CreateOverlayProps<TReturn = unknown> {
+  open?: boolean
+  onOpenChange?: (details: { open: boolean }) => void
+  onExitComplete?: () => void
+  setReturnValue?: (value: TReturn) => void
+  setExitComplete?: () => void
+}
+
+export interface OverlayOptions<TProps extends object, TReturn = unknown> {
+  props?: Partial<TProps> & CreateOverlayProps<TReturn>
+}
+
+export interface CreateOverlayReturn<TProps extends object, TReturn = unknown> {
+  Viewport: () => JSX.Element
+  open: (id: string, props: TProps) => Promise<TReturn | undefined>
+  close: (id: string, value?: TReturn) => Promise<void>
+  update: (id: string, props: Partial<TProps> & CreateOverlayProps<TReturn>) => void
+  remove: (id: string) => void
+  removeAll: () => void
+  get: (id: string) => TProps & CreateOverlayProps<TReturn>
+  has: (id: string) => boolean
+  getSnapshot: () => (TProps & CreateOverlayProps<TReturn>)[]
+  waitForExit: (id: string) => Promise<void>
+}
+
+export function createOverlay<TProps extends object, TReturn = unknown>(
+  Component: ComponentType<TProps & CreateOverlayProps<TReturn>>,
+  options?: OverlayOptions<TProps, TReturn>,
+): CreateOverlayReturn<TProps, TReturn> {
+  type Props = TProps & CreateOverlayProps<TReturn>
+  interface Entry {
+    key: number
+    props: Props
+    userProps: Props
+    presented: boolean
+    exited: Promise<void>
+    resolveResult: (value: TReturn | undefined) => void
+    resolveExit: () => void
+  }
+
+  const entries = new Map<string, Entry>()
+  const subscribers = new Set<() => void>()
+  let snapshot: Entry[] = []
+  let propsSnapshot: Props[] = []
+  let nextKey = 0
+  const serverSnapshot: Entry[] = []
+  const getStoreSnapshot = () => snapshot
+  const getServerSnapshot = () => serverSnapshot
+  const subscribe = (callback: () => void) => {
+    subscribers.add(callback)
+    return () => {
+      subscribers.delete(callback)
+    }
+  }
+  const publish = () => {
+    snapshot = Array.from(entries.values())
+    propsSnapshot = snapshot.map((entry) => entry.props)
+    for (const callback of subscribers) callback()
+  }
+  const remove = (id: string) => {
+    const entry = entries.get(id)
+    if (!entry) return
+    entries.delete(id)
+    entry.resolveResult(undefined)
+    entry.resolveExit()
+    publish()
+  }
+  const getEntry = (id: string) => {
+    const entry = entries.get(id)
+    if (!entry) throw new Error(`[@repo/ui] Overlay with id "${id}" not found`)
+    return entry
+  }
+  const close = (id: string, value?: TReturn) => {
+    const entry = entries.get(id)
+    if (!entry) return Promise.resolve()
+    if (!entry.props.open) return entry.exited
+    entry.props = { ...entry.props, open: false }
+    entry.resolveResult(value)
+    // An overlay closed before its first open render has no exit animation to await.
+    if (!entry.presented) remove(id)
+    else publish()
+    return entry.exited
+  }
+  const open = (id: string, props: TProps) => {
+    remove(id)
+    let resolveResult!: Entry['resolveResult']
+    let resolveExit!: Entry['resolveExit']
+    const result = new Promise<TReturn | undefined>((resolve) => {
+      resolveResult = resolve
+    })
+    const exited = new Promise<void>((resolve) => {
+      resolveExit = resolve
+    })
+    const userProps = { ...options?.props, ...props } as Props
+    const entry: Entry = {
+      key: nextKey++,
+      userProps,
+      props: {
+        ...userProps,
+        open: true,
+        onOpenChange: (details) => {
+          if (entries.get(id) !== entry) return
+          try {
+            entry.userProps.onOpenChange?.(details)
+          } finally {
+            if (!details.open && entries.get(id) === entry) void close(id)
+          }
+        },
+        onExitComplete: () => {
+          if (entries.get(id) !== entry || entry.props.open) return
+          try {
+            entry.userProps.onExitComplete?.()
+          } finally {
+            if (entries.get(id) === entry) remove(id)
+          }
+        },
+        setReturnValue: resolveResult,
+        setExitComplete: resolveExit,
+      },
+      presented: false,
+      exited,
+      resolveResult,
+      resolveExit,
+    }
+    entries.set(id, entry)
+    publish()
+    return result
+  }
+  const update = (id: string, props: Partial<TProps> & CreateOverlayProps<TReturn>) => {
+    const entry = getEntry(id)
+    entry.userProps = { ...entry.userProps, ...props }
+    entry.props = {
+      ...entry.props,
+      ...props,
+      open: entry.props.open,
+      onOpenChange: entry.props.onOpenChange,
+      onExitComplete: entry.props.onExitComplete,
+      setReturnValue: entry.props.setReturnValue,
+      setExitComplete: entry.props.setExitComplete,
+    }
+    publish()
+  }
+  const removeAll = () => {
+    for (const entry of entries.values()) {
+      entry.resolveResult(undefined)
+      entry.resolveExit()
+    }
+    entries.clear()
+    publish()
+  }
+
+  function ViewportItem({ entry, props }: { entry: Entry; props: Props }) {
+    const [mounted, setMounted] = useState(false)
+    useEffect(() => {
+      setMounted(true)
+    }, [])
+    useEffect(() => {
+      if (mounted && props.open) entry.presented = true
+    }, [entry, mounted, props.open])
+    return <Component {...props} open={mounted && !!props.open} />
+  }
+
+  function Viewport() {
+    const current = useSyncExternalStore(subscribe, getStoreSnapshot, getServerSnapshot)
+    return (
+      <>
+        {current.map((entry) => (
+          <ViewportItem key={entry.key} entry={entry} props={entry.props} />
+        ))}
+      </>
+    )
+  }
+
+  return {
+    Viewport,
+    open,
+    close,
+    update,
+    remove,
+    removeAll,
+    get: (id) => getEntry(id).props,
+    has: (id) => entries.has(id),
+    getSnapshot: () => propsSnapshot,
+    waitForExit: (id) => entries.get(id)?.exited || Promise.resolve(),
+  }
+}

package/templates/hono-fullstack/libs/ui/src/components/atoms/overlays/Popover.tsx

@@ -0,0 +1,57 @@
+'use client'
+import { ark } from '@ark-ui/react/factory'
+import { Popover } from '@ark-ui/react/popover'
+import type { ComponentProps } from 'react'
+import { createSlotRecipeContext } from 'styled-system/jsx'
+import { popover } from 'styled-system/recipes'
+
+const { withRootProvider, withContext } = createSlotRecipeContext(popover)
+
+export type RootProps = ComponentProps<typeof Root>
+export const Root = withRootProvider(Popover.Root, {
+  defaultProps: { unmountOnExit: true, lazyMount: true },
+})
+export const RootProvider = withRootProvider(Popover.RootProvider, {
+  defaultProps: { unmountOnExit: true, lazyMount: true },
+})
+export const Anchor = withContext(Popover.Anchor, 'anchor')
+export const ArrowTip = withContext(Popover.ArrowTip, 'arrowTip')
+export const Arrow = withContext(Popover.Arrow, 'arrow', {
+  defaultProps: { children: <ArrowTip /> },
+})
+export const CloseTrigger = withContext(Popover.CloseTrigger, 'closeTrigger')
+export const Content = withContext(Popover.Content, 'content')
+export const Description = withContext(Popover.Description, 'description')
+export const Indicator = withContext(Popover.Indicator, 'indicator')
+export const Positioner = withContext(Popover.Positioner, 'positioner')
+export const Title = withContext(Popover.Title, 'title')
+export const Trigger = withContext(Popover.Trigger, 'trigger')
+
+export const Body = withContext(ark.div, 'body')
+export const Header = withContext(ark.div, 'header')
+export const Footer = withContext(ark.div, 'footer')
+
+export { PopoverContext as Context } from '@ark-ui/react/popover'
+
+export { usePopover, type UsePopoverProps, type UsePopoverReturn } from '@ark-ui/react/popover'
+
+export type RootProviderProps = ComponentProps<typeof RootProvider>
+export type AnchorProps = ComponentProps<typeof Anchor>
+export type ArrowTipProps = ComponentProps<typeof ArrowTip>
+export type ArrowProps = ComponentProps<typeof Arrow>
+export type CloseTriggerProps = ComponentProps<typeof CloseTrigger>
+export type ContentProps = ComponentProps<typeof Content>
+export type DescriptionProps = ComponentProps<typeof Description>
+export type IndicatorProps = ComponentProps<typeof Indicator>
+export type PositionerProps = ComponentProps<typeof Positioner>
+export type TitleProps = ComponentProps<typeof Title>
+export type TriggerProps = ComponentProps<typeof Trigger>
+export type BodyProps = ComponentProps<typeof Body>
+export type HeaderProps = ComponentProps<typeof Header>
+export type FooterProps = ComponentProps<typeof Footer>
+
+export {
+  usePopoverContext,
+  type PopoverOpenChangeDetails as OpenChangeDetails,
+  type PopoverTriggerValueChangeDetails as TriggerValueChangeDetails,
+} from '@ark-ui/react/popover'

package/templates/hono-fullstack/libs/ui/src/components/atoms/overlays/Tooltip.tsx

@@ -0,0 +1,37 @@
+'use client'
+import { Tooltip as ArkTooltip } from '@ark-ui/react/tooltip'
+import type { ComponentProps } from 'react'
+import { createSlotRecipeContext } from 'styled-system/jsx'
+import { tooltip } from 'styled-system/recipes'
+
+const { withRootProvider, withContext } = createSlotRecipeContext(tooltip)
+
+export const Root = withRootProvider(ArkTooltip.Root, {
+  defaultProps: { unmountOnExit: true, lazyMount: true },
+})
+export const RootProvider = withRootProvider(ArkTooltip.RootProvider, {
+  defaultProps: { unmountOnExit: true, lazyMount: true },
+})
+export const Arrow = withContext(ArkTooltip.Arrow, 'arrow')
+export const ArrowTip = withContext(ArkTooltip.ArrowTip, 'arrowTip')
+export const Content = withContext(ArkTooltip.Content, 'content')
+export const Positioner = withContext(ArkTooltip.Positioner, 'positioner')
+export const Trigger = withContext(ArkTooltip.Trigger, 'trigger')
+
+export type RootProps = ComponentProps<typeof Root>
+export type RootProviderProps = ComponentProps<typeof RootProvider>
+export type ArrowProps = ComponentProps<typeof Arrow>
+export type ArrowTipProps = ComponentProps<typeof ArrowTip>
+export type ContentProps = ComponentProps<typeof Content>
+export type PositionerProps = ComponentProps<typeof Positioner>
+export type TriggerProps = ComponentProps<typeof Trigger>
+
+export {
+  TooltipContext as Context,
+  useTooltip,
+  useTooltipContext,
+  type UseTooltipProps,
+  type UseTooltipReturn,
+  type TooltipOpenChangeDetails as OpenChangeDetails,
+  type TooltipTriggerValueChangeDetails as TriggerValueChangeDetails,
+} from '@ark-ui/react/tooltip'

package/templates/hono-fullstack/libs/ui/src/components/atoms/typography/Heading.tsx

@@ -0,0 +1,6 @@
+import type { ComponentProps } from 'react'
+import { styled } from 'styled-system/jsx'
+import { heading } from 'styled-system/recipes'
+
+export type HeadingProps = ComponentProps<typeof Heading>
+export const Heading = styled('h2', heading)

package/templates/hono-fullstack/libs/ui/src/components/atoms/typography/Link.tsx

@@ -0,0 +1,7 @@
+import { ark } from '@ark-ui/react/factory'
+import type { ComponentProps } from 'react'
+import { styled } from 'styled-system/jsx'
+import { link } from 'styled-system/recipes'
+
+export type LinkProps = ComponentProps<typeof Link>
+export const Link = styled(ark.a, link)

package/templates/hono-fullstack/libs/ui/src/components/atoms/typography/LinkOverlay.tsx

@@ -0,0 +1,21 @@
+'use client'
+import { ark } from '@ark-ui/react/factory'
+import {
+  LinkBox as PandaLinkBox,
+  type LinkBoxProps as PandaLinkBoxProps,
+  LinkOverlay as PandaLinkOverlay,
+  type LinkOverlayProps as PandaLinkOverlayProps,
+} from 'styled-system/jsx'
+import { createLayout } from '@/components/atoms/internal/create-layout'
+
+export type LinkBoxProps = PandaLinkBoxProps & { asChild?: boolean }
+export const LinkBox = /* @__PURE__ */ createLayout<LinkBoxProps, HTMLDivElement>(
+  PandaLinkBox,
+  ark.div,
+)
+export type LinkOverlayProps = PandaLinkOverlayProps & { asChild?: boolean }
+export const LinkOverlay = /* @__PURE__ */ createLayout<LinkOverlayProps, HTMLAnchorElement>(
+  PandaLinkOverlay,
+  ark.a,
+  { 'data-link-overlay': '' },
+)

package/templates/hono-fullstack/libs/ui/src/components/atoms/typography/Text.tsx

@@ -0,0 +1,6 @@
+import type { ComponentProps } from 'react'
+import { styled } from 'styled-system/jsx'
+import { text } from 'styled-system/recipes'
+
+export type TextProps = ComponentProps<typeof Text>
+export const Text = styled('p', text)

package/templates/hono-fullstack/libs/ui/src/components/atoms/utilities/VisuallyHidden.tsx

@@ -0,0 +1,13 @@
+'use client'
+import { ark } from '@ark-ui/react/factory'
+import {
+  VisuallyHidden as PandaVisuallyHidden,
+  type VisuallyHiddenProps as PandaVisuallyHiddenProps,
+} from 'styled-system/jsx'
+import { createLayout } from '@/components/atoms/internal/create-layout'
+
+export type VisuallyHiddenProps = PandaVisuallyHiddenProps & { asChild?: boolean }
+export const VisuallyHidden = /* @__PURE__ */ createLayout<VisuallyHiddenProps, HTMLDivElement>(
+  PandaVisuallyHidden,
+  ark.div,
+)