@adaptive-sm/astro-ui 0.1.0

package/lib/modal/modal.ts

@@ -0,0 +1,137 @@
+type FocusableElement =
+  | HTMLAnchorElement
+  | HTMLButtonElement
+  | HTMLInputElement
+  | HTMLTextAreaElement
+  | HTMLSelectElement
+  | HTMLDetailsElement
+
+export function modal() {
+  // variables
+  let modals = document.querySelectorAll<HTMLDialogElement>(".modal")
+
+  // abort controllers for global event listeners
+  let trapFocusController: AbortController | undefined
+  let keydownController: AbortController | undefined
+
+  const getKeyboardFocusableElements = (element: HTMLElement) => {
+    return [
+      ...element.querySelectorAll<FocusableElement>(
+        'a, button, input, textarea, select, details,[tabindex]:not([tabindex="-1"])',
+      ),
+    ].filter((el) => !el.hasAttribute("disabled"))
+  }
+
+  const trapFocus = (event: KeyboardEvent, modal: HTMLDialogElement) => {
+    const focusables = getKeyboardFocusableElements(modal)
+
+    // These will not be undefined as a modal always has at least one <button>
+    const firstFocusable = focusables[0]!
+    const lastFocusable = focusables[focusables.length - 1]!
+
+    if (document.activeElement === lastFocusable && event.key === "Tab" && !event.shiftKey) {
+      event.preventDefault()
+      firstFocusable.focus()
+    }
+
+    if (document.activeElement === firstFocusable && event.key === "Tab" && event.shiftKey) {
+      event.preventDefault()
+      lastFocusable.focus()
+    }
+  }
+
+  const openModal = (modal: HTMLDialogElement) => {
+    const modalTitle = modal.querySelector("h2")
+    const modalContent = modal.querySelector<HTMLDivElement>(".modal-content")
+
+    modal.showModal()
+    modalTitle!.focus()
+
+    setAllowBackgroundScrolling(false)
+
+    trapFocusController = new AbortController()
+    keydownController = new AbortController()
+
+    document.addEventListener("keydown", (e) => trapFocus(e, modal), { signal: trapFocusController.signal })
+
+    modal.addEventListener(
+      "keydown",
+      (event) => {
+        if (event.key === "Escape") {
+          closeSpecificModal(modal)
+        }
+      },
+      { signal: keydownController.signal },
+    )
+
+    modal.addEventListener(
+      "click",
+      () => {
+        closeSpecificModal(modal)
+      },
+      { signal: keydownController.signal },
+    )
+
+    modalContent!.addEventListener(
+      "click",
+      (event) => {
+        event.stopPropagation()
+      },
+      { signal: keydownController.signal },
+    )
+  }
+
+  const closeSpecificModal = (modal: HTMLDialogElement) => {
+    const modalId = modal.getAttribute("aria-labelledby")
+    const modalTrigger = document.querySelector(`#${modalId}`) as HTMLButtonElement
+    modalTrigger.focus({ preventScroll: true })
+    modal.close()
+
+    setAllowBackgroundScrolling(true)
+
+    trapFocusController?.abort()
+    keydownController?.abort()
+  }
+
+  // execution
+  addEventListeners(openModal, closeSpecificModal, modals)
+
+  // Listen for view transitions
+  document.addEventListener("astro:after-swap", () => {
+    // reset variables
+    modals = document.querySelectorAll<HTMLDialogElement>(".modal")
+    addEventListeners(openModal, closeSpecificModal, modals)
+  })
+}
+
+function addEventListeners(
+  openModal: (modal: HTMLDialogElement) => void,
+  closeModal: (modal: HTMLDialogElement) => void,
+  modals = document.querySelectorAll<HTMLDialogElement>(".modal"),
+) {
+  // execution
+  for (const modal of modals) {
+    const modalId = modal.getAttribute("aria-labelledby")
+    const modalTrigger = document.querySelector(`#${modalId}`)
+    if (!modalTrigger) {
+      throw new Error(`Trigger element not found. \n
+      Did you forget to add a trigger element with id: "${modalId}"?`)
+    }
+    modalTrigger.addEventListener("click", () => openModal(modal))
+
+    const closeId = `${modalId}-close`
+    const modalCloseButton = modal.querySelector(`#${closeId}`)
+    if (!modalCloseButton) {
+      throw new Error(`Close button not found. Expected id: "${closeId}"?`)
+    }
+    modalCloseButton.addEventListener("click", () => closeModal(modal))
+  }
+}
+
+function setAllowBackgroundScrolling(allowed: boolean): void {
+  if (allowed) {
+    document.body.classList.remove("overflow-hidden")
+  } else {
+    document.body.classList.add("overflow-hidden")
+  }
+}

