initial commit

Author: pascalbreuninger

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+.DS_Store

clsx/index.ts

@@ -0,0 +1,63 @@
+import { twMerge } from "tailwind-merge"
+
+type ClassValue = ClassArray | ClassDictionary | string | number | null | boolean | undefined
+type ClassDictionary = Record<string, any>
+type ClassArray = ClassValue[]
+
+function toVal(mix: any) {
+  let k,
+    y,
+    str = ""
+
+  if (typeof mix === "string" || typeof mix === "number") {
+    str += mix
+  } else if (typeof mix === "object") {
+    if (Array.isArray(mix)) {
+      const len = mix.length
+      for (k = 0; k < len; k++) {
+        if (mix[k]) {
+          if ((y = toVal(mix[k]))) {
+            str && (str += " ")
+            str += y
+          }
+        }
+      }
+    } else {
+      for (y in mix) {
+        if (mix[y]) {
+          str && (str += " ")
+          str += y
+        }
+      }
+    }
+  }
+
+  return str
+}
+
+export function cx(...inputs: ClassValue[]): string
+export function cx() {
+  let i = 0,
+    tmp,
+    x,
+    str = "",
+    // eslint-disable-next-line prefer-const
+    len = arguments.length
+  for (; i < len; i++) {
+    // eslint-disable-next-line prefer-rest-params
+    if ((tmp = arguments[i])) {
+      if ((x = toVal(tmp))) {
+        str && (str += " ")
+        str += x
+      }
+    }
+  }
+
+  return str
+}
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(cx(inputs))
+}
+
+export default cn

index.ts

@@ -0,0 +1,102 @@
+export * from "./src"
+export * from "./clsx"
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "./src/Accordion"
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+} from "./src/AlertDialog"
+export { Avatar, AvatarImage, AvatarFallback } from "./src/Avatar"
+export { Button } from "./src/Button"
+export type { ButtonProps } from "./src/Button"
+export { Checkbox } from "./src/Checkbox"
+export { Chip } from "./src/Chip"
+export { Collapsible, CollapsibleTrigger, CollapsibleContent } from "./src/Collapsible"
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogClose,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+} from "./src/Dialog"
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+} from "./src/DropdownMenu"
+export { HoverCard, HoverCardTrigger, HoverCardContent } from "./src/HoverCard"
+export { IconButton } from "./src/IconButton"
+export { Input } from "./src/Input"
+export { Label } from "./src/Label"
+export { Popover, PopoverContent, PopoverRoot, PopoverTrigger, PopoverPortal } from "./src/Popover"
+export { Progress } from "./src/Progress"
+export { RadioGroup, RadioGroupItem } from "./src/RadioGroup"
+export { ScrollArea, ScrollBar } from "./src/ScrollArea"
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+} from "./src/Select"
+export { Separator } from "./src/Separator"
+export { Slider } from "./src/Slider"
+export { Switch } from "./src/Switch"
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+} from "./src/Table"
+export { Tabs, TabsList, TabsTrigger, TabsContent } from "./src/Tabs"
+export { Toggle } from "./src/Toggle"
+export { ToggleGroup, ToggleGroupItem } from "./src/ToggleGroup"
+
+export { DropdownButton } from "./src/DropdownButton"
+export {
+  Tooltip,
+  TooltipProvider,
+  TooltipContent,
+  TooltipTrigger,
+  TooltipRoot,
+  TooltipPortal,
+} from "./src/Tooltip"
+export { DataTable, DataTableRowContext } from "./src/DataTable"
+export { FixedText } from "./src/FixedText"
+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"

