diff --git a/.npmrc b/.npmrc new file mode 100644 index 0000000..5c6c958 --- /dev/null +++ b/.npmrc @@ -0,0 +1,3 @@ +legacy-peer-deps=true +auto-install-peers=true +strict-peer-dependencies=false \ No newline at end of file diff --git a/CHANGELOG.md b/CHANGELOG.md index 9b97db2..fc22ced 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,4 +1,13 @@ # Changelog +## [2.0.0] 2023-09-13 + +### Big update - NextJS 13 Update + +- Layouts update +- Updated routing +- Updated image component +- Updated link component + ## [1.0.1] 2022-03-22 ### Bug Fixing Auth layout fixed diff --git a/README.md b/README.md index ffd2128..591d18c 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-1.0.0-blue.svg) +![version](https://img.shields.io/badge/version-2.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) diff --git a/next.config.js b/next.config.js index 3d3bc99..5ae133e 100644 --- a/next.config.js +++ b/next.config.js @@ -1,7 +1,22 @@ /** @type {import('next').NextConfig} */ + const nextConfig = { - reactStrictMode: true, swcMinify: true, + basePath: process.env.NEXT_PUBLIC_BASE_PATH, + assetPrefix: process.env.NEXT_PUBLIC_BASE_PATH, + images: { + domains: [ + 'images.unsplash.com', + 'i.ibb.co', + 'scontent.fotp8-1.fna.fbcdn.net', + ], + // Make ENV + unoptimized: true, + }, + experimental: { + appDir: true, + }, }; +// module.exports = withTM(nextConfig); module.exports = nextConfig; diff --git a/package.json b/package.json index 7e25c94..1b03893 100644 --- a/package.json +++ b/package.json @@ -1,15 +1,18 @@ { "name": "horizon-ui-chakra-nextjs", - "version": "1.0.0", + "version": "2.0.0", "private": true, "dependencies": { - "@chakra-ui/icons": "^1.1.5", - "@chakra-ui/react": "1.8.8", - "@chakra-ui/system": "^1.12.1", + "@chakra-ui/icons": "^2.0.19", + "@chakra-ui/next-js": "^2.1.5", + "@chakra-ui/react": "2.6.1", + "@chakra-ui/styled-system": "^2.9.1", + "@chakra-ui/system": "2.5.7", "@chakra-ui/theme-tools": "^1.3.6", "@emotion/cache": "^11.7.1", "@emotion/react": "^11.4.1", "@emotion/styled": "^11.3.0", + "@tanstack/react-table": "^8.9.8", "@testing-library/jest-dom": "^5.14.1", "@testing-library/react": "^11.2.7", "@testing-library/user-event": "^12.8.3", @@ -17,16 +20,16 @@ "@types/react-dom": "^18.0.6", "apexcharts": "^3.35.2", "framer-motion": "^4.1.17", - "next": "^12.2.5", - "react": "^17.0.2", + "next": "^13.3.2", + "react": "18.2.0", "react-apexcharts": "^1.4.0", "react-calendar": "^3.7.0", "react-custom-scrollbars-2": "^4.2.1", - "react-dom": "17.0.2", + "react-dom": "18.2.0", "react-dropzone": "^12.0.4", "react-icons": "^4.3.1", "react-is": "^18.0.0", - "react-table": "^7.8.0", + "react-no-ssr": "^1.1.0", "stylis": "^4.1.1", "stylis-plugin-rtl": "2.0.2", "typescript": "^4.7.4", @@ -41,7 +44,11 @@ "deploy": "gh-pages -d build" }, "browserslist": { - "production": [">0.2%", "not dead", "not op_mini all"], + "production": [ + ">0.2%", + "not dead", + "not op_mini all" + ], "development": [ "last 1 chrome version", "last 1 firefox version", @@ -50,7 +57,7 @@ }, "devDependencies": { "@types/node": "^18.7.6", - "@types/react": "^18.0.17", + "@types/react": "18.2.0", "@types/react-calendar": "^3.5.2", "@types/react-table": "^7.7.12", "eslint": "^8.23.0", diff --git a/prettier.config.js b/prettier.config.js new file mode 100644 index 0000000..9166a04 --- /dev/null +++ b/prettier.config.js @@ -0,0 +1,4 @@ +module.exports = { + trailingComma: 'all', + singleQuote: true, +}; diff --git a/src/app/AppWrappers.tsx b/src/app/AppWrappers.tsx new file mode 100644 index 0000000..ac7219a --- /dev/null +++ b/src/app/AppWrappers.tsx @@ -0,0 +1,16 @@ +'use client'; +import React, { ReactNode } from 'react'; +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}{' '} + + ); +} diff --git a/src/app/admin/data-tables/page.tsx b/src/app/admin/data-tables/page.tsx new file mode 100644 index 0000000..51f52d2 --- /dev/null +++ b/src/app/admin/data-tables/page.tsx @@ -0,0 +1,29 @@ +'use client'; +import { Box, SimpleGrid } from '@chakra-ui/react'; +import DevelopmentTable from 'views/admin/dataTables/components/DevelopmentTable'; +import CheckTable from 'views/admin/dataTables/components/CheckTable'; +import ColumnsTable from 'views/admin/dataTables/components/ColumnsTable'; +import ComplexTable from 'views/admin/dataTables/components/ComplexTable'; +import tableDataDevelopment from 'views/admin/dataTables/variables/tableDataDevelopment'; +import tableDataCheck from 'views/admin/dataTables/variables/tableDataCheck'; +import tableDataColumns from 'views/admin/dataTables/variables/tableDataColumns'; +import tableDataComplex from 'views/admin/dataTables/variables/tableDataComplex'; +import React from 'react'; +import AdminLayout from 'layouts/admin'; + +export default function DataTables() { + return ( + + + + + + + + + ); +} diff --git a/src/app/admin/default/page.tsx b/src/app/admin/default/page.tsx new file mode 100644 index 0000000..6841d32 --- /dev/null +++ b/src/app/admin/default/page.tsx @@ -0,0 +1,170 @@ +'use client'; +/*! + _ _ ___ ____ ___ ________ _ _ _ _ ___ + | | | |/ _ \| _ \|_ _|__ / _ \| \ | | | | | |_ _| + | |_| | | | | |_) || | / / | | | \| | | | | || | + | _ | |_| | _ < | | / /| |_| | |\ | | |_| || | + |_| |_|\___/|_| \_\___/____\___/|_| \_| \___/|___| + +========================================================= +* Horizon UI - v1.1.0 +========================================================= + +* Product Page: https://www.horizon-ui.com/ +* Copyright 2022 Horizon UI (https://www.horizon-ui.com/) + +* Designed and Coded by Simmmple + +========================================================= + +* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. + +*/ + +import { + Box, + Flex, + FormLabel, + Image, + Icon, + Select, + SimpleGrid, + useColorModeValue, +} from '@chakra-ui/react'; +// Custom components +// import MiniCalendar from 'components/calendar/MiniCalendar'; +import MiniStatistics from 'components/card/MiniStatistics'; +import IconBox from 'components/icons/IconBox'; +import { + MdAddTask, + MdAttachMoney, + MdBarChart, + MdFileCopy, +} from 'react-icons/md'; +import CheckTable from 'views/admin/default/components/CheckTable'; +import ComplexTable from 'views/admin/default/components/ComplexTable'; +import DailyTraffic from 'views/admin/default/components/DailyTraffic'; +import PieCard from 'views/admin/default/components/PieCard'; +import Tasks from 'views/admin/default/components/Tasks'; +import TotalSpent from 'views/admin/default/components/TotalSpent'; +import WeeklyRevenue from 'views/admin/default/components/WeeklyRevenue'; +import tableDataCheck from 'views/admin/default/variables/tableDataCheck'; +import tableDataComplex from 'views/admin/default/variables/tableDataComplex'; +// Assets +import Usa from 'img/dashboards/usa.png'; + +export default function Default() { + // Chakra Color Mode + + const brandColor = useColorModeValue('brand.500', 'white'); + const boxBg = useColorModeValue('secondaryGray.300', 'whiteAlpha.100'); + + return ( + + + + } + /> + } + name="Earnings" + value="$350.4" + /> + + } + /> + } + name="Spend this month" + value="$642.39" + /> + + + + + + + + + + } + name="Your balance" + value="$1,000" + /> + } + /> + } + name="New Tasks" + value="154" + /> + + } + /> + } + name="Total Projects" + value="2935" + /> + + + + + + + + + + + + + + + + + + {/* */} + + + + ); +} diff --git a/src/app/admin/layout.tsx b/src/app/admin/layout.tsx new file mode 100644 index 0000000..d978f93 --- /dev/null +++ b/src/app/admin/layout.tsx @@ -0,0 +1,94 @@ +'use client'; +// Chakra imports +import { + Portal, + Box, + useDisclosure, + useColorModeValue, +} from '@chakra-ui/react'; +import Footer from 'components/footer/FooterAdmin'; +// Layout components +import Navbar from 'components/navbar/NavbarAdmin'; +import Sidebar from 'components/sidebar/Sidebar'; +import { SidebarContext } from 'contexts/SidebarContext'; +import { PropsWithChildren, useEffect, useState } from 'react'; +import routes from 'routes'; +import { + getActiveNavbar, + getActiveNavbarText, + getActiveRoute, +} from 'utils/navigation'; + +interface DashboardLayoutProps extends PropsWithChildren { + [x: string]: any; +} + +// Custom Chakra theme +export default function AdminLayout(props: DashboardLayoutProps) { + const { children, ...rest } = props; + // states and functions + const [fixed] = useState(false); + const [toggleSidebar, setToggleSidebar] = useState(false); + // functions for changing the states from components + const { onOpen } = useDisclosure(); + + useEffect(() => { + window.document.documentElement.dir = 'ltr'; + }); + + const bg = useColorModeValue('secondaryGray.300', 'navy.900'); + + return ( + + + + + + + + + + + + {children} + + +