@jsenv/navi 0.1.0 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsenv/navi",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Library of components including navigation to create frontend applications",
   "repository": {
     "type": "git",
@@ -13,7 +13,8 @@
     "email": "dmaillard06@gmail.com"
   },
   "sideEffects": [
-    "./dist/jsenv_navi.js"
+    "./dist/jsenv_navi.js",
+    "./src/components/field/field_css.js"
   ],
   "type": "module",
   "exports": {
@@ -33,7 +34,7 @@
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
-    "@jsenv/dom": "0.1.0",
+    "@jsenv/dom": "0.3.0",
     "@jsenv/humanize": "1.6.0"
   },
   "devDependencies": {

package/src/components/action_execution/form_context.js

@@ -1,8 +1,5 @@
 import { createContext } from "preact";
-import { useContext } from "preact/hooks";
 
 export const FormContext = createContext();
 
-export const useFormContext = () => {
-  return useContext(FormContext);
-};
+export const FormActionContext = createContext();

package/src/components/action_execution/use_action.js

@@ -29,7 +29,7 @@ export const useActionBoundToOneArrayParam = (
   fallbackValue,
   defaultValue,
 ) => {
-  const [boundAction, value, setValue, initialValue] = useActionBoundToOneParam(
+  const [boundAction, value, setValue] = useActionBoundToOneParam(
     action,
     name,
     externalValue,
@@ -45,7 +45,7 @@ export const useActionBoundToOneArrayParam = (
     setValue(removeFromArray(valueArray, valueToRemove));
   };
 
-  const result = [boundAction, value, setValue, initialValue];
+  const result = [boundAction, value, setValue];
   result.add = add;
   result.remove = remove;
   return result;

package/src/components/demos/0_button_demo.html

@@ -7,72 +7,72 @@
     <title>Button Demo</title>
     <style>
       body {
-        font-family:
-          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
         max-width: 1400px;
+        min-height: 100vh;
         margin: 0 auto;
         padding: 20px;
+        font-family:
+          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
         background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-        min-height: 100vh;
       }
 
       h1 {
-        text-align: center;
-        color: white;
         margin-bottom: 30px;
+        color: white;
         font-size: 2.5rem;
+        text-align: center;
         text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
       }
 
       .demo-grid {
         display: grid;
+        margin-bottom: 30px;
         grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
         gap: 20px;
-        margin-bottom: 30px;
       }
 
       .demo-card {
+        padding: 25px;
         background: white;
+        border: 1px solid rgba(255, 255, 255, 0.2);
         border-radius: 12px;
-        padding: 25px;
         box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
-        border: 1px solid rgba(255, 255, 255, 0.2);
         transition:
           transform 0.2s ease,
           box-shadow 0.2s ease;
       }
 
       .demo-card:hover {
-        transform: translateY(-2px);
         box-shadow: 0 12px 35px rgba(0, 0, 0, 0.2);
+        transform: translateY(-2px);
       }
 
       .demo-title {
-        color: #2c3e50;
+        display: flex;
         margin: 0 0 20px 0;
-        font-size: 1.3rem;
-        font-weight: 600;
-        border-bottom: 3px solid #667eea;
         padding-bottom: 10px;
-        display: flex;
         align-items: center;
         gap: 10px;
+        color: #2c3e50;
+        font-weight: 600;
+        font-size: 1.3rem;
+        border-bottom: 3px solid #667eea;
       }
 
       .demo-title::before {
-        content: "🔘";
         font-size: 1.2rem;
+        content: "🔘";
       }
 
       .button-row {
         display: flex;
-        align-items: center;
-        gap: 15px;
         margin: 15px 0;
         padding: 12px;
+        align-items: center;
+        gap: 15px;
         background: #f8f9fa;
-        border-radius: 8px;
         border: 1px solid #e9ecef;
+        border-radius: 8px;
         transition: background 0.2s ease;
       }
 
@@ -82,49 +82,49 @@
 
       .button-container {
         display: flex;
+        min-width: 0;
+        flex: 1;
         align-items: center;
         gap: 10px;
-        flex: 1;
-        min-width: 0;
       }
 
       .toggle-button {
         padding: 8px 16px;
-        background: linear-gradient(45deg, #667eea, #764ba2);
+        flex-shrink: 0;
         color: white;
+        font-weight: 500;
+        font-size: 0.9rem;
+        white-space: nowrap;
+        background: linear-gradient(45deg, #667eea, #764ba2);
         border: none;
         border-radius: 6px;
-        cursor: pointer;
-        font-size: 0.9rem;
-        font-weight: 500;
-        transition: all 0.2s ease;
         box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-        flex-shrink: 0;
-        white-space: nowrap;
+        transition: all 0.2s ease;
+        cursor: pointer;
       }
 
       .toggle-button:hover {
         background: linear-gradient(45deg, #5a6fd8, #6b3fa0);
-        transform: translateY(-1px);
         box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+        transform: translateY(-1px);
       }
 
       .comparison {
         display: flex;
-        flex-direction: column;
-        gap: 8px;
         margin-top: 15px;
         padding: 12px;
+        flex-direction: column;
+        gap: 8px;
         background: #fff3cd;
-        border-radius: 6px;
         border-left: 4px solid #ffc107;
+        border-radius: 6px;
       }
 
       .comparison-label {
-        font-size: 0.85rem;
+        margin-bottom: 5px;
         color: #856404;
         font-weight: 500;
-        margin-bottom: 5px;
+        font-size: 0.85rem;
       }
 
       .native-examples {
@@ -134,15 +134,15 @@
       }
 
       .native-examples button {
-        align-self: flex-start;
         padding: 8px 16px;
+        align-self: flex-start;
         font-size: 0.9rem;
       }
 
       .prop-control-demo {
         grid-column: 1 / -1;
-        background: linear-gradient(45deg, #ff6b6b 0%, #feca57 100%);
         color: white;
+        background: linear-gradient(45deg, #ff6b6b 0%, #feca57 100%);
       }
 
       .prop-control-demo .demo-title {
@@ -155,17 +155,17 @@
       }
 
       .prop-controls {
-        margin-bottom: 25px;
         display: grid;
+        margin-bottom: 25px;
         grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
         gap: 15px;
       }
 
       .prop-select-group {
-        background: rgba(255, 255, 255, 0.1);
         padding: 15px;
-        border-radius: 8px;
+        background: rgba(255, 255, 255, 0.1);
         border: 1px solid rgba(255, 255, 255, 0.2);
+        border-radius: 8px;
       }
 
       .prop-select-label {
@@ -178,65 +178,65 @@
       .prop-select {
         width: 100%;
         padding: 8px 12px;
-        border: none;
-        border-radius: 6px;
-        background: white;
         color: #333;
         font-size: 0.9rem;
-        cursor: pointer;
+        background: white;
+        border: none;
+        border-radius: 6px;
         box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        cursor: pointer;
       }
 
       .state-controls {
-        background: rgba(255, 255, 255, 0.1);
+        margin-bottom: 20px;
         padding: 15px;
-        border-radius: 8px;
+        background: rgba(255, 255, 255, 0.1);
         border: 1px solid rgba(255, 255, 255, 0.2);
-        margin-bottom: 20px;
+        border-radius: 8px;
       }
 
       .state-controls h4 {
         margin: 0 0 15px 0;
-        font-size: 1rem;
         color: white;
+        font-size: 1rem;
       }
 
       .control-row {
         display: flex;
-        gap: 15px;
-        flex-wrap: wrap;
         margin-bottom: 10px;
+        flex-wrap: wrap;
+        gap: 15px;
       }
 
       .control-group {
         display: flex;
+        min-width: 100px;
+        padding: 12px;
         flex-direction: column;
         align-items: center;
         gap: 8px;
         background: rgba(255, 255, 255, 0.05);
-        padding: 12px;
-        border-radius: 8px;
         border: 1px solid rgba(255, 255, 255, 0.1);
-        min-width: 100px;
+        border-radius: 8px;
       }
 
       .control-toggle {
+        min-width: 80px;
         padding: 8px 16px;
-        border: 2px solid rgba(255, 255, 255, 0.3);
-        background: rgba(255, 255, 255, 0.1);
         color: white;
-        border-radius: 6px;
-        cursor: pointer;
-        font-size: 0.85rem;
         font-weight: 500;
-        transition: all 0.2s ease;
-        min-width: 80px;
+        font-size: 0.85rem;
         text-align: center;
+        background: rgba(255, 255, 255, 0.1);
+        border: 2px solid rgba(255, 255, 255, 0.3);
+        border-radius: 6px;
+        transition: all 0.2s ease;
+        cursor: pointer;
       }
 
       .control-toggle.active {
-        background: rgba(255, 255, 255, 0.9);
         color: #333;
+        background: rgba(255, 255, 255, 0.9);
         border-color: white;
         box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
       }
@@ -251,36 +251,36 @@
       }
 
       .control-label {
-        font-size: 0.9rem;
-        color: white;
         margin: 0;
+        color: white;
+        font-size: 0.9rem;
       }
 
       .button-test-grid {
         display: grid;
+        padding: 20px;
         grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
         gap: 15px;
         background: rgba(255, 255, 255, 0.1);
-        padding: 20px;
-        border-radius: 8px;
         border: 1px solid rgba(255, 255, 255, 0.2);
+        border-radius: 8px;
       }
 
       .button-test-item {
         display: flex;
+        padding: 15px;
         flex-direction: column;
         align-items: center;
         gap: 10px;
-        padding: 15px;
+        text-align: center;
         background: rgba(255, 255, 255, 0.05);
         border-radius: 6px;
-        text-align: center;
       }
 
       .button-label {
-        font-size: 0.9rem;
-        color: white;
         margin-bottom: 8px;
+        color: white;
+        font-size: 0.9rem;
       }
 
       @media (max-width: 768px) {
@@ -320,6 +320,7 @@
             <ReadOnlyDemo />
             <DisabledDemo />
             <SizeVariationsDemo />
+            <DiscreteDemo />
             <PropControlDemo />
           </div>
         );
@@ -448,7 +449,11 @@
               <div className="button-container">
                 <Button
                   loading={loading}
-                  style={{ borderWidth: 8, padding: "12px 24px" }}
+                  style={{
+                    "--border-width": "8px",
+                    "--padding-x": "12px",
+                    "--padding-y": "24px",
+                  }}
                 >
                   Thick Border Button
                 </Button>
@@ -474,6 +479,82 @@
         );
       };
 
+      // eslint-disable-next-line no-unused-vars
+      const DiscreteDemo = () => {
+        const [loading, setLoading] = useState(false);
+
+        return (
+          <div className="demo-card">
+            <h3 className="demo-title">Discrete Buttons</h3>
+
+            <div className="button-row">
+              <div className="button-container">
+                <Button discrete loading={loading}>
+                  Discrete Button
+                </Button>
+                <span style={{ fontSize: "0.9rem", color: "#666" }}>
+                  Subtle, minimal styling
+                </span>
+              </div>
+              <button
+                className="toggle-button"
+                onClick={() => setLoading(!loading)}
+              >
+                {loading ? "Stop Loading" : "Start Loading"}
+              </button>
+            </div>
+
+            <div className="button-row">
+              <div className="button-container">
+                <Button discrete disabled>
+                  Disabled Discrete
+                </Button>
+                <span style={{ fontSize: "0.9rem", color: "#666" }}>
+                  Disabled state
+                </span>
+              </div>
+            </div>
+
+            <div className="button-row">
+              <div className="button-container">
+                <Button discrete readOnly>
+                  Read-Only Discrete
+                </Button>
+                <span style={{ fontSize: "0.9rem", color: "#666" }}>
+                  Read-only state
+                </span>
+              </div>
+            </div>
+
+            <div className="comparison">
+              <span className="comparison-label">Comparison:</span>
+              <div
+                style={{
+                  display: "flex",
+                  gap: "15px",
+                  alignItems: "center",
+                  marginTop: "10px",
+                }}
+              >
+                <Button appearance="default" loading={loading}>
+                  Regular Button
+                </Button>
+                <Button appearance="default" discrete loading={loading}>
+                  Discrete Button
+                </Button>
+              </div>
+              <div className="native-examples">
+                <small style={{ color: "#666" }}>
+                  Discrete buttons have minimal styling and blend better with
+                  content. They're perfect for secondary actions or when you
+                  want less visual emphasis.
+                </small>
+              </div>
+            </div>
+          </div>
+        );
+      };
+
       // eslint-disable-next-line no-unused-vars
       const PropControlDemo = () => {
         const [loading, setLoading] = useState(false);

package/src/components/demos/1_checkbox_demo.html

@@ -281,6 +281,55 @@
         font-size: 0.95rem;
       }
 
+      /* Custom styles override section */
+      .my_styles .navi_checkbox {
+        --accent-color: green;
+        --width: 20px;
+        --height: 20px;
+      }
+      .my_styles .navi_checkbox[data-hover] {
+        --accent-color: yellow;
+      }
+
+      .custom-styles-demo {
+        margin-top: 30px;
+      }
+
+      .custom-styles-test {
+        background: rgba(255, 255, 255, 0.1);
+        padding: 20px;
+        border-radius: 8px;
+        border: 1px solid rgba(255, 255, 255, 0.2);
+        margin: 15px 0;
+      }
+
+      .custom-styles-test h4 {
+        margin-top: 0;
+        color: #2c3e50;
+        font-size: 1.1rem;
+      }
+
+      .custom-styles-comparison {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 20px;
+        margin-top: 15px;
+      }
+
+      .comparison-item {
+        background: rgba(255, 255, 255, 0.05);
+        padding: 15px;
+        border-radius: 6px;
+        border: 1px solid rgba(255, 255, 255, 0.1);
+      }
+
+      .comparison-item h5 {
+        margin-top: 0;
+        margin-bottom: 10px;
+        color: #34495e;
+        font-size: 0.9rem;
+      }
+
       @media (max-width: 768px) {
         .demo-grid {
           grid-template-columns: 1fr;
@@ -320,6 +369,7 @@
             <ReadOnlyDemo />
             <DisabledDemo />
             <PropControlDemo />
+            <CustomStylesDemo />
           </div>
         );
       };
@@ -493,7 +543,7 @@
         const [isLoading, setIsLoading] = useState(false);
 
         const colorOptions = [
-          { name: "Default (blue)", value: undefined },
+          { name: "Default (blue)", value: "default" },
           { name: "Orange", value: "#ff8c00" },
           { name: "Green", value: "#28a745" },
           { name: "Purple", value: "#6f42c1" },
@@ -511,7 +561,11 @@
                 <label className="color-select-label">Accent Color:</label>
                 <select
                   value={accentColor}
-                  onChange={(e) => setAccentColor(e.target.value)}
+                  onChange={(e) => {
+                    setAccentColor(
+                      e.target.value === "default" ? undefined : e.target.value,
+                    );
+                  }}
                   className="color-select"
                 >
                   {colorOptions.map(({ name, value }) => (
@@ -628,6 +682,72 @@
         );
       };
 
+      // eslint-disable-next-line no-unused-vars
+      const CustomStylesDemo = () => {
+        return (
+          <div className="custom-styles-demo">
+            <h2 style={{ color: "#2c3e50", marginBottom: "20px" }}>
+              Ability to Override with Custom Styles
+            </h2>
+
+            <div className="custom-styles-test">
+              <h4>Accent Color Override Test</h4>
+              <p>
+                Testing if CSS <code>accent-color</code> property can override
+                the component's styling:
+              </p>
+
+              <div className="custom-styles-comparison">
+                <div className="comparison-item">
+                  <h5>Default Checkbox</h5>
+                  <Label className="checkbox-label">
+                    <Input
+                      type="checkbox"
+                      name="default-checkbox"
+                      defaultChecked={true}
+                    />
+                    Default styling
+                  </Label>
+                </div>
+
+                <div className="comparison-item my_styles">
+                  <h5>Custom Styled Checkbox (.my_styles)</h5>
+                  <Label className="checkbox-label">
+                    <Input
+                      type="checkbox"
+                      name="custom-styled-checkbox"
+                      defaultChecked={true}
+                    />
+                    Should be green accent
+                  </Label>
+                </div>
+              </div>
+
+              <div
+                style={{
+                  marginTop: "15px",
+                  padding: "10px",
+                  background: "rgba(255,255,255,0.1)",
+                  borderRadius: "4px",
+                }}
+              >
+                <p
+                  style={{
+                    marginTop: "10px",
+                    fontSize: "0.9em",
+                    color: "#666",
+                  }}
+                >
+                  If the custom styling works, the checkbox on the right should
+                  have a green accent color instead of the component's default
+                  accent color.
+                </p>
+              </div>
+            </div>
+          </div>
+        );
+      };
+
       render(<App />, document.querySelector("#root"));
     </script>
   </body>