@adamjanicki/ui 1.5.9 → 1.6.0

package/utils/transformLayout.js

@@ -0,0 +1,76 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { classNames } from "../functions";
+// Prefix maps for padding and margin keys
+var spacingPrefixMap = {
+    padding: "pa",
+    paddingTop: "pt",
+    paddingBottom: "pb",
+    paddingLeft: "pl",
+    paddingRight: "pr",
+    margin: "ma",
+    marginTop: "mt",
+    marginBottom: "mb",
+    marginLeft: "ml",
+    marginRight: "mr",
+};
+var dimensionPrefixMap = {
+    width: "w",
+    maxWidth: "mw",
+    height: "h",
+    maxHeight: "mh",
+};
+export default function transformLayout(layout) {
+    if (!layout)
+        return null;
+    var axis = layout.axis, gap = layout.gap, align = layout.align, justify = layout.justify, wrap = layout.wrap, padding = layout.padding, paddingTop = layout.paddingTop, paddingBottom = layout.paddingBottom, paddingLeft = layout.paddingLeft, paddingRight = layout.paddingRight, paddingX = layout.paddingX, paddingY = layout.paddingY, margin = layout.margin, marginTop = layout.marginTop, marginBottom = layout.marginBottom, marginLeft = layout.marginLeft, marginRight = layout.marginRight, marginX = layout.marginX, marginY = layout.marginY, rest = __rest(layout, ["axis", "gap", "align", "justify", "wrap", "padding", "paddingTop", "paddingBottom", "paddingLeft", "paddingRight", "paddingX", "paddingY", "margin", "marginTop", "marginBottom", "marginLeft", "marginRight", "marginX", "marginY"]);
+    var className = axis ? "aui-flex-".concat(axis) : null;
+    if (wrap)
+        className = classNames(className, "aui-flex-wrap");
+    if (align)
+        className = classNames(className, "aui-align-".concat(align));
+    if (justify)
+        className = classNames(className, "aui-justify-".concat(justify));
+    // Gap
+    if (gap) {
+        className = classNames(className, "aui-gap-".concat(gap));
+    }
+    // Padding & margin
+    var spacingProps = [
+        ["padding", padding],
+        ["paddingTop", paddingTop !== null && paddingTop !== void 0 ? paddingTop : paddingY],
+        ["paddingBottom", paddingBottom !== null && paddingBottom !== void 0 ? paddingBottom : paddingY],
+        ["paddingLeft", paddingLeft !== null && paddingLeft !== void 0 ? paddingLeft : paddingX],
+        ["paddingRight", paddingRight !== null && paddingRight !== void 0 ? paddingRight : paddingX],
+        ["margin", margin],
+        ["marginTop", marginTop !== null && marginTop !== void 0 ? marginTop : marginY],
+        ["marginBottom", marginBottom !== null && marginBottom !== void 0 ? marginBottom : marginY],
+        ["marginLeft", marginLeft !== null && marginLeft !== void 0 ? marginLeft : marginX],
+        ["marginRight", marginRight !== null && marginRight !== void 0 ? marginRight : marginX],
+    ];
+    spacingProps.forEach(function (_a) {
+        var prop = _a[0], value = _a[1];
+        if (value) {
+            var prefix = spacingPrefixMap[prop];
+            className = classNames(className, "aui-".concat(prefix, "-").concat(value));
+        }
+    });
+    var dimensionProps = ["width", "height", "maxWidth", "maxHeight"];
+    dimensionProps.forEach(function (prop) {
+        var value = rest[prop];
+        if (value) {
+            var prefix = dimensionPrefixMap[prop];
+            className = classNames(className, "aui-".concat(prefix, "-").concat(value));
+        }
+    });
+    return className;
+}

package/utils/types.d.ts

@@ -16,47 +16,64 @@ export type ContentType = "success" | "warning" | "error" | "info" | "static";
  */
 export type Style = React.CSSProperties;
 /**
- * Size variants used for CSS.
+ * Used for width and height
  */
