@ayasofyazilim/ui 0.0.0

package/src/custom/charts/radar-chart.tsx

@@ -0,0 +1,126 @@
+"use client";
+
+import * as React from "react";
+import {
+  PolarAngleAxis,
+  PolarGrid,
+  Radar,
+  RadarChart as RechartsRadarChart,
+} from "recharts";
+
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@repo/ayasofyazilim-ui/components/chart";
+import { cn } from "@repo/ayasofyazilim-ui/lib/utils";
+import { ChartCard, CardClassNames } from "./chart-card";
+import { ChartData, EmptyConfig } from ".";
+
+export type RadarChartProps = {
+  data: ChartData;
+  config: ChartConfig;
+  polarKey: string;
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  period?: React.ReactNode;
+  footer?: React.ReactNode;
+  trendText?: React.ReactNode;
+  trendIcon?: React.ReactNode;
+  showLegend?: boolean;
+  linesOnly?: boolean;
+  valuePrefix?: string;
+  valueSuffix?: string;
+  classNames?: {
+    chart?: {
+      container?: string;
+      tooltip?: string;
+      legend?: string;
+      radar?: string;
+    };
+    card?: CardClassNames;
+  };
+} & EmptyConfig;
+
+export function RadarChart({
+  data,
+  config,
+  polarKey,
+  title,
+  description,
+  period,
+  footer,
+  trendText,
+  trendIcon,
+  showLegend = true,
+  linesOnly = false,
+  classNames,
+  valuePrefix,
+  valueSuffix,
+  emptyState,
+}: RadarChartProps) {
+  return (
+    <ChartCard
+      title={title}
+      description={description}
+      period={period}
+      footer={footer}
+      trendText={trendText}
+      trendIcon={trendIcon}
+      classNames={classNames?.card}
+      emptyState={data.length === 0 ? emptyState : undefined}
+    >
+      <ChartContainer
+        config={config}
+        className={cn("mx-auto max-h-full", classNames?.chart?.container)}
+      >
+        <RechartsRadarChart
+          data={data}
+          className={cn("flex flex-col pb-2", classNames?.chart?.radar)}
+          margin={{ top: 0, bottom: 0, left: 0, right: 0 }}
+        >
+          <ChartTooltip
+            cursor={false}
+            content={
+              <ChartTooltipContent
+                indicator="line"
+                valuePrefix={valuePrefix}
+                valueSuffix={valueSuffix}
+              />
+            }
+          />
+          <PolarAngleAxis dataKey={polarKey} />
+          <PolarGrid radialLines={!linesOnly} />
+          {Object.keys(config).map((key, idx) => (
+            <Radar
+              key={key}
+              dataKey={key}
+              fill={config[key]?.color || `var(--color-${idx})`}
+              fillOpacity={linesOnly ? 0 : idx === 0 ? 0.6 : 0.4}
+              stroke={config[key]?.color || `var(--color-${idx})`}
+              strokeWidth={linesOnly ? 2 : 1}
+            />
+          ))}
+          {showLegend && (
+            <ChartLegend
+              wrapperStyle={{
+                position: "relative",
+                top: "unset",
+                left: "unset",
+                bottom: "unset",
+                right: "unset",
+                width: "100%",
+                textAlign: "center",
+              }}
+              className={cn("p-0", classNames?.chart?.legend)}
+              content={<ChartLegendContent />}
+            />
+          )}
+        </RechartsRadarChart>
+      </ChartContainer>
+    </ChartCard>
+  );
+}

package/src/custom/checkbox-tree.tsx

