feat(theme): 🎨 add next-themes

.eslintrc.json

@@ -10,7 +10,7 @@
 
 // command yarn install
 
-// yarn add -D eslint eslint-plugin-react eslint-config-next eslint-config-standard eslint-plugin-tailwindcss eslint-plugin-n eslint-plugin-promise
+// yarn add -D eslint eslint-plugin-react eslint-config-next eslint-config-standard eslint-plugin-tailwindcss eslint-plugin-n eslint-plugin-promise @typescript-eslint/parser
 
 {
   "env": {
@@ -25,9 +25,16 @@
     "plugin:tailwindcss/recommended"
   ],
   "overrides": [],
+  "parser": "@typescript-eslint/parser",
   "parserOptions": {
     "ecmaVersion": "latest",
-    "sourceType": "module"
+    "sourceType": "module",
+    "project": "./tsconfig.json"
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
   },
   "plugins": ["react", "tailwindcss"],
   "rules": {

.vscode/settings.json

@@ -4,34 +4,21 @@
   "search.exclude": {
     "package-lock.json": true
   },
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact",
+  ],
   "editor.defaultFormatter": "dbaeumer.vscode-eslint",
   "editor.formatOnSave": true,
   "editor.codeActionsOnSave": {
     "source.addMissingImports": "explicit",
     "source.fixAll.eslint": "explicit"
   },
-  "workbench.colorCustomizations": {
-    "activityBar.activeBackground": "#090ed0",
-    "activityBar.background": "#090ed0",
-    "activityBar.foreground": "#e7e7e7",
-    "activityBar.inactiveForeground": "#e7e7e799",
-    "activityBarBadge.background": "#f40b10",
-    "activityBarBadge.foreground": "#e7e7e7",
-    "commandCenter.border": "#e7e7e799",
-    "sash.hoverBorder": "#090ed0",
-    "statusBar.background": "#070b9f",
-    "statusBar.foreground": "#e7e7e7",
-    "statusBarItem.hoverBackground": "#090ed0",
-    "statusBarItem.remoteBackground": "#070b9f",
-    "statusBarItem.remoteForeground": "#e7e7e7",
-    "titleBar.activeBackground": "#070b9f",
-    "titleBar.activeForeground": "#e7e7e7",
-    "titleBar.inactiveBackground": "#070b9f99",
-    "titleBar.inactiveForeground": "#e7e7e799"
-  },
-  "peacock.color": "#070b9f",
   "cSpell.words": [
+    "headlessui",
     "orbis",
     "Orbis"
-  ]
+  ],
 }

jsconfig.json

@@ -1,10 +0,0 @@
-{
-  "compilerOptions": {
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["./src/*"],
-      "vComponents/*": ["./node_modules/vComponents/dist/components/*"],
-      "via-ui/*": ["./node_modules/via-ui/dist/components/*"]
-    }
-  }
-}

package.json

@@ -33,6 +33,7 @@
     "js-cookie": "^3.0.5",
     "js-md5": "^0.8.3",
     "next": "14.0.4",
+    "next-themes": "^0.2.1",
     "node-forge": "^1.3.1",
     "pristinejs": "^1.1.0",
     "react": "^18",
@@ -45,14 +46,18 @@
     "vComponents": "git+https://2bdcc0300e0ed5ac01f9dcd51368f7ac74fdb85a@git.via-asesores.com/libraries/v-components.git"
   },
   "devDependencies": {
+    "@types/node": "20.11.10",
+    "@typescript-eslint/parser": "^6.20.0",
     "autoprefixer": "^10.0.1",
     "eslint": "^8.56.0",
-    "eslint-config-next": "^14.0.4",
+    "eslint-config-next": "^14.1.0",
     "eslint-config-standard": "^17.1.0",
+    "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-n": "^16.6.2",
+    "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^6.1.1",
     "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-tailwindcss": "^3.14.0",
+    "eslint-plugin-tailwindcss": "^3.14.1",
     "postcss": "^8",
     "tailwindcss": "^3.3.0",
     "typescript": "^5.3.3"

src/components/theme-provider.tsx

@@ -0,0 +1,7 @@
+import * as React from 'react'
+import { ThemeProvider as NextThemesProvider } from 'next-themes'
+import { type ThemeProviderProps } from 'next-themes/dist/types'
+
+export function ThemeProvider ({ children, ...props }: ThemeProviderProps) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
+}

src/layout/ResponsiveContainer.jsx

@@ -11,6 +11,7 @@ import useI18n from '@/hooks/useI18n'
 import SessionTimeout from '@/components/SessionTimeout'
 import UserOptionsMenu from '@/components/widgets/UserOptionsMenu'
 import { toast } from 'react-toastify'
