@ably/ui 13.3.0 → 14.0.0-dev.fbce38f

package/src/core/Showcase/component.js

@@ -1,180 +0,0 @@
-import { queryId, queryIdAll } from "../dom-query";
-import { remsToPixelValue } from "../css";
-
-import "./component.css";
-
-const SLIDE_SHOW_INTERVAL = 5000;
-
-const updateLogoOpacity = (logos, currentIndex) => {
-  const visible = ["grayscale", "grayscale-0"];
-  const opaque = [...visible].reverse();
-  logos.forEach((logo, i) => {
-    logo.classList.replace(...(i === currentIndex ? visible : opaque));
-  });
-};
-
-const translateX = (el, currentIndex, direction = 1) => {
-  const percent = currentIndex * 100 * direction;
-  el.style.transform = `translateX(${percent}%)`;
-};
-
-const moveControlsContainer = (controlsContainer, currentIndex) => {
-  const { parentNode, children } = controlsContainer;
-  const parentCenter = parentNode.clientWidth / 2;
-  const countChildren = children.length;
-  const widthChildren = Array.from(children)
-    .map((el) => el.clientWidth)
-    .reduce((a, c) => a + c);
-
-  const width = widthChildren / countChildren;
-  const firstOrLast = !currentIndex || !(countChildren - currentIndex - 1);
-  const offsetLeft = !firstOrLast ? parentCenter - width / 2 : 0;
-  const left = currentIndex * width - (offsetLeft >> 0);
-
-  parentNode.scrollTo({ left, behavior: "smooth" });
-};
-
-const propertyValue = (string) => {
-  return window
-    .getComputedStyle(document.documentElement)
-    .getPropertyValue(string);
-};
-
-const mobileBreakpoint = (pixelWidth) => {
-  if (typeof window === "undefined") return false;
-
-  // Margin for small breakpoint, but could be different in practice
-  const estimatedMargin = 64;
-  const breakpointEstimate = `${pixelWidth + estimatedMargin}px`;
-
-  return !window.matchMedia(`(min-width: ${breakpointEstimate})`).matches;
-};
-
-export default (node, enableSlideshow) => {
-  const container = node || queryId("showcase");
-  const controls = Array.from(queryIdAll("showcase-control", container));
-  const logos = controls.map((control) => control.querySelector("img"));
-  const controlsContainer = queryId("showcase-controls", container);
-  const indexBar = queryId("showcase-index-bar", container);
-  const slides = queryId("showcase-slides", container);
-  const slideCount = slides.children.length;
-
-  const logoWidth = propertyValue("--ui-showcase-client-logo-min-width");
-  const pixelWidth = remsToPixelValue(logoWidth) * slideCount;
-
-  // dynamically adjust container width
-  [".ui-showcase-logo-wrapper", ".ui-showcase-index-bar"].forEach((s) => {
-    const el = container.querySelector(s);
-    const minWidth = `${pixelWidth}px`;
-    el.style.minWidth = minWidth;
-  });
-
-  let currentIndex = 0;
-  let mouseover = false;
-  let updateSlideTimeoutId;
-
-  const updateSlide = (index) => {
-    translateX(slides, index, -1);
-    translateX(indexBar, index, 1);
-    updateLogoOpacity(logos, index);
-
-    if (mobileBreakpoint(pixelWidth)) {
-      moveControlsContainer(controlsContainer, index);
-    }
-  };
-
-  const scheduleSlideMove = () =>
-    (updateSlideTimeoutId = setTimeout(() => {
-      if (mouseover) return;
-      if (mobileBreakpoint(pixelWidth)) return;
-
-      currentIndex = (currentIndex + 1) % controls.length;
-
-      updateSlide(currentIndex);
-      scheduleSlideMove();
-    }, SLIDE_SHOW_INTERVAL));
-
-  const logoClick = () => {
-    const clickHandler = (index) => () => {
-      currentIndex = index;
-      updateSlide(currentIndex);
-    };
-
-    const handlers = controls.map((control, index) => {
-      const handler = clickHandler(index);
-      control.addEventListener("click", handler);
-      return handler;
-    });
-
-    return () => {
-      handlers.forEach((handler, i) =>
-        controls[i].removeEventListener("click", handler)
-      );
-    };
-  };
-
-  const pointerOverContainer = () => {
-    const handler = () => {
-      mouseover = true;
-      clearTimeout(updateSlideTimeoutId);
-    };
-    container.addEventListener("mouseover", handler);
-    return () => container.removeEventListener("mouseover", handler);
-  };
-
-  const pointerLeftContainer = () => {
-    const handler = () => {
-      mouseover = false;
-      scheduleSlideMove();
-    };
-    container.addEventListener("mouseleave", handler);
-    return () => container.removeEventListener("mouseleave", handler);
-  };
-
-  const viewportResized = () => {
-    const handler = () => {
-      clearTimeout(updateSlideTimeoutId);
-      scheduleSlideMove();
-    };
-    document.addEventListener("resize", handler);
-    return () => document.removeEventListener("resize", handler);
-  };
-
-  const scrollOverContainer = () => {
-    const handler = (event) => event.preventDefault();
-    controlsContainer.parentNode.addEventListener("wheel", handler);
-    return () =>
-      controlsContainer.parentNode.removeEventListener("wheel", handler);
-  };
-
-  const logoClickTeardown = logoClick();
-  const scrollOverContainerTeardown = scrollOverContainer();
-
-  const slideshowInit = () => {
-    if (enableSlideshow) {
-      scheduleSlideMove();
-      container.setAttribute("aria-live", "polite");
-
-      const teardowns = [
-        pointerOverContainer(),
-        pointerLeftContainer(),
-        viewportResized(),
-      ];
-      return () => teardowns.forEach((t) => t());
-    } else {
-      return () => {};
-    }
-  };
-
-  const slideshowTeardown = slideshowInit();
-
-  return function teardown() {
-    // Restore initial position
-    updateSlide(0);
-    clearTimeout(updateSlideTimeoutId);
-
-    logoClickTeardown();
-    slideshowTeardown();
-    scrollOverContainerTeardown();
-  };
-};

