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

package/dist/components/tree/tree-item.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cx from 'classnames';
+import listStyles from '../list/list.module.less';
+import styles from './tree.module.less';
+import { Actions } from '../actions/actions';
+import { MetaContent } from '../list/list-row/meta-content';
+import { Button } from '../button/button';
+import { Icon } from '../icon/icon';
+import { Color, IconType } from '../../common-enum';
+// TODO: Replace this with reused list-item component
+export const TreeItem = ({ node, depth, isOpen, onToggle, hasChild, draggable, }) => {
+    const { id, data } = node;
+    const { active, testId, onClick, actions = [] } = data;
+    const handleToggle = (e) => {
+        e.stopPropagation();
+        onToggle(id);
+    };
+    // TODO: Decide whether to implement open on drag over
+    // const dragOverProps = useDragOver(id, isOpen, onToggle);
+    return (_jsx("div", { className: cx(listStyles.item, listStyles.action, active ? listStyles.active : ''), "data-testid": testId, onClick: (evt) => {
+            if (onClick) {
+                onClick(evt);
+            }
+        }, children: _jsxs("div", { className: listStyles.itemHeader, style: {
+                marginInlineStart: depth * 24,
+            }, children: [draggable && (_jsx("div", { className: listStyles.drag, children: _jsx(Icon, { icon: IconType.DRAG }) })), hasChild && (_jsx("div", { className: styles.toggle, children: _jsx(Button, { basic: true, colored: Color.MUTED, small: true, round: true, icon: isOpen ? IconType.COLLAPSE : IconType.EXPAND, onClick: handleToggle }) })), _jsx(MetaContent, { item: data }), _jsx("div", { className: listStyles.right, children: _jsx("div", { className: listStyles.actions, children: _jsx(Actions, { actions: actions }) }) })] }) }));
+};

package/dist/components/tree/tree-placeholder.d.ts

