react-restyle-components 0.3.2 → 0.3.4

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

@@ -5,7 +5,9 @@ interface CSSMultilineProps {
     className?: string;
     style?: any;
     onChange(item: any): void;
+    onReset?(): void;
+    onMoreInfo?(): void;
 }
-export declare const CSSMultiline: ({ label, defaultValue, className, style, placeholder, onChange, }: CSSMultilineProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CSSMultiline: ({ label, defaultValue, className, style, placeholder, onChange, onReset, onMoreInfo, }: 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

@@ -1 +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"}
+{"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":"AAQA,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;IACrB,OAAO,CAAC,IAAI,IAAI,CAAC;IACjB,UAAU,CAAC,IAAI,IAAI,CAAC;CACrB;AAWD,eAAO,MAAM,YAAY,2FAStB,iBAAiB,4CA4InB,CAAC"}

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

@@ -4,6 +4,7 @@ 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';
+import { Icon } from '../../..';
 const mapToArray = (arr) => {
     const res = [];
     arr.forEach(function (obj, index) {
@@ -14,7 +15,7 @@ const mapToArray = (arr) => {
     return res;
 };
 const data = mapToArray(propertiesObj);
-export const CSSMultiline = ({ label = 'Main Box CSS', defaultValue = '', className = '', style = {}, placeholder = "Like fontSize: 12,backgroundColor:'#000000',", onChange, }) => {
+export const CSSMultiline = ({ label = 'Main Box CSS', defaultValue = '', className = '', style = {}, placeholder = "fontSize: 12,backgroundColor:'#000000'", onChange, onReset, onMoreInfo, }) => {
     const value = useRef('');
     const [properties, setProperties] = useState([]);
     const [isListOpen, setIsListOpen] = useState(false);
@@ -40,7 +41,7 @@ export const CSSMultiline = ({ label = 'Main Box CSS', defaultValue = '', classN
     useOutsideAlerter(wrapperRef);
     const list = [];
     const filter = (css) => {
-        let matchString = css?.split(',');
+        let matchString = css?.split(/,\s*/);
         matchString = matchString[matchString?.length - 1];
         matchString = matchString?.split(':')[0];
         matchString = matchString?.split("'")[0];
@@ -61,10 +62,10 @@ export const CSSMultiline = ({ label = 'Main Box CSS', defaultValue = '', classN
     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) => {
+    return (_jsxs("div", { className: cn(s['flex'], s['flex-col'], s['w-full'], s['relative']), ref: wrapperRef, children: [_jsxs("div", { className: "flex absolute gap-2 right-6", children: [onReset && (_jsx(Icon, { nameIcon: "MdLockReset", propsIcon: { color: '#000000', size: 24 }, onClick: onReset, tooltip: "Reset CSS" })), onMoreInfo && (_jsx(Icon, { nameIcon: "MdInfoOutline", propsIcon: { color: '#000000', size: 24 }, onClick: onMoreInfo, tooltip: "More Info" }))] }), _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: () => {
+                } }), isListOpen && (_jsx("div", { children: _jsx("ul", { className: cn(s['flex'], s['flex-col'], s['bg-black'], s['text-white'], s['overflow-y-scroll']), style: { maxHeight: 'calc(100vh - 20vh)' }, children: properties?.map((item, index) => (_jsxs("li", { className: cn(s['flex'], 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['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) => {

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

@@ -21,13 +21,13 @@ export const properties = [
             'stretch',
         ],
     },
-    { flex: ['number', 'string'] },
+    { flex: ['number'] },
     { flexDirection: ['row', 'row-reverse', 'column', 'column-reverse'] },
     { flexWrap: ['nowrap', 'wrap', 'wrap-reverse'] },
     { flexFlow: ['number'] },
     { flexGrow: ['number'] },
     { flexShrink: ['number'] },
-    { flexBasis: ['number', 'string'] },
+    { flexBasis: ['number'] },
     {
         justifyContent: [
             ,
@@ -39,32 +39,32 @@ export const properties = [
             'space-evenly',
         ],
     },
-    { gap: ['number', 'string'] },
+    { gap: ['number'] },
     { rowGap: ['number'] },
     { columnGap: ['number'] },
     // Layout
-    { aspectRatio: ['number', 'string'] },
-    { bottom: ['number', 'string'] },
+    { aspectRatio: ['number'] },
+    { bottom: ['number'] },
     { display: ['flex', 'none'] },
-    { left: ['number', 'string'] },
+    { left: ['number'] },
     { position: ['absolute', 'relative'] },
-    { right: ['number', 'string'] },
-    { top: ['number', 'string'] },
+    { right: ['number'] },
+    { top: ['number'] },
     { overflow: ['hidden'] },
-    { zIndex: ['number', 'string'] },
+    { zIndex: ['number'] },
     // Dimension
-    { height: ['number', 'string'] },
-    { maxHeight: ['number', 'string'] },
-    { maxWidth: ['number', 'string'] },
-    { minHeight: ['number', 'string'] },
-    { minWidth: ['number', 'string'] },
-    { width: ['number', 'string'] },
+    { height: ['number'] },
+    { maxHeight: ['number'] },
+    { maxWidth: ['number'] },
+    { minHeight: ['number'] },
+    { minWidth: ['number'] },
+    { width: ['number'] },
     // Color
     { backgroundColor: ['string'] },
     { color: ['string'] },
     { opacity: ['number'] },
     // Text
-    { fontSize: ['number', 'string'] },
+    { fontSize: ['number'] },
     { fontFamily: ['string'] },
     { fontStyle: ['string', 'normal'] },
     {
@@ -87,8 +87,8 @@ export const properties = [
             'black',
         ],
     },
-    { letterSpacing: ['number', 'string'] },
-    { lineHeight: ['number', 'string'] },
+    { letterSpacing: ['number'] },
+    { lineHeight: ['number'] },
     { maxLines: ['number'] },
     { textAlign: ['left', 'right', 'center', 'justify'] },
     {
@@ -109,53 +109,53 @@ export const properties = [
     { verticalAlign: ['sub', 'super'] },
     // Sizing/positioning
     { objectFit: ['string'] },
-    { objectPosition: ['number', 'string'] },
-    { objectPositionX: ['number', 'string'] },
-    { objectPositionY: ['number', 'string'] },
+    { objectPosition: ['number'] },
+    { objectPositionX: ['number'] },
+    { objectPositionY: ['number'] },
     // Margin/padding
-    { margin: ['number', 'string'] },
-    { marginHorizontal: ['number', 'string'] },
-    { marginVertical: ['number', 'string'] },
-    { marginTop: ['number', 'string'] },
-    { marginRight: ['number', 'string'] },
-    { marginBottom: ['number', 'string'] },
-    { marginLeft: ['number', 'string'] },
-    { padding: ['number', 'string'] },
-    { paddingHorizontal: ['number', 'string'] },
-    { paddingVertical: ['number', 'string'] },
-    { paddingTop: ['number', 'string'] },
-    { paddingRight: ['number', 'string'] },
-    { paddingBottom: ['number', 'string'] },
-    { paddingLeft: ['number', 'string'] },
+    { margin: ['number'] },
+    { marginHorizontal: ['number'] },
+    { marginVertical: ['number'] },
+    { marginTop: ['number'] },
+    { marginRight: ['number'] },
+    { marginBottom: ['number'] },
+    { marginLeft: ['number'] },
+    { padding: ['number'] },
+    { paddingHorizontal: ['number'] },
+    { paddingVertical: ['number'] },
+    { paddingTop: ['number'] },
+    { paddingRight: ['number'] },
+    { paddingBottom: ['number'] },
+    { paddingLeft: ['number'] },
     // Transformations
     { transform: ['string'] },
-    { transformOrigin: ['number', 'string'] },
-    { transformOriginX: ['number', 'string'] },
-    { transformOriginY: ['number', 'string'] },
+    { transformOrigin: ['number'] },
+    { transformOriginX: ['number'] },
+    { transformOriginY: ['number'] },
     // Borders
-    { border: ['number', 'string'] },
-    { borderWidth: ['number', 'string'] },
+    { border: ['number'] },
+    { borderWidth: ['number'] },
     { borderColor: ['string'] },
     { borderStyle: ['dashed', 'dotted', 'solid'] },
-    { borderTop: ['number', 'string'] },
+    { borderTop: ['number'] },
     { borderTopColor: ['string'] },
     { borderTopStyle: ['dashed', 'dotted', 'solid'] },
-    { borderTopWidth: ['number', 'string'] },
-    { borderRight: ['number', 'string'] },
+    { borderTopWidth: ['number'] },
+    { borderRight: ['number'] },
     { borderRightColor: ['string'] },
     { borderRightStyle: ['dashed', 'dotted', 'solid'] },
-    { borderRightWidth: ['number', 'string'] },
-    { borderBottom: ['number', 'string'] },
+    { borderRightWidth: ['number'] },
+    { borderBottom: ['number'] },
     { borderBottomColor: ['string'] },
     { borderBottomStyle: ['dashed', 'dotted', 'solid'] },
-    { borderBottomWidth: ['number', 'string'] },
-    { borderLeft: ['number', 'string'] },
+    { borderBottomWidth: ['number'] },
+    { borderLeft: ['number'] },
     { borderLeftColor: ['string'] },
     { borderLeftStyle: ['dashed', 'dotted', 'solid'] },
-    { borderLeftWidth: ['number', 'string'] },
-    { borderTopLeftRadius: ['number', 'string'] },
-    { borderTopRightRadius: ['number', 'string'] },
-    { borderBottomRightRadius: ['number', 'string'] },
-    { borderBottomLeftRadius: ['number', 'string'] },
-    { borderRadius: ['number', 'string'] },
+    { borderLeftWidth: ['number'] },
+    { borderTopLeftRadius: ['number'] },
+    { borderTopRightRadius: ['number'] },
+    { borderBottomRightRadius: ['number'] },
+    { borderBottomLeftRadius: ['number'] },
+    { borderRadius: ['number'] },
 ];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-restyle-components",
-  "version": "0.3.2",
+  "version": "0.3.4",
   "private": false,
   "description": "Easy use restyle components",
   "author": {