pixel-react 1.0.0

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

@@ -0,0 +1,85 @@
+import { ReactNode } from 'react';
+export interface BtnPropsCommon {
+    /**
+     * Label for the button
+     */
+    label?: string;
+    /**
+     * Boolean value to disable the button
+     */
+    disabled?: boolean;
+    /**
+     * Onclick function for button
+     */
+    onClick?: () => void;
+}
+export interface DrawerProps {
+    /**
+     * To Open the Drawer
+     */
+    isOpen: boolean;
+    /**
+     * To Expand the Drawer
+     */
+    _isExpanded?: boolean;
+    /**
+   * To show and  hide the back button of the Drawer
+   */
+    isBackButtonVisible?: boolean;
+    /**
+ * To show and  hide the close button of the Drawer
+ */
+    _isCloseModalButtonVisible?: boolean;
+    /**
+     * Function to close the drawer
+     */
+    onClose?: () => void;
+    /**
+     * Size of the drawer medium = 550px large = 850px
+     */
+    size?: 'small' | 'medium' | 'large' | 'x-large';
+    /**
+     * Body Content of the drawer
+     */
+    children: ReactNode;
+    /**
+     * Header title for the drawer
+     */
+    title: string | ReactNode;
+    /**
+     * To show the edit button on the header
+     */
+    showEditButton?: boolean;
+    /**
+     * Primary | Success button props
+     */
+    primaryButtonProps?: BtnPropsCommon;
+    /**
+     * Secondary | Cancel button props
+     */
+    secondaryButtonProps?: BtnPropsCommon;
+    /**
+     * Left side Primary Button | Cancel button props
+     */
+    leftPrimaryButtonProps?: BtnPropsCommon;
+    /**
+     * Left side Secondary | Cancel button props
+     */
+    leftSecondaryButtonProps?: BtnPropsCommon;
+    /**
+     * Onclick function for edit button
+     */
+    onEdit?: () => void;
+    /**
+     * Background overlay for the drawer
+     */
+    overlay?: boolean;
+    /**
+     * displays footer if its true, default true
+     */
+    isFooterRequired?: boolean;
+    /**
+     * footer Content
+     */
+    footerContent?: ReactNode;
+}

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

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

package/lib/components/ExpandableMenu/ExpandableMenu.d.ts

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

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

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

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

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

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

@@ -0,0 +1,34 @@
+export interface ExpandableMenuProps {
+    /**
+     * mandatory | label for the expandable menu
+     */
+    label: string;
+    /**
+     * optional | Icon to describe direction of expansion
+     */
+    icon?: React.ReactNode;
+    /**
+     * optional | variant of the menu
+     */
+    variant?: 'primary';
+    /**
+     * optional | size of the expandable menu
+     */
+    size?: 'medium';
+    /**
+     * optional | disable to disable the menu and prevent click events but not hover event
+     */
+    disable?: boolean;
+    /**
+     * Mandatory |  sub menus to be shown inside  expandable menu
+     */
+    subMenus: string[];
+    /**
+     * optional | selected sub menu of the expandable menu
+     */
+    selectedMenu?: string;
+    /**
+     * optional | onSubMenuClick event to perform action on click of sub menu
+     */
+    onSubMenuClick?: (subChip: any) => void;
+}

package/lib/components/FileDropzone/Dropzone.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import './FileDropzone.scss';
+import { DroppableProps } from './types';
+declare const Dropzone: FC<DroppableProps>;
+export default Dropzone;

package/lib/components/FileDropzone/FileDropzone.d.ts

@@ -0,0 +1,4 @@
+import { FileDropzoneProps } from './types';
+import './FileDropzone.scss';
+declare const FileDropzone: React.FC<FileDropzoneProps>;
+export default FileDropzone;

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

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

package/lib/components/FileDropzone/FilePreview.d.ts

@@ -0,0 +1,4 @@
+import './FileDropzone.scss';
+import { FilePreviewProps } from './types';
+declare const FilePreview: React.FC<FilePreviewProps>;
+export default FilePreview;

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

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

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

