feat(web-diary): new design added

affects: @practice/food-delivery, @web-diary/app, @components/clear-post, @components/count-post, @components/form-post-add, @components/header, @components/switcher-post-status, @practice/web-diary, @ui/background, @ui/button, @ui/icons, @ui/list, @ui/text, @ui/theme ISSUES CLOSED: #73 refactor(web-diary): sizes, colors refactor affects: @components/clear-post, @components/form-post-add, @components/switcher-post-status, @practice/web-diary, @ui/button, @ui/list, @ui/theme ISSUES CLOSED: #73 refactor(web-diary): theme colors renamed,excessive deleted affects: @components/clear-post, @components/form-post-add, @components/switcher-post-status, @practice/web-diary, @ui/list, @ui/theme ISSUES CLOSED: #73 refactor(web-diary): color renamed affects: @practice/web-diary, @ui/list ISSUES CLOSED: #73 refactor(web-diary): changed cursor,width,overflow affects: @practice/food-delivery, @web-diary/app, @practice/web-diary, @ui/list, @ui/theme ISSUES CLOSED: #73 refactor(web-diary): default prop changed affects: @web-diary/app, @practice/web-diary, @ui/button, @ui/list, @ui/theme ISSUES CLOSED: #73 refactor(web-diary): box width change affects: @practice/web-diary, @ui/list ISSUES CLOSED: #73 style(web-diary): whitespace deleted affects: @components/count-post, @practice/web-diary, @ui/icons ISSUES CLOSED: #73 refactor(web-diary): default styles reset affects: @components/clear-post, @components/switcher-post-status, @practice/web-diary, @ui/background, @ui/button, @ui/layout, @ui/list, @ui/theme ISSUES CLOSED: #73 refactor(web-diary): colors name changed affects: @components/clear-post, @components/form-post-add, @components/switcher-post-status, @practice/web-diary, @ui/background, @ui/button, @ui/list, @ui/theme ISSUES CLOSED: #73 refactor(web-diary): switcher buttons styles added affects: @components/clear-post, @components/switcher-post-status, @practice/web-diary, @ui/button, @ui/list ISSUES CLOSED: #73 refactor(web-diary): background check added affects: @web-diary/app, @practice/web-diary, @ui/background, @ui/list, @ui/theme ISSUES CLOSED: #73 refactor(web-diary): gradient renamed affects: @web-diary/app, @practice/web-diary, @ui/background, @ui/list ISSUES CLOSED: #73 refactor(web-diary): gradient renamed affects: @web-diary/app, @practice/web-diary, @ui/background ISSUES CLOSED: #73 refactor(web-diary): app translated affects: @components/count-post, @components/form-post-add, @components/header, @components/switcher-post-status, @practice/web-diary ISSUES CLOSED: #73 refactor(web-diary): font-family changed affects: @components/header, @practice/web-diary, @ui/list, @ui/theme ISSUES CLOSED: #73 refactor(web-diary): post adding refactored affects: @components/form-post-add, @practice/web-diary ISSUES CLOSED: #73 refactor(web-diary): structure refactor affects: @web-diary/app, @fragments/controls, @fragments/form-post-add, @fragments/header, @fragments/post-list, @practice/web-diary, @ui/input ISSUES CLOSED: #73 refactor(web-diary): block size changed affects: @fragments/controls, @practice/web-diary ISSUES CLOSED: #73 refactor(web-diary): clearPosst action changed affects: @web-diary/app, @fragments/form-post-add, @fragments/post-controls, @practice/web-diary ISSUES CLOSED: #73 refactor(web-diary): clearPost action changed affects: @fragments/post-controls, @practice/web-diary ISSUES CLOSED: #73 style(web-diary): directories name fromat change affects: @fragments/post-list, @practice/web-diary, @store/button-status, @store/post-data, @store/search-status ISSUES CLOSED: #73 refactor(web-diary): background component replaced affects: @web-diary/app, @practice/web-diary, @ui/list ISSUES CLOSED: #73 refactor(web-dairy): action deleted ISSUES CLOSED: #73 feat(web-diary): initial data initialization added affects: @web-diary/app, @fragments/form-post-add, @practice/web-diary ISSUES CLOSED: #73 refactor(web-diary): initialization method changed affects: @fragments/form-post-add, @practice/web-diary, @ui/list ISSUES CLOSED: #73 refactor(web-diary): test console.log deleted affects: @practice/web-diary, @ui/list ISSUES CLOSED: #73 fix(web-diary): webpack target changed affects: @practice/web-diary ISSUES CLOSED: #82 refactor(web-diary): new component added, providers moved affects: @web-diary/app, @fragments/diary, @practice/web-diary ISSUES CLOSED: #73 chore(web-diary): entry point changed, target deleted affects: @web-diary/app, @practice/web-diary ISSUES CLOSED: #73 refactor(web-diary): render moved to app/src affects: @web-diary/app, @practice/web-diary ISSUES CLOSED: #73 WIP(web-diary): themeProvider moving to ui affects: @web-diary/app, @practice/web-diary, @ui/theme ISSUES CLOSED: #73 refactor(web-diary): app moved to ui, dependencies added affects: @web-diary/app, @practice/web-diary, @ui/theme ISSUES CLOSED: #73 chore(web-diary): exessive dependency deleted affects: @practice/web-diary, @ui/theme ISSUES CLOSED: #73 chore(web-diary): dependencies versions fixed affects: @fragments/diary, @practice/web-diary, @ui/button, @ui/theme ISSUES CLOSED: #73 refactor(web-diary): markup refactor affects: @fragments/diary, @fragments/form-post-add, @practice/web-diary, @ui/layout, @ui/list ISSUES CLOSED: #73 style(web-diary): lint changes ISSUES CLOSED: #73 refactor(web-diary): default backgroundColor of button changed affects: @practice/web-diary, @ui/button, @ui/list ISSUES CLOSED: #73 refactor(web-diary): ui components refactored affects: @web-diary/app, @fragments/form-post-add, @practice/web-diary, @ui/button, @ui/input, @ui/theme ISSUES CLOSED: #73 refactor(web-diary): input component refactored affects: @practice/web-diary, @ui/input ISSUES CLOSED: #73 refactor(web-diary): ui components refactored affects: @fragments/form-post-add, @practice/web-diary, @ui/button, @ui/list, @ui/text, @ui/theme ISSUES CLOSED: #73 refactor(web-diary): input styles changed affects: @fragments/form-post-add, @fragments/post-list, @practice/web-diary, @ui/input, @ui/list ISSUES CLOSED: #73 WIP(web-diary): button styles refactor affects: @fragments/form-post-add, @practice/web-diary, @ui/button, @ui/input, @ui/list ISSUES CLOSED: #73 refactor(web-diary): button styles and markup changed affects: @fragments/form-post-add, @practice/web-diary, @ui/button, @ui/input, @ui/list ISSUES CLOSED: #73 refactor(web-diary): buttons display changed affects: @fragments/diary, @fragments/form-post-add, @fragments/header, @practice/web-diary, @ui/button, @ui/condition, @ui/input, @ui/list, @ui/text, @ui/theme ISSUES CLOSED: #73 refactor(web-diary): component Condition refactor affects: @fragments/diary, @fragments/header, @practice/web-diary, @ui/button, @ui/condition, @ui/list ISSUES CLOSED: #73 refactor(web-diary): condition component refactored affects: @fragments/form-post-add, @fragments/header, @practice/web-diary, @ui/condition, @ui/input, @ui/layout, @ui/list ISSUES CLOSED: #73 refactor(web-diary): item, Input components refactored affects: @fragments/diary, @fragments/form-post-add, @practice/web-diary, @ui/condition, @ui/input, @ui/list, @ui/text ISSUES CLOSED: #73 refactor(web-diary): overflow changed affects: @fragments/diary, @fragments/form-post-add, @practice/web-diary, @ui/button, @ui/list, @ui/text, @ui/theme ISSUES CLOSED: #73 style(web-diary): lint changes ISSUES CLOSED: #73 refactor(web-diary): maxWidth changed affects: @fragments/diary, @practice/web-diary ISSUES CLOSED: #73 refactor(web-diary): button styles changed affects: @practice/web-diary, @ui/button, @ui/list ISSUES CLOSED: #73 refactor(web-diary): button stylex changed, Item refactored affects: @fragments/diary, @fragments/post-list, @practice/web-diary, @ui/button, @ui/input, @ui/list ISSUES CLOSED: #73 refactor(web-diary): button styles refactored affects: @practice/web-diary, @ui/button, @ui/list ISSUES CLOSED: #73 chore(web-diary): deploy workflow added (#79) * chore(web-diary): deploy workflow added affects: @practice/web-diary ISSUES CLOSED: #78 * refactor(web-diary): dependency deleted affects: @practice/web-diary ISSUES CLOSED: #78 * fix(web-diary): typo in command fixed ISSUES CLOSED: #78 * refactor(web-diary): workflow structure refactored ISSUES CLOSED: #78 * refactor(web-diary): workflows refactored ISSUES CLOSED: #78 * refactor(web-diary): command order changed ISSUES CLOSED: #78 * refactor(web-diary): workflow refactor ISSUES CLOSED: #78
atls-academy · Jun 15, 2021 · 862523b · 862523b
1 parent 17e9fab
commit 862523b
Show file tree

