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

package/dist/components/drawer/drawer.stories.js

@@ -0,0 +1,176 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Drawer } from './drawer';
+import { Button } from '../button/button';
+import { List } from '../list/list';
+import { Heading } from '../heading/heading';
+import { Flex } from '../layout/flex/flex';
+import { listSubheadingsBadges } from '../list/list.stories-data';
+import { Icon } from '../icon/icon';
+import { IconType } from "../../common-enum";
+export default {
+    title: 'Layout/Drawer',
+    component: Drawer,
+    args: {
+        button: true,
+        open: true,
+        right: false,
+        border: true,
+        shadow: false,
+        width: '300px',
+        closedWidth: '50px',
+        top: undefined,
+        children: _jsx("div", { style: { padding: 20 }, children: "Drawer content" }),
+    },
+    argTypes: {
+        button: { table: { disable: true } },
+    },
+    decorators: [
+        (story) => (_jsxs(Flex, { height: "400px", wrap: false, children: [_jsx("div", { style: {
+                        flexGrow: 1,
+                        padding: 20,
+                        background: 'var(--color-background)',
+                    }, children: "Page content" }), story()] })),
+    ],
+    parameters: {
+        layout: 'fullscreen',
+    },
+};
+const Template = (args) => {
+    return (_jsx(Drawer
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    , { ...args }));
+};
+export const Default = Template.bind({});
+export const Right = Template.bind({});
+Right.args = { right: true };
+export const Fixed = Template.bind({});
+Fixed.args = {
+    fixed: true,
+};
+Fixed.parameters = {
+    docs: {
+        story: {
+            inline: false,
+            iframeHeight: 400,
+        },
+    },
+};
+export const CustomButton = Template.bind({});
+CustomButton.args = {
+    button: _jsx(Button, { colored: true, round: true, icon: IconType.LEFT }),
+    buttonAnimate: true,
+};
+export const WithList = () => {
+    const [open, setOpen] = useState(false);
+    return (_jsxs(_Fragment, { children: [_jsx(Drawer, { button: _jsx(Button, { onClick: () => setOpen(!open), round: true, icon: IconType.CHEVRON_LEFT }), width: "300px", closedWidth: "50px", border: true, open: open, children: _jsx(List, { drawer: true, list: listSubheadingsBadges, marginBottom: 10, narrow: !open }) }), _jsx(Drawer, { button: _jsx(Button, { onClick: () => setOpen(!open), round: true, icon: IconType.CHEVRON_LEFT }), width: "300px", closedWidth: "50px", border: true, open: open, children: _jsx(List, { drawer: true, list: listSubheadingsBadges, marginBottom: 10, narrow: !open }) })] }));
+};
+WithList.parameters = {
+    docs: {
+        description: {
+            story: 'To hide `List` headings when the `Drawer` is closed, set the `narrow` prop on the `List`.',
+        },
+    },
+};
+export const Tabs = Template.bind({});
+Tabs.args = {
+    right: true,
+    button: false,
+    closedWidth: 0,
+    width: ['200px', '300px', '400px', '400px'],
+    defaultTabIndex: 1,
+    tabs: [
+        {
+            icon: _jsx(Icon, { icon: IconType.HELP }),
+            content: (_jsxs("div", { style: { padding: 20 }, children: [_jsx(Heading, { top: true, children: "Help" }), 'Example content goes here lorem ipsum. '.repeat(500)] })),
+        },
+        {
+            icon: _jsx(Icon, { icon: IconType.SETTINGS }),
+            content: (_jsxs("div", { style: { padding: 20 }, children: [_jsx(Heading, { top: true, children: "Settings" }), 'Example content goes here lorem ipsum. '.repeat(500)] })),
+        },
+        {
+            icon: _jsx(Icon, { icon: IconType.EDIT }),
+            content: (_jsxs("div", { style: { padding: 20 }, children: [_jsx(Heading, { top: true, children: "Edit" }), 'Example content goes here lorem ipsum. '.repeat(500)] })),
+        },
+        {
+            icon: _jsx(Icon, { icon: IconType.LIST }),
+            badge: '2',
+            content: (_jsxs("div", { style: { padding: 20 }, children: [_jsx(Heading, { top: true, children: "List" }), 'Example content goes here lorem ipsum. '.repeat(500)] })),
+        },
+    ],
+};
+Tabs.parameters = {
+    docs: {
+        description: {
+            story: 'The top tab will be open by default, but you can set `defaultTabIndex` if you need a different tab open. If you need different widths per tab, pass an array of widths to `width`.',
+        },
+    },
+};
+export const ControlledOpenClose = () => {
+    const [open, setOpen] = useState(false);
+    const tabs = [{ icon: 'help' }, { icon: 'settings' }];
+    const handleClose = (tab) => {
+        if (tab)
+            console.log('on close', tab);
+    };
+    const handleOpen = (tab) => {
+        if (tab)
+            console.log('on open', tab);
+    };
+    return (_jsx(Drawer, { border: true, right: true, tabs: tabs, open: open, setOpen: setOpen, onClose: handleClose, onOpen: handleOpen }));
+};
+ControlledOpenClose.parameters = {
+    docs: {
+        description: {
+            story: 'If a `setOpen` prop is set, the drawer will not manage its open state internally and can be controlled.',
+        },
+    },
+};
+export const ControlledTabs = () => {
+    const [activeTab, setActiveTab] = useState(0);
+    const tabs = [{ icon: 'help' }, { icon: 'settings' }];
+    return (_jsx(Drawer, { border: true, right: true, tabs: tabs, activeTab: activeTab, setActiveTab: setActiveTab }));
+};
+ControlledTabs.parameters = {
+    docs: {
+        description: {
+            story: 'If `activeTab` and `setActiveTab` props are set, the drawer will not manage the tab state internally and can be controlled.',
+        },
+    },
+};
+export const MultipleTabbedDrawers = () => {
+    const tabs1 = [
+        {
+            icon: _jsx(Icon, { icon: IconType.HELP }),
+            content: (_jsxs("div", { style: { padding: 20 }, children: [_jsx(Heading, { top: true, children: "Help" }), 'Example content goes here lorem ipsum. '.repeat(500)] })),
+        },
+        {
+            icon: _jsx(Icon, { icon: IconType.SETTINGS }),
+            content: (_jsxs("div", { style: { padding: 20 }, children: [_jsx(Heading, { top: true, children: "Settings" }), 'Example content goes here lorem ipsum. '.repeat(500)] })),
+        },
+    ];
+    const tabs2 = [
+        {
+            icon: _jsx(Icon, { icon: IconType.EDIT }),
+            content: (_jsxs("div", { style: { padding: 20 }, children: [_jsx(Heading, { top: true, children: "Edit" }), 'Example content goes here lorem ipsum. '.repeat(500)] })),
+        },
+    ];
+    return (_jsxs(_Fragment, { children: [_jsx(Drawer, { right: true, tabs: tabs1, border: true, open: true }), _jsx(Drawer, { right: true, tabs: tabs2, border: true, open: true })] }));
+};
+export const Resizable = () => {
+    const [open, setOpen] = useState(true);
+    const [drawerWidth, setDrawerWidth] = useState(300);
+    const tabs = [
+        {
+            icon: _jsx(Icon, { icon: IconType.HELP }),
+            content: (_jsxs("div", { style: { padding: 20 }, children: [_jsx(Heading, { top: true, children: "Help" }), 'Example content goes here lorem ipsum. '.repeat(500)] })),
+        },
+        {
+            icon: _jsx(Icon, { icon: IconType.SETTINGS }),
+            content: (_jsxs("div", { style: { padding: 20 }, children: [_jsx(Heading, { top: true, children: "Settings" }), 'Example content goes here lorem ipsum dolor. '.repeat(500)] })),
+        },
+    ];
+    return (_jsx(_Fragment, { children: _jsx(Drawer, { right: true, tabs: tabs, border: true, open: open, setOpen: setOpen, width: drawerWidth, onResize: (width) => {
+                setDrawerWidth(width);
+            } }) }));
+};

