react-masume-grid 0.1.0

package/dist/types.d.ts

@@ -0,0 +1,93 @@
+import { CSSProperties } from 'react';
+/** Cell values are plain strings. Formatting/parsing is up to the consumer. */
+export type CellValue = string;
+/**
+ * Cell type of a column. Values are always stored as strings; the type
+ * controls the editor UI, input normalization and display.
+ *
+ * - `text`   — free text (default)
+ * - `number` — right-aligned; input is normalized (full-width digits,
+ *              commas) and non-numeric input is rejected
+ * - `select` — dropdown backed by `options`; stores the option `value`
+ *              and displays its `label`
+ * - `date`   — native date picker; stored as `YYYY-MM-DD`; pasted text in
+ *              common formats (2024/1/5, 2024年1月5日, 20240105) is normalized
+ */
+export type ColumnType = 'text' | 'number' | 'select' | 'date';
+export interface SelectOption {
+    /** Stored in the data. */
+    value: string;
+    /** Shown in cells and in the dropdown. Defaults to `value`. */
+    label?: string;
+}
+export interface ColumnDef {
+    /** Cell type. Default: 'text'. */
+    type?: ColumnType;
+    /** Choices for a 'select' column (e.g. master data). */
+    options?: Array<string | SelectOption>;
+    /**
+     * For 'select' columns: reject values that are not in `options`.
+     * Default: true. Set false to allow free input alongside the dropdown.
+     */
+    strict?: boolean;
+    /** Header caption. Defaults to spreadsheet-style letters (A, B, C, …). */
+    title?: string;
+    /** Column width in pixels. Defaults to `defaultColumnWidth`. */
+    width?: number;
+    /** Disallow editing cells in this column. */
+    readOnly?: boolean;
+    /**
+     * Allow resizing this column by dragging its header edge.
+     * Overrides the grid-level `resizableColumns`.
+     */
+    resizable?: boolean;
+}
+export interface CellPos {
+    row: number;
+    col: number;
+}
+/** Inclusive, normalized rectangular range (top <= bottom, left <= right). */
+export interface NormalizedRange {
+    top: number;
+    left: number;
+    bottom: number;
+    right: number;
+}
+export interface MasumeGridProps {
+    /** Grid contents as a 2D array of strings. Rows may be ragged. */
+    data: CellValue[][];
+    /**
+     * Column definitions. When omitted, the column count is derived from the
+     * longest row in `data` and headers show A, B, C, …
+     */
+    columns?: ColumnDef[];
+    /** Called with a new 2D array whenever cells change (edit / paste / delete). */
+    onChange?: (next: CellValue[][]) => void;
+    /** Called once per changed cell. Can be used instead of (or with) `onChange`. */
+    onCellChange?: (row: number, col: number, value: CellValue) => void;
+    /** Called whenever the selection changes, with normalized ranges. */
+    onSelectionChange?: (ranges: NormalizedRange[]) => void;
+    /** Called when a column resize drag finishes, with the final width in pixels. */
+    onColumnResize?: (col: number, width: number) => void;
+    /** Show the row-number column. Default: true. */
+    showRowNumbers?: boolean;
+    /** Show the column header row. Default: true. */
+    showHeader?: boolean;
+    /** Disallow all editing (selection & copy still work). Default: false. */
+    readOnly?: boolean;
+    /**
+     * Allow column resizing by dragging header edges. Default: true.
+     * Requires `showHeader` (handles live in the header row).
+     */
+    resizableColumns?: boolean;
+    /** Row height in pixels. Default: 28. */
+    rowHeight?: number;
+    /** Header row height in pixels. Default: 28. */
+    headerHeight?: number;
+    /** Width of columns without an explicit width. Default: 120. */
+    defaultColumnWidth?: number;
+    /** Width of the row-number column. Default: 48. */
+    rowNumberWidth?: number;
+    className?: string;
+    style?: CSSProperties;
+}

package/dist/utils.d.ts

@@ -0,0 +1,34 @@
+import { CellPos, NormalizedRange } from './types';
+/** A selection range as the user built it: anchor (active cell) + focus (drag end). */
+export interface SelRange {
+    anchor: CellPos;
+    focus: CellPos;
+}
+export declare function clamp(n: number, min: number, max: number): number;
+/** 0 -> A, 25 -> Z, 26 -> AA, 701 -> ZZ, 702 -> AAA */
+export declare function colName(index: number): string;
+/** Prefix sums of column widths; result[i] is the x offset of column i, result[length] the total. */
+export declare function columnOffsets(widths: number[]): number[];
+export declare function normalizeRange(range: SelRange, rowCount: number, colCount: number): NormalizedRange;
+/** Convert full-width digits/signs/separators to their ASCII equivalents. */
+export declare function toHalfWidth(text: string): string;
+/**
+ * Normalize input for a number cell: full-width chars are converted and
+ * thousands separators removed. Returns the normalized string, '' for empty
+ * input, or null when the input is not a valid number.
+ */
+export declare function normalizeNumberInput(value: string): string | null;
+/**
+ * Normalize input for a date cell to ISO `YYYY-MM-DD`. Accepts
+ * YYYY-MM-DD, YYYY/M/D, YYYY.M.D, YYYY年M月D日 and YYYYMMDD (full-width ok).
+ * Returns '' for empty input, or null when the input is not a valid date.
+ */
+export declare function normalizeDateInput(value: string): string | null;
+/** Serialize a matrix to Excel-compatible TSV (cells with tabs/newlines/quotes get quoted). */
+export declare function matrixToTSV(matrix: string[][]): string;
+/**
+ * Parse clipboard text (TSV, Excel-compatible) into a matrix.
+ * Handles quoted cells containing tabs/newlines, doubled quotes, CRLF,
+ * and strips a single trailing newline (Excel appends one on copy).
+ */
+export declare function parseClipboardText(text: string): string[][];

package/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "react-masume-grid",
+  "version": "0.1.0",
+  "description": "MasumeGrid (マス目) — a lightweight React spreadsheet component with IME-friendly cell editing, cell types (text/number/select/date), range selection, and Excel-compatible clipboard support.",
+  "keywords": [
+    "react",
+    "spreadsheet",
+    "grid",
+    "datagrid",
+    "table",
+    "excel",
+    "ime",
+    "japanese"
+  ],
+  "license": "MIT",
+  "author": "t92345era",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/t92345era/react-masume-grid.git"
+  },
+  "homepage": "https://github.com/t92345era/react-masume-grid#readme",
+  "bugs": {
+    "url": "https://github.com/t92345era/react-masume-grid/issues"
+  },
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/masume-grid.cjs",
+  "module": "./dist/masume-grid.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/masume-grid.js",
+      "require": "./dist/masume-grid.cjs"
+    },
+    "./styles.css": "./dist/masume-grid.css"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "prepublishOnly": "npm run typecheck && npm run test && npm run build"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/react": "^16.3.0",
+    "@types/react": "^19.1.0",
+    "@types/react-dom": "^19.1.0",
+    "@vitejs/plugin-react": "^4.5.0",
+    "jsdom": "^26.1.0",
+    "puppeteer-core": "^25.3.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "typescript": "^5.8.3",
+    "vite": "^6.3.5",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^3.2.4"
+  }
+}