feature: add use env hook for managing env variables

[alamenai]

Description

This PR introduces a new custom hook useEnv, designed to manage environment variables within React applications. The hook provides functionalities for managing environment variables, including renaming, updating, removing, saving, and deleting variables.

Changes

• Added a new custom hook useEnv for managing environment variables.
• Implemented functionalities for renaming, updating, removing, saving, and deleting environment variables.
• Integrated environment configuration from rehook.config for handling default environment variables.
• Utilized React's useState and useEffect hooks for managing state and handling side effects.
• Integrated local storage for persisting environment variable changes within the browser environment.

Usage

import './App.css'
import { useEnv } from './hooks/use-env'
import { useState } from 'react'

function App() {
    // Initialize the useEnv hook
    const { variables, addVariable, updateVariable, saveVariable, removeVariable, deleteVariable } = useEnv()

    // State for input values
    const [newVariable, setNewVariable] = useState('')
    const [newValue, setNewValue] = useState('')

    // Function to handle adding a new variable
    const handleAddVariable = () => {
        if (newVariable.trim() !== '' && newValue.trim() !== '') {
            addVariable(newVariable, newValue)
            setNewVariable('')
            setNewValue('')
        }
    }

    // Function to handle updating a variable's value
    const handleUpdateVariable = (variable: string, newValue: string) => {
        updateVariable(variable, newValue)
        saveVariable(variable, newValue)
    }

    return (
        <div className="App">
            <h1>Environment Variables</h1>
            <div>
                {/* Input fields for adding new variables */}
                <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>
                {/* Display existing variables */}
                <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

Review Instructions

• Make sure the tests pass well.
• Try the example usage locally.
• Suggest ideas or updates for future implementation.

Revisions

01

• Migrate from Jest to Vitest. Please check the issue I faced here.
• Implement env action for access environment variables in Server Components.
• Added unit tests for use-env hook.