package/dist/components/empty/empty.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+export interface IEmptyProps {
+    width?: string | number;
+    height?: string | number;
+    text?: string | ReactNode;
+    children?: ReactNode;
+}
+export declare const Empty: ({ width, height, text, children, }: IEmptyProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/empty/empty.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text } from '../text/text';
+import styles from './empty.module.less';
+export const Empty = ({ width = 'auto', height = 'auto', text = 'No data', children, }) => {
+    return (_jsxs("div", { className: styles.empty, style: { width, height }, children: [_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "64", height: "41", children: _jsxs("g", { transform: "translate(0 1)", fill: "none", fillRule: "evenodd", children: [_jsx("ellipse", { cx: "32", cy: "33", rx: "32", ry: "7", fill: "rgba(0,0,0,0.1)" }), _jsxs("g", { fillRule: "nonzero", stroke: "var(--color-text)", strokeOpacity: "0.2", children: [_jsx("path", { d: "M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z", fill: "rgba(0,0,0,0.05)" }), _jsx("path", { d: "M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z", fill: "var(--color-background-raised)" })] })] }) }), text !== '' && (_jsx("div", { className: styles.text, children: _jsx(Text, { faint: true, children: text }) })), children] }));
+};

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

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

package/dist/components/empty/empty.stories.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Empty } from './empty';
+import { Button } from '../button/button';
+export default {
+    title: 'Progress/Empty',
+    component: Empty,
+    args: {
+        text: 'No data',
+        width: '100%',
+        height: '100%',
+    },
+};
+const Template = (args) => _jsx(Empty, { ...args });
+export const Default = Template.bind({});
+export const WithButton = Template.bind({});
+WithButton.args = {
+    text: 'Please apply at least one casing in Well Schematics to perform drilling mechanics',
+    children: _jsx(Button, { colored: true, label: "Add casing" }),
+};

