ui-beyable 1.0.0 → 1.0.1

package/lib/esm/index.d.ts

@@ -0,0 +1,60 @@
+import BYBtn from './components/Button/BYbtn';
+import BYmodal from './components/Modal/BYmodal';
+import ByPortal from './components/Portal/BYportal';
+import BYcollapse from './components/Collapse/BYcollapse';
+import "./style/globalStyle.css";
+import "./style/params.css";
+import "./style/animate.css";
+import "./style/bootstrap-overrides.css";
+import "./style/bootstrap/css/bootstrap_framework.css";
+import "./style/btn.css";
+import "./style/c3.min.css";
+import "./style/checkbox.css";
+import "./style/colorpicker.css";
+import "./style/custom-antd.css";
+import "./style/customInput.css";
+import "./style/datepicker.css";
+import "./style/datepickerrange.min.css";
+import "./style/empty.css";
+import "./style/field.css";
+import "./style/flex.css";
+import "./style/fonts.css";
+import "./style/form.css";
+import "./style/gridstack.min.css";
+import "./style/Header.css";
+import "./style/icofont.min.css";
+import "./style/icon.css";
+import "./style/Informations.css";
+import "./style/insights.css";
+import "./style/jqCron.css";
+import "./style/listbox.css";
+import "./style/modal.css";
+import "./style/navigation.css";
+import "./style/notifications.css";
+import "./style/orchestration.css";
+import "./style/page.css";
+import "./style/panel.css";
+import "./style/place_autocomplete.css";
+import "./style/react-cron.css";
+import "./style/react-table.css";
+import "./style/reset.css";
+import "./style/scroll.css";
+import "./style/section.css";
+import "./style/setup.css";
+import "./style/shepherd.css";
+import "./style/simplegrid.css";
+import "./style/spinner.css";
+import "./style/stats.css";
+import "./style/style.css";
+import "./style/SideBar.css";
+import "./style/table.css";
+import "./style/tabs.css";
+import "./style/thumb_list.css";
+import "./style/tippy.css";
+import "./style/traffic-overview.css";
+import "./style/utils.css";
+import "./style/var.css";
+import "./style/variation.css";
+import "./style/wheel.css";
+import "./style/wishlists.css";
+export { BYBtn, BYmodal, ByPortal, BYcollapse };

package/lib/esm/index.js