@@ -0,0 +1,103 @@
+import { ReactNode } from 'react';
+export interface FileDropzoneProps {
+    /**
+     *  Icon to be displayed in the dropzone.
+     **/
+    icon?: ReactNode;
+    /**
+     *  Primary label to be shown in dropzone area
+     **/
+    primaryLabel?: string;
+    /**
+     *  Secondary label to be shown
+     **/
+    secondaryLabel?: string;
+    /**
+     *  Label to be shown in choose file/input button.
+     **/
+    buttonLabel?: string;
+    /**
+     *  . extension needs to be passed to allow the type of file to add or MIME type to be validate MIME type
+     **/
+    accept: string[];
+    /**
+     *  To allow multiple selection or drop of files.
+     **/
+    multiple?: boolean;
+    /**
+     *  Maximum files to be dropped or selected at once.
+     **/
+    maxFiles?: number;
+    /**
+     *  Maximum size of the file in numbers.
+     **/
+    maxSize?: number;
+    /**
+     *  Function with state to get the boolean value when the maxFiles is less than dropped files.
+     **/
+    onMaxFilesError?: () => void;
+    /**
+     *  To show error message if file size exceeds the max size
+     **/
+    maxSizeErrorMessage?: string;
+    /**
+     *  To show error message if file is not of accepted file type
+     **/
+    invalidFileMessage?: string;
+    /**
+     *  To show error message if file already exist with same name and type
+     **/
+    fileExistMessage?: string;
+    /**
+     *  To validate file type based on MIME type but mandatorily need to pass MIME type in accept props
+     **/
+    validateMIMEType?: boolean;
+}
+export interface FileState {
+    accepted: File[];
+    rejected: FileRejection[];
+}
+export interface FileError {
+    message: string;
+    code: string;
+}
+export interface FileRejection {
+    file: File;
+    errors: FileError[];
+}
+export interface DropzoneOptions {
+    accept: string[];
+    multiple?: boolean;
+    maxSize?: number;
+    maxFiles?: number | undefined;
+    onDrop?: (acceptedFiles: File[], rejectedFiles: FileRejection[], event: React.DragEvent<HTMLElement> | React.ChangeEvent<HTMLInputElement>) => void;
+    onMaxFilesError?: () => void;
+    maxSizeErrorMessage?: string;
+    invalidFileMessage?: string;
+    fileExistMessage?: string;
+    validateMIMEType?: boolean;
+}
+export interface DropzoneState {
+    getRootProps: () => React.HTMLAttributes<HTMLElement>;
+    getInputProps: () => React.InputHTMLAttributes<HTMLInputElement>;
+    acceptedFiles: File[];
+    rejectedFiles: FileRejection[];
+    isDragActive: boolean;
+    handleRemoveClick: (file: File) => void;
+    handleReplaceClick: (file: File) => void;
+}
+export interface DroppableProps {
+    icon: React.ReactNode;
+    primaryLabel: string;
+    secondaryLabel: string;
+    buttonLabel: string;
+    getRootProps: () => any;
+    getInputProps: () => any;
+    isDragActive: boolean;
+}
+export interface FilePreviewProps {
+    file: File;
+    error?: string;
+    onRemoveClick: (file: File) => void;
+    onReplaceClick: (file: File) => void;
+}

package/lib/components/Form/Form.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { UseFormProps, SubmitHandler, FieldValues, FieldPath, FieldErrors } from 'react-hook-form';
+import './Form.scss';
+interface FormProps<T extends FieldValues> extends UseFormProps<T> {
+    onSubmit: SubmitHandler<T>;
+    children: (props: {
+        register: (name: FieldPath<T>, options?: any) => any;
+        errors: FieldErrors<T>;
+        handleBlur: (field: FieldPath<T>) => void;
+        getValues: () => T;
+        watch: (field?: FieldPath<T>) => any;
+        setValue: (field: FieldPath<T>, value: any, options?: object) => void;
+    }) => React.ReactNode;
+}
+declare const Form: <T extends FieldValues>({ onSubmit, children, ...rest }: FormProps<T>) => import("react/jsx-runtime").JSX.Element;
+export default Form;

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

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

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

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

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

@@ -0,0 +1 @@
+export type FormValues = Record<string, any>;

