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

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

@@ -1,17 +0,0 @@
-import { StoryFn } from '@storybook/react';
-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, any>;
-export declare const FixedWidth: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, any>;
-export declare const AutoWidth: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, any>;
-export declare const ColumnWidths: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, any>;
-export declare const ColumnAlignment: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, any>;
-export declare const ColumnHeaderAlignment: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, any>;
-export declare const InfiniteScrollFixedHeight: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, any>;
-export declare const InfiniteScrollFullHeight: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, any>;
-export declare const InfiniteScrollShort: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, any>;
-export declare const InfiniteScrollWithDragAndDrop: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, any>;
-export declare const InCard: StoryFn<any>;
-export declare const Managed: StoryFn<any>;
-export declare const ManagedWithFilterAndSort: () => import("react/jsx-runtime").JSX.Element;
-export declare const AutoAddNewRow: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/table/table.stories.js

@@ -1,521 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
-import { produce } from 'immer';
-import { isNaN, isInteger } from 'lodash';
-import { Table } from './table';
-import { Card } from '../card/card';
-import { Heading } from '../heading/heading';
-import * as storyData from './table.stories-data';
-export default {
-    title: 'Basic/Table',
-    component: Table,
-    args: {
-        table: {
-            ...storyData.table,
-        },
-    },
-};
-const Template = (args) => {
-    return (_jsx(Table
-    // eslint-disable-next-line react/jsx-props-no-spreading
-    , { ...args }));
-};
-export const Default = Template.bind({});
-export const FixedWidth = Template.bind({});
-FixedWidth.args = {
-    table: { ...storyData.table, fixedWidth: '400px' },
-};
-export const AutoWidth = Template.bind({});
-AutoWidth.args = {
-    table: { ...storyData.table, fixedWidth: 'auto' },
-};
-export const ColumnWidths = Template.bind({});
-ColumnWidths.args = {
-    table: storyData.tableColumnWidths,
-};
-ColumnWidths.parameters = {
-    docs: {
-        description: {
-            story: 'Use sparingly when certain columns cannot be below a certain width. Unless the Table is auto width, set one column to `auto` to use remaining space.',
-        },
-    },
-};
-export const ColumnAlignment = Template.bind({});
-ColumnAlignment.args = {
-    table: storyData.tableAlignment,
-};
-export const ColumnHeaderAlignment = Template.bind({});
-ColumnHeaderAlignment.args = {
-    table: storyData.tableHeaderAlignment,
-};
-ColumnHeaderAlignment.parameters = {
-    docs: {
-        description: {
-            story: 'This is only required when you need to override `columnAlignment` in header cells (i.e. they have different alignment)',
-        },
-    },
-};
-export const InfiniteScrollFixedHeight = Template.bind({});
-InfiniteScrollFixedHeight.args = {
-    table: storyData.tableInfiniteScroll,
-};
-export const InfiniteScrollFullHeight = Template.bind({});
-InfiniteScrollFullHeight.args = {
-    table: storyData.tableInfiniteScrollFullHeight,
-};
-InfiniteScrollFullHeight.decorators = [
-    (Story) => (_jsx("div", { style: { position: 'absolute', inset: 0, padding: 20 }, children: _jsx(Story, {}) })),
-];
-export const InfiniteScrollShort = Template.bind({});
-InfiniteScrollShort.args = {
-    table: storyData.tableInfiniteScrollShort,
-};
-InfiniteScrollShort.parameters = {
-    docs: {
-        description: {
-            story: 'If a `maxHeight` is set, the table should only fill that height if it needs to.',
-        },
-    },
-};
-export const InfiniteScrollWithDragAndDrop = Template.bind({});
-InfiniteScrollWithDragAndDrop.args = {
-    table: storyData.tableInfiniteScrollDnD,
-};
-export const InCard = () => (_jsx(Card, { heading: _jsx(Heading, { children: "Card heading" }), padding: false, children: _jsx(Table, { table: { ...storyData.table, bordered: false } }) }));
-InCard.parameters = {
-    docs: { source: { type: 'dynamic' } },
-};
-export const Managed = () => {
-    /*
-      Mock table data store (real apps should use Redux or similar)
-    */
-    const headings = ['Section', 'Width', 'Height'];
-    let units = ['', 'm', 'm'];
-    let data = [...Array(175).keys()].map((c, i) => [i, i * 2, i * 2]);
-    /*
-      Mock table data actions (real apps should use Redux or similar)
-    */
-    const convertUnit = (fromUnit, toUnit, value) => {
-        return fromUnit === 'm' && toUnit === 'ft'
-            ? value * 3.28084
-            : fromUnit === 'ft' && toUnit === 'm'
-                ? value / 3.28084
-                : value;
-    };
-    const onChangeValue = (evt, rowIndex, cellIndex, render) => {
-        data[rowIndex][cellIndex] = evt.target.value;
-        render();
-    };
-    const onAddRow = (render) => {
-        data = data.concat([['', '', '']]);
-        render();
-    };
-    const onDeleteRow = (rowIndex, render) => {
-        data = data.filter((r, i) => i !== rowIndex);
-        render();
-    };
-    const onChangeUnit = (evt, columnIndex, render) => {
-        const fromUnit = units[columnIndex];
-        const toUnit = evt.target.value;
-        units = units.map((u, i) => (i === columnIndex ? toUnit : u));
-        data = data.map((r) => r.map((c, i) => i === columnIndex ? convertUnit(fromUnit, toUnit, c) : c));
-        render();
-    };
-    /*
-      Container component manages state and configuration of table
-    */
-    const ManagedTable = () => {
-        const rowsPerPageOptions = [
-            { label: '10 / page', value: 10 },
-            { label: '20 / page', value: 20 },
-            { label: '50 / page', value: 50 },
-            { label: 'Show all', value: 0 },
-        ];
-        const [rowsPerPage, setRowsPerPage] = useState(10);
-        const [selectedPage, setSelectedPage] = useState(1);
-        //hack to make Storybook re-render after event handlers alter data
-        //only using this because example does not manage data with Redux / props
-        const [toggle, forceRender] = useState(false);
-        const render = () => {
-            forceRender(!toggle);
-        };
-        const goToLastPage = () => {
-            const lastPage = Math.ceil(data.length / rowsPerPage);
-            setSelectedPage(lastPage);
-        };
-        const firstVisibleRow = (selectedPage - 1) * rowsPerPage;
-        const lastVisibleRow = rowsPerPage === 0 ? data.length - 1 : firstVisibleRow + rowsPerPage;
-        const table = {
-            headers: [
-                {
-                    cells: headings.map((h) => ({ value: h })),
-                    actions: [
-                        {
-                            primary: true,
-                            label: 'Add',
-                            icon: 'add',
-                            onClick: () => {
-                                onAddRow(render);
-                                goToLastPage();
-                            },
-                        },
-                    ],
-                },
-                {
-                    cells: [
-                        {},
-                        {
-                            options: [
-                                { label: 'm', value: 'm' },
-                                { label: 'ft', value: 'ft' },
-                            ],
-                            value: units[1],
-                            type: 'Select',
-                            native: true,
-                            onChange: (evt) => onChangeUnit(evt, 1, render),
-                        },
-                        {
-                            options: [
-                                { label: 'm', value: 'm' },
-                                { label: 'ft', value: 'ft' },
-                            ],
-                            value: units[2],
-                            type: 'Select',
-                            native: true,
-                            onChange: (evt) => onChangeUnit(evt, 2, render),
-                        },
-                    ],
-                },
-            ],
-            rows: data.slice(firstVisibleRow, lastVisibleRow).map((row, i) => {
-                const rowIndex = firstVisibleRow + i;
-                return {
-                    cells: [...Array(3).keys()].map((c, i) => ({
-                        //https://stackoverflow.com/a/33352604
-                        value: row[i],
-                        type: 'Input',
-                        onChange: (evt) => onChangeValue(evt, rowIndex, i, render),
-                    })),
-                    actions: [
-                        {
-                            label: 'Delete',
-                            icon: 'minus',
-                            onClick: () => onDeleteRow(rowIndex, render),
-                        },
-                    ],
-                };
-            }),
-            footer: {
-                pagination: {
-                    rowCount: data.length,
-                    selectedPage,
-                    rowsPerPage: {
-                        onChange: (evt) => {
-                            const { value } = evt.target;
-                            setRowsPerPage(Number(value));
-                        },
-                        options: rowsPerPageOptions,
-                        value: rowsPerPage,
-                    },
-                    onSelectPage: (evt) => setSelectedPage(evt),
-                    small: true,
-                },
-            },
-        };
-        return _jsx(Table, { table: table });
-    };
-    return _jsx(ManagedTable, {});
-};
-export const ManagedWithFilterAndSort = () => {
-    /*
-      Mock table data store (real apps should use Redux or similar)
-    */
-    const headings = ['Section', 'Width', 'Height'];
-    let keyedData = [...Array(175).keys()].map((_c, i) => ({
-        Section: i,
-        Width: i * 2,
-        Height: i * 2,
-    }));
-    /*
-          Container component manages state and configuration of table
-        */
-    const TableWithSortAndFilter = () => {
-        const rowsPerPageOptions = [
-            { label: '10 / page', value: 10 },
-            { label: '20 / page', value: 20 },
-            { label: '50 / page', value: 50 },
-            { label: 'Show all', value: 0 },
-        ];
-        const [rowsPerPage, setRowsPerPage] = useState(10);
-        const [selectedPage, setSelectedPage] = useState(1);
-        const [filters, setFilters] = useState({});
-        const [sorts, setSorts] = useState({});
-        useEffect(() => {
-            setSelectedPage(1);
-        }, [filters, sorts]);
-        const firstVisibleRow = (selectedPage - 1) * rowsPerPage;
-        const lastVisibleRow = rowsPerPage === 0 ? keyedData.length - 1 : firstVisibleRow + rowsPerPage;
-        const filterAndSortDataRows = (dataRows, filters, sorts) => dataRows
-            .filter((row) => Object.keys(filters).every((key) => {
-            return filters[key] === ''
-                ? true
-                : row[key].toString().includes(filters[key]);
-        }))
-            .sort((a, b) => Object.entries(sorts)
-            .map(([key, value]) => {
-            switch (value) {
-                case 'up': {
-                    return a[key] - b[key];
-                }
-                case 'down': {
-                    return b[key] - a[key];
-                }
-                default:
-                    return 0;
-            }
-        })
-            .reduce((a, acc) => a || acc, 0));
-        const dataHeaders = (dataRowsKeys, filters, setFilters, sorts, setSorts) => {
-            const dataSortCells = dataRowsKeys.map((key) => {
-                const sort = Object.keys(sorts).includes(key) ? sorts[key] : '';
-                const prettifyHeaderValue = `${key[0].toUpperCase()}${key.slice(1)}`;
-                return {
-                    key,
-                    value: prettifyHeaderValue,
-                    hasSort: true,
-                    sort,
-                    onSort: () => {
-                        const newSort = sort === '' ? 'up' : sort === 'up' ? 'down' : '';
-                        setSorts({ ...sorts, [key]: newSort });
-                    },
-                };
-            });
-            const dataFilterCells = dataRowsKeys.map((key) => {
-                const filterValue = Object.keys(filters).includes(key)
-                    ? filters[key]
-                    : '';
-                return {
-                    key,
-                    value: filterValue,
-                    type: 'Input',
-                    placeholder: 'Filter',
-                    onChange: (ev) => setFilters({ ...filters, [key]: ev.target.value }),
-                };
-            });
-            return { dataSortCells, dataFilterCells };
-        };
-        const { dataSortCells, dataFilterCells } = dataHeaders(headings, filters, setFilters, sorts, setSorts);
-        const filteredAndSortedData = filterAndSortDataRows(keyedData, filters, sorts);
-        const dataRows = [
-            ...filteredAndSortedData
-                .slice(firstVisibleRow, lastVisibleRow)
-                .map((dataRow) => {
-                const rowsCells = Object.entries(dataRow).map(([key, value]) => ({
-                    key,
-                    value,
-                    type: 'Input',
-                    disabled: true,
-                }));
-                return {
-                    cells: rowsCells,
-                };
-            }),
-        ];
-        const table = {
-            headers: [
-                {
-                    cells: dataSortCells,
-                },
-                {
-                    cells: dataFilterCells,
-                },
-            ],
-            rows: dataRows,
-            footer: {
-                pagination: {
-                    rowCount: filteredAndSortedData.length,
-                    selectedPage,
-                    rowsPerPage: {
-                        onChange: (evt) => {
-                            const { value } = evt.target;
-                            setRowsPerPage(Number(value));
-                        },
-                        options: rowsPerPageOptions,
-                        value: rowsPerPage,
-                    },
-                    onSelectPage: (evt) => setSelectedPage(evt),
-                    small: true,
-                },
-            },
-        };
-        return _jsx(Table, { table: table });
-    };
-    return _jsx(TableWithSortAndFilter, {});
-};
-export const AutoAddNewRow = () => {
-    const prices = {
-        tea: 3.6,
-        coffee: 3.2,
-        orange: 4.1,
-    };
-    const drinks = [
-        { label: 'Tea', value: 'tea' },
-        { label: 'Coffee', value: 'coffee' },
-        { label: 'Orange juice', value: 'orange' },
-    ];
-    const defaultEmptyRow = {
-        cells: [
-            {
-                type: 'Select',
-                options: drinks,
-                value: { value: 'tea' },
-            },
-            {
-                type: 'Input',
-            },
-            {
-                type: 'Static',
-            },
-        ],
-    };
-    const initialRows = [...Array(15).keys()].map((row, rowIndex) => ({
-        cells: [
-            {
-                type: 'Select',
-                options: drinks,
-                value: { value: 'tea' },
-            },
-            {
-                type: 'Input',
-                value: rowIndex + 1,
-            },
-            {
-                type: 'Static',
-            },
-        ],
-    }));
-    const [rows, setRows] = useState(initialRows);
-    const rowsPerPageOptions = [
-        { label: '10 / page', value: 10 },
-        { label: '20 / page', value: 20 },
-        { label: '50 / page', value: 50 },
-        { label: 'Show all', value: 0 },
-    ];
-    const [rowsPerPage, setRowsPerPage] = useState(10);
-    const [selectedPage, setSelectedPage] = useState(1);
-    const firstVisibleRow = (selectedPage - 1) * rowsPerPage;
-    const lastVisibleRow = rowsPerPage === 0 ? rows.length - 1 : firstVisibleRow + rowsPerPage;
-    const onAddRow = ({ newRow } = {}) => {
-        const nextRows = produce(rows, (draft) => {
-            draft.push(newRow ?? defaultEmptyRow);
-        });
-        setRows(nextRows);
-    };
-    const onDeleteRow = ({ rowIndex }) => {
-        const nextRows = produce(rows, (draft) => {
-            delete draft[rowIndex];
-        }).filter((r) => r);
-        setRows(nextRows);
-    };
-    const onChangeDrink = ({ rowIndex, value }) => {
-        const nextRows = produce(rows, (draft) => {
-            // @ts-ignore: write explicit reason
-            draft[rowIndex].cells[0].value.value = value;
-        });
-        setRows(nextRows);
-    };
-    const onChangeQuantity = ({ rowIndex, value }) => {
-        const nextRows = produce(rows, (draft) => {
-            draft[rowIndex].cells[1].value = value;
-        });
-        setRows(nextRows);
-    };
-    const validQuantity = ({ value }) => {
-        const numericValue = Number(value);
-        return !isNaN(numericValue) && isInteger(numericValue) && numericValue > 0;
-    };
-    const hydratedRows = rows
-        .slice(firstVisibleRow, lastVisibleRow)
-        .map((row, i) => {
-        const rowIndex = firstVisibleRow + i;
-        const isLastRow = rowIndex === rows.length - 1;
-        return {
-            ...row,
-            cells: row?.cells.map((cell, cellIndex) => {
-                const drink = row?.cells?.[0]?.value?.value;
-                const quantity = Number(row?.cells?.[1]?.value);
-                const drinkPrice = prices?.[drink];
-                const price = drinkPrice && validQuantity({ value: quantity })
-                    ? (drinkPrice * quantity).toFixed(2)
-                    : null;
-                if (cellIndex === 0) {
-                    return {
-                        ...cell,
-                        onChange: (evt) => onChangeDrink({ rowIndex, value: evt.target.value }),
-                    };
-                }
-                else if (cellIndex === 1) {
-                    return {
-                        ...cell,
-                        onChange: (evt) => onChangeQuantity({ rowIndex, value: evt.target.value }),
-                        error: !validQuantity({ value: cell.value })
-                            ? 'Must be valid whole number'
-                            : null,
-                    };
-                }
-                else if (cellIndex === 2) {
-                    return {
-                        ...cell,
-                        value: price,
-                    };
-                }
-            }),
-            actions: [
-                {
-                    label: 'Delete',
-                    icon: 'minus',
-                    onClick: () => onDeleteRow({ rowIndex }),
-                },
-            ],
-        };
-    });
-    return (_jsx(Table, { table: {
-            defaultEmptyRow,
-            onAddRow,
-            columnAlignment: ['left', 'right', 'right'],
-            headers: [
-                {
-                    cells: [
-                        { value: 'Drink' },
-                        { value: 'Quantity' },
-                        { value: 'Total Price (£)' },
-                    ],
-                    actions: [
-                        {
-                            primary: true,
-                            icon: 'plus',
-                            label: 'Add',
-                            onClick: () => onAddRow(),
-                        },
-                    ],
-                },
-            ],
-            rows: hydratedRows,
-            footer: {
-                pagination: {
-                    rowCount: rows.length,
-                    selectedPage,
-                    rowsPerPage: {
-                        onChange: (evt) => {
-                            const { value } = evt.target;
-                            setRowsPerPage(Number(value));
-                        },
-                        options: rowsPerPageOptions,
-                        value: rowsPerPage,
-                    },
-                    onSelectPage: (evt) => setSelectedPage(evt),
-                    small: true,
-                },
-            },
-        } }));
-};

