upgrade the template

Borodutch · Jun 25, 2023 · ba58ea8 · T-Damer · Jun 25, 2023 · ba58ea8
1 parent 05ee478
commit ba58ea8
Show file tree

Hide file tree

Showing 23 changed files with 970 additions and 10,134 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -22,8 +22,7 @@
     "eslint:recommended",
     "plugin:react/jsx-runtime",
     "plugin:@typescript-eslint/recommended",
-    "plugin:prettier/recommended",
-    "plugin:valtio/recommended"
+    "plugin:prettier/recommended"
   ],
   "rules": {
     "no-relative-import-paths/no-relative-import-paths": [

diff --git a/.github/workflows/deployflow.yml b/.github/workflows/deployflow.yml
@@ -31,7 +31,7 @@ jobs:
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v1
         with:
-          path: 'docs'
+          path: 'dist'
       - name: Deploy to GitHub Pages
         id: deployment
         uses: actions/deploy-pages@v1
diff --git a/.gitignore b/.gitignore
@@ -1,6 +1,6 @@
 .DS_Store
 node_modules
-docs
+dist
 stats.html
 
 # local env files

diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -2,7 +2,6 @@
   "recommendations": [
     "dbaeumer.vscode-eslint",
     "esbenp.prettier-vscode",
-    "hnw.vscode-auto-open-markdown-preview",
     "bradlc.vscode-tailwindcss",
     "naumovs.color-highlight",
     "oderwat.indent-rainbow"

diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -8,5 +8,11 @@
     "javascriptreact",
     "typescript",
     "typescriptreact"
-  ]
+  ],
+  "files.associations": {
+    "*.css": "tailwindcss"
+  },
+  "editor.quickSuggestions": {
+    "strings": true
+  }
 }
diff --git a/.yarn/releases/yarn-3.5.0.cjs → .yarn/releases/yarn-3.6.0.cjs b/.yarn/releases/yarn-3.5.0.cjs → .yarn/releases/yarn-3.6.0.cjs
diff --git a/.yarnrc.yml b/.yarnrc.yml
@@ -4,4 +4,4 @@ plugins:
   - path: .yarn/plugins/yarn-up-all-plugin.cjs
     spec: "https://github.com/e5mode/yarn-up-all/releases/download/1.1.0/index.js"
 
-yarnPath: .yarn/releases/yarn-3.5.0.cjs
+yarnPath: .yarn/releases/yarn-3.6.0.cjs
diff --git a/LICENSE b/LICENSE
@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2021 Borodutch
+Copyright (c) 2021-present Borodutch
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

diff --git a/README.md b/README.md
@@ -1,15 +1,15 @@
-# Frontend code template in React
+# Frontend code template in `preact`
 
 This template is to be used for frontend applications.
 
 ## Features
 
-- State management + persistence with `valtio` and `PersistableStore`
-- Around 15.17kb after brotli compression (this includes **everything**) 😱
+- State management with `jotai`
+- Around 13.53kb after brotli compression (this includes **everything**) 😱
 - `preact` under the hood with `preact/compat` makes it compatible with virtually any `react` library but still makes it faster
 - Full TypeScript support — no dangling types
 - `vite` packager and devtools make building and development lightning fast
-- `tailwind-css` built-in with type-safe class names
+- `tailwind-css` built-in with 'daisyui'
 - GitHub Actions that lint and check the code on pull requests
 - `prettier` and `eslint` configured, enabled and formatting your code on save
 - List of recommended extensions for VSCode
@@ -19,10 +19,3 @@ This template is to be used for frontend applications.
 
 1. Install dependencies with `yarn`
 2. Run the server with `yarn start`
-
-## Available Scripts
-
-- `yarn build` — builds the app for production to the `docs` folder
-- `yarn lint` — checks if the code is linted and formatted
-- `yarn start` — runs the app in the development mode
-- `yarn generate-css-types` — generates the CSS types for `tailwind-css`
diff --git a/index.html b/index.html
@@ -3,12 +3,12 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>Frontend Starter preact</title>
-    <meta name="description" content="Frontend Starter example" />
+    <title>Frontend starter preact</title>
+    <meta name="description" content="Frontend starter example" />
   </head>
