@bbki.ng/components 1.5.23 → 1.5.26

package/dist/index.d.ts

@@ -263,4 +263,21 @@ interface GalleryProps extends Omit<RandomRowsLayoutProps, "classNames" | "cells
 }
 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 };
+interface ISettings {
+    canvas: HTMLCanvasElement;
+    step?: number;
+}
+
+interface IOpt {
+    multiplier: number;
+    color: number[];
+    spiralConstA: number;
+    spiralConstB: number;
+}
+
+interface LoadingSpiralProps extends IOpt, ISettings {
+    className?: "string";
+}
+declare const LoadingSpiral: (props: LoadingSpiralProps) => 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, LoadingSpiral, LoadingSpiralProps, 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

@@ -74,6 +74,7 @@ __export(src_exports, {
   LinkList: () => LinkList,
   LinkListSkeleton: () => LinkListSkeleton,
   List: () => List,
+  LoadingSpiral: () => LoadingSpiral,
   Logo: () => Logo,
   Nav: () => Nav,
   NoiseCover: () => NoiseCover,
@@ -973,7 +974,7 @@ var RandomRowsLayout = (props) => {
   const {
     cellsCount,
     cellRenderer,
-    classNames: classNames7 = "",
+    classNames: classNames8 = "",
     cellWrapperClsGenerator = defaultCellClsGenerator
   } = props;
   const colNums = generateRandomColNum(cellsCount);
@@ -982,7 +983,7 @@ var RandomRowsLayout = (props) => {
     indexRef.current = 0;
   });
   return /* @__PURE__ */ import_react20.default.createElement("div", {
-    className: classNames7
+    className: classNames8
   }, colNums.map((colNum, row) => {
     const randBool = generateRandomBoolean(colNum < 2 ? 0.6 : 0.5);
     const randBoolArr = [randBool, !randBool];
@@ -1037,6 +1038,156 @@ var Gallery = (props) => {
     cellRenderer: renderImage
   }, rest)), children);
 };
+
+// src/loading-spiral/LoadingSpiral.tsx
+var import_phenomenon = __toESM(require("phenomenon"));
+var import_classnames13 = __toESM(require("classnames"));
+var import_react23 = __toESM(require("react"));
+
+// src/loading-spiral/createSettings.ts
+var createSettings = (settings) => {
+  const { canvas, step = 0.1 } = settings;
+  const uniforms = {
+    uProgress: {
+      type: "float",
+      value: 0
+    }
+  };
+  return {
+    uniforms,
+    shouldRender: true,
+    canvas,
+    onRender: (r) => {
+      const { uProgress } = r.uniforms;
+      uProgress.value += step;
+    }
+  };
+};
+
+// src/loading-spiral/constants.ts
+var VERTEX_SHADER = `
+  attribute vec3 ${"aPositionStart" /* POSITION_START */};
+  attribute vec3 ${"aColor" /* COLOR */};
+  uniform mat4 uProjectionMatrix;
+  uniform mat4 uModelMatrix;
+  uniform mat4 uViewMatrix;
+  uniform float uProgress;
+  varying vec3 vColor;
+  mat4 rotate(float _angle){
+    return mat4(
+      cos(_angle),-sin(_angle), 0.0, 0.0,
+      sin(_angle),cos(_angle), 0.0, 0.0,
+      0.0, 0.0, 0.0, 0.0,
+      0.0, 0.0, 0.0, 1.0
+    );
+  }
+  void main(){
+    gl_Position = rotate(uProgress) * uProjectionMatrix * uModelMatrix * uViewMatrix * vec4(${"aPositionStart" /* POSITION_START */}, 1.0);
+    gl_PointSize = 2.0;
+    vColor = ${"aColor" /* COLOR */};
+  }
+`;
+var FRAGMENT_SHADER = `
+  precision mediump float;
+  uniform float uProgress;
+ 
+  varying vec3 vColor;
+  void main(){
+    gl_FragColor = vec4(vColor, 1.0);
+  }
+`;
+
+// src/loading-spiral/utils.ts
+var scaleIndex = (multiplier, max) => (index) => {
+  return index / (multiplier / max);
+};
+var scaleIndex2ang = (multiplier) => scaleIndex(multiplier, 360);
+var rgba = (val) => {
+  const [r, g, b, a] = val;
+  return [r / 255, g / 255, b / 255, a];
+};
+var randOpacityRgb = (val) => {
+  const [r, g, b] = val;
+  return rgba([r, g, b, Math.random()]);
+};
+
+// src/loading-spiral/createOptions.ts
+var DEFAULT_OPT = {
+  multiplier: 3e4,
+  color: [209, 213, 219, 1],
+  spiralConstA: 0.04,
+  spiralConstB: 0.16
+};
+var createOptions = (opt = DEFAULT_OPT) => {
+  const { multiplier, spiralConstA, spiralConstB, color } = opt;
+  const attributes = [
+    {
+      name: "aPositionStart" /* POSITION_START */,
+      data: (index) => {
+        const ang = scaleIndex2ang(multiplier)(index);
+        const A = spiralConstA;
+        const B = spiralConstB;
+        const xPos = A * Math.pow(Math.E, B * ang) * Math.cos(ang);
+        const yPos = A * Math.pow(Math.E, B * ang) * Math.sin(ang);
+        return [xPos, yPos, 1];
+      },
+      size: 3
+    },
+    {
+      name: "aColor" /* COLOR */,
+      data: () => randOpacityRgb(color),
+      size: 3
+    }
+  ];
+  return {
+    attributes,
+    multiplier,
+    vertex: VERTEX_SHADER,
+    fragment: FRAGMENT_SHADER
+  };
+};
+
+// src/loading-spiral/useCanvasRef.ts
+var import_react22 = require("react");
+var useResizedCanvasRef = () => {
+  const canvasRef = (0, import_react22.useRef)(null);
+  const containerRef = (0, import_react22.useRef)(null);
+  (0, import_react22.useEffect)(() => {
+    const canvas = canvasRef.current;
+    const container = containerRef.current;
+    if (!canvas || !container)
+      return;
+    const { width, height } = container.getBoundingClientRect();
+    const canvasSize = Math.max(width, height);
+    canvas.setAttribute("width", `${canvasSize}`);
+    canvas.setAttribute("height", `${canvasSize}`);
+  }, []);
+  return {
+    canvasRef,
+    containerRef
+  };
+};
+
+// src/loading-spiral/LoadingSpiral.tsx
+var LoadingSpiral = (props) => {
+  const { canvasRef, containerRef } = useResizedCanvasRef();
+  const _a = props, { className, canvas, step } = _a, rest = __objRest(_a, ["className", "canvas", "step"]);
+  (0, import_react23.useEffect)(() => {
+    if (!canvasRef.current) {
+      return;
+    }
+    const phenomenon = new import_phenomenon.default({
+      settings: createSettings({ canvas: canvasRef.current, step })
+    });
+    phenomenon.add("spiral", createOptions(Object.assign({}, DEFAULT_OPT, rest)));
+  }, []);
+  return /* @__PURE__ */ import_react23.default.createElement("div", {
+    className: (0, import_classnames13.default)("fixed h-full w-full overflow-hidden flex justify-center items-center", className),
+    ref: containerRef
+  }, /* @__PURE__ */ import_react23.default.createElement("canvas", {
+    ref: canvasRef
+  }));
+};
 module.exports = __toCommonJS(src_exports);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
@@ -1056,6 +1207,7 @@ module.exports = __toCommonJS(src_exports);
   LinkList,
   LinkListSkeleton,
   List,
+  LoadingSpiral,
   Logo,
   Nav,
   NoiseCover,

package/dist/index.mjs

@@ -916,7 +916,7 @@ var RandomRowsLayout = (props) => {
   const {
     cellsCount,
     cellRenderer,
-    classNames: classNames7 = "",
+    classNames: classNames8 = "",
     cellWrapperClsGenerator = defaultCellClsGenerator
   } = props;
   const colNums = generateRandomColNum(cellsCount);
@@ -925,7 +925,7 @@ var RandomRowsLayout = (props) => {
     indexRef.current = 0;
   });
   return /* @__PURE__ */ React19.createElement("div", {
-    className: classNames7
+    className: classNames8
   }, colNums.map((colNum, row) => {
     const randBool = generateRandomBoolean(colNum < 2 ? 0.6 : 0.5);
     const randBoolArr = [randBool, !randBool];
@@ -980,6 +980,156 @@ var Gallery = (props) => {
     cellRenderer: renderImage
   }, rest)), children);
 };
