@remix-run/ui 0.1.2 → 0.3.0

package/src/animation/demos/multi-state-badge.tsx

@@ -0,0 +1,426 @@
+import type { Handle } from '@remix-run/ui'
+import { css, on, ref } from '@remix-run/ui'
+
+import { animateEntrance, animateExit } from '@remix-run/ui/animation'
+import { spring } from '@remix-run/ui/animation'
+
+const STATES = {
+  idle: 'Start',
+  processing: 'Processing',
+  success: 'Done',
+  error: 'Something went wrong',
+} as const
+
+type State = keyof typeof STATES
+
+function getNextState(state: State): State {
+  let states = Object.keys(STATES) as State[]
+  let nextIndex = (states.indexOf(state) + 1) % states.length
+  return states[nextIndex]
+}
+
+const ICON_SIZE = 20
+const STROKE_WIDTH = 1.5
+const VIEW_BOX_SIZE = 24
+
+const iconEnterAnimation = {
+  transform: 'translateY(-40px) scale(0.5)',
+  filter: 'blur(6px)',
+  duration: 150,
+  easing: 'ease-out',
+}
+
+const iconExitAnimation = {
+  transform: 'translateY(40px) scale(0.5)',
+  filter: 'blur(6px)',
+  duration: 150,
+  easing: 'ease-in',
+}
+
+export function MultiStateBadge(handle: Handle) {
+  let state: State = 'idle'
+
+  return () => (
+    <div
+      mix={[
+        css({
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          padding: 16,
+          minHeight: 80,
+        }),
+      ]}
+    >
+      <button
+        mix={[
+          css({
+            background: 'none',
+            border: 'none',
+            cursor: 'pointer',
+            padding: 0,
+          }),
+          on('click', () => {
+            state = getNextState(state)
+            handle.update()
+          }),
+        ]}
+      >
+        <Badge state={state} />
+      </button>
+    </div>
+  )
+}
+
+function Badge(handle: Handle<{ state: State }>) {
+  let badgeEl: HTMLDivElement
+  let prevState: State | null = null
+
+  return () => {
+    let { state } = handle.props
+
+    // Trigger shake/scale animations on state change
+    if (prevState !== null && prevState !== state) {
+      handle.queueTask(() => {
+        if (state === 'error') {
+          badgeEl.animate(
+            {
+              transform: [
+                'translateX(0)',
+                'translateX(-6px)',
+                'translateX(6px)',
+                'translateX(-6px)',
+                'translateX(0)',
+              ],
+            },
+            { duration: 300, easing: 'ease-in-out', delay: 100 },
+          )
+        } else if (state === 'success') {
+          badgeEl.animate(
+            { transform: ['scale(1)', 'scale(1.2)', 'scale(1)'] },
+            { duration: 300, easing: 'ease-in-out' },
+          )
+        }
+      })
+    }
+    prevState = state
+
+    return (
+      <div
+        mix={[
+          ref((node) => (badgeEl = node)),
+          css({
+            backgroundColor: '#e2e8f0',
+            color: '#0f1115',
+            display: 'flex',
+            overflow: 'hidden',
+            alignItems: 'center',
+            justifyContent: 'center',
+            padding: '12px 20px',
+            fontSize: 16,
+            borderRadius: 999,
+            willChange: 'transform, filter',
+            transition: `gap ${spring('snappy')}`,
+          }),
+        ]}
+        style={{ gap: state === 'idle' ? '0px' : '8px' }}
+      >
+        <Icon state={state} />
+        <Label state={state} />
+      </div>
+    )
+  }
+}
+
+function Icon(handle: Handle<{ state: State }>) {
+  return () => (
+    <span
+      mix={[
+        css({
+          height: ICON_SIZE,
+          position: 'relative',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          overflow: 'hidden',
+          transition: `width ${spring({ duration: 200, bounce: 0.2 })}`,
+        }),
+      ]}
+      style={{ width: handle.props.state === 'idle' ? 0 : ICON_SIZE }}
+    >
+      {handle.props.state === 'processing' && (
+        <span
+          key="loader"
+          mix={[
+            css({ position: 'absolute', left: 0, top: 0 }),
+            animateEntrance(iconEnterAnimation),
+            animateExit(iconExitAnimation),
+          ]}
+        >
+          <Loader />
+        </span>
+      )}
+      {handle.props.state === 'success' && (
+        <span
+          key="check"
+          mix={[
+            css({ position: 'absolute', left: 0, top: 0 }),
+            animateEntrance(iconEnterAnimation),
+            animateExit(iconExitAnimation),
+          ]}
+        >
+          <Check />
+        </span>
+      )}
+      {handle.props.state === 'error' && (
+        <span
+          key="x"
+          mix={[
+            css({ position: 'absolute', left: 0, top: 0 }),
+            animateEntrance(iconEnterAnimation),
+            animateExit(iconExitAnimation),
+          ]}
+        >
+          <X />
+        </span>
+      )}
+    </span>
+  )
+}
+
+function Loader() {
+  return () => (
+    <div
+      mix={[
+        ref((node) => {
+          node.animate(
+            { transform: ['rotate(0deg)', 'rotate(360deg)'] },
+            { duration: 1000, iterations: Infinity },
+          )
+        }),
+        css({
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          width: ICON_SIZE,
+          height: ICON_SIZE,
+        }),
+      ]}
+    >
+      <svg
+        width={ICON_SIZE}
+        height={ICON_SIZE}
+        viewBox={`0 0 ${VIEW_BOX_SIZE} ${VIEW_BOX_SIZE}`}
+        fill="none"
+        stroke="currentColor"
+        strokeWidth={STROKE_WIDTH}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <path d="M21 12a9 9 0 1 1-6.219-8.56" />
+      </svg>
+    </div>
+  )
+}
+
+function Check() {
+  return () => (
+    <svg
+      width={ICON_SIZE}
+      height={ICON_SIZE}
+      viewBox={`0 0 ${VIEW_BOX_SIZE} ${VIEW_BOX_SIZE}`}
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={STROKE_WIDTH}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <polyline
+        points="4 12 9 17 20 6"
+        mix={[
+          ref((node) => {
+            let length = node.getTotalLength()
+            node.style.strokeDasharray = `${length}`
+            node.style.strokeDashoffset = `${length}`
+            node.animate(
+              { strokeDashoffset: [length, 0] },
+              { ...spring({ duration: 300, bounce: 0.1 }), fill: 'forwards' },
+            )
+          }),
+        ]}
+      />
+    </svg>
+  )
+}
+
+function X() {
+  return () => (
+    <svg
+      width={ICON_SIZE}
+      height={ICON_SIZE}
+      viewBox={`0 0 ${VIEW_BOX_SIZE} ${VIEW_BOX_SIZE}`}
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={STROKE_WIDTH}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <line
+        x1="6"
+        y1="6"
+        x2="18"
+        y2="18"
+        mix={[
+          ref((node) => {
+            let length = node.getTotalLength()
+            node.style.strokeDasharray = `${length}`
+            node.style.strokeDashoffset = `${length}`
+            node.animate(
+              { strokeDashoffset: [length, 0] },
+              { ...spring({ duration: 300, bounce: 0.1 }), fill: 'forwards' },
+            )
+          }),
+        ]}
+      />
+      <line
+        x1="18"
+        y1="6"
+        x2="6"
+        y2="18"
+        mix={[
+          ref((node) => {
+            let length = node.getTotalLength()
+            node.style.strokeDasharray = `${length}`
+            node.style.strokeDashoffset = `${length}`
+            node.animate(
+              { strokeDashoffset: [length, 0] },
+              { ...spring({ duration: 300, bounce: 0.1 }), delay: 100, fill: 'forwards' },
+            )
+          }),
+        ]}
+      />
+    </svg>
+  )
+}
+
+function Label(handle: Handle<{ state: State }>) {
+  let measureEl: HTMLSpanElement
+  let labelWidth = 0
+  let labelHeight = 0
+
+  // Don't animate the label on initial render
+  let isFirstRender = true
+  handle.queueTask(() => {
+    isFirstRender = false
+  })
+
+  return () => {
+    let { state } = handle.props
+
+    // Measure label dimensions after render
+    handle.queueTask(() => {
+      if (measureEl) {
+        let rect = measureEl.getBoundingClientRect()
+        if (rect.width !== labelWidth || rect.height !== labelHeight) {
+          labelWidth = rect.width
+          labelHeight = rect.height
+          handle.update()
+        }
+      }
+    })
+
+    let labelMix = [
+      animateExit({
+        transform: 'translateY(20px)',
+        opacity: 0,
+        filter: 'blur(10px)',
+        duration: 200,
+        easing: 'ease-in-out',
+      }),
+    ]
+
+    if (!isFirstRender) {
+      labelMix.unshift(
+        animateEntrance({
+          transform: 'translateY(-20px)',
+          opacity: 0,
+          filter: 'blur(10px)',
+          duration: 200,
+          easing: 'ease-in-out',
+        }),
+      )
+    }
+
+    return (
+      <span
+        mix={[
+          css({
+            position: 'relative',
+            display: 'inline-block',
+            transition: `width ${spring({ duration: 200, bounce: 0.1 })}`,
+          }),
+        ]}
+        style={{
+          width: labelWidth || 'auto',
+          height: labelHeight || 'auto',
+        }}
+      >
+        {/* Hidden measurement element */}
+        <span
+          mix={[
+            ref((node) => (measureEl = node)),
+            css({ position: 'absolute', visibility: 'hidden', whiteSpace: 'nowrap' }),
+          ]}
+        >
+          {STATES[state]}
+        </span>
+
+        {state === 'idle' && (
+          <span
+            key="idle"
+            mix={[
+              css({ whiteSpace: 'nowrap', position: 'absolute', left: 0, top: 0 }),
+              ...labelMix,
+            ]}
+          >
+            {STATES.idle}
+          </span>
+        )}
+        {state === 'processing' && (
+          <span
+            key="processing"
+            mix={[
+              css({ whiteSpace: 'nowrap', position: 'absolute', left: 0, top: 0 }),
+              ...labelMix,
+            ]}
+          >
+            {STATES.processing}
+          </span>
+        )}
+        {state === 'success' && (
+          <span
+            key="success"
+            mix={[
+              css({ whiteSpace: 'nowrap', position: 'absolute', left: 0, top: 0 }),
+              ...labelMix,
+            ]}
+          >
+            {STATES.success}
+          </span>
+        )}
+        {state === 'error' && (
+          <span
+            key="error"
+            mix={[
+              css({ whiteSpace: 'nowrap', position: 'absolute', left: 0, top: 0 }),
+              ...labelMix,
+            ]}
+          >
+            {STATES.error}
+          </span>
+        )}
+      </span>
+    )
+  }
+}

