caplink-saas-ui-shared-component-library 0.2.5 → 0.3.1

package/README.md

@@ -48,7 +48,11 @@ An expected component development workflow would be:
 We use Storybook to develop and test the components. To start the Storybook server, run:
 
 ```bash
-npm run storybook
+npm run sb:dev
+```
+
+```bash
+npm run sb:build
 ```
 
 This will start the Storybook server and open a browser window with the Storybook UI. You can use this to develop and test the components.

package/dist/components/spreadsheet/lib/date-formatter.d.ts

@@ -0,0 +1 @@
+export declare function dateFormatter(value: string): string | null;

package/dist/components/spreadsheet/lib/get-alphabet-columns.d.ts

@@ -0,0 +1 @@
+export declare function getAlphabetColumns(range: number): string[];

package/dist/components/spreadsheet/lib/get-text-width-by-font.d.ts

@@ -0,0 +1 @@
+export declare function getTextWidthByFont(text: string, font?: string): number;

package/dist/components/spreadsheet/lib/indexed-alphabet.d.ts

@@ -0,0 +1 @@
+export declare function indexedAlphabet(columns: number): string;

package/dist/components/spreadsheet/lib/normalize-value.d.ts

@@ -0,0 +1,5 @@
+import * as Spreadsheet from '../model/spreadsheet';
+export declare function normalizeValue(params: {
+    value: unknown;
+    dataEditorType: Spreadsheet.DataEditorType;
+}): unknown;

package/dist/components/spreadsheet/lib/one-line-string.d.ts

@@ -0,0 +1 @@
+export declare function oneLineString(value: string): boolean;

package/dist/components/spreadsheet/lib/text-overflow.d.ts

@@ -0,0 +1 @@
+export declare function textOverflow(text: string, maxWidth: number): boolean;

package/dist/components/spreadsheet/lib/use-spreadsheet.d.ts

@@ -0,0 +1 @@
+export declare function useSpreadsheet(): import('../model/spreadsheet').Context;

package/dist/components/spreadsheet/model/matrix.d.ts

@@ -0,0 +1,59 @@
+/** A cell cordinates in matrix */
+export type Point = {
+    row: number;
+    column: number;
+};
+/** Range between two points. */
+export type PointRange = {
+    /** The top-left point */
+    start: Point;
+    /** The bottom-right point */
+    end: Point;
+};
+/** Counts of the rows and column in a matrix */
+export type Size = {
+    /** Count of the rows in the matrix */
+    rows: number;
+    /** Count of the columns in the matrix */
+    columns: number;
+};
+export type Matrix<T> = Array<Array<T | undefined>>;
+/** Creates an empty matrix with given rows and columns */
+export declare function createEmpty<T>(size: Size, fill?: T): Matrix<T>;
+/** Gets the count of rows of given matrix */
+export declare function getRowsCount(matrix: Matrix<unknown>): number;
+/** Gets the count of columns of given matrix */
+export declare function getColumnsCount(matrix: Matrix<unknown>): number;
+/** Gets the count of rows and columns of given matrix */
+export declare function getSize(matrix: Matrix<unknown>): Size;
+/** Gets the value at row and column of matrix. */
+export declare function getPoint<T>(params: {
+    point: Point;
+    matrix: Matrix<T>;
+}): T | undefined;
+/** Checks if the source and target point are equal */
+export declare function isSamePoint(source: Point, target: Point): boolean;
+/** Returns whether given point exists in given range */
+export declare function hasPointInRange(pointRange: PointRange, point: Point): boolean;
+/** Determines whether all columns are selected */
+export declare function hasEntireColumns(params: {
+    matrix: Matrix<unknown>;
+    pointRange: PointRange;
+}): boolean;
+/** Determines which row is entirely selected in given selection */
+export declare function hasEntireRows(params: {
+    matrix: Matrix<unknown>;
+    pointRange: PointRange;
+    row: number;
+}): boolean;
+/** Converts string value into an matrix */
+export declare function parseString(value: string): Matrix<unknown>;
+/**
+ * Overlaps a given Matrix B (mB) starting in a specific point into a given Matrix A (mA)
+ * Matrix B (mB) always has priority when replacing cell values
+ */
+export declare function overlap(params: {
+    mA: Matrix<unknown>;
+    mB: Matrix<unknown>;
+    point: Point;
+}): Matrix<unknown>;

package/dist/components/spreadsheet/model/spreadsheet.d.ts

