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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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