feat(theme): 🎨 add next-themes

2024-01-29 15:53:05 -06:00 · 2024-01-29 15:53:05 -06:00 · 303857b1fd
commit 303857b1fd
parent 5b46cfb5ae
8 changed files with 107 additions and 63 deletions
--- a/.eslintrc.json
+++ b/.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": {
--- a/.vscode/settings.json
+++ b/.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"
-  ]
-}
+  ],
+}
--- a/jsconfig.json
+++ b/jsconfig.json
@ -1,10 +0,0 @@
-{
-  "compilerOptions": {
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["./src/*"],
-      "vComponents/*": ["./node_modules/vComponents/dist/components/*"],
-      "via-ui/*": ["./node_modules/via-ui/dist/components/*"]
-    }
-  }
-}
--- a/package.json
+++ b/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"
--- a/src/components/theme-provider.tsx
+++ b/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>
+}
--- a/src/layout/ResponsiveContainer.jsx
+++ b/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])
-    if (environment.validaResultadoDB(response3, i18n, toast, false) === true) {
-      // console.log('setPreferences', response3)
+    const response = await execute(sprInfoSesion, [env.token, opcion])
+    if (environment.validaResultadoDB(response, i18n, toast, false) === true) {
+      // 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 (response3 && response3[0]) {
-          toast.success(response3[0].response, presets.toaster)
+      if (environment.validaResultadoDB(response, i18n, toast, false) === true) {
+        if (response && response[0]) {
+          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 &&
+        {userObj && userObj.nombre_usuario &&
+
          <Sidebar
            sidebarOpen={sidebarOpen}
            setSidebarOpen={setSidebarOpen}
@ -248,7 +244,7 @@ const ResponsiveContainer = ({ children }) => {
            </div>
          </main>

-          { userObj && userObj.nombre_usuario &&
+          {userObj && userObj.nombre_usuario &&
            <SessionTimeout i18n={i18n} user={userObj} onTimeout={() => onTimeout()} onCancelTimeout={() => onCancelTimeout()} />
          }
        </div>
--- a/src/pages/_app.jsx
+++ b/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,16 +19,23 @@ export default function App ({ Component, pageProps }) {
        <title>Orbis Template</title>
      </Head>

-      <I18nProvider locale={'es'} dict={''}>
-        <LoadingProvider>
-          <ToastContainer />
-          <ResponsiveContainer>
-            <RouteProvider>
-              <Component {...pageProps} />
-            </RouteProvider>
-          </ResponsiveContainer>
-        </LoadingProvider>
-      </I18nProvider>
+      <ThemeProvider
+        attribute="class"
+        defaultTheme="system"
+        enableSystem
+        disableTransitionOnChange
+      >
+        <I18nProvider locale={'es'} dict={''}>
+          <LoadingProvider>
+            <ToastContainer />
+            <ResponsiveContainer>
+              <RouteProvider>
+                <Component {...pageProps} />
+              </RouteProvider>
+            </ResponsiveContainer>
+          </LoadingProvider>
+        </I18nProvider>
+      </ThemeProvider>
    </>
  )
 }
--- a/tsconfig.json
+++ b/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"
+  ]
+}