pixel-react 1.0.0

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

@@ -0,0 +1,4 @@
+import './MenuOption.scss';
+import { MenuOptionProps } from './types';
+declare const MenuOption: ({ labelName, iconName, tooltipTitle, tooltipPlacement, options, dropdownPlacement, onClick, onOptionClick, iconButtonSize, iconButtonBorderRadius, iconSize, }: MenuOptionProps) => import("react/jsx-runtime").JSX.Element;
+export default MenuOption;

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

@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import MenuOption from './MenuOption';
+import './MenuOption.scss';
+export declare const DefaultMenuOption: Story;
+declare const meta: Meta<typeof MenuOption>;
+type Story = StoryObj<typeof MenuOption>;
+export declare const ControlledMenuOption: Story;
+export declare const MenuOptionWithLabel: Story;
+export declare const MenuOptionWithDisabledHoverEffect: Story;
+export declare const MenuOptionWithToolTip: Story;
+export declare const MenuOptionPlacementTop: Story;
+export declare const MenuOptionPlacementDown: Story;
+export declare const MenuOptionPlacementLeft: Story;
+export declare const MenuOptionPlacementRight: Story;
+export default meta;

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

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

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

@@ -0,0 +1,134 @@
+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?: 'top' | 'left' | 'right' | 'down';
+    /**
+     * Callback function triggered when the icon is clicked.
+     * @type {function}
+     * @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 CustomModalWithWrapper: () => import("react/jsx-runtime").JSX.Element;
+export declare const CustomModalWithArrow: () => 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,89 @@
+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 {};

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, selectedOptions, onChange, zIndex, label, onSearch, required, disabled, errorMessage, }: MultiSelectProps) => import("react/jsx-runtime").JSX.Element;
+export default MultiSelect;

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

@@ -0,0 +1,9 @@
+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 Controlled: Story;
+export default meta;

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

@@ -0,0 +1,18 @@
+interface Option {
+    label?: string;
+    value?: string;
+    accessor?: string;
+    isChecked?: boolean;
+}
+interface MultiSelectProps {
+    options: Option[];
+    label: string;
+    selectedOptions?: Option[];
+    disabled?: boolean;
+    onSearch?: (searchedKeyword: string) => void;
+    onChange?: (selectedOptions: Option[]) => void;
+    zIndex?: number;
+    required?: boolean;
+    errorMessage?: string;
+}
+export { Option, MultiSelectProps };

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

@@ -0,0 +1,15 @@
+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;
+}

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

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

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,35 @@
+/**
+ * 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;
+}

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,8 @@
+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 DisabledSelcted: Story;
+export default meta;

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

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

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

@@ -0,0 +1,47 @@
+/**
+ * Represents a single option in the radio group.
+ */
+interface Option {
+    /**
+     * The unique value of the option.
+     */
+    value: string;
+    /**
+     * The display label for the option.
+     */
+    label: string;
+    /**
+     * Indicates whether the option is disabled.
+     * Optional.
+     */
+    disabled?: boolean;
+}
+/**
+ * Props for the RadioGroup component.
+ */
+interface RadioGroupProps {
+    /**
+     * An array of options to be rendered in the radio group.
+     */
+    options: Option[];
+    /**
+     * The name attribute for the radio inputs, used for grouping.
+     */
+    name: string;
+    /**
+     * The currently selected value.
+     * Optional.
+     */
+    selectedValue?: string;
+    /**
+     * Callback function that is called when the selected option changes.
+     * It receives the selected option as an argument.
+     * Optional.
+     */
+    onChange?: (option: Option) => void;
+    /**
+     * Additional class names to apply to the radio group for custom styling.
+     * Optional.
+     */
+    className?: string;
+}

package/lib/components/Search/Search.d.ts

@@ -0,0 +1,4 @@
+import './Search.scss';
+import { SearchProps } from './types';
+declare const Search: ({ placeholder, onSearch, disabled, width, }: SearchProps) => import("react/jsx-runtime").JSX.Element;
+export default Search;

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

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

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

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

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

@@ -0,0 +1,15 @@
+export interface SearchProps {
+    /**
+     * Placeholder for the input field
+     */
+    placeholder?: string;
+    /**
+     * Callback function to be called when the search button is clicked or enter key is pressed
+     */
+    onSearch: (query: string) => void;
+    /**
+     * Additional styles for the button
+     */
+    disabled?: boolean;
+    width?: number;
+}

package/lib/components/Select/Select.d.ts

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

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

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Select from './Select';
+declare const meta: Meta<typeof Select>;
+type Story = StoryObj<typeof Select>;
+export declare const Primary: Story;
+export declare const WithError: Story;
+export declare const WithoutLabel: Story;
+export declare const EmptyOptions: Story;
+export declare const Disable: Story;
+export declare const WithInitialValue: Story;
+export declare const OptionSelection: Story;
+export declare const CustomJSX: Story;
+export default meta;

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

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

package/lib/components/Select/components/Dropdown/dropdownTypes.d.ts

@@ -0,0 +1,15 @@
+import { DrowdownPosition, Option } from '../../types';
+export interface DropDownListProps {
+    onSelectBlur: () => void;
+    onSelectOptionSelector: (option: Option) => void;
+    dropdownPosition: DrowdownPosition;
+    options?: Option[];
+    optionZIndex?: number;
+    inputRef?: React.RefObject<HTMLInputElement>;
+}
+export declare const dropdownDefaultCSSData: {
+    margin: number;
+    optionHeight: number;
+    selectInputHeight: number;
+    dropDownWrapperPadding: number;
+};

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

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

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

@@ -0,0 +1,68 @@
+import { ReactNode } from "react";
+export interface SelectProps {
+    label?: string;
+    showLabel?: boolean;
+    optionsList: Option[];
+    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: Option[];
+    option: string;
+    dropdownPosition: DrowdownPosition;
+}
+export type SelectAction = {
+    type: 'FOCUS_INPUT';
+} | {
+    type: 'BLUR_INPUT';
+    payload: {
+        optionsList: Option[];
+        option: Option['value'];
+    };
+} | {
+    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: Option[];
+} | {
+    type: 'SHOW_ERROR';
+    payload: {
+        optionsList: Option[];
+        option: Option['value'];
+    };
+};
+export interface Option {
+    label: string | ReactNode;
+    value: string;
+    disabled?: boolean;
+}

package/lib/components/Table/Table.d.ts

@@ -0,0 +1,4 @@
+import './Table.scss';
+import { TableProps } from './Types';
+declare const Table: ({ data, columns, headerType, withFixedHeader, borderWithRadius, height, className, }: TableProps) => import("react/jsx-runtime").JSX.Element | null;
+export default Table;

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

@@ -0,0 +1,11 @@
+import { StoryObj, Meta } from '@storybook/react';
+import Table from './Table';
+declare const meta: Meta<typeof Table>;
+type Story = StoryObj<typeof Table>;
+export declare const Default: Story;
+export declare const PageTable: Story;
+export declare const PrimaryHeader: Story;
+export declare const FixedHeaderWithBorder: Story;
+export declare const WithCheckBox: Story;
+export declare const TableWithNoData: Story;
+export default meta;