@zohodesk/react-cli 1.1.6 → 1.1.8

package/README.md

@@ -44,6 +44,18 @@ Now to run app
 
 # Change Logs
 
+# 1.1.8
+
+**Issue Fix**
+- Docs fix for Selector Replace 'always require arguement' issue. 
+
+# 1.1.7
+
+**Feature**
+- Markdown parser feature added in docs
+For more info please refer to :
+[details](https://zgit.csez.zohocorpin.com/zohodesk/react-cli/-/blob/2.0.0/docs/MarkdownParser.md)
+
 # 1.1.6
 
 **Issue Fix**

package/docs/MarkdownParser.md

@@ -0,0 +1,18 @@
+
+----> markdownParser <----
+
+1. Markdown parser allows us to write Documentation using Markdown language inside the Javascript file
+2. This will converts the snippets to HTML tag.
+3. We can implement this only inside the particular syntax which is metioned below.
+4. We can enable/disable this feature by `npm run docs --markdown_parser=true/false` default value will be `true`.
+5. Also we can enable/disable this feature by adding `enableMDParser` key inside the package.json under the `docs`.
+
+### syntax
+``` 
+/* MD:START 
+    # Hello World
+MD:END */
+```
+
+# v1.1.7 update: 
+* Markdown Parser feature implemented. 

package/lib/configs/webpack.docs.config.js

@@ -85,7 +85,7 @@ module.exports = isSSTest => ({
         selectorWeightConfig,
         classNameBlob: false,
         cssUniqueness,
-        selectorReplace: null,
+        selectorReplace,
         cssHashSelectors,
         classNamePrefix
       })

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/docsLoader.js

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

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;
+}

package/lib/schemas/index.js

@@ -382,6 +382,10 @@ var _default = {
       value: true,
       cli: 'react_live'
     },
+    enableMDParser: {
+      value: true,
+      cli: 'markdown_parser'
+    },
     rtlExclude: [],
     selectorReplace: null,
     plugins: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/react-cli",
