torgbox-ui 1.0.8 → 1.0.10

package/dist/esm/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/esm/Utils/Spinner/Spinner.d.ts

@@ -0,0 +1,5 @@
+interface ISpinner {
+    className?: string;
+}
+export declare const Spinner: ({ className }: ISpinner) => JSX.Element;
+export {};

package/dist/esm/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/esm/Utils/api.d.ts

@@ -0,0 +1 @@
+export declare const baseApi: import("@reduxjs/toolkit/query").Api<import("@reduxjs/toolkit/query").BaseQueryFn<string | import("@reduxjs/toolkit/query").FetchArgs, unknown, import("@reduxjs/toolkit/query").FetchBaseQueryError, {}, import("@reduxjs/toolkit/query").FetchBaseQueryMeta>, {}, "baseApi", never, typeof import("@reduxjs/toolkit/query").coreModuleName | typeof import("@reduxjs/toolkit/query/react").reactHooksModuleName>;

package/dist/esm/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/esm/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/esm/Widgets/Header/Header.d.ts

@@ -0,0 +1,7 @@
+export interface IHeader {
+    onShowSidebar: () => void;
+    onCloseSidebar: () => void;
+    sidebarOpened: boolean;
+    sidebarPinned: boolean;
+}
+export declare const Header: (props: IHeader) => JSX.Element;

package/dist/esm/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/esm/Widgets/Header/index.d.ts

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

package/dist/esm/Widgets/Sidebar/Sidebar.d.ts

@@ -0,0 +1,9 @@
+import { type ReactNode } from 'react';
+export interface ISidebar {
+    pinned: boolean;
+    onPinSidebar: () => void;
+    onUnpinSidebar: () => void;
+    children?: ReactNode;
+    className?: string;
+}
+export declare const Sidebar: (props: ISidebar) => JSX.Element;

package/dist/esm/Widgets/Sidebar/index.d.ts

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

package/dist/esm/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/esm/Widgets/index.js

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

package/dist/esm/Widgets/index.scss

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

package/dist/esm/app/main.d.ts

@@ -0,0 +1 @@
+import '../index.scss';

package/dist/esm/app/routes/AppRouter.d.ts

@@ -0,0 +1 @@
+export declare const AppRouter: () => JSX.Element;

package/dist/esm/app/routes/index.js

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

package/dist/esm/app/store/index.d.ts

@@ -0,0 +1 @@
+export { store, useAppDispatch, useAppSelector, type RootState } from './store';

package/dist/esm/app/store/store.d.ts

@@ -0,0 +1,14 @@
+import { type TypedUseSelectorHook } from 'react-redux';
+export declare const store: import("@reduxjs/toolkit").EnhancedStore<{
+    baseApi: import("@reduxjs/toolkit/query").CombinedState<{}, never, "baseApi">;
+    auth: import("../../entities/user/model/slice").AuthState;
+}, import("redux").UnknownAction, import("@reduxjs/toolkit").Tuple<[import("redux").StoreEnhancer<{
+    dispatch: import("redux-thunk").ThunkDispatch<{
+        baseApi: import("@reduxjs/toolkit/query").CombinedState<{}, never, "baseApi">;
+        auth: import("../../entities/user/model/slice").AuthState;
+    }, undefined, import("redux").UnknownAction>;
+}>, import("redux").StoreEnhancer]>>;
+export type RootState = ReturnType<typeof store.getState>;
+export type AppDispatch = typeof store.dispatch;
+export declare const useAppDispatch: () => AppDispatch;
+export declare const useAppSelector: TypedUseSelectorHook<RootState>;

package/dist/esm/assets/scss/index.scss

@@ -0,0 +1,5 @@
+@forward './settings/variables';
+// @forward './settings/fonts';
+@forward './settings/helpers';
+@forward './settings/globals';
+@forward './settings/reset';

package/dist/esm/assets/scss/settings/fonts.scss

