@ably/ui 14.0.5 → 14.1.0-dev.30520a8

package/src/core/SignOutLink.tsx

@@ -1,51 +0,0 @@
-import React, { MouseEventHandler, ReactNode, useRef } from "react";
-import { AbsUrl } from "./Meganav";
-
-type SignOutLinkProps = {
-  token: string;
-  href: string;
-  text: string;
-  children: ({
-    href,
-    text,
-    onClick,
-  }: {
-    href: string;
-    text: string;
-    onClick: MouseEventHandler<HTMLAnchorElement>;
-  }) => ReactNode;
-  absUrl: AbsUrl;
-};
-
-const SignOutLink = ({
-  token,
-  href,
-  text,
-  children,
-  absUrl,
-}: SignOutLinkProps) => {
-  const formRef = useRef<HTMLFormElement>(null);
-
-  const onClick = (e) => {
-    formRef.current?.submit();
-    e.preventDefault();
-  };
-
-  return (
-    <>
-      <form
-        ref={formRef}
-        method="post"
-        action={absUrl(href)}
-        className="hidden"
-      >
-        <input name="_method" value="delete" type="hidden" />
-        <input name="authenticity_token" value={token} type="hidden" />
-      </form>
-
-      {children({ href, text, onClick })}
-    </>
-  );
-};
-
-export default SignOutLink;

package/src/core/Slider/Slider.stories.tsx

@@ -1,98 +0,0 @@
-import React from "react";
-import Slider from "../Slider";
-import Icon from "../Icon";
-
-const Slide = ({ name }: { name: string }) => (
-  <div className="relative ">
-    <div className="relative w-full sm:w-[560px] md:w-[784px] lg:w-[960px] bg-white overflow-hidden  flex gap-40 rounded-3xl shadow-container-subtle">
-      <div className="w-full md:w-2/3 flex flex-col gap-24 pr-40 md:pr-0 pt-40 pl-40 pb-40 sm:pb-[120px] md:pb-40">
-        <h2 className="ui-text-h2 font-medium text-neutral-1000">
-          “Ably seamlessly absorbs sudden bursts in load during unexpected
-          client events. The integration was easy and we were live in under a
-          month.”
-        </h2>
-        <div className="flex flex-col sm:flex-row gap-32">
-          <div className="flex gap-8">
-            <div className="static self-center sm:absolute sm:-bottom-48 sm:-right-[56px] rounded-full bg-gradient-to-l from-neutral-200 to-50% to-neutral-500 w-[48px] h-[48px] sm:w-[201px] sm:h-[201px] md:w-[257px] md:h-[257px] lg:w-[280px] lg:h-[280px] overflow-hidden flex items-center justify-center sm:border-[16px] border-neutral-200">
-              <img src="https://picsum.photos/id/64/200" alt="test-image" />
-            </div>
-            <div className="sm:py-16">
-              <p className="ui-text-p1 text-neutral-1300">{name}</p>
-              <p className="ui-text-p3 text-neutral-800">
-                Co-Founder & Technical Leader
-              </p>
-            </div>
-          </div>
-
-          <div className="w-[80px] h-1 sm:w-1 sm:h-full bg-neutral-500"></div>
-          <div className="flex items-center gap-4">
-            <img src="https://picsum.photos/id/145/40" alt="test-image" />
-            <p className="ui-text-h4 font-bold">Mentimeter</p>
-          </div>
-        </div>
-        <a href="/case-study" className="ui-btn self-start">
-          Read case study
-          <Icon
-            name="icon-gui-arrow-right"
-            size="1.25rem"
-            additionalCSS="ml-4"
-          />
-        </a>
-      </div>
-    </div>
-
-    <div className="absolute h-256 -z-10 -bottom-48 -left-36 w-1/5 rounded-full blur-xl opacity-50 transform -rotate-45 bg-gradient-to-bl from-bg-glow-green to-bg-glow-teal"></div>
-    <div className="absolute h-256 -z-10 -top-48 -right-48 w-3/5 rounded-full blur-xl opacity-50 transform rotate-12 bg-gradient-to-br from-bg-glow-green to-bg-glow-teal"></div>
-  </div>
-);
-
-const slides = [
-  <Slide key="1" name={"Johan Bengtsson"} />,
-  <Slide key="2" name={"Mirko Bergman"} />,
-  <Slide key="3" name={"Stefania Lombardo"} />,
-  <Slide key="4" name={"Aleksandar Kostadinov"} />,
-];
-
-export default {
-  title: "Components/Slider",
-  component: Slider,
-  args: {
-    children: slides,
-    options: {
-      interval: 10000,
-      intervalIndicator: true,
-      controlPosition: "floating",
-    },
-  },
-};
-
-export const FloatingControlPosition = {
-  args: {
-    children: slides,
-    options: {
-      interval: 10000,
-      intervalIndicator: true,
-      controlPosition: "floating",
-    },
-  },
-};
-
-export const InlineControlPosition = {
-  args: {
-    options: {
-      interval: 10000,
-      intervalIndicator: true,
-      controlPosition: "inline",
-    },
-  },
-};
-
-export const WithoutIntervalIndicator = {
-  args: {
-    options: {
-      interval: 10000,
-      intervalIndicator: false,
-      controlPosition: "floating",
-    },
-  },
-};

