react-restyle-components 0.1.84 → 0.1.86

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

@@ -0,0 +1,124 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CSSMultiline = void 0;
+const react_1 = __importStar(require("react"));
+const __1 = require("../..");
+const css_properties_1 = require("./css-properties");
+require("../../../tc.css");
+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(css_properties_1.properties);
+const CSSMultiline = ({ label = 'Main Box CSS', defaultValue = '', className = '', style = {}, placeholder = "Like fontSize: 12,backgroundColor:'#000000',", onChange, }) => {
+    const value = (0, react_1.useRef)('');
+    const [properties, setProperties] = (0, react_1.useState)([]);
+    const [isListOpen, setIsListOpen] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        value.current = defaultValue;
+        setProperties(data);
+    }, [defaultValue]);
+    const useOutsideAlerter = (ref) => {
+        (0, react_1.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 = (0, react_1.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 (react_1.default.createElement("div", { className: "flex flex-col w-full", ref: wrapperRef },
+        react_1.default.createElement(__1.Form.MultilineInput, { label: label, style: { color: '#ffffff', backgroundColor: '#000000', ...style }, placeholder: placeholder, value: value.current, className: className, onKeyUp: onKeyUp, onChange: (css) => {
+                value.current = css;
+                filter(css);
+            } }),
+        isListOpen && (react_1.default.createElement("div", { style: { marginTop: -10 } },
+            react_1.default.createElement("ul", { className: "flex flex-col max-h-40 bg-black  m-2 text-white  overflow-y-scroll  " }, properties?.map((item, index) => (react_1.default.createElement("li", { key: index, className: "flex flex-col gap-4 p-2" },
+                react_1.default.createElement("span", { className: "underline" }, item[0]),
+                item[1]?.map((prop) => (react_1.default.createElement("li", { className: "flex -mt-2 px-2 h-8 bg-slate-800  rounded-md items-center 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(''));
+                    } },
+                    ' ',
+                    prop,
+                    ' ')))))))))));
+};
+exports.CSSMultiline = CSSMultiline;

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

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { CSSMultiline } from './css-multiline-input.component';
+declare const meta: Meta<typeof CSSMultiline>;
+export default meta;
+type Story = StoryObj<typeof CSSMultiline>;
+export declare const Primary: Story;

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

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Primary = void 0;
+const css_multiline_input_component_1 = require("./css-multiline-input.component");
+const meta = {
+    title: 'Design System/Molecules/CSSMultiline',
+    component: css_multiline_input_component_1.CSSMultiline,
+    tags: ['autodocs'],
+    parameters: {
+        componentSubtitle: `import { CSSMultiline } from 'react-restyle-components'`,
+    },
+};
+exports.default = meta;
+exports.Primary = {
+    args: {},
+};

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+/* eslint-disable testing-library/await-async-query */
+/* eslint-disable testing-library/prefer-screen-queries */
+/* eslint-disable testing-library/render-result-naming-convention */
+const react_1 = __importDefault(require("react"));
+const _core_utils_1 = require("@core-utils");
+const css_multiline_input_component_1 = require("./css-multiline-input.component");
+it('render CSSMultiline correctly', () => {
+    const result = (0, _core_utils_1.render)(react_1.default.createElement(css_multiline_input_component_1.CSSMultiline, { onChange: () => { } }));
+    expect(result).toMatchSnapshot();
+});