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

package/src/core/Meganav.tsx

@@ -1,225 +0,0 @@
-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.js

@@ -1,43 +0,0 @@
-import { queryIdAll } from "../dom-query";
-import { selectRecentBlogPosts } from "../remote-blogs-posts";
-import { connectState } from "../remote-data-store";
-
-const template = ({ link, title, pubDate }) => {
-  const [li, a, heading, copy] = ["li", "a", "p", "p"].map((el) =>
-    document.createElement(el),
-  );
-
-  a.href = link;
-  a.classList.add("ui-meganav-media", "group");
-
-  heading.textContent = title;
-  heading.classList.add("ui-meganav-media-heading");
-
-  copy.textContent = pubDate;
-  copy.classList.add("ui-meganav-media-copy");
-
-  a.appendChild(heading);
-  a.appendChild(copy);
-  li.appendChild(a);
-
-  return li;
-};
-
-export default () => {
-  connectState(selectRecentBlogPosts, (recentBlogPosts) => {
-    if (Array.isArray(recentBlogPosts) && recentBlogPosts.length > 0) {
-      const sections = queryIdAll("meganav-company-panel-blog-section");
-      const containers = queryIdAll("meganav-company-panel-recent-blog-posts");
-
-      Array.from(containers).forEach((container) => {
-        const fragment = document.createDocumentFragment();
-        recentBlogPosts.forEach((post) => fragment.appendChild(template(post)));
-        container.appendChild(fragment);
-      });
-
-      Array.from(sections).forEach((section) =>
-        section.classList.remove("hidden"),
-      );
-    }
-  });
-};

package/src/core/MeganavBlogPostsList.tsx

@@ -1,41 +0,0 @@
-import React from "react";
-
-import FeaturedLink from "./FeaturedLink";
-import { AbsUrl } from "./Meganav";
-
-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">
-        Blog
-      </h3>
-      <ul className="mb-8" aria-labelledby="meganav-company-panel-list-blog">
-        {recentBlogPosts.map((post) => (
-          <li key={post.link}>
-            <a href={post.link} className="ui-meganav-media group">
-              <p className="ui-meganav-media-heading">{post.title}</p>
-              <p className="ui-meganav-media-copy">{post.pubDate}</p>
-            </a>
-          </li>
-        ))}
-      </ul>
-
-      <FeaturedLink url={absUrl("/blog")} textSize="text-p3">
-        More from our Blog
-      </FeaturedLink>
-    </div>
-  ) : null;
-
-export default MeganavBlogPostsList;

package/src/core/MeganavContentCompany.tsx