@@ -0,0 +1,4 @@
+export interface ITreePlaceholderProps {
+    depth: number;
+}
+export declare const TreePlaceholder: ({ depth }: ITreePlaceholderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/tree/tree-placeholder.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styles from './tree.module.less';
+export const TreePlaceholder = ({ depth }) => (_jsx("div", { className: styles.placeholder, style: { left: depth * 24 } }));

package/dist/components/tree/tree.d.ts

@@ -0,0 +1,42 @@
+import React, { RefObject } from 'react';
+export interface ITreeListProps {
+    name?: string | React.ReactNode;
+    noHeader?: boolean;
+    items: {
+        id: string | number;
+        name: string | React.ReactNode;
+        parent: string | number;
+        droppable?: boolean;
+        details?: string | React.ReactNode;
+        active?: boolean;
+        testId?: string;
+        icon?: {
+            icon: React.ReactNode;
+            color: string;
+            tooltip?: {
+                text: string | number | React.ReactNode;
+                error?: boolean;
+                warning?: boolean;
+                placement?: string;
+                enabled?: boolean;
+                maxWidth?: string | number;
+                triggerOffset?: string | number;
+                possiblePlacements?: string[];
+                fontSize?: string | number;
+                padding?: string | number;
+            };
+        };
+    }[];
+    onClick?: () => void;
+    actions?: any[];
+}
+export interface ITreeProps {
+    list: ITreeListProps;
+    draggable?: boolean;
+    onListReorder?: (newList: any[]) => void;
+    onChangeOpen?: (id: string | number) => void;
+    testId?: string;
+    isInitialOpen?: boolean;
+    treeRef?: RefObject<any>;
+}
+export declare const Tree: ({ list, draggable, onListReorder, onChangeOpen, testId, isInitialOpen, treeRef, }: ITreeProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/tree/tree.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DndProvider } from 'react-dnd';
+import { Tree as TreeView, MultiBackend, getBackendOptions, } from '@minoru/react-dnd-treeview';
+import { TreeItem } from './tree-item';
+import listStyles from '../list/list.module.less';
+import styles from './tree.module.less';
+import { ListHeading } from '../list/list-row/list-heading';
+import { TreePlaceholder } from './tree-placeholder';
+export const Tree = ({ list, draggable = false, onListReorder, onChangeOpen, testId, isInitialOpen = false, treeRef, }) => {
+    const handleDrop = (newTree) => {
+        if (onListReorder) {
+            // Transform tree to list
+            const newList = newTree.map(({ id, parent, droppable, data }) => ({
+                id,
+                parent,
+                droppable,
+                ...data,
+            }));
+            onListReorder(newList);
+        }
+    };
+    const handleOpen = (id) => {
+        if (onChangeOpen) {
+            onChangeOpen(id);
+        }
+    };
+    // Transform list to tree
+    const tree = list?.items?.map(({ id, droppable, parent, name, ...rest }) => ({
+        id,
+        text: name,
+        droppable,
+        parent,
+        data: {
+            name,
+            ...rest,
+        },
+    }));
+    return (_jsxs("div", { "data-testid": testId, children: [list.name && !list.noHeader && (_jsx(ListHeading, { name: list.name, actions: list.actions })), _jsx("div", { className: listStyles.list, children: _jsx(DndProvider, { backend: MultiBackend, options: getBackendOptions(), context: window, children: _jsx(TreeView, { ref: treeRef, tree: tree, sort: false, insertDroppableFirst: false, canDrag: () => draggable, canDrop: (tree, { dragSource, dropTargetId }) => {
+                            if (dragSource?.parent === dropTargetId) {
+                                return true;
+                            }
+                        }, rootId: 0, render: (node, { depth, isOpen, onToggle, hasChild }) => {
+                            return (_jsx(TreeItem, { hasChild: hasChild, node: node, depth: depth, isOpen: isOpen, onToggle: onToggle, draggable: draggable }));
+                        }, onDrop: handleDrop, onChangeOpen: handleOpen, dropTargetOffset: 5, placeholderRender: (node, { depth }) => (_jsx(TreePlaceholder, { depth: depth })), placeholderComponent: "div", listComponent: "div", listItemComponent: "div", classes: {
+                            root: styles.tree,
+                            draggingSource: styles.draggingSource,
+                            dropTarget: styles.dropTarget,
+                            placeholder: styles.placeholderContainer,
+                        }, initialOpen: isInitialOpen }) }) })] }));
+};

package/dist/components/tree/tree.stories-data.d.ts

@@ -0,0 +1,126 @@
+export declare const list: {
+    name: string;
+    items: ({
+        id: number;
+        parent: number;
+        droppable: boolean;
+        name: string;
+        onClick: () => void;
+        active?: undefined;
+    } | {
+        id: number;
+        parent: number;
+        droppable: boolean;
+        name: string;
+        onClick?: undefined;
+        active?: undefined;
+    } | {
+        id: number;
+        parent: number;
+        droppable: boolean;
+        name: string;
+        active: boolean;
+        onClick?: undefined;
+    })[];
+};
+export declare const listActions: {
+    header: {
+        actions: {
+            label: string;
+            primary: boolean;
+            icon: string;
+            onClick: () => void;
+        }[];
+    };
+    items: ({
+        actions: {
+            label: string;
+            icon: string;
+            onClick: () => void;
+        }[];
+        id: number;
+        parent: number;
+        droppable: boolean;
+        name: string;
+        onClick: () => void;
+        active?: undefined;
+    } | {
+        actions: {
+            label: string;
+            icon: string;
+            onClick: () => void;
+        }[];
+        id: number;
+        parent: number;
+        droppable: boolean;
+        name: string;
+        onClick?: undefined;
+        active?: undefined;
+    } | {
+        actions: {
+            label: string;
+            icon: string;
+            onClick: () => void;
+        }[];
+        id: number;
+        parent: number;
+        droppable: boolean;
+        name: string;
+        active: boolean;
+        onClick?: undefined;
+    })[];
+    name: string;
+};
+export declare const listControlParents: {
+    items: ({
+        droppable: boolean;
+        details: string;
+        id: number;
+        parent: number;
+        name: string;
+        onClick: () => void;
+        active?: undefined;
+    } | {
+        droppable: boolean;
+        details: string;
+        id: number;
+        parent: number;
+        name: string;
+        onClick?: undefined;
+        active?: undefined;
+    } | {
+        droppable: boolean;
+        details: string;
+        id: number;
+        parent: number;
+        name: string;
+        active: boolean;
+        onClick?: undefined;
+    })[];
+    name: string;
+};
+export declare const listFlat: {
+    items: ({
+        parent: number;
+        droppable: boolean;
+        id: number;
+        name: string;
+        onClick: () => void;
+        active?: undefined;
+    } | {
+        parent: number;
+        droppable: boolean;
+        id: number;
+        name: string;
+        onClick?: undefined;
+        active?: undefined;
+    } | {
+        parent: number;
+        droppable: boolean;
+        id: number;
+        name: string;
+        active: boolean;
+        onClick?: undefined;
+    })[];
+    name: string;
+};

package/dist/components/tree/tree.stories-data.js

@@ -0,0 +1,83 @@
+export const list = {
+    name: 'Animals',
+    items: [
+        {
+            id: 1,
+            parent: 0,
+            droppable: true,
+            name: 'Mammals',
+            onClick: () => console.log('Test'),
+        },
+        {
+            id: 2,
+            parent: 1,
+            droppable: true,
+            name: 'Cats',
+        },
+        {
+            id: 3,
+            parent: 1,
+            droppable: true,
+            name: 'Dogs',
+        },
+        {
+            id: 4,
+            parent: 0,
+            droppable: true,
+            name: 'Amphibians',
+        },
+        {
+            id: 5,
+            parent: 4,
+            droppable: true,
+            name: 'Frogs',
+        },
+        {
+            id: 6,
+            parent: 0,
+            droppable: true,
+            name: 'Reptiles',
+            active: true,
+        },
+    ],
+};
+export const listActions = {
+    ...list,
+    header: {
+        // ...list.header, // TODO - @Jack - should be removed?
+        actions: [
+            {
+                label: 'Add',
+                primary: true,
+                icon: 'add',
+                onClick: () => { },
+            },
+        ],
+    },
+    items: list.items.map((item) => ({
+        ...item,
+        actions: [
+            {
+                label: 'Delete',
+                icon: 'delete',
+                onClick: () => { },
+            },
+        ],
+    })),
+};
+export const listControlParents = {
+    ...list,
+    items: list.items.map((item) => ({
+        ...item,
+        droppable: item.parent === 0,
+        details: item.parent === 0 ? 'Droppable' : 'Not droppable',
+    })),
+};
+export const listFlat = {
+    ...list,
+    items: list.items.map((item) => ({
+        ...item,
+        parent: 0,
+        droppable: false,
+    })),
+};

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

@@ -0,0 +1,11 @@
+import { ITreeProps } from './tree';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ITreeProps>;
+export declare const Actions: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ITreeProps>;
+export declare const Draggable: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ITreeProps>;
+export declare const Droppable: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ITreeProps>;
+export declare const Flat: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ITreeProps>;
+export declare const ExpandedByDefault: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ITreeProps>;
+export declare const OnOpenChangeCallback: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ITreeProps>;
+export declare const Managed: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/tree/tree.stories.js

@@ -0,0 +1,98 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Tree } from './tree';
+import * as storyData from './tree.stories-data';
+export default {
+    title: 'Basic/Tree',
+    component: Tree,
+    args: {
+        list: storyData.list,
+    },
+};
+const Template = (args) => (_jsx(Tree
+// eslint-disable-next-line react/jsx-props-no-spreading
+, { ...args }));
+export const Default = Template.bind({});
+export const Actions = Template.bind({});
+Actions.args = { list: storyData.listActions };
+export const Draggable = Template.bind({});
+Draggable.args = { draggable: true };
+export const Droppable = Template.bind({});
+Droppable.args = { draggable: true, list: storyData.listControlParents };
+Droppable.parameters = {
+    docs: {
+        description: {
+            story: 'Use the `droppable` prop to specify which items can have other items dropped into them.',
+        },
+    },
+};
+export const Flat = Template.bind({});
+Flat.args = { draggable: true, list: storyData.listFlat };
+export const ExpandedByDefault = Template.bind({});
+ExpandedByDefault.args = { isInitialOpen: true };
+export const OnOpenChangeCallback = Template.bind({});
+OnOpenChangeCallback.args = {
+    onChangeOpen: (id) => console.log('onChangeOpen here', id),
+};
+export const Managed = () => {
+    const [items, setItems] = useState([
+        {
+            id: 1,
+            parent: 0,
+            droppable: true,
+            name: 'Mammals',
+        },
+        {
+            id: 2,
+            parent: 1,
+            droppable: true,
+            name: 'Cats',
+        },
+        {
+            id: 3,
+            parent: 1,
+            droppable: true,
+            name: 'Dogs',
+        },
+        {
+            id: 4,
+            parent: 0,
+            droppable: true,
+            name: 'Amphibians',
+        },
+        {
+            id: 5,
+            parent: 4,
+            droppable: true,
+            name: 'Frogs',
+        },
+        {
+            id: 6,
+            parent: 0,
+            droppable: true,
+            name: 'Reptiles',
+        },
+    ]);
+    const addItem = () => {
+        const newItem = {
+            id: Math.max(...items.map((item) => item.id)) + 1,
+            parent: 0,
+            droppable: true,
+            name: 'New Item',
+        };
+        setItems([newItem].concat(items));
+    };
+    const list = {
+        name: 'Animals',
+        actions: [
+            {
+                label: 'Add',
+                primary: true,
+                icon: 'add',
+                onClick: () => addItem(),
+            },
+        ],
+        items,
+    };
+    return _jsx(Tree, { list: list, draggable: true, onListReorder: setItems });
+};

