pixel-react 1.0.0

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

@@ -0,0 +1,98 @@
+import { ReactNode } from 'react';
+export interface ColumnsProps {
+    /**
+     * column name
+     */
+    header: string;
+    /**
+     * data key for particular column
+     */
+    accessor: string;
+    /**
+     * className for a column
+     */
+    className?: string;
+    /**
+     * width of a column
+     */
+    width?: number;
+    /**
+     * data for the column
+     */
+    cell?: (e: any) => JSX.Element | string | ReactNode;
+    onClick?: (colum: string, row: DataProps) => void;
+}
+export interface DataProps {
+    /**
+     * data for each row
+     */
+    [key: string]: any;
+}
+export interface SelectedItemProps {
+    /**
+     * selected row object | All selected flag
+     */
+    [key: string]: string | number | boolean;
+}
+export interface TableProps {
+    /**
+     * Data for table
+     */
+    data: Array<number | string | DataProps>;
+    /**
+     * Column details for table
+     */
+    columns: Array<any>;
+    /**
+     * Header type to have different background color
+     */
+    headerType: 'default' | 'primary' | 'secondary';
+    /**
+     * withFixedHeader prop to have non-scrollable fixed table header
+     */
+    withFixedHeader?: boolean;
+    /**
+     * borderWithRadius prop to have table with border 1px and borderRadius 5px
+     */
+    borderWithRadius?: boolean;
+    /**
+     * Check box feature to select the row
+     */
+    withCheckbox?: boolean;
+    /**
+     * Event for checkbox onClick
+     */
+    onSelect?: (e: object, arg: SelectedItemProps) => void;
+    /**
+     * Check box feature to select the row
+     */
+    allSelected?: boolean;
+    /**
+     * send true to show partial checkbox in the header
+     */
+    partialSelected?: boolean;
+    /**
+     * send true to disable the checkbox in the header
+     */
+    headerCheckboxDisabled?: boolean;
+    /**
+     * The content that to be displayed if no data not found
+     */
+    noDataContent: string | ReactNode;
+    /**
+     * Image that to be displayed if you don't have data
+     */
+    noDataImage?: string;
+    /**
+     * Size of the image that to be displayed if you don't have data
+     */
+    noDataImageSize?: 'x-large' | 'large' | 'medium' | 'small' | 'x-small';
+    /**
+     *  Height of the table in string
+     */
+    height?: string;
+    /**
+     *  classNames for the table container
+     */
+    className?: string;
+}

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

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

package/lib/components/TableTree/TableTree.d.ts

@@ -0,0 +1,21 @@
+import './TableTree.scss';
+import React, { ReactNode } from 'react';
+interface ColumnDataProps {
+    name: string;
+    accessor: string;
+    width: string;
+    isClickable?: boolean;
+    minWidth?: string;
+    cell?: (e: any) => JSX.Element | string | ReactNode;
+}
+interface ObjectProps {
+    [key: string]: any;
+}
+interface TableTreeProps {
+    withCheckBox: boolean;
+    columnsData: Array<ColumnDataProps>;
+    treeData: Array<ObjectProps>;
+    onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>, data: any) => void;
+}
+declare const TableTree: ({ columnsData, treeData, onClick, }: TableTreeProps) => import("react/jsx-runtime").JSX.Element;
+export default TableTree;

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

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

package/lib/components/TableTree/data.d.ts

