pixel-virtual-tree 1.0.0

package/lib/components/Tabs/Tabs.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './Tabs.scss';
+import classNames from 'classnames';
+import Typography from '../Typography';
+import '../../assets/styles/_colors.scss';
+import Icon from '../Icon';
+const Tabs = ({ variant = 'default', tabsData, activeTabId, onTabClick, noBorder = false, noPadding = false, titleSize = '12px', isBorderBottomLine = false, isHoverBackground = false, isBorderRadius = false, tabFlexSpacing = 'flex-start', }) => {
+    return (_jsxs("div", { className: `ff-tabs-container`, children: [_jsx("div", { className: classNames(`ff-tab-row--${variant} ff-tab-row-spacing--${tabFlexSpacing}`, {
+                    'ff-tab-row--no-border': noBorder,
+                    'ff-tab-row--no-padding': noPadding,
+                    'ff-tab-row--borderBottomLine': isBorderBottomLine,
+                }), children: tabsData.map((tab) => (_jsxs("button", { onClick: () => !tab.disabled && onTabClick(tab.id), disabled: tab.disabled, className: classNames(`ff-tab-button--${variant}`, {
+                        disabled: tab.disabled,
+                        active: activeTabId === tab.id,
+                        'ff-tab-button-bg': isHoverBackground,
+                    }), children: [_jsxs("div", { className: "label-count-section", children: [_jsx(Typography, { children: tab.label, fontSize: titleSize, lineHeight: "18px", fontWeight: activeTabId === tab.id ? 'semi-bold' : 'regular', color: activeTabId === tab.id
+                                        ? 'var(--tabs-label-active-color)'
+                                        : 'var(--tabs-label-default-color)', className: classNames('ff-tab-label', {
+                                        'ff-tab-label--active': activeTabId === tab.id,
+                                    }) }), variant === 'default' && tab.count !== undefined && (_jsx("span", { className: classNames('tab-count', {
+                                        'tab-count--active': activeTabId === tab.id,
+                                    }), children: tab.count })), tab.icon && (_jsx(Icon, { name: tab.icon, className: classNames('ff-tab-icon', {
+                                        'ff-tab-icon--active': activeTabId === tab.id,
+                                    }) }))] }), _jsx("div", { className: classNames('ff-tab-bar', {
+                                'ff-tab-bar--active': activeTabId === tab.id,
+                                'ff-tab-bar--radius-4': isBorderRadius,
+                                'ff-tab-bar--radius-2': !isBorderRadius,
+                            }) }), _jsx("span", { className: `ff-defaultStatus ${tab.status === 'success'
+                                ? 'ff-successStatus'
+                                : tab.status === 'error'
+                                    ? 'ff-dangerStatus'
+                                    : ''}` })] }, tab.id))) }), _jsx("div", { className: `ff-tab-content`, children: tabsData.find((tab) => tab.id === activeTabId)?.component })] }));
+};
+export default Tabs;
+//# sourceMappingURL=Tabs.js.map

package/lib/components/Tabs/Tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":"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"}

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

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

package/lib/components/Tabs/index.js

@@ -0,0 +1,2 @@
+export { default } from './Tabs';
+//# sourceMappingURL=index.js.map

package/lib/components/Tabs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Tabs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC"}

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

@@ -0,0 +1,69 @@
+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: {
+        id: string;
+        label: string;
+        icon?: string;
+        component?: JSX.Element;
+        disabled?: boolean;
+        count?: number | string;
+        status?: 'success' | 'error' | 'transparent';
+    }[];
+    /**
+     * 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;
+    /**
+     * noBorder:true , removes the outer border from tabs
+     */
+    noBorder?: boolean;
+    noPadding?: boolean;
+    /**
+     * titleSize is to accpect dynamic font size
+     */
+    titleSize?: number | string;
+    /**
+     * to add borderBottom line
+     */
+    isBorderBottomLine?: boolean;
+    /**
+     *  to change background on hover
+     */
+    isHoverBackground?: boolean;
+    /**
+     *  to add border-radius to tabs
+     */
+    isBorderRadius?: boolean;
+    /**
+     * tabFlexSpacing : Defines the flex spacing for the tab row.
+     */
+    tabFlexSpacing?: 'space-between' | 'space-around' | 'flex-start' | 'flex-end' | 'center';
+}

