react-restyle-components 0.2.86 → 0.2.88

package/lib/src/core-components/molecules/color-picker/color-picker.css

@@ -1,24 +0,0 @@
-.picker {
-  position: relative;
-  z-index: 999;
-}
-
-.swatch {
-  width: 28px;
-  height: 28px;
-  border-radius: 8px;
-  border: 3px solid #fff;
-  box-shadow:
-    0 0 0 1px rgba(0, 0, 0, 0.1),
-    inset 0 0 0 1px rgba(0, 0, 0, 0.1);
-  cursor: pointer;
-}
-
-.popover {
-  position: absolute;
-  top: calc(100% + 2px);
-  left: 0;
-  border-radius: 9px;
-  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
-  z-index: 999;
-}

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

@@ -1,15 +0,0 @@
-import './color-picker-modal.css';
-import '../../../tc.module.css';
-interface ColorPickerModalProps {
-    color: string;
-    isVisible?: boolean;
-    testId?: string;
-    tooltip?: string;
-    tooltipSide?: 'top' | 'bottom' | 'left' | 'right';
-    onChange: (color: string) => void;
-    onNoFill?: (bgColor: string, textColor: string) => void;
-    onClose?: (color?: string) => void;
-}
-export declare const ColorPickerModal: ({ color, isVisible, testId, tooltip, tooltipSide, onChange, onNoFill, onClose, }: ColorPickerModalProps) => import("react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=color-picker-modal.component.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"color-picker-modal.component.d.ts","sourceRoot":"","sources":["../../../../../src/core-components/molecules/color-picker-modal/color-picker-modal.component.tsx"],"names":[],"mappings":"AASA,OAAO,0BAA0B,CAAC;AAClC,OAAO,wBAAwB,CAAC;AAEhC,UAAU,qBAAqB;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IAClD,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACxD,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAED,eAAO,MAAM,gBAAgB,qFAS1B,qBAAqB,4CAwGvB,CAAC"}

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

@@ -1,41 +0,0 @@
-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 '../..';
-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/molecules/color-picker-modal/color-picker-modal.css

@@ -1,45 +0,0 @@
-.picker-modal {
-  position: relative;
-}
-
-.swatch-modal {
-  width: 28px;
-  height: 28px;
-  border-radius: 8px;
-  border: 3px solid #fff;
-  box-shadow:
-    0 0 0 1px rgba(0, 0, 0, 0.1),
-    inset 0 0 0 1px rgba(0, 0, 0, 0.1);
-  cursor: pointer;
-}
-
-.diagonal-line {
-  background-color: transparent;
-  background-image: gradient(
-    linear,
-    19.1% -7.9%,
-    81% 107.9%,
-    color-stop(0, transparent),
-    color-stop(0.48, transparent),
-    color-stop(0.5, #000),
-    color-stop(0.52, transparent),
-    color-stop(1, transparent)
-  );
-  background-image: repeating-linear-gradient(
-    130deg,
-    transparent 0%,
-    transparent 48%,
-    #000 50%,
-    transparent 52%,
-    transparent 100%
-  );
-}
-
-.popover-modal {
-  position: absolute;
-  top: calc(100% + 2px);
-  left: 0;
-  border-radius: 9px;
-  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
-  z-index: 999;
-}

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

@@ -1,11 +0,0 @@
-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/molecules/css-multiline-input/css-multiline-input.component.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"css-multiline-input.component.d.ts","sourceRoot":"","sources":["../../../../../src/core-components/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/molecules/css-multiline-input/css-multiline-input.component.js

@@ -1,91 +0,0 @@
-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 '../../../core-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))) }) }))] }));
-};