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

package/dist/components/modal/modal.stories.js

@@ -0,0 +1,107 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useArgs } from "@storybook/addons";
+import { Modal } from "./modal";
+import { Button } from "../button/button";
+import { Dialog } from "../dialog/dialog";
+import { Popover } from "../popover/popover";
+import { Input } from "../input/input";
+import { InputGroup } from "../input-group/input-group";
+import { Field } from "../form/field";
+import { Menu } from "../menu/menu";
+import { Select } from "../select/select";
+import { Spacer } from "../layout/spacer/spacer";
+import { Tooltip } from "../tooltip/tooltip";
+import { MenuType } from "../menu/enum";
+import { TriggerType } from "../../common-enum";
+export default {
+    title: 'Modals/Modal',
+    component: Modal,
+    args: {
+        visible: true,
+        centered: true,
+        width: '300px',
+        heading: 'Are you sure?',
+        content: _jsx(_Fragment, { children: "This will complete the transaction" }),
+        footer: (_jsxs(_Fragment, { children: [_jsx(Button, { label: "Okay", colored: true, onClick: () => { } }), _jsx(Button, { label: "Cancel", onClick: () => { } })] })),
+        onClose: () => { },
+    },
+    parameters: {
+        docs: {
+            story: {
+                inline: false,
+                iframeHeight: 400,
+            },
+        },
+    },
+};
+const Template = (args) => {
+    const [{ visible, centered, ...dialogProps }, updateArgs] = useArgs();
+    const toggleModal = () => {
+        updateArgs({ visible: !visible });
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(Modal, { visible: visible, centered: centered, children: _jsx(Dialog, { dialog: {
+                        ...dialogProps,
+                        onClose: toggleModal,
+                    } }) }), _jsx(Button, { label: "Open Modal", onClick: toggleModal })] }));
+};
+export const Default = Template.bind({});
+export const Centered = Template.bind({});
+Centered.args = { centered: true };
+export const LineBreak = Template.bind({});
+LineBreak.args = { content: ['This is a', 'new line!'] };
+export const Scroll = Template.bind({});
+Scroll.args = {
+    scroll: true,
+    content: (_jsx("div", { children: 'Example modal content goes here lorem ipsum. '.repeat(100) })),
+};
+export const FullWidth = Template.bind({});
+FullWidth.args = {
+    width: '100%',
+    content: (_jsx("div", { children: 'Example modal content goes here lorem ipsum. '.repeat(100) })),
+};
+export const NoContentPadding = Template.bind({});
+NoContentPadding.args = { contentPadding: 0 };
+export const WithPopoverLayers = Template.bind({});
+WithPopoverLayers.args = {
+    content: (_jsxs(_Fragment, { children: [_jsx(Tooltip, { text: "Tooltip text", children: "Hover for tooltip" }), _jsx(Spacer, {}), _jsx(Field, { label: "Custom Select", helpText: "Select an animal", children: _jsx(Select, { name: "example", options: [
+                        'Aardvarks',
+                        'Kangaroos',
+                        'Monkeys',
+                        'Possums',
+                        'Gorilla',
+                        'Puma',
+                        'Patagonian Mara',
+                        'Tarsier',
+                        'Koala',
+                        'Panda',
+                        'Red Panda',
+                        'Impala',
+                        'Tiger',
+                        'Crocodile',
+                        'Bat',
+                    ], onChange: () => { }, value: "Monkeys", error: "Bad value" }) }), _jsx(Field, { label: "Nested Menu", children: _jsx(Menu, { maxHeight: "240px", menu: {
+                        label: 'Menu',
+                        trigger: TriggerType.DROP_DOWN_BUTTON,
+                        sections: [
+                            {
+                                type: MenuType.MENU,
+                                menu: {
+                                    trigger: 'Text',
+                                    label: 'Children',
+                                    sections: [...Array(100).keys()].map(() => ({
+                                        type: 'Option',
+                                        label: Math.random().toString(36).substring(7),
+                                        onClick: () => { },
+                                    })),
+                                },
+                            },
+                            ...[...Array(100).keys()].map(() => ({
+                                type: MenuType.OPTION,
+                                label: Math.random().toString(36).substring(7),
+                                onClick: () => { },
+                            })),
+                        ],
+                    } }) }), _jsx(Popover, { content: _jsxs(InputGroup, { small: true, children: [_jsx(Input, { value: "Value", width: "150px", error: "Bad value" }), _jsx(Button, { colored: true, label: "Save", onClick: () => { } }), _jsx(Button, { label: "Cancel", onClick: () => {
+                                /* You'll need to define the 'close' action here */
+                            } })] }), children: _jsx(Button, { colored: true, label: "Toggle me", onClick: () => { } }) })] })),
+};

