@bbki.ng/components 1.5.6 → 1.5.9

package/dist/index.d.ts

@@ -1,13 +1,14 @@
-import React, { EventHandler, ReactElement, CSSProperties, Ref, ReactNode, FunctionComponent } from 'react';
+import React, { FunctionComponent, EventHandler, ReactElement, CSSProperties, Ref, ReactNode } from 'react';
 import { LinkProps as LinkProps$1 } from 'react-router-dom';
 
 declare type ArticleProps = {
-    title: string;
+    title: any;
     className?: string;
     content?: any;
     children: any;
+    description?: any;
 };
-declare const Article: (props: ArticleProps) => JSX.Element;
+declare const Article: FunctionComponent<ArticleProps>;
 
 declare enum ButtonType {
     DANGER = "danger",
@@ -55,8 +56,9 @@ interface LinkProps extends LinkProps$1 {
     color?: LinkColor;
     className?: string;
     external?: boolean;
+    name?: any;
+    children?: any;
     to: string;
-    children: any;
 }
 declare const Link: (props: LinkProps) => JSX.Element;
 
@@ -153,4 +155,31 @@ declare type BLinkDotProps = {
 };
 declare const BlinkDot: (props: BLinkDotProps) => JSX.Element;
 
-export { Article, ArticleProps, BLinkDotProps, BlinkDot, Breadcrumb, BreadcrumbProps, Button, ButtonProps, ButtonType, DropImage, ImageDropProps, ImagePreviewerProps, Link, LinkColor, LinkProps, Logo, LogoProps, Nav, NavProps, Page, Panel, PanelProps, PathObj, PopConfirm, PopConfirmProps, Skeleton, SkeletonColor, SkeletonProps, Table, TableProps, Tag, TagProps, Tags };
+declare type threeColLayoutProps = {
+    leftRenderer?: () => ReactElement | null;
+    rightRenderer?: () => ReactElement | null;
+    middleRenderer?: () => ReactElement | null;
+};
+declare const ThreeColLayout: (props: threeColLayoutProps) => JSX.Element;
+
+interface listProps {
+    className?: string;
+    compact?: boolean;
+    items: any[];
+    itemRenderer: (itemProps: any, index: number) => ReactElement;
+    horizontal?: boolean;
+}
+declare const List: FunctionComponent<listProps>;
+interface TitledListProps extends listProps {
+    title?: any;
+    description?: any;
+}
+declare const TitledList: FunctionComponent<TitledListProps>;
+interface LinkListProps extends Omit<listProps, "itemRenderer" | "items"> {
+    title?: string;
+    description?: any;
+    links: LinkProps[];
+}
+declare const LinkList: (props: LinkListProps) => JSX.Element;
+
+export { Article, ArticleProps, BLinkDotProps, BlinkDot, Breadcrumb, BreadcrumbProps, Button, ButtonProps, ButtonType, DropImage, ImageDropProps, ImagePreviewerProps, Link, LinkColor, LinkList, LinkListProps, LinkProps, List, Logo, LogoProps, Nav, NavProps, Page, Panel, PanelProps, PathObj, PopConfirm, PopConfirmProps, Skeleton, SkeletonColor, SkeletonProps, Table, TableProps, Tag, TagProps, Tags, ThreeColLayout, TitledList, TitledListProps, listProps, threeColLayoutProps };

package/dist/index.js

@@ -66,6 +66,8 @@ __export(src_exports, {
   DropImage: () => DropImage,
   Link: () => Link,
   LinkColor: () => LinkColor,
+  LinkList: () => LinkList,
+  List: () => List,
   Logo: () => Logo,
   Nav: () => Nav,
   Page: () => Page,
@@ -75,21 +77,25 @@ __export(src_exports, {
   SkeletonColor: () => SkeletonColor,
   Table: () => Table,
   Tag: () => Tag,
-  Tags: () => Tags
+  Tags: () => Tags,
+  ThreeColLayout: () => ThreeColLayout,
+  TitledList: () => TitledList
 });
 
 // src/article/Article.tsx
 var import_classnames = __toESM(require("classnames"));
 var import_react = __toESM(require("react"));
 var Article = (props) => {
-  const { title, content, children, className } = props;
+  const { title, content, children, className, description } = 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"
-  }), /* @__PURE__ */ import_react.default.createElement("div", {
+  }), description && /* @__PURE__ */ import_react.default.createElement("div", {
+    className: "mb-128"
+  }, description), /* @__PURE__ */ import_react.default.createElement("div", {
     className: "text-gray-700"
   }, children || content));
 };
