qlu-20-ui-library 1.7.91 → 1.8.0

package/dist/types/components/TextAreaWithTooltip/TextAreaWithTooltip.d.ts

@@ -0,0 +1,17 @@
+import { CSSProperties } from "react";
+import { IconSize, IconType } from "../../types";
+type Tooltip = {
+    tooltipName: string;
+    tooltipIconName: IconType;
+    tooltipIconSize: IconSize;
+};
+interface Props {
+    value: string;
+    handleChange: (newTextValue: string) => void;
+    placeholder?: string;
+    tooltip?: Tooltip;
+    customStyles?: CSSProperties;
+    maxLength?: number;
+}
+declare const TextAreaWithTooltip: ({ value, handleChange, placeholder, customStyles, maxLength, }: Props) => import("react/jsx-runtime").JSX.Element;
+export default TextAreaWithTooltip;

package/dist/types/components/TextAreaWithTooltip/TextAreaWithTooltip.js

@@ -0,0 +1,100 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { useEditor, EditorContent } from "@tiptap/react";
+import StarterKit from "@tiptap/starter-kit";
+import styles from "./TextAreaWithTooltip.module.scss";
+const TextAreaWithTooltip = ({ value, handleChange, placeholder = "", customStyles = {}, maxLength, }) => {
+    const [characterCount, setCharacterCount] = useState(0);
+    const editor = useEditor({
+        extensions: [
+            StarterKit.configure({
+                // Disable features we don't need for a simple text area
+                heading: false,
+                bold: false,
+                italic: false,
+                strike: false,
+                code: false,
+                codeBlock: false,
+                blockquote: false,
+                horizontalRule: false,
+                bulletList: false,
+                orderedList: false,
+                listItem: false,
+            }),
+        ],
+        content: value,
+        editable: true,
+        onUpdate: ({ editor }) => {
+            const text = editor.getText();
+            const textLength = text.length;
+            setCharacterCount(textLength);
+            // Handle max length constraint
+            if (maxLength && textLength > maxLength) {
+                const truncatedText = text.substring(0, maxLength);
+                editor.commands.setContent(truncatedText);
+                return;
+            }
+            handleChange(text);
+        },
+        onCreate: ({ editor }) => {
+            if (value) {
+                editor.commands.setContent(value);
+                setCharacterCount(editor.getText().length);
+            }
+        },
+        editorProps: {
+            attributes: {
+                class: styles['textAreaWithTooltip-editor'],
+            },
+            handlePaste: (_view, event) => {
+                if (!maxLength) {
+                    return false; // Let Tiptap handle normally
+                }
+                const paste = event.clipboardData?.getData('text/plain') || '';
+                const currentText = editor?.getText() || '';
+                const remainingCharacters = maxLength - currentText.length;
+                if (remainingCharacters <= 0) {
+                    event.preventDefault();
+                    return true;
+                }
+                if (paste.length > remainingCharacters) {
+                    const truncatedPaste = paste.substring(0, remainingCharacters);
+                    event.preventDefault();
+                    editor?.commands.insertContent(truncatedPaste);
+                    return true;
+                }
+                return false; // Let Tiptap handle normally
+            },
+            handleTextInput: (_view, _from, _to, _text) => {
+                if (!maxLength) {
+                    return false; // Let Tiptap handle normally
+                }
+                const currentText = editor?.getText() || '';
+                if (currentText.length >= maxLength) {
+                    return true; // Block the input
+                }
+                return false; // Let Tiptap handle normally
+            },
+        },
+    });
+    // Update editor content when value prop changes
+    useEffect(() => {
+        if (editor && value !== editor.getText()) {
+            editor.commands.setContent(value);
+            setCharacterCount(editor.getText().length);
+        }
+    }, [value, editor]);
+    // Handle character limit through editor configuration
+    useEffect(() => {
+        if (editor && maxLength) {
+            const text = editor.getText();
+            if (text.length > maxLength) {
+                const truncatedText = text.substring(0, maxLength);
+                editor.commands.setContent(truncatedText);
+                setCharacterCount(maxLength);
+            }
+        }
+    }, [editor, maxLength, characterCount]);
+    return (_jsxs("div", { className: styles['textAreaWithTooltip-Wrapper'], children: [_jsxs("div", { className: styles['textAreaWithTooltip-Container'], style: customStyles, children: [_jsx(EditorContent, { editor: editor }), !editor?.getText() && (_jsx("div", { className: styles['textAreaWithTooltip-placeholder'], children: placeholder }))] }), maxLength && (_jsxs("p", { className: styles['textAreaWithTooltip-charactersLeft'], children: [maxLength - characterCount, " characters left"] }))] }));
+};
+export default TextAreaWithTooltip;

