remove single entry point, use only direct paths for utils

suren-atoyan · Dec 5, 2020 · 6302edc · 6302edc
1 parent 1b32cce
commit 6302edc
Show file tree

Hide file tree

Showing 22 changed files with 146 additions and 147 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,16 @@
 ### Releases
 
+## v1.1.0
+###### *Dec 6, 2020*
+
+- package.json: update `recoil` version to 0.1.2
+- components:
+  - Divider: add property `withoutMargins`, change margins based on `orientation`
+  - Loading: add first class property `position`
+  - NotFound: add 404 gif from `giphy`, move from `Box` to `Fb`
+  - Link: fix `export default` style
+  - Fb: create flexbox component
+
 ## v1.0.2
 ###### *Sep 7, 2020*
 

diff --git a/src/App.js b/src/App.js
@@ -2,12 +2,12 @@ import React from 'react';
 
 import { RecoilRoot } from 'recoil';
 import CssBaseline from '@material-ui/core/CssBaseline';
-import Box from '@material-ui/core/Box';
 
 import withErrorHandler from 'errorHandling';
 import { App as ErrorBoundaryFallback } from 'errorHandling/Fallbacks';
 
 import Layout from 'sections/Layout';
+import Fb from 'components/Fb';
 import { ThemeProvider } from 'theme';
 
 import { BrowserRouter as Router } from 'react-router-dom';
