@opencode/ui 0.0.0-reserved → 2.0.0

package/src/overlays/tooltip/tooltip.tsx

@@ -0,0 +1,154 @@
+import { Content, Portal, Root, Trigger } from "@kobalte/core/tooltip"
+import { createEffect, Match, onCleanup, splitProps, Switch, untrack, type JSX } from "solid-js"
+import type { ComponentProps } from "solid-js"
+import { createStore } from "solid-js/store"
+import "./tooltip.css"
+
+export interface TooltipProps extends ComponentProps<typeof Root> {
+  value: JSX.Element
+  appearance?: "standard" | "compact" | "large"
+  class?: string
+  contentClass?: string
+  contentStyle?: JSX.CSSProperties
+  inactive?: boolean
+  forceOpen?: boolean
+  triggerTabIndex?: number
+}
+
+export function Tooltip(props: TooltipProps) {
+  let ref: HTMLDivElement | undefined
+  const [state, setState] = createStore({
+    open: false,
+    block: false,
+    expand: false,
+  })
+  const [local, others] = splitProps(props, [
+    "children",
+    "appearance",
+    "class",
+    "contentClass",
+    "contentStyle",
+    "inactive",
+    "forceOpen",
+    "triggerTabIndex",
+    "ignoreSafeArea",
+    "value",
+  ])
+
+  const close = () => setState("open", false)
+  const controlled = () => local.forceOpen !== undefined
+
+  const inside = () => {
+    const active = document.activeElement
+    if (!ref || !active) return false
+    return ref.contains(active)
+  }
+
+  const drop = (expand = state.expand) => {
+    if (expand || !state.block) return
+    if (ref?.matches(":hover")) return
+    if (inside()) return
+    setState("block", false)
+  }
+
+  const sync = () => {
+    const expand = !!ref?.querySelector('[aria-expanded="true"], [data-expanded]')
+    setState("expand", expand)
+    if (expand) {
+      setState("block", true)
+      close()
+      return
+    }
+    drop(expand)
+  }
+
+  const arm = () => {
+    setState("block", true)
+    close()
+  }
+
+  const leave = () => {
+    if (!inside()) close()
+    drop()
+  }
+
+  createEffect(() => {
+    if (!ref) return
+    untrack(sync)
+    const obs = new MutationObserver(sync)
+    obs.observe(ref, {
+      subtree: true,
+      childList: true,
+      attributes: true,
+      attributeFilter: ["aria-expanded", "data-expanded"],
+    })
+    onCleanup(() => obs.disconnect())
+  })
+
+  let justClickedTrigger = false
+
+  return (
+    <Switch>
+      <Match when={local.inactive}>{local.children}</Match>
+      <Match when={true}>
+        <Root
+          gutter={4}
+          openDelay={400}
+          skipDelayDuration={300}
+          {...others}
+          closeDelay={0}
+          ignoreSafeArea={local.ignoreSafeArea ?? true}
+          open={controlled() ? local.forceOpen : state.open}
+          onOpenChange={(open) => {
+            if (controlled()) return
+            if (state.block && open) return
+            if (justClickedTrigger) {
+              justClickedTrigger = false
+              return
+            }
+            setState("open", open)
+          }}
+        >
+          <Trigger
+            ref={ref}
+            as="div"
+            tabIndex={local.triggerTabIndex}
+            data-component="tooltip-v2-trigger"
+            class={local.class}
+            onPointerDownCapture={arm}
+            onKeyDownCapture={(event: KeyboardEvent) => {
+              if (event.key !== "Enter" && event.key !== " ") return
+              arm()
+            }}
+            onPointerLeave={leave}
+            onFocusOut={() => requestAnimationFrame(() => drop())}
+          >
+            {local.children}
+          </Trigger>
+          <Portal>
+            <Content
+              ref={(el) => {
+                const theme = ref?.closest("[data-theme]")?.getAttribute("data-theme")
+                if (theme) el.setAttribute("data-theme", theme)
+              }}
+              data-component="tooltip-v2"
+              data-appearance={local.appearance ?? "compact"}
+              data-placement={props.placement}
+              data-force-open={local.forceOpen}
+              class={local.contentClass}
+              style={local.contentStyle}
+              onPointerDownOutside={(e) => {
+                if (ref === e.target || (e.target instanceof Node && ref?.contains(e.target))) {
+                  justClickedTrigger = true
+                }
+                e.preventDefault()
+              }}
+            >
+              {local.value}
+            </Content>
+          </Portal>
+        </Root>
+      </Match>
+    </Switch>
+  )
+}

package/src/storybook/fixtures.ts

@@ -0,0 +1,51 @@
+export const diff = {
+  before: {
+    name: "src/greet.ts",
+    contents: `export function greet(name: string) {
+  return \`Hello, \${name}!\`
+}
+`,
+  },
+  after: {
+    name: "src/greet.ts",
+    contents: `export function greet(name: string, excited = false) {
+  const message = \`Hello, \${name}!\`
+  return excited ? \`\${message}!!\` : message
+}
+`,
+  },
+}
+
+export const code = {
+  name: "src/calc.ts",
+  contents: `export function sum(values: number[]) {
+  return values.reduce((total, value) => total + value, 0)
+}
+
+export function average(values: number[]) {
+  if (values.length === 0) return 0
+  return sum(values) / values.length
+}
+`,
+}
+
+export const markdown = [
+  "# Markdown",
+  "",
+  "Use **Markdown** for rich text.",
+  "",
+  "## Highlights",
+  "- Headings, lists, and code blocks",
+  "- Inline `code` and links",
+  "",
+  "```ts",
+  "export const value = 42",
+  "```",
+  "",
+  "More at https://example.com/docs",
+].join("\n")
+
+export const changes = {
+  additions: 18,
+  deletions: 6,
+}

