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

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

@@ -1,13 +1,26 @@
-import React from "react";
-import T from "prop-types";
+import React, { CSSProperties, ReactNode } from "react";
 
-import Icon from "../Icon/component.jsx";
+import Icon from "../Icon/component.tsx";
+
+type FeaturedLinkProps = {
+  url: string;
+  children: ReactNode;
+  textSize?: string;
+  iconColor?: string;
+  flush?: boolean;
+  reverse?: boolean;
+  additionalCSS?: string;
+  newWindow?: boolean;
+  onClick?: () => void;
+};
+
+type TargetProps = { target?: string; rel?: string };
 
 // When generating links with target=_blank, we only add `noreferrer` to
 // links that don't start with `/`, so we can continue tracking referrers
 // across our own domains
 const buildTargetAndRel = (url, newWindow) => {
-  const props = {};
+  const props: TargetProps = {};
 
   if (newWindow) {
     props.target = "_blank";
@@ -30,8 +43,9 @@ const FeaturedLink = ({
   reverse = false,
   additionalCSS = "",
   newWindow = false,
+  onClick = undefined,
   children,
-}) => {
+}: FeaturedLinkProps) => {
   const targetAndRel = buildTargetAndRel(url, newWindow);
 
   return (
@@ -40,8 +54,16 @@ const FeaturedLink = ({
       className={`font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group ui-${textSize} ${
         flush ? "" : "py-8"
       } ${additionalCSS}`}
-      style={{ "--featured-link-icon-size": `var(${textSize.replace("text", "--fs")})` }}
+      style={
+        {
+          "--featured-link-icon-size": `var(${textSize.replace(
+            "text",
+            "--fs"
+          )})`,
+        } as CSSProperties
+      }
       {...targetAndRel}
+      onClick={onClick}
     >
       {reverse ? (
         <>
@@ -68,15 +90,4 @@ const FeaturedLink = ({
   );
 };
 
-FeaturedLink.propTypes = {
-  url: T.string,
-  children: T.node,
-  textSize: T.string,
-  iconColor: T.string,
-  flush: T.bool,
-  reverse: T.bool,
-  additionalCSS: T.string,
-  newWindow: T.bool,
-};
-
 export default FeaturedLink;

package/src/core/Flash/Flash.stories.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import Flash, { reducerFlashes } from "./component.tsx";
+
+import {
+  attachStoreToWindow,
+  createRemoteDataStore,
+} from "../remote-data-store.js";
+import { reducerBlogPosts } from "../remote-blogs-posts.js";
+import { reducerSessionData } from "../remote-session-data.js";
+
+export default {
+  title: "Components/Flash",
+  component: Flash,
+  args: {
+    flashes: [
+      ["success", "Congratulations! You've won the Oscar"],
+      ["notice", "This is a notice"],
+      ["error", "This is an error, very bad"],
+      ["alert", "This is an alert"],
+      ["info", "Some useful information, you are welcome"],
+    ],
+  },
+};
+
+export const Default = {
+  render: (args) => {
+    const store = createRemoteDataStore({
+      ...reducerBlogPosts,
+      ...reducerSessionData,
+      ...reducerFlashes,
+    });
+
+    attachStoreToWindow(store);
+
+    return <Flash {...args} />;
+  },
+};

package/src/core/Flash/component.css

@@ -1,25 +1,23 @@
-@layer components {
-  .ui-flash {
-    @apply w-full fixed;
-    top: 5.5rem;
-    z-index: calc(var(--stacking-context-page-meganav) - 10);
-    transition: margin-top 200ms;
-  }
+.ui-flash {
+  @apply w-full fixed;
+  top: 5.5rem;
+  z-index: calc(var(--stacking-context-page-meganav) - 10);
+  transition: margin-top 200ms;
+}
 
-  .ui-flash-message {
-    @apply font-sans font-light antialiased max-w-screen-xl mx-auto mt-8 opacity-0 relative;
-    transition: opacity 200ms, transform 200ms, height 200ms 200ms,
-      margin-top 200ms 200ms;
-    transform: translateY(-200%) rotateX(-90deg);
-  }
+.ui-flash-message {
+  @apply font-sans font-light antialiased max-w-screen-xl mx-auto mt-8 opacity-0 relative;
+  transition: opacity 200ms, transform 200ms, height 200ms 200ms,
+    margin-top 200ms 200ms;
+  transform: translateY(-200%) rotateX(-90deg);
+}
 
-  /* dynamic content inside flash, can't add classes */
-  .ui-flash-text a {
-    @apply underline;
-  }
+/* dynamic content inside flash, can't add classes */
+.ui-flash-text a {
+  @apply underline;
+}
 
-  .ui-flash-message-enter {
-    @apply opacity-100;
-    transform: translateY(0) rotateX(0);
-  }
+.ui-flash-message-enter {
+  @apply opacity-100;
+  transform: translateY(0) rotateX(0);
 }

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

@@ -1,11 +1,27 @@
 import React, { useEffect, useState, useRef } from "react";
 import DOMPurify from "dompurify";
-import T from "prop-types";
 import { nanoid } from "nanoid/non-secure";
 
-import { getRemoteDataStore } from "../remote-data-store";
-import ConnectStateWrapper from "../ConnectStateWrapper/component.jsx";
-import Icon from "../Icon/component.jsx";
+import { getRemoteDataStore } from "../remote-data-store.js";
+import ConnectStateWrapper from "../ConnectStateWrapper/component.tsx";
+import Icon from "../Icon/component.tsx";
+import "./component.css";
+
+type FlashProps = {
+  id: string;
+  removed: boolean;
+  type: "error" | "success" | "notice" | "info" | "alert";
+  content: string;
+  removeFlash: (id: string) => void;
+};
+
+type FlashesProps = {
+  flashes: { items: FlashProps[] };
+};
+
+type BackendFlashesProps = {
+  flashes: string[][];
+};
 
 const REDUCER_KEY = "flashes";
 const FLASH_DATA_ID = "ui-flashes";
@@ -16,7 +32,9 @@ const reducerFlashes = {
   [REDUCER_KEY]: (state = initialState, action) => {
     switch (action.type) {
       case "flash/push": {
-        const flashes = Array.isArray(action.payload) ? action.payload : [action.payload];
+        const flashes = Array.isArray(action.payload)
+          ? action.payload
+          : [action.payload];
         return { items: [...state.items, ...flashes] };
       }
       default:
@@ -27,11 +45,6 @@ const reducerFlashes = {
 
 const selectFlashes = (store) => store.getState()[REDUCER_KEY];
 
-const FlashT = {
-  type: T.oneOf(["error", "success", "notice", "info", "alert"]),
-  content: T.string,
-};
-
 const FLASH_BG_COLOR = {
   error: "bg-gui-error",
   success: "bg-zingy-green",
@@ -52,7 +65,7 @@ const AUTO_HIDE = ["success", "info", "notice"];
 const AUTO_HIDE_TIME = 8000;
 
 const useAutoHide = (type, closeFlash) => {
-  const timeoutId = useRef(null);
+  const timeoutId = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   useEffect(() => {
     if (AUTO_HIDE.includes(type)) {
@@ -69,8 +82,8 @@ const useAutoHide = (type, closeFlash) => {
   }, []);
 };
 
-const Flash = ({ id, type, content, removeFlash }) => {
-  const ref = useRef(null);
+const Flash = ({ id, type, content, removeFlash }: FlashProps) => {
+  const ref = useRef<HTMLDivElement>(null);
   const [closed, setClosed] = useState(false);
   const [flashHeight, setFlashHeight] = useState(0);
   const [triggerEntryAnimation, setTriggerEntryAnimation] = useState(false);
@@ -83,7 +96,7 @@ const Flash = ({ id, type, content, removeFlash }) => {
     setClosed(true);
 
     setTimeout(() => {
-      removeFlash(id);
+      id && removeFlash(id);
     }, 100);
   };
 
@@ -122,30 +135,62 @@ const Flash = ({ id, type, content, removeFlash }) => {
   };
 
   return (
-    <div className={`ui-flash-message ui-grid-px ${animateEntry ? "ui-flash-message-enter" : ""}`} style={style} ref={ref} data-id="ui-flash">
-      <div className={`${FLASH_BG_COLOR[type]} p-32 flex align-center rounded shadow-container-subtle`}>
-        {withIcons[type] && <Icon name={withIcons[type]} color={iconColor[type]} size="1.5rem" additionalCSS="mr-16 self-baseline" />}
-        <p className={`ui-text-p1 mr-16 ${FLASH_TEXT_COLOR[type]}`} dangerouslySetInnerHTML={{ __html: safeContent }} />
-        <button type="button" className="p-0 ml-auto self-start focus:outline-none" onClick={closeFlash}>
-          <Icon name="icon-gui-close" color={iconColor[type]} size="1.5rem" additionalCSS="transition-colors" />
+    <div
+      className={`ui-flash-message ui-grid-px ${
+        animateEntry ? "ui-flash-message-enter" : ""
+      }`}
+      style={style}
+      ref={ref}
+      data-id="ui-flash"
+    >
+      <div
+        className={`${FLASH_BG_COLOR[type]} p-32 flex align-center rounded shadow-container-subtle`}
+      >
+        {withIcons[type] && (
+          <Icon
+            name={withIcons[type]}
+            color={iconColor[type]}
+            size="1.5rem"
+            additionalCSS="mr-16 self-baseline"
+          />
+        )}
+        <p
+          className={`ui-text-p1 mr-16 ${FLASH_TEXT_COLOR[type]}`}
+          dangerouslySetInnerHTML={{ __html: safeContent }}
+        />
+        <button
+          type="button"
+          className="p-0 ml-auto self-start focus:outline-none"
+          onClick={closeFlash}
+        >
+          <Icon
+            name="icon-gui-close"
+            color={iconColor[type]}
+            size="1.5rem"
+            additionalCSS="transition-colors"
+          />
         </button>
       </div>
     </div>
   );
 };
 
-Flash.propTypes = {
-  ...FlashT,
-};
-
-const Flashes = ({ flashes }) => {
-  const [flashesWithIds, setFlashesWithIds] = useState([]);
+const Flashes = ({ flashes }: FlashesProps) => {
+  const [flashesWithIds, setFlashesWithIds] = useState<FlashProps[]>([]);
 
-  const removeFlash = (flashId) => setFlashesWithIds((items) => items.filter((item) => item.id !== flashId));
+  const removeFlash = (flashId) =>
+    setFlashesWithIds((items) => items.filter((item) => item.id !== flashId));
 
   useEffect(() => {
     setFlashesWithIds((state) => {
-      return [...state, ...(flashes?.items || []).map((flash) => ({ ...flash, id: nanoid(), removed: false }))];
+      return [
+        ...state,
+        ...(flashes?.items).map((flash) => ({
+          ...flash,
+          id: nanoid(),
+          removed: false,
+        })),
+      ];
     });
   }, [flashes]);
 
@@ -154,17 +199,13 @@ const Flashes = ({ flashes }) => {
       {flashesWithIds
         .filter((item) => !item.removed)
         .map((flash) => (
-          <Flash removeFlash={removeFlash} key={flash.id} {...flash} />
+          <Flash key={flash.id} {...flash} removeFlash={removeFlash} />
         ))}
     </div>
   );
 };
 
-Flashes.propTypes = {
-  flashes: T.shape({ items: T.arrayOf(T.shape(FlashT)) }),
-};
-
-const BackendFlashes = ({ flashes }) => {
+const BackendFlashes = ({ flashes }: BackendFlashesProps) => {
   useEffect(() => {
     const transformedFlashes =
       flashes.map((flash) => {
@@ -182,14 +223,12 @@ const BackendFlashes = ({ flashes }) => {
     }
   }, []);
 
-  const WrappedFlashes = ConnectStateWrapper(Flashes, { flashes: selectFlashes });
+  const WrappedFlashes = ConnectStateWrapper(Flashes, {
+    flashes: selectFlashes,
+  });
 
   return <WrappedFlashes />;
 };
 
-BackendFlashes.propTypes = {
-  flashes: T.arrayOf(T.arrayOf(T.string)),
-};
-
 export { reducerFlashes, FLASH_DATA_ID, Flashes };
 export default BackendFlashes;

package/src/core/Footer/Footer.stories.tsx

@@ -0,0 +1,26 @@
+import Footer from "./component.tsx";
+
+import ablyStack from "../images/ably-stack.svg";
+import highestPerformer from "../images/high-performer-2023.svg";
+import bestSupport from "../images/best-support-2023.svg";
+import fastestImplementation from "../images/fastest-implementation-2023.svg";
+import highestUserAdoption from "../images/highest-user-adoption-2023.svg";
+
+export default {
+  title: "Components/Footer",
+  component: Footer,
+  parameters: {
+    layout: "fullscreen",
+  },
+  args: {
+    paths: {
+      ablyStack,
+      highestPerformer,
+      bestSupport,
+      fastestImplementation,
+      highestUserAdoption,
+    },
+  },
+};
+
+export const Default = {};

package/src/core/Footer/component.css

@@ -1,33 +1,31 @@
-@layer components {
-  .ui-footer-col-title {
-    @apply font-mono text-overline2 p-menu-row-title font-medium uppercase tracking-widen-0.16;
-  }
+.ui-footer-col-title {
+  @apply font-mono text-overline2 p-menu-row-title font-medium uppercase tracking-widen-0.16;
+}
 
-  .ui-footer-menu-row-link {
-    @apply text-menu3 text-cool-black font-sans font-medium hover:text-gui-hover block;
-  }
+.ui-footer-menu-row-link {
+  @apply text-menu3 text-cool-black font-sans font-medium hover:text-gui-hover block;
+}
 
-  .ui-footer-link {
-    @apply text-gui-default hover:text-gui-hover text-menu3 font-sans font-medium;
-  }
+.ui-footer-link {
+  @apply text-gui-default hover:text-gui-hover text-menu3 font-sans font-medium;
+}
 
-  .ui-footer-compliance-text {
-    font-size: 12px;
-  }
+.ui-footer-compliance-text {
+  font-size: 12px;
+}
 
-  .ui-footer-tick-icon {
-    min-width: 1.5rem;
-  }
+.ui-footer-tick-icon {
+  min-width: 1.5rem;
+}
 
-  @media (max-width: 1040px) {
-    .ui-footer-bottom-links {
-      @apply pb-40;
-    }
+@media (max-width: 1040px) {
+  .ui-footer-bottom-links {
+    @apply pb-40;
   }
+}
 
-  @media screen {
-    .ui-footer-glassdoor {
-      display: none;
-    }
+@media screen {
+  .ui-footer-glassdoor {
+    display: none;
   }
 }