ikoncomponents 1.4.8 → 1.5.0

package/templates/default/ikoncomponents/data-table/datatable-faceted-filter/index.tsx

@@ -0,0 +1,149 @@
+import * as React from "react";
+import { Check, Cross, Plus, X } from "lucide-react";
+
+import { cn } from "../../../utils/cn";
+import { Badge } from "../../../ikonShade/badge";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+} from "../../../ikonShade/command";
+import { Popover, PopoverContent, PopoverTrigger } from "../../../ikonShade/popover";
+import { Separator } from "../../../ikonShade/separator";
+import { DataTableFacetedFilterProps } from "../type";
+import { getDataTableColumnTitle } from "../function";
+import { IconTextButtonWithTooltip } from "../../buttons";
+
+export function DataTableFacetedFilter<TData, TValue>({
+  column,
+}: DataTableFacetedFilterProps<TData, TValue>) {
+  const facets = column?.getFacetedUniqueValues();
+  const selectedValues = new Set(column?.getFilterValue() as string[]);
+
+  const sortedUniqueValues = React.useMemo(
+    () =>
+      Array.from(column.getFacetedUniqueValues().keys()).sort().slice(0, 5000),
+    [column.getFacetedUniqueValues()]
+  );
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <IconTextButtonWithTooltip
+          variant={"dashed"}
+          tooltipContent={getDataTableColumnTitle(column)}
+        >
+          {selectedValues?.size > 0 ?
+            <X />
+            :
+            <Plus />
+          }
+          {getDataTableColumnTitle(column)}
+          {selectedValues?.size > 0 && (
+            <>
+              <Separator orientation="vertical" className="mx-2 h-4" />
+              <Badge
+                variant="secondary"
+                className="rounded-sm px-1 font-normal lg:hidden"
+              >
+                {selectedValues.size}
+              </Badge>
+              <div className="hidden space-x-1 lg:flex">
+                {selectedValues.size > 2 ? (
+                  <Badge
+                    variant="secondary"
+                    className="rounded-sm px-1 font-normal"
+                  >
+                    {selectedValues.size} selected
+                  </Badge>
+                ) : (
+                  sortedUniqueValues
+                    .filter((option) => selectedValues.has(option))
+                    .map((option) => (
+                      <Badge
+                        variant="secondary"
+                        key={option}
+                        className="rounded-sm px-1 font-normal"
+                      >
+                        {option}
+                      </Badge>
+                    ))
+                )}
+              </div>
+            </>
+          )}
+        </IconTextButtonWithTooltip>
+      </PopoverTrigger>
+      <PopoverContent className="max-w-[250px] p-0" align="start">
+        <Command>
+          <CommandInput placeholder={getDataTableColumnTitle(column)} />
+          <CommandList>
+            <CommandEmpty>No results found.</CommandEmpty>
+            <CommandGroup>
+              {sortedUniqueValues.map((option) => {
+                const isSelected = selectedValues.has(option);
+                return (
+                  <CommandItem
+                    key={option}
+                    onSelect={() => {
+                      if (isSelected) {
+                        selectedValues.delete(option);
+                      } else {
+                        selectedValues.add(option);
+                      }
+                      const filterValues = Array.from(selectedValues);
+                      column?.setFilterValue(
+                        filterValues.length ? filterValues : undefined
+                      );
+                    }}
+                  >
+                    <div
+                      className={cn(
+                        "mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-black dark:border-white",
+                        isSelected
+                          ? "bg-black dark:bg-white text-white dark:text-black"
+                          : "opacity-50 [&_svg]:invisible"
+                      )}
+                    >
+                      <Check />
+                    </div>
+                    {/* {option.icon && (
+                      <option.icon className="mr-2 h-4 w-4 text-muted-foreground" />
+                    )} */}
+                    <span
+                      className="overflow-hidden text-ellipsis"
+                      title={option}
+                    >
+                      {option}
+                    </span>
+                    {facets?.get(option) && (
+                      <span className="ml-auto flex h-4 w-4 items-center justify-center font-mono text-xs">
+                        {facets.get(option)}
+                      </span>
+                    )}
+                  </CommandItem>
+                );
+              })}
+            </CommandGroup>
+          </CommandList>
+          {selectedValues.size > 0 && (
+            <>
+              <CommandSeparator />
+              <CommandGroup>
+                <CommandItem
+                  onSelect={() => column?.setFilterValue(undefined)}
+                  className="justify-center text-center"
+                >
+                  Clear filters
+                </CommandItem>
+              </CommandGroup>
+            </>
+          )}
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}

package/templates/default/ikoncomponents/data-table/datatable-filter-menu/index.tsx