package/src/core/Showcase/component.rb

@@ -1,190 +0,0 @@
-module AblyUi
-  module Core
-    class Showcase < ViewComponent::Base
-      include AblyUi::Core::Util
-      def initialize(companies: default_companies, layout: 'quotes')
-        @random_id = append_random_postfix('showcase-slides')
-        @companies = companies
-        @layout = layout
-        @companies_data_cache = nil
-      end
-
-      def companies_data
-        @companies_data_cache ||=
-          @companies.map do |key|
-            logo = company_logos[key]
-            logo[:layout] = @layout
-
-            content = @layout != 'quotes' ? case_studies : quotations
-
-            if !content[key]
-              # Exception errors can not be rescued
-              raise Exception.new "Showcase Error: Can't find content item [#{key}] for layout [#{@layout}]"
-            end
-
-            logo.merge(content[key])
-          end
-      end
-
-      def default_companies
-        %i[hubspot vitac split]
-      end
-
-      def company_logos
-        {
-          hubspot: {
-            name: 'Hubspot',
-            logo:
-              asset_path('ably_ui/core/images/cust-logo-hubspot-col-pos.png'),
-            logo2x:
-              asset_path('ably_ui/core/images/cust-logo-hubspot-col-pos@2x.png')
-          },
-          vitac: {
-            name: 'Vitac',
-            logo: asset_path('ably_ui/core/images/cust-logo-vitac-col-pos.png'),
-            logo2x:
-              asset_path('ably_ui/core/images/cust-logo-vitac-col-pos@2x.png')
-          },
-          split: {
-            name: 'Split',
-            logo: asset_path('ably_ui/core/images/cust-logo-split-col-pos.png'),
-            logo2x:
-              asset_path('ably_ui/core/images/cust-logo-split-col-pos@2x.png')
-          },
-          lightspeed: {
-            name: 'Lightspeed',
-            logo:
-              asset_path(
-                'ably_ui/core/images/cust-logo-lightspeed-syst-col-pos.png'
-              ),
-            logo2x:
-              asset_path(
-                'ably_ui/core/images/cust-logo-lightspeed-syst-col-pos@2x.png'
-              )
-          },
-          australian_open: {
-            name: 'Australian Open',
-            logo:
-              asset_path('ably_ui/core/images/cust-logo-ausopen-col-pos.png'),
-            logo2x:
-              asset_path('ably_ui/core/images/cust-logo-ausopen-col-pos@2x.png')
-          }
-        }
-      end
-
-      def quotations
-        {
-          hubspot: {
-            quote:
-              "Ably’s realtime infrastructure layer seamlessly supports HubSpot's entire realtime needs and helps us meet technical, business, and product development requirements.",
-            author: {
-              name: 'Max Freiert',
-              thumbnail:
-                asset_path(
-                  'ably_ui/core/images/cust-photo-hubspot-max-freiert.jpg'
-                ),
-              title: 'Product Group Lead / HubSpot'
-            }
-          },
-          vitac: {
-            quote:
-              'In a high-stakes, highly competitive industry, VITAC sought a provider that could operate realtime infrastructure for transporting live data to end-users via a complex, multi-hop process. In media accessibility environments - where there’s zero margin for error - Ably’s infrastructure performs and exceeds expectations.',
-            author: {
-              name: 'Joe Antonio',
-              thumbnail:
-                asset_path(
-                  'ably_ui/core/images/cust-photo-vitac-joe-antonio.jpg'
-                ),
-              title: 'Chief Information Officer / VITAC'
-            }
-          },
-          split: {
-            quote:
-              'You miss so much by not using a platform like Ably. When you need to implement a new feature, the capabilities are there, ready to go. Or when you need to scale, the capacity is seamlessly available. There’s no need to even think about these things. Building on Ably was the only logical choice because we managed to bypass a hefty DevOps debt and rapidly ship our new streaming capabilities while keeping our architecture as simple and reliable as possible.',
-            author: {
-              name: 'Pato Echagüe',
-              thumbnail:
-                asset_path(
-                  'ably_ui/core/images/cust-photo-split-pato-echague.jpg'
-                ),
-              title: 'Chief Technical Officer / Split'
-            }
-          }
-        }
-      end
-
-      def case_studies
-        {
-          hubspot: {
-            columns: [
-              {
-                heading: '$600k',
-                text: 'annual savings on infrastructure and DevOps'
-              },
-              {
-                heading: 'LIVE CHAT AND REMOTE COLLABORATION',
-                text:
-                  "Ably’s realtime platform seamlessly supports HubSpot's entire realtime needs and helps us meet technical, business, and product development, requirements.",
-                button: {
-                  label: 'View case study',
-                  href: '#'
-                }
-              }
-            ]
-          },
-          lightspeed: {
-            columns: [
-              {
-                heading: '75 million',
-                text: 'Students supported in 28,000 schools in 38 countries'
-              },
-              {
-                heading: 'REMOTE LEARNING AND DEVICE MANAGEMENT',
-                text:
-                  'Lightspeed Systems relies on Ably’s realtime platform to enable realtime student safety for remote and classroom learning solutions at scale.',
-                button: {
-                  label: 'View case study',
-                  href: '#'
-                }
-              }
-            ]
-          },
-          australian_open: {
-            columns: [
-              {
-                heading: '1.2 million',
-                text: 'Fans receiving billions of realtime messages'
-              },
-              {
-                heading: 'SPORTS, MEDIA, & AUDIENCE ENGAGEMENT',
-                text:
-                  'Only Ably meets The Australian Open’s exacting performance targets, reliably delivering realtime scores, updates and commentary to a huge global fan base.',
-                button: {
-                  label: 'View case study',
-                  href: '#'
-                }
-              }
-            ]
-          },
-          split: {
-            columns: [
-              {
-                heading: '>1 trillion',
-                text: 'Monthly feature flags sent over Ably’s network'
-              },
-              {
-                heading: 'REALTIME FEATURE FLAGS AND ANALYTICS',
-                text:
-                  'Ably’s realtime platform and SSE support enable Split to deliver more than one trillion business-critical feature flags to tens of millions of client apps every month.',
-                button: {
-                  label: 'View case study',
-                  href: '#'
-                }
-              }
-            ]
-          }
-        }
-      end
-    end
-  end
-end

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

