pixel-react 1.1.8 → 1.1.9

package/lib/components/ExcelFile/ExcelFile/Excel/selection.d.ts

@@ -0,0 +1,95 @@
+import { PointRange } from "./point-range";
+import * as Point from "./point";
+import * as Matrix from "./matrix";
+/** Selection from a spreadsheet */
+export declare abstract class Selection {
+    /** Get concrete range of the selection in the given data */
+    abstract toRange(data: Matrix.Matrix<unknown>): PointRange | null;
+    /** Normalize the selection according to the given data */
+    abstract normalizeTo(data: Matrix.Matrix<unknown>): this;
+    /** Determines whether the given row is entirely selected in given selection */
+    abstract hasEntireRow(row: number): boolean;
+    /** Determines whether the given column is entirely selected in given selection */
+    abstract hasEntireColumn(column: number): boolean;
+    /** Get the number of selected points according to given data */
+    abstract size(data: Matrix.Matrix<unknown>): number;
+    /** Determines whether the given point is within the selection */
+    abstract has(data: Matrix.Matrix<unknown>, point: Point.Point): boolean;
+    /** Determines whether the given selection is equal to this selection */
+    abstract equals(selection: Selection): boolean;
+}
+/** Selection of no cells */
+export declare class EmptySelection extends Selection {
+    toRange(data: Matrix.Matrix<unknown>): PointRange | null;
+    normalizeTo(_: Matrix.Matrix<unknown>): this;
+    hasEntireRow(): boolean;
+    hasEntireColumn(): boolean;
+    size(): number;
+    has(): boolean;
+    equals(selection: Selection): boolean;
+}
+/** Selection of a range of cells */
+export declare class RangeSelection extends Selection {
+    range: PointRange;
+    constructor(range: PointRange);
+    toRange(_: Matrix.Matrix<unknown>): PointRange | null;
+    normalizeTo(data: Matrix.Matrix<unknown>): this;
+    hasEntireRow(): boolean;
+    hasEntireColumn(): boolean;
+    size(data: Matrix.Matrix<unknown>): number;
+    has(data: Matrix.Matrix<unknown>, point: Point.Point): boolean;
+    equals(selection: Selection): boolean;
+}
+/** Selection of an entire part of the spreadsheet */
+export declare abstract class EntireSelection extends Selection {
+}
+/** Selection of the entire worksheet */
+export declare class EntireWorksheetSelection extends EntireSelection {
+    toRange(data: Matrix.Matrix<unknown>): PointRange;
+    normalizeTo(): this;
+    hasEntireColumn(): boolean;
+    hasEntireRow(): boolean;
+    size(data: Matrix.Matrix<unknown>): number;
+    has(): boolean;
+    equals(selection: Selection): boolean;
+}
+/** Selection of an entire axis in the spreadsheet */
+export declare abstract class EntireAxisSelection extends EntireSelection {
+    /** Selection start index, integer */
+    readonly start: number;
+    /** Selection end index, integer */
+    readonly end: number;
+    /**
+     * @param start - row index where the selection starts, integer
+     * @param end - row index where the selection ends, integer
+     * @throws {@link InvalidIndexError}
+     */
+    constructor(start: number, end: number);
+    equals(selection: Selection): boolean;
+}
+/** Selection of entire rows in the spreadsheet */
+export declare class EntireRowsSelection extends EntireAxisSelection {
+    toRange(data: Matrix.Matrix<unknown>): PointRange;
+    normalizeTo(data: Matrix.Matrix<unknown>): this;
+    hasEntireRow(row: number): boolean;
+    hasEntireColumn(): boolean;
+    size(data: Matrix.Matrix<unknown>): number;
+    has(_: Matrix.Matrix<unknown>, point: Point.Point): boolean;
+}
+/** Selection of entire columns in the spreadsheet */
+export declare class EntireColumnsSelection extends EntireAxisSelection {
+    toRange(data: Matrix.Matrix<unknown>): PointRange;
+    normalizeTo(data: Matrix.Matrix<unknown>): this;
+    hasEntireRow(): boolean;
+    hasEntireColumn(column: number): boolean;
+    size(data: Matrix.Matrix<unknown>): number;
+    has(_: Matrix.Matrix<unknown>, point: Point.Point): boolean;
+}
+/** Get the point range of given matrix */
+export declare function getMatrixRange(data: Matrix.Matrix<unknown>): PointRange;
+/** Determines whether the given value is a valid index */
+export declare function isIndex(value: number): boolean;
+/** Error thrown when passing a non-index value where an index value is expected */
+export declare class InvalidIndexError extends Error {
+    constructor(name: string);
+}

