@adaptive-sm/astro-ui 0.1.0

package/lib/layouts/parts/ThemeToggle.astro

@@ -0,0 +1,137 @@
+---
+import { mdiMoonWaxingCrescent, mdiWhiteBalanceSunny } from "@mdi/js"
+import { buttonVariant, type ButtonVariant } from "~/button/buttonCva"
+import Button from "~/button/Button.astro"
+import Icon1 from "~/icon/Icon1.astro"
+import { classArr } from "~/utils/ui/classArr"
+import { astroElementId } from "~/layouts/parts/astroElementId"
+
+/*
+ * have to use "is:inline" script to run/apply theme before page render -> white flash on page reload otherwise
+ * https://docs.astro.build/en/tutorial/6-islands/2/
+ * https://axellarsson.com/blog/astrojs-prevent-dark-mode-flicker/
+ * https://docs.astro.build/en/tutorials/add-view-transitions/#update-scripts
+ * https://github.com/Toxocious/toxocious.github.io/blob/main/src/components/theme_toggle/theme_toggle.astro
+ */
+interface Props {
+  class?: string
+  iconClass?: string
+  iconLightClass?: string
+  iconDarkClass?: string
+  variant?: ButtonVariant
+  title?: string
+  textLight?: string
+  textDark?: string
+  textClass?: string
+  textLightClass?: string
+  textDarkClass?: string
+}
+const p = Astro.props
+const title = p.title ?? "Toggle theme"
+const textLight = p.textLight ?? "Light"
+const textDark = p.textLight ?? "Dark"
+---
+
+<Button
+  variant={p.variant ?? buttonVariant.ghost}
+  id={astroElementId.themeToggle}
+  transition:name={astroElementId.themeToggle}
+  title={title}
+  class={classArr(p.class)}
+  contentClass={classArr("flex flex-row gap-1")}
+>
+  <Icon1 path={mdiWhiteBalanceSunny} class={classArr("size-6 dark:hidden mr-2", p.iconClass, p.iconLightClass)} />
+  <Icon1 path={mdiMoonWaxingCrescent} class={classArr("hidden size-6 dark:block mr-2", p.iconClass, p.iconDarkClass)} />
+  <p id="theme-toggle-text-light" class={classArr("dark:hidden", p.textClass, p.textLightClass)}>{textLight}</p>
+  <p id="theme-toggle-text-dark" class={classArr("hidden dark:block", p.textClass, p.textDarkClass)}>{textDark}</p>
+</Button>
+
+<script is:inline>
+  const log = false
+
+  if (log) console.log("theme-toggle script start")
+  function loadTheme() {
+    const stored = typeof localStorage !== "undefined" && localStorage.getItem("theme")
+    if (log) console.log("loadTheme", stored)
+    if (stored) {
+      return stored
+    }
+    if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+      return "dark"
+    }
+    return "light"
+  }
+
+  function applyThemeToWindow(theme) {
+    if (log) console.log("applyThemeToWindow", theme)
+    if (theme === "light") {
+      document.documentElement.classList.remove("dark")
+      // document.body.classList.remove("dark")
+    } else {
+      document.documentElement.classList.add("dark")
+      // document.body.classList.add("dark")
+    }
+  }
+
+  let theme = loadTheme()
+
+  if (log) console.log("theme", theme)
+
+  //
+  // apply theme on page load
+  //
+  applyThemeToWindow(theme)
+
+  // window.localStorage.setItem('theme', theme)
+
+  const handleToggleClick = () => {
+    const element = document.documentElement
+    element.classList.toggle("dark")
+    const isDark = element.classList.contains("dark")
+    localStorage.setItem("theme", isDark ? "dark" : "light")
+    if (log) console.log("handleToggleClick", isDark ? "dark" : "light")
+  }
+
+  //
+  // apply theme on button click
+  //
+  const themeButton = document.getElementById("themeToggle")
+  if (themeButton) {
+    themeButton.addEventListener("click", handleToggleClick)
+  } else {
+    if (log) console.log("themeButton not found")
+  }
+
+  //
+  // apply theme with keyboard shortcut
+  //
+  document.addEventListener("keydown", (event) => {
+    if (event.altKey && event.key === "s") {
+      event.preventDefault()
+      handleToggleClick()
+    } else if (event.altKey && event.key === "a") {
+      window.location.href = "/demos"
+    }
+  })
+
+  //
+  // apply theme after view transition
+  //
+  document.addEventListener("astro:after-swap", function () {
+    const stored = localStorage.getItem("theme")
+    if (log) console.log("astro swap", stored)
+    if (stored === "dark") document.documentElement.classList.toggle("dark", true)
+  })
+
+  //
+  // apply theme across multiple tabs
+  //
+  const onStorage = (e) => {
+    if (log) console.log("onStorage event", e.key)
+    if (e.key !== "theme") return
+    const theme = e.newValue
+    if (theme) applyThemeToWindow(theme)
+  }
+  window.addEventListener("storage", onStorage)
+  if (log) console.log("theme-toggle script end")
+</script>

