@oliasoft-open-source/react-ui-library 3.12.0-beta-20 → 3.12.0-beta-21

package/dist/common-enum.d.ts

@@ -0,0 +1,73 @@
+export declare enum TriggerType {
+    TEXT = "Text",
+    BUTTON = "Button",
+    DROP_DOWN_BUTTON = "DropDownButton",
+    COMPONENT = "Component"
+}
+export declare enum GroupOrder {
+    FIRST = "first",
+    MIDDLE = "middle",
+    LAST = "last"
+}
+export declare enum Color {
+    DANGER = "danger",
+    RED = "red",
+    WHITE = "white",
+    SUCCESS = "success",
+    GREEN = "green",
+    MUTED = "muted"
+}
+export declare enum Align {
+    LEFT = "left",
+    RIGHT = "right",
+    CENTER = "center"
+}
+export declare enum ButtonPosition {
+    TOP = "top",
+    BOTTOM = "bottom"
+}
+export declare enum IconType {
+    LIBRARY = "library",
+    ADD = "add",
+    DRAG = "drag",
+    DRAG_HORIZONTAL = "drag horizontal",
+    HELP = "help",
+    NOTIFICATION = "notification",
+    MENU = "menu",
+    EDIT = "edit",
+    FAST_FORWARD = "fast forward",
+    INDENT = "indent",
+    STAR = "star",
+    LIST = "list",
+    SETTINGS = "settings",
+    CHECK = "check",
+    LOCK = "lock",
+    UNLOCK = "unlock",
+    CLOSE = "close",
+    SUCCESS = "success",
+    WARNING = "warning",
+    ERROR = "error",
+    INFO = "info",
+    LEFT = "left",
+    COLLAPSE = "collapse",
+    EXPAND = "expand",
+    SORT_ASCENDING = "sort ascending",
+    SORT_DESCENDING = "sort descending",
+    FAST_BACKWARD = "fast backward",
+    CHEVRON_DOWN = "chevron down",
+    CHEVRON_RIGHT = "chevron right",
+    CHEVRON_LEFT = "chevron left",
+    CHEVRON_DOUBLE_LEFT = "chevron double left",
+    CHEVRON_DOUBLE_RIGHT = "chevron double right"
+}
+export declare enum Theme {
+    DARK = "dark",
+    WHITE = "white",
+    LIGHT = "light",
+    INHERIT = "inherit"
+}
+export declare enum InputType {
+    TEXT = "text",
+    RADIO = "radio",
+    CHECKBOX = "checkbox"
+}

package/dist/common-enum.js

