Merge branch 'release/v1.1.0'

IronTony · Sep 17, 2021 · 8ca12ec · 8ca12ec
2 parents 365366c + 9e024ca
commit 8ca12ec
Show file tree

Hide file tree

Showing 5 changed files with 1,536 additions and 1,243 deletions.
diff --git a/.prettierrc.js b/.prettierrc.js
@@ -1,9 +1,8 @@
 module.exports = {
   semi: true,
-  trailingComma: "all",
+  trailingComma: 'all',
   singleQuote: true,
   printWidth: 120,
   tabWidth: 2,
   bracketSpacing: true,
-  jsxBracketSameLine: false,
-};
+};
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-web-boilerplate",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "private": true,
   "scripts": {
     "start": "node scripts/start.js",
@@ -17,23 +17,23 @@
     "prepare": "husky install"
   },
   "dependencies": {
-    "@babel/core": "7.12.3",
+    "@babel/core": "7.15.5",
     "@chakra-ui/react": "^1.6.3",
     "@chakra-ui/theme-tools": "^1.1.7",
     "@emotion/react": "^11",
     "@emotion/styled": "^11",
-    "@pmmmwh/react-refresh-webpack-plugin": "0.4.3",
-    "@reduxjs/toolkit": "1.5.1",
+    "@pmmmwh/react-refresh-webpack-plugin": "0.5.1",
+    "@reduxjs/toolkit": "1.6.1",
     "@svgr/webpack": "5.4.0",
-    "@testing-library/jest-dom": "5.12.0",
-    "@testing-library/react": "11.2.7",
-    "@testing-library/user-event": "13.1.9",
-    "@types/jest": "26.0.23",
-    "@types/node": "15.6.1",
-    "@types/react": "17.0.8",
-    "@types/react-dom": "17.0.5",
-    "@typescript-eslint/eslint-plugin": "4.25.0",
-    "@typescript-eslint/parser": "4.25.0",
+    "@testing-library/jest-dom": "5.14.1",
+    "@testing-library/react": "12.1.0",
+    "@testing-library/user-event": "13.2.1",
+    "@types/jest": "27.0.1",
+    "@types/node": "16.9.2",
+    "@types/react": "17.0.21",
+    "@types/react-dom": "17.0.9",
+    "@typescript-eslint/eslint-plugin": "4.31.1",
+    "@typescript-eslint/parser": "4.31.1",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^26.6.0",
     "babel-loader": "8.1.0",
@@ -44,33 +44,33 @@
     "case-sensitive-paths-webpack-plugin": "2.3.0",
     "connected-react-router": "6.9.1",
     "css-loader": "4.3.0",
-    "date-fns": "2.22.1",
+    "date-fns": "2.24.0",
     "dotenv": "10.0.0",
     "dotenv-expand": "5.1.0",
     "env-cmd": "^10.1.0",
-    "eslint": "7.27.0",
+    "eslint": "7.32.0",
     "eslint-config-react-app": "^6.0.0",
-    "eslint-plugin-flowtype": "5.7.2",
-    "eslint-plugin-import": "2.23.4",
-    "eslint-plugin-jest": "24.3.6",
+    "eslint-plugin-flowtype": "6.0.1",
+    "eslint-plugin-import": "2.24.2",
+    "eslint-plugin-jest": "24.4.2",
     "eslint-plugin-jsx-a11y": "^6.3.1",
-    "eslint-plugin-react": "7.24.0",
+    "eslint-plugin-react": "7.25.2",
     "eslint-plugin-react-hooks": "^4.2.0",
-    "eslint-plugin-testing-library": "^3.9.2",
-    "eslint-webpack-plugin": "2.5.4",
+    "eslint-plugin-testing-library": "4.12.2",
+    "eslint-webpack-plugin": "3.0.1",
     "file-loader": "6.1.1",
     "fontfaceobserver": "^2.1.0",
     "framer-motion": "^4",
     "fs-extra": "^9.0.1",
     "history": "4.10.1",
     "html-webpack-plugin": "4.5.0",
-    "i18next": "20.3.1",
-    "i18next-browser-languagedetector": "6.1.1",
+    "i18next": "20.6.1",
+    "i18next-browser-languagedetector": "6.1.2",
     "identity-obj-proxy": "3.0.0",
-    "jest": "26.6.0",
+    "jest": "27.2.0",
     "jest-circus": "^27.0.3",
-    "jest-resolve": "26.6.0",
-    "jest-watch-typeahead": "0.6.1",
+    "jest-resolve": "27.2.0",
+    "jest-watch-typeahead": "0.6.4",
     "lodash": "4.17.21",
     "mini-css-extract-plugin": "0.11.3",
     "optimize-css-assets-webpack-plugin": "5.0.4",
@@ -85,9 +85,9 @@
     "react-app-polyfill": "^2.0.0",
     "react-dev-utils": "11.0.4",
     "react-dom": "17.0.2",
-    "react-i18next": "11.10.0",
+    "react-i18next": "11.12.0",
     "react-icons": "4.2.0",
-    "react-redux": "7.2.4",
+    "react-redux": "7.2.5",
     "react-refresh": "0.10.0",
     "react-router-dom": "^5.2.0",
     "react-spinners": "0.11.0",
@@ -100,7 +100,7 @@
     "style-loader": "1.3.0",
     "terser-webpack-plugin": "4.2.3",
     "ts-pnp": "1.2.0",
-    "typescript": "4.3.2",
+    "typescript": "4.4.3",
     "url-loader": "4.1.1",
     "web-vitals": "^1.0.1",
     "webpack": "4.44.2",
@@ -206,14 +206,14 @@
     ]
   },
   "devDependencies": {
-    "@types/react-redux": "7.1.16",
+    "@types/react-redux": "7.1.18",
     "eslint-config-prettier": "8.3.0",
     "eslint-plugin-emotion": "11.0.0",
-    "eslint-plugin-prettier": "3.4.0",
-    "husky": "6.0.0",
-    "lint-staged": "11.0.0",
-    "madge": "4.0.2",
-    "prettier": "2.3.0",
-    "pretty-quick": "3.1.0"
+    "eslint-plugin-prettier": "4.0.0",
+    "husky": "7.0.2",
+    "lint-staged": "11.1.2",
+    "madge": "5.0.1",
+    "prettier": "2.4.1",
+    "pretty-quick": "3.1.1"
   }
 }