package/lib/layouts/parts/astroElementId.ts

@@ -0,0 +1,7 @@
+export const astroElementId = {
+  navbar: "navbar",
+  logo: "logo",
+  themeToggle: "themeToggle",
+  footer: "footer",
+  tailwindIndicator: "tailwindIndicator",
+} as const

package/lib/layouts/parts/markdown.css

@@ -0,0 +1,93 @@
+/*
+rem -> px
+- 0.67rem -> 10.72px
+- 0.5rem -> 8px
+- 0.875rem -> 14px
+- 1.25rem -> 20px
+- 1.5rem -> 24px
+- 2rem -> 32px
+*/
+
+.markdown-body {
+  line-height: 1.5;
+  word-wrap: break-word;
+  font-size: 1.125rem;
+}
+
+.markdown-body h1,
+.markdown-body h2,
+.markdown-body h3,
+.markdown-body h4,
+.markdown-body h5,
+.markdown-body h6 {
+  margin-top: 1.5rem;
+  margin-bottom: 1rem;
+  font-weight: var(--base-text-weight-semibold, 600);
+  line-height: 1.25;
+}
+
+.markdown-body h1 {
+  margin-top: 0.67rem;
+  margin-bottom: 0.67rem;
+  font-weight: var(--base-text-weight-semibold, 600);
+  font-size: 2rem;
+  border-bottom: 0.0625rem solid var(--color-border-muted);
+}
+
+.markdown-body h2 {
+  font-weight: var(--base-text-weight-semibold, 600);
+  font-size: 1.5rem;
+  border-bottom: 0.0625rem solid var(--color-border-muted);
+}
+
+.markdown-body h3 {
+  font-weight: var(--base-text-weight-semibold, 600);
+  font-size: 1.25rem;
+}
+
+.markdown-body h4 {
+  font-weight: var(--base-text-weight-semibold, 600);
+  font-size: 1rem;
+}
+
+.markdown-body h5 {
+  font-weight: var(--base-text-weight-semibold, 600);
+  font-size: 0.875rem;
+}
+
+.markdown-body h6 {
+  font-weight: var(--base-text-weight-semibold, 600);
+  font-size: 0.85rem;
+  color: var(--color-fg-muted);
+}
+
+.markdown-body p {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.markdown-body ul,
+.markdown-body ol {
+  margin-top: 0;
+  margin-bottom: 0;
+  padding-left: 2rem;
+}
+
+/*
+ Add bullet points for list items
+*/
+.markdown-body ul {
+  list-style-type: disc;
+}
+
+.markdown-body ol {
+  list-style-type: decimal;
+}
+
+.markdown-body li {
+  display: list-item;
+}
+
+.markdown-body a {
+  color: hsl(var(--link));
+}

package/lib/link/LinkButton.astro

@@ -0,0 +1,48 @@
+---
+import { buttonCva2, buttonVariant, type ButtonSize, type ButtonVariant } from "~/button/buttonCva"
+import { buttonIconCva } from "~/button/buttonIconCva"
+import { classesButtonClickAnimation } from "~/button/classesButtonClickAnimation"
+import Icon1 from "~/icon/Icon1.astro"
+
+interface Props {
+  title?: string
+  href: string
+  variant?: ButtonVariant
+  size?: ButtonSize
+  icon?: string
+  iconRight?: string
+  iconClass?: string
+  newTab?: boolean
+  class?: string
+  id?: string
+  clickAnimation?: boolean
+}
+const props = Astro.props
+const hasChildren = Astro.slots.has("default")
+const classes = buttonCva2(
+  props.variant ?? buttonVariant.link,
+  props.size,
+  props.clickAnimation ?? classesButtonClickAnimation,
+  props.class,
+)
+---
+
+<a href={props.href} class={classes} target={props.newTab ? "_blank" : undefined} id={props.id} title={props.title}>
+  {
+    props.icon && (
+      <Icon1
+        path={props.icon}
+        class={buttonIconCva(props.variant ?? "link", (props.title || hasChildren) && "mr-2", props.iconClass)}
+      />
+    )
+  }
+  <slot />
+  {
+    props.iconRight && (
+      <Icon1
+        path={props.iconRight}
+        class={buttonIconCva(props.variant ?? "link", (props.title || hasChildren) && "ml-2", props.iconClass)}
+      />
+    )
+  }
+</a>

package/lib/link/LinkText.astro

@@ -0,0 +1,23 @@
+---
+import { classMerge } from "~/utils/ui/classMerge"
+
+interface Props {
+  title?: string
+  href: string
+  newTab?: boolean
+  class?: string
+}
+const props = Astro.props
+const title = props.title
+const href = props.href
+const newTab = props.newTab
+---
+
+<a
+  href={href}
+  class={classMerge("text-blue-500 no-underline hover:underline", props.class)}
+  target={newTab ? "_blank" : undefined}
+  title={title}
+>
+  <slot/>
+</a>

package/lib/link/classesTextLink.ts

@@ -0,0 +1,13 @@
+import { classArr } from "../utils/ui/classArr"
+
+export const classesTextLink = classArr(
+  "text-blue-600 hover:text-black", // light
+  "dark:text-orange-600 dark:hover:text-orange-400", // dark
+  "transition-colors", // animation
+)
+
+export const classesTextLinkGroupHover = classArr(
+  "group-hover:text-blue-600", // light
+  "dark:group-hover:text-orange-400", // dark
+  "transition-colors", // animation
+)

package/lib/list/BlackBulletPoint.astro

@@ -0,0 +1,16 @@
+---
+import { classMerge } from "~/utils/ui/classMerge"
+
+interface Props {
+  class?: string
+}
+const props = Astro.props
+---
+
+<span
+  class={classMerge("text-xs text-blue-500 select-none mr-1 mt-1.5", props.class)}
+  aria-hidden={true}
+  style={{ fontSize: "0.5rem" }}
+>
+  ●</span
+>

package/lib/list/BlackBulletPoints.astro

@@ -0,0 +1,23 @@
+---
+import { mdiCircle } from "@mdi/js"
+import { classMerge } from "~/utils/ui/classMerge"
+import TextOrLink from "./TextOrLink.astro"
+import Icon1 from "~/icon/Icon1.astro"
+
+interface Props {
+  points: string[] | Readonly<string[]>
+  class?: string
+  classText?: string
+  classBullet?: string
+}
+const props = Astro.props
+---
+
+{
+  props.points.map((p) => (
+    <div class={classMerge("flex flex-row flex-nowrap", props.class)}>
+      <Icon1 path={mdiCircle} class={classMerge("w-1.5 h-1.5 mt-3 mx-1.5 shrink-0", props.classBullet)} />
+      <TextOrLink text={p} class={props.classText} />
+    </div>
+  ))
+}

package/lib/list/CheckPoint.astro

@@ -0,0 +1,20 @@
+---
+import { mdiCheck } from "@mdi/js"
+import { classMerge } from "~/utils/ui/classMerge"
+import TextOrLink from "./TextOrLink.astro"
+import Icon1 from "~/icon/Icon1.astro"
+
+interface Props {
+  point: string
+  class?: string
+  classText?: string
+  classBullet?: string
+}
+const p = Astro.props
+---
+
+<div class={classMerge("flex flex-row flex-nowrap", p.class)}>
+  <Icon1 path={mdiCheck} class={classMerge("fill-green-600 dark:fill-green-600 mr-1 flex-none", p.classBullet)} />
+  <TextOrLink text={p.point} class={p.classText} />
+  <slot />
+</div>

package/lib/list/CheckPoints.astro

@@ -0,0 +1,23 @@
+---
+import { mdiCheck } from "@mdi/js"
+import { classMerge } from "~/utils/ui/classMerge"
+import Icon1 from "~/icon/Icon1.astro"
+import TextOrLink from "./TextOrLink.astro"
+
+interface Props {
+  points: string[] | Readonly<string[]>
+  class?: string
+  classText?: string
+  classBullet?: string
+}
+const props = Astro.props
+---
+
+{
+  props.points.map((p) => (
+    <div class={classMerge("flex flex-row flex-nowrap", props.class)}>
+      <Icon1 path={mdiCheck} class={classMerge("fill-green-600 dark:fill-green-600 mr-1 flex-none", props.classBullet)} />
+      <TextOrLink text={p} class={props.classText} />
+    </div>
+  ))
+}

package/lib/list/NumberedList.astro

@@ -0,0 +1,14 @@
+---
+import { classMerge } from "~/utils/ui/classMerge"
+
+interface Props {
+  points: string[] | Readonly<string[]>
+  classText?: string
+  class?: string
+}
+const props = Astro.props
+---
+
+<ol class={classMerge("list-decimal", props.class)} style={{ paddingInlineStart: "18px" }}>
+  {props.points.map((l) => <li class={props.classText}>{l}</li>)}
+</ol>

package/lib/list/Ps.astro

@@ -0,0 +1,12 @@
+---
+interface Props {
+  lines: string[] | Readonly<string[]>
+  class?: string
+}
+const props = Astro.props
+const lines = props.lines
+---
+
+<>
+  {lines.map((line) => <p class={props.class}>{line}</p>)}
+</>

package/lib/list/TextOrLink.astro

@@ -0,0 +1,19 @@
+---
+import LinkText from "~/link/LinkText.astro"
+import { classMerge } from "~/utils/ui/classMerge"
+
+interface Props {
+  text: string
+  class?: string
+}
+const props = Astro.props
+const text = props.text
+---
+
+{
+  text.startsWith("http") ? (
+    <LinkText href={text}>{text}</LinkText>
+  ) : (
+    <p class={classMerge("leading-relaxed", props.class)}>{text}</p>
+  )
+}

package/lib/modal/Modal.astro

@@ -0,0 +1,54 @@
+---
+import "./Modal.module.css"
+import { classesTextHeader } from "~/text/classesTextHeader"
+import { classMerge } from "~/utils/ui/classMerge"
+import { buttonVariant } from "~/button/buttonCva"
+import Button from "~/button/Button.astro"
+
+/**
+ * https://github.com/markteekman/accessible-astro-components/blob/main/Modal.astro
+ */
+interface Props {
+  triggerId: string
+  title: string
+  titleClass?: string
+  closeText?: string
+  class?: string
+  classContentArea?: string
+}
+
+const props = Astro.props
+const triggerId = props.triggerId
+const title = props.title
+const titleClass = props.titleClass
+const closeText = props.closeText ?? "Close"
+const classContentArea = props.classContentArea
+const closeId = `${triggerId}-close`
+---
+
+<dialog
+  class={classMerge(
+    "modal",
+    "fixed m-auto",
+    "max-w-5xl",
+    "bg-white dark:bg-gray-900 text-black dark:text-white", // bg
+    "border-1 border-black p-4 rounded-xl", // border
+    props.class,
+  )}
+  aria-labelledby={triggerId}
+>
+  <div class={classMerge("w-full rounded-xl", classContentArea)}>
+    <div class="modal-content flex flex-col items-start gap-2 p-4">
+      <h2 tabindex="-1" class={classMerge(classesTextHeader, titleClass)}>
+        {title}
+      </h2>
+      <slot>Modal description</slot>
+      <Button id={closeId} variant={buttonVariant.outline} class="modal-close w-full">{closeText}</Button>
+    </div>
+  </div>
+</dialog>
+
+<script>
+  import { modal } from "./modal"
+  modal()
+</script>

package/lib/modal/Modal.module.css

@@ -0,0 +1,19 @@
+dialog::backdrop {
+  background-color: rgba(0, 0, 0, 0.5);
+  filter: blur(6px);
+}
+
+/* Animation */
+dialog[open],
+dialog[open]::backdrop {
+  animation: fadein 0.2s ease-in-out;
+}
+
+@keyframes fadein {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}

package/lib/modal/ModalButton.astro

@@ -0,0 +1,41 @@
+---
+import { generateId5 } from "~/utils/ran/generateId5"
+import type { ButtonSize, ButtonVariant } from "~/button/buttonCva"
+import Modal from "./Modal.astro"
+import { classesTextGray } from "~/text/classesTextGray"
+import { classArr } from "~/utils/ui/classArr"
+import Button from "~/button/Button.astro"
+
+interface Props {
+  button: {
+    title?: string
+    text?: string
+    variant: ButtonVariant
+    size?: ButtonSize
+    icon?: string
+    iconRight?: string
+    iconClass?: string
+    class?: string
+  }
+  id?: string
+  title?: string
+  class?: string
+  classContentArea?: string
+}
+const props = Astro.props
+const id = props.id ?? `modal-id-${generateId5()}`
+const button = props.button
+const title = props.title ?? "Dialog Title"
+const classContentArea = props.classContentArea
+---
+
+<Button id={id} {...button} />
+<Modal
+  triggerId={id}
+  title={title}
+  titleClass={classArr(classesTextGray, "text-xl", "mb-2")}
+  class={props.class}
+  classContentArea={classContentArea}
+>
+  <slot />
+</Modal>