+
+// src/loading-spiral/LoadingSpiral.tsx
+import Phenomenon from "phenomenon";
+import classNames7 from "classnames";
+import React21, { useEffect as useEffect4 } from "react";
+
+// src/loading-spiral/createSettings.ts
+var createSettings = (settings) => {
+  const { canvas, step = 0.1 } = settings;
+  const uniforms = {
+    uProgress: {
+      type: "float",
+      value: 0
+    }
+  };
+  return {
+    uniforms,
+    shouldRender: true,
+    canvas,
+    onRender: (r) => {
+      const { uProgress } = r.uniforms;
+      uProgress.value += step;
+    }
+  };
+};
+
+// src/loading-spiral/constants.ts
+var VERTEX_SHADER = `
+  attribute vec3 ${"aPositionStart" /* POSITION_START */};
+  attribute vec3 ${"aColor" /* COLOR */};
+  uniform mat4 uProjectionMatrix;
+  uniform mat4 uModelMatrix;
+  uniform mat4 uViewMatrix;
+  uniform float uProgress;
+  varying vec3 vColor;
+  mat4 rotate(float _angle){
+    return mat4(
+      cos(_angle),-sin(_angle), 0.0, 0.0,
+      sin(_angle),cos(_angle), 0.0, 0.0,
+      0.0, 0.0, 0.0, 0.0,
+      0.0, 0.0, 0.0, 1.0
+    );
+  }
+  void main(){
+    gl_Position = rotate(uProgress) * uProjectionMatrix * uModelMatrix * uViewMatrix * vec4(${"aPositionStart" /* POSITION_START */}, 1.0);
+    gl_PointSize = 2.0;
+    vColor = ${"aColor" /* COLOR */};
+  }
+`;
+var FRAGMENT_SHADER = `
+  precision mediump float;
+  uniform float uProgress;
+ 
+  varying vec3 vColor;
+  void main(){
+    gl_FragColor = vec4(vColor, 1.0);
+  }
+`;
+
+// src/loading-spiral/utils.ts
+var scaleIndex = (multiplier, max) => (index) => {
+  return index / (multiplier / max);
+};
+var scaleIndex2ang = (multiplier) => scaleIndex(multiplier, 360);
+var rgba = (val) => {
+  const [r, g, b, a] = val;
+  return [r / 255, g / 255, b / 255, a];
+};
+var randOpacityRgb = (val) => {
+  const [r, g, b] = val;
+  return rgba([r, g, b, Math.random()]);
+};
+
+// src/loading-spiral/createOptions.ts
+var DEFAULT_OPT = {
+  multiplier: 3e4,
+  color: [209, 213, 219, 1],
+  spiralConstA: 0.04,
+  spiralConstB: 0.16
+};
+var createOptions = (opt = DEFAULT_OPT) => {
+  const { multiplier, spiralConstA, spiralConstB, color } = opt;
+  const attributes = [
+    {
+      name: "aPositionStart" /* POSITION_START */,
+      data: (index) => {
+        const ang = scaleIndex2ang(multiplier)(index);
+        const A = spiralConstA;
+        const B = spiralConstB;
+        const xPos = A * Math.pow(Math.E, B * ang) * Math.cos(ang);
+        const yPos = A * Math.pow(Math.E, B * ang) * Math.sin(ang);
+        return [xPos, yPos, 1];
+      },
+      size: 3
+    },
+    {
+      name: "aColor" /* COLOR */,
+      data: () => randOpacityRgb(color),
+      size: 3
+    }
+  ];
+  return {
+    attributes,
+    multiplier,
+    vertex: VERTEX_SHADER,
+    fragment: FRAGMENT_SHADER
+  };
+};
+
+// src/loading-spiral/useCanvasRef.ts
+import { useEffect as useEffect3, useRef as useRef2 } from "react";
+var useResizedCanvasRef = () => {
+  const canvasRef = useRef2(null);
+  const containerRef = useRef2(null);
+  useEffect3(() => {
+    const canvas = canvasRef.current;
+    const container = containerRef.current;
+    if (!canvas || !container)
+      return;
+    const { width, height } = container.getBoundingClientRect();
+    const canvasSize = Math.max(width, height);
+    canvas.setAttribute("width", `${canvasSize}`);
+    canvas.setAttribute("height", `${canvasSize}`);
+  }, []);
+  return {
+    canvasRef,
+    containerRef
+  };
+};
+
+// src/loading-spiral/LoadingSpiral.tsx
+var LoadingSpiral = (props) => {
+  const { canvasRef, containerRef } = useResizedCanvasRef();
+  const _a = props, { className, canvas, step } = _a, rest = __objRest(_a, ["className", "canvas", "step"]);
+  useEffect4(() => {
+    if (!canvasRef.current) {
+      return;
+    }
+    const phenomenon = new Phenomenon({
+      settings: createSettings({ canvas: canvasRef.current, step })
+    });
+    phenomenon.add("spiral", createOptions(Object.assign({}, DEFAULT_OPT, rest)));
+  }, []);
+  return /* @__PURE__ */ React21.createElement("div", {
+    className: classNames7("fixed h-full w-full overflow-hidden flex justify-center items-center", className),
+    ref: containerRef
+  }, /* @__PURE__ */ React21.createElement("canvas", {
+    ref: canvasRef
+  }));
+};
 export {
   Article,
   ArticleSkeleton,
@@ -997,6 +1147,7 @@ export {
   LinkList,
   LinkListSkeleton,
   List,
+  LoadingSpiral,
   Logo,
   Nav,
   NoiseCover,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbki.ng/components",
-  "version": "1.5.23",
+  "version": "1.5.26",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -33,8 +33,11 @@
     "access": "public"
   },
   "peerDependencies": {
+    "@tailwindcss/typography": "^0.5.0",
     "classnames": "^2.3.1",
-    "react-router-dom": "5.3.0",
-    "@tailwindcss/typography": "^0.5.0"
+    "react-router-dom": "5.3.0"
+  },
+  "dependencies": {
+    "phenomenon": "^1.6.0"
   }
 }