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

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

@@ -0,0 +1,26 @@
+import React from 'react';
+export declare const widthOfCharacters: (characterCount: number) => string;
+export interface IInputProps {
+    error?: string | number | React.ReactNode;
+    warning?: string | number | React.ReactNode;
+    tooltip?: string | number | React.ReactNode;
+    name?: string;
+    type?: string;
+    onChange?: React.ChangeEventHandler<HTMLInputElement>;
+    onKeyPress?: React.KeyboardEventHandler<HTMLInputElement>;
+    onFocus?: React.FocusEventHandler<HTMLInputElement>;
+    onBlur?: React.FocusEventHandler<HTMLInputElement>;
+    small?: boolean;
+    placeholder?: string;
+    tabIndex?: number;
+    value?: string | number;
+    disabled?: boolean;
+    right?: boolean;
+    groupOrder?: string;
+    maxTooltipWidth?: string | number;
+    width?: string | number;
+    testId?: string;
+    size?: number;
+    isInTable?: boolean;
+}
+export declare const Input: React.ForwardRefExoticComponent<IInputProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/input/input.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useContext } from 'react';
+import cx from 'classnames';
+import styles from './input.module.less';
+import { Tooltip } from '../tooltip/tooltip';
+import { isStringNumberOrNode } from '../../helpers/types';
+import { DisabledContext } from '../../helpers/disabled-context';
+/*
+  Gets the width when you want to set it based on the number of characters
+  Replacement for input size property which is hard to style
+*/
+export const widthOfCharacters = (characterCount) => {
+    const padding = '15px';
+    const multiplier = '0.675em';
+    return `calc((${characterCount} * ${multiplier}) + (2 * ${padding}))`;
+};
+export const Input = forwardRef(({ error = null, tooltip = null, isInTable, width: propWidth = undefined, small = false, onChange = () => { }, placeholder = '', value = '', onKeyPress = () => { }, onFocus = () => { }, onBlur = () => { }, name = undefined, type = 'text', tabIndex = 0, disabled = false, right = false, warning = null, groupOrder = null, maxTooltipWidth = undefined, testId = undefined, 
+//deprecated props
+size = null, //use width instead
+ }, ref) => {
+    const disabledContext = useContext(DisabledContext);
+    const order = (() => {
+        if (groupOrder) {
+            switch (groupOrder) {
+                case 'first':
+                    return styles.groupOrderFirst;
+                case 'last':
+                    return styles.groupOrderLast;
+                default:
+                    return styles.groupOrderMiddle;
+            }
+        }
+        return '';
+    })();
+    const width = propWidth || (size ? 'auto' : '100%');
+    return (_jsx("div", { style: { width }, className: order, children: _jsx(Tooltip, { error: !!error, warning: !!warning, text: tooltip || error || warning, enabled: (tooltip && isStringNumberOrNode(tooltip)) ||
+                (error && isStringNumberOrNode(error)) ||
+                (warning && isStringNumberOrNode(warning)) ||
+                false, maxWidth: maxTooltipWidth, display: "block", placement: "bottom-center", children: _jsx("input", { ref: ref, type: type || 'text', size: size || 20, placeholder: placeholder, value: value, onChange: onChange, onKeyPress: onKeyPress, onFocus: onFocus, onBlur: onBlur, name: name, tabIndex: tabIndex, autoComplete: "off", disabled: disabled || disabledContext, className: cx(styles.input, error ? styles.error : warning ? styles.warning : '', right ? styles.right : '', small ? styles.small : '', isInTable ? styles.isInTable : ''), style: { width }, "data-testid": testId }) }) }));
+});

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

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

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

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useArgs } from '@storybook/addons';
+import { Input } from './input';
+export default {
+    title: 'Forms/Input',
+    component: Input,
+    args: {
+        disabled: false,
+        small: false,
+        placeholder: 'Placeholder',
+    },
+};
+const Template = (args) => {
+    const [_, updateArgs] = useArgs();
+    const handleChange = (evt) => {
+        updateArgs({ value: evt.target.value });
+    };
+    return _jsx(Input, { ...args, onChange: handleChange });
+};
+export const Default = Template.bind({});
+export const Date = Template.bind({});
+Date.args = { type: 'date', value: '2020-01-01' };