package/dist/components/file-input/enum.d.ts

@@ -0,0 +1,6 @@
+export declare enum InputReaderMethods {
+    READ_AS_TEXT = "readAsText",
+    READ_AS_ARRAY_BUFFER = "readAsArrayBuffer",
+    READ_AS_DATA_URL = "readAsDataURL",
+    READ_AS_BINARY_STRING = "readAsBinaryString"
+}

package/dist/components/file-input/enum.js

@@ -0,0 +1,7 @@
+export var InputReaderMethods;
+(function (InputReaderMethods) {
+    InputReaderMethods["READ_AS_TEXT"] = "readAsText";
+    InputReaderMethods["READ_AS_ARRAY_BUFFER"] = "readAsArrayBuffer";
+    InputReaderMethods["READ_AS_DATA_URL"] = "readAsDataURL";
+    InputReaderMethods["READ_AS_BINARY_STRING"] = "readAsBinaryString";
+})(InputReaderMethods || (InputReaderMethods = {}));

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

@@ -0,0 +1,18 @@
+import { ReactElement } from 'react';
+import { InputReaderMethods } from "./enum";
+export type FileReaderMethod = InputReaderMethods;
+export declare const readFile: (file?: Blob, method?: FileReaderMethod) => Promise<string | ArrayBuffer | null>;
+export interface IFileInputProps {
+    label?: string;
+    loading?: boolean;
+    placeholder?: string;
+    disabled?: boolean;
+    file?: File;
+    accept?: string;
+    multi?: boolean;
+    name?: string;
+    width?: string | number;
+    onChange?: (event: any) => void;
+    testId?: string;
+}
+export declare const FileInput: ({ label, loading, placeholder, disabled, file, accept, multi, name, width, onChange, testId, }: IFileInputProps) => ReactElement;

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

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext, useRef } from 'react';
+import { InputGroup } from '../input-group/input-group';
+import { Input } from '../input/input';
+import { Button } from '../button/button';
+import styles from './file-input.module.less';
+import { DisabledContext } from '../../helpers/disabled-context';
+import { InputReaderMethods } from "./enum";
+export const readFile = (file = new Blob(), method = InputReaderMethods.READ_AS_TEXT) => {
+    const reader = new FileReader();
+    return new Promise((resolve, reject) => {
+        if (method in reader) {
+            reader[method](file);
+        }
+        else {
+            reject(new Error('Invalid FileReader method'));
+            return;
+        }
+        reader.onload = () => {
+            if (reader.result !== null) {
+                resolve(reader.result);
+            }
+            else {
+                reject(new Error('File reading resulted in null'));
+            }
+        };
+        reader.onerror = (error) => reject(error);
+    });
+};
+export const FileInput = ({ label = 'Select', loading = false, placeholder = 'No file selected', disabled = false, file, accept, multi, name, width, onChange = () => { }, testId, }) => {
+    const disabledContext = useContext(DisabledContext);
+    const inputRef = useRef(null);
+    const fileName = file?.name || null;
+    const handleClick = () => {
+        if (!(disabled || disabledContext))
+            inputRef.current?.click();
+    };
+    return (_jsxs("div", { onClick: handleClick, style: { width }, children: [_jsxs(InputGroup, { children: [_jsx(Input, { value: fileName || '', placeholder: placeholder, disabled: true }), _jsx(Button, { label: label, loading: loading, disabled: loading || disabled || disabledContext, groupOrder: "last" })] }), _jsx("input", { name: name, ref: inputRef, className: styles.fileInput, type: "file", accept: accept, onChange: (evt) => {
+                    onChange({
+                        ...evt,
+                        target: {
+                            ...evt.target,
+                            value: multi ? evt?.target?.files : evt?.target?.files?.[0],
+                        },
+                    });
+                }, "data-testid": testId })] }));
+};

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