@@ -0,0 +1,100 @@
+"use client";
+
+import React, { useCallback, useMemo, useState } from "react";
+
+interface TreeNode {
+  id: string;
+  label: string;
+  defaultChecked?: boolean;
+  children?: TreeNode[];
+}
+
+function useCheckboxTree(initialTree: TreeNode) {
+  const initialCheckedNodes = useMemo(() => {
+    const checkedSet = new Set<string>();
+    const initializeCheckedNodes = (node: TreeNode) => {
+      if (node.defaultChecked) {
+        checkedSet.add(node.id);
+      }
+      node.children?.forEach(initializeCheckedNodes);
+    };
+    initializeCheckedNodes(initialTree);
+    return checkedSet;
+  }, [initialTree]);
+
+  const [checkedNodes, setCheckedNodes] =
+    useState<Set<string>>(initialCheckedNodes);
+
+  const isChecked = useCallback(
+    (node: TreeNode): boolean | "indeterminate" => {
+      if (!node.children) {
+        return checkedNodes.has(node.id);
+      }
+
+      const childrenChecked = node.children.map((child) => isChecked(child));
+      if (childrenChecked.every((status) => status === true)) {
+        return true;
+      }
+      if (
+        childrenChecked.some(
+          (status) => status === true || status === "indeterminate"
+        )
+      ) {
+        return "indeterminate";
+      }
+      return false;
+    },
+    [checkedNodes]
+  );
+
+  const handleCheck = useCallback(
+    (node: TreeNode) => {
+      const newCheckedNodes = new Set(checkedNodes);
+
+      const toggleNode = (n: TreeNode, check: boolean) => {
+        if (check) {
+          newCheckedNodes.add(n.id);
+        } else {
+          newCheckedNodes.delete(n.id);
+        }
+        n.children?.forEach((child) => toggleNode(child, check));
+      };
+
+      const currentStatus = isChecked(node);
+      const newCheck = currentStatus !== true;
+
+      toggleNode(node, newCheck);
+      setCheckedNodes(newCheckedNodes);
+    },
+    [checkedNodes, isChecked]
+  );
+
+  return { isChecked, handleCheck };
+}
+
+interface CheckboxTreeProps {
+  tree: TreeNode;
+  renderNode: (props: {
+    node: TreeNode;
+    isChecked: boolean | "indeterminate";
+    onCheckedChange: () => void;
+    children: React.ReactNode;
+  }) => React.ReactNode;
+}
+
+export function CheckboxTree({ tree, renderNode }: CheckboxTreeProps) {
+  const { isChecked, handleCheck } = useCheckboxTree(tree);
+
+  const renderTreeNode = (node: TreeNode): React.ReactNode => {
+    const children = node.children?.map(renderTreeNode);
+
+    return renderNode({
+      node,
+      isChecked: isChecked(node),
+      onCheckedChange: () => handleCheck(node),
+      children,
+    });
+  };
+
+  return renderTreeNode(tree);
+}

package/src/custom/combobox.tsx

