torgbox-ui 1.0.6 → 1.0.8

package/dist/src/Pages/StartPage/startPage.scss

@@ -0,0 +1,58 @@
+$page-background:  $surface-bright;
+$bold-text:        $neutral-high;
+$text:             $neutral-middle;
+
+.start-page {
+  background-color: $page-background;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  box-sizing: border-box;
+  max-width: 400px;
+  margin: 0 auto;
+  padding: 24px 40px;
+
+  &__overlay {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    background-color: $page-background;
+    opacity: 0.6;
+    z-index: 1;
+  }
+
+  &__title {
+    text-align: center;
+    margin-bottom: 32px;
+    font-size: 28px;
+    line-height: 36px;
+    color: $bold-text;
+  }
+
+  &__text-wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    padding-bottom: 12px;
+  }
+
+  &__text {
+    text-align: center;
+    color: $text;
+  }
+
+  &__email {
+    color: $bold-text;
+    font-weight: 700;
+  }
+}
+
+@media screen and (max-width: $sm) {
+  .start-page {
+    max-width: 320px;
+    padding: 24px 16px;
+  }
+}

package/dist/src/Pages/index.js

@@ -0,0 +1,6 @@
+export { RegisterPage } from './RegisterPage';
+export { EmailConfirmationPage } from './EmailConfirmationPage';
+export { CreatePasswordPage } from './CreatePasswordPage';
+export { LoginPage } from './LoginPage';
+export { StartPage } from './StartPage';
+export { ContentPage } from './ContentPage';

package/dist/src/Pages/index.scss

@@ -0,0 +1,9 @@
+@import './RegisterPage/registerPage';
+@import './CreatePasswordPage/createPasswordPage';
+@import './EmailConfirmationPage/emailConfirmationPage';
+@import './LoginPage/loginPage';
+@import './StartPage/startPage';
+@import './CreateTeamPage/createTeamPage';
+@import './JoinTeamPage/joinTeamPage';
+@import './ResetPasswordPage/resetPasswordPage';
+@import './ContentPage/contentPage';

package/dist/src/Utils/Divider/Divider.js

@@ -0,0 +1,2 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Divider = () => _jsx("hr", { className: 'divider' });

package/dist/src/Utils/Divider/divider.scss

@@ -0,0 +1,11 @@
+@use 'sass:color';
+
+$line-color: $global-color-neutral-80;
+
+.divider {
+  width: 100%;
+  height: 1px;
+  margin: 12px 0;
+  background-color: $line-color;
+  border: none;
+}

package/dist/src/Utils/ErrorBanner/ErrorBanner.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import WarningIcon from '../../assets/img/warning.svg';
+export const ErrorBanner = (props) => {
+    const { error } = props;
+    return (_jsxs("div", { className: 'error-banner', children: [_jsx("div", { className: 'error-banner__icon', children: _jsx(WarningIcon, {}) }), _jsx("p", { className: 'error-banner__text', children: error })] }));
+};

package/dist/src/Utils/ErrorBanner/errorBanner.scss

@@ -0,0 +1,24 @@
+$error-content: $error-high;
+$error-background: $error-border-low;
+
+.error-banner {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  background-color: $error-background;
+  border-radius: 4px;
+  padding: 14px;
+  box-sizing: border-box;
+  width: 100%;
+  margin-bottom: 16px;
+
+  &__icon {
+    fill: $error-content;
+    width: 16px;
+    height: 16px;
+  }
+
+  &__text {
+    color: $error-content;
+  }
+}

package/dist/src/Utils/ErrorBanner/index.js

@@ -0,0 +1 @@
+export { ErrorBanner } from './ErrorBanner';

package/dist/src/Utils/Link/Link.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cn from 'classnames';
+export const Link = ({ iconComponent, label, iconClassName, ...props }) => {
+    return (_jsxs("a", { href: '#', className: 'link', ...props, children: [iconComponent && (_jsx("div", { className: cn('link__icon', [iconClassName]), children: iconComponent })), label] }));
+};