package/dist/components/input-group/input-group-addon/input-group-addon.d.ts

@@ -0,0 +1,8 @@
+import React, { ReactNode } from "react";
+import { GroupOrder } from "../../../common-enum";
+export interface IInputGroupAddonProps {
+    children: ReactNode;
+    groupOrder?: GroupOrder | null;
+    small?: boolean;
+}
+export declare const InputGroupAddon: ({ children, groupOrder, small, }: IInputGroupAddonProps) => React.ReactElement;

package/dist/components/input-group/input-group-addon/input-group-addon.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import cx from "classnames";
+import styles from "./input-group-addon.module.less";
+import { GroupOrder } from "../../../common-enum";
+export const InputGroupAddon = ({ children, groupOrder = null, small = false, }) => {
+    const order = (() => {
+        if (groupOrder) {
+            switch (groupOrder) {
+                case GroupOrder.FIRST:
+                    return styles.groupOrderFirst;
+                case GroupOrder.LAST:
+                    return styles.groupOrderLast;
+                default:
+                    return styles.groupOrderMiddle;
+            }
+        }
+        return '';
+    })();
+    return (_jsx("span", { className: cx(styles.addon, order, small ? styles.small : ''), children: children }));
+};

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

@@ -0,0 +1,7 @@
+import { ReactElement, ReactNode } from "react";
+export interface IInputGroupProps {
+    children: ReactNode;
+    small?: boolean;
+    width?: string | number;
+}
+export declare const InputGroup: ({ children, small, width, }: IInputGroupProps) => ReactElement;

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

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { Fragment, isValidElement } from "react";
+import cx from "classnames";
+import styles from "./input-group.module.less";
+import { GroupOrder } from "../../common-enum";
+const isDOMTypeElement = (element) => {
+    return isValidElement(element) && typeof element.type === 'string';
+};
+export const InputGroup = ({ children, small = false, width = '100%', }) => {
+    const childElements = children instanceof Array
+        ? children.filter((c) => isValidElement(c))
+        : [children];
+    const elements = childElements.map((item, index) => {
+        const isDOMType = isDOMTypeElement(item);
+        const { groupOrder: groupOrderProp } = !isDOMType
+            ? item.props
+            : { groupOrder: null };
+        const count = childElements.length;
+        const isFirst = index === 0;
+        const isLast = index === count - 1;
+        const isOnly = !count || count === 1;
+        const groupOrder = groupOrderProp ||
+            (isOnly ? null : isFirst ? GroupOrder.FIRST : isLast ? GroupOrder.LAST : GroupOrder.MIDDLE);
+        return isDOMType ? (item) : (_jsx(Fragment, { children: React.cloneElement(item, { groupOrder, small }) }, index));
+    });
+    return (_jsx("div", { className: cx(styles.inputGroup), style: { width: width }, children: elements }));
+};

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

