refactor(web-diary): css values set using theme (#76)

* refactor(web-diary): css values set using theme affects: @web-diary/app, @components/form-post-add, @components/header, @practice/web-diary, @ui/list, @ui/theme ISSUES CLOSED: #72 * refactor(web-diary): use of theme refactored affects: @web-diary/app, @components/form-post-add, @components/header, @components/post-list, @components/switcher-post-status, @practice/web-diary, @ui/list, @ui/theme ISSUES CLOSED: #72 * refactor(web-diary): useof theme refactored affects: @web-diary/app, @components/form-post-add, @components/header, @components/post-list, @components/switcher-post-status, @practice/web-diary, @ui/list, @ui/theme ISSUES CLOSED: #72 * refactor(web-diary): object renamed affects: @components/header, @practice/web-diary, @ui/theme ISSUES CLOSED: #72
atls-academy · May 3, 2021 · 17e9fab · 17e9fab
1 parent 30397f7
commit 17e9fab
Show file tree

Hide file tree

Showing 14 changed files with 253 additions and 186 deletions.
diff --git a/practice/web-diary/app/package.json b/practice/web-diary/app/package.json
@@ -8,6 +8,7 @@
     "@components/header": "0.0.0",
     "@components/post-list": "0.0.0",
     "@components/switcher-post-status": "0.0.0",
+    "@emotion/react": "^11.1.5",
     "@emotion/styled": "^11.1.5",
     "@store/button-status": "0.0.0",
     "@store/post-data": "0.0.0",
@@ -18,6 +19,7 @@
     "@ui/layout": "0.0.0",
     "@ui/list": "0.0.0",
     "@ui/text": "0.0.0",
+    "@ui/theme": "0.0.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.2",
     "react-intl": "^5.14.0"

diff --git a/practice/web-diary/app/src/App.tsx b/practice/web-diary/app/src/App.tsx
@@ -1,5 +1,7 @@
 import React, { useState }      from 'react'
+import { ThemeProvider }        from '@emotion/react'
 
+import * as theme               from '@ui/theme'
 import { FormPostAdd }          from '@components/form-post-add'
 import { Header }               from '@components/header'
 import { PostList }             from '@components/post-list'
@@ -19,23 +21,25 @@ const App = () => {
   const [status, setStatus] = useState('all')
   const [searchValue, setSearchValue] = useState('')
   return (
-    <PostDataProvider value={[postData, setPostData]}>
-      <ButtonStatusProvider value={[status, setStatus]}>
-        <SearchValueProvider value={[searchValue, setSearchValue]}>
-          <Background>
-            <Column alignItems='center'>
-              <Header />
-              <Layout flexBasis='20px' />
-              <SwitcherPostStatus />
-              <Layout flexBasis='15px' />
-              <PostList />
-              <Layout flexBasis='20px' />
-              <FormPostAdd />
-            </Column>
-          </Background>
-        </SearchValueProvider>
-      </ButtonStatusProvider>
-    </PostDataProvider>
+    <ThemeProvider theme={theme}>
+      <PostDataProvider value={[postData, setPostData]}>
+        <ButtonStatusProvider value={[status, setStatus]}>
+          <SearchValueProvider value={[searchValue, setSearchValue]}>
+            <Background height='100%' width='100%'>
+              <Column alignItems='center'>
+                <Header />
+                <Layout flexBasis='25px' />
+                <SwitcherPostStatus />
+                <Layout flexBasis='25px' />
+                <PostList />
+                <Layout flexBasis='25px' />
+                <FormPostAdd />
+              </Column>
+            </Background>
+          </SearchValueProvider>
+        </ButtonStatusProvider>
+      </PostDataProvider>
+    </ThemeProvider>
   )
 }
 

diff --git a/practice/web-diary/components/form-post-add/package.json b/practice/web-diary/components/form-post-add/package.json
@@ -8,6 +8,7 @@
     "@ui/button": "0.0.0",
     "@ui/input": "0.0.0",
     "@ui/layout": "0.0.0",
+    "@ui/theme": "0.0.0",
     "react": "^17.0.1",
     "react-intl": "^5.13.5"
   }

diff --git a/practice/web-diary/components/form-post-add/src/FormPostAdd.tsx b/practice/web-diary/components/form-post-add/src/FormPostAdd.tsx
@@ -33,7 +33,7 @@ export const FormPostAdd = () => {
           {intl.formatMessage(messages.add)}
         </Button>
       </Box>
-      <Layout flexBasis='70px' />
+      <Layout flexBasis='15px' />
     </Row>
   )
 }
