doc: write documentation for useEnv

pages/hooks/_meta.json

@@ -1,12 +1,13 @@
 {
   "use-abort-controller": "useAbortController",
-  "use-battery":"useBattery",
+  "use-battery": "useBattery",
+  "use-env": "useEnv",
   "use-fetch": "useFetch",
   "use-history": "useHistory",
-  "use-loading":"useLoading",
+  "use-loading": "useLoading",
   "use-local-storage": "useLocalStorage",
   "use-persistent-state": "usePersistentState",
   "use-query-params": "useQueryParams",
   "use-timeout": "useTimeout",
-  "use-url":"useUrl"
+  "use-url": "useUrl"
 }

pages/hooks/use-env.mdx

@@ -0,0 +1,187 @@
+import { Callout } from 'nextra/components'
+
+# useEnv
+
+<h3 className="mt-4 text-xl font-normal text-gray-400">A custom hook that manages environment variables.</h3>
+
+
+
+### Add hook
+
+Create a file `use-env.ts` and copy & paste the code from [useEnv](/hooks/use-env#hook).
+
+
+### Usage
+
+```tsx {3,6,13,14,21,22} copy
+
+import { useState } from 'react'
+import { useEnv } from './hooks/use-env'
+
+function App() {
+    const { variables, addVariable, updateVariable, saveVariable, removeVariable, deleteVariable } = useEnv()
+
+    const [newVariable, setNewVariable] = useState('')
+    const [newValue, setNewValue] = useState('')
+
+    const handleAddVariable = () => {
+        if (newVariable.trim() !== '' && newValue.trim() !== '') {
+            addVariable(newVariable, newValue)
+            saveVariable(newVariable, newValue)
+            setNewVariable('')
+            setNewValue('')
+        }
+    }
+
+    const handleUpdateVariable = (variable: string, newValue: string) => {
+        updateVariable(variable, newValue)
+        saveVariable(variable, newValue)
+    }
+
+    return (
+        <div className="App">
+            <h1>Environment Variables</h1>
+            <div>
+                <input
+                    type="text"
+                    placeholder="Variable"
+                    value={newVariable}
+                    onChange={e => setNewVariable(e.target.value)}
+                />
+                <input type="text" placeholder="Value" value={newValue} onChange={e => setNewValue(e.target.value)} />
+                <button onClick={handleAddVariable}>Add Variable</button>
+            </div>
+            <div>
+                <h2>Existing Variables:</h2>
+                <ul>
+                    {Object.entries(variables).map(([variable, value]) => (
+                        <li key={variable}>
+                            {variable}: {value}{' '}
+                            <button onClick={() => handleUpdateVariable(variable, prompt('Enter new value:'))}>
+                                Update
+                            </button>
+                            <button onClick={() => removeVariable(variable)}>Remove</button>
+                            <button onClick={() => deleteVariable(variable)}>Delete</button>
+                        </li>
+                    ))}
+                </ul>
+            </div>
+        </div>
+    )
+}
+
+export default App
+
+
+
+```
+
+
+### Hook
+
+
+<Callout type="warning">Make sure to have [configuration](/get-started/configuration) file in your project .</Callout>
+
+```ts copy
+
+import { NEXT_DEFAULT_ENV_VARS, VITE_DEFAULT_ENV_VARS, rehookConfig } from '../../rehook.config'
+import { getEnv } from '../actions/env'
+import { useEffect, useState } from 'react'
+
+const { ignoreDefaultEnv, framework } = rehookConfig
+
+const isFrameworkVite = framework === 'VITE' // Otherwise it is NEXTJS
+
+export const useEnv = () => {
+
+    const envVars = isFrameworkVite ? import.meta.env : process.env
+
+    const [variables, setVariables] = useState(envVars)
+
+    const ignoreDefaultVariables = () => {
+        let ignoredVariables: { [key: string]: string }
+
+        if (ignoreDefaultEnv) {
+            ignoredVariables = {}
+            for (const key in variables) {
+                if (isFrameworkVite ? !VITE_DEFAULT_ENV_VARS.includes(key) : !NEXT_DEFAULT_ENV_VARS.includes(key)) {
+                    ignoredVariables[key] = variables[key]
+                }
+            }
+            setVariables(ignoredVariables)
+        }
+    }
+
+    const addVariable = (variable: string, value: string) => {
+        setVariables(prevVars => ({ ...prevVars, [variable]: value }))
+    }
+
+    const renameVariable = (oldVar: string, newVar: string) => {
+        if (Object.prototype.hasOwnProperty.call(variables, oldVar)) {
+            const updatedEnv = { ...variables }
+            updatedEnv[newVar] = updatedEnv[oldVar]
+            delete updatedEnv[oldVar]
+            setVariables(updatedEnv)
+        }
+    }
+
+    const updateVariable = (currentVarVar: string, newValue: string) => {
+        if (Object.prototype.hasOwnProperty.call(variables, currentVarVar)) {
+            setVariables(prevEnv => ({
+                ...prevEnv,
+                [currentVarVar]: newValue,
+            }))
+        }
+    }
+
+    const removeVariable = (currentVar: string) => {
+        if (Object.prototype.hasOwnProperty.call(variables, currentVar)) {
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            const { [currentVar]: _, ...updatedVariables } = variables
+            setVariables(updatedVariables)
+        }
+    }
+
+    const saveVariable = (variable: string, value: string) => {
+        localStorage.setItem(variable, value)
+    }
+
+    const deleteVariable = (variable: string) => {
+        if (localStorage.getItem(variable)) {
+            localStorage.removeItem(variable)
+        }
+    }
+
+    useEffect(() => {
+        ignoreDefaultVariables()
+    }, [])
+
+    return { variables, addVariable, renameVariable, updateVariable, saveVariable, removeVariable, deleteVariable }
+}
+
+
+```
+
+## API
+
+[`useEnv(): { variables: { [key: string]: string }, addVariable: (variable: string, value: string) => void, renameVariable: (oldVar: string, newVar: string) => void, updateVariable: (currentVar: string, newValue: string) => void, removeVariable: (currentVar: string) => void, saveVariable: (variable: string, value: string) => void, deleteVariable: (variable: string) => void }`]
+
+A custom hook for managing environment variables.
+
+ <h1 className='text-xl font-medium mt-6'>Parameters</h1>
+
+This hook does not take any parameters.
+
+ <h1 className='text-xl font-medium mt-6'>Returns</h1>
+
+An object containing the following properties:
+
+| Name             | Type                                                | Description                                                  |
+| ---------------- | --------------------------------------------------- | ------------------------------------------------------------ |
+| `variables`      | `{ [key: string]: string }`                         | An object containing the current environment variables.      |
+| `addVariable`    | `(variable: string, value: string) => void`         | A function to add a new environment variable.                |
+| `renameVariable` | `(oldVar: string, newVar: string) => void`          | A function to rename an existing environment variable.       |
+| `updateVariable` | `(currentVar: string, newValue: string) => void`    | A function to update the value of an existing environment variable. |
+| `removeVariable` | `(currentVar: string) => void`                      | A function to remove an existing environment variable.       |
+| `saveVariable`   | `(variable: string, value: string) => void`         | A function to save an environment variable to local storage. |
+| `deleteVariable` | `(variable: string) => void`                        | A function to delete an environment variable from local storage. |

theme.config.jsx

@@ -56,7 +56,10 @@ const config = {
       return (
         <div className="flex items-center justify-between relative w-full">
           <div>{title}</div>
-          {(title === "useLoading" || title === "useBattery" || title === "useUrl"  ) && (
+          {(title === "useLoading" ||
+            title === "useBattery" ||
+            title === "useUrl" ||
+            title === "useEnv") && (
             <Badge className=" absolute -right-[0.5em] bg-transparent border-lime-400 text-lime-500 px-[0.5em] hover:bg-transparent">
               New
             </Badge>