@bbki.ng/components 1.5.20 → 1.5.23

package/dist/index.d.ts

@@ -240,12 +240,27 @@ interface Photo {
     avgColor?: string;
     thumbnailSrc?: string;
     renderedWidth?: number;
-}
-
+}
 interface ImgProps extends Photo {
     className?: string;
     size?: "large" | "normal";
-}
+}
+
 declare const Img: (props: ImgProps) => JSX.Element;
 
-export { Article, ArticleProps, ArticleSkeleton, ArticleSkeletonProps, BLinkDotProps, BlinkDot, Breadcrumb, BreadcrumbProps, Button, ButtonProps, ButtonType, DropImage, Error, ErrorBoundary, ImageDropProps, ImagePreviewerProps, Img, ImgProps, Link, LinkColor, LinkList, LinkListProps, LinkListSkeleton, LinkListSkeletonProps, LinkProps, List, Logo, LogoProps, Nav, NavProps, NoiseCover, NoiseCoverProps, NotFound, Page, Panel, PanelProps, PathObj, PopConfirm, PopConfirmProps, Skeleton, SkeletonColor, SkeletonProps, Table, TableProps, Tag, TagProps, Tags, ThreeColLayout, TitledList, TitledListProps, listProps, threeColLayoutProps };
+interface RandomRowsLayoutProps {
+    classNames?: string;
+    cellWrapperClsGenerator?: (colNum: number, randBoolean: boolean) => string;
+    cellsCount: number;
+    cellRenderer: (index: number, randomBool: boolean, col: number) => React.ReactNode;
+}
+
+declare type ImageRenderer = (Img: ReactElement, index: number, col: number, randBool: boolean) => ReactNode;
+interface GalleryProps extends Omit<RandomRowsLayoutProps, "classNames" | "cellsCount" | "cellRenderer"> {
+    images: ImgProps[];
+    children?: ReactNode;
+    imageRenderer?: ImageRenderer;
+}
+declare const Gallery: (props: GalleryProps) => JSX.Element;
+
+export { Article, ArticleProps, ArticleSkeleton, ArticleSkeletonProps, BLinkDotProps, BlinkDot, Breadcrumb, BreadcrumbProps, Button, ButtonProps, ButtonType, DropImage, Error, ErrorBoundary, Gallery, GalleryProps, ImageDropProps, ImagePreviewerProps, ImageRenderer, Img, Link, LinkColor, LinkList, LinkListProps, LinkListSkeleton, LinkListSkeletonProps, LinkProps, List, Logo, LogoProps, Nav, NavProps, NoiseCover, NoiseCoverProps, NotFound, Page, Panel, PanelProps, PathObj, PopConfirm, PopConfirmProps, Skeleton, SkeletonColor, SkeletonProps, Table, TableProps, Tag, TagProps, Tags, ThreeColLayout, TitledList, TitledListProps, listProps, threeColLayoutProps };

package/dist/index.js

