@jsenv/navi 0.0.1 → 0.1.1

package/src/components/demos/2_input_textual_demo.html

@@ -194,155 +194,98 @@
     <script type="module" jsenv-type="module/jsx">
       import { render } from "preact";
       import { useState } from "preact/hooks";
-      import {
-        // eslint-disable-next-line no-unused-vars
-        Input,
-        // eslint-disable-next-line no-unused-vars
-        Field,
-      } from "@jsenv/navi";
+      // eslint-disable-next-line no-unused-vars
+      import { Input } from "@jsenv/navi";
 
       // eslint-disable-next-line no-unused-vars
       const App = () => {
+        return (
+          <div className="demo-grid">
+            <LoadingDemo />
+            <ReadOnlyDemo />
+            <DisabledDemo />
+          </div>
+        );
+      };
+
+      // eslint-disable-next-line no-unused-vars
+      const LoadingDemo = () => {
+        const [value, setValue] = useState();
         const [loading, setLoading] = useState(false);
-        const [loadingB, setLoadingB] = useState(false);
-        const [loadingC, setLoadingC] = useState(false);
-        const [loadingD, setLoadingD] = useState(false);
 
         return (
-          <div className="demo-grid">
-            <div className="demo-card">
-              <h3 className="demo-title">💫 Loading State</h3>
-              <div className="control-group">
-                <Field
-                  input={
-                    <Input loading={loading} placeholder="Enter some text..." />
-                  }
-                  label="Basic Input"
-                />
-              </div>
-              <div className="native-comparison">
-                <div className="native-demo">
-                  <h4>@jsenv/navi Input</h4>
-                  <Input loading={loading} placeholder="Enter some text..." />
-                </div>
-                <div className="native-demo">
-                  <h4>Native HTML Input</h4>
-                  <input placeholder="Native comparison" />
-                </div>
-              </div>
-              <div className="button-group">
-                <button onClick={() => setLoading(!loading)}>
-                  {loading ? "Stop Loading" : "Start Loading"}
-                </button>
-              </div>
+          <div className="demo-card">
+            <h3 className="demo-title">💫 Loading State</h3>
+            <div className="control-group">
+              <h4>@jsenv/navi Input</h4>
+              <Input
+                loading={loading}
+                value={value}
+                onUIStateChange={setValue}
+                placeholder="Enter some text..."
+              />
             </div>
-
-            <div className="demo-card">
-              <h3 className="demo-title">⚡ Action Input</h3>
-              <div className="control-group">
-                <Field
-                  input={
-                    <Input
-                      name="action-input"
-                      action={() => {}}
-                      loading={loadingB}
-                      placeholder="Input with action..."
-                    />
-                  }
-                  label="Action Input"
-                />
-              </div>
-              <div className="native-comparison">
-                <div className="native-demo">
-                  <h4>@jsenv/navi Input with Action</h4>
-                  <Input
-                    name="action-input"
-                    action={() => {}}
-                    loading={loadingB}
-                    placeholder="Input with action..."
-                  />
-                </div>
-                <div className="native-demo">
-                  <h4>Native HTML Input</h4>
-                  <input placeholder="Native has no built-in action" />
-                </div>
-              </div>
-              <div className="button-group">
-                <button onClick={() => setLoadingB(!loadingB)}>
-                  {loadingB ? "Stop Loading" : "Start Loading"}
-                </button>
-              </div>
+            <div className="control-group">
+              <h4>Native HTML Input</h4>
+              <input placeholder="Enter some text..." />
             </div>
+            <div className="button-group">
+              <button onClick={() => setLoading(!loading)}>
+                {loading ? "Stop Loading" : "Start Loading"}
+              </button>
+            </div>
+          </div>
+        );
+      };
 
