Skip to content

Commit fd8df6e

Browse files
loft-botloft-bot
committed
[skip ci] repo-sync
1 parent 7be37ac commit fd8df6e

Some content is hidden

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

44 files changed

+1793
-432
lines changed

‎.eslintrc

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"rules": {
3+
"react/prop-types": "off"
4+
}
5+
}

‎.gitignore

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
1-
node_modules
2-
.DS_Store
1+
node_modules/
2+
lib/
3+
yarn-error.log

‎index.ts

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -52,10 +52,10 @@ export {
5252
} from "./src/DropdownMenu"
5353
export { HoverCard, HoverCardTrigger, HoverCardContent } from "./src/HoverCard"
5454
export { IconButton } from "./src/IconButton"
55-
export { Input } from "./src/Input"
55+
export { Input, type InputProps } from "./src/Input"
5656
export { Label } from "./src/Label"
5757
export { Popover, PopoverContent, PopoverRoot, PopoverTrigger, PopoverPortal } from "./src/Popover"
58-
export { Progress } from "./src/Progress"
58+
export { Progress, ProgressVariant } from "./src/Progress"
5959
export { RadioGroup, RadioGroupItem } from "./src/RadioGroup"
6060
export { ScrollArea, ScrollBar } from "./src/ScrollArea"
6161
export {
@@ -84,7 +84,13 @@ export {
8484
export { Tabs, TabsList, TabsTrigger, TabsContent } from "./src/Tabs"
8585
export { Toggle } from "./src/Toggle"
8686
export { ToggleGroup, ToggleGroupItem } from "./src/ToggleGroup"
87-
87+
export {
88+
ModalDialog,
89+
type ModalProps,
90+
type ModalDialogInstance,
91+
type ModalAction,
92+
type SecondaryModalAction,
93+
} from "./src/ModalDialog"
8894
export { DropdownButton } from "./src/DropdownButton"
8995
export {
9096
Tooltip,
@@ -100,3 +106,4 @@ export { Slot } from "@radix-ui/react-slot"
100106
export * from "./src/index"
101107
export { Select as EnchangedSelect, SelectVariant } from "./src/Select/Select"
102108
export { CodeExample } from "./src/CodeExample"
109+
export { SegmentedToggle } from "./src/SegmentedToggle"

‎package.json

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,6 @@
55
"main": "index.ts",
66
"peerDependencies": {
77
"@loft-enterprise/client": "0.1.0",
8-
"@loft-enterprise/icons": "*",
9-
"framer-motion": "9.0.1",
108
"tailwindcss": "3.4.0"
119
},
1210
"dependencies": {
@@ -37,6 +35,9 @@
3735
"@radix-ui/react-toggle-group": "1.0.4",
3836
"@radix-ui/react-toolbar": "1.0.4",
3937
"@radix-ui/react-tooltip": "1.0.7",
40-
"react-select": "^5.8.0"
38+
"react-select": "^5.8.0",
39+
"framer-motion": "9.0.1",
40+
"react-day-picker": "9.3.0",
41+
"recharts": "2.13.3"
4142
}
4243
}

‎src/Accordion.tsx

Lines changed: 21 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,42 @@
1+
import DownOutlined from "@ant-design/icons/DownOutlined"
12
import * as AccordionPrimitive from "@radix-ui/react-accordion"
23
import * as React from "react"
34

45
import cn from "../clsx"
5-
import { DownOutlined } from "@loft-enterprise/icons"
66

77
const Accordion = AccordionPrimitive.Root
88

99
const AccordionItem = React.forwardRef<
1010
React.ElementRef<typeof AccordionPrimitive.Item>,
1111
React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
1212
>(({ className, ...props }, ref) => (
13-
<AccordionPrimitive.Item ref={ref} className={className} {...props} />
13+
<AccordionPrimitive.Item ref={ref} className={cn("group/accordion", className)} {...props} />
1414
))
1515
AccordionItem.displayName = "AccordionItem"
1616

17+
type TAccordionTriggerProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger> & {
18+
customTrigger?: React.ReactNode
19+
}
20+
1721
const AccordionTrigger = React.forwardRef<
1822
React.ElementRef<typeof AccordionPrimitive.Trigger>,
19-
React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
20-
>(({ className, children, ...props }, ref) => (
21-
<AccordionPrimitive.Header>
22-
<AccordionPrimitive.Trigger
23-
ref={ref}
24-
className={cn(
25-
"group/accordion flex cursor-pointer items-center justify-between bg-transparent p-2 transition-all [&[aria-expanded=true]>svg]:rotate-180",
26-
className
27-
)}
28-
{...props}>
29-
{children}
23+
TAccordionTriggerProps
24+
>(({ className, children, customTrigger, ...props }, ref) => (
25+
<AccordionPrimitive.Trigger
26+
ref={ref}
27+
className={cn(
28+
"group/accordion flex cursor-pointer items-center justify-between bg-transparent p-2 transition-all [&[aria-expanded=true]>svg]:rotate-180",
29+
className
30+
)}
31+
{...props}>
32+
{children}
33+
{customTrigger ?? (
3034
<DownOutlined
3135
className="transition-transform
32-
duration-200 ease-in-out *:size-3 group-aria-[expanded=true]/accordion:rotate-180"
36+
duration-200 ease-in-out *:size-3 group-aria-[expanded=true]/accordion:rotate-180"
3337
/>
34-
</AccordionPrimitive.Trigger>
35-
</AccordionPrimitive.Header>
38+
)}
39+
</AccordionPrimitive.Trigger>
3640
))
3741
AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
3842

@@ -42,7 +46,7 @@ const AccordionContent = React.forwardRef<
4246
>(({ className, children, ...props }, ref) => (
4347
<AccordionPrimitive.Content
4448
ref={ref}
45-
className="overflow-hidden transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
49+
className="w-full overflow-hidden transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
4650
{...props}>
4751
<div className={cn("", className)}>{children}</div>
4852
</AccordionPrimitive.Content>

‎src/Alert.tsx

Lines changed: 20 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
1+
import BulbOutlined from "@ant-design/icons/BulbOutlined"
2+
import ExclamationCircleFilled from "@ant-design/icons/ExclamationCircleFilled"
3+
import InfoCircleOutlined from "@ant-design/icons/InfoCircleOutlined"
4+
import WarningOutlined from "@ant-design/icons/WarningOutlined"
15
import React from "react"
26

37
import cn from "../clsx"
48
import { Button, ButtonProps } from "./Button"
5-
import {
6-
BulbOutlined,
7-
ExclamationCircleFilled,
8-
InfoCircleOutlined,
9-
WarningOutlined,
10-
} from "@loft-enterprise/icons"
119

1210
type Props = {
1311
title?: string
@@ -16,7 +14,7 @@ type Props = {
1614
onButtonClick?: () => Promise<void>
1715
linkText?: string
1816
linkUrl?: string
19-
variant?: "info" | "warning" | "error" | "blank"
17+
variant?: "info" | "warning" | "error" | "blank" | "neutral" | "danger"
2018
className?: string
2119
children?: React.ReactNode
2220
icon?: React.ReactNode
@@ -36,29 +34,42 @@ function Alert({
3634
}: Props) {
3735
const icon = {
3836
info: <InfoCircleOutlined />,
37+
neutral: <InfoCircleOutlined />,
3938
warning: <WarningOutlined />,
4039
error: <ExclamationCircleFilled />,
4140
blank: <BulbOutlined />,
41+
danger: <WarningOutlined />,
4242
}
4343

4444
const buttonChild = React.Children.toArray(children).find(
4545
(child) => React.isValidElement(child) && (child.type as any)?.name === "AlertButton"
4646
) as React.ReactElement | undefined
4747

48+
const contentChildren = React.Children.toArray(children).filter(
49+
(child) => !React.isValidElement(child) || (child.type as any)?.name !== "AlertButton"
50+
)
51+
4852
return (
4953
<div
5054
className={cn("rounded-md border px-3 py-3", className, {
5155
"border-primary-light bg-primary-extra-light": variant === "info",
5256
"border-warning-light bg-warning-extra-light": variant === "warning",
5357
"border-error-light bg-error-extra-light": variant === "error",
58+
"border-neutral-light bg-neutral-extra-light": variant === "neutral",
5459
"border-neutral-light": variant === "blank",
60+
"border-danger-light bg-danger-extra-light": variant === "danger",
5561
"flex flex-col gap-2": title,
5662
})}>
5763
<span className="flex flex-row items-center gap-2 [&_svg]:size-4">
5864
{Icon ? Icon : icon[variant]}
59-
{title ? <span className="font-bold">{title}</span> : <span>{text}</span>}
65+
{title ? <span className="font-semibold">{title}</span> : <span>{text}</span>}
6066
</span>
61-
{title && <span className="text-primary-main text-sm">{text}</span>}
67+
{title &&
68+
(contentChildren.length > 0 ? (
69+
<span className="text-primary-main text-sm">{contentChildren}</span>
70+
) : (
71+
text && <span className="text-primary-main text-sm">{text}</span>
72+
))}
6273
<div className="flex flex-row items-center gap-2">
6374
{buttonText && !buttonChild && (
6475
<Button className="self-start" size="small" onClickAsync={onButtonClick}>

‎src/Button.tsx

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1+
import LoadingOutlined from "@ant-design/icons/LoadingOutlined"
12
import { Slot } from "@radix-ui/react-slot"
23
import * as React from "react"
34

45
import { cn } from "../clsx"
5-
import { LoadingOutlined } from "@loft-enterprise/icons"
66

77
export type ButtonStyles =
88
| {
@@ -18,7 +18,7 @@ export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
1818
asChild?: boolean
1919
loading?: boolean
2020
size?: "default" | "large" | "small"
21-
onClickAsync?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => Promise<void> | undefined
21+
onClickAsync?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => unknown
2222
} & ButtonStyles
2323

2424
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
@@ -63,35 +63,36 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
6363
data-loading={isLoading || loading}
6464
type={type}
6565
className={cn(
66-
"ring-offset-background group inline-flex cursor-pointer select-none items-center justify-center gap-2 whitespace-nowrap rounded border transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-offset-2 disabled:pointer-events-none data-[loading=true]:pointer-events-none magic-[disabled,data-[loading=true]]:opacity-60",
66+
"ring-offset-background group inline-flex cursor-pointer select-none items-center justify-center gap-2 whitespace-nowrap rounded border font-semibold transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-offset-2 disabled:pointer-events-none data-[loading=true]:pointer-events-none magic-[disabled,data-[loading=true]]:opacity-60",
6767
{
6868
"px-2 py-1 text-sm": size === "default",
6969
"px-3 py-2 text-base": size === "large",
7070
"px-2 py-0.5 text-xs": size === "small",
71-
"border-transparent font-bold text-white": variant === "filled",
71+
"border-transparent text-white": variant === "filled",
7272
"ring-danger-light": appearance === "danger",
7373
"ring-success-light": appearance === "success",
7474
"ring-warning-light": appearance === "warning",
75+
"font-normal": variant === "link",
7576

7677
"bg-primary-main hover:bg-primary-light focus:bg-primary-light active:bg-primary-dark data-[loading=true]:bg-primary-light":
7778
appearance === "primary" && variant === "filled",
7879

79-
"border border-primary-main bg-transparent font-bold text-primaryColor-main hover:border-primary-light hover:text-primaryColor-light focus:text-primaryColor-light active:border-primary-dark active:text-primaryColor-dark magic-[disabled,data-[loading=true]]:border-primary-light":
80+
"border border-primary-main bg-transparent text-primaryColor-main hover:border-primary-light hover:text-primaryColor-light focus:text-primaryColor-light active:border-primary-dark active:text-primaryColor-dark magic-[disabled,data-[loading=true]]:border-primary-light":
8081
appearance === "primary" && variant === "outlined",
8182

82-
"border border-divider-main bg-transparent font-bold text-secondary hover:border-divider-main hover:text-primaryColor-light focus:border-divider-main focus:text-primaryColor-light active:border-primary-dark active:text-primaryColor-dark magic-[disabled,data-[loading=true]]:border-primary-light magic-[disabled,data-[loading=true]]:text-primaryColor-light":
83+
"border border-divider-main bg-transparent text-secondary hover:border-divider-main hover:text-primaryColor-light focus:border-divider-main focus:text-primaryColor-light active:border-primary-dark active:text-primaryColor-dark magic-[disabled,data-[loading=true]]:border-primary-light magic-[disabled,data-[loading=true]]:text-primaryColor-light":
8384
appearance === "primary" && variant === "tertiary",
8485

85-
"border-transparent bg-transparent font-bold text-primaryColor-main hover:bg-neutral-extra-light hover:text-primaryColor-light focus:bg-neutral-extra-light focus:text-primaryColor-light active:bg-neutral-light active:text-primaryColor-dark magic-[disabled,data-[loading=true]]:border magic-[disabled,data-[loading=true]]:border-primary-main":
86+
"border-transparent bg-transparent text-primaryColor-main hover:bg-neutral-extra-light hover:text-primaryColor-light focus:bg-neutral-extra-light focus:text-primaryColor-light active:bg-neutral-light active:text-primaryColor-dark magic-[disabled,data-[loading=true]]:border magic-[disabled,data-[loading=true]]:border-primary-main":
8687
appearance === "primary" && variant === "ghost",
8788

8889
"border-0 bg-transparent text-primaryColor-main underline hover:text-primaryColor-light focus:text-primaryColor-light active:text-primaryColor-dark":
8990
appearance === "primary" && variant === "link",
9091

91-
"bg-danger-main hover:bg-danger-light focus:bg-danger-light active:bg-danger-dark disabled:bg-danger-light data-[loading=true]:bg-danger-light":
92+
"bg-danger-main hover:bg-danger-light focus:bg-danger-light active:bg-danger-dark disabled:bg-danger-light data-[loading=true]:bg-danger-light":
9293
appearance === "danger" && variant === "filled",
9394

94-
"border border-danger-main bg-transparent font-bold text-danger-main hover:border-danger-light hover:text-danger-light focus:text-danger-light active:border-danger-dark active:text-danger-dark disabled:border-danger-light data-[loading=true]:border-danger-light":
95+
"border border-danger-main bg-transparent text-danger-main hover:border-danger-light hover:text-danger-light focus:text-danger-light active:border-danger-dark active:text-danger-dark disabled:border-danger-light data-[loading=true]:border-danger-light":
9596
appearance === "danger" && variant === "outlined",
9697

9798
"border-transparent bg-transparent text-danger-main hover:bg-neutral-extra-light focus:bg-neutral-extra-light active:bg-neutral-light active:text-danger-dark magic-[disabled,data-[loading=true]]:border magic-[disabled,data-[loading=true]]:border-danger-main":
@@ -103,13 +104,13 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
103104
"bg-success-main hover:bg-success-light focus:bg-success-light active:bg-success-dark disabled:bg-success-light data-[loading=true]:bg-success-light":
104105
appearance === "success" && variant === "filled",
105106

106-
"border border-success-main bg-transparent font-bold text-success-main hover:border-success-light hover:text-success-light focus:text-success-light active:border-success-dark active:text-success-dark disabled:border-success-light data-[loading=true]:border-success-light":
107+
"border border-success-main bg-transparent text-success-main hover:border-success-light hover:text-success-light focus:text-success-light active:border-success-dark active:text-success-dark disabled:border-success-light data-[loading=true]:border-success-light":
107108
appearance === "success" && variant === "outlined",
108109

109110
"bg-warning-main hover:bg-warning-light focus:bg-warning-light active:bg-warning-dark disabled:bg-warning-light data-[loading=true]:bg-warning-light":
110111
appearance === "warning" && variant === "filled",
111112

112-
"border border-warning-main bg-transparent font-bold text-warning-main hover:border-warning-light hover:text-warning-light focus:text-warning-light active:border-warning-dark active:text-warning-dark disabled:border-warning-light data-[loading=true]:border-warning-light":
113+
"border border-warning-main bg-transparent text-warning-main hover:border-warning-light hover:text-warning-light focus:text-warning-light active:border-warning-dark active:text-warning-dark disabled:border-warning-light data-[loading=true]:border-warning-light":
113114
appearance === "warning" && variant === "outlined",
114115
"bg-neutral-main text-white hover:bg-neutral-light focus:bg-neutral-light active:bg-neutral-dark disabled:bg-neutral-main data-[loading=true]:bg-neutral-main":
115116
appearance === "neutral" && variant === "filled",

‎src/Card.tsx

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import * as React from "react"
2+
3+
import { cn } from "../clsx"
4+
5+
const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
6+
({ className, ...props }, ref) => (
7+
<div
8+
ref={ref}
9+
className={cn(
10+
"text-card-foreground flex flex-col items-start justify-center rounded-lg border border-divider-light bg-transparent p-6",
11+
className
12+
)}
13+
{...props}
14+
/>
15+
)
16+
)
17+
Card.displayName = "Card"
18+
19+
const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
20+
({ className, ...props }, ref) => (
21+
<div ref={ref} className={cn("flex items-center gap-4 self-stretch", className)} {...props} />
22+
)
23+
)
24+
CardHeader.displayName = "CardHeader"
25+
26+
const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
27+
({ className, ...props }, ref) => <div ref={ref} className={cn("", className)} {...props} />
28+
)
29+
CardContent.displayName = "CardContent"
30+
31+
export { Card, CardHeader, CardContent }

0 commit comments

Comments
 (0)