diff --git a/templates/template-react-recoil/.editorconfig b/templates/template-react-recoil/.editorconfig deleted file mode 100644 index 1609791..0000000 --- a/templates/template-react-recoil/.editorconfig +++ /dev/null @@ -1,16 +0,0 @@ -# For more information about the properties used in -# this file, please see the EditorConfig documentation: -# https://editorconfig.org/ - -root = true - -[*] -charset = utf-8 -end_of_line = lf -indent_size = 2 -indent_style = space -insert_final_newline = true -trim_trailing_whitespace = true - -[*.md] -trim_trailing_whitespace = false diff --git a/templates/template-react-recoil/.eslintrc.json b/templates/template-react-recoil/.eslintrc.json deleted file mode 100644 index 29ae62f..0000000 --- a/templates/template-react-recoil/.eslintrc.json +++ /dev/null @@ -1,26 +0,0 @@ -{ - "root": true, - "env": { - "browser": true, - "es2021": true, - "node": true - }, - "extends": ["plugin:@sj-distributor/react/recommended"], - "parser": "@typescript-eslint/parser", - "parserOptions": { - "ecmaFeatures": { - "jsx": true - }, - "ecmaVersion": "latest", - "sourceType": "module" - }, - "plugins": [], - "rules": { - "@typescript-eslint/no-explicit-any": "off" - }, - "settings": { - "react": { - "version": "detect" - } - } -} diff --git a/templates/template-react-recoil/.gitignore b/templates/template-react-recoil/.gitignore deleted file mode 100644 index c71783d..0000000 --- a/templates/template-react-recoil/.gitignore +++ /dev/null @@ -1,27 +0,0 @@ -# Logs -logs -*.log -npm-debug.log* -yarn-debug.log* -yarn-error.log* -pnpm-debug.log* -lerna-debug.log* - -node_modules -dist -dist-ssr -*.local - -# Editor directories and files -.vscode/* -!.vscode/extensions.json -!.vscode/settings.json -!.vscode/css_custom_data.json -.idea -.DS_Store -*.suo -*.ntvs* -*.njsproj -*.sln -*.sw? -.history/* diff --git a/templates/template-react-recoil/.prettierignore b/templates/template-react-recoil/.prettierignore deleted file mode 100644 index 86aa53c..0000000 --- a/templates/template-react-recoil/.prettierignore +++ /dev/null @@ -1,2 +0,0 @@ -*.json -.history diff --git a/templates/template-react-recoil/.prettierrc.json b/templates/template-react-recoil/.prettierrc.json deleted file mode 100644 index 0967ef4..0000000 --- a/templates/template-react-recoil/.prettierrc.json +++ /dev/null @@ -1 +0,0 @@ -{} diff --git a/templates/template-react-recoil/.vscode/css_custom_data.json b/templates/template-react-recoil/.vscode/css_custom_data.json deleted file mode 100644 index ed021be..0000000 --- a/templates/template-react-recoil/.vscode/css_custom_data.json +++ /dev/null @@ -1,55 +0,0 @@ -{ - "version": 1.1, - "atDirectives": [ - { - "name": "@tailwind", - "description": "Use the `@tailwind` directive to insert Tailwind's `base`, `components`, `utilities` and `screens` styles into your CSS.", - "references": [ - { - "name": "Tailwind Documentation", - "url": "https://tailwindcss.com/docs/functions-and-directives#tailwind" - } - ] - }, - { - "name": "@responsive", - "description": "You can generate responsive variants of your own classes by wrapping their definitions in the `@responsive` directive:\n```css\n@responsive {\n .alert {\n background-color: #E53E3E;\n }\n}\n```\n", - "references": [ - { - "name": "Tailwind Documentation", - "url": "https://tailwindcss.com/docs/functions-and-directives#responsive" - } - ] - }, - { - "name": "@screen", - "description": "The `@screen` directive allows you to create media queries that reference your breakpoints by **name** instead of duplicating their values in your own CSS:\n```css\n@screen sm {\n /* ... */\n}\n```\n…gets transformed into this:\n```css\n@media (min-width: 640px) {\n /* ... */\n}\n```\n", - "references": [ - { - "name": "Tailwind Documentation", - "url": "https://tailwindcss.com/docs/functions-and-directives#screen" - } - ] - }, - { - "name": "@variants", - "description": "Generate `hover`, `focus`, `active` and other **variants** of your own utilities by wrapping their definitions in the `@variants` directive:\n```css\n@variants hover, focus {\n .btn-brand {\n background-color: #3182CE;\n }\n}\n```\n", - "references": [ - { - "name": "Tailwind Documentation", - "url": "https://tailwindcss.com/docs/functions-and-directives#variants" - } - ] - }, - { - "name": "@apply", - "description": "Use @apply to inline any existing utility classes into your own custom CSS.", - "references": [ - { - "name": "Tailwind Documentation", - "url": "https://tailwindcss.com/docs/functions-and-directives#variants" - } - ] - } - ] -} diff --git a/templates/template-react-recoil/.vscode/extensions.json b/templates/template-react-recoil/.vscode/extensions.json deleted file mode 100644 index 6666edb..0000000 --- a/templates/template-react-recoil/.vscode/extensions.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "recommendations": [ - "esbenp.prettier-vscode", - "bradlc.vscode-tailwindcss", - "EditorConfig.EditorConfig", - ] -} diff --git a/templates/template-react-recoil/.vscode/settings.json b/templates/template-react-recoil/.vscode/settings.json deleted file mode 100644 index a402217..0000000 --- a/templates/template-react-recoil/.vscode/settings.json +++ /dev/null @@ -1,64 +0,0 @@ -{ - // 格式化支持 - "tailwindCSS.includeLanguages": { - "typescript": "javascript", - "typescriptreact": "javascript" - }, - - // 启用自定义数据 - "css.customData": [".vscode/css_custom_data.json"], - - // 自动显示代码提示 - "editor.quickSuggestions": { - "strings": true - }, - - // 保存时进行格式化 - "editor.formatOnSave": true, - - // 保存时进行eslint自动修复 - "editor.codeActionsOnSave": { - "source.fixAll.eslint": true - }, - - // 启用prettier时，要求存在配置文件 - "prettier.requireConfig": true, - - // 启用eslint格式化 - "eslint.format.enable": true, - - // 设置默认格式化工具 - "editor.defaultFormatter": "esbenp.prettier-vscode", - "[javascript]": { - "editor.defaultFormatter": "esbenp.prettier-vscode" - }, - "[typescript]": { - "editor.defaultFormatter": "esbenp.prettier-vscode" - }, - "[typescriptreact]": { - "editor.defaultFormatter": "esbenp.prettier-vscode" - }, - - // 自动重命名标签 - "editor.linkedEditing": true, - - // 自动删除末尾的空白字符 - "files.trimTrailingWhitespace": true, - - // markdown 文件不自动删除末尾的空白字符 - "[markdown]": { - "files.trimTrailingWhitespace": false - }, - - // 自动导入缺失的模块 - "javascript.suggest.autoImports": true, - - // 自动导入缺失的模块 - "typescript.suggest.autoImports": true, - - // 移动文件时，更新导入路径 - "vascript.updateImportsOnFileMove.enabled": "prompt", - - // 移动文件时，更新导入路径 - "typescript.updateImportsOnFileMove.enabled": "prompt" -} diff --git a/templates/template-react-recoil/README.md b/templates/template-react-recoil/README.md deleted file mode 100644 index 1a9c535..0000000 --- a/templates/template-react-recoil/README.md +++ /dev/null @@ -1,56 +0,0 @@ -# React TS Boilerplate - -## Technology Stack - -- [Vite](https://vitejs.dev): Efficient build tool for modern browsers. -- [React](https://reactjs.org): JavaScript library for building user interfaces. -- [TypeScript](https://www.typescriptlang.org): Superset of JavaScript with static type-checking. -- [ReactRouter](https://reactrouter.com/docs/en/v6): Navigation library for React applications. -- [TailwindCss](https://tailwindcss.com/): Utility-first CSS framework for creating custom designs. -- [Axios](https://axios-http.com/): Promise-based HTTP client for the browser and Node.js. -- [Ramda](https://ramdajs.com/): Functional programming library for JavaScript. -- [ahooks](https://ahooks.js.org/): Collection of React Hooks for common tasks. -- [Recoil](https://recoiljs.org/): A state management library for React. - -## Quick Start - -Install project dependencies - -``` -yarn install -``` - -Launch the app, it will become available at [http://localhost:3000](http://localhost:3000/) - -``` -yarn dev -``` - -## Project Standards - -- xxx -- xxx -- xxx - -## Directory Structure - -`├──`[`.vscode`](.vscode) — VSCode settings including code snippets, recommended extensions etc
-`├──`[`public`](./public) — Static assets such as robots.txt, index.html etc
-`├──`[`src/assets`](./src/assets) — Static assets
-`├──`[`src/components`](./src/components) — React public components
-`├──`[`src/hooks`](./src/hooks) — React public hooks
-`├──`[`src/models`](./src/hooks) — Status Management
-`├──`[`src/pages`](./src/pages) — Application and page (screen) components
-`├──`[`src/routes`](./src/routes) — Application routes components
-`├──`[`src/theme`](./src/services) — External connection service
-`├──`[`src/utils`](./src/utils) — Utility functions
- -## Recommended VSCode Extensions - -- [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss): IntelliSense for Tailwind CSS. -- [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode&ssr=false#overview): Code formatting tool. -- [EditorConfig for VS Code](https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig): Editor configuration consistency. - -## Coding Conventions - -- Check [here](https://github.com/sj-distributor/react-coding-conventions). diff --git a/templates/template-react-recoil/index.html b/templates/template-react-recoil/index.html deleted file mode 100644 index 45293c2..0000000 --- a/templates/template-react-recoil/index.html +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - - Vite App - - -
- - - diff --git a/templates/template-react-recoil/package.json b/templates/template-react-recoil/package.json deleted file mode 100644 index fcb0705..0000000 --- a/templates/template-react-recoil/package.json +++ /dev/null @@ -1,46 +0,0 @@ -{ - "name": "react-vite-boilerplate", - "private": true, - "version": "0.0.0", - "scripts": { - "dev": "vite", - "build": "tsc && vite build", - "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0", - "preview": "vite preview" - }, - "dependencies": { - "ahooks": "^3.7.4", - "axios": "^1.4.0", - "ramda": "^0.29.0", - "react": "^18.2.0", - "react-dom": "^18.2.0", - "react-router-dom": "^6.19.0", - "recoil": "^0.7.7" - }, - "devDependencies": { - "@sj-distributor/eslint-plugin-react": "^0.7.1", - "@types/node": "^20.11.5", - "@types/ramda": "^0.29.3", - "@types/react": "^18.0.26", - "@types/react-dom": "^18.0.10", - "@typescript-eslint/eslint-plugin": "^6.11.0", - "@typescript-eslint/parser": "^6.11.0", - "@vitejs/plugin-react": "^4.2.0", - "autoprefixer": "^10.4.13", - "eslint": "^8.38.0", - "eslint-config-prettier": "^8.5.0", - "eslint-plugin-import": "^2.25.3", - "eslint-plugin-prettier": "^4.0.0", - "eslint-plugin-react": "^7.30.0", - "eslint-plugin-react-hooks": "^4.3.0", - "eslint-plugin-simple-import-sort": "^10.0.0", - "eslint-plugin-unicorn": "^47.0.0", - "fs-extra": "^11.1.1", - "postcss": "^8.4.21", - "prettier": "^2.6.2", - "tailwindcss": "^3.3.5", - "typescript": "^5.1.6", - "typescript-plugin-css-modules": "^5.0.1", - "vite": "^4.4.10" - } -} diff --git a/templates/template-react-recoil/postcss.config.js b/templates/template-react-recoil/postcss.config.js deleted file mode 100644 index 12a703d..0000000 --- a/templates/template-react-recoil/postcss.config.js +++ /dev/null @@ -1,6 +0,0 @@ -module.exports = { - plugins: { - tailwindcss: {}, - autoprefixer: {}, - }, -}; diff --git a/templates/template-react-recoil/public/favicon.svg b/templates/template-react-recoil/public/favicon.svg deleted file mode 100644 index de4aedd..0000000 --- a/templates/template-react-recoil/public/favicon.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - - - - - - - - - - diff --git a/templates/template-react-recoil/src/app.tsx b/templates/template-react-recoil/src/app.tsx deleted file mode 100644 index 617309d..0000000 --- a/templates/template-react-recoil/src/app.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import { useEffect, useState } from "react"; -import { BrowserRouter } from "react-router-dom"; -import { RecoilRoot } from "recoil"; - -import * as models from "./models"; -import { Router } from "./routes"; -import { - IAtomInitState, - setupStoreageState, - withInitializeState, -} from "./utils/recoil-utils"; - -function App() { - const [initState, setInitState] = useState( - undefined - ); - - useEffect(() => { - setupStoreageState(models) - .then(setInitState) - .catch(() => null); - }, []); - - if (!initState) return null; - - return ( - - - - - - ); -} - -export default App; diff --git a/templates/template-react-recoil/src/assets/logo.svg b/templates/template-react-recoil/src/assets/logo.svg deleted file mode 100644 index 6b60c10..0000000 --- a/templates/template-react-recoil/src/assets/logo.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/templates/template-react-recoil/src/components/header/header.tsx b/templates/template-react-recoil/src/components/header/header.tsx deleted file mode 100644 index bdd8bfe..0000000 --- a/templates/template-react-recoil/src/components/header/header.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import { CSSProperties, FC } from "react"; - -const headerStyle: CSSProperties = { - fontSize: "40px", -}; - -export interface IHeaderProps { - children: React.ReactNode; -} - -export const Header: FC = (props: IHeaderProps) => { - const { children } = props; - - return

{children}

; -}; diff --git a/templates/template-react-recoil/src/hooks/use-counter.ts b/templates/template-react-recoil/src/hooks/use-counter.ts deleted file mode 100644 index 6cbe5d2..0000000 --- a/templates/template-react-recoil/src/hooks/use-counter.ts +++ /dev/null @@ -1,29 +0,0 @@ -import { Dispatch, SetStateAction, useState } from "react"; - -interface IReturnType { - count: number; - increment: () => void; - decrement: () => void; - reset: () => void; - setCount: Dispatch>; -} - -function useCounter(initialValue?: number): IReturnType { - const [count, setCount] = useState(initialValue || 0); - - const increment = () => setCount((x) => x + 1); - - const decrement = () => setCount((x) => x - 1); - - const reset = () => setCount(initialValue || 0); - - return { - count, - increment, - decrement, - reset, - setCount, - }; -} - -export default useCounter; diff --git a/templates/template-react-recoil/src/index.css b/templates/template-react-recoil/src/index.css deleted file mode 100644 index b78bdb0..0000000 --- a/templates/template-react-recoil/src/index.css +++ /dev/null @@ -1,39 +0,0 @@ -@tailwind base; -@tailwind components; -@tailwind utilities; - -body { - margin: 0; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", - "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", - sans-serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -code { - font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", - monospace; -} - -p { - display: block; - margin-block-start: 1em; - margin-block-end: 1em; - margin-inline-start: 0px; - margin-inline-end: 0px; -} - -button { - outline: none; - border: none; - border-radius: 8px; - padding: 10px 35px; - background-color: #6268fb; - color: white; - font-size: calc(10px + 2vmin); -} - -button:hover { - background-color: #7278fc; -} diff --git a/templates/template-react-recoil/src/main.tsx b/templates/template-react-recoil/src/main.tsx deleted file mode 100644 index cd88ce3..0000000 --- a/templates/template-react-recoil/src/main.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import "./index.css"; - -import React from "react"; -import ReactDOM from "react-dom/client"; - -import App from "./app"; - -const container = document.getElementById("root"); - -if (container) { - const root = ReactDOM.createRoot(container); - - root.render( - - - - ); -} diff --git a/templates/template-react-recoil/src/models/index.ts b/templates/template-react-recoil/src/models/index.ts deleted file mode 100644 index d18d4a2..0000000 --- a/templates/template-react-recoil/src/models/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./user-demo-model"; diff --git a/templates/template-react-recoil/src/models/user-demo-model.ts b/templates/template-react-recoil/src/models/user-demo-model.ts deleted file mode 100644 index d3f4514..0000000 --- a/templates/template-react-recoil/src/models/user-demo-model.ts +++ /dev/null @@ -1,29 +0,0 @@ -import { isEmpty } from "ramda"; -import { selector } from "recoil"; - -import { atomWithStorage } from "@/utils/recoil-utils"; - -interface IUser { - id: number; - username: string; -} - -export const defaultUser: IUser = { - id: 0, - username: "", -}; - -export const userState = atomWithStorage({ - key: "userState", - storageKey: "USER_STATE", - default: defaultUser, -}); - -export const isLoginState = selector({ - key: "isLoginState", - get: ({ get }) => { - const user = get(userState); - - return !isEmpty(user.username); - }, -}); diff --git a/templates/template-react-recoil/src/pages/demo/demo.module.less b/templates/template-react-recoil/src/pages/demo/demo.module.less deleted file mode 100644 index 36fc473..0000000 --- a/templates/template-react-recoil/src/pages/demo/demo.module.less +++ /dev/null @@ -1,6 +0,0 @@ -.demoHeader { - @apply bg-white flex flex-col items-center justify-center; - min-height: 100vh; - font-size: 12px; - color: black; -} diff --git a/templates/template-react-recoil/src/pages/demo/demo.tsx b/templates/template-react-recoil/src/pages/demo/demo.tsx deleted file mode 100644 index 9c537dc..0000000 --- a/templates/template-react-recoil/src/pages/demo/demo.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import { FC } from "react"; - -import { Header } from "@/components/header/header"; - -import styles from "./demo.module.less"; -import { useStore } from "./use-store"; - -export const Demo: FC = () => { - const { user, count, onBack, onLogin, isLogin, onLogout, increment } = - useStore(); - - return ( -
-
- {user &&
My name is {user.username}
} - - {!isLogin && ( -

- -

- )} - - {isLogin && ( -

- -

- )} - -

- -

- -

- -

-
-
- ); -}; diff --git a/templates/template-react-recoil/src/pages/demo/use-store.ts b/templates/template-react-recoil/src/pages/demo/use-store.ts deleted file mode 100644 index 8700dac..0000000 --- a/templates/template-react-recoil/src/pages/demo/use-store.ts +++ /dev/null @@ -1,46 +0,0 @@ -import { useRequest } from "ahooks"; -import { useNavigate } from "react-router-dom"; -import { useRecoilState, useRecoilValue } from "recoil"; - -import useCounter from "@/hooks/use-counter"; -import { defaultUser, isLoginState, userState } from "@/models"; -import { getUserApi } from "@/services/api/api"; - -export const useStore = () => { - const navigate = useNavigate(); - - const { count, increment } = useCounter(0); - - const isLogin = useRecoilValue(isLoginState); - - const [user, setUser] = useRecoilState(userState); - - const getUserRequest = useRequest(getUserApi, { - manual: true, - onSuccess: (result) => { - setUser({ - id: result.id, - username: result.name, - }); - }, - onError: (error) => { - console.warn(error.message); - }, - }); - - const onBack = () => navigate("/"); - - const onLogin = () => getUserRequest.run(1); - - const onLogout = () => setUser(defaultUser); - - return { - user, - count, - onBack, - onLogin, - isLogin, - onLogout, - increment, - }; -}; diff --git a/templates/template-react-recoil/src/pages/welcome/welcome.module.less b/templates/template-react-recoil/src/pages/welcome/welcome.module.less deleted file mode 100644 index 1b1ac9a..0000000 --- a/templates/template-react-recoil/src/pages/welcome/welcome.module.less +++ /dev/null @@ -1,30 +0,0 @@ -.appLogo { - height: 40vmin; - @apply pointer-events-none; -} - -@media (prefers-reduced-motion: no-preference) { - .appLogo { - animation: App-logo-spin infinite 20s linear; - } -} - -.appHeader { - @apply bg-white flex flex-col items-center justify-center; - min-height: 100vh; - font-size: 12px; - color: black; -} - -.appLink { - color: black; -} - -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} diff --git a/templates/template-react-recoil/src/pages/welcome/welcome.tsx b/templates/template-react-recoil/src/pages/welcome/welcome.tsx deleted file mode 100644 index 993d829..0000000 --- a/templates/template-react-recoil/src/pages/welcome/welcome.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import { FC } from "react"; -import { useNavigate } from "react-router-dom"; - -import logo from "@/assets/logo.svg"; -import { Header } from "@/components/header/header"; - -import styles from "./welcome.module.less"; - -export const Welcome: FC = () => { - const navigate = useNavigate(); - - const onContinue = () => navigate("/demo"); - - return ( -
-
- logo -
🚀 Vite + React Boilerplate
-

- -

-

- - Learn React - - {" | "} - - Vite Docs - -

-
-
- ); -}; diff --git a/templates/template-react-recoil/src/routes/index.tsx b/templates/template-react-recoil/src/routes/index.tsx deleted file mode 100644 index 8b9bc2d..0000000 --- a/templates/template-react-recoil/src/routes/index.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import { Route, Routes } from "react-router-dom"; - -import { Demo } from "@/pages/demo/demo"; -import { Welcome } from "@/pages/welcome/welcome"; - -export const Router = () => { - return ( - - } /> - } /> - - ); -}; diff --git a/templates/template-react-recoil/src/services/api/api.ts b/templates/template-react-recoil/src/services/api/api.ts deleted file mode 100644 index 6ef9c98..0000000 --- a/templates/template-react-recoil/src/services/api/api.ts +++ /dev/null @@ -1,21 +0,0 @@ -import axios, { AxiosInstance } from "axios"; - -import * as types from "./api.types"; - -export const api: AxiosInstance = axios.create({ - baseURL: "https://jsonplaceholder.typicode.com/", -}); - -api.interceptors.response.use((response) => response.data); - -export const getUserApi = async ( - userId: number -): Promise => { - const response: any = await api.get(`users/${userId}`); - - return { - id: response.id, - name: response.name, - username: response.username, - }; -}; diff --git a/templates/template-react-recoil/src/services/api/api.types.ts b/templates/template-react-recoil/src/services/api/api.types.ts deleted file mode 100644 index 1c0e6eb..0000000 --- a/templates/template-react-recoil/src/services/api/api.types.ts +++ /dev/null @@ -1,5 +0,0 @@ -export type GetUserResult = { - id: number; - name: string; - username: string; -}; diff --git a/templates/template-react-recoil/src/utils/recoil-utils.ts b/templates/template-react-recoil/src/utils/recoil-utils.ts deleted file mode 100644 index c461d2e..0000000 --- a/templates/template-react-recoil/src/utils/recoil-utils.ts +++ /dev/null @@ -1,106 +0,0 @@ -import { - atom, - AtomEffect, - AtomOptions, - isRecoilValue, - MutableSnapshot, - RecoilState, -} from "recoil"; - -import * as storage from "./storage"; - -/** - * track changes & save to storage - */ -const saveStorageEffect = - (key: string): AtomEffect => - ({ onSet }) => { - onSet((newValue, _, isReset) => { - if (isReset) { - storage.remove(key); - } else { - storage.save(key, JSON.stringify(newValue)); - } - }); - }; - -export type AtomWithStorageOptions = AtomOptions & { storageKey: string }; - -export type RecoilStateWithStorage = RecoilState & { storageKey: string }; - -/** - * Create storage atom. - */ -export const atomWithStorage = ({ - ...options -}: AtomWithStorageOptions): RecoilStateWithStorage => { - const storageKey = options.storageKey; - - options.effects = options.effects - ? options.effects.concat([saveStorageEffect(storageKey)]) - : [saveStorageEffect(storageKey)]; - - const atomWithStorage = atom({ ...options }) as RecoilStateWithStorage; - - atomWithStorage.storageKey = storageKey; - - return atomWithStorage; -}; - -/** - * Checks if the input object is recoil atom with storage. - */ -const isRecoilStateWithStorage = (object: any) => { - return ( - isRecoilValue(object) && - Object.prototype.hasOwnProperty.call(object, "storageKey") - ); -}; - -export interface IAtomInitState { - atom: RecoilState; - value: any; -} - -/** - * Setup state from storage. - */ -export const setupStoreageState = async ( - models: Record -): Promise => { - const atomInitStates: IAtomInitState[] = []; - - for (const modelName in models) { - const modelNameTyped = modelName as keyof typeof models; - - const model = models[modelNameTyped]; - - if (isRecoilStateWithStorage(model)) { - const atom = model as RecoilStateWithStorage; - - if (atom.storageKey) { - const savedValue = await storage.load(atom.storageKey); - - if (savedValue !== null) { - atomInitStates.push({ - atom: atom, - value: JSON.parse(savedValue), - }); - } - } - } - } - - return atomInitStates; -}; - -/** - * Initialize recoil state - */ -export const withInitializeState = (atomInitStates: IAtomInitState[]) => { - return (mutableSnapshot: MutableSnapshot) => { - atomInitStates.forEach(({ atom, value }) => { - mutableSnapshot.set(atom, value); - }); - }; -}; diff --git a/templates/template-react-recoil/src/utils/storage.ts b/templates/template-react-recoil/src/utils/storage.ts deleted file mode 100644 index 2f6048f..0000000 --- a/templates/template-react-recoil/src/utils/storage.ts +++ /dev/null @@ -1,57 +0,0 @@ -export async function loadString(key: string): Promise { - try { - return localStorage.getItem(key); - } catch (error) { - // todo log error - return null; - } -} - -export async function saveString(key: string, value: string): Promise { - try { - localStorage.setItem(key, value); - - return true; - } catch (error) { - // todo log error - return false; - } -} - -export async function load(key: string): Promise { - try { - const almostThere = localStorage.getItem(key); - - return JSON.parse(almostThere as string); - } catch (error) { - // todo log error - return null; - } -} - -export async function save(key: string, value: any): Promise { - try { - localStorage.setItem(key, JSON.stringify(value)); - - return true; - } catch (error) { - // todo log error - return false; - } -} - -export async function remove(key: string): Promise { - try { - localStorage.removeItem(key); - } catch (error) { - // todo log error - } -} - -export async function clear(): Promise { - try { - localStorage.clear(); - } catch (error) { - // todo log error - } -} diff --git a/templates/template-react-recoil/src/vite-env.d.ts b/templates/template-react-recoil/src/vite-env.d.ts deleted file mode 100644 index 083a5ec..0000000 --- a/templates/template-react-recoil/src/vite-env.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -// eslint-disable-next-line spaced-comment -/// diff --git a/templates/template-react-recoil/tailwind.config.js b/templates/template-react-recoil/tailwind.config.js deleted file mode 100644 index efcc7bf..0000000 --- a/templates/template-react-recoil/tailwind.config.js +++ /dev/null @@ -1,7 +0,0 @@ -module.exports = { - content: ["./index.html", "./src/**/*.{tsx,less,css}"], - theme: { - extend: {}, - }, - plugins: [], -}; diff --git a/templates/template-react-recoil/tsconfig.json b/templates/template-react-recoil/tsconfig.json deleted file mode 100644 index a7dbb38..0000000 --- a/templates/template-react-recoil/tsconfig.json +++ /dev/null @@ -1,40 +0,0 @@ -{ - "extends": "./tsconfig.paths.json", - "compilerOptions": { - "lib": ["ES2020", "DOM", "DOM.Iterable"], - "target": "ES2020", - "module": "ESNext", - "skipLibCheck": true, - "useDefineForClassFields": true, - - /* Bundler mode */ - "jsx": "react-jsx", - "noEmit": true, - "allowJs": false, - "esModuleInterop": false, - "isolatedModules": true, - "moduleResolution": "Node", - "resolveJsonModule": true, - "allowSyntheticDefaultImports": true, - "forceConsistentCasingInFileNames": true, - - /* Linting */ - "strict": true, - "noUnusedLocals": true, - "noUnusedParameters": true, - "noFallthroughCasesInSwitch": true, - - /* Plugin */ - "plugins": [ - { - "name": "typescript-plugin-css-modules" - } - ] - }, - "include": ["src"], - "references": [ - { - "path": "./tsconfig.node.json" - } - ] -} diff --git a/templates/template-react-recoil/tsconfig.node.json b/templates/template-react-recoil/tsconfig.node.json deleted file mode 100644 index f83083d..0000000 --- a/templates/template-react-recoil/tsconfig.node.json +++ /dev/null @@ -1,10 +0,0 @@ -{ - "compilerOptions": { - "module": "ESNext", - "composite": true, - "skipLibCheck": true, - "moduleResolution": "Node", - "allowSyntheticDefaultImports": true - }, - "include": ["vite.config.ts"] -} diff --git a/templates/template-react-recoil/tsconfig.paths.json b/templates/template-react-recoil/tsconfig.paths.json deleted file mode 100644 index 486c7be..0000000 --- a/templates/template-react-recoil/tsconfig.paths.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "compilerOptions": { - "baseUrl": "./", - "paths": { - "@/*": ["src/*"] - } - } -} diff --git a/templates/template-react-recoil/vite.config.ts b/templates/template-react-recoil/vite.config.ts deleted file mode 100644 index a389bbf..0000000 --- a/templates/template-react-recoil/vite.config.ts +++ /dev/null @@ -1,24 +0,0 @@ -import react from "@vitejs/plugin-react"; -import * as path from "path"; -import { defineConfig } from "vite"; - -// https://vitejs.dev/config/ -export default defineConfig({ - plugins: [react()], - resolve: { - alias: { - "@": path.resolve(__dirname, "./src"), - }, - }, - css: { - modules: { - generateScopedName: "[name]__[local]___[hash:base64:5]", - hashPrefix: "prefix", - }, - preprocessorOptions: { - less: { - javascriptEnabled: true, - }, - }, - }, -});