@ably/ui 13.3.0 → 14.0.0-dev.0ed6be7

package/src/core/Code/Code.stories.tsx

@@ -0,0 +1,71 @@
+import Code from "./component.tsx";
+
+export default {
+  title: "Components/Code",
+  component: Code,
+  tags: ["autodocs"],
+};
+
+export const Javascript = {
+  args: {
+    language: "javascript",
+    snippet: `var ably = new Ably.Realtime('1WChTA.mc0Biw:kNfiYG4KiPgmHHgH');
+var channel = ably.channels.get('web-pal');
+    
+// Subscribe to messages on channel
+channel.subscribe('greeting', function(message) {
+  alert(message.data);
+});`,
+  },
+};
+
+export const Swift = {
+  args: {
+    language: "swift",
+    snippet: `let ably = ARTRealtime(key: "1WChTA.mc0Biw:kNfiYG4KiPgmHHgH")
+let channel = ably.channels.get("web-pal")
+
+// Subscribe to messages on channel
+channel.subscribe("greeting") { message in
+  print("\\(message.data)")
+}`,
+  },
+};
+
+export const Java = {
+  args: {
+    language: "java",
+    snippet: `AblyRealtime ably = new AblyRealtime("1WChTA.mc0Biw:kNfiYG4KiPgmHHgH");
+Channel channel = ably.channels.get("web-pal");
+
+/* Subscribe to messages on channel */
+
+MessageListener listener;
+listener = new MessageListener() {
+  @Override
+  public void onMessage(Message message) {
+    System.out.print(message.data);
+  };
+};
+channel.subscribe("greeting", listener);`,
+  },
+};
+
+export const Kotlin = {
+  args: {
+    language: "kotlin",
+    snippet: `var ably = new Ably.Realtime('1WChTA.mc0Biw:kNfiYG4KiPgmHHgH');
+val exampleConstraints = DefaultResolutionConstraints(
+  DefaultResolutionSet( // this constructor provides one Resolution for all states
+      Resolution(
+          accuracy = Accuracy.BALANCED,
+          desiredInterval = 1000L,
+          minimumDisplacement = 1.0
+      )
+  ),
+  proximityThreshold = DefaultProximity(spatial = 1.0),
+  batteryLevelThreshold = 10.0f,
+  lowBatteryMultiplier = 2.0f
+)`,
+  },
+};

package/src/core/Code.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+
+import "../utils/syntax-highlighter.css";
+import {
+  highlightSnippet,
+  registerDefaultLanguages,
+} from "../utils/syntax-highlighter";
+import languagesRegistry from "../utils/syntax-highlighter-registry";
+
+registerDefaultLanguages(languagesRegistry);
+
+type CodeProps = {
+  language: string;
+  snippet: string;
+  textSize?: string;
+  padding?: string;
+  additionalCSS?: string;
+};
+
+const Code = ({
+  language,
+  snippet,
+  textSize = "ui-text-code",
+  padding = "p-32",
+  additionalCSS = "",
+}: CodeProps) => {
+  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>
+  );
+};
+
+export default Code;

package/src/core/{ConnectStateWrapper/component.jsx → ConnectStateWrapper.tsx}

@@ -12,14 +12,18 @@ import { connectState, getRemoteDataStore } from "../remote-data-store";
   - initial state is set in useEffect so the wrapped component needs to handle it's props set to undefined initially
 */
 
