Merge pull request #13441 from TylerAPfledderer/feat/shadcn-migrate-checkbox

feat: set Checkbox component for ShadCN

Author: pettinarip

package.json

@@ -35,6 +35,7 @@
     "@emotion/styled": "^11.11.0",
     "@hookform/resolvers": "^3.8.0",
     "@radix-ui/react-accordion": "^1.2.0",
+    "@radix-ui/react-checkbox": "^1.1.1",
     "@radix-ui/react-navigation-menu": "^1.2.0",
     "@radix-ui/react-popover": "^1.1.1",
     "@radix-ui/react-slot": "^1.1.0",

src/layouts/BaseLayout.tsx

@@ -52,7 +52,7 @@ export const BaseLayout = ({
        * layout on initial load.
        */}
       <SkipLink />
-      <div className="max-w-screen-2xl mx-auto">
+      <div className="mx-auto max-w-screen-2xl">
         <Nav />
 
         {/* TODO: FIX TRANSLATION BANNER LOGIC FOR https://github.com/ethereum/ethereum-org-website/issues/11305 */}

tailwind.config.ts

@@ -1,4 +1,5 @@
 import type { Config } from "tailwindcss"
+import plugin from "tailwindcss/plugin"
 
 const config = {
   darkMode: ["class"],
@@ -134,7 +135,24 @@ const config = {
       },
     },
   },
-  plugins: [require("tailwindcss-animate")],
+  plugins: [
+    require("tailwindcss-animate"),
+    plugin(function ({ matchVariant }) {
+      // The :not() pseudo-class. `i.e. not-[:checked]`
+      matchVariant(
+        "not",
+        (value) => {
+          return `&:not(${value})`
+        },
+        {
+          values: {
+            // not-disabled => ":not(:disabled)"
+            disabled: ":disabled",
+          },
+        }
+      )
+    }),
+  ],
 } satisfies Config
 
 export default config

tailwind/ui/Checkbox.tsx

@@ -0,0 +1,30 @@
+import * as React from "react"
+import { RxCheck } from "react-icons/rx"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+
+import { cn } from "@/lib/utils/cn"
+
+export type CheckboxProps = React.ComponentPropsWithoutRef<
+  typeof CheckboxPrimitive.Root
+>
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  CheckboxProps
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "size-4 rounded-sm border border-body-medium text-background hover:border-primary-high-contrast hover:bg-body-light focus-visible:outline-offset-4 focus-visible:outline-primary-hover disabled:cursor-not-allowed disabled:border-disabled disabled:bg-disabled aria-[invalid]:border-error aria-[invalid]:bg-error-light data-[state='checked']:not-disabled:border-primary data-[state='checked']:not-disabled:bg-primary data-[state='checked']:hover:not-disabled:bg-primary-hover",
+      className
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator className="flex items-center justify-center">
+      <RxCheck className="text-sm" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+export default Checkbox

tailwind/ui/__stories__/Checkbox.stories.tsx

@@ -0,0 +1,59 @@
+import type { Meta, StoryObj } from "@storybook/react/*"
+
+import { HStack, VStack } from "../../../src/components/ui/flex"
+import CheckboxComponent, { type CheckboxProps } from "../Checkbox"
+
+const meta = {
+  title: "Atoms / Form / ShadCN Checkbox",
+  component: CheckboxComponent,
+} satisfies Meta<typeof CheckboxComponent>
+
+export default meta
+
+const checkboxDataSet: (CheckboxProps & { label: string })[] = [
+  {
+    id: "default",
+    value: "default",
+    label: "default",
+  },
+  {
+    id: "checked",
+    value: "checked",
+    label: "checked",
+    checked: true,
+  },
+  {
+    id: "disabled",
+    value: "disabled",
+    label: "disabled",
+    disabled: true,
+  },
+  {
+    id: "disabled-checked",
+    value: "disabled-checked",
+    label: "disabled-checked",
+    disabled: true,
+    checked: true,
+  },
+  {
+    id: "invalid",
+    value: "invalid",
+    label: "invalid",
+    "aria-invalid": true,
+  },
+]
+
+export const Checkbox: StoryObj<typeof meta> = {
+  render: () => (
+    <VStack className="items-start gap-4">
+      {checkboxDataSet.map(({ label, ...props }) => (
+        <HStack key={props.id} asChild>
+          <label>
+            <CheckboxComponent {...props} />
+            {label}
+          </label>
+        </HStack>
+      ))}
+    </VStack>
+  ),
+}

yarn.lock

@@ -3789,6 +3789,20 @@
   dependencies:
     "@radix-ui/react-primitive" "2.0.0"
 
+"@radix-ui/react-checkbox@^1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-checkbox/-/react-checkbox-1.1.1.tgz#a559c4303957d797acee99914480b755aa1f27d6"
+  integrity sha512-0i/EKJ222Afa1FE0C6pNJxDq1itzcl3HChE9DwskA4th4KRse8ojx8a1nVcOjwJdbpDLcz7uol77yYnQNMHdKw==
+  dependencies:
+    "@radix-ui/primitive" "1.1.0"
+    "@radix-ui/react-compose-refs" "1.1.0"
+    "@radix-ui/react-context" "1.1.0"
+    "@radix-ui/react-presence" "1.1.0"
+    "@radix-ui/react-primitive" "2.0.0"
+    "@radix-ui/react-use-controllable-state" "1.1.0"
+    "@radix-ui/react-use-previous" "1.1.0"
+    "@radix-ui/react-use-size" "1.1.0"
+
 "@radix-ui/react-collapsible@1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-collapsible/-/react-collapsible-1.1.0.tgz#4d49ddcc7b7d38f6c82f1fd29674f6fab5353e77"