@@ -1,166 +0,0 @@
-import React from "react";
-
-import MeganavBlogPostsList from "./MeganavBlogPostsList";
-import ConnectStateWrapper from "./ConnectStateWrapper";
-import { selectRecentBlogPosts } from "./remote-blogs-posts.js";
-import Icon from "./Icon";
-import { AbsUrl } from "./Meganav";
-
-type MeganavContentCompanyProps = {
-  absUrl: AbsUrl;
-  paths: {
-    awsLogo: string;
-  };
-};
-
-const MeganavContentCompany = ({
-  paths,
-  absUrl,
-}: MeganavContentCompanyProps) => {
-  const BlogPostsList = ConnectStateWrapper(MeganavBlogPostsList, {
-    recentBlogPosts: selectRecentBlogPosts,
-  });
-
-  return (
-    <div className="flex max-w-screen-xl mx-auto">
-      <div className="ui-meganav-content-spacer"></div>
-      <section className="grid grid-cols-12 ui-grid-gap-x w-full">
-        <div className="col-span-full md:col-span-4 pt-24 md:py-24 lg:py-32 px-24 sm:px-32 md:pl-0 md:pr-24">
-          <h3
-            className="ui-meganav-overline"
-            id="meganav-company-panel-list-why-companies"
-          >
-            Why companies choose Ably
-          </h3>
-          <ul aria-labelledby="meganav-company-panel-list-why-companies">
-            <li>
-              <a
-                href={absUrl("/customers")}
-                className="ui-meganav-media-with-image group"
-              >
-                <Icon name="icon-display-customers-col" size="2.5rem" />
-                <div className="flex flex-col justify-center">
-                  <p className="ui-meganav-media-heading">Customers</p>
-                  <p className="ui-meganav-media-copy">
-                    Ably supports customers across multiple industries.
-                  </p>
-                </div>
-              </a>
-            </li>
-            <li>
-              <a
-                href={absUrl("/case-studies")}
-                className="ui-meganav-media-with-image group"
-              >
-                <Icon name="icon-display-case-studies-col" size="2.5rem" />
-                <div className="flex flex-col justify-center">
-                  <p className="ui-meganav-media-heading">Case studies</p>
-                  <p className="ui-meganav-media-copy">
-                    Discover how customers are benefiting from Ably.
-                  </p>
-                </div>
-              </a>
-            </li>
-            <li>
-              <a
-                href={absUrl("/compare")}
-                className="ui-meganav-media-with-image group"
-              >
-                <Icon name="icon-display-compare-tech-col" size="2.5rem" />
-                <div className="flex flex-col justify-center">
-                  <p className="ui-meganav-media-heading">Compare our tech</p>
-                  <p className="ui-meganav-media-copy">
-                    Choose the right realtime service.
-                  </p>
-                </div>
-              </a>
-            </li>
-            <li>
-              <a
-                href={absUrl("/aws")}
-                className="ui-meganav-media-with-image group"
-              >
-                <img src={paths.awsLogo} alt="AWS logo" />
-                <div className="flex flex-col justify-center">
-                  <p className="ui-meganav-media-heading">Partners</p>
-                  <p className="ui-meganav-media-copy">
-                    Ably collaborates and integrates with AWS.
-                  </p>
-                </div>
-              </a>
-            </li>
-          </ul>
-        </div>
-
-        <div className="col-span-full md:col-span-4 pb-8 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0">
-          <ul
-            className="md:mt-40"
-            aria-labelledby="meganav-company-panel-list-why-companies"
-          >
-            <li>
-              <a
-                href={absUrl("/resources")}
-                className="ui-meganav-media-with-image group"
-              >
-                <Icon name="icon-display-resources-col" size="2.5rem" />
-                <div className="flex flex-col justify-center">
-                  <p className="ui-meganav-media-heading">Resources</p>
-                  <p className="ui-meganav-media-copy">
-                    Learn more about realtime with our handy resources.
-                  </p>
-                </div>
-              </a>
-            </li>
-            <li>
-              <a
-                href={absUrl("/about")}
-                className="ui-meganav-media-with-image group"
-              >
-                <Icon name="icon-display-about-ably-col" size="2.5rem" />
-                <div className="flex flex-col justify-center">
-                  <p className="ui-meganav-media-heading">About Ably</p>
-                  <p className="ui-meganav-media-copy">
-                    Find out more about Ably’s mission.
-                  </p>
-                </div>
-              </a>
-            </li>
-            <li>
-              <a
-                href={absUrl("/careers")}
-                className="ui-meganav-media-with-image group"
-              >
-                <Icon name="icon-display-careers-col" size="2.5rem" />
-                <div className="flex flex-col justify-center">
-                  <p className="ui-meganav-media-heading">Careers</p>
-                  <p className="ui-meganav-media-copy">
-                    Discover our open roles and core Ably values.
-                  </p>
-                </div>
-              </a>
-            </li>
-            <li>
-              <a
-                href={absUrl("/events")}
-                className="ui-meganav-media-with-image group"
-              >
-                <Icon name="icon-display-events-col" size="2.5rem" />
-                <div className="flex flex-col justify-center">
-                  <p className="ui-meganav-media-heading">Events</p>
-                  <p className="ui-meganav-media-copy">
-                    Join Ably at upcoming events.
-                  </p>
-                </div>
-              </a>
-            </li>
-          </ul>
-        </div>
-
-        <BlogPostsList absUrl={absUrl} />
-      </section>
-      <div className="ui-meganav-content-spacer"></div>
-    </div>
-  );
-};
-
-export default MeganavContentCompany;

package/src/core/MeganavContentDevelopers.tsx