@@ -0,0 +1,167 @@
+import { MouseEvent, PropsWithChildren } from 'react';
+
+import type * as Matrix from '../model/matrix';
+export declare const COLUMN_TITLE_CONTAINER_PADDING_X = 16;
+export declare const COLUMN_TITLE_CONTAINER_GAP = 8;
+export declare const COLUMN_TITLE_ICON_WIDTH = 16;
+/** Spreadsheet column initial width */
+export declare const COLUMN_INITIAL_WIDTH: number;
+/** Spreadsheet column max width */
+export declare const COLUMN_MAX_WIDTH: number;
+/** Spreadsheet column min width */
+export declare const COLUMN_MIN_WIDTH: number;
+/** Spreadsheet column title single char length */
+export declare const COLUMN_TITLE_CHAR_LENGTH = 12;
+/** Spreadsheet column title initial height */
+export declare const COLUMN_TITLE_INITIAL_HEIGHT = 36;
+/** Spreadsheet cell initial height */
+export declare const CELL_INITIAL_HEIGHT = 26;
+export declare const NUMERIC_DATA_EDITOR_TYPES: readonly DataEditorType[];
+/** Dimensions of an element */
+export type Dimensions = {
+    /** The element's width in pixels */
+    width: number;
+    /** The element's height in pixels */
+    height: number;
+};
+/** Select component item props */
+export type SelectItem = {
+    text: string;
+    value: string;
+};
+/** The mode of the cell */
+export type Mode = 'edit' | 'readonly' | 'view';
+/** Cell data editor type */
+export type DataEditorType = 'Boolean' | 'String' | 'Select' | 'Date' | 'Integer' | 'Currency' | 'Float' | 'Decimal' | 'Percentage';
+export type DataEditor = {
+    mode: Mode;
+    /** Data editor current value */
+    value?: unknown;
+    /** Whether data editor data changes */
+    onChange?: ({ data, point }: {
+        data: unknown;
+        point?: Matrix.Point;
+    }) => void;
+    /** Whether user paste any value on data editor */
+    onPaste?: (point?: Matrix.Point) => void;
+    /** Whether user blur current data editor */
+    onBlur?: () => void;
+    /** Whether user clicks current data editor */
+    onClick?: <T>(e: MouseEvent<T>) => void;
+    /** Cell mode setter */
+    setMode?: (mode: Mode) => void;
+    selected?: boolean;
+    column: Column;
+    width: number;
+    coordinates: Matrix.Point;
+};
+export type DataViewer = {
+    width: number;
+    mode: Mode;
+    /** Data viewer current value */
+    value?: unknown;
+    column: Column;
+    coordinates: Matrix.Point;
+    selected?: boolean;
+};
+export type ColumnState = {
+    /** Whether column is readonly to user */
+    readonly?: boolean;
+    /** Whether column is visible to user */
+    visible?: boolean;
+    /** Column width in px */
+    width: number;
+};
+export type ColumnSettings = {
+    select?: {
+        items: Array<SelectItem>;
+    };
+    numeric?: {
+        min?: number;
+        max?: number;
+        allowNegative?: boolean;
+        roundingRule?: string;
+        decimalScale?: number;
+        currency?: string;
+    };
+    string?: {
+        maskData?: string;
+        maskVisible?: boolean;
+        charLimit?: number;
+    };
+};
+/** Spreadsheet column meta data and settings */
+export type Column = {
+    /** Column identifier */
+    id: string;
+    /** Column name to be displayed */
+    name: string;
+    /** Column tooltip description */
+    description?: string;
+    /** Column position */
+    position: number;
+    /** Column data editor type */
+    dataEditorType: DataEditorType;
+    /** Alphabet letter by position */
+    alphabetLetter?: string;
+    /** Column element states  */
+    state: ColumnState;
+    /** Column settings  */
+    settings?: ColumnSettings;
+};
+/** Initial column params before spreadsheet internal setup */
+export type InitialColumn = Pick<Column, Exclude<keyof Column, 'alphabetLetter' | 'position' | 'width'>>;
+/** Spreadsheet Cell component */
+export type Cell = {
+    /** The cell value */
+    value?: unknown;
+    /** Point coordinates of the cell */
+    coordinates: Matrix.Point;
+    width: number;
+};
+export type Props = {
+    matrix: Matrix.Matrix<unknown>;
+    onMatrixChange?: (matrix: Matrix.Matrix<unknown>) => void;
+    startingColumns: InitialColumn[];
+    /** Defines if user can add or delete rows */
+    staticRows?: boolean;
+    className?: string;
+};
+export type Context = {
+    size: Matrix.Size;
+    matrix: Matrix.Matrix<unknown>;
+    columns: Column[];
+    emptySize: boolean;
+    /** Defines if user can add or delete rows */
+    staticRows?: boolean;
+    hasSomeEntireRow?: boolean;
+    /** Whether last row is highlighted */
+    highlightLastRow?: boolean;
+    pointRange: Matrix.PointRange | null;
+    setPointRange: (pointRange: Matrix.PointRange | null) => void;
+    containerDimensions: Dimensions;
+    setContainerDimensions: (dimensions: Dimensions) => void;
+    onPaste: (point: Matrix.Point) => void;
+    onChange: (params: {
+        data: unknown;
+        point: Matrix.Point;
+    }) => void;
+    onRemoveRow: () => void;
+    onSelectRow: (row: number, event?: MouseEvent) => void;
+    onSelectCell: (point: Matrix.Point) => void;
+    isCellSelected: (point: Matrix.Point) => boolean;
+    onInsertNewRow: () => void;
+    onColumnResize: (params: {
+        width: number;
+        position: number;
+    }) => void;
+    onSelectSpreadsheet: () => void;
+    onColumnVisibilityChange: (params: {
+        columnId: string;
+        visible?: boolean;
+    }) => void;
+    onRestoreColumnsVisibility: () => void;
+};
+export type ContextProvider = Omit<PropsWithChildren<Props>, 'className'>;
+/** Spreadsheet columns internal states and values setup function */
+export declare function setupColumns(columns: InitialColumn[]): Column[];

