From 4fe7a7399526a6cd3dd9497b14a322cf9fd1e9c2 Mon Sep 17 00:00:00 2001 From: VladMihalache Date: Tue, 14 Jan 2025 00:40:39 +0200 Subject: [PATCH] 3.0.0 --- CHANGELOG.md | 24 +++- README.md | 9 +- next.config.js | 1 - package.json | 10 +- src/app/AppWrappers.tsx | 7 +- src/app/admin/layout.tsx | 2 +- src/components/scrollbar/Scrollbar.tsx | 56 +++++----- src/components/sidebar/Sidebar.tsx | 17 ++- src/variables/charts.ts | 148 ++++++++++++------------- 9 files changed, 142 insertions(+), 132 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 4e9667a..89b7492 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,12 @@ +# Changelog + +## [3.0.0] 2025-14-01 + +### Upgraded to React 19 ⚡️ + +### Upgraded to Next.js 15 ⚡️ + +- `` component adapted to SSR ## [2.2.1] 2024-07-19 @@ -12,20 +21,25 @@ ### Bug fix - Build error due to Types - Updated types -- Updated charts -## [2.0.0] 2023-09-13 +- Updated charts + +## [2.0.0] 2023-09-13 ### Big update - NextJS 13 Update -- Layouts update +- Layouts update - Updated routing - Updated image component - Updated link component ## [1.0.1] 2022-03-22 -### Bug Fixing + +### Bug Fixing + Auth layout fixed + ## [1.0.0] 2022-10-17 ### Original Release -- Added Typescript & NextJS \ No newline at end of file + +- Added Typescript & NextJS diff --git a/README.md b/README.md index 3f94be5..eac6570 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # [Horizon UI NextJS ⚡️](https://horizon-ui.com/horizon-ui-chakra-nextjs) [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social&logo=twitter)](https://twitter.com/intent/tweet?url=https://horizon-ui.com/&text=Check%20Horizon%20UI,%20the%20trendiest%20open-source%20admin%20template%20for%20Chakra%20UI%20&%20React!) -![version](https://img.shields.io/badge/version-2.2.1-blue.svg) +![version](https://img.shields.io/badge/version-3.0.0-blue.svg) ![license](https://img.shields.io/badge/license-MIT-blue.svg) [![GitHub issues open](https://img.shields.io/github/issues/horizon-ui/horizon-ui-chakra-nextjs.svg?maxAge=2592000)](https://github.com/horizon-ui/horizon-ui-chakra-nextjs/issues?q=is%3Aopen+is%3Aissue) @@ -10,7 +10,6 @@

 