package/lib/components/Tabs/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/lib/components/Tabs/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/Tabs/types.ts"],"names":[],"mappings":""}

package/lib/components/TabsWithSilder/TabsWithSilder.d.ts

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

package/lib/components/TabsWithSilder/TabsWithSilder.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './TabsWithSilder.scss';
+import classNames from 'classnames';
+import Typography from '../Typography';
+import '../../assets/styles/_colors.scss';
+import Icon from '../Icon';
+import { useState } from 'react';
+import Tooltip from '../Tooltip';
+const TabsWithSilder = ({ variant = 'default', tabsData, activeTabId, onTabClick, noBorder = false, noPadding = false, titleSize = '12px', }) => {
+    const [currentSlide, setCurrentSlide] = useState(0);
+    const tabsPerSlide = 4; // as confirmed there should be 4 tabs per slide
+    const handleNext = () => {
+        if (currentSlide < Math.ceil(tabsData.length / tabsPerSlide) - 1) {
+            setCurrentSlide((prev) => prev + 1);
+        }
+    };
+    const handlePrev = () => {
+        if (currentSlide > 0) {
+            setCurrentSlide((prev) => prev - 1);
+        }
+    };
+    return (_jsxs("div", { className: `ff-tabs-slider-container`, children: [_jsxs("div", { className: classNames(`ff-tab-row--${variant} ff-tab-row-section`, {
+                    'ff-tab-row--no-border': noBorder,
+                    'ff-tab-row--no-padding': noPadding,
+                    'ff-tab-row--position': tabsData.length > tabsPerSlide,
+                }), children: [tabsData.length > tabsPerSlide && (_jsx(Icon, { className: "ff-tab-icon ff-tab-icon--previous", name: `${currentSlide ? 'arrow_left_accordian' : ''}`, onClick: handlePrev, hoverEffect: true })), _jsx("div", { className: "ff-tab-row-carousel", children: _jsx("div", { className: 'carousel_inner', style: {
+                                transform: `translateX(-${currentSlide * 100}%)`,
+                            }, children: tabsData.map((tab) => (_jsxs("button", { onClick: () => !tab.disabled && onTabClick(tab.id), disabled: tab.disabled, className: classNames(`ff-tab-button--${variant}`, {
+                                    disabled: tab.disabled,
+                                    active: activeTabId === tab.id,
+                                }), style: {
+                                    flex: `0 0 ${100 / tabsPerSlide}%`,
+                                }, children: [_jsxs("div", { className: "label-count-section", children: [_jsx(Tooltip, { title: tab.label.length > 9 ? tab.label : '', children: _jsx(Typography, { children: tab.label.length > 9
+                                                        ? tab.label.slice(0, 9) + '...'
+                                                        : tab.label, fontSize: titleSize, lineHeight: "18px", fontWeight: activeTabId === tab.id ? 'semi-bold' : 'regular', color: activeTabId === tab.id
+                                                        ? 'var(--tabs-label-active-color)'
+                                                        : 'var(--tabs-label-default-color)', className: classNames('ff-tab-label', {
+                                                        'ff-tab-label--active': activeTabId === tab.id,
+                                                    }) }) }), variant === 'default' && tab.count && (_jsx("span", { className: classNames('tab-count', {
+                                                    'tab-count--active': activeTabId === tab.id,
+                                                }), children: tab.count }))] }), _jsx("div", { className: classNames('ff-tab-bar', {
+                                            'ff-tab-bar--active': activeTabId === tab.id,
+                                        }) }), _jsx("span", { className: `ff-defaultStatus ${tab.status === 'success'
+                                            ? 'ff-successStatus'
+                                            : tab.status === 'error'
+                                                ? 'ff-dangerStatus'
+                                                : ''}` })] }, tab.id))) }) }), tabsData.length > tabsPerSlide && (_jsx(Icon, { className: "ff-tab-icon ff-tab-icon--next", name: `${currentSlide < Math.ceil(tabsData.length / tabsPerSlide) - 1
+                            ? 'arrow_right_icon'
+                            : ''}`, onClick: handleNext, hoverEffect: true }))] }), _jsx("div", { className: `ff-tab-content`, children: tabsData.find((tab) => tab.id === activeTabId)?.component })] }));
+};
+export default TabsWithSilder;
+//# sourceMappingURL=TabsWithSilder.js.map