@@ -1 +0,0 @@
-<%= link_to @session_data[:logOut][:text], abs_url(@session_data[:logOut][:href]), method: :delete, class: @classes, data: { id: "meganav-link" } %>

package/src/core/SignOutLink/component.jsx

@@ -1,32 +0,0 @@
-import React, { useRef } from "react";
-import T from "prop-types";
-
-const SignOutLink = ({ token, href, text, children, absUrl }) => {
-  const formRef = useRef(null);
-
-  const onClick = (e) => {
-    formRef.current.submit();
-    e.preventDefault();
-  };
-
-  return (
-    <>
-      <form ref={formRef} method="post" action={absUrl(href)} className="hidden">
-        <input name="_method" value="delete" type="hidden" />
-        <input name="authenticity_token" value={token} type="hidden" />
-      </form>
-
-      {children({ href, text, onClick })}
-    </>
-  );
-};
-
-SignOutLink.propTypes = {
-  token: T.string,
-  href: T.string,
-  text: T.string,
-  children: T.func,
-  absUrl: T.func,
-};
-
-export default SignOutLink;

package/src/core/SignOutLink/component.rb

@@ -1,17 +0,0 @@
-require 'json'
-
-module AblyUi
-  module Core
-    class SignOutLink < ViewComponent::Base
-      include Util
-
-      attr_reader :url_base
-
-      def initialize(session_data: {}, classes: [], url_base:)
-        @session_data = session_data
-        @classes = classes
-        @url_base = url_base
-      end
-    end
-  end
-end

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