@@ -0,0 +1,313 @@
+declare const extendedData: {
+    subModuleCount: number;
+    title: string;
+    scriptCount: number;
+    path: string;
+    expanded: boolean;
+    modifiedOn: string;
+    children: ({
+        subModuleCount: number;
+        title: string;
+        scriptCount: number;
+        path: string;
+        expanded: boolean;
+        modifiedOn: string;
+        folder: boolean;
+        children: ({
+            ver: number;
+            hierarchy: number;
+            subModuleCount: number;
+            assigneeCount: number;
+            searchKey: string;
+            modifiedByUname: string;
+            title: string;
+            scriptCount: number;
+            executionOrder: number;
+            createdByUname: string;
+            parentId: string;
+            path: string;
+            expanded: boolean;
+            modifiedOn: string;
+            parentName: string;
+            moduleLevelScriptCount: number;
+            lastExecutionOrder: number;
+            imported: boolean;
+            name: string;
+            modifiedBy: string;
+            moduleCountWithScript: number;
+            state: string;
+            key: string;
+            folder: boolean;
+            children: {
+                ver: number;
+                hierarchy: number;
+                subModuleCount: number;
+                assigneeCount: number;
+                searchKey: string;
+                modifiedByUname: string;
+                title: string;
+                scriptCount: number;
+                executionOrder: number;
+                createdByUname: string;
+                parentId: string;
+                path: string;
+                expanded: boolean;
+                modifiedOn: string;
+                parentName: string;
+                moduleLevelScriptCount: number;
+                lastExecutionOrder: number;
+                imported: boolean;
+                name: string;
+                modifiedBy: string;
+                moduleCountWithScript: number;
+                state: string;
+                key: string;
+            }[];
+        } | {
+            subModuleCount: number;
+            title: string;
+            scriptCount: number;
+            path: string;
+            expanded: boolean;
+            modifiedOn: string;
+            folder: boolean;
+            children: {
+                ver: number;
+                hierarchy: number;
+                subModuleCount: number;
+                assigneeCount: number;
+                searchKey: string;
+                modifiedByUname: string;
+                title: string;
+                scriptCount: number;
+                executionOrder: number;
+                createdByUname: string;
+                parentId: string;
+                path: string;
+                expanded: boolean;
+                modifiedOn: string;
+                parentName: string;
+                moduleLevelScriptCount: number;
+                lastExecutionOrder: number;
+                imported: boolean;
+                name: string;
+                modifiedBy: string;
+                moduleCountWithScript: number;
+                state: string;
+                key: string;
+                folder: boolean;
+                children: {
+                    ver: number;
+                    hierarchy: number;
+                    subModuleCount: number;
+                    assigneeCount: number;
+                    searchKey: string;
+                    modifiedByUname: string;
+                    title: string;
+                    scriptCount: number;
+                    executionOrder: number;
+                    createdByUname: string;
+                    parentId: string;
+                    path: string;
+                    expanded: boolean;
+                    modifiedOn: string;
+                    parentName: string;
+                    moduleLevelScriptCount: number;
+                    lastExecutionOrder: number;
+                    imported: boolean;
+                    name: string;
+                    modifiedBy: string;
+                    moduleCountWithScript: number;
+                    state: string;
+                    key: string;
+                }[];
+            }[];
+            ver?: undefined;
+            hierarchy?: undefined;
+            assigneeCount?: undefined;
+            searchKey?: undefined;
+            modifiedByUname?: undefined;
+            executionOrder?: undefined;
+            createdByUname?: undefined;
+            parentId?: undefined;
+            parentName?: undefined;
+            moduleLevelScriptCount?: undefined;
+            lastExecutionOrder?: undefined;
+            imported?: undefined;
+            name?: undefined;
+            modifiedBy?: undefined;
+            moduleCountWithScript?: undefined;
+            state?: undefined;
+            key?: undefined;
+        } | {
+            ver: number;
+            hierarchy: number;
+            subModuleCount: number;
+            assigneeCount: number;
+            searchKey: string;
+            modifiedByUname: string;
+            title: string;
+            scriptCount: number;
+            executionOrder: number;
+            createdByUname: string;
+            parentId: string;
+            path: string;
+            expanded: boolean;
+            modifiedOn: string;
+            parentName: string;
+            moduleLevelScriptCount: number;
+            lastExecutionOrder: number;
+            imported: boolean;
+            name: string;
+            modifiedBy: string;
+            moduleCountWithScript: number;
+            state: string;
+            key: string;
+            folder?: undefined;
+            children?: undefined;
+        } | {
+            subModuleCount: number;
+            title: string;
+            scriptCount: number;
+            path: string;
+            expanded: boolean;
+            modifiedOn: string;
+            folder: boolean;
+            children: {
+                ver: number;
+                hierarchy: number;
+                subModuleCount: number;
+                assigneeCount: number;
+                searchKey: string;
+                modifiedByUname: string;
+                title: string;
+                scriptCount: number;
+                executionOrder: number;
+                createdByUname: string;
+                parentId: string;
+                path: string;
+                expanded: boolean;
+                modifiedOn: string;
+                parentName: string;
+                moduleLevelScriptCount: number;
+                lastExecutionOrder: number;
+                imported: boolean;
+                name: string;
+                modifiedBy: string;
+                moduleCountWithScript: number;
+                state: string;
+                key: string;
+            }[];
+            ver?: undefined;
+            hierarchy?: undefined;
+            assigneeCount?: undefined;
+            searchKey?: undefined;
+            modifiedByUname?: undefined;
+            executionOrder?: undefined;
+            createdByUname?: undefined;
+            parentId?: undefined;
+            parentName?: undefined;
+            moduleLevelScriptCount?: undefined;
+            lastExecutionOrder?: undefined;
+            imported?: undefined;
+            name?: undefined;
+            modifiedBy?: undefined;
+            moduleCountWithScript?: undefined;
+            state?: undefined;
+            key?: undefined;
+        })[];
+        ver?: undefined;
+        hierarchy?: undefined;
+        assigneeCount?: undefined;
+        searchKey?: undefined;
+        modifiedByUname?: undefined;
+        executionOrder?: undefined;
+        createdByUname?: undefined;
+        parentId?: undefined;
+        parentName?: undefined;
+        moduleLevelScriptCount?: undefined;
+        lastExecutionOrder?: undefined;
+        imported?: undefined;
+        name?: undefined;
+        modifiedBy?: undefined;
+        moduleCountWithScript?: undefined;
+        state?: undefined;
+        key?: undefined;
+    } | {
+        ver: number;
+        hierarchy: number;
+        subModuleCount: number;
+        assigneeCount: number;
+        searchKey: string;
+        modifiedByUname: string;
+        title: string;
+        scriptCount: number;
+        executionOrder: number;
+        createdByUname: string;
+        parentId: string;
+        path: string;
+        expanded: boolean;
+        modifiedOn: string;
+        parentName: string;
+        folder: boolean;
+        moduleLevelScriptCount: number;
+        lastExecutionOrder: number;
+        imported: boolean;
+        name: string;
+        modifiedBy: string;
+        moduleCountWithScript: number;
+        state: string;
+        key: string;
+        children: {
+            subModuleCount: number;
+            title: string;
+            scriptCount: number;
+            path: string;
+            expanded: boolean;
+            modifiedOn: string;
+            folder: boolean;
+            children: {
+                ver: number;
+                hierarchy: number;
+                subModuleCount: number;
+                assigneeCount: number;
+                searchKey: string;
+                modifiedByUname: string;
+                title: string;
+                scriptCount: number;
+                executionOrder: number;
+                createdByUname: string;
+                parentId: string;
+                path: string;
+                expanded: boolean;
+                modifiedOn: string;
+                parentName: string;
+                moduleLevelScriptCount: number;
+                lastExecutionOrder: number;
+                imported: boolean;
+                name: string;
+                modifiedBy: string;
+                moduleCountWithScript: number;
+                state: string;
+                key: string;
+            }[];
+        }[];
+    })[];
+    lastExecutionOrder: number;
+    imported: boolean;
+    modifiedBy: string;
+    moduleCountWithScript: number;
+    state: string;
+    key: string;
+    ver: number;
+    hierarchy: number;
+    assigneeCount: number;
+    searchKey: string;
+    modifiedByUname: string;
+    executionOrder: number;
+    createdByUname: string;
+    folder: boolean;
+    moduleLevelScriptCount: number;
+    name: string;
+}[];
+export default extendedData;

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

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

