From 9fa68fb69c8a54289bd027d63be601060594efb8 Mon Sep 17 00:00:00 2001
From: irina korol <ikorol3107@gmail.com>
Date: Tue, 18 May 2021 10:39:08 +0200
Subject: [PATCH] refactor(my-diary): add background ui component

affects: @my-diary/app, @fragments/main-page-header, @practice/my-diary, @ui/background, @ui/icons

ISSUES CLOSED: #77
---
 practice/my-diary/app/package.json            |  1 +
 practice/my-diary/app/src/App.tsx             | 15 +++-------
 .../main-page-header/src/MainPageHeader.tsx   |  4 +--
 practice/my-diary/ui/background/package.json  | 14 +++++++++
 .../my-diary/ui/background/src/Background.tsx | 21 +++++++++++++
 practice/my-diary/ui/background/src/index.ts  |  1 +
 .../{gamburgerMenu.svg => burgerMenu.svg}     | 30 -------------------
 .../my-diary/ui/icons/icons/circleDot.svg     | 30 -------------------
 ...gerButtonIcon.tsx => BurgerButtonIcon.tsx} |  2 +-
 practice/my-diary/ui/icons/src/index.ts       |  2 +-
 10 files changed, 45 insertions(+), 75 deletions(-)
 create mode 100644 practice/my-diary/ui/background/package.json
 create mode 100644 practice/my-diary/ui/background/src/Background.tsx
 create mode 100644 practice/my-diary/ui/background/src/index.ts
 rename practice/my-diary/ui/icons/icons/{gamburgerMenu.svg => burgerMenu.svg} (75%)
 rename practice/my-diary/ui/icons/src/{HamburgerButtonIcon.tsx => BurgerButtonIcon.tsx} (87%)

diff --git a/practice/my-diary/app/package.json b/practice/my-diary/app/package.json
index c2ff9ba..1389857 100644
--- a/practice/my-diary/app/package.json
+++ b/practice/my-diary/app/package.json
@@ -18,6 +18,7 @@
     "@store/notes": "0.0.0",
     "@store/search-value": "0.0.0",
     "@store/show-drawer": "0.0.0",
+    "@ui/background": "0.0.0",
     "@ui/button": "0.0.0",
     "@ui/drawer": "0.0.0",
     "@ui/icons": "0.0.0",
diff --git a/practice/my-diary/app/src/App.tsx b/practice/my-diary/app/src/App.tsx
index 1ca3a8c..a88274e 100644
--- a/practice/my-diary/app/src/App.tsx
+++ b/practice/my-diary/app/src/App.tsx
@@ -10,7 +10,8 @@ import { FilterProvider }      from '@store/filter'
 import { NotesProvider }       from '@store/notes'
 import { SearchValueProvider } from '@store/search-value'
 import { ShowDrawerProvider }  from '@store/show-drawer'
