@youp-grid/react 0.1.0

package/dist/types.d.ts

@@ -0,0 +1,122 @@
+import type { AggregationRule, ColumnDef, ColumnPin, CursorPaginationState, GridRowId, GridRowModelType, GridState, RemoteCacheState, ResolvedColumnDef, RowModel, RowGroupingState, RowNode } from "@youp-grid/core";
+import type { CSSProperties, MouseEvent as ReactMouseEvent, ReactNode } from "react";
+export type YoupGridStateChange<TRow> = {
+    state: GridState;
+    rowModel: RowModel<TRow>;
+};
+export type YoupGridCellValueChange<TRow> = {
+    row: TRow;
+    rowId: GridRowId;
+    rowIndex: number;
+    column: ResolvedColumnDef<TRow>;
+    columnId: string;
+    value: unknown;
+    previousValue: unknown;
+    source: YoupGridCellValueChangeSource;
+};
+export type YoupGridCellValueChangeSource = "edit" | "paste" | "fill" | "undo" | "redo";
+export type YoupGridDensity = "compact" | "standard" | "comfortable";
+export type YoupGridRowEvent<TRow> = {
+    row: TRow;
+    rowNode: RowNode<TRow>;
+    rowId: GridRowId;
+    rowIndex: number;
+    event: ReactMouseEvent<HTMLDivElement>;
+};
+export type YoupGridRowsEndReachedEvent<TRow> = {
+    state: GridState;
+    rowModel: RowModel<TRow>;
+    rowCount: number;
+    lastVisibleRowIndex: number;
+    threshold: number;
+    remainingRows: number;
+};
+export type YoupGridOptions<TRow> = {
+    rows: readonly TRow[];
+    columns: readonly ColumnDef<TRow>[];
+    state?: GridState;
+    defaultState?: GridState;
+    onStateChange?: (change: YoupGridStateChange<TRow>) => void;
+    getRowId?: (row: TRow, index: number) => GridRowId;
+    rowModelType?: GridRowModelType;
+    serverRowCount?: number;
+    serverFilteredRowCount?: number;
+    rowHeight?: number;
+    overscan?: number;
+    infiniteScroll?: boolean;
+    infiniteScrollThreshold?: number;
+    infiniteScrollLoading?: boolean;
+    hasMoreRows?: boolean;
+};
+export type YoupGridController<TRow> = {
+    state: GridState;
+    rowModel: RowModel<TRow>;
+    setState: (state: GridState) => void;
+    toggleSort: (columnId: string, multi?: boolean) => void;
+    setSort: (columnId: string, direction: "asc" | "desc", multi?: boolean) => void;
+    clearSort: (columnId: string) => void;
+    setFilter: (columnId: string, value: unknown) => void;
+    clearFilter: (columnId: string) => void;
+    setPage: (pageIndex: number) => void;
+    setPageSize: (pageSize: number) => void;
+    setCursorPage: (cursor: string | undefined) => void;
+    setCursorPageSize: (pageSize: number) => void;
+    setCursorPagination: (cursorPagination: CursorPaginationState) => void;
+    setAggregation: (aggregation: readonly AggregationRule[]) => void;
+    setRowGrouping: (rowGrouping: RowGroupingState | undefined) => void;
+    toggleRowGroupExpanded: (groupId: string) => void;
+    startRemoteRequest: (requestId: string) => void;
+    finishRemoteRequest: (requestId: string) => void;
+    failRemoteRequest: (requestId: string, error?: string) => void;
+    cancelRemoteRequest: (requestId?: string) => void;
+    setRemoteCache: (remoteCache: RemoteCacheState) => void;
+    invalidateRemoteCache: (key?: string) => void;
+    acknowledgeRemoteCache: (key?: string) => void;
+    setColumnHidden: (columnId: string, hidden: boolean) => void;
+    setColumnPinned: (columnId: string, pinned: ColumnPin | undefined) => void;
+    setColumnWidth: (columnId: string, width: number) => void;
+    setRowSelected: (rowId: GridRowId, selected: boolean) => void;
+    setSelectedRows: (rowIds: readonly GridRowId[]) => void;
+    toggleRowSelected: (rowId: GridRowId) => void;
+};
+export type YoupGridProps<TRow> = YoupGridOptions<TRow> & {
+    className?: string;
+    style?: CSSProperties;
+    height?: number | string;
+    editable?: boolean;
+    showColumnChooser?: boolean;
+    showColumnMenu?: boolean;
+    showCsvExport?: boolean;
+    showDensityControl?: boolean;
+    showFilters?: boolean;
+    showAggregationFooter?: boolean;
+    showPagination?: boolean;
+    showRowSelectionColumn?: boolean;
+    csvFileName?: string;
+    density?: YoupGridDensity;
+    defaultDensity?: YoupGridDensity;
+    onDensityChange?: (density: YoupGridDensity) => void;
+    loading?: boolean;
+    loadingContent?: ReactNode;
+    error?: boolean;
+    errorContent?: ReactNode;
+    renderCell?: (context: YoupGridCellContext<TRow>) => ReactNode;
+    renderHeader?: (context: YoupGridHeaderContext<TRow>) => ReactNode;
+    onCellValueChange?: (change: YoupGridCellValueChange<TRow>) => void;
+    onRowClick?: (event: YoupGridRowEvent<TRow>) => void;
+    onRowDoubleClick?: (event: YoupGridRowEvent<TRow>) => void;
+    onRowsEndReached?: (event: YoupGridRowsEndReachedEvent<TRow>) => void;
+    emptyContent?: ReactNode;
+};
+export type YoupGridCellContext<TRow> = {
+    row: RowNode<TRow>;
+    column: ResolvedColumnDef<TRow>;
+    value: unknown;
+    editing: boolean;
+    focused: boolean;
+};
+export type YoupGridHeaderContext<TRow> = {
+    column: ResolvedColumnDef<TRow>;
+    sorted: "asc" | "desc" | undefined;
+    toggleSort: () => void;
+};

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/dist/useYoupGrid.d.ts