package/src/core/Slider/component.css

@@ -1,40 +0,0 @@
-@layer components {
-  .ui-slider-marker {
-    font-size: 0.5rem;
-    top: -1px;
-
-    @apply leading-none px-4 relative;
-  }
-
-  @keyframes fillAnimation {
-    0% {
-      width: 0%;
-    }
-    100% {
-      width: 100%;
-    }
-  }
-
-  .ui-icon-cta {
-    @apply cursor-pointer overflow-hidden;
-    @apply rounded border-2 border-mid-grey hover:border-active-orange;
-    transition: all 0.4s;
-  }
-
-  @screen sm {
-    .ui-icon-cta-left:hover .ui-icon-cta-holder {
-      transform: translateX(-100%);
-    }
-    .ui-icon-cta-right .ui-icon-cta-holder {
-      transform: translateX(-100%);
-    }
-    .ui-icon-cta-right:hover .ui-icon-cta-holder {
-      transform: translateX(0%);
-    }
-  }
-
-  .ui-icon-cta-holder {
-    @apply w-full h-full;
-    transition: all 0.4s;
-  }
-}

package/src/core/Slider/component.js

@@ -1,105 +0,0 @@
-import throttle from "lodash.throttle";
-
-import { queryId, queryIdAll } from "../dom-query";
-
-const mdBreakpoint = () => window.matchMedia("(min-width: 48rem)").matches;
-const DRAG_BUFFER = 20;
-
-const init = (slidesContainer) => {
-  const transformContainer = queryId("slider-strip", slidesContainer);
-  const slides = Array.from(queryIdAll("slider-slide", slidesContainer));
-  const slideLeftChevron = queryId("slider-previous", slidesContainer);
-  const slideRightChevron = queryId("slider-next", slidesContainer);
-  const slideMarkers = Array.from(queryIdAll("slider-marker", slidesContainer));
-  const sliderControls = queryId("slider-controls", slidesContainer);
-
-  sliderControls.classList.replace("hidden", "flex");
-  const slidesLength = slides.length;
-
-  const slidesWidth = slidesContainer.getBoundingClientRect().width;
-  const { width: slideWidth, left: slideLeftDistance } =
-    slides[0].getBoundingClientRect();
-  const { left: slideLeftDistanceSecond } = slides[1].getBoundingClientRect();
-  const slideGap = slideLeftDistanceSecond - slideLeftDistance - slideWidth;
-  const adjustment = (slidesWidth - slideWidth) / 2;
-
-  let currentIndex = 0;
-  let touchStartX = 0;
-
-  const calculateTransform = (index) =>
-    index * -slideWidth + adjustment + index * -slideGap;
-
-  const updateSlide = (index) =>
-    (transformContainer.style.transform = `translateX(${calculateTransform(
-      index,
-    )}px)`);
-
-  const updateMarkers = (index) => {
-    slideMarkers.forEach((marker) =>
-      marker.classList.remove("text-active-orange"),
-    );
-    slideMarkers[index].classList.remove("text-cool-black");
-    slideMarkers[index].classList.add("text-active-orange");
-  };
-
-  const slideLeft = () => {
-    currentIndex = currentIndex - 1 <= 0 ? 0 : currentIndex - 1;
-    updateSlide(currentIndex);
-    updateMarkers(currentIndex);
-  };
-
-  const slideRight = () => {
-    currentIndex =
-      currentIndex + 1 >= slidesLength ? currentIndex : currentIndex + 1;
-    updateSlide(currentIndex);
-    updateMarkers(currentIndex);
-  };
-
-  updateSlide(0);
-  updateMarkers(0);
-
-  slideLeftChevron.addEventListener("click", slideLeft);
-
-  transformContainer.addEventListener("touchstart", (e) => {
-    touchStartX = e.touches[0]?.clientX;
-  });
-
-  transformContainer.addEventListener("touchend", (e) => {
-    const distance = e.changedTouches[0]?.clientX - touchStartX;
-
-    // Prevent sliding on clicks
-    if (Math.abs(distance) < DRAG_BUFFER) return;
-
-    const direction = distance > 0 ? slideLeft : slideRight;
-    direction();
-  });
-
-  slideRightChevron.addEventListener("click", slideRight);
-
-  return () => {
-    transformContainer.style.transform = null;
-    sliderControls.classList.replace("flex", "hidden");
-  };
-};
-
-const Slider = ({ container, mqEnableThreshold }) => {
-  if (!container) return;
-
-  const breakpointCheck = mqEnableThreshold || (() => !mdBreakpoint());
-
-  let unmount = () => {};
-  if (breakpointCheck()) unmount = init(container);
-
-  window.addEventListener(
-    "resize",
-    throttle(() => {
-      if (breakpointCheck()) {
-        unmount = init(container);
-      } else {
-        unmount();
-      }
-    }, 100),
-  );
-};
-
-export default Slider;