package/src/animation/demos/press.tsx

@@ -0,0 +1,67 @@
+import { createMixin, css, on, type Handle } from '@remix-run/ui'
+import { spring } from '@remix-run/ui/animation'
+
+export function Press(handle: Handle) {
+  let pressed = false
+
+  function setPressed(nextPressed: boolean) {
+    if (pressed === nextPressed) return
+    pressed = nextPressed
+    handle.update()
+  }
+
+  return () => (
+    <div
+      tabIndex={0}
+      mix={[
+        css({
+          width: 100,
+          height: 100,
+          backgroundColor: '#9911ff',
+          borderRadius: 5,
+          transition: `transform ${spring()}`,
+          '&:focus': {
+            outline: '4px solid rgba(0,120,255,0.7)',
+            outlineOffset: 1,
+          },
+          '&:hover, &:focus': {
+            transform: pressed ? 'scale(0.8)' : 'scale(1.2)',
+          },
+          // or use default browser :active but lose keyboard "down" press states
+          // '&:active': {
+          //   transform: 'scale(0.8)',
+          // },
+        }),
+        onPressDown(() => {
+          setPressed(true)
+        }),
+        onPressUp(() => {
+          setPressed(false)
+        }),
+      ]}
+    />
+  )
+}
+
+const onPressDown = createMixin<HTMLElement, [handler: () => void]>(() => (handler) => [
+  on('pointerdown', (event) => {
+    if (event.isPrimary === false) return
+    handler()
+  }),
+  on('keydown', (event) => {
+    if (!(event.key === 'Enter' || event.key === ' ') || event.repeat) return
+    event.preventDefault()
+    handler()
+  }),
+])
+
+const onPressUp = createMixin<HTMLElement, [handler: () => void]>(() => (handler) => [
+  on('pointerup', handler),
+  on('pointerleave', handler),
+  on('keyup', (event) => {
+    if (!(event.key === 'Enter' || event.key === ' ')) return
+    event.preventDefault()
+    handler()
+  }),
+  on('blur', handler),
+])