Hide file tree

Showing 99 changed files with 834 additions and 401 deletions.
diff --git a/.github/workflows/lintcheck.yml → .github/workflows/checking.yml b/.github/workflows/lintcheck.yml → .github/workflows/checking.yml
@@ -1,9 +1,9 @@
-name: lintcheck
+name: checking
 
 on: pull_request
 
 jobs:
-  lintcheck:
+  checking:
     runs-on: ubuntu-latest
 
     steps:
@@ -20,3 +20,7 @@ jobs:
 
       - name: Lint
         run: yarn lint
+      - name: TypeCheck
+        run: yarn typecheck
+      - name: build app
+        run: yarn workspace @practice/web-diary build
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -0,0 +1,25 @@
+name: Deploy project
+on:
+  push:
+    branches:
+      - master
+jobs:
+  web-diary:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+      - name: Setup Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: '14'
+      - name: Install dependencies
+        run: yarn install
+      - name: build app
+        run: yarn workspace @practice/web-diary build
+      - name: Deploy
+        uses: JamesIves/[email protected]
+        with:
+          branch: gh-pages
+          folder: practice/web-diary/dist
diff --git a/.gitignore b/.gitignore
@@ -55,3 +55,6 @@ dist
 
 # Google Cloud Credentials
 credentials.json
