pixel-react-excel-sheet 1.2.0

package/lib/components/MenuOption/types.d.ts

@@ -0,0 +1,141 @@
+interface OptionClick {
+    /**
+     * The label displayed for the option.
+     * @type {string}
+     * @required
+     */
+    label: string;
+    /**
+     * The value(s) associated with the option, which can be a single string or an array of strings.
+     * @type {Array<string> | string}
+     * @required
+     */
+    value: Array<string> | string;
+}
+interface OptionType extends OptionClick {
+    /**
+     * The name of the icon associated with the option.
+     * @type {string}
+     * @required
+     */
+    icon: string;
+    /**
+     * Indicates whether the option is disabled.
+     * @type {boolean}
+     * @optional
+     */
+    disable?: boolean;
+}
+interface OptionCardProps {
+    /**
+     * The list of options displayed in the card.
+     * @type {Array<OptionType>}
+     * @required
+     */
+    options: Array<OptionType>;
+    /**
+     * Callback function triggered when an option is clicked.
+     * @param {any} data - The data associated with the clicked option.
+     * @type {function}
+     * @required
+     */
+    onClick: (data?: any) => void;
+    /**
+     * Optional styles applied to the card.
+     * @type {React.CSSProperties}
+     * @optional
+     */
+    styles?: React.CSSProperties;
+}
+interface MenuOptionProps {
+    /**
+     * The name of the label displayed next to the icon.
+     * @type {string}
+     * @optional
+     */
+    labelName?: string;
+    /**
+     * The name of the icon to be displayed.
+     * @type {string}
+     * @required
+     */
+    iconName: string;
+    /**
+     * The list of options available in the dropdown.
+     * @type {Array<OptionType>}
+     * @required
+     */
+    options: Array<OptionType>;
+    /**
+     * The title displayed in the tooltip when hovering over the icon.
+     * @type {string}
+     * @optional
+     */
+    tooltipTitle?: string;
+    /**
+     * The placement of the tooltip relative to the icon.
+     * @type {'bottom' | 'left' | 'right' | 'top' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end'}
+     * @optional
+     */
+    tooltipPlacement?: 'bottom' | 'left' | 'right' | 'top' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end';
+    /**
+     * The placement of the dropdown menu relative to the icon.
+     * @type {'top' | 'left' | 'right' | 'bottom'}
+     * @optional
+     */
+    dropdownPlacement?: string | 'top' | 'left' | 'right' | 'down';
+    /**
+     * Callback function triggered when the icon is clicked.
+     * @type {function}
+     * @optional
+     */
+    variant?: 'dark' | 'light';
+    /**
+     * The variant of the menu option, either 'dark' or 'light'.
+     * @type {'dark' | 'light'}
+     * @default 'light'
+     * @optional
+     */
+    onClick?: () => void;
+    /**
+     * Callback function triggered when an option is clicked.
+     * @param {OptionClick} option - The option that was clicked.
+     * @type {function}
+     * @optional
+     */
+    onOptionClick?: (option: OptionClick) => void;
+    /**
+     * The size of the icon button.
+     * @type {number}
+     * @default 20
+     */
+    iconButtonSize?: number;
+    /**
+     * The size of the icon.
+     * @type {number}
+     * @default 16
+     */
+    iconSize?: number;
+    /**
+     * The border radius of the icon.
+     * @type {number}
+     * @default 7
+     */
+    iconButtonBorderRadius?: number;
+}
+interface OptionProps {
+    /**
+     * The option to be displayed.
+     * @type {OptionType}
+     * @required
+     */
+    option: OptionType;
+    /**
+     * Callback function triggered when the option is clicked.
+     * @param {OptionClick} option - The clicked option.
+     * @type {function}
+     * @required
+     */
+    onClick: (option: OptionClick) => void;
+}
+export { OptionProps, MenuOptionProps, OptionCardProps, OptionClick };

package/lib/components/MiniModal/MiniModal.d.ts

@@ -0,0 +1,4 @@
+import { MiniEditModalProps } from './types.js';
+import './MiniModal.scss';
+declare const MiniModal: import("react").ForwardRefExoticComponent<MiniEditModalProps & import("react").RefAttributes<HTMLDivElement>>;
+export default MiniModal;

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

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import MiniModal from './MiniModal';
+import './MiniModal.scss';
+declare const meta: Meta<typeof MiniModal>;
+type Story = StoryObj<typeof MiniModal>;
+export declare const BasicModal: Story;
+export declare const CustomModalWithArrow: () => import("react/jsx-runtime").JSX.Element;
+export declare const CustomModalWithWrapper: () => import("react/jsx-runtime").JSX.Element;
+export default meta;

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

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

package/lib/components/MiniModal/types.d.ts