package/lib/components/Tabs/Tabs.d.ts

@@ -0,0 +1,5 @@
+import { TabsProps } from './types';
+import './Tabs.scss';
+import '../../assets/styles/_colors.scss';
+declare const Tabs: ({ variant, tabsData, activeTabId, onTabClick, }: TabsProps) => import("react/jsx-runtime").JSX.Element;
+export default Tabs;

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

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react';
+import Tabs from './Tabs';
+declare const meta: Meta<typeof Tabs>;
+type Story = StoryObj<typeof Tabs>;
+export declare const DefaultTabs: Story;
+export declare const CapsuleTabs: Story;
+export declare const TabsWithDisabledTab: Story;
+export default meta;

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

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

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

@@ -0,0 +1,40 @@
+export interface Tab {
+    /**
+     * Unique identifier for the tab, for handling click events.
+     */
+    id: string;
+    /**
+     * Display label for the tab.
+     */
+    label: string;
+    /**
+     * The content to display when this tab is active.
+     */
+    component: JSX.Element | React.ReactNode;
+    /**
+     * Optional property to indicate if the tab is disabled.
+     */
+    disabled?: boolean;
+}
+export interface TabsProps {
+    /**
+     * An array of tab objects containing label, component, and optional disabled status.
+     */
+    tabsData: {
+        label: string;
+        component: JSX.Element;
+        disabled?: boolean;
+    }[];
+    /**
+     * Defines the styling variant of the tabs.
+     */
+    variant?: 'default' | 'capsule';
+    /**
+     * activeTabId : The ID of the currently active tab.
+     */
+    activeTabId: string;
+    /**
+     * onTabClick : function updates the active tab state when a user interacts with the tabs,
+     */
+    onTabClick: (id: string) => void;
+}