package/dist/src/Utils/Link/Link.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { type ILink } from './Link';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj<ILink>;
+export declare const LinkInactive: Story;
+export declare const LinkHovered: Story;
+export declare const LinkFocused: Story;

package/dist/src/Utils/Link/Link.stories.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import StarIcon from '../../assets/img/star.svg';
+import { Link } from './Link';
+const meta = {
+    title: 'Utils/Link',
+    component: Link,
+    tags: ['autodocs'],
+    args: {
+        label: 'Main Link',
+        iconComponent: _jsx(StarIcon, {})
+    },
+    argTypes: {
+        iconComponent: {
+            table: {
+                disable: true
+            }
+        }
+    },
+};
+export default meta;
+export const LinkInactive = {
+    args: {},
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/8cQcICaes5IWFubU66DMdl/Torgbox-CRM?type=design&node-id=14709-77818&mode=design&t=rY7SHwVBrdpFGTJ8-4',
+        },
+    },
+};
+export const LinkHovered = {
+    args: {},
+    parameters: {
+        pseudo: { hover: true },
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/8cQcICaes5IWFubU66DMdl/Torgbox-CRM?type=design&node-id=14709-77820&mode=design&t=rY7SHwVBrdpFGTJ8-4',
+        },
+    },
+};
+export const LinkFocused = {
+    args: {},
+    parameters: {
+        pseudo: { focus: true },
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/8cQcICaes5IWFubU66DMdl/Torgbox-CRM?type=design&node-id=14709-77842&mode=design&t=rY7SHwVBrdpFGTJ8-4',
+        },
+    },
+};

package/dist/src/Utils/Link/index.js

@@ -0,0 +1 @@
+export { Link } from './Link';

package/dist/src/Utils/Link/index.scss

@@ -0,0 +1 @@
+@import './Link/link';

package/dist/src/Utils/Link/link.scss

@@ -0,0 +1,21 @@
+.link {
+  color: $primary-high;
+  font-size: 14px;
+  line-height: 20px;
+  display: flex;
+  gap: 4px;
+
+  &:hover,
+  &:focus {
+    cursor: pointer;
+    text-decoration: underline $primary-middle;
+  }
+
+  &__icon {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    fill: $primary-high;
+    width: 20px;
+  }
+}

package/dist/src/Utils/Modal/Modal.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import cn from 'classnames';
+import { useCallback, useEffect, } from 'react';
+import { Portal } from '../Portal/Portal';
+export const Modal = (props) => {
+    const { opened, onCloseModal, children, className, } = props;
+    const onContentHandler = (e) => {
+        e.stopPropagation();
+    };
+    const onKeydownHandler = useCallback((e) => {
+        if (e.key === 'Escape') {
+            onCloseModal();
+        }
+    }, [onCloseModal]);
+    useEffect(() => {
+        if (opened) {
+            window.addEventListener('keydown', onKeydownHandler);
+        }
+        return () => {
+            window.removeEventListener('keydown', onKeydownHandler);
+        };
+    }, [opened, onKeydownHandler]);
+    return (_jsx(Portal, { children: _jsx("div", { className: cn('modal', className), children: _jsx("div", { className: 'modal__overlay', onClick: onCloseModal, children: _jsx("div", { className: 'modal__content', onClick: onContentHandler, children: children }) }) }) }));
+};

package/dist/src/Utils/Modal/Modal.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { type IModal } from './Modal';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj<IModal>;
+export declare const ModalDefault: Story;

package/dist/src/Utils/Modal/Modal.stories.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Button } from '../../Inputs';
+import { Modal } from './Modal';
+const meta = {
+    component: Modal,
+    title: 'Utils/Modal',
+    parameters: {
+        layout: 'fullscreen',
+    },
+};
+export default meta;
+const ModalWithHooks = () => {
+    const [modalOpened, setModalOpened] = useState(false);
+    const onShowModal = () => {
+        setModalOpened(true);
+    };
+    const onCloseModal = () => {
+        setModalOpened(false);
+    };
+    return (_jsxs(_Fragment, { children: [_jsx("div", { style: { width: '100%',
+                    padding: '64px',
+                    boxSizing: 'border-box',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center'
+                }, children: _jsx(Button, { size: 'large', variant: 'clear-neutral', label: '\u041E\u0442\u043A\u0440\u044B\u0442\u044C \u043C\u043E\u0434\u0430\u043B\u044C\u043D\u043E\u0435 \u043E\u043A\u043D\u043E', onClick: onShowModal }) }), modalOpened &&
+                (_jsx(Modal, { opened: modalOpened, onCloseModal: onCloseModal }))] }));
+};
+export const ModalDefault = {
+    render: () => _jsx(ModalWithHooks, {}),
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/design/8cQcICaes5IWFubU66DMdl/Torgbox-CRM?node-id=12660-13122&t=2RockLZQJi3bINEV-4',
+        },
+    },
+};

