ui-beyable 1.0.20 → 1.0.22-beta.0

package/README.md

@@ -55,11 +55,22 @@ Pre publish
 npm run prepublishOnly 
 ```
 
-You can also migrate module to npm:
+To publish the module to NPM : 
 ```bash
 npm publish
 ```
 
+To publish a BETA version to NPM : 
+
+Update the module version number, adding ``-beta.0`` at the end.
+The ``.0`` indicates which beta version it is.
+
+```bash
+npm publish --tag beta
+```
+
+
+
 ## <center> 🤔 Architecture?</center>
 <div class="architecture">
 <img src="./public/architectureBeyableDS.png" style="display:flex;justify-content:center;" alt="architecture pic">

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

@@ -1,4 +1,5 @@
 import React from 'react';
-import { IBtn } from './types';
+import { IBtn, IBtnGroup } from './types';
+declare function BtnGroup({ children, gap }: IBtnGroup): JSX.Element;
 declare const Btn: React.MemoExoticComponent<React.ForwardRefExoticComponent<IBtn & React.RefAttributes<unknown>>>;
-export { Btn };
+export { Btn, BtnGroup };

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

@@ -30,4 +30,8 @@ interface IBtn {
     tooltipHTML?: any;
     doInputHug?: boolean;
 }
-export { IBtn };
+interface IBtnGroup {
+    children?: React.ReactNode;
+    gap?: 'm' | 'l' | 'xl' | 'none';
+}
+export { IBtn, IBtnGroup };

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import './Dropdown.css';
-import { IDropdown } from './types';
+import { IDropdown, IDropdownSection } from './types';
 declare function Dropdown({ button, // need to accept onMouseDown and ref props
 buttonRef, toggle, isOpen, posX, clickEvent, children, scrollbar, flip, minWidth }: IDropdown): JSX.Element;
-export { Dropdown };
+declare function DropdownSection({ children }: IDropdownSection): JSX.Element;
+export { Dropdown, DropdownSection };

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

@@ -12,4 +12,7 @@ interface IDropdown {
     flip?: boolean;
     minWidth?: number;
 }
-export { IDropdown };
+interface IDropdownSection {
+    children: React.ReactNode;
+}
+export { IDropdown, IDropdownSection };

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { IEmptyState } from './types';
+declare function EmptyState({ title, text, primaryAction, secondaryAction, imageUrl, icon, verticalSize, verticalAlign, textSize, titleIsBold, hasSpinner, hasBorder }: IEmptyState): JSX.Element;
+export { EmptyState };

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

@@ -0,0 +1,16 @@
+import React from "react";
+interface IEmptyState {
+    title?: React.ReactNode | string;
+    text?: React.ReactNode | string;
+    primaryAction?: React.ReactNode;
+    secondaryAction?: React.ReactNode;
+    imageUrl?: string;
+    icon?: string;
+    textSize?: 's' | 'm' | 'l' | 'xl';
+    verticalSize?: 'xs' | 's' | 'm' | 'l' | 'xl';
+    verticalAlign?: boolean;
+    titleIsBold?: boolean;
+    hasSpinner?: boolean;
+    hasBorder?: boolean;
+}
+export { IEmptyState };

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { IMessage } from './types';
+declare function Message({ children, links, type, title, text, appearance, icon, showIcon, marginSize, verticalSize, noMargin, color }: IMessage): JSX.Element;
+export { Message };

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

@@ -0,0 +1,16 @@
+import React from 'react';
+interface IMessage {
+    children?: React.ReactNode;
+    links?: React.ReactNode;
+    type?: 'information' | 'success' | 'warning' | 'alert';
+    title?: React.ReactNode | string;
+    text?: React.ReactNode | string;
+    appearance?: 'background' | 'outline' | 'ghost';
+    icon?: 'default' | 'information' | 'success' | 'warning' | 'alert';
+    showIcon?: boolean;
+    marginSize?: 's' | 'm' | 'l' | 'none';
+    verticalSize?: 's' | 'm';
+    noMargin?: boolean;
+    color?: 'default' | 'purple';
+}
+export { IMessage };

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { ISelect } from './types';
+export default function SelectDropdown({ children, optionsList, value, friendlyValue, label, labelTooltip, labelTooltipHTML, description, placeHolder, labelPosition, labelClassName, blockClassName, onChange, disabled, isClearable, hasArrow, fullWidth, autoWidth, ellips, size, color, style, autocomplete, autocompleteValue, autocompletePlaceholder, autocompleteEmptyState, onAutocomplete, autocompleteIsLoading, clearAutocompleteOnClose, hasHoverSidebar, hoverSidebarRender, hoverSidebarPlaceholder }: ISelect): JSX.Element;

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

@@ -0,0 +1,44 @@
+import React from "react";
+interface IOption {
+    label: React.ReactNode | string;
+    value: any;
+    image?: string;
+    icon?: string;
+    isDisabled?: boolean;
+    hoverContent?: React.ReactNode;
+}
+interface ISelect {
+    children: React.ReactNode;
+    optionsList: Array<IOption>;
+    value: any;
+    friendlyValue?: React.ReactNode | string;
+    label?: React.ReactNode | string;
+    labelTooltip?: string;
+    labelTooltipHTML?: any;
+    description?: React.ReactNode | string;
+    placeHolder?: string;
+    labelPosition?: 'outer' | 'inner';
+    labelClassName?: string;
+    blockClassName?: string;
+    onChange?: any;
+    disabled?: boolean;
+    isClearable?: boolean;
+    hasArrow?: boolean;
+    fullWidth?: boolean;
+    autoWidth?: boolean;
+    ellips?: boolean;
+    size?: 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl';
+    color?: 'white' | 'grey';
+    style?: 'ghost' | 'ghost_underline' | 'highlighted';
+    autocomplete?: boolean;
+    autocompleteValue?: any;
+    autocompletePlaceholder?: string;
+    autocompleteEmptyState?: React.ReactNode;
+    onAutocomplete?: any;
+    autocompleteIsLoading?: boolean;
+    clearAutocompleteOnClose?: boolean;
+    hasHoverSidebar?: boolean;
+    hoverSidebarRender?: Function;
+    hoverSidebarPlaceholder?: React.ReactNode | string;
+}
+export { ISelect, IOption };

package/lib/cjs/index.d.ts

@@ -1,15 +1,17 @@
 import { AppRoot, AppHeader, AppLinkWrapper, AppLogo } from './components/App/App';
 import { Article } from './components/Article/Article';
-import { Btn } from './components/Btn/Btn';
+import { Btn, BtnGroup } from './components/Btn/Btn';
 import { Checkbox, Radio, Switch, CheckboxList } from './components/Checkbox/Checkbox';
 import Collapse from './components/Collapse/Collapse';
 import { Confirm } from './components/Confirm/Confirm';
 import { Dropdown } from './components/Dropdown/Dropdown';
+import { EmptyState } from './components/EmptyState/EmptyState';
 import { Fieldset } from './components/Fieldset/Fieldset';
 import { IconBtn } from './components/IconBtn/IconBtn';
 import { List, ListItem } from './components/List/List';
 import { Listbox, ListboxItem, ListboxSep } from './components/Listbox/Listbox';
 import { Mask } from './components/Mask/Mask';
+import { Message } from './components/Message/Message';
 import { Modal, ModalHeader, ModalBody, ModalFooter } from './components/Modal/Modal';
 import { Panel, PanelClose, PanelHeader, PanelBody } from './components/Panel/Panel';
 import { Picto } from './components/Picto/Picto';
@@ -18,5 +20,5 @@ import { Section } from './components/Section/Section';
 import { Spinner } from './components/Spinner/Spinner';
 import { Textfield, TextfieldIcon, SearchBar } from './components/Textfield/Textfield';
 declare const Theme: any;
-export { Theme, AppRoot, AppHeader, AppLinkWrapper, AppLogo, Article, Btn, Checkbox, CheckboxList, Collapse, // Not OK
-Confirm, Dropdown, Fieldset, IconBtn, List, ListItem, Listbox, ListboxItem, ListboxSep, Mask, Modal, ModalHeader, ModalBody, ModalFooter, Panel, PanelClose, PanelHeader, PanelBody, Picto, Portal, Radio, Section, SearchBar, Spinner, Switch, Textfield, TextfieldIcon };
+export { Theme, AppRoot, AppHeader, AppLinkWrapper, AppLogo, Article, Btn, BtnGroup, Checkbox, CheckboxList, Collapse, // Not OK
+Confirm, Dropdown, EmptyState, Fieldset, IconBtn, List, ListItem, Listbox, ListboxItem, ListboxSep, Mask, Message, Modal, ModalHeader, ModalBody, ModalFooter, Panel, PanelClose, PanelHeader, PanelBody, Picto, Portal, Radio, Section, SearchBar, Spinner, Switch, Textfield, TextfieldIcon };