b44ui 0.0.2 → 0.0.3

package/comps.tsx

@@ -1,33 +1,94 @@
-import { type ReactNode, Children } from "react"
+import { type ReactNode, Children, useState } from "react"
 import CN from "./cn"
 import { Md } from "./Markdown"
 
-export type DProps = { children?: ReactNode, cn?: any, style?: React.CSSProperties }
-export const D = ({ children, cn, style }: DProps) =>
-  <div className={CN(cn)} style={style}>{children}</div>
+const tints = {
+  blue: 'bg-blue-500/20 border-blue-500',
+  orange: 'bg-orange-500/20 border-orange-500',
+  red: 'bg-red-500/20 border-red-500',
+  purple: 'bg-purple-500/20 border-purple-500',
+} as const
+
+const btnColors = {
+  blue: 'bg-blue-600 hover:bg-blue-500',
+  red: 'bg-red-600 hover:bg-red-500',
+  green: 'bg-green-600 hover:bg-green-500',
+} as const
+
+export type Color = keyof typeof btnColors
+
+export type DProps = { children?: ReactNode, cn?: any, style?: React.CSSProperties, grow?: boolean }
+export const D = ({ children, cn, style, grow }: DProps) =>
+  <div className={CN(cn, grow && "flex-1")} style={style}>{children}</div>
 
 export const App = ({ children, center = true, width, cn }: DProps & { center?: boolean, width?: number }) => {
   const inner = Children.map(children, c => typeof c == 'string' ? <Md>{c.trim()}</Md> : c)
 
   return <D cn={["min-h-screen w-full bg-[#111] text-[#eee] font-[Inter]", center && "flex justify-center items-center", cn]}>
-    {center ? <div className="max-w-full px-6 py-12 space-y-6" style={{ width }}>{inner}</div> : inner}
+    {center ? <div className="max-w-full px-5 py-10 space-y-5 *:mx-auto" style={{ width }}>{inner}</div> : inner}
   </D>
 }
 
-export const Centered = ({ children, cn, width = 700 }: DProps & { width?: number }) =>
-  <D cn={["mx-auto max-w-full px-6", cn]} style={{ width }}>{children}</D>
+export const Centered = ({ children, cn, grow, width = 700 }: DProps & { width?: number }) =>
+  <D cn={["mx-auto max-w-full px-6", cn]} grow={grow} style={{ width }}>{children}</D>
 
-export const Block = ({ label, children, row, dashed, cn }: DProps & { label?: ReactNode, row?: boolean, dashed?: boolean }) =>
-  <D cn={["rounded p-4 flex flex-col items-center gap-2", dashed && "border border-dashed border-zinc-700", cn]}>
+export const Block = ({ label, children, row, dashed, cn, grow }: DProps & { label?: ReactNode, row?: boolean, dashed?: boolean }) =>
+  <D cn={["rounded p-4 flex flex-col items-center gap-2", dashed && "border border-dashed border-zinc-700", cn]} grow={grow}>
     {label && <span className="opacity-75">{label}</span>}
     <div className={CN(row ? "flex-row" : "flex-col", "flex items-center gap-2")}>{children}</div>
   </D>
 
