Skip to content

Commit 2f65f21

Browse files
VladMihalacheVladMihalache
committed
3.0.0
1 parent 86a5c1d commit 2f65f21

File tree

18 files changed

+72
-67
lines changed

18 files changed

+72
-67
lines changed

‎CHANGELOG.md

+10
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,15 @@
11
# Changelog
22

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
10+
- Fixed Apexcharts
11+
- Cleaned props for multipel components
12+
313
## [2.1.0] 2024-06-19
414

515
### Vulnerabilities removed

‎README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# [Horizon UI Tailwind CSS NextJS ⚡️](https://horizon-ui.com/horizon-tailwind-react-nextjs) [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social&logo=twitter)](https://twitter.com/intent/tweet?text=Check%20Horizon%20UI,%20the%20trendiest%20open-source%20admin%20dashboard%20template%20for%20Tailwind%20CSS,%20React%20JS%20and%20NextJS%20-%20https%3A//horizon-ui.com/)
22

3-
![version](https://img.shields.io/badge/version-2.1.0-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-tailwind-react-nextjs.svg?maxAge=2592000)](https://github.com/horizon-ui/horizon-tailwind-react-nextjs/issues?q=is%3Aopen+is%3Aissue)
66

‎next.config.js

-4
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@
88
// '@fullcalendar/react',
99

1010
const nextConfig = {
11-
swcMinify: true,
1211
basePath: process.env.NEXT_PUBLIC_BASE_PATH,
1312
assetPrefix: process.env.NEXT_PUBLIC_BASE_PATH,
1413
images: {
@@ -20,9 +19,6 @@ const nextConfig = {
2019
// Make ENV
2120
unoptimized: true,
2221
},
23-
experimental: {
24-
appDir: true,
25-
},
2622
};
2723

2824
module.exports = nextConfig;

‎package.json

+11-10
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "horizon-tailwind-react-nextjs",
3-
"version": "2.1.0",
3+
"version": "3.0.0",
44
"private": true,
55
"dependencies": {
66
"@chakra-ui/hooks": "^2.1.4",
@@ -19,20 +19,20 @@
1919
"@types/node": "^12.20.55",
2020
"@types/react": "^18.0.15",
2121
"@types/react-dom": "^18.0.6",
22-
"apexcharts": "3.35.5",
22+
"apexcharts": "^3.35.2",
2323
"framer-motion": "^7.10.2",
24-
"react": "^18.2.0",
25-
"react-apexcharts": "1.4.0",
26-
"react-calendar": "^3.9.0",
27-
"next": "^14.0.2",
24+
"next": "^15.1.4",
2825
"next-transpile-modules": "^9.0.0",
26+
"react": "^19.0.0-rc.1",
27+
"react-apexcharts": "^1.4.0",
28+
"react-calendar": "^3.9.0",
2929
"react-custom-scrollbars-2": "^4.2.1",
30-
"react-dom": "^18.2.0",
30+
"react-dom": "^19.0.0-rc.1",
3131
"react-icons": "^4.4.0",
32-
"react-router-dom": "^6.4.0",
3332
"react-no-ssr": "^1.1.0",
33+
"react-router-dom": "^6.4.0",
3434
"tailwindcss-rtl": "^0.9.0",
35-
"typescript": "^4.7.4",
35+
"typescript": "^4.9.4",
3636
"web-vitals": "^2.1.4"
3737
},
3838
"scripts": {
@@ -72,10 +72,11 @@
7272
"@types/react-dom": "^18.2.1",
7373
"@types/react-no-ssr": "^1.1.3",
7474
"@types/react-router-dom": "^5.3.3",
75+
"ajv": "^7.2.4",
7576
"autoprefixer": "^10.4.16",
7677
"css-loader": "^6.7.1",
7778
"eslint": "^8.23.0",
78-
"eslint-config-next": "^13.3.2",
79+
"eslint-config-next": "^15.1.4",
7980
"postcss": "^8.4.30",
8081
"prettier": "^2.8.3",
8182
"prettier-plugin-tailwindcss": "^0.2.1",

‎src/app/admin/nft-marketplace/page.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ const Marketplace = () => {
5656
className="text-base font-medium text-brand-500 hover:text-brand-500 dark:text-white"
5757
href=" "
5858
>
59-
<a href=" ">Sports</a>
59+
Sports
6060
</a>
6161
</li>
6262
</ul>

‎src/components/admin/data-tables/CheckTable.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ function CheckTable(props: { tableData: any }) {
3333
<div className="flex items-center">
3434
<Checkbox
3535
defaultChecked={info.getValue()[1]}
36-
colorScheme="brandScheme"
36+
color="indigo"
3737
me="10px"
3838
/>
3939
<p className="ml-3 text-sm font-bold text-navy-700 dark:text-white">

‎src/components/admin/default/CheckTable.tsx

+19-19
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import React from "react";
2-
import CardMenu from "components/card/CardMenu";
3-
import Checkbox from "components/checkbox";
4-
import Card from "components/card";
1+
import React from 'react';
2+
import CardMenu from 'components/card/CardMenu';
3+
import Checkbox from 'components/checkbox';
4+
import Card from 'components/card';
55

66
import {
77
createColumnHelper,
@@ -10,7 +10,7 @@ import {
1010
getSortedRowModel,
1111
SortingState,
1212
useReactTable,
13-
} from "@tanstack/react-table";
13+
} from '@tanstack/react-table';
1414

1515
type RowObj = {
1616
name: [string, boolean];
@@ -24,16 +24,16 @@ function CheckTable(props: { tableData: any }) {
2424
const [sorting, setSorting] = React.useState<SortingState>([]);
2525
let defaultData = tableData;
2626
const columns = [
27-
columnHelper.accessor("name", {
28-
id: "name",
27+
columnHelper.accessor('name', {
28+
id: 'name',
2929
header: () => (
3030
<p className="text-sm font-bold text-gray-600 dark:text-white">NAME</p>
3131
),
3232
cell: (info: any) => (
3333
<div className="flex items-center">
3434
<Checkbox
3535
defaultChecked={info.getValue()[1]}
36-
colorScheme="brandScheme"
36+
color="indigo"
3737
me="10px"
3838
/>
3939
<p className="ml-3 text-sm font-bold text-navy-700 dark:text-white">
@@ -42,8 +42,8 @@ function CheckTable(props: { tableData: any }) {
4242
</div>
4343
),
4444
}),
45-
columnHelper.accessor("progress", {
46-
id: "progress",
45+
columnHelper.accessor('progress', {
46+
id: 'progress',
4747
header: () => (
4848
<p className="text-sm font-bold text-gray-600 dark:text-white">
4949
PROGRESS
@@ -55,8 +55,8 @@ function CheckTable(props: { tableData: any }) {
5555
</p>
5656
),
5757
}),
58-
columnHelper.accessor("quantity", {
59-
id: "quantity",
58+
columnHelper.accessor('quantity', {
59+
id: 'quantity',
6060
header: () => (
6161
<p className="text-sm font-bold text-gray-600 dark:text-white">
6262
QUANTITY
@@ -68,8 +68,8 @@ function CheckTable(props: { tableData: any }) {
6868
</p>
6969
),
7070
}),
71-
columnHelper.accessor("date", {
72-
id: "date",
71+
columnHelper.accessor('date', {
72+
id: 'date',
7373
header: () => (
7474
<p className="text-sm font-bold text-gray-600 dark:text-white">DATE</p>
7575
),
@@ -93,7 +93,7 @@ function CheckTable(props: { tableData: any }) {
9393
debugTable: true,
9494
});
9595
return (
96-
<Card extra={"w-full h-full sm:overflow-auto px-6"}>
96+
<Card extra={'w-full h-full sm:overflow-auto px-6'}>
9797
<header className="relative flex items-center justify-between pt-4">
9898
<div className="text-xl font-bold text-navy-700 dark:text-white">
9999
Check Table
@@ -118,11 +118,11 @@ function CheckTable(props: { tableData: any }) {
118118
<div className="items-center justify-between text-xs text-gray-200">
119119
{flexRender(
120120
header.column.columnDef.header,
121-
header.getContext()
121+
header.getContext(),
122122
)}
123123
{{
124-
asc: "",
125-
desc: "",
124+
asc: '',
125+
desc: '',
126126
}[header.column.getIsSorted() as string] ?? null}
127127
</div>
128128
</th>
@@ -146,7 +146,7 @@ function CheckTable(props: { tableData: any }) {
146146
>
147147
{flexRender(
148148
cell.column.columnDef.cell,
149-
cell.getContext()
149+
cell.getContext(),
150150
)}
151151
</td>
152152
);

‎src/components/admin/default/DailyTraffic.tsx

+6-6
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import BarChart from "components/charts/BarChart";
2-
import { barChartDataDailyTraffic } from "variables/charts";
3-
import { barChartOptionsDailyTraffic } from "variables/charts";
4-
import { MdArrowDropUp } from "react-icons/md";
5-
import Card from "components/card";
1+
import BarChart from 'components/charts/BarChart';
2+
import { barChartDataDailyTraffic } from 'variables/charts';
3+
import { barChartOptionsDailyTraffic } from 'variables/charts';
4+
import { MdArrowDropUp } from 'react-icons/md';
5+
import Card from 'components/card';
66
const DailyTraffic = () => {
77
return (
88
<Card extra="pb-7 p-[20px]">
@@ -12,7 +12,7 @@ const DailyTraffic = () => {
1212
Daily Traffic
1313
</p>
1414
<p className="text-[34px] font-bold text-navy-700 dark:text-white">
15-
2.579{" "}
15+
2.579{' '}
1616
<span className="text-sm font-medium leading-6 text-gray-600">
1717
Visitors
1818
</span>

‎src/components/admin/default/PieChartCard.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import PieChart from "components/charts/PieChart";
2-
import { pieChartData, pieChartOptions } from "variables/charts";
3-
import Card from "components/card";
1+
import PieChart from 'components/charts/PieChart';
2+
import { pieChartData, pieChartOptions } from 'variables/charts';
3+
import Card from 'components/card';
44

55
const PieChartCard = () => {
66
return (

‎src/components/charts/BarChart.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ const Chart = dynamic(() => import('react-apexcharts'), {
55
ssr: false,
66
});
77

8-
const BarChart = (props) => {
8+
const BarChart = (props: any) => {
99
const { chartData, chartOptions } = props;
1010

1111
return (

‎src/components/charts/PieChart.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -5,19 +5,19 @@ const Chart = dynamic(() => import('react-apexcharts'), {
55
ssr: false,
66
});
77

8-
const LineChart = (props) => {
8+
const PieChart = (props: any) => {
99
const { chartData, chartOptions } = props;
1010

1111
return (
1212
// @ts-expect-error
1313
<Chart
1414
options={chartOptions}
15-
type="line"
15+
type="pie"
1616
width="100%"
1717
height="100%"
1818
series={chartData}
1919
/>
2020
);
2121
};
2222

23-
export default LineChart;
23+
export default PieChart;

‎src/components/icons/EtherLogoOutline.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@ function EtherLogoOutline() {
44
return (
55
<svg width="82" height="82" fill="none" xmlns="http://www.w3.org/2000/svg">
66
<path
7-
fill-rule="evenodd"
8-
clip-rule="evenodd"
7+
fillRule="evenodd"
8+
clipRule="evenodd"
99
d="M41 82c22.644 0 41-18.356 41-41S63.644 0 41 0 0 18.356 0 41s18.356 41 41 41Zm-.1-33.852-12.625-7.146 12.627 17.054L53.54 41.002 40.9 48.148Zm-12.436-9.44 12.632-20.082 12.628 20.088-12.63 7.147-12.63-7.154Z"
1010
fill="currentColor"
1111
/>

‎src/components/icons/visaIcon.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@ const VisaIcon = () => {
88
xmlns="http://www.w3.org/2000/svg"
99
>
1010
<path
11-
fill-rule="evenodd"
12-
clip-rule="evenodd"
11+
fillRule="evenodd"
12+
clipRule="evenodd"
1313
d="M12.6708 2.96349C12.6568 4.15055 13.653 4.81298 14.4034 5.20684C15.1744 5.61099 15.4333 5.87013 15.4304 6.23147C15.4245 6.78459 14.8153 7.02862 14.2452 7.03812C13.2505 7.05475 12.6723 6.74889 12.2125 6.51753L11.8542 8.32341C12.3155 8.55247 13.1696 8.75217 14.0554 8.76087C16.1345 8.76087 17.4947 7.65543 17.5021 5.94145C17.5102 3.76625 14.7087 3.64579 14.7278 2.67348C14.7344 2.37871 14.9956 2.06408 15.568 1.98406C15.8512 1.94368 16.6332 1.91274 17.5198 2.35252L17.8677 0.605286C17.391 0.418253 16.7782 0.239136 16.0153 0.239136C14.0583 0.239136 12.6819 1.35962 12.6708 2.96349ZM21.2115 0.389687C20.8319 0.389687 20.5118 0.628245 20.3691 0.99433L17.3991 8.63249H19.4767L19.8901 7.40183H22.429L22.6689 8.63249H24.5L22.9021 0.389687H21.2115ZM21.5021 2.61641L22.1016 5.7116H20.4596L21.5021 2.61641ZM10.1518 0.389687L8.51418 8.63249H10.4939L12.1308 0.389687H10.1518ZM7.22303 0.389687L5.16233 6.00003L4.32878 1.22966C4.23097 0.697187 3.84472 0.389687 3.41579 0.389687H0.0471011L0 0.629037C0.691574 0.790671 1.47729 1.0514 1.95326 1.33033C2.24457 1.50067 2.32775 1.64964 2.42336 2.05458L4.00214 8.63249H6.0945L9.3021 0.389687H7.22303Z"
1414
fill="currentColor"
1515
/>

‎src/components/rtl/dashboard/CheckTable.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ function CheckTable(props: { tableData: any }) {
3333
<div className="flex items-center">
3434
<Checkbox
3535
defaultChecked={info.getValue()[1]}
36-
colorScheme="brandScheme"
36+
color="indigo"
3737
me="10px"
3838
/>
3939
<p className="ms-3 text-sm font-bold text-navy-700 dark:text-white">

‎src/components/sidebar/RTL.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -34,12 +34,12 @@ function SidebarHorizon(props: { variant?: string; [x: string]: any }) {
3434
<Card
3535
extra={`mr-3 w-full h-[96.5vh] sm:ml-4 sm:my-4 m-7 !rounded-[20px]`}
3636
>
37-
{/* @ts-expect-error */}
3837
<Scrollbars
3938
autoHide
4039
renderTrackVertical={renderTrack}
4140
renderThumbVertical={renderThumb}
4241
renderView={renderView}
42+
universal={true}
4343
>
4444
<div className="flex h-full flex-col justify-between">
4545
<div>

‎src/components/sidebar/components/SidebarCard.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,8 @@ const FreeCard = () => {
1818
fill="white"
1919
/>
2020
<path
21-
fill-rule="evenodd"
22-
clip-rule="evenodd"
21+
fillRule="evenodd"
22+
clipRule="evenodd"
2323
d="M20.5 31.989C26.8452 31.989 31.989 26.8452 31.989 20.5C31.989 14.1548 26.8452 9.01099 20.5 9.01099C14.1548 9.01099 9.01099 14.1548 9.01099 20.5C9.01099 26.8452 14.1548 31.989 20.5 31.989ZM20.5 41C31.8218 41 41 31.8218 41 20.5C41 9.17816 31.8218 0 20.5 0C9.17816 0 0 9.17816 0 20.5C0 31.8218 9.17816 41 20.5 41Z"
2424
fill="white"
2525
/>

‎src/components/sidebar/componentsrtl/SidebarCard.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,8 @@ const FreeCard = () => {
1818
fill="white"
1919
/>
2020
<path
21-
fill-rule="evenodd"
22-
clip-rule="evenodd"
21+
fillRule="evenodd"
22+
clipRule="evenodd"
2323
d="M20.5 31.989C26.8452 31.989 31.989 26.8452 31.989 20.5C31.989 14.1548 26.8452 9.01099 20.5 9.01099C14.1548 9.01099 9.01099 14.1548 9.01099 20.5C9.01099 26.8452 14.1548 31.989 20.5 31.989ZM20.5 41C31.8218 41 41 31.8218 41 20.5C41 9.17816 31.8218 0 20.5 0C9.17816 0 0 9.17816 0 20.5C0 31.8218 9.17816 41 20.5 41Z"
2424
fill="white"
2525
/>

‎src/variables/charts.ts

+6-8
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,15 @@
1+
import { ApexOptions } from 'apexcharts';
2+
3+
type ApexGeneric = ApexOptions & any;
4+
15
export const barChartDataDailyTraffic = [
26
{
37
name: 'Daily Traffic',
48
data: [20, 30, 40, 20, 45, 50, 30],
59
},
610
];
711

8-
export const barChartOptionsDailyTraffic = {
12+
export const barChartOptionsDailyTraffic: ApexGeneric = {
913
chart: {
1014
toolbar: {
1115
show: false,
@@ -15,7 +19,6 @@ export const barChartOptionsDailyTraffic = {
1519
style: {
1620
fontSize: '12px',
1721
fontFamily: undefined,
18-
backgroundColor: '#000000',
1922
},
2023
onDatasetHover: {
2124
style: {
@@ -102,7 +105,7 @@ export const barChartOptionsDailyTraffic = {
102105
},
103106
};
104107

105-
export const pieChartOptions = {
108+
export const pieChartOptions: ApexGeneric = {
106109
labels: ['Your files', 'System', 'Empty'],
107110
colors: ['#4318FF', '#6AD2FF', '#EFF4FB'],
108111
chart: {
@@ -138,11 +141,6 @@ export const pieChartOptions = {
138141
tooltip: {
139142
enabled: true,
140143
theme: 'dark',
141-
style: {
142-
fontSize: '12px',
143-
fontFamily: undefined,
144-
backgroundColor: '#000000',
145-
},
146144
},
147145
};
148146

0 commit comments

Comments
 (0)