Merge pull request #223 from complexdatacollective/next

Next

Author: jthrilly

app/(blobs)/(setup)/_components/OnboardSteps/Documentation.tsx

@@ -45,7 +45,7 @@ function Documentation() {
             </Heading>
             Visit our documentation site to learn more about Fresco.
           </div>
-          <div className="flex min-w-32 flex-shrink-0 flex-col items-end justify-center">
+          <div className="flex min-w-32 shrink-0 flex-col items-end justify-center">
             <a
               href="https://documentation.networkcanvas.com/en/fresco"
               target="_blank"
@@ -64,7 +64,7 @@ function Documentation() {
             Read our guide on the basic workflow for using Fresco to conduct
             your study.
           </div>
-          <div className="flex min-w-32 flex-shrink-0 flex-col items-end justify-center">
+          <div className="flex min-w-32 shrink-0 flex-col items-end justify-center">
             <a
               href="https://documentation.networkcanvas.com/en/fresco/using-fresco"
               target="_blank"

app/(blobs)/(setup)/_components/Sidebar.tsx

@@ -12,7 +12,7 @@ function OnboardSteps({ steps }: { steps: string[] }) {
   );
 
   return (
-    <div className="flex flex-shrink-0 flex-grow-0 flex-col gap-6 rounded-xl bg-white px-8 py-12">
+    <div className="flex shrink-0 grow-0 flex-col gap-6 rounded-xl bg-white px-8 py-12">
       {steps.map((step, index) => (
         <div
           key={index}

app/(blobs)/(setup)/setup/Setup.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { motion } from 'framer-motion';
+import { motion } from 'motion/react';
 import { parseAsInteger, useQueryState } from 'nuqs';
 import { useEffect } from 'react';
 import { containerClasses } from '~/components/ContainerClasses';

app/(blobs)/layout.tsx

@@ -19,7 +19,7 @@ export default function Layout({ children }: PropsWithChildren) {
             />
           </Link>
         </div>
-        <main className="flex flex-grow items-center justify-center">
+        <main className="flex grow items-center justify-center">
           {children}
         </main>
       </div>

app/(interview)/interview/_components/ServerSync.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import { debounce, isEqual } from 'lodash';
-import { type ReactNode, useEffect, useState, useCallback } from 'react';
+import { debounce, isEqual } from 'es-toolkit';
+import { type ReactNode, useCallback, useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
 import type { SyncInterviewType } from '~/actions/interviews';
 import usePrevious from '~/hooks/usePrevious';
@@ -26,9 +26,7 @@ const ServerSync = ({
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const debouncedSessionSync = useCallback(
     debounce(serverSync, 2000, {
-      leading: true,
-      trailing: true,
-      maxWait: 10000,
+      edges: ['trailing', 'leading'],
     }),
     [serverSync],
   );

app/(interview)/interview/_components/SmallScreenOverlay.tsx

@@ -9,7 +9,7 @@ const SmallScreenOverlay = () => {
   }
 
   return (
-    <div className="fixed inset-0 z-50 flex  items-center justify-center bg-[--nc-background]  lg:hidden">
+    <div className="fixed inset-0 z-50 flex  items-center justify-center bg-(--nc-background)  lg:hidden">
       <div className="flex max-w-[72ch] flex-col items-center justify-center p-6 text-center">
         <Image
           src="/images/too-small.svg"
@@ -23,7 +23,7 @@ const SmallScreenOverlay = () => {
           To complete this interview, please use a device with a larger screen,
           or maximize your browser window.
         </Paragraph>
-        <Paragraph className="!mt-16">
+        <Paragraph className="mt-16!">
           <strong>Note:</strong> it is not possible to complete this interview
           using a mobile phone.
         </Paragraph>

app/(interview)/interview/layout.tsx

@@ -8,7 +8,7 @@ export const metadata = {
 
 function RootLayout({ children }: { children: React.ReactNode }) {
   return (
-    <main className="flex h-[100vh] max-h-[100vh] flex-col bg-[--nc-background] text-[--nc-text]">
+    <main className="flex h-[100vh] max-h-[100vh] flex-col bg-(--nc-background) text-(--nc-text)">
       <SmallScreenOverlay />
       {children}
     </main>

app/dashboard/_components/NavigationBar.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { motion } from 'framer-motion';
+import { motion } from 'motion/react';
 import type { Route } from 'next';
 import Image from 'next/image';
 import Link from 'next/link';

app/dashboard/_components/ProtocolUploader.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import { AnimatePresence, motion } from 'framer-motion';
 import { FileDown, Loader2 } from 'lucide-react';
+import { AnimatePresence, motion } from 'motion/react';
 import { useCallback } from 'react';
 import { useDropzone } from 'react-dropzone';
 import JobCard from '~/components/ProtocolImport/JobCard';
@@ -58,7 +58,7 @@ function ProtocolUploader({
         className={cn(
           isActive &&
             cn(
-              'bg-gradient-to-r from-cyber-grape via-neon-coral to-cyber-grape text-white',
+              'bg-linear-to-r from-cyber-grape via-neon-coral to-cyber-grape text-white',
               'pointer-events-none animate-background-gradient cursor-wait bg-[length:400%]',
             ),
           className,

app/dashboard/_components/SummaryStatistics/Icons.tsx

@@ -1,5 +1,5 @@
 export const ProtocolIcon = () => (
-  <div className="flex aspect-[4/3] h-[40px] flex-col overflow-hidden rounded-[8px] bg-platinum">
+  <div className="flex aspect-4/3 h-[40px] flex-col overflow-hidden rounded-[8px] bg-platinum">
     <div className="flex h-2/3 w-full flex-col justify-center gap-[3px] px-[6px]">
       <div className="h-[4.5px] w-10/12 rounded-full bg-platinum-dark" />
       <div className="h-[2.5px] w-3/12 rounded-full bg-platinum-dark" />
@@ -11,7 +11,7 @@ export const ProtocolIcon = () => (
 );
 
 export const InterviewIcon = () => (
-  <div className="flex aspect-[4/3] h-[40px] flex-col overflow-hidden rounded-[8px] bg-platinum">
+  <div className="flex aspect-4/3 h-[40px] flex-col overflow-hidden rounded-[8px] bg-platinum">
     <div className="flex h-2/4 w-full flex-col justify-center gap-[3px] px-[6px]">
       <div className="h-[4.5px] w-10/12 rounded-full bg-platinum-dark" />
       <div className="h-[2.5px] w-3/12 rounded-full bg-platinum-dark" />