-export const BlockSm = ({ children, dashed, cn }: DProps & { dashed?: boolean }) =>
-  <D cn={["rounded px-3 py-2 text-sm", dashed && "border border-dashed border-zinc-700", cn]}>{children}</D>
+export const BlockSm = ({ children, dashed, cn, grow }: DProps & { dashed?: boolean }) =>
+  <D cn={["rounded px-3 py-2 text-sm", dashed && "border border-dashed border-zinc-700", cn]} grow={grow}>{children}</D>
+
+export const Chip = ({ children, cn, click }: DProps & { click?: () => void }) =>
+  <span className={CN("bg-zinc-800 rounded px-2 py-0.5 text-xs", click && "cursor-pointer hover:bg-zinc-700", cn)}
+    onClick={click}>{children}</span>
+
+export const Card = ({ children, cn, grow }: DProps) =>
+  <D cn={["rounded border border-zinc-700 bg-zinc-900 p-4 space-y-3", cn]} grow={grow}>{children}</D>
+
+export const Col = ({ children, cn, grow }: DProps) =>
+  <D cn={["flex flex-col gap-3", cn]} grow={grow}>{children}</D>
+
+export const Popover = ({ children, text, color, cn }: DProps & { text: ReactNode, color?: keyof typeof tints }) => {
+  const [open, setOpen] = useState(false)
+  return <span className="relative inline-block" onMouseEnter={() => setOpen(true)} onMouseLeave={() => setOpen(false)}>
+    <span className={CN("cursor-pointer", color && tints[color], color && "border-b-2", cn)}>{children}</span>
+    {open && <div className="absolute left-0 top-full z-10 mt-1">
+      <Card cn="w-64 p-3 shadow-lg text-sm">{text}</Card>
+    </div>}
+  </span>
+}
+
+export const Muted = ({ children, cn, grow }: DProps) =>
+  <span className={CN("text-sm text-zinc-400", grow && "flex-1", cn)}>{children}</span>
+
+export const Btn = ({ children, cn, grow, click, color, ghost, ...rest }: DProps & { click?: () => void, color?: Color, ghost?: boolean } & React.ButtonHTMLAttributes<HTMLButtonElement>) =>
+  <button className={CN("rounded px-4 py-2 text-sm cursor-pointer",
+    ghost ? "bg-transparent text-zinc-400 hover:bg-zinc-800" : color ? btnColors[color] : "bg-zinc-800 hover:bg-zinc-700", grow && "flex-1", cn)}
+    onClick={click} {...rest}>{children}</button>
+
+export const Tint = ({ children, color, cn, grow }: DProps & { color: keyof typeof tints }) =>
+  <D cn={["p-3 rounded text-sm", tints[color], cn]} grow={grow}>{children}</D>
+
+export const Row = ({ children, ratio, align, cn, grow }: DProps & { ratio?: number, align?: 'mid' | 'start' | 'end' }) =>
+  <div className={CN("flex gap-2 items-center", align === 'mid' && "justify-between", align == 'end' && "justify-end", align == 'start' && "justify-start", grow && "flex-1", cn)}
+    style={ratio ? { width: `${ratio * 100}%` } : undefined}>{children}</div>
+
+export const Modal = ({ children, open, cn }: DProps & { open: boolean }) =>
+  open ? <div className="fixed inset-0 flex items-center justify-center bg-black/50 z-50">
+    <Card cn={["max-h-[80vh] overflow-y-auto w-lg", cn]}>{children}</Card>
+  </div> : null
+
+export const Input = ({ cn, grow, ...rest }: { cn?: any, grow?: boolean } & React.InputHTMLAttributes<HTMLInputElement>) =>
+  <input className={CN("rounded bg-zinc-800 border border-zinc-700 px-3 py-2 text-sm outline-none", grow && "flex-1", cn)} {...rest} />
+
+export const Textarea = ({ cn, grow, ...rest }: { cn?: any, grow?: boolean } & React.TextareaHTMLAttributes<HTMLTextAreaElement>) =>
+  <textarea className={CN("rounded bg-zinc-800 border border-zinc-700 px-3 py-2 text-sm outline-none w-full", grow && "flex-1", cn)} {...rest} />
 
-export const Chip = ({ children, cn }: DProps) =>
-  <D cn={["bg-zinc-800 rounded px-3 py-1 text-sm", cn]}>{children}</D>
+export const Select = ({ cn, grow, ...rest }: { cn?: any, grow?: boolean } & React.SelectHTMLAttributes<HTMLSelectElement>) =>
+  <select className={CN("rounded bg-zinc-800 border border-zinc-700 px-3 py-2 text-sm outline-none cursor-pointer", grow && "flex-1", cn)} {...rest} />
 
-export const Grid = ({ children, cols, cn }: { children: ReactNode, cols?: number, cn?: string }) =>
-  <D cn={["grid gap-4", cn]} style={{ gridTemplateColumns: `repeat(${cols ?? Children.count(children)}, 1fr)` }}>{children}</D>
+export const Grid = ({ children, cols, cn, grow }: DProps & { cols?: number }) =>
+  <D cn={["grid gap-4", cn]} grow={grow} style={{ gridTemplateColumns: `repeat(${cols ?? Children.count(children)}, 1fr)` }}>{children}</D>

package/example/src/App.tsx

