@ably/ui 14.1.0-dev.6699453 → 14.1.0-dev.76621d8

package/core/styles/forms.css

@@ -61,4 +61,23 @@
     /* color: var(--text-dark-grey); */
     color: #76767c;
   }
+
+  .ui-dropdown-base {
+    @apply rounded-lg border border-neutral-500 pl-16 pr-[56px] appearance-none select-none focus:outline-gui-focus focus:outline-4 leading-snug;
+    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KCTxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBmaWxsPSIjNjY3MDg1IiBkPSJNMTIuOTA0NiAxMkw5LjAwNjcxIDE2LjMzMUwxMC40OTMzIDE3LjY2OUwxNC45OTMzIDEyLjY2OUwxNC45OTMzIDExLjMzMUwxMC40OTMzIDYuMzMxMDVMOS4wMDY3MSA3LjY2ODk4TDEyLjkwNDYgMTJaIiB0cmFuc2Zvcm09InJvdGF0ZSg5MCAxMiAxMikiLz4KPC9zdmc+Cg==");
+    background-repeat: no-repeat;
+    background-position: center right 16px;
+  }
+
+  .ui-dropdown-base option:disabled {
+    @apply text-neutral-800;
+  }
+
+  .ui-dropdown {
+    @apply ui-dropdown-base py-12;
+  }
+
+  .ui-dropdown-small {
+    @apply ui-dropdown-base py-8;
+  }
 }

package/core/styles.components.css

@@ -3,7 +3,6 @@
 @import "./styles/text.css";
 @import "./styles/forms.css";
 @import "./styles/toggles.css";
