[skip ci] repo-sync

loft-sh · Dec 19, 2024 · 90454df · 90454df
1 parent 7be37ac
commit 90454df
Show file tree

Hide file tree

Showing 40 changed files with 1,270 additions and 279 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -0,0 +1,5 @@
+{
+  "rules": {
+    "react/prop-types": "off"
+  }
+}
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,3 @@
-node_modules
-.DS_Store
+node_modules/
+lib/
+yarn-error.log
diff --git a/index.ts b/index.ts
@@ -100,3 +100,4 @@ export { Slot } from "@radix-ui/react-slot"
 export * from "./src/index"
 export { Select as EnchangedSelect, SelectVariant } from "./src/Select/Select"
 export { CodeExample } from "./src/CodeExample"
+export { SegmentedToggle } from "./src/SegmentedToggle"
diff --git a/package.json b/package.json
@@ -5,8 +5,6 @@
   "main": "index.ts",
   "peerDependencies": {
     "@loft-enterprise/client": "0.1.0",
-    "@loft-enterprise/icons": "*",
-    "framer-motion": "9.0.1",
     "tailwindcss": "3.4.0"
   },
   "dependencies": {
@@ -37,6 +35,9 @@
     "@radix-ui/react-toggle-group": "1.0.4",
     "@radix-ui/react-toolbar": "1.0.4",
     "@radix-ui/react-tooltip": "1.0.7",
-    "react-select": "^5.8.0"
+    "react-select": "^5.8.0",
+    "framer-motion": "9.0.1",
+    "react-day-picker": "9.3.0",
+    "recharts": "2.13.3"
   }
 }
diff --git a/src/Accordion.tsx b/src/Accordion.tsx
@@ -1,38 +1,42 @@
+import DownOutlined from "@ant-design/icons/DownOutlined"
 import * as AccordionPrimitive from "@radix-ui/react-accordion"
 import * as React from "react"
 
 import cn from "../clsx"
-import { DownOutlined } from "@loft-enterprise/icons"
 
 const Accordion = AccordionPrimitive.Root
 
 const AccordionItem = React.forwardRef<
   React.ElementRef<typeof AccordionPrimitive.Item>,
   React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
 >(({ className, ...props }, ref) => (
-  <AccordionPrimitive.Item ref={ref} className={className} {...props} />
+  <AccordionPrimitive.Item ref={ref} className={cn("group/accordion", className)} {...props} />
 ))
 AccordionItem.displayName = "AccordionItem"
 
+type TAccordionTriggerProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger> & {
+  customTrigger?: React.ReactNode
+}
+
 const AccordionTrigger = React.forwardRef<
   React.ElementRef<typeof AccordionPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
-  <AccordionPrimitive.Header>
-    <AccordionPrimitive.Trigger
-      ref={ref}
-      className={cn(
-        "group/accordion flex cursor-pointer items-center justify-between bg-transparent p-2 transition-all [&[aria-expanded=true]>svg]:rotate-180",
-        className
-      )}
-      {...props}>
-      {children}
+  TAccordionTriggerProps
+>(({ className, children, customTrigger, ...props }, ref) => (
+  <AccordionPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "group/accordion flex cursor-pointer items-center justify-between bg-transparent p-2 transition-all [&[aria-expanded=true]>svg]:rotate-180",
+      className
+    )}
+    {...props}>
+    {children}
+    {customTrigger ?? (
       <DownOutlined
         className="transition-transform 
-      duration-200 ease-in-out *:size-3 group-aria-[expanded=true]/accordion:rotate-180"
+        duration-200 ease-in-out *:size-3 group-aria-[expanded=true]/accordion:rotate-180"
       />
-    </AccordionPrimitive.Trigger>
-  </AccordionPrimitive.Header>
+    )}
+  </AccordionPrimitive.Trigger>
 ))
 AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
 