@@ -623,11 +629,74 @@ var import_react15 = __toESM(require("react"));
 var BlinkDot = (props) => {
   const { className } = props;
   return /* @__PURE__ */ import_react15.default.createElement("span", {
-    className: (0, import_classnames7.default)("inline-flex h-2 w-2 justify-center items-center relative", className)
+    className: (0, import_classnames7.default)("inline-flex h-1 w-1 justify-center items-center relative", className)
   }, /* @__PURE__ */ import_react15.default.createElement("span", {
     className: "animate-ping-fast absolute inline-flex h-full w-full rounded-full bg-red-600"
   }));
 };
+
+// src/layout/layout.tsx
+var import_classnames8 = __toESM(require("classnames"));
+var import_react16 = __toESM(require("react"));
+var ThreeColLayout = (props) => {
+  const { leftRenderer, middleRenderer, rightRenderer } = props;
+  const colCls = (0, import_classnames8.default)("max-h-full overflow-auto md:block py-64");
+  return /* @__PURE__ */ import_react16.default.createElement("div", {
+    className: "grid grid-cols-1 xl:grid-cols-3 gap-4 h-full w-full"
+  }, /* @__PURE__ */ import_react16.default.createElement("div", {
+    className: (0, import_classnames8.default)("hidden", colCls)
+  }, leftRenderer && leftRenderer()), /* @__PURE__ */ import_react16.default.createElement("div", {
+    className: (0, import_classnames8.default)(colCls, "sm:px-128 xl:px-0 no-scrollbar", "relative", {
+      hidden: !middleRenderer
+    })
+  }, middleRenderer && middleRenderer()), /* @__PURE__ */ import_react16.default.createElement("div", {
+    className: (0, import_classnames8.default)("hidden", colCls)
+  }, rightRenderer && rightRenderer()));
+};
+
+// src/list/list.tsx
+var import_classnames9 = __toESM(require("classnames"));
+var import_react17 = __toESM(require("react"));
+var List = (props) => {
+  const { items, itemRenderer, className, horizontal, compact } = props;
+  const spaceCls = compact ? "" : horizontal ? "mr-3" : "mb-4";
+  return /* @__PURE__ */ import_react17.default.createElement("ul", {
+    className: (0, import_classnames9.default)(className, "list-style-none", {
+      flex: horizontal,
+      "align-center": horizontal
+    })
+  }, items.map((item, index) => {
+    return /* @__PURE__ */ import_react17.default.createElement("li", {
+      key: item.id || index,
+      className: (0, import_classnames9.default)(spaceCls, "flex-shrink-0")
+    }, itemRenderer(item, index));
+  }));
+};
+var TitledList = (props) => {
+  const _a = props, { title, description } = _a, rest = __objRest(_a, ["title", "description"]);
+  if (!title) {
+    return /* @__PURE__ */ import_react17.default.createElement(List, __spreadValues({}, rest));
+  }
+  return /* @__PURE__ */ import_react17.default.createElement(Article, {
+    title,
+    description
+  }, /* @__PURE__ */ import_react17.default.createElement(List, __spreadValues({}, rest)));
+};
+var LinkList = (props) => {
+  const _a = props, { title, description, links } = _a, rest = __objRest(_a, ["title", "description", "links"]);
+  const renderLink = ({ name, to }) => {
+    return /* @__PURE__ */ import_react17.default.createElement(Link, {
+      to,
+      key: name
+    }, name);
+  };
+  return /* @__PURE__ */ import_react17.default.createElement(TitledList, __spreadValues({
+    title,
+    description,
+    items: links,
+    itemRenderer: renderLink
+  }, rest));
+};
 module.exports = __toCommonJS(src_exports);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
@@ -639,6 +708,8 @@ module.exports = __toCommonJS(src_exports);
   DropImage,
   Link,
   LinkColor,
+  LinkList,
+  List,
   Logo,
   Nav,
   Page,
