Skip to content

Commit 73e83bb

Browse files
hunxjunedohunxjunedo
committed
add chakra ui
1 parent ff9cafd commit 73e83bb

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

56 files changed

+6493
-175
lines changed

‎package-lock.json

Lines changed: 3541 additions & 156 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@
1515
"private": true,
1616
"type": "module",
1717
"dependencies": {
18+
"@chakra-ui/react": "^3.0.1",
19+
"@emotion/react": "^11.13.3",
1820
"@testing-library/jest-dom": "^5.14.1",
1921
"@testing-library/react": "^11.2.7",
2022
"@testing-library/user-event": "^12.8.3",
@@ -28,11 +30,13 @@
2830
"i18next-http-backend": "^2.6.2",
2931
"jszip": "^3.10.1",
3032
"lucide-react": "^0.376.0",
33+
"next-themes": "^0.3.0",
3134
"prop-types": "^15.8.1",
3235
"react": "^18.2.0",
3336
"react-chatbotify": "^2.0.0-beta.3",
3437
"react-dom": "^18.2.0",
3538
"react-i18next": "^15.0.2",
39+
"react-icons": "^5.3.0",
3640
"react-loading-skeleton": "^3.4.0",
3741
"react-router-dom": "^6.2.2",
3842
"uuid": "^9.0.1",
@@ -54,7 +58,8 @@
5458
"tailwindcss": "^3.4.3",
5559
"vite": "^5.2.10",
5660
"vite-plugin-eslint": "^1.8.1",
57-
"vite-plugin-svgr": "^4.2.0"
61+
"vite-plugin-svgr": "^4.2.0",
62+
"vite-tsconfig-paths": "^5.0.1"
5863
},
5964
"scripts": {
6065
"lint": "eslint --fix . --ext .tsx",

‎src/components/NavigationBar/AppThemeToggle.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ const AppThemeToggle = () => {
1616
console.log(appTheme)
1717

1818
return <div>
19-
<button onClick={handleClick}>${appTheme}</button>
19+
<button onClick={handleClick}>{appTheme}</button>
2020
</div>
2121
}
2222

‎src/components/profile/profileSettings.tsx

Lines changed: 35 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,45 @@
1+
import {
2+
SelectContent,
3+
SelectItem,
4+
SelectLabel,
5+
SelectRoot,
6+
SelectTrigger,
7+
SelectValueText,
8+
} from "@/components/ui/select";
9+
import i18n from "@/i18n";
10+
import { createListCollection, useRecipe } from "@chakra-ui/react"
111
export default function ProfileSettings () {
12+
const supportedLangs =createListCollection({
13+
items: [
14+
{label: 'English', value: 'en'}
15+
]
16+
});
17+
18+
19+
const langChangeHandler = (input) => {
20+
const tag = input.value[0];
21+
i18n.changeLanguage(tag);
22+
23+
}
224
return (
325
<div className="rounded-xl w-[95vw] grid gap-8 text-primary-white
426
self-center my-5 p-10 bg-primary-darkForeground">
527
<h2 className="font-extrabold text-xl ">Profile settings</h2>
628
<div className="flex flex-row gap-14 flex-wrap">
729
<div className="grid grid-flow-row gap-3">
8-
<h3 className="text-sm font-extrabold">Language</h3>
9-
<Select >
10-
<option>English</option>
11-
</Select>
12-
</div>
13-
<div className="grid grid-flow-row gap-3">
14-
<h3 className="text-sm font-extrabold">Color theme</h3>
15-
<Select>
16-
<option>Browser default</option>
17-
<option>Dark</option>
18-
<option>Light</option>
19-
</Select>
30+
<SelectRoot onValueChange={langChangeHandler} width='100px' collection={supportedLangs}>
31+
<SelectLabel className="font-extrabold">Language </SelectLabel>
32+
<SelectTrigger className="border-2 px-1 rounded-md border-primary-mutedForeground">
33+
<SelectValueText placeholder="Select Language" />
34+
</SelectTrigger>
35+
<SelectContent className="border-2 border-red-900" border='Highlight' >
36+
{supportedLangs.items.map((lang) => (
37+
<SelectItem item={lang} key={lang.value}>
38+
{lang.label}
39+
</SelectItem>
40+
))}
41+
</SelectContent>
42+
</SelectRoot>
2043
</div>
2144
</div>
2245
</div>

‎src/components/ui/accordion.tsx

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import { Accordion, HStack } from "@chakra-ui/react"
2+
import { forwardRef } from "react"
3+
import { LuChevronDown } from "react-icons/lu"
4+
5+
interface AccordionItemTriggerProps extends Accordion.ItemTriggerProps {
6+
indicatorPlacement?: "start" | "end"
7+
}
8+
9+
export const AccordionItemTrigger = forwardRef<
10+
HTMLButtonElement,
11+
AccordionItemTriggerProps
12+
>(function AccordionItemTrigger(props, ref) {
13+
const { children, indicatorPlacement = "end", ...rest } = props
14+
return (
15+
<Accordion.ItemTrigger {...rest} ref={ref}>
16+
{indicatorPlacement === "start" && (
17+
<Accordion.ItemIndicator rotate={{ base: "-90deg", _open: "0deg" }}>
18+
<LuChevronDown />
19+
</Accordion.ItemIndicator>
20+
)}
21+
<HStack gap="4" flex="1" textAlign="start" width="full">
22+
{children}
23+
</HStack>
24+
{indicatorPlacement === "end" && (
25+
<Accordion.ItemIndicator>
26+
<LuChevronDown />
27+
</Accordion.ItemIndicator>
28+
)}
29+
</Accordion.ItemTrigger>
30+
)
31+
})
32+
33+
interface AccordionItemContentProps extends Accordion.ItemContentProps {}
34+
35+
export const AccordionItemContent = forwardRef<
36+
HTMLDivElement,
37+
AccordionItemContentProps
38+
>(function AccordionItemContent(props, ref) {
39+
return (
40+
<Accordion.ItemContent>
41+
<Accordion.ItemBody {...props} ref={ref} />
42+
</Accordion.ItemContent>
43+
)
44+
})
45+
46+
export const AccordionRoot = Accordion.Root
47+
export const AccordionItem = Accordion.Item

‎src/components/ui/action-bar.tsx

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import { ActionBar, Portal } from "@chakra-ui/react"
2+
import { CloseButton } from "./close-button"
3+
import { forwardRef } from "react"
4+
5+
interface ActionBarContentProps extends ActionBar.ContentProps {
6+
portalled?: boolean
7+
portalRef?: React.RefObject<HTMLElement>
8+
}
9+
10+
export const ActionBarContent = forwardRef<
11+
HTMLDivElement,
12+
ActionBarContentProps
13+
>(function ActionBarContent(props, ref) {
14+
const { children, portalled = true, portalRef, ...rest } = props
15+
16+
return (
17+
<Portal disabled={!portalled} container={portalRef}>
18+
<ActionBar.Positioner>
19+
<ActionBar.Content ref={ref} {...rest} asChild={false}>
20+
{children}
21+
</ActionBar.Content>
22+
</ActionBar.Positioner>
23+
</Portal>
24+
)
25+
})
26+
27+
export const ActionBarCloseTrigger = forwardRef<
28+
HTMLButtonElement,
29+
ActionBar.CloseTriggerProps
30+
>(function ActionBarCloseTrigger(props, ref) {
31+
return (
32+
<ActionBar.CloseTrigger {...props} asChild ref={ref}>
33+
<CloseButton size="sm" />
34+
</ActionBar.CloseTrigger>
35+
)
36+
})
37+
38+
export const ActionBarRoot = ActionBar.Root
39+
export const ActionBarSelectionTrigger = ActionBar.SelectionTrigger
40+
export const ActionBarSeparator = ActionBar.Separator

‎src/components/ui/alert.tsx

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import { Alert as ChakraAlert } from "@chakra-ui/react"
2+
import { CloseButton } from "./close-button"
3+
import { forwardRef } from "react"
4+
5+
export interface AlertProps extends Omit<ChakraAlert.RootProps, "title"> {
6+
startElement?: React.ReactNode
7+
endElement?: React.ReactNode
8+
title?: React.ReactNode
9+
icon?: React.ReactElement
10+
closable?: boolean
11+
onClose?: () => void
12+
}
13+
14+
export const Alert = forwardRef<HTMLDivElement, AlertProps>(
15+
function Alert(props, ref) {
16+
const {
17+
title,
18+
children,
19+
icon,
20+
closable,
21+
onClose,
22+
startElement,
23+
endElement,
24+
...rest
25+
} = props
26+
return (
27+
<ChakraAlert.Root ref={ref} {...rest}>
28+
{startElement || <ChakraAlert.Indicator>{icon}</ChakraAlert.Indicator>}
29+
{children ? (
30+
<ChakraAlert.Content>
31+
<ChakraAlert.Title>{title}</ChakraAlert.Title>
32+
<ChakraAlert.Description>{children}</ChakraAlert.Description>
33+
</ChakraAlert.Content>
34+
) : (
35+
<ChakraAlert.Title flex="1">{title}</ChakraAlert.Title>
36+
)}
37+
{endElement}
38+
{closable && (
39+
<CloseButton
40+
size="sm"
41+
pos="relative"
42+
top="-2"
43+
insetEnd="-2"
44+
alignSelf="flex-start"
45+
onClick={onClose}
46+
/>
47+
)}
48+
</ChakraAlert.Root>
49+
)
50+
},
51+
)

‎src/components/ui/avatar.tsx

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
"use client"
2+
3+
import type { GroupProps, SlotRecipeProps } from "@chakra-ui/react"
4+
import { Avatar as ChakraAvatar, Group } from "@chakra-ui/react"
5+
import { forwardRef } from "react"
6+
7+
type ImageProps = React.ImgHTMLAttributes<HTMLImageElement>
8+
9+
export interface AvatarProps extends ChakraAvatar.RootProps {
10+
name?: string
11+
src?: string
12+
srcSet?: string
13+
loading?: ImageProps["loading"]
14+
icon?: React.ReactElement
15+
fallback?: React.ReactNode
16+
}
17+
18+
export const Avatar = forwardRef<HTMLDivElement, AvatarProps>(
19+
function Avatar(props, ref) {
20+
const { name, src, srcSet, loading, icon, fallback, children, ...rest } =
21+
props
22+
return (
23+
<ChakraAvatar.Root ref={ref} {...rest}>
24+
<AvatarFallback name={name} icon={icon}>
25+
{fallback}
26+
</AvatarFallback>
27+
<ChakraAvatar.Image src={src} srcSet={srcSet} loading={loading} />
28+
{children}
29+
</ChakraAvatar.Root>
30+
)
31+
},
32+
)
33+
34+
interface AvatarFallbackProps extends ChakraAvatar.FallbackProps {
35+
name?: string
36+
icon?: React.ReactElement
37+
}
38+
39+
const AvatarFallback = forwardRef<HTMLDivElement, AvatarFallbackProps>(
40+
function AvatarFallback(props, ref) {
41+
const { name, icon, children, ...rest } = props
42+
return (
43+
<ChakraAvatar.Fallback ref={ref} {...rest}>
44+
{children}
45+
{name != null && children == null && <>{getInitials(name)}</>}
46+
{name == null && children == null && (
47+
<ChakraAvatar.Icon asChild={!!icon}>{icon}</ChakraAvatar.Icon>
48+
)}
49+
</ChakraAvatar.Fallback>
50+
)
51+
},
52+
)
53+
54+
function getInitials(name: string) {
55+
const names = name.trim().split(" ")
56+
const firstName = names[0] != null ? names[0] : ""
57+
const lastName = names.length > 1 ? names[names.length - 1] : ""
58+
return firstName && lastName
59+
? `${firstName.charAt(0)}${lastName.charAt(0)}`
60+
: firstName.charAt(0)
61+
}
62+
63+
interface AvatarGroupProps extends GroupProps, SlotRecipeProps<"avatar"> {}
64+
65+
export const AvatarGroup = forwardRef<HTMLDivElement, AvatarGroupProps>(
66+
function AvatarGroup(props, ref) {
67+
const { size, variant, borderless, ...rest } = props
68+
return (
69+
<ChakraAvatar.PropsProvider value={{ size, variant, borderless }}>
70+
<Group gap="0" spaceX="-3" ref={ref} {...rest} />
71+
</ChakraAvatar.PropsProvider>
72+
)
73+
},
74+
)

‎src/components/ui/blockquote.tsx

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import { Blockquote as ChakraBlockquote } from "@chakra-ui/react"
2+
import { forwardRef } from "react"
3+
4+
export interface BlockquoteProps extends ChakraBlockquote.RootProps {
5+
cite?: React.ReactNode
6+
citeUrl?: string
7+
icon?: React.ReactNode
8+
showDash?: boolean
9+
}
10+
11+
export const Blockquote = forwardRef<HTMLDivElement, BlockquoteProps>(
12+
function Blockquote(props, ref) {
13+
const { children, cite, citeUrl, showDash, icon, ...rest } = props
14+
15+
return (
16+
<ChakraBlockquote.Root ref={ref} {...rest}>
17+
{icon}
18+
<ChakraBlockquote.Content cite={citeUrl}>
19+
{children}
20+
</ChakraBlockquote.Content>
21+
{cite && (
22+
<ChakraBlockquote.Caption>
23+
{showDash ? <>&mdash;</> : null} <cite>{cite}</cite>
24+
</ChakraBlockquote.Caption>
25+
)}
26+
</ChakraBlockquote.Root>
27+
)
28+
},
29+
)
30+
31+
export const BlockquoteIcon = ChakraBlockquote.Icon

‎src/components/ui/breadcrumb.tsx

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import { Breadcrumb, type SystemStyleObject } from "@chakra-ui/react"
2+
import { Children, Fragment, forwardRef, isValidElement } from "react"
3+
4+
export interface BreadcrumbRootProps extends Breadcrumb.RootProps {
5+
separator?: React.ReactNode
6+
separatorGap?: SystemStyleObject["gap"]
7+
}
8+
9+
export const BreadcrumbRoot = forwardRef<HTMLDivElement, BreadcrumbRootProps>(
10+
function BreadcrumbRoot(props, ref) {
11+
const { separator, separatorGap, children, ...rest } = props
12+
const validChildren = Children.toArray(children).filter(isValidElement)
13+
return (
14+
<Breadcrumb.Root ref={ref} {...rest}>
15+
<Breadcrumb.List gap={separatorGap}>
16+
{validChildren.map((child, index) => {
17+
const last = index === validChildren.length - 1
18+
return (
19+
<Fragment key={index}>
20+
<Breadcrumb.Item>{child}</Breadcrumb.Item>
21+
{!last && (
22+
<Breadcrumb.Separator>{separator}</Breadcrumb.Separator>
23+
)}
24+
</Fragment>
25+
)
26+
})}
27+
</Breadcrumb.List>
28+
</Breadcrumb.Root>
29+
)
30+
},
31+
)
32+
33+
export const BreadcrumbLink = Breadcrumb.Link
34+
export const BreadcrumbCurrentLink = Breadcrumb.CurrentLink
35+
export const BreadcrumbEllipsis = Breadcrumb.Ellipsis

0 commit comments

Comments
 (0)