fix a11y on comboboxes

package-lock.json

@@ -17539,246 +17539,6 @@
         "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
       }
     },
-    "node_modules/cmdk-supabase": {
-      "version": "0.2.2",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/react-dialog": "1.0.0",
-        "@radix-ui/react-id": "^0.0.6",
-        "command-score": "0.1.2",
-        "use-sync-external-store": "^1.2.0"
-      },
-      "peerDependencies": {
-        "react": "^17.0",
-        "react-dom": "^17.0"
-      }
-    },
-    "node_modules/cmdk-supabase/node_modules/@radix-ui/primitive": {
-      "version": "1.0.0",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10"
-      }
-    },
-    "node_modules/cmdk-supabase/node_modules/@radix-ui/react-compose-refs": {
-      "version": "1.0.0",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10"
-      },
-      "peerDependencies": {
-        "react": "^16.8 || ^17.0 || ^18.0"
-      }
-    },
-    "node_modules/cmdk-supabase/node_modules/@radix-ui/react-context": {
-      "version": "1.0.0",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10"
-      },
-      "peerDependencies": {
-        "react": "^16.8 || ^17.0 || ^18.0"
-      }
-    },
-    "node_modules/cmdk-supabase/node_modules/@radix-ui/react-dialog": {
-      "version": "1.0.0",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/primitive": "1.0.0",
-        "@radix-ui/react-compose-refs": "1.0.0",
-        "@radix-ui/react-context": "1.0.0",
-        "@radix-ui/react-dismissable-layer": "1.0.0",
-        "@radix-ui/react-focus-guards": "1.0.0",
-        "@radix-ui/react-focus-scope": "1.0.0",
-        "@radix-ui/react-id": "1.0.0",
-        "@radix-ui/react-portal": "1.0.0",
-        "@radix-ui/react-presence": "1.0.0",
-        "@radix-ui/react-primitive": "1.0.0",
-        "@radix-ui/react-slot": "1.0.0",
-        "@radix-ui/react-use-controllable-state": "1.0.0",
-        "aria-hidden": "^1.1.1",
-        "react-remove-scroll": "2.5.4"
-      },
-      "peerDependencies": {
-        "react": "^16.8 || ^17.0 || ^18.0",
-        "react-dom": "^16.8 || ^17.0 || ^18.0"
-      }
-    },
-    "node_modules/cmdk-supabase/node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-id": {
-      "version": "1.0.0",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/react-use-layout-effect": "1.0.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8 || ^17.0 || ^18.0"
-      }
-    },
-    "node_modules/cmdk-supabase/node_modules/@radix-ui/react-dismissable-layer": {
-      "version": "1.0.0",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/primitive": "1.0.0",
-        "@radix-ui/react-compose-refs": "1.0.0",
-        "@radix-ui/react-primitive": "1.0.0",
-        "@radix-ui/react-use-callback-ref": "1.0.0",
-        "@radix-ui/react-use-escape-keydown": "1.0.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8 || ^17.0 || ^18.0",
-        "react-dom": "^16.8 || ^17.0 || ^18.0"
-      }
-    },
-    "node_modules/cmdk-supabase/node_modules/@radix-ui/react-focus-guards": {
-      "version": "1.0.0",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10"
-      },
-      "peerDependencies": {
-        "react": "^16.8 || ^17.0 || ^18.0"
-      }
-    },
-    "node_modules/cmdk-supabase/node_modules/@radix-ui/react-focus-scope": {
-      "version": "1.0.0",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/react-compose-refs": "1.0.0",
-        "@radix-ui/react-primitive": "1.0.0",
-        "@radix-ui/react-use-callback-ref": "1.0.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8 || ^17.0 || ^18.0",
-        "react-dom": "^16.8 || ^17.0 || ^18.0"
-      }
-    },
-    "node_modules/cmdk-supabase/node_modules/@radix-ui/react-id": {
-      "version": "0.0.6",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10"
-      },
-      "peerDependencies": {
-        "react": "^16.8 || ^17.0"
-      }
-    },
-    "node_modules/cmdk-supabase/node_modules/@radix-ui/react-portal": {
-      "version": "1.0.0",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/react-primitive": "1.0.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8 || ^17.0 || ^18.0",
-        "react-dom": "^16.8 || ^17.0 || ^18.0"
-      }
-    },
-    "node_modules/cmdk-supabase/node_modules/@radix-ui/react-presence": {
-      "version": "1.0.0",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/react-compose-refs": "1.0.0",
-        "@radix-ui/react-use-layout-effect": "1.0.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8 || ^17.0 || ^18.0",
-        "react-dom": "^16.8 || ^17.0 || ^18.0"
-      }
-    },
-    "node_modules/cmdk-supabase/node_modules/@radix-ui/react-primitive": {
-      "version": "1.0.0",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/react-slot": "1.0.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8 || ^17.0 || ^18.0",
-        "react-dom": "^16.8 || ^17.0 || ^18.0"
-      }
-    },
-    "node_modules/cmdk-supabase/node_modules/@radix-ui/react-slot": {
-      "version": "1.0.0",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/react-compose-refs": "1.0.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8 || ^17.0 || ^18.0"
-      }
-    },
-    "node_modules/cmdk-supabase/node_modules/@radix-ui/react-use-callback-ref": {
-      "version": "1.0.0",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10"
-      },
-      "peerDependencies": {
-        "react": "^16.8 || ^17.0 || ^18.0"
-      }
-    },
-    "node_modules/cmdk-supabase/node_modules/@radix-ui/react-use-controllable-state": {
-      "version": "1.0.0",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/react-use-callback-ref": "1.0.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8 || ^17.0 || ^18.0"
-      }
-    },
-    "node_modules/cmdk-supabase/node_modules/@radix-ui/react-use-escape-keydown": {
-      "version": "1.0.0",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10",
-        "@radix-ui/react-use-callback-ref": "1.0.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8 || ^17.0 || ^18.0"
-      }
-    },
-    "node_modules/cmdk-supabase/node_modules/@radix-ui/react-use-layout-effect": {
-      "version": "1.0.0",
-      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.13.10"
-      },
-      "peerDependencies": {
-        "react": "^16.8 || ^17.0 || ^18.0"
-      }
-    },
-    "node_modules/cmdk-supabase/node_modules/react-remove-scroll": {
-      "version": "2.5.4",
-      "license": "MIT",
-      "dependencies": {
-        "react-remove-scroll-bar": "^2.3.3",
-        "react-style-singleton": "^2.2.1",
-        "tslib": "^2.1.0",
-        "use-callback-ref": "^1.3.0",
-        "use-sidecar": "^1.1.2"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "peerDependencies": {
-        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/co": {
       "version": "4.6.0",
       "dev": true,
@@ -17921,7 +17681,8 @@
     },
     "node_modules/command-score": {
       "version": "0.1.2",
-      "license": "MIT"
+      "resolved": "https://registry.npmjs.org/command-score/-/command-score-0.1.2.tgz",
+      "integrity": "sha512-VtDvQpIJBvBatnONUsPzXYFVKQQAhuf3XTNOAsdBxCNO/QCtUUd8LSgjn0GVarBkCad6aJCZfXgrjYbl/KRr7w=="
     },
     "node_modules/commander": {
       "version": "6.2.1",
@@ -40177,7 +39938,7 @@
         "autoprefixer": "^10.4.14",
         "class-variance-authority": "^0.6.0",
         "clsx": "^1.2.1",
-        "cmdk-supabase": "^0.2.2",
+        "cmdk-supabase": "1.0.6",
         "color": "^4.2.3",
         "colorjs.io": "^0.4.3",
         "common-tags": "^1.8.2",
@@ -41287,6 +41048,22 @@
         "node": ">=6"
       }
     },
+    "packages/ui/node_modules/cmdk-supabase": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/cmdk-supabase/-/cmdk-supabase-1.0.6.tgz",
+      "integrity": "sha512-DPeenlnJBtSxx49gJzMbe3gmC/IYCJcE5AZbs/G82pjWtHwK/skzc6LkJqIjdt9JOSoLjsWk0gYFCQXUp3JGBQ==",
+      "dependencies": {
+        "@radix-ui/react-dialog": "^1.0.4",
+        "@radix-ui/react-id": "^0.0.6",
+        "@radix-ui/react-slot": "1.0.2",
+        "command-score": "0.1.2",
+        "use-sync-external-store": "^1.2.0"
+      },
+      "peerDependencies": {
+        "react": "^17.0",
+        "react-dom": "^17.0"
+      }
+    },
     "packages/ui/node_modules/convert-source-map": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",