@@ -648,5 +719,7 @@ module.exports = __toCommonJS(src_exports);
   SkeletonColor,
   Table,
   Tag,
-  Tags
+  Tags,
+  ThreeColLayout,
+  TitledList
 });

package/dist/index.mjs

@@ -34,14 +34,16 @@ var __objRest = (source, exclude) => {
 import classNames from "classnames";
 import React from "react";
 var Article = (props) => {
-  const { title, content, children, className } = props;
+  const { title, content, children, className, description } = 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"
-  }), /* @__PURE__ */ React.createElement("div", {
+  }), description && /* @__PURE__ */ React.createElement("div", {
+    className: "mb-128"
+  }, description), /* @__PURE__ */ React.createElement("div", {
     className: "text-gray-700"
   }, children || content));
 };
@@ -578,11 +580,74 @@ import React14 from "react";
 var BlinkDot = (props) => {
   const { className } = props;
   return /* @__PURE__ */ React14.createElement("span", {
-    className: classNames6("inline-flex h-2 w-2 justify-center items-center relative", className)
+    className: classNames6("inline-flex h-1 w-1 justify-center items-center relative", className)
   }, /* @__PURE__ */ React14.createElement("span", {
     className: "animate-ping-fast absolute inline-flex h-full w-full rounded-full bg-red-600"
   }));
 };
