@remix-run/ui 0.1.2 → 0.3.0

package/src/animation/demos/drag-release.ts

@@ -0,0 +1,118 @@
+import { addEventListeners, createMixin } from '@remix-run/ui'
+
+export const dragVelocityReleaseEventType = 'rmx:drag-velocity-release' as const
+
+declare global {
+  interface HTMLElementEventMap {
+    [dragVelocityReleaseEventType]: DragVelocityEvent
+  }
+}
+
+export class DragVelocityEvent extends Event {
+  clientX: number
+  clientY: number
+  velocityX: number // px/s
+  velocityY: number // px/s
+
+  constructor(
+    type: typeof dragVelocityReleaseEventType,
+    init: { clientX: number; clientY: number; velocityX: number; velocityY: number },
+  ) {
+    super(type, { bubbles: true, cancelable: true })
+    this.clientX = init.clientX
+    this.clientY = init.clientY
+    this.velocityX = init.velocityX
+    this.velocityY = init.velocityY
+  }
+}
+
+const baseDragVelocityEvents = createMixin<HTMLElement>((handle) => {
+  let target: HTMLElement
+  let isTracking = false
+  let pointerId: number | null = null
+  let lastX = 0
+  let lastY = 0
+  let lastTime = 0
+  let velocityX = 0
+  let velocityY = 0
+
+  let onPointerDown = (event: PointerEvent) => {
+    if (!event.isPrimary) return
+    isTracking = true
+    pointerId = event.pointerId
+    lastX = event.clientX
+    lastY = event.clientY
+    lastTime = performance.now()
+    velocityX = 0
+    velocityY = 0
+    target.setPointerCapture(event.pointerId)
+  }
+
+  let onPointerMove = (event: PointerEvent) => {
+    if (!isTracking) return
+    if (!event.isPrimary) return
+    if (pointerId != null && event.pointerId !== pointerId) return
+
+    let now = performance.now()
+    let dt = (now - lastTime) / 1000 // seconds
+
+    if (dt > 0) {
+      // Smooth velocity with some decay of previous velocity
+      let newVelocityX = (event.clientX - lastX) / dt
+      let newVelocityY = (event.clientY - lastY) / dt
+      velocityX = velocityX * 0.5 + newVelocityX * 0.5
+      velocityY = velocityY * 0.5 + newVelocityY * 0.5
+    }
+
+    lastX = event.clientX
+    lastY = event.clientY
+    lastTime = now
+  }
+
+  let onPointerUp = (event: PointerEvent) => {
+    if (!isTracking) return
+    if (!event.isPrimary) return
+    if (pointerId != null && event.pointerId !== pointerId) return
+    isTracking = false
+    pointerId = null
+
+    // If too much time passed since last move, velocity is zero
+    let timeSinceLastMove = (performance.now() - lastTime) / 1000
+    if (timeSinceLastMove > 0.1) {
+      velocityX = 0
+      velocityY = 0
+    }
+
+    target.dispatchEvent(
+      new DragVelocityEvent(dragVelocityReleaseEventType, {
+        clientX: event.clientX,
+        clientY: event.clientY,
+        velocityX,
+        velocityY,
+      }),
+    )
+  }
+
+  let onPointerCancel = () => {
+    isTracking = false
+    pointerId = null
+  }
+
+  handle.addEventListener('insert', (event) => {
+    target = event.node
+    addEventListeners(target, handle.signal, {
+      pointerdown: onPointerDown,
+      pointermove: onPointerMove,
+      pointerup: onPointerUp,
+      pointercancel: onPointerCancel,
+    })
+  })
+})
+
+type DragVelocityEventsMixin = typeof baseDragVelocityEvents & {
+  readonly release: typeof dragVelocityReleaseEventType
+}
+
+export const dragVelocityEvents: DragVelocityEventsMixin = Object.assign(baseDragVelocityEvents, {
+  release: dragVelocityReleaseEventType,
+})

package/src/animation/demos/enter.tsx

@@ -0,0 +1,22 @@
+import { css } from '@remix-run/ui'
+import { animateEntrance, spring } from '@remix-run/ui/animation'
+
+export function EnterAnimation() {
+  return () => (
+    <div
+      mix={[
+        css({
+          width: 100,
+          height: 100,
+          backgroundColor: '#dd00ee',
+          borderRadius: '50%',
+        }),
+        animateEntrance({
+          opacity: 0,
+          transform: 'scale(0)',
+          ...spring({ duration: 400, bounce: 0.5 }),
+        }),
+      ]}
+    />
+  )
+}

package/src/animation/demos/exit.tsx