package/lib/components/ExcelFile/ExcelFile/Excel/types.d.ts

@@ -0,0 +1,215 @@
+import * as React from "react";
+import FormulaParser from "fast-formula-parser";
+import { Point } from "./point";
+import { Selection } from "./selection";
+import { Model } from "./engine";
+import { PointRange } from "./point-range";
+import { Matrix } from "./matrix";
+/** The base type of cell data in Spreadsheet */
+export type CellBase<Value = any> = {
+    /** Whether the cell should not be editable */
+    readOnly?: boolean;
+    /** Class to be given for the cell element */
+    className?: string;
+    /** The value of the cell */
+    value: Value;
+    style?: CellStyle;
+    type?: boolean;
+    /** Custom component to render when the cell is edited, if not defined would default to the component defined for the Spreadsheet */
+    DataEditor?: DataEditorComponent<CellBase<Value>>;
+    /** Custom component to render when the cell is viewed, if not defined would default to the component defined for the Spreadsheet */
+    DataViewer?: DataViewerComponent<CellBase<Value>>;
+};
+interface CellStyle {
+    /** Font name for the cell text */
+    name?: string;
+    /** Font size of the cell text */
+    size?: number;
+    position?: string;
+    /** Whether the text is bold */
+    bold?: boolean;
+    /** Whether the text is italicized */
+    italic?: boolean;
+    /** Text color in the cell (hex code) */
+    color?: string;
+    /** Background color of the cell (hex code) */
+    backgroundColor?: string;
+    /** Border color of the cell (hex code) */
+    borderColor?: string;
+    /** Border styles for each side of the cell */
+    border?: {
+        /** Border style for the top side of the cell */
+        top: string;
+        /** Border style for the bottom side of the cell */
+        bottom: string;
+        /** Border style for the left side of the cell */
+        left: string;
+        /** Border style for the right side of the cell */
+        right: string;
+    };
+    /** Text alignment and wrapping properties */
+    alignment?: {
+        /** Horizontal text alignment ('left', 'center', or 'right') */
+        horizontal: string;
+        /** Vertical text alignment ('top', 'middle', or 'bottom') */
+        vertical: string;
+        /** Whether the text is wrapped within the cell */
+        wrapText: boolean;
+    };
+}
+/**
+ * A cell with it's coordinates
+ * @deprecated the component does not use cell descriptors anymore. Instead it passes cell point and cell value explicitly.
+ */
+export type CellDescriptor<Cell extends CellBase> = {
+    /** The cell's data */
+    data: Cell | undefined;
+} & Point;
+/** The spreadsheet's write mode */
+export type Mode = "view" | "edit";
+/** Dimensions of an element */
+export type Dimensions = {
+    /** The element's width in pixels */
+    width: number;
+    /** The element's height in pixels */
+    height: number;
+    /** The distance of the element from it's container top border in pixels */
+    top: number;
+    /** The distance of the element from it's container left border in pixels */
+    left: number;
+};
+export type StoreState<Cell extends CellBase = CellBase> = {
+    model: Model<Cell>;
+    selected: Selection;
+    copied: PointRange | null;
+    hasPasted: boolean;
+    cut: boolean;
+    active: Point | null;
+    mode: Mode;
+    rowDimensions: Record<number, Pick<Dimensions, "height" | "top"> | undefined>;
+    columnDimensions: Record<number, Pick<Dimensions, "width" | "left"> | undefined>;
+    dragging: boolean;
+    lastChanged: Point | null;
+    lastCommit: null | CellChange<Cell>[];
+};
+export type CellChange<Cell extends CellBase = CellBase> = {
+    prevCell: Cell | null;
+    nextCell: Cell | null;
+};
+/** Type of Spreadsheet Cell component props */
+export type CellComponentProps<Cell extends CellBase = CellBase> = {
+    /** The row of the cell */
+    row: number;
+    /** The column of the cell */
+    column: number;
+    /** The DataViewer component to be used by the cell */
+    DataViewer: DataViewerComponent<Cell>;
+    /** Whether the cell is selected */
+    selected: boolean;
+    /** Whether the cell is active */
+    active: boolean;
+    /** Whether the cell is copied */
+    copied: boolean;
+    /** Whether the user is dragging */
+    dragging: boolean;
+    /** The mode of the cell */
+    mode: Mode;
+    /** The data of the cell */
+    data: Cell | undefined;
+    /** The evaluated data of the cell */
+    evaluatedData: Cell | undefined;
+    /** Select the cell at the given point */
+    select: (point: Point) => void;
+    /** Activate the cell at the given point */
+    activate: (point: Point) => void;
+    /** Set the dimensions of the cell at the given point with the given dimensions */
+    setCellDimensions: (point: Point, dimensions: Dimensions) => void;
+    /** Set data of the cell */
+    setCellData: (cell: Cell) => void;
+};
+/** Type of the Spreadsheet Cell component */
+export type CellComponent<Cell extends CellBase = CellBase> = React.ComponentType<CellComponentProps<Cell>>;
+type DataComponentProps<Cell extends CellBase> = {
+    /** The rendered cell by the component */
+    cell: Cell | undefined;
+} & Point;
+/** Type of the Spreadsheet DataViewer component props */
+export type DataViewerProps<Cell extends CellBase = CellBase> = DataComponentProps<Cell> & {
+    /** Set data of the cell */
+    setCellData: (cell: Cell) => void;
+    evaluatedCell: Cell | undefined;
+};
+/** Type of the Spreadsheet DataViewer component */
+export type DataViewerComponent<Cell extends CellBase = CellBase> = React.ComponentType<DataViewerProps<Cell>>;
+/** Type of the Spreadsheet DataEditor component props */
+export type DataEditorProps<Cell extends CellBase = CellBase> = DataComponentProps<Cell> & {
+    /** Callback to be called when the cell's value is changed */
+    onChange: (cell: Cell) => void;
+    /** Callback to be called when edit mode should be exited */
+    exitEditMode: () => void;
+};
+/** Type of the Spreadsheet DataEditor component */
+export type DataEditorComponent<Cell extends CellBase = CellBase> = React.ComponentType<DataEditorProps<Cell>>;
+/** Type of the Spreadsheet Table component props */
+export type TableProps = React.PropsWithChildren<{
+    /** Number of columns the table should render */
+    columns: number;
+    /** Whether column indicators are hidden */
+    hideColumnIndicators?: boolean | null;
+}>;
+/** Type of the Spreadsheet Table component */
+export type TableComponent = React.ComponentType<TableProps>;
+/** Type of the Spreadsheet Row component props */
+export type RowProps = React.PropsWithChildren<{
+    /** The row index of the table */
+    row: number;
+}>;
+/** Type of the Row component */
+export type RowComponent = React.ComponentType<RowProps>;
+/** Type of the Spreadsheet HeaderRow component props */
+export type HeaderRowProps = React.PropsWithChildren<{}>;
+/** Type of the HeaderRow component */
+export type HeaderRowComponent = React.ComponentType<HeaderRowProps>;
+/** Type of the Spreadsheet RowIndicator component props */
+export type RowIndicatorProps = {
+    /** The row the indicator indicates */
+    row: number;
+    /** A custom label for the indicator as provided in rowLabels */
+    label?: React.ReactNode | null;
+    /** Whether the entire row is selected */
+    selected: boolean;
+    /** Callback to be called when the row is selected */
+    onSelect: (row: number, extend: boolean) => void;
+};
+/** Type of the RowIndicator component */
+export type RowIndicatorComponent = React.ComponentType<RowIndicatorProps>;
+/** Type of the Spreadsheet ColumnIndicator component props */
+export type ColumnIndicatorProps = {
+    /** The column the indicator indicates */
+    column: number;
+    /** A custom label for the indicator as provided in columnLabels */
+    label?: React.ReactNode | null;
+    /** Whether the entire column in selected */
+    selected: boolean;
+    /** Whether the entire column in Fixed */
+    fixed?: boolean;
+    /** Callback to be called when the column is selected */
+    onSelect: (column: number, extend: boolean) => void;
+};
+/** Type of the ColumnIndicator component */
+export type ColumnIndicatorComponent = React.ComponentType<ColumnIndicatorProps>;
+/** Type of the Spreadsheet CornerIndicator component props */
+export type CornerIndicatorProps = {
+    /** Whether the entire table is selected */
+    selected: boolean;
+    /** Callback to select the entire table */
+    onSelect: () => void;
+};
+/** Type of the CornerIndicator component */
+export type CornerIndicatorComponent = React.ComponentType<CornerIndicatorProps>;
+export type CommitChanges<Cell extends CellBase = CellBase> = Array<{
+    prevCell: Cell | null;
+    nextCell: Cell | null;
+}>;
+export type CreateFormulaParser = (data: Matrix<CellBase>) => FormulaParser;
+export {};