package/src/storybook/scaffold.tsx

@@ -0,0 +1,62 @@
+import { ErrorBoundary, type ValidComponent } from "solid-js"
+import { Dynamic } from "solid-js/web"
+
+function fn(value: unknown): value is (...args: never[]) => unknown {
+  return typeof value === "function"
+}
+
+function pick(mod: Record<string, unknown>, name?: string) {
+  if (name && fn(mod[name])) return mod[name]
+  if (fn(mod.default)) return mod.default
+
+  const preferred = Object.keys(mod)
+    .filter((k) => k[0] && k[0] === k[0].toUpperCase())
+    .find((k) => fn(mod[k]))
+  if (preferred) return mod[preferred]
+
+  const first = Object.keys(mod).find((k) => fn(mod[k]))
+  if (first) return mod[first]
+
+  return () => {
+    return (
+      <div data-component="storybook-missing">
+        <div>Missing component export.</div>
+        <div style="opacity:0.7;font-size:12px">Exports: {Object.keys(mod).join(", ") || "(none)"}</div>
+      </div>
+    )
+  }
+}
+
+export function create(input: {
+  title: string
+  mod: Record<string, unknown>
+  name?: string
+  args?: Record<string, unknown>
+}) {
+  const component = pick(input.mod, input.name) as unknown as ValidComponent
+
+  return {
+    meta: {
+      title: input.title,
+      component,
+    },
+    Basic: {
+      args: input.args ?? {},
+      render: (args: Record<string, unknown>) => {
+        return (
+          <ErrorBoundary
+            fallback={(err) => {
+              return (
+                <pre data-component="storybook-error" style="white-space:pre-wrap">
+                  {String(err)}
+                </pre>
+              )
+            }}
+          >
+            <Dynamic component={component} {...args} />
+          </ErrorBoundary>
+        )
+      },
+    },
+  }
+}

package/src/styles/animations.css

@@ -0,0 +1,141 @@
+:root {
+  --animate-pulse: pulse-opacity 2s ease-in-out infinite;
+  --animate-pulse-scale: pulse-scale 1.2s ease-in-out infinite;
+}
+
+@keyframes pulse-opacity {
+  0%,
+  100% {
+    opacity: 0.4;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+
+@keyframes pulse-scale {
+  0%,
+  100% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(0.6666667);
+  }
+}
+
+@keyframes pulse-opacity-dim {
+  0%,
+  100% {
+    opacity: 0.15;
+  }
+  50% {
+    opacity: 0.35;
+  }
+}
+
+@keyframes fadeUp {
+  from {
+    opacity: 0;
+    transform: translateY(5px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.fade-up-text {
+  animation: fadeUp 0.4s ease-out forwards;
+  opacity: 0;
+
+  &:nth-child(1) {
+    animation-delay: 0.1s;
+  }
+  &:nth-child(2) {
+    animation-delay: 0.2s;
+  }
+  &:nth-child(3) {
+    animation-delay: 0.3s;
+  }
+  &:nth-child(4) {
+    animation-delay: 0.4s;
+  }
+  &:nth-child(5) {
+    animation-delay: 0.5s;
+  }
+  &:nth-child(6) {
+    animation-delay: 0.6s;
+  }
+  &:nth-child(7) {
+    animation-delay: 0.7s;
+  }
+  &:nth-child(8) {
+    animation-delay: 0.8s;
+  }
+  &:nth-child(9) {
+    animation-delay: 0.9s;
+  }
+  &:nth-child(10) {
+    animation-delay: 1s;
+  }
+  &:nth-child(11) {
+    animation-delay: 1.1s;
+  }
+  &:nth-child(12) {
+    animation-delay: 1.2s;
+  }
+  &:nth-child(13) {
+    animation-delay: 1.3s;
+  }
+  &:nth-child(14) {
+    animation-delay: 1.4s;
+  }
+  &:nth-child(15) {
+    animation-delay: 1.5s;
+  }
+  &:nth-child(16) {
+    animation-delay: 1.6s;
+  }
+  &:nth-child(17) {
+    animation-delay: 1.7s;
+  }
+  &:nth-child(18) {
+    animation-delay: 1.8s;
+  }
+  &:nth-child(19) {
+    animation-delay: 1.9s;
+  }
+  &:nth-child(20) {
+    animation-delay: 2s;
+  }
+  &:nth-child(21) {
+    animation-delay: 2.1s;
+  }
+  &:nth-child(22) {
+    animation-delay: 2.2s;
+  }
+  &:nth-child(23) {
+    animation-delay: 2.3s;
+  }
+  &:nth-child(24) {
+    animation-delay: 2.4s;
+  }
+  &:nth-child(25) {
+    animation-delay: 2.5s;
+  }
+  &:nth-child(26) {
+    animation-delay: 2.6s;
+  }
+  &:nth-child(27) {
+    animation-delay: 2.7s;
+  }
+  &:nth-child(28) {
+    animation-delay: 2.8s;
+  }
+  &:nth-child(29) {
+    animation-delay: 2.9s;
+  }
+  &:nth-child(30) {
+    animation-delay: 3s;
+  }
+}