@@ -0,0 +1,165 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+var Btn = function (_a) {
+    var children = _a.children, _b = _a.type, type = _b === void 0 ? 'button' : _b, _c = _a.htmlTag, htmlTag = _c === void 0 ? "button" : _c, onClickFunction = _a.onClickFunction, onClick = _a.onClick, _d = _a.href, href = _d === void 0 ? '' : _d, _e = _a.target, target = _e === void 0 ? '' : _e, _f = _a.message, message = _f === void 0 ? '' : _f, _g = _a.color, color = _g === void 0 ? 'primary' : _g, _h = _a.style, style = _h === void 0 ? '' : _h, _j = _a.rounded, rounded = _j === void 0 ? false : _j, _k = _a.disabled, disabled = _k === void 0 ? false : _k, _l = _a.className, className = _l === void 0 ? '' : _l, _m = _a.strong, strong = _m === void 0 ? false : _m, _o = _a.light, light = _o === void 0 ? false : _o, _p = _a.size, size = _p === void 0 ? "" : _p, _q = _a.fontSize, fontSize = _q === void 0 ? '' : _q, _r = _a.fullWidth, fullWidth = _r === void 0 ? false : _r, _s = _a.fullHeight, fullHeight = _s === void 0 ? false : _s, icon = _a.icon, _t = _a.iconPosition, iconPosition = _t === void 0 ? 'before' : _t, _u = _a.arrow, arrow = _u === void 0 ? false : _u, dataFor = _a.dataFor, dataTip = _a.dataTip;
+    var click = function (ev) {
+        if (typeof onClickFunction === 'function') {
+            onClickFunction(ev);
+        }
+        if (typeof onClick === 'function') {
+            onClick(ev);
+        }
+    };
+    var cssClass = ['btnUi'];
+    if (className) {
+        cssClass = cssClass.concat(className);
+    }
+    // Style and Color
+    var styleClass = 'btn';
+    if (style === 'outline' || style === 'ghost') {
+        styleClass += '_' + style;
+    }
+    styleClass += '_' + color;
+    cssClass.push(styleClass);
+    // Rounded
+    if (rounded) {
+        cssClass.push('btn_rounded');
+    }
+    // Disabled
+    if (disabled) {
+        cssClass.push('btn_disabled');
+    }
+    // Strong
+    if (strong) {
+        cssClass.push('btn_strong');
+    }
+    // Light
+    if (light) {
+        cssClass.push('btn_light');
+    }
+    // Arrow
+    if (arrow) {
+        cssClass.push('has_arrow');
+    }
+    // Size : xs, s, default, l, xl, xxl
+    if (size) {
+        cssClass.push('btn_' + size);
+    }
+    // Font size : s
+    if (fontSize) {
+        cssClass.push('btn_fs_' + fontSize);
+    }
+    // Icon
+    if (icon) {
+        cssClass.push('has_icon');
+    }
+    // Full width
+    if (fullWidth) {
+        cssClass.push('w_full');
+    }
+    // Full height
+    if (fullHeight) {
+        cssClass.push('h_full');
+    }
+    // Type
+    if (href) {
+        htmlTag = "a";
+    }
+    return (React.createElement("div", { className: "BYUI" },
+        htmlTag == 'button' &&
+            React.createElement("button", { type: type, className: cssClass.join(' '), onClick: function (e) { return click(e); }, "data-for": dataFor, "data-tip": dataTip },
+                icon && iconPosition !== 'after' &&
+                    icon,
+                message &&
+                    React.createElement("span", { className: "btn_txt" }, message),
+                children &&
+                    React.createElement("span", { className: "btn_txt" }, children),
+                icon && iconPosition === 'after' &&
+                    icon),
+        htmlTag == 'a' &&
+            React.createElement("a", { className: cssClass.join(' '), onClick: function (e) { return click(e); }, target: target, href: href, "data-for": dataFor, "data-tip": dataTip },
+                icon && iconPosition !== 'after' &&
+                    icon,
+                message &&
+                    React.createElement("span", { className: "btn_txt" }, message),
+                children &&
+                    React.createElement("span", { className: "btn_txt" }, children),
+                icon && iconPosition === 'after' &&
+                    icon)));
+};
+var BYbtn = React.memo(Btn);
+
+function Portal(_a) {
+    var _b = _a.target, target = _b === void 0 ? document.body : _b, children = _a.children;
+    return ReactDOM.createPortal(children, target);
+}
+
+function Modal(_a) {
+    var children = _a.children, _b = _a.isOpen, isOpen = _b === void 0 ? false : _b, onClose = _a.onClose, _c = _a.noClose, noClose = _c === void 0 ? false : _c, width = _a.width, height = _a.height, minHeight = _a.minHeight;
+    var style = { width: '', height: '', minHeight: '' };
+    var hide = function (ev) {
+        if (typeof onClose === 'function') {
+            onClose(ev);
+        }
+    };
+    if (width) {
+        style.width = width + 'px';
+    }
+    if (height) {
+        style.height = height + 'px';
+    }
+    if (minHeight) {
+        style.minHeight = 'min(100%, ' + minHeight + 'px)';
+    }
+    if (!isOpen)
+        return React.createElement(React.Fragment, null);
+    return (React.createElement(Portal, null,
+        React.createElement("div", { className: "modal_outer section_root", tabIndex: -1 },
+            React.createElement("div", { className: "modal_inner", style: style },
+                !noClose &&
+                    React.createElement("a", { onClick: function (ev) { return hide(ev); }, className: "modal_close" }),
+                children))));
+}
+
+var styles = {"wrapper_common":"collapse-module_wrapper_common__OhNXa","wrapper_close":"collapse-module_wrapper_close__pPihr","wrapper_open":"collapse-module_wrapper_open__-Pauk","header":"collapse-module_header__3XouW","header_btn":"collapse-module_header_btn__WqgSX","arrow":"collapse-module_arrow__m09w4","fas":"collapse-module_fas__KttZB","body":"collapse-module_body__n-AEV","wrapperCommon":"collapse-module_wrapper_common__OhNXa","wrapperClose":"collapse-module_wrapper_close__pPihr","wrapperOpen":"collapse-module_wrapper_open__-Pauk","headerBtn":"collapse-module_header_btn__WqgSX"};
+
+console.log('🚀--** ~ file: BYcollapse.tsx:2 ~ React:', React);
+function Collapse(_a) {
+    var label = _a.label, children = _a.children, _b = _a.defaultOpen, defaultOpen = _b === void 0 ? false : _b;
+    var _c = React.useState(true), isOpen = _c[0], setIsOpen = _c[1];
+    var bodyRef = React.useRef(null);
+    var toggle = function () {
+        if (!bodyRef.current)
+            return;
+        var delay = isOpen ? 0 : 300;
+        //@ts-ignore
+        var height = bodyRef.current.scrollHeight;
+        //@ts-ignore
+        bodyRef.current.style.height = height + 'px';
+        //@ts-ignore
+        bodyRef.current.style.overflow = 'hidden';
+        setTimeout(function () {
+            //@ts-ignore
+            bodyRef.current.style.height = '';
+            //@ts-ignore
+            bodyRef.current.style.overflow = '';
+        }, delay);
+        setIsOpen(!isOpen);
+    };
+    React.useEffect(function () {
+        if (defaultOpen && defaultOpen !== isOpen) {
+            setIsOpen(defaultOpen);
+        }
+    }, [defaultOpen]);
+    return (React.createElement("div", { className: isOpen ? styles.wrapper_open : styles.wrapper_close },
+        React.createElement("div", { className: styles.header },
+            React.createElement("div", { className: styles.header_btn, onClick: function () { return toggle(); } },
+                React.createElement("span", { className: styles.arrow },
+                    React.createElement("i", { className: "fas fa-sm fa-chevron-down", style: { 'display': 'block' } })),
+                label)),
+        React.createElement("div", { className: styles.body, ref: bodyRef }, children)));
+}
+
+export { BYbtn as BYBtn, Collapse as BYcollapse, Modal as BYmodal, Portal as ByPortal };
+//# sourceMappingURL=index.js.map