package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@loft-enterprise/primitives",
+  "private": true,
+  "version": "1.0.0",
+  "main": "index.ts",
+  "peerDependencies": {
+    "@loft-enterprise/client": "0.1.0",
+    "@loft-enterprise/icons": "*",
+    "framer-motion": "9.0.1",
+    "tailwindcss": "3.4.0"
+  },
+  "dependencies": {
+    "@radix-ui/react-accordion": "1.1.2",
+    "@radix-ui/react-alert-dialog": "1.0.5",
+    "@radix-ui/react-avatar": "1.0.4",
+    "@radix-ui/react-checkbox": "1.0.4",
+    "@radix-ui/react-collapsible": "1.0.3",
+    "@radix-ui/react-context-menu": "2.1.5",
+    "@radix-ui/react-dialog": "1.0.5",
+    "@radix-ui/react-dropdown-menu": "2.0.6",
+    "@radix-ui/react-form": "0.0.3",
+    "@radix-ui/react-hover-card": "1.0.7",
+    "@radix-ui/react-label": "2.0.2",
+    "@radix-ui/react-menubar": "1.0.4",
+    "@radix-ui/react-navigation-menu": "1.1.4",
+    "@radix-ui/react-popover": "1.0.7",
+    "@radix-ui/react-progress": "1.0.3",
+    "@radix-ui/react-radio-group": "1.1.3",
+    "@radix-ui/react-scroll-area": "1.0.5",
+    "@radix-ui/react-select": "2.0.0",
+    "@radix-ui/react-separator": "1.0.3",
+    "@radix-ui/react-slider": "1.1.2",
+    "@radix-ui/react-switch": "1.0.3",
+    "@radix-ui/react-tabs": "1.0.4",
+    "@radix-ui/react-toast": "1.1.5",
+    "@radix-ui/react-toggle": "1.0.3",
+    "@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"
+  }
+}

src/Accordion.tsx

@@ -0,0 +1,52 @@
+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} />
+))
+AccordionItem.displayName = "AccordionItem"
+
+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}
+      <DownOutlined
+        className="transition-transform 
+      duration-200 ease-in-out *:size-3 group-aria-[expanded=true]/accordion:rotate-180"
+      />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+))
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ 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"
+    {...props}>
+    <div className={cn("", className)}>{children}</div>
+  </AccordionPrimitive.Content>
+))
+AccordionContent.displayName = AccordionPrimitive.Content.displayName
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

src/Alert.tsx

@@ -0,0 +1,87 @@
+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
+  text: string
+  buttonText?: string
+  onButtonClick?: () => Promise<void>
+  linkText?: string
+  linkUrl?: string
+  variant?: "info" | "warning" | "error" | "blank"
+  className?: string
+  children?: React.ReactNode
+  icon?: React.ReactNode
+}
+
+function Alert({
+  title,
+  text,
+  buttonText,
+  onButtonClick,
+  linkText,
+  linkUrl,
+  variant = "info",
+  className,
+  children,
+  icon: Icon,
+}: Props) {
+  const icon = {
+    info: <InfoCircleOutlined />,
+    warning: <WarningOutlined />,
+    error: <ExclamationCircleFilled />,
+    blank: <BulbOutlined />,
+  }
+
+  const buttonChild = React.Children.toArray(children).find(
+    (child) => React.isValidElement(child) && (child.type as any)?.name === "AlertButton"
+  ) as React.ReactElement | undefined
+
+  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": 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>}
+      <div className="flex flex-row items-center gap-2">
+        {buttonText && !buttonChild && (
+          <Button className="self-start" size="small" onClickAsync={onButtonClick}>
+            {buttonText}
+          </Button>
+        )}
+        {buttonChild}
+        {linkText && linkUrl && (
+          <a href={linkUrl} rel="noreferrer" target="_blank" className="text-xs underline">
+            <span className="text-primary-main">{linkText}</span>
+          </a>
+        )}
+      </div>
+    </div>
+  )
+}
+
+function AlertButton({ children, ...props }: ButtonProps) {
+  return <Button {...props}>{children}</Button>
+}
+
+AlertButton.displayName = "AlertButton"
+
+Alert.Button = AlertButton
+
+export { Alert }