Environment Generator Script (#3)

* chore: added switch env script

* fix: fixed script config in packages.json

* fix: fix script and fix comments

* chore: added npmrc and fix package chalk

* chore: configure eslint settings

* chore: format code with prettier

---------

Co-authored-by: Muhammaddiyor Tohirov <mtohirov60@gmail.com>

Author: warnigo

.npmrc

@@ -0,0 +1,3 @@
+// Allows installing dependencies with version ranges (e.g., ^1.0.0)
+// instead of exact versions, enabling minor and patch updates.
+save-exact=false

.prettierrc

@@ -16,6 +16,5 @@
   "arrowParens": "avoid",
   "endOfLine": "crlf",
 
-  "parser": "typescript",
   "plugins": ["prettier-plugin-tailwindcss"]
 }

eslint.config.mjs

@@ -1,47 +1,46 @@
-import { fixupConfigRules, fixupPluginRules } from '@eslint/compat';
-import { FlatCompat } from '@eslint/eslintrc';
-import js from '@eslint/js';
-import globals from 'globals';
-import path from 'node:path';
-import { fileURLToPath } from 'node:url';
+import { fixupConfigRules, fixupPluginRules } from '@eslint/compat'
+import { FlatCompat } from '@eslint/eslintrc'
+import js from '@eslint/js'
+import globals from 'globals'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
 
 // Config/Plugins
-import typescriptEslint from '@typescript-eslint/eslint-plugin';
-import tsParser from '@typescript-eslint/parser';
-import react from 'eslint-plugin-react';
-import tailwindcss from 'eslint-plugin-tailwindcss';
+import typescriptEslint from '@typescript-eslint/eslint-plugin'
+import tsParser from '@typescript-eslint/parser'
+import reactHooks from 'eslint-plugin-react-hooks'
+import tailwindcss from 'eslint-plugin-tailwindcss'
 
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
 const compat = new FlatCompat({
   baseDirectory: __dirname,
   recommendedConfig: js.configs.recommended,
   allConfig: js.configs.all,
-});
+})
 
 const twOptions = {
   callees: ['clsx', 'cva', 'cn'],
   classRegex: '^class(Name)?$',
-};
+}
 
