@ably/ui 11.7.1 → 12.0.0-dev.31bc8d9

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.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.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

package/src/core/Uptime/component.css

@@ -1,128 +0,0 @@
-@layer components {
-  .ui-uptime-widget {
-    --status-up: var(--uptime-color-up);
-    --status-trouble: var(--uptime-color-trouble);
-    --status-down: var(--uptime-color-down);
-    --ui-uptime-key-size: 1.625rem;
-    --tooltip-offset: 3.5rem;
-
-    @apply font-sans antialiased;
-  }
-
-  .ui-uptime-list {
-    @apply flex flex-wrap flex-row list-none p-0 m-0 items-center;
-  }
-
-  .ui-uptime-day {
-    @apply h-40 relative flex-auto p-0 my-0 mx-1 bg-cool-black;
-  }
-
-  .ui-uptime-day span {
-    @apply absolute text-p3 border rounded-lg border-light-grey;
-    @apply py-12 px-16 shadow-tooltip text-cool-black;
-    @apply bg-white text-left z-10 hidden;
-    @apply overflow-y-hidden not-italic leading-tight;
-    @apply whitespace-nowrap;
-
-    transform: translateX(-50%);
-    max-height: 12rem;
-    bottom: 130%;
-  }
-
-  .ui-uptime-day:hover {
-    filter: brightness(1.2);
-    @apply z-10;
-  }
-
-  .ui-uptime-day:hover span {
-    display: block;
-  }
-
-  .ui-uptime-day.ui-uptime-align-left span {
-    left: 0;
-  }
-
-  .ui-uptime-day.ui-uptime-align-right span {
-    right: 0;
-  }
-
-  .ui-uptime-day .ui-uptime-width-wide {
-    @apply whitespace-normal;
-    width: 8rem;
-  }
-
-  .ui-uptime-day .ui-uptime-width-extra-wide {
-    @apply whitespace-normal;
-    width: 12rem;
-  }
-
-  .ui-uptime-seperator {
-    @apply my-12 h-1 w-full relative;
-    @apply sm:w-32 sm:h-80 sm:m-0 sm:bg-none;
-  }
-
-  .ui-uptime-seperator:before {
-    content: "";
-    left: 48%;
-    @apply sm:absolute sm:h-full sm:w-1 sm:bg-dark-grey sm:z-0;
-  }
-
-  .ui-uptime-up {
-    background: var(--status-up);
-  }
-
-  .ui-uptime-trouble {
-    background: var(--status-trouble);
-  }
-
-  .ui-uptime-down {
-    background: var(--status-down);
-  }
-
-  .ui-uptime-legend {
-    @apply flex flex-col sm:flex-row sm:items-center;
-  }
-
-  .ui-uptime-key {
-    @apply block mt-16 mr-20 bg-transparent;
-    @apply sm:inline-block sm:mt-0;
-    @apply font-light text-p2 text-white block sm:inline-flex items-center;
-  }
-
-  .ui-uptime-key:first-child {
-    @apply mt-0;
-  }
-
-  .ui-uptime-key::before {
-    content: " ";
-    width: var(--ui-uptime-key-size);
-    height: var(--ui-uptime-key-size);
-    @apply inline-block mr-16 bg-cool-black align-text-bottom rounded-full;
-  }
-
-  .ui-uptime-key.ui-uptime-up:before {
-    background: var(--status-up);
-  }
-
-  .ui-uptime-key.ui-uptime-trouble:before {
-    background: var(--status-trouble);
-  }
-
-  .ui-uptime-key.ui-uptime-down:before {
-    background: var(--status-down);
-  }
-
-  .ui-uptime-footer {
-    @apply mt-40 flex justify-between items-start flex-col;
-    @apply sm:flex-row sm:items-center;
-  }
-
-  .ui-uptime-link-back {
-    @apply mt-40 whitespace-nowrap;
-    @apply sm:mt-0;
-  }
-
-  .ui-uptime-link-back a {
-    @apply text-p1 text-gui-default font-medium no-underline;
-  }
-}

package/src/core/Uptime/component.js

@@ -1 +0,0 @@
-import "./component.css";

package/src/core/Uptime/component.jsx