@@ -0,0 +1,29 @@
+@font-face {
+  font-family: 'Roboto Thin';
+  font-display: block;
+  src: url('/src/assets/fonts/Roboto-Thin.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Roboto Light';
+  font-display: block;
+  src: url('/src/assets/fonts/Roboto-Light.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Roboto Regular';
+  font-display: block;
+  src: url('/src/assets/fonts/Roboto-Regular.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Roboto Medium';
+  font-display: block;
+  src: url('/src/assets/fonts/Roboto-Medium.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Roboto Bold';
+  font-display: block;
+  src: url('/src/assets/fonts/Roboto-Bold.woff2') format('woff2');
+}

package/dist/esm/assets/scss/settings/globals.scss

@@ -0,0 +1,5 @@
+:root {
+  font-family: 'Roboto Regular', sans-serif;
+  font-size: 14px;
+  line-height: 20px;
+}

package/dist/esm/assets/scss/settings/helpers.scss

@@ -0,0 +1,3 @@
+.cursor-pointer {
+  cursor: pointer !important;
+}

package/dist/esm/assets/scss/settings/reset.scss

@@ -0,0 +1,8 @@
+p {
+    margin: 0;
+}
+
+a {
+    margin: 0;
+    text-decoration: none;
+}

package/dist/esm/assets/scss/settings/variables.scss

@@ -0,0 +1,91 @@
+@use 'sass:color';
+
+// Global
+$global-color-brand-40:    hsla(270, 60%, 48%, 1);
+ 
+$global-color-primary-40:  hsla(207, 100%, 48%, 1);
+$global-color-primary-60:  hsla(207, 100%, 68%, 1);
+$global-color-primary-80:  hsla(207, 100%, 86%, 1);
+
+$global-color-positive-40: hsla(137, 75%, 40%, 1);
+
+$global-color-warning-40:  hsla(44, 100%, 45%, 1);
+
+$global-color-error-40:    hsla(0, 75%, 42%, 1);
+$global-color-error-70:    hsla(6, 100%, 75%, 1);
+$global-color-error-90:    hsla(6, 100%, 93%, 1);
+
+$global-color-neutral-20:  hsla(220, 12%, 20%, 1);
+$global-color-neutral-40:  hsla(220, 12%, 39%, 1);
+$global-color-neutral-60:  hsla(220, 12%, 52%, 1);
+$global-color-neutral-70:  hsla(220, 12%, 74%, 1);
+$global-color-neutral-80:  hsla(220, 12%, 85%, 1);
+$global-color-neutral-100: hsla(0, 0%, 100%, 1);
+
+$global-color-inverse-100: hsla(0, 0%, 100%, 1);
+
+
+// Semantic
+
+    //Surface
+$surface-bright: $global-color-neutral-100;
+
+    // Primary
+$primary-high:   $global-color-primary-40;
+$primary-middle: $global-color-primary-60;
+$primary-low:    $global-color-primary-80;
+
+    // Primary-border
+$primary-border-high: $global-color-primary-40;
+$primary-border-low:  $global-color-primary-80;
+
+
+    // Primary with alfa-channel
+$primary-A92: color.change($global-color-primary-40, $alpha: 0.92);
+$primary-A88: color.change($global-color-primary-40, $alpha: 0.88);
+$primary-A12: color.change($global-color-primary-40, $alpha: 0.12);
+$primary-A8:  color.change($global-color-primary-40, $alpha: 0.08);
+
+    // Inverse
+$inverse: $global-color-inverse-100;
+
+    // Neutral
+$neutral-high:   $global-color-neutral-20;
+$neutral-middle: $global-color-neutral-40;
+$neutral-low:    $global-color-neutral-60;
+
+    // Neutral-border
+$neutral-border-middle: $global-color-neutral-70;
+$neutral-border-low:    $global-color-neutral-80;
+
+
+    // Neutral with alfa-channel
+$neutral-A92: color.change($global-color-neutral-40, $alpha: 0.92);
+$neutral-A88: color.change($global-color-neutral-40, $alpha: 0.88);
+$neutral-A48: color.change($global-color-neutral-40, $alpha: 0.48);
+$neutral-A16: color.change($global-color-neutral-40, $alpha: 0.16);
+$neutral-A12: color.change($global-color-neutral-40, $alpha: 0.12);
+$neutral-A8:  color.change($global-color-neutral-40, $alpha: 0.08);
+
+    // Error
+$error-high: $global-color-error-40;
+
+    // Error-border
+$error-border-high:   $global-color-error-40;
+$error-border-middle: $global-color-error-70;
+
+    //Error-container
+$error-border-low: $global-color-error-90;
+
+// TODO: Заменить на цвет из фигмы, когда его туда добавят
+$color-neutral-gray: hsla(220, 12%, 98%, 1); 
+
+// Breakpoints
+$xs: 400px;
+$sm: 576px;
+$md: 768px;
+$lg: 992px;
+$xl: 1200px;
+
+//  Sizing
+$header-height: 60px;