-export default [
+const config = [
   ...fixupConfigRules(
     compat.extends(
       'eslint:recommended',
-      'plugin:@typescript-eslint/recommended',
-      'plugin:react/recommended',
-      'plugin:react-hooks/recommended',
+      'next',
+      'next/typescript',
+      'next/core-web-vitals',
       'plugin:jsx-a11y/recommended',
-      'plugin:@next/next/recommended',
       'plugin:tailwindcss/recommended',
       'prettier',
     ),
   ),
   {
     plugins: {
-      react: fixupPluginRules(react),
+      'react-hooks': fixupPluginRules(reactHooks),
       '@typescript-eslint': fixupPluginRules(typescriptEslint),
-      tailwindcss: fixupPluginRules(tailwindcss),
+      'tailwindcss': fixupPluginRules(tailwindcss),
     },
 
     languageOptions: {
@@ -77,6 +76,8 @@ export default [
         {
           argsIgnorePattern: '^_',
           varsIgnorePattern: '^_',
+          caughtErrorsIgnorePattern: '^_',
+          destructuredArrayIgnorePattern: '^_',
         },
       ],
 
@@ -89,5 +90,6 @@ export default [
       'tailwindcss/no-unnecessary-arbitrary-value': ['error', twOptions],
     },
   },
-];
+]
 
+export default config

package.json

@@ -2,12 +2,15 @@
   "name": "fin",
   "version": "1.0.0",
   "private": true,
+  "type": "module",
   "description": "helps users track their expenses, manage budgets and receive financial insights directly via Telegram.",
   "scripts": {
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "prepare": "npm run generate:env",
+    "generate:env": "node scripts/generate_env.mjs"
   },
   "keywords": [
     "finance",
@@ -37,8 +40,10 @@
     "@typescript-eslint/eslint-plugin": "^8.10.0",
     "@typescript-eslint/parser": "^8.10.0",
     "autoprefixer": "^10.4.20",
+    "chalk": "^5.3.0",
     "clsx": "^2.1.1",
     "eslint": "^9.12.0",
+    "eslint-config-next": "^15.0.1",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-jsx-a11y": "^6.10.0",
     "eslint-plugin-react": "^7.37.1",

pnpm-lock.yaml

@@ -0,0 +1,125 @@
+/**
+ * @fileoverview Environment File Generator
+ *
+ * This script generates environment configuration files for development and production
+ * environments based on a template (.env.example). It performs the following tasks:
+ *
+ * 1. Copies the .env.example file to create .env.development and .env.production.
+ * 2. Updates the content of these files with environment-specific configurations.
+ * 3. Ensures proper file permissions and handles potential errors.
+ *
+ * Usage: Run this script from the project root directory.
+ *
+ * # Types:
+ * ---
+ * Configuration for environment files:
+ * @typedef {Object} EnvFileConfig
+ * @property {string} path - The file path.
+ * @property {string} content - The file content.
+ */
+
+import fs from 'node:fs/promises'
+import path from 'node:path'
+
+import chalk from 'chalk'
+
+const ROOT = process.cwd()
+const ENV_SOURCE = path.resolve(ROOT, '.env.example')
+
+/** @type {Record<string, EnvFileConfig>} */
+const ENV_FILES = {
+  development: {
+    path: path.join(ROOT, '.env.development'),
+    content: `
+# Set the Node.js environment (production: for live deployment, development: for local development)
+NODE_ENV=development
+
+# Enable or disable bundle analysis (true/false)
+ANALYZE=false
+
+# Open bundle analyzer automatically after build (true/false)
+OPEN_ANALYZER=false
+
+# Set the mode for bundle analyzer output (static: HTML file, json: JSON file)
+ANALYZER_MODE=static
+    `.trim(),
+  },
+  production: {
+    path: path.join(ROOT, '.env.production'),
+    content: `
+# Set the Node.js environment (production: for live deployment, development: for local development)
+NODE_ENV=production
+
+# Enable or disable bundle analysis (true/false)
+ANALYZE=false
+
+# Open bundle analyzer automatically after build (true/false)
+OPEN_ANALYZER=false
+
+# Set the mode for bundle analyzer output (static: HTML file, json: JSON file)
+ANALYZER_MODE=static
+    `.trim(),
+  },
+}
+
+/**
+ * Copies the source file to the destination and updates its content.
+ *
+ * @param {string} destination - The path of the destination file.
+ * @param {string} content - The content to write to the file.
+ * @returns {Promise<void>}
+ */
+async function copyFile(destination, content) {
+  const prompt = chalk.bgBlue('[COPY]')
+
+  try {
+    await fs.copyFile(ENV_SOURCE, destination)
+    console.info(prompt, chalk.blue(`${destination} created`))
+
+    await fs.writeFile(destination, content)
+    console.info(prompt, chalk.blue(`${destination} updated`))
+  } catch (error) {
+    console.error(chalk.red(`Error copying file to ${destination}`), error)
+  }
+}
+
+/**
+ * Checks if the source file is accessible for reading and writing.
+ *
+ * @param {string} source - The path of the source file.
+ * @throws {Error} If the file is not accessible.
+ */
+async function checkSourceFileAccess(source) {
+  try {
+    await fs.access(source, fs.constants.R_OK)
+  } catch (_error) {
+    throw new Error("You don't have permission to read the .env.example file")
+  }
+}
+
+/**
+ * Main function to generate environment files.
+ */
+async function main() {
+  try {
+    await checkSourceFileAccess(ENV_SOURCE)
+
+    const promises = Object.values(ENV_FILES).map(({ path, content }) => {
+      return copyFile(path, content)
+    })
+    await Promise.all(promises)
+
+    console.info(
+      chalk.green('All environment files have been generated successfully.'),
+    )
+  } catch (error) {
+    console.error(chalk.red('An error occurred:'), error.message)
+    console.warn(chalk.yellow('Please check your file permissions.'))
+    process.exit(-1)
+  }
+}
+
+main().catch(error => {
+  console.error(chalk.red('An unexpected error occurred:'), error)
+  process.exit(-1)
+})

scripts/generate_env.mjs

@@ -1,10 +1,10 @@
-import type { ClassValue } from 'clsx';
+import type { ClassValue } from 'clsx'
 
-import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
+import clsx from 'clsx'
+import { twMerge } from 'tailwind-merge'
 
-export function cn(...classNames: ClassValue[]) {
-  return twMerge(clsx(classNames));
+export function cn(...classNames: ClassValue[]): string {
+  return twMerge(clsx(classNames))
 }
 
-export default cn;
+export default cn

src/utils/cn.ts

@@ -1 +1 @@
-export { cn } from '#utils/cn';
+export { cn } from '#utils/cn'

src/utils/index.ts

@@ -1,15 +1,16 @@
-import type { Config } from 'tailwindcss';
+import type { Config } from 'tailwindcss'
 
-import colors from 'tailwindcss/colors';
-import { fontFamily } from 'tailwindcss/defaultTheme';
+import colors from 'tailwindcss/colors'
+import { fontFamily } from 'tailwindcss/defaultTheme'
 
-export default {
+const config: Config = {
   content: [
     'src/app/**/*.{ts,tsx}',
     'src/components/**/*.{ts,tsx}',
     'src/layouts/**/*.{ts,tsx}',
     'src/widgets/**/*.{ts,tsx}',
   ],
+
   theme: {
     colors: {
       inherit: colors.inherit,
@@ -32,5 +33,8 @@ export default {
       },
     },
   },
+
   plugins: [],
-} satisfies Config;
+}
+
+export default config