@@ -0,0 +1,79 @@
+import type { Handle } from '@remix-run/ui'
+import { css, on } from '@remix-run/ui'
+
+import { animateEntrance, animateExit, spring } from '@remix-run/ui/animation'
+
+export function ExitAnimation(handle: Handle) {
+  let isVisible = true
+
+  let shouldAnimate = false
+  handle.queueTask(() => {
+    shouldAnimate = true
+  })
+
+  return () => (
+    <div
+      mix={[
+        css({
+          display: 'flex',
+          flexDirection: 'column',
+          width: '100px',
+          height: '160px',
+          position: 'relative',
+        }),
+      ]}
+    >
+      {isVisible && (
+        <div
+          key="exit-animation"
+          mix={[
+            css({
+              width: '100px',
+              height: '100px',
+              backgroundColor: '#0cdcf7',
+              borderRadius: '10px',
+            }),
+            animateEntrance(
+              shouldAnimate && {
+                opacity: 0,
+                transform: 'scale(0)',
+                ...spring('snappy'),
+              },
+            ),
+            animateExit({
+              opacity: 0,
+              transform: 'scale(0)',
+              ...spring(),
+            }),
+          ]}
+        />
+      )}
+      <button
+        mix={[
+          css({
+            backgroundColor: '#0cdcf7',
+            borderRadius: '10px',
+            padding: '10px 20px',
+            color: '#0f1115',
+            border: 'none',
+            cursor: 'pointer',
+            position: 'absolute',
+            bottom: 0,
+            left: 0,
+            right: 0,
+            transition: `transform 100ms ease-in-out`,
+            '&:active': {
+              transform: 'translateY(1px)',
+            },
+          }),
+          on('click', () => {
+            isVisible = !isVisible
+            handle.update()
+          }),
+        ]}
+      >
+        {isVisible ? 'Hide' : 'Show'}
+      </button>
+    </div>
+  )
+}

package/src/animation/demos/flip-toggle.tsx

@@ -0,0 +1,46 @@
+import { css, on, type Handle } from '@remix-run/ui'
+import { animateLayout } from '@remix-run/ui/animation'
+
+export function FlipToggle(handle: Handle) {
+  let isOn = false
+
+  return () => (
+    <button
+      mix={[
+        css({
+          width: 90,
+          height: 50,
+          backgroundColor: 'rgba(153, 17, 255, 0.2)',
+          borderRadius: 50,
+          cursor: 'pointer',
+          display: 'flex',
+          padding: 10,
+          border: 'none',
+        }),
+        on('click', () => {
+          isOn = !isOn
+          handle.update()
+        }),
+      ]}
+      style={{
+        // The actual layout property that changes
+        justifyContent: isOn ? 'flex-start' : 'flex-end',
+      }}
+    >
+      <div
+        mix={[
+          css({
+            width: 30,
+            height: 30,
+            backgroundColor: '#9911ff',
+            borderRadius: '50%',
+          }),
+          animateLayout({
+            duration: 200,
+            easing: 'ease-in-out',
+          }),
+        ]}
+      />
+    </button>
+  )
+}

package/src/animation/demos/hold-to-confirm.tsx

