@ably/ui 8.7.0-dev.73348b7 → 8.7.0-dev.9b0589d

package/src/core/DropdownMenu/component.jsx

@@ -0,0 +1,114 @@
+import React, { createContext, useContext, useState, useEffect, useRef } from "react";
+import T from "prop-types";
+import Icon from "../Icon/component.jsx";
+
+const DropdownMenuContext = createContext();
+
+const DropdownMenu = ({ children }) => {
+  const [isOpen, setOpen] = useState(false);
+  const ref = useRef(null);
+
+  useEffect(() => {
+    const clickHandler = (e) => {
+      if (ref?.current?.contains(e.target)) return;
+      setOpen(false);
+    };
+
+    document.addEventListener("click", clickHandler);
+
+    return () => {
+      document.removeEventListener("click", clickHandler);
+    };
+  }, []);
+
+  return (
+    <DropdownMenuContext.Provider value={{ isOpen, setOpen }}>
+      <div id="dropdown-menu" className="relative" ref={ref}>
+        {children}
+      </div>
+    </DropdownMenuContext.Provider>
+  );
+};
+
+DropdownMenu.propTypes = {
+  children: T.node,
+};
+
+const Trigger = ({ children, additionalTriggerCSS = "" }) => {
+  const { isOpen, setOpen } = useContext(DropdownMenuContext);
+
+  return (
+    <button
+      id="menu-trigger"
+      onClick={() => setOpen(!isOpen)}
+      className={`${additionalTriggerCSS} flex items-center p-8 ml-8 group hover:text-gui-hover hover:bg-light-grey active:text-gui-active focus:text-gui-focus focus:outline-none rounded-lg`}
+    >
+      <span className="leading-normal">{children}</span>
+      <Icon
+        name="icon-gui-disclosure-arrow"
+        color="text-cool-black"
+        size="1.25rem"
+        additionalCSS="transform rotate-90 group-hover:text-gui-hover group-active:text-gui-active group-focus:text-gui-focus"
+      />
+    </button>
+  );
+};
+
+<DropdownMenu.Trigger className="list of names">Click me</DropdownMenu.Trigger>;
+
+Trigger.propTypes = {
+  children: T.node,
+  additionalTriggerCSS: T.string,
+};
+
+const Content = ({ children, anchorPosition = "right", additionalContentCSS }) => {
+  const { isOpen } = useContext(DropdownMenuContext);
+
+  if (!isOpen) {
+    return null;
+  }
+
+  const anchorPositionClasses = anchorPosition === "right" ? "right-0" : "left-0";
+
+  return (
+    <div
+      id="menu-content"
+      className={`${additionalContentCSS} absolute p-8 z-10 border border-mid-grey bg-white rounded shadow-container ${anchorPositionClasses}`}
+      style={{ minWidth: 275, top: 44 }}
+    >
+      {children}
+    </div>
+  );
+};
+
+Content.propTypes = {
+  children: T.node,
+  anchorPosition: T.string,
+  additionalContentCSS: T.string,
+};
+
+const Link = ({ url, title, subtitle, iconName, children }) => {
+  return (
+    <a href={url} className="menu-link group block p-8 hover:bg-light-grey hover:text-cool-black rounded">
+      <p className="mb-4">
+        {title}
+        {iconName ? <Icon name={iconName} size="1rem" color="text-cool-black" additionalCSS="align-middle ml-8 relative -top-1 -left-4" /> : null}
+      </p>
+      {subtitle ? <p className="text-p3 mb-16 text-dark-grey">{subtitle}</p> : null}
+      {children}
+    </a>
+  );
+};
+
+Link.propTypes = {
+  url: T.string,
+  title: T.string,
+  subtitle: T.string,
+  iconName: T.string,
+  children: T.node,
+};
+
+DropdownMenu.Trigger = Trigger;
+DropdownMenu.Content = Content;
+DropdownMenu.Link = Link;
+export default DropdownMenu;

package/src/core/MeganavContentDevelopers/component.html.erb

@@ -56,6 +56,15 @@
             </div>
           <% end %>
         </li>
