@zohodesk/react-cli 1.1.0 → 1.1.2-9.exp.3

package/lib/loaders/__test__/markdownLoader.spec.js

@@ -0,0 +1,145 @@
+"use strict";
+
+const {
+  markdownParser
+} = require('../markdownLoader'); // Replace './your-file' with the correct file path
+
+
+describe('markdownParser', () => {
+  test('For {}(braces) case', () => {
+    const source = `
+    /* MD:START
+    # {Hi, This is Test Case :)}
+    MD:END */
+    `;
+    const expectedOutput = `
+    <><div class="markDown"><h1>&#123;Hi, This is Test Case :)&#125;</h1>
+</div></>
+    `;
+    expect(markdownParser(source)).toEqual(expectedOutput);
+  });
+  test('For $ (dollor) case', () => {
+    const source = `
+    /* MD:START
+    # $Hi, This is Test Case :)
+    MD:END */
+    `;
+    const expectedOutput = `
+    <><div class="markDown"><h1>&#36;Hi, This is Test Case :)</h1>
+</div></>
+    `;
+    expect(markdownParser(source)).toEqual(expectedOutput);
+  });
+  test('For All kind of Tag Cases', () => {
+    const source = `
+    /* MD:START
+    # Markdown File with Variety of Data
+
+    ## Text
+    
+    This is a paragraph of text.
+    
+    ## Headings
+    
+    ### Heading 1
+    
+    ### Heading 2
+    
+    #### Heading 2.1
+    
+    #### Heading 2.2
+    
+    ## Lists
+    
+    ### Unordered List
+    
+    - Item 1
+    - Item 2
+    - Item 3
+    
+    ### Ordered List
+    
+    1. First item
+    2. Second item
+    3. Third item
+    
+    ## Links
+    
+    Here's a link to [OpenAI's website](https://openai.com).
+    
+    ## Images
+    
+    ![Markdown Logo](https://upload.wikimedia.org/wikipedia/commons/4/48/Markdown-mark.svg)
+    
+    ## Tables
+    
+    | Name  | Age | Gender |
+    |-------|-----|--------|
+    | John  | 25  | Male   |
+    | Sarah | 30  | Female |
+    | Mark  | 35  | Male   |
+    
+    MD:END */
+    `;
+    const expectedOutput = `
+    <><div class="markDown"><h1>Markdown File with Variety of Data</h1>
+<h2>Text</h2>
+<p>This is a paragraph of text.</p>
+<h2>Headings</h2>
+<h3>Heading 1</h3>
+<h3>Heading 2</h3>
+<h4>Heading 2.1</h4>
+<h4>Heading 2.2</h4>
+<h2>Lists</h2>
+<h3>Unordered List</h3>
+<ul>
+<li>Item 1</li>
+<li>Item 2</li>
+<li>Item 3</li>
+</ul>
+<h3>Ordered List</h3>
+<ol>
+<li>First item</li>
+<li>Second item</li>
+<li>Third item</li>
+</ol>
+<h2>Links</h2>
+<p>Here's a link to <a href="https://openai.com">OpenAI's website</a>.</p>
+<h2>Images</h2>
+<p><img src="https://upload.wikimedia.org/wikipedia/commons/4/48/Markdown-mark.svg" alt="Markdown Logo"/></p>
+<h2>Tables</h2>
+<table>
+<thead>
+<tr>
+<th>Name</th>
+<th>Age</th>
+<th>Gender</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td>John</td>
+<td>25</td>
+<td>Male</td>
+</tr>
+<tr>
+<td>Sarah</td>
+<td>30</td>
+<td>Female</td>
+</tr>
+<tr>
+<td>Mark</td>
+<td>35</td>
+<td>Male</td>
+</tr>
+</tbody>
+</table>
+</div></>
+    `;
+    expect(markdownParser(source)).toEqual(expectedOutput);
+  });
+  test('For Source null case', () => {
+    expect(markdownParser(null)).toEqual('');
+    expect(markdownParser('')).toEqual('');
+  });
+});

package/lib/loaders/composeLoader.js

@@ -4,12 +4,43 @@ var _path = _interopRequireDefault(require("path"));
 
 var _postcss = _interopRequireDefault(require("postcss"));
 
