@remix-run/ui 0.1.2 → 0.3.0

package/src/runtime/demos/controlled-uncontrolled-values.demo.tsx

@@ -0,0 +1,177 @@
+import { on, type Handle } from '@remix-run/ui'
+
+/**
+ * @name Controlled and Uncontrolled Values
+ * @description Compares controlled props with uncontrolled DOM values across rerenders and remounts.
+ */
+export default function App(handle: Handle) {
+  let controlledText = 'hello'
+  let controlledChecked = true
+  let controlledChoice = 'alpha'
+  let uncontrolledTextSnapshot = 'type to update this'
+  let uncontrolledCheckedSnapshot = true
+  let renderCount = 0
+  let uncontrolledVersion = 0
+
+  let rerender = () => {
+    renderCount++
+    handle.update()
+  }
+
+  let resetControlled = () => {
+    controlledText = 'hello'
+    controlledChecked = true
+    controlledChoice = 'alpha'
+    rerender()
+  }
+
+  let remountUncontrolled = () => {
+    uncontrolledVersion++
+    uncontrolledTextSnapshot = 'type to update this'
+    uncontrolledCheckedSnapshot = true
+    rerender()
+  }
+
+  return () => (
+    <main
+      style={{
+        fontFamily: 'system-ui, sans-serif',
+        maxWidth: '860px',
+        margin: '24px auto',
+        padding: '0 16px',
+        lineHeight: 1.45,
+      }}
+    >
+      <h1>Controlled vs Uncontrolled Values</h1>
+
+      <p>
+        Render count: <strong>{renderCount}</strong>
+      </p>
+
+      <div style={{ display: 'flex', gap: '10px', marginBottom: '18px' }}>
+        <button mix={[on('click', rerender)]}>Force Re-render</button>
+        <button mix={[on('click', resetControlled)]}>Reset Controlled</button>
+        <button mix={[on('click', remountUncontrolled)]}>Remount Uncontrolled</button>
+      </div>
+
+      <section
+        style={{
+          border: '1px solid #d0d7de',
+          borderRadius: '8px',
+          padding: '12px',
+          marginBottom: '12px',
+        }}
+      >
+        <h2>Controlled</h2>
+        <p>
+          These values come from component state. The text input allows everything except digits,
+          and invalid input does not call update.
+        </p>
+
+        <label style={{ display: 'block', marginBottom: '8px' }}>
+          Text:
+          <input
+            style={{ marginLeft: '8px' }}
+            value={controlledText}
+            mix={[
+              on('input', (event) => {
+                let nextValue = event.currentTarget.value
+                if (/\d/.test(nextValue)) {
+                  return
+                }
+                controlledText = nextValue
+                rerender()
+              }),
+            ]}
+          />
+        </label>
+
+        <label style={{ display: 'block', marginBottom: '8px' }}>
+          <input
+            type="checkbox"
+            checked={controlledChecked}
+            mix={[
+              on('change', (event) => {
+                controlledChecked = event.currentTarget.checked
+                rerender()
+              }),
+            ]}
+          />{' '}
+          Checked
+        </label>
+
+        <label style={{ display: 'block', marginBottom: '8px' }}>
+          Choice:
+          <select
+            style={{ marginLeft: '8px' }}
+            value={controlledChoice}
+            mix={[
+              on('change', (event) => {
+                controlledChoice = event.currentTarget.value
+                rerender()
+              }),
+            ]}
+          >
+            <option value="alpha">Alpha</option>
+            <option value="beta">Beta</option>
+            <option value="gamma">Gamma</option>
+          </select>
+        </label>
+
+        <div>
+          State snapshot: text=<code>{JSON.stringify(controlledText)}</code>, checked=
+          <code>{String(controlledChecked)}</code>, choice=
+          <code>{JSON.stringify(controlledChoice)}</code>
+        </div>
+      </section>
+
+      <section
+        key={`uncontrolled-${uncontrolledVersion}`}
+        style={{
+          border: '1px solid #d0d7de',
+          borderRadius: '8px',
+          padding: '12px',
+        }}
+      >
+        <h2>Uncontrolled</h2>
+        <p>
+          These initialize from <code>defaultValue/defaultChecked</code> once and then keep their
+          own DOM state.
+        </p>
+
+        <label style={{ display: 'block', marginBottom: '8px' }}>
+          Text:
+          <input
+            style={{ marginLeft: '8px' }}
+            defaultValue="type to update this"
+            mix={[
+              on('input', (event) => {
+                uncontrolledTextSnapshot = event.currentTarget.value
+                rerender()
+              }),
+            ]}
+          />
+        </label>
+
+        <label style={{ display: 'block', marginBottom: '8px' }}>
+          <input
+            type="checkbox"
+            defaultChecked={true}
+            mix={[
+              on('change', (event) => {
+                uncontrolledCheckedSnapshot = event.currentTarget.checked
+                rerender()
+              }),
+            ]}
+          />{' '}
+          Checked
+        </label>
+
+        <div>
+          Last DOM snapshot: text=<code>{JSON.stringify(uncontrolledTextSnapshot)}</code>, checked=
+          <code>{String(uncontrolledCheckedSnapshot)}</code>
+        </div>
+      </section>
+    </main>
+  )
+}