package/lib/components/TabsWithSilder/TabsWithSilder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabsWithSilder.js","sourceRoot":"","sources":["../../../src/components/TabsWithSilder/TabsWithSilder.tsx"],"names":[],"mappings":"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"}

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

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

package/lib/components/TabsWithSilder/index.js

@@ -0,0 +1,2 @@
+export { default } from './TabsWithSilder';
+//# sourceMappingURL=index.js.map

package/lib/components/TabsWithSilder/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/TabsWithSilder/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC"}

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

@@ -0,0 +1,52 @@
+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: {
+        id: string;
+        label: string;
+        component?: JSX.Element;
+        disabled?: boolean;
+        count?: number | string;
+        status?: 'success' | 'error' | 'transparent';
+    }[];
+    /**
+     * 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;
+    /**
+     * noBorder:true , removes the outer border from tabs
+     */
+    noBorder?: boolean;
+    noPadding?: boolean;
+    /**
+     * titleSize is to accpect dynamic font size
+     */
+    titleSize?: number | string;
+}

package/lib/components/TabsWithSilder/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/lib/components/TabsWithSilder/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/TabsWithSilder/types.ts"],"names":[],"mappings":""}

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, onPaste, rows, cols, resize, errorText, readOnly, displayCapacity, isLabelRequired, ...props }: TextareaProps) => import("react/jsx-runtime").JSX.Element;
+export default Textarea;

package/lib/components/TextArea/Textarea.js