package/dist/components/table/table.test.d.ts

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

package/dist/components/table/table.test.js

@@ -1,27 +0,0 @@
-import { hasRowActions, getColumnCount } from './table.viewdata';
-describe('table', () => {
-    test('hasRowActions', () => {
-        const withActions = [{ cells: [], actions: [{}] }, { cells: [] }];
-        const withOutActions = [{ cells: [] }, { cells: [] }];
-        expect(hasRowActions(withOutActions, withOutActions)).toBe(false);
-        expect(hasRowActions(withActions, withOutActions)).toBe(true);
-    });
-    test('getColumnCount', () => {
-        const noRows = [];
-        const unevenColumns = [
-            { cells: [{}, {}, {}] },
-            { cells: [{}, {}, {}, {}, {}] },
-            { cells: [{}, {}, {}] },
-        ];
-        expect(getColumnCount(noRows, unevenColumns)).toBe(5);
-    });
-    test('getColumnCount with colSpan', () => {
-        const noRows = [];
-        const unevenColumns = [
-            { cells: [{}, { colSpan: 2 }, {}] },
-            { cells: [{}, {}] },
-            { cells: [{}, {}, {}] },
-        ];
-        expect(getColumnCount(noRows, unevenColumns)).toBe(4);
-    });
-});

package/dist/components/table/table.viewdata.d.ts

