Merge remote-tracking branch 'upstream/dev' into refactor/what-is-ethereum-shadcn

Author: TylerAPfledderer

.eslintrc.json

@@ -9,11 +9,7 @@
   "env": {
     "es6": true
   },
-  "plugins": [
-    "simple-import-sort",
-    "@typescript-eslint",
-    "unused-imports"
-  ],
+  "plugins": ["simple-import-sort", "@typescript-eslint", "unused-imports"],
   "parser": "@typescript-eslint/parser",
   "rules": {
     "simple-import-sort/imports": [
@@ -26,55 +22,29 @@
           ],
           // Packages. `react` related packages come first.
           // Also, put `react-icons` in sorting order not with `react`
-          [
-            "^react(?!-.)$",
-            "^\\w",
-            "^@\\w"
-          ],
+          ["^react(?!-.)$", "^\\w", "^@\\w"],
           // The Chakra theme directory if imported to story file or other places
-          [
-            "^@/@chakra-ui"
-          ],
+          ["^@/@chakra-ui"],
           // From the `types` directory.
-          [
-            "^@/lib/types",
-            "^@/lib/interfaces"
-          ],
+          ["^@/lib/types", "^@/lib/interfaces"],
           // From the `components` directory.
-          [
-            "^@/components"
-          ],
+          ["^@/components"],
           // From the `utils` directory.
-          [
-            "^@/lib/utils"
-          ],
+          ["^@/lib/utils"],
           // From the `data` directory.
-          [
-            "^@/data"
-          ],
+          ["^@/data"],
           // From the `constants` directory.
           ["^@/lib/constants"],
           // From the `.storybook/utils` file
           ["^@/storybook-utils"],
           // Parent imports. Put `..` last.
-          [
-            "^\\.\\.(?!/?$)",
-            "^\\.\\./?$"
-          ],
+          ["^\\.\\.(?!/?$)", "^\\.\\./?$"],
           // Other relative imports. Put same-folder imports and `.` last.
-          [
-            "^\\./(?=.*/)(?!/?$)",
-            "^\\.(?!/?$)",
-            "^\\./?$"
-          ],
+          ["^\\./(?=.*/)(?!/?$)", "^\\.(?!/?$)", "^\\./?$"],
           // Style imports.
-          [
-            "^.+\\.s?css$"
-          ],
+          ["^.+s?css$"],
           // Side effect imports.
-          [
-            "^\\u0000"
-          ]
+          ["^\\u0000"]
         ]
       }
     ],
