diff --git a/admin/package-lock.json b/admin/package-lock.json index 9a88d0d..f72f486 100644 --- a/admin/package-lock.json +++ b/admin/package-lock.json @@ -12,6 +12,7 @@ "@emotion/react": "^11.14.0", "@tailwindcss/vite": "^4.1.11", "@tanstack/react-query": "^5.85.5", + "jotai": "^2.15.0", "js-cookie": "^3.0.5", "lucide-react": "^0.539.0", "next-themes": "^0.4.6", @@ -4420,6 +4421,35 @@ "jiti": "lib/jiti-cli.mjs" } }, + "node_modules/jotai": { + "version": "2.15.0", + "resolved": "https://registry.npmjs.org/jotai/-/jotai-2.15.0.tgz", + "integrity": "sha512-nbp/6jN2Ftxgw0VwoVnOg0m5qYM1rVcfvij+MZx99Z5IK13eGve9FJoCwGv+17JvVthTjhSmNtT5e1coJnr6aw==", + "license": "MIT", + "engines": { + "node": ">=12.20.0" + }, + "peerDependencies": { + "@babel/core": ">=7.0.0", + "@babel/template": ">=7.0.0", + "@types/react": ">=17.0.0", + "react": ">=17.0.0" + }, + "peerDependenciesMeta": { + "@babel/core": { + "optional": true + }, + "@babel/template": { + "optional": true + }, + "@types/react": { + "optional": true + }, + "react": { + "optional": true + } + } + }, "node_modules/js-cookie": { "version": "3.0.5", "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz", @@ -5645,13 +5675,13 @@ } }, "node_modules/tinyglobby": { - "version": "0.2.14", - "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.14.tgz", - "integrity": "sha512-tX5e7OM1HnYr2+a2C/4V0htOcSQcoSTH9KgJnVvNm5zm/cyEWKJ7j7YutsH9CxMdtOkkLFy2AHrMci9IM8IPZQ==", + "version": "0.2.15", + "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz", + "integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==", "license": "MIT", "dependencies": { - "fdir": "^6.4.4", - "picomatch": "^4.0.2" + "fdir": "^6.5.0", + "picomatch": "^4.0.3" }, "engines": { "node": ">=12.0.0" @@ -5849,9 +5879,9 @@ } }, "node_modules/vite": { - "version": "7.1.3", - "resolved": "https://registry.npmjs.org/vite/-/vite-7.1.3.tgz", - "integrity": "sha512-OOUi5zjkDxYrKhTV3V7iKsoS37VUM7v40+HuwEmcrsf11Cdx9y3DIr2Px6liIcZFwt3XSRpQvFpL3WVy7ApkGw==", + "version": "7.1.11", + "resolved": "https://registry.npmjs.org/vite/-/vite-7.1.11.tgz", + "integrity": "sha512-uzcxnSDVjAopEUjljkWh8EIrg6tlzrjFUfMcR1EVsRDGwf/ccef0qQPRyOrROwhrTDaApueq+ja+KLPlzR/zdg==", "license": "MIT", "dependencies": { "esbuild": "^0.25.0", @@ -5859,7 +5889,7 @@ "picomatch": "^4.0.3", "postcss": "^8.5.6", "rollup": "^4.43.0", - "tinyglobby": "^0.2.14" + "tinyglobby": "^0.2.15" }, "bin": { "vite": "bin/vite.js" diff --git a/admin/package.json b/admin/package.json index 203bb59..b8bd794 100644 --- a/admin/package.json +++ b/admin/package.json @@ -14,6 +14,7 @@ "@emotion/react": "^11.14.0", "@tailwindcss/vite": "^4.1.11", "@tanstack/react-query": "^5.85.5", + "jotai": "^2.15.0", "js-cookie": "^3.0.5", "lucide-react": "^0.539.0", "next-themes": "^0.4.6", diff --git a/admin/src/States/Atoms.tsx b/admin/src/States/Atoms.tsx new file mode 100644 index 0000000..d1214eb --- /dev/null +++ b/admin/src/States/Atoms.tsx @@ -0,0 +1,3 @@ +import { atom } from "jotai"; + +export const testAtom = atom(0); diff --git a/admin/src/States/README.md b/admin/src/States/README.md new file mode 100644 index 0000000..8259b83 --- /dev/null +++ b/admin/src/States/README.md @@ -0,0 +1,36 @@ +# How to use Atoms +Atoms are the fundamental building blocks of state management in this system. They represent individual pieces of state that can be shared and manipulated across different components. + +You can also name it global state. + +## Creating an Atom +to create an atom you have to declare an atom like this: + +```ts +import { atom } from 'jotai'; + +export const NAME_OF_YOUR_ATOM = atom(initial_value); +``` + +In this project we declare all atoms in the `States/Atoms.tsx`file. Which you can find above this README file. + +## Using an Atom +To use an atom in your component, you can use the `useAtom` hook provided by Jotai. Here's an example of how to use an atom in a React component: + +```tsx +import { useAtom } from 'jotai'; +import { NAME_OF_YOUR_ATOM } from '@/States/Atoms'; + +const MyComponent = () => { + const [value, setValue] = useAtom(NAME_OF_YOUR_ATOM); + + return ( +
+

Current value: {value}

+ +
+ ); +}; +``` + +As you can see, you can use `useAtom` like `useState` but the state is global. In this example `value` is the current state of the atom, and `setValue` is a function to update the state, which is also known as the setter function. diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 46c90c1..9a8a81c 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -10,6 +10,7 @@ "dependencies": { "@tailwindcss/vite": "^4.1.11", "@tanstack/react-query": "^5.85.5", + "jotai": "^2.15.0", "js-cookie": "^3.0.5", "lucide-react": "^0.539.0", "primeicons": "^7.0.0", @@ -3164,6 +3165,35 @@ "jiti": "lib/jiti-cli.mjs" } }, + "node_modules/jotai": { + "version": "2.15.0", + "resolved": "https://registry.npmjs.org/jotai/-/jotai-2.15.0.tgz", + "integrity": "sha512-nbp/6jN2Ftxgw0VwoVnOg0m5qYM1rVcfvij+MZx99Z5IK13eGve9FJoCwGv+17JvVthTjhSmNtT5e1coJnr6aw==", + "license": "MIT", + "engines": { + "node": ">=12.20.0" + }, + "peerDependencies": { + "@babel/core": ">=7.0.0", + "@babel/template": ">=7.0.0", + "@types/react": ">=17.0.0", + "react": ">=17.0.0" + }, + "peerDependenciesMeta": { + "@babel/core": { + "optional": true + }, + "@babel/template": { + "optional": true + }, + "@types/react": { + "optional": true + }, + "react": { + "optional": true + } + } + }, "node_modules/js-cookie": { "version": "3.0.5", "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz", diff --git a/frontend/package.json b/frontend/package.json index b2b6313..6099659 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -12,6 +12,7 @@ "dependencies": { "@tailwindcss/vite": "^4.1.11", "@tanstack/react-query": "^5.85.5", + "jotai": "^2.15.0", "js-cookie": "^3.0.5", "lucide-react": "^0.539.0", "primeicons": "^7.0.0",