+
+// src/layout/layout.tsx
+import cls2 from "classnames";
+import React15 from "react";
+var ThreeColLayout = (props) => {
+  const { leftRenderer, middleRenderer, rightRenderer } = props;
+  const colCls = cls2("max-h-full overflow-auto md:block py-64");
+  return /* @__PURE__ */ React15.createElement("div", {
+    className: "grid grid-cols-1 xl:grid-cols-3 gap-4 h-full w-full"
+  }, /* @__PURE__ */ React15.createElement("div", {
+    className: cls2("hidden", colCls)
+  }, leftRenderer && leftRenderer()), /* @__PURE__ */ React15.createElement("div", {
+    className: cls2(colCls, "sm:px-128 xl:px-0 no-scrollbar", "relative", {
+      hidden: !middleRenderer
+    })
+  }, middleRenderer && middleRenderer()), /* @__PURE__ */ React15.createElement("div", {
+    className: cls2("hidden", colCls)
+  }, rightRenderer && rightRenderer()));
+};
+
+// src/list/list.tsx
+import cls3 from "classnames";
+import React16 from "react";
+var List = (props) => {
+  const { items, itemRenderer, className, horizontal, compact } = props;
+  const spaceCls = compact ? "" : horizontal ? "mr-3" : "mb-4";
+  return /* @__PURE__ */ React16.createElement("ul", {
+    className: cls3(className, "list-style-none", {
+      flex: horizontal,
+      "align-center": horizontal
+    })
+  }, items.map((item, index) => {
+    return /* @__PURE__ */ React16.createElement("li", {
+      key: item.id || index,
+      className: cls3(spaceCls, "flex-shrink-0")
+    }, itemRenderer(item, index));
+  }));
+};
+var TitledList = (props) => {
+  const _a = props, { title, description } = _a, rest = __objRest(_a, ["title", "description"]);
+  if (!title) {
+    return /* @__PURE__ */ React16.createElement(List, __spreadValues({}, rest));
+  }
+  return /* @__PURE__ */ React16.createElement(Article, {
+    title,
+    description
+  }, /* @__PURE__ */ React16.createElement(List, __spreadValues({}, rest)));
+};
+var LinkList = (props) => {
+  const _a = props, { title, description, links } = _a, rest = __objRest(_a, ["title", "description", "links"]);
+  const renderLink = ({ name, to }) => {
+    return /* @__PURE__ */ React16.createElement(Link, {
+      to,
+      key: name
+    }, name);
+  };
+  return /* @__PURE__ */ React16.createElement(TitledList, __spreadValues({
+    title,
+    description,
+    items: links,
+    itemRenderer: renderLink
+  }, rest));
+};
 export {
   Article,
   BlinkDot,
@@ -592,6 +657,8 @@ export {
   DropImage,
   Link,
   LinkColor,
+  LinkList,
+  List,
   Logo,
   Nav,
   Page,
@@ -601,5 +668,7 @@ export {
   SkeletonColor,
   Table,
   Tag,
-  Tags
+  Tags,
+  ThreeColLayout,
+  TitledList
 };

package/package.json

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

package/dist/index.css

@@ -1,226 +0,0 @@
-/* src/main.css */
-*,
-::before,
-::after {
-  box-sizing: border-box;
-  border-width: 0;
-  border-style: solid;
-  border-color: currentColor;
-}
-::before,
-::after {
-  --tw-content: "";
-}
-html {
-  line-height: 1.5;
-  -webkit-text-size-adjust: 100%;
-  -moz-tab-size: 4;
-  -o-tab-size: 4;
-  tab-size: 4;
-  font-family:
-    pt-sans,
-    ui-sans-serif,
-    system-ui,
-    -apple-system,
-    BlinkMacSystemFont,
-    Segoe UI,
-    Roboto,
-    Helvetica Neue,
-    Arial,
-    Noto Sans,
-    sans-serif,
-    Apple Color Emoji,
-    Segoe UI Emoji,
-    Segoe UI Symbol,
-    Noto Color Emoji;
-}
-body {
-  margin: 0;
-  line-height: inherit;
-}
-hr {
-  height: 0;
-  color: inherit;
-  border-top-width: 1px;
-}
-abbr[title] {
-  -webkit-text-decoration: underline dotted;
-  text-decoration: underline dotted;
-}
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-size: inherit;
-  font-weight: inherit;
-}
-a {
-  color: inherit;
-  text-decoration: inherit;
-}
-b,
-strong {
-  font-weight: bolder;
-}
-code,
-kbd,
-samp,
-pre {
-  font-family:
-    ui-monospace,
-    SFMono-Regular,
-    Menlo,
-    Monaco,
-    Consolas,
-    Liberation Mono,
-    Courier New,
-    monospace;
-  font-size: 1em;
-}
-small {
-  font-size: 80%;
-}
-sub,
-sup {
-  font-size: 75%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline;
-}
-sub {
-  bottom: -0.25em;
-}
-sup {
-  top: -0.5em;
-}
-table {
-  text-indent: 0;
-  border-color: inherit;
-  border-collapse: collapse;
-}
-button,
-input,
-optgroup,
-select,
-textarea {
-  font-family: inherit;
-  font-size: 100%;
-  line-height: inherit;
-  color: inherit;
-  margin: 0;
-  padding: 0;
-}
-button,
-select {
-  text-transform: none;
-}
-button,
-[type=button],
-[type=reset],
-[type=submit] {
-  -webkit-appearance: button;
-  background-color: transparent;
-  background-image: none;
-}
-:-moz-focusring {
-  outline: auto;
-}
-:-moz-ui-invalid {
-  box-shadow: none;
-}
-progress {
-  vertical-align: baseline;
-}
-::-webkit-inner-spin-button,
-::-webkit-outer-spin-button {
-  height: auto;
-}
-[type=search] {
-  -webkit-appearance: textfield;
-  outline-offset: -2px;
-}
-::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-::-webkit-file-upload-button {
-  -webkit-appearance: button;
-  font: inherit;
-}
-summary {
-  display: list-item;
-}
-blockquote,
-dl,
-dd,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-hr,
-figure,
-p,
-pre {
-  margin: 0;
-}
-fieldset {
-  margin: 0;
-  padding: 0;
-}
-legend {
-  padding: 0;
-}
-ol,
-ul,
-menu {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-textarea {
-  resize: vertical;
-}
-input::-moz-placeholder,
-textarea::-moz-placeholder {
-  opacity: 1;
-  color: #9CA3AF;
-}
-input:-ms-input-placeholder,
-textarea:-ms-input-placeholder {
-  opacity: 1;
-  color: #9CA3AF;
-}
-input::placeholder,
-textarea::placeholder {
-  opacity: 1;
-  color: #9CA3AF;
-}
-button,
-[role=button] {
-  cursor: pointer;
-}
-:disabled {
-  cursor: default;
-}
-img,
-svg,
-video,
-canvas,
-audio,
-iframe,
-embed,
-object {
-  display: block;
-  vertical-align: middle;
-}
-img,
-video {
-  max-width: 100%;
-  height: auto;
-}
-[hidden] {
-  display: none;
-}