From 303857b1fdd12c24777adfbcb5c19e1ded02038c Mon Sep 17 00:00:00 2001 From: Mario Arita Date: Mon, 29 Jan 2024 15:53:05 -0600 Subject: [PATCH] feat(theme): :art: add next-themes --- .eslintrc.json | 11 ++++++-- .vscode/settings.json | 31 ++++++--------------- jsconfig.json | 10 ------- package.json | 9 ++++-- src/components/theme-provider.tsx | 7 +++++ src/layout/ResponsiveContainer.jsx | 30 +++++++++----------- src/pages/_app.jsx | 28 ++++++++++++------- tsconfig.json | 44 ++++++++++++++++++++++++++++++ 8 files changed, 107 insertions(+), 63 deletions(-) delete mode 100644 jsconfig.json create mode 100644 src/components/theme-provider.tsx create mode 100644 tsconfig.json diff --git a/.eslintrc.json b/.eslintrc.json index 332ae12..229a5e3 100644 --- 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": { diff --git a/.vscode/settings.json b/.vscode/settings.json index be2c097..f677a92 100644 --- 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" - ] -} + ], +} \ No newline at end of file diff --git a/jsconfig.json b/jsconfig.json deleted file mode 100644 index 0405287..0000000 --- a/jsconfig.json +++ /dev/null @@ -1,10 +0,0 @@ -{ - "compilerOptions": { - "baseUrl": ".", - "paths": { - "@/*": ["./src/*"], - "vComponents/*": ["./node_modules/vComponents/dist/components/*"], - "via-ui/*": ["./node_modules/via-ui/dist/components/*"] - } - } -} diff --git a/package.json b/package.json index 1e39cc9..c577c68 100644 --- 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" diff --git a/src/components/theme-provider.tsx b/src/components/theme-provider.tsx new file mode 100644 index 0000000..c6d7b17 --- /dev/null +++ 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 {children} +} diff --git a/src/layout/ResponsiveContainer.jsx b/src/layout/ResponsiveContainer.jsx index 41085ff..729a639 100644 --- 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 ( -
+
{/* Sidebar */} - { userObj && userObj.nombre_usuario && + {userObj && userObj.nombre_usuario && + {
- { userObj && userObj.nombre_usuario && + {userObj && userObj.nombre_usuario && onTimeout()} onCancelTimeout={() => onCancelTimeout()} /> }
diff --git a/src/pages/_app.jsx b/src/pages/_app.jsx index fb75177..509c865 100644 --- 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 }) { Orbis Template - - - - - - - - - - + + + + + + + + + + + + ) } diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..057b904 --- /dev/null +++ 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" + ] +}