torgbox-ui 1.0.8 → 1.0.9

package/dist/esm/entities/user/model/types.d.ts

@@ -0,0 +1,17 @@
+export interface User {
+    email: string;
+    name: string;
+    lastName: string;
+    phoneNumber: string;
+}
+export interface EmailCode {
+    email: string;
+    code: string;
+}
+export interface LoginFormData {
+    email: string;
+    password: string;
+}
+export interface ResponseAuthData {
+    user: User;
+}

package/dist/esm/index.js

@@ -0,0 +1,3 @@
+export * from './Inputs';
+export * from './Pages';
+export * from './Widgets';

package/dist/esm/index.scss

@@ -0,0 +1,6 @@
+@import './assets/scss/index';
+@import './Utils/index';
+@import './Inputs/index';
+@import './Pages/index';
+@import './Widgets/index';
+@import './shared/ui/index';

package/dist/esm/shared/model/api.d.ts

@@ -0,0 +1,6 @@
+export declare const apiMap: {
+    login: string;
+    register: string;
+    verifyEmail: string;
+    createPassword: string;
+};

package/dist/esm/shared/model/constants.d.ts

@@ -0,0 +1 @@
+export declare const BASE_URL = "http://localhost:4000";

package/dist/esm/shared/model/index.js

@@ -0,0 +1,2 @@
+export { apiMap } from './api';
+export { BASE_URL } from './constants';

package/dist/esm/shared/ui/Avatar/Avatar.d.ts

@@ -0,0 +1,8 @@
+export type TAvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+interface AvatarProps {
+    label: string;
+    size?: TAvatarSize;
+    onClickAvatar?: () => void;
+}
+export declare const Avatar: (props: AvatarProps) => JSX.Element;
+export {};

package/dist/esm/shared/ui/Avatar/avatar.scss

@@ -0,0 +1,62 @@
+@use 'sass:color';
+
+$background-avatar: $global-color-brand-40;
+$text-color-avatar: $global-color-neutral-100;
+
+$avatar-size-xs:    24px;
+$avatar-size-sm:    28px;
+$avatar-size-md:    32px;
+$avatar-size-lg:    36px;
+$avatar-size-xl:    40px;
+$avatar-size-xxl:   44px;
+
+.user-avatar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  border: none;
+  background-color: $background-avatar;
+  color: $text-color-avatar;
+  font-weight: 500;
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  &--xs {
+    width: $avatar-size-xs;
+    height: $avatar-size-xs;
+    font-size: 13px;
+  }
+
+  &--sm {
+    width: $avatar-size-sm;
+    height: $avatar-size-sm;
+    font-size: 13px;
+  }
+
+  &--md {
+    width: $avatar-size-md;
+    height: $avatar-size-md;
+    font-size: 15px;
+  }
+
+  &--lg {
+    width: $avatar-size-lg;
+    height: $avatar-size-lg;
+    font-size: 17px;
+  }
+
+  &--xl {
+    width: $avatar-size-xl;
+    height: $avatar-size-xl;
+    font-size: 19px;
+  }
+
+  &--xxl {
+    width: $avatar-size-xxl;
+    height: $avatar-size-xxl;
+    font-size: 20px;
+  }
+}

package/dist/esm/shared/ui/index.d.ts

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

package/dist/esm/shared/ui/index.js

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

package/dist/esm/shared/ui/index.scss

@@ -0,0 +1 @@
+@import './Avatar/avatar';

package/dist/esm/tools/customValidators.d.ts

@@ -0,0 +1,5 @@
+export declare const emailValidator: (value: string) => boolean;
+export declare const nameValidator: (value: string | string[]) => boolean;
+export declare const phoneValidator: (value: string) => boolean;
+export declare const passwordValidator: (value: string) => boolean;
+export declare const innValidator: (value: string) => boolean;

package/dist/esm/tools/getCoords.d.ts

@@ -0,0 +1,12 @@
+import { type RefObject } from 'react';
+export interface ICoords {
+    leftViewport: number;
+    topViewport: number;
+    bottomViewport: number;
+    leftDocument: number;
+    topDocument: number;
+    bottomDocument: number;
+    width: number;
+    height: number;
+}
+export declare const getCoords: (ref: RefObject<Element>) => ICoords | null;

package/dist/esm/tools/regExp.d.ts

@@ -0,0 +1,5 @@
+export declare const regExpEmail: RegExp;
+export declare const regExpName: RegExp;
+export declare const regExpPhoneNumber: RegExp;
+export declare const regExpPassword: RegExp;
+export declare const regExpInn: RegExp;

package/dist/esm/ui.js

@@ -0,0 +1,3 @@
+export * from './Inputs';
+export * from './Utils';
+export * from './shared/ui';

package/dist/esm/ui.scss

@@ -0,0 +1,4 @@
+@import './assets/scss/index';
+@import './Utils/index';
+@import './Inputs/index';
+@import './shared/ui/index';

package/package.json

@@ -1,19 +1,23 @@
 {
   "name": "torgbox-ui",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "readme": "README.md",
   "description": "UI-Kit команды проекта Torgbox",
   "keywords": [
     "ui"
   ],
-  "main": "dist/src/ui.js",
-  "module": "dist/src/ui.js",
-  "types": "dist/src/ui.d.ts",
+  "main": "dist/cjs/ui.cjs",
+  "module": "dist/esm/ui.js",
+  "types": "dist/esm/ui.d.ts",
   "exports": {
     ".": {
-      "import": "./dist/src/ui.js",
-      "require": "./dist/src/ui.js",
-      "types": "./dist/src/ui.d.ts"
+      "import": "./dist/esm/ui.js",
+      "require": "./dist/cjs/ui.cjs",
+      "types": "./dist/esm/ui.d.ts"
+    },
+    "./*": {
+      "import": "./dist/esm/*.js",
+      "require": "./dist/cjs/*.cjs"
     }
   },
   "files": [
@@ -23,11 +27,13 @@
     "test": "react-scripts test --setupFiles ./setupFile.js",
     "prebuild": "rm -rf dist",
     "build:ts": "tsc --build",
+    "build:esm": "tsc -p tsconfig.esm.json",
+    "build:cjs": "tsc -p tsconfig.cjs.json",
     "build:scss": "sass --no-source-map ./src:./dist",
     "build:types": "tsc -p tsconfig.build.json",
     "build:vite": "vite build",
-    "copy:scss": "rsync -av --include='*/' --include='*.scss' --exclude='*' src/ dist/src",
-    "build": "rm -rf dist && npm run build:ts && npm run copy:scss",
+    "copy:scss": "rsync -av --include='*/' --include='*.scss' --exclude='*' src/ dist/esm && rsync -av --include='*/' --include='*.scss' --exclude='*' src/ dist/cjs",
+    "build": "rm -rf dist && npm run build:esm && npm run build:cjs && npm run copy:scss",
     "prepack": "npm run build",
     "clean": "tsc --build --clean",
     "typecheck": "tsc --noEmit",

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

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

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

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

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

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

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

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

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

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

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

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

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

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