Replace state management

codegen-util.js

@@ -16,7 +16,7 @@ const snakeCaseCap = (string) => {
 /********************
  * User Input Inquirer
  ********************/
-const readline = require('readline');
+const readline = require('node:readline');
 /**
  * @param {string} query
  * @returns {Promise<string>}

codegen.js

@@ -1,5 +1,5 @@
-const fs = require('fs');
-const path = require('path');
+const fs = require('node:fs');
+const path = require('node:path');
 const ejs = require('ejs');
 const { getArgs, askQuestion } = require('./codegen-util');
 

components/_theme.scss

@@ -1,31 +1,43 @@
-$screen-1: 320px;
-$screen-2: 800px; //SVGA
-$screen-3: 1280px; //HD +FHD/QHD
-$screen-4: 2048px; //2K +4K
+$screen-1: 320px; // mobile-portrait
+$screen-2: 480px; // mobile-landscape
+$screen-3: 768px; // tablet-portrait
+$screen-4: 1024px; // pc & tablet-landscape
+$screen-5: 2048px; // pc-wide
 
 // Media queries
+// Wearable devices
 @mixin mobile-xs {
-  @media only screen and (max-width: #{$screen-1}) {
+  @media only screen and (width < $screen-1) {
     @content;
   }
 }
 
-// "Mobile screen" is the base of css stylesheet
+// "Mobile portrait" is default
+// $screen-1 <= width < $screen-2
 
+// Mobile-landscape
+@mixin mobile-wide {
+  @media only screen and ($screen-2 <= width) {
+    @content;
+  }
+}
+
+// Tablet-portrait
 @mixin tablet {
-  @media only screen and (min-width: #{$screen-2}) {
+  @media only screen and ($screen-3 <= width) {
     @content;
   }
 }
 
+// PC & Tablet-landscape
 @mixin pc {
-  @media only screen and (min-width: #{$screen-3}) {
+  @media only screen and ($screen-4 <= width) {
     @content;
   }
 }
 
-@mixin pc-xl {
-  @media only screen and (min-width: #{$screen-4}) {
+@mixin pc-wide {
+  @media only screen and ($screen-5 <= width) {
     @content;
   }
 }

components/errors/errorsStates.ts

@@ -1,3 +1,3 @@
-import { atom } from 'recoil';
+import { atom } from 'jotai';
 
-export const code = atom({ key: 'error-code', default: 500 });
+export const code = atom(500);

components/errors/errorsViewImage.tsx

@@ -1,13 +1,13 @@
+import { useAtomValue } from 'jotai';
 import Image from 'next/image';
 import Link from 'next/link';
-import { useRecoilValue } from 'recoil';
 import imageSrc404 from '../../public/assets/images/404_broken_robot.png';
 import imageSrc500 from '../../public/assets/images/500_faulty_dog.png';
 import styles from './errors.module.scss';
 import { code } from './errorsStates';
 
 const View = () => {
-  const errorCode = useRecoilValue(code);
+  const errorCode = useAtomValue(code);
 
   return (
     <div className={styles.errorImage}>

components/example/examplePresenter.tsx

@@ -1,11 +1,11 @@
 import { placeholderUrl } from '../../controllers/apiURLs';
-import { staticQuery } from '../../controllers/net/staticQuery';
+import { useStaticQuery } from '../../controllers/net/staticQuery';
 import styles from './example.module.scss';
 import { ExamplePost } from './exampleType';
 import Posts from './exampleViewPosts';
 
 const Presenter = () => {
-  const query = staticQuery<ExamplePost[]>(placeholderUrl);
+  const query = useStaticQuery<ExamplePost[]>(placeholderUrl);
 
   let contents;
   switch (query.status) {

components/meta/gtm.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
 // @ts-nocheck
 import { useEffect } from 'react';
 

controllers/net/staticQuery.ts

@@ -1,6 +1,6 @@
 import { useQuery, UseQueryResult } from '@tanstack/react-query';
 
-export const staticQuery = <T = unknown>(url: string) => {
+export const useStaticQuery = <T = unknown>(url: string) => {
   return useQuery<T, Error, T, string[]>({
     queryKey: ['static', url],
     queryFn: async ({ queryKey }) => {

eslint.config.mjs

@@ -0,0 +1,134 @@
+import js from '@eslint/js';
+import nextPlugin from '@next/eslint-plugin-next';
+import stylisticPlugin from '@stylistic/eslint-plugin';
+import ts from '@typescript-eslint/eslint-plugin';
+import tsParser from '@typescript-eslint/parser';
+import reactPlugin from 'eslint-plugin-react';
+import hooksPlugin from 'eslint-plugin-react-hooks';
+
+export default [
+  {
+    name: 'formatLint',
+    plugins: {
+      '@stylistic': stylisticPlugin,
+    },
+    rules: {
+      '@stylistic/semi': 'warn',
+      '@stylistic/no-extra-semi': 'error',
+      '@stylistic/no-mixed-spaces-and-tabs': 'warn',
+    },
+  },
+  {
+    name: 'jsLint',
+    files: ['**/*.js', '**/*.mjs', '**/*.jsx'],
+    rules: {
+      ...js.configs.recommended.rules,
+      eqeqeq: 'warn',
+    },
+  },
+  {
+    name: 'tsLint',
+    files: ['**/*.ts', '**/*.tsx'],
+    languageOptions: {
+      parser: tsParser,
+      parserOptions: {
+        ecmaFeatures: { modules: true },
+        ecmaVersion: 'latest',
+        project: './tsconfig.json',
+      },
+    },
+    plugins: {
+      '@typescript-eslint': ts,
+    },
+    rules: {
+      ...ts.configs['eslint-recommended'].rules,
+      ...ts.configs.recommended.rules,
+      '@typescript-eslint/no-require-imports': 'off',
+      '@typescript-eslint/no-explicit-any': 'off',
+      '@typescript-eslint/no-unused-vars': [
+        'error',
+        {
+          argsIgnorePattern: '^_',
+          varsIgnorePattern: '^_',
+          caughtErrorsIgnorePattern: '^_',
+        },
+      ],
+    },
+  },
+  {
+    name: 'nextLint',
+    plugins: {
+      '@next/next': nextPlugin,
+    },
+    rules: {
+      ...nextPlugin.configs.recommended.rules,
+      ...nextPlugin.configs['core-web-vitals'].rules,
+    },
+  },
+  {
+    name: 'reactLint',
+    plugins: {
+      react: reactPlugin,
+    },
+    rules: {
+      ...reactPlugin.configs['jsx-runtime'].rules,
+    },
+    settings: {
+      react: {
+        version: 'detect', // You can add this if you get a warning about the React version when you lint
+      },
+    },
+  },
+  {
+    name: 'reactHookLint',
+    plugins: {
+      'react-hooks': hooksPlugin,
+    },
+    rules: hooksPlugin.configs.recommended.rules,
+  },
+  {
+    name: 'ignores',
+    ignores: [
+      // runtime data
+      'pids',
+      '*.pid',
+      '*.seed',
+
+      // dev-tools
+      '*.js',
+      '*.mjs',
+      '*.ts',
+
+      // testing
+      'coverage/',
+
+      // keys
+      '*.pem',
+
+      // production
+      'build/',
+      'release/',
+      'dist/',
+      'dll/',
+      '.eslintcache',
+      '.next/*',
+
+      // debug
+      '.idea',
+      'npm-debug.log*',
+      'yarn-debug.log*',
+      'yarn-error.log*',
+
+      // logs
+      'logs/',
+      '*.log',
+
+      // misc
+      '.DS_Store',
+      '.env*',
+      '*.env',
+      '.vscode/',
+      'placeholder_*',
+    ],
+  },
+];

next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.