@cytario/web 2.2.6 → 2.2.7

package/app/components/GlobalSearch/SearchBar.tsx

@@ -11,6 +11,7 @@ export function SearchBar({ value, onChange, onClear }: SearchBarProps) {
   return (
     <div className="flex">
       <Input
+        aria-label="Search"
         value={value}
         onChange={onChange}
         onFocus={() => onChange(value)}

package/app/routes/admin/bulkInvite/bulkInvite.form.tsx

@@ -1,4 +1,4 @@
-import { Button, Checkbox, Field, Icon, IconButton, Input, Select } from "@cytario/design";
+import { Button, Checkbox, Icon, IconButton, Input, Select } from "@cytario/design";
 import { Plus, X } from "lucide-react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useSubmit } from "react-router";
@@ -150,9 +150,10 @@ export function BulkInviteForm({
             renderItem={(item) => <ScopePill scope={item.id} />}
           />
         ) : (
-          <Field label="Group Membership">
+          <div className="flex flex-col gap-1">
+            <p className="text-sm font-medium text-(--color-text-primary)">Group Membership</p>
             <p className="text-sm text-slate-400">No groups available in this scope.</p>
-          </Field>
+          </div>
         )}
         <div className="flex items-center gap-2">
           <Checkbox isSelected={enabled} onChange={setEnabled}>
@@ -164,16 +165,30 @@ export function BulkInviteForm({
         </div>
       </div>
 
-      {formError && <p className="text-sm text-rose-600 mb-4">{formError}</p>}
+      {formError && (
+        <p role="alert" className="text-sm text-rose-600 mb-4">
+          {formError}
+        </p>
+      )}
 
       <table ref={tableRef} className="w-full border-collapse">
         <thead>
           <tr className="text-left text-sm text-slate-500">
-            <th className="w-10 pr-2 py-2 font-medium">#</th>
-            <th className="px-1 py-2 font-medium">Email</th>
-            <th className="px-1 py-2 font-medium">First Name</th>
-            <th className="px-1 py-2 font-medium">Last Name</th>
-            <th className="w-8" />
+            <th scope="col" className="w-10 pr-2 py-2 font-medium">
+              #
+            </th>
+            <th scope="col" className="px-1 py-2 font-medium">
+              Email
+            </th>
+            <th scope="col" className="px-1 py-2 font-medium">
+              First Name
+            </th>
+            <th scope="col" className="px-1 py-2 font-medium">
+              Last Name
+            </th>
+            <th scope="col" className="w-8">
+              <span className="sr-only">Remove</span>
+            </th>
           </tr>
         </thead>
         <tbody>
@@ -185,6 +200,7 @@ export function BulkInviteForm({
                 </td>
                 <td className="px-1 py-1">
                   <Input
+                    aria-label={`Email, row ${i + 1}`}
                     value={row.email}
                     onChange={(value) => updateRow(i, "email", value)}
                     placeholder="email@example.com"
@@ -194,6 +210,7 @@ export function BulkInviteForm({
                 </td>
                 <td className="px-1 py-1">
                   <Input
+                    aria-label={`First name, row ${i + 1}`}
                     value={row.firstName}
                     onChange={(value) => updateRow(i, "firstName", value)}
                     placeholder="First"
@@ -203,6 +220,7 @@ export function BulkInviteForm({
                 </td>
                 <td className="px-1 py-1">
                   <Input
+                    aria-label={`Last name, row ${i + 1}`}
                     value={row.lastName}
                     onChange={(value) => updateRow(i, "lastName", value)}
                     placeholder="Last"

package/app/routes/admin/createGroup/createGroup.form.tsx

@@ -1,4 +1,4 @@
-import { Field, Fieldset, Input } from "@cytario/design";
+import { Fieldset, Input } from "@cytario/design";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Controller, useForm, useWatch } from "react-hook-form";
 import { useSubmit } from "react-router";
@@ -13,11 +13,7 @@ interface CreateGroupFormProps {
 export function CreateGroupForm({ scope }: CreateGroupFormProps) {
   const submit = useSubmit();
 
-  const {
-    control,
-    handleSubmit,
-    formState: { errors },
-  } = useForm<CreateGroupFormData>({
+  const { control, handleSubmit } = useForm<CreateGroupFormData>({
     resolver: zodResolver(createGroupSchema),
     defaultValues: { name: "" },
     mode: "onBlur",
@@ -34,20 +30,20 @@ export function CreateGroupForm({ scope }: CreateGroupFormProps) {
   return (
     <form id="create-group-form" onSubmit={handleSubmit(onSubmit)} className="space-y-4">
       <Fieldset>
-        <Field label="Group name" error={errors.name}>
-          <Controller
-            control={control}
-            name="name"
-            render={({ field }) => (
-              <Input
-                size="lg"
-                value={field.value}
-                onChange={field.onChange}
-                onBlur={field.onBlur}
-              />
-            )}
-          />
-        </Field>
+        <Controller
+          control={control}
+          name="name"
+          render={({ field, fieldState }) => (
+            <Input
+              label="Group name"
+              size="lg"
+              value={field.value}
+              onChange={field.onChange}
+              onBlur={field.onBlur}
+              errorMessage={fieldState.error?.message}
+            />
+          )}
+        />
       </Fieldset>
 
       {nameValue.trim() && (

package/app/routes/admin/inviteUser/inviteUser.form.tsx

@@ -1,4 +1,4 @@
-import { Checkbox, Field, Fieldset, Input, Select } from "@cytario/design";
+import { Checkbox, Fieldset, Input, Select } from "@cytario/design";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useEffect } from "react";
 import { Controller, useForm } from "react-hook-form";
@@ -22,12 +22,7 @@ export function InviteUserForm({
 }: InviteUserFormProps) {
   const submit = useSubmit();
 
-  const {
-    control,
-    handleSubmit,
-    reset,
-    formState: { errors },
-  } = useForm<InviteUserFormData>({
+  const { control, handleSubmit, reset } = useForm<InviteUserFormData>({
     resolver: zodResolver(inviteUserSchema),
     defaultValues: {
       email: "",
@@ -65,67 +60,69 @@ export function InviteUserForm({
   return (
     <form id="invite-form" onSubmit={handleSubmit(onSubmit)} className="space-y-4">
       <Fieldset>
-        <Field label="Email" error={errors.email}>
-          <Controller
-            control={control}
-            name="email"
-            render={({ field }) => (
-              <Input
-                type="email"
-                size="lg"
-                value={field.value}
-                onChange={field.onChange}
-                onBlur={field.onBlur}
-              />
-            )}
-          />
-        </Field>
-        <Field label="First name" error={errors.firstName}>
-          <Controller
-            control={control}
-            name="firstName"
-            render={({ field }) => (
-              <Input
-                size="lg"
-                value={field.value}
-                onChange={field.onChange}
-                onBlur={field.onBlur}
-              />
-            )}
-          />
-        </Field>
-        <Field label="Last name" error={errors.lastName}>
-          <Controller
-            control={control}
-            name="lastName"
-            render={({ field }) => (
-              <Input
-                size="lg"
-                value={field.value}
-                onChange={field.onChange}
-                onBlur={field.onBlur}
-              />
-            )}
-          />
-        </Field>
+        <Controller
+          control={control}
+          name="email"
+          render={({ field, fieldState }) => (
+            <Input
+              label="Email"
+              type="email"
+              size="lg"
+              value={field.value}
+              onChange={field.onChange}
+              onBlur={field.onBlur}
+              errorMessage={fieldState.error?.message}
+            />
+          )}
+        />
+        <Controller
+          control={control}
+          name="firstName"
+          render={({ field, fieldState }) => (
+            <Input
+              label="First name"
+              size="lg"
+              value={field.value}
+              onChange={field.onChange}
+              onBlur={field.onBlur}
+              errorMessage={fieldState.error?.message}
+            />
+          )}
+        />
+        <Controller
+          control={control}
+          name="lastName"
+          render={({ field, fieldState }) => (
+            <Input
+              label="Last name"
+              size="lg"
+              value={field.value}
+              onChange={field.onChange}
+              onBlur={field.onBlur}
+              errorMessage={fieldState.error?.message}
+            />
+          )}
+        />
         {groupOptions.length > 0 ? (
           <Controller
             control={control}
             name="groupPath"
-            render={({ field }) => (
+            render={({ field, fieldState }) => (
               <Select
                 label="Group Membership"
                 items={groupOptions.map((p) => ({ id: p, name: p }))}
                 selectedKey={field.value}
                 onSelectionChange={(key) => field.onChange(key as string)}
                 renderItem={(item) => <ScopePill scope={item.id} />}
+                errorMessage={fieldState.error?.message}
               />
             )}
           />
         ) : (
-          <Field label="Group Membership">
+          <div className="flex flex-col gap-1">
+            <p className="text-sm font-medium text-(--color-text-primary)">Group Membership</p>
             <p className="text-sm text-slate-400">No groups available in this scope.</p>
-          </Field>
+          </div>
         )}
         <div className="flex items-center gap-2">
           <Controller

package/app/routes/admin/updateUser/updateUser.form.tsx

@@ -1,4 +1,4 @@
-import { Checkbox, Field, Fieldset, H3, Input } from "@cytario/design";
+import { Checkbox, Fieldset, H3, Input } from "@cytario/design";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useState } from "react";
 import { Controller, useForm } from "react-hook-form";
@@ -30,11 +30,7 @@ export const UpdateUserForm = ({ user, groups, groupPaths }: UpdateUserFormProps
     return ids;
   });
 
-  const {
-    control,
-    handleSubmit,
-    formState: { errors },
-  } = useForm<UpdateUserFormData>({
+  const { control, handleSubmit } = useForm<UpdateUserFormData>({
     resolver: zodResolver(updateUserSchema),
     defaultValues: {
       email: user.email,
@@ -136,49 +132,49 @@ export const UpdateUserForm = ({ user, groups, groupPaths }: UpdateUserFormProps
     <>
       <form id="update-form" onSubmit={handleSubmit(onSubmit)} className="">
         <Fieldset>
-          <Field label="Email" error={errors.email}>
-            <Controller
-              control={control}
-              name="email"
-              render={({ field }) => (
-                <Input
-                  type="email"
-                  size="lg"
-                  value={field.value}
-                  onChange={field.onChange}
-                  onBlur={field.onBlur}
-                />
-              )}
-            />
-          </Field>
-          <Field label="First name" error={errors.firstName}>
-            <Controller
-              control={control}
-              name="firstName"
-              render={({ field }) => (
-                <Input
-                  size="lg"
-                  value={field.value}
-                  onChange={field.onChange}
-                  onBlur={field.onBlur}
-                />
-              )}
-            />
-          </Field>
-          <Field label="Last name" error={errors.lastName}>
-            <Controller
-              control={control}
-              name="lastName"
-              render={({ field }) => (
-                <Input
-                  size="lg"
-                  value={field.value}
-                  onChange={field.onChange}
-                  onBlur={field.onBlur}
-                />
-              )}
-            />
-          </Field>
+          <Controller
+            control={control}
+            name="email"
+            render={({ field, fieldState }) => (
+              <Input
+                label="Email"
+                type="email"
+                size="lg"
+                value={field.value}
+                onChange={field.onChange}
+                onBlur={field.onBlur}
+                errorMessage={fieldState.error?.message}
+              />
+            )}
+          />
+          <Controller
+            control={control}
+            name="firstName"
+            render={({ field, fieldState }) => (
+              <Input
+                label="First name"
+                size="lg"
+                value={field.value}
+                onChange={field.onChange}
+                onBlur={field.onBlur}
+                errorMessage={fieldState.error?.message}
+              />
+            )}
+          />
+          <Controller
+            control={control}
+            name="lastName"
+            render={({ field, fieldState }) => (
+              <Input
+                label="Last name"
+                size="lg"
+                value={field.value}
+                onChange={field.onChange}
+                onBlur={field.onBlur}
+                errorMessage={fieldState.error?.message}
+              />
+            )}
+          />
           <div className="flex items-center gap-2">
             <Controller
               control={control}

package/app/routes/connections/connection.form.tsx

@@ -1,6 +1,5 @@
 import {
   Banner,
-  Field,
   Fieldset,
   FormWizard,
   FormWizardNav,
@@ -97,14 +96,7 @@ export const ConnectionForm = ({
 
   const [currentStep, setCurrentStep] = useState(initialStep);
 
-  const {
-    control,
-    handleSubmit,
-    setError,
-    setValue,
-    trigger,
-    formState: { errors },
-  } = useForm<ConnectBucketFormData>({
+  const { control, handleSubmit, setError, setValue, trigger } = useForm<ConnectBucketFormData>({
     resolver: zodResolver(connectionSchema),
     defaultValues: initialData
       ? {
@@ -212,165 +204,147 @@ export const ConnectionForm = ({
         >
           {currentStep === 0 && (
             <Fieldset>
-              <Field label="Provider" error={errors.providerType}>
+              <Controller
+                name="providerType"
+                control={control}
+                render={({ field, fieldState }) => (
+                  <Select
+                    label="Provider"
+                    items={providerItems}
+                    renderItem={(item) => <ProviderPill provider={item.id} />}
+                    selectedKey={field.value}
+                    onSelectionChange={(key) => field.onChange(key)}
+                    errorMessage={fieldState.error?.message}
+                  />
+                )}
+              />
+
+              <Controller
+                name="s3Uri"
+                control={control}
+                render={({ field, fieldState }) => (
+                  <Input
+                    label="S3 URI"
+                    description="Bucket name and optional path prefix."
+                    value={field.value}
+                    onChange={(val) => {
+                      const trimmed = val.replace(/^s3:\/\//, "");
+                      field.onChange(trimmed);
+                    }}
+                    onBlur={field.onBlur}
+                    name={field.name}
+                    placeholder="my-bucket/path/prefix"
+                    prefix="s3://"
+                    size="lg"
+                    errorMessage={fieldState.error?.message}
+                  />
+                )}
+              />
+
+              <Controller
+                name="name"
+                control={control}
+                render={({ field, fieldState }) => (
+                  <Input
+                    label="Name"
+                    description="A friendly name, auto-suggested from the S3 URI."
+                    value={field.value}
+                    onChange={(val) => {
+                      if (!isAutoUpdatingName.current) {
+                        userEditedName.current = true;
+                      }
+                      field.onChange(val);
+                    }}
+                    onBlur={field.onBlur}
+                    name={field.name}
+                    placeholder="my-connection"
+                    size="lg"
+                    errorMessage={fieldState.error?.message}
+                  />
+                )}
+              />
+            </Fieldset>
+          )}
+
+          {currentStep === 1 && (
+            <Fieldset>
+              {adminScopes.length > 0 && (
                 <Controller
-                  name="providerType"
+                  name="ownerScope"
                   control={control}
-                  render={({ field }) => (
+                  render={({ field, fieldState }) => (
                     <Select
-                      items={providerItems}
-                      renderItem={(item) => <ProviderPill provider={item.id} />}
+                      label="Visibility"
+                      description="Who can access this connection."
+                      items={[
+                        { id: userId, name: "Personal" },
+                        ...adminScopes.map((str) => ({
+                          id: str,
+                          name: str,
+                        })),
+                      ]}
                       selectedKey={field.value}
                       onSelectionChange={(key) => field.onChange(key)}
+                      renderItem={(item) => <ScopePill scope={item.id} />}
+                      errorMessage={fieldState.error?.message}
                     />
                   )}
                 />
-              </Field>
-
-              <Field
-                label="S3 URI"
-                description="Bucket name and optional path prefix."
-                error={errors.s3Uri}
-              >
-                <Controller
-                  name="s3Uri"
-                  control={control}
-                  render={({ field }) => (
-                    <Input
-                      value={field.value}
-                      onChange={(val) => {
-                        const trimmed = val.replace(/^s3:\/\//, "");
-                        field.onChange(trimmed);
-                      }}
-                      onBlur={field.onBlur}
-                      name={field.name}
-                      placeholder="my-bucket/path/prefix"
-                      prefix="s3://"
-                      size="lg"
-                    />
-                  )}
-                />
-              </Field>
-
-              <Field
-                label="Name"
-                description="A friendly name, auto-suggested from the S3 URI."
-                error={errors.name}
-              >
-                <Controller
-                  name="name"
-                  control={control}
-                  render={({ field }) => (
-                    <Input
-                      value={field.value}
-                      onChange={(val) => {
-                        if (!isAutoUpdatingName.current) {
-                          userEditedName.current = true;
-                        }
-                        field.onChange(val);
-                      }}
-                      onBlur={field.onBlur}
-                      name={field.name}
-                      placeholder="my-connection"
-                      size="lg"
-                    />
-                  )}
-                />
-              </Field>
-            </Fieldset>
-          )}
-
-          {currentStep === 1 && (
-            <Fieldset>
-              {adminScopes.length > 0 && (
-                <Field
-                  label="Visibility"
-                  description="Who can access this connection."
-                  error={errors.ownerScope}
-                >
-                  <Controller
-                    name="ownerScope"
-                    control={control}
-                    render={({ field }) => (
-                      <Select
-                        items={[
-                          { id: userId, name: "Personal" },
-                          ...adminScopes.map((str) => ({
-                            id: str,
-                            name: str,
-                          })),
-                        ]}
-                        selectedKey={field.value}
-                        onSelectionChange={(key) => field.onChange(key)}
-                        renderItem={(item) => <ScopePill scope={item.id} />}
-                      />
-                    )}
-                  />
-                </Field>
               )}
 
               {isAWS ? (
                 <>
-                  <Field
-                    label="Role ARN"
-                    description="IAM role Cytario assumes to access your S3 data."
-                    error={errors.roleArn}
-                  >
-                    <Controller
-                      name="roleArn"
-                      control={control}
-                      render={({ field }) => (
-                        <Input
-                          value={field.value}
-                          onChange={field.onChange}
-                          onBlur={field.onBlur}
-                          name={field.name}
-                          placeholder="arn:aws:iam::123456789012:role/MyRole"
-                          size="lg"
-                        />
-                      )}
-                    />
-                  </Field>
-
-                  <Field
-                    label="Region"
-                    description="AWS region where this bucket is located."
-                    error={errors.bucketRegion}
-                  >
-                    <Controller
-                      name="bucketRegion"
-                      control={control}
-                      render={({ field }) => (
-                        <Select
-                          items={regionItems}
-                          selectedKey={field.value}
-                          onSelectionChange={(key) => field.onChange(key)}
-                        />
-                      )}
-                    />
-                  </Field>
-                </>
-              ) : (
-                <Field
-                  label="Endpoint"
-                  description="Endpoint URL of your S3-compatible storage."
-                  error={errors.bucketEndpoint}
-                >
                   <Controller
-                    name="bucketEndpoint"
+                    name="roleArn"
                     control={control}
-                    render={({ field }) => (
+                    render={({ field, fieldState }) => (
                       <Input
+                        label="Role ARN"
+                        description="IAM role Cytario assumes to access your S3 data."
                         value={field.value}
                         onChange={field.onChange}
                         onBlur={field.onBlur}
                         name={field.name}
-                        placeholder="https://s3.cytario.com"
+                        placeholder="arn:aws:iam::123456789012:role/MyRole"
                         size="lg"
+                        errorMessage={fieldState.error?.message}
+                      />
+                    )}
+                  />
+
+                  <Controller
+                    name="bucketRegion"
+                    control={control}
+                    render={({ field, fieldState }) => (
+                      <Select
+                        label="Region"
+                        description="AWS region where this bucket is located."
+                        items={regionItems}
+                        selectedKey={field.value}
+                        onSelectionChange={(key) => field.onChange(key)}
+                        errorMessage={fieldState.error?.message}
                       />
                     )}
                   />
-                </Field>
+                </>
+              ) : (
+                <Controller
+                  name="bucketEndpoint"
+                  control={control}
+                  render={({ field, fieldState }) => (
+                    <Input
+                      label="Endpoint"
+                      description="Endpoint URL of your S3-compatible storage."
+                      value={field.value}
+                      onChange={field.onChange}
+                      onBlur={field.onBlur}
+                      name={field.name}
+                      placeholder="https://s3.cytario.com"
+                      size="lg"
+                      errorMessage={fieldState.error?.message}
+                    />
+                  )}
+                />
               )}
             </Fieldset>
           )}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cytario/web",
-  "version": "2.2.6",
+  "version": "2.2.7",
   "description": "Cytario Web — scientific imaging data browser and viewer for OME-TIFF, OME-Zarr, Parquet and GeoTIFF on S3-compatible storage.",
   "license": "AGPL-3.0",
   "sideEffects": false,
@@ -55,8 +55,8 @@
     "codegen:check": "tsx scripts/codegen-check.ts",
     "dev": "node bin/cytario-web.mjs dev",
     "predev": "node scripts/prebuild.mjs && if [ -L node_modules/@cytario/design ]; then npm unlink @cytario/design --no-save 2>/dev/null && npm install @cytario/design --quiet; fi",
-    "predev:design": "cd ../cytario-design && npm link --quiet && cd - > /dev/null && npm link @cytario/design --quiet && for p in react react-dom react-aria-components; do rm -rf ../cytario-design/node_modules/$p && ln -s \"$(pwd)/node_modules/$p\" ../cytario-design/node_modules/$p; done",
-    "dev:design": "concurrently -n tsup,storybook,web -c blue,magenta,green \"cd ../cytario-design && npx tsup --watch\" \"cd ../cytario-design && npm run dev\" \"node bin/cytario-web.mjs dev\"",
+    "predev:design": "cd ../cytario-design && npm link --quiet && cd - > /dev/null && npm link @cytario/design --quiet && for p in react react-dom react-aria-components lucide-react; do rm -rf ../cytario-design/node_modules/$p && ln -s \"$(pwd)/node_modules/$p\" ../cytario-design/node_modules/$p; done && cd ../cytario-design && npm run build:css",
+    "dev:design": "concurrently -n tsup,css,storybook,web -c blue,yellow,magenta,green \"cd ../cytario-design && npx tsup --watch\" \"cd ../cytario-design && npx @tailwindcss/cli -i src/styles/tailwind.css -o dist/index.css --watch\" \"cd ../cytario-design && npm run dev\" \"node bin/cytario-web.mjs dev\"",
     "lint": "eslint --cache --cache-location ./node_modules/.cache/eslint .",
     "prestart": "npm run build:server",
     "start": "node bin/cytario-web.mjs start",
@@ -72,7 +72,7 @@
     "@aws-sdk/client-sts": "^3.687.0",
     "@aws-sdk/s3-request-presigner": "^3.693.0",
     "@cornerstonejs/codec-openjpeg": "^1.3.0",
-    "@cytario/design": "^3.4.0",
+    "@cytario/design": "^4.0.0",
     "@deck.gl/core": "~9.1.15",
     "@deck.gl/extensions": "~9.1.15",
     "@deck.gl/geo-layers": "~9.1.15",