3.0.0

horizon-ui · Jan 13, 2025 · 4fe7a73 · 4fe7a73
1 parent 0fbdb5a
commit 4fe7a73
Show file tree

Hide file tree

Showing 9 changed files with 142 additions and 132 deletions.
diff --git 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 ⚡️
+
+- `<Scrollbar>` 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
+
+- Added Typescript & NextJS
diff --git 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 @@
 
 <p>&nbsp;</p>
 
-
 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)! ⚡️
 <a href="https://horizon-ui.com/components/?ref=readme-horizon-nextjs" target="_blank">See all components</a>
 
-
 ### 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
@@ -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
@@ -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
@@ -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 (
-    <CacheProvider>
-      <ChakraProvider theme={theme}>{children}</ChakraProvider>{' '}
-    </CacheProvider>
-  );
+  return <ChakraProvider theme={theme}>{children}</ChakraProvider>;
 }
diff --git 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
@@ -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 <div style={ trackStyle } {...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 <div style={trackStyle} {...props} />;
 };
-export const renderThumb = ({  ...props }) => {
-	const thumbStyle = {
-		borderRadius: 15,
-		background: 'rgba(222, 222, 222, .1)'
-	} as const
-	return <div style={ thumbStyle } {...props} />;
+export const renderThumb = ({ ...props }) => {
+  const thumbStyle = {
+    borderRadius: 15,
+    background: 'rgba(222, 222, 222, .1)',
+  } as const;
+  return <div style={thumbStyle} {...props} />;
 };
-export const renderView = ( ) => {
-	const viewStyle = {
-		marginBottom: -22
-	}as const;
-	return (
-		<Box height="100%" me={{ base: '0px !important', lg: '-16px !important' }} style={ viewStyle }   />
-	);
+export const renderView = () => {
+  const viewStyle = {
+    marginBottom: -22,
+  } as const;
+  return (
+    <Box
+      height="100%"
+      me={{ base: '0px !important', lg: '-16px !important' }}
+      style={viewStyle}
+    />
+  );
 };
diff --git 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 */}
-        <Scrollbars
-          autoHide
-          renderTrackVertical={renderTrack}
-          renderThumbVertical={renderThumb}
-          renderView={renderView}
-        >
+        <Scrollbars universal={true}>
           <Content routes={routes} />
         </Scrollbars>
       </Box>
@@ -118,12 +117,12 @@ export function SidebarResponsive(props: SidebarResponsiveProps) {
             _hover={{ boxShadow: 'none' }}
           />
           <DrawerBody maxW="285px" px="0rem" pb="0">
-            {/* @ts-expect-error */}
             <Scrollbars
               autoHide
               renderTrackVertical={renderTrack}
               renderThumbVertical={renderThumb}
               renderView={renderView}
+              universal={true}
             >
               <Content routes={routes} />
             </Scrollbars>
-Original file line number
+Diff line change
@@ Expand Up @@
       useEffect(() => {
         window.document.documentElement.dir = 'ltr';
-      });
+      }, []);
       const bg = useColorModeValue('secondaryGray.300', 'navy.900');
@@ Expand Down @@