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

@@ -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",

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>

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} />

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"
+  }
+}

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',
+}

practice/my-diary/ui/background/src/index.ts

@@ -0,0 +1 @@
+export * from './Background'

practice/my-diary/ui/icons/src/HamburgerButtonIcon.tsx → 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' />

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'