chore(rc/0.1): first draft of the opinionated version

.eslintignore

@@ -4,3 +4,4 @@ coverage
 .eslintcache
 .eslintrc.cjs
 mockServiceWorker.js
+postcss.config.cjs

.vscode/extensions.json

@@ -13,7 +13,8 @@
     "mattpocock.ts-error-translator",
     "antfu.vite",
     "stylelint.vscode-stylelint",
-    "ms-azuretools.vscode-docker"
+    "ms-azuretools.vscode-docker",
+    "vunguyentuan.vscode-postcss"
   ],
   // List of extensions recommended by VS Code that should not be recommended for users of this workspace.
   "unwantedRecommendations": []

.vscode/settings.json

@@ -13,7 +13,7 @@
     "source.fixAll.stylelint": "explicit",
     "source.organizeImports": "never"
   },
-  // Standard settings
+  // standard settings
   "javascript.validate.enable": false,
   "html.format.indentHandlebars": true,
   "html.format.indentInnerHtml": true,
@@ -25,9 +25,6 @@
   "[html]": {
     "editor.defaultFormatter": "vscode.html-language-features"
   },
-  "[css]": {
-    "editor.defaultFormatter": "vscode.css-language-features"
-  },
   "[javascript]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
@@ -46,7 +43,34 @@
   "[jsonc]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
-
+  // eslint settings
   "eslint.format.enable": true,
-  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"]
+  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
+  // postcss settings
+  "stylelint.validate": ["css", "scss"],
+  "[css]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[postcss]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "emmet.includeLanguages": {
+    "postcss": "css"
+  },
+  "emmet.syntaxProfiles": {
+    "postcss": "css"
+  },
+  "css.validate": false,
+  "less.validate": false,
+  "scss.validate": false,
+  "postcss.validate": false,
+  "cssVariables.lookupFiles": [
+    "**/*.css",
+    "**/*.scss",
+    "**/*.sass",
+    "**/*.less",
+    "node_modules/@mantine/core/styles.css"
+  ],
+  "stylelint.ignoreDisables": false,
+  "editor.defaultFormatter": "esbenp.prettier-vscode"
 }

TABLE_OF_CONTENTS.md

