@oneplatformdev/ui 0.0.1-beta.99 → 0.1.0-8

package/src_old/Combobox/Combobox.types.ts

@@ -0,0 +1,55 @@
+import { Dispatch, ReactNode, SetStateAction } from 'react';
+
+export interface ComboboxOption {
+  value: string;
+  label: string;
+  items?: ComboboxOption[];
+}
+
+export interface ComboboxCallbackStateParams {
+  options: ComboboxOption[];
+  setOptions:  Dispatch<SetStateAction<ComboboxOption[]>>
+  selectedOption?: ComboboxOption;
+  setSelectedOption:  Dispatch<SetStateAction<ComboboxOption | undefined>>
+  search: string;
+  setSearch:  Dispatch<SetStateAction<string>>
+  open: boolean,
+  setOpen: Dispatch<SetStateAction<boolean>>;
+  loading: boolean;
+  setLoading: Dispatch<SetStateAction<boolean>>;
+  isEmptyList: boolean;
+  isSearchedEmptyList: boolean;
+}
+
+export interface IComboboxOptionsNodeProps {
+  value?: string;
+  option: ComboboxOption;
+  onChangeOption?: (option: ComboboxOption) => void;
+  deep?: number;
+  setOpen: Dispatch<SetStateAction<boolean>>
+}
+
+export interface IComboboxOptionsProps
+  extends Omit<IComboboxOptionsNodeProps, 'option'> {
+  options?: ComboboxOption[];
+}
+
+export interface ComboboxProps {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  searchLabel?: string;
+  disabled?: boolean;
+  fetchOptions: (search?: string) => Promise<ComboboxOption[]>;
+  options?: ComboboxOption[];
+  /** Command Empty list label*/
+  emptyLabel?: string;
+  /** Command Empty list action */
+  emptyAction?: ((params: ComboboxCallbackStateParams) => ReactNode) | ReactNode;
+  /** Command Input footer action */
+  commandInputAction?: ((params: ComboboxCallbackStateParams) => ReactNode) | ReactNode;
+  /** Command List first element action */
+  listHeadAction?: ((params: ComboboxCallbackStateParams) => ReactNode) | ReactNode;
+  /** Callback for load data on start component */
+  onMount?: (params: ComboboxCallbackStateParams) => Promise<void>;
+}

package/src_old/Combobox/ComboboxOptionItem.tsx

@@ -0,0 +1,46 @@
+import { forwardRef, PropsWithChildren } from 'react';
+import { CommandItem, IComboboxOptionsNodeProps } from '@oneplatformdev/ui';
+import { Check } from 'lucide-react';
+import { cn } from '@oneplatformdev/utils';
+
+const DEEP_OFFSET = 8;
+
+export const ComboboxOptionItem = forwardRef<
+  HTMLDivElement,
+  PropsWithChildren<IComboboxOptionsNodeProps>
+>((props, ref) => {
+  const { children, setOpen, option, onChangeOption, value = '', deep = 0 } = props;
+  return (
+    <CommandItem
+      ref={ref}
+      key={option.value}
+      value={option.value}
+      onSelect={() => {
+        if (value === option.value) {
+          onChangeOption?.({ value: '', label: '' });
+        } else {
+          onChangeOption?.(option);
+        }
+        setOpen(false);
+      }}
+      style={{
+        paddingLeft: (deep + 1) * DEEP_OFFSET,
+      }}
+    >
+      {children}
+      <span
+        className={cn(
+          'overflow-hidden whitespace-wrap text-ellipsis line-clamp-2'
+        )}
+      >
+        {option.label}
+      </span>
+      <Check
+        className={cn(
+          'ml-auto',
+          value === option.value ? 'opacity-100' : 'opacity-0'
+        )}
+      />
+    </CommandItem>
+  );
+});

package/src_old/Combobox/ComboboxOptions.tsx