package/dist/components/number-input/number-input.d.ts

@@ -0,0 +1,26 @@
+import React, { ChangeEvent, FocusEvent } from 'react';
+export interface INumberInputProps {
+    name?: string | {
+        fieldName: string;
+    };
+    placeholder?: string;
+    disabled?: boolean;
+    error?: string | boolean;
+    left?: boolean;
+    small?: boolean;
+    width?: string | number;
+    value?: string | number;
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+    onFocus?: (event: FocusEvent<HTMLInputElement>) => void;
+    tabIndex?: number;
+    testId?: string;
+    tooltip?: string | number | React.ReactNode;
+    warning?: string | boolean;
+    validationCallback?: (name: string | {
+        fieldName: string;
+    }, error: string | null) => void;
+    allowEmpty?: boolean;
+    isInTable?: boolean;
+    groupOrder?: any;
+}
+export declare const NumberInput: ({ name, placeholder, disabled, error, left, small, width, value, onChange, onFocus, tabIndex, testId, tooltip, warning, validationCallback, allowEmpty, isInTable, groupOrder, }: INumberInputProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/number-input/number-input.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { validateNumber, cleanNumStr } from '@oliasoft-open-source/units';
+import { Input } from '../input/input';
+const getStringName = (name) => {
+    if (!name)
+        return '';
+    if (typeof name === 'string') {
+        return name;
+    }
+    return name.fieldName;
+};
+export const NumberInput = ({ name, placeholder = '', disabled = false, error = false, left = false, small = false, width = '100%', value = '', onChange = () => { }, onFocus = () => { }, tabIndex = 0, testId, tooltip = null, warning = false, validationCallback = () => { }, allowEmpty = false, isInTable, groupOrder, }) => {
+    const [displayValue, setDisplayValue] = useState(value);
+    const [validationError, setValidationError] = useState(null);
+    const stringName = getStringName(name);
+    const validateInputValue = (value) => {
+        let validation = validateNumber(value);
+        if ((allowEmpty && value === '') || validation.valid) {
+            return { ...validation, valid: true, errors: undefined };
+        }
+        else {
+            return validation;
+        }
+    };
+    useEffect(() => {
+        const { valid, errors } = validateInputValue(value);
+        setDisplayValue(value);
+        if (valid) {
+            setValidationError(null);
+            validationCallback(stringName, null);
+        }
+        else {
+            const firstError = errors && errors.length ? errors[0] : null;
+            setValidationError(firstError);
+            validationCallback(stringName, firstError);
+        }
+    }, [value, error]);
+    const onSetValue = (evt) => {
+        const input = evt.target;
+        const { value } = input;
+        const inputValue = cleanNumStr(value.replaceAll(' ', '').replaceAll('|', ''));
+        const { valid, errors } = validateInputValue(inputValue);
+        if (valid) {
+            const newEvent = {
+                ...evt,
+                target: {
+                    ...evt.target,
+                    value: inputValue,
+                    name: stringName,
+                },
+            };
+            onChange(newEvent);
+            setDisplayValue(inputValue);
+            setValidationError(null);
+            validationCallback(stringName, null);
+        }
+        else {
+            setDisplayValue(inputValue);
+            const firstError = errors && errors.length ? errors[0] : null;
+            setValidationError(firstError);
+            validationCallback(stringName, firstError);
+        }
+    };
+    return (_jsx(Input, { type: "text", name: stringName, testId: testId, disabled: disabled, placeholder: placeholder, value: displayValue, onChange: onSetValue, onFocus: onFocus, error: error || validationError, warning: warning, right: !left, small: small, width: width, isInTable: isInTable, groupOrder: groupOrder, tabIndex: tabIndex, tooltip: tooltip }, stringName));
+};

package/dist/components/number-input/number-input.stories.d.ts

@@ -0,0 +1,13 @@
+import { INumberInputProps } from './number-input';
+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, INumberInputProps>;
+export declare const Small: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, INumberInputProps>;
+export declare const Width: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, INumberInputProps>;
+export declare const Left: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, INumberInputProps>;
+export declare const Disabled: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, INumberInputProps>;
+export declare const AllowEmpty: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, INumberInputProps>;
+export declare const Warning: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, INumberInputProps>;
+export declare const Error: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, INumberInputProps>;
+export declare const BadInput: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, INumberInputProps>;
+export declare const TestInputGroup: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/number-input/number-input.stories.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useArgs } from '@storybook/addons';
+import { NumberInput } from './number-input';
+import { InputGroup } from '../input-group/input-group';
+import { InputGroupAddon } from '../input-group/input-group-addon/input-group-addon';
+import { Select } from '../select/select';
+export default {
+    title: 'Forms/NumberInput',
+    component: NumberInput,
+    parameters: {
+        canvas: {
+            page: null,
+        },
+    },
+    args: {
+        label: 'Label',
+    },
+};
+const Template = (args) => {
+    const [_, updateArgs] = useArgs();
+    const handleChange = (evt) => {
+        updateArgs({ value: evt.target.value });
+    };
+    return _jsx(NumberInput, { onChange: handleChange, value: 123, ...args });
+};
+export const Default = Template.bind({});
+export const Small = Template.bind({});
+Small.args = { small: true };
+export const Width = Template.bind({});
+Width.args = { width: '150px' };
+export const Left = Template.bind({});
+Left.args = { left: true };
+export const Disabled = Template.bind({});
+Disabled.args = { disabled: true };
+export const AllowEmpty = Template.bind({});
+AllowEmpty.args = { allowEmpty: true, value: '' };
+export const Warning = Template.bind({});
+Warning.args = { warning: 'This input number is almost 100!', value: '99' };
+export const Error = Template.bind({});
+Error.args = { error: 'This is a error message' };
+export const BadInput = Template.bind({});
+BadInput.args = { value: '123test' };
+export const TestInputGroup = () => (_jsxs(InputGroup, { small: true, children: [_jsx(NumberInput, { value: 123 }), _jsx(InputGroupAddon, { children: "to" }), _jsx(NumberInput, { value: 123 }), _jsx(Select, { options: [{ value: 'units', label: 'units' }], width: "auto", value: "units" })] }));