package/dist/helpers/disabled-context.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const DisabledContext: React.Context<boolean>;

package/dist/helpers/disabled-context.js

@@ -0,0 +1,2 @@
+import React from 'react';
+export const DisabledContext = React.createContext(false);

package/dist/helpers/text.d.ts

@@ -0,0 +1 @@
+export declare const getTextWidth: (text: string, font: string) => number;

package/dist/helpers/text.js

@@ -0,0 +1,9 @@
+export const getTextWidth = (text, font) => {
+    const element = document.createElement('canvas');
+    const context = element.getContext('2d');
+    if (!context) {
+        return 0; // Fallback to 0 width if context isn't available
+    }
+    context.font = font;
+    return context.measureText(text).width;
+};

package/dist/helpers/types.d.ts

@@ -0,0 +1,3 @@
+import { ReactNode } from 'react';
+export declare const isStringNumberOrNode: (value: string | number | ReactNode) => boolean;
+export declare const getType: (item: any) => string;

package/dist/helpers/types.js

@@ -0,0 +1,8 @@
+import { isNumber, isString } from 'lodash';
+import { isValidElement } from 'react';
+export const isStringNumberOrNode = (value) => {
+    return isString(value) || isNumber(value) || isValidElement(value);
+};
+export const getType = (item) => {
+    return Array.isArray(item) ? 'array' : typeof item;
+};