package/src/core/Slider.tsx

@@ -1,224 +0,0 @@
-import React, { useState, useEffect, useRef, ReactNode } from "react";
-import Icon from "./Icon";
-
-interface SliderProps {
-  children: ReactNode[];
-  options?: {
-    interval?: number;
-    controlPosition?: "inline" | "floating";
-    intervalIndicator?: boolean;
-  };
-}
-
-interface SliderIndicatorProps {
-  numSlides: number;
-  activeIndex: number;
-  interval: number;
-  intervalIndicator?: boolean;
-  isInline?: boolean;
-}
-
-const SLIDE_TRANSITION_LENGTH = 300;
-
-const SlideIndicator = ({
-  numSlides,
-  activeIndex,
-  interval,
-  intervalIndicator,
-  isInline,
-}: SliderIndicatorProps) => {
-  return (
-    <ul
-      className={`flex gap-4 left-1/2 ${
-        isInline ? "bottom-0" : "absolute bottom-0 transform -translate-x-1/2"
-      }`}
-    >
-      {Array.from({ length: numSlides }, (_, i) =>
-        intervalIndicator ? (
-          <li
-            key={i}
-            className="relative w-40 h-4 mx-1 rounded-full bg-neutral-500"
-          >
-            {i === activeIndex && (
-              <span
-                className="absolute inset-0 rounded-full bg-active-orange"
-                style={{
-                  animation: `fillAnimation ${interval}ms linear`,
-                }}
-              ></span>
-            )}
-          </li>
-        ) : (
-          <li key={i}>
-            <span
-              className={`ui-slider-marker ${
-                i === activeIndex ? "text-active-orange" : "text-cool-black"
-              }`}
-              data-id="slider-marker"
-            >
-              &#x2b24;
-            </span>
-          </li>
-        ),
-      )}
-    </ul>
-  );
-};
-
-const setupSlides = (children: ReactNode[], activeIndex: number) => [
-  children[activeIndex === 0 ? children.length - 1 : activeIndex - 1],
-  children[activeIndex],
-  children[activeIndex === children.length - 1 ? 0 : activeIndex + 1],
-];
-
-const Slider = ({ children, options }: SliderProps) => {
-  const [activeIndex, setActiveIndex] = useState(0);
-  const [touchStartX, setTouchStartX] = useState(0);
-  const [touchEndX, setTouchEndX] = useState(0);
-  const [slides, setSlides] = useState<ReactNode[]>(
-    setupSlides(children, activeIndex),
-  );
-  const [translationCoefficient, setTranslationCoefficient] = useState(0);
-  const timerRef = useRef<NodeJS.Timeout | null>(null);
-  const [slideLock, setSlideLock] = useState(false);
-
-  const isInline = options?.controlPosition === "inline";
-
-  const next = () => {
-    if (!slideLock) {
-      setActiveIndex((prevIndex) => (prevIndex + 1) % children.length);
-      setTranslationCoefficient(1);
-      resetInterval();
-      setSlideLock(true);
-    }
-  };
-
-  const prev = () => {
-    if (!slideLock) {
-      setActiveIndex((prevIndex) =>
-        prevIndex > 0 ? prevIndex - 1 : children.length - 1,
-      );
-      setTranslationCoefficient(-1);
-      resetInterval();
-      setSlideLock(true);
-    }
-  };
-
-  const resetInterval = () => {
-    if (timerRef.current) clearInterval(timerRef.current);
-    timerRef.current = setInterval(next, options?.interval ?? 10000);
-  };
-
-  const handleTouchStart = (e) => {
-    setTouchStartX(e.touches[0].clientX);
-  };
-
-  const handleTouchMove = (e) => {
-    setTouchEndX(e.touches[0].clientX);
-  };
-
-  const handleTouchEnd = () => {
-    if (touchStartX - touchEndX > 50) {
-      next();
-    }
-    if (touchStartX - touchEndX < -50) {
-      prev();
-    }
-  };
-
-  useEffect(() => {
-    resetInterval();
-    return () => {
-      if (timerRef.current) clearInterval(timerRef.current);
-    };
-  }, [children.length, options?.interval]);
-
-  useEffect(() => {
-    setTimeout(() => {
-      setSlides(setupSlides(children, activeIndex));
-      setTranslationCoefficient(0);
-      setSlideLock(false);
-    }, SLIDE_TRANSITION_LENGTH);
-  }, [activeIndex]);
-
-  return (
-    <div
-      className="relative"
-      onTouchStart={handleTouchStart}
-      onTouchMove={handleTouchMove}
-      onTouchEnd={handleTouchEnd}
-    >
-      <div className="overflow-y-visible overflow-x-clip w-full py-40">
-        <div
-          className={`flex items-center ${
-            translationCoefficient !== 0
-              ? `transition-transform ease-in-out duration-${SLIDE_TRANSITION_LENGTH}`
-              : ""
-          } `}
-          style={{
-            transform: `translateX(-${(translationCoefficient + 1) * 100}%)`,
-          }}
-        >
-          {slides.map((child, index) => (
-            <div
-              key={index}
-              className="w-full flex-shrink-0 flex justify-center sm:px-60"
-            >
-              {child}
-            </div>
-          ))}
-        </div>
-      </div>
-
-      <div
-        className={`flex items-center pointer-events-none ${
-          isInline
-            ? "ui-standard-container justify-center gap-24 -mt-16"
-            : "sm:flex sm:absolute inset-0 justify-between"
-        }`}
-      >
-        <button
-          className={`${
-            isInline ? "w-32 h-32" : "hidden sm:flex w-48 h-48"
-          } pointer-events-auto rounded border border-mid-grey hover:border-active-orange flex justify-center items-center ui-icon-cta ui-icon-cta-left`}
-          onClick={prev}
-        >
-          <div className="ui-icon-cta-holder flex w-48">
-            <div className="w-full h-full flex-shrink-0 flex items-center justify-center">
-              <Icon name="icon-gui-arrow-left" size="1.5rem" />
-            </div>
-            <div className="w-full h-full flex-shrink-0 flex items-center justify-center">
-              <Icon name="icon-gui-arrow-left" size="1.5rem" />
-            </div>
-          </div>
-        </button>
-
-        <SlideIndicator
-          numSlides={children.length}
-          activeIndex={activeIndex}
-          interval={options?.interval ?? 10000}
-          intervalIndicator={options?.intervalIndicator}
-          isInline={isInline}
-        />
-
-        <button
-          className={`${
-            isInline ? "w-32 h-32" : "hidden sm:flex w-48 h-48"
-          } pointer-events-auto rounded border border-mid-grey hover:border-active-orange justify-center items-center ui-icon-cta ui-icon-cta-right`}
-          onClick={next}
-        >
-          <div className="ui-icon-cta-holder flex w-48">
-            <div className="w-full h-full flex-shrink-0 flex items-center justify-center">
-              <Icon name="icon-gui-arrow-right" size="1.5rem" />
-            </div>
-            <div className="w-full h-full flex-shrink-0 flex items-center justify-center">
-              <Icon name="icon-gui-arrow-right" size="1.5rem" />
-            </div>
-          </div>
-        </button>
-      </div>
-    </div>
-  );
-};
-
-export default Slider;

