From a54af8bd62c2f7db11952be1e29dd8b881b5257e Mon Sep 17 00:00:00 2001 From: habubey Date: Fri, 10 Mar 2023 13:32:15 +0300 Subject: [PATCH] Set version 9.0.0 removed deprecated props version updates package json npm format all doc --- demo/components/CodeHighlight.js | 4 +- layout/AppConfig.js | 29 +++++----- layout/AppMenu.js | 2 +- layout/AppMenuitem.js | 6 +- layout/AppSidebar.js | 8 +-- package.json | 25 ++++---- pages/_app.js | 6 +- pages/auth/access/index.js | 6 +- pages/auth/error/index.js | 8 +-- pages/auth/login/index.js | 10 ++-- pages/documentation/index.js | 69 +++++++++++++++------- pages/index.js | 4 +- pages/landing/index.js | 57 ++++++++++-------- pages/pages/notfound/index.js | 4 +- pages/uikit/button/index.js | 6 +- pages/uikit/input/index.js | 10 +--- pages/uikit/invalidstate/index.js | 96 +++++++++++++++---------------- pages/uikit/list/index.js | 3 +- pages/uikit/panel/index.js | 12 +--- pages/uikit/table/index.js | 2 +- 20 files changed, 186 insertions(+), 181 deletions(-) diff --git a/demo/components/CodeHighlight.js b/demo/components/CodeHighlight.js index 263348c2..210a3b56 100644 --- a/demo/components/CodeHighlight.js +++ b/demo/components/CodeHighlight.js @@ -3,7 +3,9 @@ import React from 'react'; export function CodeHighlight(props) { return ( 
-            {props.children}
+            
+                {props.children}
+
); } diff --git a/layout/AppConfig.js b/layout/AppConfig.js index 1f28261c..2c6fa9f9 100644 --- a/layout/AppConfig.js +++ b/layout/AppConfig.js @@ -50,22 +50,22 @@ const AppConfig = (props) => { } const id = linkElement.getAttribute('id'); - const cloneLinkElement = linkElement.cloneNode(true); + const cloneLinkElement = linkElement.cloneNode(true); - cloneLinkElement.setAttribute('href', href); - cloneLinkElement.setAttribute('id', id + '-clone'); + cloneLinkElement.setAttribute('href', href); + cloneLinkElement.setAttribute('id', id + '-clone'); - linkElement.parentNode.insertBefore(cloneLinkElement, linkElement.nextSibling); + linkElement.parentNode.insertBefore(cloneLinkElement, linkElement.nextSibling); - cloneLinkElement.addEventListener('load', () => { - linkElement.remove(); + cloneLinkElement.addEventListener('load', () => { + linkElement.remove(); - const element = document.getElementById(id); // re-check - element && element.remove(); + const element = document.getElementById(id); // re-check + element && element.remove(); - cloneLinkElement.setAttribute('id', id); - onComplete && onComplete(); - }); + cloneLinkElement.setAttribute('id', id); + onComplete && onComplete(); + }); }; const decrementScale = () => { @@ -80,7 +80,6 @@ const AppConfig = (props) => { document.documentElement.style.fontSize = layoutConfig.scale + 'px'; }; - useEffect(() => { applyScale(); }, [layoutConfig.scale]); @@ -103,10 +102,10 @@ const AppConfig = (props) => { - { !props.simple && + {!props.simple && ( <>
Menu Type
-
+
changeMenuMode(e)} inputId="mode1"> @@ -117,7 +116,7 @@ const AppConfig = (props) => {
- } + )}
Input Style
diff --git a/layout/AppMenu.js b/layout/AppMenu.js index 59bf9d87..94314e78 100644 --- a/layout/AppMenu.js +++ b/layout/AppMenu.js @@ -114,7 +114,7 @@ const AppMenu = () => { items: [ { label: 'Submenu 1.1.1', icon: 'pi pi-fw pi-bookmark' }, { label: 'Submenu 1.1.2', icon: 'pi pi-fw pi-bookmark' }, - { label: 'Submenu 1.1.3', icon: 'pi pi-fw pi-bookmark' }, + { label: 'Submenu 1.1.3', icon: 'pi pi-fw pi-bookmark' } ] }, { diff --git a/layout/AppMenuitem.js b/layout/AppMenuitem.js index 6b317561..486f0b21 100644 --- a/layout/AppMenuitem.js +++ b/layout/AppMenuitem.js @@ -45,10 +45,8 @@ const AppMenuitem = (props) => { } // toggle active state - if (item.items) - setActiveMenu(active ? props.parentKey : key); - else - setActiveMenu(key); + if (item.items) setActiveMenu(active ? props.parentKey : key); + else setActiveMenu(key); }; const subMenu = item.items && item.visible !== false && ( diff --git a/layout/AppSidebar.js b/layout/AppSidebar.js index 8a4a0d37..e77ca410 100644 --- a/layout/AppSidebar.js +++ b/layout/AppSidebar.js @@ -1,9 +1,7 @@ import AppMenu from './AppMenu'; const AppSidebar = () => { - return ( - - ); -} + return ; +}; -export default AppSidebar; \ No newline at end of file +export default AppSidebar; diff --git a/package.json b/package.json index a1e22d84..7647ef77 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "sakai-react", - "version": "8.0.1-SNAPSHOT", + "version": "9.0.0", "private": false, "scripts": { "dev": "next dev", @@ -11,24 +11,19 @@ "format": "prettier --write \"**/**/*.{js,ts,tsx}\"" }, "dependencies": { - "@fullcalendar/core": "^5.11.2", - "@fullcalendar/daygrid": "^5.11.2", - "@fullcalendar/interaction": "^5.11.2", - "@fullcalendar/react": "^5.11.2", - "@fullcalendar/timegrid": "^5.11.2", - "chart.js": "^3.9.1", + "chart.js": "^4.2.1", "next": "12.3.1", - "primeflex": "^3.2.1", + "primeflex": "^3.3.0", "primeicons": "^6.0.1", - "primereact": "^8.6.1", - "react": "17.0.2", - "react-dom": "17.0.2", + "primereact": "^9.2.0", + "react": "18.2.0", + "react-dom": "18.2.0", "react-transition-group": "^4.4.5" }, "devDependencies": { - "eslint": "8.21.0", - "eslint-config-next": "12.2.4", - "prettier": "2.7.1", - "sass": "^1.54.4" + "eslint": "8.35.0", + "eslint-config-next": "13.2.4", + "prettier": "2.8.4", + "sass": "^1.58.3" } } diff --git a/pages/_app.js b/pages/_app.js index 0fe37d2f..99ceaba2 100644 --- a/pages/_app.js +++ b/pages/_app.js @@ -9,11 +9,7 @@ import '../styles/demo/Demos.scss'; export default function MyApp({ Component, pageProps }) { if (Component.getLayout) { - return ( - - {Component.getLayout()} - - ) + return {Component.getLayout()}; } else { return ( diff --git a/pages/auth/access/index.js b/pages/auth/access/index.js index 54a6e477..b9f84b82 100644 --- a/pages/auth/access/index.js +++ b/pages/auth/access/index.js @@ -11,7 +11,7 @@ const AccessDeniedPage = () => { return (
- Sakai logo + Sakai logo
@@ -20,11 +20,11 @@ const AccessDeniedPage = () => {

Access Denied

You do not have the necessary permisions.
Error -
-
+
); }; diff --git a/pages/auth/error/index.js b/pages/auth/error/index.js index c04076d5..0db0ad18 100644 --- a/pages/auth/error/index.js +++ b/pages/auth/error/index.js @@ -11,7 +11,7 @@ const ErrorPage = () => { return (
- Sakai logo + Sakai logo
@@ -20,11 +20,11 @@ const ErrorPage = () => {

Error Occured

Something went wrong.
Error -
-
+
); }; @@ -35,6 +35,6 @@ ErrorPage.getLayout = function getLayout(page) { ); -} +}; export default ErrorPage; diff --git a/pages/auth/login/index.js b/pages/auth/login/index.js index 65fa5dec..78ca4f5f 100644 --- a/pages/auth/login/index.js +++ b/pages/auth/login/index.js @@ -15,12 +15,12 @@ const LoginPage = () => { const { layoutConfig } = useContext(LayoutContext); const contextPath = getConfig().publicRuntimeConfig.contextPath; const router = useRouter(); - const containerClassName = classNames('surface-ground flex align-items-center justify-content-center min-h-screen min-w-screen overflow-hidden', {'p-input-filled': layoutConfig.inputStyle === 'filled'}); + const containerClassName = classNames('surface-ground flex align-items-center justify-content-center min-h-screen min-w-screen overflow-hidden', { 'p-input-filled': layoutConfig.inputStyle === 'filled' }); return (
- Sakai logo + Sakai logo
@@ -38,14 +38,12 @@ const LoginPage = () => { - setPassword(e.target.value)} placeholder="Password" toggleMask className="w-full mb-5" inputClassName='w-full p-3 md:w-30rem'> + setPassword(e.target.value)} placeholder="Password" toggleMask className="w-full mb-5" inputClassName="w-full p-3 md:w-30rem">
setChecked(e.checked)} className="mr-2"> - +
Forgot password? diff --git a/pages/documentation/index.js b/pages/documentation/index.js index 0bb91266..d142dd7f 100644 --- a/pages/documentation/index.js +++ b/pages/documentation/index.js @@ -10,15 +10,22 @@ const Documentation = () => {

Current Version

-

React 17.x and PrimeReact 7.x

+

React 18.x and PrimeReact 9.x

Getting Started

- Sakai is an application template for React based on the popular NextJS framework. To get started, clone the repository from - GitHub and install the dependencies with npm or yarn. + Sakai is an application template for React based on the popular{' '} + + NextJS + {' '} + framework. To get started, clone the{' '} + + repository + {' '} + from GitHub and install the dependencies with npm or yarn.

- {` + {` "npm install" or "yarn" `} @@ -29,7 +36,7 @@ const Documentation = () => {

- {` + {` "npm run dev" or "yarn dev" `} @@ -38,34 +45,54 @@ const Documentation = () => {

Dependencies of Sakai are listed below and needs to be defined at package.json.

- {` -"primereact": "^8.6.0", //required: PrimeReact components + {` +"primereact": "^9.2.0", //required: PrimeReact components "primeicons": "^6.0.1", //required: Icons -"primeflex": "^3.2.1", //required: Utility CSS classes -"react-transition-group": "^4.4.1", //required: PrimeReact animations +"primeflex": "^3.3.0", //required: Utility CSS classes +"react-transition-group": "^4.4.5", //required: PrimeReact animations `}
Structure

Sakai consists of a couple folders, demos and core has been separated so that you can easily remove what is not necessary for your application.

-
    -
  • layout: Main layout files, needs to be present
    • -
  • demo: Contains demo related utilities and helpers
    • -
  • pages: Demo pages
    • -
  • public/demo: Assets used in demos
    • -
  • public/layout: Assets used in layout such as logo
    • -
  • styles/demo: CSS files only used in demos
    • -
  • styles/layout: SCSS files of the core layout
    • +
      +
    • + layout: Main layout files, needs to be present +
      • +
    • + demo: Contains demo related utilities and helpers +
      • +
    • + pages: Demo pages +
      • +
    • + public/demo: Assets used in demos +
      • +
    • + public/layout: Assets used in layout such as logo +
      • +
    • + styles/demo: CSS files only used in demos +
      • +
    • + styles/layout: SCSS files of the core layout +
    Menu
    -

    Main menu is defined at AppMenu.js file based on MenuModel API.

    +

    + Main menu is defined at AppMenu.js file based on{' '} + + MenuModel API + + . +

    Integration with Existing NextJS Applications

    Only the folders that are related to the layout needs to move in to your project. We've created a short tutorial with details.

    - +
    - +
    PrimeReact Theme
    @@ -80,7 +107,7 @@ const Documentation = () => {
    src/layout/_variables.scss
    - {` + {` /* General */ $scale:14px; /* initial font size */ $borderRadius:12px; /* border radius of layout element e.g. card, sidebar */ diff --git a/pages/index.js b/pages/index.js index eb4630b5..b1bb6a55 100644 --- a/pages/index.js +++ b/pages/index.js @@ -373,9 +373,7 @@ const Dashboard = () => {
diff --git a/pages/landing/index.js b/pages/landing/index.js index fc45e80d..305bd611 100644 --- a/pages/landing/index.js +++ b/pages/landing/index.js @@ -29,27 +29,27 @@ const LandingPage = () => {
@@ -63,7 +63,8 @@ const LandingPage = () => {
+ style={{ background: 'linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), radial-gradient(77.36% 256.97% at 77.36% 57.52%, #EEEFAF 0%, #C3E3FA 100%)', clipPath: 'ellipse(150% 87% at 93% 13%)' }} + >

Eu sem integereget magna fermentum @@ -90,7 +91,8 @@ const LandingPage = () => { padding: '2px', borderRadius: '10px', background: 'linear-gradient(90deg, rgba(253, 228, 165, 0.2), rgba(187, 199, 205, 0.2)), linear-gradient(180deg, rgba(253, 228, 165, 0.2), rgba(187, 199, 205, 0.2))' - }}> + }} + >
@@ -108,7 +110,8 @@ const LandingPage = () => { padding: '2px', borderRadius: '10px', background: 'linear-gradient(90deg, rgba(145,226,237,0.2),rgba(251, 199, 145, 0.2)), linear-gradient(180deg, rgba(253, 228, 165, 0.2), rgba(172, 180, 223, 0.2))' - }}> + }} + >
@@ -126,7 +129,8 @@ const LandingPage = () => { padding: '2px', borderRadius: '10px', background: 'linear-gradient(90deg, rgba(145, 226, 237, 0.2), rgba(172, 180, 223, 0.2)), linear-gradient(180deg, rgba(172, 180, 223, 0.2), rgba(246, 158, 188, 0.2))' - }}> + }} + >
@@ -144,7 +148,8 @@ const LandingPage = () => { padding: '2px', borderRadius: '10px', background: 'linear-gradient(90deg, rgba(187, 199, 205, 0.2),rgba(251, 199, 145, 0.2)), linear-gradient(180deg, rgba(253, 228, 165, 0.2),rgba(145, 210, 204, 0.2))' - }}> + }} + >
@@ -162,7 +167,8 @@ const LandingPage = () => { padding: '2px', borderRadius: '10px', background: 'linear-gradient(90deg, rgba(187, 199, 205, 0.2),rgba(246, 158, 188, 0.2)), linear-gradient(180deg, rgba(145, 226, 237, 0.2),rgba(160, 210, 250, 0.2))' - }}> + }} + >
@@ -180,7 +186,8 @@ const LandingPage = () => { padding: '2px', borderRadius: '10px', background: 'linear-gradient(90deg, rgba(251, 199, 145, 0.2), rgba(246, 158, 188, 0.2)), linear-gradient(180deg, rgba(172, 180, 223, 0.2), rgba(212, 162, 221, 0.2))' - }}> + }} + >
@@ -198,7 +205,8 @@ const LandingPage = () => { padding: '2px', borderRadius: '10px', background: 'linear-gradient(90deg, rgba(145, 210, 204, 0.2), rgba(160, 210, 250, 0.2)), linear-gradient(180deg, rgba(187, 199, 205, 0.2), rgba(145, 210, 204, 0.2))' - }}> + }} + >
@@ -216,7 +224,8 @@ const LandingPage = () => { padding: '2px', borderRadius: '10px', background: 'linear-gradient(90deg, rgba(145, 210, 204, 0.2), rgba(212, 162, 221, 0.2)), linear-gradient(180deg, rgba(251, 199, 145, 0.2), rgba(160, 210, 250, 0.2))' - }}> + }} + >
@@ -234,7 +243,8 @@ const LandingPage = () => { padding: '2px', borderRadius: '10px', background: 'linear-gradient(90deg, rgba(160, 210, 250, 0.2), rgba(212, 162, 221, 0.2)), linear-gradient(180deg, rgba(246, 158, 188, 0.2), rgba(212, 162, 221, 0.2))' - }}> + }} + >
@@ -247,7 +257,8 @@ const LandingPage = () => {
+ style={{ borderRadius: '20px', background: 'linear-gradient(0deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)), radial-gradient(77.36% 256.97% at 77.36% 57.52%, #EFE1AF 0%, #C3DCFA 100%)' }} + >

Joséphine Miller

Peak Interactive diff --git a/pages/pages/notfound/index.js b/pages/pages/notfound/index.js index 09b93a10..49f9f6ba 100644 --- a/pages/pages/notfound/index.js +++ b/pages/pages/notfound/index.js @@ -12,7 +12,7 @@ const NotFoundPage = () => { return (
- Sakai logo + Sakai logo
404 @@ -54,7 +54,7 @@ const NotFoundPage = () => {
-
+
); }; diff --git a/pages/uikit/button/index.js b/pages/uikit/button/index.js index dc528806..42df7bf7 100644 --- a/pages/uikit/button/index.js +++ b/pages/uikit/button/index.js @@ -132,19 +132,19 @@ const ButtonDemo = () => {
Template