refactor: new structure

Signed-off-by: Vitor Hugo Salgado <[email protected]>

Author: vitorsalgado

README.md

@@ -132,8 +132,3 @@ Mix of tools used to ensure code and commit style and best practices:
 
 Check the [Makefile](Makefile) for some useful commands.  
 Execute `make` to show the _help_.
-
-## To Do
-
-- [ ] Basic workflow with React and Redux
-- [ ] StyleLint seems to be not working properly

build/webpack/webpack-plugins.js

@@ -26,6 +26,11 @@ module.exports = ({ start = [], end = [] }) =>
               })
             )
           }
+        },
+        {
+          force: true,
+          from: resolvePath('src/favicon.ico'),
+          to: Config.paths.buildDestination
         }
       ]
     }),

jest.config.ts

@@ -23,6 +23,7 @@ const config: JestConfig.InitialOptions = {
       displayName: 'Unit',
       rootDir: './src',
       testEnvironment: 'jsdom',
+      setupFilesAfterEnv: [Path.resolve('./src/test-setup.config.ts')],
       moduleNameMapper: {
         '\\.(jpg|jpeg|png|gif|ico|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': Path.resolve(
           './test/setup/mocks/files/index.js'

src/app.spec.tsx

@@ -1,4 +1,3 @@
-import '@testing-library/jest-dom/extend-expect'
 import * as React from 'react'
 import { render, screen } from '@testing-library/react'
 import App from '@app/app'
@@ -7,6 +6,6 @@ describe('App', () => {
   it('should render correctly', () => {
     render(<App />)
 
-    expect(screen.getByRole('heading')).toHaveTextContent('Home!')
+    expect(screen.getByText(/React Web Starter Demo/i)).toBeTruthy()
   })
 })

src/app.tsx

@@ -1,22 +1,20 @@
-import '@app/core/assets/global.scss'
-import '@app/core/assets/favicon.ico'
+import 'react-app-polyfill/stable'
+
+import './utils/locales/i18n'
+import './base.scss'
 
 import * as React from 'react'
 import { BrowserRouter, Route, Switch } from 'react-router-dom'
 
-import About from '@app/core/features/About'
-import Home from '@app/core/features/Home'
-import Header from '@app/core/components/Header'
-import LoginPage from '@app/core/features/Login'
+import Home from '@app/features/Home'
+import Header from '@app/components/Header'
 
 export default function App(): JSX.Element {
   return (
     <BrowserRouter>
       <Header />
       <Switch>
         <Route exact path="/" component={Home} />
-        <Route exact path="/about" component={About} />
-        <Route exact path="/login" component={LoginPage} />
       </Switch>
     </BrowserRouter>
   )

src/base.scss

@@ -0,0 +1,80 @@
+/**
+  Variables
+ */
+
+:root {
+  --color-primary: #20133a;
+  --color-highlight: #0360df;
+  --color-accent: #573eb7;
+
+  --text-primary: #fff;
+
+  --border: 1px solid #ededf0;
+  --border-accent: 1px solid var(--color-accent);
+  --border-radius: 5px;
+  --box-shadow: 0 0 0 2px #ededf0;
+}
+
+/**
+  Reset
+ */
+
+* {
+  box-sizing: border-box;
+}
+
+html {
+  padding: 0;
+  margin: 0;
+  font-family: 'Roboto', sans-serif;
+  text-rendering: optimizeLegibility;
+  scroll-behavior: smooth;
+  -webkit-font-smoothing: antialiased;
+  font-size: 16px;
+}
+
+html,
+body {
+  line-height: 22px;
+  background: #f3f2f2;
+  color: #232323;
+  margin: 0;
+  height: 100%;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5 {
+  margin: 0;
+  padding: 0;
+  font-weight: normal;
+}
+
+ul,
+ol {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+input,
+button {
+  outline: none;
+  border: 0 none;
+}
+
+/**
+  Default Styles
+ */
+
+.icon {
+  font-family: 'Material Icons', serif;
+  vertical-align: middle;
+}

src/components/Header/index.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react'
+import styled from 'styled-components'
+
+const Wrapper = styled.header`
+  display: flex;
+  align-items: center;
+  text-align: center;
+  justify-content: center;
+  background: var(--color-primary);
+  color: var(--text-primary);
+  font-size: 22px;
+  padding: 15px;
+`
+
+export default function Header(): JSX.Element {
+  return (
+    <Wrapper>
+      <span>React Web Starter</span>
+    </Wrapper>
+  )
+}