-  <body class="bg-black-background">
+  <body>
     <noscript>Please, turn on JavaScript to see this page.</noscript>
-    <div id="root"></div>
+    <div id="root" />
     <script type="module" src="/src/index.tsx"></script>
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -3,55 +3,42 @@
   "version": "1.0.0",
   "license": "MIT",
   "scripts": {
-    "start": "yarn generate-css-types && vite",
-    "build": "yarn generate-css-types && cross-env NODE_ENV=production tsc && vite build",
+    "start": "vite",
+    "build": "cross-env NODE_ENV=production tsc && vite build",
     "pretty": "prettier --check src",
     "lint": "yarn pretty && eslint --max-warnings 0 --ext ts,tsx,json src",
-    "generate-css-types": "tailwindcss-classnames -o src/classnames/tailwind.ts && prettier --write src/classnames/tailwind.ts",
     "preview": "yarn build && yarn vite preview"
   },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
   "dependencies": {
-    "@vitejs/plugin-react": "^3.1.0",
-    "preact": "^10.13.1",
-    "valtio": "^1.10.3"
+    "jotai": "^2.2.1",
+    "preact": "^10.15.1"
   },
   "devDependencies": {
     "@preact/preset-vite": "^2.5.0",
-    "@types/node": "^18.15.7",
-    "@typescript-eslint/eslint-plugin": "^5.56.0",
-    "@typescript-eslint/parser": "^5.56.0",
+    "@tailwindcss/typography": "^0.5.9",
+    "@types/node": "^20.3.1",
+    "@typescript-eslint/eslint-plugin": "^5.60.0",
+    "@typescript-eslint/parser": "^5.60.0",
+    "@vitejs/plugin-react": "^4.0.1",
     "autoprefixer": "^10.4.14",
     "cross-env": "^7.0.3",
-    "eslint": "^8.36.0",
+    "daisyui": "latest",
+    "eslint": "^8.43.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-no-relative-import-paths": "^1.5.2",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-sort-imports-es6-autofix": "^0.6.0",
-    "eslint-plugin-valtio": "^0.6.2",
-    "postcss": "^8.4.21",
-    "prettier": "^2.8.7",
+    "postcss": "^8.4.24",
+    "prettier": "^2.8.8",
     "react-scripts": "^5.0.1",
-    "rollup-plugin-visualizer": "^5.9.0",
-    "tailwindcss": "^3.2.7",
-    "tailwindcss-classnames": "^3.0.7",
-    "typescript": "^5.0.2",
-    "vite": "^4.2.1",
-    "vite-tsconfig-paths": "^4.0.7"
+    "rollup-plugin-visualizer": "^5.9.2",
+    "tailwindcss": "^3.3.2",
+    "typescript": "^5.1.3",
+    "vite": "^4.3.9",
+    "vite-tsconfig-paths": "^4.2.0"
   },
-  "packageManager": "yarn@3.5.0"
+  "packageManager": "yarn@3.6.0"
 }
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,10 +1,13 @@
-import MainBlock from 'components/MainBlock'
-import Root from 'components/Root'
+import { Suspense } from 'preact/compat'
+import UserCount from 'components/UserCount'
 
 export default function () {
   return (
-    <Root>
-      <MainBlock />
-    </Root>
+    <div className="container mx-auto max-w-prose p-10 prose">
+      <h1>Frontend template</h1>
+      <Suspense fallback={<p>Loading...</p>}>
+        <UserCount />
+      </Suspense>
+    </div>
   )
 }
diff --git a/src/atoms/userCount.ts b/src/atoms/userCount.ts
@@ -0,0 +1,4 @@
+import { atom } from 'jotai'
+import getUserCount from 'helpers/getUserCount'
+
+export default atom(getUserCount())