@@ -1,186 +0,0 @@
-import React, { useState, useEffect } from "react";
-import T from "prop-types";
-
-import FeaturedLink from "../FeaturedLink/component.jsx";
-
-export const themes = {
-  light: {
-    text: "text-cool-black",
-    iconColor: "text-cool-black",
-  },
-  dark: {
-    text: "text-white",
-    iconColor: "text-white",
-  },
-};
-
-export const ThemeContext = React.createContext();
-
-function StatusLegend({ metadata, textColor }) {
-  const items = Object.entries(metadata[0]).map((e) => {
-    const [id, text] = e;
-    const classname = `ui-uptime-key ui-uptime-${id} ${textColor}`;
-    return (
-      <span key={id} className={classname}>
-        {text}
-      </span>
-    );
-  });
-  return <div className="ui-uptime-legend">{items}</div>;
-}
-
-function applyAlignment(value, i, count = 8) {
-  const before = i < value + count;
-  const after = i > value - count;
-
-  if (i > 0 && !(before && after)) return null;
-
-  const align = i === 0 || i > value ? "left" : "right";
-  const diff = value - i;
-  const amount = Math.abs(diff) || 0;
-  const sign = i > value ? -1 : 1;
-
-  return { align, amount, sign };
-}
-
-function UptimeGraph({ collection }) {
-  // add 30 day split deliminators
-  collection.splice(29, 0, null);
-  collection.splice(60, 0, null);
-
-  const MAX_TOOLTIP_CHAR_LENGTH = 80;
-
-  const items = collection.map((row, i) => {
-    if (!row) return <li key={i} className="ui-uptime-seperator"></li>;
-
-    const [alignment = {}] = [0, 29, 60, 91].map((value) => applyAlignment(value, i)).filter((s) => s);
-    const { align = null, amount = null, sign = null } = alignment;
-    const labelAlign = alignment && `ui-uptime-align-${align}`;
-    const classname = `ui-uptime-day ui-uptime-${row.class} ${labelAlign}`.trim();
-
-    const { label } = row;
-    const { length } = label.trim();
-
-    const tooltext = length < MAX_TOOLTIP_CHAR_LENGTH ? label : label.slice(0, MAX_TOOLTIP_CHAR_LENGTH - 1) + "…";
-    const width = (length > MAX_TOOLTIP_CHAR_LENGTH - 10 && "extra-wide") || (length > MAX_TOOLTIP_CHAR_LENGTH / 2 && "wide") || "normal";
-    const translateX = Math.min((Math.max(amount - 1, 0) * 10) >> 0, 50) * sign;
-    const transform = align ? { transform: `translateX(${translateX}%)` } : {};
-
-    return (
-      <li key={i} className={classname}>
-        <span className={`ui-uptime-width-${width}`} style={transform}>
-          {tooltext}
-        </span>
-      </li>
-    );
-  });
-
-  return (
-    <div className="ui-uptime-graph">
-      <ul className="ui-uptime-list">{items}</ul>
-    </div>
-  );
-}
-
-function StatusCtaLink({ href, text }) {
-  return (
-    <div className="ui-uptime-link-back">
-      <ThemeContext.Consumer>
-        {({ iconColor }) => (
-          <FeaturedLink url={href} iconColor={iconColor}>
-            {text}
-          </FeaturedLink>
-        )}
-      </ThemeContext.Consumer>
-    </div>
-  );
-}
-
-function StatusFooter({ metadata, href, text }) {
-  return (
-    <div className="ui-uptime-footer">
-      <ThemeContext.Consumer>{({ text }) => <StatusLegend {...{ metadata }} textColor={text} />}</ThemeContext.Consumer>
-      <StatusCtaLink {...{ href, text }} />
-    </div>
-  );
-}
-
-function handleError(err) {
-  // output a message and normalise schema
-  console.warn("Uptime Error", err);
-  const { message } = err || {};
-  return { error: true, message };
-}
-
-export default function Uptime({ serverUrl, linkTo = null, theme = "light" }) {
-  if (!serverUrl) throw new Error("Server endpoint URL required");
-
-  const [data, setData] = useState(null);
-  const { collection, metadata } = data || {};
-  const showFooterRow = linkTo?.href && linkTo?.text;
-
-  useEffect(() => {
-    const fetchEndpointJson = async () => {
-      let payload = null;
-      try {
-        payload = await fetch(serverUrl);
-        payload = await payload.json();
-        const { chart_data: collection, chart_legend: metadata } = payload;
-        payload = { collection, metadata };
-      } catch (err) {
-        payload = handleError(err);
-      }
-
-      setData(payload);
-    };
-
-    fetchEndpointJson();
-  }, []);
-
-  if (data && data.error) {
-    return (
-      <div
-        className={`flex sm:flex-row justify-center items-center p-24 border rounded font-sans font-light text-p2 ${themes[theme].text}`}
-        data-id="uptime-error"
-      >
-        Sorry, we can’t retrieve uptime data right now.
-      </div>
-    );
-  }
-
-  return (
-    data && (
-      <ThemeContext.Provider value={themes[theme]}>
-        <div className="ui-uptime-widget" data-id="uptime">
-          <UptimeGraph {...{ collection }} />
-          {showFooterRow && <StatusFooter {...{ metadata, ...linkTo }} />}
-        </div>
-      </ThemeContext.Provider>
-    )
-  );
-}
-UptimeGraph.propTypes = {
-  collection: T.array,
-};
-
-StatusLegend.propTypes = {
-  metadata: T.array,
-  textColor: T.string,
-};
-
-StatusFooter.propTypes = {
-  metadata: T.array,
-  href: T.string,
-  text: T.string,
-};
-
-StatusCtaLink.propTypes = {
-  href: T.string,
-  text: T.string,
-};
-
-Uptime.propTypes = {
-  serverUrl: T.string,
-  linkTo: T.object,
-  theme: T.oneOf(["light", "dark"]),
-};

