@jsenv/navi 0.6.2 → 0.7.1

package/src/components/layout/flex.jsx

@@ -0,0 +1,154 @@
+import { createContext } from "preact";
+import { useContext } from "preact/hooks";
+
+import { withPropsClassName } from "../props_composition/with_props_class_name.js";
+import { withPropsStyle } from "../props_composition/with_props_style.js";
+import { consumeSpacingProps } from "./spacing.jsx";
+
+import.meta.css = /* css */ `
+  .navi_flex_row {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 0;
+  }
+
+  .navi_flex_column {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0;
+  }
+
+  .navi_flex_item {
+    flex-shrink: 0;
+  }
+`;
+
+const FlexDirectionContext = createContext();
+
+export const FlexRow = ({ alignY, gap, style, children, ...rest }) => {
+  const innerStyle = withPropsStyle(
+    {
+      alignItems: alignY,
+      gap,
+      ...consumeSpacingProps(rest),
+    },
+    style,
+  );
+
+  return (
+    <div {...rest} className="navi_flex_row" style={innerStyle}>
+      <FlexDirectionContext.Provider value="row">
+        {children}
+      </FlexDirectionContext.Provider>
+    </div>
+  );
+};
+export const FlexColumn = ({ alignX, gap, style, children, ...rest }) => {
+  const innerStyle = withPropsStyle(
+    {
+      alignItems: alignX,
+      gap,
+      ...consumeSpacingProps(rest),
+    },
+    style,
+  );
+
+  return (
+    <div {...rest} className="navi_flex_column" style={innerStyle}>
+      <FlexDirectionContext.Provider value="column">
+        {children}
+      </FlexDirectionContext.Provider>
+    </div>
+  );
+};
+export const useConsumAlignProps = (props) => {
+  const flexDirection = useContext(FlexDirectionContext);
+
+  const alignX = props.alignX;
+  const alignY = props.alignY;
+  delete props.alignX;
+  delete props.alignY;
+
+  const style = {};
+
+  if (flexDirection === "row") {
+    // In row direction: alignX controls justify-content, alignY controls align-self
+    // Default alignY is "center" from CSS, so only set alignSelf when different
+    if (alignY !== undefined && alignY !== "center") {
+      style.alignSelf = alignY;
+    }
+    // For row, alignX uses auto margins for positioning
+    // NOTE: Auto margins only work effectively for positioning individual items.
+    // When multiple adjacent items have the same auto margin alignment (e.g., alignX="end"),
+    // only the first item will be positioned as expected because subsequent items
+    // will be positioned relative to the previous item's margins, not the container edge.
+    if (alignX !== undefined) {
+      if (alignX === "start") {
+        style.marginRight = "auto";
+      } else if (alignX === "end") {
+        style.marginLeft = "auto";
+      } else if (alignX === "center") {
+        style.marginLeft = "auto";
+        style.marginRight = "auto";
+      }
+    }
+  } else if (flexDirection === "column") {
+    // In column direction: alignX controls align-self, alignY uses auto margins
+    // Default alignX is "center" from CSS, so only set alignSelf when different
+    if (alignX !== undefined && alignX !== "center") {
+      style.alignSelf = alignX;
+    }
+    // For column, alignY uses auto margins for positioning
+    // NOTE: Same auto margin limitation applies - multiple adjacent items with
+    // the same alignY won't all position relative to container edges.
+    if (alignY !== undefined) {
+      if (alignY === "start") {
+        style.marginBottom = "auto";
+      } else if (alignY === "end") {
+        style.marginTop = "auto";
+      } else if (alignY === "center") {
+        style.marginTop = "auto";
+        style.marginBottom = "auto";
+      }
+    }
+  }
+
+  return style;
+};
+export const FlexItem = ({
+  alignX,
+  alignY,
+  grow,
+  shrink,
+  className,
+  style,
+  children,
+  ...rest
+}) => {
+  const flexDirection = useContext(FlexDirectionContext);
+  if (!flexDirection) {
+    console.warn(
+      "FlexItem must be used within a FlexRow or FlexColumn component.",
+    );
+  }
+
+  const innerClassName = withPropsClassName("navi_flex_item", className);
+  const alignStyle = useConsumAlignProps({ alignX, alignY });
+  const innerStyle = withPropsStyle(
+    {
+      flexGrow: grow ? 1 : undefined,
+      flexShrink: shrink ? 1 : undefined,
+      ...consumeSpacingProps(rest),
+      ...alignStyle,
+    },
+    style,
+  );
+
+  return (
+    <div {...rest} className={innerClassName} style={innerStyle}>
+      {children}
+    </div>
+  );
+};