@@ -0,0 +1,8 @@
+import { StoryFn } from '@storybook/react';
+import { IInputGroupProps } from './input-group';
+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, IInputGroupProps>;
+export declare const FixedWidth: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IInputGroupProps>;
+export declare const Small: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IInputGroupProps>;
+export declare const SelectWithButton: StoryFn<IInputGroupProps>;

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

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { InputGroup } from './input-group';
+import { InputGroupAddon } from './input-group-addon/input-group-addon';
+import { Input } from '../input/input';
+import { Button } from '../button/button';
+import { Menu } from '../menu/menu';
+import { Select } from '../select/select';
+import { Tooltip } from '../tooltip/tooltip';
+import { TriggerType } from "../../common-enum";
+import { MenuType } from "../menu/enum";
+export default {
+    title: 'Forms/InputGroup',
+    component: InputGroup,
+    args: {},
+};
+const Template = (args) => {
+    return (_jsxs(InputGroup
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    , { ...args, children: [_jsx(InputGroupAddon, { children: "$" }), _jsx(Input, { width: "100%", name: "example", value: "123", onChange: () => { } }), _jsx(Select, { options: [
+                    { label: 'Aardvarks', value: 'termites' },
+                    { label: 'Kangaroos', value: 'grass' },
+                    { label: 'Monkeys', value: 'bananas' },
+                    { label: 'Possums', value: 'slugs' },
+                ], onChange: () => { }, value: { label: 'Monkeys', value: 'bananas' }, width: "auto", native: true }), _jsx(Menu, { menu: {
+                    label: 'E-06/degC',
+                    trigger: TriggerType.DROP_DOWN_BUTTON,
+                    small: args.small,
+                    sections: [
+                        {
+                            type: MenuType.OPTION,
+                            label: '403.5433',
+                            description: 'ft',
+                            inline: true,
+                            onClick: () => { },
+                        },
+                        {
+                            type: MenuType.OPTION,
+                            label: '0.123',
+                            description: 'km',
+                            inline: true,
+                            onClick: () => { },
+                        },
+                        {
+                            type: MenuType.OPTION,
+                            label: '4842.4608',
+                            description: 'in',
+                            inline: true,
+                            onClick: () => { },
+                        },
+                    ],
+                } }), _jsx(Button, { name: "example", label: "Confirm", colored: true, onClick: () => { } })] }));
+};
+export const Default = Template.bind({});
+export const FixedWidth = Template.bind({});
+FixedWidth.args = { width: '480px' };
+export const Small = Template.bind({});
+Small.args = { small: true };
+export const SelectWithButton = (args) => {
+    return (_jsxs(InputGroup, { children: [_jsx(Select, { options: [
+                    { label: 'Aardvarks', value: 'termites' },
+                    { label: 'Kangaroos', value: 'grass' },
+                    { label: 'Monkeys', value: 'bananas' },
+                    { label: 'Possums', value: 'slugs' },
+                ], onChange: () => { }, value: { label: 'Monkeys', value: 'bananas' } }), _jsx(Tooltip, { text: "This is a tooltip", children: _jsx(Button, { name: "example", label: "Confirm", colored: true, onClick: () => { }, groupOrder: "last" }) })] }));
+};

package/dist/components/label/label.d.ts

@@ -0,0 +1,24 @@
+import { MouseEvent, ReactNode } from 'react';
+export interface ILabelLockProps {
+    visible?: boolean;
+    active?: boolean;
+    onClick?: () => void;
+    tooltip?: string;
+    testId?: string;
+}
+export interface ILabelIcon {
+    onClick: () => void;
+    tooltip?: string;
+}
+export interface ILabelProps {
+    label?: string | number | ReactNode;
+    helpText?: string | number | ReactNode;
+    helpTextMaxWidth?: string | number;
+    width?: string | number;
+    info?: string;
+    onClickHelp?: (event?: MouseEvent<HTMLDivElement>) => void;
+    lock?: ILabelLockProps;
+    libraryIcon?: ILabelIcon;
+    labelLeft?: boolean;
+}
+export declare const Label: ({ label, width, helpText, helpTextMaxWidth, onClickHelp, lock, info, libraryIcon, labelLeft, }: ILabelProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/label/label.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cx from 'classnames';
+import styles from './label.module.less';
+import { HelpIcon } from '../help-icon/help-icon';
+import { IconType } from "../../common-enum";
+export const Label = ({ label = null, width = 'auto', helpText = '', helpTextMaxWidth = '300px', onClickHelp = undefined, lock = {
+    visible: false,
+    active: false,
+    onClick: () => { },
+    tooltip: '',
+    testId: undefined,
+}, info, libraryIcon, labelLeft = false, }) => {
+    return (_jsx("div", { className: cx(styles.label, labelLeft ? styles.labelLeft : ''), children: _jsxs("label", { style: { width: width || '' }, children: [label, _jsxs("div", { className: styles.icons, children: [(helpText || onClickHelp) && (_jsx(HelpIcon, { text: helpText, onClick: onClickHelp, maxWidth: helpTextMaxWidth })), info && _jsx(HelpIcon, { text: info, icon: IconType.INFO }), lock && lock.visible && lock.onClick && (_jsx(HelpIcon, { onClick: lock.onClick, icon: lock.active ? IconType.LOCK : IconType.UNLOCK, active: lock.active, testId: lock.testId })), libraryIcon && (_jsx(HelpIcon, { text: libraryIcon?.tooltip ?? '', onClick: libraryIcon.onClick, icon: IconType.LIBRARY }))] })] }) }));
+};

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

@@ -0,0 +1,10 @@
+import { StoryFn } from '@storybook/react';
+import { ILabelProps } from './label';
+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, ILabelProps>;
+export declare const HelpIconTooltip: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ILabelProps>;
+export declare const HelpIconClickable: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ILabelProps>;
+export declare const InfoIcon: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ILabelProps>;
+export declare const LockIcon: StoryFn<ILabelProps>;
+export declare const LibraryIcon: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ILabelProps>;

package/dist/components/label/label.stories.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Label } from './label';
+export default {
+    title: 'Forms/Label',
+    component: Label,
+    args: {
+        label: 'Label',
+    },
+};
+const Template = (args) => (_jsx(Label, { ...args }));
+export const Default = Template.bind({});
+export const HelpIconTooltip = Template.bind({});
+HelpIconTooltip.args = {
+    helpText: 'Tooltip goes here',
+};
+export const HelpIconClickable = Template.bind({});
+HelpIconClickable.args = {
+    onClickHelp: () => { },
+};
+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(Label, { label: "Label", lock: {
+            visible: true,
+            active: locked,
+            onClick: handleToggleLock,
+            tooltip: locked ? 'Unlock' : 'Lock',
+            testId: 'testId',
+        } }));
+};
+export const LibraryIcon = Template.bind({});
+LibraryIcon.args = {
+    libraryIcon: {
+        onClick: () => { },
+        tooltip: 'View in library',
+    },
+};