@@ -1,16 +0,0 @@
-type TCellType = {
-    colSpan?: number;
-    value: string;
-};
-export type TRowType = {
-    cells: TCellType[];
-    actions?: any[];
-    testId?: string;
-    noDrag?: boolean;
-    onRowMouseEnter?: () => void;
-    onRowMouseLeave?: () => void;
-};
-export type TRowsType = TRowType[];
-export declare const getColumnCount: (rows: TRowsType, headers: TRowsType) => number;
-export declare const hasRowActions: (rows: TRowsType, headers: TRowsType) => boolean;
-export {};

package/dist/components/table/table.viewdata.js

@@ -1,17 +0,0 @@
-const getMaxCellCount = (rows) => {
-    const count = Math.max(...rows.reduce((acc, row) => {
-        const count = row.cells
-            .map((c) => (c.colSpan ? c.colSpan : 1))
-            .reduce((a, b) => a + b, 0);
-        return acc.concat(count);
-    }, []));
-    return !isNaN(count) ? count : 0;
-};
-export const getColumnCount = (rows, headers) => {
-    const cellCount = [getMaxCellCount(headers), getMaxCellCount(rows)];
-    return Math.max(...cellCount);
-};
-const hasActions = (rows) => rows.reduce((acc, row) => row.actions && row.actions.length > 0 ? 1 : acc, 0);
-export const hasRowActions = (rows, headers) => {
-    return hasActions(headers) > 0 || hasActions(rows) > 0;
-};

