torgbox-ui 1.0.6 → 1.0.8

package/dist/.storybook/decorators/ReduxDecorator.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const ReduxDecorator: (Story: () => React.ReactNode) => import("react/jsx-runtime").JSX.Element;

package/dist/.storybook/decorators/ReduxDecorator.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Provider } from 'react-redux';
+import { store } from '../../src/app/store';
+export const ReduxDecorator = (Story) => (_jsx(Provider, { store: store, children: Story() }));

package/dist/.storybook/decorators/RouterDecorator.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const RouterDecorator: (Story: () => React.ReactNode) => import("react/jsx-runtime").JSX.Element;

package/dist/.storybook/decorators/RouterDecorator.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { BrowserRouter } from 'react-router-dom';
+export const RouterDecorator = (Story) => (_jsx(BrowserRouter, { children: Story() }));

package/dist/.storybook/decorators/index.d.ts

@@ -0,0 +1,2 @@
+export { ReduxDecorator } from './ReduxDecorator';
+export { RouterDecorator } from './RouterDecorator';

package/dist/.storybook/decorators/index.js

@@ -0,0 +1,2 @@
+export { ReduxDecorator } from './ReduxDecorator';
+export { RouterDecorator } from './RouterDecorator';

package/dist/src/Inputs/Button/Button.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import cn from 'classnames';
+import { Spinner } from '../../Utils';
+export const Button = (props) => {
+    const { label = '', size = 'medium', variant = 'filled', state = 'idle', iconPosition = 'left', fullWidth = false, iconComponent, onClick, className, tabIndex, } = props;
+    const hasIcon = iconComponent !== null && iconComponent !== undefined;
+    const buttonMods = [
+        'btn',
+        `btn--${size}`,
+        `btn__${variant}`,
+        `btn__${variant}--${state}`,
+        {
+            'btn--reverse': iconPosition === 'right',
+            'btn--fullWidth': fullWidth,
+            'btn--with-icon': label && hasIcon,
+            'btn--only-icon': !label && hasIcon
+        }
+    ];
+    const iconMods = [
+        'btn__icon',
+        `btn__icon--${size}`,
+        { [`btn__icon--${size}--${iconPosition}`]: !!label },
+    ];
+    const labelMods = `btn__label--${size}`;
+    const spinnerMods = [
+        `btn__spinner--${size}`,
+        `btn__spinner--${variant}`
+    ];
+    return (_jsx("button", { type: 'button', onClick: onClick, disabled: state === 'disabled', className: cn(buttonMods, className), tabIndex: tabIndex, children: state === 'loading' ? (_jsx(Spinner, { className: cn(spinnerMods) })) : (_jsxs(_Fragment, { children: [hasIcon && (_jsx("div", { className: cn(iconMods), children: iconComponent })), label && _jsx("div", { className: cn(labelMods), children: label })] })) }));
+};

package/dist/src/Inputs/Button/Button.stories.d.ts

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { type IButton } from './Button';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj<IButton>;
+export declare const ButtonFilled: Story;
+export declare const ButtonFilledLoading: Story;
+export declare const ButtonFilledDisable: Story;
+export declare const ButtonOutlinedColor: Story;
+export declare const ButtonOutlinedColorLoading: Story;
+export declare const ButtonOutlinedColorDisable: Story;
+export declare const ButtonOutlinedNeutral: Story;
+export declare const ButtonOutlinedNeutralLoading: Story;
+export declare const ButtonOutlinedNeutralDisable: Story;
+export declare const ButtonClearColor: Story;
+export declare const ButtonClearColorLoading: Story;
+export declare const ButtonClearColorDisable: Story;
+export declare const ButtonClearNeutral: Story;
+export declare const ButtonClearNeutralLoading: Story;
+export declare const ButtonClearNeutralDisable: Story;
+export declare const Pushed: Story;

package/dist/src/Inputs/Button/Button.stories.js

