docs: TextInput design for playgrounds; use in useDebounce demo

Author: ntucker

docs/core/api/useDebounce.md

@@ -13,6 +13,13 @@ Delays updating the parameters by [debouncing](https://css-tricks.com/debouncing
 
 Useful to avoid spamming network requests when parameters might change quickly (like a typeahead field).
 
+:::tip React 18+
+
+When loading new data, the [AsyncBoundary](./AsyncBoundary.md) will continue rendering the previous data until it is ready.
+`isPending` will be true while loading.
+
+:::
+
 ## Usage
 
 <HooksPlayground row>
@@ -95,12 +102,15 @@ export default function SearchIssues() {
   const [debouncedQuery, isPending] = useDebounce(query, 200);
   return (
     <div>
-      <label>
-        Query:{' '}
-        <input type="text" value={query} onChange={handleChange} />
-        {isPending ? '...' : ''}
-      </label>
-      <AsyncBoundary fallback={<div>searching...</div>}>
+      <TextInput
+        placeholder="Search react issues"
+        label="Search"
+        value={query}
+        onChange={handleChange}
+        autoFocus
+        loading={isPending}
+      />
+      <AsyncBoundary>
         <IssueList query={debouncedQuery} owner="facebook" repo="react" />
       </AsyncBoundary>
     </div>

website/src/components/Playground/DesignSystem/CancelButton.tsx

@@ -13,18 +13,17 @@ export function CancelButton({ onClick }: { onClick?: () => void }) {
         style={{ cursor: onClick ? 'pointer' : 'default' }}
         onClick={onClick}
       >
-        {onClick ? (
+        {onClick ?
           <img
             src="/img/cancel.png"
             width="16"
             height="16"
             style={{ marginBottom: '-3px' }}
           />
-        ) : (
-          <div style={{ width: '16px', height: '16px', marginBottom: '-3px' }}>
+        : <div style={{ width: '16px', height: '16px', marginBottom: '-3px' }}>
             &nbsp;
           </div>
-        )}
+        }
       </span>
     </div>
   );

website/src/components/Playground/DesignSystem/CurrentTime.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { useEffect, useState } from 'react';
 
 export function CurrentTime() {

website/src/components/Playground/DesignSystem/TextInput.tsx

@@ -0,0 +1,40 @@
+import React, { type InputHTMLAttributes } from 'react';
+
+export function TextInput({
+  loading = false,
+  label,
+  ...props
+}: InputHTMLAttributes<HTMLInputElement> & {
+  label?: React.ReactNode;
+  loading?: boolean;
+}) {
+  return (
+    <div className="rt-TextFieldRoot">
+      <div className="rt-TextFieldSlot">
+        <svg
+          width="16"
+          height="16"
+          viewBox="0 0 15 15"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M10 6.5C10 8.433 8.433 10 6.5 10C4.567 10 3 8.433 3 6.5C3 4.567 4.567 3 6.5 3C8.433 3 10 4.567 10 6.5ZM9.30884 10.0159C8.53901 10.6318 7.56251 11 6.5 11C4.01472 11 2 8.98528 2 6.5C2 4.01472 4.01472 2 6.5 2C8.98528 2 11 4.01472 11 6.5C11 7.56251 10.6318 8.53901 10.0159 9.30884L12.8536 12.1464C13.0488 12.3417 13.0488 12.6583 12.8536 12.8536C12.6583 13.0488 12.3417 13.0488 12.1464 12.8536L9.30884 10.0159Z"
+            fill="currentColor"
+            fillRule="evenodd"
+            clipRule="evenodd"
+          ></path>
+        </svg>
+      </div>
+      <input spellCheck="false" className="rt-TextFieldInput" {...props} />
+      {label ?
+        <label className="rt-TextFieldLabel">{label}</label>
+      : null}
+      {loading ?
+        <div className="rt-TextFieldSpinner">
+          <div className="rt-Spinner"></div>
+        </div>
+      : null}
+    </div>
+  );
+}

website/src/components/Playground/DesignSystem/design-system.css

@@ -0,0 +1,74 @@
+/* Root container for the text field */
+.rt-TextFieldRoot {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 0.5em;
+  background-color: white;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  position: relative;
+}
+
+/* The slot element (left side) */
+.rt-TextFieldSlot {
+  display: flex;
+  align-items: center;
+  color: #666;
+}
+
+/* The input element inside the text field */
+.rt-TextFieldInput {
+  flex: 1;
+  border: none;
+  outline: none;
+  font-size: 1em;
+  color: #333;
+  background: transparent;
+}
+
+/* Spinner container (right side) */
+.rt-TextFieldSpinner {
+  display: flex;
+  align-items: center;
+  color: #666;
+}
+
+/* Spinner styles */
+.rt-Spinner {
+  width: 16px;
+  height: 16px;
+  border: 2px solid #ccc;
+  border-top-color: #007AFF;
+  border-radius: 50%;
+  animation: rt-spin 1s linear infinite;
+}
+
+/* Spinner animation */
+@keyframes rt-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* Placeholder or label styling */
+.rt-TextFieldLabel {
+  position: absolute;
+  top: -0.75em;
+  left: 0.75em;
+  background-color: white;
+  padding: 0 0.25em;
+  font-size: 0.75em;
+  color: #666;
+  pointer-events: none;
+}
+
+/* Focus state for the text field */
+.rt-TextFieldInput:focus + .rt-TextFieldLabel,
+.rt-TextFieldInput:not(:placeholder-shown) + .rt-TextFieldLabel {
+  color: #007AFF;
+}
+
+.rt-TextFieldRoot:focus-within {
+  border-color: #007AFF;
+}

website/src/components/Playground/DesignSystem/index.ts

@@ -2,3 +2,5 @@ export { CancelButton } from './CancelButton';
 export { CurrentTime } from './CurrentTime';
 export { Avatar } from './Avatar';
 export { Formatted } from './Formatted';
+import './design-system.css';
+export { TextInput } from './TextInput';

website/src/components/Playground/FixturePreview.tsx

@@ -1,7 +1,7 @@
 import type { Fixture, Interceptor } from '@data-client/test';
 import BrowserOnly from '@docusaurus/BrowserOnly';
 import CodeBlock from '@theme/CodeBlock';
-import React, { memo, type ReactElement } from 'react';
+import { memo, type ReactElement } from 'react';
 
 import styles from './styles.module.css';
 

website/src/components/Playground/Preview.tsx

@@ -71,7 +71,7 @@ function Preview<T>({
         getInitialInterceptorData={getInitialInterceptorData}
       >
         <div
-          className={clsx(styles.playgroundPreview, {
+          className={clsx('playground-preview', styles.playgroundPreview, {
             [styles.hidden]: hiddenResult,
           })}
         >

website/src/components/Playground/monaco-init.ts

@@ -265,7 +265,8 @@ if (
         declare function CancelButton(props: { onClick?: () => void }):JSX.Element;
         declare function Avatar(props: { src: string }):JSX.Element;
         declare function Formatted({ downColor, formatter, formatterFn, timeout, transition, transitionLength, upColor, value, stylePrefix, }: NumberProps):JSX.Element
-        declare function ResetableErrorBoundary(props: { children: JSX.ReactChild }):JSX.Element;
+        declare function ResetableErrorBoundary(props: { children: React.ReactNode }):JSX.Element;
+        declare function TextInput(props:React.InputHTMLAttributes<HTMLInputElement> & { label?: React.ReactNode; loading?: boolean }):JSX.Element;
         declare function randomFloatInRange(min: number, max: number, decimals?: number): number;
         declare interface NumberProps {
           /**