package/dist/types/components/TextAreaWithTooltip/index.d.ts

@@ -1,19 +1 @@
-import { CSSProperties } from "react";
-import "draft-js/dist/Draft.css";
-import "./style.scss";
-import { IconSize, IconType } from "../../types";
-type Tooltip = {
-    tooltipName: string;
-    tooltipIconName: IconType;
-    tooltipIconSize: IconSize;
-};
-interface Props {
-    value: string;
-    handleChange: (newTextValue: string) => void;
-    placeholder?: string;
-    tooltip?: Tooltip;
-    customStyles?: CSSProperties;
-    maxLength?: number;
-}
-declare const TextAreaWithTooltip: ({ value, handleChange, placeholder, customStyles, maxLength, }: Props) => import("react/jsx-runtime").JSX.Element;
-export default TextAreaWithTooltip;
+export { default } from "./TextAreaWithTooltip";

package/dist/types/components/TextAreaWithTooltip/index.js

@@ -1,70 +1 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect } from "react";
-import { Editor, EditorState, ContentState, Modifier } from "draft-js";
-import "draft-js/dist/Draft.css";
-import "./style.scss";
-const TextAreaWithTooltip = ({ value, handleChange, placeholder = "", customStyles = {}, maxLength, }) => {
-    //TODO: Found a draft js bug, when all the text in the editor is selected
-    // with mouse, and back space is pressed, only the last character
-    // is deleted, when the delete button is clicked, nothing is
-    // deleted the first time, but the second time you click
-    // delete, everything is properly deleted. When Ctrl+A is used to
-    // select all the text in the Editor however, the text can be
-    // backspace'd / delete'd properly without issue
-    // This issue is persistent thru all the components using
-    // Draft js, Need to figure out what's causing it.
-    const [editorState, setEditorState] = useState(() => EditorState.createEmpty());
-    useEffect(() => {
-        const newContentState = EditorState.createWithContent(ContentState.createFromText(value));
-        setEditorState(newContentState);
-    }, []);
-    const handleEditorChange = (newEditorState) => {
-        setEditorState(newEditorState);
-        handleChange(newEditorState.getCurrentContent().getPlainText());
-    };
-    const handleBeforeInput = (chars, newEditorState) => {
-        if (!maxLength) {
-            return "not-handled";
-        }
-        else {
-            if (newEditorState.getCurrentContent().getPlainText().length === maxLength) {
-                return "handled";
-                console.log(chars);
-            }
-            else {
-                return "not-handled";
-            }
-        }
-    };
-    const handlePastedText = (text, html, currentEditorState) => {
-        if (!maxLength) {
-            const contentState = Modifier.replaceText(editorState.getCurrentContent(), editorState.getSelection(), text);
-            const newEditorState = EditorState.push(editorState, contentState, "insert-characters");
-            setEditorState(newEditorState);
-            handleChange(newEditorState.getCurrentContent().getPlainText());
-            return "handled";
-            console.log(html);
-        }
-        else {
-            const remainingCharacters = maxLength -
-                currentEditorState.getCurrentContent().getPlainText().length;
-            if (remainingCharacters < text.length) {
-                const slicedText = text.slice(0, remainingCharacters - 1);
-                const contentState = Modifier.replaceText(editorState.getCurrentContent(), editorState.getSelection(), slicedText);
-                const newEditorState = EditorState.push(editorState, contentState, "insert-characters");
-                setEditorState(newEditorState);
-                handleChange(newEditorState.getCurrentContent().getPlainText());
-                return "handled";
-                console.log(html);
-            }
-            return "not-handled";
-        }
-    };
-    return (
-    // <div style={{ height: "300px" }}>
-    _jsxs("div", { className: "textAreaWithTooltip-Wrapper", children: [_jsx("div", { className: "textAreaWithTooltip-Container", style: customStyles, children: _jsx(Editor, { editorState: editorState, onChange: handleEditorChange, placeholder: placeholder, handlePastedText: (text, html, editorState) => handlePastedText(text, html, editorState), handleBeforeInput: handleBeforeInput }) }), maxLength && (_jsxs("p", { className: "textAreaWithTooltip-charactersLeft", children: [maxLength -
-                        editorState.getCurrentContent().getPlainText().length, " ", "characters left"] }))] })
-    // </div>
-    );
-};
-export default TextAreaWithTooltip;
+export { default } from "./TextAreaWithTooltip";

