@ably/ui 13.3.0 → 14.0.0-dev.58ef698

package/core/scripts.js.LICENSE.txt

@@ -1 +0,0 @@
-/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */

package/reset/.gitignore

@@ -1 +0,0 @@
-*

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

@@ -1,3 +0,0 @@
-<%= tag.div class: "hljs p-32 overflow-auto", data: { id: "code" } do %>
-  <%= tag.pre lang: @language do %><%= tag.code class: "language-#{@language} #{@text_size}" do %><%= @snippet %><% end %><% end %>
-<% end %>

package/src/core/Code/component.jsx

@@ -1,31 +0,0 @@
-import React from "react";
-import T from "prop-types";
-
-import "../utils/syntax-highlighter.css";
-import { highlightSnippet, registerDefaultLanguages } from "../utils/syntax-highlighter";
-import languagesRegistry from "../utils/syntax-highlighter-registry";
-
-registerDefaultLanguages(languagesRegistry);
-
-const Code = ({ language, snippet, textSize = "ui-text-code", padding = "p-32", additionalCSS = "" }) => {
-  const HTMLraw = highlightSnippet(language, `${snippet}`.trim());
-  const className = `language-${language} ${textSize}`;
-
-  return (
-    <div className={`hljs overflow-auto ${padding} ${additionalCSS}`} data-id="code">
-      <pre lang={language}>
-        <code className={className} dangerouslySetInnerHTML={{ __html: HTMLraw }} />
-      </pre>
-    </div>
-  );
-};
-
-Code.propTypes = {
-  language: T.string,
-  snippet: T.string,
-  textSize: T.string,
-  padding: T.string,
-  additionalCSS: T.string,
-};
-
-export default Code;

package/src/core/Code/component.rb

@@ -1,12 +0,0 @@
-module AblyUi
-  module Core
-    class Code < ViewComponent::Base
-      include AblyUi::Core::Util
-      def initialize(language:, snippet:, text_size: 'ui-text-code')
-        @language = language
-        @snippet = snippet.try(:strip)
-        @text_size = text_size
-      end
-    end
-  end
-end

package/src/core/CompanyAutocomplete/component.css

@@ -1,45 +0,0 @@
-@layer components {
-  .ui-company-autocomplete-container {
-    @apply shadow-container absolute bg-white w-full z-10 font-sans;
-  }
-
-  .ui-company-autocomplete-list {
-    @apply border border-mid-grey border-t-0;
-  }
-
-  .ui-company-autocomplete-listitem {
-    @apply border-b border-mid-grey h-48;
-  }
-
-  .ui-company-autocomplete-btn {
-    @apply h-full w-full flex items-center py-4 px-12;
-  }
-
-  .ui-company-autocomplete-btn:focus {
-    @apply focus:text-gui-focus;
-  }
-
-  .ui-company-autocomplete-listitem:last-child {
-    @apply border-b-0;
-  }
-
-  .ui-company-autocomplete-listitem:hover {
-    @apply bg-light-grey cursor-pointer;
-  }
-
-  .ui-company-autocomplete-listitem:hover .ui-company-autocomplete-name {
-    @apply text-gui-hover;
-  }
-
-  .ui-company-autocomplete-logo {
-    @apply w-32;
-  }
-
-  .ui-company-autocomplete-name {
-    @apply font-sans font-light text-cool-black ml-8 text-p3 text-left;
-  }
-
-  .ui-company-autocomplete-domain {
-    @apply font-sans font-light text-dark-grey ml-auto text-p3;
-  }
-}

package/src/core/CompanyAutocomplete/component.js

