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

package/src/core/Uptime/component.css

@@ -1,127 +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 {
-    @apply z-10 brightness-125;
-  }
-
-  .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-medium 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,183 +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 ui-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