package/dist/types/components/TextBoxWithSuggestions/TextBoxWithSuggestions.d.ts

@@ -0,0 +1,13 @@
+type Suggestion = {
+    suggestionHeading: string;
+    suggestionText: string;
+    suggestionActive: boolean;
+};
+interface Props {
+    heading: string;
+    value: string;
+    handleChange: (newTextValue: string) => void;
+    suggestionList: Array<Suggestion>;
+}
+declare const TextBoxWithSuggestions: ({ heading, value, handleChange, suggestionList }: Props) => import("react/jsx-runtime").JSX.Element;
+export default TextBoxWithSuggestions;

package/dist/types/components/TextBoxWithSuggestions/TextBoxWithSuggestions.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { useEditor, EditorContent } from "@tiptap/react";
+import StarterKit from "@tiptap/starter-kit";
+import styles from "./TextBoxWithSuggestions.module.scss";
+const TextBoxWithSuggestions = ({ heading, value, handleChange, suggestionList }) => {
+    const [suggestionsActive, setSuggestionsActive] = useState([]);
+    const editor = useEditor({
+        extensions: [
+            StarterKit.configure({
+                // Disable features we don't need for a simple text area
+                heading: false,
+                bold: false,
+                italic: false,
+                strike: false,
+                code: false,
+                codeBlock: false,
+                blockquote: false,
+                horizontalRule: false,
+                bulletList: false,
+                orderedList: false,
+                listItem: false,
+            }),
+        ],
+        content: value,
+        editable: true,
+        onUpdate: ({ editor }) => {
+            const text = editor.getText();
+            handleChange(text);
+            // Reset suggestions when editor is empty
+            if (text.length === 0) {
+                setSuggestionsActive(prevState => prevState.map(() => false));
+            }
+        },
+        onCreate: ({ editor }) => {
+            if (value) {
+                editor.commands.setContent(value);
+            }
+        },
+        editorProps: {
+            attributes: {
+                class: styles['textBoxWithSuggestions-editor'],
+            },
+        },
+    });
+    // Initialize suggestions active state
+    useEffect(() => {
+        setSuggestionsActive(suggestionList.map(() => false));
+    }, []);
+    // Update editor content when value prop changes
+    useEffect(() => {
+        if (editor && value !== editor.getText()) {
+            editor.commands.setContent(value);
+        }
+    }, [value, editor]);
+    const addSuggestionTextToEditor = (text) => {
+        if (editor) {
+            editor.chain().focus().insertContent(`${text}\n`).run();
+        }
+    };
+    return (_jsxs("div", { className: styles['textBoxWithSuggestions-Wrapper'], children: [_jsx("p", { className: styles['textBoxWithSuggestionsHeading'], children: heading }), _jsx("div", { className: styles['textBoxWithSuggestions-Container'], children: _jsx(EditorContent, { editor: editor }) }), _jsxs("div", { className: styles['textBoxWithSuggestions-SuggestionsBox'], children: [_jsx("p", { className: styles['textBoxWithSuggestions-SuggestionText'], children: "Suggestions" }), _jsx("div", { className: styles['textBoxWithSuggestions-SuggestionList'], children: suggestionList.map((suggestion, index) => (_jsx("div", { onClick: () => {
+                                if (!suggestionsActive[index]) {
+                                    setSuggestionsActive(prevState => prevState.map((sugg, suggIdx) => {
+                                        if (suggIdx === index)
+                                            return true;
+                                        return sugg;
+                                    }));
+                                    addSuggestionTextToEditor(suggestion.suggestionText);
+                                }
+                            }, className: suggestionsActive[index]
+                                ? styles['suggestionItem--Active']
+                                : styles['suggestionItem--Generic'], children: suggestion.suggestionHeading }, index))) })] })] }));
+};
+export default TextBoxWithSuggestions;