@@ -0,0 +1,7 @@
+import { IFileInputProps } from "./file-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, IFileInputProps>;
+export declare const RestrictFiletype: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IFileInputProps>;
+export declare const ReadJSONFile: () => import("react/jsx-runtime").JSX.Element;
+export declare const Image: () => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,65 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { useArgs } from "@storybook/addons";
+import { FileInput, readFile } from "./file-input";
+import { Spacer } from "../layout/spacer/spacer";
+import { Message } from "../message/message";
+import { TextArea } from "../textarea/textarea";
+import { MessageType } from "../message/enum";
+export default {
+    title: 'Forms/FileInput',
+    component: FileInput,
+    args: {
+        file: null,
+    },
+};
+const Template = (args) => {
+    const [_, updateArgs] = useArgs();
+    const handleChange = (evt) => {
+        updateArgs({ file: evt.target.value });
+    };
+    return _jsx(FileInput, { ...args, onChange: handleChange });
+};
+export const Default = Template.bind({});
+export const RestrictFiletype = Template.bind({});
+RestrictFiletype.args = { accept: '.json' };
+RestrictFiletype.parameters = {
+    docs: {
+        description: {
+            story: 'See [accept attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept) to restrict file type',
+        },
+    },
+};
+export const ReadJSONFile = () => {
+    const [file, setFile] = useState();
+    const [json, setJson] = useState({});
+    return (_jsxs(_Fragment, { children: [_jsx(FileInput, { file: file, onChange: async (evt) => {
+                    const file = evt.target.value;
+                    try {
+                        const text = await readFile(file);
+                        const json = JSON.parse(text);
+                        setJson(json);
+                    }
+                    catch (error) {
+                        console.log(error);
+                    }
+                    setFile(file);
+                }, accept: ".json" }), _jsx(Spacer, {}), file ? (_jsx(TextArea, { monospace: true, value: JSON.stringify(json, null, 2), rows: 20 })) : (_jsx(Message, { message: {
+                    visible: true,
+                    content: 'Upload a JSON file to see preview',
+                    type: MessageType.INFO,
+                } }))] }));
+};
+export const Image = () => {
+    const [file, setFile] = useState();
+    return (_jsxs(_Fragment, { children: [_jsx(FileInput, { file: file, onChange: (evt) => {
+                    setFile(evt.target.value);
+                }, accept: "image/*" }), _jsx(Spacer, {}), file ? (_jsx("img", { src: file ? URL.createObjectURL(file) : '', alt: "Preview", style: {
+                    maxHeight: '400px',
+                    maxWidth: '400px',
+                } })) : (_jsx(Message, { message: {
+                    visible: true,
+                    content: 'Upload an image file to see preview',
+                    type: MessageType.INFO,
+                } }))] }));
+};

