Use shadcn checkbox

razzeee · Oct 14, 2024 · 1161b47 · 1161b47
1 parent 01b6bcb
commit 1161b47
Show file tree

Hide file tree

Showing 10 changed files with 431 additions and 570 deletions.
diff --git a/frontend/@/components/ui/checkbox.tsx b/frontend/@/components/ui/checkbox.tsx
@@ -0,0 +1,30 @@
+"use client"
+
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { CheckIcon } from "@radix-ui/react-icons"
+
+import { cn } from "@/lib/utils"
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className,
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn("flex items-center justify-center text-current")}
+    >
+      <CheckIcon className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+export { Checkbox }
diff --git a/frontend/package.json b/frontend/package.json
@@ -21,6 +21,8 @@
     "@date-fns/utc": "^1.2.0",
     "@headlessui/react": "^2.1.2",
     "@mitresthen/matomo-tracker-react": "^0.1.1",
+    "@radix-ui/react-checkbox": "^1.1.2",
+    "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-switch": "^1.1.1",
     "@radix-ui/react-tooltip": "^1.1.3",

diff --git a/frontend/src/components/application/AppUploadControls/NewTokenDialog.tsx b/frontend/src/components/application/AppUploadControls/NewTokenDialog.tsx
@@ -8,6 +8,7 @@ import { useMutation } from "@tanstack/react-query"
 import { createUploadTokenUploadTokensAppIdPost } from "src/codegen"
 import { NewTokenResponse } from "src/codegen/model"
 import { Input } from "@/components/ui/input"