package/lib/components/TextArea/Textarea.d.ts

@@ -0,0 +1,4 @@
+import './Textarea.scss';
+import { TextareaProps } from './Types';
+declare const Textarea: ({ capacity, name, label, value, variant, error, helperText, disabled, required, placeholder, className, onChange, onBlur, onFocus, rows, cols, resize, ...props }: TextareaProps) => import("react/jsx-runtime").JSX.Element;
+export default Textarea;

package/lib/components/TextArea/Textarea.stories.d.ts

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

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

@@ -0,0 +1,78 @@
+export interface TextareaProps {
+    /**
+     * Name | name of the textarea field
+     */
+    name: string;
+    /**
+     * Label | field label to be displayed
+     */
+    label: string;
+    /**
+     * value | textarea field value
+     */
+    value: string;
+    /**
+     * variants to set color/style of the textarea field
+     */
+    variant?: 'default' | 'primary';
+    /**
+     * error | If true, error message will be displayed
+     */
+    error?: boolean;
+    /**
+     * helperText | error, success, warning message to be shown
+     */
+    helperText?: string;
+    /**
+     * to disable the textarea field
+     */
+    disabled?: boolean;
+    /**
+     * if true, textarea field will be mandatory
+     */
+    required?: boolean;
+    /**
+     * placeholder for the textarea field
+     */
+    placeholder?: string;
+    /**
+     * classnames to style the textarea field
+     */
+    className?: string;
+    /**
+     * onChange, onKeyDown, onBlur, onFocus actions
+     */
+    onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
+    onKeyDown?: (event: React.KeyboardEvent<HTMLTextAreaElement>) => void;
+    onBlur?: (event: React.FocusEvent<HTMLTextAreaElement>) => void;
+    onFocus?: (event: React.FocusEvent<HTMLTextAreaElement>) => void;
+    /**
+     * id to select the textarea field uniquely
+     */
+    id?: string;
+    /**
+     * if on, suggestion popup will be displayed
+     */
+    autoComplete?: 'on' | 'off';
+    /**
+     * background of the textarea field prop
+     */
+    /**
+     * capacity | Maximum number of characters allowed in the textarea.
+     */
+    capacity?: number;
+    /**
+     * rows | Number of visible text lines in the textarea.
+     * Used to control the height of the textarea.
+     */
+    rows?: number;
+    /**
+     * cols | Number of visible character widths in the textarea.
+     * Used to control the width of the textarea.
+     */
+    cols?: number;
+    /**
+     * for resizing purpose
+     */
+    resize?: boolean;
+}

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

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

package/lib/components/ThemeProvider/ThemeProvider.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { ThemeContextType, ThemeProviderProps } from './types';
+import '../../assets/Themes/Theme.scss';
+declare const ThemeContext: React.Context<ThemeContextType | undefined>;
+declare const ThemeProvider: React.FC<ThemeProviderProps>;
+export { ThemeContext };
+export default ThemeProvider;

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

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

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

@@ -0,0 +1,11 @@
+import { ReactNode } from "react";
+export type Theme = 'ff-light-theme' | 'ff-dark-theme' | 'ff-grey-theme';
+export interface ThemeContextType {
+    currentTheme: Theme;
+    setCurrentTheme: React.Dispatch<React.SetStateAction<Theme>>;
+    applyTheme: (newTheme: Theme) => void;
+}
+export interface ThemeProviderProps {
+    children?: ReactNode;
+    theme?: Theme;
+}

package/lib/components/Toast/Toast.d.ts

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

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

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

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

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

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

@@ -0,0 +1,20 @@
+export interface ToasterProps {
+    /**Boolean value to handle state of toaster. */
+    isOpen: boolean;
+    /**Variant for different type of toast message. */
+    variant: 'success' | 'warning' | 'danger' | 'info' | 'confirm';
+    /**Title of the toaster  */
+    toastTitle: string;
+    /**Message for the toaster. */
+    toastMessage?: string;
+    /**Function to call upon clicking the close icon or cancel button. */
+    onCancelClick?: () => void;
+    /**Function to call when confirmation the prompt. */
+    onConfirmation?: () => void;
+    /**Duration in ms for which toaster will stay on the screen */
+    displayDuration?: number;
+    /**Confirmation text for variant confirm. */
+    confirmationText?: string;
+    /**z-index value */
+    zIndex?: number;
+}

package/lib/components/Toggle/Toggle.d.ts

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