@@ -0,0 +1,14 @@
+# Table of Contents
+
+Navigate through the topics to see its content.
+
+1. [Errors](#errors)
+   <!-- 2. [Example2](#example2) -->
+   <!-- 3. [Third Example](#third-example) -->
+   <!-- 4. [Fourth Example](#fourth-examplehttpwwwfourthexamplecom) -->
+
+## Errors
+
+| Code       | Message                                                                                                                 |
+| :--------- | :---------------------------------------------------------------------------------------------------------------------- |
+| `ERROR:00` | Error captured by the ErrorBoundary component. Maybe something related with the rendenring phase of the tree component. |

package.json

@@ -1,8 +1,8 @@
 {
   "name": "eruption",
-  "description": "Next Generation Boilerplate for React/Typescript, built on top of Vite ⚡️",
+  "description": "Opinionated version of EruptionJS🌋 for ReactJS Projects.",
   "private": false,
-  "version": "1.9",
+  "version": "0.1",
   "type": "module",
   "main": "src/main.tsx",
   "license": "MIT",
@@ -32,7 +32,8 @@
     "prettier:fix": "bun run prettier -- --write",
     "format": "bun run prettier && bun run lint",
     "format:fix": "bun run prettier:fix && bun run lint:fix",
-    "lint-staged": "lint-staged && tsc",
+    "typecheck": "tsc",
+    "lint-staged": "tsc && lint-staged",
     "prepare": "husky",
     "commit": "commit"
   },
@@ -44,8 +45,17 @@
     "bun": "^1.0.x"
   },
   "dependencies": {
+    "@mantine/core": "^7.x",
+    "@mantine/hooks": "^7.x",
+    "@mantine/notifications": "^7.x",
+    "@tabler/icons-react": "^2.x",
+    "@tanstack/react-query": "^5.x",
+    "@tanstack/react-query-devtools": "^5.x",
+    "axios": "^1.x",
     "react": "^18.x",
-    "react-dom": "^18.x"
+    "react-dom": "^18.x",
+    "react-router-dom": "^6.x",
+    "zustand": "^4.x"
   },
   "devDependencies": {
     "@commitlint/cli": "^18.x",
@@ -78,6 +88,9 @@
     "lint-staged": "^15.x",
     "msw": "^2.x",
     "npm-check-updates": "^16.x",
+    "postcss": "^8.4.33",
+    "postcss-preset-mantine": "^1.12.3",
+    "postcss-simple-vars": "^7.0.1",
     "prettier": "^3.x",
     "stylelint": "^16.x",
     "stylelint-config-standard": "^36.x",

postcss.config.cjs

@@ -0,0 +1,14 @@
+module.exports = {
+  plugins: {
+    'postcss-preset-mantine': {},
+    'postcss-simple-vars': {
+      variables: {
+        'mantine-breakpoint-xs': '36em',
+        'mantine-breakpoint-sm': '48em',
+        'mantine-breakpoint-md': '62em',
+        'mantine-breakpoint-lg': '75em',
+        'mantine-breakpoint-xl': '88em',
+      },
+    },
+  },
+}

src/App/App.tsx

@@ -1,33 +1,22 @@
-import { useState } from 'react'
-
-import './App.css'
-import reactLogo from './react.svg'
+import {
+  ErrorBoundaryProvider,
+  NotificationProvider,
+  QueryProvider,
+  ThemeProvider,
+} from '@/providers'
+import { Routes } from '@/routes'
 
 const App = () => {
-  const [count, setCount] = useState(0)
-
   return (
-    <div className="App">
-      <div className="flex">
-        <a href="https://vitejs.dev" target="_blank" rel="noreferrer">
-          <img src="/icons/favicon.svg" className="logo" alt="Vite logo" />
-        </a>
-        <a href="https://reactjs.org" target="_blank" rel="noreferrer">
-          <img src={reactLogo} className="logo react" alt="React logo" />
-        </a>
-        <a href="https://eruptionjs.dev" target="_blank" rel="noreferrer">
-          <span className="logo eruption">🌋</span>
-        </a>
-      </div>
-      <h1>Vite + React/TS = EruptionJS</h1>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>count is {count}</button>
-        <p>
-          Edit <code>src/App.tsx</code> and save to test HMR
-        </p>
-      </div>
-      <p className="read-the-docs">Click on the Vite, React and Eruption logos to learn more</p>
-    </div>
+    <ErrorBoundaryProvider>
+      <ThemeProvider>
+        <NotificationProvider>
+          <QueryProvider>
+            <Routes />
+          </QueryProvider>
+        </NotificationProvider>
+      </ThemeProvider>
+    </ErrorBoundaryProvider>
   )
 }
 

src/assets/ReactLogo/ReactLogo.tsx

@@ -0,0 +1,21 @@
+import { FC } from 'react'
+
+const ReactLogo: FC = (): JSX.Element => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="68"
+      height="60"
+      aria-hidden="true"
+      className="iconify iconify--logos"
+      viewBox="0 0 256 228"
+    >
+      <path
+        fill="#00D8FF"
+        d="M210 74a171 171 0 0 0-8-3l2-5c6-31 2-55-12-63s-35 0-58 19a171 171 0 0 0-6 6 156 156 0 0 0-4-4C101 4 78-5 64 3S46 34 52 63a171 171 0 0 0 2 8l-10 3C17 83 0 98 0 114s19 31 47 41a146 146 0 0 0 7 2 167 167 0 0 0-2 9c-6 29-1 51 12 59 14 8 37-1 59-20a146 146 0 0 0 5-5 168 168 0 0 0 7 6c22 19 44 26 57 19 14-8 18-32 12-61a145 145 0 0 0-1-7l5-2c29-10 48-25 48-41s-18-31-46-40Zm-6 71-4 1-13-32 12-32 8 2c24 8 38 20 38 30s-16 22-41 31Zm-10 21c2 13 3 24 1 33s-5 14-9 16c-8 5-25-1-43-17a157 157 0 0 1-7-6l22-27c12-1 24-3 34-6a134 134 0 0 1 2 7ZM87 215c-8 2-14 2-18 0-8-4-11-22-7-47a157 157 0 0 1 2-8l35 5c7 10 14 19 22 27a135 135 0 0 1-5 5c-10 8-20 14-29 18Zm-37-70c-12-5-22-10-30-16-6-6-9-11-9-15 0-10 14-22 37-30l9-2 12 32-12 33a135 135 0 0 1-7-2Zm13-85c-5-24-2-43 6-47 9-5 28 2 48 20a144 144 0 0 1 3 3L99 63l-35 5a160 160 0 0 1-1-8Zm110 28a348 348 0 0 0-8-13l24 4-8 22a381 381 0 0 0-8-13Zm-45-44 15 18a322 322 0 0 0-30 0l15-18ZM83 88a323 323 0 0 0-7 13c-4-7-6-15-9-22l24-4a322 322 0 0 0-8 13Zm8 65-24-4 9-22a321 321 0 0 0 7 13l8 13Zm37 31-15-18a383 383 0 0 0 30 0l-15 18Zm53-58 8 23-24 4a382 382 0 0 0 8-13 347 347 0 0 0 8-14Zm-17 8a359 359 0 0 1-13 20 329 329 0 0 1-23 1l-23-1a310 310 0 0 1-13-19 307 307 0 0 1-11-21 310 310 0 0 1 11-21 307 307 0 0 1 13-19l23-1 23 1a329 329 0 0 1 13 19 358 358 0 0 1 11 21 329 329 0 0 1-11 20Zm22-122c9 5 12 25 7 51l-1 5-35-5-21-27a161 161 0 0 1 6-5c19-17 36-23 44-19Zm-58 79a23 23 0 1 1 0 46 23 23 0 0 1 0-46Z"
+      />
+    </svg>
+  )
+}
+
+export { ReactLogo }

src/assets/ReactLogo/index.ts

@@ -0,0 +1 @@
+export * from './ReactLogo'

src/assets/index.ts

@@ -0,0 +1 @@
+export * from './ReactLogo'

src/components/Spinner/Spinner.tsx

@@ -0,0 +1,7 @@
+import { Loader } from '@mantine/core'
+
+function Spinner() {
+  return <Loader color="teal" />
+}
+
+export { Spinner }

src/components/Spinner/index.ts

@@ -0,0 +1 @@
+export * from './Spinner'

src/components/index.ts

@@ -0,0 +1 @@
+export * from './Spinner'