@jsenv/navi 0.10.2 → 0.11.0

package/src/components/loader/rectangle_loading.jsx

@@ -1,244 +0,0 @@
-/**
- * RectangleLoading Component
- *
- * A responsive loading indicator that dynamically adjusts to fit its container.
- * Displays an animated outline with a traveling dot that follows the container's shape.
- *
- * Features:
- * - Adapts to any container dimensions using ResizeObserver
- * - Scales stroke width, margins and corner radius proportionally
- * - Animates using native SVG animations for smooth performance
- * - High-quality SVG rendering with proper path calculations
- *
- * @param {Object} props - Component props
- * @param {string} [props.color="#383a36"] - Color of the loading indicator
- * @param {number} [props.radius=0] - Corner radius of the rectangle (px)
- */
-
-import { useLayoutEffect, useRef, useState } from "preact/hooks";
-import { useNetworkSpeed } from "./network_speed.js";
-
-import.meta.css = /* css */ `
-  .navi_rectangle_loading {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    opacity: 0;
-    display: block;
-  }
-
-  .navi_rectangle_loading[data-visible] {
-    opacity: 1;
-  }
-`;
-
-export const RectangleLoading = ({
-  shouldShowSpinner,
-  color = "currentColor",
-  radius = 0,
-  size = 2,
-}) => {
-  const containerRef = useRef(null);
-  const [containerWidth, setContainerWidth] = useState(0);
-  const [containerHeight, setContainerHeight] = useState(0);
-
-  useLayoutEffect(() => {
-    const container = containerRef.current;
-    if (!container) {
-      return null;
-    }
-
-    const { width, height } = container.getBoundingClientRect();
-    setContainerWidth(width);
-    setContainerHeight(height);
-
-    let animationFrameId = null;
-    // Create a resize observer to detect changes in the container's dimensions
-    const resizeObserver = new ResizeObserver((entries) => {
-      // Use requestAnimationFrame to debounce updates
-      if (animationFrameId) {
-        cancelAnimationFrame(animationFrameId);
-      }
-
-      animationFrameId = requestAnimationFrame(() => {
-        const [containerEntry] = entries;
-        const { width, height } = containerEntry.contentRect;
-        setContainerWidth(width);
-        setContainerHeight(height);
-      });
-    });
-    resizeObserver.observe(container);
-    return () => {
-      if (animationFrameId) {
-        cancelAnimationFrame(animationFrameId);
-      }
-      resizeObserver.disconnect();
-    };
-  }, []);
-
-  return (
-    <span
-      ref={containerRef}
-      className="navi_rectangle_loading"
-      data-visible={shouldShowSpinner ? "" : undefined}
-    >
-      {containerWidth > 0 && containerHeight > 0 && (
-        <RectangleLoadingSvg
-          radius={radius}
-          color={color}
-          width={containerWidth}
-          height={containerHeight}
-          strokeWidth={size}
-        />
-      )}
-    </span>
-  );
-};
-
-const RectangleLoadingSvg = ({
-  width,
-  height,
-  color,
-  radius,
-  trailColor = "transparent",
-  strokeWidth,
-}) => {
-  const margin = Math.max(2, Math.min(width, height) * 0.03);
-
-  // Calculate the drawable area
-  const drawableWidth = width - margin * 2;
-  const drawableHeight = height - margin * 2;
-
-  // ✅ Check if this should be a circle
-  const maxPossibleRadius = Math.min(drawableWidth, drawableHeight) / 2;
-  const actualRadius = Math.min(
-    radius || Math.min(drawableWidth, drawableHeight) * 0.05,
-    maxPossibleRadius, // ✅ Limité au radius maximum possible
-  );
-
-  // ✅ Determine if we're dealing with a circle
-  const isCircle = actualRadius >= maxPossibleRadius * 0.95; // 95% = virtually a circle
-
-  let pathLength;
-  let rectPath;
-
-  if (isCircle) {
-    // ✅ Circle: perimeter = 2πr
-    pathLength = 2 * Math.PI * actualRadius;
-
-    // ✅ Circle path centered in the drawable area
-    const centerX = margin + drawableWidth / 2;
-    const centerY = margin + drawableHeight / 2;
-
-    rectPath = `
-      M ${centerX + actualRadius},${centerY}
-      A ${actualRadius},${actualRadius} 0 1 1 ${centerX - actualRadius},${centerY}
-      A ${actualRadius},${actualRadius} 0 1 1 ${centerX + actualRadius},${centerY}
-    `;
-  } else {
-    // ✅ Rectangle: calculate perimeter properly
-    const straightEdges =
-      2 * (drawableWidth - 2 * actualRadius) +
-      2 * (drawableHeight - 2 * actualRadius);
-    const cornerArcs = actualRadius > 0 ? 2 * Math.PI * actualRadius : 0;
-    pathLength = straightEdges + cornerArcs;
-
-    rectPath = `
-      M ${margin + actualRadius},${margin}
-      L ${margin + drawableWidth - actualRadius},${margin}
-      A ${actualRadius},${actualRadius} 0 0 1 ${margin + drawableWidth},${margin + actualRadius}
-      L ${margin + drawableWidth},${margin + drawableHeight - actualRadius}
-      A ${actualRadius},${actualRadius} 0 0 1 ${margin + drawableWidth - actualRadius},${margin + drawableHeight}
-      L ${margin + actualRadius},${margin + drawableHeight}
-      A ${actualRadius},${actualRadius} 0 0 1 ${margin},${margin + drawableHeight - actualRadius}
-      L ${margin},${margin + actualRadius}
-      A ${actualRadius},${actualRadius} 0 0 1 ${margin + actualRadius},${margin}
-    `;
-  }
-
-  // Fixed segment size in pixels
-  const maxSegmentSize = 40;
-  const segmentLength = Math.min(maxSegmentSize, pathLength * 0.25);
-  const gapLength = pathLength - segmentLength;
-
-  // Vitesse constante en pixels par seconde
-  const networkSpeed = useNetworkSpeed();
-  const pixelsPerSecond =
-    {
-      "slow-2g": 40,
-      "2g": 60,
-      "3g": 80,
-      "4g": 120,
-    }[networkSpeed] || 80;
-  const animationDuration = Math.max(1.5, pathLength / pixelsPerSecond);
-
-  // ✅ Calculate correct offset based on actual segment size
-  const segmentRatio = segmentLength / pathLength;
-  const circleOffset = -animationDuration * segmentRatio;
-
-  return (
-    <svg
-      width="100%"
-      height="100%"
-      viewBox={`0 0 ${width} ${height}`}
-      preserveAspectRatio="none"
-      style="overflow: visible"
-      xmlns="http://www.w3.org/2000/svg"
-      shape-rendering="geometricPrecision"
-    >
-      {/* Base outline - circle ou rectangle */}
-      {isCircle ? (
-        <circle
-          cx={margin + drawableWidth / 2}
-          cy={margin + drawableHeight / 2}
-          r={actualRadius}
-          fill="none"
-          stroke={trailColor}
-          strokeWidth={strokeWidth}
-        />
-      ) : (
-        <rect
-          x={margin}
-          y={margin}
-          width={drawableWidth}
-          height={drawableHeight}
-          fill="none"
-          stroke={trailColor}
-          strokeWidth={strokeWidth}
-          rx={actualRadius}
-        />
-      )}
-
-      {/* Progress segment that grows and moves */}
-      <path
-        d={rectPath}
-        fill="none"
-        stroke={color}
-        strokeWidth={strokeWidth}
-        strokeLinecap="round"
-        strokeDasharray={`${segmentLength} ${gapLength}`}
-        pathLength={pathLength}
-      >
-        <animate
-          attributeName="stroke-dashoffset"
-          from={pathLength}
-          to="0"
-          dur={`${animationDuration}s`}
-          repeatCount="indefinite"
-          begin="0s"
-        />
-      </path>
-
-      {/* Leading dot that follows the path */}
-      <circle r={strokeWidth} fill={color}>
-        <animateMotion
-          path={rectPath}
-          dur={`${animationDuration}s`}
-          repeatCount="indefinite"
-          rotate="auto"
-          begin={`${circleOffset}s`}
-        />
-      </circle>
-    </svg>
-  );
-};