package/dist/src/Utils/Modal/index.js

@@ -0,0 +1 @@
+export { Modal } from './Modal';

package/dist/src/Utils/Modal/modal.scss

@@ -0,0 +1,33 @@
+@use 'sass:color';
+
+$modal-background-color: $global-color-neutral-100;
+$modal-overlay-color:    $neutral-A48;
+$modal-border-color:     $global-color-neutral-20;
+
+.modal {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  inset: 0;
+  z-index: 1001;
+
+  &__overlay {
+    width: 100%;
+    height: 100%;
+    background-color: $modal-overlay-color;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  &__content {
+    width: 440px;
+    padding: 32px 32px 24px 32px;
+    display: flex;
+    flex-flow: column nowrap;
+    gap: 16px;
+    background-color: $modal-background-color;
+    border-radius: 8px;
+    border: 1px solid $modal-border-color;
+  }
+}

package/dist/src/Utils/Portal/Portal.js

@@ -0,0 +1,5 @@
+import { createPortal } from 'react-dom';
+export const Portal = (props) => {
+    const { children, element = document.body } = props;
+    return createPortal(children, element);
+};

package/dist/src/Utils/SectionPlaceholder/SectionPlaceholder.js

@@ -0,0 +1,2 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const SectionPlaceholder = ({ label = 'Placeholder' }) => (_jsx("section", { className: 'section-placeholder', children: _jsx("div", { className: 'placeholder', children: label }) }));

package/dist/src/Utils/SectionPlaceholder/sectionPlaceholder.scss

@@ -0,0 +1,22 @@
+@use 'sass:color';
+
+$section-background-color: $global-color-neutral-80;
+$border-dash-color:        $global-color-neutral-40;
+
+.section-placeholder {
+  width: 100%;
+  height: calc(100vh - $header-height);
+  padding: 24px;
+  box-sizing: border-box;
+  background-color: $section-background-color;
+
+  .placeholder {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 8px;
+    border: 1px dashed $border-dash-color;
+  }
+}

package/dist/src/Utils/Spinner/Spinner.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import cn from 'classnames';
+export const Spinner = ({ className }) => {
+    return (_jsx("div", { className: cn('spinner', className), children: _jsx("svg", { viewBox: '25 25 50 50', children: _jsx("circle", { cx: '50', cy: '50', r: '20' }) }) }));
+};

package/dist/src/Utils/Spinner/spinner.scss

@@ -0,0 +1,41 @@
+.spinner {
+  display: flex;
+  align-items: center;
+}
+
+.spinner svg {
+  transform-origin: center;
+  animation: rotate 2s linear infinite;
+}
+
+.spinner circle {
+  fill: none;
+  stroke-dasharray: 1, 200;
+  stroke-dashoffset: 0;
+  stroke-linecap: round;
+  stroke-width: 4;
+
+  animation: dash 1.5s ease-in-out infinite;
+}
+
+@keyframes rotate {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes dash {
+  0% {
+    stroke-dasharray: 1, 200;
+    stroke-dashoffset: 0;
+  }
+
+  50% {
+    stroke-dasharray: 90, 200;
+    stroke-dashoffset: -35px;
+  }
+
+  100% {
+    stroke-dashoffset: -125px;
+  }
+}

package/dist/src/Utils/api.js

@@ -0,0 +1,7 @@
+import { createApi, fetchBaseQuery, } from '@reduxjs/toolkit/query/react';
+import { BASE_URL } from '@/shared/model';
+export const baseApi = createApi({
+    reducerPath: 'baseApi',
+    baseQuery: fetchBaseQuery({ baseUrl: BASE_URL }),
+    endpoints: () => ({}),
+});

package/dist/src/Utils/index.js

@@ -0,0 +1,7 @@
+export { Spinner } from './Spinner/Spinner';
+export { Portal } from './Portal/Portal';
+export { Link } from './Link/Link';
+export { ErrorBanner } from './ErrorBanner';
+export { Modal } from './Modal/Modal';
+export { Divider } from './Divider/Divider';
+export { SectionPlaceholder } from './SectionPlaceholder/SectionPlaceholder';

package/dist/src/Utils/index.scss

@@ -0,0 +1,6 @@
+@import './Spinner/spinner';
+@import './Link/link';
+@import './ErrorBanner/errorBanner';;
+@import './Modal/modal';
+@import './Divider/divider';
+@import './SectionPlaceholder/sectionPlaceholder';

package/dist/src/Widgets/Header/Header.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cn from 'classnames';
+import { useState } from 'react';
+import BeltIcon from '../../assets/img/belt.svg';
+import BurgerMenuIcon from '../../assets/img/burger-menu.svg';
+import CrossIcon from '../../assets/img/cross.svg';
+import SampleLogoIcon from '../../assets/img/sample-logo.svg';
+import { Button, TextField } from '../../Inputs';
+import { Avatar } from '../../shared/ui';
+import { Link } from '../../Utils';
+export const Header = (props) => {
+    const { onShowSidebar, onCloseSidebar, sidebarOpened, sidebarPinned, } = props;
+    const [searchQuery, setSearchQuery] = useState('');
+    return (_jsxs("header", { className: 'header', children: [_jsxs("div", { className: 'header__logo-search-wrapper', children: [_jsxs("div", { className: cn('header__logo-search-wrapper__logo-box', {
+                            'header__logo-search-wrapper__logo-box--noButton': sidebarPinned,
+                        }), children: [!sidebarPinned &&
+                                (_jsx(Button, { size: 'large', variant: 'clear-neutral', iconComponent: sidebarOpened ? _jsx(CrossIcon, {}) : _jsx(BurgerMenuIcon, {}), onClick: sidebarOpened ? onCloseSidebar : onShowSidebar })), _jsx(Link, { label: '', iconComponent: _jsx(SampleLogoIcon, {}), iconClassName: 'link--wide' })] }), _jsx(TextField, { onChange: setSearchQuery, className: 'search-field', state: 'idle', type: 'text', value: searchQuery, placeholder: '\u0418\u0441\u043A\u0430\u0442\u044C \u0447\u0442\u043E \u0443\u0433\u043E\u0434\u043D\u043E...', searchIcon: true, ...props })] }), _jsxs("div", { className: 'header__user-controls', children: [_jsx(Button, { size: 'large', variant: 'clear-neutral', iconComponent: _jsx(BeltIcon, {}) }), _jsx(Avatar, { label: '\u0418\u0424', size: 'lg' })] })] }));
+};

package/dist/src/Widgets/Header/Header.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { type IHeader } from './Header';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj<IHeader>;
+export declare const HeaderDesktop: Story;

package/dist/src/Widgets/Header/Header.stories.js

@@ -0,0 +1,17 @@
+import { Header } from './Header';
+const meta = {
+    component: Header,
+    title: 'Widgets/Header',
+    parameters: {
+        layout: 'fullscreen',
+    },
+};
+export default meta;
+export const HeaderDesktop = {
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/design/8cQcICaes5IWFubU66DMdl/Torgbox-CRM?node-id=12730-24260&t=kwluIucSNVVtsEr4-4',
+        },
+    },
+};