diff --git a/src/redux/ghibli/sagas.ts b/src/redux/ghibli/sagas.ts
@@ -22,8 +22,10 @@ function* getAllFilmsSaga({ payload }: PayloadAction<GetAllFilmsRequestPayload>)
       yield put(messageHandlerSet({ message: filmsRes?.message, type: 'error', description: 'No films found!' }));
     }
   } catch (err) {
-    yield put(getAllFilmsFailed());
-    yield put(messageHandlerSet({ message: err?.message, type: 'error', description: 'No films found!' }));
+    if (err instanceof SyntaxError) {
+      yield put(getAllFilmsFailed());
+      yield put(messageHandlerSet({ message: err?.message, type: 'error', description: 'No films found!' }));
+    }
   }
 }
 

diff --git a/src/theme/theme.ts b/src/theme/theme.ts
@@ -1,48 +1,48 @@
-import { extendTheme, theme } from "@chakra-ui/react";
-import { createBreakpoints } from "@chakra-ui/theme-tools";
+import { extendTheme, theme } from '@chakra-ui/react';
+import { createBreakpoints } from '@chakra-ui/theme-tools';
 
 // Use https://openchakra.app/ to make experiments with ChakraUI components and props
 
 const breakpoints = createBreakpoints({
-  base: "320px",
-  xs: "360px",
-  sm: "640px",
-  md: "768px",
-  lg: "1024px",
-  xl: "1200px",
-  xxl: "1366px",
+  base: '320px',
+  xs: '360px',
+  sm: '640px',
+  md: '768px',
+  lg: '1024px',
+  xl: '1200px',
+  xxl: '1366px',
 });
 
 export const palette = {
   // FLAT COLORS
-  BLACK: "#000",
-  WHITE: "#fff",
-  TORQUISE: "#1abc9c",
-  EMERALD: "#2ecc71",
-  GREE_SEA: "#16a085",
-  NEPHRITIS: "#27ae60",
-  SUN_FLOWER: "#f1c40f",
-  ORANGE: "#f39c12",
-  CARROT: "#e67e22",
-  PUMPKIN: "#d35400",
-  PETER_RIVER: "#3498db",
-  BELIZE_HOLE: "#2980b9",
-  ALIZARIN: "#e74c3c",
-  POMEGRANATE: "#c0392b",
-  AMETHYST: "#9b59b6",
-  WISTERIA: "#8e44ad",
-  WET_ASPHALT: "#34495e",
-  MIDNIGHT_BLUE: "#2c3e50",
-  ASBESTOS: "#7f8c8d",
-  CONCRETE: "#95a5a6",
-  SILVER: "#bdc3c7",
-  CLOUDS: "#ecf0f1",
-  BORANGE: "#ffb70d",
-  BGREEN: "#009848",
-  BRED: "#db2c2c",
-  BBLUE: "#0b95ff",
-  BPURPLE: "#6c1dff",
-  BPUMPKIN: "#d35400",
+  BLACK: '#000',
+  WHITE: '#fff',
+  TORQUISE: '#1abc9c',
+  EMERALD: '#2ecc71',
+  GREE_SEA: '#16a085',
+  NEPHRITIS: '#27ae60',
+  SUN_FLOWER: '#f1c40f',
+  ORANGE: '#f39c12',
+  CARROT: '#e67e22',
+  PUMPKIN: '#d35400',
+  PETER_RIVER: '#3498db',
+  BELIZE_HOLE: '#2980b9',
+  ALIZARIN: '#e74c3c',
+  POMEGRANATE: '#c0392b',
+  AMETHYST: '#9b59b6',
+  WISTERIA: '#8e44ad',
+  WET_ASPHALT: '#34495e',
+  MIDNIGHT_BLUE: '#2c3e50',
+  ASBESTOS: '#7f8c8d',
+  CONCRETE: '#95a5a6',
+  SILVER: '#bdc3c7',
+  CLOUDS: '#ecf0f1',
+  BORANGE: '#ffb70d',
+  BGREEN: '#009848',
+  BRED: '#db2c2c',
+  BBLUE: '#0b95ff',
+  BPURPLE: '#6c1dff',
+  BPUMPKIN: '#d35400',
 };
 
 // Let's say you want to add custom colors