packages/ui/package.json

@@ -54,7 +54,7 @@
     "autoprefixer": "^10.4.14",
     "class-variance-authority": "^0.6.0",
     "clsx": "^1.2.1",
-    "cmdk-supabase": "^0.2.2",
+    "cmdk-supabase": "1.0.6",
     "color": "^4.2.3",
     "colorjs.io": "^0.4.3",
     "common-tags": "^1.8.2",

packages/ui/src/components/shadcn/ui/command.tsx

@@ -70,8 +70,12 @@ CommandList.displayName = CommandPrimitive.List.displayName
 const CommandEmpty = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Empty>,
   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
->((props, ref) => (
-  <CommandPrimitive.Empty ref={ref} className="py-6 text-center text-sm" {...props} />
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Empty
+    ref={ref}
+    className={cn('py-6 text-center text-sm', className)}
+    {...props}
+  />
 ))
 
 CommandEmpty.displayName = CommandPrimitive.Empty.displayName

studio/.gitignore

@@ -33,3 +33,5 @@ yarn-error.log*
 .env.production.local
 
 .vercel
+
+/public/dashboard

studio/components/layouts/AppLayout/OrganizationDropdown.tsx

@@ -46,7 +46,7 @@ const OrganizationDropdown = () => {
       <Link passHref href={slug ? `/org/${slug}` : '/'}>
         <a ref={orgNameRef} className="flex items-center space-x-2">
           <p className="text-sm">{orgName}</p>
-          {isSuccess && <Badge color="slate">{subscription?.plan.name}</Badge>}
+          {isSuccess && <Badge color="scale">{subscription?.plan.name}</Badge>}
         </a>
       </Link>
 
@@ -67,7 +67,7 @@ const OrganizationDropdown = () => {
           <Command_Shadcn_>
             <CommandInput_Shadcn_ placeholder="Find organization..." />
             <CommandList_Shadcn_>
-              <CommandEmpty_Shadcn_>No results found.</CommandEmpty_Shadcn_>
+              <CommandEmpty_Shadcn_>No organizations found</CommandEmpty_Shadcn_>
               <CommandGroup_Shadcn_>
                 {organizations?.map((org) => {
                   const href = router.pathname.includes('[slug]')
@@ -76,22 +76,29 @@ const OrganizationDropdown = () => {
                     ? `/org/${org.slug}/general`
                     : `/org/${org.slug}`
                   return (
-                    <CommandItem_Shadcn_
+                    <Link
+                      passHref
+                      href={href}
                       key={org.slug}
-                      value={org.name}
-                      className="cursor-pointer"
-                      onSelect={() => {
+                      onClick={() => {
                         setOpen(false)
-                        router.push(href)
                       }}
                     >
-                      <Link passHref href={href}>
-                        <a className="w-full flex items-center justify-between">
-                          <span>{org.name}</span>
-                          {org.slug === slug && <IconCheck className="text-brand-900" />}
+                      <CommandItem_Shadcn_
+                        asChild
+                        value={org.name}
+                        className="cursor-pointer w-full flex items-center justify-between"
+                        onSelect={() => {
+                          setOpen(false)
+                          router.push(href)
+                        }}
+                      >
+                        <a>
+                          {org.name}
+                          {org.slug === slug && <IconCheck />}
                         </a>
-                      </Link>
-                    </CommandItem_Shadcn_>
+                      </CommandItem_Shadcn_>
+                    </Link>
                   )
                 })}
               </CommandGroup_Shadcn_>

studio/components/layouts/AppLayout/ProjectDropdown.tsx

@@ -77,19 +77,24 @@ const ProjectLink = ({
   }
 
   return (
+    // <Link passHref href={href}>
     <CommandItem_Shadcn_
+      asChild
       key={project.ref}
       value={project.name}
-      className="cursor-pointer"
-      onSelect={() => setOpen(false)}
+      className="cursor-pointer w-full flex items-center justify-between"
+      onSelect={() => {
+        console.log('hello')
+        router.push(href)
+        setOpen(false)
+      }}
     >
-      <Link passHref href={href}>
-        <a className="w-full flex items-center justify-between">
-          <span>{project.name}</span>
-          {project.ref === ref && <IconCheck className="text-brand-900" />}
-        </a>
-      </Link>
+      <a>
+        {project.name}
+        {project.ref === ref && <IconCheck />}
+      </a>
     </CommandItem_Shadcn_>
+    // </Link>
   )
 }
 
@@ -143,7 +148,7 @@ const ProjectDropdown = () => {
           <Command_Shadcn_>
             <CommandInput_Shadcn_ placeholder="Find project..." />
             <CommandList_Shadcn_>
-              <CommandEmpty_Shadcn_>No results found.</CommandEmpty_Shadcn_>
+              <CommandEmpty_Shadcn_>No projects found</CommandEmpty_Shadcn_>
               <CommandGroup_Shadcn_>
                 {projects?.map((project) => (
                   <ProjectLink
@@ -155,20 +160,27 @@ const ProjectDropdown = () => {
                 ))}
               </CommandGroup_Shadcn_>
               <CommandGroup_Shadcn_ className="border-t">
-                <CommandItem_Shadcn_
-                  className="cursor-pointer"
-                  onSelect={() => {
-                    setOpen(false)
-                    router.push(`/new/${selectedOrganization?.slug}`)
-                  }}
+                <Link
+                  passHref
+                  href={`/new/${selectedOrganization?.slug}`}
+                  // onClick={() => {
+                  //   setOpen(false)
+                  // }}
                 >
-                  <Link passHref href={`/new/${selectedOrganization?.slug}`}>
-                    <a className="flex items-center space-x-2 w-full">
+                  <CommandItem_Shadcn_
+                    asChild
+                    className="cursor-pointer flex items-center space-x-2 w-full"
+                    // onSelect={() => {
+                    //   setOpen(false)
+                    //   router.push(`/new/${selectedOrganization?.slug}`)
+                    // }}
+                  >
+                    <a>
                       <IconPlus size={14} strokeWidth={1.5} />
                       <p>New project</p>
                     </a>
-                  </Link>
-                </CommandItem_Shadcn_>
+                  </CommandItem_Shadcn_>
+                </Link>
               </CommandGroup_Shadcn_>
             </CommandList_Shadcn_>
           </Command_Shadcn_>