@remix-run/ui 0.2.0 → 0.3.0

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`,
+        }),
+      ]}
+    />
+  )
+}

package/src/animation/demos/shared-layout.tsx

@@ -0,0 +1,211 @@
+import { css, on, type Handle, type RemixNode } from '@remix-run/ui'
+import { animateEntrance, animateExit } from '@remix-run/ui/animation'
+
+const ease = 'cubic-bezier(0.26, 0.02, 0.23, 0.94)'
+
+function OverlapExample(handle: Handle<{ state: boolean }>) {
+  let shouldAnimate = false
+  handle.queueTask(() => {
+    shouldAnimate = true
+  })
+
+  return () => {
+    let { state } = handle.props
+    let animationMix = [
+      animateExit({
+        opacity: 0,
+        transform: 'scale(0.8)',
+        duration: 300,
+        easing: ease,
+      }),
+    ]
+    if (shouldAnimate) {
+      animationMix.unshift(
+        animateEntrance({
+          opacity: 0,
+          transform: 'scale(0.6)',
+          duration: 300,
+          easing: ease,
+        }),
+      )
+    }
+
+    return (
+      <div
+        // grid layout so children render in the same position
+        mix={[css({ display: 'grid', width: 80, height: 80, '& > *': { gridArea: '1 / 1' } })]}
+      >
+        {state ? (
+          <div key="filled" mix={animationMix}>
+            <Circle filled>
+              <FilledIcon />
+            </Circle>
+          </div>
+        ) : (
+          <div key="outline" mix={animationMix}>
+            <Circle>
+              <OutlineIcon />
+            </Circle>
+          </div>
+        )}
+      </div>
+    )
+  }
+}
+
+function WaitExample(handle: Handle<{ state: boolean }>) {
+  let shouldAnimate = false
+  handle.queueTask(() => {
+    shouldAnimate = true
+  })
+
+  return () => {
+    let { state } = handle.props
+    let animationMix = [
+      animateExit({
+        opacity: 0,
+        transform: 'scale(0.8)',
+        duration: 300,
+        easing: ease,
+      }),
+    ]
+    if (shouldAnimate) {
+      animationMix.unshift(
+        animateEntrance({
+          opacity: 0,
+          transform: 'scale(0.6)',
+          duration: 300,
+          easing: ease,
+          delay: 300,
+        }),
+      )
+    }
+
+    return (
+      <div
+        // grid layout so children render in the same position
+        mix={[css({ display: 'grid', width: 80, height: 80, '& > *': { gridArea: '1 / 1' } })]}
+      >
+        {state ? (
+          <div key="filled" mix={animationMix}>
+            <Circle filled>
+              <FilledIcon />
+            </Circle>
+          </div>
+        ) : (
+          <div key="outline" mix={animationMix}>
+            <Circle>
+              <OutlineIcon />
+            </Circle>
+          </div>
+        )}
+      </div>
+    )
+  }
+}
+
+export function SharedLayout(handle: Handle) {
+  let state = true
+
+  return () => (
+    <div
+      mix={[
+        css({
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          gap: 16,
+        }),
+      ]}
+    >
+      <div mix={[css({ display: 'flex', gap: 16 })]}>
+        <OverlapExample state={state} />
+        <WaitExample state={state} />
+      </div>
+      <button
+        mix={[
+          css({
+            backgroundColor: '#0f1115',
+            color: '#f5f5f5',
+            border: 'none',
+            borderRadius: 8,
+            padding: '12px 32px',
+            fontSize: 14,
+            fontWeight: 500,
+            cursor: 'pointer',
+            transition: 'transform 100ms ease-in-out',
+            '&:active': {
+              transform: 'scale(0.95)',
+            },
+          }),
+          on('click', () => {
+            state = !state
+            handle.update()
+          }),
+        ]}
+      >
+        Switch
+      </button>
+    </div>
+  )
+}
+
+function Circle(handle: Handle<{ filled?: boolean; children: RemixNode }>) {
+  return () => (
+    <div
+      mix={[
+        css({
+          width: 80,
+          height: 80,
+          borderRadius: '50%',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          boxSizing: 'border-box',
+          backgroundColor: handle.props.filled ? '#0f1115' : 'transparent',
+          color: handle.props.filled ? '#f5f5f5' : '#0f1115',
+          border: handle.props.filled ? '2px solid #0f1115' : '2px solid #0f1115',
+        }),
+      ]}
+    >
+      {handle.props.children}
+    </div>
+  )
+}
+
+function FilledIcon() {
+  return () => (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M21 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h6" />
+      <path d="m21 3-9 9" />
+      <path d="M15 3h6v6" />
+    </svg>
+  )
+}
+
+function OutlineIcon() {
+  return () => (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <rect x="3" y="3" width="18" height="18" rx="2" />
+      <path d="M9 12h6" />
+    </svg>
+  )
+}