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

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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,521 @@
+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

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

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

@@ -0,0 +1,27 @@
+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

@@ -0,0 +1,16 @@
+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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,22 @@
+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

@@ -0,0 +1,11 @@
+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>;