@oneplatformdev/ui 0.1.0-8 → 0.1.9-2

package/src_old/DataTable/DataTable.tsx

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

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

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

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

package/src_old/DataTable/useDataTable.ts

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

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

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

package/src_old/DatePicker/index.tsx

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

package/src_old/Dialog/Dialog.tsx

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

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

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

package/src_old/Drawer/Drawer.tsx

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

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