package/lib/components/GridLayout/GridLayout.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import './GridLayout.scss';
+import { ContainerProps, RowProps, ColProps } from './types';
+export declare const Container: React.FC<ContainerProps>;
+export declare const Row: React.FC<RowProps>;
+export declare const Col: React.FC<ColProps>;

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

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Container } from './GridLayout';
+import './GridLayoutStory.scss';
+declare const meta: Meta<typeof Container>;
+type ContainerStory = StoryObj<typeof Container>;
+export declare const Grid: ContainerStory;
+export declare const Grid2: ContainerStory;
+export default meta;

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

@@ -0,0 +1,2 @@
+declare const _default: "./GridLayout.tsx";
+export default _default;

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

@@ -0,0 +1,57 @@
+import { ReactNode } from 'react';
+export interface ContainerProps {
+    /**
+     * The content to be displayed inside the container.
+     * Typically consists of rows and columns.
+     *
+     * @type {ReactNode}
+     */
+    children: ReactNode;
+    /**
+     * Determines if the container should be fluid (expand to 100% width) or fixed width.
+     *
+     * @default false
+     * @type {boolean}
+     */
+    fluid?: boolean;
+    /**
+     * Defines the gap (spacing) between the rows and columns inside the container.
+     * Accepts any valid CSS size value (e.g., '10px', '1rem', etc.).
+     *
+     * @default '0px'
+     * @type {string}
+     */
+    gap?: string;
+}
+export interface RowProps {
+    /**
+     * The content to be displayed inside the row, usually consisting of columns (`<Col />`).
+     *
+     * @type {ReactNode}
+     */
+    children: ReactNode;
+    /**
+     * The gap (spacing) between columns within the row.
+     * Accepts any valid CSS size value.
+     *
+     * @default '0px'
+     * @type {string}
+     */
+    gap?: string;
+}
+export interface ColProps {
+    /**
+     * The content to be displayed inside the column.
+     *
+     * @type {ReactNode}
+     */
+    children: ReactNode;
+    /**
+     * Defines the width of the column as a fraction of 12 (for a 12-column grid system).
+     * For example, `size={6}` would make the column take up half the width of the row.
+     *
+     * @default 12
+     * @type {number}
+     */
+    size?: number;
+}

package/lib/components/HighlightText/HighlightText.d.ts

@@ -0,0 +1,4 @@
+import { HighlightTextProps } from './types';
+import './HighlightText.scss';
+declare const HighlightText: React.FC<HighlightTextProps>;
+export default HighlightText;

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

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

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

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

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

@@ -0,0 +1,4 @@
+export interface HighlightTextProps {
+    text?: string;
+    highlight?: String;
+}

package/lib/components/Icon/Icon.d.ts