@@ -0,0 +1,210 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { userEvent, within } from '@storybook/test';
+import StarIcon from '../../assets/img/star.svg';
+import { Button } from './Button';
+const meta = {
+    title: 'Inputs/Button/Button',
+    component: Button,
+    tags: ['autodocs'],
+    args: {
+        label: 'Button',
+        size: 'large',
+        iconComponent: _jsx(StarIcon, {})
+    },
+    argTypes: {
+        iconComponent: {
+            table: {
+                disable: true
+            }
+        }
+    }
+};
+export default meta;
+export const ButtonFilled = {
+    args: {
+        variant: 'filled',
+    },
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/8cQcICaes5IWFubU66DMdl/Torgbox-CRM?type=design&node-id=12651-18368&mode=dev',
+        },
+    },
+};
+export const ButtonFilledLoading = {
+    args: {
+        variant: 'filled',
+        state: 'loading'
+    },
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/8cQcICaes5IWFubU66DMdl/Torgbox-CRM?type=design&node-id=12651-18376&mode=dev',
+        },
+    },
+};
+export const ButtonFilledDisable = {
+    args: {
+        variant: 'filled',
+        state: 'disabled'
+    },
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/8cQcICaes5IWFubU66DMdl/Torgbox-CRM?type=design&node-id=12651-18374&mode=dev',
+        },
+    },
+};
+export const ButtonOutlinedColor = {
+    args: {
+        variant: 'outlined-color',
+    },
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/8cQcICaes5IWFubU66DMdl/Torgbox-CRM?type=design&node-id=12651-18512&mode=dev',
+        },
+    },
+};
+export const ButtonOutlinedColorLoading = {
+    args: {
+        variant: 'outlined-color',
+        state: 'loading'
+    },
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/8cQcICaes5IWFubU66DMdl/Torgbox-CRM?type=design&node-id=12651-18520&mode=dev',
+        },
+    },
+};
+export const ButtonOutlinedColorDisable = {
+    args: {
+        variant: 'outlined-color',
+        state: 'disabled'
+    },
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/8cQcICaes5IWFubU66DMdl/Torgbox-CRM?type=design&node-id=12651-18518&mode=dev',
+        },
+    },
+};
+export const ButtonOutlinedNeutral = {
+    args: {
+        variant: 'outlined-neutral',
+    },
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/8cQcICaes5IWFubU66DMdl/Torgbox-CRM?type=design&node-id=12655-16728&mode=dev',
+        },
+    },
+};
+export const ButtonOutlinedNeutralLoading = {
+    args: {
+        variant: 'outlined-neutral',
+        state: 'loading'
+    },
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/8cQcICaes5IWFubU66DMdl/Torgbox-CRM?type=design&node-id=12655-16736&mode=dev',
+        },
+    },
+};
+export const ButtonOutlinedNeutralDisable = {
+    args: {
+        variant: 'outlined-neutral',
+        state: 'disabled'
+    },
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/8cQcICaes5IWFubU66DMdl/Torgbox-CRM?type=design&node-id=12655-16734&mode=dev',
+        },
+    },
+};
+export const ButtonClearColor = {
+    args: {
+        variant: 'clear-color',
+    },
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/8cQcICaes5IWFubU66DMdl/Torgbox-CRM?type=design&node-id=12651-18656&mode=dev',
+        },
+    },
+};
+export const ButtonClearColorLoading = {
+    args: {
+        variant: 'clear-color',
+        state: 'loading'
+    },
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/8cQcICaes5IWFubU66DMdl/Torgbox-CRM?type=design&node-id=12651-18664&mode=dev',
+        },
+    },
+};
+export const ButtonClearColorDisable = {
+    args: {
+        variant: 'clear-color',
+        state: 'disabled'
+    },
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/8cQcICaes5IWFubU66DMdl/Torgbox-CRM?type=design&node-id=12651-18662&mode=dev',
+        },
+    },
+};
+export const ButtonClearNeutral = {
+    args: {
+        variant: 'clear-neutral',
+    },
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/8cQcICaes5IWFubU66DMdl/Torgbox-CRM?type=design&node-id=13294-20874&mode=dev',
+        },
+    },
+};
+export const ButtonClearNeutralLoading = {
+    args: {
+        variant: 'clear-neutral',
+        state: 'loading'
+    },
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/8cQcICaes5IWFubU66DMdl/Torgbox-CRM?type=design&node-id=13294-20884&mode=dev',
+        },
+    },
+};
+export const ButtonClearNeutralDisable = {
+    args: {
+        variant: 'clear-neutral',
+        state: 'disabled'
+    },
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/8cQcICaes5IWFubU66DMdl/Torgbox-CRM?type=design&node-id=13294-20882&mode=dev',
+        },
+    },
+};
+export const Pushed = {
+    args: {
+        label: 'Button',
+        size: 'large'
+    },
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
+        await step('Button pushed', async () => {
+            const button = canvas.getByRole('button');
+            await userEvent.click(button);
+        });
+    },
+};

package/dist/src/Inputs/Button/Icon.stories.d.ts

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { type IButton } from './Button';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj<IButton>;
+export declare const IconFilled: Story;
+export declare const IconFilledLoading: Story;
+export declare const IconFilledDisable: Story;
+export declare const IconOutlinedColor: Story;
+export declare const IconOutlinedColorLoading: Story;
+export declare const IconOutlinedColorDisable: Story;
+export declare const IconOutlinedNeutral: Story;
+export declare const IconOutlinedNeutralLoading: Story;
+export declare const IconOutlinedNeutralDisable: Story;
+export declare const IconClearColor: Story;
+export declare const IconClearColorLoading: Story;
+export declare const IconClearColorDisable: Story;
+export declare const IconClearNeutral: Story;
+export declare const IconClearNeutralLoading: Story;
+export declare const IconClearNeutralDisable: Story;