package/dist/components/form/field.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode, MouseEvent } from 'react';
+import { ILabelIcon, ILabelLockProps } from '../label/label';
+export interface IFieldProps {
+    label?: string | number | ReactNode;
+    labelLeft?: boolean;
+    labelWidth?: string | number;
+    children: ReactNode;
+    helpText?: string | number | ReactNode;
+    helpTextMaxWidth?: string | number;
+    onClickHelp?: (event?: MouseEvent<HTMLDivElement>) => void;
+    lock?: ILabelLockProps;
+    info?: string;
+    libraryIcon?: ILabelIcon;
+    testId?: string;
+}
+export declare const Field: ({ label, labelLeft, labelWidth, children, helpText, helpTextMaxWidth, onClickHelp, lock, info, libraryIcon, testId, }: IFieldProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/form/field.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cx from 'classnames';
+import { Label } from '../label/label';
+import styles from './form.module.less';
+export const Field = ({ label, labelLeft = false, labelWidth = 'auto', children, helpText, helpTextMaxWidth = '300px', onClickHelp, lock = {
+    visible: false,
+    active: false,
+    onClick: () => { },
+    tooltip: '',
+    testId: undefined,
+}, info, libraryIcon, testId, }) => {
+    return (_jsxs("div", { className: cx(styles.field, labelLeft ? styles.labelLeft : ''), "data-testid": testId, children: [(label || labelLeft) && (_jsx(Label, { label: label, width: labelWidth, helpText: helpText, helpTextMaxWidth: helpTextMaxWidth, onClickHelp: onClickHelp, lock: lock, info: info, libraryIcon: libraryIcon, labelLeft: labelLeft })), _jsx("div", { className: styles.fieldInput, children: children })] }));
+};

package/dist/components/form/field.stories.d.ts

@@ -0,0 +1,12 @@
+import { StoryFn } from '@storybook/react';
+import { IFieldProps } from './field';
+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, IFieldProps>;
+export declare const LabelOnLeft: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IFieldProps>;
+export declare const HelpIconTooltip: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IFieldProps>;
+export declare const HelpIconClickable: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IFieldProps>;
+export declare const HelpTextBelow: StoryFn<IFieldProps>;
+export declare const InfoIcon: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IFieldProps>;
+export declare const LockIcon: () => import("react/jsx-runtime").JSX.Element;
+export declare const LibraryIcon: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IFieldProps>;

package/dist/components/form/field.stories.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Field } from './field';
+import { Input } from '../input/input';
+import { Text } from '../text/text';
+export default {
+    title: 'Forms/Field',
+    component: Field,
+    args: {
+        label: 'Label',
+        labelLeft: false,
+    },
+};
+const Template = (args) => (_jsx(Field, { ...args, children: _jsx(Input, {}) }));
+export const Default = Template.bind({});
+export const LabelOnLeft = Template.bind({});
+LabelOnLeft.args = {
+    labelLeft: true,
+    labelWidth: '80px',
+};
+export const HelpIconTooltip = Template.bind({});
+HelpIconTooltip.args = {
+    helpText: 'Tooltip goes here',
+};
+export const HelpIconClickable = Template.bind({});
+HelpIconClickable.args = {
+    onClickHelp: () => { },
+};
+export const HelpTextBelow = (args) => (_jsxs(_Fragment, { children: [_jsxs(Field, { ...args, children: [_jsx(Input, {}), _jsx(Text, { small: true, faint: true, children: "Help text goes here" })] }), _jsxs(Field, { ...args, children: [_jsx(Input, { error: "Error text goes here" }), _jsx(Text, { small: true, error: true, children: "Error text goes here" })] }), _jsxs(Field, { ...args, children: [_jsx(Input, { warning: "Error text goes here" }), _jsx(Text, { small: true, warning: true, children: "Warning text goes here" })] })] }));
+export const InfoIcon = Template.bind({});
+InfoIcon.args = {
+    info: 'Info goes here',
+};
+export const LockIcon = () => {
+    const [locked, setLocked] = useState(false);
+    const handleToggleLock = () => setLocked(!locked);
+    return (_jsx(Field, { label: "Label", lock: {
+            visible: true,
+            active: locked,
+            onClick: handleToggleLock,
+            tooltip: locked ? 'Unlock' : 'Lock',
+            testId: 'testId',
+        }, children: _jsx(Input, { disabled: locked }) }));
+};
+export const LibraryIcon = Template.bind({});
+LibraryIcon.args = {
+    libraryIcon: {
+        onClick: () => { },
+        tooltip: 'View in library',
+    },
+};

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

@@ -0,0 +1,27 @@
+interface FieldArgs {
+    small?: boolean;
+    labelLeft?: boolean;
+    labelWidth?: number | string;
+    row?: boolean;
+    disabled: boolean;
+}
+declare const _default: {
+    title: string;
+    argTypes: {
+        labelWidth: string;
+    };
+    args: {
+        small: boolean;
+        row: boolean;
+        labelLeft: boolean;
+        labelWidth: undefined;
+        disabled: boolean;
+    };
+};
+export default _default;
+export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, FieldArgs>;
+export declare const Small: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, FieldArgs>;
+export declare const LabelsOnLeft: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, FieldArgs>;
+export declare const Row: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, FieldArgs>;
+export declare const SmallRow: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, FieldArgs>;
+export declare const DisabledWithContext: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, FieldArgs>;

