3.0.0

horizon-ui · Jan 13, 2025 · 2f65f21 · 2f65f21
1 parent 86a5c1d
commit 2f65f21
Show file tree

Hide file tree

Showing 18 changed files with 72 additions and 67 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,15 @@
 # Changelog
 
+## [3.0.0] 2025-14-01
+
+### Upgraded to React 19 ⚡️
+
+### Upgraded to Next.js 15 ⚡️
+
+- `<Scrollbar>` component adapted to SSR
+- Fixed Apexcharts
+- Cleaned props for multipel components
+
 ## [2.1.0] 2024-06-19
 
 ### Vulnerabilities removed

diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # [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/)
 
-![version](https://img.shields.io/badge/version-2.1.0-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-tailwind-react-nextjs.svg?maxAge=2592000)](https://github.com/horizon-ui/horizon-tailwind-react-nextjs/issues?q=is%3Aopen+is%3Aissue)
 

diff --git a/next.config.js b/next.config.js
@@ -8,7 +8,6 @@
 //   '@fullcalendar/react',
 
 const nextConfig = {
-  swcMinify: true,
   basePath: process.env.NEXT_PUBLIC_BASE_PATH,
   assetPrefix: process.env.NEXT_PUBLIC_BASE_PATH,
   images: {
@@ -20,9 +19,6 @@ const nextConfig = {
     // Make ENV
     unoptimized: true,
   },
-  experimental: {
-    appDir: true,
-  },
 };
 
 module.exports = nextConfig;
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "horizon-tailwind-react-nextjs",
-  "version": "2.1.0",
+  "version": "3.0.0",
   "private": true,
   "dependencies": {
     "@chakra-ui/hooks": "^2.1.4",
@@ -19,20 +19,20 @@
     "@types/node": "^12.20.55",
     "@types/react": "^18.0.15",
     "@types/react-dom": "^18.0.6",
-    "apexcharts": "3.35.5",
+    "apexcharts": "^3.35.2",
     "framer-motion": "^7.10.2",
-    "react": "^18.2.0",
-    "react-apexcharts": "1.4.0",
-    "react-calendar": "^3.9.0",
-    "next": "^14.0.2",
+    "next": "^15.1.4",
     "next-transpile-modules": "^9.0.0",
+    "react": "^19.0.0-rc.1",
+    "react-apexcharts": "^1.4.0",
+    "react-calendar": "^3.9.0",
     "react-custom-scrollbars-2": "^4.2.1",
-    "react-dom": "^18.2.0",
+    "react-dom": "^19.0.0-rc.1",
     "react-icons": "^4.4.0",
-    "react-router-dom": "^6.4.0",
     "react-no-ssr": "^1.1.0",
+    "react-router-dom": "^6.4.0",
     "tailwindcss-rtl": "^0.9.0",
-    "typescript": "^4.7.4",
+    "typescript": "^4.9.4",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
@@ -72,10 +72,11 @@
     "@types/react-dom": "^18.2.1",
     "@types/react-no-ssr": "^1.1.3",
     "@types/react-router-dom": "^5.3.3",
+    "ajv": "^7.2.4",
     "autoprefixer": "^10.4.16",
     "css-loader": "^6.7.1",
     "eslint": "^8.23.0",
-    "eslint-config-next": "^13.3.2",
+    "eslint-config-next": "^15.1.4",
     "postcss": "^8.4.30",
     "prettier": "^2.8.3",
     "prettier-plugin-tailwindcss": "^0.2.1",

diff --git a/src/app/admin/nft-marketplace/page.tsx b/src/app/admin/nft-marketplace/page.tsx
@@ -56,7 +56,7 @@ const Marketplace = () => {
                 className="text-base font-medium text-brand-500 hover:text-brand-500 dark:text-white"
                 href=" "
               >
-                <a href=" ">Sports</a>
+                Sports
               </a>
             </li>
           </ul>

diff --git a/src/components/admin/data-tables/CheckTable.tsx b/src/components/admin/data-tables/CheckTable.tsx
@@ -33,7 +33,7 @@ function CheckTable(props: { tableData: any }) {
         <div className="flex items-center">
           <Checkbox
             defaultChecked={info.getValue()[1]}
-            colorScheme="brandScheme"
+            color="indigo"
             me="10px"
           />
           <p className="ml-3 text-sm font-bold text-navy-700 dark:text-white">

diff --git a/src/components/admin/default/CheckTable.tsx b/src/components/admin/default/CheckTable.tsx
@@ -1,7 +1,7 @@
-import React from "react";
-import CardMenu from "components/card/CardMenu";
-import Checkbox from "components/checkbox";
-import Card from "components/card";
+import React from 'react';
+import CardMenu from 'components/card/CardMenu';
+import Checkbox from 'components/checkbox';
+import Card from 'components/card';
 
 import {
   createColumnHelper,
@@ -10,7 +10,7 @@ import {
   getSortedRowModel,
   SortingState,
   useReactTable,
-} from "@tanstack/react-table";
+} from '@tanstack/react-table';
 
 type RowObj = {
   name: [string, boolean];
@@ -24,16 +24,16 @@ function CheckTable(props: { tableData: any }) {
   const [sorting, setSorting] = React.useState<SortingState>([]);
   let defaultData = tableData;
   const columns = [
-    columnHelper.accessor("name", {
-      id: "name",
+    columnHelper.accessor('name', {
+      id: 'name',
       header: () => (
         <p className="text-sm font-bold text-gray-600 dark:text-white">NAME</p>
       ),
       cell: (info: any) => (
         <div className="flex items-center">
           <Checkbox
             defaultChecked={info.getValue()[1]}
-            colorScheme="brandScheme"
+            color="indigo"
             me="10px"
           />
           <p className="ml-3 text-sm font-bold text-navy-700 dark:text-white">
@@ -42,8 +42,8 @@ function CheckTable(props: { tableData: any }) {
         </div>
       ),
     }),
-    columnHelper.accessor("progress", {
-      id: "progress",
+    columnHelper.accessor('progress', {
+      id: 'progress',
       header: () => (
         <p className="text-sm font-bold text-gray-600 dark:text-white">
           PROGRESS
@@ -55,8 +55,8 @@ function CheckTable(props: { tableData: any }) {
         </p>
       ),
     }),
-    columnHelper.accessor("quantity", {
-      id: "quantity",
+    columnHelper.accessor('quantity', {
+      id: 'quantity',
       header: () => (
         <p className="text-sm font-bold text-gray-600 dark:text-white">
           QUANTITY
@@ -68,8 +68,8 @@ function CheckTable(props: { tableData: any }) {
         </p>
       ),
     }),
-    columnHelper.accessor("date", {
-      id: "date",
+    columnHelper.accessor('date', {
+      id: 'date',
       header: () => (
         <p className="text-sm font-bold text-gray-600 dark:text-white">DATE</p>
       ),
@@ -93,7 +93,7 @@ function CheckTable(props: { tableData: any }) {
     debugTable: true,
   });
   return (
-    <Card extra={"w-full h-full sm:overflow-auto px-6"}>
+    <Card extra={'w-full h-full sm:overflow-auto px-6'}>
       <header className="relative flex items-center justify-between pt-4">
         <div className="text-xl font-bold text-navy-700 dark:text-white">
           Check Table
@@ -118,11 +118,11 @@ function CheckTable(props: { tableData: any }) {
                       <div className="items-center justify-between text-xs text-gray-200">
                         {flexRender(
                           header.column.columnDef.header,
-                          header.getContext()
+                          header.getContext(),
                         )}
                         {{
-                          asc: "",
-                          desc: "",
+                          asc: '',
+                          desc: '',
                         }[header.column.getIsSorted() as string] ?? null}
                       </div>
                     </th>
@@ -146,7 +146,7 @@ function CheckTable(props: { tableData: any }) {
                         >
                           {flexRender(
                             cell.column.columnDef.cell,
-                            cell.getContext()
+                            cell.getContext(),
                           )}
                         </td>
                       );

diff --git a/src/components/admin/default/DailyTraffic.tsx b/src/components/admin/default/DailyTraffic.tsx
@@ -1,8 +1,8 @@
-import BarChart from "components/charts/BarChart";
-import { barChartDataDailyTraffic } from "variables/charts";
-import { barChartOptionsDailyTraffic } from "variables/charts";
-import { MdArrowDropUp } from "react-icons/md";
-import Card from "components/card";
+import BarChart from 'components/charts/BarChart';
+import { barChartDataDailyTraffic } from 'variables/charts';
+import { barChartOptionsDailyTraffic } from 'variables/charts';
+import { MdArrowDropUp } from 'react-icons/md';
+import Card from 'components/card';
 const DailyTraffic = () => {
   return (
     <Card extra="pb-7 p-[20px]">
@@ -12,7 +12,7 @@ const DailyTraffic = () => {
             Daily Traffic
           </p>
           <p className="text-[34px] font-bold text-navy-700 dark:text-white">
-            2.579{" "}
+            2.579{' '}
             <span className="text-sm font-medium leading-6 text-gray-600">
               Visitors
             </span>

diff --git a/src/components/admin/default/PieChartCard.tsx b/src/components/admin/default/PieChartCard.tsx
@@ -1,6 +1,6 @@
-import PieChart from "components/charts/PieChart";
-import { pieChartData, pieChartOptions } from "variables/charts";
-import Card from "components/card";
+import PieChart from 'components/charts/PieChart';
+import { pieChartData, pieChartOptions } from 'variables/charts';
+import Card from 'components/card';
 
 const PieChartCard = () => {
   return (

diff --git a/src/components/charts/BarChart.tsx b/src/components/charts/BarChart.tsx
@@ -5,7 +5,7 @@ const Chart = dynamic(() => import('react-apexcharts'), {
   ssr: false,
 });
 
-const BarChart = (props) => {
+const BarChart = (props: any) => {
   const { chartData, chartOptions } = props;
 
   return (

diff --git a/src/components/charts/PieChart.tsx b/src/components/charts/PieChart.tsx
@@ -5,19 +5,19 @@ const Chart = dynamic(() => import('react-apexcharts'), {
   ssr: false,
 });
 
-const LineChart = (props) => {
+const PieChart = (props: any) => {
   const { chartData, chartOptions } = props;
 
   return (
     // @ts-expect-error
     <Chart
       options={chartOptions}
-      type="line"
+      type="pie"
       width="100%"
       height="100%"
       series={chartData}
     />
   );
 };
 
-export default LineChart;
+export default PieChart;
diff --git a/src/components/icons/EtherLogoOutline.tsx b/src/components/icons/EtherLogoOutline.tsx
@@ -4,8 +4,8 @@ function EtherLogoOutline() {
   return (
     <svg width="82" height="82" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
+        fillRule="evenodd"
+        clipRule="evenodd"
         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"
         fill="currentColor"
       />

diff --git a/src/components/icons/visaIcon.tsx b/src/components/icons/visaIcon.tsx
@@ -8,8 +8,8 @@ const VisaIcon = () => {
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
+        fillRule="evenodd"
+        clipRule="evenodd"
         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"
         fill="currentColor"
       />

diff --git a/src/components/rtl/dashboard/CheckTable.tsx b/src/components/rtl/dashboard/CheckTable.tsx
@@ -33,7 +33,7 @@ function CheckTable(props: { tableData: any }) {
         <div className="flex items-center">
           <Checkbox
             defaultChecked={info.getValue()[1]}
-            colorScheme="brandScheme"
+            color="indigo"
             me="10px"
           />
           <p className="ms-3 text-sm font-bold text-navy-700 dark:text-white">

diff --git a/src/components/sidebar/RTL.tsx b/src/components/sidebar/RTL.tsx
@@ -34,12 +34,12 @@ function SidebarHorizon(props: { variant?: string; [x: string]: any }) {
       <Card
         extra={`mr-3 w-full h-[96.5vh] sm:ml-4 sm:my-4 m-7 !rounded-[20px]`}
       >
-        {/* @ts-expect-error */}
         <Scrollbars
           autoHide
           renderTrackVertical={renderTrack}
           renderThumbVertical={renderThumb}
           renderView={renderView}
+          universal={true}
         >
           <div className="flex h-full flex-col justify-between">
             <div>

diff --git a/src/components/sidebar/components/SidebarCard.tsx b/src/components/sidebar/components/SidebarCard.tsx
@@ -18,8 +18,8 @@ const FreeCard = () => {
             fill="white"
           />
           <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
+            fillRule="evenodd"
+            clipRule="evenodd"
             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"
             fill="white"
           />

diff --git a/src/components/sidebar/componentsrtl/SidebarCard.tsx b/src/components/sidebar/componentsrtl/SidebarCard.tsx
@@ -18,8 +18,8 @@ const FreeCard = () => {
             fill="white"
           />
           <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
+            fillRule="evenodd"
+            clipRule="evenodd"
             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"
             fill="white"
           />

diff --git a/src/variables/charts.ts b/src/variables/charts.ts
@@ -1,11 +1,15 @@
+import { ApexOptions } from 'apexcharts';
+
+type ApexGeneric = ApexOptions & any;
+
 export const barChartDataDailyTraffic = [
   {
     name: 'Daily Traffic',
     data: [20, 30, 40, 20, 45, 50, 30],
   },
 ];
 
-export const barChartOptionsDailyTraffic = {
+export const barChartOptionsDailyTraffic: ApexGeneric = {
   chart: {
     toolbar: {
       show: false,
@@ -15,7 +19,6 @@ export const barChartOptionsDailyTraffic = {
     style: {
       fontSize: '12px',
       fontFamily: undefined,
-      backgroundColor: '#000000',
     },
     onDatasetHover: {
       style: {
@@ -102,7 +105,7 @@ export const barChartOptionsDailyTraffic = {
   },
 };
 
-export const pieChartOptions = {
+export const pieChartOptions: ApexGeneric = {
   labels: ['Your files', 'System', 'Empty'],
   colors: ['#4318FF', '#6AD2FF', '#EFF4FB'],
   chart: {
@@ -138,11 +141,6 @@ export const pieChartOptions = {
   tooltip: {
     enabled: true,
     theme: 'dark',
-    style: {
-      fontSize: '12px',
-      fontFamily: undefined,
-      backgroundColor: '#000000',
-    },
   },
 };
-Original file line number
+Diff line change
@@ Expand Up / @@ -56,7 +56,7 @@ const Marketplace = () => { @@
                     className="text-base font-medium text-brand-500 hover:text-brand-500 dark:text-white"
                     href=" "
                   >
-                    <a href=" ">Sports</a>
+                    Sports
                   </a>
                 </li>
               </ul>
@@ Expand Down @@