@paubox/ui 0.2.0 → 0.3.0

package/lib/Button/BaseButton.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties } from 'react';
+import { CSSProperties, MouseEventHandler } from 'react';
 
 export interface BaseButtonProps {
     color?: 'primary' | 'secondary' | 'danger';
@@ -6,7 +6,7 @@ export interface BaseButtonProps {
     size?: 'large' | 'small';
     round?: boolean;
     children: React.ReactNode;
-    onClick?: () => void;
+    onClick?: MouseEventHandler<HTMLButtonElement>;
     style?: CSSProperties;
 }
 declare const BaseButton: import('@emotion/styled').StyledComponent<{

package/lib/Checkbox/Checkbox.d.ts

@@ -0,0 +1,9 @@
+import { default as React, ChangeEvent } from 'react';
+
+interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
+    checked?: boolean;
+    indeterminate?: boolean;
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+}
+declare const Checkbox: ({ checked, indeterminate, onChange, ...props }: CheckboxProps) => JSX.Element;
+export default Checkbox;

package/lib/Pagination/Pagination.d.ts

@@ -0,0 +1,14 @@
+export interface PageInfo {
+    pageCount: number;
+    itemCount: number;
+    currentPage: number;
+    items: number;
+}
+interface PaginationProps {
+    pageInfo: PageInfo;
+    isLoading: boolean;
+    onPageSizeChange: (size: number) => void;
+    onPageChange: (page: number) => void;
+}
+declare const Pagination: ({ pageInfo, isLoading, onPageSizeChange, onPageChange, }: PaginationProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default Pagination;

package/lib/Table/Table.d.ts

@@ -0,0 +1,43 @@
+import { PageInfo } from '../Pagination/Pagination';
+import { ColumnDef, OnChangeFn, Row } from '@tanstack/react-table';
+
+export type TableColumn<T> = ColumnDef<T> & {
+    key: string;
+    header: string;
+    width?: number;
+    sortable?: boolean;
+};
+export interface TableSort {
+    id: string;
+    desc: boolean;
+}
+export interface RowSelectState {
+    [x: string]: boolean;
+}
+export interface RowAction<T> {
+    label: string;
+    onClick: (row: T) => void;
+    icon?: React.ReactNode;
+    disabled?: boolean | ((row: T) => boolean);
+    show?: (row: T) => boolean;
+}
+export interface TableProps<T extends object> {
+    height?: number;
+    data: T[];
+    columns: TableColumn<T>[];
+    pageInfo: PageInfo;
+    getRowId: (originalRow: T, index: number, parent?: Row<T> | undefined) => string;
+    isLoading?: boolean;
+    onPageSizeChange: (size: number) => void;
+    onPageChange: (page: number) => void;
+    sorting?: TableSort;
+    onSortChange?: (sorting: TableSort) => void;
+    enableRowSelection?: boolean;
+    selectedRows?: RowSelectState;
+    onRowSelectionChange?: OnChangeFn<RowSelectState>;
+    onRowClick?: (row: T) => void;
+    rowActions?: RowAction<T>[];
+    dense?: boolean;
+}
+declare const Table: <T extends object>({ height, data, pageInfo, columns, getRowId, isLoading, sorting, onPageSizeChange, onPageChange, onSortChange, enableRowSelection, selectedRows, onRowSelectionChange, onRowClick, rowActions, dense, }: TableProps<T>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export default Table;

package/lib/Table/tableComponents.d.ts

@@ -0,0 +1,72 @@
+import { RowAction } from './Table';
+import { Row } from '@tanstack/react-table';
+
+export declare const TableContainer: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const TableWrapper: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledTable: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+}, import('react').DetailedHTMLProps<import('react').TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, {}>;
+export declare const TableHeader: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Th: import('@emotion/styled').StyledComponent<{
+    variant: "headline100Regular" | "headline100Semibold" | "headline200Regular" | "headline200Semibold" | "headline300Regular" | "headline300Semibold" | "paragraph100Regular" | "paragraph100Semibold" | "paragraph200Regular" | "paragraph200Semibold" | "paragraph300Regular" | "paragraph300Medium" | "paragraph300Semibold" | "paragraph300Bold" | "button100Medium" | "button200Medium" | "label100Regular" | "label100Medium" | "label100Semibold" | "label200Regular" | "label200Medium" | "label200Semibold";
+    color?: "primary" | "secondary" | string;
+    css?: import('@emotion/utils').SerializedStyles;
+    as?: keyof import("react").JSX.IntrinsicElements;
+} & import('react').HTMLAttributes<HTMLDivElement> & {
+    theme?: import('@emotion/react').Theme;
+}, {}, {}>;
+export declare const Tr: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, {}>;
+export declare const Td: import('@emotion/styled').StyledComponent<{
+    variant: "headline100Regular" | "headline100Semibold" | "headline200Regular" | "headline200Semibold" | "headline300Regular" | "headline300Semibold" | "paragraph100Regular" | "paragraph100Semibold" | "paragraph200Regular" | "paragraph200Semibold" | "paragraph300Regular" | "paragraph300Medium" | "paragraph300Semibold" | "paragraph300Bold" | "button100Medium" | "button200Medium" | "label100Regular" | "label100Medium" | "label100Semibold" | "label200Regular" | "label200Medium" | "label200Semibold";
+    color?: "primary" | "secondary" | string;
+    css?: import('@emotion/utils').SerializedStyles;
+    as?: keyof import("react").JSX.IntrinsicElements;
+} & import('react').HTMLAttributes<HTMLDivElement> & {
+    theme?: import('@emotion/react').Theme;
+}, {}, {}>;
+export declare const HeaderContent: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ResizeHandle: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const SortIcon: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const LoadingOverlay: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ContextMenuButton: import('@emotion/styled').StyledComponent<import('../Button/Button').ButtonProps & import('react').RefAttributes<HTMLButtonElement> & {
+    theme?: import('@emotion/react').Theme;
+}, {}, {}>;
+export declare const MenuItem: import('@emotion/styled').StyledComponent<{
+    theme?: import('@emotion/react').Theme;
+    as?: React.ElementType;
+} & {
+    disabled?: boolean;
+}, import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+interface ContextMenuCellProps {
+    row: Row<any>;
+    setOpenMenuId: React.Dispatch<React.SetStateAction<string | null>>;
+    openMenuId: string | null;
+    rowActions: RowAction<any>[];
+}
+export declare const ContextMenuCell: ({ row, setOpenMenuId, openMenuId, rowActions, }: ContextMenuCellProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/package.json

@@ -2,7 +2,7 @@
   "name": "@paubox/ui",
   "author": "Paubox, Inc.",
   "description": "Paubox Component Library",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "main": "./index.js",
   "types": "./index.d.ts",
   "exports": {

package/icons/KeyboardArrowDown.d.ts

@@ -1,4 +0,0 @@
-import { IconProps } from './SvgProps';
-
-export declare const KeyboardArrowDown: (props: IconProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-export default KeyboardArrowDown;