package/lib/components/ExcelFile/ExcelFile/Excel/use-dispatch.d.ts

@@ -0,0 +1,3 @@
+import { Dispatch } from "./context";
+declare function useDispatch(): Dispatch;
+export default useDispatch;

package/lib/components/ExcelFile/ExcelFile/Excel/use-selector.d.ts

@@ -0,0 +1,3 @@
+import * as Types from "./types";
+declare function useSelector<T>(selector: (state: Types.StoreState) => T): T;
+export default useSelector;

package/lib/components/ExcelFile/ExcelFile/Excel/util.d.ts

@@ -0,0 +1,45 @@
+import * as Types from "./types";
+import * as Matrix from "./matrix";
+import * as Point from "./point";
+import { PointRange } from "./point-range";
+import { Selection } from "./selection";
+export { createEmpty as createEmptyMatrix } from "./matrix";
+export declare const PLAIN_TEXT_MIME = "text/plain";
+export declare const FOCUS_WITHIN_SELECTOR = ":focus-within";
+/** Move the cursor of given input element to the input's end */
+export declare function moveCursorToEnd(el: HTMLInputElement): void;
+/**
+ * Creates an array of numbers (positive and/or negative) progressing from start up to, but not including, end. A step of -1 is used if a negative start is specified without an end or step. If end is not specified, it's set to start with start then set to 0.
+ * @param end - an integer number specifying at which position to stop (not included).
+ * @param start - An integer number specifying at which position to start.
+ * @param step - An integer number specifying the incrementation
+ */
+export declare function range(end: number, start?: number, step?: number): number[];
+/** Return whether given point is active */
+export declare function isActive(active: Types.StoreState["active"], point: Point.Point): boolean;
+/** Get the offset values of given element */
+export declare function getOffsetRect(element: HTMLElement): Types.Dimensions;
+/** Write given data to clipboard with given event */
+export declare function writeTextToClipboard(event: ClipboardEvent, data: string): void;
+/** Read text from given clipboard event */
+export declare function readTextFromClipboard(event: ClipboardEvent): string;
+/** Get the dimensions of cell at point from state */
+export declare function getCellDimensions(point: Point.Point, rowDimensions: Types.StoreState["rowDimensions"] | undefined, columnDimensions: Types.StoreState["columnDimensions"] | undefined): Types.Dimensions | undefined;
+/** Get the dimensions of a range of cells */
+export declare function getRangeDimensions(rowDimensions: Types.StoreState["rowDimensions"], columnDimensions: Types.StoreState["columnDimensions"], range: PointRange): Types.Dimensions | undefined;
+/** Get the dimensions of selected */
+export declare function getSelectedDimensions(rowDimensions: Types.StoreState["rowDimensions"], columnDimensions: Types.StoreState["columnDimensions"], data: Matrix.Matrix<unknown>, selected: Selection): Types.Dimensions | undefined;
+/** Get given data as CSV */
+export declare function getCSV(data: Matrix.Matrix<Types.CellBase>): string;
+/**
+ * Calculate the rows and columns counts of a spreadsheet
+ * @param data - the spreadsheet's data
+ * @param rowLabels - the spreadsheet's row labels (if defined)
+ * @param columnLabels - the spreadsheet's column labels (if defined)
+ * @returns the rows and columns counts of a spreadsheet
+ */
+export declare function calculateSpreadsheetSize(data: Matrix.Matrix<unknown>, rowLabels?: string[], columnLabels?: string[]): Matrix.Size;
+/** Should spreadsheet handle clipboard event */
+export declare function shouldHandleClipboardEvent(root: Element | null, mode: Types.Mode): boolean;
+export declare function isFocusedWithin(element: Element): boolean;
+export declare function hasLineBreaker(value: unknown): boolean;