package/dist/src/Widgets/Header/header.scss

@@ -0,0 +1,50 @@
+@use 'sass:color';
+
+$border-color-neutral: $neutral-middle;
+
+.header {
+  width: 100%;
+  height: $header-height;
+  padding-right: 23px;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid $border-color-neutral;
+
+  &__logo-search-wrapper {
+    height: 100%;
+    display: flex;
+    align-items: center;
+
+    &__logo-box {
+      height: 100%;
+      width: 260px;
+      padding: 0 16px;
+      box-sizing: border-box;
+      display: flex;
+      align-items: center;
+      gap: 17px;
+
+      &--noButton {
+        padding: 0;
+        justify-content: center;
+      }
+
+      .link--wide {
+        width: auto;
+      }
+    }
+
+    .search-field {
+      border: none;
+      gap: 10px;
+    }
+  }
+
+  &__user-controls {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+  }
+}

package/dist/src/Widgets/Header/index.js

@@ -0,0 +1 @@
+export { Header } from './Header';

package/dist/src/Widgets/Sidebar/Sidebar.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cn from 'classnames';
+import { useEffect, useRef } from 'react';
+import LeftArrowIcon from '../../assets/img/left-arrow.svg';
+import RightArrowIcon from '../../assets/img/right-arrow.svg';
+import { Button } from '../../Inputs';
+import { Divider } from '../../Utils';
+export const Sidebar = (props) => {
+    const { children, className, pinned, onPinSidebar, onUnpinSidebar, } = props;
+    const sidebarRef = useRef(null);
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (sidebarRef.current &&
+                !sidebarRef.current.contains(event.target) &&
+                !pinned) {
+                onUnpinSidebar();
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [onUnpinSidebar, pinned]);
+    return (_jsxs("aside", { className: cn('sidebar', className), ref: sidebarRef, children: [_jsx("div", { className: 'sidebar__content', children: children }), _jsx(Divider, {}), _jsx("div", { className: 'sidebar__control', children: _jsx(Button, { className: 'sidebar-button', size: 'large', variant: 'clear-neutral', label: pinned ? 'Скрыть меню' : 'Закрепить меню', iconComponent: pinned ? _jsx(LeftArrowIcon, {}) : _jsx(RightArrowIcon, {}), onClick: pinned ? onUnpinSidebar : onPinSidebar, fullWidth: true }) })] }));
+};

