ikoncomponents 1.5.8 → 1.5.9

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

@@ -1,149 +0,0 @@
-import * as React from "react";
-import { Check, Cross, Plus, X } from "lucide-react";
-
-import { cn } from "../../../utils/cn";
-import { Badge } from "../../../shadcn/badge";
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-  CommandSeparator,
-} from "../../../shadcn/command";
-import { Popover, PopoverContent, PopoverTrigger } from "../../../shadcn/popover";
-import { Separator } from "../../../shadcn/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

@@ -1,98 +0,0 @@
-"use client";
-import * as React from "react";
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-  CommandSeparator,
-} from "../../../shadcn/command";
-import { Popover, PopoverContent, PopoverTrigger } from "../../../shadcn/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

@@ -1,119 +0,0 @@
-import * as React from "react";
-import {
-  ChevronLeft,
-  ChevronRight,
-  ChevronsLeft,
-  ChevronsRight,
-} from "lucide-react";
-
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "../../../shadcn/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

@@ -1,45 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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
-}