package/dist/components/form/form.stories.js

@@ -0,0 +1,76 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { DisabledContext } from "../../helpers/disabled-context";
+import { Field } from "./field";
+import { Input } from "../input/input";
+import { Select } from "../select/select";
+import { CheckBox } from "../check-box/check-box";
+import { ButtonGroup } from "../button-group/button-group";
+import { Button } from "../button/button";
+import { Toggle } from "../toggle/toggle";
+import { InputGroup } from "../input-group/input-group";
+import { InputGroupAddon } from "../input-group/input-group-addon/input-group-addon";
+import { Slider } from "../slider/slider";
+import { TextArea } from "../textarea/textarea";
+import { RadioButton } from "../radio-button/radio-button";
+import { Menu } from "../menu/menu";
+import { FormRow } from "../layout/form-row/form-row";
+import { TriggerType } from "../../common-enum";
+import { MenuType } from "../menu/enum";
+export default {
+    title: 'Forms/Layout',
+    argTypes: {
+        labelWidth: 'text',
+    },
+    args: {
+        small: false,
+        row: false,
+        labelLeft: false,
+        labelWidth: undefined,
+        disabled: false,
+    },
+};
+const renderFields = (args) => {
+    const { small, labelLeft, labelWidth } = args;
+    return (_jsxs(_Fragment, { children: [_jsx(Field, { label: "Input", helpText: "Some help text", labelLeft: labelLeft, labelWidth: labelWidth, children: _jsx(Input, { value: "Value", small: small }) }), _jsx(Field, { label: "TextArea", helpText: "Some very long help text that needs to have its width constrained so it doesn't look silly", helpTextMaxWidth: 200, labelLeft: labelLeft, labelWidth: labelWidth, children: _jsx(TextArea, { value: "Value" }) }), _jsx(Field, { label: "Select (native)", labelLeft: labelLeft, labelWidth: labelWidth, children: _jsx(Select, { options: [
+                        { label: 'Option 1', value: '1' },
+                        { label: 'Option 2', value: '2' },
+                    ], value: { label: 'Option 2', value: '2' }, native: true, small: small, width: "auto" }) }), _jsx(Field, { label: "Select (custom)", labelLeft: labelLeft, labelWidth: labelWidth, children: _jsx(Select, { options: [
+                        { label: 'Option 1', value: '1' },
+                        { label: 'Option 2', value: '2' },
+                    ], value: { label: 'Option 2', value: '2' }, small: small, width: "auto" }) }), _jsx(Field, { label: "Select (multi)", labelLeft: labelLeft, labelWidth: labelWidth, children: _jsx(Select, { options: [
+                        { label: 'Option 1', value: '1' },
+                        { label: 'Option 2', value: '2' },
+                    ], value: [
+                        { label: 'Option 1', value: '1' },
+                        { label: 'Option 2', value: '2' },
+                    ], small: small }) }), _jsx(Field, { label: "Slider", labelLeft: labelLeft, labelWidth: labelWidth, children: _jsx(Slider, { name: "example", label: "Number of aardvarks", value: 35, min: 0, max: 100, step: 1, onChange: () => { }, showArrows: true, showTooltip: true, small: small }) }), _jsx(Field, { label: "ButtonGroup", labelLeft: labelLeft, labelWidth: labelWidth, children: _jsx(ButtonGroup, { items: [
+                        { key: '0', label: 'Option 1', value: '1' },
+                        { key: '1', label: 'Option 2', value: '2' },
+                    ], value: 0, small: small }) }), _jsx(Field, { label: "InputGroup", labelLeft: labelLeft, labelWidth: labelWidth, children: _jsxs(InputGroup, { small: small, children: [_jsx(InputGroupAddon, { children: "$" }), _jsx(Input, { name: "example", value: "123", onChange: () => { } }), _jsx(InputGroupAddon, { children: "each" })] }) }), _jsx(Field, { label: "Menu", labelLeft: labelLeft, labelWidth: labelWidth, children: _jsx(Menu, { menu: {
+                        label: 'Menu',
+                        trigger: TriggerType.DROP_DOWN_BUTTON,
+                        sections: [
+                            { type: MenuType.OPTION, label: 'Lorem' },
+                            { type: MenuType.OPTION, label: 'Ipsum' },
+                        ],
+                        small,
+                    } }) }), _jsx(Field, { label: "CheckBox", labelLeft: labelLeft, labelWidth: labelWidth, children: _jsx(CheckBox, { label: "CheckBox", checked: true, small: small, onChange: () => { } }) }), _jsx(Field, { label: "RadioButton", labelLeft: labelLeft, labelWidth: labelWidth, children: _jsx(RadioButton, { options: [
+                        { label: 'Aardvarks', value: 'termites' },
+                        { label: 'Monkeys', value: 'bananas' },
+                    ], value: { label: 'Monkeys', value: 'bananas' }, inline: true, small: small }) }), _jsx(Field, { label: "Toggle", labelLeft: labelLeft, labelWidth: labelWidth, children: _jsx(Toggle, { label: "Toggle", checked: true, onChange: () => { }, small: small }) }), _jsx(Field, { labelLeft: labelLeft, labelWidth: labelWidth, children: _jsx(Button, { colored: true, label: "Button", onClick: () => { }, small: small }) })] }));
+};
+const Template = (args) => {
+    const { row, disabled } = args;
+    return (_jsx(DisabledContext.Provider, { value: disabled, children: row ? _jsx(FormRow, { children: renderFields(args) }) : renderFields(args) }));
+};
+export const Default = Template.bind({});
+export const Small = Template.bind({});
+Small.args = { small: true };
+export const LabelsOnLeft = Template.bind({});
+LabelsOnLeft.args = { labelLeft: true, labelWidth: 100 };
+export const Row = Template.bind({});
+Row.args = { row: true };
+export const SmallRow = Template.bind({});
+SmallRow.args = { row: true, small: true };
+export const DisabledWithContext = Template.bind({});
+DisabledWithContext.args = { disabled: true };