@@ -0,0 +1,81 @@
+export var TriggerType;
+(function (TriggerType) {
+    TriggerType["TEXT"] = "Text";
+    TriggerType["BUTTON"] = "Button";
+    TriggerType["DROP_DOWN_BUTTON"] = "DropDownButton";
+    TriggerType["COMPONENT"] = "Component";
+})(TriggerType || (TriggerType = {}));
+export var GroupOrder;
+(function (GroupOrder) {
+    GroupOrder["FIRST"] = "first";
+    GroupOrder["MIDDLE"] = "middle";
+    GroupOrder["LAST"] = "last";
+})(GroupOrder || (GroupOrder = {}));
+export var Color;
+(function (Color) {
+    Color["DANGER"] = "danger";
+    Color["RED"] = "red";
+    Color["WHITE"] = "white";
+    Color["SUCCESS"] = "success";
+    Color["GREEN"] = "green";
+    Color["MUTED"] = "muted";
+})(Color || (Color = {}));
+export var Align;
+(function (Align) {
+    Align["LEFT"] = "left";
+    Align["RIGHT"] = "right";
+    Align["CENTER"] = "center";
+})(Align || (Align = {}));
+export var ButtonPosition;
+(function (ButtonPosition) {
+    ButtonPosition["TOP"] = "top";
+    ButtonPosition["BOTTOM"] = "bottom";
+})(ButtonPosition || (ButtonPosition = {}));
+export var IconType;
+(function (IconType) {
+    IconType["LIBRARY"] = "library";
+    IconType["ADD"] = "add";
+    IconType["DRAG"] = "drag";
+    IconType["DRAG_HORIZONTAL"] = "drag horizontal";
+    IconType["HELP"] = "help";
+    IconType["NOTIFICATION"] = "notification";
+    IconType["MENU"] = "menu";
+    IconType["EDIT"] = "edit";
+    IconType["FAST_FORWARD"] = "fast forward";
+    IconType["INDENT"] = "indent";
+    IconType["STAR"] = "star";
+    IconType["LIST"] = "list";
+    IconType["SETTINGS"] = "settings";
+    IconType["CHECK"] = "check";
+    IconType["LOCK"] = "lock";
+    IconType["UNLOCK"] = "unlock";
+    IconType["CLOSE"] = "close";
+    IconType["SUCCESS"] = "success";
+    IconType["WARNING"] = "warning";
+    IconType["ERROR"] = "error";
+    IconType["INFO"] = "info";
+    IconType["LEFT"] = "left";
+    IconType["COLLAPSE"] = "collapse";
+    IconType["EXPAND"] = "expand";
+    IconType["SORT_ASCENDING"] = "sort ascending";
+    IconType["SORT_DESCENDING"] = "sort descending";
+    IconType["FAST_BACKWARD"] = "fast backward";
+    IconType["CHEVRON_DOWN"] = "chevron down";
+    IconType["CHEVRON_RIGHT"] = "chevron right";
+    IconType["CHEVRON_LEFT"] = "chevron left";
+    IconType["CHEVRON_DOUBLE_LEFT"] = "chevron double left";
+    IconType["CHEVRON_DOUBLE_RIGHT"] = "chevron double right";
+})(IconType || (IconType = {}));
+export var Theme;
+(function (Theme) {
+    Theme["DARK"] = "dark";
+    Theme["WHITE"] = "white";
+    Theme["LIGHT"] = "light";
+    Theme["INHERIT"] = "inherit";
+})(Theme || (Theme = {}));
+export var InputType;
+(function (InputType) {
+    InputType["TEXT"] = "text";
+    InputType["RADIO"] = "radio";
+    InputType["CHECKBOX"] = "checkbox";
+})(InputType || (InputType = {}));

package/dist/components/accordion/accordion.d.ts