package/src/runtime/demos/keyed-list.demo.tsx

@@ -0,0 +1,94 @@
+import { on, type Handle } from '@remix-run/ui'
+
+type ListItem = {
+  id: string
+  label: string
+}
+
+/**
+ * @name Keyed List
+ * @description Exercises keyed DOM reconciliation with shuffling, reversing, and per-item controls.
+ */
+export default function App(handle: Handle) {
+  let items: ListItem[] = [
+    { id: 'a', label: 'Item A' },
+    { id: 'b', label: 'Item B' },
+    { id: 'c', label: 'Item C' },
+    { id: 'd', label: 'Item D' },
+  ]
+
+  let shuffleInterval: ReturnType<typeof setInterval> | null = null
+
+  let moveUp = (index: number) => {
+    if (index === 0) return
+    let newItems = [...items]
+    ;[newItems[index - 1], newItems[index]] = [newItems[index], newItems[index - 1]]
+    items = newItems
+    handle.update()
+  }
+
+  let moveDown = (index: number) => {
+    if (index === items.length - 1) return
+    let newItems = [...items]
+    ;[newItems[index], newItems[index + 1]] = [newItems[index + 1], newItems[index]]
+    items = newItems
+    handle.update()
+  }
+
+  let reverse = () => {
+    items = [...items].reverse()
+    handle.update()
+  }
+
+  let shuffle = () => {
+    let newItems = [...items]
+    for (let i = newItems.length - 1; i > 0; i--) {
+      let j = Math.floor(Math.random() * (i + 1))
+      ;[newItems[i], newItems[j]] = [newItems[j], newItems[i]]
+    }
+    items = newItems
+    handle.update()
+  }
+
+  let toggleAutoShuffle = () => {
+    if (shuffleInterval !== null) {
+      clearInterval(shuffleInterval)
+      shuffleInterval = null
+    } else {
+      shuffleInterval = setInterval(() => {
+        shuffle()
+      }, 1000)
+    }
+    handle.update()
+  }
+
+  return () => (
+    <div>
+      <div className="controls">
+        <button mix={[on('click', reverse)]}>Reverse List</button>
+        <button mix={[on('click', shuffle)]}>Shuffle List</button>
+        <button mix={[on('click', toggleAutoShuffle)]}>
+          {shuffleInterval !== null ? 'Stop Auto-Shuffle' : 'Start Auto-Shuffle'}
+        </button>
+      </div>
+
+      {items.map((item, index) => (
+        <div key={item.id} className="list-item">
+          <input type="text" placeholder={item.label} defaultValue={item.label} />
+          <button
+            // disabled={index === 0}
+            mix={[on('click', () => moveUp(index))]}
+          >
+            ↑
+          </button>
+          <button
+            // disabled={index === items.length - 1}
+            mix={[on('click', () => moveDown(index))]}
+          >
+            ↓
+          </button>
+        </div>
+      ))}
+    </div>
+  )
+}