@@ -0,0 +1,90 @@
+import {
+  IComboboxOptionsNodeProps,
+  IComboboxOptionsProps,
+} from './Combobox.types';
+import { Button } from '../Button';
+import { forwardRef, useState } from 'react';
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '../Collapsible';
+import { ComboboxOptionItem } from './ComboboxOptionItem';
+import { ChevronDownIcon } from 'lucide-react';
+import { cn } from '@oneplatformdev/utils';
+
+export const ComboboxOptionsNode = forwardRef<
+  HTMLDivElement,
+  IComboboxOptionsNodeProps
+>((props, ref) => {
+  const { option, deep = 0 } = props;
+
+  const [open, onOpenChange] = useState(true);
+
+  if (!option?.items?.length) {
+    return <ComboboxOptionItem {...props} ref={ref} />;
+  }
+  return (
+    <Collapsible
+      ref={ref}
+      open={open}
+      onOpenChange={onOpenChange}
+      data-opened={open}
+      className={cn('group/collapsible')}
+    >
+      <ComboboxOptionItem {...props}>
+        <CollapsibleTrigger asChild>
+          <Button
+            onClick={(e) => {
+              e?.preventDefault();
+              e?.stopPropagation();
+              onOpenChange((prev) => !prev);
+            }}
+            type="button"
+            variant="ghost"
+            size="sm"
+            className={cn('aspect-square size-6', 'transition-transform')}
+          >
+            <ChevronDownIcon
+              className={cn(
+                'size-5!',
+                'transition-transform',
+                open && 'rotate-180'
+              )}
+            />
+            <span className="sr-only">Toggle</span>
+          </Button>
+        </CollapsibleTrigger>
+      </ComboboxOptionItem>
+
+      <CollapsibleContent>
+        <div className="flex flex-col gap-0">
+          {option?.items.map((opt) => {
+            return (
+              <ComboboxOptionsNode
+                key={opt.value}
+                {...props}
+                deep={deep + 1}
+                option={opt}
+              />
+            );
+          })}
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+});
+
+export const ComboboxOptions = forwardRef<
+  HTMLDivElement,
+  IComboboxOptionsProps
+>((props, ref) => {
+  const { options = [], ...rest } = props;
+  return (
+    <div ref={ref} className="flex flex-col gap-0">
+      {options.map((option) => (
+        <ComboboxOptionsNode key={option.value} {...rest} option={option} />
+      ))}
+    </div>
+  );
+});

package/src_old/Combobox/index.tsx

@@ -0,0 +1,2 @@
+export * from './Combobox'
+export type * from './Combobox.types'

package/src_old/Command/Command.tsx

@@ -0,0 +1,161 @@
+'use client';
+
+import * as React from 'react';
+import { type DialogProps } from '@radix-ui/react-dialog';
+import { Command as CommandPrimitive } from 'cmdk';
+import { SearchIcon } from 'lucide-react';
+
+import { cn } from '@oneplatformdev/utils';
+import { Dialog, DialogContent } from '../Dialog';
+
+const Command = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive
+    ref={ref}
+    className={cn(
+      'flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground',
+      className
+    )}
+    {...props}
+  />
+));
+Command.displayName = CommandPrimitive.displayName
+
+const CommandDialog = ({ children, ...props }: DialogProps) => {
+  return (
+    <Dialog {...props}>
+      <DialogContent className="overflow-hidden p-0">
+        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+const CommandInput = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Input>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
+>(({ className, ...props }, ref) => (
+  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
+    <SearchIcon className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    <CommandPrimitive.Input
+      ref={ref}
+      className={cn(
+        "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  </div>
+))
+
+CommandInput.displayName = CommandPrimitive.Input.displayName
+
+const CommandList = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.List
+    ref={ref}
+    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
+    {...props}
+  />
+))
+
+CommandList.displayName = CommandPrimitive.List.displayName
+
+const CommandEmpty = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Empty>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+>((props, ref) => (
+  <CommandPrimitive.Empty
+    ref={ref}
+    className="py-6 text-center text-sm"
+    {...props}
+  />
+))
+
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName
+
+const CommandGroup = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Group>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Group
+    ref={ref}
+    className={cn(
+      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+
+CommandGroup.displayName = CommandPrimitive.Group.displayName
+
+const CommandSeparator = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 h-px bg-border", className)}
+    {...props}
+  />
+))
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName
+
+const CommandItem = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex gap-2 select-none items-center rounded-sm",
+      'min-h-8 px-2 py-1',
+      '[&>span]:py-1',
+      'text-sm text-[#666A78] font-medium leading-[1.12]',
+      'data-[selected=true]:bg-accent',
+      'data-[selected=true]:text-[#191F35] hover:text-[#191F35]',
+      'outline-hidden data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+      'cursor-pointer',
+      className
+    )}
+    {...props}
+  />
+))
+
+
+CommandItem.displayName = CommandPrimitive.Item.displayName
+
+const CommandShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+CommandShortcut.displayName = "CommandShortcut"
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+}