package/src/components/layout/spacing.jsx

@@ -1,77 +1,88 @@
 import { withPropsStyle } from "../props_composition/with_props_style.js";
 
 export const consumeSpacingProps = (props) => {
-  const consume = (name) => {
-    if (Object.hasOwn(props, name)) {
-      const value = props[name];
-      delete props[name];
-      return value;
-    }
-    return undefined;
-  };
-  const margin = consume("margin");
-  const marginX = consume("marginX");
-  const marginY = consume("marginY");
-  const marginLeft = consume("marginLeft");
-  const marginRight = consume("marginRight");
-  const marginTop = consume("marginTop");
-  const marginBottom = consume("marginBottom");
-
   const style = {};
-  if (margin !== undefined) {
-    style.margin = margin;
-  }
-  if (marginLeft !== undefined) {
-    style.marginLeft = marginLeft;
-  } else if (marginX !== undefined) {
-    style.marginLeft = marginX;
-  }
-  if (marginRight !== undefined) {
-    style.marginRight = marginRight;
-  } else if (marginX !== undefined) {
-    style.marginRight = marginX;
-  }
-  if (marginTop !== undefined) {
-    style.marginTop = marginTop;
-  } else if (marginY !== undefined) {
-    style.marginTop = marginY;
-  }
-  if (marginBottom !== undefined) {
-    style.marginBottom = marginBottom;
-  } else if (marginY !== undefined) {
-    style.marginBottom = marginY;
-  }
 
-  const padding = consume("padding");
-  const paddingX = consume("paddingX");
-  const paddingY = consume("paddingY");
-  const paddingLeft = consume("paddingLeft");
-  const paddingRight = consume("paddingRight");
-  const paddingTop = consume("paddingTop");
-  const paddingBottom = consume("paddingBottom");
+  outer_spacing: {
+    const margin = props.margin;
+    const marginX = props.marginX;
+    const marginY = props.marginY;
+    const marginLeft = props.marginLeft;
+    const marginRight = props.marginRight;
+    const marginTop = props.marginTop;
+    const marginBottom = props.marginBottom;
+    delete props.margin;
+    delete props.marginX;
+    delete props.marginY;
+    delete props.marginLeft;
+    delete props.marginRight;
+    delete props.marginTop;
+    delete props.marginBottom;
 
-  if (padding !== undefined) {
-    style.padding = padding;
-  }
-  if (paddingLeft !== undefined) {
-    style.paddingLeft = paddingLeft;
-  } else if (paddingX !== undefined) {
-    style.paddingLeft = paddingX;
-  }
-  if (paddingRight !== undefined) {
-    style.paddingRight = paddingRight;
-  } else if (paddingX !== undefined) {
-    style.paddingRight = paddingX;
-  }
-  if (paddingTop !== undefined) {
-    style.paddingTop = paddingTop;
-  } else if (paddingY !== undefined) {
-    style.paddingTop = paddingY;
+    if (margin !== undefined) {
+      style.margin = margin;
+    }
+    if (marginLeft !== undefined) {
+      style.marginLeft = marginLeft;
+    } else if (marginX !== undefined) {
+      style.marginLeft = marginX;
+    }
+    if (marginRight !== undefined) {
+      style.marginRight = marginRight;
+    } else if (marginX !== undefined) {
+      style.marginRight = marginX;
+    }
+    if (marginTop !== undefined) {
+      style.marginTop = marginTop;
+    } else if (marginY !== undefined) {
+      style.marginTop = marginY;
+    }
+    if (marginBottom !== undefined) {
+      style.marginBottom = marginBottom;
+    } else if (marginY !== undefined) {
+      style.marginBottom = marginY;
+    }
   }
-  if (paddingBottom !== undefined) {
-    style.paddingBottom = paddingBottom;
-  } else if (paddingY !== undefined) {
-    style.paddingBottom = paddingY;
+
+  inner_spacing: {
+    const padding = props.padding;
+    const paddingX = props.paddingX;
+    const paddingY = props.paddingY;
+    const paddingLeft = props.paddingLeft;
+    const paddingRight = props.paddingRight;
+    const paddingTop = props.paddingTop;
+    const paddingBottom = props.paddingBottom;
+    delete props.padding;
+    delete props.paddingX;
+    delete props.paddingY;
+    delete props.paddingLeft;
+    delete props.paddingRight;
+    delete props.paddingTop;
+    delete props.paddingBottom;
+
+    if (padding !== undefined) {
+      style.padding = padding;
+    }
+    if (paddingLeft !== undefined) {
+      style.paddingLeft = paddingLeft;
+    } else if (paddingX !== undefined) {
+      style.paddingLeft = paddingX;
+    }
+    if (paddingRight !== undefined) {
+      style.paddingRight = paddingRight;
+    } else if (paddingX !== undefined) {
+      style.paddingRight = paddingX;
+    }
+    if (paddingTop !== undefined) {
+      style.paddingTop = paddingTop;
+    } else if (paddingY !== undefined) {
+      style.paddingTop = paddingY;
+    }
+    if (paddingBottom !== undefined) {
+      style.paddingBottom = paddingBottom;
+    } else if (paddingY !== undefined) {
+      style.paddingBottom = paddingY;
+    }
   }
 
   return style;

package/src/components/props_composition/with_props_style.js

@@ -1,86 +1,26 @@
+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: '10px' }, style)}>
+ *   <button style={withPropsStyle({ padding: 10 }, style)}>
  *     {children}
  *   </button>
  * );
  *
  * // Usage:
- * <MyButton style={{ color: 'red', fontSize: '14px' }} />
+ * <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 style object
+ * @returns {object} The merged and normalized style object
  */
 export const withPropsStyle = (baseStyle, styleFromProps) => {
-  if (!styleFromProps) {
-    return baseStyle;
-  }
-  if (!baseStyle) {
-    return styleFromProps;
-  }
-
-  // Parse base style to object if it's a string
-  const parsedBaseStyle =
-    typeof baseStyle === "string"
-      ? parseStyleString(baseStyle)
-      : baseStyle || {};
-  // Parse props style to object if it's a string
-  const parsedPropsStyle =
-    typeof styleFromProps === "string"
-      ? parseStyleString(styleFromProps)
-      : styleFromProps;
-  // Merge styles with props taking priority
-  return { ...parsedBaseStyle, ...parsedPropsStyle };
-};
-
-/**
- * Parses a CSS style string into a style object.
- * Handles CSS properties with proper camelCase conversion.
- *
- * @param {string} styleString - CSS style string like "color: red; font-size: 14px;"
- * @returns {object} Style object with camelCase properties
- */
-const parseStyleString = (styleString) => {
-  const style = {};
-
-  if (!styleString || typeof styleString !== "string") {
-    return style;
-  }
-
-  // Split by semicolon and process each declaration
-  const declarations = styleString.split(";");
-
-  for (let declaration of declarations) {
-    declaration = declaration.trim();
-    if (!declaration) continue;
-
-    const colonIndex = declaration.indexOf(":");
-    if (colonIndex === -1) continue;
-
-    const property = declaration.slice(0, colonIndex).trim();
-    const value = declaration.slice(colonIndex + 1).trim();
-
-    if (property && value) {
-      // CSS custom properties (starting with --) should NOT be converted to camelCase
-      if (property.startsWith("--")) {
-        style[property] = value;
-      } else {
-        // Convert kebab-case to camelCase (e.g., "font-size" -> "fontSize")
-        const camelCaseProperty = property.replace(
-          /-([a-z])/g,
-          (match, letter) => letter.toUpperCase(),
-        );
-        style[camelCaseProperty] = value;
-      }
-    }
-  }
-
-  return style;
+  return mergeStyles(baseStyle, styleFromProps, "css");
 };