-import { Box, Column, Layout } from '@ui/layout'
+import { Background }          from '@ui/background'
+import { Column, Layout }      from '@ui/layout'
 
 export const App = () => {
   const [notes, setNotes] = useState([])
@@ -24,15 +25,7 @@ export const App = () => {
         <SearchValueProvider value={[searchValue, setSearchValue]}>
           <FilterProvider value={[filter, setFilter]}>
             <ShowDrawerProvider value={[showDrawer, setShowDrawer]}>
-              <Box
-                width='100%'
-                height='100%'
-                justifyContent='center'
-                backgroundColor='purple'
-                top='0'
-                left='0'
-                position='fixed'
-              >
+              <Background>
                 <Column width='600px'>
                   <Layout flexBasis={100} />
                   <MainPageHeader />
@@ -44,7 +37,7 @@ export const App = () => {
                   </Column>
                   <Layout flexBasis={50} />
                 </Column>
-              </Box>
+              </Background>
             </ShowDrawerProvider>
           </FilterProvider>
         </SearchValueProvider>
diff --git a/practice/my-diary/fragments/main-page-header/src/MainPageHeader.tsx b/practice/my-diary/fragments/main-page-header/src/MainPageHeader.tsx
index 51cc19c..0bbd43e 100644
--- a/practice/my-diary/fragments/main-page-header/src/MainPageHeader.tsx
+++ b/practice/my-diary/fragments/main-page-header/src/MainPageHeader.tsx
@@ -1,7 +1,7 @@
 import React                        from 'react'
 import { useIntl }                  from 'react-intl'
 
-import { HamburgerButtonIcon }      from '@ui/icons'
+import { BurgerButtonIcon }         from '@ui/icons'
 import { Box, Column, Layout, Row } from '@ui/layout'
 import { Space, Text }              from '@ui/text'
 import { useNotes }                 from '@store/notes'
@@ -17,7 +17,7 @@ export const MainPageHeader = () => {
     <Column>
       <Row backgroundColor='deepPurple' lineHeights='giant' alignItems='center'>
         <Layout flexBasis={50} />
-        <HamburgerButtonIcon cursor='pointer' onClick={() => setShowDrawer(true)} />
+        <BurgerButtonIcon cursor='pointer' onClick={() => setShowDrawer(true)} />
         <Layout flexBasis={220} />
         <Column>
           <Layout flexBasis={20} />
diff --git a/practice/my-diary/ui/background/package.json b/practice/my-diary/ui/background/package.json
new file mode 100644
index 0000000..d9e6ade
--- /dev/null
+++ b/practice/my-diary/ui/background/package.json
@@ -0,0 +1,14 @@
+{
+  "name": "@ui/background",
+  "version": "0.0.0",
+  "license": "MIT",
+  "main": "src/index.ts",
+  "devDependencies": {
+    "@types/styled-system": "^5.1.10"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.1.5",
+    "@emotion/styled": "^11.1.5",
+    "styled-system": "^5.1.0"
+  }
+}
diff --git a/practice/my-diary/ui/background/src/Background.tsx b/practice/my-diary/ui/background/src/Background.tsx
new file mode 100644
index 0000000..32949b5
--- /dev/null
+++ b/practice/my-diary/ui/background/src/Background.tsx
@@ -0,0 +1,21 @@
+import styled                     from '@emotion/styled'
+import { color, flexbox, layout } from 'styled-system'
+
+export const Background = styled.div(
+  () => ({
+    height: '100%',
+    width: '100%',
+    top: '0',
+    left: '0',
+    position: 'fixed',
+    display: 'flex',
+  }),
+  color,
+  layout,
+  flexbox,
+)
+
+Background.defaultProps = {
+  justifyContent: 'center',
+  backgroundColor: 'purple',
+}
diff --git a/practice/my-diary/ui/background/src/index.ts b/practice/my-diary/ui/background/src/index.ts
new file mode 100644
index 0000000..63fe6b7
--- /dev/null
+++ b/practice/my-diary/ui/background/src/index.ts
@@ -0,0 +1 @@
+export * from './Background'
diff --git a/practice/my-diary/ui/icons/icons/gamburgerMenu.svg b/practice/my-diary/ui/icons/icons/burgerMenu.svg
similarity index 75%
rename from practice/my-diary/ui/icons/icons/gamburgerMenu.svg
rename to practice/my-diary/ui/icons/icons/burgerMenu.svg
index 696b890..a79d0ce 100644
--- a/practice/my-diary/ui/icons/icons/gamburgerMenu.svg
+++ b/practice/my-diary/ui/icons/icons/burgerMenu.svg
@@ -11,34 +11,4 @@
 		</g>
 	</g>
 </g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
 </svg>
diff --git a/practice/my-diary/ui/icons/icons/circleDot.svg b/practice/my-diary/ui/icons/icons/circleDot.svg
index 0efbade..c4a787f 100644
--- a/practice/my-diary/ui/icons/icons/circleDot.svg
+++ b/practice/my-diary/ui/icons/icons/circleDot.svg
@@ -10,34 +10,4 @@
 			C81.814,27.804,66.195,12.186,47,12.186z"/>
 	</g>
 </g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
 </svg>
diff --git a/practice/my-diary/ui/icons/src/HamburgerButtonIcon.tsx b/practice/my-diary/ui/icons/src/BurgerButtonIcon.tsx
similarity index 87%
rename from practice/my-diary/ui/icons/src/HamburgerButtonIcon.tsx
rename to practice/my-diary/ui/icons/src/BurgerButtonIcon.tsx
index 98e830c..383498c 100644
--- a/practice/my-diary/ui/icons/src/HamburgerButtonIcon.tsx
+++ b/practice/my-diary/ui/icons/src/BurgerButtonIcon.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable */
 import React from 'react'
-export const HamburgerButtonIcon = (props) => (
+export const BurgerButtonIcon = (props) => (
   <svg width='50px' height='50px' viewBox='0 0 384 384' fill={props.color || '#fff'} {...props}>
     <rect x='0' y='277.333' width='384' height='42.667' />
     <rect x='0' y='170.667' width='384' height='42.667' />
diff --git a/practice/my-diary/ui/icons/src/index.ts b/practice/my-diary/ui/icons/src/index.ts
index a2e1611..2337905 100644
--- a/practice/my-diary/ui/icons/src/index.ts
+++ b/practice/my-diary/ui/icons/src/index.ts
@@ -1,6 +1,6 @@
 export * from './TrashIcon'
 export * from './StarIcon'
 export * from './HeartIcon'
-export * from './HamburgerButtonIcon'
+export * from './BurgerButtonIcon'
 export * from './CircleDotIcon'
 export * from './DotIcon'