@remix-run/ui 0.0.0 → 0.1.0

package/src/theme/runtime.ts

@@ -0,0 +1,116 @@
+import { createElement, type Handle } from '@remix-run/ui'
+
+import {
+  theme,
+  themeVariableNames,
+  type CreateThemeOptions,
+  type ThemeComponent,
+  type ThemeStyleProps,
+  type ThemeValues,
+  type ThemeVariableTree,
+  type ThemeVars,
+} from './contract.ts'
+
+export function createTheme(values: ThemeValues, options: CreateThemeOptions = {}): ThemeComponent {
+  let selector = options.selector ?? ':root'
+  let reset = options.reset ?? true
+  let vars = Object.freeze(collectThemeVars(themeVariableNames, values))
+  let cssText = serializeThemeCss(selector, vars, { reset })
+
+  function Theme(handle: Handle<ThemeStyleProps>) {
+    return () =>
+      createElement('style', {
+        nonce: handle.props.nonce,
+        'data-rmx-theme': '',
+        'data-rmx-theme-selector': selector,
+        innerHTML: escapeStyleText(cssText),
+      })
+  }
+
+  return Object.assign(Theme, {
+    Style: Theme,
+    cssText,
+    selector,
+    values,
+    vars,
+  })
+}
+
+function collectThemeVars(
+  tree: ThemeVariableTree,
+  values: ThemeValues,
+  path: string[] = [],
+): Record<string, string> {
+  let vars: Record<string, string> = {}
+
+  for (let [key, value] of Object.entries(tree)) {
+    let nextPath = [...path, key]
+    let themeValue = (values as Record<string, unknown>)[key]
+
+    if (typeof value === 'string') {
+      if (typeof themeValue !== 'string' && typeof themeValue !== 'number') {
+        throw new TypeError(
+          `Expected theme value at "${nextPath.join('.')}" to be a string or number`,
+        )
+      }
+
+      vars[value] = String(themeValue)
+      continue
+    }
+
+    if (!isPlainObject(themeValue)) {
+      throw new TypeError(`Expected theme group at "${nextPath.join('.')}" to be an object`)
+    }
+
+    Object.assign(vars, collectThemeVars(value, themeValue as ThemeValues, nextPath))
+  }
+
+  return vars
+}
+
+function serializeThemeCss(selector: string, vars: ThemeVars, options: { reset: boolean }): string {
+  let lines = Object.entries(vars)
+    .map(([name, value]) => `  ${name}: ${value};`)
+    .join('\n')
+
+  let blocks = [`${selector} {\n${lines}\n}`]
+
+  if (options.reset) {
+    blocks.push(serializeThemeResetCss(selector))
+  }
+
+  return blocks.join('\n\n')
+}
+
+function serializeThemeResetCss(selector: string): string {
+  let fontFamily = theme.fontFamily.sans
+  let fontSize = theme.fontSize.md
+  let lineHeight = theme.lineHeight.normal
+  let textColor = theme.colors.text.primary
+  let backgroundColor = theme.surface.lvl0
+
+  if (selector === ':root') {
+    return [
+      `*, *::before, *::after {\n  box-sizing: border-box;\n}`,
+      `html, body {\n  margin: 0;\n}`,
+      `body {\n  font-family: ${fontFamily};\n  font-size: ${fontSize};\n  line-height: ${lineHeight};\n  color: ${textColor};\n  background-color: ${backgroundColor};\n}`,
+      `:where(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, figure, blockquote) {\n  margin: 0;\n}`,
+      `:where(img, svg) {\n  display: block;\n}`,
+    ].join('\n\n')
+  }
+
+  return [
+    `${selector}, ${selector} *, ${selector} *::before, ${selector} *::after {\n  box-sizing: border-box;\n}`,
+    `${selector} {\n  font-family: ${fontFamily};\n  font-size: ${fontSize};\n  line-height: ${lineHeight};\n  color: ${textColor};\n  background-color: ${backgroundColor};\n}`,
+    `${selector} :where(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, figure, blockquote) {\n  margin: 0;\n}`,
+    `${selector} :where(img, svg) {\n  display: block;\n}`,
+  ].join('\n\n')
+}
+
+function escapeStyleText(cssText: string): string {
+  return cssText.replace(/<\/style/gi, '<\\/style')
+}
+
+function isPlainObject(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null && !Array.isArray(value)
+}

package/src/theme/theme.ts

@@ -0,0 +1,15 @@
+export { theme } from './contract.ts'
+export type {
+  CreateThemeOptions,
+  ThemeComponent,
+  ThemeMix,
+  ThemeStyleProps,
+  ThemeUtility,
+  ThemeValue,
+  ThemeValues,
+  ThemeVars,
+} from './contract.ts'
+export { glyphContract, glyphNames } from './glyph-contract.ts'
+export type { GlyphContract, GlyphName, GlyphSymbol, GlyphValues } from './glyph-contract.ts'
+export { createTheme } from './runtime.ts'
+export { RMX_01, RMX_01_GLYPHS } from './presets/rmx-01/index.ts'

package/src/utils/flash-attribute.ts