package/dist/src/Inputs/Button/Icon.stories.js

@@ -0,0 +1,196 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import StarIcon from '../../assets/img/star.svg';
+import { Button } from './Button';
+const meta = {
+    title: 'Inputs/Button/Icon Button',
+    component: Button,
+    tags: ['autodocs'],
+    args: {
+        size: 'large',
+        label: '',
+        iconComponent: _jsx(StarIcon, {})
+    },
+    argTypes: {
+        iconComponent: {
+            table: {
+                disable: true
+            }
+        }
+    }
+};
+export default meta;
+export const IconFilled = {
+    args: {
+        variant: 'filled',
+    },
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/8cQcICaes5IWFubU66DMdl/Torgbox-CRM?type=design&node-id=12655-13214&mode=dev',
+        },
+    },
+};
+export const IconFilledLoading = {
+    args: {
+        variant: 'filled',
+        state: 'loading',
+    },
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/8cQcICaes5IWFubU66DMdl/Torgbox-CRM?type=design&node-id=12655-13222&mode=dev',
+        },
+    },
+};
+export const IconFilledDisable = {
+    args: {
+        variant: 'filled',
+        state: 'disabled',
+    },
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/8cQcICaes5IWFubU66DMdl/Torgbox-CRM?type=design&node-id=12655-13220&mode=dev',
+        },
+    },
+};
+export const IconOutlinedColor = {
+    args: {
+        variant: 'outlined-color',
+    },
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/8cQcICaes5IWFubU66DMdl/Torgbox-CRM?type=design&node-id=12655-13358&mode=dev',
+        },
+    },
+};
+export const IconOutlinedColorLoading = {
+    args: {
+        variant: 'outlined-color',
+        state: 'loading',
+    },
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/8cQcICaes5IWFubU66DMdl/Torgbox-CRM?type=design&node-id=12655-13366&mode=dev',
+        },
+    },
+};
+export const IconOutlinedColorDisable = {
+    args: {
+        variant: 'outlined-color',
+        state: 'disabled',
+    },
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/8cQcICaes5IWFubU66DMdl/Torgbox-CRM?type=design&node-id=12655-13364&mode=dev',
+        },
+    },
+};
+export const IconOutlinedNeutral = {
+    args: {
+        variant: 'outlined-neutral',
+    },
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/8cQcICaes5IWFubU66DMdl/Torgbox-CRM?type=design&node-id=12655-17223&mode=dev',
+        },
+    },
+};
+export const IconOutlinedNeutralLoading = {
+    args: {
+        variant: 'outlined-neutral',
+        state: 'loading',
+    },
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/8cQcICaes5IWFubU66DMdl/Torgbox-CRM?type=design&node-id=12655-17231&mode=dev',
+        },
+    },
+};
+export const IconOutlinedNeutralDisable = {
+    args: {
+        variant: 'outlined-neutral',
+        state: 'disabled',
+    },
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/8cQcICaes5IWFubU66DMdl/Torgbox-CRM?type=design&node-id=12655-17229&mode=dev',
+        },
+    },
+};
+export const IconClearColor = {
+    args: {
+        variant: 'clear-color',
+    },
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/8cQcICaes5IWFubU66DMdl/Torgbox-CRM?type=design&node-id=12655-13502&mode=dev',
+        },
+    },
+};
+export const IconClearColorLoading = {
+    args: {
+        variant: 'clear-color',
+        state: 'loading',
+    },
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/8cQcICaes5IWFubU66DMdl/Torgbox-CRM?type=design&node-id=12655-13510&mode=dev',
+        },
+    },
+};
+export const IconClearColorDisable = {
+    args: {
+        variant: 'clear-color',
+        state: 'disabled',
+    },
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/8cQcICaes5IWFubU66DMdl/Torgbox-CRM?type=design&node-id=12655-13508&mode=dev',
+        },
+    },
+};
+export const IconClearNeutral = {
+    args: {
+        variant: 'clear-neutral',
+    },
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/8cQcICaes5IWFubU66DMdl/Torgbox-CRM?type=design&node-id=12655-17397&mode=dev',
+        },
+    },
+};
+export const IconClearNeutralLoading = {
+    args: {
+        variant: 'clear-neutral',
+        state: 'loading',
+    },
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/8cQcICaes5IWFubU66DMdl/Torgbox-CRM?type=design&node-id=12655-17405&mode=dev',
+        },
+    },
+};
+export const IconClearNeutralDisable = {
+    args: {
+        variant: 'clear-neutral',
+        state: 'disabled',
+    },
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/8cQcICaes5IWFubU66DMdl/Torgbox-CRM?type=design&node-id=12655-17403&mode=dev',
+        },
+    },
+};