create-app-ui 1.0.0

package/boilerplate/react-base/src/components/ui/item.tsx

@@ -0,0 +1,152 @@
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+import { Separator } from "@/components/ui/separator";
+import { ui } from "@/config/theme";
+import { cn } from "@/lib/utils";
+
+function ItemGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return <div role="list" data-slot="item-group" className={cn("flex flex-col gap-2", className)} {...props} />;
+}
+
+function ItemSeparator({ className, ...props }: React.ComponentProps<typeof Separator>) {
+  return <Separator data-slot="item-separator" className={cn("my-2", className)} {...props} />;
+}
+
+const itemVariants = cva(
+  ui("itemBase"),
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline: "border-border",
+        muted: "bg-muted/50",
+      },
+      size: {
+        default: "gap-4 p-4",
+        sm: "gap-3 p-3",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+function Item({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"div"> &
+  VariantProps<typeof itemVariants> & {
+    asChild?: boolean;
+  }) {
+  const Comp = asChild ? Slot : "div";
+  return (
+    <Comp
+      role="listitem"
+      data-slot="item"
+      data-variant={variant}
+      data-size={size}
+      className={cn(itemVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+}
+
+const itemMediaVariants = cva(
+  "flex shrink-0 items-center justify-center [&_svg]:pointer-events-none",
+  {
+    variants: {
+      variant: {
+        default: "",
+        icon: "size-9 rounded-md border bg-muted [&_svg:not([class*='size-'])]:size-4",
+        image: "size-10 overflow-hidden rounded-md [&_img]:size-full [&_img]:object-cover",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+function ItemMedia({
+  className,
+  variant = "default",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof itemMediaVariants>) {
+  return (
+    <div
+      data-slot="item-media"
+      data-variant={variant}
+      className={cn(itemMediaVariants({ variant, className }))}
+      {...props}
+    />
+  );
+}
+
+function ItemContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-content"
+      className={cn("flex min-w-0 flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none", className)}
+      {...props}
+    />
+  );
+}
+
+function ItemTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div data-slot="item-title" className={cn("flex w-fit items-center gap-2 text-sm font-medium leading-snug", className)} {...props} />
+  );
+}
+
+function ItemDescription({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <p
+      data-slot="item-description"
+      className={cn(ui("typographyMuted"), "leading-normal [&>a]:underline [&>a]:underline-offset-4", className)}
+      {...props}
+    />
+  );
+}
+
+function ItemActions({ className, ...props }: React.ComponentProps<"div">) {
+  return <div data-slot="item-actions" className={cn("flex shrink-0 items-center gap-2", className)} {...props} />;
+}
+
+function ItemHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-header"
+      className={cn("flex w-full flex-wrap items-center gap-2 pb-2", className)}
+      {...props}
+    />
+  );
+}
+
+function ItemFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-footer"
+      className={cn("flex w-full flex-wrap items-center gap-2 pt-2", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemFooter,
+  ItemGroup,
+  ItemHeader,
+  ItemMedia,
+  ItemSeparator,
+  ItemTitle,
+};

package/boilerplate/react-base/src/components/ui/kbd.tsx

@@ -0,0 +1,13 @@
+import * as React from "react";
+import { ui } from "@/config/theme";
+import { cn } from "@/lib/utils";
+
+function Kbd({ className, ...props }: React.ComponentProps<"kbd">) {
+  return <kbd className={cn(ui("kbd"), className)} {...props} />;
+}
+
+function KbdGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return <div className={cn("inline-flex items-center gap-1", className)} {...props} />;
+}
+
+export { Kbd, KbdGroup };

package/boilerplate/react-base/src/components/ui/label.tsx

@@ -0,0 +1,14 @@
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { ui } from "@/config/theme";
+import { cn } from "@/lib/utils";
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root ref={ref} className={cn(ui("label"), className)} {...props} />
+));
+Label.displayName = "Label";
+
+export { Label };

package/boilerplate/react-base/src/components/ui/line-chart.tsx

@@ -0,0 +1,65 @@
+import { CartesianGrid, Line, LineChart as RechartsLineChart, XAxis, YAxis } from "recharts";
+import {
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+  type ChartConfig,
+} from "@/components/ui/chart";
+import { cn } from "@/lib/utils";
+
+export type LineChartDataPoint = Record<string, string | number>;
+
+type LineChartProps = {
+  data: LineChartDataPoint[];
+  config: ChartConfig;
+  dataKeys: string[];
+  categoryKey: string;
+  className?: string;
+  showLegend?: boolean;
+  showDots?: boolean;
+};
+
+export function LineChart({
+  data,
+  config,
+  dataKeys,
+  categoryKey,
+  className,
+  showLegend = true,
+  showDots = true,
+}: LineChartProps) {
+  return (
+    <ChartContainer config={config} className={cn("aspect-auto h-[300px] w-full", className)}>
+      <RechartsLineChart
+        accessibilityLayer
+        data={data}
+        margin={{ left: 12, right: 12, top: 12, bottom: 0 }}
+      >
+        <CartesianGrid vertical={false} strokeDasharray="3 3" />
+        <XAxis
+          dataKey={categoryKey}
+          tickLine={false}
+          axisLine={false}
+          tickMargin={8}
+          tickFormatter={(value) => String(value).slice(0, 3)}
+        />
+        <YAxis tickLine={false} axisLine={false} tickMargin={8} width={40} />
+        <ChartTooltip cursor={false} content={<ChartTooltipContent indicator="line" />} />
+        {showLegend && <ChartLegend content={<ChartLegendContent />} />}
+        {dataKeys.map((key) => (
+          <Line
+            key={key}
+            dataKey={key}
+            type="monotone"
+            stroke={`var(--color-${key})`}
+            strokeWidth={2}
+            dot={showDots ? { fill: `var(--color-${key})`, r: 3 } : false}
+            activeDot={{ r: 5 }}
+          />
+        ))}
+      </RechartsLineChart>
+    </ChartContainer>
+  );
+}

package/boilerplate/react-base/src/components/ui/menubar.tsx

@@ -0,0 +1,217 @@
+import * as MenubarPrimitive from "@radix-ui/react-menubar";
+import { Check, ChevronRight, Circle } from "lucide-react";
+import * as React from "react";
+import { ui } from "@/config/theme";
+import { cn } from "@/lib/utils";
+
+function MenubarMenu({ ...props }: React.ComponentProps<typeof MenubarPrimitive.Menu>) {
+  return <MenubarPrimitive.Menu {...props} />;
+}
+
+function MenubarGroup({ ...props }: React.ComponentProps<typeof MenubarPrimitive.Group>) {
+  return <MenubarPrimitive.Group {...props} />;
+}
+
+function MenubarPortal({ ...props }: React.ComponentProps<typeof MenubarPrimitive.Portal>) {
+  return <MenubarPrimitive.Portal {...props} />;
+}
+
+function MenubarRadioGroup({ ...props }: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {
+  return <MenubarPrimitive.RadioGroup {...props} />;
+}
+
+function MenubarSub({ ...props }: React.ComponentProps<typeof MenubarPrimitive.Sub>) {
+  return <MenubarPrimitive.Sub {...props} />;
+}
+
+const Menubar = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.Root
+    ref={ref}
+    className={cn("flex h-9 items-center space-x-1 rounded-md border bg-background p-1 shadow-sm", className)}
+    {...props}
+  />
+));
+Menubar.displayName = MenubarPrimitive.Root.displayName;
+
+const MenubarTrigger = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      className,
+    )}
+    {...props}
+  />
+));
+MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName;
+
+const MenubarSubTrigger = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {
+    inset?: boolean;
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <MenubarPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      inset && "pl-8",
+      className,
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </MenubarPrimitive.SubTrigger>
+));
+MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName;
+
+const MenubarSubContent = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      ui("popoverMenu"),
+      className,
+    )}
+    {...props}
+  />
+));
+MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName;
+
+const MenubarContent = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>
+>(({ className, align = "start", alignOffset = -4, sideOffset = 8, ...props }, ref) => (
+  <MenubarPortal>
+    <MenubarPrimitive.Content
+      ref={ref}
+      align={align}
+      alignOffset={alignOffset}
+      sideOffset={sideOffset}
+      className={cn(
+        ui("popoverMenuWide"),
+        className,
+      )}
+      {...props}
+    />
+  </MenubarPortal>
+));
+MenubarContent.displayName = MenubarPrimitive.Content.displayName;
+
+const MenubarItem = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <MenubarPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className,
+    )}
+    {...props}
+  />
+));
+MenubarItem.displayName = MenubarPrimitive.Item.displayName;
+
+const MenubarCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <MenubarPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className,
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <MenubarPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </MenubarPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </MenubarPrimitive.CheckboxItem>
+));
+MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName;
+
+const MenubarRadioItem = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <MenubarPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className,
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <MenubarPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </MenubarPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </MenubarPrimitive.RadioItem>
+));
+MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName;
+
+const MenubarLabel = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <MenubarPrimitive.Label
+    ref={ref}
+    className={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
+    {...props}
+  />
+));
+MenubarLabel.displayName = MenubarPrimitive.Label.displayName;
+
+const MenubarSeparator = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.Separator ref={ref} className={cn("-mx-1 my-1 h-px bg-muted", className)} {...props} />
+));
+MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName;
+
+function MenubarShortcut({ className, ...props }: React.ComponentProps<"span">) {
+  return <span className={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)} {...props} />;
+}
+MenubarShortcut.displayName = "MenubarShortcut";
+
+export {
+  Menubar,
+  MenubarCheckboxItem,
+  MenubarContent,
+  MenubarGroup,
+  MenubarItem,
+  MenubarLabel,
+  MenubarMenu,
+  MenubarPortal,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarSeparator,
+  MenubarShortcut,
+  MenubarSub,
+  MenubarSubContent,
+  MenubarSubTrigger,
+  MenubarTrigger,
+};