package/dist/components/option-dropdown/enum.d.ts

@@ -0,0 +1,5 @@
+export declare enum DropdownType {
+    HEADING = "Heading",
+    DIVIDER = "Divider",
+    DEFAULT = "Default"
+}

package/dist/components/option-dropdown/enum.js

@@ -0,0 +1,6 @@
+export var DropdownType;
+(function (DropdownType) {
+    DropdownType["HEADING"] = "Heading";
+    DropdownType["DIVIDER"] = "Divider";
+    DropdownType["DEFAULT"] = "Default";
+})(DropdownType || (DropdownType = {}));

package/dist/components/option-dropdown/heading.d.ts

@@ -0,0 +1,4 @@
+export interface IOptDropdownHeadingProps {
+    label: string;
+}
+export declare const Heading: ({ label }: IOptDropdownHeadingProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/option-dropdown/heading.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styles from './option-dropdown.module.less';
+export const Heading = ({ label }) => (_jsx("div", { className: styles.heading, children: label }));

package/dist/components/option-dropdown/layer.d.ts

@@ -0,0 +1,16 @@
+import React, { ReactElement } from 'react';
+import { DropdownType } from "./enum";
+interface IOptionType {
+    type?: DropdownType;
+    label?: string;
+    value?: any;
+    selected?: boolean;
+}
+export interface IOptDropdownLayerProps {
+    options: IOptionType[];
+    onChangeOptions: (event: React.MouseEvent<HTMLAnchorElement>, options: IOptionType[]) => void;
+    showHeader?: boolean;
+    maxHeight?: string | number;
+}
+export declare const Layer: ({ options, onChangeOptions, showHeader, maxHeight, }: IOptDropdownLayerProps) => ReactElement;
+export {};

package/dist/components/option-dropdown/layer.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import cx from 'classnames';
+import { Option } from './option';
+import { Divider } from '../divider/divider';
+import styles from './option-dropdown.module.less';
+import { Heading } from './heading';
+import { DropdownType } from "./enum";
+export const Layer = ({ options, onChangeOptions, showHeader, maxHeight, }) => {
+    return (_jsxs("div", { className: cx('menu', styles.menu), style: { maxHeight }, children: [showHeader && (_jsxs(_Fragment, { children: [_jsxs("div", { className: styles.header, children: [_jsx("a", { onClick: (evt) => {
+                                    const next = options.map((option) => ({
+                                        ...option,
+                                        selected: true,
+                                    }));
+                                    onChangeOptions(evt, next);
+                                }, children: "All" }), _jsx("a", { onClick: (evt) => {
+                                    const next = options.map((option) => ({
+                                        ...option,
+                                        selected: false,
+                                    }));
+                                    onChangeOptions(evt, next);
+                                }, children: "Clear" }), _jsx("a", { onClick: (evt) => {
+                                    const next = options.map((option) => ({
+                                        ...option,
+                                        selected: !option.selected,
+                                    }));
+                                    onChangeOptions(evt, next);
+                                }, children: "Invert" })] }), _jsx(Divider, { margin: "7px" })] })), options.map((option, index) => {
+                switch (option.type) {
+                    case DropdownType.HEADING:
+                        return _jsx(Heading, { label: option.label }, index);
+                    case DropdownType.DIVIDER:
+                        return _jsx(Divider, { margin: "7px" }, index);
+                    default:
+                        return (_jsx(Option, { option: option, onChange: (evt) => {
+                                const { value } = option;
+                                const next = options.map((option) => option.value !== value
+                                    ? option
+                                    : { ...option, selected: !option.selected });
+                                onChangeOptions(evt, next);
+                            } }, index));
+                }
+            })] }));
+};

package/dist/components/option-dropdown/option-dropdown.d.ts

@@ -0,0 +1,19 @@
+import { ReactElement, ChangeEvent } from 'react';
+interface IOptionType {
+    label?: string;
+    value?: string | number;
+    selected?: boolean;
+}
+export interface IOptionDropdownProps {
+    name?: string;
+    label: string;
+    options: IOptionType[];
+    onChange: (event: ChangeEvent<HTMLInputElement & {
+        name?: string;
+        value: IOptionType[];
+    }>) => void;
+    showHeader?: boolean;
+    maxHeight?: string;
+}
+export declare const OptionDropdown: ({ name, label, options, onChange, showHeader, maxHeight, }: IOptionDropdownProps) => ReactElement;
+export {};

package/dist/components/option-dropdown/option-dropdown.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Menu } from '../menu/menu';
+import { Layer } from './layer';
+import { TriggerType } from "../../common-enum";
+export const OptionDropdown = ({ name, label, options, onChange, showHeader = true, maxHeight = '40vh', }) => {
+    return (_jsx(Menu, { menu: {
+            label,
+            trigger: TriggerType.DROP_DOWN_BUTTON,
+            possiblePlacements: ['top-start', 'bottom-start'],
+            sections: (_jsx(Layer, { options: options, onChangeOptions: (evt, nextOptions) => {
+                    evt.stopPropagation();
+                    evt.target.name = name;
+                    evt.target.value = nextOptions;
+                    onChange(evt);
+                }, showHeader: showHeader, maxHeight: maxHeight })),
+        } }));
+};