package/dist/hooks/index.d.ts

@@ -0,0 +1,4 @@
+export { useKeyboardEvent } from './use-keyboard-event';
+export { useFocus } from './use-focus';
+export { useFontsReady } from './use-fonts-ready';
+export { useWindowWidth } from './use-window-width';

package/dist/hooks/index.js

@@ -0,0 +1,4 @@
+export { useKeyboardEvent } from './use-keyboard-event';
+export { useFocus } from './use-focus';
+export { useFontsReady } from './use-fonts-ready';
+export { useWindowWidth } from './use-window-width';

package/dist/hooks/use-focus.d.ts

@@ -0,0 +1,4 @@
+import { MutableRefObject } from 'react';
+type UseFocusReturnType = [MutableRefObject<HTMLInputElement | null>, () => void];
+export declare const useFocus: () => UseFocusReturnType;
+export {};

package/dist/hooks/use-focus.js

@@ -0,0 +1,10 @@
+import { useRef } from 'react';
+export const useFocus = () => {
+    const ref = useRef(null);
+    const setFocus = () => {
+        if (ref.current) {
+            ref.current.focus();
+        }
+    };
+    return [ref, setFocus];
+};

package/dist/hooks/use-fonts-ready.d.ts

@@ -0,0 +1 @@
+export declare const useFontsReady: () => boolean;

package/dist/hooks/use-fonts-ready.js

@@ -0,0 +1,13 @@
+import { useState, useEffect } from 'react';
+export const useFontsReady = () => {
+    const [isFontLoaded, setFontLoaded] = useState(false);
+    useEffect(() => {
+        const fontIsReady = async () => {
+            if (!document.fonts)
+                return;
+            await document.fonts.ready.then(() => setFontLoaded(true));
+        };
+        fontIsReady();
+    }, []);
+    return isFontLoaded;
+};

package/dist/hooks/use-keyboard-event.d.ts

@@ -0,0 +1,2 @@
+import { DependencyList } from 'react';
+export declare const useKeyboardEvent: (key: string, fn: () => void, dependencyList?: DependencyList) => void;

package/dist/hooks/use-keyboard-event.js

@@ -0,0 +1,14 @@
+import { useEffect } from 'react';
+export const useKeyboardEvent = (key, fn, dependencyList = []) => {
+    useEffect(() => {
+        const handler = (event) => {
+            if (event.key === key) {
+                fn();
+            }
+        };
+        window.addEventListener('keydown', handler);
+        return () => {
+            window.removeEventListener('keydown', handler);
+        };
+    }, dependencyList);
+};

package/dist/hooks/use-window-width.d.ts

@@ -0,0 +1 @@
+export declare const useWindowWidth: () => number;

package/dist/hooks/use-window-width.js

@@ -0,0 +1,16 @@
+import { debounce } from 'lodash';
+import { useState, useEffect } from 'react';
+const getWidth = () => window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth;
+export const useWindowWidth = () => {
+    const [width, setWidth] = useState(getWidth());
+    const resizeListener = debounce(() => setWidth(getWidth()), 150);
+    useEffect(() => {
+        window.addEventListener('resize', resizeListener);
+        return () => {
+            window.removeEventListener('resize', resizeListener);
+        };
+    }, []);
+    return width;
+};