package/lib/page/PageCentered.astro

@@ -0,0 +1,14 @@
+---
+import { classMerge } from "~/utils/ui/classMerge"
+import { classesPageCentered } from "./classesPageCentered"
+
+interface Props {
+  id?:string
+  class?: string
+}
+const p = Astro.props
+---
+
+<div id={p.id} class={classMerge(classesPageCentered, p.class)}>
+  <slot />
+</div>

package/lib/page/PageCenteredCard.astro

@@ -0,0 +1,17 @@
+---
+import { classMerge } from "~/utils/ui/classMerge"
+import PageCentered from "./PageCentered.astro"
+import { classesCardWrapperPage } from "~/card/classesCardWrapper"
+
+interface Props {
+  class?: string
+  classInner?: string
+}
+const props = Astro.props
+---
+
+<PageCentered class={props.class}>
+  <div class={classMerge(classesCardWrapperPage, props.classInner)}>
+    <slot />
+  </div>
+</PageCentered>

package/lib/page/classesBg.ts

@@ -0,0 +1,27 @@
+export type ClassesBg = keyof typeof classesBg
+
+export const classesBg = {
+  white: "bg-white dark:bg-black",
+  orange: "bg-orange-100 dark:bg-yellow-900",
+  red: "bg-red-100 dark:bg-red-900",
+  amber: "bg-amber-100 dark:bg-amber-900",
+  yellow: "bg-yellow-100 dark:bg-yellow-900",
+  lime: "bg-lime-100 dark:bg-lime-900",
+  green: "bg-green-100 dark:bg-green-900",
+  emerald: "bg-emerald-100 dark:bg-emerald-900",
+  teal: "bg-teal-100 dark:bg-teal-900",
+  cyan: "bg-cyan-100 dark:bg-cyan-900",
+  sky: "bg-sky-100 dark:bg-sky-900",
+  blue: "bg-blue-100 dark:bg-blue-900",
+  indigo: "bg-indigo-100 dark:bg-indigo-900",
+  violet: "bg-violet-100 dark:bg-violet-900",
+  purple: "bg-purple-100 dark:bg-purple-900",
+  fuchsia: "bg-fuchsia-100 dark:bg-fuchsia-900",
+  pink: "bg-pink-100 dark:bg-pink-900",
+  rose: "bg-rose-100 dark:bg-rose-900",
+  slate: "bg-slate-100 dark:bg-slate-900",
+  gray: "bg-gray-100 dark:bg-gray-900",
+  zinc: "bg-zinc-100 dark:bg-zinc-900",
+  neutral: "bg-neutral-100 dark:bg-neutral-900",
+  stone: "bg-stone-100 dark:bg-stone-900",
+} as const

package/lib/page/classesPageCentered.ts

@@ -0,0 +1,6 @@
+import { classArr } from "~/utils/ui/classArr"
+
+export const classesPageCentered = classArr(
+  "flex flex-col justify-center items-center my-auto", // align center
+  "min-h-[80svh] sm:min-h-[90svh]", // full screen
+)

package/lib/popover/Popover1.astro