package/dist/components/option-dropdown/option-dropdown.stories.d.ts

@@ -0,0 +1,5 @@
+import { IOptionDropdownProps } from './option-dropdown';
+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, IOptionDropdownProps>;
+export declare const ScrollOverflow: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IOptionDropdownProps>;

package/dist/components/option-dropdown/option-dropdown.stories.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useArgs } from '@storybook/addons';
+import { OptionDropdown } from './option-dropdown';
+const options = [
+    { label: 'Animals', type: 'Heading' },
+    { type: 'Divider' },
+    { label: 'Aardvarks', value: 'termites' },
+    { label: 'Kangaroos', value: 'grass' },
+    { label: 'Monkeys', value: 'bananas' },
+];
+export default {
+    title: 'Forms/OptionDropdown',
+    component: OptionDropdown,
+    args: {
+        label: 'Label',
+        options,
+    },
+};
+const Template = (args) => {
+    const [_, updateArgs] = useArgs();
+    const handleChange = (evt) => {
+        updateArgs({ options: evt.target.value });
+    };
+    return (_jsx(OptionDropdown
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    , { ...args, onChange: handleChange }));
+};
+export const Default = Template.bind({});
+export const ScrollOverflow = Template.bind({});
+ScrollOverflow.args = {
+    options: [...Array(50)].map((_, index) => ({
+        label: `Item #${index}`,
+        value: index,
+    })),
+};