package/lib/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/index.d.ts

@@ -0,0 +1,51 @@
+import React$1 from 'react';
+
+interface IBYmodal {
+	children: React$1.ReactNode;
+	isOpen:boolean;
+	onClose?:(e:any) => any ; 
+	noClose?:boolean ; 
+	width?: string  ; 
+	height? : string; 
+	minHeight?: string; 
+}
+
+interface IBYportal {
+    target?: any;
+    children: React.ReactNode;
+}
+
+interface IBYbtn  {
+    children? : React$1.ReactNode;
+    type? : "button" | "submit" |"reset" ;
+    htmlTag?: 'button' | 'a';
+    onClickFunction? : (e : React$1.MouseEvent) => any;
+    onClick? : (e : React$1.MouseEvent) => any;
+    href? : string;
+    target? :string;
+    message? :string;
+    color? : string;
+    style? : string;
+    rounded? :boolean;
+    disabled? :boolean;
+    className? : string;
+    strong? :boolean;
+    light? :boolean;
+    size?: ""|"xxs"|'xs'|'s'|'m'|'l'|'xl'|'xxl';
+    fontSize? : string;
+    fullWidth?: boolean;
+    fullHeight?: boolean;
+    icon? : any;
+    iconPosition? : 'before' | 'after';
+    arrow? :boolean | "true" | "false";
+    dataFor? : string;
+    dataTip? : string;
+}
+
+interface IBYcollapse {
+    label?:string,
+	children?:any,
+	defaultOpen ?:boolean
+}
+
+export { IBYbtn, IBYcollapse, IBYmodal, IBYportal };

package/package.json

@@ -1,14 +1,16 @@
 {
   "name": "ui-beyable",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Ui library of Beyable projets",
-  "main": "src/index.ts",
-  "files": [
-    "src/**/*"
-  ],
+  "main": "./lib/cjs/index.js",
+  "module": "./lib/esm/index.js",
+  "types": "./lib/esm/index.d.ts",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "tsc"
+    "buildrollup": "rollup -c",
+    "build": "npm run build:esm && npm run build:cjs",
+    "build:esm": "tsc",
+    "build:cjs": "tsc --module commonjs --outDir lib/cjs",
+    "prepublishOnly": "rollup -c"
   },
   "plugins": [
     {
@@ -28,17 +30,35 @@
     "url": "https://github.com/BEYABLE/beyableUI/issues"
   },
   "homepage": "https://github.com/BEYABLE/beyableUI#readme",
+  "peerDependencies": {
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
+  },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.4.0",
+    "@rollup/plugin-commonjs": "^25.0.1",
+    "@rollup/plugin-node-resolve": "^15.1.0",
+    "@rollup/plugin-typescript": "^11.1.1",
     "@tsconfig/recommended": "^1.0.2",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "typescript": "^5.1.3",
-    "@types/react": "^18.2.12",
-    "@types/react-dom": "^18.2.5",
-    "typescript-plugin-css-modules": "^3.4.0"
+    "autoprefixer": "^10.4.14",
+    "postcss": "^8.4.24",
+    "rollup": "^3.25.1",
+    "rollup-plugin-dts": "^5.3.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-postcss-modules": "^2.1.1",
+    "rollup-plugin-typescript2": "^0.34.1",
+    "tslib": "^2.5.3",
+    "typescript-plugin-css-modules": "^5.0.1"
   },
   "devDependencies": {
-    
-  }
+    "@types/react": "18.2.0",
+    "@types/react-dom": "18.2.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "typescript": "^4.0.2"
+  },
+  "files": [
+    "/lib"
+  ]
 }

package/src/components/Button.css

@@ -1,3 +0,0 @@
-.btn{
-    color: blue;
-}

package/src/components/Button.js

@@ -1,8 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const Button = (props) => {
-    const { children } = props;
-    return ((0, jsx_runtime_1.jsx)("button", { children: children }));
-};
-exports.default = Button;

package/src/components/Button.tsx

@@ -1,18 +0,0 @@
-
-import React from "react";
- interface IButtonProps extends React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
-    backgroundColor?: string;
-    color?: string;
-}
-
- const Button: React.FunctionComponent<IButtonProps> = (props) => {
-    const { children } = props;
-
-
-    return (
-        <button >
-            {children}
-        </button>
-    )}; 
-    
-  export default Button

package/src/components/ByBtn.js

@@ -1,7 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const BYBtn = (props) => {
-    return (0, jsx_runtime_1.jsx)("button", { children: props.label });
-};
-exports.default = BYBtn;

package/src/components/ByBtn.tsx

@@ -1,11 +0,0 @@
-import React from "react";
-
-export interface ButtonProps {
-  label: string;
-}
-
-const BYBtn = (props: ButtonProps) => {
-  return <button>{props.label}</button>;
-};
-
-export default BYBtn;