[Snyk] Upgrade @testing-library/jest-dom from 6.4.2 to 6.6.3

.eslintrc.cjs

@@ -0,0 +1,99 @@
+module.exports = {
+    env: {
+        browser: true,
+        es2021: true,
+        node: true
+    },
+    extends: [
+        'plugin:react/recommended',
+        'eslint:recommended',
+        'standard',
+        'plugin:jsx-a11y/recommended'
+    ],
+    overrides: [
+    ],
+    parser: '@babel/eslint-parser',
+    parserOptions: {
+        ecmaVersion: 'latest',
+        sourceType: 'module'
+    },
+    plugins: [
+        'react',
+        'jsx-a11y'
+    ],
+    rules: {
+        'react/react-in-jsx-scope': 'off',
+        indent: ['warn', 4],
+        'key-spacing': ['warn', { beforeColon: false, afterColon: true }],
+        'no-trailing-spaces': 'warn',
+        'no-mixed-spaces-and-tabs': 'warn',
+        'no-multi-spaces': 'warn',
+        'no-unused-vars': 'warn',
+        'no-undef': 'off',
+        'import/no-absolute-path': 'off',
+        eqeqeq: 'warn',
+        'array-callback-return': 'warn',
+        'react/no-unescaped-entities': 1,
+        'no-unexpected-multiline': 'warn',
+        'no-var': 'warn',
+        'prefer-const': 'warn',
+        'space-before-blocks': 'warn',
+        'space-before-function-paren': ['warn', 'never'],
+        'react/jsx-first-prop-new-line': [1, 'multiline'],
+        'space-in-parens': 'warn',
+        'spaced-comment': 'warn',
+        'arrow-spacing': 'warn',
+        'comma-style': 'warn',
+        'func-call-spacing': 'warn',
+        'comma-spacing': ['warn', { before: false, after: true }],
+        quotes: ['warn', 'single'],
+        'react/prop-types': 'off',
+        'prefer-rest-params': 'off',
+        'no-func-assign': 'off',
+        'no-invalid-this': 'off',
+        'react/no-unknown-property': 'off',
+        camelcase: 'off',
+        'react/jsx-key': 'off',
+        'require-jsdoc': 'off',
+        'guard-for-in': 'off',
+        'no-empty-pattern': 'off',
+
+        // ignore long strings
+        'max-len': 'off',
+        semi: [
+            'warn',
+            'always'
+        ],
+        'jsx-a11y/alt-text': 'warn',
+        'jsx-a11y/anchor-is-valid': 'warn',
+        'jsx-a11y/accessible-emoji': 'warn',
+        'jsx-a11y/anchor-has-content': 'warn',
+        'jsx-a11y/aria-activedescendant-has-tabindex': 'warn',
+        'jsx-a11y/aria-props': 'warn',
+        'jsx-a11y/aria-proptypes': 'warn',
+        'jsx-a11y/aria-role': 'warn',
+        'jsx-a11y/aria-unsupported-elements': 'warn',
+        'jsx-a11y/click-events-have-key-events': 'warn',
+        'jsx-a11y/heading-has-content': 'warn',
+        'jsx-a11y/html-has-lang': 'warn',
+        'jsx-a11y/iframe-has-title': 'warn',
+        'jsx-a11y/img-redundant-alt': 'warn',
+        'jsx-a11y/interactive-supports-focus': 'warn',
+        'jsx-a11y/label-has-associated-control': 'warn',
+        'jsx-a11y/media-has-caption': 'warn',
+        'jsx-a11y/mouse-events-have-key-events': 'warn',
+        'jsx-a11y/no-access-key': 'warn',
+        'jsx-a11y/no-autofocus': 'warn',
+        'jsx-a11y/no-distracting-elements': 'warn',
+        'jsx-a11y/no-interactive-element-to-noninteractive-role': 'warn',
+        'jsx-a11y/no-noninteractive-element-interactions': 'warn',
+        'jsx-a11y/no-noninteractive-element-to-interactive-role': 'warn',
+        'jsx-a11y/no-noninteractive-tabindex': 'warn',
+        'jsx-a11y/no-redundant-roles': 'warn',
+        'jsx-a11y/no-static-element-interactions': 'warn',
+        'jsx-a11y/role-has-required-aria-props': 'warn',
+        'jsx-a11y/role-supports-aria-props': 'warn',
+        'jsx-a11y/scope': 'warn',
+        'jsx-a11y/tabindex-no-positive': 'warn'
+    }
+};

docs/app/colors/page.tsx

@@ -1,9 +1,13 @@
 import ColorTemplate from "@/components/ColorTemplate"
 