@@ -0,0 +1,4 @@
+import './Icons.scss';
+import { IconProps } from './types';
+declare const Icon: ({ name, height, width, onClick, color, hoverEffect, className, disabled, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element | null;
+export default Icon;

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

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

package/lib/components/Icon/iconList.d.ts

@@ -0,0 +1,2 @@
+declare let Components: any;
+export default Components;

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

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

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

@@ -0,0 +1,10 @@
+export interface IconProps {
+    name: string;
+    className?: string;
+    height?: number;
+    width?: number;
+    color?: string;
+    onClick?: (data?: any) => void;
+    hoverEffect?: boolean;
+    disabled?: boolean;
+}

package/lib/components/Input/Input.d.ts

@@ -0,0 +1,4 @@
+import './Input.scss';
+import { InputProps } from './types';
+declare const Input: ({ type, variant, name, label, disabled, required, placeholder, value, helperText, error, noBorder, className, onChange, onBlur, onFocus, autoComplete, minValue, maxValue, transparentBackground, ...props }: InputProps) => import("react/jsx-runtime").JSX.Element;
+export default Input;

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

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

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

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

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

@@ -0,0 +1,74 @@
+export interface InputProps {
+    /**
+     * Name | name of the input field
+     */
+    name: string;
+    /**
+     * Label | field label to be displayed
+     */
+    label: string;
+    /**
+     * value | input field value
+     */
+    value: string | number;
+    /**
+     * variants to set color/style of the input field
+     */
+    variant?: 'default' | 'primary';
+    /**
+     * type to set color/style of the input field
+     */
+    type: 'text' | 'password' | 'number' | 'email' | 'url' | 'time';
+    /**
+     * error | If true, error message will be displayed
+     */
+    error?: boolean;
+    /**
+     * helperText | error, success, warning message to be shown
+     */
+    helperText?: string;
+    /**
+     * to disable the input field
+     */
+    disabled?: boolean;
+    /**
+     * if true, input field will be mandatory
+     */
+    required?: boolean;
+    /**
+     * placeholder for the input field
+     */
+    placeholder?: string;
+    /**
+     * classnames to style the input field
+     */
+    className?: string;
+    /**
+     * noBorder prop 'true' removes border of input
+     */
+    noBorder?: boolean;
+    /**
+     * onChange, onKeyDown, onBlur, onFocus actions
+     */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    /**
+     * id to select the input field uniquely
+     */
+    id?: string;
+    /**
+     * if on, suggestion popup will be displayed
+     */
+    autoComplete?: 'on' | 'off';
+    /**
+     *  minimum and maximum values for the number type input field and their functions
+     */
+    minValue?: number;
+    maxValue?: number;
+    /**
+     * background of the input field prop
+     */
+    transparentBackground?: boolean;
+}

package/lib/components/InputWithDropdown/InputWithDropdown.d.ts

@@ -0,0 +1,4 @@
+import './InputWithDropdown.scss';
+import { InputWithDropdownProps } from './types';
+declare const InputWithDropdown: ({ name, label, value, type, disabled, required, placeholder, error, helperText, optionsList, selectedOption, onDropdownChangeHandler, onInputChangeHandler, }: InputWithDropdownProps) => import("react/jsx-runtime").JSX.Element;
+export default InputWithDropdown;

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

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

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

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

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

@@ -0,0 +1,88 @@
+import { ReactNode } from 'react';
+export interface Option {
+    label: string | ReactNode;
+    value: string;
+}
+export interface InputWithDropdownProps {
+    /**
+     * Name | name of the input field
+     */
+    name: string;
+    /**
+     * Label | field label to be displayed
+     */
+    label: string;
+    /**
+     * value | input field value
+     */
+    value: string | number;
+    /**
+     * variants to set color/style of the input field
+     */
+    variant?: 'default' | 'primary';
+    /**
+     * type to set the input field type
+     */
+    type: 'text' | 'password' | 'number' | 'time';
+    /**
+     * error | If true, error message will be displayed
+     */
+    error?: boolean;
+    /**
+     * helperText | error, success, warning message to be shown
+     */
+    helperText?: string;
+    /**
+     * to disable the input field
+     */
+    disabled?: boolean;
+    /**
+     * if true, input field will be mandatory
+     */
+    required?: boolean;
+    /**
+     * placeholder for the input field
+     */
+    placeholder?: string;
+    /**
+     * classnames to style the input field
+     */
+    className?: string;
+    /**
+     * Options for the select dropdown
+     */
+    optionsList: Option[];
+    /**
+     * Selected option for the select dropdown
+     */
+    selectedOption?: Option;
+    /**
+     * onChange handler for input changes
+     */
+    onInputChangeHandler?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * onChange handler for dropdown changes
+     */
+    onDropdownChangeHandler?: (option: Option) => void;
+    /**
+     * onFocus action for input field
+     */
+    onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    /**
+     * id to select the input field uniquely
+     */
+    id?: string;
+    /**
+     * if on, suggestion popup will be displayed
+     */
+    autoComplete?: 'on' | 'off';
+    /**
+     * minimum and maximum values for the number type input field
+     */
+    minValue?: number;
+    maxValue?: number;
+    /**
+     * background of the input field prop
+     */
+    isBackgroundTransparent?: boolean;
+}

package/lib/components/LazyLoad/LazyLoad.d.ts

@@ -0,0 +1,2 @@
+import * as LazyLoad from 'react-window';
+export default LazyLoad;

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

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

package/lib/components/LazyLoad/LazyLoading.d.ts

@@ -0,0 +1,2 @@
+declare const LazyLoading: () => import("react/jsx-runtime").JSX.Element;
+export default LazyLoading;

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

@@ -0,0 +1 @@
+export * from './LazyLoad';