@@ -1,54 +1,147 @@
-import { App, Block, BlockSm, Chip, Grid } from "ui"
-
-export default () => <App>
-{`
-# ui kitchen sink
-
-source: [github/b44ken/ui](https://github.com/b44ken/ui)
-
-## \\<App center marked\\>
-wraps the page in a centered column (700px) with dark theme. string children are rendered as markdown.
-
-## \\<Block\\> and \\<BlockSm\\>
-`}
-<Grid cols={2}>
-  <BlockSm>blocks! this is a small block</BlockSm>
-  <BlockSm dashed>which can be dashed</BlockSm>
-  <Block>this is a normal sized block</Block>
-  <Block dashed>and a normal sized dashed block</Block>
-</Grid>
-
-## Block with labels and row layout
-<Block label="labeled block" dashed>
-  some content here
-</Block>
-<Block label="row layout" row dashed>
-  <Chip>A</Chip> <Chip>B</Chip> <Chip>C</Chip>
-</Block>
-
-## Grid
-<Grid cols={3}>
-  <BlockSm dashed>col 1</BlockSm>
-  <BlockSm dashed>col 2</BlockSm>
-  <BlockSm dashed>col 3</BlockSm>
-</Grid>
-
-{`
-## markdown rendering
-
-\`\`\`
-const greet = (name) => {
-  return console.log('hello ' + name)
-}
-\`\`\`
+import { useState } from 'react'
+import { App, Btn, Card, Chip, Col, D, Muted, Input, Row, Select, Grid } from 'ui'
+
+type Meeting = { day: string, start: number, end: number }
+type Section = { id: string, type: 'LEC' | 'TUT' | 'PRA', meetings: Meeting[] }
+type Course = { code: string, name: string, sections: Section[] }
+
+const days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri']
+const hours = Array.from({ length: 13 }, (_, i) => i + 9) // 9am-9pm
+
+const catalog: Course[] = [
+  { code: 'CSC108', name: 'Intro to Computer Programming', sections: [
+    { id: 'LEC0101', type: 'LEC', meetings: [{ day: 'Mon', start: 600, end: 660 }, { day: 'Wed', start: 600, end: 660 }] },
+    { id: 'LEC0201', type: 'LEC', meetings: [{ day: 'Tue', start: 660, end: 720 }, { day: 'Thu', start: 660, end: 720 }] },
+    { id: 'TUT0101', type: 'TUT', meetings: [{ day: 'Fri', start: 600, end: 660 }] },
+    { id: 'TUT0201', type: 'TUT', meetings: [{ day: 'Fri', start: 660, end: 720 }] },
+  ]},
+  { code: 'MAT137', name: 'Calculus with Proofs', sections: [
+    { id: 'LEC0101', type: 'LEC', meetings: [{ day: 'Mon', start: 540, end: 600 }, { day: 'Wed', start: 540, end: 600 }, { day: 'Fri', start: 540, end: 600 }] },
+    { id: 'TUT0101', type: 'TUT', meetings: [{ day: 'Thu', start: 540, end: 600 }] },
+    { id: 'TUT0201', type: 'TUT', meetings: [{ day: 'Thu', start: 600, end: 660 }] },
+  ]},
+  { code: 'CSC148', name: 'Intro to Computer Science', sections: [
+    { id: 'LEC0101', type: 'LEC', meetings: [{ day: 'Tue', start: 540, end: 600 }, { day: 'Thu', start: 540, end: 600 }] },
+    { id: 'PRA0101', type: 'PRA', meetings: [{ day: 'Wed', start: 720, end: 780 }] },
+  ]},
+  { code: 'PHY151', name: 'Foundations of Physics I', sections: [
+    { id: 'LEC0101', type: 'LEC', meetings: [{ day: 'Mon', start: 720, end: 780 }, { day: 'Wed', start: 720, end: 780 }] },
+    { id: 'TUT0101', type: 'TUT', meetings: [{ day: 'Fri', start: 720, end: 780 }] },
+    { id: 'PRA0101', type: 'PRA', meetings: [{ day: 'Tue', start: 780, end: 840 }] },
+  ]},
+]
+
+const colors = ['bg-blue-500', 'bg-emerald-500', 'bg-amber-500', 'bg-purple-500', 'bg-rose-500']
+
+export default function YACS() {
+  const [query, setQuery] = useState('')
+  const [added, setAdded] = useState<Record<string, Course>>({})
+  const [picks, setPicks] = useState<Record<string, Record<string, number>>>({}) // code -> type -> section idx
+
+  const results = query.length ?
+    catalog.filter(c => !added[c.code] && (c.code.toLowerCase().includes(query.toLowerCase()) || c.name.toLowerCase().includes(query.toLowerCase())))
+    : []
 
-inline \`code\` works too. and [links](https://example.com).
+  const addCourse = (c: Course) => {
+    setAdded({ ...added, [c.code]: c })
+    const types = [...new Set(c.sections.map(s => s.type))]
+    setPicks({ ...picks, [c.code]: Object.fromEntries(types.map(t => [t, 0])) })
+  }
 
-> blockquotes look like this
+  const removeCourse = (code: string) => {
+    const { [code]: _, ...rest } = added
+    setPicks(({ [code]: __, ...r }) => r)
+    setAdded(rest)
+  }
 
-| col a | col b |
-|-------|-------|
-| 1     | 2     |
-| 3     | 4     |
-`}
-</App>
+  const cyclePick = (code: string, type: string) => {
+    const secs = added[code].sections.filter(s => s.type === type)
+    setPicks({ ...picks, [code]: { ...picks[code], [type]: (picks[code][type] + 1) % secs.length } })
+  }
+
+  // gather all visible meetings for calendar
+  const events: { code: string, meeting: Meeting, colorIdx: number }[] = []
+  const codes = Object.keys(added)
+  for (const [i, code] of codes.entries()) {
+    const c = added[code]
+    const p = picks[code] || {}
+    for (const type of Object.keys(p)) {
+      const secs = c.sections.filter(s => s.type === type)
+      const sec = secs[p[type]]
+      if (sec) for (const m of sec.meetings) events.push({ code, meeting: m, colorIdx: i })
+    }
+  }
+
+  return <App center={false} cn="p-4 h-screen">
+    <Grid cols={3} cn="h-full">
+
+      {/* calendar */}
+      <Card cn="col-span-2 row-span-1 p-4 overflow-hidden flex flex-col">
+        <D cn="grid flex-1" style={{ gridTemplateColumns: `60px repeat(5, 1fr)` }}>
+          {/* hour labels */}
+          <D cn="flex flex-col justify-between text-sm text-zinc-500 pr-2">
+            {hours.map(h => <span key={h}>{h > 12 ? h - 12 : h}{h >= 12 ? 'pm' : 'am'}</span>)}
+          </D>
+          {/* day columns */}
+          {days.map(day => <D key={day} cn="relative border-l border-zinc-800">
+            <Muted cn="text-center block text-sm mb-1">{day}</Muted>
+            {/* hour gridlines */}
+            {hours.map(h => <D key={h} cn="border-t border-zinc-800/50 left-0 right-0 absolute" style={{ top: `${h*8}%` }} />)}
+            {/* events */}
+            {events.filter(e => e.meeting.day === day).map((e, i) => {
+              const top = ((e.meeting.start - 540) / (13 * 60)) * 100
+              const height = ((e.meeting.end - e.meeting.start) / (13 * 60)) * 100
+              return <D key={i} cn={`absolute left-0.5 right-0.5 rounded text-sm px-1 text-white ${colors[e.colorIdx % colors.length]}`}
+                style={{ top: `${top}%`, height: `${height}%` }}>
+                {e.code}
+              </D>
+            })}
+          </D>)}
+        </D>
+      </Card>
+
+      {/* right panel */}
+      <D cn="flex flex-col gap-3">
+        {/* search */}
+        <Card cn="p-4">
+          <Row>
+            <Input grow placeholder="search..." value={query} onChange={e => setQuery(e.target.value)} />
+            <Select><option>2026W</option><option>2026S</option></Select>
+          </Row>
+          <D cn="space-y-3 max-h-48 overflow-y-auto flex-row">
+            {results.map(c => <Btn key={c.code} click={() => addCourse(c)} grow>
+              {c.code} — {c.name}
+            </Btn>)}
+            {query.length >= 2 && !results.length && <Muted>no results</Muted>}
+          </D>
+        </Card>
+
+        {/* added */}
+        <Card cn="p-4 space-y-3 flex-1">
+          {codes.map((code, i) => {
+            const c = added[code]
+            const types = [...new Set(c.sections.map(s => s.type))]
+            return <D key={code} cn="space-y-1">
+              <Row align='mid'>
+                <span className={`w-2 h-2 rounded-full ${colors[i % colors.length]}`} />
+                <Muted cn="flex-1">{code}</Muted>
+                <Chip click={() => removeCourse(code)}>×</Chip>
+              </Row>
+              <Row>
+                {types.map(t => {
+                  const secs = c.sections.filter(s => s.type === t)
+                  const idx = picks[code]?.[t] ?? 0
+                  return <Chip key={t} click={() => cyclePick(code, t)}>
+                    {t} {secs[idx]?.id}
+                  </Chip>
+                })}
+              </Row>
+            </D>
+          })}
+          {!codes.length && <Muted>no courses added</Muted>}
+        </Card>
+      </D>
+
+    </Grid>
+  </App>
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "b44ui",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "type": "module",
   "scripts": { "dev": "npm run dev --prefix example" },
   "exports": { ".": "./index.ts", "./styles.css": "./styles.css" },