Skip to content

Commit 66850df

Browse files
marcus-wishesmarcus-wishes
authored
Merge pull request #118 from linked-planet/dev
Dev
2 parents c0c2e50 + 158ed7d commit 66850df

File tree

21 files changed

+1120
-2056
lines changed

21 files changed

+1120
-2056
lines changed

‎library/src/components/Blanket.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,6 @@ export function Blanket({
1818
...props
1919
}: BlanketProps) {
2020
const ele = (
21-
// biome-ignore lint/a11y/useKeyWithClickEvents: <explanation>
2221
<div
2322
className={twMerge(
2423
"bg-blanket fixed inset-0 z-50 flex items-center justify-center",

‎library/src/components/BookCard.tsx‎

Lines changed: 50 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,10 @@ export const CardBase = forwardRef(
2323
testId,
2424
className,
2525
style,
26+
triggerClassName,
27+
triggerStyle,
28+
chevronClassName,
29+
chevronStyle,
2630
}: {
2731
header: React.ReactNode
2832
closed?: boolean
@@ -33,6 +37,10 @@ export const CardBase = forwardRef(
3337
testId?: string
3438
className?: string
3539
style?: CSSProperties
40+
triggerClassName?: string
41+
triggerStyle?: React.CSSProperties
42+
chevronClassName?: string
43+
chevronStyle?: React.CSSProperties
3644
},
3745
ref: React.ForwardedRef<HTMLDivElement>,
3846
) => {
@@ -50,14 +58,20 @@ export const CardBase = forwardRef(
5058
defaultOpen={defaultOpen}
5159
onChanged={onOpenChanged}
5260
className={twMerge(
53-
"border-border box-border shadow-overlay-bold border",
61+
"border-border box-border border-2 border-solid",
5462
className,
5563
)}
56-
triggerClassName="rounded-t border-b box-border border-border overflow-hidden"
64+
triggerClassName={twMerge(
65+
"rounded-t data-[state=closed]:border-b-0 data-[state=open]:border-b box-border border-solid border-x-0 border-t-0 border-border overflow-hidden",
66+
triggerClassName,
67+
)}
68+
triggerStyle={triggerStyle}
5769
id={id}
5870
testId={testId}
5971
ref={ref}
6072
style={style}
73+
chevronClassName={chevronClassName}
74+
chevronStyle={chevronStyle}
6175
>
6276
<div className="bg-surface box-border flex w-full rounded-b">
6377
{children}
@@ -113,7 +127,7 @@ const CardHeader = ({
113127
}) => (
114128
<div
115129
className={twMerge(
116-
"bg-surface-overlay box-border flex w-full flex-1 justify-between px-4 py-3",
130+
"bg-surface-overlay box-border flex flex-1 justify-between px-4 py-3",
117131
className,
118132
)}
119133
style={style}
@@ -133,13 +147,21 @@ const CardHeaderMeta = ({
133147
children,
134148
id,
135149
testId,
150+
className,
151+
style,
136152
}: {
137153
children: React.ReactNode
138154
id?: string
139155
testId?: string
156+
className?: string
157+
style?: CSSProperties
140158
}) => (
141159
<div
142-
className="w-full items-baseline box-border overflow-hidden"
160+
className={twMerge(
161+
"w-full items-baseline box-border overflow-hidden",
162+
className,
163+
)}
164+
style={style}
143165
id={id}
144166
data-testid={testId}
145167
>
@@ -267,15 +289,32 @@ const CardHeaderActions = ({
267289
children,
268290
id,
269291
testId,
292+
className,
293+
style,
294+
onClick,
295+
onKeyDown,
296+
onKeyUp,
270297
}: {
271298
children: React.ReactNode
272299
id?: string
273300
testId?: string
301+
className?: string
302+
style?: CSSProperties
303+
onClick?: (event: React.MouseEvent<HTMLDivElement>) => void
304+
onKeyDown?: (event: React.KeyboardEvent<HTMLDivElement>) => void
305+
onKeyUp?: (event: React.KeyboardEvent<HTMLDivElement>) => void
274306
}) => (
275307
<div
276-
className="flex flex-none box-border items-center justify-end pl-2"
308+
className={twMerge(
309+
"flex flex-none box-border items-center justify-end pl-2",
310+
className,
311+
)}
277312
id={id}
278313
data-testid={testId}
314+
style={style}
315+
onClick={onClick}
316+
onKeyDown={onKeyDown}
317+
onKeyUp={onKeyUp}
279318
>
280319
{children}
281320
</div>
@@ -285,15 +324,20 @@ const CardHeaderActionsInfo = ({
285324
children,
286325
id,
287326
testId,
327+
className,
328+
style,
288329
}: {
289330
children: React.ReactNode
290331
id?: string
291332
testId?: string
333+
className?: string
334+
style?: CSSProperties
292335
}) => (
293336
<div
294-
className="mr-2 box-border items-center text-sm"
337+
className={twMerge("mr-2 box-border items-center text-sm", className)}
295338
id={id}
296339
data-testid={testId}
340+
style={style}
297341
>
298342
{children}
299343
</div>

‎library/src/components/Collapsible.tsx‎

Lines changed: 24 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,12 @@
11
import * as CollapsibleRUI from "@radix-ui/react-collapsible"
2-
import {
2+
/*import {
33
ChevronDownIcon,
44
ChevronRightIcon,
55
ChevronUpIcon,
6-
} from "@radix-ui/react-icons"
6+
} from "@radix-ui/react-icons"*/
7+
8+
import { ChevronDownIcon, ChevronUpIcon, ChevronRightIcon } from "lucide-react"
9+
710
import { forwardRef, type HTMLProps } from "react"
811
import { twMerge } from "tailwind-merge"
912

@@ -14,6 +17,8 @@ type CollapsibleProps = {
1417
header: React.ReactNode
1518
triggerClassName?: string
1619
triggerStyle?: React.CSSProperties
20+
chevronClassName?: string
21+
chevronStyle?: React.CSSProperties
1722
headerContainerStyle?: React.CSSProperties
1823
headerContainerClassName?: string
1924
contentClassName?: string
@@ -38,6 +43,8 @@ export const Collapsible = forwardRef(
3843
triggerStyle,
3944
headerContainerStyle,
4045
headerContainerClassName,
46+
chevronClassName,
47+
chevronStyle,
4148
contentClassName,
4249
contentStyle,
4350
className,
@@ -66,7 +73,7 @@ export const Collapsible = forwardRef(
6673
>
6774
<CollapsibleRUI.Trigger
6875
className={twMerge(
69-
`flex w-full p-1.5 flex-1 items-center hover:bg-surface-raised-hovered active:bg-surface-raised-pressed justify-start select-none ${
76+
`flex p-1.5 flex-1 items-center hover:bg-surface-raised-hovered active:bg-surface-raised-pressed justify-start select-none ${
7077
openButtonPosition === "hidden"
7178
? "cursor-default"
7279
: "cursor-pointer disabled:cursor-default"
@@ -78,7 +85,12 @@ export const Collapsible = forwardRef(
7885
>
7986
<div>
8087
{openButtonPosition === "left" && (
81-
<div className="flex h-full flex-none items-center justify-center">
88+
<div
89+
className={twMerge(
90+
"flex h-full flex-none items-center justify-center size-4 pr-1",
91+
chevronClassName,
92+
)}
93+
>
8294
<ChevronDownIcon
8395
aria-label="close"
8496
className="group-data-[state=open]:block group-data-[state=closed]:hidden"
@@ -99,7 +111,13 @@ export const Collapsible = forwardRef(
99111
{header}
100112
</div>
101113
{openButtonPosition === "right" && (
102-
<div className="flex h-full flex-none items-center justify-center">
114+
<div
115+
className={twMerge(
116+
"flex h-full flex-none items-center justify-center size-5 px-1",
117+
chevronClassName,
118+
)}
119+
style={chevronStyle}
120+
>
103121
<ChevronDownIcon
104122
aria-label="close"
105123
className="group-data-[state=open]:block group-data-[state=closed]:hidden"
@@ -118,9 +136,7 @@ export const Collapsible = forwardRef(
118136
"overflow-hidden data-[state=closed]:animate-slideUpCollapsible data-[state=open]:animate-slideDownCollapsible",
119137
contentClassName,
120138
)}
121-
style={{
122-
...contentStyle,
123-
}}
139+
style={contentStyle}
124140
>
125141
{children}
126142
</CollapsibleRUI.Content>

‎library/src/components/HighlightedText.tsx‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import { useMemo } from "react"
2+
import { twMerge } from "tailwind-merge"
3+
export function HighlightedText({
4+
text,
5+
highlightedText,
6+
className,
7+
highlightClassName,
8+
style,
9+
containerElement,
10+
}: {
11+
text: string
12+
highlightedText: string[] | string
13+
highlightClassName?: string
14+
className?: string
15+
style?: React.CSSProperties
16+
containerElement?: React.ElementType
17+
}) {
18+
const parts = useMemo(() => {
19+
const highlights = Array.isArray(highlightedText)
20+
? highlightedText.map((it) => it.trim()).filter(Boolean)
21+
: [highlightedText.trim()]
22+
if (!highlights.length) return text
23+
const delimiterRegex = new RegExp(
24+
`(${highlights.map((it) => it.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")).join("|")})`,
25+
"g",
26+
)
27+
return text.split(delimiterRegex).reduce((acc, it, i) => {
28+
if (highlights.includes(it)) {
29+
acc.push(
30+
<span
31+
key={i}
32+
className={twMerge(
33+
"bg-selected-bold text-text-inverse p-0 m-0",
34+
highlightClassName,
35+
)}
36+
>
37+
{it}
38+
</span>,
39+
)
40+
return acc
41+
}
42+
acc.push(it)
43+
return acc
44+
}, [] as React.ReactNode[])
45+
}, [text, highlightClassName, highlightedText])
46+
47+
const ContainerElement = containerElement || "p"
48+
49+
return (
50+
<ContainerElement className={className} style={style}>
51+
{parts}
52+
</ContainerElement>
53+
)
54+
}

‎library/src/components/Pagination.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -180,7 +180,7 @@ function PaginationPageHandler<P extends string | number>({
180180
<button
181181
disabled={currentIdx <= 0}
182182
className={twMerge(
183-
`flex h-8 w-8 select-none items-center justify-center rounded p-1.5 border-0 border-none border-transparent bg-transparent ${
183+
`flex cursor-pointer disabled:cursor-default h-8 w-8 select-none items-center justify-center rounded p-1.5 border-0 border-none border-transparent bg-transparent ${
184184
currentIdx > 0
185185
? "hover:bg-neutral-hovered active:bg-neutral-pressed text-text"
186186
: "text-disabled-text"
@@ -208,8 +208,8 @@ function PaginationPageHandler<P extends string | number>({
208208
{page !== "..." ? (
209209
<button
210210
className={twMerge(
211-
"flex h-8 min-w-8 select-none items-center justify-center rounded p-1.5 border-0 border-none border-transparent bg-transparent",
212-
"data-[current=true]:bg-selected data-[current=true]:text-selected-text-inverse",
211+
"flex cursor-pointer h-8 min-w-8 select-none items-center justify-center rounded p-1.5 border-0 border-none border-transparent bg-transparent",
212+
"data-[current=true]:bg-selected data-[current=true]:text-selected-text-inverse data-[current=true]:cursor-default",
213213
"hover:bg-neutral-hovered active:bg-neutral-pressed",
214214
pageButtonClassName,
215215
)}
@@ -255,7 +255,7 @@ function PaginationPageHandler<P extends string | number>({
255255
<li className="m-0">
256256
<button
257257
className={twMerge(
258-
`flex h-8 w-8 select-none items-center justify-center rounded p-1.5 bg-transparent border-none border-0 border-transparent ${
258+
`flex cursor-pointer disabled:cursor-default h-8 w-8 select-none items-center justify-center rounded p-1.5 bg-transparent border-none border-0 border-transparent ${
259259
currentIdx < pages.length - 1
260260
? "hover:bg-neutral-hovered active:bg-neutral-pressed text-text"
261261
: "text-disabled-text"

‎library/src/components/Tabs.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ const Tab = forwardRef(
7272
disabled={disabled}
7373
className={twMerge(
7474
twJoin(
75-
"data-[state=active]:text-selected-text hover:text-text disabled:text-disabled-text text-text-subtlest data-[state=active]:after:bg-selected-border hover:after:bg-border relative text-ellipsis whitespace-nowrap font-[500] after:absolute after:rounded-sm hover:disabled:after:bg-transparent",
75+
"hover:cursor-pointer disabled:hover:cursor-auto data-[state=active]:text-selected-text hover:text-text disabled:text-disabled-text bg-transparent text-sm p-0 m-0 border-none text-text-subtlest data-[state=active]:after:bg-selected-border hover:after:bg-border relative text-ellipsis whitespace-nowrap font-[500] after:absolute after:rounded-sm hover:disabled:after:bg-transparent after:content-['']",
7676
tabSideClassName,
7777
),
7878
className,
@@ -170,7 +170,7 @@ const TabList = forwardRef(
170170
<RTabs.TabsList
171171
className={twMerge(
172172
twJoin(
173-
"before:bg-border relative flex flex-wrap gap-4 before:absolute before:rounded-sm",
173+
"before:bg-border before:content-[''] relative flex flex-wrap gap-4 before:absolute before:rounded-sm",
174174
tabListSideClassName,
175175
),
176176
className,

‎library/src/components/Tag.tsx‎

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -164,7 +164,7 @@ function SimpleTag({
164164
twJoin(
165165
colors,
166166
looks === "default" ? "rounded-[3px]" : "rounded-full",
167-
"box-border inline-flex max-w-max flex-1 cursor-default select-none items-center whitespace-nowrap px-1 align-middle text-sm",
167+
"box-border inline-flex max-w-max cursor-default select-none items-center whitespace-nowrap px-1 align-middle text-sm",
168168
bold ? "font-bold" : undefined,
169169
truncate ? "overflow-hidden" : undefined,
170170
),
@@ -175,7 +175,11 @@ function SimpleTag({
175175
id={id}
176176
data-testid={testId}
177177
>
178-
<div className={truncate ? "truncate" : undefined}>{children}</div>
178+
{truncate ? (
179+
<div className={"truncate w-full"}>{children}</div>
180+
) : (
181+
<>{children}</>
182+
)}
179183
</output>
180184
)
181185
}
@@ -221,7 +225,7 @@ export function Tag({
221225
return children
222226
}
223227
return (
224-
<div className="flex items-center">
228+
<div className="flex items-center justify-between w-full overflow-hidden">
225229
<div className="truncate">{children}</div>
226230

227231
<button
@@ -249,11 +253,15 @@ export function Tag({
249253
)
250254
}, [removable, removeButtonLabel, children, onClick])
251255

252-
const classNameUsed = hovered
253-
? `bg-danger text-danger-text ${className} ${
254-
removable ? "pr-0" : "pr-1"
255-
}`
256-
: `${className} ${removable ? "pr-0" : "pr-1"}`
256+
let classNameUsed = hovered
257+
? `bg-danger text-danger-text ${removable ? "pr-0" : "px-1"}`
258+
: `${removable ? "pr-0" : "px-1"}`
259+
260+
classNameUsed = useMemo(
261+
() => twMerge(classNameUsed, className),
262+
[classNameUsed, className],
263+
)
264+
257265
const styleUsed = hovered
258266
? { backgroundColor: undefined, textColor: undefined, ...style }
259267
: style

‎library/src/components/Toggle.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ export function Toggle({
3737
<Switch.Root
3838
id={id}
3939
className={twMerge(
40-
"bg-neutral-full hover:bg-neutral-full-pressed data-[state=checked]:bg-success-bold-hovered data-[state=checked]:hover:bg-success-bold-pressed relative mx-1.5 flex h-[15px] w-[32px] items-center overflow-hidden rounded-full",
40+
"border-none bg-neutral-full hover:bg-neutral-full-pressed data-[state=checked]:bg-success-bold-hovered data-[state=checked]:hover:bg-success-bold-pressed relative mx-1.5 p-0 flex h-[15px] w-[32px] items-center overflow-hidden rounded-full",
4141
className,
4242
)}
4343
style={style}

0 commit comments

Comments
 (0)