package/src/core/Uptime/component.rb

@@ -1,7 +0,0 @@
-module AblyUi
-  module Core
-    class Uptime < ViewComponent::Base
-      include AblyUi::Core::Util
-    end
-  end
-end

package/src/core/core.rb

@@ -1,81 +0,0 @@
-require 'json'
-
-MEGANAV_DATA =
-  JSON.parse(
-    File.read(File.join(File.dirname(__FILE__), 'meganav', 'component.json'))
-  )
-
-module AblyUi
-  module Core
-    module MeganavConfig
-      def theme_setup(theme_name)
-        @theme_name = theme_name
-      end
-
-      def themes
-        MEGANAV_DATA['themes'].deep_transform_keys do |key|
-          key.underscore.to_sym
-        end
-      end
-
-      def panels
-        MEGANAV_DATA['panels'].map do |panel|
-          panel.deep_transform_keys { |key| key.underscore.to_sym }
-        end
-      end
-
-      def theme(style)
-        themes[@theme_name][style]
-      end
-    end
-
-    module SharedAssets
-      def ably_logo
-        asset_path 'ably_ui/core/images/ably-logo.png'
-      end
-
-      def ably_stack_path
-        asset_path 'ably_ui/core/images/ably-stack.svg'
-      end
-
-      def aws_logo_path
-        asset_path 'ably_ui/core/images/icon-tech-aws.svg'
-      end
-
-      def highest_performer
-        asset_path 'ably_ui/core/images/high-performer-2023.svg'
-      end
-
-      def highest_user_adoption
-        asset_path 'ably_ui/core/images/highest-user-adoption-2023.svg'
-      end
-
-      def best_support
-        asset_path 'ably_ui/core/images/best-support-2023.svg'
-      end
-
-      def fastest_implementation
-        asset_path 'ably_ui/core/images/fastest-implementation-2023.svg'
-      end
-    end
-
-    module Util
-      # For components which use relative links we need an option to set a base URL because they might be used
-      # on a different domain (like pages.ably.com). The below sets a default method to be used in templates but
-      # requires the definition of url_base.
-      DEFAULT_URL_BASE = ''
-
-      def abs_url(path)
-        "#{url_base}#{path}"
-      end
-
-      # This is useful where we need to use an HTML id (like in aria-controls attribute) but we know the component
-      # might be used multiple times per page so we can't just hard code one in HTML.
-      # eg. my-component -> my-component-uur0cj2h
-      # credits https://gist.github.com/mbajur/2aba832a6df3fc31fe7a82d3109cb626
-      def append_random_postfix(id)
-        "#{id}-#{rand(36**8).to_s(36)}"
-      end
-    end
-  end
-end