package/dist/types/components/TextBoxWithSuggestions/index.d.ts

@@ -1,15 +1 @@
-import "draft-js/dist/Draft.css";
-import "./style.scss";
-type Suggestion = {
-    suggestionHeading: string;
-    suggestionText: string;
-    suggestionActive: boolean;
-};
-interface Props {
-    heading: string;
-    value: string;
-    handleChange: (newTextValue: string) => void;
-    suggestionList: Array<Suggestion>;
-}
-declare const TextBoxWithSuggestions: ({ heading, value, handleChange, suggestionList }: Props) => import("react/jsx-runtime").JSX.Element;
-export default TextBoxWithSuggestions;
+export { default } from "./TextBoxWithSuggestions";

package/dist/types/components/TextBoxWithSuggestions/index.js

@@ -1,43 +1 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect } from "react";
-import { Editor, EditorState, Modifier, ContentState, } from "draft-js";
-import "draft-js/dist/Draft.css";
-import "./style.scss";
-const TextBoxWithSuggestions = ({ heading, value, handleChange, suggestionList }) => {
-    //TODO: Need to discuss with Huzaifa bhai how to better this component
-    const [editorState, setEditorState] = useState(() => EditorState.createEmpty());
-    const [suggestionsActive, setSuggestionsActive] = useState([]);
-    useEffect(() => {
-        const newContentState = EditorState.createWithContent(ContentState.createFromText(value));
-        setEditorState(newContentState);
-    }, []);
-    useEffect(() => {
-        setSuggestionsActive(suggestionList.map(() => {
-            return false;
-        }));
-    }, []);
-    const handleEditorChange = (newEditorState) => {
-        setEditorState(newEditorState);
-        handleChange(newEditorState.getCurrentContent().getPlainText());
-        if (newEditorState.getCurrentContent().getPlainText().length === 0) {
-            setSuggestionsActive(suggestionsActive.map(() => false));
-        }
-    };
-    const addSuggestionTextToEditor = (text) => {
-        const modifierState = Modifier.insertText(editorState.getCurrentContent(), editorState.getSelection(), `${text}\n`);
-        const newEditorState = EditorState.push(editorState, modifierState, "insert-characters");
-        setEditorState(newEditorState);
-    };
-    return (_jsxs("div", { className: "textBoxWithSuggestions-Wrapper", children: [_jsx("p", { className: "textBoxWithSuggestionsHeading", children: heading }), _jsx("div", { className: "textBoxWithSuggestions-Container", children: _jsx(Editor, { editorState: editorState, onChange: handleEditorChange }) }), _jsxs("div", { className: "textBoxWithSuggestions-SuggestionsBox", children: [_jsx("p", { className: "textBoxWithSuggestions-SuggestionText", children: "Suggestions" }), _jsx("div", { className: "textBoxWithSuggestions-SuggestionList", children: suggestionList.map((suggestion, index) => (_jsx("div", { onClick: () => {
-                                if (!suggestionsActive[index]) {
-                                    setSuggestionsActive(suggestionsActive.map((sugg, suggIdx) => {
-                                        if (suggIdx === index)
-                                            return true;
-                                        return suggestionsActive[suggIdx];
-                                        console.log(sugg);
-                                    }));
-                                    addSuggestionTextToEditor(suggestion.suggestionText);
-                                }
-                            }, className: suggestionsActive[index] ? "suggestionItem--Active" : "suggestionItem--Generic", children: suggestion.suggestionHeading }))) })] })] }));
-};
-export default TextBoxWithSuggestions;
+export { default } from "./TextBoxWithSuggestions";

