ui-beyable 1.0.0 → 1.0.2

package/README.md

@@ -1 +1,67 @@
-# beyableUI
+<!-- <style>
+   .architecture{
+    padding: 10px 0;
+    display: flex;
+    justify-content: center;
+    align-items:center;
+    
+   }
+   .architecture img{
+    width:150px;
+    height:160px;
+    padding:3px 2px;
+   }
+   .logo{
+    width:30%
+   }
+</style> -->
+
+# <p align="center"><a href="https://beyable.com"><img class="logo" src="./public/beyable_logo.svg" title="BEYABLE" alt="Beyable logo"></a></center></p>
+
+# <center> DESIGN SYSTEME</center>
+
+## <center>🧐 Description</center>
+
+This repository provides a library of React component who are currently using on the Saas plateforme BEYABLE.
+
+You can have a look to the Beyable company **[www.beyable.com](https://www.beyable.com/)** for more details
+
+Storybook **[beyableui.netlify.app](https://beyableui.netlify.app/)**
+
+
+## <center>⚙️ Getting started</center>
+
+first clone the repository and open it:
+
+```bash
+npm i 
+```
+And then i you want to test in local in other project:
+```bash
+npm link 
+```
+You can also migrate module to npm:
+```bash
+npm publish
+```
+
+## <center> 🤔 Architecture?</center>
+<div class="architecture">
+<img src="./public/architectureBeyableDS.png" style="display:flex;justify-content:center;" alt="architecture pic">
+
+- **assets**: every image and fonts that are using by components.
+- **components**: all components modules , .tsx components and .ts interfaces files are implemented, also css modules is now available.
+- **stories**: all stories order in two sections, component and display for the graphic chart.
+- **style**: all global style files from Yattune front. 
+
+</div>
+
+## <center>⭐ Components library</center>
+
+This library aims to provide all current component, is right in react typescript. 
+
+
+
+## <center>📝💻 License</center>
+
+MIT © [Beyable](https://www.beyable.com)

package/lib/cjs/components/Button/BYbtn.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { IBYbtn } from './type';
+declare const Btn: ({ children, type, htmlTag, onClickFunction, onClick, href, target, message, color, style, rounded, disabled, className, strong, light, size, fontSize, fullWidth, fullHeight, icon, iconPosition, arrow, dataFor, dataTip }: IBYbtn) => JSX.Element;
+export { Btn };
+declare const BYbtn: React.MemoExoticComponent<({ children, type, htmlTag, onClickFunction, onClick, href, target, message, color, style, rounded, disabled, className, strong, light, size, fontSize, fullWidth, fullHeight, icon, iconPosition, arrow, dataFor, dataTip }: IBYbtn) => JSX.Element>;
+export default BYbtn;

package/lib/cjs/components/Button/Btn.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { IBYbtn } from './type';
+declare const Btn: ({ children, type, htmlTag, onClickFunction, onClick, href, target, message, color, style, rounded, disabled, className, strong, light, size, fontSize, fullWidth, fullHeight, icon, iconPosition, arrow, dataFor, dataTip }: IBYbtn) => JSX.Element;
+export { Btn };
+declare const BYbtn: React.MemoExoticComponent<({ children, type, htmlTag, onClickFunction, onClick, href, target, message, color, style, rounded, disabled, className, strong, light, size, fontSize, fullWidth, fullHeight, icon, iconPosition, arrow, dataFor, dataTip }: IBYbtn) => JSX.Element>;
+export default BYbtn;

package/lib/cjs/components/Button/type.d.ts

@@ -0,0 +1,27 @@
+import React from "react";
+export interface IBYbtn {
+    children?: React.ReactNode;
+    type?: "button" | "submit" | "reset";
+    htmlTag?: 'button' | 'a';
+    onClickFunction?: (e: React.MouseEvent) => any;
+    onClick?: (e: React.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;
+}

package/lib/cjs/components/Collapse/BYcollapse.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { IBYcollapse } from './type';
+declare function Collapse({ label, children, defaultOpen }: IBYcollapse): JSX.Element;
+export default Collapse;

package/lib/cjs/components/Collapse/Collapse.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { IBYcollapse } from './type';
+declare function Collapse({ label, children, defaultOpen }: IBYcollapse): JSX.Element;
+export default Collapse;

package/lib/cjs/components/Collapse/type.d.ts

@@ -0,0 +1,5 @@
+export interface IBYcollapse {
+    label?: string;
+    children?: any;
+    defaultOpen?: boolean;
+}

package/lib/cjs/components/Modal/BYmodal.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { IBYmodal } from './types';
+declare function Modal({ children, isOpen, onClose, noClose, width, height, minHeight }: IBYmodal): JSX.Element;
+export default Modal;

package/lib/cjs/components/Modal/Modal.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { IBYmodal } from './types';
+import './modal.css';
+declare function Modal({ children, isOpen, onClose, noClose, width, height, minHeight }: IBYmodal): JSX.Element;
+export default Modal;

package/lib/cjs/components/Modal/types.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+interface IBYmodal {
+    children: React.ReactNode;
+    isOpen: boolean;
+    onClose?: (e: any) => any;
+    noClose?: boolean;
+    width?: string;
+    height?: string;
+    minHeight?: string;
+}
+export type { IBYmodal };

package/lib/cjs/components/Portal/BYportal.d.ts

@@ -0,0 +1,3 @@
+import { IBYportal } from './type';
+declare function Portal({ target, children }: IBYportal): any;
+export default Portal;

package/lib/cjs/components/Portal/type.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+interface IBYportal {
+    target?: any;
+    children: React.ReactNode;
+}
+export type { IBYportal };

package/lib/cjs/esm/components/BYbtn.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { IBYbtn } from './type';
+declare const Btn: ({ children, type, htmlTag, onClickFunction, onClick, href, target, message, color, style, rounded, disabled, className, strong, light, size, fontSize, fullWidth, fullHeight, icon, iconPosition, arrow, dataFor, dataTip }: IBYbtn) => React.JSX.Element;
+export { Btn };
+declare const BYbtn: React.MemoExoticComponent<({ children, type, htmlTag, onClickFunction, onClick, href, target, message, color, style, rounded, disabled, className, strong, light, size, fontSize, fullWidth, fullHeight, icon, iconPosition, arrow, dataFor, dataTip }: IBYbtn) => React.JSX.Element>;
+export default BYbtn;

package/lib/cjs/esm/components/Button/BYbtn.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { IBYbtn } from './type';
+declare const Btn: ({ children, type, htmlTag, onClickFunction, onClick, href, target, message, color, style, rounded, disabled, className, strong, light, size, fontSize, fullWidth, fullHeight, icon, iconPosition, arrow, dataFor, dataTip }: IBYbtn) => React.JSX.Element;
+export { Btn };
+declare const BYbtn: React.MemoExoticComponent<({ children, type, htmlTag, onClickFunction, onClick, href, target, message, color, style, rounded, disabled, className, strong, light, size, fontSize, fullWidth, fullHeight, icon, iconPosition, arrow, dataFor, dataTip }: IBYbtn) => React.JSX.Element>;
+export default BYbtn;

package/lib/cjs/esm/components/Button/type.d.ts

@@ -0,0 +1,27 @@
+import React from "react";
+export interface IBYbtn {
+    children?: React.ReactNode;
+    type?: "button" | "submit" | "reset";
+    htmlTag?: 'button' | 'a';
+    onClickFunction?: (e: React.MouseEvent) => any;
+    onClick?: (e: React.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;
+}

package/lib/cjs/esm/components/Button.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+interface IButtonProps extends React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
+    backgroundColor?: string;
+    color?: string;
+}
+declare const Button: React.FunctionComponent<IButtonProps>;
+export default Button;

package/lib/cjs/esm/components/Collapse/BYcollapse.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { IBYcollapse } from './type';
+declare function Collapse({ label, children, defaultOpen }: IBYcollapse): React.JSX.Element;
+export default Collapse;

package/lib/cjs/esm/components/Collapse/type.d.ts

@@ -0,0 +1,5 @@
+export interface IBYcollapse {
+    label?: string;
+    children?: any;
+    defaultOpen?: boolean;
+}

package/lib/cjs/esm/components/Modal/BYmodal.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { IBYmodal } from './types';
+declare function Modal({ children, isOpen, onClose, noClose, width, height, minHeight }: IBYmodal): JSX.Element;
+export default Modal;

package/lib/cjs/esm/components/Modal/types.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+interface IBYmodal {
+    children: React.ReactNode;
+    isOpen: boolean;
+    onClose?: (e: any) => any;
+    noClose?: boolean;
+    width?: string;
+    height?: string;
+    minHeight?: string;
+}
+export type { IBYmodal };

package/lib/cjs/esm/components/Portal/BYportal.d.ts

@@ -0,0 +1,3 @@
+import { IBYportal } from './type';
+declare function Portal({ target, children }: IBYportal): any;
+export default Portal;

package/lib/cjs/esm/components/Portal/type.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+interface IBYportal {
+    target?: any;
+    children: React.ReactNode;
+}
+export type { IBYportal };

package/lib/cjs/esm/components/type.d.ts

@@ -0,0 +1,27 @@
+import React from "react";
+export interface IBYbtn {
+    children?: React.ReactNode;
+    type?: "button" | "submit" | "reset";
+    htmlTag?: 'button' | 'a';
+    onClickFunction?: (e: React.MouseEvent) => any;
+    onClick?: (e: React.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;
+}

package/lib/cjs/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 };