package/dist/components/heading/heading.d.ts

@@ -0,0 +1,19 @@
+import { ReactNode, MouseEvent } from 'react';
+interface ILibraryIconProps {
+    onClick: () => void;
+    tooltip?: string;
+}
+export interface IHeadingProps {
+    children: ReactNode;
+    helpText?: string;
+    onClick?: (evt: MouseEvent<HTMLDivElement>) => void;
+    onClickHelp?: () => void;
+    onIconClick?: () => void;
+    icon?: ReactNode;
+    libraryIcon?: ILibraryIconProps;
+    marginBottom?: string | number;
+    top?: boolean;
+    testId?: string;
+}
+export declare const Heading: ({ children, helpText, onClick, onClickHelp, onIconClick, icon, libraryIcon, marginBottom, top, testId, }: IHeadingProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/heading/heading.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cx from 'classnames';
+import styles from './heading.module.less';
+import { HelpIcon } from '../help-icon/help-icon';
+import { IconType } from "../../common-enum";
+export const Heading = ({ children, helpText, onClick, onClickHelp, onIconClick, icon, libraryIcon, marginBottom, top = false, testId, }) => {
+    const isHelpIconDisplayed = !!helpText || !!onClickHelp;
+    return (_jsxs("div", { className: cx(styles.heading, top ? styles.top : ''), style: { marginBottom }, onClick: onClick, "data-testid": testId, children: [children, _jsxs("div", { className: styles.icons, children: [icon && _jsx(HelpIcon, { onClick: onIconClick, icon: icon }), isHelpIconDisplayed && (_jsx(HelpIcon, { text: helpText, onClick: onClickHelp })), libraryIcon && (_jsx(HelpIcon, { text: libraryIcon?.tooltip ?? '', onClick: libraryIcon.onClick, icon: IconType.LIBRARY }))] })] }));
+};

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

@@ -0,0 +1,10 @@
+import { IHeadingProps } from './heading';
+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, IHeadingProps>;
+export declare const Top: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IHeadingProps>;
+export declare const CustomMargin: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IHeadingProps>;
+export declare const Help: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IHeadingProps>;
+export declare const LibraryIcon: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IHeadingProps>;
+export declare const CustomIcon: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IHeadingProps>;
+export declare const JSXContent: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IHeadingProps>;