@@ -0,0 +1,296 @@
+"use client";
+
+import { CheckIcon, ChevronsUpDown } from "lucide-react";
+import React, { Dispatch, SetStateAction, useState } from "react";
+import { Button } from "@repo/ayasofyazilim-ui/components/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@repo/ayasofyazilim-ui/components/command";
+import {
+  Drawer,
+  DrawerContent,
+  DrawerTrigger,
+} from "@repo/ayasofyazilim-ui/components/drawer";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@repo/ayasofyazilim-ui/components/popover";
+import { useMediaQuery } from "@repo/ayasofyazilim-ui/hooks/use-media-query";
+import { cn } from "@repo/ayasofyazilim-ui/lib/utils";
+import { Label } from "@repo/ayasofyazilim-ui/components/label";
+import { Badge } from "@repo/ayasofyazilim-ui/components/badge";
+
+export type ComboboxBadgeOptions<T> = {
+  className?: string;
+  label: (item: T) => React.ReactNode;
+};
+
+export type ComboboxProps<T> = {
+  id?: string;
+  disabled?: boolean;
+  emptyValue?: string;
+  errorMessage?: string;
+  classNames?: {
+    container?: string;
+    label?: string;
+    trigger?: {
+      button?: string;
+      label?: string;
+      icon?: string;
+    };
+    list?: {
+      label?: string;
+    };
+    error?: string;
+    required?: string;
+  };
+  label?: string;
+  list: Array<T> | null | undefined;
+  onValueChange?: (
+    value: T | null | undefined
+  ) => void | Dispatch<SetStateAction<T | null | undefined>>;
+  required?: boolean;
+  searchPlaceholder?: string;
+  searchResultLabel?: string;
+  selectIdentifier: keyof T;
+  selectLabel: keyof T;
+  value?: T | null | undefined;
+  defaultValue?: T | null | undefined;
+  badges?: Partial<Record<keyof T, ComboboxBadgeOptions<T>>>;
+};
+
+export function Combobox<T>(props: ComboboxProps<T>) {
+  const {
+    label,
+    list,
+    value: controlledValue,
+    defaultValue,
+    disabled,
+    selectIdentifier,
+    required,
+    errorMessage,
+    emptyValue,
+    classNames,
+    onValueChange,
+  } = props;
+  const isDesktop = useMediaQuery("(min-width: 768px)");
+  const [open, setOpen] = useState(false);
+
+  const [internalValue, setInternalValue] = useState<T | null | undefined>(
+    defaultValue ?? null
+  );
+
+  const isControlled = controlledValue !== undefined;
+  const currentValue = isControlled ? controlledValue : internalValue;
+
+  const handleValueChange = (newValue: T | null | undefined) => {
+    if (!isControlled) {
+      setInternalValue(newValue);
+    }
+    onValueChange?.(newValue);
+  };
+
+  const fieldValue =
+    (list?.find(
+      (x: T) => x[props.selectIdentifier] === currentValue?.[selectIdentifier]
+    )?.[props.selectLabel] as string) ||
+    emptyValue ||
+    (label && `Please select an ${label.toLocaleLowerCase()}`) ||
+    "Please select";
+  const DesktopContent = (
+    <Popover open={open} onOpenChange={setOpen} modal>
+      <PopoverTrigger asChild>
+        <Button
+          disabled={disabled}
+          type="button"
+          variant="outline"
+          role="combobox"
+          className={cn(
+            "text-muted-foreground w-full justify-between font-normal",
+            currentValue && "text-foreground",
+            classNames?.trigger?.button
+          )}
+        >
+          <span
+            className={cn(
+              "overflow-hidden truncate has-[role=dialog]:max-w-xs",
+              classNames?.trigger?.label
+            )}
+          >
+            {fieldValue}
+          </span>
+          <ChevronsUpDown
+            className={cn(
+              "ml-2 h-4 w-4 shrink-0 opacity-50",
+              classNames?.trigger?.icon
+            )}
+          />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="p-0">
+        <List
+          {...props}
+          setOpen={setOpen}
+          currentValue={currentValue}
+          handleValueChange={handleValueChange}
+        />
+      </PopoverContent>
+    </Popover>
+  );
+
+  const MobileContent = (
+    <Drawer open={open} onOpenChange={setOpen}>
+      <DrawerTrigger asChild>
+        <Button
+          disabled={disabled}
+          type="button"
+          variant="outline"
+          className={cn(
+            "text-muted-foreground w-full justify-between font-normal",
+            currentValue && "text-foreground",
+            classNames?.trigger?.button
+          )}
+        >
+          <span className={cn("truncate", classNames?.trigger?.label)}>
+            {fieldValue}
+          </span>
+          <ChevronsUpDown
+            className={cn(
+              "ml-2 h-4 w-4 shrink-0 opacity-50",
+              classNames?.trigger?.icon
+            )}
+          />
+        </Button>
+      </DrawerTrigger>
+      <DrawerContent>
+        <div className="mt-4 border-t">
+          <List
+            {...props}
+            setOpen={setOpen}
+            currentValue={currentValue}
+            handleValueChange={handleValueChange}
+          />
+        </div>
+      </DrawerContent>
+    </Drawer>
+  );
+
+  const Content = isDesktop ? DesktopContent : MobileContent;
+
+  return (
+    <div className={cn("w-full", classNames?.container)}>
+      {label && (
+        <Label className={classNames?.label}>
+          {label}
+          {required && (
+            <span className={cn("text-destructive", classNames?.required)}>
+              *
+            </span>
+          )}
+        </Label>
+      )}
+      {Content}
+      {errorMessage && (
+        <span
+          className={cn(
+            "text-xs font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 text-destructive",
+            classNames?.error
+          )}
+        >
+          {errorMessage}
+        </span>
+      )}
+    </div>
+  );
+}
+
+function List<T>({
+  setOpen,
+  currentValue,
+  handleValueChange,
+  ...props
+}: ComboboxProps<T> & {
+  setOpen: (open: boolean) => void;
+  currentValue: T | null | undefined;
+  handleValueChange: (value: T | null | undefined) => void;
+}) {
+  const {
+    list,
+    selectIdentifier,
+    selectLabel,
+    searchPlaceholder,
+    searchResultLabel,
+    id,
+    classNames,
+    badges,
+  } = props;
+
+  return (
+    <Command
+      id={id}
+      filter={(value, search) => {
+        const filterResult = list?.find(
+          (i) =>
+            (i[selectIdentifier] as string)?.toLocaleLowerCase() ===
+            value.toLocaleLowerCase()
+        )?.[selectLabel] as string;
+        if (
+          value.includes(search) ||
+          filterResult?.toLocaleLowerCase().includes(search.toLocaleLowerCase())
+        )
+          return 1;
+        return 0;
+      }}
+    >
+      <CommandInput
+        placeholder={searchPlaceholder || "Search..."}
+        className="h-9"
+      />
+      <CommandList className="w-full min-w-full max-w-full">
+        <CommandEmpty>{searchResultLabel || "0 search result."}</CommandEmpty>
+        <CommandGroup>
+          {list?.map((item: T) => (
+            <CommandItem
+              onSelect={() => {
+                handleValueChange(item);
+                setOpen(false);
+              }}
+              key={JSON.stringify(item[selectIdentifier])}
+              value={item[selectIdentifier] as string}
+            >
+              {item[selectIdentifier] === currentValue?.[selectIdentifier] && (
+                <CheckIcon className={cn("h-4 w-4")} />
+              )}
+              <span className={cn(classNames?.list?.label)}>
+                {item[selectLabel] as string}
+              </span>
+              {badges && (
+                <div className="ml-auto">
+                  {Object.keys(badges).map((badgeKey) => {
+                    const badgeOptions = badges[badgeKey as keyof T];
+                    if (!badgeOptions) return null;
+                    return (
+                      <Badge
+                        key={badgeKey}
+                        variant="outline"
+                        className={cn("ml-2", badgeOptions.className)}
+                      >
+                        {badgeOptions.label(item)}
+                      </Badge>
+                    );
+                  })}
+                </div>
+              )}
+            </CommandItem>
+          ))}
+        </CommandGroup>
+      </CommandList>
+    </Command>
+  );
+}