@@ -0,0 +1,98 @@
+"use client";
+import * as React from "react";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+} from "../../../ikonShade/command";
+import { Popover, PopoverContent, PopoverTrigger } from "../../../ikonShade/popover";
+import { cn } from "../../../utils/cn";
+import { DataTableFilterProps } from "../type";
+import { useState } from "react";
+import { TooltipComponent as Tooltip } from "../../tooltip";
+import { IconButton, IconTextButton } from "../../buttons";
+import { Check, Filter } from "lucide-react";
+import { getDataTableColumnTitle } from "../function";
+import { DataTableFacetedFilter } from "../datatable-faceted-filter";
+
+export function DataTableFilterMenu<TData>({ table }: DataTableFilterProps<TData>) {
+  const [selectedFilterItems, setSelectedFilterItems] = useState<string[]>([]);
+
+  return (
+    <div className="flex-grow flex gap-3 items-center overflow-hidden">
+      <Popover>
+        <Tooltip tooltipContent="Filter">
+          <PopoverTrigger asChild>
+            <IconTextButton>
+              <Filter />
+              Filter
+            </IconTextButton>
+          </PopoverTrigger>
+        </Tooltip>
+        <PopoverContent className="w-[220px] p-0" align="start">
+          <Command>
+            <CommandInput placeholder={"Search..."} />
+            <CommandList>
+              <CommandEmpty>No results found.</CommandEmpty>
+              <CommandGroup>
+                {table
+                  .getAllColumns()
+                  .filter(
+                    (column) =>
+                      typeof column.accessorFn !== "undefined" &&
+                      column.getCanHide()
+                  )
+                  .map((column) => {
+                    const previousValues = new Set(selectedFilterItems);
+                    const isSelected = previousValues.has(column.id);
+                    return (
+                      <CommandItem
+                        key={column.id}
+                        onSelect={() => {
+                          if (isSelected) {
+                            previousValues.delete(column.id);
+                          } else {
+                            previousValues.add(column.id);
+                          }
+                          setSelectedFilterItems([...previousValues]);
+                        }}
+                      >
+                        <div
+                          className={cn(
+                            "mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-black dark:border-white",
+                            isSelected
+                              ? "bg-black dark:bg-white text-white dark:text-black"
+                              : "opacity-50 [&_svg]:invisible"
+                          )}
+                        >
+                          <Check />
+                        </div>
+                        <span
+                          className="overflow-hidden text-ellipsis"
+                          title={getDataTableColumnTitle(column)}
+                        >
+                          {getDataTableColumnTitle(column)}
+                        </span>
+                      </CommandItem>
+                    );
+                  })}
+              </CommandGroup>
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
+      <div className="flex-grow flex gap-3 items-center overflow-auto">
+        {selectedFilterItems.map((columnId) => {
+          const column = table.getColumn(columnId);
+          if (column) {
+            return <DataTableFacetedFilter column={column} key={columnId} />;
+          }
+        })}
+      </div>
+    </div>
+  );
+}

package/templates/default/ikoncomponents/data-table/datatable-pagination/index.tsx

