@ably/ui 8.6.0 → 8.7.0-dev.0ce5893

package/src/core/icons/icon-gui-resources.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M5 1.5C4.30964 1.5 3.75 2.05964 3.75 2.75V3.75H5C5.41421 3.75 5.75 4.08579 5.75 4.5C5.75 4.91421 5.41421 5.25 5 5.25H3.75V6.75H5C5.41421 6.75 5.75 7.08579 5.75 7.5C5.75 7.91421 5.41421 8.25 5 8.25H3.75V9.75H5C5.41421 9.75 5.75 10.0858 5.75 10.5C5.75 10.9142 5.41421 11.25 5 11.25H3.75V12.75H5C5.41421 12.75 5.75 13.0858 5.75 13.5C5.75 13.9142 5.41421 14.25 5 14.25H3.75V15.75H5C5.41421 15.75 5.75 16.0858 5.75 16.5C5.75 16.9142 5.41421 17.25 5 17.25H3.75V18.75H5C5.41421 18.75 5.75 19.0858 5.75 19.5C5.75 19.9142 5.41421 20.25 5 20.25H3.75V21.25C3.75 21.9404 4.30964 22.5 5 22.5H18.5C19.1904 22.5 19.75 21.9404 19.75 21.25V19.75H12C10.4812 19.75 9.25 18.5188 9.25 17V12C9.25 10.4812 10.4812 9.25 12 9.25H19.75V3.75C19.75 2.50736 18.7426 1.5 17.5 1.5H5ZM2.25 2.75V3.75H1C0.585786 3.75 0.25 4.08579 0.25 4.5C0.25 4.91421 0.585786 5.25 1 5.25H2.25V6.75H1C0.585786 6.75 0.25 7.08579 0.25 7.5C0.25 7.91421 0.585786 8.25 1 8.25H2.25V9.75H1C0.585786 9.75 0.25 10.0858 0.25 10.5C0.25 10.9142 0.585786 11.25 1 11.25H2.25V12.75H1C0.585786 12.75 0.25 13.0858 0.25 13.5C0.25 13.9142 0.585786 14.25 1 14.25H2.25V15.75H1C0.585786 15.75 0.25 16.0858 0.25 16.5C0.25 16.9142 0.585786 17.25 1 17.25H2.25V18.75H1C0.585786 18.75 0.25 19.0858 0.25 19.5C0.25 19.9142 0.585786 20.25 1 20.25H2.25V21.25C2.25 22.7688 3.48122 24 5 24H18.5C20.0188 24 21.25 22.7688 21.25 21.25V19.7388C22.6516 19.6125 23.75 18.4345 23.75 17V12C23.75 10.5655 22.6516 9.38752 21.25 9.26121V3.75C21.25 1.67893 19.5711 0 17.5 0H5C3.48122 0 2.25 1.23122 2.25 2.75ZM20.5 10.75H12C11.3096 10.75 10.75 11.3096 10.75 12V17C10.75 17.6904 11.3096 18.25 12 18.25H20.5H21C21.6904 18.25 22.25 17.6904 22.25 17V12C22.25 11.3096 21.6904 10.75 21 10.75H20.5ZM12.5 4.25C12.5 3.42157 13.1716 2.75 14 2.75H17C17.8284 2.75 18.5 3.42157 18.5 4.25V5.25C18.5 6.07843 17.8284 6.75 17 6.75H14C13.1716 6.75 12.5 6.07843 12.5 5.25V4.25ZM14 3.75C13.7239 3.75 13.5 3.97386 13.5 4.25V5.25C13.5 5.52614 13.7239 5.75 14 5.75H17C17.2761 5.75 17.5 5.52614 17.5 5.25V4.25C17.5 3.97386 17.2761 3.75 17 3.75H14ZM15.5 13.2582L17.4746 14.4992L15.5 15.7402V13.2582ZM18.0421 15.3236C18.6526 14.9399 18.6526 14.0585 18.0421 13.6747L16.0176 12.4024C15.377 11.9998 14.5 12.4363 14.5 13.2268V15.7716C14.5 16.5621 15.377 16.9986 16.0176 16.596L18.0421 15.3236Z" fill="currentColor" />
+</svg>

package/src/core/icons/icon-multi-user-spaces-col.svg

