Skip to content

Commit bbeeccc

Browse files
wackerowwackerow
authored
Merge branch 'dev' into shadcn-search
2 parents 6c3a2f9 + 096e581 commit bbeeccc

18 files changed

+734
-580
lines changed

‎package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@
4242
"@radix-ui/react-navigation-menu": "^1.2.0",
4343
"@radix-ui/react-popover": "^1.1.1",
4444
"@radix-ui/react-portal": "^1.1.1",
45+
"@radix-ui/react-progress": "^1.1.0",
4546
"@radix-ui/react-radio-group": "^1.2.0",
4647
"@radix-ui/react-slot": "^1.1.0",
4748
"@radix-ui/react-switch": "^1.1.0",
@@ -52,6 +53,7 @@
5253
"chartjs-plugin-datalabels": "^2.2.0",
5354
"class-variance-authority": "^0.7.0",
5455
"clsx": "^2.1.1",
56+
"cmdk": "^1.0.0",
5557
"embla-carousel-react": "^7.0.0",
5658
"ethereum-blockies-base64": "^1.0.2",
5759
"framer-motion": "^10.13.0",

‎src/components/LanguagePicker/MenuItem.tsx

Lines changed: 36 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,22 @@
1+
import { ComponentPropsWithoutRef } from "react"
12
import { useRouter } from "next/router"
23
import { useTranslation } from "next-i18next"
34
import { BsCheck } from "react-icons/bs"
4-
import {
5-
Badge,
6-
Box,
7-
Flex,
8-
forwardRef,
9-
Icon,
10-
MenuItem as ChakraMenuItem,
11-
type MenuItemProps as ChakraMenuItemProps,
12-
Text,
13-
} from "@chakra-ui/react"
145

156
import type { LocaleDisplayInfo } from "@/lib/types"
167

17-
import { BaseLink } from "@/components/Link"
8+
import { cn } from "@/lib/utils/cn"
9+
10+
import { Badge } from "../ui/badge"
11+
import { CommandItem } from "../ui/command"
1812

1913
import ProgressBar from "./ProgressBar"
2014

