react-restyle-components 0.2.89 → 0.2.90

package/lib/src/core-components/src/molecules/color-picker-modal/color-picker-modal.component.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useRef, useState, useEffect } from 'react';
+import { HexColorPicker } from 'react-colorful';
+import { useClickOutside } from '../../hooks';
+import { TooltipProvider, Tooltip } from '../../atoms/tooltip/tooltip.component';
+import { DEFAULT_BG_COLOR, DEFAULT_TEXT_COLOR, STANDARD_COLORS, } from '../../helpers/constants';
+import './color-picker-modal.css';
+import '../../tc.module.css';
+export const ColorPickerModal = ({ color, isVisible = false, testId = 'color-picker', tooltip = '', tooltipSide = 'bottom', onChange, onNoFill, onClose, }) => {
+    const popover = useRef();
+    const [currentColor, setCurrentColor] = useState(color);
+    const [isOpen, toggle] = useState(isVisible);
+    const close = useCallback(() => {
+        if (isOpen) {
+            toggle(false);
+            onClose && onClose(currentColor);
+        }
+    }, [isOpen, onClose, currentColor]);
+    useClickOutside(popover, close);
+    useEffect(() => {
+        if (!isOpen) {
+            setCurrentColor(color || DEFAULT_BG_COLOR);
+        }
+    }, [color, isOpen]);
+    const handleColorChange = useCallback((color) => {
+        setCurrentColor(color);
+        onChange(color);
+    }, [onChange]);
+    const handleStandardColorClick = useCallback((color) => {
+        setCurrentColor(color);
+        onChange(color);
+        close();
+    }, [onChange, close]);
+    const handleNoFillClick = useCallback(() => {
+        onNoFill && onNoFill(DEFAULT_BG_COLOR, DEFAULT_TEXT_COLOR);
+        setCurrentColor(DEFAULT_BG_COLOR);
+        onChange(DEFAULT_BG_COLOR);
+        close();
+    }, [onNoFill, onChange, close]);
+    return (_jsxs("div", { className: "picker-modal", "data-testid": testId, children: [_jsx(TooltipProvider, { children: _jsx(Tooltip, { content: tooltip, className: 'text-white bg-black p-2', side: tooltipSide, children: _jsx("div", { "data-testid": "swatch", className: `${currentColor !== '' ? 'swatch-modal' : 'swatch-modal diagonal-line'} z-10`, style: { backgroundColor: currentColor }, onClick: () => toggle(true) }) }) }), isOpen && (_jsxs(_Fragment, { children: [_jsx("div", { className: "flex justify-center items-center  overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none ", children: _jsx("div", { className: "relative w-auto h-auto mx-auto my-auto bg-white rounded-md", children: _jsx("div", { className: "border-0 rounded-lg  relative flex flex-col w-full outline-none focus:outline-none", children: _jsxs("div", { className: "flex flex-col  w-full gap-4 justify-center items-center p-4 rounded-lg shadow-lg z-99 color-picker-modal", ref: popover, children: [_jsx(HexColorPicker, { "data-testid": "colorPicker", color: currentColor, onChange: handleColorChange }), _jsxs("div", { className: "flex flex-col mt-4", children: [_jsx("span", { className: "font-serif", children: "Standard Colors" }), _jsx("div", { className: "flex gap-2 mt-2", children: STANDARD_COLORS?.map((color) => (_jsx("div", { className: "rounded-full w-8 h-8 cursor-pointer gap-2", style: { backgroundColor: color }, onClick: () => handleStandardColorClick(color), "data-testid": `standard-color-${color}` }, color))) })] }), _jsx("div", { className: "flex justify-center bg-blue-600 mt-2 rounded-md p-2 mx-8 text-white hover:bg-blue-800 transition duration-300 ease-in-out hover:shadow-lg cursor-pointer", onClick: handleNoFillClick, "data-testid": "no-fill", children: _jsx("span", { className: "font-serif", children: "No Fill" }) })] }) }) }) }), _jsx("div", { className: "opacity-25 fixed inset-0 z-40 bg-black" })] }))] }));
+};

package/lib/src/core-components/src/molecules/color-picker-modal/color-picker-modal.spec.d.ts

@@ -0,0 +1,2 @@
+import '@testing-library/jest-dom';
+//# sourceMappingURL=color-picker-modal.spec.d.ts.map

package/lib/src/core-components/src/molecules/color-picker-modal/color-picker-modal.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker-modal.spec.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/molecules/color-picker-modal/color-picker-modal.spec.tsx"],"names":[],"mappings":"AAEA,OAAO,2BAA2B,CAAC"}

package/lib/src/core-components/src/molecules/color-picker-modal/color-picker-modal.spec.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { ColorPickerModal } from './color-picker-modal.component';
+test('Render Autocomplete', () => {
+    render(_jsx(ColorPickerModal, { color: "#000000", onChange: () => { } }));
+});

package/lib/src/core-components/src/molecules/css-multiline-input/css-multiline-input.component.d.ts

