Set version 9.0.0

removed deprecated props version updates package json npm format all doc
primefaces · Mar 10, 2023 · a54af8b · a54af8b
1 parent 047c3e0
commit a54af8b
Show file tree

Hide file tree

Showing 20 changed files with 186 additions and 181 deletions.
diff --git a/demo/components/CodeHighlight.js b/demo/components/CodeHighlight.js
@@ -3,7 +3,9 @@ import React from 'react';
 export function CodeHighlight(props) {
     return (
         <pre {...props} className="border-round surface-ground text-900 p-5 overflow-auto">
-            <code className="-mt-4 p-0 line-height-3 block" style={{fontFamily: 'monaco, Consolas, "Lucida Console", monospace'}}>{props.children}</code>
+            <code className="-mt-4 p-0 line-height-3 block" style={{ fontFamily: 'monaco, Consolas, "Lucida Console", monospace' }}>
+                {props.children}
+            </code>
         </pre>
     );
 }
diff --git 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) => {
                     <Button icon="pi pi-plus" type="button" onClick={incrementScale} className="p-button-text p-button-rounded w-2rem h-2rem ml-2" disabled={layoutConfig.scale === scales[scales.length - 1]}></Button>
                 </div>
 
-                { !props.simple &&
+                {!props.simple && (
                     <>
                         <h5>Menu Type</h5>
-                        <div class="flex">
+                        <div className="flex">
                             <div className="field-radiobutton flex-1">
                                 <RadioButton name="menuMode" value={'static'} checked={layoutConfig.menuMode === 'static'} onChange={(e) => changeMenuMode(e)} inputId="mode1"></RadioButton>
                                 <label htmlFor="mode1">Static</label>
@@ -117,7 +116,7 @@ const AppConfig = (props) => {
                             </div>
                         </div>
                     </>
-                }
+                )}
 
                 <h5>Input Style</h5>
                 <div className="flex">

diff --git 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
@@ -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
@@ -1,9 +1,7 @@
 import AppMenu from './AppMenu';
 
 const AppSidebar = () => {
-    return (
-        <AppMenu></AppMenu>
-    );
-}
+    return <AppMenu></AppMenu>;
+};
 
-export default AppSidebar;
+export default AppSidebar;
diff --git 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
@@ -9,11 +9,7 @@ import '../styles/demo/Demos.scss';
 
 export default function MyApp({ Component, pageProps }) {
     if (Component.getLayout) {
-        return (
-            <LayoutProvider>
-                {Component.getLayout(<Component {...pageProps} />)}
-            </LayoutProvider>
-        )
+        return <LayoutProvider>{Component.getLayout(<Component {...pageProps} />)}</LayoutProvider>;
     } else {
         return (
             <LayoutProvider>

diff --git a/pages/auth/access/index.js b/pages/auth/access/index.js
@@ -11,7 +11,7 @@ const AccessDeniedPage = () => {
     return (
         <div className="surface-ground flex align-items-center justify-content-center min-h-screen min-w-screen overflow-hidden">
             <div className="flex flex-column align-items-center justify-content-center">
-                <img src={`${contextPath}/demo/images/access/logo-orange.svg`} alt="Sakai logo" className="mb-5 w-6rem flex-shrink-0"/>
+                <img src={`${contextPath}/demo/images/access/logo-orange.svg`} alt="Sakai logo" className="mb-5 w-6rem flex-shrink-0" />
                 <div style={{ borderRadius: '56px', padding: '0.3rem', background: 'linear-gradient(180deg, rgba(247, 149, 48, 0.4) 10%, rgba(247, 149, 48, 0) 30%)' }}>
                     <div className="w-full surface-card py-8 px-5 sm:px-8 flex flex-column align-items-center" style={{ borderRadius: '53px' }}>
                         <div className="flex justify-content-center align-items-center bg-pink-500 border-circle" style={{ height: '3.2rem', width: '3.2rem' }}>
@@ -20,11 +20,11 @@ const AccessDeniedPage = () => {
                         <h1 className="text-900 font-bold text-5xl mb-2">Access Denied</h1>
                         <div className="text-600 mb-5">You do not have the necessary permisions.</div>
                         <img src={`${contextPath}/demo/images/access/asset-access.svg`} alt="Error" className="mb-5" width="80%" />
-                        <Button icon="pi pi-arrow-left" label="Go to Dashboard" className="p-button-text" onClick={() => router.push('/')}/>
+                        <Button icon="pi pi-arrow-left" label="Go to Dashboard" className="p-button-text" onClick={() => router.push('/')} />
                     </div>
                 </div>
             </div>
-        </div> 
+        </div>
     );
 };
 

diff --git a/pages/auth/error/index.js b/pages/auth/error/index.js
@@ -11,7 +11,7 @@ const ErrorPage = () => {
     return (
         <div className="surface-ground flex align-items-center justify-content-center min-h-screen min-w-screen overflow-hidden">
             <div className="flex flex-column align-items-center justify-content-center">
-                <img src={`${contextPath}/demo/images/error/logo-error.svg`} alt="Sakai logo" className="mb-5 w-6rem flex-shrink-0"/>
+                <img src={`${contextPath}/demo/images/error/logo-error.svg`} alt="Sakai logo" className="mb-5 w-6rem flex-shrink-0" />
                 <div style={{ borderRadius: '56px', padding: '0.3rem', background: 'linear-gradient(180deg, rgba(233, 30, 99, 0.4) 10%, rgba(33, 150, 243, 0) 30%)' }}>
                     <div className="w-full surface-card py-8 px-5 sm:px-8 flex flex-column align-items-center" style={{ borderRadius: '53px' }}>
                         <div className="flex justify-content-center align-items-center bg-pink-500 border-circle" style={{ height: '3.2rem', width: '3.2rem' }}>
@@ -20,11 +20,11 @@ const ErrorPage = () => {
                         <h1 className="text-900 font-bold text-5xl mb-2">Error Occured</h1>
                         <div className="text-600 mb-5">Something went wrong.</div>
                         <img src={`${contextPath}/demo/images/error/asset-error.svg`} alt="Error" className="mb-5" width="80%" />
-                        <Button icon="pi pi-arrow-left" label="Go to Dashboard" className="p-button-text" onClick={() => router.push('/')}/>
+                        <Button icon="pi pi-arrow-left" label="Go to Dashboard" className="p-button-text" onClick={() => router.push('/')} />
                     </div>
                 </div>
             </div>
-        </div> 
+        </div>
     );
 };
 
@@ -35,6 +35,6 @@ ErrorPage.getLayout = function getLayout(page) {
             <AppConfig />
         </React.Fragment>
     );
-}
+};
 
 export default ErrorPage;
diff --git 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 (
         <div className={containerClassName}>
             <div className="flex flex-column align-items-center justify-content-center">
-                <img src={`${contextPath}/layout/images/logo-${layoutConfig.colorScheme === 'light' ? 'dark' : 'white'}.svg`} alt="Sakai logo" className="mb-5 w-6rem flex-shrink-0"/>
+                <img src={`${contextPath}/layout/images/logo-${layoutConfig.colorScheme === 'light' ? 'dark' : 'white'}.svg`} alt="Sakai logo" className="mb-5 w-6rem flex-shrink-0" />
                 <div style={{ borderRadius: '56px', padding: '0.3rem', background: 'linear-gradient(180deg, var(--primary-color) 10%, rgba(33, 150, 243, 0) 30%)' }}>
                     <div className="w-full surface-card py-8 px-5 sm:px-8" style={{ borderRadius: '53px' }}>
                         <div className="text-center mb-5">
@@ -38,14 +38,12 @@ const LoginPage = () => {
                             <label htmlFor="password1" className="block text-900 font-medium text-xl mb-2">
                                 Password
                             </label>
-                            <Password inputid="password1" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="Password" toggleMask className="w-full mb-5" inputClassName='w-full p-3 md:w-30rem'></Password>
+                            <Password inputid="password1" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="Password" toggleMask className="w-full mb-5" inputClassName="w-full p-3 md:w-30rem"></Password>
 
                             <div className="flex align-items-center justify-content-between mb-5 gap-5">
                                 <div className="flex align-items-center">
                                     <Checkbox inputid="rememberme1" checked={checked} onChange={(e) => setChecked(e.checked)} className="mr-2"></Checkbox>
-                                    <label htmlFor="rememberme1">
-                                        Remember me
-                                    </label>
+                                    <label htmlFor="rememberme1">Remember me</label>
                                 </div>
                                 <a className="font-medium no-underline ml-2 text-right cursor-pointer" style={{ color: 'var(--primary-color)' }}>
                                     Forgot password?

diff --git a/pages/documentation/index.js b/pages/documentation/index.js
@@ -10,15 +10,22 @@ const Documentation = () => {
                 <div className="col-12">
                     <div className="card docs">
                         <h4>Current Version</h4>
-                        <p>React 17.x and PrimeReact 7.x</p>
+                        <p>React 18.x and PrimeReact 9.x</p>
 
                         <h5>Getting Started</h5>
                         <p>
-                            Sakai is an application template for React based on the popular <a href="https://nextjs.org/" className="font-medium hover:underline">NextJS</a> framework. To get started, clone the <a href="https://github.com/primefaces/sakai-react" className="font-medium hover:underline">repository</a> from 
-                            GitHub and install the dependencies with npm or yarn.
+                            Sakai is an application template for React based on the popular{' '}
+                            <a href="https://nextjs.org/" className="font-medium hover:underline">
+                                NextJS
+                            </a>{' '}
+                            framework. To get started, clone the{' '}
+                            <a href="https://github.com/primefaces/sakai-react" className="font-medium hover:underline">
+                                repository
+                            </a>{' '}
+                            from GitHub and install the dependencies with npm or yarn.
                         </p>
                         <CodeHighlight>
-                        {`
+                            {`
 "npm install" or "yarn"
 `}
                         </CodeHighlight>
@@ -29,7 +36,7 @@ const Documentation = () => {
                         </p>
 
                         <CodeHighlight>
-                        {`
+                            {`
 "npm run dev" or "yarn dev"
 `}
                         </CodeHighlight>
@@ -38,34 +45,54 @@ const Documentation = () => {
                         <p>Dependencies of Sakai are listed below and needs to be defined at package.json.</p>
 
                         <CodeHighlight lang="js">
-                        {`
-"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
 `}
                         </CodeHighlight>
 
                         <h5>Structure</h5>
                         <p>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.</p>
-                        <ul class="line-height-3">
-                            <li><span class="text-primary font-medium">layout</span>: Main layout files, needs to be present</li>
-                            <li><span class="text-primary font-medium">demo</span>: Contains demo related utilities and helpers</li>
-                            <li><span class="text-primary font-medium">pages</span>: Demo pages</li>
-                            <li><span class="text-primary font-medium">public/demo</span>: Assets used in demos</li>
-                            <li><span class="text-primary font-medium">public/layout</span>: Assets used in layout such as logo</li>
-                            <li><span class="text-primary font-medium">styles/demo</span>: CSS files only used in demos</li>
-                            <li><span class="text-primary font-medium">styles/layout</span>: SCSS files of the core layout</li>
+                        <ul className="line-height-3">
+                            <li>
+                                <span className="text-primary font-medium">layout</span>: Main layout files, needs to be present
+                            </li>
+                            <li>
+                                <span className="text-primary font-medium">demo</span>: Contains demo related utilities and helpers
+                            </li>
+                            <li>
+                                <span className="text-primary font-medium">pages</span>: Demo pages
+                            </li>
+                            <li>
+                                <span className="text-primary font-medium">public/demo</span>: Assets used in demos
+                            </li>
+                            <li>
+                                <span className="text-primary font-medium">public/layout</span>: Assets used in layout such as logo
+                            </li>
+                            <li>
+                                <span className="text-primary font-medium">styles/demo</span>: CSS files only used in demos
+                            </li>
+                            <li>
+                                <span className="text-primary font-medium">styles/layout</span>: SCSS files of the core layout
+                            </li>
                         </ul>
 
                         <h5>Menu</h5>
-                        <p>Main menu is defined at <span class="text-primary font-medium">AppMenu.js</span> file based on <a href="https://www.primefaces.org/primereact/menumodel/" className="font-medium hover:underline">MenuModel API</a>.</p>
+                        <p>
+                            Main menu is defined at <span className="text-primary font-medium">AppMenu.js</span> file based on{' '}
+                            <a href="https://www.primefaces.org/primereact/menumodel/" className="font-medium hover:underline">
+                                MenuModel API
+                            </a>
+                            .
+                        </p>
 
                         <h5>Integration with Existing NextJS Applications</h5>
                         <p>Only the folders that are related to the layout needs to move in to your project. We've created a short tutorial with details.</p>
-                        
+
                         <div className={styles['video-container']}>
-                            <iframe className={styles['video']} width="560" height="315" src="https://www.youtube.com/embed/jnm0_U6zJFY" frameborder="0" allowfullscreen></iframe>
+                            <iframe className={styles['video']} width="560" height="315" src="https://www.youtube.com/embed/jnm0_U6zJFY" allowFullScreen></iframe>
                         </div>
 
                         <h5>PrimeReact Theme</h5>
@@ -80,7 +107,7 @@ const Documentation = () => {
 
                         <h6>src/layout/_variables.scss</h6>
                         <CodeHighlight lang="scss">
-                        {`
+                            {`
 /* General */
 $scale:14px;                    /* initial font size */ 
 $borderRadius:12px;             /* border radius of layout element e.g. card, sidebar */