From 47d9e017657c4d265dea53bd86d727097a7ba282 Mon Sep 17 00:00:00 2001 From: Adam <2363879+adamdotdevin@users.noreply.github.com> Date: Thu, 16 Oct 2025 14:53:44 -0500 Subject: wip: css/ui and desktop work --- packages/desktop/src/ui/button.tsx | 36 -------- packages/desktop/src/ui/collapsible.tsx | 2 +- packages/desktop/src/ui/icon.tsx | 155 -------------------------------- packages/desktop/src/ui/index.ts | 5 -- packages/desktop/src/ui/link.tsx | 13 --- packages/desktop/src/ui/logo.tsx | 125 -------------------------- packages/desktop/src/ui/tabs.tsx | 71 --------------- packages/desktop/src/ui/tooltip.tsx | 58 ------------ 8 files changed, 1 insertion(+), 464 deletions(-) delete mode 100644 packages/desktop/src/ui/button.tsx delete mode 100644 packages/desktop/src/ui/icon.tsx delete mode 100644 packages/desktop/src/ui/link.tsx delete mode 100644 packages/desktop/src/ui/logo.tsx delete mode 100644 packages/desktop/src/ui/tabs.tsx delete mode 100644 packages/desktop/src/ui/tooltip.tsx (limited to 'packages/desktop/src/ui') diff --git a/packages/desktop/src/ui/button.tsx b/packages/desktop/src/ui/button.tsx deleted file mode 100644 index 21d89fbee..000000000 --- a/packages/desktop/src/ui/button.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import { Button as Kobalte } from "@kobalte/core/button" -import { type ComponentProps, splitProps } from "solid-js" - -export interface ButtonProps { - variant?: "primary" | "secondary" | "ghost" - size?: "sm" | "md" | "lg" -} - -export function Button(props: ComponentProps<"button"> & ButtonProps) { - const [split, rest] = splitProps(props, ["variant", "size", "class", "classList"]) - return ( - - {props.children} - - ) -} diff --git a/packages/desktop/src/ui/collapsible.tsx b/packages/desktop/src/ui/collapsible.tsx index e0202f617..d17b3e623 100644 --- a/packages/desktop/src/ui/collapsible.tsx +++ b/packages/desktop/src/ui/collapsible.tsx @@ -1,7 +1,7 @@ import { Collapsible as KobalteCollapsible } from "@kobalte/core/collapsible" import { splitProps } from "solid-js" import type { ComponentProps, ParentProps } from "solid-js" -import { Icon, type IconProps } from "./icon" +import { Icon, type IconProps } from "@opencode-ai/ui" export interface CollapsibleProps extends ComponentProps {} export interface CollapsibleTriggerProps extends ComponentProps {} diff --git a/packages/desktop/src/ui/icon.tsx b/packages/desktop/src/ui/icon.tsx deleted file mode 100644 index 35c77c078..000000000 --- a/packages/desktop/src/ui/icon.tsx +++ /dev/null @@ -1,155 +0,0 @@ -import { splitProps, type ComponentProps } from "solid-js" - -export interface IconProps extends ComponentProps<"svg"> { - name: keyof typeof icons - size?: number -} - -// prettier-ignore -const icons = { - close: '', - menu: ' ', - "chevron-right": '', - "chevron-left": '', - "chevron-down": '', - "chevron-up": '', - "chevron-down-square": '', - "chevron-up-square": '', - "chevron-right-square": '', - "chevron-left-square": '', - settings: '', - globe: '', - github: '', - hammer: '', - "avatar-square": '', - slash: '', - robot: '', - cloud: '', - "file-text": '', - file: '', - "file-checkmark": '', - "file-code": '', - "file-important": '', - "file-minus": '', - "file-plus": '', - files: '', - "file-zip": '', - jpg: '', - pdf: '', - png: '', - gif: '', - archive: '', - sun: '', - moon: '', - monitor: '', - command: '', - link: '', - share: '', - branch: '', - logout: '', - login: '', - keys: '', - key: '', - info: '', - warning: '', - checkmark: '', - "checkmark-square": '', - plus: '', - minus: '', - undo: '', - merge: '', - redo: '', - refresh: '', - rotate: '', - "arrow-left": '', - "arrow-down": '', - "arrow-right": '', - "arrow-up": '', - enter: '', - trash: '', - package: '', - box: '', - lock: '', - unlocked: '', - activity: '', - asterisk: '', - bell: '', - "bell-off": '', - bolt: '', - bookmark: '', - brain: '', - browser: '', - "browser-cursor": '', - bug: '', - "carat-down": '', - "carat-left": '', - "carat-right": '', - "carat-up": '', - cards: '', - chart: '', - "check-circle": '', - checklist: '', - "checklist-cards": '', - lab: '', - circle: '', - "circle-dotted": '', - clipboard: '', - clock: '', - "close-circle": '', - terminal: '', - code: '', - components: '', - copy: '', - cpu: '', - dashboard: '', - transfer: '', - devices: '', - diamond: '', - dice: '', - discord: '', - dots: '', - expand: '', - droplet: '', - "chevron-double-down": '', - "chevron-double-left": '', - "chevron-double-right": '', - "chevron-double-up": '', - "speech-bubble": '', - message: '', - annotation: '', - square: '', - "pull-request": '', - pencil: '', - sparkles: '', - photo: '', - columns: '', - "open-pane": '', - "close-pane": '', - "file-search": '', - "folder-search": '', - search: '', - "web-search": '', - loading: '', - mic: '', - } as const - -export function Icon(props: IconProps) { - const [local, others] = splitProps(props, ["name", "size", "class", "classList"]) - const size = local.size ?? 24 - return ( - - ) -} diff --git a/packages/desktop/src/ui/index.ts b/packages/desktop/src/ui/index.ts index d3f24a192..a6ade6ff3 100644 --- a/packages/desktop/src/ui/index.ts +++ b/packages/desktop/src/ui/index.ts @@ -1,4 +1,3 @@ -export { Button, type ButtonProps } from "./button" export { Collapsible, type CollapsibleProps, @@ -6,8 +5,4 @@ export { type CollapsibleContentProps, } from "./collapsible" export { FileIcon, type FileIconProps } from "./file-icon" -export { Icon, type IconProps } from "./icon" export { IconButton, type IconButtonProps } from "./icon-button" -export { Link, type LinkProps } from "./link" -export { Logo, type LogoProps } from "./logo" -export { Tooltip, type TooltipProps } from "./tooltip" diff --git a/packages/desktop/src/ui/link.tsx b/packages/desktop/src/ui/link.tsx deleted file mode 100644 index 461206d58..000000000 --- a/packages/desktop/src/ui/link.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import { A } from "@solidjs/router" -import { splitProps } from "solid-js" -import type { ComponentProps } from "solid-js" - -export interface LinkProps extends ComponentProps { - variant?: "primary" | "secondary" | "ghost" - size?: "sm" | "md" | "lg" -} - -export function Link(props: LinkProps) { - const [, others] = splitProps(props, ["variant", "size", "class"]) - return -} diff --git a/packages/desktop/src/ui/logo.tsx b/packages/desktop/src/ui/logo.tsx deleted file mode 100644 index 0bbaba835..000000000 --- a/packages/desktop/src/ui/logo.tsx +++ /dev/null @@ -1,125 +0,0 @@ -import type { ComponentProps } from "solid-js" - -export interface LogoProps extends ComponentProps<"svg"> { - variant?: "mark" | "full" | "ornate" - size?: number -} - -export function Logo(props: LogoProps) { - const { variant = "mark", size = 64, ...others } = props - - if (variant === "mark") { - return ( - - - - - ) - } - - if (variant === "full") { - return ( - - - - - - - - - - - - - ) - } - - return ( - - - - - - - - - - - - - - - - - - - ) -} diff --git a/packages/desktop/src/ui/tabs.tsx b/packages/desktop/src/ui/tabs.tsx deleted file mode 100644 index d82d3327a..000000000 --- a/packages/desktop/src/ui/tabs.tsx +++ /dev/null @@ -1,71 +0,0 @@ -import { Tabs as KobalteTabs } from "@kobalte/core/tabs" -import { splitProps } from "solid-js" -import type { ComponentProps, ParentProps } from "solid-js" - -export interface TabsProps extends ComponentProps {} -export interface TabsListProps extends ComponentProps {} -export interface TabsTriggerProps extends ComponentProps {} -export interface TabsContentProps extends ComponentProps {} - -function TabsRoot(props: TabsProps) { - return -} - -function TabsList(props: TabsListProps) { - const [local, others] = splitProps(props, ["class"]) - return ( - - ) -} - -function TabsTrigger(props: ParentProps) { - const [local, others] = splitProps(props, ["class", "children"]) - return ( - - {local.children} - - ) -} - -function TabsContent(props: ParentProps) { - const [local, others] = splitProps(props, ["class", "children"]) - return ( - - {local.children} - - ) -} - -export const Tabs = Object.assign(TabsRoot, { - List: TabsList, - Trigger: TabsTrigger, - Content: TabsContent, -}) diff --git a/packages/desktop/src/ui/tooltip.tsx b/packages/desktop/src/ui/tooltip.tsx deleted file mode 100644 index 8bf1dc429..000000000 --- a/packages/desktop/src/ui/tooltip.tsx +++ /dev/null @@ -1,58 +0,0 @@ -import { Tooltip as KobalteTooltip } from "@kobalte/core/tooltip" -import { children, createEffect, createSignal, splitProps } from "solid-js" -import type { ComponentProps } from "solid-js" - -export interface TooltipProps extends ComponentProps { - value: string | (() => string) - class?: string -} - -export function Tooltip(props: TooltipProps) { - const [open, setOpen] = createSignal(false) - const [local, others] = splitProps(props, ["class", "children"]) - - const c = children(() => local.children) - - createEffect(() => { - const childElements = c() - if (childElements instanceof HTMLElement) { - childElements.addEventListener("focus", () => setOpen(true)) - childElements.addEventListener("blur", () => setOpen(false)) - } else if (Array.isArray(childElements)) { - for (const child of childElements) { - if (child instanceof HTMLElement) { - child.addEventListener("focus", () => setOpen(true)) - child.addEventListener("blur", () => setOpen(false)) - } - } - } - }) - - return ( - - - {c()} - - - - {typeof others.value === "function" ? others.value() : others.value} - - - - - ) -} -- cgit v1.2.3