aljaz/opencode
1
0
Fork 0
mirror of https://github.com/aljazceru/opencode.git synced 2025-12-21 09:44:21 +01:00
Code Issues Packages Projects Releases Wiki Activity

wip: css/ui and desktop work

Browse Source
This commit is contained in:
Adam
2025-10-16 14:53:44 -05:00
parent fc18fc8a08
commit 47d9e01765
52 changed files with 539 additions and 1641 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
packages/ui/src/app.tsx
View File

@@ -1,6 +1,5 @@
import type { Component } from "solid-js"
import { Button, Select, Tabs } from "./components"
import "@opencode-ai/css"
import { Button, Select, Tabs, Tooltip, Fonts } from "./components"
import "./index.css"
const App: Component = () => {
@@ -17,6 +16,9 @@ const App: Component = () => {
<Button variant="ghost" size="normal">
Normal Ghost
</Button>
<Button variant="secondary" size="normal" disabled>
Normal Disabled
</Button>
<Button variant="primary" size="large">
Large Primary
</Button>
@@ -26,6 +28,9 @@ const App: Component = () => {
<Button variant="ghost" size="large">
Large Ghost
</Button>
<Button variant="secondary" size="large" disabled>
Large Disabled
</Button>
</section>
<h3>Select</h3>
<section>
@@ -88,14 +93,35 @@ const App: Component = () => {
</Tabs.Content>
</Tabs>
</section>
<h3>Tooltips</h3>
<section>
<Tooltip value="This is a top tooltip" placement="top">
<Button variant="secondary">Top Tooltip</Button>
</Tooltip>
<Tooltip value="This is a bottom tooltip" placement="bottom">
<Button variant="secondary">Bottom Tooltip</Button>
</Tooltip>
<Tooltip value="This is a left tooltip" placement="left">
<Button variant="secondary">Left Tooltip</Button>
</Tooltip>
<Tooltip value="This is a right tooltip" placement="right">
<Button variant="secondary">Right Tooltip</Button>
</Tooltip>
<Tooltip value={() => `Dynamic tooltip: ${new Date().toLocaleTimeString()}`} placement="top">
<Button variant="primary">Dynamic Tooltip</Button>
</Tooltip>
</section>
</div>
)
return (
<main>
<Content />
<Content dark />
</main>
<>
<Fonts />
<main>
<Content />
<Content dark />
</main>
</>
)
}

44
packages/ui/src/components/fonts.tsx Normal file
View File

@@ -0,0 +1,44 @@
import { Style, Link } from "@solidjs/meta"
import geist from "@opencode-ai/css/fonts/geist.woff2"
import geistMono from "@opencode-ai/css/fonts/geist-mono.woff2"
export const Fonts = () => {
return (
<>
<Style>{`
@font-face {
font-family: "geist";
src: url("${geist}") format("woff2-variations");
font-display: swap;
font-style: normal;
font-weight: 100 900;
}
@font-face {
font-family: "geist-fallback";
src: local("Arial");
size-adjust: 100%;
ascent-override: 97%;
descent-override: 25%;
line-gap-override: 1%;
}
@font-face {
font-family: "geist-mono";
src: url("${geistMono}") format("woff2-variations");
font-display: swap;
font-style: normal;
font-weight: 100 900;
}
@font-face {
font-family: "geist-mono-fallback";
src: local("Courier New");
size-adjust: 100%;
ascent-override: 97%;
descent-override: 25%;
line-gap-override: 1%;
}
`}</Style>
<Link rel="preload" href={geist} as="font" type="font/woff2" crossorigin="anonymous" />
<Link rel="preload" href={geistMono} as="font" type="font/woff2" crossorigin="anonymous" />
</>
)
}

2
packages/ui/src/components/index.ts
View File

@@ -1,4 +1,6 @@
export * from "./button"
export * from "./icon"
export * from "./fonts"
export * from "./select"
export * from "./tabs"
export * from "./tooltip"

44
packages/ui/src/components/tooltip.tsx Normal file
View File

@@ -0,0 +1,44 @@
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<typeof KobalteTooltip> {
value: string | (() => string)
class?: string
}
export function Tooltip(props: TooltipProps) {
const [open, setOpen] = createSignal(false)
const [local, others] = splitProps(props, ["children", "class"])
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 (
<KobalteTooltip forceMount {...others} open={open()} onOpenChange={setOpen}>
<KobalteTooltip.Trigger as={"div"} data-component="tooltip-trigger">
{c()}
</KobalteTooltip.Trigger>
<KobalteTooltip.Portal>
<KobalteTooltip.Content data-component="tooltip" data-placement={props.placement} class={local.class}>
{typeof others.value === "function" ? others.value() : others.value}
<KobalteTooltip.Arrow data-slot="arrow" size={18} />
</KobalteTooltip.Content>
</KobalteTooltip.Portal>
</KobalteTooltip>
)
}

10
packages/ui/src/index.css
View File

@@ -1,8 +1,10 @@
@import "@opencode-ai/css";
:root {
body {
margin: 0;
background-color: var(--background-background);
color: var(--text-default-text);
background-color: var(--background-base);
color: var(--text-base);
}
main {
display: flex;
@@ -35,6 +37,6 @@
}
.dark {
background-color: var(--background-background);
color: var(--text-default-text);
background-color: var(--background-base);
color: var(--text-base);
}

10
packages/ui/src/index.tsx
View File

@@ -1,5 +1,6 @@
/* @refresh reload */
import { render } from "solid-js/web"
import { MetaProvider } from "@solidjs/meta"
import App from "./app"
@@ -11,4 +12,11 @@ if (import.meta.env.DEV && !(root instanceof HTMLElement)) {
)
}
render(() => <App />, root!)
render(
() => (
<MetaProvider>
<App />
</MetaProvider>
),
root!,
)