Add demos

Author: bendera

packages/demo/src/main.tsx

@@ -7,6 +7,8 @@ import BadgePage from "./routes/BadgePage.tsx";
 import CheckboxPage from "./routes/CheckboxPage.tsx";
 import RadioPage from "./routes/RadioPage.tsx";
 import SingleSelectPage from "./routes/SingleSelectPage.tsx";
+import TextareaPage from "./routes/Textarea.tsx";
+import TextfieldPage from "./routes/Textfield.tsx";
 
 if (import.meta.env.DEV) {
   await import("@vscode-elements/webview-playground");
@@ -33,6 +35,14 @@ const router = createBrowserRouter([
         path: "/single-select",
         element: <SingleSelectPage />,
       },
+      {
+        path: "/textarea",
+        element: <TextareaPage />,
+      },
+      {
+        path: "/textfield",
+        element: <TextfieldPage />,
+      },
     ],
   },
 ]);

packages/demo/src/routes/Root.tsx

@@ -10,6 +10,8 @@ export default function Root() {
           <li><a href="/checkbox">Checkbox</a></li>
           <li><a href="/radio">Radio</a></li>
           <li><a href="/single-select">Single Select</a></li>
+          <li><a href="/textarea">Textarea</a></li>
+          <li><a href="/textfield">Textfield</a></li>
         </ul>
       </aside>
       <main>

packages/demo/src/routes/Textarea.tsx

@@ -0,0 +1,27 @@
+import { VscodeTextarea } from "@vscode-elements/react-elements";
+
+function logEvents(ev: unknown) {
+  console.log(ev);
+}
+
+export default function TextareaPage() {
+  return (
+    <div>
+      <h1>Textarea</h1>
+      <h2>Change event</h2>
+      <p>
+        <VscodeTextarea
+          onChange={logEvents}
+          onInput={logEvents}
+        ></VscodeTextarea>
+      </p>
+      <h2>Invalid event</h2>
+      <form action="#">
+        <p>
+          <VscodeTextarea required onInvalid={logEvents}></VscodeTextarea>
+          <button type="submit">Submit</button>
+        </p>
+      </form>
+    </div>
+  );
+}

packages/demo/src/routes/Textfield.tsx

@@ -0,0 +1,27 @@
+import { VscodeTextfield } from "@vscode-elements/react-elements";
+
+function logEvents(ev: unknown) {
+  console.log(ev);
+}
+
+export default function TextfieldPage() {
+  return (
+    <div>
+      <h1>Textfield</h1>
+      <h2>Change event</h2>
+      <p>
+        <VscodeTextfield
+          onChange={logEvents}
+          onInput={logEvents}
+        ></VscodeTextfield>
+      </p>
+      <h2>Invalid event</h2>
+      <form action="#">
+        <p>
+          <VscodeTextfield required onInvalid={logEvents}></VscodeTextfield>
+          <button type="submit">Submit</button>
+        </p>
+      </form>
+    </div>
+  );
+}