@@ -0,0 +1,13 @@
+<svg width="49" height="48" viewBox="0 0 49 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="13" y="13" width="6" height="6" stroke="#03020D" stroke-width="1.5" stroke-linejoin="round"/>
+<rect x="31" y="13" width="6" height="6" stroke="#03020D" stroke-width="1.5" stroke-linejoin="round"/>
+<rect x="13" y="31" width="6" height="6" stroke="#03020D" stroke-width="1.5" stroke-linejoin="round"/>
+<path d="M16 19L16 31" stroke="#03020D" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M34 19L34 26" stroke="#03020D" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M19 16L31 16" stroke="#03020D" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M19 34L29 34" stroke="#03020D" stroke-width="1.5" stroke-linecap="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M47.7494 34.1265C47.7376 33.8234 47.5443 33.5572 47.2597 33.4522L30.3737 27.2184C30.0903 27.1138 29.7719 27.1893 29.5658 27.41C29.3596 27.6308 29.306 27.9536 29.4297 28.2291L36.806 44.66C36.932 44.9405 37.2163 45.1158 37.5235 45.1021C37.8306 45.0885 38.0984 44.8888 38.199 44.5983L40.4903 37.9808L47.3138 34.8369C47.5894 34.71 47.7613 34.4296 47.7494 34.1265Z" fill="#FF5416"/>
+<path d="M12.8863 45.5057L1.62891 41.3499L6.37144 39.1648L7.96873 34.5518L12.8863 45.5057Z" stroke="#03020D" stroke-width="1.5" stroke-linejoin="round"/>
+<path d="M30.2574 0.999899L19 5.15576L23.7425 7.34085L25.3398 11.9538L30.2574 0.999899Z" stroke="#03020D" stroke-width="1.5" stroke-linejoin="round"/>
+<path d="M33 6L44 6" stroke="#03020D" stroke-width="1.5" stroke-linecap="round"/>
+</svg>

package/src/core/icons/stackoverflow.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M16.8833 17.0404L6.44573 14.8304L6.89029 12.7367L17.3279 14.9467L16.8833 17.0404ZM17.4825 14.3457L7.81808 9.82876L8.72653 7.89014L18.391 12.4071L17.4825 14.3457ZM18.7002 11.9031L10.5048 5.05977L11.8771 3.41195L20.0726 10.2552L18.7002 11.9031ZM14.0806 1.27948L15.8009 0L22.1601 8.58804L20.4398 9.86753L14.0806 1.27948ZM16.8833 19.7351H6.25244V17.6026H16.8833V19.7351ZM21.1356 15.4701H19.0094V21.8675H4.12617V15.4701H2V24H21.1356V15.4701Z" fill="currentColor"/>
+</svg>

package/src/core/icons/youtube.svg

@@ -0,0 +1,11 @@
+<svg width="32" height="22" viewBox="0 0 32 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <g clip-path="url(#clip0_1509_18255)">
+    <path d="M30.525 3.44433C30.1655 2.09844 29.113 1.03726 27.778 0.6749C25.3391 0.00195312 15.5834 0.00195312 15.5834 0.00195312C15.5834 0.00195312 5.82773 0.00195312 3.38881 0.649017C2.0795 1.01137 1.00124 2.09844 0.64182 3.44433C0 5.90318 0 11.002 0 11.002C0 11.002 0 16.1268 0.64182 18.5597C1.00124 19.9056 2.05382 20.9668 3.38881 21.3292C5.8534 22.0021 15.5834 22.0021 15.5834 22.0021C15.5834 22.0021 25.3391 22.0021 27.778 21.3551C29.113 20.9927 30.1655 19.9315 30.525 18.5856C31.1668 16.1268 31.1668 11.0279 31.1668 11.0279C31.1668 11.0279 31.1925 5.90318 30.525 3.44433Z" fill="currentColor"/>
+    <path d="M20.5892 11.0021L12.4766 6.2915V15.7128L20.5892 11.0021Z" fill="white"/>
+  </g>
+  <defs>
+    <clipPath id="clip0_1509_18255">
+      <rect width="31.1667" height="22" fill="white"/>
+    </clipPath>
+  </defs>
+</svg>

package/src/core/styles/properties.css

@@ -47,6 +47,8 @@
     --icon-color-glassdoor: #0baa41;
     --icon-color-github: #000000;
     --icon-color-discord: #5865f2;
+    --icon-color-stackoverflow: #f48024;
+    --icon-color-youtube: #ff0000;
 
     --gradient-active-orange: linear-gradient(
       61.2deg,

package/src/core/styles/text.css

@@ -147,16 +147,15 @@
   }
 
   .ui-link {
-    @apply visited:text-gui-visited;
+    @apply text-gui-default;
     @apply hover:text-gui-hover active:text-gui-active disabled:text-gui-unavailable;
-    @apply focus:text-gui-focus focus:outline-gui-focus;
-    @apply underline;
+    @apply focus:text-gui-default focus:outline-gui-focus;
+    @apply no-underline;
   }
 
   .ui-link-neutral {
-    @apply visited:text-dark-grey;
     @apply hover:text-dark-grey active:text-cool-black disabled:text-gui-unavailable;
-    @apply focus:text-gui-focus focus:outline-gui-focus-neutral;
+    @apply focus:text-charcoal-grey focus:outline-gui-focus-neutral;
     @apply underline;
   }
 }