package/src/animation/demos/reordering.tsx

@@ -0,0 +1,65 @@
+import { css, type Handle } from '@remix-run/ui'
+import { animateLayout, spring } from '@remix-run/ui/animation'
+
+const initialOrder = ['#ff0088', '#dd00ee', '#9911ff', '#0d63f8']
+
+function shuffle<T>(array: T[]): T[] {
+  let result = [...array]
+  for (let i = result.length - 1; i > 0; i--) {
+    let j = Math.floor(Math.random() * (i + 1))
+    ;[result[i], result[j]] = [result[j], result[i]]
+  }
+  return result
+}
+
+export function Reordering(handle: Handle) {
+  let order = initialOrder
+
+  function scheduleNextShuffle() {
+    setTimeout(() => {
+      if (handle.signal.aborted) return
+      order = shuffle(order)
+      handle.update()
+      scheduleNextShuffle()
+    }, 1000)
+  }
+
+  scheduleNextShuffle()
+
+  return () => (
+    <ul
+      mix={[
+        css({
+          listStyle: 'none',
+          padding: 0,
+          margin: 0,
+          position: 'relative',
+          display: 'flex',
+          flexWrap: 'wrap',
+          gap: 10,
+          width: 220,
+          flexDirection: 'row',
+          justifyContent: 'center',
+          alignItems: 'center',
+        }),
+      ]}
+    >
+      {order.map((backgroundColor) => (
+        <li
+          key={backgroundColor}
+          mix={[
+            css({
+              width: 100,
+              height: 100,
+              borderRadius: 10,
+            }),
+            animateLayout({
+              ...spring({ duration: 600, bounce: 0.2 }),
+            }),
+          ]}
+          style={{ backgroundColor }}
+        />
+      ))}
+    </ul>
+  )
+}

