@bbki.ng/components 1.4.6 → 1.5.0

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import React, { EventHandler } from 'react';
+import React, { EventHandler, ReactElement } from 'react';
 import { LinkProps as LinkProps$1 } from 'react-router-dom';
 
 declare type ArticleProps = {
@@ -76,6 +76,13 @@ declare type PanelProps = {
 };
 declare const Panel: (props: PanelProps) => JSX.Element;
 
+declare type PageProps = {
+    nav: ReactElement;
+    main: ReactElement;
+    footer: ReactElement;
+};
+declare const Page: (props: PageProps) => JSX.Element;
+
 declare type PopConfirmProps = {
     onOk?: EventHandler<React.MouseEvent<HTMLButtonElement>>;
     onCancel?: EventHandler<React.MouseEvent<HTMLButtonElement>>;
@@ -86,4 +93,20 @@ declare type PopConfirmProps = {
 };
 declare const PopConfirm: (props: PopConfirmProps) => JSX.Element;
 
-export { Article, ArticleProps, Breadcrumb, BreadcrumbProps, Button, ButtonProps, ButtonType, Link, LinkColor, LinkProps, Logo, LogoProps, Nav, NavProps, Panel, PanelProps, PathObj, PopConfirm, PopConfirmProps, Tag, TagProps, Tags };
+declare type TableProps = {
+    rowCount: number;
+    rowRenderer: (index: number) => any;
+    headerRenderer?: () => any;
+    className?: string;
+};
+declare const Table: {
+    (props: TableProps): JSX.Element;
+    HCell(props: {
+        children: any;
+    }): JSX.Element;
+    Cell(props: {
+        children: any;
+    }): JSX.Element;
+};
+
+export { Article, ArticleProps, Breadcrumb, BreadcrumbProps, Button, ButtonProps, ButtonType, Link, LinkColor, LinkProps, Logo, LogoProps, Nav, NavProps, Page, Panel, PanelProps, PathObj, PopConfirm, PopConfirmProps, Table, TableProps, Tag, TagProps, Tags };

package/dist/index.js

@@ -66,8 +66,10 @@ __export(src_exports, {
   LinkColor: () => LinkColor,
   Logo: () => Logo,
   Nav: () => Nav,
+  Page: () => Page,
   Panel: () => Panel,
   PopConfirm: () => PopConfirm,
+  Table: () => Table,
   Tag: () => Tag,
   Tags: () => Tags
 });
@@ -80,7 +82,7 @@ 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]"
+    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", {
@@ -172,6 +174,11 @@ var HOVER_COLOR_MAPPING = {
   ["red" /* RED */]: "hover:bg-red-100",
   ["gray" /* GRAY */]: "hover:bg-gray-100"
 };
+var FOCUS_BG_COLOR_MAPPING = {
+  ["blue" /* BLUE */]: "focus:bg-blue-600",
+  ["red" /* RED */]: "focus:bg-red-500",
+  ["gray" /* GRAY */]: "focus:bg-gray-400"
+};
 var Link = (props) => {
   const _a = props, {
     color = "blue" /* BLUE */,
@@ -184,7 +191,7 @@ var Link = (props) => {
     "className",
     "children"
   ]);
-  const linkCls = (0, import_classnames2.default)(COLOR_MAPPING[color], className, "rounded", "no-underline", "transition-colors", HOVER_COLOR_MAPPING[color]);
+  const linkCls = (0, import_classnames2.default)(className, "rounded", "no-underline", "transition-colors", "focus:text-white", COLOR_MAPPING[color], HOVER_COLOR_MAPPING[color], FOCUS_BG_COLOR_MAPPING[color]);
   if (external) {
     return /* @__PURE__ */ import_react3.default.createElement("a", {
       href: props.to,
@@ -266,25 +273,57 @@ var Panel = (props) => {
   }, children);
 };
 
-// src/pop-confirm/PopConfirm.tsx
+// src/page/Page.tsx
 var import_react8 = __toESM(require("react"));
+var Page = (props) => {
+  const { nav, main, footer } = props;
+  return /* @__PURE__ */ import_react8.default.createElement("main", {
+    className: "flex flex-col h-full"
+  }, /* @__PURE__ */ import_react8.default.createElement("div", {
+    className: `flx-grow-0 w-full sticky top-0 z-50`
+  }, nav), /* @__PURE__ */ import_react8.default.createElement("section", {
+    className: "flex-grow flex-shrink-0 px-6"
+  }, main), footer && /* @__PURE__ */ import_react8.default.createElement("footer", {
+    className: "flex-grow-0 flex-shrink-0 flex items-center justify-center h-64"
+  }, footer));
+};
+
+// src/pop-confirm/PopConfirm.tsx
+var import_react9 = __toESM(require("react"));
 var PopConfirm = (props) => {
   const { onOk, onCancel, children, content, className } = props;
-  return /* @__PURE__ */ import_react8.default.createElement(Panel, {
+  return /* @__PURE__ */ import_react9.default.createElement(Panel, {
     className
-  }, /* @__PURE__ */ import_react8.default.createElement("div", {
+  }, /* @__PURE__ */ import_react9.default.createElement("div", {
     className: "mb-32"
-  }, children || content), /* @__PURE__ */ import_react8.default.createElement("div", {
+  }, children || content), /* @__PURE__ */ import_react9.default.createElement("div", {
     className: "flex justify-end"
-  }, onCancel && /* @__PURE__ */ import_react8.default.createElement(Button, {
+  }, onCancel && /* @__PURE__ */ import_react9.default.createElement(Button, {
     onClick: onCancel,
     type: "normal" /* NORMAL */
-  }, "Cancel"), onOk && /* @__PURE__ */ import_react8.default.createElement(Button, {
+  }, "Cancel"), onOk && /* @__PURE__ */ import_react9.default.createElement(Button, {
     onClick: onOk,
     className: "ml-16",
     type: "primary" /* PRIMARY */
   }, "OK")));
 };
+
+// src/table/Table.tsx
+var import_react10 = __toESM(require("react"));
+var Table = (props) => {
+  const { rowCount, rowRenderer, headerRenderer, className } = props;
+  const rows = [];
+  for (let i = 0; i < rowCount; i++) {
+    rows.push(/* @__PURE__ */ import_react10.default.createElement("tr", {
+      key: i
+    }, rowRenderer(i)));
+  }
+  return /* @__PURE__ */ import_react10.default.createElement("table", {
+    className
+  }, headerRenderer && /* @__PURE__ */ import_react10.default.createElement("thead", null, /* @__PURE__ */ import_react10.default.createElement("tr", null, headerRenderer())), /* @__PURE__ */ import_react10.default.createElement("tbody", null, rows));
+};
+Table.HCell = (props) => /* @__PURE__ */ import_react10.default.createElement("th", null, props.children);
+Table.Cell = (props) => /* @__PURE__ */ import_react10.default.createElement("td", null, props.children);
 module.exports = __toCommonJS(src_exports);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
@@ -296,8 +335,10 @@ module.exports = __toCommonJS(src_exports);
   LinkColor,
   Logo,
   Nav,
+  Page,
   Panel,
   PopConfirm,
+  Table,
   Tag,
   Tags
 });

package/dist/index.mjs

@@ -38,7 +38,7 @@ var Article = (props) => {
   return /* @__PURE__ */ React.createElement("div", {
     className: classNames("article", className)
   }, /* @__PURE__ */ React.createElement("div", {
-    className: "text-[2.25rem]"
+    className: "text-[2.25rem] leading-none"
   }, title), /* @__PURE__ */ React.createElement("hr", {
     className: "my-64 border-gray-200"
   }), /* @__PURE__ */ React.createElement("div", {
@@ -130,6 +130,11 @@ var HOVER_COLOR_MAPPING = {
   ["red" /* RED */]: "hover:bg-red-100",
   ["gray" /* GRAY */]: "hover:bg-gray-100"
 };
+var FOCUS_BG_COLOR_MAPPING = {
+  ["blue" /* BLUE */]: "focus:bg-blue-600",
+  ["red" /* RED */]: "focus:bg-red-500",
+  ["gray" /* GRAY */]: "focus:bg-gray-400"
+};
 var Link = (props) => {
   const _a = props, {
     color = "blue" /* BLUE */,
@@ -142,7 +147,7 @@ var Link = (props) => {
     "className",
     "children"
   ]);
-  const linkCls = classNames2(COLOR_MAPPING[color], className, "rounded", "no-underline", "transition-colors", HOVER_COLOR_MAPPING[color]);
+  const linkCls = classNames2(className, "rounded", "no-underline", "transition-colors", "focus:text-white", COLOR_MAPPING[color], HOVER_COLOR_MAPPING[color], FOCUS_BG_COLOR_MAPPING[color]);
   if (external) {
     return /* @__PURE__ */ React4.createElement("a", {
       href: props.to,
@@ -224,25 +229,57 @@ var Panel = (props) => {
   }, children);
 };
 
-// src/pop-confirm/PopConfirm.tsx
+// src/page/Page.tsx
 import React9 from "react";
+var Page = (props) => {
+  const { nav, main, footer } = props;
+  return /* @__PURE__ */ React9.createElement("main", {
+    className: "flex flex-col h-full"
+  }, /* @__PURE__ */ React9.createElement("div", {
+    className: `flx-grow-0 w-full sticky top-0 z-50`
+  }, nav), /* @__PURE__ */ React9.createElement("section", {
+    className: "flex-grow flex-shrink-0 px-6"
+  }, main), footer && /* @__PURE__ */ React9.createElement("footer", {
+    className: "flex-grow-0 flex-shrink-0 flex items-center justify-center h-64"
+  }, footer));
+};
+
+// src/pop-confirm/PopConfirm.tsx
+import React10 from "react";
 var PopConfirm = (props) => {
   const { onOk, onCancel, children, content, className } = props;
-  return /* @__PURE__ */ React9.createElement(Panel, {
+  return /* @__PURE__ */ React10.createElement(Panel, {
     className
-  }, /* @__PURE__ */ React9.createElement("div", {
+  }, /* @__PURE__ */ React10.createElement("div", {
     className: "mb-32"
-  }, children || content), /* @__PURE__ */ React9.createElement("div", {
+  }, children || content), /* @__PURE__ */ React10.createElement("div", {
     className: "flex justify-end"
-  }, onCancel && /* @__PURE__ */ React9.createElement(Button, {
+  }, onCancel && /* @__PURE__ */ React10.createElement(Button, {
     onClick: onCancel,
     type: "normal" /* NORMAL */
-  }, "Cancel"), onOk && /* @__PURE__ */ React9.createElement(Button, {
+  }, "Cancel"), onOk && /* @__PURE__ */ React10.createElement(Button, {
     onClick: onOk,
     className: "ml-16",
     type: "primary" /* PRIMARY */
   }, "OK")));
 };
+
+// src/table/Table.tsx
+import React11 from "react";
+var Table = (props) => {
+  const { rowCount, rowRenderer, headerRenderer, className } = props;
+  const rows = [];
+  for (let i = 0; i < rowCount; i++) {
+    rows.push(/* @__PURE__ */ React11.createElement("tr", {
+      key: i
+    }, rowRenderer(i)));
+  }
+  return /* @__PURE__ */ React11.createElement("table", {
+    className
+  }, headerRenderer && /* @__PURE__ */ React11.createElement("thead", null, /* @__PURE__ */ React11.createElement("tr", null, headerRenderer())), /* @__PURE__ */ React11.createElement("tbody", null, rows));
+};
+Table.HCell = (props) => /* @__PURE__ */ React11.createElement("th", null, props.children);
+Table.Cell = (props) => /* @__PURE__ */ React11.createElement("td", null, props.children);
 export {
   Article,
   Breadcrumb,
@@ -252,8 +289,10 @@ export {
   LinkColor,
   Logo,
   Nav,
+  Page,
   Panel,
   PopConfirm,
+  Table,
   Tag,
   Tags
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbki.ng/components",
-  "version": "1.4.6",
+  "version": "1.5.0",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -34,6 +34,7 @@
   },
   "peerDependencies": {
     "classnames": "^2.3.1",
-    "react-router-dom": "5.3.0"
+    "react-router-dom": "5.3.0",
+    "@tailwindcss/typography": "^0.5.0"
   }
 }