ui-beyable 1.0.4 → 1.0.6

package/README.md

@@ -1,67 +1,77 @@
-<!-- <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)
+<!-- <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 
+```
+In your app folder
+```bash
+npm link ui-beyable
+```
+
+After every code changes
+```bash
+npm run buildlib 
+```
+
+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/Modal/Modal.d.ts

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

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

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

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { IPanel, IPanelClose } from './types';
+declare function Panel({ children, isOpen, onClose, width, noClose, side, overlay, closeOnOverlay, offsetWidth, hasOffset }: IPanel): JSX.Element;
+declare function PanelClose({ onClick }: IPanelClose): JSX.Element;
+export { Panel, PanelClose };

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

@@ -0,0 +1,17 @@
+import React from "react";
+interface IPanel {
+    children: React.ReactNode;
+    isOpen: boolean;
+    onClose?: (e: any) => any;
+    noClose?: boolean;
+    side?: string;
+    width?: number;
+    overlay?: boolean;
+    closeOnOverlay?: boolean;
+    hasOffset?: boolean;
+    offsetWidth?: number;
+}
+interface IPanelClose {
+    onClick?: (e: any) => any;
+}
+export type { IPanel, IPanelClose };