@zohodesk/components 1.0.0-temp-610 → 1.0.0-temp-352

package/docs/external/format.js

@@ -0,0 +1,129 @@
+(function() {
+  CodeMirror.extendMode('css', {
+    commentStart: '/*',
+    commentEnd: '*/',
+    newlineAfterToken: function(type, content) {
+      return /^[;{}]$/.test(content);
+    }
+  });
+
+  CodeMirror.extendMode('javascript', {
+    commentStart: '/*',
+    commentEnd: '*/',
+    // FIXME semicolons inside of for
+    newlineAfterToken: function(type, content, textAfter, state) {
+      if (this.jsonMode) {
+        return /^[\[,{]$/.test(content) || /^}/.test(textAfter);
+      } else {
+        if (content == ';' && state.lexical && state.lexical.type == ')')
+          return false;
+        return /^[;{}]$/.test(content) && !/^;/.test(textAfter);
+      }
+    }
+  });
+
+  CodeMirror.extendMode('xml', {
+    commentStart: '<!--',
+    commentEnd: '-->',
+    newlineAfterToken: function(type, content, textAfter) {
+      return (type == 'tag' && />$/.test(content)) || /^</.test(textAfter);
+    }
+  });
+
+  // Comment/uncomment the specified range
+  CodeMirror.defineExtension('commentRange', function(isComment, from, to) {
+    var cm = this,
+      curMode = CodeMirror.innerMode(cm.getMode(), cm.getTokenAt(from).state)
+        .mode;
+    cm.operation(function() {
+      if (isComment) {
+        // Comment range
+        cm.replaceRange(curMode.commentEnd, to);
+        cm.replaceRange(curMode.commentStart, from);
+        if (from.line == to.line && from.ch == to.ch)
+          // An empty comment inserted - put cursor inside
+          cm.setCursor(from.line, from.ch + curMode.commentStart.length);
+      } else {
+        // Uncomment range
+        var selText = cm.getRange(from, to);
+        var startIndex = selText.indexOf(curMode.commentStart);
+        var endIndex = selText.lastIndexOf(curMode.commentEnd);
+        if (startIndex > -1 && endIndex > -1 && endIndex > startIndex) {
+          // Take string till comment start
+          selText =
+            selText.substr(0, startIndex) +
+            // From comment start till comment end
+            selText.substring(
+              startIndex + curMode.commentStart.length,
+              endIndex
+            ) +
+            // From comment end till string end
+            selText.substr(endIndex + curMode.commentEnd.length);
+        }
+        cm.replaceRange(selText, from, to);
+      }
+    });
+  });
+
+  // Applies automatic mode-aware indentation to the specified range
+  CodeMirror.defineExtension('autoIndentRange', function(from, to) {
+    var cmInstance = this;
+    this.operation(function() {
+      for (var i = from.line; i <= to.line; i++) {
+        cmInstance.indentLine(i, 'smart');
+      }
+    });
+  });
+
+  // Applies automatic formatting to the specified range
+  CodeMirror.defineExtension('autoFormatRange', function(from, to) {
+    var cm = this;
+    var outer = cm.getMode(),
+      text = cm.getRange(from, to).split('\n');
+    var state = CodeMirror.copyState(outer, cm.getTokenAt(from).state);
+    var tabSize = cm.getOption('tabSize');
+
+    var out = '',
+      lines = 0,
+      atSol = from.ch == 0;
+    function newline() {
+      out += '\n';
+      atSol = true;
+      ++lines;
+    }
+
+    for (var i = 0; i < text.length; ++i) {
+      var stream = new CodeMirror.StringStream(text[i], tabSize);
+      while (!stream.eol()) {
+        var inner = CodeMirror.innerMode(outer, state);
+        var style = outer.token(stream, state),
+          cur = stream.current();
+        stream.start = stream.pos;
+        if (!atSol || /\S/.test(cur)) {
+          out += cur;
+          atSol = false;
+        }
+        if (
+          !atSol &&
+          inner.mode.newlineAfterToken &&
+          inner.mode.newlineAfterToken(
+            style,
+            cur,
+            stream.string.slice(stream.pos) || text[i + 1] || '',
+            inner.state
+          )
+        )
+          newline();
+      }
+      if (!stream.pos && outer.blankLine) outer.blankLine(state);
+      if (!atSol) newline();
+    }
+
+    cm.operation(function() {
+      cm.replaceRange(out, from, to);
+      for (var cur = from.line + 1, end = from.line + lines; cur <= end; ++cur)
+        cm.indentLine(cur, 'smart');
+      cm.setSelection(from, cm.getCursor(false));
+    });
+  });
+})();

package/docs/external/htmlmixed.js

@@ -0,0 +1,84 @@
+CodeMirror.defineMode("htmlmixed", function(config) {
+  var htmlMode = CodeMirror.getMode(config, {name: "xml", htmlMode: true});
+  var jsMode = CodeMirror.getMode(config, "javascript");
+  var cssMode = CodeMirror.getMode(config, "css");
+
+  function html(stream, state) {
+    var style = htmlMode.token(stream, state.htmlState);
+    if (/(?:^|\s)tag(?:\s|$)/.test(style) && stream.current() == ">" && state.htmlState.context) {
+      if (/^script$/i.test(state.htmlState.context.tagName)) {
+        state.token = javascript;
+        state.localState = jsMode.startState(htmlMode.indent(state.htmlState, ""));
+      }
+      else if (/^style$/i.test(state.htmlState.context.tagName)) {
+        state.token = css;
+        state.localState = cssMode.startState(htmlMode.indent(state.htmlState, ""));
+      }
+    }
+    return style;
+  }
+  function maybeBackup(stream, pat, style) {
+    var cur = stream.current();
+    var close = cur.search(pat), m;
+    if (close > -1) stream.backUp(cur.length - close);
+    else if (m = cur.match(/<\/?$/)) {
+      stream.backUp(cur.length);
+      if (!stream.match(pat, false)) stream.match(cur[0]);
+    }
+    return style;
+  }
+  function javascript(stream, state) {
+    if (stream.match(/^<\/\s*script\s*>/i, false)) {
+      state.token = html;
+      state.localState = null;
+      return html(stream, state);
+    }
+    return maybeBackup(stream, /<\/\s*script\s*>/,
+                       jsMode.token(stream, state.localState));
+  }
+  function css(stream, state) {
+    if (stream.match(/^<\/\s*style\s*>/i, false)) {
+      state.token = html;
+      state.localState = null;
+      return html(stream, state);
+    }
+    return maybeBackup(stream, /<\/\s*style\s*>/,
+                       cssMode.token(stream, state.localState));
+  }
+
+  return {
+    startState: function() {
+      var state = htmlMode.startState();
+      return {token: html, localState: null, mode: "html", htmlState: state};
+    },
+
+    copyState: function(state) {
+      if (state.localState)
+        var local = CodeMirror.copyState(state.token == css ? cssMode : jsMode, state.localState);
+      return {token: state.token, localState: local, mode: state.mode,
+              htmlState: CodeMirror.copyState(htmlMode, state.htmlState)};
+    },
+
+    token: function(stream, state) {
+      return state.token(stream, state);
+    },
+
+    indent: function(state, textAfter) {
+      if (state.token == html || /^\s*<\//.test(textAfter))
+        return htmlMode.indent(state.htmlState, textAfter);
+      else if (state.token == javascript)
+        return jsMode.indent(state.localState, textAfter);
+      else
+        return cssMode.indent(state.localState, textAfter);
+    },
+
+    electricChars: "/{}:",
+
+    innerMode: function(state) {
+      var mode = state.token == html ? htmlMode : state.token == javascript ? jsMode : cssMode;
+      return {state: state.localState || state.htmlState, mode: mode};
+    }
+  };
+}, "xml", "javascript", "css");
+
+CodeMirror.defineMIME("text/html", "htmlmixed");

package/docs/external/index.html

@@ -0,0 +1,127 @@
+<!DOCTYPE html>
+<html>
+<head>
+
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <link href="./images/desklogo.png" type="IMAGE/X-ICON" rel="SHORTCUT ICON">
+
+  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+  <title>Zoho Desk - Style Quide</title>
+  <link rel="stylesheet" type="text/css" href="/docs/css/main.css">
+
+  <script src="./codemirror.js"></script>
+  <script src="./autorefresh.js"></script>
+  <script src="./xml.js"></script>
+  <script src="./htmlmixed.js"></script>
+  <script src="./jsx.js"></script>
+  <script src="./format.js"></script>
+  <script src="./active-line.js"></script>
+  <script src="./matchbrackets.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/prettier@1.16.4/standalone.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/prettier@1.16.4/parser-html.js"></script>
+
+
+  <script src="./designTokens.js"></script>
+  <script src='/docs/js/vendor.js'></script>
+  <script src='/docs/js/main.js'></script>
+  <link rel="stylesheet" type="text/css" href="./css/styleGuide.css">
+  <link rel='manifest' href='/docs/js/manifest.json'>
+
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="black">
+  <meta name="apple-mobile-web-app-title" content="Zoho Desk Components">
+
+  <link rel="stylesheet" type="text/css" href="./css/hopscotch.css">
+
+
+
+ <script>
+ function process(str) {
+  var div = document.createElement('div');
+  div.innerHTML = str.trim();
+
+  return format(div, 0).innerHTML;
+}
+
+function format(node, level) {
+  var indentBefore = new Array(level++ + 1).join('  '),
+    indentAfter = new Array(level - 1).join('  '),
+    textNode;
+
+  for (var i = 0; i < node.children.length; i++) {
+    textNode = document.createTextNode('\n' + indentBefore);
+    node.insertBefore(textNode, node.children[i]);
+
+    format(node.children[i], level);
+
+    if (node.lastElementChild == node.children[i]) {
+      textNode = document.createTextNode('\n' + indentAfter);
+      node.appendChild(textNode);
+    }
+  }
+  return node;
+}
+
+function selectText(containerid) {
+  if (document.selection) {
+    // IE
+    var range = document.body.createTextRange();
+    range.moveToElementText(document.getElementById(containerid));
+    range.select();
+    document.execCommand('copy');
+  } else if (window.getSelection) {
+    var range = document.createRange();
+    range.selectNode(document.getElementById(containerid));
+    window.getSelection().removeAllRanges();
+    window.getSelection().addRange(range);
+    document.execCommand('copy');
+  }
+}
+</script>
+
+  </head>
+<body>
+    <div class='hideSVG'>
+                  <svg  version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+                    <defs>
+                        <symbol id="icon-search" viewBox="0 0 32 32">
+                            <path d="M31.008 27.231l-7.58-6.447c-0.784-0.705-1.622-1.029-2.299-0.998 1.789-2.096 2.87-4.815 2.87-7.787 0-6.627-5.373-12-12-12s-12 5.373-12 12 5.373 12 12 12c2.972 0 5.691-1.081 7.787-2.87-0.031 0.677 0.293 1.515 0.998 2.299l6.447 7.58c1.104 1.226 2.907 1.33 4.007 0.23s0.997-2.903-0.23-4.007zM12 20c-4.418 0-8-3.582-8-8s3.582-8 8-8 8 3.582 8 8-3.582 8-8 8z"></path>
+                        </symbol>
+                  <defs>
+                  <symbol id="icon-copy" viewBox="0 0 500 500">
+                  		<path d="M314.25,85.4h-227c-21.3,0-38.6,17.3-38.6,38.6v325.7c0,21.3,17.3,38.6,38.6,38.6h227c21.3,0,38.6-17.3,38.6-38.6V124
+                  			C352.75,102.7,335.45,85.4,314.25,85.4z M325.75,449.6c0,6.4-5.2,11.6-11.6,11.6h-227c-6.4,0-11.6-5.2-11.6-11.6V124
+                  			c0-6.4,5.2-11.6,11.6-11.6h227c6.4,0,11.6,5.2,11.6,11.6V449.6z"/>
+                  		<path d="M401.05,0h-227c-21.3,0-38.6,17.3-38.6,38.6c0,7.5,6,13.5,13.5,13.5s13.5-6,13.5-13.5c0-6.4,5.2-11.6,11.6-11.6h227
+                  			c6.4,0,11.6,5.2,11.6,11.6v325.7c0,6.4-5.2,11.6-11.6,11.6c-7.5,0-13.5,6-13.5,13.5s6,13.5,13.5,13.5c21.3,0,38.6-17.3,38.6-38.6
+                  			V38.6C439.65,17.3,422.35,0,401.05,0z"/>
+                  </symbol>
+                  <symbol id="icon-desk" viewBox="0 0 24 32" >
+                    	<path d="M23.7,3.8l-4,22.1c-0.3,1.4-1.4,2.4-2.9,2.4H4.6c-0.2,0-0.5,0.2-0.6,0.2l-3.4,2.7c-0.3,0.2-0.6,0-0.6-0.3l3.5-18.7
+                    		C3.8,10.9,5,9.8,6.4,9.8h7.5c0.6,0,1.1,0.5,1,1.1l-0.3,1.8c0,0.5-0.5,0.8-1,0.8H7.8c-0.5,0-1,0.3-1,0.8l-1.6,9.3
+                    		c-0.2,0.6,0.3,1.1,1,1.1h9.3c0.5,0,1-0.3,1-0.8l3-16.6c0.2-0.6-0.3-1.1-1-1.1h-1.4c-0.6,0-1.1-0.5-1-1.1l0.6-3.5
+                    		c0.2-0.5,0.5-0.8,1-0.8H21C22.6,0.5,24,2.1,23.7,3.8z"/>
+                  </symbol>
+                  <symbol id="icon-rtl" viewBox="0 0 1000 1000" >
+                      <g transform="matrix(1 0 0 -1 0 1638)">
+                        <path d="M809.6,1628H371.3c-28.6,0-55.3-5.4-80.4-16.1c-25-10.7-46.9-25.5-65.5-44.3c-18.6-18.8-33.4-40.7-44.3-65.8s-16.4-51.6-16.4-79.9c0-28.6,5.5-55.3,16.4-80.4c10.9-25,25.7-46.9,44.3-65.8s40.5-33.6,65.5-44.3c25-10.7,51.8-16.1,80.4-16.1h51.4V983.1c0-7.1,2.5-13.1,7.6-18.1s11.1-7.6,18.1-7.6c7.4,0,13.6,2.5,18.6,7.6c5,5,7.6,11.1,7.6,18.1v593.5h154.7V983.1c0-7.1,2.5-13.1,7.6-18.1s11.1-7.6,18.1-7.6c7.1,0,13.1,2.5,18.1,7.6s7.6,11.1,7.6,18.1v593.5h129c7.1,0,13.1,2.5,18.1,7.6s7.6,11.1,7.6,18.1c0,7.1-2.5,13.1-7.6,18.1S816.7,1628,809.6,1628L809.6,1628z M422.7,1266.7h-51.4c-21.5,0-41.7,4.1-60.5,12.3c-18.8,8.2-35.2,19.3-49.1,33.3c-13.9,13.9-24.9,30.3-33,49.1c-8.1,18.8-12.1,39-12.1,60.5c0,21.2,4,41.1,12.1,60c8.1,18.8,19.1,35.2,33,49.1c13.9,13.9,30.3,25,49.1,33.3c18.8,8.2,39,12.3,60.5,12.3h51.4V1266.7L422.7,1266.7z M758.2,802.7H278.6l59.5,59c5,5,7.6,11.2,7.6,18.4c0,7.2-2.5,13.4-7.6,18.4c-5,5-11.2,7.6-18.4,7.6c-7.2,0-13.4-2.5-18.4-7.6L197.9,795.1c-5-5-7.6-11.2-7.6-18.4c0-7.2,2.5-13.4,7.6-18.4l103.3-102.8c2.7-2.7,5.6-4.6,8.8-5.8c3.2-1.2,6.3-1.8,9.3-1.8c3.4,0,6.6,0.6,9.8,1.8c3.2,1.2,6.1,3.1,8.8,5.8c5,5,7.6,11.1,7.6,18.1c0,7.1-2.5,13.1-7.6,18.1l-59.5,59h479.7c7.1,0,13.1,2.5,18.1,7.6c5,5,7.6,11.3,7.6,18.6c0,7.1-2.5,13.1-7.6,18.1C771.3,800.2,765.3,802.7,758.2,802.7L758.2,802.7z"/>
+                      </g>
+                  </symbol>
+              </svg>
+          </div>
+
+
+
+
+    <div id='react'></div>
+
+    <script src="./js/main.js"></script>
+
+
+</body>
+
+
+
+
+
+</html>