package/src/core/utils/syntax-highlighter-registry.js

@@ -0,0 +1,61 @@
+// This file can be used in the browser, but because of the weight of all the language
+// definitions, preferably it should be used on the server.
+
+import bash from "highlight.js/lib/languages/bash";
+import cpp from "highlight.js/lib/languages/cpp";
+import csharp from "highlight.js/lib/languages/csharp";
+import css from "highlight.js/lib/languages/css";
+import dart from "highlight.js/lib/languages/dart";
+import dos from "highlight.js/lib/languages/dos";
+import diff from "highlight.js/lib/languages/diff";
+import erlang from "highlight.js/lib/languages/erlang";
+import elixir from "highlight.js/lib/languages/elixir";
+import plaintext from "highlight.js/lib/languages/plaintext";
+import go from "highlight.js/lib/languages/go";
+import http from "highlight.js/lib/languages/http";
+import java from "highlight.js/lib/languages/java";
+import javascript from "highlight.js/lib/languages/javascript";
+import typescript from "highlight.js/lib/languages/typescript";
+import json from "highlight.js/lib/languages/json";
+import objectivec from "highlight.js/lib/languages/objectivec";
+import php from "highlight.js/lib/languages/php";
+import python from "highlight.js/lib/languages/python";
+import ruby from "highlight.js/lib/languages/ruby";
+import swift from "highlight.js/lib/languages/swift";
+import sql from "highlight.js/lib/languages/sql";
+import xml from "highlight.js/lib/languages/xml";
+import yaml from "highlight.js/lib/languages/yaml";
+import curl from "highlightjs-curl/src/languages/curl";
+
+const registry = [
+  { label: "Text", key: "text", module: plaintext },
+  { label: "JS", key: "javascript", module: javascript },
+  { label: "TS", key: "typescript", module: typescript },
+  { label: "Java", key: "java", module: java },
+  { label: "Ruby", key: "ruby", module: ruby },
+  { label: "Python", key: "python", module: python },
+  { label: "PHP", key: "php", module: php },
+  { label: "Shell", key: "bash", module: bash },
+  { label: "C#", key: "cs", module: csharp },
+  { label: "CSS", key: "css", module: css },
+  { label: "Go", key: "go", module: go },
+  { label: "HTML", key: "xml", module: xml },
+  { label: "HTTP", key: "http", module: http },
+  { label: "C++", key: "cpp", module: cpp },
+  { label: "Dart", key: "dart", module: dart },
+  { label: "Swift", key: "swift", module: swift },
+  { label: "Objective C", key: "objectivec", module: objectivec },
+  { label: "Node.js", key: "javascript", module: javascript },
+  { label: "JSON", key: "json", module: json },
+  { label: "DOS", key: "dos", module: dos },
+  { label: "YAML", key: "yaml", module: yaml },
+  { label: "Erlang", key: "erlang", module: erlang },
+  { label: "Elixir", key: "elixir", module: elixir },
+  { label: "Diff", key: "diff", module: diff },
+  { label: "SQL", key: "sql", module: sql },
+  { label: "cURL", key: "curl", module: curl },
+  { label: "HTML", key: "html", module: xml },
+  { label: "XML", key: "xml", module: xml },
+];
+
+export default registry;