package/dist/components/layout/column/column.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+export interface ILayoutColumnProps {
+    background?: string;
+    borderLeft?: boolean | string;
+    borderRight?: boolean | string;
+    children?: React.ReactNode;
+    flex?: boolean;
+    flexbox?: boolean;
+    padding?: boolean | string;
+    scroll?: boolean;
+    showScrollbar?: boolean;
+    spacing?: number | string;
+    width?: number | string;
+    widthMobile?: number | string;
+    widthTablet?: number | string;
+    testId?: string;
+}
+export declare const Column: ({ background, borderLeft, borderRight, children, flex, flexbox, padding, scroll, showScrollbar, spacing, width, widthMobile, widthTablet, testId, }: ILayoutColumnProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/layout/column/column.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { StyledColumn as ImportedStyledColumn } from './styles';
+export const Column = ({ background = 'transparent', borderLeft, borderRight, children = null, flex = true, flexbox = false, padding = false, scroll = false, showScrollbar = true, spacing = 20, width, widthMobile, widthTablet, testId, }) => {
+    const getWidthString = (w) => {
+        return typeof w === 'string'
+            ? w
+            : typeof w === 'number'
+                ? `${w}px`
+                : undefined;
+    };
+    const StyledColumn = ImportedStyledColumn;
+    return (_jsx(StyledColumn, { background: background, borderLeft: borderLeft, borderRight: borderRight, flex: flex, flexbox: flexbox, padding: padding, scroll: scroll, showScrollbar: showScrollbar, spacing: spacing, width: getWidthString(width), widthTablet: getWidthString(widthTablet), widthMobile: getWidthString(widthMobile), children: _jsx("div", { className: "inner", "data-testid": testId, children: children }) }));
+};

package/dist/components/layout/column/styles.d.ts

@@ -0,0 +1,15 @@
+export interface ILayoutStyledColumnProps {
+    width?: string;
+    flex?: boolean;
+    scroll?: boolean;
+    background?: string;
+    borderLeft?: boolean | string;
+    borderRight?: boolean | string;
+    spacing?: number;
+    showScrollbar?: boolean;
+    widthTablet?: string;
+    widthMobile?: string;
+    flexbox?: boolean;
+    padding?: boolean | string;
+}
+export declare const StyledColumn: import("styled-components").StyledComponent<"div", any, ILayoutStyledColumnProps, never>;

package/dist/components/layout/column/styles.js

@@ -0,0 +1,41 @@
+import styled, { css } from 'styled-components';
+const noScrollbars = css `
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+`;
+export const StyledColumn = styled.div `
+  position: relative; // for react-laag
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  flex-basis: ${(p) => p.width || 'auto'};
+  flex-grow: ${(p) => (!p.width && p.flex ? '1' : '0')};
+  flex-shrink: ${(p) => (p.width || !p.flex ? '0' : '1')};
+  overflow: ${(p) => (p.scroll ? 'auto' : 'initial')};
+  background: ${(p) => p.background};
+  border-left: ${(p) => p.borderLeft === true ? '1px solid var(--color-border)' : p.borderLeft};
+  border-right: ${(p) => p.borderRight === true ? '1px solid var(--color-border)' : p.borderRight};
+  padding: ${(p) => (p.spacing ? `0 ${p.spacing / 2}px` : '0')};
+  ${(p) => !p.showScrollbar && noScrollbars}
+
+  @media (max-width: 992px) {
+    ${(p) => p.widthTablet && `flex-basis: ${p.widthTablet};`}
+  }
+
+  @media (max-width: 575px) {
+    ${(p) => p.widthMobile && `flex-basis: ${p.widthMobile};`}
+  }
+
+  > .inner {
+    flex-basis: 100%;
+    position: relative;
+    z-index: 0;
+    min-height: 0;
+    display: ${(p) => (p.flexbox && !p.scroll ? 'flex' : 'block')};
+    ${(p) => p.flexbox && `flex-direction: column;`}
+    padding: ${(p) => (p.padding === true ? '16px 20px' : p.padding)};
+  }
+`;

package/dist/components/layout/column.stories.d.ts

@@ -0,0 +1,20 @@
+interface TemplateArgs {
+    height?: string;
+    wrap?: boolean;
+    width?: string;
+    padding?: boolean | string;
+    borderRight?: boolean;
+    scroll?: boolean;
+    showScrollbar?: boolean;
+    widthTablet?: string;
+    widthMobile?: string;
+    borderLeft?: boolean;
+}
+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, TemplateArgs>;
+export declare const NoPadding: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, TemplateArgs>;
+export declare const FixedWidth: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, TemplateArgs>;
+export declare const Scroll: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, TemplateArgs>;
+export declare const HideScrollbar: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, TemplateArgs>;
+export declare const ResponsiveWidth: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, TemplateArgs>;

package/dist/components/layout/column.stories.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Column } from './column/column';
+import { Row } from './row/row';
+import { Heading } from '../heading/heading';
+export default {
+    title: 'Layout/Columns & Rows',
+    component: Column,
+    parameters: {
+        layout: 'fullscreen',
+    },
+    args: {
+        width: '50%',
+        padding: true,
+        borderRight: true,
+    },
+    argTypes: {
+        width: { control: { type: 'text' } },
+        padding: { control: { type: 'text' } },
+        borderLeft: { control: { type: 'boolean' } },
+        borderRight: { control: { type: 'boolean' } },
+    },
+};
+const Template = (args) => {
+    const { height, wrap, ...columnArgs } = args;
+    return (_jsxs(Row, { spacing: 0, height: height, wrap: wrap, children: [_jsxs(Column, { ...columnArgs, children: [_jsx(Heading, { top: true, children: "Column" }), 'Example content goes here lorem ipsum. '.repeat(20)] }), _jsx(Column, { padding: "20px", background: "var(--color-background)" })] }));
+};
+export const Default = Template.bind({});
+export const NoPadding = Template.bind({});
+NoPadding.args = {
+    padding: false,
+};
+export const FixedWidth = Template.bind({});
+FixedWidth.args = {
+    width: '400px',
+};
+export const Scroll = Template.bind({});
+Scroll.args = {
+    scroll: true,
+    height: '200px',
+};
+export const HideScrollbar = Template.bind({});
+HideScrollbar.args = {
+    scroll: true,
+    showScrollbar: false,
+    height: '200px',
+};
+export const ResponsiveWidth = Template.bind({});
+ResponsiveWidth.args = {
+    wrap: true,
+    widthTablet: '50%',
+    widthMobile: '100%',
+    borderRight: false,
+};