@@ -0,0 +1,317 @@
+import { createMixin, css, on, type Handle } from '@remix-run/ui'
+import { animateEntrance, animateExit, spring } from '@remix-run/ui/animation'
+
+// Demo
+const buttonExitAnimation = {
+  opacity: 0,
+  transform: 'scale(1.15)',
+  duration: 100,
+  easing: 'ease-in',
+}
+
+const confirmationEnterAnimation = {
+  opacity: 0,
+  transform: 'scale(0.9)',
+  duration: 200,
+  easing: 'ease-out',
+}
+
+export function HoldToConfirm(handle: Handle) {
+  let confirmed = false
+
+  return () => (
+    <div
+      mix={[
+        css({
+          display: 'grid',
+          placeItems: 'center',
+          minHeight: 140,
+          // so children can animate in the same position
+          '& > *': { gridArea: '1 / 1' },
+        }),
+      ]}
+    >
+      {!confirmed && (
+        <HoldButton
+          key="hold-button"
+          onConfirm={() => {
+            confirmed = true
+            handle.update()
+          }}
+        />
+      )}
+      {confirmed && (
+        <Confirmation
+          key="confirmed"
+          onReset={() => {
+            confirmed = false
+            handle.update()
+          }}
+        />
+      )}
+    </div>
+  )
+}
+
+function HoldButton(handle: Handle<{ onConfirm: () => void }>) {
+  let confirming = false
+
+  return () => (
+    <button
+      mix={[
+        animateExit(buttonExitAnimation),
+        css({
+          position: 'relative',
+          overflow: 'hidden',
+          width: 200,
+          height: 56,
+          border: 'none',
+          borderRadius: 12,
+          backgroundColor: '#dc2626',
+          color: 'white',
+          fontSize: 16,
+          fontWeight: 600,
+          cursor: 'pointer',
+          userSelect: 'none',
+          transition: 'transform 150ms ease',
+          '&:focus': {
+            outline: '3px solid rgba(220, 38, 38, 0.4)',
+            outlineOffset: 2,
+          },
+          '&:active': {
+            transform: 'scale(0.98)',
+          },
+        }),
+        confirmPress(),
+        on(confirmPress.start, () => {
+          confirming = true
+          handle.update()
+        }),
+        on(confirmPress.cancel, () => {
+          if (!confirming) return
+          confirming = false
+          handle.update()
+        }),
+        on(confirmPress.end, () => {
+          handle.props.onConfirm()
+        }),
+      ]}
+    >
+      <div
+        mix={[
+          css({
+            position: 'absolute',
+            inset: 0,
+            backgroundColor: 'rgba(0, 0, 0, 0.3)',
+            transformOrigin: 'left',
+          }),
+        ]}
+        style={{
+          transform: confirming ? 'scaleX(1)' : 'scaleX(0)',
+          transition: confirming
+            ? `transform ${PRESS_CONFIRM_TIME}ms linear`
+            : `transform ${spring({ duration: 100, bounce: 0 })}`,
+        }}
+      />
+
+      <span
+        mix={[
+          css({
+            position: 'relative',
+            zIndex: 1,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: 8,
+          }),
+        ]}
+      >
+        <TrashIcon />
+        Hold to Delete
+      </span>
+    </button>
+  )
+}
+
+function Confirmation(handle: Handle<{ onReset: () => void }>) {
+  return () => (
+    <div
+      mix={[
+        animateEntrance(confirmationEnterAnimation),
+        css({
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          gap: 16,
+        }),
+      ]}
+    >
+      <div
+        mix={[
+          css({
+            display: 'flex',
+            alignItems: 'center',
+            gap: 8,
+            color: '#22c55e',
+            fontSize: 18,
+            fontWeight: 600,
+          }),
+        ]}
+      >
+        <CheckIcon />
+        Deleted
+      </div>
+
+      <button
+        mix={[
+          css({
+            padding: '8px 16px',
+            border: '1px solid #e2e8f0',
+            borderRadius: 8,
+            backgroundColor: 'white',
+            color: '#64748b',
+            fontSize: 14,
+            cursor: 'pointer',
+            transition: 'all 150ms ease',
+            '&:hover': {
+              backgroundColor: '#f8fafc',
+              borderColor: '#cbd5e1',
+            },
+          }),
+          on('click', () => handle.props.onReset()),
+        ]}
+      >
+        Reset Demo
+      </button>
+    </div>
+  )
+}
+
+function TrashIcon() {
+  return () => (
+    <svg
+      width={16}
+      height={16}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <polyline points="3 6 5 6 21 6" />
+      <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
+    </svg>
+  )
+}
+
+function CheckIcon() {
+  return () => (
+    <svg
+      width={16}
+      height={16}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2.5}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <polyline points="20 6 9 17 4 12" />
+    </svg>
+  )
+}
+
+const PRESS_CONFIRM_TIME = 2000
+const pressConfirmStartEventType = 'demo:press-confirm-start' as const
+const pressConfirmCancelEventType = 'demo:press-confirm-cancel' as const
+const pressConfirmEndEventType = 'demo:press-confirm-end' as const
+
+declare global {
+  interface HTMLElementEventMap {
+    [pressConfirmStartEventType]: Event
+    [pressConfirmCancelEventType]: Event
+    [pressConfirmEndEventType]: Event
+  }
+}
+
+const baseConfirmPress = createMixin<HTMLElement>((handle) => {
+  let timer = 0
+  let pressing = false
+
+  let clearTimer = () => {
+    if (timer) {
+      clearTimeout(timer)
+      timer = 0
+    }
+  }
+
+  let start = (target: Element) => {
+    clearTimer()
+    pressing = true
+    target.dispatchEvent(new Event(pressConfirmStartEventType, { bubbles: true }))
+    timer = window.setTimeout(() => {
+      timer = 0
+      pressing = false
+      target.dispatchEvent(new Event(pressConfirmEndEventType, { bubbles: true }))
+    }, PRESS_CONFIRM_TIME)
+  }
+
+  let cancel = (target: Element) => {
+    if (!pressing) return
+    clearTimer()
+    pressing = false
+    target.dispatchEvent(new Event(pressConfirmCancelEventType, { bubbles: true }))
+  }
+
+  handle.addEventListener('remove', () => {
+    clearTimer()
+    pressing = false
+  })
+
+  return (props) => (
+    <handle.element
+      {...props}
+      mix={[
+        on('pointerdown', (event) => {
+          if (event.isPrimary === false) return
+          start(event.currentTarget)
+        }),
+        on('pointerup', (event) => {
+          cancel(event.currentTarget)
+        }),
+        on('pointercancel', (event) => {
+          cancel(event.currentTarget)
+        }),
+        on('pointerleave', (event) => {
+          cancel(event.currentTarget)
+        }),
+        on('keydown', (event) => {
+          if (!(event.key === 'Enter' || event.key === ' ') || event.repeat) return
+          event.preventDefault()
+          start(event.currentTarget)
+        }),
+        on('keyup', (event) => {
+          if (!(event.key === 'Enter' || event.key === ' ')) return
+          event.preventDefault()
+          cancel(event.currentTarget)
+        }),
+        on('blur', (event) => {
+          cancel(event.currentTarget)
+        }),
+      ]}
+    />
+  )
+})
+
+type ConfirmPressMixin = typeof baseConfirmPress & {
+  readonly start: typeof pressConfirmStartEventType
+  readonly cancel: typeof pressConfirmCancelEventType
+  readonly end: typeof pressConfirmEndEventType
+}
+
+const confirmPress: ConfirmPressMixin = Object.assign(baseConfirmPress, {
+  start: pressConfirmStartEventType,
+  cancel: pressConfirmCancelEventType,
+  end: pressConfirmEndEventType,
+})