package/boilerplate/react-base/src/components/ui/multi-select-dropdown.tsx

@@ -0,0 +1,200 @@
+import { Check, ChevronsUpDown, Search, X } from "lucide-react";
+import * as React from "react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import { dropdownClasses, type DropdownOption } from "@/components/ui/dropdown-types";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { ui } from "@/config/theme";
+import { cn } from "@/lib/utils";
+
+function filterOptions(options: DropdownOption[], search: string) {
+  const query = search.trim().toLowerCase();
+  if (!query) {
+    return options;
+  }
+
+  return options.filter(
+    (option) =>
+      option.label.toLowerCase().includes(query) || option.description?.toLowerCase().includes(query),
+  );
+}
+
+export type MultiSelectDropdownProps = {
+  options: DropdownOption[];
+  value?: string[];
+  onValueChange?: (value: string[]) => void;
+  placeholder?: string;
+  searchPlaceholder?: string;
+  emptyText?: string;
+  maxDisplay?: number;
+  disabled?: boolean;
+  className?: string;
+};
+
+export function MultiSelectDropdown({
+  options,
+  value = [],
+  onValueChange,
+  placeholder = "Select options...",
+  searchPlaceholder = "Search...",
+  emptyText = "No results found.",
+  maxDisplay = 2,
+  disabled = false,
+  className,
+}: MultiSelectDropdownProps) {
+  const [open, setOpen] = React.useState(false);
+  const [search, setSearch] = React.useState("");
+
+  const filteredOptions = filterOptions(options, search);
+  const selectedOptions = options.filter((option) => value.includes(option.value));
+  const handleOpenChange = (nextOpen: boolean) => {
+    setOpen(nextOpen);
+    if (!nextOpen) {
+      setSearch("");
+    }
+  };
+
+  const toggleValue = (optionValue: string) => {
+    if (value.includes(optionValue)) {
+      onValueChange?.(value.filter((current) => current !== optionValue));
+      return;
+    }
+    onValueChange?.([...value, optionValue]);
+  };
+
+  const clearAll = () => onValueChange?.([]);
+
+  const selectAllFiltered = () => {
+    const next = new Set(value);
+    filteredOptions.forEach((option) => {
+      if (!option.disabled) {
+        next.add(option.value);
+      }
+    });
+    onValueChange?.(Array.from(next));
+  };
+
+  const removeValue = (optionValue: string, event: React.MouseEvent) => {
+    event.stopPropagation();
+    onValueChange?.(value.filter((current) => current !== optionValue));
+  };
+
+  return (
+    <Popover open={open} onOpenChange={handleOpenChange}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          disabled={disabled}
+          className={cn(dropdownClasses.triggerMulti, className)}
+        >
+          <div className="flex min-w-0 flex-1 flex-wrap items-center gap-1">
+            {selectedOptions.length === 0 ? (
+              <span className={dropdownClasses.emptyText}>{placeholder}</span>
+            ) : (
+              <>
+                {selectedOptions.slice(0, maxDisplay).map((option) => (
+                  <Badge key={option.value} variant="secondary" className="gap-1 pr-1">
+                    {option.label}
+                    <span
+                      role="button"
+                      tabIndex={0}
+                      className={cn("rounded-full hover:bg-muted", ui("focusRing"))}
+                      aria-label={`Remove ${option.label}`}
+                      onMouseDown={(event) => {
+                        event.preventDefault();
+                        event.stopPropagation();
+                      }}
+                      onClick={(event) => removeValue(option.value, event)}
+                      onKeyDown={(event) => {
+                        if (event.key === "Enter" || event.key === " ") {
+                          event.preventDefault();
+                          removeValue(option.value, event as unknown as React.MouseEvent);
+                        }
+                      }}
+                    >
+                      <X className="h-3 w-3" />
+                    </span>
+                  </Badge>
+                ))}
+                {selectedOptions.length > maxDisplay && (
+                  <Badge variant="secondary">+{selectedOptions.length - maxDisplay} more</Badge>
+                )}
+              </>
+            )}
+          </div>
+          <ChevronsUpDown className={dropdownClasses.chevron} />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent align="start" className={dropdownClasses.popoverContent}>
+        <div className={dropdownClasses.searchBar}>
+          <Search className={dropdownClasses.searchIcon} />
+          <input
+            value={search}
+            onChange={(event) => setSearch(event.target.value)}
+            placeholder={searchPlaceholder}
+            className={dropdownClasses.searchInput}
+          />
+        </div>
+        <ScrollArea className="max-h-60">
+          <div className="p-1">
+            {filteredOptions.length === 0 ? (
+              <p className={cn(dropdownClasses.empty, dropdownClasses.emptyText)}>{emptyText}</p>
+            ) : (
+              filteredOptions.map((option) => {
+                const isSelected = value.includes(option.value);
+
+                return (
+                  <button
+                    key={option.value}
+                    type="button"
+                    disabled={option.disabled}
+                    onClick={() => toggleValue(option.value)}
+                    className={cn(
+                      dropdownClasses.optionItemMulti,
+                      isSelected && dropdownClasses.optionItemMultiSelected,
+                    )}
+                  >
+                    <Checkbox checked={isSelected} tabIndex={-1} aria-hidden className="pointer-events-none" />
+                    <div className="flex flex-1 flex-col items-start text-left">
+                      <span>{option.label}</span>
+                      {option.description ? (
+                        <span className={cn("text-xs", dropdownClasses.optionDescription)}>{option.description}</span>
+                      ) : null}
+                    </div>
+                    {isSelected ? <Check className="h-4 w-4 shrink-0 opacity-70" /> : null}
+                  </button>
+                );
+              })
+            )}
+          </div>
+        </ScrollArea>
+        <div className={dropdownClasses.footer}>
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            className="h-8"
+            onClick={selectAllFiltered}
+            disabled={filteredOptions.length === 0}
+          >
+            Select visible
+          </Button>
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            className="h-8"
+            onClick={clearAll}
+            disabled={value.length === 0}
+          >
+            Clear all
+          </Button>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}