@ayasofyazilim/ui 0.0.0

package/src/custom/section-layout-v2.tsx

@@ -0,0 +1,212 @@
+"use client";
+
+import React, {
+  createContext,
+  ElementType,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
+import { Button } from "@repo/ayasofyazilim-ui/components/button";
+import { Skeleton } from "@repo/ayasofyazilim-ui/components/skeleton";
+import { cn } from "@repo/ayasofyazilim-ui/lib/utils";
+
+export interface ISection {
+  children?: React.ReactNode;
+  className?: string;
+  disabled?: boolean;
+  id: string;
+  link?: string;
+  name: string;
+}
+
+export interface ISectionLayoutNavbarProps {
+  activeSectionId: string;
+  linkElement?: ElementType;
+  onSectionChange?: (sectionId: string) => void;
+  sections: Array<ISection>;
+  vertical?: boolean;
+}
+
+/**
+ * Renders a navigation bar for a section layout.
+ *
+ * @param {Array<ISection>} props.sections - The sections to be rendered in the navigation bar.
+ * @param {string} props.activeSectionId - The ID of the active section.
+ * @param {(sectionId: string) => void} [props.onSectionChange] - The function to be called when a section is clicked.
+ * @param {React.ElementType} [props.linkElement] - The element to be used for the section links. (default: Button)
+ * @param {boolean} [props.vertical] - Whether the navigation bar should be rendered vertically.
+ * @return {React.ReactNode} The rendered navigation bar.
+ */
+export function SectionLayoutNavbar({
+  sections,
+  activeSectionId,
+  onSectionChange,
+  linkElement,
+  vertical,
+}: ISectionLayoutNavbarProps) {
+  const LinkElement = linkElement || Button;
+  return (
+    <nav
+      className={cn(
+        "flex gap-4 text-sm text-center md:text-left p-3 ",
+        vertical
+          ? "flex-col border-b md:border-b-0 md:border-r overflow-auto min-w-full md:min-w-60 items-center md:items-start"
+          : "flex-col md:flex-row border-b"
+      )}
+    >
+      {sections.map((section) => (
+        <LinkElement
+          className={cn(
+            activeSectionId === section.id
+              ? "font-semibold text-primary hover:no-underline m-0 p-0 h-auto justify-start"
+              : "font-normal text-muted-foreground hover:no-underline m-0 p-0 h-auto justify-start",
+            section.disabled
+              ? "cursor-not-allowed opacity-50"
+              : "cursor-pointer",
+            section.className
+          )}
+          data-active={activeSectionId === section.id}
+          href={section.link || "#"}
+          onClick={() => {
+            if (section.disabled) return;
+            if (!linkElement && onSectionChange) {
+              onSectionChange(section.id);
+            }
+          }}
+          key={section.id}
+          tabIndex={section.disabled ? -1 : 0}
+          variant="link"
+        >
+          {section.children && section.children}
+          {!section.children && section.name}
+        </LinkElement>
+      ))}
+    </nav>
+  );
+}
+
+export interface ISectionContentProps {
+  children: React.ReactNode;
+  className?: string;
+  sectionId: string;
+}
+/**
+ * Renders the content of a section layout based on the active section ID. It must be inside of SectionLayout component.
+ *
+ * @param {string} sectionId - The ID of the section to render.
+ * @param {React.ReactNode} children - The content to be rendered inside the section layout.
+ * @param {string} className - Additional CSS classes for styling.
+ * @return {JSX.Element | null} The rendered section layout content or null if the section is not active.
+ */
+export function SectionLayoutContent({
+  sectionId,
+  children,
+  className,
+}: ISectionContentProps) {
+  const context = useContext(SectionLayoutContext);
+  const { activeSectionId } = context;
+  if (activeSectionId !== sectionId) return null;
+
+  return (
+    <div
+      id={`section-${sectionId}`}
+      className={cn("w-full p-5 overflow-auto h-full flex-1", className)}
+    >
+      {children}
+    </div>
+  );
+}
+
+const SectionLayoutContext = createContext({
+  activeSectionId: "",
+});
+export interface ISectionLayoutProps {
+  children: React.ReactNode;
+  defaultActiveSectionId?: string;
+  linkElement?: ElementType;
+  sections: Array<ISection>;
+  vertical?: boolean;
+}
+
+/**
+ * Renders a section layout component with a navigation bar and content area.
+ *
+ * @param {React.ReactNode} children - The content to be rendered inside the section layout.
+ * @param {Array<ISection>} sections - The sections to be rendered in the navigation bar.
+ * @param {string} [defaultActiveSectionId] - The ID of the section to be active by default.
+ * @param {ElementType} [linkElement] - The element to be used for the section links. (default: Button)
+ * @param {boolean} [vertical] - Whether the layout should be rendered vertically.
+ * @return {JSX.Element} The rendered section layout component.
+ */
+export function SectionLayout({
+  children,
+  sections,
+  defaultActiveSectionId,
+  linkElement,
+  vertical,
+}: ISectionLayoutProps) {
+  const [activeSectionId, setActiveSectionId] = useState(
+    defaultActiveSectionId || sections?.[0]?.id
+  );
+  useEffect(() => {
+    if (linkElement && defaultActiveSectionId) {
+      setActiveSectionId(defaultActiveSectionId);
+    }
+  }, [defaultActiveSectionId]);
+  const contextValue = useMemo(
+    () => ({ activeSectionId: activeSectionId || "" }),
+    [activeSectionId]
+  );
+  return (
+    <SectionLayoutContext.Provider value={contextValue}>
+      <div
+        className={
+          vertical
+            ? "flex flex-wrap md:flex-nowrap rounded-lg h-full overflow-hidden mb-5"
+            : "rounded-lg h-full overflow-hidden flex flex-col"
+        }
+      >
+        <SectionLayoutNavbar
+          sections={sections}
+          activeSectionId={activeSectionId || ""}
+          onSectionChange={setActiveSectionId}
+          linkElement={linkElement}
+          vertical={vertical}
+        />
+        {children}
+      </div>
+    </SectionLayoutContext.Provider>
+  );
+}
+
+export const SectionLayoutSkeleton = ({ vertical }: { vertical?: boolean }) => (
+  <div
+    className={
+      vertical
+        ? "flex flex-wrap md:flex-nowrap rounded-lg h-full overflow-hidden"
+        : "rounded-lg h-full overflow-hidden flex flex-col"
+    }
+  >
+    <nav
+      className={cn(
+        "flex gap-4 text-sm text-center md:text-left p-5 ",
+        vertical
+          ? "flex-col border-b md:border-b-0 md:border-r min-w-full md:min-w-60 items-center md:items-start"
+          : "flex-col md:flex-row border-b"
+      )}
+    >
+      <Skeleton className="h-6 w-full bg-gray-200" />
+      <Skeleton className="h-6 w-full bg-gray-200" />
+      <Skeleton className="h-6 w-full bg-gray-200" />
+      <Skeleton className="h-6 w-full bg-gray-200" />
+      <Skeleton className="h-6 w-full bg-gray-200" />
+    </nav>
+    <div className="w-full p-5 overflow-auto h-full flex-1">
+      <Skeleton className="h-40 w-full bg-gray-200 mb-2" />
+      <Skeleton className="h-40 w-full bg-gray-200 mb-2" />
+      <Skeleton className="h-40 w-full bg-gray-200 mb-2" />
+    </div>
+  </div>
+);

package/src/custom/select-tabs.tsx

@@ -0,0 +1,109 @@
+"use client";
+
+import { Circle, CircleCheckBig } from "lucide-react";
+import React, {
+  createContext,
+  JSX,
+  useContext,
+  useMemo,
+  useState,
+} from "react";
+import { Button } from "@repo/ayasofyazilim-ui/components/button";
+import { cn } from "@repo/ayasofyazilim-ui/lib/utils";
+
+const variants = {
+  default:
+    "flex flex-row justify-between border-2 border-gray-300 gap-5 text-gray-700/80 flex-1",
+  active:
+    "flex flex-row justify-between border-2 border-primary/80  gap-5 text-primary/80 hover:text-primary  flex-1",
+};
+
+interface ISelectTabsContentProps {
+  children: JSX.Element | string;
+  value: string;
+}
+/**
+ * Renders the content of a select tab.
+ *
+ * @param {ISelectTabsContentProps} props - The properties for the select tab content.
+ * @param {string} props.value - The value of the tab.
+ * @param {JSX.Element | string} props.children - The content of the tab.
+ * @return {JSX.Element} The rendered select tab content.
+ */
+export function SelectTabsContent({
+  value,
+  children,
+}: ISelectTabsContentProps) {
+  const { activeTab, onChange } = useContext(SelectTabsContext);
+  return (
+    <Button
+      key={value}
+      className={activeTab === value ? variants.active : variants.default}
+      variant="ghost"
+      onClick={() => onChange(value)}
+    >
+      {children}
+      {activeTab === value ? (
+        <CircleCheckBig size={16} />
+      ) : (
+        <Circle size={16} />
+      )}
+    </Button>
+  );
+}
+interface IContextProps {
+  activeTab: string;
+  onChange: (value: string) => void;
+}
+const SelectTabsContext = createContext<IContextProps>({
+  activeTab: "",
+  onChange: () => {},
+});
+interface ISelectTabsProps {
+  children?: React.ReactNode;
+  deselect?: boolean;
+  disabled?: boolean;
+  onValueChange?: (value: string) => void;
+  value?: string;
+  className?: string;
+}
+
+/**
+ * Renders a set of selectable tabs.
+ *
+ * @param {ISelectTabsProps} props - The properties for the select tabs.
+ * @param {boolean} props.deselect - Whether the tabs can have a null value.
+ * @param {React.ReactNode} props.children - The content of the tabs.
+ * @param {string } [props.value] - The initial active tab value.
+ * @param {(newValue: string) => void} [props.onValueChange] - The callback function triggered when the active tab value changes.
+ * @param {boolean} [props.disabled] - Whether the tabs are disabled.
+ * @return {JSX.Element} The rendered select tabs.
+ */
+export default function SelectTabs({
+  deselect,
+  children,
+  value = "",
+  onValueChange,
+  disabled,
+  className,
+}: ISelectTabsProps) {
+  const [activeTab, setActiveTab] = useState(value);
+  const contextValue = useMemo(() => ({ activeTab, onChange }), [activeTab]);
+  function onChange(newValue: string) {
+    if (disabled) return;
+
+    if (newValue === activeTab && deselect) {
+      setActiveTab("");
+      onValueChange?.("");
+    } else if (newValue !== activeTab) {
+      setActiveTab(newValue);
+      onValueChange?.(newValue);
+    }
+  }
+
+  return (
+    <SelectTabsContext.Provider value={contextValue}>
+      <div className={cn("w-full grid gap-3", className)}>{children}</div>
+    </SelectTabsContext.Provider>
+  );
+}

package/src/custom/selectable.tsx

@@ -0,0 +1,316 @@
+"use client";
+
+import { Check, ChevronDown, ChevronsUpDown, XIcon } from "lucide-react";
+
+import { Fragment, useCallback, useEffect, useMemo, useState } from "react";
+import { Badge } from "../components/badge";
+import { Button } from "../components/button";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "../components/collapsible";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "../components/command";
+import { Popover, PopoverContent, PopoverTrigger } from "../components/popover";
+import { Skeleton } from "../components/skeleton";
+import { useDebounce } from "../hooks/use-debounce";
+import { cn } from "../lib/utils";
+
+export type SelectableProps<T> = {
+  id?: string;
+  className?: string;
+  disabled?: boolean;
+  options?: T[];
+  defaultValue?: T[];
+  getKey: (option: T) => string;
+  getLabel: (option: T) => string;
+  getGroup?: (option: T) => string;
+  getDisabled?: (option: T) => boolean;
+  onSearch?: (search: string) => Promise<T[]>;
+  onChange: (value: T[]) => void;
+  singular?: boolean;
+  singleLine?: boolean;
+  selectedText?: string;
+  noResult?: string;
+  searchPlaceholderText?: string;
+  makeAChoiceText?: string;
+  typeToSearchText?: string;
+  renderOption?: (option: T) => React.ReactNode;
+  renderTrigger?: ({
+    children,
+    disabled,
+  }: {
+    children: React.ReactNode;
+    disabled: boolean;
+  }) => React.ReactNode;
+};
+
+export function Selectable<T>({
+  id,
+  className,
+  options,
+  defaultValue,
+  getKey,
+  getLabel,
+  getGroup,
+  getDisabled,
+  onSearch,
+  onChange,
+  singular = false,
+  singleLine,
+  selectedText = "Selected",
+  noResult = "Nothing to show.",
+  searchPlaceholderText = "Search...",
+  makeAChoiceText = "Make a choice...",
+  typeToSearchText = "Type to search...",
+  disabled = false,
+  renderOption,
+  renderTrigger: Trigger,
+}: SelectableProps<T>) {
+  const [open, setOpen] = useState(false);
+
+  const [searchInput, setSearchInput] = useState("");
+  const searchValue = useDebounce(searchInput, 500);
+  const [searching, setSearching] = useState(false);
+  const [searchResults, setSearchResults] = useState<T[] | undefined>([]);
+
+  const [selectedOptions, setSelectedOptions] = useState<T[] | undefined>(
+    defaultValue
+  );
+
+  const selectableOptions = useMemo(() => {
+    const sourceOptions = onSearch && searchValue ? searchResults : options;
+    const selectableOptions =
+      sourceOptions?.filter(
+        (option) =>
+          !selectedOptions?.some(
+            (selected) => getKey(selected) === getKey(option)
+          )
+      ) || [];
+
+    if (!getGroup)
+      return { groupedOptions: { "": selectableOptions }, sortedTypes: [""] };
+    const groupedOptions: Record<string, T[]> = {};
+    selectableOptions.forEach((option) => {
+      const type = getGroup(option);
+      if (!groupedOptions[type]) {
+        groupedOptions[type] = [];
+      }
+      groupedOptions[type].push(option);
+    });
+    const sortedTypes = Object.keys(groupedOptions).sort();
+
+    return { groupedOptions, sortedTypes };
+  }, [selectedOptions, searchResults, options, searchValue, getKey, getGroup]);
+
+  const toggleSelection = useCallback(
+    (option: T, isSelected: boolean) => {
+      // Prevent selection of disabled options
+      if (getDisabled?.(option)) return;
+
+      if (singular) {
+        const newSelection = isSelected ? [option] : [];
+        setSelectedOptions(newSelection);
+        onChange(newSelection);
+        setOpen(false);
+        return;
+      }
+      setSelectedOptions((prev) => {
+        const newSelection = isSelected
+          ? [...(prev || []), option]
+          : prev?.filter((item) => getKey(item) !== getKey(option)) || [];
+        onChange(newSelection);
+        return newSelection;
+      });
+    },
+    [singular, getKey, getDisabled, onChange]
+  );
+
+  const handleSearchChange = useCallback((search: string) => {
+    setSearching(!!search);
+    setSearchInput(search);
+  }, []);
+
+  useEffect(() => {
+    if (!onSearch) {
+      setSearching(false);
+      setSearchResults([]);
+      return;
+    }
+    if (searchValue !== searchInput) return;
+
+    setSearching(true);
+    setSearchResults([]);
+    onSearch(searchValue)
+      .then((fetchedOptions) => {
+        setSearchResults(fetchedOptions);
+      })
+      .finally(() => {
+        setSearching(false);
+      });
+  }, [onSearch, searchValue, searchInput]);
+
+  const onPopoverOpenChange = useCallback(
+    (isOpen: boolean) => {
+      if (disabled) return;
+      setOpen(isOpen);
+      setSearchInput("");
+    },
+    [disabled]
+  );
+
+  const TriggerContent = (
+    <>
+      {selectedOptions?.length ? (
+        <div className={"flex flex-wrap gap-1 overflow-hidden w-full"}>
+          {!singleLine &&
+            selectedOptions.map((option) => {
+              const key = getKey(option);
+              const label = getLabel(option);
+              if (singular) {
+                return <Fragment key={key}>{label}</Fragment>;
+              }
+
+              return (
+                <Badge
+                  key={key}
+                  variant={"secondary"}
+                  className="hover:animate-pulse"
+                  onClick={(e) => {
+                    if (disabled) return;
+                    e.stopPropagation();
+                    toggleSelection(option, false);
+                  }}
+                >
+                  {label}
+                  <XIcon className="size-4" />
+                </Badge>
+              );
+            })}
+          {singleLine && (
+            <span className="truncate">
+              {selectedOptions.map((option) => getLabel(option)).join(", ")}
+            </span>
+          )}
+        </div>
+      ) : (
+        makeAChoiceText
+      )}
+      <ChevronsUpDown className="opacity-50" />
+    </>
+  );
+  return (
+    <Popover open={open} onOpenChange={onPopoverOpenChange}>
+      <PopoverTrigger
+        id={id}
+        className={cn(
+          "w-full justify-between h-max hover:bg-accent/30",
+          className
+        )}
+        disabled={disabled}
+        asChild
+      >
+        {Trigger ? (
+          <span>
+            <Trigger disabled={disabled}>{TriggerContent}</Trigger>
+          </span>
+        ) : (
+          <Button variant="outline" disabled={disabled}>
+            {TriggerContent}
+          </Button>
+        )}
+      </PopoverTrigger>
+      <PopoverContent className="p-0">
+        <Command>
+          <CommandInput
+            placeholder={searchPlaceholderText}
+            className="h-9"
+            onValueChange={(search) => handleSearchChange(search)}
+          />
+          <CommandList>
+            {searching && (
+              <div className="p-1 text-sm">
+                <Skeleton className="h-7 w-full mb-1" />
+                <Skeleton className="h-7 w-full mb-1" />
+                <Skeleton className="h-7 w-full mb-1" />
+              </div>
+            )}
+            {!searching && !!selectedOptions?.length && (
+              <Collapsible className="border-b">
+                <CollapsibleTrigger asChild>
+                  <CommandGroup
+                    className="[&[data-state=open]_svg]:-rotate-90 cursor-pointer"
+                    heading={
+                      <div className="flex justify-between">
+                        {selectedText}
+                        <ChevronDown className="size-4 transition-all" />
+                      </div>
+                    }
+                  />
+                </CollapsibleTrigger>
+                <CollapsibleContent className="px-1">
+                  {selectedOptions.map((option) => {
+                    const key = getKey(option);
+                    const isDisabled = getDisabled?.(option) ?? false;
+                    return (
+                      <CommandItem
+                        id={"option-" + key}
+                        key={key}
+                        value={key}
+                        disabled={isDisabled}
+                        onSelect={() => toggleSelection(option, false)}
+                      >
+                        {renderOption ? (
+                          renderOption(option)
+                        ) : (
+                          <>
+                            {getLabel(option)}
+                            <Check className="ml-auto opacity-100" />
+                          </>
+                        )}
+                      </CommandItem>
+                    );
+                  })}
+                </CollapsibleContent>
+              </Collapsible>
+            )}
+            {!searching && (
+              <CommandEmpty id="no-result-text">
+                {onSearch && !options?.length && !searchValue
+                  ? typeToSearchText
+                  : noResult}
+              </CommandEmpty>
+            )}
+            {!searching &&
+              selectableOptions.sortedTypes?.map((group) => (
+                <CommandGroup key={group} heading={group}>
+                  {selectableOptions.groupedOptions[group]?.map((option) => {
+                    const key = getKey(option);
+                    const isDisabled = getDisabled?.(option) ?? false;
+                    return (
+                      <CommandItem
+                        id={"option-" + key}
+                        key={key}
+                        value={getLabel(option)}
+                        disabled={isDisabled}
+                        onSelect={() => toggleSelection(option, true)}
+                      >
+                        {getLabel(option)}
+                      </CommandItem>
+                    );
+                  })}
+                </CommandGroup>
+              ))}
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}