package/dist/components/spreadsheet/ui/cell.d.ts

@@ -0,0 +1,2 @@
+import * as Spreadsheet from '../model/spreadsheet';
+export declare function Cell(props: Spreadsheet.Cell): import("react/jsx-runtime").JSX.Element;

package/dist/components/spreadsheet/ui/containers/index.d.ts

@@ -0,0 +1,7 @@
+import { Matrix } from './matrix';
+import { Root } from './root';
+
+export declare const Container: {
+    Matrix: typeof Matrix;
+    Root: typeof Root;
+};

package/dist/components/spreadsheet/ui/containers/matrix.d.ts

@@ -0,0 +1,7 @@
+import { PropsWithChildren } from 'react';
+
+type MatrixProps = PropsWithChildren<{
+    className?: string;
+}>;
+export declare function Matrix(props: MatrixProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/spreadsheet/ui/containers/root.d.ts

@@ -0,0 +1,7 @@
+import { PropsWithChildren } from 'react';
+
+type RootProps = PropsWithChildren<{
+    className?: string;
+}>;
+export declare function Root(props: RootProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/spreadsheet/ui/context.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import * as Spreadsheet from '../model/spreadsheet';
+export declare const SpreadsheetContext: import('react').Context<Spreadsheet.Context | null>;
+export declare function SpreadsheetContextProvider(props: Spreadsheet.ContextProvider): import("react/jsx-runtime").JSX.Element;

package/dist/components/spreadsheet/ui/data-editor/boolean.d.ts

@@ -0,0 +1,3 @@
+import type * as Spreadsheet from '../../model/spreadsheet';
+export declare function BooleanDataEditor(props: Spreadsheet.DataEditor): import("react/jsx-runtime").JSX.Element;
+export declare function BooleanDataViewer(params: Spreadsheet.DataViewer): import("react/jsx-runtime").JSX.Element;

package/dist/components/spreadsheet/ui/data-editor/date.d.ts

@@ -0,0 +1,3 @@
+import type * as Spreadsheet from '../../model/spreadsheet';
+export declare function DateDataEditor(props: Spreadsheet.DataEditor): import("react/jsx-runtime").JSX.Element;
+export declare function DateDataViewer(props: Spreadsheet.DataViewer): import("react/jsx-runtime").JSX.Element;

package/dist/components/spreadsheet/ui/data-editor/index.d.ts

@@ -0,0 +1,20 @@
+import { BooleanDataEditor, BooleanDataViewer } from './boolean';
+import { DateDataEditor, DateDataViewer } from './date';
+import { NumericDataViewer, NumericEditor } from './numeric';
+import { SelectDataEditor, SelectDataViewer } from './select';
+import { TextDataEditor, TextDataViewer } from './text';
+
+export declare const DataEditor: {
+    Date: typeof DateDataEditor;
+    Text: typeof TextDataEditor;
+    Boolean: typeof BooleanDataEditor;
+    Numeric: typeof NumericEditor;
+    Select: typeof SelectDataEditor;
+};
+export declare const DataViewer: {
+    Date: typeof DateDataViewer;
+    Text: typeof TextDataViewer;
+    Boolean: typeof BooleanDataViewer;
+    Numeric: typeof NumericDataViewer;
+    Select: typeof SelectDataViewer;
+};

package/dist/components/spreadsheet/ui/data-editor/numeric.d.ts

@@ -0,0 +1,3 @@
+import type * as Spreadsheet from '../../model/spreadsheet';
+export declare function NumericEditor(props: Spreadsheet.DataEditor): import("react/jsx-runtime").JSX.Element;
+export declare function NumericDataViewer(props: Spreadsheet.DataViewer): import("react/jsx-runtime").JSX.Element;

package/dist/components/spreadsheet/ui/data-editor/select.d.ts

@@ -0,0 +1,7 @@
+import type * as Spreadsheet from '../../model/spreadsheet';
+export declare function SelectDataEditor(props: {
+    items: Array<Spreadsheet.SelectItem>;
+} & Spreadsheet.DataEditor): import("react/jsx-runtime").JSX.Element;
+export declare function SelectDataViewer(props: {
+    items: Array<Spreadsheet.SelectItem>;
+} & Spreadsheet.DataViewer): import("react/jsx-runtime").JSX.Element;

package/dist/components/spreadsheet/ui/data-editor/text.d.ts

@@ -0,0 +1,3 @@
+import * as Spreadsheet from '../../model/spreadsheet';
+export declare function TextDataEditor(props: Spreadsheet.DataEditor): import("react/jsx-runtime").JSX.Element;
+export declare function TextDataViewer(props: Spreadsheet.DataViewer): import("react/jsx-runtime").JSX.Element;

package/dist/components/spreadsheet/ui/header.d.ts

@@ -0,0 +1 @@
+export declare function Header(): import("react/jsx-runtime").JSX.Element;

package/dist/components/spreadsheet/ui/icons/add-row-icon.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from 'react';
+
+export declare function AddRowIcon(props: SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;

package/dist/components/spreadsheet/ui/icons/integer-icon.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from 'react';
+
+export declare function IntegerIcon(props: SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;

package/dist/components/spreadsheet/ui/icons/remove-row-icon.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from 'react';
+
+export declare function RemoveRowIcon(props: SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;

package/dist/components/spreadsheet/ui/index.d.ts

@@ -0,0 +1,3 @@
+import { Props } from '../model/spreadsheet';
+
+export declare function Spreadsheet(props: Props): import("react/jsx-runtime").JSX.Element;

package/dist/components/spreadsheet/ui/indicators/column-indicator.d.ts

@@ -0,0 +1,11 @@
+import { PropsWithChildren } from 'react';
+
+import * as Spreadsheet from '../../model/spreadsheet';
+type ColumnIndicatorProps = PropsWithChildren<{
+    className?: string;
+    column: Spreadsheet.Column;
+    visible?: boolean;
+    width: number;
+}>;
+export declare function ColumnIndicator(props: ColumnIndicatorProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/spreadsheet/ui/indicators/column-title-indicator.d.ts

@@ -0,0 +1,9 @@
+import * as Spreadsheet from '../../model/spreadsheet';
+type ColumnTitleIndicatorProps = {
+    className?: string;
+    column: Spreadsheet.Column;
+    width: number;
+    visible?: boolean;
+};
+export declare function ColumnTitleIndicator({ column, width, visible }: ColumnTitleIndicatorProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/spreadsheet/ui/indicators/corner-indicator.d.ts

@@ -0,0 +1,3 @@
+export declare function CornerIndicator({ className }: {
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/spreadsheet/ui/indicators/drag-indicator.d.ts

@@ -0,0 +1,10 @@
+import { DragEvent } from 'react';
+
+type DragIndicatorProps = {
+    onDragStart?: (e: DragEvent<HTMLButtonElement>) => void;
+    onDrag?: (e: DragEvent<HTMLButtonElement>) => void;
+    onDragEnd?: (e: DragEvent<HTMLButtonElement>) => void;
+    className?: string;
+};
+export declare function DragIndicator(props: DragIndicatorProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/spreadsheet/ui/indicators/row-indicator.d.ts

@@ -0,0 +1,3 @@
+export declare function RowIndicator({ row }: {
+    row: number;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/spreadsheet/ui/rows.d.ts

@@ -0,0 +1 @@
+export declare function Rows(): import("react/jsx-runtime").JSX.Element;

package/dist/components/spreadsheet/ui/start.d.ts

@@ -0,0 +1,3 @@
+export declare function Start({ className }: {
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/spreadsheet/ui/toolbar.d.ts

@@ -0,0 +1 @@
+export declare function Toolbar(): import("react/jsx-runtime").JSX.Element;

package/dist/components/tmp/numeric.d.ts

@@ -0,0 +1,25 @@
+import { ClipboardEvent, FocusEvent, MouseEvent } from 'react';
+import { Column, DataEditorType } from '../spreadsheet/model/spreadsheet';
+
+export type NumericFieldProps = {
+    value?: string;
+    onChange?: (value?: string | number) => void;
+    onBlur?: () => void;
+    onFocus?: (e: FocusEvent<HTMLInputElement>) => void;
+    onClick?: (e: MouseEvent<HTMLInputElement>) => void;
+    onPaste?: (e: ClipboardEvent<HTMLInputElement>) => void;
+    tabIndex?: number;
+    dataEditorType: DataEditorType;
+    settings?: Partial<Column['settings']>;
+    disabled?: boolean;
+    testid?: string;
+    className?: string;
+    dataCypress?: string;
+};
+export declare const percentageRatio = 100;
+export declare const percentageScaleToBeDisregarded = 2;
+export declare function getDecimalScale(params: {
+    dataEditorType: DataEditorType;
+    decimalScale?: number;
+}): number | undefined;
+export declare const NumericField: import('react').ForwardRefExoticComponent<NumericFieldProps & import('react').RefAttributes<HTMLInputElement>>;

package/dist/index.d.ts

@@ -1,77 +1,7 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Spreadsheet } from './components/spreadsheet/ui';
+import { MatrixTypes, SpreadsheetTypes } from './types';
 
-type Matrix<T> = Array<Array<T | undefined>>;
-
-declare namespace MatrixConverter {
-    type Input = {
-        columns: Column[];
-        matrix: Matrix<unknown>;
-    };
-    type Output = {
-        value: unknown;
-        dataEditorType: DataEditorType;
-        convertedValue?: {
-            Boolean?: boolean;
-            Integer?: number;
-            Currency?: number;
-            Decimal?: number;
-            Float?: number;
-            Percentage?: number;
-            Date?: number;
-            Select?: string;
-        };
-    };
-}
-
-type SelectItem = {
-    text: string;
-    value: string;
-};
-type DataEditorType = 'Boolean' | 'String' | 'Select' | 'Date' | 'Integer' | 'Currency' | 'Float' | 'Decimal' | 'Percentage';
-type Column = {
-    id: string;
-    name: string;
-    description?: string;
-    width: number;
-    visible?: boolean;
-    position: number;
-    dataEditorType: DataEditorType;
-    alphabetLetter?: string;
-    readonly?: boolean;
-    settings?: {
-        select?: {
-            items: Array<SelectItem>;
-        };
-        numeric?: {
-            min?: number;
-            max?: number;
-            allowNegative?: boolean;
-            roundingRule?: string;
-            decimalPlaces?: number;
-            currency?: string;
-        };
-        string?: {
-            maskData?: string;
-            maskVisible?: boolean;
-            charLimit?: string;
-        };
-    };
-};
-type InitialColumn = Pick<Column, Exclude<keyof Column, 'id' | 'alphabetLetter' | 'position' | 'width'>> & {
-    width?: number;
-};
-type Props = {
-    matrix: Matrix<unknown>;
-    onMatrixChange?: (matrix: MatrixConverter.Output[][]) => void;
-    startingColumns: InitialColumn[];
-    staticRows?: boolean;
-    className?: string;
-};
-
-declare function Spreadsheet(props: Props): react_jsx_runtime.JSX.Element;
-
-declare const CapLink: {
+export declare const CapLink: {
     Spreadsheet: typeof Spreadsheet;
 };
-
-export { CapLink };
+export type { MatrixTypes, SpreadsheetTypes };