+import { useTheme } from 'next-themes'
 
 export const LayoutContext = createContext()
 
@@ -23,13 +24,14 @@ const ResponsiveContainer = ({ children }) => {
   const loading = useLoading()
   const hasMounted = useHasMounted()
   const i18n = useI18n()
+  const { theme, setTheme } = useTheme()
 
   const [sidebarOpen, setSidebarOpen] = useState(true)
   const [menu, setMenu] = useState([])
   const [title, setTitle] = useStore(s => s.title, a => a.setTitle)
   const [userObj, setUserObj] = useState()
   const [token, setToken] = useState('')
-  const [theme, setTheme] = useState('light')
+  // const [theme, setTheme] = useState('light')
   const [constanteObj, setConstanteObj] = useState('')
   const [appVersion, setAppVersion] = useState('1.0.0')
 
@@ -64,9 +66,9 @@ const ResponsiveContainer = ({ children }) => {
     const env = await environment.getEnvUser()
     // console.log((new Date()).toString(),'setPreferences userObj', userObj)
     const sprInfoSesion = 'SPR_INFO_USUARIOS'
-    const response3 = await execute(sprInfoSesion, [env.token, opcion])
+    const response = await execute(sprInfoSesion, [env.token, opcion])
-    if (environment.validaResultadoDB(response3, i18n, toast, false) === true) {
+    if (environment.validaResultadoDB(response, i18n, toast, false) === true) {
-      // console.log('setPreferences', response3)
+      // console.log('setPreferences', response)
       if (opcion === 'en' || opcion === 'es') {
         env.user.i18n = opcion
         // setLanguage(opcion)
@@ -76,9 +78,9 @@ const ResponsiveContainer = ({ children }) => {
         setTheme(opcion)
       }
       environment.setEnvUser(env.user)
-      if (environment.validaResultadoDB(response3, i18n, toast, false) === true) {
+      if (environment.validaResultadoDB(response, i18n, toast, false) === true) {
-        if (response3 && response3[0]) {
+        if (response && response[0]) {
-          toast.success(response3[0].response, presets.toaster)
+          toast.success(response[0].response, presets.toaster)
         }
       }
     }
@@ -140,13 +142,6 @@ const ResponsiveContainer = ({ children }) => {
     }
   }
 
-  const getTheme = () => {
-    if (!theme || theme != null) {
-      return theme
-    }
-    return 'light'
-  }
-
   const containerWrapper = useMemo(() => ({
     userObj,
     setUserObj,
@@ -196,9 +191,10 @@ const ResponsiveContainer = ({ children }) => {
   return (
     <LayoutContext.Provider value={containerWrapper}>
 
-      <div className={`flex h-screen overflow-hidden text-theme-text-principal ${getTheme()}`}>
+      <div className={'flex h-screen overflow-hidden text-theme-text-principal'}>
         {/* Sidebar */}
         {userObj && userObj.nombre_usuario &&
+
           <Sidebar
             sidebarOpen={sidebarOpen}
             setSidebarOpen={setSidebarOpen}

src/pages/_app.jsx

@@ -1,4 +1,5 @@
 import { RouteProvider } from '@/hooks/useRoute'
+import { ThemeProvider } from '@/components/theme-provider'
 import ResponsiveContainer from '@/layout/ResponsiveContainer'
 import LoadingProvider from '@/plugins/LoadingContext'
 import I18nProvider from '@/plugins/i18nContext'
@@ -18,6 +19,12 @@ export default function App ({ Component, pageProps }) {
         <title>Orbis Template</title>
       </Head>
 
+      <ThemeProvider
+        attribute="class"
+        defaultTheme="system"
+        enableSystem
+        disableTransitionOnChange
+      >
         <I18nProvider locale={'es'} dict={''}>
           <LoadingProvider>
             <ToastContainer />
@@ -28,6 +35,7 @@ export default function App ({ Component, pageProps }) {
             </ResponsiveContainer>
           </LoadingProvider>
         </I18nProvider>
+      </ThemeProvider>
     </>
   )
 }

tsconfig.json

@@ -0,0 +1,44 @@
+{
+  "compilerOptions": {
+    "jsx": "preserve",
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "incremental": true,
+    "esModuleInterop": true,
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "target": "esnext",
+    "module": "esnext",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ],
+      "vComponents/*": [
+        "./node_modules/vComponents/dist/components/*"
+      ],
+      "via-ui/*": [
+        "./node_modules/via-ui/dist/components/*"
+      ]
+    },
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ]
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    "**/*.js",
+    "**/*.jsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}