- Get started and build your dream web app with Horizon UI NextJS, the most trendiest & innovative Open Source Admin Template for Chakra UI, React & NextJS! --- @@ -29,10 +28,10 @@ Authentication Pages, Profile and so on. Just choose between a Basic Design or a cover and you are good to go! ### 🎉 [NEW] Horizon UI Components + All the main components from both versions, this will help you to see and interact with all & the latest added components of Horizon (also, new components are on the way, stay tuned)! ⚡️ See all components - ### Documentation Each element is well presented in a very complex documentation. You can read @@ -72,8 +71,8 @@ If you want to get inspiration or just show something directly to your clients, ### Versions -| Free Version | PRO Version | -| ------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------- | +| Free Version | PRO Version | +| ---------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | | [![Horizon UI NextJS](https://i.ibb.co/mtLkcYL/horizon-ui-nextjs-free.png)](https://www.horizon-ui.com/?ref=readme-horizon-nextjs) | [![Horizon UI NextJS PRO](https://i.ibb.co/sPSYxGv/horizon-2-0-pro-presentation-image.png)](https://www.horizon-ui.com/pro?ref=readme-horizon-nextjs) | ### Figma Version diff --git a/next.config.js b/next.config.js index b68b188..d9bb31a 100644 --- a/next.config.js +++ b/next.config.js @@ -1,7 +1,6 @@ /** @type {import('next').NextConfig} */ const nextConfig = { - swcMinify: true, basePath: process.env.NEXT_PUBLIC_BASE_PATH, assetPrefix: process.env.NEXT_PUBLIC_BASE_PATH, images: { diff --git a/package.json b/package.json index c72d37f..d93f31d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "horizon-ui-chakra-nextjs", - "version": "2.2.1", + "version": "3.0.0", "private": true, "dependencies": { "@chakra-ui/icons": "^2.0.19", @@ -20,12 +20,12 @@ "@types/react-dom": "^18.0.6", "apexcharts": "^3.35.2", "framer-motion": "^4.1.17", - "next": "^14.2.5", - "react": "18.2.0", + "next": "^15.1.4", + "react": "^19.0.0-rc.1", "react-apexcharts": "^1.4.0", "react-calendar": "^3.7.0", "react-custom-scrollbars-2": "^4.2.1", - "react-dom": "18.2.0", + "react-dom": "^19.0.0-rc.1", "react-dropzone": "^12.0.4", "react-icons": "^4.3.1", "react-is": "^18.0.0", @@ -61,7 +61,7 @@ "@types/react-calendar": "^3.5.2", "@types/react-table": "^7.7.12", "eslint": "^8.23.0", - "eslint-config-next": "^12.2.5" + "eslint-config-next": "^15.1.4" }, "resolutions": { "@types/react": "18.0.31", diff --git a/src/app/AppWrappers.tsx b/src/app/AppWrappers.tsx index ac7219a..9e0822f 100644 --- a/src/app/AppWrappers.tsx +++ b/src/app/AppWrappers.tsx @@ -4,13 +4,8 @@ import 'styles/App.css'; import 'styles/Contact.css'; import 'styles/MiniCalendar.css'; import { ChakraProvider } from '@chakra-ui/react'; -import { CacheProvider } from '@chakra-ui/next-js'; import theme from '../theme/theme'; export default function AppWrappers({ children }: { children: ReactNode }) { - return ( - - {children}{' '} - - ); + return {children}; } diff --git a/src/app/admin/layout.tsx b/src/app/admin/layout.tsx index d978f93..f5437ef 100644 --- a/src/app/admin/layout.tsx +++ b/src/app/admin/layout.tsx @@ -34,7 +34,7 @@ export default function AdminLayout(props: DashboardLayoutProps) { useEffect(() => { window.document.documentElement.dir = 'ltr'; - }); + }, []); const bg = useColorModeValue('secondaryGray.300', 'navy.900'); diff --git a/src/components/scrollbar/Scrollbar.tsx b/src/components/scrollbar/Scrollbar.tsx index acd17c1..fd6f372 100644 --- a/src/components/scrollbar/Scrollbar.tsx +++ b/src/components/scrollbar/Scrollbar.tsx @@ -1,32 +1,36 @@ import { Box } from '@chakra-ui/react'; export const renderTrack = ({ ...props }) => { - const trackStyle = { - position: 'absolute', - maxWidth: '100%', - width: 6, - transition: 'opacity 200ms ease 0s', - opacity: 0, - background: 'transparent', - bottom: 2, - top: 2, - borderRadius: 3, - right: 0 - } as const; - return
; + const trackStyle = { + position: 'absolute', + maxWidth: '100%', + width: 6, + transition: 'opacity 200ms ease 0s', + opacity: 0, + background: 'transparent', + bottom: 2, + top: 2, + borderRadius: 3, + right: 0, + } as const; + return
; }; -export const renderThumb = ({ ...props }) => { - const thumbStyle = { - borderRadius: 15, - background: 'rgba(222, 222, 222, .1)' - } as const - return
; +export const renderThumb = ({ ...props }) => { + const thumbStyle = { + borderRadius: 15, + background: 'rgba(222, 222, 222, .1)', + } as const; + return
; }; -export const renderView = ( ) => { - const viewStyle = { - marginBottom: -22 - }as const; - return ( - - ); +export const renderView = () => { + const viewStyle = { + marginBottom: -22, + } as const; + return ( + + ); }; diff --git a/src/components/sidebar/Sidebar.tsx b/src/components/sidebar/Sidebar.tsx index e3f25ea..157587a 100644 --- a/src/components/sidebar/Sidebar.tsx +++ b/src/components/sidebar/Sidebar.tsx @@ -19,7 +19,12 @@ import { renderTrack, renderView, } from 'components/scrollbar/Scrollbar'; -import { Scrollbars } from 'react-custom-scrollbars-2'; +import dynamic from 'next/dynamic'; + +const Scrollbars = dynamic( + () => import('react-custom-scrollbars-2').then((mod) => mod.Scrollbars), + { ssr: true }, +); // Assets import { IoMenuOutline } from 'react-icons/io5'; @@ -59,13 +64,7 @@ function Sidebar(props: SidebarProps) { overflowX="hidden" boxShadow={shadow} > - {/* @ts-expect-error */} - + @@ -118,12 +117,12 @@ export function SidebarResponsive(props: SidebarResponsiveProps) { _hover={{ boxShadow: 'none' }} /> - {/* @ts-expect-error */} diff --git a/src/variables/charts.ts b/src/variables/charts.ts index b6ec2bc..65a3e61 100644 --- a/src/variables/charts.ts +++ b/src/variables/charts.ts @@ -1,10 +1,10 @@ -import { ApexOptions } from "apexcharts"; +import { ApexOptions } from 'apexcharts'; type ApexGeneric = ApexOptions & any; export const barChartDataDailyTraffic = [ { - name: "Daily Traffic", + name: 'Daily Traffic', data: [20, 30, 40, 20, 45, 50, 30], }, ]; @@ -17,26 +17,26 @@ export const barChartOptionsDailyTraffic: ApexGeneric = { }, tooltip: { style: { - fontSize: "12px", + fontSize: '12px', fontFamily: undefined, }, onDatasetHover: { style: { - fontSize: "12px", + fontSize: '12px', fontFamily: undefined, }, }, - theme: "dark", + theme: 'dark', }, xaxis: { - categories: ["00", "04", "08", "12", "14", "16", "18"], + categories: ['00', '04', '08', '12', '14', '16', '18'], show: false, labels: { show: true, style: { - colors: "#A3AED0", - fontSize: "14px", - fontWeight: "500", + colors: '#A3AED0', + fontSize: '14px', + fontWeight: '500', }, }, axisBorder: { @@ -48,12 +48,12 @@ export const barChartOptionsDailyTraffic: ApexGeneric = { }, yaxis: { show: false, - color: "black", + color: 'black', labels: { show: true, style: { - colors: "#CBD5E0", - fontSize: "14px", + colors: '#CBD5E0', + fontSize: '14px', }, }, }, @@ -72,9 +72,9 @@ export const barChartOptionsDailyTraffic: ApexGeneric = { }, }, fill: { - type: "gradient", + type: 'gradient', gradient: { - type: "vertical", + type: 'vertical', shadeIntensity: 1, opacityFrom: 0.7, opacityTo: 0.9, @@ -82,12 +82,12 @@ export const barChartOptionsDailyTraffic: ApexGeneric = { [ { offset: 0, - color: "#4318FF", + color: '#4318FF', opacity: 1, }, { offset: 100, - color: "rgba(67, 24, 255, 1)", + color: 'rgba(67, 24, 255, 1)', opacity: 0.28, }, ], @@ -100,18 +100,18 @@ export const barChartOptionsDailyTraffic: ApexGeneric = { plotOptions: { bar: { borderRadius: 10, - columnWidth: "40px", + columnWidth: '40px', }, }, }; export const barChartDataUserActivity = [ { - name: "PRODUCT A", + name: 'PRODUCT A', data: [70, 55, 41, 67, 22, 43], }, { - name: "PRODUCT B", + name: 'PRODUCT B', data: [90, 70, 60, 50, 80, 90], }, ]; @@ -127,24 +127,24 @@ export const barChartOptionsUserActivity = { }, tooltip: { style: { - fontSize: "12px", + fontSize: '12px', }, onDatasetHover: { style: { - fontSize: "12px", + fontSize: '12px', }, }, - theme: "dark", + theme: 'dark', }, xaxis: { - categories: ["S", "M", "T", "W", "T", "F"], + categories: ['S', 'M', 'T', 'W', 'T', 'F'], show: false, labels: { show: true, style: { - colors: "#A3AED0", - fontSize: "14px", - fontWeight: "500", + colors: '#A3AED0', + fontSize: '14px', + fontWeight: '500', }, }, axisBorder: { @@ -156,19 +156,19 @@ export const barChartOptionsUserActivity = { }, yaxis: { show: true, - color: "black", + color: 'black', labels: { show: true, style: { - colors: "#A3AED0", - fontSize: "14px", - fontWeight: "500", + colors: '#A3AED0', + fontSize: '14px', + fontWeight: '500', }, }, }, grid: { - borderColor: "rgba(163, 174, 208, 0.3)", + borderColor: 'rgba(163, 174, 208, 0.3)', show: true, yaxis: { lines: { @@ -186,20 +186,20 @@ export const barChartOptionsUserActivity = { }, }, fill: { - type: "solid", - colors: ["#5E37FF", "#6AD2FF"], + type: 'solid', + colors: ['#5E37FF', '#6AD2FF'], }, legend: { show: false, }, - colors: ["#5E37FF", "#6AD2FF"], + colors: ['#5E37FF', '#6AD2FF'], dataLabels: { enabled: false, }, plotOptions: { bar: { borderRadius: 10, - columnWidth: "30px", + columnWidth: '30px', }, }, }; @@ -207,15 +207,15 @@ export const barChartOptionsUserActivity = { export const barChartDataConsumption = [ { - name: "PRODUCT A", + name: 'PRODUCT A', data: [400, 370, 330, 390, 320, 350, 360, 320, 380], }, { - name: "PRODUCT B", + name: 'PRODUCT B', data: [400, 370, 330, 390, 320, 350, 360, 320, 380], }, { - name: "PRODUCT C", + name: 'PRODUCT C', data: [400, 370, 330, 390, 320, 350, 360, 320, 380], }, ]; @@ -229,26 +229,26 @@ export const barChartOptionsConsumption: ApexGeneric = { }, tooltip: { style: { - fontSize: "12px", + fontSize: '12px', fontFamily: undefined, }, onDatasetHover: { style: { - fontSize: "12px", + fontSize: '12px', fontFamily: undefined, }, }, - theme: "dark", + theme: 'dark', }, xaxis: { - categories: ["17", "18", "19", "20", "21", "22", "23", "24", "25"], + categories: ['17', '18', '19', '20', '21', '22', '23', '24', '25'], show: false, labels: { show: true, style: { - colors: "#A3AED0", - fontSize: "14px", - fontWeight: "500", + colors: '#A3AED0', + fontSize: '14px', + fontWeight: '500', }, }, axisBorder: { @@ -260,19 +260,19 @@ export const barChartOptionsConsumption: ApexGeneric = { }, yaxis: { show: false, - color: "black", + color: 'black', labels: { show: false, style: { - colors: "#A3AED0", - fontSize: "14px", - fontWeight: "500", + colors: '#A3AED0', + fontSize: '14px', + fontWeight: '500', }, }, }, grid: { - borderColor: "rgba(163, 174, 208, 0.3)", + borderColor: 'rgba(163, 174, 208, 0.3)', show: true, yaxis: { lines: { @@ -290,34 +290,34 @@ export const barChartOptionsConsumption: ApexGeneric = { }, }, fill: { - type: "solid", - colors: ["#5E37FF", "#6AD2FF", "#E1E9F8"], + type: 'solid', + colors: ['#5E37FF', '#6AD2FF', '#E1E9F8'], }, legend: { show: false, }, - colors: ["#5E37FF", "#6AD2FF", "#E1E9F8"], + colors: ['#5E37FF', '#6AD2FF', '#E1E9F8'], dataLabels: { enabled: false, }, plotOptions: { bar: { borderRadius: 10, - columnWidth: "20px", + columnWidth: '20px', }, }, }; export const pieChartOptions: ApexGeneric = { - labels: ["Your files", "System", "Empty"], - colors: ["#4318FF", "#6AD2FF", "#EFF4FB"], + labels: ['Your files', 'System', 'Empty'], + colors: ['#4318FF', '#6AD2FF', '#EFF4FB'], chart: { - width: "50px", + width: '50px', }, states: { hover: { filter: { - type: "none", + type: 'none', }, }, }, @@ -339,11 +339,11 @@ export const pieChartOptions: ApexGeneric = { }, }, fill: { - colors: ["#4318FF", "#6AD2FF", "#EFF4FB"], + colors: ['#4318FF', '#6AD2FF', '#EFF4FB'], }, tooltip: { enabled: true, - theme: "dark", + theme: 'dark', }, }; @@ -353,11 +353,11 @@ export const pieChartData = [63, 25, 12]; export const lineChartDataTotalSpent = [ { - name: "Revenue", + name: 'Revenue', data: [50, 64, 48, 66, 49, 68], }, { - name: "Profit", + name: 'Profit', data: [30, 40, 24, 46, 20, 46], }, ]; @@ -373,43 +373,43 @@ export const lineChartOptionsTotalSpent: ApexOptions = { left: 0, blur: 10, opacity: 0.1, - color: "#4318FF", + color: '#4318FF', }, }, - colors: ["#4318FF", "#39B8FF"], + colors: ['#4318FF', '#39B8FF'], markers: { size: 0, - colors: "white", - strokeColors: "#7551FF", + colors: 'white', + strokeColors: '#7551FF', strokeWidth: 3, strokeOpacity: 0.9, strokeDashArray: 0, fillOpacity: 1, discrete: [], - shape: "circle", - radius: 2, + shape: 'circle', + // radius: 2, offsetX: 0, offsetY: 0, showNullDataPoints: true, }, tooltip: { - theme: "dark", + theme: 'dark', }, dataLabels: { enabled: false, }, stroke: { - curve: "smooth", + curve: 'smooth', // type: "line", }, xaxis: { // type: "numeric", - categories: ["SEP", "OCT", "NOV", "DEC", "JAN", "FEB"], + categories: ['SEP', 'OCT', 'NOV', 'DEC', 'JAN', 'FEB'], labels: { style: { - colors: "#A3AED0", - fontSize: "12px", - fontWeight: "500", + colors: '#A3AED0', + fontSize: '12px', + fontWeight: '500', }, }, axisBorder: {