Skip to content

Commit 755c088

Browse files
marcus-wishesmarcus-wishes
authored
Merge pull request #167 from linked-planet/dev
Dev
2 parents 03ad3d0 + 5af27c3 commit 755c088

File tree

16 files changed

+1133
-619
lines changed

16 files changed

+1133
-619
lines changed

‎library/src/components/BookCard.tsx‎

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
import { css } from "@emotion/css"
22
import type React from "react"
3-
import type { ComponentProps, CSSProperties } from "react"
3+
import type {
4+
ComponentProps,
5+
ComponentPropsWithRef,
6+
CSSProperties,
7+
} from "react"
48
import { forwardRef } from "react"
59

610
import { twMerge } from "tailwind-merge"
@@ -79,15 +83,14 @@ type CardHeaderPrefixProps = {
7983
style?: CSSProperties
8084
}
8185

82-
const CardHeader = ({
83-
className,
84-
children,
85-
headerPrefix,
86-
...props
87-
}: ComponentProps<"div"> & {
88-
headerPrefix?: CardHeaderPrefixProps
89-
}) => (
86+
const CardHeader = forwardRef<
87+
HTMLDivElement,
88+
ComponentPropsWithRef<"div"> & {
89+
headerPrefix?: CardHeaderPrefixProps
90+
}
91+
>(({ className, children, headerPrefix, ...props }, ref) => (
9092
<div
93+
ref={ref}
9194
className={twMerge(
9295
"bg-surface-overlay box-border flex flex-1 justify-between px-4 py-3 overflow-hidden",
9396
className,
@@ -105,7 +108,7 @@ const CardHeader = ({
105108
) : null}
106109
{children}
107110
</div>
108-
)
111+
))
109112

110113
const CardHeaderMeta = ({
111114
children,

‎library/src/components/Collapsible.tsx‎

Lines changed: 110 additions & 103 deletions
Original file line numberDiff line numberDiff line change
@@ -19,119 +19,126 @@ type PanelProps = CollapsibleRUI.Panel.Props & {
1919

2020
export type CollapsibleProps = CollapsibleRUI.Root.Props
2121

22-
function Trigger({
23-
className,
24-
openButtonPosition = "left",
25-
chevronClassName,
26-
chevronStyle,
27-
headerContainerStyle,
28-
headerContainerClassName,
29-
title,
30-
children,
31-
render,
32-
nativeButton = true,
33-
...props
34-
}: CollapsibleTriggerProps) {
35-
const classNameResolved = useCallback(
36-
(state: CollapsibleRUI.Root.State) => {
37-
const basicClassName = twJoin(
38-
"flex w-full overflow-hidden flex-1 items-center bg-surface-raised hover:bg-surface-raised-hovered active:bg-surface-raised-pressed justify-start select-none border",
39-
"border-border border-solid group-data-[closed]/collapsible:rounded-xs group-data-[open]/collapsible:rounded-t-xs",
40-
focusVisibleOutlineStyles,
41-
openButtonPosition === "hidden"
42-
? "cursor-default"
43-
: "cursor-pointer disabled:cursor-default",
44-
)
45-
if (typeof className === "function") {
46-
return twMerge(basicClassName, className(state))
47-
}
48-
return twMerge(basicClassName, className)
49-
},
50-
[className, openButtonPosition],
51-
)
22+
const Trigger = forwardRef<HTMLButtonElement, CollapsibleTriggerProps>(
23+
(
24+
{
25+
className,
26+
openButtonPosition = "left",
27+
chevronClassName,
28+
chevronStyle,
29+
headerContainerStyle,
30+
headerContainerClassName,
31+
title,
32+
children,
33+
render,
34+
nativeButton = true,
35+
...props
36+
}: CollapsibleTriggerProps,
37+
ref: React.ForwardedRef<HTMLButtonElement>,
38+
) => {
39+
const classNameResolved = useCallback(
40+
(state: CollapsibleRUI.Root.State) => {
41+
const basicClassName = twJoin(
42+
"flex w-full overflow-hidden flex-1 items-center bg-surface-raised hover:bg-surface-raised-hovered active:bg-surface-raised-pressed justify-start select-none border",
43+
"border-border border-solid group-data-[closed]/collapsible:rounded-xs group-data-[open]/collapsible:rounded-t-xs",
44+
focusVisibleOutlineStyles,
45+
openButtonPosition === "hidden"
46+
? "cursor-default"
47+
: "cursor-pointer disabled:cursor-default",
48+
)
49+
if (typeof className === "function") {
50+
return twMerge(basicClassName, className(state))
51+
}
52+
return twMerge(basicClassName, className)
53+
},
54+
[className, openButtonPosition],
55+
)
5256

53-
const triggerContent = useMemo(() => {
54-
return (
55-
<>
56-
{openButtonPosition === "left" && (
57-
<div
58-
className={twMerge(
59-
"flex h-full flex-none items-center justify-center size-6 pr-1",
60-
chevronClassName,
61-
)}
62-
title={title}
63-
>
64-
<ChevronRightIcon
65-
strokeWidth={3}
66-
className="group-data-[closed]/collapsible:rotate-0 group-data-[open]/collapsible:rotate-90 transform transition-transform"
67-
/>
68-
</div>
69-
)}
70-
<div
71-
className={twMerge(
72-
"flex w-full flex-1 justify-start",
73-
headerContainerClassName,
57+
const triggerContent = useMemo(() => {
58+
return (
59+
<>
60+
{openButtonPosition === "left" && (
61+
<div
62+
className={twMerge(
63+
"flex h-full flex-none items-center justify-center size-6 pr-1",
64+
chevronClassName,
65+
)}
66+
title={title}
67+
>
68+
<ChevronRightIcon
69+
strokeWidth={3}
70+
className="group-data-[closed]/collapsible:rotate-0 group-data-[open]/collapsible:rotate-90 transform transition-transform"
71+
/>
72+
</div>
7473
)}
75-
style={headerContainerStyle}
76-
>
77-
{children}
78-
</div>
79-
{openButtonPosition === "right" && (
8074
<div
8175
className={twMerge(
82-
"flex h-full flex-none items-center justify-center size-6",
83-
chevronClassName,
76+
"flex w-full flex-1 justify-start",
77+
headerContainerClassName,
8478
)}
85-
style={chevronStyle}
86-
title={title}
79+
style={headerContainerStyle}
8780
>
88-
<ChevronLeftIcon
89-
strokeWidth={3}
90-
className="group-data-[closed]/collapsible:rotate-0 group-data-[open]/collapsible:-rotate-90 transform transition-transform"
91-
/>
81+
{children}
9282
</div>
93-
)}
94-
</>
95-
)
96-
}, [
97-
openButtonPosition,
98-
chevronClassName,
99-
chevronStyle,
100-
title,
101-
children,
102-
headerContainerClassName,
103-
headerContainerStyle,
104-
])
105-
106-
return (
107-
<CollapsibleRUI.Trigger
108-
className={classNameResolved}
109-
nativeButton={nativeButton}
110-
{...props}
111-
render={
112-
render ??
113-
((g) => {
114-
if (nativeButton) {
115-
return <button {...g}>{triggerContent}</button>
116-
}
117-
118-
return (
119-
// biome-ignore lint/a11y/useSemanticElements: cannot put button in button
83+
{openButtonPosition === "right" && (
12084
<div
121-
className="flex items-center w-full justify-between"
122-
data-component="collapsible-trigger"
123-
role="button"
124-
tabIndex={0}
125-
{...g}
85+
className={twMerge(
86+
"flex h-full flex-none items-center justify-center size-6",
87+
chevronClassName,
88+
)}
89+
style={chevronStyle}
90+
title={title}
12691
>
127-
{triggerContent}
92+
<ChevronLeftIcon
93+
strokeWidth={3}
94+
className="group-data-[closed]/collapsible:rotate-0 group-data-[open]/collapsible:-rotate-90 transform transition-transform"
95+
/>
12896
</div>
129-
)
130-
})
131-
}
132-
/>
133-
)
134-
}
97+
)}
98+
</>
99+
)
100+
}, [
101+
openButtonPosition,
102+
chevronClassName,
103+
chevronStyle,
104+
title,
105+
children,
106+
headerContainerClassName,
107+
headerContainerStyle,
108+
])
109+
110+
return (
111+
<CollapsibleRUI.Trigger
112+
className={classNameResolved}
113+
nativeButton={nativeButton}
114+
ref={ref}
115+
{...props}
116+
render={
117+
render ??
118+
((g) => {
119+
if (nativeButton) {
120+
return <button {...g}>{triggerContent}</button>
121+
}
122+
123+
return (
124+
// biome-ignore lint/a11y/useSemanticElements: cannot put button in button
125+
<div
126+
className="flex items-center w-full justify-between"
127+
data-component="collapsible-trigger"
128+
role="button"
129+
tabIndex={0}
130+
{...g}
131+
>
132+
{triggerContent}
133+
</div>
134+
)
135+
})
136+
}
137+
/>
138+
)
139+
},
140+
)
141+
Trigger.displayName = "CollapsibleTrigger"
135142

136143
function Panel({ className, role, ...props }: PanelProps) {
137144
const classNameResolved = useCallback(

‎library/src/components/HighlightedText.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ export function HighlightedText({
3030
return text.split(delimiterRegex).reduce((acc, it, i) => {
3131
if (delimiterRegex.test(it)) {
3232
acc.push(
33-
<span
33+
<strong
3434
// biome-ignore lint/suspicious/noArrayIndexKey: the ith instance of the highlighted text
3535
key={`highlight-${id}-${i}`}
3636
className={twMerge(
@@ -39,7 +39,7 @@ export function HighlightedText({
3939
)}
4040
>
4141
{it}
42-
</span>,
42+
</strong>,
4343
)
4444
return acc
4545
}

0 commit comments

Comments
 (0)