package/lib/components/ExcelFile/ExcelFile/ExcelFile.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const ExcelFile: React.FC<ExcelFileProps>;
+export default ExcelFile;

package/lib/components/ExcelFile/ExcelFile.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import ExcelFile from './ExcelFile/ExcelFile';
+declare const meta: Meta<typeof ExcelFile>;
+type Story = StoryObj<typeof ExcelFile>;
+export declare const Default: Story;
+export default meta;

package/lib/components/ExcelFile/ExcelSheetBar/ExcelSheetBar.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+interface ExcelSheetBarProps {
+    fileDetails: {
+        sheetNames: string[];
+    };
+    handleSheetChange: (name: string, index: number) => void;
+    contextMenu: (e: React.MouseEvent, name: string, index: number) => void;
+    addSheet: () => void;
+    selectedSheet: {
+        name: string;
+    };
+    contextSelect: (e: React.MouseEvent) => void;
+}
+declare const ExcelSheetBar: React.FC<ExcelSheetBarProps>;
+export default ExcelSheetBar;

package/lib/components/ExcelFile/ExcelToolBar/ExcelToolBar.d.ts

@@ -0,0 +1,3 @@
+import './ExcelToolBar.scss';
+declare const ExcelToolBar: React.FC<ExcelToolBarProps>;
+export default ExcelToolBar;