@@ -1,28 +0,0 @@
-<%= tag.div class: "w-full overflow-x-hidden", data: { id: "slider" }, style: "--dynamic-grid-columns-count: #{slides.length}; --dynamic-grid-column-min-width: #{slide_min_width}; --dynamic-grid-column-max-width: #{slide_max_width};" do %>
-  <%= tag.ol class: "grid ui-grid-gap grid-cols-dynamic transform transition-transform #{classes}", data: { id: "slider-strip" }, **additional_attributes do %>
-    <% slides.each do |slide| %>
-      <%= slide %>
-    <% end %>
-  <% end %>
-
-  <div class="hidden justify-center items-center my-24" data-id="slider-controls">
-    <button type="button" class="p-0 w-24 h-24 flex items-center focus:outline-gui-focus" data-id="slider-previous">
-      <%= render(AblyUi::Core::Icon.new(name: "icon-gui-disclosure-arrow", size: "1.5rem", color: "text-cool-black", additional_css: "transform rotate-180")) %>
-    </button>
-
-    <ul class="flex justify-center items-center mx-32 relative h-24">
-      <% slides.each do |slide| %>
-        <li>
-          <span
-            class="ui-slider-marker text-cool-black"
-            data-id="slider-marker"
-          >&#x2b24;</span> <%# ⬤ %>
-        </li>
-      <% end %>
-    </ul>
-
-    <button type="button" class="p-0 w-24 h-24 flex items-center focus:outline-gui-focus" data-id="slider-next">
-      <%= render(AblyUi::Core::Icon.new(name: "icon-gui-disclosure-arrow", size: "1.5rem", color: "text-cool-black")) %>
-    </button>
-  </div>
-<% end %>