-export const ConnectStateWrapper = (Component, selectors) => {
+const ConnectStateWrapper = (Component, selectors) => {
   const [state, setState] = useState({});
 
-  const setStateForKey = (key) => (storeState) => setState(() => ({ [key]: storeState }));
+  const setStateForKey = (key) => (storeState) =>
+    setState(() => ({ [key]: storeState }));
 
   useEffect(() => {
     const store = getRemoteDataStore();
-    const resolvedState = Object.keys(selectors).reduce((acc, key) => ({ ...acc, [key]: selectors[key](store) }), {});
+    const resolvedState = Object.keys(selectors).reduce(
+      (acc, key) => ({ ...acc, [key]: selectors[key](store) }),
+      {}
+    );
 
     // Set initial state
     setState(resolvedState);

package/src/core/ContactFooter/ContactFooter.stories.tsx

@@ -0,0 +1,11 @@
+import ContactFooter from "./component.tsx";
+
+export default {
+  title: "Components/Contact Footer",
+  component: ContactFooter,
+  parameters: {
+    layout: "fullscreen",
+  },
+};
+
+export const Default = {};

package/src/core/ContactFooter/component.css

@@ -1,11 +1,9 @@
-@layer components {
-  .ui-contact-footer {
-    background-size: 100% 100%;
-    background-position: right center;
-    @apply w-full bg-gradient-active-orange;
-  }
+.ui-contact-footer {
+  background-size: 100% 100%;
+  background-position: right center;
+  @apply w-full bg-gradient-active-orange;
+}
 
-  .ui-contact-footer-box {
-    @apply p-24 sm:p-32 xl:p-40 bg-white flex flex-col justify-between rounded-sm;
-  }
+.ui-contact-footer-box {
+  @apply p-24 sm:p-32 xl:p-40 bg-white flex flex-col justify-between rounded-sm;
 }

package/src/core/ContactFooter.tsx

@@ -0,0 +1,92 @@
+import React, { useEffect } from "react";
+
+import Icon from "../Icon/component.tsx";
+import _absUrl from "../url-base.js";
+import toggleChatWidget from "../hubspot-chat-toggle";
+import "./component.css";
+
+type ContactFooterProps = {
+  urlBase: string;
+};
+
+const ContactFooter = ({ urlBase }: ContactFooterProps) => {
+  useEffect(() => toggleChatWidget({ dataId: "contact-footer" }), []);
+  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>
+  );
+};
+
+export default ContactFooter;

package/src/core/CookieMessage/CookieMessage.stories.tsx

@@ -0,0 +1,12 @@
+import CookieMessage from "./component.tsx";
+
+export default {
+  title: "Components/Cookie Message",
+  component: CookieMessage,
+  args: {
+    cookieId: "cookie-namespace",
+    noticeId: "cookie-message",
+  },
+};
+
+export const Default = {};

package/src/core/CookieMessage/component.css

@@ -1,13 +1,11 @@
-@layer components {
-  .ui-cookie-message {
-    @apply rounded-lg bg-white font-sans;
-    @apply justify-between items-center;
-    @apply opacity-100 z-50 bottom-0 fixed sm:flex;
-    @apply p-16 mb-16 ml-16;
-    max-width: 70vw;
-    box-shadow: 0px 24px 32px 0px #0000000d;
-    border: 1px solid var(--color-mid-grey);
-    border-left: 0.5rem solid var(--color-electric-cyan);
-    transition: bottom 250ms ease-out, opacity 150ms ease-out;
-  }
+.ui-cookie-message {
+  @apply rounded-lg bg-white font-sans;
+  @apply justify-between items-center;
+  @apply opacity-100 z-50 bottom-0 fixed sm:flex;
+  @apply p-16 mb-16 ml-16;
+  max-width: 70vw;
+  box-shadow: 0px 24px 32px 0px #0000000d;
+  border: 1px solid var(--color-mid-grey);
+  border-left: 0.5rem solid var(--color-electric-cyan);
+  transition: bottom 250ms ease-out, opacity 150ms ease-out;
 }

package/src/core/{CookieMessage/component.jsx → CookieMessage.tsx}

@@ -1,13 +1,18 @@
 import React, { useRef, useEffect, useState } from "react";
-import T from "prop-types";
 import Cookie from "js-cookie";
+import "./component.css";
 
 import _absUrl from "../url-base";
 
 const COOKIE_EXPIRY = 365;
 
-export default function CookieMessage({ cookieId, urlBase }) {
-  const ref = useRef(null);
+type CookieMessageProps = {
+  cookieId: string;
+  urlBase: string;
+};
+
+const CookieMessage = ({ cookieId, urlBase }: CookieMessageProps) => {
+  const ref = useRef<HTMLDivElement>(null);
   const [hideCookieMessage, setHideCookieMessage] = useState(true);
 
   useEffect(() => {
@@ -18,7 +23,7 @@ export default function CookieMessage({ cookieId, urlBase }) {
   const handleClose = () => {
     Cookie.set(cookieId, "1", { expires: COOKIE_EXPIRY });
 
-    ref.current.classList.add("bottom-1", "opacity-0");
+    ref.current?.classList.add("bottom-1", "opacity-0");
     setTimeout(() => setHideCookieMessage(true), 500);
   };
 
@@ -35,14 +40,14 @@ export default function CookieMessage({ cookieId, urlBase }) {
         </a>{" "}
         to improve your experience.
       </p>
-      <button className="ui-btn-secondary mt-12 sm:mt-0 whitespace-nowrap" onClick={handleClose}>
+      <button
+        className="ui-btn-secondary mt-12 sm:mt-0 whitespace-nowrap"
+        onClick={handleClose}
+      >
         Accept and close
       </button>
     </div>
   );
-}
-
-CookieMessage.propTypes = {
-  cookieId: T.string,
-  urlBase: T.string,
 };
+
+export default CookieMessage;

package/src/core/CustomerLogos/CustomerLogos.stories.tsx

@@ -0,0 +1,43 @@
+import CustomerLogos from "./component.tsx";
+
+import hubspot from "../images/cust-logo-hubspot-mono-pos.svg";
+import webflow from "../images/cust-logo-webflow-col-pos.svg";
+import mentimeter from "../images/cust-logo-mentimeter-mono-pos.svg";
+import toyota from "../images/cust-logo-toyota-mono-pos.svg";
+import split from "../images/cust-logo-split-mono-pos.svg";
+import australian from "../images/cust-logo-ausopen-mono-pos.svg";
+
+export default {
+  title: "Components/Customer Logos",
+  component: CustomerLogos,
+  args: {
+    companies: [
+      {
+        label: "Hubspot",
+        logo: hubspot,
+      },
+      {
+        label: "Webflow",
+        logo: webflow,
+      },
+      {
+        label: "Mentimeter",
+        logo: mentimeter,
+      },
+      {
+        label: "Toyota",
+        logo: toyota,
+      },
+      {
+        label: "Split",
+        logo: split,
+      },
+      {
+        label: "Australian Open",
+        logo: australian,
+      },
+    ],
+  },
+};
+
+export const Default = {};

package/src/core/CustomerLogos.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+
+type CompanyEntity = {
+  label: string;
+  logo: string;
+};
+
+type CustomerLogosProps = {
+  companies: CompanyEntity[];
+  additionalCss?: string;
+};
+
+const CustomerLogos = ({
+  companies,
+  additionalCss = "",
+}: CustomerLogosProps) => {
+  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>
+  );
+};
+
+export default CustomerLogos;

package/src/core/DropdownMenu/DropdownMenu.stories.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+import Icon from "../Icon/component.tsx";
+import DropdownMenu from "./component.tsx";
+
+export default {
+  title: "Components/Dropdown Menu",
+  component: DropdownMenu,
+};
+
+export const Default = {
+  render: () => (
+    <DropdownMenu>
+      <DropdownMenu.Trigger additionalTriggerCSS="ui-text-h3">
+        Dropdown Menu Trigger
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Content anchorPosition="left">
+        <DropdownMenu.Link
+          url="https://ably.com/"
+          title="Using DropdownMenuLink Component"
+          subtitle="This is using the inbuilt component which takes props for title, subtitle, icon name & children."
+          iconName="icon-gui-link-arrow"
+        >
+          <p className="ui-text-p3">I am a child! 🐣</p>
+        </DropdownMenu.Link>
+        <DropdownMenu.Link
+          url="https://ably.com/"
+          title="Using DropdownMenuLink Component - no icon, subtitle or children"
+        />
+        <a
+          href="https://ably.com/docs"
+          target="_blank"
+          rel="noreferrer"
+          className="group block p-8 hover:bg-light-grey hover:text-cool-black rounded"
+        >
+          <p className="ui-featured-link group-hover:text-gui-hover font-light text-cool-black">
+            Using plain HTML
+            <Icon
+              name="icon-gui-link-arrow"
+              size="1rem"
+              color="text-cool-black"
+              additionalCSS="ui-featured-link-icon group-hover:text-gui-hover group-active:text-gui-active group-focus:text-gui-focus"
+            />
+          </p>
+        </a>
+      </DropdownMenu.Content>
+    </DropdownMenu>
+  ),
+};

package/src/core/{DropdownMenu/component.jsx → DropdownMenu.tsx}

@@ -1,16 +1,52 @@
-import React, { createContext, useContext, useState, useEffect, useRef } from "react";
-import T from "prop-types";
-import Icon from "../Icon/component.jsx";
+import React, {
+  createContext,
+  useContext,
+  useState,
+  useEffect,
+  useRef,
+  ReactNode,
+  Dispatch,
+} from "react";
+import Icon from "../Icon/component.tsx";
+
+const DropdownMenuContext = createContext<{
+  isOpen: boolean;
+  setOpen: Dispatch<React.SetStateAction<boolean>>;
+}>({
+  isOpen: false,
+  setOpen: () => {},
+});
+
+type DropdownMenuProps = {
+  children: ReactNode;
+};
+
+type TriggerProps = {
+  children: ReactNode;
+  additionalTriggerCSS?: string;
+};
+
+type ContentProps = {
+  children: ReactNode;
+  anchorPosition?: string;
+  additionalContentCSS?: string;
+};
 
-const DropdownMenuContext = createContext();
+type LinkProps = {
+  url: string;
+  title: string;
+  subtitle: string;
+  iconName: string;
+  children: ReactNode;
+};
 
-const DropdownMenu = ({ children }) => {
+const DropdownMenu = ({ children }: DropdownMenuProps) => {
   const [isOpen, setOpen] = useState(false);
-  const ref = useRef(null);
+  const ref = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     const clickHandler = (e) => {
-      if (ref?.current?.contains(e.target)) return;
+      if (ref.current?.contains(e.target)) return;
       setOpen(false);
     };
 
@@ -30,11 +66,7 @@ const DropdownMenu = ({ children }) => {
   );
 };
 
-DropdownMenu.propTypes = {
-  children: T.node,
-};
-
-const Trigger = ({ children, additionalTriggerCSS = "" }) => {
+const Trigger = ({ children, additionalTriggerCSS = "" }: TriggerProps) => {
   const { isOpen, setOpen } = useContext(DropdownMenuContext);
 
   return (
@@ -54,19 +86,19 @@ const Trigger = ({ children, additionalTriggerCSS = "" }) => {
   );
 };
 
-Trigger.propTypes = {
-  children: T.node,
-  additionalTriggerCSS: T.string,
-};
-
-const Content = ({ children, anchorPosition = "right", additionalContentCSS }) => {
+const Content = ({
+  children,
+  anchorPosition = "right",
+  additionalContentCSS,
+}: ContentProps) => {
   const { isOpen } = useContext(DropdownMenuContext);
 
   if (!isOpen) {
     return null;
   }
 
-  const anchorPositionClasses = anchorPosition === "right" ? "right-0" : "left-0";
+  const anchorPositionClasses =
+    anchorPosition === "right" ? "right-0" : "left-0";
 
   return (
     <div
@@ -79,18 +111,22 @@ const Content = ({ children, anchorPosition = "right", additionalContentCSS }) =
   );
 };
 
-Content.propTypes = {
-  children: T.node,
-  anchorPosition: T.string,
-  additionalContentCSS: T.string,
-};
-
-const Link = ({ url, title, subtitle, iconName, children }) => {
+const Link = ({ url, title, subtitle, iconName, children }: LinkProps) => {
   return (
-    <a href={url} className="menu-link group block p-8 hover:bg-light-grey hover:text-cool-black rounded">
+    <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}
+        {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="ui-text-p3 mb-16">{subtitle}</p> : null}
       {children}
@@ -98,14 +134,6 @@ const Link = ({ url, title, subtitle, iconName, children }) => {
   );
 };
 
-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;

package/src/core/FeaturedLink/FeaturedLink.stories.tsx

@@ -0,0 +1,43 @@
+import FeaturedLink from "./component.tsx";
+
+export default {
+  title: "Components/Featured Link",
+  component: FeaturedLink,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  args: {
+    url: "#",
+    children: "Featured link",
+  },
+};
+
+export const Default = {
+  args: {},
+};
+
+export const Reverse = {
+  args: {
+    reverse: true,
+  },
+};
+
+export const Large = {
+  args: {
+    textSize: "text-p1",
+  },
+};
+
+export const Small = {
+  args: {
+    textSize: "text-p3",
+  },
+};
+
+export const Pink = {
+  args: {
+    iconColor: "text-pink-500",
+    additionalCSS: "text-pink-800",
+  },
+};