@ably/ui 14.0.4 → 14.0.6

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

@@ -1,37 +0,0 @@
-import React from "react";
-import Flash, { reducerFlashes } from "../Flash";
-
-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,28 +0,0 @@
-@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-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;
-  }
-
-  .ui-flash-message-enter {
-    @apply opacity-100;
-    transform: translateY(0) rotateX(0);
-  }
-}

package/src/core/Flash.tsx

@@ -1,233 +0,0 @@
-import React, { useEffect, useState, useRef } from "react";
-import DOMPurify from "dompurify";
-import { nanoid } from "nanoid/non-secure";
-
-import { getRemoteDataStore } from "./remote-data-store.js";
-import ConnectStateWrapper from "./ConnectStateWrapper";
-import Icon from "./Icon";
-
-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";
-
-const initialState = { items: [] };
-
-const reducerFlashes = {
-  [REDUCER_KEY]: (state = initialState, action) => {
-    switch (action.type) {
-      case "flash/push": {
-        const flashes = Array.isArray(action.payload)
-          ? action.payload
-          : [action.payload];
-        return { items: [...state.items, ...flashes] };
-      }
-      default:
-        return state;
-    }
-  },
-};
-
-const selectFlashes = (store) => store.getState()[REDUCER_KEY];
-
-const FLASH_BG_COLOR = {
-  error: "bg-gui-error",
-  success: "bg-zingy-green",
-  notice: "bg-electric-cyan",
-  info: "bg-electric-cyan",
-  alert: "bg-active-orange",
-};
-
-const FLASH_TEXT_COLOR = {
-  error: "text-white",
-  success: "text-cool-black",
-  notice: "text-cool-black",
-  info: "text-cool-black",
-  alert: "text-white",
-};
-
-const AUTO_HIDE = ["success", "info", "notice"];
-const AUTO_HIDE_TIME = 8000;
-
-const useAutoHide = (type, closeFlash) => {
-  const timeoutId = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-  useEffect(() => {
-    if (AUTO_HIDE.includes(type)) {
-      timeoutId.current = setTimeout(() => {
-        closeFlash();
-      }, AUTO_HIDE_TIME);
-    }
-
-    return () => {
-      if (timeoutId.current) {
-        clearTimeout(timeoutId.current);
-      }
-    };
-  }, []);
-};
-
-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);
-
-  const closeFlash = () => {
-    if (ref.current) {
-      setFlashHeight(ref.current.getBoundingClientRect().height);
-    }
-
-    setClosed(true);
-
-    setTimeout(() => {
-      id && removeFlash(id);
-    }, 100);
-  };
-
-  useEffect(() => setTriggerEntryAnimation(true), []);
-  useAutoHide(type, closeFlash);
-
-  const animateEntry = triggerEntryAnimation && !closed;
-
-  let style;
-
-  if (flashHeight && !closed) {
-    style = { height: `${flashHeight}px` };
-  } else if (closed) {
-    style = { height: 0, marginTop: 0, zIndex: -1 };
-  } else {
-    style = {};
-  }
-
-  const safeContent = DOMPurify.sanitize(content, {
-    ALLOWED_TAGS: ["a"],
-    ALLOWED_ATTR: ["href", "data-method", "rel"],
-  });
-
-  const withIcons = {
-    notice: "icon-gui-ably-badge",
-    success: "icon-gui-tick",
-    error: "icon-gui-warning",
-    alert: "icon-gui-warning",
-  };
-
-  const iconColor = {
-    notice: "text-cool-black",
-    success: "text-cool-black",
-    error: "text-white",
-    alert: "text-white",
-  };
-
-  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"
-          />
-        </button>
-      </div>
-    </div>
-  );
-};
-
-const Flashes = ({ flashes }: FlashesProps) => {
-  const [flashesWithIds, setFlashesWithIds] = useState<FlashProps[]>([]);
-
-  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,
-        })),
-      ];
-    });
-  }, [flashes]);
-
-  return (
-    <div className="ui-flash" data-id={FLASH_DATA_ID}>
-      {flashesWithIds
-        .filter((item) => !item.removed)
-        .map((flash) => (
-          <Flash key={flash.id} {...flash} removeFlash={removeFlash} />
-        ))}
-    </div>
-  );
-};
-
-const BackendFlashes = ({ flashes }: BackendFlashesProps) => {
-  useEffect(() => {
-    const transformedFlashes =
-      flashes.map((flash) => {
-        const [type, content] = flash;
-        return { type, content };
-      }) || [];
-
-    if (transformedFlashes.length > 0) {
-      const store = getRemoteDataStore();
-
-      store.dispatch({
-        type: "flash/push",
-        payload: transformedFlashes,
-      });
-    }
-  }, []);
-
-  const WrappedFlashes = ConnectStateWrapper(Flashes, {
-    flashes: selectFlashes,
-  });
-
-  return <WrappedFlashes />;
-};
-
-export { reducerFlashes, FLASH_DATA_ID, Flashes };
-export default BackendFlashes;

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

@@ -1,26 +0,0 @@
-import Footer from "../Footer";
-
-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 +0,0 @@
-@layer components {
-  .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-link {
-    @apply text-gui-default hover:text-gui-hover text-menu3 font-sans font-medium;
-  }
-
-  .ui-footer-compliance-text {
-    font-size: 12px;
-  }
-
-  .ui-footer-tick-icon {
-    min-width: 1.5rem;
-  }
-
-  @media (max-width: 1040px) {
-    .ui-footer-bottom-links {
-      @apply pb-40;
-    }
-  }
-
-  @media screen {
-    .ui-footer-glassdoor {
-      display: none;
-    }
-  }
-}