package/src/components/props_composition/demos/demo_with_props_style.html

@@ -1,81 +0,0 @@
-<!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8" />
-    <title>withPropsStyle Demo - Minimalist</title>
-    <style>
-      button {
-        padding: 12px 20px;
-        font-family: system-ui, sans-serif;
-        border: 1px solid #ccc;
-        border-radius: 4px;
-        cursor: pointer;
-      }
-    </style>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" jsenv-type="module/jsx">
-      /* eslint-disable no-unused-vars */
-      import { render } from "preact";
-      import { withPropsStyle } from "../with_props_style.js";
-
-      const Button = ({ style, children, ...rest }) => (
-        <button
-          style={withPropsStyle(
-            {
-              backgroundColor: "var(--background-color, #f8f9fa)",
-            },
-            style,
-          )}
-          {...rest}
-        >
-          {children}
-        </button>
-      );
-
-      const Demo = () => {
-        return (
-          <div style={{ padding: "20px", fontFamily: "system-ui, sans-serif" }}>
-            <h1>withPropsStyle Demo</h1>
-
-            <section style={{ marginBottom: "30px" }}>
-              <h2>1. Default Button</h2>
-              <div>
-                <Button>Default</Button>
-              </div>
-            </section>
-
-            <section style={{ marginBottom: "30px" }}>
-              <h2>2. Override via style + background-color</h2>
-              <div style={{ display: "flex", gap: "10px", flexWrap: "wrap" }}>
-                <Button style={{ backgroundColor: "#007bff" }}>
-                  Object notation
-                </Button>
-
-                <Button style="background-color: #28a745;">
-                  String notation
-                </Button>
-              </div>
-            </section>
-
-            <section>
-              <h2>3. Override via style + CSS var</h2>
-              <div style={{ display: "flex", gap: "10px", flexWrap: "wrap" }}>
-                <Button style={{ "--background-color": "#dc3545" }}>
-                  Object notation
-                </Button>
-
-                <Button style="--background-color: #ffc107;">
-                  String notation
-                </Button>
-              </div>
-            </section>
-          </div>
-        );
-      };
-
-      render(<Demo />, document.getElementById("app"));
-    </script>
-  </body>
-</html>