@@ -52,24 +52,24 @@ const customTheme = extendTheme({
     ...theme.colors,
     ...palette,
     rose: {
-      50: "#ffe1e9",
-      100: "#ffb1c0",
-      200: "#ff7e98",
-      300: "#ff4c6f",
-      400: "#ff1a45",
-      500: "#e6002c",
-      600: "#b40021",
-      700: "#810017",
-      800: "#50000d",
-      900: "#210003",
+      50: '#ffe1e9',
+      100: '#ffb1c0',
+      200: '#ff7e98',
+      300: '#ff4c6f',
+      400: '#ff1a45',
+      500: '#e6002c',
+      600: '#b40021',
+      700: '#810017',
+      800: '#50000d',
+      900: '#210003',
     },
   },
   breakpoints,
   fonts: {
     heading: "'Nunito Sans', sans-serif",
     body: "'Nunito Sans', sans-serif",
-    mono: "Menlo, monospace",
-    content: "Source Serif Pro, sans-serif",
+    mono: 'Menlo, monospace',
+    content: 'Source Serif Pro, sans-serif',
   },
   fontWeights: {
     ...theme.fontWeights,
@@ -80,27 +80,83 @@ const customTheme = extendTheme({
     extraBold: 800,
   },
   fontSizes: {
-    xs: "0.75rem", // 12px
-    sm: "0.875rem", // 14px
-    md: "1rem", // 16px
-    lg: "1.125rem", // 18px
-    xl: "1.25rem", // 20px
-    "2xl": "1.5rem", // 24px
-    "3xl": "1.875rem", // 30px
-    "4xl": "2.25rem", // 36px
-    "5xl": "3rem", // 48px
-    "6xl": "4rem", // 64px
+    xs: '0.75rem', // 12px
+    sm: '0.875rem', // 14px
+    md: '1rem', // 16px
+    lg: '1.125rem', // 18px
+    xl: '1.25rem', // 20px
+    '2xl': '1.5rem', // 24px
+    '3xl': '1.875rem', // 30px
+    '4xl': '2.25rem', // 36px
+    '5xl': '3rem', // 48px
+    '6xl': '4rem', // 64px
+  },
+  textStyles: {
+    body: {
+      color: palette.BLACK,
+      fontFamily: "'Nunito Sans', sans-serif",
+    },
+    h1: {
+      color: palette.BLACK,
+      fontFamily: "'Eksell medium', sans-serif",
+      fontSize: '48px',
+    },
+    h2: {
+      color: palette.BLACK,
+      fontFamily: "'Eksell medium', sans-serif",
+      fontSize: '32px',
+    },
+    h3: {
+      color: palette.BLACK,
+      fontFamily: "'Eksell medium', sans-serif",
+      fontSize: '24px',
+    },
+    h4: {
+      color: palette.BLACK,
+      fontFamily: "'Eksell medium', sans-serif",
+      fontSize: '20px',
+    },
+    h5: {
+      color: palette.BLACK,
+      fontFamily: "'Nunito Sans', sans-serif",
+      fontSize: '18px',
+      fontWeight: 700,
+    },
+    h6: {
+      color: palette.BLACK,
+      fontFamily: "'Nunito Sans', sans-serif",
+      fontSize: '16px',
+      fontWeight: 600,
+    },
+    normalBlack: {
+      color: palette.BLACK,
+      fontFamily: "'Nunito Sans', sans-serif",
+      fontWeight: 400,
+    },
+    normalClouds: {
+      color: palette.CLOUDS,
+      fontFamily: "'Nunito Sans', sans-serif",
+      fontWeight: 400,
+    },
+    normalSilver: {
+      color: palette.SILVER,
+      fontFamily: "'Nunito Sans', sans-serif",
+      fontWeight: 400,
+    },
   },
   shadows: {
     sm: `none`,
     md: `none`,
     lg: `none`,
     xl: `none`,
-    "2xl": `none`,
+    '2xl': `none`,
     outline: `0px 1px 0px ${palette.WET_ASPHALT}`,
     inner: `none`,
     none: `none`,
   },
+  // components: {
+  //   // Put here your custom component style
+  // },
 });
 
 export default customTheme;