b44ui 0.0.9 → 0.0.10

package/example/src/App.tsx

@@ -1,147 +0,0 @@
-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())))
-    : []
-
-  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])) })
-  }
-
-  const removeCourse = (code: string) => {
-    const { [code]: _, ...rest } = added
-    setPicks(({ [code]: __, ...r }) => r)
-    setAdded(rest)
-  }
-
-  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 cnIgnoreWrongUsage="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 cnIgnoreWrongUsage="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} cnIgnoreWrongUsage="relative border-l border-zinc-800">
-            <Muted cnIgnoreWrongUsage="text-center block text-sm mb-1">{day}</Muted>
-            {/* hour gridlines */}
-            {hours.map(h => <D key={h} cnIgnoreWrongUsage="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} cnIgnoreWrongUsage={`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 cnIgnoreWrongUsage="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/example/src/index.css

@@ -1,3 +0,0 @@
-@import "tailwindcss";
-@source "../../*.tsx";
-@import "ui/styles.css";

package/example/src/main.tsx

@@ -1,5 +0,0 @@
-import { createRoot } from "react-dom/client"
-import "./index.css"
-import App from "./App"
-
-createRoot(document.getElementById("root")!).render(<App />)

package/example/tsconfig.json

@@ -1,12 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2022",
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "jsx": "react-jsx",
-    "strict": true,
-    "skipLibCheck": true,
-    "esModuleInterop": true
-  },
-  "include": ["src"]
-}

package/example/vite.config.ts

@@ -1,10 +0,0 @@
-import { defineConfig } from "vite"
-import react from "@vitejs/plugin-react"
-import tailwindcss from "@tailwindcss/vite"
-
-export default defineConfig({
-  plugins: [react(), tailwindcss()],
-  optimizeDeps: {
-    include: ["highlight.js"],
-  },
-})

package/tsconfig.json

@@ -1,14 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2022",
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "jsx": "react-jsx",
-    "strict": true,
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "declaration": true,
-    "outDir": "dist"
-  },
-  "include": ["*.ts", "*.tsx"]
-}