@@ -42,7 +46,7 @@ const AccordionContent = React.forwardRef<
 >(({ className, children, ...props }, ref) => (
   <AccordionPrimitive.Content
     ref={ref}
-    className="overflow-hidden transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    className="w-full overflow-hidden transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
     {...props}>
     <div className={cn("", className)}>{children}</div>
   </AccordionPrimitive.Content>

diff --git a/src/Alert.tsx b/src/Alert.tsx
@@ -1,13 +1,11 @@
+import BulbOutlined from "@ant-design/icons/BulbOutlined"
+import ExclamationCircleFilled from "@ant-design/icons/ExclamationCircleFilled"
+import InfoCircleOutlined from "@ant-design/icons/InfoCircleOutlined"
+import WarningOutlined from "@ant-design/icons/WarningOutlined"
 import React from "react"
 
 import cn from "../clsx"
 import { Button, ButtonProps } from "./Button"
-import {
-  BulbOutlined,
-  ExclamationCircleFilled,
-  InfoCircleOutlined,
-  WarningOutlined,
-} from "@loft-enterprise/icons"
 
 type Props = {
   title?: string
@@ -16,7 +14,7 @@ type Props = {
   onButtonClick?: () => Promise<void>
   linkText?: string
   linkUrl?: string
-  variant?: "info" | "warning" | "error" | "blank"
+  variant?: "info" | "warning" | "error" | "blank" | "neutral" | "danger"
   className?: string
   children?: React.ReactNode
   icon?: React.ReactNode
@@ -36,29 +34,42 @@ function Alert({
 }: Props) {
   const icon = {
     info: <InfoCircleOutlined />,
+    neutral: <InfoCircleOutlined />,
     warning: <WarningOutlined />,
     error: <ExclamationCircleFilled />,
     blank: <BulbOutlined />,
+    danger: <WarningOutlined />,
   }
 
   const buttonChild = React.Children.toArray(children).find(
     (child) => React.isValidElement(child) && (child.type as any)?.name === "AlertButton"
   ) as React.ReactElement | undefined
 
+  const contentChildren = React.Children.toArray(children).filter(
+    (child) => !React.isValidElement(child) || (child.type as any)?.name !== "AlertButton"
+  )
+
   return (
     <div
       className={cn("rounded-md border px-3 py-3", className, {
         "border-primary-light bg-primary-extra-light": variant === "info",
         "border-warning-light bg-warning-extra-light": variant === "warning",
         "border-error-light bg-error-extra-light": variant === "error",
+        "border-neutral-light bg-neutral-extra-light": variant === "neutral",
         "border-neutral-light": variant === "blank",
+        "border-danger-light bg-danger-extra-light": variant === "danger",
         "flex flex-col gap-2": title,
       })}>
       <span className="flex flex-row items-center gap-2 [&_svg]:size-4">
         {Icon ? Icon : icon[variant]}
-        {title ? <span className="font-bold">{title}</span> : <span>{text}</span>}
+        {title ? <span className="font-semibold">{title}</span> : <span>{text}</span>}
       </span>
-      {title && <span className="text-primary-main text-sm">{text}</span>}
+      {title &&
+        (contentChildren.length > 0 ? (
+          <span className="text-primary-main text-sm">{contentChildren}</span>
+        ) : (
+          text && <span className="text-primary-main text-sm">{text}</span>
+        ))}
       <div className="flex flex-row items-center gap-2">
         {buttonText && !buttonChild && (
           <Button className="self-start" size="small" onClickAsync={onButtonClick}>

diff --git a/src/Button.tsx b/src/Button.tsx
@@ -1,8 +1,8 @@
+import LoadingOutlined from "@ant-design/icons/LoadingOutlined"
 import { Slot } from "@radix-ui/react-slot"
 import * as React from "react"
 
 import { cn } from "../clsx"
-import { LoadingOutlined } from "@loft-enterprise/icons"
 
 export type ButtonStyles =
   | {
@@ -63,35 +63,36 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         data-loading={isLoading || loading}
         type={type}
         className={cn(
-          "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",
+          "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",
           {
             "px-2 py-1 text-sm": size === "default",
             "px-3 py-2 text-base": size === "large",
             "px-2 py-0.5 text-xs": size === "small",
-            "border-transparent font-bold text-white": variant === "filled",
+            "border-transparent text-white": variant === "filled",
             "ring-danger-light": appearance === "danger",
             "ring-success-light": appearance === "success",
             "ring-warning-light": appearance === "warning",
+            "font-normal": variant === "link",
 
             "bg-primary-main hover:bg-primary-light focus:bg-primary-light active:bg-primary-dark data-[loading=true]:bg-primary-light":
               appearance === "primary" && variant === "filled",
 
-            "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":
+            "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":
               appearance === "primary" && variant === "outlined",
 
-            "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":
+            "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":
               appearance === "primary" && variant === "tertiary",
 
-            "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":
+            "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":
               appearance === "primary" && variant === "ghost",
 
             "border-0 bg-transparent text-primaryColor-main underline hover:text-primaryColor-light focus:text-primaryColor-light active:text-primaryColor-dark":
               appearance === "primary" && variant === "link",
 
-            "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":
+            "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":
               appearance === "danger" && variant === "filled",
 
-            "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":
+            "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":
               appearance === "danger" && variant === "outlined",
 
             "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>(
             "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":
               appearance === "success" && variant === "filled",
 
-            "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":
+            "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":
               appearance === "success" && variant === "outlined",
 
             "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":
               appearance === "warning" && variant === "filled",
 
-            "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":
+            "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":
               appearance === "warning" && variant === "outlined",
             "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":
               appearance === "neutral" && variant === "filled",

diff --git a/src/Card.tsx b/src/Card.tsx
@@ -0,0 +1,31 @@
+import * as React from "react"
+
+import { cn } from "../clsx"
+
+const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(
+        "text-card-foreground flex flex-col items-start justify-center rounded-lg border border-divider-light bg-transparent p-6",
+        className
+      )}
+      {...props}
+    />
+  )
+)
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("flex items-center gap-4 self-stretch", className)} {...props} />
+  )
+)
+CardHeader.displayName = "CardHeader"
+
+const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => <div ref={ref} className={cn("", className)} {...props} />
+)
+CardContent.displayName = "CardContent"
+
+export { Card, CardHeader, CardContent }