package/src/custom/confirm-dialog.tsx

@@ -0,0 +1,102 @@
+"use client";
+
+import { JSX, useState } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+  DialogTrigger,
+  DialogDescription,
+  DialogClose,
+} from "@repo/ayasofyazilim-ui/components/dialog";
+import { Button, ButtonProps } from "@repo/ayasofyazilim-ui/components/button";
+import { Skeleton } from "@repo/ayasofyazilim-ui/components/skeleton";
+
+export type ConfirmDialogProps = {
+  closeProps?: ButtonProps;
+  confirmProps?: ButtonProps & {
+    closeAfterConfirm?: boolean;
+    onConfirm?: () => void | Promise<void>;
+  };
+  description: string | JSX.Element;
+  loading?: boolean;
+  title: string | JSX.Element;
+} & (WithTriggerConfirmDialogProps | WithoutTriggerConfirmDialogProps);
+type WithTriggerConfirmDialogProps = {
+  triggerProps: ButtonProps & { "data-testid"?: string };
+  type: "with-trigger";
+};
+type WithoutTriggerConfirmDialogProps = {
+  type: "without-trigger";
+  children: JSX.Element;
+};
+export default function ConfirmDialog(props: ConfirmDialogProps) {
+  const [open, setOpen] = useState(false);
+  const isWithTrigger = props.type === "with-trigger";
+  const { title, description, loading, confirmProps } = props;
+  const { closeAfterConfirm, onConfirm, ...confirmButtonProps } =
+    confirmProps || {};
+  return (
+    <Dialog open={open && loading ? true : open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        {isWithTrigger ? (
+          <Button
+            type="button"
+            {...props.triggerProps}
+            onClick={(e) => {
+              setOpen(true);
+              if (props.triggerProps?.onClick) props.triggerProps.onClick(e);
+            }}
+          >
+            {props.triggerProps.children}
+          </Button>
+        ) : (
+          props.children
+        )}
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+          <DialogDescription>{description}</DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          {loading ? (
+            <Skeleton className="w-20 h-9" />
+          ) : (
+            <DialogClose asChild disabled={loading}>
+              <Button
+                variant="outline"
+                type="button"
+                {...props.closeProps}
+                disabled={loading}
+              >
+                {props.closeProps?.children || "Cancel"}
+              </Button>
+            </DialogClose>
+          )}
+          {loading ? (
+            <Skeleton className="w-20 h-9" />
+          ) : (
+            <Button
+              type="button"
+              {...confirmButtonProps}
+              onClick={async (e) => {
+                if (props.confirmProps?.onClick) {
+                  props.confirmProps.onClick(e);
+                }
+                if (onConfirm) {
+                  await onConfirm();
+                  if (closeAfterConfirm) setOpen(false);
+                }
+              }}
+            >
+              {props.confirmProps?.children || "Confirm"}
+            </Button>
+          )}
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}