Merge remote-tracking branch 'origin/vls-65' into vls-65

README.md

@@ -14,6 +14,9 @@ Frontend проекта "Notion" команды scratch senior devs
 # Реактивная библиотека
 * [ScReact](https://www.npmjs.com/package/@veglem/screact)
 
+# UI Kit
+* [ui-kit](https://www.npmjs.com/package/@veglem/ui-kit)
+
 # Авторы
 * [Михалёв Ярослав](https://github.com/YarikMix) - _frontend_
 * [Журмилов Вадим](https://github.com/veglem) - _frontend_

public/index.ts

@@ -2,6 +2,7 @@ import {renderDOM} from '@veglem/screact/dist/render';
 import {ScReact} from '@veglem/screact';
 import {App} from './src/App';
 import './index.sass';
+import '@veglem/ui-kit/dist/main.css';
 
 renderDOM('root', ScReact.createComponent(App, {}));
 

public/src/components/DeleteNoteDialog/DeleteNoteDialog.tsx

@@ -1,7 +1,7 @@
 import {ScReact} from '@veglem/screact';
-import {Button} from '../Button/Button';
 import './DeleteNoteDialog.sass';
 import {Img} from "../Image/Image";
+import {uiKit} from '@veglem/ui-kit/dist/ui';
 
 export class DeleteNoteDialog extends ScReact.Component<any, any>{
 
@@ -11,6 +11,8 @@ export class DeleteNoteDialog extends ScReact.Component<any, any>{
     };
 
     render() {
+        const {Button} = uiKit
+
         return (
             <div className="delete-note-dialog">
                 <Img src="close.svg" className="close-modal-btn" onClick={this.props.handleClose}/>

public/src/components/DeleteTagDialog/DeleteTagDialog.tsx

@@ -1,7 +1,7 @@
 import {ScReact} from '@veglem/screact';
-import {Button} from '../Button/Button';
 import './DeleteTagDialog.sass';
 import {Img} from "../Image/Image";
+import {uiKit} from '@veglem/ui-kit/dist/ui';
 
 export class DeleteTagDialog extends ScReact.Component<any, any>{
 
@@ -11,6 +11,8 @@ export class DeleteTagDialog extends ScReact.Component<any, any>{
     };
 
     render() {
+        const {Button} = uiKit
+
         return (
             <div className="delete-tag-dialog">
                 <Img src="close.svg" className="close-modal-btn" onClick={this.props.handleClose}/>

public/src/components/Header/Header.tsx

@@ -1,13 +1,13 @@
 import {ScReact} from '@veglem/screact';
 import './Header.sass';
-import {Button} from '../Button/Button';
 import {AppRouter} from '../../modules/router';
 import {Logo} from '../Logo/logo';
 import {Profile} from '../Profile/Profile';
 import {AuthPage} from '../../pages/Auth';
 import {AppUserStore, UserActions, UserStoreState} from '../../modules/stores/UserStore';
 import {AppDispatcher} from '../../modules/dispatcher';
 import {AppNotesStore, NotesStoreState} from "../../modules/stores/NotesStore";
+import {uiKit} from '@veglem/ui-kit/dist/ui';
 
 export class Header extends ScReact.Component<any, any>{
     state = {
@@ -44,6 +44,8 @@ export class Header extends ScReact.Component<any, any>{
     };
 
     render() {
+        const {Button} = uiKit
+
         return (
             <header id="header" className={(location.pathname.includes("notes") && this.state.isAuth ? "notes " : "") + (this.state.fullscreen ? "fullscreen" : "")}>
                 <Logo />

public/src/components/Login/login.tsx

@@ -1,12 +1,12 @@
 import {ScReact} from '@veglem/screact';
 import {VDomNode} from '@veglem/screact/dist/vdom';
 import {Input} from '../Input/Input';
-import {Button} from '../Button/Button';
 import {ValidateLogin, ValidatePassword} from '../../modules/validation';
 import {AppDispatcher} from '../../modules/dispatcher';
 import {AppUserStore, UserActions, UserStoreState} from '../../modules/stores/UserStore';
 import {Link} from '../Link/Link';
 import {OTPDialog} from '../OTPDialog/OTPDialog';
+import {uiKit} from '@veglem/ui-kit/dist/ui';
 
 const OTP_CODE_LENGTH = 6;
 
@@ -146,6 +146,8 @@ export class LoginForm extends  ScReact.Component<any, any> {
     };
 
     render(): VDomNode {
+        const {Button} = uiKit
+
         return (
             <form className="login-form">
                 <h3>Вход</h3>

public/src/components/Profile/Profile.tsx

@@ -1,6 +1,5 @@
 import {ScReact} from '@veglem/screact';
 import './Profile.sass';
-import {Button} from '../Button/Button';
 import {AppUserStore, UserActions, UserStoreState} from '../../modules/stores/UserStore';
 import {AppDispatcher} from '../../modules/dispatcher';
 import {UpdatePasswordForm} from '../UpdatePasswordModal/UpdatePasswordModal';
@@ -9,6 +8,7 @@ import {Modal} from '../Modal/Modal';
 import {ToggleButton} from '../ToggleButton/ToggleButton';
 import {ProfileAvatar} from '../ProfileAvatar/ProfileAvatar';
 import {QRModal} from '../QRModal/QRModal';
+import {uiKit} from '@veglem/ui-kit/dist/ui';
 
 
 export class Profile extends ScReact.Component<any, any> {
@@ -82,6 +82,8 @@ export class Profile extends ScReact.Component<any, any> {
     };
 
     render() {
+        const {Button} = uiKit
+
         return (
             <div className={'user-profile-wrapper ' + (this.state.open ? 'open' : '')}>
                 <div className="toggle-profile-button" onclick={this.toggleOpen}>

public/src/components/Register/Register.tsx

@@ -6,6 +6,7 @@ import {ValidateLogin, ValidatePassword} from '../../modules/validation';
 import {AppDispatcher} from '../../modules/dispatcher';
 import {AppUserStore, UserActions, UserStoreState} from '../../modules/stores/UserStore';
 import {Link} from '../Link/Link';
+import {uiKit} from '@veglem/ui-kit/dist/ui';
 
 export class RegisterForm extends  ScReact.Component<any, any> {
     state = {
@@ -172,6 +173,8 @@ export class RegisterForm extends  ScReact.Component<any, any> {
     };
 
     render(): VDomNode {
+        const {Button} = uiKit
+
         return (
             <form className="register-form">
                 <h3>Регистрация</h3>

public/src/components/RenameTagModal/RenameTagModal.tsx

@@ -5,6 +5,7 @@ import {Button} from "../Button/Button";
 import "./RenameTagModal.sass"
 import {ValidatePassword} from "../../modules/validation";
 import {AppToasts} from "../../modules/toasts";
+import {uiKit} from '@veglem/ui-kit/dist/ui';
 
 export class RenameTagModal extends ScReact.Component<any, any> {
     state ={
@@ -82,6 +83,8 @@ export class RenameTagModal extends ScReact.Component<any, any> {
     }
 
     render() {
+        const {Button} = uiKit
+
         return (
             <form className="rename-tag-form" onsubmit={this.handleSubmit}>
                 <Img src="close.svg" className="close-modal-btn" onClick={this.props.handleClose}/>

public/src/components/SharePanel/SharePanel.tsx

@@ -8,6 +8,7 @@ import {parseNoteTitle} from "../../modules/utils";
 import {AppDispatcher} from "../../modules/dispatcher";
 import {AppToasts} from "../../modules/toasts";
 import {AppUserStore} from "../../modules/stores/UserStore";
+import {uiKit} from '@veglem/ui-kit/dist/ui';
 
 export class SharePanel extends ScReact.Component<any, any> {
 
@@ -70,6 +71,8 @@ export class SharePanel extends ScReact.Component<any, any> {
     getNoteURL = () => "https://you-note.ru/notes/" + this.props.note?.id
 
     render() {
+        const {Button} = uiKit
+
         return (
             <div className="share_panel">
                 <div className="share_panel__invite-people-container">

public/src/components/Toast/Toast.tsx

@@ -29,7 +29,6 @@ export class Toast extends ScReact.Component<ToastProps, any> {
     }
 
     render() {
-        const But = uiKit.Button
         return (
             <div className={'toast success ' + (this.props.open ? '' : 'hide')} style={`bottom: ${this.props.offset}px`}>
                 <div className="toast-content">
@@ -41,7 +40,6 @@ export class Toast extends ScReact.Component<ToastProps, any> {
                 </div>
                 <Img src="close.svg" className="toast-close-btn" onClick={this.closeToast}/>
                 <div className="progress"></div>
-                <But label={"hello"}></But>
             </div>
         );
     }

public/src/components/UpdatePasswordModal/UpdatePasswordModal.tsx

@@ -1,11 +1,11 @@
 import {ScReact} from '@veglem/screact';
 import {Input} from '../Input/Input';
-import {Button} from '../Button/Button';
 import './UpdatePasswordModal.sass';
 import {ValidatePassword} from '../../modules/validation';
 import {AppDispatcher} from '../../modules/dispatcher';
 import {UserActions} from '../../modules/stores/UserStore';
 import {Img} from "../Image/Image";
+import {uiKit} from '@veglem/ui-kit/dist/ui';
 
 export class UpdatePasswordForm extends ScReact.Component<any, any> {
     state = {
@@ -120,6 +120,8 @@ export class UpdatePasswordForm extends ScReact.Component<any, any> {
     };
 
     render() {
+        const {Button} = uiKit
+
         return (
             <div className="change-password-form">
                 <Img src="close.svg" className="close-modal-btn" onClick={this.props.handleClose}/>

public/src/components/YoutubeDialog/YoutubeDialog.tsx

@@ -6,6 +6,7 @@ import './YoutubeDialog.sass';
 import {parseYoutubeLink} from '../../modules/utils';
 import {AppToasts} from '../../modules/toasts';
 import {insertBlockPlugin} from "../Editor/Plugin";
+import {uiKit} from '@veglem/ui-kit/dist/ui';
 
 export class YoutubeDialogForm extends ScReact.Component<any, any> {
     state = {
@@ -67,6 +68,8 @@ export class YoutubeDialogForm extends ScReact.Component<any, any> {
     };
 
     render() {
+        const {Button} = uiKit
+
         return (
             <form id="youtube-dialog-form" onsubmit={this.handleSubmit}>
                 <h3>Вставить видео из YouTube</h3>

public/src/pages/Notes/index.tsx

@@ -4,14 +4,14 @@ import SearchBar from '../../components/SearchBar/SearchBar';
 import {NoteEditor} from '../../components/NoteEditor/NoteEditor';
 import {AppNotesStore, NotesActions, NotesStoreState} from '../../modules/stores/NotesStore';
 import {AppDispatcher} from '../../modules/dispatcher';
-import {Button} from '../../components/Button/Button';
 import {Img} from '../../components/Image/Image';
 import {AppNoteStore} from '../../modules/stores/NoteStore';
 import {Loader} from '../../components/Loader/Loader';
 import {parseNoteTitle, scrollToTop, truncate, unicodeToChar} from '../../modules/utils';
 import {Note} from "../../components/Note/Note";
 import {TagsFilter} from "../../components/TagsFilter/TagsFilter";
 import {AddTagMenu} from "../../components/AddTagMenu/AddTagMenu";
+import {uiKit} from '@veglem/ui-kit/dist/ui';
 
 export class NotesPage extends ScReact.Component<any, any> {
     state = {
@@ -223,6 +223,7 @@ export class NotesPage extends ScReact.Component<any, any> {
     }
 
     render() {
+        const {Button} = uiKit
         return (
             <div className={'notes-page-wrapper ' + (this.state.editorOpen ? ' active ' : '') + (this.state.fullScreen ? ' fullscreen ' : '')} >
                 <aside>