-            <div className="demo-card">
-              <h3 className="demo-title">🔒 Read-only State</h3>
-              <div className="control-group">
-                <Field
-                  input={
-                    <Input
-                      value="This is read-only content"
-                      readonly
-                      loading={loadingC}
-                    />
-                  }
-                  label="Read-only Input"
-                  readonly
-                />
-              </div>
-              <div className="native-comparison">
-                <div className="native-demo">
-                  <h4>@jsenv/navi Read-only</h4>
-                  <Input
-                    value="This is read-only content"
-                    readonly
-                    loading={loadingC}
-                  />
-                </div>
-                <div className="native-demo">
-                  <h4>Native Read-only</h4>
-                  <input readonly value="Native read-only" />
-                </div>
-              </div>
-              <div className="button-group">
-                <button onClick={() => setLoadingC(!loadingC)}>
-                  {loadingC ? "Stop Loading" : "Start Loading"}
-                </button>
-              </div>
+      // eslint-disable-next-line no-unused-vars
+      const ReadOnlyDemo = () => {
+        // not giving onValueChange param makes it read-only
+        const [loading, setLoading] = useState(false);
+
+        return (
+          <div className="demo-card">
+            <h3 className="demo-title">🔒 Read-only State</h3>
+            <div className="control-group">
+              <h4>@jsenv/navi Read-only</h4>
+              <Input value="This is read-only content" loading={loading} />
+            </div>
+            <div className="control-group">
+              <h4>Native Read-only</h4>
+              <input readOnly value="This is read-only content" />
             </div>
+            <div className="button-group">
+              <button onClick={() => setLoading(!loading)}>
+                {loading ? "Stop Loading" : "Start Loading"}
+              </button>
+            </div>
+          </div>
+        );
+      };
+
+      // eslint-disable-next-line no-unused-vars
+      const DisabledDemo = () => {
+        const [loading, setLoading] = useState(false);
 
-            <div className="demo-card">
-              <h3 className="demo-title">🚫 Disabled State</h3>
-              <div className="control-group">
-                <Field
-                  input={
-                    <Input
-                      disabled
-                      loading={loadingD}
-                      placeholder="Disabled input..."
-                    />
-                  }
-                  label="Disabled Input"
-                />
-              </div>
-              <div className="native-comparison">
-                <div className="native-demo">
-                  <h4>@jsenv/navi Disabled</h4>
-                  <Input
-                    disabled
-                    loading={loadingD}
-                    placeholder="Disabled input..."
-                  />
-                </div>
-                <div className="native-demo">
-                  <h4>Native Disabled</h4>
-                  <input disabled placeholder="Native disabled" />
-                </div>
-              </div>
-              <div className="button-group">
-                <button onClick={() => setLoadingD(!loadingD)}>
-                  {loadingD ? "Stop Loading" : "Start Loading"}
-                </button>
-              </div>
+        return (
+          <div className="demo-card">
+            <h3 className="demo-title">🚫 Disabled State</h3>
+            <div className="control-group">
+              <h4>@jsenv/navi Disabled</h4>
+              <Input
+                disabled
+                loading={loading}
+                placeholder="Disabled input..."
+              />
+            </div>
+            <div className="control-group">
+              <h4>Native Disabled</h4>
+              <input disabled placeholder="Disabled input..." />
+            </div>
+            <div className="button-group">
+              <button onClick={() => setLoading(!loading)}>
+                {loading ? "Stop Loading" : "Start Loading"}
+              </button>
             </div>
           </div>
         );

package/src/components/demos/3_radio_demo.html

@@ -15,8 +15,6 @@
       import {
         // eslint-disable-next-line no-unused-vars
         Input,
-        // eslint-disable-next-line no-unused-vars
-        Field,
       } from "@jsenv/navi";
 
       // eslint-disable-next-line no-unused-vars

package/src/components/demos/4_select_demo.html

@@ -16,7 +16,7 @@
         // eslint-disable-next-line no-unused-vars
         Select,
         // eslint-disable-next-line no-unused-vars
-        Field,
+        Label,
       } from "@jsenv/navi";
 
       // eslint-disable-next-line no-unused-vars
@@ -41,17 +41,15 @@
                   <strong>Loading</strong>
                 </p>
 
-                <Field
-                  input={
-                    <Select name="loading" loading={loading}>
-                      {[
-                        { label: "a", value: "a" },
-                        { label: "b", value: "b" },
-                      ]}
-                    </Select>
-                  }
-                  label="Coucou"
-                ></Field>
+                <Label>
+                  Coucou
+                  <Select name="loading" loading={loading}>
+                    {[
+                      { label: "a", value: "a" },
+                      { label: "b", value: "b" },
+                    ]}
+                  </Select>
+                </Label>
 
                 <div>
                   <label>
@@ -69,17 +67,15 @@
                   <strong>Readonly</strong>
                 </p>
 
-                <Field
-                  input={
-                    <Select name="loading" loading={loading} value="b" readOnly>
-                      {[
-                        { label: "a", value: "a" },
-                        { label: "b", value: "b" },
-                      ]}
-                    </Select>
-                  }
-                  label="Coucou"
-                ></Field>
+                <Label>
+                  Coucou
+                  <Select name="loading" loading={loading} value="b" readOnly>
+                    {[
+                      { label: "a", value: "a" },
+                      { label: "b", value: "b" },
+                    ]}
+                  </Select>
+                </Label>
 
                 <div>
                   <label>

package/src/components/demos/6_tablist_demo.html