@@ -0,0 +1,45 @@
+---
+import Icon1 from "~/icon/Icon1.astro"
+import { buttonVariant, type ButtonVariant, buttonCva2 } from "~/button/buttonCva"
+import { classArr } from "~/utils/ui/classArr"
+import { setupPopoverListeners } from "./setupPopoverListeners"
+
+interface Props {
+  id: string
+  icon: string
+  title: string
+  variant?: ButtonVariant
+}
+
+const { id, icon, title, variant = buttonVariant.link } = Astro.props
+const summaryClasses = buttonCva2(variant, null, "flex flex-wrap gap-2 text-xl font-semibold list-none")
+---
+
+<details
+  id={id}
+  class={classArr(
+    "relative",
+    "popover-details", // used by popover
+  )}
+>
+  <summary class={summaryClasses}>
+    <Icon1 path={icon} />
+    {title}
+  </summary>
+  <div
+    class={classArr(
+      "absolute", // layout
+      "bg-white dark:bg-gray-800", // background
+      "border border-gray-300 dark:border-gray-600 rounded shadow-lg", // borders/shadows
+      "p-2 mt-1", // spacing
+      "z-10", // z-index
+    )}
+  >
+    <slot />
+  </div>
+</details>
+
+<script>
+  import { setupPopoverListeners } from "./setupPopoverListeners"
+  setupPopoverListeners()
+</script>

package/lib/popover/setupPopoverListeners.ts

@@ -0,0 +1,22 @@
+const classPopoverSelector = ".popover-details"
+
+export function setupPopoverListeners() {
+  document.addEventListener("keydown", (e: KeyboardEvent) => {
+    if (e.key === "Escape") {
+      const detailsElements = document.querySelectorAll(classPopoverSelector) as NodeListOf<HTMLDetailsElement>
+      detailsElements.forEach((details) => {
+        if (details.open) {
+          details.open = false
+        }
+      })
+    }
+  })
+  document.addEventListener("click", (e: MouseEvent) => {
+    const detailsElements = document.querySelectorAll(classPopoverSelector) as NodeListOf<HTMLDetailsElement>
+    detailsElements.forEach((details) => {
+      if (details.open && !details.contains(e.target as Node)) {
+        details.open = false
+      }
+    })
+  })
+}

package/lib/select/Select.astro

@@ -0,0 +1,45 @@
+---
+import { classArr } from "~/utils/ui/classArr"
+
+type ValueDisplayFn = (value: string) => string
+
+type NativeSingleSelectProps = {
+  initialValue: string
+  options: string[]
+  optionClass?: string
+  valueDisplay?: ValueDisplayFn
+  id?: string
+  class?: string
+}
+
+const props = Astro.props as NativeSingleSelectProps
+
+const getDisplayValue = (itemValue: string, valueDisplay?: ValueDisplayFn) => {
+  if (!valueDisplay) return itemValue
+  const hasValue = valueDisplay(itemValue)
+  if (!hasValue) return itemValue
+  return hasValue
+}
+---
+
+<select
+  id={props.id}
+  class={classArr(
+    "block w-full p-2.5",
+    "text-gray-900 dark:text-white text-sm",
+    "dark:placeholder-gray-400",
+    "bg-gray-50 dark:bg-gray-700",
+    "rounded-lg border border-gray-300 dark:border-gray-600",
+    "focus:ring-blue-500 focus:border-blue-500 dark:focus:border-blue-500 dark:focus:ring-blue-500",
+    props.class,
+  )}
+  value={props.initialValue}
+>
+  {
+    props.options.map((option: string) => (
+      <option value={option} class={props.optionClass}>
+        {getDisplayValue(option, props.valueDisplay)}
+      </option>
+    ))
+  }
+</select>

package/lib/table/DesktopTableClassses.ts

@@ -0,0 +1,6 @@
+export type DesktopTableClassses = {
+  class?: string
+  row?: string
+  header?: string
+  data?: string
+}

package/lib/table/MobileTableClassses.ts

@@ -0,0 +1,7 @@
+export type MobileTableClassses = {
+  class?: string
+  entry?: string
+  first?: string
+  header?: string
+  other?: string
+}

package/lib/table/Table.astro