package/src/animation/demos/html-content.tsx

@@ -0,0 +1,41 @@
+import type { Handle } from '@remix-run/ui'
+import { css } from '@remix-run/ui'
+
+import { spring } from '@remix-run/ui/animation'
+
+export function HTMLContent(handle: Handle) {
+  let count = 0
+  let from = 0
+  let to = 100
+
+  let counter = spring({ duration: 3000, bounce: 0 })
+
+  function animate() {
+    if (handle.signal.aborted) return
+
+    let { value: t, done } = counter.next()
+    if (done) return
+
+    count = Math.round(from + (to - from) * t)
+    handle.update()
+    requestAnimationFrame(animate)
+  }
+
+  handle.queueTask(() => {
+    requestAnimationFrame(animate)
+  })
+
+  return () => (
+    <pre
+      mix={[
+        css({
+          fontSize: '64px',
+          margin: 0,
+          color: '#8df0cc',
+        }),
+      ]}
+    >
+      {count}
+    </pre>
+  )
+}

package/src/animation/demos/interruptible-keyframes.tsx

@@ -0,0 +1,62 @@
+import { css, on, ref } from '@remix-run/ui'
+
+export function InterruptibleKeyframes() {
+  let box: HTMLDivElement
+  let currentAnimation: Animation | null = null
+
+  function getCurrentScale(): number {
+    let matrix = new DOMMatrix(getComputedStyle(box).transform)
+    return matrix.a
+  }
+
+  function interruptAnimation() {
+    if (currentAnimation) {
+      currentAnimation.commitStyles()
+      currentAnimation.cancel()
+      currentAnimation = null
+    }
+  }
+
+  return () => (
+    <div
+      mix={[
+        ref((node) => (box = node)),
+        css({
+          width: 100,
+          height: 100,
+          backgroundColor: '#0cdcf7',
+          borderRadius: 5,
+        }),
+        on('pointerenter', () => {
+          interruptAnimation()
+          let startScale = getCurrentScale()
+
+          currentAnimation = box.animate(
+            [
+              { transform: `scale(${startScale})`, offset: 0, easing: 'ease-in-out' },
+              { transform: 'scale(1.1)', offset: 0.6, easing: 'ease-out' },
+              { transform: 'scale(1.6)', offset: 1 },
+            ],
+            {
+              duration: 500,
+              fill: 'forwards',
+            },
+          )
+        }),
+        on('pointerleave', () => {
+          interruptAnimation()
+          let startScale = getCurrentScale()
+
+          currentAnimation = box.animate(
+            [{ transform: `scale(${startScale})` }, { transform: 'scale(1)' }],
+            {
+              duration: 300,
+              easing: 'ease-out',
+              fill: 'forwards',
+            },
+          )
+        }),
+      ]}
+    />
+  )
+}