@oneplatformdev/ui 0.1.0-5 → 0.1.0-8

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/index.tsx

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

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;
+}

package/src_old/DatePicker/index.tsx

@@ -0,0 +1,3 @@
+export * from './DatePicker';
+export { DatePicker as default } from './DatePicker';
+export type * from './DatePicker.types';

package/src_old/Dialog/Dialog.tsx

@@ -0,0 +1,182 @@
+'use client';
+
+import React, { useRef, useState } from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { XIcon } from 'lucide-react';
+
+import { cn, composeRefs } from '@oneplatformdev/utils';
+import { DialogOverlayScope } from './DialogOverlayScope';
+
+const Dialog = (
+  props: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Root>
+) => {
+  const { modal, ...rest } = props;
+  return <DialogPrimitive.Root modal={modal} {...rest} />;
+};
+
+const DialogTrigger = DialogPrimitive.Trigger;
+
+const DialogPortal = DialogPrimitive.Portal;
+
+const DialogClose = DialogPrimitive.Close;
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      'fixed inset-0 z-40 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      className
+    )}
+    {...props}
+  />
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
+    showCloseButton?: boolean;
+    preventAutoFocus?: boolean;
+  }
+>(
+  (
+    {
+      className,
+      children,
+      showCloseButton = true,
+      onOpenAutoFocus,
+      preventAutoFocus,
+      ...props
+    },
+    forwardedRef
+  ) => {
+    const [container, setContainer] = useState<HTMLElement | null>(null);
+    const localRef = useRef<HTMLDivElement>(null);
+    return (
+      <DialogPortal>
+        <DialogOverlay>
+          <DialogOverlayScope value={container}>
+            <DialogPrimitive.Content
+              ref={(node) => {
+                if (!node) return;
+                composeRefs<HTMLDivElement>(forwardedRef, localRef)(node);
+              }}
+              className={cn(
+                'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg',
+                'duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+                'max-w-[90%] max-h-[90%] overflow-hidden',
+                'bg-[#FCFCFC] border border-[#E8E9EB] rounded-[16px]',
+                className
+              )}
+              onOpenAutoFocus={(event) => {
+                if (preventAutoFocus) event.preventDefault();
+                return onOpenAutoFocus?.(event);
+              }}
+              {...props}
+            >
+              {children}
+              {showCloseButton && (
+                <DialogPrimitive.Close
+                  aria-label="Close"
+                  className={cn(
+                    'absolute right-4 top-4 rounded-sm ring-offset-background w-10 aspect-square',
+                    'flex items-center justify-center',
+                    'data-[state=open]:bg-accent data-[state=open]:text-muted-foreground',
+                    'opacity-70 hover:opacity-100',
+                    // 'focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2',
+                    'focus:outline-hidden focus:ring-0 focus:ring-ring focus:ring-offset-2',
+                    'hover:bg-accent',
+                    'disabled:pointer-events-none',
+                    'transition-opacity'
+                  )}
+                >
+                  <XIcon className="h-4 w-4" />
+                  <span className="sr-only">Close</span>
+                </DialogPrimitive.Close>
+              )}
+            </DialogPrimitive.Content>
+          </DialogOverlayScope>
+
+          <div
+            ref={(node) => {
+              if (!node) return;
+              setContainer(node);
+            }}
+          />
+        </DialogOverlay>
+      </DialogPortal>
+    );
+  }
+);
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      'flex flex-col space-y-1.5 text-center sm:text-left',
+      className
+    )}
+    {...props}
+  />
+);
+DialogHeader.displayName = 'DialogHeader';
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
+      className
+    )}
+    {...props}
+  />
+);
+DialogFooter.displayName = 'DialogFooter';
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      'text-lg font-semibold leading-none tracking-tight',
+      className
+    )}
+    {...props}
+  />
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn('text-sm text-muted-foreground', className)}
+    {...props}
+  />
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogTrigger,
+  DialogClose,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+};

package/src_old/Dialog/DialogOverlayScope.tsx

@@ -0,0 +1,19 @@
+import { createContext, PropsWithChildren, useContext } from 'react';
+
+export const DialogOverlayContainerContext = createContext<HTMLElement | null>(
+  null
+);
+export const useDialogOverlayContainer = () => useContext(DialogOverlayContainerContext);
+
+interface IDialogOverlayScopeProps
+  extends PropsWithChildren {
+  value: HTMLElement | null;
+}
+
+export const DialogOverlayScope = ({ value, children }: IDialogOverlayScopeProps) => {
+  return (
+    <DialogOverlayContainerContext.Provider value={value}>
+      {children}
+    </DialogOverlayContainerContext.Provider>
+  );
+}

package/src_old/Dialog/index.ts

@@ -0,0 +1,2 @@
+export * from './Dialog';
+export * from './DialogOverlayScope'

package/src_old/Drawer/Drawer.tsx

@@ -0,0 +1,118 @@
+"use client"
+
+import * as React from "react"
+import { Drawer as DrawerPrimitive } from "vaul"
+
+import { cn } from "@oneplatformdev/utils";
+
+const Drawer = ({
+  shouldScaleBackground = true,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
+  <DrawerPrimitive.Root
+    shouldScaleBackground={shouldScaleBackground}
+    {...props}
+  />
+)
+Drawer.displayName = "Drawer"
+
+const DrawerTrigger = DrawerPrimitive.Trigger
+
+const DrawerPortal = DrawerPrimitive.Portal
+
+const DrawerClose = DrawerPrimitive.Close
+
+const DrawerOverlay = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Overlay
+    ref={ref}
+    className={cn("fixed inset-0 z-50 bg-black/80", className)}
+    {...props}
+  />
+))
+DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName
+
+const DrawerContent = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DrawerPortal>
+    <DrawerOverlay />
+    <DrawerPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
+        className
+      )}
+      {...props}
+    >
+      <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
+      {children}
+    </DrawerPrimitive.Content>
+  </DrawerPortal>
+))
+DrawerContent.displayName = "DrawerContent"
+
+const DrawerHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
+    {...props}
+  />
+)
+DrawerHeader.displayName = "DrawerHeader"
+
+const DrawerFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+    {...props}
+  />
+)
+DrawerFooter.displayName = "DrawerFooter"
+
+const DrawerTitle = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+DrawerTitle.displayName = DrawerPrimitive.Title.displayName
+
+const DrawerDescription = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+DrawerDescription.displayName = DrawerPrimitive.Description.displayName
+
+export {
+  Drawer,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+}

package/src_old/Drawer/index.ts

@@ -0,0 +1 @@
+export * from './Drawer';