diff --git a/practice/web-diary/components/header/package.json b/practice/web-diary/components/header/package.json
@@ -7,6 +7,7 @@
     "@store/post-data": "0.0.0",
     "@ui/layout": "0.0.0",
     "@ui/text": "0.0.0",
+    "@ui/theme": "0.0.0",
     "react": "^17.0.1",
     "react-intl": "^5.13.5"
   }

diff --git a/practice/web-diary/components/header/src/Header.tsx b/practice/web-diary/components/header/src/Header.tsx
@@ -13,11 +13,11 @@ export const Header = () => {
   const [postData] = usePostData()
   return (
     <Row justifyContent='space-between' alignItems='flex-end'>
-      <Text fontSize='25px'>{postData.length}</Text>
+      <Text fontSize='basic'>{postData.length}</Text>
       <Space />
-      <Text fontSize='25px'>{intl.formatMessage(messages.postCount)}</Text>
+      <Text fontSize='basic'>{intl.formatMessage(messages.postCount)}</Text>
       <Space />
-      <Text fontSize='25px'>{favouredCounter(postData)}</Text>
+      <Text fontSize='basic'>{favouredCounter(postData)}</Text>
     </Row>
   )
 }
diff --git a/practice/web-diary/components/switcher-post-status/src/SwitcherPostStatus.tsx b/practice/web-diary/components/switcher-post-status/src/SwitcherPostStatus.tsx
@@ -15,7 +15,7 @@ export const SwitcherPostStatus = () => {
   const [, setSearchValue] = useSearchValue()
 
   return (
-    <Box justifyContent='space-between' alignItems='center' minWidth='500px'>
+    <Box justifyContent='space-between' alignItems='center' maxWidth='500px'>
       <Row minWidth='450px' justifyContent='space-between'>
         <Input
           placeholder={intl.formatMessage(messages.search)}
@@ -24,7 +24,7 @@ export const SwitcherPostStatus = () => {
             setSearchValue(event.target.value)
           }}
         />
-        <Layout flexBasis='15px' />
+        <Layout flexBasis='30px' />
         <Button color='black' onClick={() => setStatus('all')}>
           {intl.formatMessage(messages.all)}
         </Button>

diff --git a/practice/web-diary/ui/list/package.json b/practice/web-diary/ui/list/package.json
@@ -9,6 +9,7 @@
     "@ui/icons": "0.0.0",
     "@ui/layout": "0.0.0",
     "@ui/text": "0.0.0",
+    "@ui/theme": "0.0.0",
     "react": "^17.0.1"
   }
 }
diff --git a/practice/web-diary/ui/list/src/Item.tsx b/practice/web-diary/ui/list/src/Item.tsx
@@ -29,7 +29,7 @@ export const Item = ({ deleteItem, importantItem, likeItem, postObject }) => {
             >
               <StarIcon />
             </Button>
-            <Layout flexBasis='30px' />
+            <Layout flexBasis='500px' />
             <Button color='yellow' onClick={() => setPostData(deleteItem(postData, postObject.id))}>
               <TrashIcon />
             </Button>

diff --git a/practice/web-diary/ui/theme/package.json b/practice/web-diary/ui/theme/package.json
@@ -0,0 +1,9 @@
+{
+  "name": "@ui/theme",
+  "version": "0.0.0",
+  "license": "BSD 3-Clause",
+  "main": "src/index.ts",
+  "dependencies": {
+    "react": "^17.0.1"
+  }
+}
diff --git a/practice/web-diary/ui/theme/src/colors.ts b/practice/web-diary/ui/theme/src/colors.ts
@@ -0,0 +1,7 @@
+export const colors = {
+  red: 'red',
+  blue: 'blue',
+  yellow: 'yellow',
+  black: 'black',
+  white: 'white',
+}
diff --git a/practice/web-diary/ui/theme/src/fontSizes.ts b/practice/web-diary/ui/theme/src/fontSizes.ts
@@ -0,0 +1,3 @@
+export const fontSizes = {
+  basic: '25px',
+}
diff --git a/practice/web-diary/ui/theme/src/index.ts b/practice/web-diary/ui/theme/src/index.ts
@@ -0,0 +1,2 @@
+export * from './colors'
+export * from './fontSizes'