Skip to content

Commit 4fe7a73

Browse files
committed
3.0.0
1 parent 0fbdb5a commit 4fe7a73

File tree

9 files changed

+142
-132
lines changed

9 files changed

+142
-132
lines changed

CHANGELOG.md

Lines changed: 19 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,12 @@
1+
# Changelog
2+
3+
## [3.0.0] 2025-14-01
4+
5+
### Upgraded to React 19 ⚡️
6+
7+
### Upgraded to Next.js 15 ⚡️
8+
9+
- `<Scrollbar>` component adapted to SSR
110

211
## [2.2.1] 2024-07-19
312

@@ -12,20 +21,25 @@
1221
### Bug fix - Build error due to Types
1322

1423
- Updated types
15-
- Updated charts
16-
## [2.0.0] 2023-09-13
24+
- Updated charts
25+
26+
## [2.0.0] 2023-09-13
1727

1828
### Big update - NextJS 13 Update
1929

20-
- Layouts update
30+
- Layouts update
2131
- Updated routing
2232
- Updated image component
2333
- Updated link component
2434

2535
## [1.0.1] 2022-03-22
26-
### Bug Fixing
36+
37+
### Bug Fixing
38+
2739
Auth layout fixed
40+
2841
## [1.0.0] 2022-10-17
2942

3043
### Original Release
31-
- Added Typescript & NextJS
44+
45+
- Added Typescript & NextJS

README.md

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# [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!)
22