package/lib/components/ExcelFile/ImportExcelStyles.d.ts

@@ -0,0 +1,24 @@
+interface CellStyle {
+    color?: string;
+    backgroundColor?: string;
+    bold?: boolean;
+    italic?: boolean;
+    name?: string;
+    border: {
+        top: string;
+        bottom: string;
+        left: string;
+        right: string;
+    };
+    alignment: {
+        horizontal?: string;
+        vertical?: string;
+        wrapText?: boolean;
+    };
+}
+interface CellData {
+    style?: CellStyle;
+}
+type ImportExcelStylesData = Array<Array<CellData>>;
+export default function ImportExcelStyles(data: ImportExcelStylesData | null): void;
+export {};

package/lib/components/ExcelFile/Types.d.ts

@@ -0,0 +1,176 @@
+interface ExcelFileProps {
+    /** The Excel data containing sheets and their content */
+    excelData: {
+        sheets: WorkSheet[];
+    };
+    /** Optional: Provide context menu options for actions like right-click */
+    contextOption?: {
+        name: string;
+        title: React.ReactNode;
+        action: () => void;
+    }[];
+    /** Controls whether the toolbar is shown, disabled, or hidden */
+    toolbar?: 'show' | 'disable' | 'hide';
+    /** Callback function to save the Excel data */
+    onSave?: (excelData?: any) => void;
+}
+interface WorkSheet {
+    /** The name of the worksheet */
+    sheetName: string;
+    /** 2D array of worksheet data (cells) */
+    data: WorkData[][];
+}
+interface WorkData {
+    /** Value of the cell */
+    value: string;
+    /** Styling options for the cell */
+    style: CellStyle;
+    type?: boolean;
+}
+interface CellStyle {
+    /** Font name for the cell text */
+    name?: string;
+    /** Font size of the cell text */
+    size?: number;
+    position?: string;
+    /** Whether the text is bold */
+    bold?: boolean;
+    fontSize?: string;
+    fontFamily?: string;
+    /** Whether the text is italicized */
+    italic?: boolean;
+    /** Text color in the cell (hex code) */
+    color?: string;
+    /** Background color of the cell (hex code) */
+    backgroundColor?: string;
+    /** Border color of the cell (hex code) */
+    borderColor?: string;
+    /** Border styles for each side of the cell */
+    border?: {
+        /** Border style for the top side of the cell */
+        top: string;
+        /** Border style for the bottom side of the cell */
+        bottom: string;
+        /** Border style for the left side of the cell */
+        left: string;
+        /** Border style for the right side of the cell */
+        right: string;
+    };
+    /** Text alignment and wrapping properties */
+    alignment?: {
+        /** Horizontal text alignment ('left', 'center', or 'right') */
+        horizontal: string;
+        /** Vertical text alignment ('top', 'middle', or 'bottom') */
+        vertical: string;
+        /** Whether the text is wrapped within the cell */
+        wrapText: boolean;
+    };
+}
+/** A generic type to represent a 2D matrix of any type (or undefined values) */
+type Matrix<T> = (T | undefined)[][];
+interface ContextAction {
+    /** Name of the right-click option */
+    name: string;
+    /** Display title of the right-click menu option */
+    title: React.ReactNode;
+    /** The action that occurs when the right-click menu option is selected */
+    action: () => void;
+}
+interface ContextOption {
+    /** Type of the context option ('cell', 'row', 'column') */
+    name: string;
+    /** Array of context menu actions for right-click options */
+    value: ContextAction[];
+}
+interface ContextMenuState {
+    /** Whether the context menu is visible */
+    visible: boolean;
+    /** X-coordinate position for the context menu */
+    x: number;
+    /** Y-coordinate position for the context menu */
+    y: number;
+    /** Type of the context menu ('cell', 'row', 'column', or 'sheet_options') */
+    type: 'cell' | 'row' | 'column' | 'sheet_options' | null;
+}
+interface SelectedCell {
+    /** The row index of the selected cell */
+    row: number;
+    /** The column index of the selected cell */
+    column: number;
+}
+interface ColorContainer {
+    /** The color used for the text (hex code) */
+    color: string;
+    /** The background color used for the cell (hex code) */
+    backgroundColor: string;
+    /** The border color used for the cell (hex code) */
+    borderColor: string;
+}
+interface SelectedValue {
+    /** The value inside the selected cell */
+    value: string;
+    /** The row index of the selected cell */
+    row: number;
+    /** The column index of the selected cell */
+    column: number;
+    /** The column represented as an alphabetical string ('A', 'B') */
+    alphaCol: string;
+    /** The style applied to the selected cell */
+    style: CellStyle;
+    /** The sheet name where the cell is located */
+    sheet: string;
+}
+interface ExcelToolBarProps {
+    /** use this to hide/show/disable the toolbar */
+    toolbar?: 'show' | 'disable' | 'hide';
+    /** function to apply styles */
+    applyStyle: (styleType: string, value: any) => void;
+    /** function to trigger format painter */
+    formatePaint: () => void;
+}
+interface ExcelSheetBarProps {
+    /** Object containing details about the file, including sheet names */
+    fileDetails: {
+        sheetNames: string[];
+    };
+    /** Function to handle sheet change events */
+    handleSheetChange: (name: string, index: number) => void;
+    /** Function to open the context menu on a sheet */
+    contextMenu: (e: React.MouseEvent<HTMLDivElement, MouseEvent>, name: string, index: number) => void;
+    /** Function to add a new sheet */
+    addSheet: () => void;
+    /** Object representing the currently selected sheet */
+    selectedSheet: {
+        name: string;
+        index: number;
+    };
+    /** Function to update the context Type */
+    contextSelect: (event: React.MouseEvent) => void;
+}
+interface ContextMenuProps {
+    /** Custom context menu options */
+    customContext: {
+        name: string;
+        title: React.ReactNode;
+        action: () => void;
+    }[];
+    /** Object that holds different context actions based on the type (cell, row, column, sheet_options) */
+    contextAction: {
+        /** Function to add a row */
+        addRow: () => void;
+        /** Function to delete a row */
+        deleteRow: () => void;
+        /** Function to add a column */
+        addColumn: () => void;
+        /** Function to delete a column */
+        deleteColumn: () => void;
+        /** Function to add a new sheet */
+        addSheet: () => void;
+        /** Function to delete a sheet */
+        deleteSheet: () => void;
+    };
+    /** The state of the context menu, controlling its visibility and position */
+    contextData: ContextMenuState;
+    /** Function to update the context menu state */
+    setContextData: React.Dispatch<React.SetStateAction<ContextMenuState>>;
+}