@@ -16,12 +16,12 @@ function App() {
   return (
     <RecoilRoot>
       <ThemeProvider>
-        <Box display="flex">
+        <Fb>
           <CssBaseline />
           <Router>
             <Layout />
           </Router>
-        </Box>
+        </Fb>
       </ThemeProvider>
     </RecoilRoot>
   );

diff --git a/src/components/Page/styles.js b/src/components/Page/styles.js
@@ -1,6 +1,6 @@
 import { makeStyles } from '@material-ui/core/styles';
 
-import { isMobile } from 'utils';
+import isMobile from 'utils/isMobile';
 
 const useStyles = makeStyles(theme => ({
   root: {

diff --git a/src/errorHandling/Fallbacks/App/Component.js b/src/errorHandling/Fallbacks/App/Component.js
@@ -6,7 +6,7 @@ import Button from '@material-ui/core/Button';
 
 import { FaRedo as ResetIcon } from 'react-icons/fa';
 
-import { resetApp } from 'utils';
+import resetApp from 'utils/resetApp';
 import { messages, email } from 'config';
 
 import useStyles from './styles';

diff --git a/src/global.css b/src/global.css
@@ -6,3 +6,16 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
+
+.full-width {
+  width: 100%;
+}
+
+.full-height {
+  height: 100%;
+}
+
+.full-size {
+  width: 100%;
+  height: 100%;
+}
diff --git a/src/pages/Welcome/Component.js b/src/pages/Welcome/Component.js
@@ -2,35 +2,35 @@ import React from 'react';
 
 import Container from '@material-ui/core/Container';
 import Typography from '@material-ui/core/Typography';
-import Box from '@material-ui/core/Box';
 import useMediaQuery from '@material-ui/core/useMediaQuery';
 
 import { FaReact as ReactIcon } from 'react-icons/fa';
 
+import Fb from 'components/Fb';
 import Meta from 'components/Meta';
 
 import useStyles from './styles';
 
 function Welcome() {
   const matchSmallScreen = useMediaQuery('(max-width: 600px)');
-  const classes = useStyles({ isSmallScreen: matchSmallScreen });
+  const classes = useStyles();
 
   return (
     <>
       <Meta
         title="Welcome"
         description="Welcome to React PWA"
       />
-      <Container maxWidth="sm" className={classes.root}>
-        <Box className={classes.wrapper}>
-          <Box className={classes.iconBox}><ReactIcon className={classes.icon} /></Box>
+      <Container maxWidth="sm" className="full-height">
+        <Fb justifyCenter alignCenter className={classes.wrapper}>
+          <Fb className={classes.iconBox}><ReactIcon className={classes.icon} /></Fb>
           <Typography
             variant={matchSmallScreen ? 'h4' : 'h3'}
             className={classes.title}
           >
             React PWA
           </Typography>
-        </Box>
+        </Fb>
       </Container>
     </>
   );

diff --git a/src/pages/Welcome/styles.js b/src/pages/Welcome/styles.js
@@ -1,16 +1,9 @@
 import { makeStyles } from '@material-ui/core/styles';
 
 const useStyles = makeStyles(theme => ({
-  root: {
-    display: 'flex',
-    'justify-content': 'center',
-    'align-items': 'center',
-    height: '100%',
-  },
   wrapper: {
-    display: 'flex',
+    height: '100%',
     'user-select': 'none',
-    'align-items': ({ isSmallScreen }) => isSmallScreen ? 'center' : 'initial',
     'text-align': 'center',
   },
   icon: {

diff --git a/src/routes/index.js b/src/routes/index.js
@@ -1,4 +1,4 @@
-import { asyncComponentLoader } from 'utils';
+import asyncComponentLoader from 'utils/asyncComponentLoader';
 
 const routes = [
   {

diff --git a/src/sections/AppBar/Component.js b/src/sections/AppBar/Component.js
@@ -4,10 +4,7 @@ import Toolbar from '@material-ui/core/Toolbar';
 import AppBar from '@material-ui/core/AppBar';
 import IconButton from '@material-ui/core/IconButton';
 import Button from '@material-ui/core/Button';
-import Box from '@material-ui/core/Box';
-import DividerMU from '@material-ui/core/Divider';
 import Tooltip from '@material-ui/core/Tooltip';
-import { withStyles } from '@material-ui/core/styles';
 
 import {
   FaBrush as BrushIcon,
@@ -17,6 +14,8 @@ import {
 } from 'react-icons/fa';
 
 import Link from 'components/Link';
+import Fb from 'components/Fb';
+import Divider from 'components/Divider';
 
 import useTheme from 'store/theme';
 import useSW from 'store/sw';
@@ -25,13 +24,6 @@ import { title, repository } from 'config';
 
 import useStyles from './styles';
 
-const Divider = withStyles({
-  root: {
-    'margin-left': 7,
-    'margin-right': 7,
-  },
-})(props => <DividerMU flexItem orientation="vertical" {...props} />);
-
 function AppBar_({ onMenuOpen }) {
   const classes = useStyles();
   const [, themeActions] = useTheme();
@@ -53,7 +45,7 @@ function AppBar_({ onMenuOpen }) {
       elevation={1}
     >
       <Toolbar className={classes.toolbar}>
-        <Box display="flex" className={classes.main}>
+        <Fb className={classes.main}>
           <IconButton
             edge="start"
             aria-label="open menu"
@@ -66,8 +58,8 @@ function AppBar_({ onMenuOpen }) {
               {title}
             </Button>
           </Link>
-        </Box>
-        <Box display="flex">
+        </Fb>
+        <Fb>
           {
             swState.isUpdated && (
               <>
@@ -76,7 +68,7 @@ function AppBar_({ onMenuOpen }) {
                     <RedoIcon />
                   </IconButton>
                 </Tooltip>
-                <Divider />
+                <Divider orientation="vertical" flexItem />
               </>
             )
           }
@@ -91,7 +83,7 @@ function AppBar_({ onMenuOpen }) {
               <GithubIcon /> 
             </IconButton>
           </Tooltip>
-          <Divider />
+          <Divider orientation="vertical" flexItem />
           <Tooltip title="Change theme" arrow>
             <IconButton
               aria-label="toggle theme"
@@ -101,7 +93,7 @@ function AppBar_({ onMenuOpen }) {
               <BrushIcon />
             </IconButton>
           </Tooltip>
-        </Box>
+        </Fb>
       </Toolbar>
     </AppBar>
   );

diff --git a/src/sections/Copyright/Component.js b/src/sections/Copyright/Component.js
@@ -1,9 +1,9 @@
 import React from 'react';
 
 import Typography from '@material-ui/core/Typography';
-import Box from '@material-ui/core/Box';
 import Link from '@material-ui/core/Link';
 
+import Fb from 'components/Fb';
 import { copyright, domain } from 'config';
 
 import useStyles from './styles';
@@ -12,15 +12,15 @@ function Copyright() {
   const classes = useStyles();
 
   return (
-    <Box pt={2} pb={2}>
-      <Typography className={classes.copyright} variant="body2" color="textSecondary" align="center">
+    <Fb justifyCenter pt={2} pb={2}>
+      <Typography className={classes.copyright} variant="body2" color="textSecondary">
         {copyright.title}
         <Link color="inherit" href={domain}>
           {copyright.link}
         </Link>{' '}
         {new Date().getFullYear()}
       </Typography>
-    </Box>
+    </Fb>
   );
 }
 

diff --git a/src/sections/Layout/Component.js b/src/sections/Layout/Component.js
@@ -1,12 +1,11 @@
 import React from 'react';
 
-import Box from '@material-ui/core/Box';
-
 import Content from 'sections/Content';
 import Copyright from 'sections/Copyright';
 import Navigation from 'sections/Navigation';
 import Notifications from 'sections/Notifications';
 
+import Fb from 'components/Fb';
 import useStyles from './styles';
 
 function Layout() {
@@ -16,13 +15,13 @@ function Layout() {
     <>
       <Notifications />
       <Navigation />
-      <Box component="main" className={classes.wrapper}>
-        <Box className={classes.spacer} />
-        <Box className={classes.content}>
+      <Fb component="main" className={classes.wrapper}>
+        <Fb className={classes.spacer} />
+        <Fb column justifyBetween className={classes.content}>
           <Content />
           <Copyright />
-        </Box>
-      </Box>
+        </Fb>
+      </Fb>
     </>
   );
 }

diff --git a/src/sections/Layout/styles.js b/src/sections/Layout/styles.js
@@ -9,10 +9,8 @@ const useStyles = makeStyles(theme => ({
     position: 'relative',
   },
   content: {
-    display: 'flex',
-    'flex-direction': 'column',
-    'justify-content': 'space-between',
-    height: `calc(100% - ${theme.mixins.toolbar.minHeight + 8}px)`,
+    width: '100%',
+    height: `calc(100% - ${theme.mixins.toolbar + theme.spacing(1)}px)`,
   },
 }));
 

diff --git a/src/sections/Menu/Component.js b/src/sections/Menu/Component.js
@@ -19,7 +19,7 @@ import {
   FaBug as BugIcon,
 } from 'react-icons/fa';
 
-import { isMobile } from 'utils';
+import isMobile from 'utils/isMobile';
 
 import useStyles from './styles';
 

diff --git a/src/store/effects/index.js b/src/store/effects/index.js