package/src/core/Table/Table.stories.tsx

@@ -1,12 +0,0 @@
-import { PricingPageTable } from "./data";
-
-export default {
-  title: "Components/Table",
-  component: PricingPageTable,
-  tags: ["autodocs"],
-  parameters: {
-    layout: "fullscreen",
-  },
-};
-
-export const PricingPage = {};

package/src/core/Table/Table.tsx

@@ -1,58 +0,0 @@
-import React, {
-  PropsWithChildren,
-  ReactElement,
-  TableHTMLAttributes,
-  cloneElement,
-} from "react";
-
-type TableProps = {
-  id?: string;
-};
-
-export const Table = ({
-  id,
-  children,
-  ...rest
-}: PropsWithChildren<TableProps & TableHTMLAttributes<HTMLTableElement>>) => (
-  <table
-    id={id}
-    {...rest}
-    className={`ui-standard-container mb-4 sm:table-fixed ${
-      rest?.className ?? ""
-    }`}
-  >
-    {children}
-  </table>
-);
-
-export const TableBody = ({
-  children,
-  ...rest
-}: PropsWithChildren<TableHTMLAttributes<HTMLTableSectionElement>>) => (
-  <tbody {...rest}>{children}</tbody>
-);
-
-export const TableHeader = ({
-  children,
-  ...rest
-}: PropsWithChildren<TableHTMLAttributes<HTMLTableSectionElement>>) => (
-  <thead
-    {...rest}
-    className={`sticky bg-white z-10 top-0 ${rest?.className ?? ""}`}
-  >
-    {cloneElement(children as ReactElement, { isHeader: true })}
-  </thead>
-);
-
-export const TableRowHeader = ({
-  children,
-  ...rest
-}: PropsWithChildren<TableHTMLAttributes<HTMLTableRowElement>>) => (
-  <tr
-    className={`-ml-24 mt-8 sm:ml-0 sm:mt-0 sm:sticky z-10 ${
-      rest?.className ?? ""
-    }`}
-  >
-    {cloneElement(children as ReactElement, { isRowHeader: true })}
-  </tr>
-);