package/dist/components/table/title/title.d.ts

@@ -1,8 +0,0 @@
-import { ReactNode } from 'react';
-export interface ITitleProps {
-    name?: string | number | ReactNode;
-    actions?: any;
-    actionsRight?: boolean;
-    testId?: string;
-}
-export declare const Title: ({ name, actions, actionsRight, testId, }: ITitleProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/table/title/title.js

@@ -1,22 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import styles from './title.module.less';
-import { Actions } from '../../actions/actions';
-import { Heading } from '../../heading/heading';
-export const Title = ({ name = null, actions = null, actionsRight = false, testId, }) => {
-    const isNameDefined = name !== null;
-    const isActionsDefined = actions !== null;
-    if (!isNameDefined && !isActionsDefined) {
-        return null;
-    }
-    const actionsContainer = () => {
-        if (!isActionsDefined) {
-            return null;
-        }
-        const actionsComponent = _jsx(Actions, { actions: actions });
-        if (actionsRight) {
-            return actionsComponent;
-        }
-        return _jsx("div", { children: actionsComponent });
-    };
-    return (_jsxs("div", { className: styles.title, children: [isNameDefined ? (_jsx(Heading, { children: _jsx("span", { "data-testid": testId, children: name }) })) : null, actionsContainer()] }));
-};

package/dist/components/table/title/title.stories.d.ts

@@ -1,11 +0,0 @@
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
-export default _default;
-export declare const Units: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, any>;
-export declare const ActiveRow: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, any>;
-export declare const Title: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, any>;
-export declare const TitleJSX: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, any>;
-export declare const ChildComponent: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, any>;
-export declare const Filter: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, any>;
-export declare const Sort: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, any>;
-export declare const HeaderActionsNoLabel: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, any>;
-export declare const HelpAndLibraryIcons: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, any>;