@@ -0,0 +1,11 @@
+function wait(ms: number) {
+  return new Promise<void>((resolve) => {
+    setTimeout(resolve, ms)
+  })
+}
+
+export async function flashAttribute(node: HTMLElement, attributeName: string, duration: number) {
+  node.setAttribute(attributeName, 'true')
+  await wait(duration)
+  node.removeAttribute(attributeName)
+}

package/src/utils/scroll-lock.ts

@@ -0,0 +1,97 @@
+import { createMixin, on, type ElementProps } from '@remix-run/ui'
+
+type ScrollLockState = {
+  count: number
+  documentOverflow: string
+  documentScrollbarGutter: string
+  scrollX: number
+  scrollY: number
+}
+
+const scrollLocks = new WeakMap<Document, ScrollLockState>()
+
+export function lockScroll(targetDocument = globalThis.document) {
+  if (!targetDocument?.body || !targetDocument.defaultView) {
+    return () => {}
+  }
+
+  let document = targetDocument
+  let documentElement = document.documentElement
+  let view = document.defaultView!
+  let state = scrollLocks.get(document)
+
+  if (!state) {
+    let scrollX = view.scrollX
+    let scrollY = view.scrollY
+    let scrollbarWidth =
+      documentElement.clientWidth > 0
+        ? Math.max(view.innerWidth - documentElement.clientWidth, 0)
+        : 0
+    let computedScrollbarGutter = view.getComputedStyle(documentElement).scrollbarGutter
+
+    state = {
+      count: 0,
+      documentOverflow: documentElement.style.overflow,
+      documentScrollbarGutter: documentElement.style.scrollbarGutter,
+      scrollX,
+      scrollY,
+    }
+
+    documentElement.style.overflow = 'hidden'
+    if (scrollbarWidth > 0 && computedScrollbarGutter === 'auto') {
+      documentElement.style.scrollbarGutter = 'stable'
+    }
+
+    scrollLocks.set(document, state)
+  }
+
+  state.count++
+
+  let unlocked = false
+
+  return () => {
+    if (unlocked) {
+      return
+    }
+
+    unlocked = true
+
+    let currentState = scrollLocks.get(document)
+    if (!currentState) {
+      return
+    }
+
+    currentState.count--
+    if (currentState.count > 0) {
+      return
+    }
+
+    scrollLocks.delete(document)
+
+    documentElement.style.overflow = currentState.documentOverflow
+    documentElement.style.scrollbarGutter = currentState.documentScrollbarGutter
+    view.scrollTo(currentState.scrollX, currentState.scrollY)
+  }
+}
+
+export const lockScrollOnToggle = createMixin<HTMLElement, [], ElementProps>((handle) => {
+  let unlockScroll = () => {}
+
+  handle.signal.addEventListener('abort', () => {
+    unlockScroll()
+    unlockScroll = () => {}
+  })
+
+  return () => [
+    on('beforetoggle', (event) => {
+      unlockScroll()
+      unlockScroll = () => {}
+
+      if (event.newState !== 'open') {
+        return
+      }
+
+      unlockScroll = lockScroll((event.currentTarget as HTMLElement).ownerDocument)
+    }),
+  ]
+})

package/src/utils/wait-for-css-transition.ts

@@ -0,0 +1,66 @@
+export function waitForCssTransition(node: HTMLElement, signal: AbortSignal, action?: () => void) {
+  return new Promise<void>((resolve) => {
+    let resolved = false
+    let sawTransitionRun = false
+    let firstFrameId = 0
+    let secondFrameId = 0
+
+    function cleanup() {
+      cancelAnimationFrame(firstFrameId)
+      cancelAnimationFrame(secondFrameId)
+      node.removeEventListener('transitionrun', handleTransitionRun)
+      node.removeEventListener('transitionend', finish)
+      node.removeEventListener('transitioncancel', finish)
+      signal.removeEventListener('abort', finish)
+    }
+
+    function handleTransitionRun(event: TransitionEvent) {
+      if (event.target !== node) {
+        return
+      }
+
+      sawTransitionRun = true
+    }
+
+    function finish(event?: Event) {
+      if (event instanceof TransitionEvent && event.target !== node) {
+        return
+      }
+
+      if (resolved) {
+        return
+      }
+
+      resolved = true
+      cleanup()
+      resolve()
+    }
+
+    node.addEventListener('transitionrun', handleTransitionRun)
+    node.addEventListener('transitionend', finish)
+    node.addEventListener('transitioncancel', finish)
+    signal.addEventListener('abort', finish, { once: true })
+
+    if (action) {
+      try {
+        action()
+      } catch (error) {
+        cleanup()
+        throw error
+      }
+    }
+
+    if (signal.aborted) {
+      finish()
+      return
+    }
+
+    firstFrameId = requestAnimationFrame(() => {
+      secondFrameId = requestAnimationFrame(() => {
+        if (!sawTransitionRun) {
+          finish()
+        }
+      })
+    })
+  })
+}

package/src/utils/wait.ts

@@ -0,0 +1,5 @@
+export function wait(ms: number) {
+  return new Promise<void>((resolve) => {
+    setTimeout(resolve, ms)
+  })
+}