Next

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" />

app/dashboard/interviews/_components/ExportInterviewsDialog.tsx

@@ -29,7 +29,7 @@ import ExportOptionsView from './ExportOptionsView';
 
 const ExportingStateAnimation = () => {
   return (
-    <div className="fixed inset-0 z-[99] flex flex-col items-center justify-center gap-3 bg-background/80 text-primary">
+    <div className="fixed inset-0 z-99 flex flex-col items-center justify-center gap-3 bg-background/80 text-primary">
       <div
         className={cn(
           cardClasses,

app/dashboard/participants/_components/DropzoneField.tsx

@@ -1,4 +1,3 @@
-import { isArray } from 'lodash';
 import { FileCheck, FileText } from 'lucide-react';
 import { useId } from 'react';
 import { useDropzone } from 'react-dropzone';
@@ -41,7 +40,7 @@ export default function DropzoneField<T>({
             return 'No CSV file selected. Please select a file.';
           }
 
-          if (!isArray(value)) {
+          if (!Array.isArray(value)) {
             return 'Invalid CSV. Please select a valid CSV file.';
           }
 

app/layout.tsx

@@ -1,6 +1,6 @@
 import { Quicksand } from 'next/font/google';
 import { Toaster } from '~/components/ui/toaster';
-import '~/styles/globals.scss';
+import '~/styles/globals.css';
 
 export const metadata = {
   title: 'Network Canvas Fresco',

app/page.tsx

@@ -1,5 +1,5 @@
-import { redirect } from 'next/navigation';
+import { permanentRedirect } from 'next/navigation';
 
 export default function Home() {
-  redirect('/dashboard');
+  permanentRedirect('/dashboard');
 }

components.json

@@ -5,7 +5,7 @@
   "tsx": true,
   "tailwind": {
     "config": "tailwind.config.ts",
-    "css": "styles/globals.scss",
+    "css": "styles/globals.css",
     "baseColor": "slate",
     "cssVariables": true
   },

components/ErrorReportNotifier.tsx

@@ -1,5 +1,5 @@
-import { AnimatePresence, motion } from 'framer-motion';
 import { CheckIcon, Loader2, XCircle } from 'lucide-react';
+import { AnimatePresence, motion } from 'motion/react';
 import { useEffect, useRef, useState } from 'react';
 import trackEvent from '~/lib/analytics';
 

components/Feedback/FeedbackBanner.tsx

@@ -29,7 +29,7 @@ const FeedbackBanner = () => {
         aria-hidden="true"
       >
         <div
-          className="aspect-[577/310] w-[36.0625rem] bg-gradient-to-r from-[#ff80b5] to-[#9089fc] opacity-30"
+          className="aspect-577/310 w-[36.0625rem] bg-linear-to-r from-[#ff80b5] to-[#9089fc] opacity-30"
           style={{
             clipPath:
               'polygon(74.8% 41.9%, 97.2% 73.2%, 100% 34.9%, 92.5% 0.4%, 87.5% 0%, 75% 28.6%, 58.5% 54.6%, 50.1% 56.8%, 46.9% 44%, 48.3% 17.4%, 24.7% 53.9%, 0% 27.9%, 11.9% 74.2%, 24.9% 54.1%, 68.6% 100%, 74.8% 41.9%)',
@@ -41,7 +41,7 @@ const FeedbackBanner = () => {
         aria-hidden="true"
       >
         <div
-          className="aspect-[577/310] w-[36.0625rem] bg-gradient-to-r from-[#ff80b5] to-[#9089fc] opacity-30"
+          className="aspect-577/310 w-[36.0625rem] bg-linear-to-r from-[#ff80b5] to-[#9089fc] opacity-30"
           style={{
             clipPath:
               'polygon(74.8% 41.9%, 97.2% 73.2%, 100% 34.9%, 92.5% 0.4%, 87.5% 0%, 75% 28.6%, 58.5% 54.6%, 50.1% 56.8%, 46.9% 44%, 48.3% 17.4%, 24.7% 53.9%, 0% 27.9%, 11.9% 74.2%, 24.9% 54.1%, 68.6% 100%, 74.8% 41.9%)',
@@ -67,7 +67,7 @@ const FeedbackBanner = () => {
       )}
       <div
         className={cn(
-          'flex flex-grow items-center gap-4 text-sm',
+          'flex grow items-center gap-4 text-sm',
           isDashboard ? 'justify-center' : 'justify-end',
         )}
       >

components/Link.tsx

@@ -6,7 +6,7 @@ export default function Link(props: LinkProps<LinkRestProps>) {
       className="text-link group font-semibold transition-all duration-300 ease-in-out"
       {...props}
     >
-      <span className="from-link to-link bg-gradient-to-r bg-[length:0%_2px] bg-left-bottom bg-no-repeat pb-[2px] transition-all duration-200 ease-out group-hover:bg-[length:100%_2px]">
+      <span className="from-link to-link bg-linear-to-r bg-[length:0%_2px] bg-left-bottom bg-no-repeat pb-[2px] transition-all duration-200 ease-out group-hover:bg-[length:100%_2px]">
         {props.children}
       </span>
     </NextLink>

components/ProtocolImport/JobCard.tsx

@@ -1,13 +1,13 @@
+import { CheckCircle, Loader2, XCircle } from 'lucide-react';
+import { motion } from 'motion/react';
 import { forwardRef, useEffect, useState } from 'react';
-import ErrorDialog from '../ui/ErrorDialog';
-import { CloseButton } from '../ui/CloseButton';
-import { type ImportJob } from './JobReducer';
 import { cn } from '~/utils/shadcn';
-import { CheckCircle, Loader2, XCircle } from 'lucide-react';
 import { Button } from '../ui/Button';
+import { CloseButton } from '../ui/CloseButton';
+import ErrorDialog from '../ui/ErrorDialog';
 import Heading from '../ui/typography/Heading';
 import Paragraph from '../ui/typography/Paragraph';
-import { motion } from 'framer-motion';
+import { type ImportJob } from './JobReducer';
 
 type JobCardProps = {
   job: ImportJob;

components/data-table/data-table-faceted-filter.tsx

@@ -147,7 +147,7 @@ export function DataTableFacetedFilter<TData, TValue>({
             name="filter"
             placeholder={title}
             autoFocus
-            className="focus-visible:ring-ring flex w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50"
+            className="focus-visible:ring-ring flex w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-2xs transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50"
           />
           <CommandList className="mt-1">
             <CommandEmpty>No results found.</CommandEmpty>

components/layout/SettingsSection.tsx

@@ -32,7 +32,7 @@ export default function SettingsSection({
         {children}
       </div>
       {controlArea && (
-        <div className="flex flex-shrink-0 flex-col items-end justify-center">
+        <div className="flex shrink-0 flex-col items-end justify-center">
           {controlArea}
         </div>
       )}
@@ -52,7 +52,7 @@ export function SettingsSectionSkeleton({
         <Skeleton className="h-12 w-3/4" />
       </div>
       {controlAreaSkelton && (
-        <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">
           {controlAreaSkelton}
         </div>
       )}

components/ui/Alert.tsx

@@ -12,11 +12,11 @@ const alertVariants = cva(
     variants: {
       variant: {
         default: '',
-        info: 'border-info bg-info/10 [--link:var(--info)] [&>svg]:text-info',
+        info: 'bg-info/5 border-info text-info [--color-link:var(--color-info)] [&>svg]:text-info',
         destructive:
-          'border-destructive bg-destructive/5 text-destructive dark:border-destructive [&>svg]:text-destructive [--link:var(--destructive)]',
+          'bg-destructive/5 border-destructive text-destructive [&>svg]:text-destructive [--color-link:var(--color-destructive)]',
         success:
-          'border-success bg-success/10 text-success-foreground [&>svg]:text-success-foreground [--link:var(--success-foreground)]',
+          'bg-success/5 border-success text-success [&>svg]:text-success [--color-link:var(--color-success)]',
       },
     },
     defaultVariants: {

components/ui/AlertDialog.tsx

@@ -6,6 +6,7 @@ import * as React from 'react';
 import { type VariantProps } from 'class-variance-authority';
 import { buttonVariants } from '~/components/ui/Button';
 import { cn } from '~/utils/shadcn';
+import { dialogContentClasses, dialogOverlayClasses } from './dialog';
 import Heading from './typography/Heading';
 import { paragraphVariants } from './typography/Paragraph';
 
@@ -24,10 +25,7 @@ const AlertDialogOverlay = React.forwardRef<
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
 >(({ className, children, ...props }, ref) => (
   <AlertDialogPrimitive.Overlay
-    className={cn(
-      'fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
-      className,
-    )}
+    className={dialogOverlayClasses(className)}
     {...props}
     ref={ref}
   />
@@ -42,10 +40,7 @@ const AlertDialogContent = React.forwardRef<
     <AlertDialogOverlay />
     <AlertDialogPrimitive.Content
       ref={ref}
-      className={cn(
-        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-card p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full',
-        className,
-      )}
+      className={dialogContentClasses(className)}
       {...props}
     />
   </AlertDialogPortal>

components/ui/Button.tsx

@@ -5,7 +5,7 @@ import { cn } from '~/utils/shadcn';
 import { Skeleton } from './skeleton';
 
 const buttonVariants = cva(
-  'inline-flex items-center justify-center rounded-full text-sm font-semibold ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 text-nowrap truncate text-foreground',
+  'inline-flex items-center justify-center rounded-full text-sm font-semibold ring-offset-background transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 text-nowrap truncate text-foreground',
   {
     variants: {
       variant: {

components/ui/CloseButton.tsx

@@ -12,7 +12,7 @@ export const CloseButton = ({
       type="button"
       onClick={onClick}
       className={cn(
-        'rounded-sm ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted',
+        'rounded-sm ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted',
         className,
       )}
     >

components/ui/Input.tsx

@@ -48,7 +48,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
             id={id}
             type={type}
             className={cn(
-              'focus-visible:ring-ring flex h-10 w-full rounded-input border border-border bg-input px-3 py-2 text-sm text-input-foreground ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+              'focus-visible:ring-ring flex h-10 w-full rounded-input border border-border bg-input px-3 py-2 text-sm text-input-foreground ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
               !!leftAdornment && 'pl-10',
               !!rightAdornment && 'pr-10',
               !!error && 'border-destructive',

components/ui/badge.tsx

@@ -4,7 +4,7 @@ import { cva, type VariantProps } from 'class-variance-authority';
 import { cn } from '~/utils/shadcn';
 
 const badgeVariants = cva(
-  'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 flex-shrink-1',
+  'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 flex-shrink-1',
   {
     variants: {
       variant: {

components/ui/checkbox.tsx

@@ -13,7 +13,7 @@ const Checkbox = React.forwardRef<
     <CheckboxPrimitive.Root
       ref={ref}
       className={cn(
-        'peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
+        'peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
         className,
       )}
       {...props}

components/ui/command.tsx

@@ -29,7 +29,7 @@ const CommandInput = React.forwardRef<
     <CommandPrimitive.Input
       ref={ref}
       className={cn(
-        'flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
+        'flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
         className,
       )}
       {...props}
@@ -100,7 +100,7 @@ const CommandItem = React.forwardRef<
   <CommandPrimitive.Item
     ref={ref}
     className={cn(
-      'relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+      'relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
       className,
     )}
     {...props}