[skip ci] repo-sync

loft-bot · loft-bot · commit c8531feb9846 · 2024-11-22T08:31:08.000Z
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,7 @@
     "@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"
   }
 }
diff --git a/src/Accordion.tsx b/src/Accordion.tsx
@@ -1,8 +1,8 @@
+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
 
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"
   className?: string
   children?: React.ReactNode
   icon?: React.ReactNode
@@ -36,6 +34,7 @@ function Alert({
 }: Props) {
   const icon = {
     info: <InfoCircleOutlined />,
+    neutral: <InfoCircleOutlined />,
     warning: <WarningOutlined />,
     error: <ExclamationCircleFilled />,
     blank: <BulbOutlined />,
@@ -45,20 +44,30 @@ function Alert({
     (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",
         "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>}
       </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/Checkbox.tsx b/src/Checkbox.tsx
@@ -1,10 +1,10 @@
+import CheckOutlined from "@ant-design/icons/CheckOutlined"
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
 import { CheckedState } from "@radix-ui/react-checkbox"
 import * as React from "react"
 
 import { cx } from "../clsx"
 import { Label } from "./Label"
-import { CheckOutlined } from "@loft-enterprise/icons"
 
 type TCheckboxProps = React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> & {
   children?: React.ReactNode
diff --git a/src/Chip.tsx b/src/Chip.tsx
@@ -1,7 +1,7 @@
+import CloseOutlined from "@ant-design/icons/CloseOutlined"
 import React, { LegacyRef } from "react"
 
 import { cn } from "../clsx/index"
-import { CloseOutlined } from "@loft-enterprise/icons"
 
 type Props = {
   size?: "small" | "medium" | "large"
diff --git a/src/DataTable/ColumnCustomization.tsx b/src/DataTable/ColumnCustomization.tsx
@@ -1,7 +1,7 @@
+import SettingOutlined from "@ant-design/icons/SettingOutlined"
 import { Table } from "@tanstack/react-table"
 import React from "react"
 
-import { SettingOutlined } from "@loft-enterprise/icons"
 import {
   Button,
   Checkbox,
diff --git a/src/DataTable/DataTable.tsx b/src/DataTable/DataTable.tsx
@@ -22,6 +22,7 @@ import useMenuVisibility from "./useMenuVisibility"
 import { ResultError } from "@loft-enterprise/client"
 import {
   Button,
+  cn,
   TableRow as NormalTableRow,
   Table,
   TableBody,
@@ -50,6 +51,7 @@ type Props<TData, TValue> = {
   showResetFiltersButton?: boolean
   resetTableKey?: string
   columnKeyPath?: string[]
+  onRowClick?: (rowKey: Key, rowId: string) => void
   emptyState?: React.ReactNode
 }
 
@@ -85,6 +87,7 @@ function DataTable<TData, TValue>({
   resetTableKey,
   columnKeyPath,
   emptyState,
+  onRowClick,
 }: Props<TData, TValue>) {
   const [sorting, setSorting] = useState<SortingState>([
     {
@@ -284,26 +287,32 @@ function DataTable<TData, TValue>({
                       animate={{ opacity: 1 }}
                       exit={{ opacity: 0 }}
                       transition={{ duration: 0.05 }}
+                      className={cn({
+                        "cursor-pointer": !!onRowClick,
+                      })}
+                      onClick={() => {
+                        onRowClick?.(key as Key, row.id)
+                      }}
                       data-row-key={key as Key}
                       data-state={row.getIsSelected() && "selected"}
                       onMouseOver={() => setHoveredRow(row.id)}
                       onMouseLeave={() => setHoveredRow(undefined)}>
                       {row.getVisibleCells().map((cell) => {
                         const isPinned = cell.column.getIsPinned()
-                        const isColumnHovered = row.id === hoveredRow
+                        const isRowHovered = row.id === hoveredRow
 
                         return (
                           <TableCell
                             key={cell.id}
                             data-opacity-transition={
-                              isPinned && !isColumnHovered && !shouldMenuAppearOnHover
+                              isPinned && !isRowHovered && !shouldMenuAppearOnHover
                             }
                             className={`overflow-x-hidden text-ellipsis whitespace-nowrap data-[opacity-transition=false]:duration-200 data-[opacity-transition=true]:duration-300 ${isPinned && row.id === hoveredRow ? "opacity-100" : ""}`}
                             style={{
                               maxWidth: cell.column.getSize(),
                               ...getCommonPinningStyles(cell.column, shouldMenuAppearOnHover),
                               opacity:
-                                isPinned && !isColumnHovered && !shouldMenuAppearOnHover ? 0 : 1,
+                                isPinned && !isRowHovered && !shouldMenuAppearOnHover ? 0 : 1,
                             }}>
                             {flexRender(cell.column.columnDef.cell, cell.getContext())}
                           </TableCell>
diff --git a/src/DataTable/Pagination.tsx b/src/DataTable/Pagination.tsx
@@ -1,7 +1,7 @@
+import RightOutlined from "@ant-design/icons/RightOutlined"
 import { Table } from "@tanstack/react-table"
 import React from "react"
 
-import { RightOutlined } from "@loft-enterprise/icons"
 import { Button } from "@loft-enterprise/primitives"
 
 type Props<TData> = {
diff --git a/src/DropdownButton.tsx b/src/DropdownButton.tsx
@@ -1,6 +1,6 @@
+import EllipsisOutlined from "@ant-design/icons/EllipsisOutlined"
 import React from "react"
 
-import { EllipsisOutlined } from "@loft-enterprise/icons"
 import {
   Button,
   DropdownMenu,
diff --git a/src/DropdownMenu.tsx b/src/DropdownMenu.tsx
@@ -1,8 +1,8 @@
+import RightOutlined from "@ant-design/icons/RightOutlined"
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
 import * as React from "react"
 
 import { cn } from "../clsx/index"
-import { RightOutlined } from "@loft-enterprise/icons"
 
 const DropdownMenu = DropdownMenuPrimitive.Root
 
diff --git a/src/EmptyState.tsx b/src/EmptyState.tsx
@@ -1,5 +1,5 @@
 import React from "react"
-import { Link, useHistory } from "react-router-dom"
+import { Link } from "react-router-dom"
 
 const variantCopy = {
   permission: {
@@ -25,8 +25,6 @@ function EmptyState({
   variant: "permission" | "noAccess" | "noClusters"
   productName?: string
 }) {
-  const history = useHistory()
-
   return (
     <div className="bg-background flex flex-col items-center justify-center px-4 py-12 sm:px-6 lg:px-8">
       <div className="mx-auto max-w-md text-center md:max-w-xl">
@@ -40,7 +38,7 @@ function EmptyState({
         <div className="mt-6">
           <Link
             to="#"
-            onClick={() => history.goBack()}
+            onClick={() => window.history.back()}
             className="bg-primary text-primary-foreground shadow-sm hover:bg-primary/90 focus:ring-primary inline-flex items-center rounded-md px-4 py-2 text-sm font-medium transition-colors">
             Go Back
           </Link>
diff --git a/src/ExpansionArea.tsx b/src/ExpansionArea.tsx
@@ -39,7 +39,7 @@ function ExpansionArea({
       defaultValue={open ? value : undefined}>
       <AccordionItem
         value={value}
-        className={cn("flex w-full flex-col bg-gray-5 [&_h3]:!mb-0", {
+        className={cn("flex w-full flex-col rounded-md bg-gray-5 [&_h3]:!mb-0", {
           "border-none": isChild,
           "border border-divider-light": !isChild,
           "bg-transparent": variant === "descriptive",
@@ -57,7 +57,7 @@ function ExpansionArea({
             })}>
             <span
               className={cn("", {
-                "flex flex-col gap-2 text-sm font-semibold": variant === "descriptive",
+                "flex flex-col gap-2 text-sm font-medium text-primary": variant === "descriptive",
               })}>
               {title}
             </span>
diff --git a/src/ExtendedInput.tsx b/src/ExtendedInput.tsx
@@ -1,11 +1,9 @@
+import CheckCircleFilled from "@ant-design/icons/CheckCircleFilled"
+import CloseCircleFilled from "@ant-design/icons/CloseCircleFilled"
+import ExclamationCircleFilled from "@ant-design/icons/ExclamationCircleFilled"
 import * as React from "react"
 
 import { cn } from "../clsx"
-import {
-  CheckCircleFilled,
-  CloseCircleFilled,
-  ExclamationCircleFilled,
-} from "@loft-enterprise/icons"
 
 type ExtendedInputContextType = {
   hasPrefix?: boolean
diff --git a/src/HoverCard.tsx b/src/HoverCard.tsx
@@ -1,5 +1,3 @@
-"use client"
-
 import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
 import * as React from "react"
 
diff --git a/src/IconButton.tsx b/src/IconButton.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 { cx } from "../clsx"
-import { LoadingOutlined } from "@loft-enterprise/icons"
 
 type IconButtonStyles = {
   appearance?: "primary" | "secondary" | "ghost"
diff --git a/src/Input.tsx b/src/Input.tsx
diff --git a/src/Popover.tsx b/src/Popover.tsx
diff --git a/src/ScrollArea.tsx b/src/ScrollArea.tsx
diff --git a/src/SegmentedToggle.tsx b/src/SegmentedToggle.tsx
diff --git a/src/Select.tsx b/src/Select.tsx
diff --git a/src/Select/CustomMultipleTextSelect.tsx b/src/Select/CustomMultipleTextSelect.tsx
diff --git a/src/Select/Select.tsx b/src/Select/Select.tsx
diff --git a/src/Switch.tsx b/src/Switch.tsx

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +{
 +  "rules": {
 +    "react/prop-types": "off"
 +  }
 +}