@@ -1,204 +0,0 @@
-import "./component.css";
-
-import throttle from "lodash.throttle";
-
-const COMPANY_AUTOCOMPLETE_DROPDOWN = "[data-id=company-autocomplete-dropdown]";
-
-const getContainer = (input) =>
-  input.parentNode.querySelector(COMPANY_AUTOCOMPLETE_DROPDOWN);
-const getItems = (container) =>
-  container ? container.querySelectorAll("li > button") : [];
-const getFocusedItemIndex = (items) =>
-  Array.from(items).indexOf(document.activeElement);
-
-const clearList = (input) => {
-  const container = getContainer(input);
-
-  if (container) {
-    container.classList.add("hidden");
-    container.querySelector("ol").innerHTML = "";
-  }
-};
-
-const renderItems = (data) =>
-  data.map((element) => {
-    const listItem = document.createElement("li");
-    listItem.classList.add("ui-company-autocomplete-listitem");
-
-    const btn = document.createElement("button");
-    btn.classList.add("ui-company-autocomplete-btn");
-    btn.dataset.name = element.name;
-
-    const logo = document.createElement("img");
-    logo.alt = `${element.name} logo`;
-    logo.src = element.logo;
-    logo.classList.add("ui-company-autocomplete-logo");
-
-    const name = document.createElement("p");
-    name.textContent = element.name;
-    name.classList.add("ui-company-autocomplete-name");
-
-    const domain = document.createElement("p");
-    domain.textContent = element.domain;
-    domain.classList.add("ui-company-autocomplete-domain");
-
-    btn.append(logo);
-    btn.append(name);
-    btn.append(domain);
-    listItem.append(btn);
-
-    return listItem;
-  });
-
-const renderContainer = (input) => {
-  let container = getContainer(input);
-
-  if (!container) {
-    input.parentNode.style.position = "relative";
-
-    container = document.createElement("div");
-    container.dataset.id = "company-autocomplete-dropdown";
-    container.classList.add("ui-company-autocomplete-container");
-
-    const list = document.createElement("ol");
-    list.classList.add("ui-company-autocomplete-list");
-
-    return { container, list };
-  }
-
-  return { container, list: container.querySelector("ol") };
-};
-
-const renderDropdown = (input, data) => {
-  const parent = input.parentNode;
-  const { container, list } = renderContainer(input);
-  const items = renderItems(data);
-
-  clearList(input);
-
-  items.forEach((item, index) => {
-    list.append(item);
-    item.addEventListener("click", (event) => {
-      input.value = data[index].name;
-      event.preventDefault();
-    });
-  });
-
-  container.append(list);
-  container.classList.remove("hidden");
-  parent.append(container);
-};
-
-const fetchData = async (url, query) => {
-  try {
-    if (!query) {
-      return [];
-    }
-
-    const res = await fetch(`${url}?query=${query}`);
-    const payload = await res.json();
-
-    return payload;
-  } catch (e) {
-    // eslint-disable-next-line no-console
-    console.error(e);
-    return [];
-  }
-};
-
-const handleDownArrow = (input, event) => {
-  const container = getContainer(input);
-  const items = getItems(container);
-  const focusedItemIndex = getFocusedItemIndex(items);
-
-  if (items.length === 0) {
-    return;
-  } else if (document.activeElement === input) {
-    items[0].focus();
-  } else if (focusedItemIndex >= 0 && focusedItemIndex < items.length - 1) {
-    items[focusedItemIndex + 1].focus();
-  }
-
-  event.preventDefault();
-};
-
-const handleUpArrow = (input, event) => {
-  const container = getContainer(input);
-  const items = getItems(container);
-  const focusedItemIndex = getFocusedItemIndex(items);
-
-  if (items.length === 0) {
-    return;
-  } else if (focusedItemIndex === 0) {
-    input.focus();
-  } else if (focusedItemIndex > 0) {
-    items[focusedItemIndex - 1].focus();
-  }
-
-  event.preventDefault();
-};
-
-const handleTab = (input, event) => {
-  const container = getContainer(input);
-  const items = getItems(container);
-  const focusedItemIndex = getFocusedItemIndex(items);
-
-  if (document.activeElement === input && event.shiftKey) {
-    clearList(input);
-  } else if (focusedItemIndex === items.length - 1) {
-    clearList(input);
-  }
-};
-
-const handleEnter = (input, event) => {
-  if (event.target.dataset.name) {
-    input.value = event.target.dataset.name;
-    clearList(input);
-    input.focus();
-    event.preventDefault();
-  }
-};
-
-const CompanyAutocomplete = (input, url) => {
-  if (!input || !url) return;
-
-  input.setAttribute("autocomplete", "off");
-
-  input.addEventListener(
-    "keyup",
-    throttle(
-      async (event) => {
-        if (["Enter", "Space", "Tab", "Escape"].includes(event.code)) return;
-
-        const query = event.target.value;
-        const data = await fetchData(url, query);
-
-        if (data && data.length > 0) {
-          renderDropdown(input, data);
-        }
-      },
-      100,
-      { trailing: true }
-    )
-  );
-
-  input.parentNode.addEventListener("keydown", (event) => {
-    if (event.code === "ArrowDown") {
-      handleDownArrow(input, event);
-    } else if (event.code === "ArrowUp") {
-      handleUpArrow(input, event);
-    } else if (event.code === "Enter" || event.code === "Space") {
-      handleEnter(input, event);
-    } else if (event.code === "Tab") {
-      handleTab(input, event);
-    } else if (event.code === "Escape") {
-      clearList(input);
-    }
-  });
-
-  document.body.addEventListener("click", () => {
-    clearList(input);
-  });
-};
-
-export default CompanyAutocomplete;

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