package/src/animation/demos/rolling-square.tsx

@@ -0,0 +1,57 @@
+import { type Handle } from '@remix-run/ui'
+import { css, on } from '@remix-run/ui'
+
+import { spring } from '@remix-run/ui/animation'
+
+export function RollingSquare(handle: Handle) {
+  let toggled = false
+
+  return () => (
+    <div
+      mix={[
+        css({
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          gap: '20px',
+          minWidth: '300px',
+        }),
+      ]}
+    >
+      <div
+        mix={[
+          css({
+            width: '80px',
+            height: '80px',
+            backgroundColor: '#8df0cc',
+            borderRadius: '10px',
+            transition: `transform ${spring({ duration: 500, bounce: 0.5 })}`,
+          }),
+        ]}
+        style={{
+          transform: toggled ? 'translateX(100%) rotate(180deg)' : 'translateX(-100%)',
+        }}
+      />
+      <button
+        mix={[
+          css({
+            backgroundColor: '#8df0cc',
+            color: '#0f1115',
+            borderRadius: '5px',
+            padding: '10px',
+            margin: '10px',
+            border: 'none',
+            cursor: 'pointer',
+          }),
+          on('click', () => {
+            toggled = !toggled
+            handle.update()
+          }),
+        ]}
+      >
+        Toggle position
+      </button>
+    </div>
+  )
+}

package/src/animation/demos/rotate.tsx

@@ -0,0 +1,21 @@
+import { css } from '@remix-run/ui'
+
+export function Rotate() {
+  return () => (
+    <div
+      mix={[
+        css({
+          width: 100,
+          height: 100,
+          backgroundColor: '#ff0088',
+          borderRadius: 5,
+          '@keyframes rotate-demo': {
+            '0%': { transform: 'rotate(0deg)' },
+            '100%': { transform: 'rotate(360deg)' },
+          },
+          animation: `rotate-demo 1s ease-in-out 1`,
+        }),
+      ]}
+    />
+  )
+}