@@ -0,0 +1,101 @@
+import { ReactNode, RefObject } from 'react';
+interface ButtonProps {
+    text: string;
+    onClick: () => void;
+}
+interface ModalDimensions {
+    width?: number;
+    height?: number;
+}
+export interface MiniEditModalProps {
+    /**
+     * A reference to the button element that triggers the modal.
+     */
+    anchorRef: RefObject<HTMLButtonElement>;
+    /**
+     * Optional properties for configuring the modal header.
+     */
+    headerProps?: ReactNode;
+    /**
+     * The main content to be displayed inside the modal
+     */
+    childContent: ReactNode;
+    /**
+     * Props for the cancel button inside the modal
+     */
+    cancelButtonProps: ButtonProps;
+    /**
+     * Props for the proceed button inside the modal.
+     */
+    proceedButtonProps: ButtonProps;
+    /**
+     * Optional content for the footer of the modal.
+     */
+    footerContent?: ReactNode;
+    /**
+     * Determines if the modal should be wrapped inside a container element.
+     */
+    isWrapped?: boolean;
+    /**
+     * Determines if the modal should have an animation when displayed.
+     */
+    isAnimated?: boolean;
+    /**
+     * Specifies if the modal should behave as a popover with an arrow.
+     */
+    isPopOver?: boolean;
+    /**
+     * Sets the position of the modal relative to its anchor.
+     * bottom: The modal appears below the anchor.
+     * right: The modal appears to the right of the anchor.
+     */
+    modalPosition?: 'bottom' | 'right' | 'top' | 'left';
+    /**
+     * Adds a top-left aligned arrow to the modal when its position is set to `'right'`.
+     */
+    leftTopArrow?: boolean;
+    /**
+     * A reference to an additional anchor element for positioning the modal.
+     */
+    firstAnchorRef?: RefObject<HTMLButtonElement>;
+    /**
+     * A numeric value representing the left position of the anchor element, used to calculate the modal's left position.
+     */
+    anchorRefLeftNum?: number;
+    /**
+     * Optional properties for configuring the modal's dimensions.
+     * width: The width of the modal.
+     * height: The height of the modal.
+     */
+    modalProperties?: ModalDimensions;
+    /**distance for the wrapper model from align alignments */
+    anchorLeftDistanceForWrapper?: number;
+    /**extra top space added from anchor */
+    extraTopSpace?: {
+        wrappedModal?: number;
+        normalModal?: number;
+    };
+    /**extra right space added from anchor */
+    extraRightSpace?: {
+        leftTopArrow?: number;
+        middleLeftArrow?: number;
+    };
+    /**extra left space added from anchor */
+    extraLeftSpace?: {
+        normal?: number;
+        rightAlignModal?: number;
+    };
+}
+export interface Rect {
+    top: number;
+    left: number;
+    bottom: number;
+    right: number;
+}
+export interface AvailableSpace {
+    spaceTop: number;
+    spaceLeft: number;
+    spaceRight: number;
+    spaceBottom: number;
+}
+export {};

package/lib/components/Modal/Modal.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import './modal.scss';
+import { ModalProps } from './types';
+declare const Modal: React.FC<ModalProps>;
+export default Modal;

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

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

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

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

package/lib/components/Modal/types.d.ts

@@ -0,0 +1,29 @@
+import { ReactNode } from "react";
+export interface ModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    /*** label value for aria-label  */
+    contentLabel?: string;
+    /*** default header will be provided with title and close icon. */
+    isHeaderDisplayed: boolean;
+    /*** Title to be displayed in the header when defaultHeader is true*/
+    headerTitle?: string;
+    /*** Custom class names for the modal content */
+    contentClassName?: string;
+    /*** Custom class name for the overlay */
+    overlayClassName?: string;
+    /*** Whether the modal should close when the 'Escape' key is pressed */
+    shouldCloseOnEsc?: boolean;
+    /*** Whether to hide the app from screen readers when the modal is open */
+    ariaHideApp?: boolean;
+    /*** Whether the modal should close when clicking outside of it (on the overlay) */
+    shouldCloseOnOverlayClick?: boolean;
+    headerContent?: string | ReactNode;
+    footerContent?: ReactNode;
+    /***Content to be displayed inside the modal */
+    children: ReactNode;
+    isFooterDisplayed: boolean;
+    customWidth: string;
+    customHeight?: string;
+    zIndex?: number;
+}

package/lib/components/MultiSelect/Dropdown.d.ts

@@ -0,0 +1,4 @@
+import { DropdownProps } from './dropdownTypes';
+import './Dropdown.scss';
+declare const Dropdown: import("react").ForwardRefExoticComponent<DropdownProps & import("react").RefAttributes<HTMLDivElement>>;
+export default Dropdown;