+
+
+.rej
diff --git a/practice/web-diary/app/index.tsx b/practice/web-diary/app/index.tsx
diff --git a/practice/web-diary/app/package.json b/practice/web-diary/app/package.json
@@ -4,21 +4,10 @@
   "license": "BSD 3-Clause",
   "main": "src/index.tsx",
   "dependencies": {
-    "@components/form-post-add": "0.0.0",
-    "@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",
+    "@fragments/diary": "0.0.0",
     "@store/button-status": "0.0.0",
     "@store/post-data": "0.0.0",
     "@store/search-status": "0.0.0",
-    "@ui/background": "0.0.0",
-    "@ui/icons": "0.0.0",
-    "@ui/input": "0.0.0",
-    "@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",

diff --git a/practice/web-diary/app/src/App.tsx b/practice/web-diary/app/src/App.tsx
@@ -1,45 +1,29 @@
-import React, { useState }      from 'react'
-import { ThemeProvider }        from '@emotion/react'
+import React, { useState }                   from 'react'
+import { IntlProvider }                      from 'react-intl'
 
-import * as theme               from '@ui/theme'
-import { FormPostAdd }          from '@components/form-post-add'
-import { Header }               from '@components/header'
-import { PostList }             from '@components/post-list'
-import { SwitcherPostStatus }   from '@components/switcher-post-status'
-import { ButtonStatusProvider } from '@store/button-status'
-import { PostDataProvider }     from '@store/post-data'
-import { SearchValueProvider }  from '@store/search-status'
-import { Background }           from '@ui/background'
-import { Column, Layout }       from '@ui/layout'
+import { Diary }                             from '@fragments/diary'
+import { ButtonStatusProvider }              from '@store/button-status'
+import { PostDataProvider }                  from '@store/post-data'
+import { SearchValueProvider }               from '@store/search-status'
+import { ThemeProvider, injectGlobalStyles } from '@ui/theme'
 
 const App = () => {
-  const [postData, setPostData] = useState([
-    { post: 'yesterday', id: 1 },
-    { post: 'today', id: 2 },
-    { post: 'tomorrow', id: 3 },
-  ])
+  injectGlobalStyles()
+  const [postData, setPostData] = useState([])
   const [status, setStatus] = useState('all')
   const [searchValue, setSearchValue] = useState('')
   return (
-    <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>
+    <IntlProvider locale='en'>
+      <ThemeProvider>
+        <PostDataProvider value={[postData, setPostData]}>
+          <ButtonStatusProvider value={[status, setStatus]}>
+            <SearchValueProvider value={[searchValue, setSearchValue]}>
+              <Diary />
+            </SearchValueProvider>
+          </ButtonStatusProvider>
+        </PostDataProvider>
+      </ThemeProvider>
+    </IntlProvider>
   )
 }
 

diff --git a/practice/web-diary/app/src/index.tsx b/practice/web-diary/app/src/index.tsx
@@ -1,3 +1,6 @@
-import App from './App'
+import React    from 'react'
+import ReactDOM from 'react-dom'
 
-export { App }
+import App      from './App'
+
+ReactDOM.render(<App />, document.getElementById('root'))
diff --git a/practice/web-diary/components/form-post-add/actions/index.ts b/practice/web-diary/components/form-post-add/actions/index.ts
diff --git a/practice/web-diary/components/form-post-add/src/FormPostAdd.tsx b/practice/web-diary/components/form-post-add/src/FormPostAdd.tsx
diff --git a/practice/web-diary/components/header/src/Header.tsx b/practice/web-diary/components/header/src/Header.tsx
diff --git a/practice/web-diary/components/switcher-post-status/src/SwitcherPostStatus.tsx b/practice/web-diary/components/switcher-post-status/src/SwitcherPostStatus.tsx
diff --git a/practice/web-diary/components/switcher-post-status/src/index.tsx b/practice/web-diary/components/switcher-post-status/src/index.tsx
diff --git a/practice/web-diary/fragments/diary/package.json b/practice/web-diary/fragments/diary/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "@fragments/diary",
+  "version": "0.0.0",
+  "license": "BSD 3-Clause",
+  "main": "src/index.tsx",
+  "dependencies": {
+    "@fragments/form-post-add": "0.0.0",
+    "@fragments/header": "0.0.0",
+    "@fragments/post-controls": "0.0.0",
+    "@fragments/post-list": "0.0.0",
+    "@ui/background": "0.0.0",
+    "@ui/layout": "0.0.0",
+    "react": "^17.0.2"
+  }
+}
diff --git a/practice/web-diary/fragments/diary/src/Diary.tsx b/practice/web-diary/fragments/diary/src/Diary.tsx
@@ -0,0 +1,32 @@
+import React                   from 'react'
+
+import { FormPostAdd }         from '@fragments/form-post-add'
+import { Header }              from '@fragments/header'
+import { PostControls }        from '@fragments/post-controls'
+import { PostList }            from '@fragments/post-list'
+import { Background }          from '@ui/background'
+import { Box, Column, Layout } from '@ui/layout'
+
+export const Diary = () => {
+  return (
+    <Background gradient='blueAndGreenGradient' height='100vh' width='100vw' overflowY='auto'>
+      <Column alignItems='center'>
+        <Layout flexBasis='300px' />
+        <Box backgroundColor='white' width='20%'>
+          <Column alignItems='center' width='100%'>
+            <Layout flexBasis='25px' />
+            <Header />
+            <Layout flexBasis='25px' />
+            <FormPostAdd />
+            <Layout flexBasis='15px' />
+            <PostList />
+            <Layout flexBasis='25px' />
+            <PostControls />
+            <Layout flexBasis='25px' />
+          </Column>
+        </Box>
+        <Layout flexBasis='45px' />
+      </Column>
+    </Background>
+  )
+}
diff --git a/practice/web-diary/fragments/diary/src/index.tsx b/practice/web-diary/fragments/diary/src/index.tsx
@@ -0,0 +1 @@
+export * from './Diary'
diff --git a/...ary/components/form-post-add/package.json → ...iary/fragments/form-post-add/package.json b/...ary/components/form-post-add/package.json → ...iary/fragments/form-post-add/package.json
@@ -1,14 +1,17 @@
 {
-  "name": "@components/form-post-add",
+  "name": "@fragments/form-post-add",
   "version": "0.0.0",
   "license": "BSD 3-Clause",
   "main": "src/index.tsx",
   "dependencies": {
+    "@store/button-status": "0.0.0",
     "@store/post-data": "0.0.0",
     "@ui/button": "0.0.0",
     "@ui/input": "0.0.0",
     "@ui/layout": "0.0.0",
+    "@ui/text": "0.0.0",
     "@ui/theme": "0.0.0",
+    "nanoid": "^3.1.23",
     "react": "^17.0.1",
     "react-intl": "^5.13.5"
   }

diff --git a/practice/web-diary/fragments/form-post-add/src/FormPostAdd.tsx b/practice/web-diary/fragments/form-post-add/src/FormPostAdd.tsx
@@ -0,0 +1,49 @@
+import React, { useEffect, useState } from 'react'
+import { useIntl }                    from 'react-intl'
+
+import { Button }                     from '@ui/button'
+import { Input }                      from '@ui/input'
+import { Box, Layout }                from '@ui/layout'
+import { Text }                       from '@ui/text'
+import { useButtonStatus }            from '@store/button-status'
+import { usePostData }                from '@store/post-data'
+
+import messages                       from './messages'
+import { addItem, fetchInitialData }  from './actions'
+
+export const FormPostAdd = () => {
+  const intl = useIntl()
+  const [, setStatus] = useButtonStatus()
+  const [postData, setPostData] = usePostData()
+  const [value, setValue] = useState('')
+  useEffect(() => {
+    setPostData(fetchInitialData())
+  }, [])
+  return (
+    <Box justifyContent='flex-start' width='98%'>
+      <Layout flexBasis='17px' />
+      <Input
+        size={40}
+        placeholder={intl.formatMessage(messages.yourPost)}
+        onChange={event => setValue(event.target.value)}
+        value={value}
+      />
+
+      <Layout flexBasis='5px' />
+      <Box width='20%'>
+        <Button
+          onClick={() => {
+            setPostData(addItem(postData, value))
+            setValue('')
+            setStatus('all')
+          }}
+        >
+          <Text color='white' fontWeight='bold' padding={0} fontSize='large'>
+            {intl.formatMessage(messages.add)}
+          </Text>
+        </Button>
+      </Box>
+      <Layout flexBasis='15px' />
+    </Box>
+  )
+}