@@ -89,7 +59,7 @@
     ],
     "unused-imports/no-unused-vars": [
       "error",
-        {
+      {
         "args": "all",
         "argsIgnorePattern": "^_$",
         "varsIgnorePattern": "^_$"
@@ -98,4 +68,3 @@
     "unused-imports/no-unused-imports-ts": "warn"
   }
 }
-

.storybook/preview.tsx

@@ -7,8 +7,10 @@ import ThemeProvider from "@/components/ThemeProvider"
 
 import i18n, { baseLocales } from "./i18next"
 
+import "@docsearch/css"
 import "../src/styles/global.css"
 import "../src/styles/fonts.css"
+import "../src/styles/docsearch.css"
 
 MotionGlobalConfig.skipAnimations = isChromatic()
 

package.json

@@ -37,9 +37,12 @@
     "@next/bundle-analyzer": "^14.2.5",
     "@radix-ui/react-accordion": "^1.2.0",
     "@radix-ui/react-checkbox": "^1.1.1",
+    "@radix-ui/react-compose-refs": "^1.1.0",
     "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-navigation-menu": "^1.2.0",
     "@radix-ui/react-popover": "^1.1.1",
+    "@radix-ui/react-portal": "^1.1.1",
+    "@radix-ui/react-progress": "^1.1.0",
     "@radix-ui/react-radio-group": "^1.2.0",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-switch": "^1.1.0",
@@ -50,6 +53,7 @@
     "chartjs-plugin-datalabels": "^2.2.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
+    "cmdk": "^1.0.0",
     "embla-carousel-react": "^7.0.0",
     "ethereum-blockies-base64": "^1.0.2",
     "framer-motion": "^10.13.0",

src/components/FeedbackCard.tsx

@@ -1,21 +1,20 @@
 import { type ReactNode, useState } from "react"
 import { useRouter } from "next/router"
 import { useTranslation } from "next-i18next"
-import { Flex, type FlexProps, Heading } from "@chakra-ui/react"
 
 import type { Lang } from "@/lib/types"
 
-import { Button } from "@/components/Buttons"
 import { FeedbackThumbsUpIcon } from "@/components/icons"
 
 import { trackCustomEvent } from "@/lib/utils/matomo"
 import { isLangRightToLeft } from "@/lib/utils/translations"
 
+import { Button } from "./ui/buttons/Button"
 import Translation from "./Translation"
 
 import { useSurvey } from "@/hooks/useSurvey"
 
-type FeedbackCardProps = FlexProps & {
+type FeedbackCardProps = {
   prompt?: string
   isArticle?: boolean
 }
@@ -60,44 +59,34 @@ const FeedbackCard = ({ prompt, isArticle, ...props }: FeedbackCardProps) => {
   }
 
   return (
-    <Flex
-      border="1px"
-      borderColor="border"
-      bg="feedbackGradient"
-      borderRadius="base"
-      p="6"
-      direction="column"
-      mb="4"
-      mt="8"
-      w="full"
+    <div
+      className="mb-4 mt-8 flex w-full flex-col rounded border border-body-light bg-feedback-gradient p-6"
       {...props}
       dir={dir}
     >
-      <Flex direction="column" gap="4">
-        <Heading as="h3" m="0" mb="2" fontSize="1.375rem" fontWeight="bold">
-          {getTitle(feedbackSubmitted)}
-        </Heading>
+      <div className="flex flex-col gap-4">
+        <h4 className="mb-2">{getTitle(feedbackSubmitted)}</h4>
         {feedbackSubmitted && (
           <p>
             {t("feedback-widget-thank-you-subtitle")}{" "}
             <Translation id="feedback-widget-thank-you-subtitle-ext" />
           </p>
         )}
-        <Flex gap="4">
+        <div className="flex gap-4">
           {!feedbackSubmitted ? (
             <>
               <Button
                 variant="outline-color"
-                leftIcon={<FeedbackThumbsUpIcon />}
                 onClick={() => handleSubmit(true)}
               >
+                <FeedbackThumbsUpIcon className="h-6 w-6" />
                 {t("yes")}
               </Button>
               <Button
                 variant="outline-color"
-                leftIcon={<FeedbackThumbsUpIcon transform="scaleY(-1)" />}
                 onClick={() => handleSubmit(false)}
               >
+                <FeedbackThumbsUpIcon className="-scale-y-100" />
                 {t("no")}
               </Button>
             </>
@@ -106,9 +95,9 @@ const FeedbackCard = ({ prompt, isArticle, ...props }: FeedbackCardProps) => {
               {t("feedback-widget-thank-you-cta")}
             </Button>
           )}
-        </Flex>
-      </Flex>
-    </Flex>
+        </div>
+      </div>
+    </div>
   )
 }
 

src/components/Image.tsx

@@ -41,8 +41,18 @@ const DefaultNextImage = (props: ImageProps) => {
 }
 
 /**
- * TODO: replace this component with import { Image } from "@chakra-ui/next-js"
- * once https://github.com/vercel/next.js/issues/52216 is fixed
+ * TODO: Rename this component to `Image` once all components are using Tailwind
+ */
+export const TwImage = (props: NextImageProps) => (
+  <DefaultNextImage {...props} />
+)
+
+/**
+ * DEPRECATED: Use `TWImage` instead
+ *
+ * TODO: Remove this component once all components are using Tailwind
+ *
+ * @deprecated
  */
 export const Image: ChakraComponent<"img", NextImageProps> = chakra(
   DefaultNextImage,

src/components/LanguagePicker/MenuItem.tsx

@@ -1,28 +1,22 @@
+import { ComponentPropsWithoutRef } from "react"
 import { useRouter } from "next/router"
 import { useTranslation } from "next-i18next"
 import { BsCheck } from "react-icons/bs"
-import {
-  Badge,
-  Box,
-  Flex,
-  forwardRef,
-  Icon,
-  MenuItem as ChakraMenuItem,
-  type MenuItemProps as ChakraMenuItemProps,
-  Text,
-} from "@chakra-ui/react"
 
 import type { LocaleDisplayInfo } from "@/lib/types"
 
-import { BaseLink } from "@/components/Link"
+import { cn } from "@/lib/utils/cn"
+
+import { Badge } from "../ui/badge"
+import { CommandItem } from "../ui/command"
 
 import ProgressBar from "./ProgressBar"
 
-type ItemProps = ChakraMenuItemProps & {
+type ItemProps = ComponentPropsWithoutRef<typeof CommandItem> & {
   displayInfo: LocaleDisplayInfo
 }
 
-const MenuItem = forwardRef(({ displayInfo, ...props }: ItemProps, ref) => {
+const MenuItem = ({ displayInfo, ...props }: ItemProps) => {
   const {
     localeOption,
     sourceName,
@@ -32,7 +26,7 @@ const MenuItem = forwardRef(({ displayInfo, ...props }: ItemProps, ref) => {
     isBrowserDefault,
   } = displayInfo
   const { t } = useTranslation("common")
-  const { asPath, locale } = useRouter()
+  const { locale } = useRouter()
   const isCurrent = localeOption === locale
 
   const getProgressInfo = (approvalProgress: number, wordsApproved: number) => {
@@ -48,86 +42,49 @@ const MenuItem = forwardRef(({ displayInfo, ...props }: ItemProps, ref) => {
   const { progress, words } = getProgressInfo(approvalProgress, wordsApproved)
 
   return (
-    <ChakraMenuItem
-      as={BaseLink}
-      ref={ref}
-      flexDir="column"
-      w="full"
-      mb="1"
-      display="block"
-      pt="2 !important"
-      alignItems="start"
-      borderRadius="base"
-      bg={isCurrent ? "background.base" : "transparent"}
-      color="body.base"
-      textDecoration="none"
-      onFocus={(e) => {
-        e.target.scrollIntoView({ block: "nearest" })
-      }}
-      scrollMarginY="8"
-      _hover={{
-        bg: "primary.lowContrast",
-        textDecoration: "none",
-        "p.language-name": { color: "primary.base" },
-      }}
-      _focus={{ bg: "primary.lowContrast" }}
-      sx={{
-        p: {
-          textDecoration: "none",
-          overflow: "hidden",
-          textOverflow: "ellipsis",
-          whiteSpace: "nowrap",
-        },
-      }}
-      href={asPath}
-      locale={localeOption}
+    <CommandItem
+      value={localeOption}
+      className={cn(
+        "group mb-1 flex-col items-start rounded pt-2 text-body hover:bg-primary-low-contrast",
+        isCurrent
+          ? "bg-background hover:bg-primary-low-contrast"
+          : "bg-transparent"
+      )}
       {...props}
     >
-      <Flex alignItems="center" w="full">
-        <Box flex={1}>
-          <Flex alignItems="center" gap={2}>
-            <Text
-              className="language-name"
-              fontSize="lg"
-              color={isCurrent ? "primary.highContrast" : "body.base"}
+      <div className="flex w-full items-center">
+        <div className="flex-1">
+          <div className="flex items-center gap-2">
+            <p
+              className={cn(
+                "language-name text-lg group-aria-selected:text-primary",
+                isCurrent ? "text-primary-high-contrast" : "text-body"
+              )}
             >
               {targetName}
-            </Text>
+            </p>
             {isBrowserDefault && (
               <Badge
-                border="1px"
-                borderColor="body.medium"
-                color="body.medium"
-                lineHeight="none"
-                fontSize="2xs"
-                p="1"
-                h="fit-content"
-                bg="none"
+                className="h-fit-content rounded border-body-medium p-1 text-2xs font-normal uppercase leading-none text-body-medium"
+                variant="outline"
               >
                 {t("page-languages-browser-default")}
               </Badge>
             )}
-          </Flex>
-          <Text textTransform="uppercase" fontSize="xs" color="body.base">
-            {sourceName}
-          </Text>
-        </Box>
+          </div>
+          <p className="text-xs uppercase text-body">{sourceName}</p>
+        </div>
         {isCurrent && (
-          <Icon as={BsCheck} fontSize="2xl" color="primary.highContrast" />
+          <BsCheck className="text-2xl text-primary-high-contrast" />
         )}
-      </Flex>
-      <Text
-        textTransform="lowercase"
-        fontSize="xs"
-        color="body.medium"
-        maxW="full"
-      >
+      </div>
+      <p className="max-w-full text-xs lowercase text-body-medium">
         {progress} {t("page-languages-translated")} • {words}{" "}
         {t("page-languages-words")}
-      </Text>
+      </p>
       <ProgressBar value={approvalProgress} />
-    </ChakraMenuItem>
+    </CommandItem>
   )
-})
+}
 
 export default MenuItem