New form system

.eslintrc.cjs

@@ -45,8 +45,14 @@ const config = {
     'next/core-web-vitals',
     'prettier',
     'plugin:storybook/recommended',
+    'plugin:better-tailwindcss/recommended-error',
   ],
-  ignorePatterns: ['node_modules', '*.stories.*', 'public'],
+  settings: {
+    'better-tailwindcss': {
+      entryPoint: 'styles/globals.css',
+    },
+  },
+  ignorePatterns: ['node_modules', 'public'],
   rules: {
     '@typescript-eslint/switch-exhaustiveness-check': 'error',
     '@next/next/no-img-element': 'off',
@@ -76,6 +82,9 @@ const config = {
       },
     ],
     'no-unreachable': 'error',
+    'better-tailwindcss/enforce-consistent-line-wrapping': 'off', // Conflict with prettier
+    'better-tailwindcss/enforce-consistent-class-order': 'off', // Conflict with prettier
+    'better-tailwindcss/no-unregistered-classes': 'warn', // TODO: set to error after fixing existing issues
   },
 };
 

.node-version

@@ -0,0 +1 @@
+v22.18.0

.storybook/main.ts

@@ -1,15 +1,31 @@
-import type { StorybookConfig } from '@storybook/nextjs';
+import type { StorybookConfig } from '@storybook/nextjs-vite';
 
 const config: StorybookConfig = {
-  stories: [
-    '../(app|components|lib)/**/*.mdx',
-    '../(app|components|lib)/**/*.stories.@(js|jsx|mjs|ts|tsx)',
+  addons: [
+    '@storybook/addon-docs',
+    '@storybook/addon-a11y',
+    '@storybook/addon-vitest',
+    '@chromatic-com/storybook',
   ],
-  addons: [],
   framework: {
-    name: '@storybook/nextjs',
-    options: {},
+    name: '@storybook/nextjs-vite',
+    options: {
+      builder: {
+        // Customize the Vite builder options here
+        viteConfigPath: './vitest.config.ts',
+      },
+    },
   },
   staticDirs: ['../public'],
+  typescript: {
+    check: false,
+    // reactDocgen: 'react-docgen',
+    // reactDocgenTypescriptOptions: {
+    //   shouldExtractLiteralValuesFromEnum: true,
+    //   propFilter: (prop) =>
+    //     prop.parent ? !/node_modules/.test(prop.parent.fileName) : true,
+    // },
+  },
+  stories: ['../**/*.stories.@(js|jsx|mjs|ts|tsx|mdx)'],
 };
 export default config;

.storybook/preview.tsx

@@ -1,6 +1,7 @@
-import type { Preview } from '@storybook/nextjs';
+import type { Preview } from '@storybook/nextjs-vite';
 import Providers from '../components/Providers';
 import '../styles/globals.css';
+// import '../styles/interview.scss';
 
 const preview: Preview = {
   parameters: {
@@ -10,27 +11,44 @@ const preview: Preview = {
         date: /Date$/i,
       },
     },
+
     backgrounds: {
-      default: 'light',
-      values: [
-        {
+      options: {
+        light: {
           name: 'light',
           value: '#ffffff',
         },
-        {
+
+        dark: {
           name: 'dark',
           value: '#1f1f1f',
         },
-      ],
+      },
+    },
+
+    a11y: {
+      // 'todo' - show a11y violations in the test UI only
+      // 'error' - fail CI on a11y violations
+      // 'off' - skip a11y checks entirely
+      test: 'todo',
     },
   },
+
   decorators: [
     (Story) => (
-      <Providers>
-        <Story />
-      </Providers>
+      <div className="root" style={{ isolation: 'isolate' }}>
+        <Providers>
+          <Story />
+        </Providers>
+      </div>
     ),
   ],
+
+  initialGlobals: {
+    backgrounds: {
+      value: 'light',
+    },
+  },
 };
 
 export default preview;

.storybook/vitest.setup.ts

@@ -0,0 +1,12 @@
+import * as a11yAddonAnnotations from '@storybook/addon-a11y/preview';
+import * as docsAnnotations from '@storybook/addon-docs/preview';
+import { setProjectAnnotations } from '@storybook/nextjs-vite';
+import * as projectAnnotations from './preview';
+
+// This is an important step to apply the right configuration when testing your stories.
+// More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
+setProjectAnnotations([
+  a11yAddonAnnotations,
+  projectAnnotations,
+  docsAnnotations,
+]);

.vscode/settings.json

@@ -13,8 +13,5 @@
     "source.fixAll.typescript": "always"
   },
   "editor.formatOnSave": true,
-  "tailwindCSS.experimental.classRegex": [
-    ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
-    ["cx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
-  ]
+  "tailwindCSS.classFunctions": ["cva", "cx"]
 }

actions/auth.ts

@@ -3,6 +3,8 @@
 import { revalidatePath } from 'next/cache';
 import { cookies } from 'next/headers';
 import { redirect } from 'next/navigation';
+import z from 'zod';
+import { type FormSubmissionResult } from '~/lib/form';
 import { createUserFormDataSchema, loginSchema } from '~/schemas/auth';
 import { auth, getServerSession } from '~/utils/auth';
 import { prisma } from '~/utils/db';
@@ -63,24 +65,13 @@ export async function signup(formData: unknown) {
   }
 }
 