@@ -0,0 +1,11 @@
+interface CSSMultilineProps {
+    label?: string;
+    defaultValue?: string;
+    placeholder?: string;
+    className?: string;
+    style?: any;
+    onChange(item: any): void;
+}
+export declare const CSSMultiline: ({ label, defaultValue, className, style, placeholder, onChange, }: CSSMultilineProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=css-multiline-input.component.d.ts.map

package/lib/src/core-components/src/molecules/css-multiline-input/css-multiline-input.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"css-multiline-input.component.d.ts","sourceRoot":"","sources":["../../../../../../src/core-components/src/molecules/css-multiline-input/css-multiline-input.component.tsx"],"names":[],"mappings":"AAOA,UAAU,iBAAiB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,QAAQ,CAAC,IAAI,KAAA,GAAG,IAAI,CAAC;CACtB;AAWD,eAAO,MAAM,YAAY,sEAOtB,iBAAiB,4CA8HnB,CAAC"}

package/lib/src/core-components/src/molecules/css-multiline-input/css-multiline-input.component.js

@@ -0,0 +1,91 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState, useRef } from 'react';
+import * as Form from '../../atoms/form/form.component';
+import { properties as propertiesObj } from './css-properties';
+import s from '../../tc.module.css';
+import { cn } from '../../utils';
+const mapToArray = (arr) => {
+    const res = [];
+    arr.forEach(function (obj, index) {
+        const key = Object.keys(obj)[0];
+        const value = key;
+        res.push([value, obj[key]]);
+    });
+    return res;
+};
+const data = mapToArray(propertiesObj);
+export const CSSMultiline = ({ label = 'Main Box CSS', defaultValue = '', className = '', style = {}, placeholder = "Like fontSize: 12,backgroundColor:'#000000',", onChange, }) => {
+    const value = useRef('');
+    const [properties, setProperties] = useState([]);
+    const [isListOpen, setIsListOpen] = useState(false);
+    useEffect(() => {
+        value.current = defaultValue;
+        setProperties(data);
+    }, [defaultValue]);
+    const useOutsideAlerter = (ref) => {
+        useEffect(() => {
+            function handleClickOutside(event) {
+                if (ref.current && !ref.current.contains(event.target)) {
+                    setIsListOpen(false);
+                    onChange(value.current);
+                }
+            }
+            document.addEventListener('mousedown', handleClickOutside);
+            return () => {
+                document.removeEventListener('mousedown', handleClickOutside);
+            };
+        }, [ref]);
+    };
+    const wrapperRef = useRef(null);
+    useOutsideAlerter(wrapperRef);
+    const list = [];
+    const filter = (css) => {
+        let matchString = css?.split(',');
+        matchString = matchString[matchString?.length - 1];
+        matchString = matchString?.split(':')[0];
+        matchString = matchString?.split("'")[0];
+        if (css?.length == 0)
+            return setProperties(data);
+        else {
+            data?.map((item) => {
+                const innerItem = [];
+                const isItems = item[0]?.startsWith(matchString);
+                if (isItems)
+                    innerItem.push(item[0]);
+                if (innerItem?.length > 0)
+                    list.push([item[0], item[1]]);
+            });
+            setProperties(list);
+        }
+    };
+    const onKeyUp = (e) => {
+        setIsListOpen(true);
+    };
+    return (_jsxs("div", { className: cn(s['flex'], s['flex-col'], s['w-full']), ref: wrapperRef, children: [_jsx(Form.MultilineInput, { label: label, style: { color: '#ffffff', backgroundColor: '#000000', ...style }, placeholder: placeholder, value: value.current, className: cn(className), onKeyUp: onKeyUp, onChange: (css) => {
+                    value.current = css;
+                    filter(css);
+                } }), isListOpen && (_jsx("div", { style: { marginTop: -10 }, children: _jsx("ul", { className: cn(s['flex'], s['flex-col'], s['max-h-40'], s['bg-black'], s['m-2'], s['text-white'], s['overflow-y-scroll']), children: properties?.map((item, index) => (_jsxs("li", { className: cn(s['flex'], s['flex-col'], s['gap-4'], s['p-2']), children: [_jsx("span", { className: cn(s['underline']), children: item[0] }), item[1]?.map((prop) => (_jsxs("li", { className: cn(s['flex'], s['-mt-2'], s['px-2'], s['h-8'], s['bg-slate-800'], s['rounded-md'], s['items-center'], s['cursor-pointer']), onClick: () => {
+                                    let existsString = value.current?.split(',');
+                                    if (value.current.includes(',')) {
+                                        existsString = existsString.map((item) => {
+                                            if (item?.includes(':'))
+                                                return item;
+                                        });
+                                        if (prop != 'number')
+                                            existsString.push(`${item[0]}:'${prop}',`);
+                                        else
+                                            existsString.push(`${item[0]}:1,`);
+                                        value.current = existsString
+                                            .join(',')
+                                            .replaceAll(',,', ',');
+                                    }
+                                    else {
+                                        if (prop != 'number')
+                                            value.current = `${item[0]}:'${prop}',`;
+                                        else {
+                                            value.current = `${item[0]}:1,`;
+                                        }
+                                    }
+                                    filter(existsString.join(''));
+                                }, children: [' ', prop, ' '] })))] }, index))) }) }))] }));
+};