21-
type ItemProps = ChakraMenuItemProps & {
15+
type ItemProps = ComponentPropsWithoutRef<typeof CommandItem> & {
2216
displayInfo: LocaleDisplayInfo
2317
}
2418

25-
const MenuItem = forwardRef(({ displayInfo, ...props }: ItemProps, ref) => {
19+
const MenuItem = ({ displayInfo, ...props }: ItemProps) => {
2620
const {
2721
localeOption,
2822
sourceName,
@@ -32,7 +26,7 @@ const MenuItem = forwardRef(({ displayInfo, ...props }: ItemProps, ref) => {
3226
isBrowserDefault,
3327
} = displayInfo
3428
const { t } = useTranslation("common")
35-
const { asPath, locale } = useRouter()
29+
const { locale } = useRouter()
3630
const isCurrent = localeOption === locale
3731

3832
const getProgressInfo = (approvalProgress: number, wordsApproved: number) => {
@@ -48,86 +42,49 @@ const MenuItem = forwardRef(({ displayInfo, ...props }: ItemProps, ref) => {
4842
const { progress, words } = getProgressInfo(approvalProgress, wordsApproved)
4943

5044
return (
51-
<ChakraMenuItem
52-
as={BaseLink}
53-
ref={ref}
54-
flexDir="column"
55-
w="full"
56-
mb="1"
57-
display="block"
58-
pt="2 !important"
59-
alignItems="start"
60-
borderRadius="base"
61-
bg={isCurrent ? "background.base" : "transparent"}
62-
color="body.base"
63-
textDecoration="none"
64-
onFocus={(e) => {
65-
e.target.scrollIntoView({ block: "nearest" })
66-
}}
67-
scrollMarginY="8"
68-
_hover={{
69-
bg: "primary.lowContrast",
70-
textDecoration: "none",
71-
"p.language-name": { color: "primary.base" },
72-
}}
73-
_focus={{ bg: "primary.lowContrast" }}
74-
sx={{
75-
p: {
76-
textDecoration: "none",
77-
overflow: "hidden",
78-
textOverflow: "ellipsis",
79-
whiteSpace: "nowrap",
80-
},
81-
}}
82-
href={asPath}
83-
locale={localeOption}
45+
<CommandItem
46+
value={localeOption}
47+
className={cn(
48+
"group mb-1 flex-col items-start rounded pt-2 text-body hover:bg-primary-low-contrast",
49+
isCurrent
50+
? "bg-background hover:bg-primary-low-contrast"
51+
: "bg-transparent"
52+
)}
8453
{...props}
8554
>
86-
<Flex alignItems="center" w="full">
87-
<Box flex={1}>
88-
<Flex alignItems="center" gap={2}>
89-
<Text
90-
className="language-name"
91-
fontSize="lg"
92-
color={isCurrent ? "primary.highContrast" : "body.base"}
55+
<div className="flex w-full items-center">
56+
<div className="flex-1">
57+
<div className="flex items-center gap-2">
58+
<p
59+
className={cn(
60+
"language-name text-lg group-aria-selected:text-primary",
61+
isCurrent ? "text-primary-high-contrast" : "text-body"
62+
)}
9363
>
9464
{targetName}
95-
</Text>
65+
</p>
9666
{isBrowserDefault && (
9767
<Badge
98-
border="1px"
99-
borderColor="body.medium"
100-
color="body.medium"
101-
lineHeight="none"
102-
fontSize="2xs"
103-
p="1"
104-
h="fit-content"
105-
bg="none"
68+
className="h-fit-content rounded border-body-medium p-1 text-2xs font-normal uppercase leading-none text-body-medium"
69+
variant="outline"
10670
>
10771
{t("page-languages-browser-default")}
10872
</Badge>
10973
)}
110-
</Flex>
111-
<Text textTransform="uppercase" fontSize="xs" color="body.base">
112-
{sourceName}
113-
</Text>
114-
</Box>
74+
</div>
75+
<p className="text-xs uppercase text-body">{sourceName}</p>
76+
</div>
11577
{isCurrent && (
116-
<Icon as={BsCheck} fontSize="2xl" color="primary.highContrast" />
78+
<BsCheck className="text-2xl text-primary-high-contrast" />
11779
)}
118-
</Flex>
119-
<Text
120-
textTransform="lowercase"
121-
fontSize="xs"
122-
color="body.medium"
123-
maxW="full"
124-
>
80+
</div>
81+
<p className="max-w-full text-xs lowercase text-body-medium">
12582
{progress} {t("page-languages-translated")} • {words}{" "}
12683
{t("page-languages-words")}
127-
</Text>
84+
</p>
12885
<ProgressBar value={approvalProgress} />
129-
</ChakraMenuItem>
86+
</CommandItem>
13087
)
131-
})
88+
}
13289

13390
export default MenuItem

‎src/components/LanguagePicker/MobileCloseBar.tsx

Lines changed: 4 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
import { MouseEventHandler } from "react"
22
import { useTranslation } from "next-i18next"
3-
import { Flex } from "@chakra-ui/react"
43

5-
import { Button } from "@/components/Buttons"
4+
import { Button } from "../ui/buttons/Button"
65

76
type MobileCloseBarProps = {
87
handleClick: MouseEventHandler<HTMLButtonElement>
@@ -12,17 +11,10 @@ export const MobileCloseBar = ({ handleClick }: MobileCloseBarProps) => {
1211
const { t } = useTranslation()
1312

1413
return (
15-
<Flex
16-
justifyContent="end"
17-
hideFrom="md"
18-
position="sticky"
19-
zIndex="sticky"
20-
top="0"
21-
bg="background.base"
22-
>
23-
<Button p="4" variant="ghost" alignSelf="end" onClick={handleClick}>
14+
<div className="sticky top-0 flex justify-end bg-background md:hidden">
15+
<Button className="self-end p-4" variant="ghost" onClick={handleClick}>
2416
{t("close")}
2517
</Button>
26-
</Flex>
18+
</div>
2719
)
2820
}

‎src/components/LanguagePicker/NoResultsCallout.tsx

Lines changed: 20 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,30 @@
11
import { useTranslation } from "next-i18next"
2-
import { FormHelperText, forwardRef, Text } from "@chakra-ui/react"
32

43
import { BaseLink } from "@/components/Link"
54

65
import MenuItem from "./MenuItem"
76

87
type NoResultsCalloutProps = { onClose: () => void }
98

10-
const NoResultsCallout = forwardRef(
11-
({ onClose }: NoResultsCalloutProps, ref) => {
12-
const { t } = useTranslation("common")
13-
return (
14-
<FormHelperText color="body.medium" lineHeight="base" fontSize="md">
15-
<Text fontWeight="bold" mb="2" color="body.base">
16-
{t("page-languages-want-more-header")}
17-
</Text>
18-
{t("page-languages-want-more-paragraph")}{" "}
19-
<BaseLink
20-
ref={ref}
21-
as={MenuItem}
22-
key="item-no-results"
23-
href="contributing/translation-program"
24-
onClick={onClose}
25-
>
26-
{t("page-languages-want-more-link")}
27-
</BaseLink>
28-
</FormHelperText>
29-
)
30-
}
31-
)
9+
const NoResultsCallout = ({ onClose }: NoResultsCalloutProps) => {
10+
const { t } = useTranslation("common")
11+
return (
12+
<div>
13+
<p className="mb-2 font-bold">{t("page-languages-want-more-header")}</p>
14+
<p className="text-body-medium">
15+
{t("page-languages-want-more-paragraph")}
16+
</p>
17+
{/* TODO: use migrated Link component */}
18+
<BaseLink
19+
as={MenuItem}
20+
key="item-no-results"
21+
href="contributing/translation-program"
22+
onClick={onClose}
23+
>
24+
{t("page-languages-want-more-link")}
25+
</BaseLink>
26+
</div>
27+
)
28+
}
3229

3330
export default NoResultsCallout

‎src/components/LanguagePicker/ProgressBar.tsx

Lines changed: 5 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,11 @@
1-
import { Progress, ProgressProps } from "@chakra-ui/react"
1+
import { ComponentPropsWithoutRef } from "react"
22

3-
type ProgressBarProps = Pick<ProgressProps, "value">
3+
import { Progress } from "../ui/progress"
4+
5+
type ProgressBarProps = Pick<ComponentPropsWithoutRef<typeof Progress>, "value">
46

57
const ProgressBar = ({ value }: ProgressBarProps) => (
6-
<Progress
7-
value={value}
8-
h="0.5"
9-
w="full"
10-
bg="body.light"
11-
sx={{
12-
"[role=progressbar]": {
13-
backgroundColor: "disabled",
14-
},
15-
}}
16-
/>
8+
<Progress value={value} className="h-0.5" />
179
)
1810

1911
export default ProgressBar

0 commit comments

Comments
 (0)