package/dist/src/Widgets/Sidebar/Sidebar.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { type ISidebar } from './Sidebar';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj<ISidebar>;
+export declare const SidebarDesktop: Story;

package/dist/src/Widgets/Sidebar/Sidebar.stories.js

@@ -0,0 +1,17 @@
+import { Sidebar } from './Sidebar';
+const meta = {
+    component: Sidebar,
+    title: 'Widgets/Sidebar',
+    parameters: {
+        layout: 'fullscreen',
+    },
+};
+export default meta;
+export const SidebarDesktop = {
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/design/8cQcICaes5IWFubU66DMdl/Torgbox-CRM?node-id=12742-17730&t=cU5Jc8aB7DMhCJMx-4',
+        },
+    },
+};

package/dist/src/Widgets/Sidebar/index.js

@@ -0,0 +1 @@
+export { Sidebar } from './Sidebar';

package/dist/src/Widgets/Sidebar/sidebar.scss

@@ -0,0 +1,23 @@
+.sidebar {
+  width: 260px;
+  height: calc(100vh - $header-height);
+  padding: 16px;
+  box-sizing: border-box;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+
+  &__content {
+    width: 100%;
+    height: 100%;
+  }
+
+  &__control {
+    flex-shrink: 0;
+  }
+
+  &-button {
+    justify-content: start;
+  }
+}

package/dist/src/Widgets/index.js

@@ -0,0 +1,2 @@
+export { Header } from './Header/Header';
+export { Sidebar } from './Sidebar/Sidebar';

package/dist/src/Widgets/index.scss

@@ -0,0 +1,2 @@
+@import './Header/header';
+@import './Sidebar/sidebar';

package/dist/src/app/main.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import ReactDOM from 'react-dom/client';
+import { Provider } from 'react-redux';
+import '../index.scss';
+import { AppRouter } from './routes';
+import { store } from './store';
+ReactDOM.createRoot(document.getElementById('root')).render(_jsx(Provider, { store: store, children: _jsx(AppRouter, {}) }));