package/lib/components/MultiSelect/MultiSelect.d.ts

@@ -0,0 +1,4 @@
+import './MultiSelect.scss';
+import { MultiSelectProps } from './MultiSelectTypes';
+declare const MultiSelect: ({ options, type, selectedOptions, onChange, acceptNewOption, zIndex, label, onSearch, required, disabled, errorMessage, withSelectButton, onSelect, displayCount, }: MultiSelectProps) => import("react/jsx-runtime").JSX.Element;
+export default MultiSelect;

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

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import MultiSelect from './MultiSelect';
+declare const meta: Meta<typeof MultiSelect>;
+type Story = StoryObj<typeof MultiSelect>;
+export declare const Default: Story;
+export declare const Default2: Story;
+export declare const Default3: Story;
+export declare const EmailGroup: Story;
+export declare const Controlled: Story;
+export default meta;

package/lib/components/MultiSelect/MultiSelectTypes.d.ts

@@ -0,0 +1,23 @@
+interface Option {
+    label?: string;
+    value?: string;
+    accessor?: string;
+    isChecked?: boolean;
+}
+interface MultiSelectProps {
+    options: Option[];
+    type?: 'email' | 'text';
+    label: string;
+    selectedOptions?: Option[];
+    disabled?: boolean;
+    onSearch?: (searchedKeyword: string, resultsLength: number) => void;
+    onChange?: (selectedOptions: Option[]) => void;
+    acceptNewOption?: boolean;
+    zIndex?: number;
+    required?: boolean;
+    errorMessage?: string;
+    withSelectButton?: boolean;
+    onSelect?: () => void;
+    displayCount?: boolean;
+}
+export { Option, MultiSelectProps };

package/lib/components/MultiSelect/dropdownTypes.d.ts

@@ -0,0 +1,17 @@
+import { Option } from './MultiSelectTypes';
+export declare const dropdownDefaultCSSData: {
+    verticalMargin: number;
+    optionHeight: number;
+    maxDropdownHeight: number;
+};
+export interface DropdownProps {
+    options: Option[];
+    style?: React.CSSProperties;
+    handleOptionChange: (option: Option, isChecked: boolean) => void;
+    checkedOptions: Option[];
+    searchedKeyword: undefined | string;
+    dropdownPosition: any;
+    zIndex: number;
+    withSelectButton?: boolean;
+    onSelect?: () => void;
+}

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

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

package/lib/components/NLPInput/NlpInput.d.ts

@@ -0,0 +1,4 @@
+import { SelectProps } from './type';
+import './NlpInput.scss';
+declare const NlpInput: ({ label, showLabel, optionsList, selectedOption, onChange, errorMsg, className, optionZIndex, disabled, borderRadius, showBorder, required, }: SelectProps) => import("react/jsx-runtime").JSX.Element;
+export default NlpInput;

package/lib/components/NLPInput/NlpInput.stories.d.ts

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

package/lib/components/NLPInput/components/NlpDropDown/NlpDropDownType.d.ts

@@ -0,0 +1,19 @@
+import { DrowdownPosition, Option } from '../../type';
+export interface NlpDropDownListProps {
+    onSelectBlur: () => void;
+    onSelectOptionSelector: (option: Option) => void;
+    dropdownPosition: DrowdownPosition;
+    options?: Option[];
+    optionZIndex?: number;
+    inputRef?: React.RefObject<HTMLInputElement>;
+    label?: string;
+    hasError?: boolean;
+    errorMessage?: string;
+    disabled?: boolean;
+}
+export declare const nlpDropdownDefaultCSSData: {
+    margin: number;
+    optionHeight: number;
+    selectInputHeight: number;
+    dropDownWrapperPadding: number;
+};

package/lib/components/NLPInput/components/NlpDropDown/NlpDropdown.d.ts

@@ -0,0 +1,4 @@
+import { NlpDropDownListProps } from './NlpDropDownType';
+import './NlpDropdown.scss';
+declare const NlpDropdown: ({ onSelectBlur, onSelectOptionSelector, dropdownPosition, options, optionZIndex, inputRef, }: NlpDropDownListProps) => import("react/jsx-runtime").JSX.Element;
+export default NlpDropdown;

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

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

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