@@ -0,0 +1,41 @@
+---
+import type { DesktopTableClassses } from "./DesktopTableClassses"
+import type { MobileTableClassses } from "./MobileTableClassses"
+import { tableVisibilityClasses } from "./tableVisibilityClasses"
+import { classMerge } from "~/utils/ui/classMerge"
+import { type TailwindBreakpoint, tailwindBreakpoint } from "~/utils/ui/tailwindBreakpoint"
+import type { TableColumnDef } from "./TableColumnDef"
+import TableD from "./TableD.astro"
+import TableM from "./TableM.astro"
+
+interface Props {
+  rows: string[]
+  columns: TableColumnDef[]
+  mobileClasses?: MobileTableClassses
+  desktopClasses?: DesktopTableClassses
+  breakpoint?: TailwindBreakpoint
+  class?: string
+  noEntriesText?: string
+}
+const props = Astro.props
+const rows = props.rows
+const columns = props.columns
+const desktopClasses = props.desktopClasses
+const mobileClasses = props.mobileClasses
+const breakpoint = props.breakpoint ?? tailwindBreakpoint.sm
+---
+
+<TableD
+  rows={rows}
+  columns={columns}
+  class={classMerge(props.class, tableVisibilityClasses.desktop(breakpoint))}
+  desktopClasses={desktopClasses}
+  noEntriesText={props.noEntriesText}
+/>
+<TableM
+  rows={rows}
+  columns={columns}
+  class={classMerge(props.class, tableVisibilityClasses.mobile(breakpoint))}
+  mobileClasses={mobileClasses}
+  noEntriesText={props.noEntriesText}
+/>

package/lib/table/TableColumnDef.ts

@@ -0,0 +1,10 @@
+/** @jsxImportSource astro */
+
+export interface TableColumnDef {
+  id: string
+  name: string
+  title?: string
+  cell: (data: string) => string | number
+  classHeader?: string
+  classData?: string
+}

package/lib/table/TableD.astro