@@ -0,0 +1,85 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from 'classnames';
+import './Textarea.scss';
+import Typography from '../Typography';
+import { ENTER_NEW_LINE_REGEX } from '../../validations/regex';
+const getCharacterCount = (value) => {
+    return value.replace(ENTER_NEW_LINE_REGEX, '').length;
+};
+const Textarea = ({ capacity = 200, name, label, value = '', variant = 'primary', error, helperText = '', disabled = false, required = false, placeholder = 'Enter text', className = '', onChange, onBlur, onFocus, onPaste, rows = 4, cols = 40, resize = false, errorText, readOnly = false, displayCapacity = true, isLabelRequired = true, ...props }) => {
+    const labelClasses = classNames('ff-textarea-label ff-textarea-label--' + variant, {
+        'ff-textarea-label--danger': error,
+        'ff-textarea-label--disabled': disabled && !value,
+    });
+    const textareaClasses = classNames(`ff-textarea ff-textarea--${variant}`, className, {
+        'ff-textarea--danger': error,
+        'ff-textarea--resize': !resize,
+        'ff-textarea--placeholder': !isLabelRequired,
+    });
+    const containerClasses = classNames('ff-textarea-container', {
+        'ff-textarea-container--disabled': disabled,
+        'ff-textarea-container--float': Boolean(value),
+    });
+    const isError = error || !value;
+    const errorMessage = isError ? (_jsx("span", { className: "ff-textarea-error-text", children: _jsx(Typography, { fontSize: 10, children: errorText }) })) : null;
+    const handleChange = (e) => {
+        const newValue = e.target.value;
+        const characterCount = getCharacterCount(newValue);
+        if (characterCount <= capacity) {
+            onChange?.(e);
+        }
+    };
+    const handleKeyDown = (e) => {
+        if (e.key === 'Enter') {
+            const textarea = e.currentTarget;
+            const cursorPos = textarea.selectionStart;
+            const value = textarea.value;
+            const textBeforeCursor = value.substring(0, cursorPos);
+            const currentLine = textBeforeCursor.split('\n').pop() || '';
+            if (currentLine.trim() === '') {
+                e.preventDefault();
+            }
+        }
+        props.onKeyDown?.(e);
+    };
+    const handlePaste = (e) => {
+        e.preventDefault();
+        const pastedText = e.clipboardData.getData('text/plain');
+        const processedText = pastedText
+            .split('\n')
+            .filter((line) => line.trim() !== '')
+            .join('\n');
+        const textarea = e.currentTarget;
+        const start = textarea.selectionStart;
+        const end = textarea.selectionEnd;
+        const textBefore = textarea.value.slice(0, start);
+        const textAfter = textarea.value.slice(end);
+        const currentCount = getCharacterCount(textBefore + textAfter);
+        let allowedCount = capacity - currentCount;
+        let limitedPastedText = '';
+        for (const char of processedText) {
+            if (char === '\n') {
+                limitedPastedText += char;
+            }
+            else if (allowedCount > 0) {
+                limitedPastedText += char;
+                allowedCount--;
+            }
+        }
+        const newValue = textBefore + limitedPastedText + textAfter;
+        const event = {
+            ...e,
+            target: {
+                ...textarea,
+                value: newValue,
+            },
+        };
+        onChange?.(event);
+        onPaste?.(e);
+    };
+    return (_jsxs("div", { className: containerClasses, children: [isLabelRequired && (_jsx("label", { htmlFor: name, className: classNames('ff-textarea-label-container', {
+                    'ff-textarea-label-container--danger': error,
+                }), children: _jsxs("span", { className: labelClasses, children: [required && _jsx("span", { className: "required-asterisk", children: "*" }), label] }) })), _jsx("textarea", { name: name, value: value, id: name, className: textareaClasses, placeholder: placeholder, disabled: disabled, onChange: handleChange, onBlur: onBlur, onFocus: onFocus, onKeyDown: handleKeyDown, onPaste: handlePaste, required: required, rows: rows, cols: cols, readOnly: readOnly, ...props }), _jsxs("div", { className: isError ? 'ff-textarea-error-alignment' : 'msg-character-count', children: [errorMessage, capacity > 0 && !readOnly && displayCapacity && (_jsxs("div", { className: 'ff-textarea-character-count', children: [_jsxs(Typography, { fontSize: 8, children: [getCharacterCount(value), "/"] }), _jsx(Typography, { fontSize: 8, children: capacity })] }))] })] }));
+};
+export default Textarea;
+//# sourceMappingURL=Textarea.js.map

package/lib/components/TextArea/Textarea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.js","sourceRoot":"","sources":["../../../src/components/TextArea/Textarea.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,92 @@
+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;
+    onPaste?: (event: React.ClipboardEvent<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;
+    errorText?: string;
+    /**
+     * To make text are read only state
+     */
+    readOnly?: boolean;
+    /**
+     * To show the capacity of textArea chars.
+     */
+    displayCapacity?: boolean;
+    /**
+     * isLabe lRequired for the textArea field without label, showing placeholder
+     */
+    isLabelRequired?: boolean;
+}

package/lib/components/TextArea/Types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Types.js.map

package/lib/components/TextArea/Types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Types.js","sourceRoot":"","sources":["../../../src/components/TextArea/Types.ts"],"names":[],"mappings":""}

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

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

package/lib/components/TextArea/index.js

@@ -0,0 +1,2 @@
+export { default } from './Textarea';
+//# sourceMappingURL=index.js.map

package/lib/components/TextArea/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/TextArea/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC"}

package/lib/components/TextEditor/TextEditor.d.ts

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