+var _classHandling = require("../../lib/plugins/utils/classHandling");
+
+var _fileHandling = require("../plugins/utils/fileHandling");
+
+var _utils = require("../utils");
+
+var _ignore = _interopRequireDefault(require("ignore"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const supportedProps = ['margin-top', 'margin-bottom', 'margin-left', 'margin-right', //   'margin',
-'padding-top', 'padding-bottom', 'padding-left', 'padding-right', //   'padding',
-'top', 'bottom', 'left', 'right', 'height', 'width', 'min-height', 'min-width', 'max-height', 'max-width'];
+const supportedProps = ['margin-top', 'margin-bottom', 'margin-left', 'margin-right', 'margin', 'padding-top', 'padding-bottom', 'padding-left', 'padding-right', 'padding', 'top', 'bottom', 'left', 'right', 'height', 'width', 'min-height', 'min-width', 'max-height', 'max-width', 'float', 'overflow', 'position', 'display', 'text-align', 'white-space', 'visibility'];
 const renameProps = {
+  position: {
+    cls: 'posn'
+  },
+  display: {
+    cls: 'disp'
+  },
+  float: {
+    cls: 'flo'
+  },
+  overflow: {
+    cls: 'over'
+  },
+  'text-align': {
+    cls: 'txtAlgn'
+  },
+  'white-space': {
+    cls: 'whSpc'
+  },
+  visibility: {
+    cls: 'vis'
+  },
+  'font-size': {
+    pos: 'fs',
+    neg: 'fs_'
+  },
   'margin-top': {
     pos: 'mt',
     neg: 'mt_'
@@ -96,11 +127,48 @@ function objToClassName(prop, data) {
   return renameProps[prop] ? data < 0 ? renameProps[prop].neg ? `${renameProps[prop].neg}${data * -1}` : `undef${data * -1}` : renameProps[prop].pos ? `${renameProps[prop].pos}${data}` : `undef${data}` : `undef${data}`;
 }
 
+function objtoClassNameString(prop, data) {
+  let temp = data.toString().replace(/-/gi, '');
+  return `${renameProps[prop].cls}_${temp.replace(/\s*/gi, '')}`;
+}
+
+const multipleClassName = {
+  margin: ['margin-top', 'margin-right', 'margin-bottom', 'margin-left'],
+  padding: ['padding-top', 'padding-right', 'padding-bottom', 'padding-left']
+};
+
+function objToClassNameMultiple(prop, data) {
+  data = data.trim().replace(/\s+/gi, ' ');
+  let dataArr = data.split(' ');
+
+  if (dataArr.length === 3) {
+    dataArr[3] = dataArr[1];
+  }
+
+  if (dataArr.length === 2) {
+    dataArr[3] = dataArr[1];
+    dataArr[2] = dataArr[0];
+  }
+
+  if (dataArr.length === 1) {
+    dataArr[3] = dataArr[0];
+    dataArr[2] = dataArr[0];
+    dataArr[1] = dataArr[0];
+  }
+
+  let composeClasses = '';
+  dataArr.forEach((data, index) => composeClasses += `${objToClassName(multipleClassName[prop][index], parseInt(data, 10))} `);
+  composeClasses = composeClasses.substring(0, composeClasses.length - 1);
+  return composeClasses;
+}
+
 const commonFilePath = {
+  margin: 'src/common/css/margin.css',
   'margin-left': 'src/common/css/margin.css',
   'margin-right': 'src/common/css/margin.css',
   'margin-top': 'src/common/css/margin.css',
   'margin-bottom': 'src/common/css/margin.css',
+  padding: 'src/common/css/padding.css',
   'padding-left': 'src/common/css/padding.css',
   'padding-right': 'src/common/css/padding.css',
   'padding-top': 'src/common/css/padding.css',
@@ -114,8 +182,37 @@ const commonFilePath = {
   'min-height': 'src/common/css/height.css',
   'min-width': 'src/common/css/width.css',
   'max-height': 'src/common/css/height.css',
-  'max-width': 'src/common/css/width.css'
-}; // const preNames = {
+  'max-width': 'src/common/css/width.css',
+  fontSize: 'src/common/css/fontSize.css',
+  textProps: 'src/common/css/textProps.css',
+  display: 'src/common/css/textProps.css',
+  float: 'src/common/css/textProps.css',
+  overflow: 'src/common/css/textProps.css',
+  position: 'src/common/css/position.css',
+  'text-align': 'src/common/css/textProps.css',
+  'white-space': 'src/common/css/textProps.css',
+  visibility: 'src/common/css/textProps.css'
+};
+
+function generateComposeString(resourcePath, prop, value) {
+  let composeString = `from "${_path.default.relative(_path.default.parse(resourcePath).dir, // resourcePath
+  commonFilePath[prop]).replace(/\\/gi, '/')}"`;
+  let cls = '';
+
+  if (/^position|^overflow|^display|^float|^text-align|^white-space|^visibility/gi.test(prop)) {
+    console.log(prop, value, 'textvals');
+    cls = objtoClassNameString(prop, value);
+  } else if (/^margin$|^padding$/gi.test(prop)) {
+    // console.log(prop, value, 'margin');
+    cls = objToClassNameMultiple(prop, value);
+  } else {
+    // console.log(prop, value, 'common');
+    cls = objToClassName(prop, parseInt(value));
+  }
+
+  composeString = `${cls} ${composeString}`;
+  return composeString;
+} // const preNames = {
 //   height: 'zd-height-',
 //   'max-height': 'zd-height-',
 //   'min-height': 'zd-height-',
@@ -136,6 +233,7 @@ const commonFilePath = {
 //   'margin-right': 'zd-margin-'
 // };
 
+
 function allowParent(rule) {
   return rule.parent.type === 'root' || rule.parent.type === 'atrule' && rule.parent.name === 'media';
 }
@@ -144,25 +242,53 @@ module.exports = function (source) {
   const {
     resourcePath
   } = this;
+  const options = (0, _utils.getOptions)(); // console.log(options.app.patterns.composeMinification);
+  // const ig = ignore({ allowRelativePaths: true }).add(options.app.patterns.composeMinification);
+  // const newFilename = path.relative(path.parse(process.cwd()).base, resourcePath);
+  // console.log(newFilename, ig.ignores(newFilename));
 
   let root = _postcss.default.parse(source);
 
+  if (!(0, _fileHandling.isFileNameMatchingPluginPattern)({
+    filename: resourcePath,
+    filterArr: options.app.patterns.composeMinification
+  })) {
+    return root.toString();
+  }
+
   root.walkRules(rule => {
     rule.walkDecls(decl => {
+      if (/^-ms|^-webkit|^moz/gi.test(decl.prop)) {
+        return;
+      }
+
       if (!allowParent(rule)) {
         return;
       }
 
+      if ((0, _classHandling.isInsideMediaQuery)(rule)) {
+        console.log('inside media query', rule.selector);
+        return;
+      }
+
+      if (supportedProps.includes(decl.prop) && /^position$|^overflow|^float|^display|^text-align|^white-space|^visibility/gi.test(decl.prop) && !/[,\s+]+|(\w+)\.|:|::|body|(\d+)%|>/gi.test(rule.selector) && commonFilePath[decl.prop] && !decl.value.includes('var(--')) {
+        decl.value = generateComposeString(resourcePath, decl.prop, decl.value);
+        decl.prop = 'composes';
+        return;
+      }
+
       if (supportedProps.includes(decl.prop) && /px$/gi.test(decl.value) && !/^--/gi.test(decl.prop) && commonFilePath[decl.prop] && !decl.value.includes('calc') && !/[,\s+]+|(\w+)\.|:|(\d+)%/gi.test(rule.selector)) {
-        let composeString = `from "${_path.default.relative(_path.default.parse(resourcePath).dir, // resourcePath
-        commonFilePath[decl.prop]).replace(/\\/gi, '/')}"`; // n++ < 10 && console.log(composeString);
-
-        if (!composeString.includes('src')) {
-          const cls = objToClassName(decl.prop, parseInt(decl.value));
-          composeString = `${cls} ${composeString}`;
-          decl.value = composeString;
-          decl.prop = 'composes'; // n < 10 && console.log(rule.selector, decl.prop, decl.value);
-        }
+        // n++ < 10 && console.log(composeString);
+        // if (!composeString.includes('src')) {
+        // if (/px$/gi.test(decl.value)) {
+        decl.value = generateComposeString(resourcePath, decl.prop, decl.value); // }
+        // if (/^position$|^display$|^overflow$|^float$/gi.test(decl.prop)) {
+        //   console.log(decl.prop);
+        // }
+
+        decl.prop = 'composes'; // console.log(decl.prop, decl.value);
+        // n < 10 && console.log(rule.selector, decl.prop, decl.value);
+        // }
       }
     });
   });

package/lib/loaders/docsLoader.js

@@ -6,7 +6,9 @@ var _getOptions = _interopRequireDefault(require("../utils/getOptions.js"));
 
 var _path = _interopRequireDefault(require("path"));
 
-var _ReactLiveConvertor = require("./ReactLiveConvertor");
+var _enhancedReactLiveConverter = require("./enhancedReactLiveConverter.js");
+
+var _markdownLoader = require("./markdownLoader.js");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -24,7 +26,8 @@ module.exports = function (source) {
 
   const src = _fs.default.readFileSync(originalFilePath).toString();
 
-  options.docs.enableReactLive && (source = (0, _ReactLiveConvertor.reactLiveConvertor)(source, originalFilePath)); //to Enable the ReactLive Converter
+  options.docs.enableMDParser && (source = (0, _markdownLoader.markdownParser)(source));
+  options.docs.enableReactLive && (source = (0, _enhancedReactLiveConverter.enhancedReactLiveConverter)(source, originalFilePath)); //to Enable the ReactLive Converter
 
   return `${source};${name}.source=${JSON.stringify(src)};${name}.filePath=${JSON.stringify(filePath)}`;
 };

package/lib/loaders/enhancedReactLiveConverter.js

@@ -0,0 +1,151 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.enhancedReactLiveConverter = enhancedReactLiveConverter;
+
+const parser = require('@babel/parser');
+
+const traverse = require('@babel/traverse').default;
+
+const t = require("@babel/types");
+
+const path = require('path');
+
+function getFilename(originalFilePath) {
+  const [fileName] = path.basename(originalFilePath).split('.');
+  return fileName;
+}
+
+function convertKeyToValue(object = {}) {
+  let keys = Object.keys(object);
+  let values = Object.values(object);
+  return keys.reduce((value, item, i) => {
+    if (item.includes(',')) {
+      item = item.replace(/{|}/g, "");
+      item = '{ ' + item + ' }';
+    }
+
+    value = value + "'" + values[i] + "'" + ": " + item + ",";
+    return value;
+  }, '');
+}
+
+function mergeDuplicateValues(obj) {
+  let mergedObj = {};
+
+  for (let key in obj) {
+    if (obj.hasOwnProperty(key)) {
+      let value = obj[key];
+      let existingKey = Object.keys(mergedObj).find(k => mergedObj[k] === value);
+
+      if (existingKey) {
+        mergedObj[existingKey + ' , ' + key] = value;
+        delete mergedObj[existingKey];
+      } else {
+        mergedObj[key] = value;
+      }
+    }
+  }
+
+  return mergedObj;
+}
+
+function enhancedReactLiveConverter(source, originalFilePath) {
+  const fileName = getFilename(originalFilePath);
+
+  if (!source) {
+    return '';
+  }
+
+  let docCode = '';
+  const fileContent = source.replace(/[\s\r\n]*$/, '');
+  const ast = parser.parse(fileContent, {
+    sourceType: 'module',
+    plugins: ['jsx', 'classProperties']
+  });
+
+  function createImportStatements(input) {
+    let output = '';
+
+    for (const key in input) {
+      if (input.hasOwnProperty(key) && key !== 'React') {
+        output += `import ${key} from '${input[key]}';\n`;
+      }
+    }
+
+    return output;
+  }
+
+  const importBlock = {};
+  const printableCode = {};
+  let remainingBlock = ''; // Traverse the AST and find the import and export blocks
+
+  let remainingCode = ast.program.body.filter(node => node.type !== 'ImportDeclaration').filter(node => node.type !== 'ExpressionStatement').map(node => fileContent.substring(node.start, node.end)).join('').trim();
+  traverse(ast, {
+    ImportDeclaration(path) {
+      path.node.specifiers.map(specifier => {
+        if (t.isImportSpecifier(specifier)) {
+          importBlock[`{ ${specifier.local.name} }`] = path.node.source.value;
+          printableCode[`{ ${specifier.local.name} }`] = path.node.source.value;
+          return `{'${specifier.imported.name}': ${specifier.local.name}}`;
+        } else if (t.isImportDefaultSpecifier(specifier)) {
+          importBlock[`${specifier.local.name}`] = `${path.node.source.value}`;
+          printableCode[`${specifier.local.name}`] = `${path.node.source.value} `;
+          return specifier.local.name;
+        }
+      }).join(", ");
+    },
+
+    ExpressionStatement(path) {
+      const expression = path.get('expression');
+      const expressionLeft = expression.get('left');
+
+      if (path.isExpressionStatement() && expression.isAssignmentExpression() && expressionLeft.isMemberExpression()) {
+        const docCheck = expressionLeft.toString();
+
+        if (docCheck === `${fileName}.docs`) {
+          docCode = expression.toString();
+        } else if (docCheck.includes(fileName)) {
+          const startIndex = path.node.start;
+          const endIndex = path.node.end;
+          remainingBlock += fileContent.slice(startIndex, endIndex);
+        }
+      }
+    }
+
+  });
+  remainingCode = remainingCode.replace(/__DOCS__/, true);
+  remainingCode = remainingCode.replace(/`/g, '\\`').replace(/\$\{/g, '$\\{');
+  remainingBlock = remainingBlock.replace(/`/g, '\\`').replace(/\$\{/g, '$\\{');
+  const addBractick = `\`
+  ${createImportStatements(printableCode)}
+  ${remainingCode}
+
+  ${remainingBlock}\`
+  `;
+  const template = `
+  
+    ${createImportStatements(importBlock)}
+  
+    import { LiveProviderv3, LiveEditorv3, LiveErrorv3, LivePreviewv3, Wrapper, EditorWrapper , ErrorWrapper, PreviewWrapper } from '@zohodesk-private/react-live/es/index'
+
+    export default class ${fileName} extends React.Component{
+      render(){
+        return(
+          <LiveProviderv3 needToolBox scope={{import: {${convertKeyToValue(mergeDuplicateValues(printableCode))}}}} code={${addBractick}}>
+            <Wrapper>
+                <EditorWrapper><LiveEditorv3 /></EditorWrapper>
+                <PreviewWrapper><LivePreviewv3 /></PreviewWrapper>
+                <LiveErrorv3 needStyle />
+            </Wrapper>
+          </LiveProviderv3>
+        )
+      }
+    }
+  
+    ${docCode}
+    `;
+  return template;
+}

package/lib/loaders/markdownLoader.js

@@ -0,0 +1,71 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.markdownParser = markdownParser;
+
+const markdownIt = require('markdown-it'); // const md = new markdownIt({ linkify: true,breaks:true });
+
+
+const md = new markdownIt({
+  html: false,
+  linkify: true,
+  typographer: true,
+  breaks: true,
+  xhtmlOut: true
+}); //const md = new markdownIt();
+
+function markdownParser(source) {
+  if (!source) {
+    return '';
+  }
+
+  const startTag = '/* MD:START';
+  const endTag = 'MD:END */'; // Iterate through all occurrences of the tags
+
+  let startIndex = source.indexOf(startTag);
+
+  while (startIndex !== -1) {
+    const endIndex = source.indexOf(endTag, startIndex);
+
+    if (endIndex !== -1) {
+      const extractedMarkdown = source.slice(startIndex + startTag.length, endIndex);
+      let lines = extractedMarkdown.split('\n');
+      lines = lines.filter(line => line.trim() !== '');
+      const firstLineIndentMatch = lines[0].match(/^\s+/);
+      const firstLineIndent = firstLineIndentMatch ? firstLineIndentMatch[0] : '';
+      const modifiedStr = lines.map(line => line.replace(new RegExp(`^${firstLineIndent}`), '')).join('\n').replace(/(:--)|(--:)/g, '---');
+      let html = md.render(modifiedStr); //html = html.replace(/"|<hr>|<img src=(".*?")>|<br>|:--|--:|{|}|\$/g, match => {
+
+      html = html.replace(/"|{|}|\$/g, match => {
+        // if (match === '<hr>') {
+        //   return '<hr/>';
+        // } else if (match.startsWith('<img src=')) {
+        //   return match.replace('>', '/>');
+        // } else if (match === '<br>') {
+        //   return '<br/>';
+        if (match === '$') {
+          return '&#36;';
+        } else if (match === '{') {
+          return '&#123;';
+        } else if (match === '}') {
+          return '&#125;';
+        } // else if (match === ':--' || match === '--:' ) {
+        //   return '---';
+        // }
+        else if (match === '}') {
+          return '&#125;';
+        }
+
+        return match;
+      }); // console.log(html,"html");
+
+      source = source.replace(source.slice(startIndex, endIndex + endTag.length), '<><div class="markDown">' + html + '</div></>');
+    }
+
+    startIndex = source.indexOf(startTag, startIndex + 1); // console.log(source)
+  }
+
+  return source;
+}