package/src/core/utils/syntax-highlighter.css

@@ -0,0 +1,69 @@
+@layer base {
+  @import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,600;0,700;1,600;1,700&display=swap");
+}
+
+@layer components {
+  .hljs {
+    background: var(--syntax-black);
+    color: var(--syntax-light-grey);
+  }
+
+  .hljs-emphasis {
+    @apply italic;
+  }
+
+  .hljs-strong {
+    @apply font-bold;
+  }
+
+  .hljs-comment,
+  .hljs-quote {
+    color: var(--syntax-dark-grey);
+  }
+
+  .hljs-variable,
+  .hljs-template-variable,
+  .hljs-tag,
+  .hljs-name,
+  .hljs-selector-id,
+  .hljs-selector-class,
+  .hljs-regexp,
+  .hljs-deletion {
+    color: var(--syntax-red);
+  }
+
+  .hljs-number,
+  .hljs-built_in,
+  .hljs-literal,
+  .hljs-type,
+  .hljs-params,
+  .hljs-meta,
+  .hljs-link {
+    color: var(--syntax-orange);
+  }
+
+  .hljs-attribute {
+    color: var(--syntax-yellow);
+  }
+
+  .hljs-string,
+  .hljs-symbol,
+  .hljs-bullet,
+  .hljs-addition {
+    color: var(--syntax-green);
+  }
+
+  .hljs-title,
+  .hljs-section {
+    color: var(--syntax-blue);
+  }
+
+  .hljs-keyword,
+  .hljs-selector-tag {
+    color: var(--syntax-lilac);
+  }
+
+  .hljs-subst {
+    color: var(--syntax-mid-grey);
+  }
+}

package/src/core/utils/syntax-highlighter.js

@@ -0,0 +1,98 @@
+import hljs from "highlight.js/lib/core";
+
+// Map certain frameworks, protocols etc to available langauage packs
+const languageToHighlightKey = (lang) => {
+  let id;
+
+  if (!lang) {
+    lang = "text";
+  }
+
+  switch (lang.toLowerCase()) {
+    case "android":
+      id = "java";
+      break;
+
+    case ".net":
+    case "net":
+    case "dotnet":
+    case "csharp":
+    case "c#":
+      id = "cs";
+      break;
+
+    case "objc":
+    case "objective c":
+      id = "objectivec";
+      break;
+
+    case "laravel":
+      id = "php";
+      break;
+
+    case "flutter":
+      id = "dart";
+      break;
+
+    case "node.js":
+    case "js":
+      id = "javascript";
+      break;
+
+    case "ts":
+      id = "typescript";
+      break;
+
+    case "shell":
+    case "fh":
+    case "sh":
+      id = "bash";
+      break;
+
+    case "https":
+    case "http":
+    case "txt":
+    case "plaintext":
+      id = "text";
+      break;
+
+    case "cmd":
+    case "bat":
+      id = "dos";
+      break;
+
+    case "yml":
+      id = "yaml";
+      break;
+
+    case "erl":
+      id = "erlang";
+      break;
+
+    case "patch":
+      id = "diff";
+      break;
+
+    case "svg":
+      id = "xml";
+      break;
+
+    default:
+      break;
+  }
+
+  return id || lang;
+};
+
+const registerDefaultLanguages = (register) => {
+  register.forEach(({ key, module }) => hljs.registerLanguage(key, module));
+};
+
+const highlightSnippet = (languageKeyword, snippet) => {
+  const language = languageToHighlightKey(languageKeyword);
+  if (typeof snippet !== "string" || !snippet || !language) return;
+
+  return hljs.highlight(snippet, { language }).value;
+};
+
+export { highlightSnippet, languageToHighlightKey, registerDefaultLanguages };

package/tailwind.config.js

@@ -131,6 +131,7 @@ module.exports = {
       80: "var(--spacing-80)",
       88: "var(--spacing-88)",
       96: "var(--spacing-96)",
+      128: "var(--spacing-128)",
       160: "var(--spacing-160)",
       256: "var(--spacing-256)",
     },