package/src/components/props_composition/with_props_class_name.js

@@ -1,37 +0,0 @@
-/**
- * Merges a component's base className with className received from props.
- *
- * ```jsx
- * const MyButton = ({ className, children }) => (
- *   <button className={withPropsClassName("btn", className)}>
- *     {children}
- *   </button>
- * );
- *
- * // Usage:
- * <MyButton className="primary large" /> // Results in "btn primary large"
- * <MyButton /> // Results in "btn"
- * ```
- *
- * @param {string} baseClassName - The component's base CSS class name
- * @param {string} [classNameFromProps] - Additional className from props (optional)
- * @returns {string} The merged className string
- */
-export const withPropsClassName = (baseClassName, classNameFromProps) => {
-  if (!classNameFromProps) {
-    return baseClassName;
-  }
-
-  // Trim and normalize whitespace from the props className
-  const trimmedPropsClassName = classNameFromProps.trim();
-  if (!trimmedPropsClassName) {
-    return baseClassName;
-  }
-
-  // Normalize multiple spaces to single spaces and combine
-  const normalizedPropsClassName = trimmedPropsClassName.replace(/\s+/g, " ");
-  if (!baseClassName) {
-    return normalizedPropsClassName;
-  }
-  return `${baseClassName} ${normalizedPropsClassName}`;
-};

package/src/components/props_composition/with_props_style.js

@@ -1,26 +0,0 @@
-import { mergeStyles } from "@jsenv/dom";
-
-/**
- * Merges a component's base style with style received from props.
- * Automatically normalizes style values (e.g., adds "px" units where needed).
- *
- * ```jsx
- * const MyButton = ({ style, children }) => (
- *   <button style={withPropsStyle({ padding: 10 }, style)}>
- *     {children}
- *   </button>
- * );
- *
- * // Usage:
- * <MyButton style={{ color: 'red', fontSize: 14 }} />
- * <MyButton style="color: blue; margin: 5px;" />
- * <MyButton /> // Just base styles
- * ```
- *
- * @param {string|object} baseStyle - The component's base style (string or object)
- * @param {string|object} [styleFromProps] - Additional style from props (optional)
- * @returns {object} The merged and normalized style object
- */
-export const withPropsStyle = (baseStyle, styleFromProps) => {
-  return mergeStyles(baseStyle, styleFromProps, "css");
-};

package/src/components/route.jsx

@@ -1,19 +0,0 @@
-import { useRouteStatus } from "../route/route.js";
-import { ActionRenderer } from "./action_renderer.jsx";
-import { useContentKey } from "./ui_transition.jsx";
-
-export const Route = ({ route, children }) => {
-  if (!route.action) {
-    throw new Error(
-      "Route component requires a route with an action to render.",
-    );
-  }
-  const { active, url } = useRouteStatus(route);
-  useContentKey(url, active);
-
-  return (
-    <ActionRenderer disabled={!active} action={route.action}>
-      {children}
-    </ActionRenderer>
-  );
-};