3-
![version](https://img.shields.io/badge/version-2.2.1-blue.svg)
3+
![version](https://img.shields.io/badge/version-3.0.0-blue.svg)
44
![license](https://img.shields.io/badge/license-MIT-blue.svg)
55
[![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)
66

@@ -10,7 +10,6 @@
1010

1111
<p>&nbsp;</p>
1212

13-
1413
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!
1514

1615
---
@@ -29,10 +28,10 @@ Authentication Pages, Profile and so on. Just choose between a Basic Design or a
2928
cover and you are good to go!
3029

3130
### 🎉 [NEW] Horizon UI Components
31+
3232
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)! ⚡️
3333
<a href="https://horizon-ui.com/components/?ref=readme-horizon-nextjs" target="_blank">See all components</a>
3434

35-
3635
### Documentation
3736

3837
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,
7271

7372
### Versions
7473

75-
| Free Version | PRO Version |
76-
| ------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------- |
74+
| Free Version | PRO Version |
75+
| ---------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
7776
| [![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) |
7877

7978
### Figma Version

next.config.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
/** @type {import('next').NextConfig} */
22

33
const nextConfig = {
4-
swcMinify: true,
54
basePath: process.env.NEXT_PUBLIC_BASE_PATH,
65
assetPrefix: process.env.NEXT_PUBLIC_BASE_PATH,
76
images: {

package.json

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "horizon-ui-chakra-nextjs",
3-
"version": "2.2.1",
3+
"version": "3.0.0",
44
"private": true,
55
"dependencies": {
66
"@chakra-ui/icons": "^2.0.19",
@@ -20,12 +20,12 @@
2020
"@types/react-dom": "^18.0.6",
2121
"apexcharts": "^3.35.2",
2222
"framer-motion": "^4.1.17",
23-
"next": "^14.2.5",
24-
"react": "18.2.0",
23+
"next": "^15.1.4",
24+
"react": "^19.0.0-rc.1",
2525
"react-apexcharts": "^1.4.0",
2626
"react-calendar": "^3.7.0",
2727
"react-custom-scrollbars-2": "^4.2.1",
28-
"react-dom": "18.2.0",
28+
"react-dom": "^19.0.0-rc.1",
2929
"react-dropzone": "^12.0.4",
3030
"react-icons": "^4.3.1",
3131
"react-is": "^18.0.0",
@@ -61,7 +61,7 @@
6161
"@types/react-calendar": "^3.5.2",
6262
"@types/react-table": "^7.7.12",
6363
"eslint": "^8.23.0",
64-
"eslint-config-next": "^12.2.5"
64+
"eslint-config-next": "^15.1.4"
6565
},
6666
"resolutions": {
6767
"@types/react": "18.0.31",

src/app/AppWrappers.tsx

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,8 @@ import 'styles/App.css';
44
import 'styles/Contact.css';
55
import 'styles/MiniCalendar.css';
66
import { ChakraProvider } from '@chakra-ui/react';
7-
import { CacheProvider } from '@chakra-ui/next-js';
87
import theme from '../theme/theme';
98

109
export default function AppWrappers({ children }: { children: ReactNode }) {
11-
return (
12-
<CacheProvider>
13-
<ChakraProvider theme={theme}>{children}</ChakraProvider>{' '}
14-
</CacheProvider>
15-
);
10+
return <ChakraProvider theme={theme}>{children}</ChakraProvider>;
1611
}

src/app/admin/layout.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ export default function AdminLayout(props: DashboardLayoutProps) {
3434

3535
useEffect(() => {
3636
window.document.documentElement.dir = 'ltr';
37-
});
37+
}, []);
3838

3939
const bg = useColorModeValue('secondaryGray.300', 'navy.900');
4040

Lines changed: 30 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,36 @@
11
import { Box } from '@chakra-ui/react';
22

33
export const renderTrack = ({ ...props }) => {
4-
const trackStyle = {
5-
position: 'absolute',
6-
maxWidth: '100%',
7-
width: 6,
8-
transition: 'opacity 200ms ease 0s',
9-
opacity: 0,
10-
background: 'transparent',
11-
bottom: 2,
12-
top: 2,
13-
borderRadius: 3,
14-
right: 0
15-
} as const;
16-
return <div style={ trackStyle } {...props} />;
4+
const trackStyle = {
5+
position: 'absolute',
6+
maxWidth: '100%',
7+
width: 6,
8+
transition: 'opacity 200ms ease 0s',
9+
opacity: 0,
10+
background: 'transparent',
11+
bottom: 2,
12+
top: 2,
13+
borderRadius: 3,
14+
right: 0,
15+
} as const;
16+
return <div style={trackStyle} {...props} />;
1717
};
18-
export const renderThumb = ({ ...props }) => {
19-
const thumbStyle = {
20-
borderRadius: 15,
21-
background: 'rgba(222, 222, 222, .1)'
22-
} as const
23-
return <div style={ thumbStyle } {...props} />;
18+
export const renderThumb = ({ ...props }) => {
19+
const thumbStyle = {
20+
borderRadius: 15,
21+
background: 'rgba(222, 222, 222, .1)',
22+
} as const;
23+
return <div style={thumbStyle} {...props} />;
2424
};
25-
export const renderView = ( ) => {
26-
const viewStyle = {
27-
marginBottom: -22
28-
}as const;
29-
return (
30-
<Box height="100%" me={{ base: '0px !important', lg: '-16px !important' }} style={ viewStyle } />
31-
);
25+
export const renderView = () => {
26+
const viewStyle = {
27+
marginBottom: -22,
28+
} as const;
29+
return (
30+
<Box
31+
height="100%"
32+
me={{ base: '0px !important', lg: '-16px !important' }}
33+
style={viewStyle}
34+
/>
35+
);
3236
};

src/components/sidebar/Sidebar.tsx

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,12 @@ import {
1919
renderTrack,
2020
renderView,
2121
} from 'components/scrollbar/Scrollbar';
22-
import { Scrollbars } from 'react-custom-scrollbars-2';
22+
import dynamic from 'next/dynamic';
23+
24+
const Scrollbars = dynamic(
25+
() => import('react-custom-scrollbars-2').then((mod) => mod.Scrollbars),
26+
{ ssr: true },
27+
);
2328

2429
// Assets
2530
import { IoMenuOutline } from 'react-icons/io5';
@@ -59,13 +64,7 @@ function Sidebar(props: SidebarProps) {
5964
overflowX="hidden"
6065
boxShadow={shadow}
6166
>
62-
{/* @ts-expect-error */}
63-
<Scrollbars
64-
autoHide
65-
renderTrackVertical={renderTrack}
66-
renderThumbVertical={renderThumb}
67-
renderView={renderView}
68-
>
67+
<Scrollbars universal={true}>
6968
<Content routes={routes} />
7069
</Scrollbars>
7170
</Box>
@@ -118,12 +117,12 @@ export function SidebarResponsive(props: SidebarResponsiveProps) {
118117
_hover={{ boxShadow: 'none' }}
119118
/>
120119
<DrawerBody maxW="285px" px="0rem" pb="0">
121-
{/* @ts-expect-error */}
122120
<Scrollbars
123121
autoHide
124122
renderTrackVertical={renderTrack}
125123
renderThumbVertical={renderThumb}
126124
renderView={renderView}
125+
universal={true}
127126
>
128127
<Content routes={routes} />
129128
</Scrollbars>

0 commit comments

Comments
 (0)