package/dist/components/layout/flex/flex.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export interface ILayoutFlexProps {
+    alignItems?: string;
+    justifyContent?: string;
+    direction?: string;
+    height?: string | number;
+    children?: React.ReactNode;
+    wrap?: boolean;
+    gap?: boolean | string | number;
+}
+export declare const Flex: ({ alignItems, justifyContent, direction, height, children, wrap, gap, }: ILayoutFlexProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/layout/flex/flex.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Flex = ({ alignItems = 'initial', justifyContent = 'initial', direction = 'initial', height = 'initial', children = null, wrap = true, gap = false, }) => {
+    return (_jsx("div", { style: {
+            display: 'flex',
+            flexDirection: direction,
+            alignItems,
+            justifyContent,
+            height: typeof height === 'number' ? `${height}px` : height,
+            flexWrap: wrap ? 'wrap' : 'nowrap',
+            gap: gap === false
+                ? 0
+                : gap === true
+                    ? '20px'
+                    : typeof gap === 'number'
+                        ? `${gap}px`
+                        : gap,
+        }, children: children }));
+};

package/dist/components/layout/flex/flex.stories.d.ts

@@ -0,0 +1,10 @@
+import { ILayoutFlexProps } from './flex';
+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, ILayoutFlexProps>;
+export declare const DefaultGap: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ILayoutFlexProps>;
+export declare const CustomGap: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ILayoutFlexProps>;
+export declare const Center: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ILayoutFlexProps>;
+export declare const SpaceBetween: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ILayoutFlexProps>;
+export declare const JustifyEnd: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ILayoutFlexProps>;
+export declare const Column: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ILayoutFlexProps>;

package/dist/components/layout/flex/flex.stories.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Flex } from './flex';
+import { Button } from '../../button/button';
+import { Text } from '../../text/text';
+export default {
+    title: 'Layout/Flex',
+    component: Flex,
+    argTypes: {
+        alignItems: {
+            control: {
+                type: 'inline-radio',
+            },
+            options: ['flex-start', 'center', 'flex-end'],
+        },
+        justifyContent: {
+            control: {
+                type: 'inline-radio',
+            },
+            options: ['flex-start', 'center', 'flex-end', 'space-between'],
+        },
+        gap: { control: { type: 'boolean' } },
+    },
+    args: {
+        alignItems: undefined,
+        justifyContent: undefined,
+        children: (_jsxs(_Fragment, { children: [_jsx(Button, { label: "Button" }), _jsx(Text, { children: "Text" })] })),
+    },
+};
+const Template = (args) => (_jsx(Flex
+// eslint-disable-next-line react/jsx-props-no-spreading
+, { ...args }));
+export const Default = Template.bind({});
+export const DefaultGap = Template.bind({});
+DefaultGap.args = { gap: true };
+export const CustomGap = Template.bind({});
+CustomGap.args = { gap: '50px' };
+export const Center = Template.bind({});
+Center.args = {
+    height: '200px',
+    alignItems: 'center',
+    justifyContent: 'center',
+};
+export const SpaceBetween = Template.bind({});
+SpaceBetween.args = {
+    justifyContent: 'space-between',
+};
+export const JustifyEnd = Template.bind({});
+JustifyEnd.args = {
+    justifyContent: 'flex-end',
+};
+export const Column = Template.bind({});
+Column.args = { direction: 'column' };

package/dist/components/layout/form-row/form-row.d.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from 'react';
+export interface ILayoutFormRowProps {
+    children?: ReactNode;
+}
+export declare const FormRow: ({ children }: ILayoutFormRowProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/layout/form-row/form-row.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styles from './form-row.module.less';
+export const FormRow = ({ children }) => {
+    return _jsx("div", { className: styles.formRow, children: children });
+};

package/dist/components/layout/grid/grid.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from "react";
+export interface ILayoutGridProps {
+    rows?: string;
+    columns?: string;
+    columnsTablet?: string | null;
+    columnsMobile?: string | null;
+    gap?: boolean | string | number;
+    height?: string | number;
+    children?: ReactNode;
+}
+export declare const Grid: ({ rows, columns, columnsTablet, columnsMobile, gap, height, children, }: ILayoutGridProps) => import("react/jsx-runtime").JSX.Element;