@@ -0,0 +1,2 @@
+import type { YoupGridController, YoupGridOptions } from "./types.ts";
+export declare function useYoupGrid<TRow>(options: YoupGridOptions<TRow>): YoupGridController<TRow>;

package/dist/useYoupGrid.js

@@ -0,0 +1,97 @@
+import { acknowledgeRemoteCache as acknowledgeCoreRemoteCache, buildRowModel, cancelRemoteRequest as cancelCoreRemoteRequest, clearFilter as clearCoreFilter, clearSort as clearCoreSort, createGridState, failRemoteRequest as failCoreRemoteRequest, finishRemoteRequest as finishCoreRemoteRequest, invalidateRemoteCache as invalidateCoreRemoteCache, setColumnHidden as setCoreColumnHidden, setColumnPinned as setCoreColumnPinned, setColumnWidth as setCoreColumnWidth, setCursorPage as setCoreCursorPage, setCursorPageSize as setCoreCursorPageSize, setCursorPagination as setCoreCursorPagination, setAggregation as setCoreAggregation, setFilter as setCoreFilter, setPagination, setRemoteCache as setCoreRemoteCache, setRowGrouping as setCoreRowGrouping, setRowSelected as setCoreRowSelected, setSelectedRows as setCoreSelectedRows, setSort as setCoreSort, startRemoteRequest as startCoreRemoteRequest, toggleRowGroupExpanded as toggleCoreRowGroupExpanded, toggleRowSelected as toggleCoreRowSelected, toggleSort as toggleCoreSort, } from "@youp-grid/core";
+import { useCallback, useMemo, useState } from "react";
+export function useYoupGrid(options) {
+    const isControlled = options.state !== undefined;
+    const [internalState, setInternalState] = useState(() => {
+        return createGridState(options.defaultState);
+    });
+    const state = isControlled ? createGridState(options.state) : internalState;
+    const rowModel = useMemo(() => {
+        return buildRowModel({
+            rows: options.rows,
+            columns: options.columns,
+            state,
+            getRowId: options.getRowId,
+            rowModelType: options.rowModelType,
+            serverRowCount: options.serverRowCount,
+            serverFilteredRowCount: options.serverFilteredRowCount,
+        });
+    }, [
+        options.rows,
+        options.columns,
+        options.getRowId,
+        options.rowModelType,
+        options.serverRowCount,
+        options.serverFilteredRowCount,
+        state,
+    ]);
+    const commitState = useCallback((nextState) => {
+        const nextRowModel = buildRowModel({
+            rows: options.rows,
+            columns: options.columns,
+            state: nextState,
+            getRowId: options.getRowId,
+            rowModelType: options.rowModelType,
+            serverRowCount: options.serverRowCount,
+            serverFilteredRowCount: options.serverFilteredRowCount,
+        });
+        if (!isControlled) {
+            setInternalState(nextState);
+        }
+        options.onStateChange?.({
+            state: nextState,
+            rowModel: nextRowModel,
+        });
+    }, [isControlled, options]);
+    const setPage = useCallback((pageIndex) => {
+        commitState(setPagination(state, {
+            pageIndex,
+            pageSize: state.pagination?.pageSize ?? 50,
+        }));
+    }, [commitState, state]);
+    const setPageSize = useCallback((pageSize) => {
+        commitState(setPagination(state, {
+            pageIndex: 0,
+            pageSize,
+        }));
+    }, [commitState, state]);
+    return {
+        state,
+        rowModel,
+        setState: commitState,
+        toggleSort: (columnId, multi) => commitState(toggleCoreSort(state, columnId, { multi })),
+        setSort: (columnId, direction, multi) => commitState(setCoreSort(state, columnId, direction, { multi })),
+        clearSort: (columnId) => commitState(clearCoreSort(state, columnId)),
+        setFilter: (columnId, value) => {
+            commitState(setCoreFilter(state, { columnId, operator: "contains", value }));
+        },
+        clearFilter: (columnId) => commitState(clearCoreFilter(state, columnId)),
+        setPage,
+        setPageSize,
+        setCursorPage: (cursor) => commitState(setCoreCursorPage(state, cursor)),
+        setCursorPageSize: (pageSize) => commitState(setCoreCursorPageSize(state, pageSize)),
+        setCursorPagination: (cursorPagination) => commitState(setCoreCursorPagination(state, cursorPagination)),
+        setAggregation: (aggregation) => commitState(setCoreAggregation(state, aggregation)),
+        setRowGrouping: (rowGrouping) => commitState(setCoreRowGrouping(state, rowGrouping)),
+        toggleRowGroupExpanded: (groupId) => commitState(toggleCoreRowGroupExpanded(state, groupId)),
+        startRemoteRequest: (requestId) => commitState(startCoreRemoteRequest(state, requestId)),
+        finishRemoteRequest: (requestId) => commitState(finishCoreRemoteRequest(state, requestId)),
+        failRemoteRequest: (requestId, error) => commitState(failCoreRemoteRequest(state, requestId, error)),
+        cancelRemoteRequest: (requestId) => commitState(cancelCoreRemoteRequest(state, requestId)),
+        setRemoteCache: (remoteCache) => commitState(setCoreRemoteCache(state, remoteCache)),
+        invalidateRemoteCache: (key) => commitState(invalidateCoreRemoteCache(state, key)),
+        acknowledgeRemoteCache: (key) => commitState(acknowledgeCoreRemoteCache(state, key)),
+        setColumnHidden: (columnId, hidden) => {
+            commitState(setCoreColumnHidden(state, columnId, hidden));
+        },
+        setColumnPinned: (columnId, pinned) => {
+            commitState(setCoreColumnPinned(state, columnId, pinned));
+        },
+        setColumnWidth: (columnId, width) => {
+            commitState(setCoreColumnWidth(state, columnId, width));
+        },
+        setRowSelected: (rowId, selected) => commitState(setCoreRowSelected(state, rowId, selected)),
+        setSelectedRows: (rowIds) => commitState(setCoreSelectedRows(state, rowIds)),
+        toggleRowSelected: (rowId) => commitState(toggleCoreRowSelected(state, rowId)),
+    };
+}

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@youp-grid/react",
+  "version": "0.1.0",
+  "description": "React adapter for Youp Grid.",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com/SeungyoupBaek/youp-grid.git",
+    "directory": "packages/react"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json && cp src/styles.css dist/styles.css"
+  },
+  "dependencies": {
+    "@youp-grid/core": "0.1.0"
+  },
+  "peerDependencies": {
+    "react": ">=18.2.0"
+  }
+}