-export const login = async (
-  data: unknown,
-): Promise<
-  | {
-      success: true;
-    }
-  | {
-      success: false;
-      formErrors: string[];
-      fieldErrors?: Record<string, string[]>;
-    }
-> => {
+export const login = async (data: unknown): Promise<FormSubmissionResult> => {
   const parsedFormData = loginSchema.safeParse(data);
 
   if (!parsedFormData.success) {
     return {
       success: false,
-      ...parsedFormData.error.flatten(),
+      ...z.flattenError(parsedFormData.error),
     };
   }
 

actions/protocols.ts

@@ -129,6 +129,8 @@ export async function insertProtocol(
   try {
     const protocolHash = hash(protocol);
 
+    // TODO: updating protocol-validation package to use zod4 should fix the type issues
+
     await prisma.protocol.create({
       data: {
         hash: protocolHash,

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

@@ -9,7 +9,7 @@ function ConnectUploadThing() {
   return (
     <div className="w-[30rem]">
       <div className="mb-4">
-        <Heading variant="h2">Connect UploadThing</Heading>
+        <Heading level="h2">Connect UploadThing</Heading>
         <Paragraph>
           Fresco uses a third-party service called UploadThing to store media
           files, including protocol assets. In order to use this service, you

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

@@ -7,7 +7,7 @@ function CreateAccount() {
   return (
     <div className="w-[30rem]">
       <div className="mb-4">
-        <Heading variant="h2">Create an Account</Heading>
+        <Heading level="h2">Create an Account</Heading>
         <Paragraph>
           To use Fresco, you need to set up an administrator account which will
           enable to you access the protected parts of the app. Only one

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

@@ -2,10 +2,10 @@ import { createId } from '@paralleldrive/cuid2';
 import { FileText } from 'lucide-react';
 import { redirect } from 'next/navigation';
 import { setAppSetting } from '~/actions/appSettings';
-import Section from '~/components/layout/Section';
+import Surface from '~/components/layout/Surface';
 import Heading from '~/components/typography/Heading';
 import Paragraph from '~/components/typography/Paragraph';
-import { Button } from '~/components/ui/Button';
+import { IconButton } from '~/components/ui/Button';
 import SubmitButton from '~/components/ui/SubmitButton';
 import trackEvent from '~/lib/analytics';
 import { getInstallationId } from '~/queries/appSettings';
@@ -30,17 +30,17 @@ function Documentation() {
   return (
     <div className="max-w-[30rem]">
       <div className="mb-4">
-        <Heading variant="h2">Documentation</Heading>
+        <Heading level="h2">Documentation</Heading>
         <Paragraph>
           This is the end of the onboarding process. You are now ready to use
           Fresco! For further help and information, consider using the resources
           below.
         </Paragraph>
       </div>
       <div className="flex flex-col gap-2">
-        <Section classNames="flex gap-10">
+        <Surface className="flex gap-10">
           <div className="flex-1">
-            <Heading variant="h4-all-caps" className="mb-2">
+            <Heading level="h4" variant="all-caps" className="mb-2">
               About Fresco
             </Heading>
             Visit our documentation site to learn more about Fresco.
@@ -50,15 +50,17 @@ function Documentation() {
               href="https://documentation.networkcanvas.com/en/fresco"
               target="_blank"
             >
-              <Button variant="outline" size="icon">
-                <FileText />
-              </Button>
+              <IconButton
+                variant="outline"
+                aria-label="View Fresco documentation"
+                icon={<FileText />}
+              />
             </a>
           </div>
-        </Section>
-        <Section classNames="flex gap-10">
+        </Surface>
+        <Surface className="flex gap-10">
           <div className="flex-1">
-            <Heading variant="h4-all-caps" className="mb-2">
+            <Heading level="h4" variant="all-caps" className="mb-2">
               Using Fresco
             </Heading>
             Read our guide on the basic workflow for using Fresco to conduct
@@ -69,12 +71,14 @@ function Documentation() {
               href="https://documentation.networkcanvas.com/en/fresco/using-fresco"
               target="_blank"
             >
-              <Button variant="outline" size="icon">
-                <FileText />
-              </Button>
+              <IconButton
+                variant="outline"
+                aria-label="View Using Fresco guide"
+                icon={<FileText />}
+              />
             </a>
           </div>
-        </Section>
+        </Surface>
       </div>
 
       <div className="flex justify-end pt-12">

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

@@ -16,7 +16,7 @@ function ManageParticipants({
   return (
     <div className="max-w-[30rem]">
       <div className="mb-6">
-        <Heading variant="h2">Configure Participation</Heading>
+        <Heading level="h2">Configure Participation</Heading>
         <Paragraph>
           You can now optionally upload a CSV file containing the details of
           participants you wish to recruit for your study. You can also choose

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

@@ -18,7 +18,7 @@ function ConfigureStudy() {
   return (
     <div className="flex max-w-[30rem] flex-col items-stretch justify-between">
       <div className="flex flex-col">
-        <Heading variant="h2">Import Protocols</Heading>
+        <Heading level="h2">Import Protocols</Heading>
         <Paragraph>
           If you have already created a Network Canvas protocol (
           <code>.netcanvas</code>) you can import it now.

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

@@ -5,8 +5,7 @@ import { env } from '~/env';
 export default function SandboxCredentials() {
   if (!env.SANDBOX_MODE) return null;
   return (
-    <Alert variant="info">
-      <KeyRound className="h-4 w-4" />
+    <Alert variant="info" icon={KeyRound}>
       <AlertTitle>Sandbox Credentials</AlertTitle>
       <AlertDescription>
         <div className="flex flex-col space-y-2">

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

@@ -3,7 +3,7 @@
 import { Check } from 'lucide-react';
 import { parseAsInteger, useQueryState } from 'nuqs';
 import Heading from '~/components/typography/Heading';
-import { cn } from '~/utils/shadcn';
+import { cx } from '~/utils/cva';
 
 function OnboardSteps({ steps }: { steps: string[] }) {
   const [currentStep, setCurrentStep] = useQueryState(
@@ -16,18 +16,17 @@ function OnboardSteps({ steps }: { steps: string[] }) {
       {steps.map((step, index) => (
         <div
           key={index}
-          className={cn(
+          className={cx(
             'pointer-events-none flex items-center gap-2 rounded-xl',
             // Make 'clickable' if the step is complete
             currentStep > index && 'pointer-events-auto cursor-pointer',
           )}
           onClick={() => void setCurrentStep(index + 1)}
         >
           <div
-            className={cn(
+            className={cx(
               'border-primary/[.06] flex h-10 w-10 items-center justify-center rounded-full border text-sm font-bold',
-              index < currentStep - 1 &&
-                'bg-success border-teal-400 text-white',
+              index < currentStep - 1 && 'bg-success border-success text-white',
               index === currentStep - 1 &&
                 'border-primary bg-primary text-white',
             )}
@@ -39,7 +38,7 @@ function OnboardSteps({ steps }: { steps: string[] }) {
             )}
           </div>
           <div className="flex flex-col">
-            <Heading variant={'h4-all-caps'} className="m-0 text-xs">
+            <Heading level="h4" variant="all-caps" className="m-0 text-xs">
               {step}
             </Heading>
           </div>