package/dist/components/option-dropdown/option.d.ts

@@ -0,0 +1,10 @@
+import React, { ReactElement } from 'react';
+export interface IOptDropdownOptionProps {
+    option: {
+        key?: string;
+        label?: string;
+        selected?: boolean;
+    };
+    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+}
+export declare const Option: ({ option, onChange, }: IOptDropdownOptionProps) => ReactElement;

package/dist/components/option-dropdown/option.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CheckBox } from '../check-box/check-box';
+import styles from './option-dropdown.module.less';
+export const Option = ({ option, onChange, }) => {
+    const { key, label, selected } = option;
+    return (_jsx("div", { className: styles.item, children: _jsx(CheckBox, { label: label, noMargin: true, checked: selected, onChange: onChange }) }, key));
+};

package/dist/components/pagination/pagination.d.ts

@@ -0,0 +1,13 @@
+import { IPaginationPerPageType } from './pagination.interface';
+export interface IPagination {
+    rowCount: number;
+    selectedPage: string | number;
+    onSelectPage?: (value: number) => void;
+    rowsPerPage?: IPaginationPerPageType;
+    small?: boolean;
+    errorMessageTemplate?: string;
+}
+export interface IPaginationProps {
+    pagination: IPagination;
+}
+export declare const Pagination: ({ pagination }: IPaginationProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,15 @@
+import React from 'react';
+export interface IPaginationValidationResult {
+    valid: boolean;
+    error: string | null;
+}
+export interface IPaginationOptionType {
+    label?: string;
+    value?: string | number;
+    selected?: boolean;
+}
+export interface IPaginationPerPageType {
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    options?: IPaginationOptionType[];
+    value?: string | number;
+}

package/dist/components/pagination/pagination.interface.js

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

package/dist/components/pagination/pagination.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { Select } from '../select/select';
+import { Input } from '../input/input';
+import { numberOfPages, validateSelectedPage } from './pagination.viewdata';
+import styles from './pagination.module.less';
+import { Button } from '../button/button';
+import { InputGroup } from '../input-group/input-group';
+import { InputGroupAddon } from '../input-group/input-group-addon/input-group-addon';
+import { IconType } from "../../common-enum";
+export const Pagination = ({ pagination }) => {
+    const { rowCount, selectedPage, small, onSelectPage, rowsPerPage, errorMessageTemplate, } = pagination;
+    const showAll = Number(rowsPerPage?.value) === 0;
+    const numPages = numberOfPages(rowCount, rowsPerPage);
+    const [unvalidatedSelectedPage, setUnvalidatedSelectedPage] = useState(String(selectedPage));
+    useEffect(() => {
+        setUnvalidatedSelectedPage(String(selectedPage));
+    }, [selectedPage]);
+    const { error } = validateSelectedPage(unvalidatedSelectedPage, numPages, errorMessageTemplate);
+    const setSelectedPage = (value) => {
+        const { valid } = validateSelectedPage(value, numPages, errorMessageTemplate);
+        setUnvalidatedSelectedPage(value);
+        if (valid && value !== '' && onSelectPage) {
+            onSelectPage(Number(value));
+        }
+    };
+    return (_jsxs("div", { className: styles.paginationContainer, children: [rowsPerPage && (_jsx("div", { style: { flexShrink: 0 }, children: _jsx(Select, { onChange: (evt) => {
+                        if (rowsPerPage.onChange) {
+                            rowsPerPage.onChange(evt);
+                        }
+                        setSelectedPage(String(1));
+                    }, options: rowsPerPage.options, native: !!rowsPerPage.options, small: small, width: "auto", value: rowsPerPage.value }) })), _jsx(Button, { small: small, round: true, basic: true, icon: IconType.CHEVRON_DOUBLE_LEFT, onClick: () => setSelectedPage(String(1)), disabled: showAll || selectedPage === 1 }), _jsx(Button, { small: small, round: true, basic: true, icon: IconType.CHEVRON_LEFT, onClick: () => setSelectedPage(String(Number(selectedPage) - 1)), disabled: showAll || selectedPage === 1 }), _jsxs(InputGroup, { small: small, width: "auto", children: [_jsx(Input, { right: true, value: unvalidatedSelectedPage, placeholder: String(selectedPage), onChange: (evt) => setSelectedPage(evt.target.value), width: "50px", disabled: showAll || numPages <= 1, error: error }), _jsxs(InputGroupAddon, { children: ["of ", numPages] })] }), _jsx(Button, { small: small, round: true, basic: true, icon: IconType.CHEVRON_RIGHT, onClick: () => setSelectedPage(String(Number(selectedPage) + 1)), disabled: showAll || selectedPage === numPages }), _jsx(Button, { small: small, round: true, basic: true, icon: IconType.CHEVRON_DOUBLE_RIGHT, onClick: () => setSelectedPage(String(numPages)), disabled: showAll || selectedPage === numPages })] }));
+};

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

@@ -0,0 +1,7 @@
+import { StoryFn } from '@storybook/react';
+import { IPaginationProps } from './pagination';
+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: StoryFn<IPaginationProps>;
+export declare const RowsPerPage: () => import("react/jsx-runtime").JSX.Element;
+export declare const Small: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/pagination/pagination.stories.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Pagination } from './pagination';
+const pagination = {
+    rowCount: 500,
+    selectedPage: 1,
+    onSelectPage: () => { },
+};
+export default {
+    title: 'Basic/Pagination',
+    component: Pagination,
+    args: {
+        pagination,
+    },
+};
+export const Default = () => {
+    const [selectedPage, setSelectedPage] = useState(1);
+    return (_jsx(Pagination, { pagination: {
+            rowCount: 500,
+            selectedPage,
+            onSelectPage: (evt) => setSelectedPage(evt),
+        } }));
+};
+export const RowsPerPage = () => {
+    const [selectedPage, setSelectedPage] = useState(1);
+    const [rowsPerPage, setRowsPerPage] = useState(20);
+    return (_jsx(Pagination, { pagination: {
+            rowCount: 500,
+            selectedPage,
+            rowsPerPage: {
+                onChange: (evt) => setRowsPerPage(Number(evt.target.value)),
+                options: [
+                    { label: '10 / page', value: 10 },
+                    { label: '20 / page', value: 20 },
+                    { label: '50 / page', value: 50 },
+                    { label: 'Show all', value: 0 },
+                ],
+                value: rowsPerPage,
+            },
+            onSelectPage: (evt) => setSelectedPage(evt),
+        } }));
+};
+export const Small = () => {
+    const [selectedPage, setSelectedPage] = useState(1);
+    const [rowsPerPage, setRowsPerPage] = useState(20);
+    return (_jsx(Pagination, { pagination: {
+            small: true,
+            rowCount: 500,
+            selectedPage,
+            rowsPerPage: {
+                onChange: (evt) => setRowsPerPage(Number(evt.target.value)),
+                options: [
+                    { label: '10 / page', value: 10 },
+                    { label: '20 / page', value: 20 },
+                    { label: '50 / page', value: 50 },
+                    { label: 'Show all', value: 0 },
+                ],
+                value: rowsPerPage,
+            },
+            onSelectPage: (evt) => setSelectedPage(evt),
+        } }));
+};

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

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