Merge pull request #32 from neo4j-labs/feature/migrate-to-needle-vers…

…ion-3 Feature/migrate to needle version 3
neo4j-labs · Nov 25, 2024 · 8695a32 · 8695a32
2 parents d268c9b + 6658a87
commit 8695a32
Show file tree

Hide file tree

Showing 14 changed files with 5,405 additions and 99 deletions.
diff --git a/.gitignore b/.gitignore
@@ -130,4 +130,5 @@ dist
 .pnp.*
 package-lock.json
 
-docs/build
+docs/build
+vite.config.ts
diff --git a/package.json b/package.json
@@ -11,8 +11,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@neo4j-ndl/base": "2.6.0",
-    "@neo4j-ndl/react": "2.6.2",
+    "@neo4j-ndl/base": "^3.0.14",
+    "@neo4j-ndl/react": "^3.0.24",
     "@tanstack/react-table": "^8.9.3",
     "autoprefixer": "^10.4.17",
     "eslint-plugin-react": "^7.33.2",

diff --git a/src/landingPage/components/Card.tsx b/src/landingPage/components/Card.tsx
@@ -28,7 +28,7 @@ export default function Card({
                 alt='Image description'
               />
               <div className='overlay-text w-full max-h-full object-contain'>
-                <EyeIconOutline className='n-w-6 n-h-6' />
+                <EyeIconOutline className='n-size-token-7' />
                 <Typography variant='body-medium'>View live preview</Typography>
               </div>
             </a>
@@ -41,10 +41,10 @@ export default function Card({
               <Typography variant='body-medium'>{description}</Typography>
             </div>
           </div>
-          <div className='Footer w-full flex content-center justify-center'>
+          <div className='Footer w-full flex content-center justify-center pb-4'>
             <Link to={sourceCode} target='_blank'>
               <Button>
-                <CodeBracketIconOutline className='n-w-6 n-h-6' /> &emsp; Source code
+                <CodeBracketIconOutline className='n-size-token-7' /> &emsp; Source code
               </Button>
             </Link>
           </div>

diff --git a/src/templates/cybersecurity/Home.tsx b/src/templates/cybersecurity/Home.tsx
@@ -6,7 +6,7 @@ import {
   StatusIndicator,
   Tabs,
   TextInput,
-  Tip,
+  Tooltip,
   Typography,
   Widget,
 } from '@neo4j-ndl/react';
@@ -48,18 +48,18 @@ const columns = [
     header: () => <b>Status</b>,
     cell: (info) => (
       <>
-        <StatusIndicator type={info.getValue() != 'Up' ? 'danger' : 'success'} />
+        <StatusIndicator type={info.getValue() != 'Up' ? 'danger' : 'success'} className='mr-2' />
         {info.getValue().startsWith('CVE') ? (
           <div className='flex flex-column'>
             CVE Detected
-            <Tip>
-              <Tip.Trigger>
-                <InformationCircleIconOutline className='n-w-4 n-h-4 ml-2' />
-              </Tip.Trigger>
-              <Tip.Content>
-                <Tip.Body>{info.renderValue()}</Tip.Body>
-              </Tip.Content>
-            </Tip>
+            <Tooltip type='simple'>
+              <Tooltip.Trigger>
+                <InformationCircleIconOutline className='n-size-token-6 ml-2' />
+              </Tooltip.Trigger>
+              <Tooltip.Content>
+                <Tooltip.Body>{info.renderValue()}</Tooltip.Body>
+              </Tooltip.Content>
+            </Tooltip>
           </div>
         ) : (
           <>{info.renderValue()}</>
@@ -104,33 +104,36 @@ export default function Home() {
   return (
     <>
       <Header title='CyberSecurity' navItems={[]} useNeo4jConnect={false} userHeader={false} />
-
       <div className='landing-page n-bg-palette-neutral-bg-default'>
         <form className={`search-bar ${isSearchInitiated ? 'top' : 'center'}`} onSubmit={handleSearch}>
           <div
             onTransitionEnd={displayResult}
             className={`text-input-container ${isSearchInitiated ? 'search-initiated' : ''}`}
           >
             <TextInput
-              type='text'
               value={searchQuery}
               onChange={(e) => setSearchQuery(e.target.value)}
-              placeholder='Search...'
               helpText='Search for server, IP, domain, etc.'
-              fluid={true}
-              rightIcon={
-                <IconButton aria-label='Search Icon' clean size='small' className='-mt-1' type='submit'>
+              isFluid={true}
+              rightElement={
+                <IconButton ariaLabel='Search Icon' isClean size='small' className='-mt-1'>
                   <MagnifyingGlassIconOutline className={isSearchInitiated ? 'n-w-4 n-h-4' : 'n-w-6 n-h-6'} />
                 </IconButton>
               }
+              htmlAttributes={{
+                type: 'text',
+                placeholder: 'Search...',
+              }}
             />
           </div>
         </form>
         <Widget
           className='n-bg-palette-neutral-bg-weak min-h-[60%] min-w-[60%] flex flex-col search-result'
           header=''
           isElevated={true}
-          id='search-result'
+          htmlAttributes={{
+            id: 'search-result',
+          }}
         >
           <Flex flexDirection='column' justifyContent='space-between'>
             <div>
@@ -145,7 +148,7 @@ export default function Home() {
                     tableInstance={table}
                     isKeyboardNavigable={false}
                     styling={{
-                      zebraStriping: true,
+                      hasZebraStriping: true,
                       borderStyle: 'none',
                       headerStyle: 'filled',
                     }}
@@ -184,7 +187,7 @@ export default function Home() {
                 )}
               </Flex>
             </div>
-            <div className='text-center'>
+            <div className='text-center pb-2'>
               <>Results for "{searchQuery}"</>
             </div>
           </Flex>

diff --git a/src/templates/ecommerce/Content.tsx b/src/templates/ecommerce/Content.tsx
@@ -66,7 +66,7 @@ export default function Content() {
                   tableInstance={table}
                   isKeyboardNavigable={false}
                   styling={{
-                    zebraStriping: true,
+                    hasZebraStriping: true,
                     borderStyle: 'none',
                     headerStyle: 'filled',
                   }}

diff --git a/src/templates/foundation/Layout/SideNav.tsx b/src/templates/foundation/Layout/SideNav.tsx
@@ -16,30 +16,36 @@ export default function SideNav() {
 
   return (
     <div className='h-[calc(100vh-58px)] min-h-[700px] flex'>
-      <SideNavigation iconMenu={true} expanded={expanded} {...expandedChangeProp}>
+      <SideNavigation hasIconMenu={true} isExpanded={expanded} {...expandedChangeProp}>
         <SideNavigation.List>
           <SideNavigation.Item
-            href='#'
-            selected={selected === 'search'}
-            onClick={handleClick('search')}
+            htmlAttributes={{
+              href: '#',
+              onClick: handleClick('search'),
+            }}
+            isSelected={selected === 'search'}
             {...(isMobile ? { icon: <MagnifyingGlassIconOutline className={fullSizeClasses} /> } : {})}
             icon={<MagnifyingGlassIconOutline className={fullSizeClasses} />}
           >
             Search
           </SideNavigation.Item>
           <SideNavigation.Item
-            href='#'
-            selected={selected === 'instances'}
-            onClick={handleClick('instances')}
+            htmlAttributes={{
+              href: '#',
+              onClick: handleClick('instances'),
+            }}
+            isSelected={selected === 'instances'}
             icon={<DbmsIcon className={fullSizeClasses} />}
           >
             Instances
           </SideNavigation.Item>
           <SideNavigation.GroupHeader>Example</SideNavigation.GroupHeader>
           <SideNavigation.Item
-            href='#'
-            selected={selected === 'notifications'}
-            onClick={handleClick('notifications')}
+            htmlAttributes={{
+              href: '#',
+              onClick: handleClick('notifications'),
+            }}
+            isSelected={selected === 'notifications'}
             icon={<BellAlertIconOutline className={fullSizeClasses} />}
           >
             Notifications

diff --git a/src/templates/movie/Content.tsx b/src/templates/movie/Content.tsx
@@ -68,13 +68,13 @@ export default function Content({
           <div className='flex flex-col items-start gap-[10px]'>
             <Typography variant='h2'>Similar genre</Typography>
             <div className='flex items-center gap-[10px] p-[10px]'>
-              <ChevronLeftIconOutline className='n-w-32 n-h-32 self-center' />
+              <ChevronLeftIconOutline className='n-size-token-9 self-center' />
               <div className='flex gap-[20px]'>
                 {recoSimilarGenre.map((movie, index) => (
                   <Movie key={index} movie={movie} />
                 ))}
               </div>
-              <ChevronRightIconOutline className='n-w-32 n-h-32 self-center' />
+              <ChevronRightIconOutline className='n-size-token-9 self-center' />
             </div>
           </div>
         )}
@@ -88,13 +88,13 @@ export default function Content({
           <div className='flex flex-col items-start gap-[10px]'>
             <Typography variant='h2'>Users who watched {mainMovie[0]?.title} also watched this</Typography>
             <div className='flex items-center gap-[10px] p-[10px]'>
-              <ChevronLeftIconOutline className='n-w-32 n-h-32 self-center' />
+              <ChevronLeftIconOutline className='n-size-token-9 self-center' />
               <div className='flex gap-[20px]'>
                 {recoOtherUsers.map((movie, index) => (
                   <Movie key={index} movie={movie} />
                 ))}
               </div>
-              <ChevronRightIconOutline className='n-w-32 n-h-32 self-center' />
+              <ChevronRightIconOutline className='n-size-token-9 self-center' />
             </div>
           </div>
         )}

diff --git a/src/templates/movie/Movie.tsx b/src/templates/movie/Movie.tsx
@@ -7,9 +7,9 @@ export default function Movie({ movie }: { movie: MovieInterface }) {
 
   const boxStyle: CSSProperties = {
     transition: 'all 0.3s ease',
-    maxWidth: '400px',
+    maxWidth: '350px',
     position: 'relative',
-    transform: isHovered ? 'scale(1.5)' : 'scale(1)',
+    transform: isHovered ? 'scale(1.2)' : 'scale(1)',
     zIndex: isHovered ? '10' : '1',
     boxShadow: isHovered ? '0px 0px 20px rgba(0,0,0,0.5)' : 'none',
   };
@@ -18,7 +18,7 @@ export default function Movie({ movie }: { movie: MovieInterface }) {
     bottom: 0,
     left: 0,
     right: 0,
-    transform: isHovered ? 'translateY(0)' : 'translateY(100%)',
+    transform: isHovered ? 'translateY(0)' : 'translateY(70%)',
     display: isHovered ? 'inline-block' : 'none',
     transition: 'transform 1s ease',
     backgroundColor: 'rgb(var(--theme-palette-neutral-bg-stronger))',
@@ -27,7 +27,13 @@ export default function Movie({ movie }: { movie: MovieInterface }) {
   };
 
   return (
-    <Box onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} style={boxStyle}>
+    <Box
+      htmlAttributes={{
+        onMouseEnter: () => setIsHovered(true),
+        onMouseLeave: () => setIsHovered(false),
+      }}
+      style={boxStyle}
+    >
       <img src={movie.poster} alt={movie.title} className='w-full rounded-sm' />
       <div style={infoStyle}>
         <Typography className='md:flex hidden' variant='h6'>

diff --git a/src/templates/shared/assets/chatbot-ai.png b/src/templates/shared/assets/chatbot-ai.png
diff --git a/src/templates/shared/components/Chatbot.tsx b/src/templates/shared/components/Chatbot.tsx
@@ -2,7 +2,6 @@
 import { useEffect, useRef, useState } from 'react';
 import { Button, Widget, Typography, Avatar, TextInput } from '@neo4j-ndl/react';
 
-import ChatBotUserAvatar from '../assets/chatbot-user.png';
 import ChatBotAvatar from '../assets/chatbot-ai.png';
 
 type ChatbotProps = {
@@ -83,28 +82,27 @@ export default function Chatbot(props: ChatbotProps) {
                 key={chat.id}
                 className={`flex gap-2.5 items-end ${chat.user === 'chatbot' ? 'flex-row' : 'flex-row-reverse'} `}
               >
-                <div className='w-8 h-8'>
+                <div className='w-8 h-8 mr-4 ml-4'>
                   {chat.user === 'chatbot' ? (
                     <Avatar
                       className='-ml-4'
                       hasStatus
                       name='KM'
-                      shape='square'
                       size='x-large'
                       source={ChatBotAvatar}
                       status='online'
                       type='image'
+                      shape='square'
                     />
                   ) : (
                     <Avatar
                       className=''
                       hasStatus
                       name='KM'
-                      shape='square'
                       size='x-large'
-                      source={ChatBotUserAvatar}
                       status='online'
                       type='image'
+                      shape='square'
                     />
                   )}
                 </div>
@@ -139,10 +137,12 @@ export default function Chatbot(props: ChatbotProps) {
         <form onSubmit={handleSubmit} className='flex gap-2.5 w-full'>
           <TextInput
             className='n-bg-palette-neutral-bg-default flex-grow-7 w-full'
-            type='text'
             value={inputMessage}
-            fluid
+            isFluid
             onChange={handleInputChange}
+            htmlAttributes={{
+              type: 'text',
+            }}
           />
           <Button type='submit'>Submit</Button>
         </form>