@@ -0,0 +1,119 @@
+import * as React from "react";
+import {
+  ChevronLeft,
+  ChevronRight,
+  ChevronsLeft,
+  ChevronsRight,
+} from "lucide-react";
+
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../../../ikonShade/select";
+import { DataTablePaginationProps } from "../type";
+import { IconButtonWithTooltip } from "../../buttons";
+
+const defaultPageSizeArray = [15, 20, 30, 40, 50, 100];
+export function DataTablePagination<TData>({
+  table,
+  extraParams,
+}: DataTablePaginationProps<TData>) {
+  return (
+    <div className="flex flex-col md:flex-row items-start md:items-center justify-between ">
+      <small className="flex-1 px-2 text-gray-600 dark:text-gray-400">
+        {(extraParams?.numberOfRows == undefined ||
+          extraParams?.numberOfRows) &&
+          extraParams?.checkBoxColumn ? (
+          <>
+            {table.getFilteredSelectedRowModel().rows.length} of{" "}
+            {table.getFilteredRowModel().rows.length} row(s) selected.
+          </>
+        ) : (
+          <>Total {table.getFilteredRowModel().rows.length} no(s) of rows.</>
+        )}
+      </small>
+      {(extraParams?.pagination == undefined || extraParams.pagination) && (
+        <div className="flex items-start md:items-center gap-3 flex-col md:flex-row ">
+          <div className="flex items-center gap-3">
+            <small className="text-gray-600 dark:text-gray-400">Rows per page</small>
+            {(extraParams?.rowsPerPage == undefined ||
+              extraParams.rowsPerPage) && (
+                <Select
+                  value={`${table.getState().pagination.pageSize}`}
+
+                  onValueChange={(value) => {
+                    table.setPageSize(Number(value));
+                  }}
+                >
+                  <SelectTrigger className="w-[70px] h-8">
+                    <SelectValue
+                      placeholder={table.getState().pagination.pageSize}
+                    />
+                  </SelectTrigger>
+                  <SelectContent side="top">
+                    {(extraParams?.pageSizeArray || defaultPageSizeArray).map((pageSize) => (
+                      <SelectItem key={pageSize} value={`${pageSize}`}>
+                        {pageSize}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              )}
+          </div>
+
+          <>
+            <small className="flex w-[100px] items-center justify-center text-gray-600 dark:text-gray-400">
+              Page {table.getState().pagination.pageIndex + 1} of{" "}
+              {table.getPageCount()}
+            </small>
+            <div className="flex items-center gap-3">
+              <IconButtonWithTooltip
+                tooltipContent="Go to first page"
+                size={"smIcon"}
+                className="dark:bg-accent dark:text-accent-foreground keross:bg-card keross:text-foreground"
+                onClick={() => table.setPageIndex(0)}
+                disabled={!table.getCanPreviousPage()}
+              >
+                <ChevronsLeft />
+              </IconButtonWithTooltip>
+
+              <IconButtonWithTooltip
+                tooltipContent="Go to previous page"
+                size={"smIcon"}
+                className="dark:bg-accent dark:text-accent-foreground keross:bg-card keross:text-foreground"
+                onClick={() => table.previousPage()}
+                disabled={!table.getCanPreviousPage()}
+              >
+                <ChevronLeft />
+              </IconButtonWithTooltip>
+
+              <IconButtonWithTooltip
+                tooltipContent="Go to next page"
+                size={"smIcon"}
+                className="dark:bg-accent dark:text-accent-foreground keross:bg-card keross:text-foreground"
+                onClick={() => table.nextPage()}
+                disabled={!table.getCanNextPage()}
+              >
+                <ChevronRight />
+              </IconButtonWithTooltip>
+
+              <IconButtonWithTooltip
+                tooltipContent="Go to last page"
+                size={"smIcon"}
+                className="dark:bg-accent dark:text-accent-foreground keross:bg-card keross:text-foreground"
+                onClick={() => table.setPageIndex(table.getPageCount() - 1)}
+                disabled={!table.getCanNextPage()}
+              >
+                <ChevronsRight />
+              </IconButtonWithTooltip>
+            </div>
+          </>
+
+        </div>
+      )}
+    </div>
+  );
+}

package/templates/default/ikoncomponents/data-table/datatable-toolbar/index.tsx

@@ -0,0 +1,45 @@
+import * as React from "react";
+import { Fragment } from "react";
+import { DTToolBarProps } from "../type";
+import { DataTableFilterMenu } from "../datatable-filter-menu";
+import { DataTableColumnFilter } from "../datatable-column-filter";
+import { SearchInput } from "../../search-input";
+
+export function DataTableToolbar<TData>({
+  table,
+  extraParams,
+}: DTToolBarProps<TData>) {
+  return (
+    <div className="flex items-center justify-between gap-3">
+      <div className="flex-grow flex items-center justify-between gap-3 overflow-hidden">
+        {(extraParams?.defaultTools == undefined ||
+          extraParams?.defaultTools == true ||
+          (Array.isArray(extraParams?.defaultTools) &&
+            extraParams?.defaultTools?.includes("search"))) && (
+            <SearchInput
+              placeholder="Search ..."
+              onChange={(event: any) => table.setGlobalFilter(event.target.value)}
+              className="max-w-sm"
+            />
+          )}
+        {(extraParams?.defaultTools == undefined ||
+          extraParams?.defaultTools == true ||
+          (Array.isArray(extraParams?.defaultTools) &&
+            extraParams?.defaultTools?.includes("filter"))) && (
+            <DataTableFilterMenu table={table} />
+          )}
+      </div>
+      <div className="flex gap-3">
+        {extraParams?.extraTools?.map((tool: any, index: number) => (
+          <Fragment key={index}>{tool}</Fragment>
+        ))}
+        {(extraParams?.defaultTools == undefined ||
+          extraParams?.defaultTools == true ||
+          (Array.isArray(extraParams?.defaultTools) &&
+            extraParams?.defaultTools?.includes("columnFilter"))) && (
+            <DataTableColumnFilter table={table} />
+          )}
+      </div>
+    </div>
+  );
+}

package/templates/default/ikoncomponents/data-table/function.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+
+export const getDataTableColumnTitle = (column: any) => {
+    return column?.columnDef?.title ||
+        (column?.columnDef?.header && typeof column.columnDef.header == 'string' && column?.columnDef?.header) ||
+        column.id
+}