@@ -0,0 +1,77 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="data:," />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>TabList demo</title>
+    <style>
+      .tab_button {
+        background: none;
+        border: none;
+        color: inherit;
+        font: inherit;
+        cursor: pointer;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="root" style="position: relative"></div>
+
+    <script type="module" jsenv-type="module/jsx">
+      import { render } from "preact";
+      import { useState } from "preact/hooks";
+      import {
+        // eslint-disable-next-line no-unused-vars
+        TabList,
+        // eslint-disable-next-line no-unused-vars
+        Tab,
+      } from "../tablist/tablist.jsx";
+
+      const tabs = [
+        { id: "overview", label: "Overview" },
+        { id: "code", label: "Code" },
+        { id: "issues", label: "Issues" },
+        { id: "pulls", label: "Pull requests" },
+        { id: "actions", label: "Actions" },
+        { id: "projects", label: "Projects" },
+        { id: "wiki", label: "Wiki" },
+        { id: "security", label: "Security" },
+        { id: "insights", label: "Insights" },
+      ];
+
+      // eslint-disable-next-line no-unused-vars
+      const App = () => {
+        const [selectedTabId, setSelectedTabId] = useState("overview");
+
+        return (
+          <div>
+            <p style="max-width: 800px; margin: 20px auto 0;">
+              Click the tabs to toggle the active one. The underline marker is
+              shown for the active tab.
+            </p>
+            <TabList aria-label="Demo tabs">
+              {tabs.map((tab) => (
+                <Tab key={tab.id} selected={selectedTabId === tab.id}>
+                  <button
+                    type="button"
+                    className="tab_button"
+                    onClick={() => setSelectedTabId(tab.id)}
+                  >
+                    {tab.label}
+                  </button>
+                </Tab>
+              ))}
+            </TabList>
+            <div style="max-width: 800px; margin: 16px auto; padding: 12px; border: 1px dashed #ccc; border-radius: 8px;">
+              <strong>Selected tab:</strong>{" "}
+              {tabs.find((t) => t.id === selectedTabId).label}
+            </div>
+          </div>
+        );
+      };
+
+      render(<App />, document.querySelector("#root"));
+    </script>
+  </body>
+</html>

package/src/components/demos/7_table_selection_demo.html

@@ -0,0 +1,176 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Table Cell Selection Demo - Preact</title>
+    <style>
+      body {
+        font-family:
+          system-ui,
+          -apple-system,
+          sans-serif;
+        margin: 20px;
+        background: #f5f5f5;
+      }
+
+      .demo-container {
+        max-width: 800px;
+        margin: 0 auto;
+        background: white;
+        padding: 20px;
+        border-radius: 8px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+      }
+
+      /* Status display */
+      .status {
+        margin-top: 20px;
+        padding: 10px;
+        background: #f0f8ff;
+        border-radius: 4px;
+        font-family: monospace;
+        font-size: 14px;
+      }
+
+      .actions {
+        margin-top: 15px;
+      }
+
+      button {
+        background: #0078d4;
+        color: white;
+        border: none;
+        padding: 8px 16px;
+        border-radius: 4px;
+        cursor: pointer;
+        margin-right: 8px;
+      }
+
+      button:hover {
+        background: #106ebe;
+      }
+
+      button:disabled {
+        background: #ccc;
+        cursor: not-allowed;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="root"></div>
+
+    <script type="module" jsenv-type="module/jsx">
+      import { render } from "preact";
+      import { useRef, useState } from "preact/hooks";
+      import {
+        // eslint-disable-next-line no-unused-vars
+        Table,
+      } from "@jsenv/navi";
+
+      // Sample data
+      const data = [
+        {
+          id: "1",
+          index: 1,
+          name: "1A",
+          email: "2A",
+          status: "3A",
+        },
+        {
+          id: "2",
+          index: 2,
+          name: "1B",
+          email: "2B",
+          status: "3B",
+        },
+        {
+          id: "3",
+          index: 3,
+          name: "1C",
+          email: "2C",
+          status: "3C",
+        },
+        {
+          id: "4",
+          index: 4,
+          name: "4A",
+          email: "4B",
+          status: "4C",
+        },
+      ];
+
+      // Column definitions
+      const columns = [
+        { id: "name", accessorKey: "name", header: "Name" },
+        { id: "email", accessorKey: "email", header: "Email" },
+        { id: "status", accessorKey: "status", header: "Status" },
+      ];
+
+      // eslint-disable-next-line no-unused-vars
+      const TableDemo = () => {
+        const tableRef = useRef(null);
+        const [selection, setSelection] = useState([]);
+
+        return (
+          <div className="demo-container">
+            <h1>Table Cell Selection Demo - Preact</h1>
+            <p>
+              Click cells to select/deselect. Use Cmd/Ctrl+click for
+              multi-select. Use Tab and arrow keys to navigate.
+              <br />
+              <strong>Click the # column to select entire rows.</strong>
+              <br />
+              <strong>Click column headers to select entire columns.</strong>
+            </p>
+
+            <Table
+              ref={tableRef}
+              data={data}
+              columns={columns}
+              selection={selection}
+              onSelectionChange={(value) => {
+                setSelection(value);
+              }}
+            />
+
+            <div className="status">
+              <div>
+                Selection: <span>{JSON.stringify(selection)}</span>
+              </div>
+              <div>
+                Total selection count: <span>{selection.length}</span>
+              </div>
+            </div>
+
+            <div className="actions">
+              <button
+                onClick={() => {
+                  tableRef.current.clearSelection();
+                }}
+              >
+                Clear Selection
+              </button>
+              <button
+                onClick={() => {
+                  tableRef.current.selectAll();
+                }}
+              >
+                Select All
+              </button>
+            </div>
+          </div>
+        );
+      };
+
+      // Render the app
+      render(<TableDemo />, document.getElementById("root"));
+
+      console.log("Preact Table selection demo loaded. Try:");
+      console.log("- Click cells to select/deselect");
+      console.log("- Use Cmd/Ctrl+click for multi-select");
+      console.log("- Use Tab and arrow keys to navigate");
+      console.log("- Press Space or Enter to toggle selection");
+    </script>
+  </body>
+</html>