BOX-169 BOX-154 adds theme const for autocomplete

.cz-config.js

@@ -2,25 +2,25 @@ const glob = require('glob');
 
 // prettier-ignore
 const types = [
-  { value: "feat",     name: "feat", description: "A new feature" },
-  { value: "fix",      name: "fix", description: "A bug fix" },
-  { value: "docs",     name: "docs", description: "Documentation only changes" },
-  { value: "style",    name: "style", description: "Changes that do not affect the meaning of the code", },
-  { value: "chore",    name: "chore", description: "Changes to the build process or auxiliary tools", },
-  { value: "config",   name: "config", description: "Changes in configuration files. Add new or remove old." },
+  { value: "feat",     name: "feat",     description: "A new feature" },
+  { value: "fix",      name: "fix",      description: "A bug fix" },
+  { value: "docs",     name: "docs",     description: "Documentation only changes" },
+  { value: "style",    name: "style",    description: "Changes that do not affect the meaning of the code", },
+  { value: "chore",    name: "chore",    description: "Changes to the build process or auxiliary tools", },
+  { value: "config",   name: "config",   description: "Changes in configuration files. Add new or remove old." },
   { value: "refactor", name: "refactor", description: "A code change that neither fixes a bug nor adds a feature", },
-  { value: "perf",     name: "perf", description: "A code change that improves performance" },
-  { value: "test",     name: "test", description: "Adding missing tests" },
-  { value: "revert",   name: "revert", description: "Revert to a commit" },
-  { value: "wip",      name: "wip", description: "Work in progress" },
+  { value: "perf",     name: "perf",     description: "A code change that improves performance" },
+  { value: "test",     name: "test",     description: "Adding missing tests" },
+  { value: "revert",   name: "revert",   description: "Revert to a commit" },
+  { value: "wip",      name: "wip",      description: "Work in progress" },
 ]
 
 module.exports = {
   types: types.map(beautify),
   scopes: [].concat(
     'app',
     globMap('src/*/', (path) => path.replace(/src\//, '')).filter(
-      exclude(['features', 'ui', 'lib']),
+      exclude(['features', 'ui', 'lib', 'app']),
     ),
     'features',
     globMap('src/features/*/', (path) => path.replace('src/', '')),

src/api/types.ts

@@ -1,5 +1,4 @@
 import type { EditorValue } from '@cardbox/editor';
-import { UserCard } from '@box/entities/user';
 
 // Экспортируем отдельно, чтобы могли обращаться к типу, не зная, про реализацию (Editor)
 export type CardContent = EditorValue;
@@ -31,7 +30,7 @@ export interface Question {
   readonly responses: {
     authors: string[];
     count: number;
-    lastReponseAt: string;
+    lastResponseAt: string;
   };
 }
 export interface Answer {

src/app/application.tsx

@@ -1,5 +1,3 @@
-import './custom-props.css';
-
 import * as React from 'react';
 import styled, { createGlobalStyle } from 'styled-components';
 import { Helmet } from 'react-helmet-async';
@@ -8,6 +6,7 @@ import { QueryParamProvider } from 'use-query-params';
 import { Route } from 'react-router';
 import { Scope } from 'effector/fork';
 import { Searchbar } from '@box/features/search-bar';
+import { customProps } from '@box/lib/theme';
 import { paths } from '@box/pages/paths';
 // FIXME: replace later to usage of entities/viewer
 import { viewer } from '@box/api/mock/fixtures';
@@ -29,6 +28,8 @@ const Globals = createGlobalStyle`
     padding: 0;
     font-family: sans-serif;
   }
+
+  ${customProps}
 `;
 
 export const Application = ({ root }: Props) => (
@@ -45,8 +46,8 @@ export const Application = ({ root }: Props) => (
           <meta name="viewport" content="width=device-width, initial-scale=1" />
         </Helmet>
         <Globals />
-        {/* FIXME: 
-          - научиться получать авторизированного пользователя и сюда прокидывать в поле user 
+        {/* FIXME:
+          - научиться получать авторизированного пользователя и сюда прокидывать в поле user
           - или прокидывать в виджет напрямую фичи/сущности (Logo, SearchBar, UserAvatar, NewCard)
         */}
         <Searchbar

src/entities/card/organisms/card-preview.tsx

@@ -16,6 +16,7 @@ import {
 } from '@box/ui';
 import { Link } from 'react-router-dom';
 import { navigationModel } from '@box/entities/navigation';
+import { theme } from '@box/lib/theme';
 import { useEvent } from 'effector-react';
 import { useMouseSelection } from '@box/lib/use-mouse-selection';
 import { useSearchQuery } from '@box/features/search-bar';
@@ -90,22 +91,22 @@ const PaperContainerStyled = styled(PaperContainer)<{
 }>`
   justify-content: space-between;
   overflow: hidden;
-  box-shadow: 0px 3px 9px #faf9fa;
+  box-shadow: 0 3px 9px #faf9fa;
 
   &[data-size='small'] {
     height: 190px;
     transition: 0.25s;
 
     &:hover,
     &:focus {
-      border-color: var(--wizard300);
-      background-color: var(--bnw0);
+      border-color: var(${theme.palette.wizard750});
+      background-color: var(${theme.palette.bnw1000});
       cursor: pointer;
     }
   }
 
   &[data-size='large'] {
-    background: #fff;
+    background: var(${theme.palette.bnw1000});
     min-height: 190px;
   }
 `;
@@ -159,12 +160,12 @@ const TitleLink = styled(Link)`
   transition: 0.25s;
 
   &:hover {
-    color: var(--wizard500);
+    color: var(${theme.palette.wizard500});
   }
 `;
 
 const ItemEditorContainer = styled.div`
-  --editor-color: #62616d;
+  --editor-color: var(${theme.palette.bnw400});
   --editor-font-size: 15px;
   --editor-line-height: 21px;
   -webkit-line-clamp: 3;
@@ -224,7 +225,7 @@ const AddButtonStyled = styled(button.Icon)<{
   'data-is-card-to-deck-added': boolean;
 }>`
   &[data-is-card-to-deck-added='true'] {
-    background-color: #f7f6ff;
+    background-color: var(${theme.palette.wizard950});
 
     &:hover {
       background-color: inherit;
@@ -242,13 +243,13 @@ const Header = styled.header`
 `;
 
 const MetaStyled = styled.div`
-  color: #9b99ac;
+  color: var(${theme.palette.bnw600});
   display: flex;
   align-items: center;
   justify-content: space-between;
 `;
 
 const UserLink = styled(Link)`
   text-decoration: none;
-  color: #9b99ac;
+  color: var(${theme.palette.bnw600});
 `;

src/entities/user/ui/user-card.tsx

@@ -4,6 +4,7 @@ import { Avatar } from '@box/ui/atoms';
 import { Link } from 'react-router-dom';
 import type { User } from '@box/api';
 import { imgLogo } from '@box/shared/assets';
+import { theme } from '@box/lib/theme';
 
 import { getFullName } from '../lib';
 
@@ -18,6 +19,7 @@ export const UserCard: React.FC<Props> = ({ user, getUserHref }) => {
   const fullName = getFullName(user);
   const { avatar, work } = user;
 
+  const username = `${user.firstName} ${user.lastName}`;
   return (
     <Container>
       <Content>
@@ -34,10 +36,10 @@ export const UserCard: React.FC<Props> = ({ user, getUserHref }) => {
 
 const Container = styled.div`
   align-items: center;
-  background-color: #fff;
-  border: 1px solid #e7e5ee;
+  background-color: var(${theme.palette.bnw1000});
+  border: 1px solid var(${theme.palette.bnw850});
   border-radius: 6px;
-  box-shadow: 0px 6px 9px #f6f5f8;
+  box-shadow: 0 6px 9px var(${theme.palette.bnw950});
   display: flex;
   justify-content: space-between;
   padding: 1.0625rem 1.3125rem;
@@ -51,10 +53,11 @@ const Content = styled.div`
 const Name = styled.div`
   font-size: 1.3125rem;
   line-height: 1.5625rem;
+  white-space: nowrap;
 `;
 
 const Role = styled.div`
-  color: #a39bb2;
+  color: var(${theme.palette.bnw600});
   font-size: 0.8125rem;
   line-height: 1rem;
 `;
@@ -65,6 +68,6 @@ const TitleLink = styled(Link)`
   transition: 0.25s;
 
   &:hover {
-    color: var(--wizard500);
+    color: var(${theme.palette.wizard500});
   }
 `;

src/entities/user/ui/user-preview.tsx

@@ -5,6 +5,7 @@ import { Link } from 'react-router-dom';
 import type { User } from '@box/api';
 import { imgLogo } from '@box/shared/assets';
 import { plural } from '@box/lib/plural';
+import { theme } from '@box/lib/theme';
 import { useSearchQuery } from '@box/features/search-bar';
 
 interface UserPreviewProps {
@@ -36,7 +37,7 @@ export const UserPreview: React.FC<UserPreviewProps> = ({
 const PaperContainerStyled = styled(PaperContainer)`
   justify-content: space-between;
   overflow: hidden;
-  box-shadow: 0px 3px 9px #faf9fa;
+  box-shadow: 0 3px 9px #faf9fa;
   transition: 0.25s;
   height: 190px;
 
@@ -99,7 +100,7 @@ const Meta = ({ cardsCount }: MetaProps) => {
 };
 
 const MetaStyled = styled.div`
-  color: #9b99ac;
+  color: var(${theme.palette.bnw600});
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -114,7 +115,7 @@ const ContentStyled = styled.div`
   }
 `;
 const ContentText = styled(Text)`
-  color: #62616d;
+  color: var(${theme.palette.bnw400});
   overflow: hidden;
   text-overflow: ellipsis;
   -webkit-line-clamp: 3;
@@ -124,7 +125,7 @@ const ContentText = styled(Text)`
 
 const UserLink = styled(Link)`
   text-decoration: none;
-  color: #000000;
+  color: var(${theme.palette.bnw0});
 
   &:hover {
     color: blue;

src/features/card/draft/ui/atoms/reset-changes.tsx

@@ -4,8 +4,8 @@ import { useEvent } from 'effector-react/ssr';
 
 import * as model from '../../model';
 
-// eslint-disable-next-line prettier/prettier
-const CANCEL_WARN = 'Are you sure you want to undo the changes? The action is not reversible!';
+const CANCEL_WARN =
+  'Are you sure you want to undo the changes? The action is not reversible!';
 
 interface Props {
   _name: string;

src/features/search-bar/molecules/search.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import { reflect } from '@effector/reflect/ssr';
+import { theme } from '@box/lib/theme';
 
 import * as model from '../models';
 
@@ -15,22 +16,21 @@ export const Search = () => {
 };
 
 const Container = styled.div`
-  border: 1px solid #e7e5ee;
-  border-radius: 3px;
   display: flex;
   height: 42px;
 `;
 
 const Input = styled.input`
   border: none;
-  border-right: 1px solid #e7e5ee;
+  border-radius: 6px;
+  background: var(${theme.palette.bnw900});
   flex-grow: 1;
   font-size: 0.9375rem;
   outline: 0;
   padding: 0 1.125rem;
 
   &::placeholder {
-    color: #a39bb2;
+    color: var(${theme.palette.bnw600});
   }
 `;
 const SearchInput = reflect({

src/features/search-bar/organisms/search-bar.tsx

@@ -3,6 +3,7 @@ import React, { useEffect } from 'react';
 import { ContentCenteredTemplate, IconLogo, button } from '@box/ui';
 import { Link } from 'react-router-dom';
 import { SessionPanel } from '@box/entities/session';
+import { theme } from '@box/lib/theme';
 import { useEvent } from 'effector-react/ssr';
 
 import * as model from '../models';
@@ -52,8 +53,8 @@ function useSearchQueryChanged() {
 }
 
 const Container = styled.header`
-  background-color: #fff;
-  box-shadow: 0 6px 9px #f6f5f8;
+  background-color: var(${theme.palette.bnw1000});
+  box-shadow: 0 6px 9px var(${theme.palette.bnw950});
   display: flex;
   flex-shrink: 0;
   justify-content: center;
@@ -76,6 +77,6 @@ const NewCardLink = styled(Link)`
   text-decoration: none;
 
   button {
-    color: var(--wizard500);
+    color: var(${theme.palette.wizard});
   }
 `;