@@ -0,0 +1,4 @@
+import { IAccordionBaseProps, IAccordionManagedProps, IAccordionProps } from './accordion.interface';
+export declare const AccordionBase: ({ heading, expanded, bordered, padding, children, squareBottom, onClick, testId, }: IAccordionBaseProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AccordionManaged: ({ heading, bordered, padding, initialExpanded, children, testId, }: IAccordionManagedProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Accordion: ({ heading, expanded, managed, bordered, padding, children, onClick, squareBottom, testId, }: IAccordionProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/accordion/accordion.interface.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+export interface IAccordionBaseProps {
+    heading: ReactNode;
+    expanded?: boolean;
+    bordered?: boolean;
+    padding?: boolean;
+    children?: ReactNode;
+    squareBottom?: boolean;
+    onClick?: () => void;
+    testId?: string;
+}
+export interface IAccordionManagedProps extends IAccordionBaseProps {
+    initialExpanded?: boolean;
+}
+export interface IAccordionProps extends IAccordionBaseProps {
+    managed?: boolean;
+}

package/dist/components/accordion/accordion.interface.js

@@ -0,0 +1 @@
+export {};

package/dist/components/accordion/accordion.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import cx from 'classnames';
+import { Chevron } from './chevron/chevron';
+import styles from './accordion.module.less';
+export const AccordionBase = ({ heading, expanded = false, bordered = false, padding = true, children, squareBottom = false, onClick, testId, }) => {
+    return (_jsxs("div", { className: cx(styles.accordion, bordered ? styles.bordered : '', expanded ? styles.expanded : '', squareBottom ? styles.squareBottom : ''), children: [_jsxs("div", { className: cx(styles.accordionHeader, onClick ? styles.clickable : ''), onClick: onClick, "data-testid": testId, children: [_jsx(Chevron, { expanded: expanded }), _jsx("div", { className: styles.heading, children: heading })] }), expanded && children && (_jsx("div", { className: cx(styles.accordionContent, bordered && padding ? styles.padding : ''), children: children }))] }));
+};
+export const AccordionManaged = ({ heading, bordered, padding, initialExpanded = false, children, testId, }) => {
+    const [expanded, toggle] = React.useState(initialExpanded);
+    return (_jsx(AccordionBase, { heading: heading, bordered: bordered, padding: padding, expanded: expanded, onClick: () => {
+            toggle(!expanded);
+        }, testId: testId, children: children }));
+};
+export const Accordion = ({ heading, expanded = false, managed = false, bordered = false, padding = true, children, onClick, squareBottom = false, testId, }) => {
+    return managed ? (_jsx(AccordionManaged, { heading: heading, expanded: expanded, bordered: bordered, padding: padding, squareBottom: squareBottom, onClick: onClick, testId: testId, children: children })) : (_jsx(AccordionBase, { heading: heading, expanded: expanded, bordered: bordered, padding: padding, squareBottom: squareBottom, onClick: onClick, testId: testId, children: children }));
+};

package/dist/components/accordion/accordion.stories.d.ts

@@ -0,0 +1,11 @@
+import { StoryFn } from '@storybook/react';
+import { IAccordionProps } from './accordion.interface';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, IAccordionProps>;
+export default _default;
+export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IAccordionProps>;
+export declare const Bordered: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IAccordionProps>;
+export declare const NoContentPadding: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IAccordionProps>;
+export declare const HelpIcon: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IAccordionProps>;
+export declare const LibraryIcon: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IAccordionProps>;
+export declare const CustomIcon: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IAccordionProps>;
+export declare const AccordionWithDefaultToggle: StoryFn;

package/dist/components/accordion/accordion.stories.js

@@ -0,0 +1,140 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { useArgs } from '@storybook/addons';
+import { AccordionWithDefaultToggle as AccordionWithDefaultToggleComponent } from './helpers/accordion-with-default-toggle';
+import { Accordion } from './accordion';
+import { Heading } from '../heading/heading';
+import { Divider } from '../divider/divider';
+import { Table } from '../table/table';
+import { IconType } from "../../common-enum";
+export default {
+    title: 'Layout/Accordion',
+    component: Accordion,
+    args: {
+        bordered: false,
+        expanded: false,
+        managed: false,
+        children: 'Example content',
+    },
+};
+const Template = (args) => {
+    const [_, updateArgs] = useArgs();
+    const toggleExpanded = () => {
+        updateArgs({ expanded: !args.expanded });
+    };
+    return (_jsx(Accordion
+    // @ts-ignore: write explicit reason: write explicit reason
+    , { 
+        // @ts-ignore: write explicit reason: write explicit reason
+        heading: _jsx(Heading, { onClick: toggleExpanded, children: "Heading" }), ...args }));
+};
+export const Default = Template.bind({});
+export const Bordered = Template.bind({});
+Bordered.args = {
+    bordered: true,
+};
+export const NoContentPadding = Template.bind({});
+NoContentPadding.args = {
+    bordered: true,
+    expanded: true,
+    padding: false,
+};
+export const HelpIcon = Template.bind({});
+HelpIcon.args = {
+    bordered: true,
+    expanded: true,
+    heading: _jsx(Heading, { onClickHelp: () => console.log('help!'), children: "Heading" }),
+};
+export const LibraryIcon = Template.bind({});
+LibraryIcon.args = {
+    bordered: true,
+    expanded: true,
+    heading: (_jsx(Heading, { libraryIcon: {
+            onClick: () => { },
+            tooltip: 'Show in library',
+        }, children: "Heading" })),
+};
+export const CustomIcon = Template.bind({});
+CustomIcon.args = {
+    bordered: true,
+    expanded: true,
+    heading: (_jsx(Heading, { onIconClick: () => { }, icon: IconType.ADD, children: "Heading" })),
+};
+export const AccordionWithDefaultToggle = () => {
+    const [enabled, setEnabled] = useState(true);
+    const tableWithFluidWidth = {
+        bordered: false,
+        headers: [
+            {
+                cells: [{ value: 'Name' }, { value: 'Origin' }],
+            },
+        ],
+        rows: [
+            {
+                cells: [{ value: 'Brown rice' }, { value: 'Vietnam' }],
+            },
+            {
+                cells: [{ value: 'Buckwheat' }, { value: 'Poland' }],
+            },
+            {
+                cells: [{ value: 'Couscous' }, { value: 'France' }],
+            },
+        ],
+    };
+    const tableWithFluidWidthEditable = {
+        bordered: false,
+        headers: [
+            {
+                cells: [{ value: 'Name' }, { value: 'Origin' }],
+            },
+        ],
+        rows: [
+            {
+                cells: [
+                    { value: 'Brown rice', type: 'Input', onChange: () => { } },
+                    {
+                        type: 'Select',
+                        options: [
+                            { label: 'Vietnam', value: 'Vietnam' },
+                            { label: 'Other', value: 'Other' },
+                        ],
+                        value: { label: 'Vietnam', value: 'Vietnam' },
+                        native: true,
+                        onChange: () => { },
+                    },
+                ],
+            },
+            {
+                cells: [
+                    { value: 'Buckwheat', type: 'Input', onChange: () => { } },
+                    {
+                        type: 'Select',
+                        options: [
+                            { label: 'Poland', value: 'Poland' },
+                            { label: 'Other', value: 'Other' },
+                        ],
+                        value: { label: 'Poland', value: 'Poland' },
+                        native: true,
+                        onChange: () => { },
+                    },
+                ],
+            },
+            {
+                cells: [
+                    { value: 'Couscous', type: 'Input', onChange: () => { } },
+                    {
+                        type: 'Select',
+                        options: [
+                            { label: 'France', value: 'France' },
+                            { label: 'Other', value: 'Other' },
+                        ],
+                        value: { label: 'France', value: 'France' },
+                        native: true,
+                        onChange: () => { },
+                    },
+                ],
+            },
+        ],
+    };
+    return (_jsxs(AccordionWithDefaultToggleComponent, { heading: _jsx(Heading, { onClickHelp: () => console.log('help!'), children: "Heading" }), toggleLabel: "Default Settings", onClickDefaultToggle: () => setEnabled(!enabled), padding: false, children: [_jsx(Divider, { margin: 0 }), _jsx(Table, { table: enabled ? tableWithFluidWidth : tableWithFluidWidthEditable })] }));
+};

package/dist/components/accordion/chevron/chevron.d.ts

@@ -0,0 +1,5 @@
+interface IChevronProps {
+    expanded: boolean;
+}
+export declare const Chevron: ({ expanded }: IChevronProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/accordion/chevron/chevron.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import cx from 'classnames';
+import styles from './chevron.module.less';
+import { Icon } from '../../icon/icon';
+import { IconType } from "../../../common-enum";
+export const Chevron = ({ expanded }) => {
+    return (_jsx("span", { className: cx(styles.chevron, expanded ? styles.expanded : ''), children: _jsx(Icon, { icon: IconType.CHEVRON_RIGHT }) }));
+};

package/dist/components/accordion/enum.d.ts

@@ -0,0 +1,4 @@
+export declare enum AccordionActionType {
+    TOGGLE_ACCORDION = "TOGGLE_ACCORDION",
+    TOGGLE_ENABLE = "TOGGLE_ENABLE"
+}

package/dist/components/accordion/enum.js

@@ -0,0 +1,5 @@
+export var AccordionActionType;
+(function (AccordionActionType) {
+    AccordionActionType["TOGGLE_ACCORDION"] = "TOGGLE_ACCORDION";
+    AccordionActionType["TOGGLE_ENABLE"] = "TOGGLE_ENABLE";
+})(AccordionActionType || (AccordionActionType = {}));

package/dist/components/accordion/helpers/accordion-with-default-toggle.d.ts

@@ -0,0 +1,12 @@
+import { ChangeEvent, ReactNode } from 'react';
+interface IAccordionWithDefaultToggleProps {
+    heading: ReactNode;
+    toggleLabel: string;
+    expanded?: boolean;
+    defaultEnabled?: boolean;
+    onClickDefaultToggle?: (evt: ChangeEvent<HTMLInputElement>) => void;
+    padding?: boolean;
+    children?: ReactNode;
+}
+export declare const AccordionWithDefaultToggle: ({ heading, toggleLabel, onClickDefaultToggle, expanded, defaultEnabled, padding, children, }: IAccordionWithDefaultToggleProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/accordion/helpers/accordion-with-default-toggle.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useReducer } from 'react';
+import cx from 'classnames';
+import { Accordion } from '../accordion';
+import { CheckBox } from '../../check-box/check-box';
+import styles from './accordion-with-default-toggle.module.less';
+import { AccordionActionType } from "../enum";
+const reducer = (state, action) => {
+    switch (action.type) {
+        case AccordionActionType.TOGGLE_ACCORDION:
+            return {
+                ...state,
+                accordionExpanded: !state.accordionExpanded,
+            };
+        case AccordionActionType.TOGGLE_ENABLE:
+            return {
+                ...state,
+                defaultEnabled: !state.defaultEnabled,
+                accordionExpanded: state.defaultEnabled,
+            };
+        default:
+            return state;
+    }
+};
+export const AccordionWithDefaultToggle = ({ heading, toggleLabel, onClickDefaultToggle, expanded = false, defaultEnabled = true, padding = true, children, }) => {
+    const [state, dispatch] = useReducer(reducer, {
+        accordionExpanded: expanded,
+        defaultEnabled,
+    });
+    const content = (_jsxs(_Fragment, { children: [_jsx("div", { className: styles.checkboxWrapper, children: _jsx(CheckBox, { label: toggleLabel, onChange: (evt) => {
+                        dispatch({ type: AccordionActionType.TOGGLE_ENABLE });
+                        onClickDefaultToggle?.(evt);
+                    }, checked: state.defaultEnabled }) }), state.accordionExpanded && (_jsx("div", { className: styles.contentWrapper, children: children }))] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Accordion, { heading: heading, bordered: true, expanded: state.accordionExpanded, squareBottom: true, onClick: () => dispatch({ type: AccordionActionType.TOGGLE_ACCORDION }) }), _jsx("div", { className: cx(styles.bordered, padding ? styles.padding : ''), children: content })] }));
+};

package/dist/components/actions/actions.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+import { IAction, ISubAction } from './actions.interface';
+export interface ISubMenuProps {
+    subActions: ISubAction[];
+    subMenuIcon?: ReactNode | string;
+    primary?: boolean;
+    testId?: string;
+    tooltip?: ReactNode | string;
+}
+export interface IActionProps {
+    actions: IAction[];
+    closeLayer?: () => void;
+}
+export declare const Actions: (props: IActionProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/actions/actions.interface.d.ts

@@ -0,0 +1,25 @@
+import React, { ReactNode } from 'react';
+export interface ISubAction {
+    label: string | ReactNode;
+    icon?: ReactNode;
+    onClick: (evt: React.MouseEvent) => void;
+    testId?: string;
+    disabled?: boolean;
+}
+export interface IAction {
+    label?: string;
+    childComponent?: ReactNode;
+    subActions?: ISubAction[];
+    primary?: boolean;
+    icon?: ReactNode;
+    testId?: string;
+    hidden?: boolean;
+    disabled?: boolean;
+    onClick?: (evt: React.MouseEvent, id?: string | number) => void;
+    tooltip?: ReactNode | string;
+}
+export interface IChildComponent {
+    childComponent: ReactNode | (() => ReactNode);
+    testId?: string;
+}
+export type IActionsType = (IAction | ISubAction | IChildComponent)[];

package/dist/components/actions/actions.interface.js

@@ -0,0 +1 @@
+export {};

package/dist/components/actions/actions.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useContext } from 'react';
+import cx from 'classnames';
+import { isFunction } from 'lodash';
+import { Button } from '../button/button';
+import styles from './actions.module.less';
+import { Menu } from '../menu/menu'; // TODO - Dependency cycle
+import { DisabledContext } from '../../helpers/disabled-context';
+import { Color, IconType, TriggerType } from '../../common-enum';
+const SubmenuActions = (props) => {
+    const { subActions, subMenuIcon, primary, testId, tooltip } = props;
+    const menuButton = (_jsx(Button, { colored: primary ? true : Color.MUTED, basic: !primary, round: true, small: true, icon: subMenuIcon || IconType.MENU, testId: testId, tooltip: tooltip }));
+    if (subActions.length) {
+        const subMenu = {
+            trigger: TriggerType.COMPONENT,
+            component: menuButton,
+            sections: subActions.map((a) => {
+                return {
+                    type: 'Option',
+                    label: a.label,
+                    icon: a.icon,
+                    testId: a.testId,
+                    disabled: a.disabled,
+                    onClick: (evt) => {
+                        evt.stopPropagation();
+                        evt.preventDefault();
+                        if (isFunction(a.onClick)) {
+                            a.onClick(evt);
+                        }
+                    },
+                };
+            }),
+        };
+        return _jsx(Menu, { menu: subMenu });
+    }
+    return null;
+};
+export const Actions = (props) => {
+    const disabledContext = useContext(DisabledContext);
+    const { actions = [], closeLayer } = props;
+    return (_jsx("div", { className: cx(styles.actions), children: actions.map((action, index) => {
+            const hidden = action?.hidden || !action || !Object.keys(action).length;
+            if (!hidden) {
+                if (action.childComponent &&
+                    React.isValidElement(action.childComponent)) {
+                    return (_jsx("div", { "data-testid": action.testId, children: action.childComponent }, index));
+                }
+                else if (action.subActions) {
+                    return (_jsx(SubmenuActions, { subActions: action.subActions, primary: action.primary, subMenuIcon: action.icon, testId: action.testId, tooltip: action.tooltip }, index));
+                }
+                else {
+                    return (_jsx(Button, { colored: action.primary ? true : 'muted', round: true, basic: !action.primary, disabled: action.disabled, small: true, name: action.label, icon: action.icon ? action.icon : null, onClick: (evt) => {
+                            if (closeLayer) {
+                                closeLayer();
+                            }
+                            evt.stopPropagation();
+                            evt.preventDefault();
+                            if (!(action.disabled || disabledContext) &&
+                                /* Sentry WELLDESIGN-1EB */ isFunction(action.onClick)) {
+                                action.onClick(evt);
+                            }
+                        }, testId: action.testId, tooltip: action.tooltip }, index));
+                }
+            }
+        }) }));
+};

package/dist/components/actions/actions.stories.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import { IActionsType } from './actions.interface';
+declare const _default: {
+    title: string;
+    component: (props: import("./actions").IActionProps) => import("react/jsx-runtime").JSX.Element;
+    args: {
+        actions: IActionsType;
+        right: boolean;
+    };
+    decorators: ((story: () => React.ReactNode) => import("react/jsx-runtime").JSX.Element)[];
+    parameters: {
+        docs: {
+            source: {
+                excludeDecorators: boolean;
+            };
+        };
+    };
+};
+export default _default;
+interface TemplateProps {
+    actions: IActionsType;
+    right?: boolean;
+}
+export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, TemplateProps>;
+export declare const Tooltip: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, TemplateProps>;

package/dist/components/actions/actions.stories.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Actions } from './actions';
+const actions = [
+    {
+        label: 'Download',
+        icon: 'download',
+        onClick: () => { },
+        testId: 'download',
+    },
+    {
+        label: 'Help',
+        icon: 'help',
+        onClick: () => { },
+        disabled: true,
+        testId: 'help',
+    },
+    {
+        label: 'More',
+        testId: 'more',
+        subActions: [
+            {
+                label: 'Move Up',
+                icon: 'up',
+                disabled: true,
+                onClick: () => { },
+                testId: 'move-up',
+            },
+            {
+                label: 'Move Down',
+                icon: 'down',
+                onClick: () => { },
+                testId: 'move-down',
+            },
+        ],
+    },
+    {
+        primary: true,
+        label: 'Add',
+        icon: 'add',
+        onClick: () => { },
+        testId: 'add',
+    },
+];
+export default {
+    title: 'Basic/Actions',
+    component: Actions,
+    args: {
+        actions,
+        right: false,
+    },
+    decorators: [
+        (story) => (_jsx("div", { style: { display: 'inline-flex' }, children: story() })),
+    ],
+    parameters: {
+        docs: {
+            source: {
+                excludeDecorators: true,
+            },
+        },
+    },
+};
+const Template = (args) => _jsx(Actions, { ...args });
+export const Default = Template.bind({});
+export const Tooltip = Template.bind({});
+Tooltip.args = {
+    actions: actions.map((action) => ({ ...action, tooltip: action.label })),
+};

package/dist/components/badge/badge.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+export interface IBadgeProps {
+    children?: ReactNode;
+    color?: string;
+    title?: string | number | null;
+    dot?: boolean;
+    margin?: string | number | null;
+    small?: boolean;
+}
+export declare const Badge: ({ children, color, title, dot, margin, small, }: IBadgeProps) => import("react/jsx-runtime").JSX.Element;