@@ -0,0 +1,70 @@
+import { ReactNode } from 'react';
+export interface SelectProps {
+    label?: string;
+    showLabel?: boolean;
+    optionsList: any[];
+    selectedOption?: Option;
+    onChange: (option: Option) => void;
+    errorMsg?: string;
+    className?: string;
+    optionZIndex?: number;
+    disabled?: boolean;
+    borderRadius?: boolean;
+    showBorder?: boolean;
+    required?: boolean;
+}
+export interface DrowdownPosition {
+    positionX: number;
+    positionY: number;
+    width: number;
+    fromBottom: number;
+}
+export interface SelectState {
+    isInputFocused: boolean;
+    iconColor: string;
+    isIconClick: boolean;
+    showOptions: boolean;
+    options: any[];
+    option: string;
+    dropdownPosition: DrowdownPosition;
+}
+export type SelectAction = {
+    type: 'FOCUS_INPUT';
+} | {
+    type: 'BLUR_INPUT';
+    payload: {
+        optionsList: Option[];
+        option: Option['projectId'];
+    };
+} | {
+    type: 'MOUSE_ENTER';
+} | {
+    type: 'MOUSE_LEAVE';
+} | {
+    type: 'UPDATE_DROPDOWN_POSITION';
+    payload: {
+        positionX: number;
+        positionY: number;
+        width: number;
+        fromBottom: number;
+    };
+} | {
+    type: 'UPDATE_OPTION';
+    payload: string;
+} | {
+    type: 'UPDATE_OPTION_LIST';
+    payload: any[];
+} | {
+    type: 'SHOW_ERROR';
+    payload: {
+        optionsList: any[];
+        option: Option['projectId'];
+    };
+};
+export interface Option {
+    displayName: string | ReactNode;
+    projectId: string;
+    nlpType: string;
+    platform: string;
+    disabled?: boolean;
+}

package/lib/components/Paper/Paper.d.ts

@@ -0,0 +1,4 @@
+import './Paper.scss';
+import { PaperProps } from './types';
+declare const Paper: ({ children, className, rounded }: PaperProps) => import("react/jsx-runtime").JSX.Element;
+export default Paper;

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

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Paper from './Paper';
+import './Paper.scss';
+declare const meta: Meta<typeof Paper>;
+type Story = StoryObj<typeof Paper>;
+export declare const Default: Story;
+export declare const PrimaryPaper: Story;
+export declare const PaperWithLowShadow: Story;
+export declare const PaperWithHighShadow: Story;
+export declare const PaperWithRounded: Story;
+export default meta;

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

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

package/lib/components/Paper/types.d.ts

@@ -0,0 +1,15 @@
+export interface PaperProps {
+    /**
+     * The content of the component.
+     */
+    children?: React.ReactNode;
+    /**
+     * Override or extend the styles applied to the component.
+     */
+    className?: string;
+    /**
+     * If `true`, rounded corners are Enabled.
+     * @default false
+     */
+    rounded?: boolean;
+}

package/lib/components/RadioButton/RadioButton.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import './RadioButton.scss';
+declare const RadioButton: React.FC<RadioButtonProps>;
+export default RadioButton;

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

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import RadioButton from './RadioButton';
+declare const meta: Meta<typeof RadioButton>;
+type Story = StoryObj<typeof RadioButton>;
+export declare const Default: Story;
+export declare const Checked: Story;
+export declare const UncheckedDisabled: Story;
+export declare const CheckedDisabled: Story;
+export declare const WithoutLabel: Story;
+export default meta;

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

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

package/lib/components/RadioButton/radioButtonTypes.d.ts

@@ -0,0 +1,50 @@
+/**
+ * Props for the RadioButton component.
+ */
+interface RadioButtonProps {
+    /**
+     * The display label for the radio button.
+     * Optional.
+     */
+    label?: string;
+    /**
+     * The name attribute for the radio button, used for grouping.
+     */
+    name: string;
+    /**
+     * The unique value of the radio button.
+     * Optional.
+     */
+    value?: string;
+    /**
+     * Indicates whether the radio button is checked.
+     * Optional.
+     */
+    checked?: boolean;
+    /**
+     * Callback function that is called when the radio button's value changes.
+     * Receives the change event as an argument.
+     * Optional.
+     */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Indicates whether the radio button is disabled.
+     * Optional.
+     */
+    disabled?: boolean;
+    /**
+     * Indicates whether the radio button show the tooltip.
+     * Optional.
+     */
+    showTooltip?: boolean;
+    /**
+     * The content of the tooltip.
+     * Optional.
+     */
+    tooltipChildren?: React.ReactNode;
+    /**
+     * The content of the tooltip.
+     * Optional.
+     */
+    tooltipTitle?: React.ReactNode;
+}

package/lib/components/RadioGroup/RadioGroup.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import './RadioGroup.scss';
+declare const RadioGroup: React.FC<RadioGroupProps>;
+export default RadioGroup;

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

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import RadioGroup from './RadioGroup';
+declare const meta: Meta<typeof RadioGroup>;
+type Story = StoryObj<typeof RadioGroup>;
+export declare const Controlled: Story;
+export declare const WithDisabledOption: Story;
+export declare const DisabledSelected: Story;
+export declare const WithToolTipIcon: Story;
+export default meta;

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

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