package/lib/components/ExcelFile/index.d.ts

@@ -0,0 +1 @@
+export { default } from './ExcelFile/ExcelFile';

package/lib/components/IconRadioGroup/IconRadioGroup.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import './IconRadioGroup.scss';
+import { IconRadioGroupProps } from './type';
+declare const IconRadioGroup: React.FC<IconRadioGroupProps>;
+export default IconRadioGroup;

package/lib/components/IconRadioGroup/IconRadioGroup.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from '@storybook/react';
+import IconRadioGroup from './IconRadioGroup';
+declare const meta: Meta<typeof IconRadioGroup>;
+type Story = StoryObj<typeof IconRadioGroup>;
+export declare const Default: Story;
+export declare const WithDisabledOption: Story;
+export default meta;

package/lib/components/IconRadioGroup/index.d.ts

@@ -0,0 +1 @@
+export { default } from './IconRadioGroup';

package/lib/components/IconRadioGroup/type.d.ts

@@ -0,0 +1,41 @@
+export interface IconRadioItem {
+    /**
+     * The unique name for the icon, used to load the corresponding icon.
+     */
+    iconName: string;
+    /**
+     * The display label for the icon. This can be used for accessibility purposes.
+     */
+    iconLabel: string;
+    /**
+     * Flag to determine if the icon option is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Message to display when the option is disabled.
+     */
+    disableMessage?: string;
+}
+export interface IconRadioGroupProps {
+    /**
+     * Array of icon items that make up the radio button group.
+     */
+    items: IconRadioItem[];
+    /**
+     * Callback function called when a button/icon is clicked.
+     * It returns the selected item.
+     */
+    onButtonClick: (selectedItem: IconRadioItem) => void;
+    /**
+     * The currently selected icon value
+     */
+    selectedValue?: string | null;
+    /**
+     * Callback function to notify parent of selection change.
+     */
+    onChange?: (selected: string | null) => void;
+    /**
+     * Optional className for custom styling
+     */
+    className?: string;
+}