@@ -1,210 +0,0 @@
-import React from "react";
-
-import Icon from "./Icon";
-import { AbsUrl } from "./Meganav";
-
-const MeganavContentDevelopers = ({ absUrl }: { absUrl: AbsUrl }) => (
-  <div className="flex max-w-screen-xl mx-auto">
-    <div className="ui-meganav-content-spacer"></div>
-    <section className="grid grid-cols-12 ui-grid-gap-x w-full">
-      <div className="col-span-full md:col-span-4 pt-24 md:py-24 lg:py-32 px-24 sm:px-32 md:pl-0 md:pr-24">
-        <h3
-          className="ui-meganav-overline uppercase"
-          id="meganav-developers-panel-explore"
-        >
-          Explore
-        </h3>
-        <ul aria-labelledby="meganav-developers-panel-explore">
-          <li>
-            <a
-              href={absUrl("/docs")}
-              className="ui-meganav-media-with-image group"
-            >
-              <Icon name="icon-display-docs-col" size="2.5rem" />
-              <div className="flex flex-col justify-center">
-                <p className="ui-meganav-media-heading">Documentation</p>
-                <p className="ui-meganav-media-copy">
-                  Technical guides to help you build with Ably.
-                </p>
-              </div>
-            </a>
-          </li>
-          <li>
-            <a
-              href={absUrl("/docs/quick-start-guide")}
-              className="ui-meganav-media-with-image group"
-            >
-              <Icon name="icon-display-quickstart-guides-col" size="2.5rem" />
-              <div className="flex flex-col justify-center">
-                <p className="ui-meganav-media-heading">Quickstart guides</p>
-                <p className="ui-meganav-media-copy">
-                  Documentation to help you get started quickly.
-                </p>
-              </div>
-            </a>
-          </li>
-          <li>
-            <a
-              href={absUrl("/integrations")}
-              className="ui-meganav-media-with-image group"
-            >
-              <Icon name="icon-display-integrations-col" size="2.5rem" />
-              <div className="flex flex-col justify-center">
-                <p className="ui-meganav-media-heading">Integrations</p>
-                <p className="ui-meganav-media-copy">
-                  Find out more about Ably integrations.{" "}
-                </p>
-              </div>
-            </a>
-          </li>
-          <li>
-            <a
-              href={absUrl("/examples")}
-              className="ui-meganav-media-with-image group"
-            >
-              <Icon name="icon-display-examples-col" size="2.5rem" />
-              <div className="flex flex-col justify-center">
-                <p className="ui-meganav-media-heading">Live examples</p>
-                <p className="ui-meganav-media-copy">
-                  Discover our features and their use cases.
-                </p>
-              </div>
-            </a>
-          </li>
-        </ul>
-      </div>
-
-      <div className="col-span-full md:col-span-4 pb-8 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0">
-        <ul
-          className="md:mt-40"
-          aria-labelledby="meganav-developers-panel-explore"
-        >
-          <li>
-            <a
-              href={absUrl("/docs/sdks")}
-              className="ui-meganav-media-with-image group"
-            >
-              <Icon name="icon-display-sdks-col" size="2.5rem" />
-              <div className="flex flex-col justify-center">
-                <p className="ui-meganav-media-heading">SDKs</p>
-                <p className="ui-meganav-media-copy">
-                  Download an SDK to help you build realtime apps faster.
-                </p>
-              </div>
-            </a>
-          </li>
-          <li>
-            <a
-              href={absUrl("/tutorials")}
-              className="ui-meganav-media-with-image group"
-            >
-              <Icon name="icon-display-tutorials-demos-col" size="2.5rem" />
-              <div className="flex flex-col justify-center">
-                <p className="ui-meganav-media-heading">Tutorials & Demos</p>
-                <p className="ui-meganav-media-copy">
-                  Get stuck in with our hands-on resources.
-                </p>
-              </div>
-            </a>
-          </li>
-          <li>
-            <a
-              href={absUrl("/reference-guide-chat")}
-              className="ui-meganav-media-with-image group"
-            >
-              <Icon name="icon-display-chat-col" size="2.5rem" />
-              <div className="flex flex-col justify-center">
-                <p className="ui-meganav-media-heading">
-                  Chat apps reference guide
-                </p>
-                <p className="ui-meganav-media-copy">
-                  Learn how to build chat apps with Ably.
-                </p>
-              </div>
-            </a>
-          </li>
-          <li>
-            <a
-              href={absUrl("/reference-guide-multiplayer")}
-              className="ui-meganav-media-with-image group"
-            >
-              <Icon name="icon-multi-user-spaces-col" size="2.5rem" />
-              <div className="flex flex-col justify-center">
-                <p className="ui-meganav-media-heading">
-                  Multiplayer reference guide
-                </p>
-                <p className="ui-meganav-media-copy">
-                  Learn how to build collaborative features with Ably.
-                </p>
-              </div>
-            </a>
-          </li>
-        </ul>
-      </div>
-
-      <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 uppercase"
-          id="meganav-developers-panel-quick-links"
-        >
-          Quick links
-        </h3>
-        <ul aria-labelledby="meganav-developers-panel-quick-links">
-          <li>
-            <a
-              href="https://discord.gg/jwBPhEZ9g5"
-              className="group ui-meganav-media py-12"
-            >
-              <p className="ui-meganav-media-heading">Discord</p>
-            </a>
-          </li>
-          <li>
-            <a
-              href="https://github.com/ably"
-              className="group ui-meganav-media py-12"
-            >
-              <p className="ui-meganav-media-heading">GitHub</p>
-            </a>
-          </li>
-          <li>
-            <a
-              href="https://changelog.ably.com/"
-              className="group ui-meganav-media py-12"
-            >
-              <p className="ui-meganav-media-heading">Changelog</p>
-            </a>
-          </li>
-          <li>
-            <a
-              href="https://status.ably.com/"
-              className="group ui-meganav-media py-12"
-            >
-              <p className="ui-meganav-media-heading">
-                Status
-                <iframe
-                  title="Ably status"
-                  src="https://status.ably.com/embed/icon"
-                  style={{ backgroundColor: "transparent" }}
-                  frameBorder="0"
-                  scrolling="no"
-                  className="w-24 h-24 ml-4 border-none pointer-events-none align-middle"
-                ></iframe>
-              </p>
-            </a>
-          </li>
-          <li>
-            <a
-              href={absUrl("/support")}
-              className="group ui-meganav-media py-12"
-            >
-              <p className="ui-meganav-media-heading">Support & FAQs</p>
-            </a>
-          </li>
-        </ul>
-      </div>
-    </section>
-    <div className="ui-meganav-content-spacer"></div>
-  </div>
-);
-
-export default MeganavContentDevelopers;