package/src/core/Slider/component.jsx

@@ -1,86 +0,0 @@
-import React, { useEffect, useRef } from "react";
-import T from "prop-types";
-
-import Icon from "../Icon/component.jsx";
-
-import SliderScripts from "./component";
-
-const Slider = ({
-  slides = [],
-  classes = "",
-  slideClasses = "",
-  slideMinWidth = "16.875rem",
-  slideMaxWidth = "1fr",
-  mqEnableThreshold = () => true,
-  ...props
-}) => {
-  const containerRef = useRef(null);
-
-  useEffect(() => {
-    SliderScripts({
-      container: containerRef.current,
-      mqEnableThreshold,
-    });
-  }, []);
-
-  if (slides.length === 0) return;
-
-  return (
-    <div
-      className="w-full overflow-x-hidden"
-      data-id="slider"
-      style={{
-        "--dynamic-grid-columns-count": slides.length,
-        "--dynamic-grid-column-min-width": slideMinWidth,
-        "--dynamic-grid-column-max-width": slideMaxWidth,
-      }}
-      ref={containerRef}
-    >
-      <ol className={`grid ui-grid-gap grid-cols-dynamic transform transition-transform ${classes}`} data-id="slider-strip" {...props}>
-        {slides.map((slide, i) => (
-          <li key={i} className={slideClasses} data-id="slider-slide">
-            {slide}
-          </li>
-        ))}
-      </ol>
-
-      <div className="justify-center items-center my-24 hidden" data-id="slider-controls">
-        <button type="button" className="p-0 w-24 h-24 flex items-center focus:outline-gui-focus" data-id="slider-previous">
-          <Icon
-            name="icon-gui-disclosure-arrow"
-            size="1.5rem"
-            color="text-cool-black"
-            additionalCSS="transform rotate-180"
-            data-id="meganav-control-mobile-dropdown-menu"
-          />
-        </button>
-
-        <ul className="flex justify-center items-center mx-32 relative h-24">
-          {slides.map((_, i) => (
-            <li key={i}>
-              <span className="ui-slider-marker text-cool-black" data-id="slider-marker">
-                &#x2b24;
-              </span>{" "}
-              {/* ⬤ */}
-            </li>
-          ))}
-        </ul>
-
-        <button type="button" className="p-0 w-24 h-24 flex items-center focus:outline-gui-focus" data-id="slider-next">
-          <Icon name="icon-gui-disclosure-arrow" size="1.5rem" color="text-cool-black" data-id="meganav-control-mobile-dropdown-menu" />
-        </button>
-      </div>
-    </div>
-  );
-};
-
-Slider.propTypes = {
-  slides: T.arrayOf(T.node),
-  classes: T.string,
-  slideClasses: T.string,
-  slideMinWidth: T.string,
-  slideMaxWidth: T.string,
-  mqEnableThreshold: T.func,
-};
-
-export default Slider;

package/src/core/Slider/component.rb

@@ -1,38 +0,0 @@
-module AblyUi
-  module Core
-    class Slider < ViewComponent::Base
-      attr_reader :classes,
-                  :additional_attributes,
-                  :slide_min_width,
-                  :slide_max_width
-
-      renders_many :slides, 'Slide'
-
-      def initialize(
-        classes: '',
-        slide_min_width: '16.875rem',
-        slide_max_width: '1fr',
-        **additional_attributes
-      )
-        @classes = classes
-        @additional_attributes = additional_attributes
-        @slide_min_width = slide_min_width
-        @slide_max_width = slide_max_width
-      end
-
-      class Slide < ViewComponent::Base
-        attr_reader :classes
-
-        def initialize(classes: '')
-          @classes = classes
-        end
-
-        def call
-          tag.li class: classes, data: { id: 'slider-slide' } do
-            content
-          end
-        end
-      end
-    end
-  end
-end