-  "version": "1.1.6",
+  "version": "1.1.8",
   "description": "A CLI tool for build modern web application and libraries",
   "scripts": {
     "init": "node ./lib/utils/init.js",
@@ -80,6 +80,7 @@
     "jsdom": "16.4.0",
     "loader-utils": "2.0.0",
     "lodash-webpack-plugin": "0.11.5",
+    "markdown-it": "^13.0.1",
     "mini-css-extract-plugin": "0.10.0",
     "nock": "13.2.9",
     "nodemailer": "6.4.11",

package/templates/docs/all.html

@@ -2,6 +2,7 @@
 <html dir="ltr">
 	<head>
 		<meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <link rel="stylesheet" href="./css/markdown.css">
 		<link rel="stylesheet" href="./css/b.min.css">
 		<style>
 		body {

package/templates/docs/component.html

@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="stylesheet" href="./css/component.css" />
     <link rel="stylesheet" href="/docs/css/main.css" />
+    <link rel="stylesheet" href="./css/markdown.css">
   </head>
   <body>
     <div id="react" class="appContainer"></div>

package/templates/docs/components.html

@@ -6,6 +6,7 @@
     <link rel="stylesheet" href="./css/component.css" />
     <link rel="stylesheet" href="./css/componentTest.css" />
     <link rel="stylesheet" href="/docs/css/main.css" />
+    <link rel="stylesheet" href="./css/markdown.css">
   </head>
   <body>
     <div id="react" class="ssTest appContainer"></div>

package/templates/docs/css/markdown.css

@@ -0,0 +1,202 @@
+:root{
+  --cli-md-cli-md-base-font-family: -apple-system,system-ui,"Segoe UI",Regular,Helvetica,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
+    --cli-md-cli-md-base-colour: #d9dcde;
+}
+
+.markDown {
+  line-height: 1.6;
+  margin: 20px;
+  color: #333;
+  font-size: 16px;
+}
+.markDown p {
+  margin-bottom: 16px;
+  line-height:2
+}
+
+.markDown h1 {
+  box-sizing: border-box;
+  color: var(--cli-md-base-colour);
+  font-family: var(--cli-md-base-font-family);
+  font-size: 2em;
+  font-weight: 600;
+  line-height: 1.25;
+  margin: 24px 0 16px;
+  padding-bottom: .3em;
+  word-wrap: break-word;
+  border-bottom: 1px solid #eaecef
+}
+
+.markDown h2 {
+  font-size: 1.5em
+}
+
+.markDown h2,.markDown h3 {
+  box-sizing: border-box;
+  color: var(--cli-md-base-colour);
+  font-family: var(--cli-md-base-font-family);
+  font-weight: 600;
+  line-height: 1.25;
+  margin-bottom: 16px;
+  margin-top: 24px;
+  padding-bottom: .3em;
+  word-wrap: break-word;
+  border-bottom: 1px solid #eaecef
+}
+
+.markDown h3 {
+  font-size: 1.2em
+}
+
+.markDown h4 {
+  box-sizing: border-box;
+  color: var(--cli-md-base-colour);
+  font-family: var(--cli-md-base-font-family);
+  font-size: 1em;
+  font-weight: 600;
+  line-height: 1.25;
+  margin-bottom: 16px;
+  margin-top: 24px;
+  word-wrap: break-word
+}
+
+.markDown td,.markDown th {
+  border-collapse: collapse;
+  box-sizing: border-box;
+  color: var(--cli-md-base-colour);
+  font-family: var(--cli-md-base-font-family);
+  line-height: 24px;
+  padding: 6px 13px;
+  text-align: -webkit-left;
+  word-wrap: break-word;
+  border: 1px solid #dfe2e5
+}
+
+.markDown th {
+  font-weight: 600
+}
+
+.markDown tr {
+  background-color: #fff;
+  border-collapse: collapse;
+  box-sizing: border-box;
+  color: var(--cli-md-base-colour);
+  font-family: var(--cli-md-base-font-family);
+  line-height: 24px;
+  overflow-wrap: break-word;
+  word-wrap: break-word
+}
+
+.markDown tr :nth-child(2n) {
+  background-color: #f6f8fa
+}
+
+.markDown thead {
+  font-size: 16px;
+  line-height: 1.5;
+  word-wrap: break-word;
+  border-spacing: 0;
+  border-collapse: collapse;
+  box-sizing: border-box
+}
+
+.markDown table {
+  -webkit-border-horizontal-spacing: 0;
+  -webkit-border-vertical-spacing: 0;
+  border-collapse: collapse;
+  box-sizing: border-box;
+  color: var(--cli-md-base-colour);
+  display: block;
+  margin-top: 0;
+  overflow: auto;
+  width: -webkit-max-content;
+  width: -moz-max-content;
+  width: max-content
+}
+
+.markDown image,.markDown table {
+  font-family: var(--cli-md-base-font-family);
+  line-height: 24px;
+  margin-bottom: 16px;
+  max-width: 100%;
+  word-wrap: break-word
+}
+
+.markDown image {
+  background-color: #fff;
+  border-style: none;
+  color: #0366d6;
+  cursor: pointer
+}
+
+.markDown ul {
+  box-sizing: border-box;
+  color: var(--cli-md-base-colour);
+  font-family: var(--cli-md-base-font-family);
+  line-height: 24px;
+  margin-bottom: 16px;
+  margin-top: 0;
+  padding-left: 2em;
+  word-wrap: break-word
+}
+
+.markDown ul li {
+  list-style: initial
+}
+
+.markDown ol li,.markDown ul li {
+  box-sizing: border-box;
+  color: var(--cli-md-base-colour);
+  font-family: var(--cli-md-base-font-family);
+  line-height: 24px;
+  margin-top: .25em;
+  text-align: left;
+  word-wrap: break-word
+}
+
+.markDown ol li {
+  list-style: decimal
+}
+
+.markDown pre {
+  background-color: #f6f8fa;
+  line-height: 1.45;
+  margin-bottom: 16px;
+  margin-top: 0;
+  overflow: auto;
+  overflow-wrap: normal;
+  padding: 16px;
+  white-space: pre;
+  word-break: normal
+}
+
+.markDown pre,.markDown code:not(.markDown pre code) {
+  border-radius: 6px;
+  box-sizing: border-box;
+  color: var(--cli-md-base-colour);
+  font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
+  font-size: 85%
+}
+
+.markDown code:not(.markDown pre code) {
+  background-color: rgba(27,31,35,.05);
+  line-height: 20.4px;
+  margin: 0;
+  padding: .2em .4em;
+  word-wrap: break-word
+}
+
+.markDown a {
+  box-sizing: border-box;
+  color: #0366d6;
+  cursor: pointer;
+  font-family: var(--cli-md-base-font-family);
+  line-height: 24px;
+  text-decoration: none;
+  word-wrap: break-word
+}
+
+.markDown a :hover {
+  outline: 0;
+  text-decoration: underline
+}

package/templates/docs/index.html

@@ -14,6 +14,7 @@
 	<script src="./js/active-line.js"></script>
 	<script src="./js/matchbrackets.js"></script>
 	<link rel="stylesheet" type="text/css" href="./css/hopscotch.css">
+	<link rel="stylesheet" href="./css/markdown.css">
 	<title>Zoho Desk - React Components</title>
 	<script>