+import FullHeightScroll from '@/components/layout/ScrollContainers/FullHeightScroll'
+
 export default function Home() {
   return (
-   <div className='flex justify-center mt-6'>
-      <ColorTemplate/>
-   </div>
+   <FullHeightScroll>
+      <div className='w-full' >
+         <ColorTemplate/>
+      </div>
+   </FullHeightScroll>
   )
 }

docs/app/layout.js

@@ -23,7 +23,7 @@ export default async function RootLayout({ children, ...props }) {
 
   return (
     <html lang="en">
-      <body className="h-screen flex flex-col overflow-hidden">
+      <body className="h-screen overflow-hidden">
         <Main darkModeSsrValue={darkModeSsrValue}>
           {children}
         </Main>

docs/app/page.tsx

@@ -8,6 +8,8 @@ export const metadata = {
 import HeroSection from './landingComponents/HeroSection'
 import LandingBgPattern from '@/components/Backgrounds/LandingBgPattern'
 
+import FullHeightScroll from '@/components/layout/ScrollContainers/FullHeightScroll'
+
 import MusicAppPlayerDemo from './landingComponents/MusicAppPlayerDemo'
 import ToolbarDemo from './landingComponents/ToolbarDemo'
 import AddToCartDemo from './landingComponents/AddToCartDemo'
@@ -19,9 +21,9 @@ import TrafficAnalyticsDemo from './landingComponents/TrafficAnalyticsDemo'
 
 export default function Home() {
   return (
-    <div className='min-h-screen '>
+      <FullHeightScroll >
       <LandingBgPattern />
-      <div className='lg:p-10 flex flex-col'>
+      <div className='lg:p-10'>
         <HeroSection />
         {/*  */}
         <div className='text-gray-1000 p-10 mt-10 flex space-x-4 w-full overflow-x-auto relative z-10'>
@@ -47,6 +49,6 @@ export default function Home() {
         </div>
         {/*  */}
       </div>
-    </div>
+    </FullHeightScroll>
   )
 }

docs/app/playground/page.tsx

@@ -10,21 +10,27 @@ import LinkPlayground from "./components/LinkPlayground"
 import TextPlayground from "./components/TextPlayground"
 import QuotePlayground from "./components/QuotePlayground"
 
+import FullHeightScroll from '@/components/layout/ScrollContainers/FullHeightScroll'
+
+
 const Playground = () => {
     return (
-        <div className='text-gray-900 p-8'>
-            <AvatarPlayground/>
-            <BadgePlayground/>
-            <ButtonPlayground/>
-            <BlockquotePlayground/>
-            <CodePlayground/>
-            <HeadingPlayground/>
-            <EmPlayground/>
-            <SeparatorPlayground/>
-            <LinkPlayground/>
-            <TextPlayground/>
-            <QuotePlayground/>
-        </div>
+        <FullHeightScroll>  
+            <div className='text-gray-900 p-8'>
+                <AvatarPlayground/>
+                <BadgePlayground/>
+                <ButtonPlayground/>
+                <BlockquotePlayground/>
+                <CodePlayground/>
+                <HeadingPlayground/>
+                <EmPlayground/>
+                <SeparatorPlayground/>
+                <LinkPlayground/>
+                <TextPlayground/>
+                <QuotePlayground />
+            </div>
+        </FullHeightScroll>
+
     );
     }
 

docs/app/showcase/layout.js

@@ -2,16 +2,21 @@
 import Heading from "@radui/ui/Heading"
 import Separator from "@radui/ui/Separator"
 
+import FullHeightScroll from '@/components/layout/ScrollContainers/FullHeightScroll'
+
+
 const ShowCase = ({children})=>{
-    return <div className='p-4 text-gray-1000 flex flex-col'>
-        <Heading as="h6" className='my-4'>
-            Music App
-        </Heading>
-        <Separator/>
-        <div className='overflow-hidden shadow-xl border border-gray-200 bg-gray-50 px-4 py-4 rounded'>
-            {children}
+    return <FullHeightScroll>
+        <div className='p-4 text-gray-1000'>
+            <Heading as="h6" className='my-4'>
+                Music App
+            </Heading>
+            <Separator/>
+            <div className='overflow-hidden shadow-xl border border-gray-200 bg-gray-50 px-4 py-4 rounded'>
+                {children}
+            </div>
         </div>
-    </div>
+    </FullHeightScroll>
 }
 
 export default ShowCase

docs/app/showcase/music-app/helpers/MusicPlayer.tsx

@@ -39,7 +39,7 @@ const PlayButton: React.FC = () => {
 
 const MusicPlayer: React.FC = () => {
     return (
-        <div className='fixed text-black bg-gradient-to-l from-gray-400 to-gray-50 text-gray-1000 bottom-0 w-full px-4 py-4 left-0 shadow-xl border border-gray-500 backdrop-blur-sm'>
+        <div className='text-black bg-gradient-to-l from-gray-400 to-gray-50 text-gray-1000 bottom-0 w-full px-4 py-4 left-0 shadow-xl border border-gray-500 backdrop-blur-sm'>
             <div className='flex items-center space-x-8'>
                 <ArtistBox />
                 <div className='text-black flex items-center space-x-4'>

docs/app/showcase/music-app/page.js

@@ -7,7 +7,7 @@ import TopArtists from './helpers/sections/TopArtists'
 import PlaylistHero from './helpers/sections/PlaylistHero'
 const MusicAppPage = () => {
     return <div >
-        <div className='flex h-ful'>
+        <div className='flex h-full'>
             {/* Sidebar */}
             <MusicSidebar/>
             {/* Main Content */}

docs/app/testing/disable_full_page_scroll/page.tsx

@@ -0,0 +1,17 @@
+import FullHeightScroll from "@/components/layout/ScrollContainers/FullHeightScroll";
+
+const FullPageScroll = () => {
+    return <FullHeightScroll scrollable={false}>
+        <div className="w-full h-full bg-gray-200">
+           {
+            Array.from({ length: 100 }).map((_, index) => (
+                <div key={index} className="w-full h-10 bg-gray-200">
+                    {index}
+                </div>
+            ))
+           }
+        </div>
+    </FullHeightScroll>
+}
+
+export default FullPageScroll;

docs/app/testing/full_page_scroll/page.tsx

@@ -0,0 +1,17 @@
+import FullHeightScroll from "@/components/layout/ScrollContainers/FullHeightScroll";
+
+const FullPageScroll = () => {
+    return <FullHeightScroll scrollable={true}>
+        <div className="w-full h-full bg-gray-200">
+           {
+            Array.from({ length: 100 }).map((_, index) => (
+                <div key={index} className="w-full h-10 bg-gray-200">
+                    {index}
+                </div>
+            ))
+           }
+        </div>
+    </FullHeightScroll>
+}
+
+export default FullPageScroll;

docs/components/ColorTemplate.js

@@ -13,10 +13,10 @@ const ColorBubble = ({ colorClass }) => {
   const ColorTemplate = () => {
 
 
-    return <div>
+    return <div className="overflow-x-scroll">
 
-      <div className={`p-4 space-y-0.5 `}>
-      <div className='flex'>
+      <div className={`p-4 space-y-0.5 max-w-[1200px] min-w-[800px] mx-auto`}>
+      <div className='flex mx-auto'>
                 <ColorBubble colorClass='bg-gray-50' />
                 <ColorBubble colorClass='bg-gray-100' />
                 <ColorBubble colorClass='bg-gray-200' />

docs/components/Main/Main.js

@@ -3,6 +3,7 @@ import Theme from '@/components/layout/Theme';
 import { useCallback, useState } from 'react';
 import Button from '@radui/ui/Button';
 import { parseCookies, setCookie } from 'nookies';
+import { NavBarContext } from '@/components/Main/NavBar/NavBarContext';
 
 import NavBar from './NavBar';
 
@@ -11,22 +12,27 @@ import NavBar from './NavBar';
 const MainLayout = ({ darkModeSsrValue, children }) => {
     const cookies = parseCookies();
     const [darkMode, setDarkMode] = useState(darkModeSsrValue === 'true');
+    const [isDocsNavOpen,setIsDocsNavOpen] = useState(false);
 
-
+    const sendValues = {
+        isDocsNavOpen,
+        setIsDocsNavOpen
+    }
 
 
     return (
         <Theme isDark={darkMode} >
-            <div className={`flex flex-col ${darkMode ? 'rad-ui-dark-theme bg-black' : 'bg-gray-50'}`} data-accent-color="red">
-                {/* Navbar start */}
-                <div className='flex-shrink-0'>
+                <NavBarContext.Provider value={sendValues}>
+                <div className={`flex flex-col flex-1 h-screen ${darkMode ? 'rad-ui-dark-theme bg-black' : ''}`} data-accent-color="red">
+                    {/* Navbar start */}
                 <NavBar cookies={cookies} darkMode={darkMode} setDarkMode={setDarkMode} setCookie={setCookie} />
-                </div>
                 {/* Navbar end */}
-                <div className='flex flex-1 overflow-hidden'>
+                <>
                     {children}
-                </div>
+                </>
             </div>
+                </NavBarContext.Provider>
+
 
         </Theme>
     );