@ably/ui 13.3.0 → 14.0.0-dev.1939f45

package/src/core/Icon.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+
+type IconProps = {
+  name: string;
+  size?: string;
+  color?: string;
+  additionalCSS?: string;
+};
+
+const Icon = ({
+  name,
+  size = "0.75rem",
+  color = "",
+  additionalCSS = "",
+  ...additionalAttributes
+}: IconProps) => (
+  <svg
+    className={`${color} ${additionalCSS}`}
+    style={{ width: size, height: size }}
+    {...additionalAttributes}
+  >
+    <use xlinkHref={`#sprite-${name}`} />
+  </svg>
+);
+
+export default Icon;

package/src/core/Loader/Loader.stories.tsx

@@ -0,0 +1,21 @@
+import Loader from "../Loader";
+
+export default {
+  title: "Components/Loader",
+  component: Loader,
+  tags: ["autodocs"],
+};
+
+export const Default = {};
+
+export const ChangedRingColor = {
+  args: {
+    ringColor: "text-light-grey",
+  },
+};
+
+export const HalfSize = {
+  args: {
+    size: "0.75em",
+  },
+};

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

@@ -1,7 +1,16 @@
 import React from "react";
-import T from "prop-types";
 
-const Loader = ({ ringColor = "text-dark-grey", size = "1.5rem", additionalCSS = "" }) => (
+type LoaderProps = {
+  size?: string;
+  ringColor?: string;
+  additionalCSS?: string;
+};
+
+const Loader = ({
+  ringColor = "text-dark-grey",
+  size = "1.5rem",
+  additionalCSS = "",
+}: LoaderProps) => (
   <svg
     className={`${ringColor} ${additionalCSS}`}
     style={{ width: size, height: size }}
@@ -40,10 +49,4 @@ const Loader = ({ ringColor = "text-dark-grey", size = "1.5rem", additionalCSS =
   </svg>
 );
 
-Loader.propTypes = {
-  size: T.string,
-  ringColor: T.string,
-  additionalCSS: T.string,
-};
-
 export default Loader;

package/src/core/Logo/Logo.stories.tsx

@@ -0,0 +1,12 @@
+import Logo from "../Logo";
+import logoUrl from "../images/ably-logo.png";
+
+export default {
+  title: "Components/Logo",
+  component: Logo,
+  args: {
+    logoUrl,
+  },
+};
+
+export const Default = {};

package/src/core/Logo.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+
+type LogoProps = {
+  dataId: string;
+  logoUrl: string;
+  href?: string;
+  additionalImgAttrs?: object;
+  additionalLinkAttrs?: object;
+};
+
+const Logo = ({
+  dataId,
+  logoUrl,
+  href = "/",
+  additionalImgAttrs,
+  additionalLinkAttrs,
+}: LogoProps) => (
+  <a
+    href={href}
+    data-id={dataId}
+    className="block"
+    style={{ height: "2.125rem" }}
+    {...additionalLinkAttrs}
+  >
+    <img src={logoUrl} width="108px" alt="Ably logo" {...additionalImgAttrs} />
+  </a>
+);
+
+export default React.memo(Logo);

package/src/core/Meganav/Meganav.stories.tsx

@@ -0,0 +1,86 @@
+import React, { useEffect } from "react";
+import { rest } from "msw";
+
+import Meganav from "../Meganav";
+import loadIcons from "../icons.js";
+import logo from "../images/ably-logo.png";
+import ablyStack from "../images/ably-stack.svg";
+import awsLogo from "../images/icon-tech-aws.svg";
+
+import {
+  attachStoreToWindow,
+  createRemoteDataStore,
+  getRemoteDataStore,
+} from "../remote-data-store.js";
+import { reducerBlogPosts, fetchBlogPosts } from "../remote-blogs-posts.js";
+import {
+  reducerSessionData,
+  fetchSessionData,
+} from "../remote-session-data.js";
+
+export default {
+  title: "Components/Meganav",
+  component: Meganav,
+  parameters: {
+    layout: "fullscreen",
+    msw: [
+      rest.get("/api/me", (_req, res, ctx) => {
+        return res(ctx.json({}));
+      }),
+      rest.get("/api/blog", (_req, res, ctx) => {
+        return res(
+          ctx.json([
+            {
+              title: "Achieving exactly-once delivery with Ably",
+              link: "https://ably.com/blog/achieving-exactly-once-message-processing-with-ably",
+              pubDate: "Nov 17, 2020",
+            },
+            {
+              title:
+                "Why Ably integrates with functions instead of delivering them",
+              link: "https://ably.com/blog/why-we-dont-offer-functions",
+              pubDate: "Jul 28, 2020",
+            },
+            {
+              title: "Adventures in BEAM optimization with our MQTT adapter",
+              link: "https://ably.com/blog/beam-optimization-mqtt",
+              pubDate: "Jul 17, 2020",
+            },
+          ])
+        );
+      }),
+    ],
+  },
+};
+
+attachStoreToWindow(
+  createRemoteDataStore({
+    ...reducerBlogPosts,
+    ...reducerSessionData,
+  })
+);
+
+const Page = () => {
+  useEffect(() => {
+    loadIcons();
+
+    const store = getRemoteDataStore();
+
+    fetchSessionData(store, "/api/me");
+    fetchBlogPosts(store, "/api/blog");
+  }, []);
+
+  return (
+    <Meganav
+      paths={{
+        logo,
+        ablyStack,
+        awsLogo,
+      }}
+    />
+  );
+};
+
+export const Default = {
+  render: () => <Page />,
+};

package/src/core/Meganav/component.css

@@ -51,7 +51,7 @@
   }
 
   .ui-meganav-link {
-    @apply text-menu2 font-bold block font-sans;
+    @apply text-menu2 font-bold font-sans;
     @apply mr-12 lg:mr-24 px-0 py-20;
     @apply hover:text-gui-hover focus:text-gui-focus focus:outline-none;
     @apply transition-colors;
@@ -63,7 +63,7 @@
 
   .ui-meganav-mobile-link {
     @apply p-menu-row relative -left-8 w-extend-8;
-    @apply text-menu2  font-bold font-mono font-medium block text-cool-black text-left;
+    @apply text-menu2 font-mono font-medium block text-cool-black text-left;
     @apply flex items-center;
     @apply focus:text-gui-focus focus:outline-none;
   }

package/src/core/Meganav/component.js

@@ -1,7 +1,5 @@
 import throttle from "lodash.throttle";
 
-import "./component.css";
-
 // Glossary:
 // item - is the element which contains both the control and the panel - these are adjacent
 // control - interactive element that controls showing and hiding of dropdown or panel
@@ -12,13 +10,12 @@ import "./component.css";
 
 import { queryId, queryIdAll } from "../dom-query";
 
-import MeganavControl from "../MeganavControl/component";
-
-import MeganavControlMobileDropdown from "../MeganavControlMobileDropdown/component";
-import MobilePanelOpenClick from "../MeganavControlMobilePanelOpen/component";
-import MobilePanelCloseClick from "../MeganavControlMobilePanelClose/component";
-import MeganavSearchAutocomplete from "../MeganavSearchAutocomplete/component";
-import MeganavSearchSuggestions from "../MeganavSearchSuggestions/component";
+import MeganavControl from "../MeganavControl/component.js";
+import MeganavControlMobileDropdown from "../MeganavControlMobileDropdown/component.js";
+import MobilePanelOpenClick from "../MeganavControlMobilePanelOpen/component.js";
+import MobilePanelCloseClick from "../MeganavControlMobilePanelClose/component.js";
+import MeganavSearchAutocomplete from "../MeganavSearchAutocomplete/component.js";
+import MeganavSearchSuggestions from "../MeganavSearchSuggestions/component.js";
 
 // Close menu when user clicks outside of viewport
 const windowOnBlur = (closeAll) => {

package/src/core/Meganav.tsx

@@ -0,0 +1,225 @@
+import React, { ReactNode, useEffect, useState } from "react";
+
+import { connectState } from "./remote-data-store.js";
+import { selectSessionData } from "./remote-session-data.js";
+
+import Logo from "./Logo";
+import MeganavData from "./Meganav/component.json";
+import MeganavScripts from "./Meganav/component.js";
+import MeganavItemsDesktop from "./MeganavItemsDesktop";
+import MeganavItemsSignedIn from "./MeganavItemsSignedIn";
+import MeganavItemsMobile from "./MeganavItemsMobile";
+import Notice from "./Notice";
+import _absUrl from "./url-base.js";
+import MeganavContentProducts from "./MeganavContentProducts";
+import MeganavContentUseCases from "./MeganavContentUseCases";
+import MeganavContentCompany from "./MeganavContentCompany";
+import MeganavContentDevelopers from "./MeganavContentDevelopers";
+import MeganavSearch from "./MeganavSearch";
+
+export type MeganavTheme = {
+  backgroundColor?: string;
+  textColor?: string;
+  buttonBackgroundColor?: string;
+  buttonTextColor?: string;
+  mobileMenuColor?: string;
+  logoTextColor?: string;
+  barShadow?: string;
+};
+
+export type AbsUrl = (path: string) => string;
+
+export type MeganavPanels = {
+  [index: string]: ({ paths, absUrl }) => ReactNode;
+};
+
+export type MeganavSessionState = {
+  signedIn: boolean;
+  logOut: {
+    token: string;
+    href: string;
+    text: string;
+  };
+  accountName: string;
+  preferredEmail: string;
+  account: {
+    links: {
+      dashboard: {
+        href: string;
+      };
+    };
+  };
+  mySettings: {
+    text: string;
+    href: string;
+  };
+  myAccessTokens: {
+    text: string;
+    href: string;
+  };
+};
+
+type SignInProps = {
+  sessionState: MeganavSessionState;
+  theme: MeganavTheme;
+  loginLink: string;
+  absUrl: AbsUrl;
+};
+
+type MeganavProps = {
+  paths?: {
+    logo: string;
+    iconSprites: string;
+    ablyStack: string;
+    blogThumb1: string;
+    blogThumb2: string;
+    blogThumb3: string;
+  };
+
+  themeName: "white" | "black" | "transparentToWhite";
+  notice?: {
+    props: {
+      title: string;
+      bodyText: string;
+      buttonLink: string;
+      buttonLabel: string;
+      closeBtn: boolean;
+    };
+    config: {
+      cookieId: string;
+      noticeId: string;
+      collapse: boolean;
+    };
+  };
+  loginLink?: string;
+  urlBase?: string;
+  addSearchApiKey: string;
+};
+
+const SignIn = ({ sessionState, theme, loginLink, absUrl }: SignInProps) => {
+  return sessionState.signedIn ? (
+    <MeganavItemsSignedIn
+      absUrl={absUrl}
+      sessionState={sessionState}
+      theme={theme}
+    />
+  ) : (
+    <ul className="hidden md:flex items-center">
+      <li className="ui-meganav-item">
+        <a
+          href={absUrl("/contact")}
+          className={`ui-meganav-link ${theme.textColor}`}
+          data-id="meganav-link"
+        >
+          Contact us
+        </a>
+      </li>
+      <li className="ui-meganav-item">
+        <a
+          href={absUrl(loginLink)}
+          className={`ui-meganav-link mr-0 ${theme.textColor}`}
+          data-id="meganav-link"
+        >
+          Login
+        </a>
+      </li>
+      <li className="ui-meganav-item">
+        <MeganavSearch absUrl={absUrl} />
+      </li>
+      <li className="ui-meganav-item">
+        <a
+          href={absUrl("/sign-up")}
+          data-id="meganav-sign-up-btn"
+          className={`ui-btn p-btn-small ${theme.buttonBackgroundColor} ${theme.buttonTextColor}`}
+        >
+          Sign up free
+        </a>
+      </li>
+    </ul>
+  );
+};
+
+const SignInPlaceholder = () => <div />;
+
+const panels = {
+  MeganavContentProducts,
+  MeganavContentUseCases,
+  MeganavContentCompany,
+  MeganavContentDevelopers,
+};
+
+const Meganav = ({
+  paths,
+  themeName = "white",
+  notice,
+  loginLink = "/login",
+  urlBase,
+  addSearchApiKey,
+}: MeganavProps) => {
+  const [sessionState, setSessionState] = useState<MeganavSessionState>();
+
+  useEffect(() => {
+    // Note if state is never updated, sessionState stays null and never removes the placeholder.
+    // This makes SSR consistent (ie. we always show the placeholder)
+    connectState(selectSessionData, setSessionState);
+  }, []);
+
+  useEffect(() => {
+    const teardown = MeganavScripts({ themeName, addSearchApiKey });
+    // TODO(jamiehenson): update this when JS assets are converted to TS
+    // @ts-expect-error: teardown parsed as Element from JS file, cannot be coerced into Function form
+    return () => teardown();
+  }, [sessionState]);
+
+  const theme = MeganavData.themes[themeName];
+  const absUrl = (path) => _absUrl(path, urlBase);
+
+  return (
+    <nav
+      className={`ui-meganav-wrapper ${theme.backgroundColor} ${theme.barShadow}`}
+      data-id="meganav"
+      aria-label="Main"
+    >
+      {notice && <Notice {...notice.props} config={notice.config} />}
+      <div className="ui-meganav ui-grid-px">
+        <div className="mr-24">
+          <Logo
+            dataId="meganav-logo"
+            href={urlBase}
+            logoUrl={paths?.logo ?? ""}
+          />
+        </div>
+
+        <MeganavItemsDesktop
+          panels={panels}
+          paths={paths}
+          theme={theme}
+          absUrl={absUrl}
+        />
+
+        {/* Because we load the session state through fetch, we display a placeholder until fetch returns */}
+        {sessionState ? (
+          <SignIn
+            sessionState={sessionState}
+            theme={theme}
+            loginLink={loginLink}
+            absUrl={absUrl}
+          />
+        ) : (
+          <SignInPlaceholder />
+        )}
+
+        <MeganavItemsMobile
+          panels={panels}
+          sessionState={sessionState}
+          paths={paths}
+          theme={theme}
+          loginLink={loginLink}
+          absUrl={absUrl}
+        />
+      </div>
+    </nav>
+  );
+};
+
+export default Meganav;

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

@@ -1,9 +1,21 @@
 import React from "react";
-import T from "prop-types";
 
-import FeaturedLink from "../FeaturedLink/component.jsx";
+import FeaturedLink from "./FeaturedLink";
+import { AbsUrl } from "./Meganav";
 
-const MeganavBlogPostsList = ({ recentBlogPosts, absUrl }) =>
+type MeganavBlogPostsListProps = {
+  recentBlogPosts: {
+    link: string;
+    title: string;
+    pubDate: string;
+  }[];
+  absUrl: AbsUrl;
+};
+
+const MeganavBlogPostsList = ({
+  recentBlogPosts,
+  absUrl,
+}: MeganavBlogPostsListProps) =>
   recentBlogPosts ? (
     <div className="col-span-full md:col-span-4 pt-8 pb-24 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0">
       <h3 className="ui-meganav-overline" id="meganav-company-panel-list-blog">
@@ -26,15 +38,4 @@ const MeganavBlogPostsList = ({ recentBlogPosts, absUrl }) =>
     </div>
   ) : null;
 
-MeganavBlogPostsList.propTypes = {
-  recentBlogPosts: T.arrayOf(
-    T.shape({
-      link: T.string,
-      title: T.string,
-      pubDate: T.string,
-    })
-  ),
-  absUrl: T.func,
-};
-
 export default MeganavBlogPostsList;