package/src_old/DataTable/DataTable.tsx

@@ -0,0 +1,118 @@
+'use client';
+
+import { Button } from '../Button';
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from '../DropdownMenu';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '../Table';
+import { flexRender, type Table as ReactTable } from '@tanstack/react-table';
+import { ChevronDown } from 'lucide-react';
+import React, { FC } from 'react';
+
+interface IProps {
+  table: ReactTable<any>;
+  ToolBar?: React.ReactNode;
+  tColumns?: string;
+  tNoResults?: string;
+}
+
+export const DataTable: FC<IProps> = ({
+  table,
+  ToolBar,
+  tColumns = 'Columns',
+  tNoResults = 'No results',
+}) => {
+  return (
+    <div className="w-full">
+      <div className="flex items-center py-4">
+        {ToolBar}
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="outline" className="ml-auto">
+              {tColumns} <ChevronDown className="ml-2 h-4 w-4" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            {table
+              .getAllColumns()
+              .filter((column) => column.getCanHide())
+              .map((column) => {
+                return (
+                  <DropdownMenuCheckboxItem
+                    key={column.id}
+                    className="capitalize"
+                    checked={column.getIsVisible()}
+                    onCheckedChange={(value) =>
+                      column.toggleVisibility(!!value)
+                    }
+                  >
+                    {column.id}
+                  </DropdownMenuCheckboxItem>
+                );
+              })}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+      <div className="rounded-md border">
+        <Table>
+          <TableHeader>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id}>
+                {headerGroup.headers.map((header) => {
+                  return (
+                    <TableHead key={header.id}>
+                      {header.isPlaceholder
+                        ? null
+                        : flexRender(
+                            header.column.columnDef.header,
+                            header.getContext()
+                          )}
+                    </TableHead>
+                  );
+                })}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {table.getRowModel().rows?.length ? (
+              table.getRowModel().rows.map((row) => (
+                <TableRow
+                  key={row.id}
+                  data-state={row.getIsSelected() && 'selected'}
+                >
+                  {row.getVisibleCells().map((cell) => (
+                    <TableCell key={cell.id}>
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext()
+                      )}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))
+            ) : (
+              <TableRow>
+                <TableCell
+                  colSpan={table.getAllColumns().length}
+                  className="h-24 text-center"
+                >
+                  {tNoResults}
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+    </div>
+  );
+};

package/src_old/DataTable/DataTable.types.tsx

@@ -0,0 +1,14 @@
+"use client";
+
+import type { Table as ReactTable, } from "@tanstack/react-table";
+import React from "react";
+
+// TODO: refactor any type
+export interface DataTableProps {
+    table: ReactTable<any>;
+    ToolBar?: React.ReactNode;
+    /** Columns label*/
+    columnsLabel?: string;
+    /** No Result label*/
+    noResultLabel?: string;
+}

package/src_old/DataTable/DataTableColumnFilter.tsx

@@ -0,0 +1,57 @@
+'use client';
+
+import { ChevronDown } from 'lucide-react';
+import React, { FC, useMemo } from 'react';
+
+import { Button } from '../Button';
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from '../DropdownMenu';
+import { DataTableProps } from './DataTable.types';
+
+// TODO: refactor this component to use the new Table component
+export const DataTableColumnFilter: FC<DataTableProps> = (props) => {
+  const {
+    table,
+    columnsLabel = 'Columns',
+  } = props;
+
+  const columnsCheckboxRender = useMemo(() => {
+    return table
+      .getAllColumns()
+      .filter((column) => column.getCanHide())
+      .map((column) => {
+        return (
+          <DropdownMenuCheckboxItem
+            key={column.id}
+            className="capitalize"
+            checked={column.getIsVisible()}
+            onCheckedChange={(value) =>
+              column.toggleVisibility(!!value)
+            }
+          >
+            {column.id}
+          </DropdownMenuCheckboxItem>
+        );
+      })
+  }, [table])
+
+  if(!columnsCheckboxRender.length) return null;
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" className="ml-auto">
+          {columnsLabel}
+          <ChevronDown className="ml-2 h-4 w-4" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        {columnsCheckboxRender}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};

package/src_old/DataTable/useDataTable.ts

@@ -0,0 +1,44 @@
+import React from 'react';
+import {
+  ColumnFiltersState,
+  SortingState,
+  VisibilityState,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from '@tanstack/react-table';
+
+// TODO: refactor any type
+export const useDataTable = (data: any, columns: any) => {
+  const [sorting, setSorting] = React.useState<SortingState>([]);
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
+    []
+  );
+  const [columnVisibility, setColumnVisibility] =
+    React.useState<VisibilityState>({});
+
+  const table = useReactTable({
+    data,
+    columns,
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    onColumnVisibilityChange: setColumnVisibility,
+    enableRowSelection: true,
+    manualPagination: true,
+    manualSorting: true,
+    manualFiltering: true,
+    state: {
+      sorting,
+      columnFilters,
+      columnVisibility,
+    },
+  });
+
+  return { table };
+};

package/src_old/DatePicker/DatePicker.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import * as React from 'react';
+import { format } from 'date-fns';
+import { Calendar as CalendarIcon } from 'lucide-react';
+import { cn } from '@oneplatformdev/utils';
+import { Button } from '../Button';
+import { Calendar } from '../Calendar';
+import { Popover, PopoverContent, PopoverTrigger } from '../Popover';
+import { uk } from 'date-fns/locale';
+import { DatePickerProps } from './DatePicker.types';
+
+export const DatePicker = React.forwardRef<HTMLButtonElement, DatePickerProps>(
+  (props, ref) => {
+    const {
+      selectedDate,
+      onDateChange,
+      disabled = false
+    } = props;
+    return (
+      <Popover>
+        <PopoverTrigger asChild>
+          <Button
+            ref={ref}
+            disabled={disabled}
+            variant={'outline-solid'}
+            className={cn(
+              'w-full justify-start text-left font-normal border h-10',
+              !selectedDate && 'text-muted-foreground'
+            )}
+          >
+            {selectedDate ? (
+              format(selectedDate, 'LLL dd, y', { locale: uk })
+            ) : (
+              <span>dd/mm/yyyy</span>
+            )}
+            <CalendarIcon className="mr-2 h-4 w-4 ml-auto" />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent align="start" className="w-auto p-0">
+          <Calendar
+            mode="single"
+            captionLayout="dropdown-buttons"
+            selected={selectedDate}
+            onSelect={onDateChange}
+            fromYear={1960}
+            toYear={2030}
+            locale={uk}
+          />
+        </PopoverContent>
+      </Popover>
+    );
+  }
+);
+
+DatePicker.displayName = 'DatePicker';

package/src_old/DatePicker/DatePicker.types.tsx

@@ -0,0 +1,7 @@
+'use client';
+
+export interface DatePickerProps {
+  selectedDate?: Date;
+  onDateChange: (date: Date | undefined) => void;
+  disabled?: boolean;
+}