chore: add _library page

cztomsik · cztomsik · commit a52652aace6d · 2025-08-10T23:15:05.000+02:00
diff --git a/src/app/_components/Alert.tsx b/src/app/_components/Alert.tsx
@@ -5,3 +5,5 @@ export const Alert = ({ class: className = "", children }) => {
     </div>
   )
 }
+
+export const AlertExample = () => <Alert>Hello World!</Alert>
diff --git a/src/app/_components/AutoGrowTextarea.tsx b/src/app/_components/AutoGrowTextarea.tsx
@@ -1,3 +1,5 @@
+import { useState } from "preact/hooks"
+
 export const AutoGrowTextarea = ({ class: className = "", value, onChange, ...props }) => (
   <div class="vstack relative">
     <textarea class={`!absolute !inset-0 ${className}`} value={value} onInput={e => onChange(e.target!.value)} {...props} />
@@ -8,3 +10,13 @@ export const AutoGrowTextarea = ({ class: className = "", value, onChange, ...pr
     />
   </div>
 )
+
+export const AutoGrowTextareaExample = () => {
+  const [text, setText] = useState("")
+
+  return (
+    <div>
+      <AutoGrowTextarea value={text} onChange={setText} placeholder="Line-growing textarea" />
+    </div>
+  )
+}
diff --git a/src/app/_components/Badge.tsx b/src/app/_components/Badge.tsx
@@ -2,3 +2,11 @@ export const Badge = ({ class: className = "", value }) =>
   value > 0 ? (
     <span class={`ml-1 bg-neutral-6 text-neutral-11 px-2 py-1 text-xs font-bold rounded-full ${className}`}>{value}</span>
   ) : null
+
+export const BadgeExample = () => (
+  <div class="flex gap-4 items-center">
+    <span>
+      Notifications <Badge value={5} />
+    </span>
+  </div>
+)
diff --git a/src/app/_components/Checkbox.tsx b/src/app/_components/Checkbox.tsx
@@ -1,3 +1,5 @@
+import { useState } from "preact/hooks"
+
 export const Checkbox = ({ label, value, onChange }) => {
   return (
     <label class="flex items-center">
@@ -6,3 +8,13 @@ export const Checkbox = ({ label, value, onChange }) => {
     </label>
   )
 }
+
+export const CheckboxExample = () => {
+  const [checked, setChecked] = useState(true)
+
+  return (
+    <div>
+      <Checkbox label="Check me" value={checked} onChange={setChecked} />
+    </div>
+  )
+}
diff --git a/src/app/_components/Dropdown.tsx b/src/app/_components/Dropdown.tsx
diff --git a/src/app/_components/List.tsx b/src/app/_components/List.tsx
@@ -1,3 +1,4 @@
+import { useState } from "preact/hooks"
 import { useAriaList } from "../_hooks"
 
 const List = ({ class: className = "", children, ...props }) => {
@@ -38,3 +39,20 @@ export { List }
 List.Item = ListItem
 ListItem.Title = ListItemTitle
 ListItem.Subtitle = ListItemSubtitle
+
+export const ListExample = () => {
+  const [selected, setSelected] = useState(1)
+
+  return (
+    <div class="h-64">
+      <List>
+        {[1, 2, 3, 4, 5].map(i => (
+          <List.Item key={i} selected={selected === i} onClick={() => setSelected(i)}>
+            <ListItem.Title>Item {i}</ListItem.Title>
+            <ListItem.Subtitle>Subtitle</ListItem.Subtitle>
+          </List.Item>
+        ))}
+      </List>
+    </div>
+  )
+}
diff --git a/src/app/_components/Markdown.tsx b/src/app/_components/Markdown.tsx
@@ -15,3 +15,35 @@ export const Markdown = ({ input, class: className = "", ...props }) => {
 
   return <div ref={ref} class={`overflow-x-hidden markdown ${className}`} {...props} />
 }
+
+const sampleMd = `
+# Heading 1
+## Heading 2
+### Heading 3
+
+Some text with **bold** and *italic text*.
+
+- Item 1
+- Item 2
+- Item 3
+
+1. Numbered 1
+2. Numbered 2
+3. Numbered 3
+
+> This is a blockquote
+
+\`\`\`javascript
+const greeting = "Hello, World!";
+console.log(greeting);
+\`\`\`
+
+[Link](https://github.com/cztomsik/ava)`
+
+export const MarkdownExample = () => {
+  return (
+    <div class="border border-neutral-6 rounded p-4">
+      <Markdown input={sampleMd} />
+    </div>
+  )
+}
diff --git a/src/app/_components/Page.tsx b/src/app/_components/Page.tsx
@@ -7,8 +7,8 @@ const gridTemplate = `
   "list footer details" auto / min-content 1fr min-content
 `
 
-const Page = ({ children }) => (
-  <div class="grid h-screen" style={{ gridTemplate }}>
+const Page = ({ children, class: className = "" }) => (
+  <div class={`grid h-screen ${className}`} style={{ gridTemplate }}>
     {children}
   </div>
 )
diff --git a/src/app/_components/Select.tsx b/src/app/_components/Select.tsx
@@ -1,3 +1,5 @@
+import { useState } from "preact/hooks"
+
 export const Select = ({ class: className = "", ...props }) => (
   <div class={`relative ${className}`}>
     <select class="block w-full overflow-hidden pr-6" {...props} />
@@ -8,3 +10,18 @@ export const Select = ({ class: className = "", ...props }) => (
     </div>
   </div>
 )
+
+export const SelectExample = () => {
+  const [value, setValue] = useState("option2")
+
+  return (
+    <div class="space-y-4">
+      <Select value={value} onChange={e => setValue(e.target.value)}>
+        <option value="option1">Option 1</option>
+        <option value="option2">Option 2</option>
+      </Select>
+
+      <p class="text-sm text-neutral-11">Selected: {value}</p>
+    </div>
+  )
+}
diff --git a/src/app/_components/Slider.tsx b/src/app/_components/Slider.tsx
@@ -1,3 +1,5 @@
+import { useState } from "preact/hooks"
+
 // TODO: until this gets fixed the :focus does not really work for ranges in Safari (and macos webview)
 //       https://bugs.webkit.org/show_bug.cgi?id=234516
 
@@ -17,3 +19,13 @@ export const Slider = ({ label, onChange, ...props }) => {
     </div>
   )
 }
+
+export const SliderExample = () => {
+  const [volume, setVolume] = useState(0.5)
+
+  return (
+    <div class="space-y-4 max-w-md">
+      <Slider label="Volume" value={volume} onChange={setVolume} min={0} max={1} step={0.1} />
+    </div>
+  )
+}
diff --git a/src/app/_components/Table.tsx b/src/app/_components/Table.tsx
@@ -1,5 +1,29 @@
 export const Table = ({ class: className = "", ...props }) => (
   <div class={`relative overflow-x-auto ${className}`}>
-    <table class="table-fixed w-full [&_th,&_td]:p-2 [&_th,&_td]:border-b [&_th,&_td]:border-neutral-7 [&_tr]:even:bg-neutral-2" {...props} />
+    <table
+      class="table-fixed w-full [&_th,&_td]:p-2 [&_th,&_td]:border-b [&_th,&_td]:border-neutral-7 [&_tr]:even:bg-neutral-2"
+      {...props}
+    />
   </div>
 )
+
+export const TableExample = () => (
+  <Table>
+    <thead>
+      <tr>
+        <th class="text-left">Name</th>
+        <th class="text-left">Email</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>John Doe</td>
+        <td>john@example.com</td>
+      </tr>
+      <tr>
+        <td>Jane Smith</td>
+        <td>jane@example.com</td>
+      </tr>
+    </tbody>
+  </Table>
+)
diff --git a/src/app/_components/Tabs.tsx b/src/app/_components/Tabs.tsx
@@ -7,3 +7,42 @@ export const Tabs = ({ class: className = "", children }) => {
     </div>
   )
 }
+
+// This is still TODO
+export const TabsExample = () => {
+  const [activeTab, setActiveTab] = useState("home")
+
+  return (
+    <div class="space-y-4">
+      <Tabs>
+        <a
+          href="#"
+          class={activeTab === "home" ? "active" : ""}
+          onClick={e => {
+            e.preventDefault()
+            setActiveTab("home")
+          }}
+        >
+          Home
+        </a>
+        <a
+          href="#"
+          class={activeTab === "settings" ? "active" : ""}
+          onClick={e => {
+            e.preventDefault()
+            setActiveTab("settings")
+          }}
+        >
+          Settings
+        </a>
+      </Tabs>
+
+      <div class="p-4 border border-neutral-6 rounded">
+        {activeTab === "home" && <p>Home goes here...</p>}
+        {activeTab === "settings" && <p>Settings goes here...</p>}
+      </div>
+    </div>
+  )
+}
+
+import { useState } from "preact/hooks"
diff --git a/src/app/_components/Value.tsx b/src/app/_components/Value.tsx
@@ -4,3 +4,12 @@ export const Value = ({ label, value }) => (
     <span>{value}</span>
   </div>
 )
+
+export const ValueExample = () => (
+  <div class="flex gap-8">
+    <Value label="Username" value="john.doe" />
+    <Value label="Email" value="john@example.com" />
+    <Value label="Role" value="Admin" />
+    <Value label="Status" value="Active" />
+  </div>
+)
diff --git a/src/app/_library.tsx b/src/app/_library.tsx
@@ -0,0 +1,73 @@
+import { Page } from "./_components"
+import { AlertExample } from "./_components/Alert"
+import { AutoGrowTextareaExample } from "./_components/AutoGrowTextarea"
+import { BadgeExample } from "./_components/Badge"
+import { CheckboxExample } from "./_components/Checkbox"
+import { ListExample } from "./_components/List"
+import { MarkdownExample } from "./_components/Markdown"
+import { SelectExample } from "./_components/Select"
+import { SliderExample } from "./_components/Slider"
+import { TableExample } from "./_components/Table"
+import { TabsExample } from "./_components/Tabs"
+import { ValueExample } from "./_components/Value"
+
+const Section = ({ title, children }) => (
+  <section class="mb-12">
+    <h2 class="text-2xl font-bold mb-2 text-neutral-11">{title}</h2>
+    <div class="py-4">{children}</div>
+  </section>
+)
+
+export const LibraryPage = () => {
+  return (
+    <Page>
+      <Page.Header title="Component Library"></Page.Header>
+
+      <Page.Content>
+        <Section title="Alert">
+          <AlertExample />
+        </Section>
+
+        <Section title="AutoGrowTextarea">
+          <AutoGrowTextareaExample />
+        </Section>
+
+        <Section title="Badge">
+          <BadgeExample />
+        </Section>
+
+        <Section title="Checkbox">
+          <CheckboxExample />
+        </Section>
+
+        <Section title="List">
+          <ListExample />
+        </Section>
+
+        <Section title="Markdown">
+          <MarkdownExample />
+        </Section>
+
+        <Section title="Select">
+          <SelectExample />
+        </Section>
+
+        <Section title="Slider">
+          <SliderExample />
+        </Section>
+
+        <Section title="Table">
+          <TableExample />
+        </Section>
+
+        <Section title="Tabs">
+          <TabsExample />
+        </Section>
+
+        <Section title="Value">
+          <ValueExample />
+        </Section>
+      </Page.Content>
+    </Page>
+  )
+}
diff --git a/src/app/router.ts b/src/app/router.ts
@@ -12,6 +12,7 @@ import { Settings } from "./settings/Settings"
 import { System } from "./settings/System"
 import { Api } from "./settings/Api"
 import { License } from "./settings/License"
+import { LibraryPage } from "./_library"
 
 const routes = [
   { path: "/", component: () => router.navigate("/chat") },
@@ -29,6 +30,7 @@ const routes = [
   { path: "/settings/system", component: System },
   { path: "/settings/license", component: License },
   { path: "/settings/api", component: Api },
+  { path: "/_library", component: LibraryPage },
 ].filter(Boolean) as Array<{ path; component }>
 
 const path = signal(location.pathname)

Original file line number	Diff line number	Diff line change
`@@ -5,3 +5,5 @@ export const Alert = ({ class: className = "", children }) => {`
`5`	`5`	`</div>`
`6`	`6`	`)`
`7`	`7`	`}`
	`8`	`+`
	`9`	`+export const AlertExample = () => <Alert>Hello World!</Alert>`
Original file line number	Diff line number	Diff line change
@@ -7,8 +7,8 @@ const gridTemplate = `
`7`	`7`	`"list footer details" auto / min-content 1fr min-content`
`8`	`8`	`
`9`	`9`
`10`		`-const Page = ({ children }) => (`
`11`		`- <div class="grid h-screen" style={{ gridTemplate }}>`
	`10`	`+const Page = ({ children, class: className = "" }) => (`
	`11`	+ <div class={`grid h-screen ${className}`} style={{ gridTemplate }}>
`12`	`12`	`{children}`
`13`	`13`	`</div>`
`14`	`14`	`)`