package/src/core/Table/TableCell.tsx

@@ -1,71 +0,0 @@
-import React, { PropsWithChildren } from "react";
-
-type TableCellProps = {
-  isRowHeader?: boolean;
-} & React.TdHTMLAttributes<HTMLTableCellElement>;
-
-const LabelCell = ({
-  children,
-  ...rest
-}: PropsWithChildren<React.TdHTMLAttributes<HTMLTableCellElement>>) => {
-  const classes = `
-    ui-text-p1 font-bold pt-24 pb-8 border-light-grey sm:p-24 sm:relative sm:top-2 flex sm:table-cell ${
-      rest?.className ?? ""
-    }
-  `;
-
-  return (
-    <td {...rest} className={classes}>
-      {children}
-    </td>
-  );
-};
-
-const TableCell = ({
-  children,
-  isRowHeader,
-  ...rest
-}: PropsWithChildren<TableCellProps>) => (
-  <td
-    {...rest}
-    className={`
-        border-light-grey sm:p-24 leading-none flex sm:table-cell
-        ${
-          isRowHeader
-            ? "rounded-l-none rounded-r sm:rounded-lg py-20 px-24"
-            : "py-6"
-        }
-        ${rest?.className ?? ""}
-      `}
-  >
-    {children}
-  </td>
-);
-
-const HeaderCell = ({
-  children,
-  ...rest
-}: PropsWithChildren<React.TdHTMLAttributes<HTMLTableCellElement>>) => (
-  <td
-    {...rest}
-    className={`ui-text-h3 px-24 py-24 hidden sm:table-cell ${
-      rest?.className ?? ""
-    }`}
-  >
-    {children}
-  </td>
-);
-
-const CtaCell = ({
-  children,
-  ...rest
-}: PropsWithChildren<React.TdHTMLAttributes<HTMLTableCellElement>>) => (
-  <td
-    {...rest}
-    className={`pt-24 hidden sm:table-cell ${rest?.className ?? ""}`}
-  >
-    {children}
-  </td>
-);
-
-export { TableCell, LabelCell, HeaderCell, CtaCell };

package/src/core/Table/TableRow.tsx

@@ -1,25 +0,0 @@
-import React, { PropsWithChildren } from "react";
-
-const CtaRow = ({ children }: PropsWithChildren) => (
-  <tr>
-    <td className="hidden sm:block"></td>
-    {children}
-  </tr>
-);
-
-type RowProps = {
-  isHeader?: boolean;
-} & React.HTMLAttributes<HTMLTableRowElement>;
-
-const TableRow = ({
-  children,
-  isHeader,
-  ...rest
-}: PropsWithChildren<RowProps>) => (
-  <tr {...rest}>
-    {isHeader && <td className="bg-white" />}
-    {children}
-  </tr>
-);
-
-export { TableRow, CtaRow };