package/dist/types/components/TextButton/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import './style.scss';
 interface TextButtonProps {
     onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;

package/dist/types/components/TextDropdown/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { IconType } from "../../types";
 import "./style.scss";
 type DropDownItem = {

package/dist/types/components/TopNavbar/NavbarButton/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import './style.scss';
 import { IconType } from '../../../types';
 interface NavbarButtonProps {

package/dist/types/components/TopNavbar/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import "./style.scss";
 import { IconType, TopNavbarButtonTypes } from "../../types";
 interface NavbarProps {

package/dist/types/stories/CampaignMessage.stories.d.ts

@@ -1,6 +1,10 @@
-import type { StoryObj, Meta } from "@storybook/react";
-import CampaignMessage from "../components/CampaignMessage";
+import type { Meta, StoryObj } from '@storybook/react';
+import CampaignMessage from '../components/CampaignMessage';
 declare const meta: Meta<typeof CampaignMessage>;
 export default meta;
-type CampaignMessageProps = StoryObj<typeof CampaignMessage>;
-export declare const Primary: CampaignMessageProps;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithTemplateVariables: Story;
+export declare const CustomPlaceholder: Story;
+export declare const ShorterLimit: Story;
+export declare const MultipleTemplateVariables: Story;

package/dist/types/stories/CampaignMessage.stories.js

@@ -1,12 +1,80 @@
-import CampaignMessage from "../components/CampaignMessage";
+import { jsx as _jsx } from "react/jsx-runtime";
+import CampaignMessage from '../components/CampaignMessage';
+import { useState } from 'react';
 const meta = {
-    title: "Textarea/CampaignMessageTextBox",
+    title: 'Components/CampaignMessage',
     component: CampaignMessage,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        value: {
+            control: 'text',
+            description: 'The current text value of the editor',
+        },
+        placeholder: {
+            control: 'text',
+            description: 'Placeholder text shown when editor is empty',
+        },
+        maxLength: {
+            control: 'number',
+            description: 'Maximum number of characters allowed',
+        },
+    },
 };
 export default meta;
-export const Primary = {
+// Template component for stories that need state management
+const CampaignMessageWithState = (args) => {
+    const [value, setValue] = useState(args.value || '');
+    return (_jsx("div", { style: { width: '600px', padding: '20px' }, children: _jsx(CampaignMessage, { ...args, value: value, handleChange: setValue }) }));
+};
+export const Default = {
+    render: CampaignMessageWithState,
+    args: {
+        value: '',
+        placeholder: 'Type your message...',
+        maxLength: 369,
+    },
+};
+export const WithTemplateVariables = {
+    render: CampaignMessageWithState,
+    args: {
+        value: 'Hi {{.Full_Name}}, I work at {{.My_Full_Name}} and I noticed you work at {{.Current_Company}} as a {{.Current_Title}}. I would love to connect!',
+        placeholder: 'Type your message...',
+        maxLength: 369,
+    },
+};
+export const CustomPlaceholder = {
+    render: CampaignMessageWithState,
+    args: {
+        value: '',
+        placeholder: 'Enter your personalized message here...',
+        maxLength: 369,
+    },
+};
+export const ShorterLimit = {
+    render: CampaignMessageWithState,
+    args: {
+        value: 'This is a test message with {{.Full_Name}}',
+        placeholder: 'Type your message...',
+        maxLength: 100,
+    },
+};
+export const MultipleTemplateVariables = {
+    render: CampaignMessageWithState,
     args: {
-        value: "Hello World!",
-        handleChange: () => false,
+        value: `Dear {{.Full_Name}},
+
+I hope this message finds you well. I'm {{.My_First_Name}} from {{.Hiring_Company}}. 
+
+I came across your profile and was impressed by your experience at {{.Current_Company}} as {{.Current_Title}}. We have an exciting opportunity that might interest you.
+
+Would you be open to a brief conversation?
+
+Best regards,
+{{.My_Full_Name}}`,
+        placeholder: 'Type your message...',
+        maxLength: 500,
     },
 };

package/dist/types/stories/CampaignMessageV1.stories.d.ts

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

package/dist/types/stories/CampaignMessageV1.stories.js

@@ -0,0 +1,12 @@
+import CampaignMessage from "../components/CampaignMessage";
+const meta = {
+    title: "Textarea/CampaignMessageTextBox",
+    component: CampaignMessage,
+};
+export default meta;
+export const Primary = {
+    args: {
+        value: "Hello World!",
+        handleChange: () => false,
+    },
+};

package/dist/types/stories/ContinuousRangeComponent.stories.d.ts

@@ -0,0 +1,8 @@
+import type { StoryObj, Meta } from "@storybook/react";
+import { ContinuousRangeComponent } from "../components";
+declare const meta: Meta<typeof ContinuousRangeComponent>;
+export default meta;
+type ContinuousRangeComponentProps = StoryObj<typeof ContinuousRangeComponent>;
+export declare const Primary: ContinuousRangeComponentProps;
+export declare const Disabled: ContinuousRangeComponentProps;
+export declare const LargeRange: ContinuousRangeComponentProps;

package/dist/types/stories/ContinuousRangeComponent.stories.js

@@ -0,0 +1,37 @@
+import { ContinuousRangeComponent } from "../components";
+const meta = {
+    title: "Slider/ContinuousRangeComponent",
+    component: ContinuousRangeComponent,
+};
+export default meta;
+export const Primary = {
+    args: {
+        getRange: (range) => console.log(`Range: ${range.minRange} - ${range.maxRange}`),
+        minValue: 1000,
+        maxValue: 8000,
+        initialMinValue: 0,
+        initialMaxValue: 10000,
+        displayLimit: 10000,
+    },
+};
+export const Disabled = {
+    args: {
+        getRange: (range) => console.log(`Range: ${range.minRange} - ${range.maxRange}`),
+        minValue: 1000,
+        maxValue: 8000,
+        initialMinValue: 0,
+        initialMaxValue: 10000,
+        displayLimit: 10000,
+        disabled: true,
+    },
+};
+export const LargeRange = {
+    args: {
+        getRange: (range) => console.log(`Range: ${range.minRange} - ${range.maxRange}`),
+        minValue: 50000,
+        maxValue: 150000,
+        initialMinValue: 0,
+        initialMaxValue: 200000,
+        displayLimit: 200000,
+    },
+};

package/dist/types/stories/NoteEditor.stories.d.ts

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import NoteEditor from '../components/NoteEditor';
+declare const meta: Meta<typeof NoteEditor>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithInitialContent: Story;
+export declare const WithRichContent: Story;
+export declare const WithContributors: Story;
+export declare const WithManyContributors: Story;
+export declare const Disabled: Story;
+export declare const Loading: Story;
+export declare const NotesLoading: Story;