styled component integrated

Author: WojciechCendrzak

config-overrides.js

@@ -0,0 +1,3 @@
+const { override, addBabelPlugins } = require('customize-cra');
+
+module.exports = override(...addBabelPlugins('babel-plugin-styled-components'));

package.json

@@ -3,17 +3,13 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
+    "start": "react-app-rewired start",
+    "build": "react-app-rewired build",
+    "test": "react-app-rewired test",
     "eject": "react-scripts eject",
     "prettify": "prettier --config ./.prettierrc.js -w ./src"
   },
   "dependencies": {
-    "babel-plugin-styled-components": "^1.12.0",
-    "beprofiler": "^0.2.3",
-    "i18n-keys": "^1.0.8",
-    "i18next": "^20.3.1",
     "@reduxjs/toolkit": "^1.5.1",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
@@ -22,6 +18,10 @@
     "@types/node": "^12.0.0",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
+    "babel-plugin-styled-components": "^1.12.0",
+    "beprofiler": "^0.2.3",
+    "i18n-keys": "^1.0.8",
+    "i18next": "^20.3.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-redux": "^7.2.4",
@@ -30,16 +30,18 @@
     "redux-logger": "^3.0.6",
     "redux-observable": "^1.2.0",
     "rxjs": "^6.6.7",
-    "typescript": "^4.1.2",
     "styled-components": "^5.3.0",
     "tailwindcss": "^2.1.4",
-    "twin.macro": "^2.4.2"
+    "twin.macro": "^2.4.2",
+    "typescript": "^4.1.2"
   },
   "devDependencies": {
-    "@types/styled-components": "^5.1.9",
     "@types/react-router-dom": "^5.1.7",
     "@types/redux-logger": "^3.0.8",
-    "prettier": "^2.3.0"
+    "@types/styled-components": "^5.1.9",
+    "customize-cra": "^1.0.0",
+    "prettier": "^2.3.0",
+    "react-app-rewired": "^2.1.8"
   },
   "proxy": "https://api.itbook.store/1.0",
   "eslintConfig": {

…omponents/book-form/book-form.styles.css …ponents/search-form/book-form.styles.csssrc/pages/home/components/book-form/book-form.styles.css renamed to src/pages/home/components/search-form/book-form.styles.css src/pages/home/components/book-form/book-form.styles.css renamed to src/pages/home/components/search-form/book-form.styles.css

@@ -1,11 +1,13 @@
 import { useCallback, useState } from 'react';
 import { useDispatch } from 'react-redux';
+import styled from 'styled-components';
 import { Button, ButtonType } from '../../../../components/button/button';
 import { bookSlice } from '../../../../logic/store/book/book.slice';
+import { APP_MARGIN } from '../../../../styles/layout';
 
 import './book-form.styles.css';
 
-export const BookForm: React.FC = () => {
+export const SearchForm: React.FC = () => {
   const dispatch = useDispatch();
   const [searchPhrase, setSearchPhrase] = useState('');
   const handleOnChange = useCallback((e) => setSearchPhrase(e.target.value), []);
@@ -14,7 +16,7 @@ export const BookForm: React.FC = () => {
   }, [dispatch, searchPhrase]);
 
   return (
-    <div className="notes-container">
+    <Container>
       <input
         className="note-input"
         type="text"
@@ -25,6 +27,12 @@ export const BookForm: React.FC = () => {
       <div className="add-button-container">
         <Button title="Search" type={ButtonType.Transparent} onClick={handleAddNote}></Button>
       </div>
-    </div>
+    </Container>
   );
 };
+
+const Container = styled.div`
+  margin-bottom: ${APP_MARGIN};
+  display: flex;
+  flex-direction: column;
+`;

…/home/components/book-form/book-form.tsx …e/components/search-form/search-form.tsxsrc/pages/home/components/book-form/book-form.tsx renamed to src/pages/home/components/search-form/search-form.tsx src/pages/home/components/book-form/book-form.tsx renamed to src/pages/home/components/search-form/search-form.tsx

@@ -3,7 +3,7 @@ import { useDispatch } from 'react-redux';
 import { Layout } from '../../components/layout/layout';
 import { bookSlice } from '../../logic/store/book/book.slice';
 import { NoteCards } from './components/book-cards/book-cards';
-import { BookForm } from './components/book-form/book-form';
+import { SearchForm } from './components/search-form/search-form';
 
 export const HomePage: React.FC = () => {
   const dispatch = useDispatch();
@@ -14,7 +14,7 @@ export const HomePage: React.FC = () => {
 
   return (
     <Layout>
-      <BookForm />
+      <SearchForm />
       <NoteCards />
     </Layout>
   );

src/pages/home/home.page.tsx

@@ -0,0 +1,3 @@
+export const APP_MARGIN = '1rem';
+export const APP_PADDING = '1rem';
+export const APP_BORDER_RADIUS = '6px';

src/styles/layout.ts

@@ -4074,6 +4074,13 @@ csstype@^3.0.2:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.8.tgz#d2266a792729fb227cd216fb572f43728e1ad340"
   integrity sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw==
 
+customize-cra@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/customize-cra/-/customize-cra-1.0.0.tgz#73286563631aa08127ad4d30a2e3c89cf4e93c8d"
+  integrity sha512-DbtaLuy59224U+xCiukkxSq8clq++MOtJ1Et7LED1fLszWe88EoblEYFBJ895sB1mC6B4uu3xPT/IjClELhMbA==
+  dependencies:
+    lodash.flow "^3.5.0"
+
 cyclist@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-1.0.1.tgz#596e9698fd0c80e12038c2b82d6eb1b35b6224d9"
@@ -7202,6 +7209,11 @@ lodash.flatmap@^4.5.0:
   resolved "https://registry.yarnpkg.com/lodash.flatmap/-/lodash.flatmap-4.5.0.tgz#ef8cbf408f6e48268663345305c6acc0b778702e"
   integrity sha1-74y/QI9uSCaGYzRTBcaswLd4cC4=
 
+lodash.flow@^3.5.0:
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/lodash.flow/-/lodash.flow-3.5.0.tgz#87bf40292b8cf83e4e8ce1a3ae4209e20071675a"
+  integrity sha1-h79AKSuM+D5OjOGjrkIJ4gBxZ1o=
+
 lodash.get@^4.4.2:
   version "4.4.2"
   resolved "https://registry.yarnpkg.com/lodash.get/-/lodash.get-4.4.2.tgz#2d177f652fa31e939b4438d5341499dfa3825e99"
@@ -9356,6 +9368,13 @@ react-app-polyfill@^2.0.0:
     regenerator-runtime "^0.13.7"
     whatwg-fetch "^3.4.1"
 
+react-app-rewired@^2.1.8:
+  version "2.1.8"
+  resolved "https://registry.yarnpkg.com/react-app-rewired/-/react-app-rewired-2.1.8.tgz#e192f93b98daf96889418d33d3e86cf863812b56"
+  integrity sha512-wjXPdKPLscA7mn0I1de1NHrbfWdXz4S1ladaGgHVKdn1hTgKK5N6EdGIJM0KrS6bKnJBj7WuqJroDTsPKKr66Q==
+  dependencies:
+    semver "^5.6.0"
+
 react-dev-utils@^11.0.3:
   version "11.0.4"
   resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-11.0.4.tgz#a7ccb60257a1ca2e0efe7a83e38e6700d17aa37a"