@@ -1,32 +0,0 @@
-<div class="ui-contact-footer font-sans antialiased" data-id="contact-footer">
-  <div class="w-full bp-lg max-w-screen-xl mx-auto py-64 grid grid-cols-1 md:grid-cols-3 ui-grid-gap ui-grid-px">
-    <div class="ui-contact-footer-box">
-      <%= render(AblyUi::Core::Icon.new(name: "icon-display-live-chat", size: "3rem", additional_css: "block mb-16")) %>
-      <div>
-        <div class="ui-text-h3 mb-24">Live Chat</div>
-        <p class="ui-text-p1">Reach out team of experts over chat powered by Ably.</p>
-      </div>
-      <%= tag.button type: "button", class: "ui-btn-secondary self-start mt-16", data: { id: "open-chat-widget", enabled_label: "Start a live chat", disabled_label: "Live chat unavailable" }, disabled: true do %>
-        Live chat unavailable
-      <% end %>
-    </div>
-    <div class="ui-contact-footer-box">
-      <%= render(AblyUi::Core::Icon.new(name: "icon-display-call-mobile", size: "3rem", additional_css: "block mb-16")) %>
-      <div class="flex-grow">
-        <div class="ui-text-h3 mb-24">Call us</div>
-        <p class="ui-text-p1">
-          <span class="block"><strong class="font-bold">+1 877 434 5287</strong> (USA, toll free) </span>
-          <span class="block"><strong class="font-bold">+44 20 3318 4689</strong> (UK) </span>
-        </p>
-      </div>
-    </div>
-    <div class="ui-contact-footer-box">
-      <%= render(AblyUi::Core::Icon.new(name: "icon-display-tech-account-comms", size: "3rem", additional_css: "block mb-16")) %>
-      <div>
-        <div class="ui-text-h3 mb-24">Technical and account support</div>
-        <p class="ui-text-p1">We&apos;re standing by to help with any questions or code.</p>
-      </div>
-      <%= link_to 'Get support now', abs_url("/support"), class: "ui-btn-secondary self-start p-btn mt-16" %>
-    </div>
-  </div>
-</div>

package/src/core/ContactFooter/component.jsx