+import { Checkbox } from "@/components/ui/checkbox"
 
 interface Props {
   app_id: string
@@ -88,16 +89,21 @@ const NewTokenDialog: FunctionComponent<Props> = ({
           <div>
             <h4 className="mt-3 mb-1 font-bold">{t("scopes")}</h4>
             {["build", "upload", "publish", "jobs"].map((scope) => (
-              <div key={scope} className="ms-1">
-                <input
+              <div key={scope} className="items-top flex space-x-2 pt-2">
+                <Checkbox
                   id={`scope-${scope}`}
-                  type="checkbox"
-                  className="me-2"
                   checked={scopes.includes(scope)}
-                  onChange={(event) => setScope(scope, event.target.checked)}
+                  onCheckedChange={(event) => setScope(scope, Boolean(event))}
                   disabled={scope === "build"}
                 />
-                <label htmlFor={`scope-${scope}`}>{t(`scope-${scope}`)}</label>
+                <div className="grid gap-1.5 leading-none">
+                  <label
+                    className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                    htmlFor={`scope-${scope}`}
+                  >
+                    {t(`scope-${scope}`)}
+                  </label>
+                </div>
               </div>
             ))}
           </div>

diff --git a/frontend/src/components/moderation/AppModeration.tsx b/frontend/src/components/moderation/AppModeration.tsx
@@ -12,6 +12,7 @@ import { useTranslation } from "next-i18next"
 import Breadcrumbs from "../Breadcrumbs"
 import { getModerationAppModerationAppsAppIdGet } from "src/codegen"
 import { ModerationRequestResponse } from "src/codegen/model"
+import { Checkbox } from "@/components/ui/checkbox"
 
 interface Props {
   appId: string
@@ -128,39 +129,47 @@ const AppModeration: FunctionComponent<Props> = ({ appId }) => {
       </div>
 
       <div className="flex space-x-8">
-        <span>
-          <input
+        <div className="items-top flex space-x-1 pt-2">
+          <Checkbox
             id="include-outdated"
-            type="checkbox"
             checked={includeOutdatedQuery}
-            onChange={() => {
+            onCheckedChange={(event) => {
               setQueryParams(router, {
-                includeOutdated: includeOutdatedQuery ? undefined : "true",
+                includeOutdated: event ? undefined : "true",
                 page: "1",
               })
             }}
           />
-          <label htmlFor="include-outdated" className="ms-2">
-            Include outdated requests
-          </label>
-        </span>
-
-        <span>
-          <input
+          <div className="grid gap-1.5 leading-none">
+            <label
+              className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+              htmlFor="include-outdated"
+            >
+              Include outdated requests
+            </label>
+          </div>
+        </div>
+
+        <div className="items-top flex space-x-1 pt-2">
+          <Checkbox
             id="include-handled"
-            type="checkbox"
             checked={includeHandledQuery}
-            onChange={() => {
+            onCheckedChange={(event) => {
               setQueryParams(router, {
-                includeHandled: includeHandledQuery ? undefined : "true",
+                includeHandled: event ? undefined : "true",
                 page: "1",
               })
             }}
           />
-          <label htmlFor="include-handled" className="ms-2">
-            Include handled requests
-          </label>
-        </span>
+          <div className="grid gap-1.5 leading-none">
+            <label
+              className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+              htmlFor="include-handled"
+            >
+              Include handled requests
+            </label>
+          </div>
+        </div>
       </div>
 
       {query.data.data.requests.length === 0 && (

diff --git a/frontend/src/components/moderation/ModerationTabs.tsx b/frontend/src/components/moderation/ModerationTabs.tsx
@@ -9,6 +9,7 @@ import { useQuery } from "@tanstack/react-query"
 import { useTranslation } from "next-i18next"
 import { setQueryParams } from "src/utils/queryParams"
 import { getModerationAppsModerationAppsGet } from "src/codegen"
+import { Checkbox } from "@/components/ui/checkbox"
 
 const ModerationTabs: FunctionComponent = () => {
   const { t } = useTranslation()
@@ -91,39 +92,47 @@ const ModerationTabs: FunctionComponent = () => {
     return (
       <>
         <div className="flex space-x-8">
-          <span>
-            <input
+          <div className="items-top flex space-x-1 pt-2">
+            <Checkbox
               id="filter-new"
-              type="checkbox"
               checked={filterNewSubmissionsQuery}
-              onChange={() => {
+              onCheckedChange={(event) => {
                 setQueryParams(router, {
-                  filterNew: filterNewSubmissionsQuery ? undefined : "true",
+                  filterNew: event ? undefined : "true",
                   page: "1",
                 })
               }}
             />
-            <label htmlFor="filter-new" className="ms-2">
-              Only show new submissions
-            </label>
-          </span>
-
-          <span>
-            <input
+            <div className="grid gap-1.5 leading-none">
+              <label
+                className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                htmlFor="filter-new"
+              >
+                Only show new submissions
+              </label>
+            </div>
+          </div>
+
+          <div className="items-top flex space-x-1 pt-2">
+            <Checkbox
               id="include-handled"
-              type="checkbox"
               checked={showHandledQuery}
-              onChange={() => {
+              onCheckedChange={(event) => {
                 setQueryParams(router, {
-                  includeHandled: showHandledQuery ? undefined : "true",
+                  includeHandled: event ? undefined : "true",
                   page: "1",
                 })
               }}
             />
-            <label htmlFor="include-handled" className="ms-2">
-              Include handled requests
-            </label>
-          </span>
+            <div className="grid gap-1.5 leading-none">
+              <label
+                className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                htmlFor="include-handled"
+              >
+                Include handled requests
+              </label>
+            </div>
+          </div>
         </div>
         <ApplicationCollection
           title={undefined}

diff --git a/frontend/src/components/payment/checkout/PaymentForm.tsx b/frontend/src/components/payment/checkout/PaymentForm.tsx
@@ -10,6 +10,7 @@ import {
   setPendingWalletTransactionsTxnSetpendingPost,
   setSavecardWalletTransactionsTxnSavecardPost,
 } from "src/codegen"
+import { Checkbox } from "@/components/ui/checkbox"
 
 interface Props {
   transactionId: string
@@ -82,19 +83,19 @@ const PaymentForm: FunctionComponent<Props> = ({
         <Spinner size="s" />
       ) : (
         <>
-          <div className="relative flex items-start">
-            <div className="flex h-5 items-center">
-              <input
-                id="save-card"
-                type="checkbox"
-                aria-describedby="card-description"
-                className="size-4"
-                checked={checked}
-                onChange={() => setChecked(!checked)}
-              />
-            </div>
-            <div className="ms-3 text-sm">
-              <label htmlFor="save-card" className="font-medium">
+          <div className="items-top flex space-x-3 pt-2">
+            <Checkbox
+              id="save-card"
+              checked={checked}
+              onCheckedChange={(event) => {
+                setChecked(event)
+              }}
+            />
+            <div className="grid gap-1.5 leading-none">
+              <label
+                className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                htmlFor="save-card"
+              >
                 {t("save-card-for-reuse")}
               </label>
             </div>

diff --git a/frontend/src/components/payment/checkout/TermsAgreement.tsx b/frontend/src/components/payment/checkout/TermsAgreement.tsx
@@ -1,6 +1,7 @@
 import { useTranslation } from "next-i18next"
 import { FunctionComponent, ReactElement, useCallback, useState } from "react"
 import Button from "../../Button"
+import { Checkbox } from "@/components/ui/checkbox"
 
 interface Props {
   onConfirm: () => void
@@ -15,23 +16,21 @@ const TermsAgreement: FunctionComponent<Props> = ({
 
   const [checked, setChecked] = useState(false)
 
-  const invertCheck = useCallback(() => setChecked(!checked), [checked])
-
   return (
     <div className="flex flex-col gap-5 p-5">
-      <div className="relative flex items-start">
-        <div className="flex h-5 items-center">
-          <input
-            id="save-card"
-            type="checkbox"
-            checked={checked}
-            onChange={invertCheck}
-            aria-describedby="card-description"
-            className="size-4"
-          />
-        </div>
-        <div className="ms-3 text-sm">
-          <label htmlFor="save-card" className="font-medium">
+      <div className="items-top flex space-x-3 pt-2">
+        <Checkbox
+          id="purcase-terms-confirm"
+          checked={checked}
+          onCheckedChange={(event) => {
+            setChecked(event)
+          }}
+        />
+        <div className="grid gap-1.5 leading-none">
+          <label
+            className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+            htmlFor="purcase-terms-confirm"
+          >
             {t("purchase-terms-confirmation")}
           </label>
         </div>