-type SizeToken = "xxs" | "xs" | "s" | "m" | "l" | "xl" | "xxl";
+export type SizeDimension = "full" | "fit" | "min" | "max";
 /**
- * Size prop used to transform into a CSS class or style value if a number.
+ * Size variants used for CSS.
  */
-type Size = SizeToken | number;
+type SizeToken = "none" | "xxs" | "xs" | "s" | "m" | "l" | "xl" | "xxl";
 /**
- * Layout props for a box component.
+ * Used for margin
  */
+type AutoSize = SizeToken | "auto";
+/** Layout props for a component */
 export type Layout = {
-    /**
-     * Direction the box spans; along the x-axis or y-axis
-     * (Equivalent to flex-direction)
-     */
-    axis: "x" | "y";
-    /**
-     * Spacing between children of the box
-     */
-    gap?: Size;
-    /**
-     * Alignment orthogonal to the selected axis
-     * (Equivalent to align-items)
-     */
+    /** Direction the layout spans; along the x-axis or y-axis (Equivalent to flex-direction) */
+    axis?: "x" | "y" | "-x" | "-y";
+    /** Spacing between children of the layout */
+    gap?: SizeToken;
+    /** Alignment orthogonal to the selected axis (Equivalent to align-items) */
     align?: "start" | "center" | "end";
-    /**
-     * How to layout the children
-     * (Equivalent to justify-content)
-     */
-    justify?: "start" | "center" | "between" | "end";
-    /**
-     * Padding on the inside of the box
-     */
-    padding?: Size;
-    /**
-     * Margin on the outside of the box
-     */
-    margin?: Size;
-    /**
-     * Whether to allow wrapping of box children
-     */
+    /** How to layout the children (Equivalent to justify-content) */
+    justify?: "start" | "center" | "between" | "around" | "end";
+    /** Whether to allow wrapping of layout children */
     wrap?: boolean;
+    /** Padding inside the layout */
+    padding?: SizeToken;
+    /** Horizontal padding inside the layout */
+    paddingX?: SizeToken;
+    /** Vertical padding inside the layout */
+    paddingY?: SizeToken;
+    /** Top padding inside the layout */
+    paddingTop?: SizeToken;
+    /** Bottom padding inside the layout */
+    paddingBottom?: SizeToken;
+    /** Left padding inside the layout */
+    paddingLeft?: SizeToken;
+    /** Right padding inside the layout */
+    paddingRight?: SizeToken;
+    /** Margin outside the layout */
+    margin?: AutoSize;
+    /** Horizontal margin outside the layout */
+    marginX?: AutoSize;
+    /** Vertical margin outside the layout */
+    marginY?: AutoSize;
+    /** Top margin outside the layout */
+    marginTop?: AutoSize;
+    /** Bottom margin outside the layout */
+    marginBottom?: AutoSize;
+    /** Left margin outside the layout */
+    marginLeft?: AutoSize;
+    /** Right margin outside the layout */
+    marginRight?: AutoSize;
+    /** Width of the layout */
+    width?: SizeDimension;
+    /** Maximum width of the layout */
+    maxWidth?: SizeDimension;
+    /** Height of the laout */
+    height?: SizeDimension;
+    /** Maximum of the layout */
+    maxHeight?: SizeDimension;
 };
 export {};

package/vite.config.ts

@@ -0,0 +1,23 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig({
+  plugins: [react()],
+  build: {
+    lib: {
+      entry: "src/index.tsx",
+      name: "Aui",
+      formats: ["es", "cjs", "umd"],
+      fileName: (format) => `aui.${format}.js`,
+    },
+    rollupOptions: {
+      external: ["react", "react-dom"],
+      output: {
+        globals: {
+          react: "React",
+          "react-dom": "ReactDOM",
+        },
+      },
+    },
+  },
+});