@@ -1,66 +0,0 @@
-import React, { useEffect } from "react";
-import T from "prop-types";
-
-import Icon from "../Icon/component.jsx";
-import _absUrl from "../url-base";
-
-import toggleChatWidget from "./component.js";
-
-export default function ContactFooter({ urlBase }) {
-  useEffect(() => toggleChatWidget(), []);
-  const absUrl = (path) => _absUrl(path, urlBase);
-
-  return (
-    <div className="ui-contact-footer font-sans antialiased" data-id="contact-footer">
-      <div className="w-full bp-lg max-w-screen-xl mx-auto py-64 grid grid-cols-1 md:grid-cols-3 ui-grid-gap ui-grid-px">
-        <div className="ui-contact-footer-box">
-          <Icon name="icon-display-live-chat" size="3rem" additionalCSS="block mb-16" />
-          <div>
-            <div className="ui-text-h3 mb-24">Live Chat</div>
-            <p className="ui-text-p1">Reach out team of experts over chat powered by Ably.</p>
-          </div>
-          <button
-            type="button"
-            className="ui-btn-secondary self-start mt-16"
-            disabled
-            data-id="open-chat-widget"
-            data-enabled-label="Start a live chat"
-            data-disabled-label="Live chat unavailable"
-          >
-            Live chat unavailable
-          </button>
-        </div>
-
-        <div className="ui-contact-footer-box">
-          <Icon name="icon-display-call-mobile" size="3rem" additionalCSS="block mb-16" />
-          <div className="flex-grow">
-            <div className="ui-text-h3 mb-24">Call us</div>
-            <p className="ui-text-p1">
-              <span className="block">
-                <strong className="font-bold">+1 877 434 5287</strong> (USA, toll free)
-              </span>
-              <span className="block">
-                <strong className="font-bold">+44 20 3318 4689</strong> (UK)
-              </span>
-            </p>
-          </div>
-        </div>
-
-        <div className="ui-contact-footer-box">
-          <Icon name="icon-display-tech-account-comms" size="3rem" additionalCSS="block mb-16" />
-          <div>
-            <div className="ui-text-h3 mb-24">Technical and account support</div>
-            <p className="ui-text-p1">We&apos;re standing by to help with any questions or code.</p>
-          </div>
-          <a className="ui-btn-secondary self-start p-btn mt-16" href={absUrl("/support")}>
-            Get support now
-          </a>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-ContactFooter.propTypes = {
-  urlBase: T.string,
-};

package/src/core/ContactFooter/component.rb

@@ -1,13 +0,0 @@
-module AblyUi
-  module Core
-    class ContactFooter < ViewComponent::Base
-      include AblyUi::Core::Util
-
-      attr_reader :url_base
-
-      def initialize(url_base: AblyUi::Core::Util::DEFAULT_URL_BASE)
-        @url_base = url_base
-      end
-    end
-  end
-end

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

@@ -1,9 +0,0 @@
-<section class="w-full bg-white">
-  <%= tag.ul class: "py-64 flex flex-row flex-wrap md:flex-nowrap content-between m-auto items-center #{@additional_css}" do %>
-    <% companies.each do |company| %>
-	    <li class="flex-auto text-center sm:w-1/3 w-1/2">
-	      <%= image_tag company[:logo], alt: "#{company[:label]} logo", class: 'mx-auto' %>
-	    </li>
-    <% end %>
-  <% end %>
-</section>

package/src/core/CustomerLogos/component.jsx

@@ -1,28 +0,0 @@
-import React from "react";
-import T from "prop-types";
-
-const CustomerLogos = ({ companies, additionalCss = "" }) => {
-  return (
-    <section className="w-full bg-white">
-      <ul className={`py-64 flex flex-row flex-wrap md:flex-nowrap content-between m-auto items-center ${additionalCss}`}>
-        {companies.map((company) => (
-          <li key={company.label} className="flex-auto text-center sm:w-1/3 w-1/2">
-            <img alt={company.label} src={company.logo} className="mx-auto" />
-          </li>
-        ))}
-      </ul>
-    </section>
-  );
-};
-
-CustomerLogos.propTypes = {
-  companies: T.arrayOf(
-    T.shape({
-      label: T.string,
-      logo: T.string,
-    })
-  ),
-  additionalCss: T.string,
-};
-
-export default CustomerLogos;

package/src/core/CustomerLogos/component.rb

@@ -1,14 +0,0 @@
-require 'json'
-
-module AblyUi
-  module Core
-    class CustomerLogos < ViewComponent::Base
-      attr_reader :companies
-
-      def initialize(companies:, additional_css: '')
-        @companies = companies
-        @additional_css = additional_css
-      end
-    end
-  end
-end

package/src/core/FeatureFooter/component.css

@@ -1,12 +0,0 @@
-@layer components {
-  .ui-feature-footer {
-    background: var(--gradient-active-orange);
-    background-size: 100% 100%;
-    background-position: right center;
-    @apply w-full font-sans antialiased bg-gradient-active-orange;
-  }
-
-  .ui-feature-footer-box {
-    @apply p-24 sm:p-32 xl:p-40 flex flex-col justify-between rounded-sm;
-  }
-}

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

@@ -1,54 +0,0 @@
-<%- @image_url ||= asset_path('ably_ui/core/images/technical-support-01-800x533.jpg') %>
-<div class="ui-feature-footer" data-id="feature-footer">
-  <div class="w-full bp-lg max-w-screen-xl mx-auto py-64 md:grid grid-cols-3 ui-grid-gap ui-grid-px">
-    <div class="col-span-2 bg-cool-black text-white rounded-lg overflow-hidden sm:flex flex-row mb-24 md:mb-0">
-      <%= tag.div class: 'ui-feature-image flex-0 bg-center bg-cover w-full h-256 sm:w-1/2 sm:h-auto', style: "background-image:url(#{@image_url})" %>
-      <div class="p-24 sm:p-32 flex-1 h-full">
-        <div class="flex flex-col h-full space-between">
-          <span class="flex-1">
-            <div class="ui-text-h3 text-white mb-24 flex-1"><%= @title %> </div>
-            <p class="ui-text-p1 text-white"><%= @subtitle %></p>
-            <%= tag.button type: "button", class: "ui-btn-secondary-invert self-start mt-24", data: { id: "open-chat-widget", enabled_label: live_chat_label, disabled_label: live_chat_disabled_label }, disabled: true do %>
-              <%= live_chat_disabled_label %>
-            <% end %>
-          </span>
-          <span class="flex-0 mt-24 md:mt-0">
-            <p class="ui-text-p1 text-white">
-              Don’t want to chat?
-              <%= link_to 'Get in touch via our contact page', abs_url("/contact"), class: "text-white underline font-medium hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus" %>
-            </p>
-          </span>
-        </div>
-      </div>
-    </div>
-    <div class="bg-white rounded-lg p-24 sm:p-32 w-auto">
-      <div class="flex flex-col h-full space-between">
-        <span class="flex-1">
-          <div class="ui-text-h3 mb-24">Try our APIs for free</div>
-          <p class="ui-text-p1 mb-16">Our free plan includes</p>
-          <ul class="relative ml-24 ui-text-p1">
-            <li>
-              <%= render(AblyUi::Core::Icon.new(name: "icon-gui-tick", size: "1.5rem", additional_css: "align-text-bottom")) %>
-              6m messages per month
-            </li>
-            <li>
-              <%= render(AblyUi::Core::Icon.new(name: "icon-gui-tick", size: "1.5rem", additional_css: "align-text-bottom")) %>
-              200 peak connections
-            </li>
-            <li>
-              <%= render(AblyUi::Core::Icon.new(name: "icon-gui-tick", size: "1.5rem", additional_css: "align-text-bottom")) %>
-              200 peak channels
-            </li>
-            <li>
-              <%= render(AblyUi::Core::Icon.new(name: "icon-gui-tick", size: "1.5rem", additional_css: "align-text-bottom")) %>
-              Loads of features
-            </li>
-          </ul>
-        </span>
-        <span class="flex-0">
-          <%= link_to 'Start building', abs_url("/sign-up"), class: "ui-btn-secondary self-start mt-24" %>
-        </span>
-      </div>
-    </div>
-  </div>
-</div>

package/src/core/FeatureFooter/component.js

@@ -1,7 +0,0 @@
-import toggleChatWidget from "../hubspot-chat-toggle";
-import "./component.css";
-
-export default () =>
-  toggleChatWidget({
-    dataId: "feature-footer",
-  });

package/src/core/FeatureFooter/component.rb

@@ -1,30 +0,0 @@
-module AblyUi
-  module Core
-    class FeatureFooter < ViewComponent::Base
-      include AblyUi::Core::Util
-
-      attr_reader :url_base,
-                  :image_url,
-                  :title,
-                  :subtitle,
-                  :live_chat_label,
-                  :live_chat_disabled_label
-
-      def initialize(
-        url_base: AblyUi::Core::Util::DEFAULT_URL_BASE,
-        image_url: nil,
-        title: 'Talk to our technical team',
-        subtitle: "If you're having technical or account issues just get in touch.",
-        live_chat_label: 'Start a live chat',
-        live_chat_disabled_label: 'Live chat unavailable'
-      )
-        @url_base = url_base
-        @image_url = image_url
-        @title = title
-        @subtitle = subtitle
-        @live_chat_label = live_chat_label
-        @live_chat_disabled_label = live_chat_disabled_label
-      end
-    end
-  end
-end

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

@@ -1,15 +0,0 @@
-<%= link_to(@url, class: "font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group ui-#{@text_size} #{@flush ? '' : 'py-8'}  #{@additional_css}", style: "--featured-link-icon-size: var(#{@text_size.gsub("text", "--fs")})") do %>
-  <% if @reverse %>
-    <%= render(AblyUi::Core::Icon.new(name: "icon-gui-link-arrow",
-                                      size: "calc(var(--featured-link-icon-size) * 1.25)",
-                                      color: @icon_color,
-                                      additional_css: "align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180")) %>
-    <%= content -%>
-  <% else %>
-    <%= content -%><%= render(AblyUi::Core::Icon.new(name: "icon-gui-link-arrow",
-                                                     size: "calc(var(--featured-link-icon-size) * 1.25)",
-                                                     color: @icon_color,
-                                                     additional_css: "align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0")) %>
-  <% end %>
-
-<% end %>

package/src/core/FeaturedLink/component.rb

@@ -1,21 +0,0 @@
-module AblyUi
-  module Core
-    class FeaturedLink < ViewComponent::Base
-      def initialize(
-        url:,
-        text_size: 'text-p2',
-        icon_color: 'text-cool-black',
-        flush: false,
-        reverse: false,
-        additional_css: ''
-      )
-        @url = url
-        @text_size = text_size
-        @icon_color = icon_color
-        @flush = flush
-        @reverse = reverse
-        @additional_css = additional_css
-      end
-    end
-  end
-end