@@ -0,0 +1,55 @@
+---
+import { type DesktopTableClassses } from "./DesktopTableClassses"
+import { sharedTableRowClasses } from "./sharedTableRowClasses"
+// import { t4table } from "~/ui_tables/table3/t4table"
+import { classMerge } from "~/utils/ui/classMerge"
+import { type TableColumnDef } from "./TableColumnDef"
+
+interface Props {
+  rows: string[]
+  noEntriesText?: string
+  columns: TableColumnDef[]
+  desktopClasses?: DesktopTableClassses
+  class?: string
+}
+const props = Astro.props
+const rows = props.rows
+const columns = props.columns
+const c = props.desktopClasses
+const noEntries = rows.length <= 0
+const hasEntries = rows.length > 0
+const noEntriesText = props.noEntriesText ?? "No Entries"
+---
+
+{
+  noEntries && (
+    <>
+      <span class={"text-lg text-center p-2 pt-6"}>{noEntriesText}</span>
+    </>
+  )
+}
+
+{
+  hasEntries && (
+    <table class={classMerge("overflow-x-auto", props.class, c?.class)}>
+      <thead>
+        <tr>
+          {columns.map((h: TableColumnDef, i: number) => (
+            <th scope="col" class={classMerge("text-left", "px-4 py-2", c?.header, h.classHeader)} title={h.title}>
+              {h.name}
+            </th>
+          ))}
+        </tr>
+      </thead>
+      <tbody>
+        {rows.map((d: any, y: number) => (
+          <tr class={classMerge(sharedTableRowClasses, c?.row)}>
+            {columns.map((h: any) => {
+              return <td class={classMerge(c?.data, h.classData)}>{h.cell(d)}</td>
+            })}
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  )
+}

package/lib/table/TableM.astro

@@ -0,0 +1,22 @@
+---
+import { classMerge } from "~/utils/ui/classMerge"
+import { type TableColumnDef } from "./TableColumnDef"
+import TableMEntry from "./TableMEntry.astro"
+import type { MobileTableClassses } from "~/table/MobileTableClassses"
+
+interface Props {
+  rows: string[]
+  noEntriesText?: string
+  columns: TableColumnDef[]
+  mobileClasses?: MobileTableClassses
+  class?: string
+}
+const props = Astro.props
+const rows = props.rows
+const columns = props.columns
+const c = props.mobileClasses
+---
+
+<div class={classMerge("flex w-full flex-col flex-wrap gap-8", props.class, c?.class)}>
+  {rows.map((row: string, y: number) => <TableMEntry row={row} columns={columns} mobileClasses={c} />)}
+</div>

package/lib/table/TableMEntry.astro

@@ -0,0 +1,27 @@
+---
+import { classMerge } from "~/utils/ui/classMerge"
+import { type TableColumnDef } from "./TableColumnDef"
+import type { MobileTableClassses } from "~/table/MobileTableClassses"
+
+interface Props {
+  row: string
+  columns: TableColumnDef[]
+  mobileClasses?: MobileTableClassses
+}
+const p = Astro.props
+const c = p.mobileClasses
+---
+
+<div class={classMerge("flex flex-col flex-wrap gap-2", c?.entry)}>
+  {
+    p.columns.map((column: TableColumnDef, i: number) => {
+      if (i == 0) return <span class={classMerge("font-semibold", c?.first)}>{column.cell(p.row)}</span>
+      return (
+        <span class={classMerge("flex flex-wrap justify-between", c?.entry)}>
+          <span class={classMerge("text-muted-foreground", c?.header)}>{column.name + ":"}</span>
+          <span class={classMerge("text-right", c?.other)}>{column.cell(p.row)}</span>
+        </span>
+      )
+    })
+  }
+</div>

package/lib/table/sharedTableRowClasses.ts

@@ -0,0 +1 @@
+export const sharedTableRowClasses = "border-t hover:bg-gray-100 dark:hover:bg-gray-800"

package/lib/table/tableVisibilityClasses.ts

@@ -0,0 +1,28 @@
+import { classMerge } from "~/utils/ui/classMerge"
+import type { TailwindBreakpoint } from "~/utils/ui/tailwindBreakpoint"
+import { tailwindBreakpoint } from "~/utils/ui/tailwindBreakpoint"
+
+function tableDesktopclass(b: TailwindBreakpoint) {
+  const tb = tailwindBreakpoint
+  return classMerge(
+    "hidden",
+    b === tb.sm && "sm:table",
+    b === tb.md && "md:table",
+    b === tb.lg && "lg:table",
+    b === tb.xl && "xl:table",
+  )
+}
+function tableMobileclass(b: TailwindBreakpoint) {
+  const tb = tailwindBreakpoint
+  return classMerge(
+    "w-full",
+    b === tb.sm && "sm:hidden",
+    b === tb.md && "md:hidden",
+    b === tb.lg && "lg:hidden",
+    b === tb.xl && "xl:hidden",
+  )
+}
+export const tableVisibilityClasses = {
+  desktop: tableDesktopclass,
+  mobile: tableMobileclass,
+}

package/lib/text/classesTextGray.ts

@@ -0,0 +1 @@
+export const classesTextGray = "text-gray-600 dark:text-gray-400"

package/lib/text/classesTextHeader.ts

@@ -0,0 +1 @@
+export const classesTextHeader = "text-xl font-semibold"

package/lib/utils/bun/BunCmd.ts

@@ -0,0 +1,7 @@
+export type BunCmd = {
+  cmd: string[]
+  success: boolean
+  exitCode: number
+  lines: string[]
+  ms: number
+}

package/lib/utils/bun/cryAndTryAgainLater.ts

@@ -0,0 +1,6 @@
+import process from "node:process"
+
+export function cryAndTryAgainLater<T>(t: T): T {
+  process.exit(1)
+  return t
+}

package/lib/utils/bun/logBunCmd.ts

@@ -0,0 +1 @@
+export const logBunCmd = true

package/lib/utils/bun/runCmdAsync.ts

@@ -0,0 +1,44 @@
+import console from "node:console"
+import type { BunCmd } from "./BunCmd"
+import { logBunCmd } from "./logBunCmd"
+
+export async function runCmdAsync(cmd: string[]): Promise<BunCmd> {
+  const startedAt = performance.now()
+  if (logBunCmd) {
+    console.log({ cmd })
+  }
+  const process = Bun.spawn(cmd, {
+    stdout: "pipe",
+    stderr: "pipe",
+  })
+  const exitCode = await process.exited
+  const output = await Bun.readableStreamToText(process.stdout)
+  const error = await Bun.readableStreamToText(process.stderr)
+  const outputLines = output.split("\n").filter((s) => s.length > 0)
+  const errorLines = error.split("\n").filter((s) => s.length > 0)
+  const lines = [...outputLines, ...errorLines]
+  const endedAt = performance.now()
+  const ms = Math.round(endedAt - startedAt)
+  const r: BunCmd = {
+    cmd,
+    success: exitCode === 0,
+    exitCode,
+    lines,
+    ms,
+  }
+  if (logBunCmd) {
+    if (lines.length < 8) {
+      console.log(r)
+    } else {
+      const l: Omit<BunCmd, "lines"> = {
+        cmd,
+        success: exitCode === 0,
+        exitCode,
+        ms,
+      }
+      console.log(l)
+      console.log(JSON.stringify(lines, null, 2))
+    }
+  }
+  return r
+}

package/lib/utils/bun/runCmdLocally.ts

@@ -0,0 +1,13 @@
+import type { BunCmd } from "./BunCmd"
+import { cryAndTryAgainLater } from "./cryAndTryAgainLater"
+import { runCmdAsync } from "./runCmdAsync"
+
+export async function runCmdLocally(cmd: string | string[]): Promise<BunCmd> {
+  return runCmdAsync(["sh", "-c", Array.isArray(cmd) ? cmd.join(" ") : cmd])
+}
+
+export async function runCmdLocallyAndExitOnError(cmd: string | string[]): Promise<BunCmd> {
+  const got = await runCmdLocally(cmd)
+  if (!got.success) return cryAndTryAgainLater(got)
+  return got
+}

package/lib/utils/obj/objectKeys.ts

@@ -0,0 +1,21 @@
+/**
+ * Like Object.keys, but unsound in exchange for more convenience.
+ *
+ * Casts the result of Object.keys to the known keys of an object type,
+ * even though JavaScript objects may contain additional keys.
+ *
+ * Only use this function when you know/control the provenance of the object
+ * you're iterating, and can verify it contains exactly the keys declared
+ * to the type system.
+ *
+ * Example:
+ * ```
+ * const o = {x: "ok", y: 10}
+ * o["z"] = "UNTRACKED_KEY"
+ * const safeKeys = Object.keys(o)
+ * const unsafeKeys = objectKeys(o)
+ * ```
+ * => const safeKeys: string[]
+ * => const unsafeKeys: ("x" | "y")[] // Missing "z"
+ */
+export const objectKeys = Object.keys as <T>(obj: T) => Array<keyof T>

package/lib/utils/ran/generateId12.ts

@@ -0,0 +1,7 @@
+import { generateReadableId } from "~/utils/ran/generateReadableId"
+
+const gen = generateReadableId(12)
+
+export function generateId12(): string {
+  return gen()
+}

package/lib/utils/ran/generateId3.ts

@@ -0,0 +1,7 @@
+import { generateReadableId } from "~/utils/ran/generateReadableId"
+
+const gen = generateReadableId(3)
+
+export function generateId3(): string {
+  return gen()
+}

package/lib/utils/ran/generateId4.ts

@@ -0,0 +1,7 @@
+import { generateReadableId } from "~/utils/ran/generateReadableId"
+
+const gen = generateReadableId(4)
+
+export function generateId4(): string {
+  return gen()
+}

package/lib/utils/ran/generateId5.ts

@@ -0,0 +1,7 @@
+import { generateReadableId } from "./generateReadableId"
+
+const gen = generateReadableId(5)
+
+export function generateId5(): string {
+  return gen()
+}