@@ -67,6 +67,7 @@ __export(src_exports, {
   DropImage: () => DropImage,
   Error: () => Error2,
   ErrorBoundary: () => ErrorBoundary,
+  Gallery: () => Gallery,
   Img: () => Img,
   Link: () => Link,
   LinkColor: () => LinkColor,
@@ -97,10 +98,8 @@ var Article = (props) => {
   return /* @__PURE__ */ import_react.default.createElement("div", {
     className: (0, import_classnames.default)("article", className)
   }, /* @__PURE__ */ import_react.default.createElement("div", {
-    className: "text-[2.25rem] leading-none"
-  }, title), /* @__PURE__ */ import_react.default.createElement("hr", {
-    className: "my-64 border-gray-200"
-  }), description && /* @__PURE__ */ import_react.default.createElement("div", {
+    className: "text-[2.25rem] mb-128 leading-none"
+  }, title), description && /* @__PURE__ */ import_react.default.createElement("div", {
     className: "mb-128"
   }, description), /* @__PURE__ */ import_react.default.createElement("div", {
     className: "text-gray-700"
@@ -935,6 +934,109 @@ var Img = (props) => {
     style: { top: 0, left: 0 }
   }));
 };
+
+// src/img/Gallery.tsx
+var import_classnames12 = __toESM(require("classnames"));
+var import_react21 = __toESM(require("react"));
+
+// src/img/RandomRowsLayout.tsx
+var import_classnames11 = __toESM(require("classnames"));
+var import_react20 = __toESM(require("react"));
+var last = (arr) => {
+  if (arr.length < 2) {
+    return arr[0];
+  }
+  return arr[arr.length - 1];
+};
+var defaultCellClsGenerator = (colNum, isCenterSingleCell) => {
+  const isSingleCell = colNum === 1;
+  const singleCellWidth = isCenterSingleCell ? "full" : "1/2";
+  const cellWidth = isSingleCell ? singleCellWidth : "1/2";
+  return `md:basis-${cellWidth}`;
+};
+var generateRandomBoolean = (p = 0.5) => Math.random() < p;
+var generateRandomColNum = (total) => {
+  const colNumArr = [];
+  if (total <= 2) {
+    return [total];
+  }
+  let colSum = 0;
+  while (colSum < total) {
+    const p = last(colNumArr) === 2 ? 0.9 : 0.5;
+    const num = generateRandomBoolean(p) ? 1 : 2;
+    colNumArr.push(num);
+    colSum += num;
+  }
+  return colNumArr;
+};
+var RandomRowsLayout = (props) => {
+  const {
+    cellsCount,
+    cellRenderer,
+    classNames: classNames7 = "",
+    cellWrapperClsGenerator = defaultCellClsGenerator
+  } = props;
+  const colNums = generateRandomColNum(cellsCount);
+  const indexRef = import_react20.default.useRef(0);
+  import_react20.default.useEffect(() => {
+    indexRef.current = 0;
+  });
+  return /* @__PURE__ */ import_react20.default.createElement("div", {
+    className: classNames7
+  }, colNums.map((colNum, row) => {
+    const randBool = generateRandomBoolean(colNum < 2 ? 0.6 : 0.5);
+    const randBoolArr = [randBool, !randBool];
+    return /* @__PURE__ */ import_react20.default.createElement("div", {
+      className: "flex items-center flex-wrap",
+      key: row
+    }, new Array(colNum).fill(null).map((_, col) => {
+      indexRef.current += 1;
+      const generatedCls = cellWrapperClsGenerator(colNum, generateRandomBoolean());
+      const cls4 = (0, import_classnames11.default)("flex items-center justify-center flex-shrink-0 flex-grow-0", "basis-full", generatedCls);
+      return /* @__PURE__ */ import_react20.default.createElement("div", {
+        className: cls4,
+        key: col
+      }, cellRenderer(indexRef.current - 1, randBoolArr[col], col));
+    }));
+  }));
+};
+
+// src/img/Gallery.tsx
+var defaultImageRenderer = (img, index, col) => {
+  return /* @__PURE__ */ import_react21.default.createElement("div", {
+    className: (0, import_classnames12.default)("mb-256", {
+      "md:mr-64": col === 0,
+      "md:ml-64": col !== 0
+    })
+  }, img);
+};
+var Gallery = (props) => {
+  const _a = props, {
+    images,
+    children,
+    imageRenderer = defaultImageRenderer
+  } = _a, rest = __objRest(_a, [
+    "images",
+    "children",
+    "imageRenderer"
+  ]);
+  const renderImage = (index, isLargeImage, col) => {
+    const image = images[index];
+    if (!image) {
+      return null;
+    }
+    return imageRenderer(/* @__PURE__ */ import_react21.default.createElement(Img, __spreadProps(__spreadValues({}, image), {
+      size: isLargeImage ? "large" : "normal"
+    })), index, col, isLargeImage);
+  };
+  return /* @__PURE__ */ import_react21.default.createElement("div", {
+    className: "w-full flex justify-center"
+  }, /* @__PURE__ */ import_react21.default.createElement(RandomRowsLayout, __spreadValues({
+    classNames: "mx-32 mt-128 max-w-screen-xl",
+    cellsCount: images.length,
+    cellRenderer: renderImage
+  }, rest)), children);
+};
 module.exports = __toCommonJS(src_exports);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
@@ -947,6 +1049,7 @@ module.exports = __toCommonJS(src_exports);
   DropImage,
   Error,
   ErrorBoundary,
+  Gallery,
   Img,
   Link,
   LinkColor,

package/dist/index.mjs

@@ -38,10 +38,8 @@ var Article = (props) => {
   return /* @__PURE__ */ React.createElement("div", {
     className: classNames("article", className)
   }, /* @__PURE__ */ React.createElement("div", {
-    className: "text-[2.25rem] leading-none"
-  }, title), /* @__PURE__ */ React.createElement("hr", {
-    className: "my-64 border-gray-200"
-  }), description && /* @__PURE__ */ React.createElement("div", {
+    className: "text-[2.25rem] mb-128 leading-none"
+  }, title), description && /* @__PURE__ */ React.createElement("div", {
     className: "mb-128"
   }, description), /* @__PURE__ */ React.createElement("div", {
     className: "text-gray-700"
@@ -879,6 +877,109 @@ var Img = (props) => {
     style: { top: 0, left: 0 }
   }));
 };
+
+// src/img/Gallery.tsx
+import classnames3 from "classnames";
+import React20 from "react";
+
+// src/img/RandomRowsLayout.tsx
+import classnames2 from "classnames";
+import React19 from "react";
+var last = (arr) => {
+  if (arr.length < 2) {
+    return arr[0];
+  }
+  return arr[arr.length - 1];
+};
+var defaultCellClsGenerator = (colNum, isCenterSingleCell) => {
+  const isSingleCell = colNum === 1;
+  const singleCellWidth = isCenterSingleCell ? "full" : "1/2";
+  const cellWidth = isSingleCell ? singleCellWidth : "1/2";
+  return `md:basis-${cellWidth}`;
+};
+var generateRandomBoolean = (p = 0.5) => Math.random() < p;
+var generateRandomColNum = (total) => {
+  const colNumArr = [];
+  if (total <= 2) {
+    return [total];
+  }
+  let colSum = 0;
+  while (colSum < total) {
+    const p = last(colNumArr) === 2 ? 0.9 : 0.5;
+    const num = generateRandomBoolean(p) ? 1 : 2;
+    colNumArr.push(num);
+    colSum += num;
+  }
+  return colNumArr;
+};
+var RandomRowsLayout = (props) => {
+  const {
+    cellsCount,
+    cellRenderer,
+    classNames: classNames7 = "",
+    cellWrapperClsGenerator = defaultCellClsGenerator
+  } = props;
+  const colNums = generateRandomColNum(cellsCount);
+  const indexRef = React19.useRef(0);
+  React19.useEffect(() => {
+    indexRef.current = 0;
+  });
+  return /* @__PURE__ */ React19.createElement("div", {
+    className: classNames7
+  }, colNums.map((colNum, row) => {
+    const randBool = generateRandomBoolean(colNum < 2 ? 0.6 : 0.5);
+    const randBoolArr = [randBool, !randBool];
+    return /* @__PURE__ */ React19.createElement("div", {
+      className: "flex items-center flex-wrap",
+      key: row
+    }, new Array(colNum).fill(null).map((_, col) => {
+      indexRef.current += 1;
+      const generatedCls = cellWrapperClsGenerator(colNum, generateRandomBoolean());
+      const cls4 = classnames2("flex items-center justify-center flex-shrink-0 flex-grow-0", "basis-full", generatedCls);
+      return /* @__PURE__ */ React19.createElement("div", {
+        className: cls4,
+        key: col
+      }, cellRenderer(indexRef.current - 1, randBoolArr[col], col));
+    }));
+  }));
+};
+
+// src/img/Gallery.tsx
+var defaultImageRenderer = (img, index, col) => {
+  return /* @__PURE__ */ React20.createElement("div", {
+    className: classnames3("mb-256", {
+      "md:mr-64": col === 0,
+      "md:ml-64": col !== 0
+    })
+  }, img);
+};
+var Gallery = (props) => {
+  const _a = props, {
+    images,
+    children,
+    imageRenderer = defaultImageRenderer
+  } = _a, rest = __objRest(_a, [
+    "images",
+    "children",
+    "imageRenderer"
+  ]);
+  const renderImage = (index, isLargeImage, col) => {
+    const image = images[index];
+    if (!image) {
+      return null;
+    }
+    return imageRenderer(/* @__PURE__ */ React20.createElement(Img, __spreadProps(__spreadValues({}, image), {
+      size: isLargeImage ? "large" : "normal"
+    })), index, col, isLargeImage);
+  };
+  return /* @__PURE__ */ React20.createElement("div", {
+    className: "w-full flex justify-center"
+  }, /* @__PURE__ */ React20.createElement(RandomRowsLayout, __spreadValues({
+    classNames: "mx-32 mt-128 max-w-screen-xl",
+    cellsCount: images.length,
+    cellRenderer: renderImage
+  }, rest)), children);
+};
 export {
   Article,
   ArticleSkeleton,
@@ -889,6 +990,7 @@ export {
   DropImage,
   Error2 as Error,
   ErrorBoundary,
+  Gallery,
   Img,
   Link,
   LinkColor,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbki.ng/components",
-  "version": "1.5.20",
+  "version": "1.5.23",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",