-@import "./styles/dropdowns.css";
 
 @layer components {
   .ui-input {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "14.1.0-dev.6699453",
+  "version": "14.1.0-dev.76621d8",
   "description": "Home of the Ably design system library ([design.ably.com](https://design.ably.com)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.",
   "repository": {
     "type": "git",
@@ -8,6 +8,7 @@
   },
   "license": "Apache-2.0",
   "files": [
+    "src",
     "core",
     "reset",
     "tailwind.config.js",

package/src/core/Accordion/Accordion.stories.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import Accordion, { AccordionProps } from "../Accordion";
+
+export default {
+  title: "JS Components/Accordion",
+  component: Accordion,
+  args: {
+    data: [
+      {
+        name: "Item 1",
+        content: "Content 1",
+      },
+      {
+        name: "Item 2",
+        content: "Content 2",
+      },
+      {
+        name: "Item 3",
+        content: "Content 3",
+      },
+      {
+        name: "Item 4",
+        content: "Content 4",
+      },
+    ],
+    autoClose: false,
+    topBorder: false,
+    bottomBorder: false,
+    arrowIcon: false,
+  },
+};
+
+export const Default = {};
+
+export const AutoClose = {
+  render: (args: AccordionProps) => (
+    <Accordion data={args.data} autoClose={true} />
+  ),
+};

package/src/core/Accordion.tsx

@@ -0,0 +1,149 @@
+import React, { useState, ReactNode, JSX } from "react";
+import Icon from "./Icon";
+
+type AccordionData = {
+  name: string;
+  content: ReactNode;
+};
+
+type AccordionRowProps = {
+  bottomBorder?: boolean;
+  topBorder?: boolean;
+  active: boolean;
+  last: boolean;
+  name: string;
+  index;
+  children: ReactNode;
+  arrowIcon?: boolean;
+  setActiveIndex: (index: number) => void;
+};
+
+export type AccordionProps = {
+  data: AccordionData[];
+  arrowIcon?: boolean;
+  topBorder?: boolean;
+  bottomBorder?: boolean;
+  id?: string;
+  autoClose?: boolean;
+  className?: string;
+};
+
+const AccordionRow = ({
+  name,
+  children,
+  index,
+  setActiveIndex,
+  active,
+  topBorder,
+  bottomBorder,
+  last,
+  arrowIcon,
+}: AccordionRowProps) => {
+  let iconActive: JSX.Element, iconInactive: JSX.Element;
+  const handleSetIndex = () => {
+    setActiveIndex(index);
+  };
+
+  if (arrowIcon) {
+    iconActive = (
+      <Icon
+        name="icon-gui-disclosure-arrow"
+        color="text-dark-grey"
+        size="1.5rem"
+        additionalCSS="-rotate-90"
+      />
+    );
+    iconInactive = (
+      <Icon
+        name="icon-gui-disclosure-arrow"
+        color="text-dark-grey"
+        size="1.5rem"
+        additionalCSS="rotate-90"
+      />
+    );
+  } else {
+    iconActive = (
+      <Icon name="icon-gui-minus" color="text-dark-grey" size="1.5rem" />
+    );
+    iconInactive = (
+      <Icon name="icon-gui-plus" color="text-dark-grey" size="1.5rem" />
+    );
+  }
+
+  return (
+    <div
+      className={`border-mid-grey ${last && !bottomBorder ? "" : "border-b"} ${
+        topBorder ? "border-t" : ""
+      }`}
+    >
+      <button
+        type="button"
+        onClick={handleSetIndex}
+        className={`flex w-full px-0 focus:outline-none py-20`}
+      >
+        <span className="ui-text-p1 font-bold text-left mr-8">{name}</span>
+        <span className="ml-auto">{active ? iconActive : iconInactive}</span>
+      </button>
+
+      <section
+        className="ui-text-p2 transition-all overflow-hidden"
+        style={{
+          maxHeight: active ? "500px" : "0",
+          paddingBottom: active ? "1.5rem" : "0",
+        }}
+      >
+        {children}
+      </section>
+    </div>
+  );
+};
+
+const Accordion = ({
+  data,
+  id = "id-accordion",
+  topBorder,
+  bottomBorder,
+  arrowIcon,
+  autoClose,
+  className,
+}: AccordionProps) => {
+  const [activeIndexes, setActiveIndexes] = useState<number[]>([]);
+
+  const handleSetIndex = (index: number) => {
+    const currentIndexIsActive = activeIndexes.includes(index);
+
+    if (autoClose) {
+      setActiveIndexes(currentIndexIsActive ? [] : [index]);
+    } else {
+      setActiveIndexes(
+        currentIndexIsActive
+          ? activeIndexes.filter((i) => i !== index)
+          : [...activeIndexes, index],
+      );
+    }
+  };
+
+  return (
+    <div className={className} id={id}>
+      {data.map((item, currentIndex) => {
+        return (
+          <AccordionRow
+            key={item.name}
+            name={item.name}
+            arrowIcon={arrowIcon}
+            index={currentIndex}
+            last={data.length === currentIndex + 1}
+            topBorder={topBorder && currentIndex === 0}
+            bottomBorder={bottomBorder && data.length === currentIndex + 1}
+            active={activeIndexes.includes(currentIndex)}
+            setActiveIndex={handleSetIndex}
+          >
+            {item.content}
+          </AccordionRow>
+        );
+      })}
+    </div>
+  );
+};
+
+export default Accordion;

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

@@ -0,0 +1,71 @@
+import Code from "../Code";
+
+export default {
+  title: "JS 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/component.css

@@ -0,0 +1 @@
+@import "../utils/syntax-highlighter.css";

package/src/core/Code/component.js

@@ -0,0 +1,27 @@
+// Note: importing syntax-highlighter here means the component.js file will include
+// all the language dependecies, creating a large a bundle. Prefer using the highlighter serverside.
+import {
+  highlightSnippet,
+  registerDefaultLanguages,
+} from "../utils/syntax-highlighter";
+
+import languagesRegistry from "../utils/syntax-highlighter-registry";
+
+registerDefaultLanguages(languagesRegistry);
+
+function highlightEl(el) {
+  if (!el) throw "Missing code element";
+
+  const pre = el.querySelector("pre");
+  const code = el.querySelector("code");
+  const language = pre.getAttribute("lang");
+
+  if (!code || !pre || !language) throw "Malformed code element";
+
+  const { innerHTML } = code;
+  const html = highlightSnippet(language, innerHTML);
+
+  code.innerHTML = html;
+}
+
+export default highlightEl;

package/src/core/Code.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+
+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.tsx

@@ -0,0 +1,43 @@
+import React, { useEffect, useState } from "react";
+
+import { connectState, getRemoteDataStore } from "./remote-data-store";
+
+/*
+  Connect a react component to a global store.
+  This is similar to what react-redux does but uses our global store so
+  can share state with other React mount points or anything that uses the
+  store.
+  - selectors is an object where keys are your prop names and values are your select
+  functions that work on the store to retrieve the state you are interested in
+  - initial state is set in useEffect so the wrapped component needs to handle it's props set to undefined initially
+*/
+
+const ConnectStateWrapper = (Component, selectors) => {
+  const [state, setState] = useState({});
+
+  const setStateForKey = (key) => (storeState) =>
+    setState(() => ({ [key]: storeState }));
+
+  useEffect(() => {
+    const store = getRemoteDataStore();
+    const resolvedState = Object.keys(selectors).reduce(
+      (acc, key) => ({ ...acc, [key]: selectors[key](store) }),
+      {},
+    );
+
+    // Set initial state
+    setState(resolvedState);
+
+    // Create a store subscription for each selector. Depending on your use case, this can be inefficient.
+    // When optimising for renders, look for wins with selectors better for your use and using connectState directly.
+    Object.keys(selectors).forEach((key) => {
+      connectState(selectors[key], setStateForKey(key));
+    });
+  }, []);
+
+  const WrappedComponent = (props) => <Component {...props} {...state} />;
+
+  return WrappedComponent;
+};
+
+export default ConnectStateWrapper;

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

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

package/src/core/ContactFooter/component.css

@@ -0,0 +1,11 @@
+@layer components {
+  .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;
+  }
+}

package/src/core/ContactFooter/component.js

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

package/src/core/ContactFooter.tsx

@@ -0,0 +1,91 @@
+import React, { useEffect } from "react";
+
+import Icon from "./Icon";
+import _absUrl from "./url-base.js";
+import toggleChatWidget from "./hubspot-chat-toggle";
+
+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 "../CookieMessage";
+
+export default {
+  title: "JS Components/Cookie Message",
+  component: CookieMessage,
+  args: {
+    cookieId: "cookie-namespace",
+    noticeId: "cookie-message",
+  },
+};
+
+export const Default = {};

package/src/core/CookieMessage/component.css

@@ -0,0 +1,15 @@
+@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;
+  }
+}

package/src/core/CookieMessage.tsx

@@ -0,0 +1,52 @@
+import React, { useRef, useEffect, useState } from "react";
+import Cookie from "js-cookie";
+
+import _absUrl from "./url-base";
+
+const COOKIE_EXPIRY = 365;
+
+type CookieMessageProps = {
+  cookieId: string;
+  urlBase: string;
+};
+
+const CookieMessage = ({ cookieId, urlBase }: CookieMessageProps) => {
+  const ref = useRef<HTMLDivElement>(null);
+  const [hideCookieMessage, setHideCookieMessage] = useState(true);
+
+  useEffect(() => {
+    const isCookieSet = Cookie.get(cookieId) ? true : false;
+    setHideCookieMessage(isCookieSet);
+  }, []);
+
+  const handleClose = () => {
+    Cookie.set(cookieId, "1", { expires: COOKIE_EXPIRY });
+
+    ref.current?.classList.add("bottom-1", "opacity-0");
+    setTimeout(() => setHideCookieMessage(true), 500);
+  };
+
+  const absUrl = (path) => _absUrl(path, urlBase);
+
+  // Presume the message is hidden by default
+  if (hideCookieMessage) return null;
+
+  return (
+    <div className="ui-cookie-message" ref={ref}>
+      <p className="ui-text-p2 pr-32">
+        <a href={absUrl("/privacy")} className="underline">
+          How we use cookies
+        </a>{" "}
+        to improve your experience.
+      </p>
+      <button
+        className="ui-btn-secondary mt-12 sm:mt-0 whitespace-nowrap"
+        onClick={handleClose}
+      >
+        Accept and close
+      </button>
+    </div>
+  );
+};
+
+export default CookieMessage;