+        <li>
+          <%= link_to abs_url("/integrations"), class: "ui-meganav-media-with-image group" do %>
+            <%= render(AblyUi::Core::Icon.new(name: "icon-display-integrations-col", size: "2.5rem")) %>
+            <div class="flex flex-col justify-center">
+              <p class="ui-meganav-media-heading">Integrations</p>
+              <p class="ui-meganav-media-copy">Find out more about Ably integrations. </p>
+            </div>
+          <% end %>
+        </li>
       </ul>
     </div>
 

package/src/core/MeganavContentDevelopers/component.jsx

@@ -62,6 +62,15 @@ const MeganavContentDevelopers = ({ absUrl }) => (
               </div>
             </a>
           </li>
+          <li>
+            <a href={absUrl("/integrations")} className="ui-meganav-media-with-image group">
+              <Icon name="icon-display-integrations-col" size="2.5rem" />
+              <div className="flex flex-col justify-center">
+                <p className="ui-meganav-media-heading">Integrations</p>
+                <p className="ui-meganav-media-copy">Find out more about Ably integrations. </p>
+              </div>
+            </a>
+          </li>
         </ul>
       </div>
 

package/src/core/MeganavContentUseCases/component.html.erb

@@ -58,7 +58,7 @@
         </li>
         <li>
           <%= link_to abs_url("/solutions/fintech"), class: "ui-meganav-media group" do %>
-            <p class="ui-meganav-media-heading">Fintech</p>
+            <p class="ui-meganav-media-heading">FinTech</p>
             <p class="ui-meganav-media-copy">Deliver personalised financial data in realtime.</p>
           <% end %>
         </li>

package/src/core/MeganavContentUseCases/component.jsx

@@ -64,7 +64,7 @@ const MeganavContentUseCases = ({ absUrl }) => (
           </li>
           <li>
             <a href={absUrl("/solutions/fintech")} className="ui-meganav-media group">
-              <p className="ui-meganav-media-heading">Fintech</p>
+              <p className="ui-meganav-media-heading">FinTech</p>
               <p className="ui-meganav-media-copy">Deliver personalised financial data in realtime.</p>
             </a>
           </li>

package/src/core/MeganavSearchSuggestions/component.html.erb

@@ -12,7 +12,7 @@
       <%= link_to 'Publish/Subscribe Messaging', abs_url("/docs/core-features/pubsub"), class: "ui-text-p2 hover:text-gui-hover active:text-gui-active focus:text-gui-focus" %>
     </li>
     <li class="py-12 pl-8 flex-shrink-0">
-      <%= link_to 'Platform', abs_url("/docs/how-ably-works"), class: "ui-text-p2 hover:text-gui-hover active:text-gui-active focus:text-gui-focus" %>
+      <%= link_to 'Platform', abs_url("/platform"), class: "ui-text-p2 hover:text-gui-hover active:text-gui-active focus:text-gui-focus" %>
     </li>
   </ul>
 

package/src/core/icons/icon-display-integrations-col.svg

@@ -0,0 +1,8 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.69985 7.70029C3.40409 11.9961 3.18585 18.7426 7.21241 22.7692L11.9425 27.4993L27.4988 11.9429L22.7688 7.21285C18.7422 3.18629 11.9956 3.40453 7.69985 7.70029Z" stroke="#03020D" stroke-width="1.5" stroke-linejoin="round"/>
+<path d="M45.2129 45.2131L42.3844 42.3847" stroke="#03020D" stroke-width="1.37459" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M40.4514 40.451C35.8956 45.0068 28.6731 45.2897 24.3219 40.9385L19.5918 36.2084C19.2989 35.9155 19.2989 35.4406 19.5918 35.1477L35.1482 19.5914C35.441 19.2985 35.9159 19.2985 36.2088 19.5914L40.9389 24.3215C45.2902 28.6727 45.0073 35.8952 40.4514 40.451Z" fill="#FF5416"/>
+<path d="M2.78647 2.78662L7.73622 7.73637" stroke="#03020D" stroke-width="1.37459" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M23.2925 16.2217L28.2423 21.1714" stroke="#03020D" stroke-width="1.37459" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M16.2215 23.2927L21.1712 28.2425" stroke="#03020D" stroke-width="1.37459" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

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