refactor(docs): localise presentational components (Badge/Button/LinkButton/FeaturedLink/Status) (DX-1128)

Vendor Badge, Button, LinkButton, FeaturedLink and Status locally, off
@ably/ui/core. Their icon props (leftIcon/rightIcon, iconBefore/iconAfter) now
take a ReactNode rather than an icon name string: callers pass a Heroicon
component or an Ably glyph <Icon> directly, and the component sizes it via a
slot. This drops the name->component indirection so Heroicons tree-shake, and
matches the glyphs-only local Icon. Also fixes a 'noopenner' rel typo in
FeaturedLink and points Footer's (feature-flagged) feedback icons at Heroicons.

Author: jamiehenson

package.json

@@ -98,6 +98,7 @@
     "react-medium-image-zoom": "^5.4.1",
     "react-select": "^5.7.0",
     "remark-gfm": "^1.0.0",
+    "swr": "^2.4.0",
     "tailwind-merge": "^2.5.5",
     "typescript": "^4.6.3",
     "use-keyboard-shortcut": "^1.1.6",

src/components/Examples/ExamplesFilter.tsx

@@ -2,15 +2,15 @@ import React, { ChangeEvent, Dispatch, SetStateAction, useCallback, useEffect, u
 import ReactDOM from 'react-dom';
 import { Input } from 'src/components/ui/Input';
 import { products } from '../../data/examples';
-import Button from '@ably/ui/core/Button';
+import Button from 'src/components/ui/Button';
 import cn from 'src/utilities/cn';
-import Badge from '@ably/ui/core/Badge';
+import Badge from 'src/components/ui/Badge';
 import ExamplesCheckbox from './ExamplesCheckbox';
 import { SelectedFilters } from './ExamplesContent';
 import { useOnClickOutside } from 'src/hooks/use-on-click-outside';
 import { navigate } from 'gatsby';
 import { ProductName } from '@ably/ui/core/ProductTile/data';
-import { MagnifyingGlassIcon, XMarkIcon } from '@heroicons/react/24/outline';
+import { AdjustmentsHorizontalIcon, MagnifyingGlassIcon, XMarkIcon } from '@heroicons/react/24/outline';
 
 const ExamplesFilter = ({
   selected,
@@ -130,7 +130,7 @@ const ExamplesFilter = ({
       <Button
         className="flex sm:hidden mt-4 w-full"
         variant="secondary"
-        leftIcon="icon-gui-adjustments-horizontal-outline"
+        leftIcon={<AdjustmentsHorizontalIcon aria-hidden />}
         onClick={() => setExpandFilterMenu(true)}
       >
         Filter

src/components/Examples/ExamplesGrid.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback } from 'react';
-import Badge from '@ably/ui/core/Badge';
+import Badge from 'src/components/ui/Badge';
 import Icon from 'src/components/Icon';
 import { IconName } from 'src/components/Icon/types';
 import { ProductName, products as dataProducts } from '@ably/ui/core/ProductTile/data';

src/components/Examples/ExamplesNoResults.tsx

@@ -1,4 +1,4 @@
-import Badge from '@ably/ui/core/Badge';
+import Badge from 'src/components/ui/Badge';
 import { Link } from 'gatsby';
 
 const ExamplesNoResults = () => {

src/components/Homepage/Changelog.tsx

@@ -1,8 +1,8 @@
 import { useStaticQuery } from 'gatsby';
 import { graphql } from 'gatsby';
 import { Key } from 'react';
-import Badge from '@ably/ui/core/Badge';
-import FeaturedLink from '@ably/ui/core/FeaturedLink';
+import Badge from 'src/components/ui/Badge';
+import FeaturedLink from 'src/components/ui/FeaturedLink';
 import Link from '../Link';
 
 interface ChangelogFeedItemNode {

src/components/Homepage/ExamplesSection.tsx

@@ -1,7 +1,7 @@
 import type { ExamplesSectionData } from 'src/data/content/types';
 import { getImageFromList, ImageProps } from 'src/components/Image';
 import { Image } from 'src/components/Image';
-import FeaturedLink from '@ably/ui/core/FeaturedLink';
+import FeaturedLink from 'src/components/ui/FeaturedLink';
 
 export const ExamplesSection = ({ section, images }: { section: ExamplesSectionData; images: ImageProps[] }) => {
   const imageUrl = getImageFromList(images, section.image);

src/components/Icon/types.ts

@@ -3,3 +3,5 @@ import { glyphs } from './glyphs';
 // Static glyph names are checked against the vendored registry; `icon-tech-${language}`
 // stays open for the dynamically-built language icons.
 export type IconName = keyof typeof glyphs | `icon-tech-${string}`;
+
+export type IconSize = `${number}px` | `${number}em` | `${number}rem` | `calc(${string})`;

src/components/Layout/Footer.tsx

@@ -2,11 +2,11 @@ import React, { ComponentType, SVGProps, useEffect, useMemo, useState } from 're
 import { useLocation } from '@reach/router';
 import Icon from 'src/components/Icon';
 import { IconName } from 'src/components/Icon/types';
-import Status, { StatusUrl } from '@ably/ui/core/Status';
+import Status, { StatusUrl } from 'src/components/ui/Status';
 import cn from 'src/utilities/cn';
 import type { PageContextType } from './Layout';
 import { useLayoutContext } from 'src/contexts/layout-context';
-import Button from '@ably/ui/core/Button';
+import Button from 'src/components/ui/Button';
 import { HandRaisedIcon, HandThumbDownIcon, HandThumbUpIcon } from '@heroicons/react/24/outline';
 import {
   HandRaisedIcon as HandRaisedSolidIcon,

src/components/Layout/Header.test.tsx

@@ -23,7 +23,7 @@ jest.mock('src/components/Icon', () => {
   return MockIcon;
 });
 
-jest.mock('@ably/ui/core/LinkButton', () => {
+jest.mock('src/components/ui/LinkButton', () => {
   const MockButton: React.FC<{ children: React.ReactNode }> = ({ children }) => <button>{children}</button>;
   MockButton.displayName = 'MockButton';
   return MockButton;

src/components/Layout/Header.tsx

@@ -7,7 +7,7 @@ import { throttle } from 'es-toolkit/compat';
 import cn from 'src/utilities/cn';
 import Icon from 'src/components/Icon';
 import TabMenu from '@ably/ui/core/TabMenu';
-import Logo from '@ably/ui/core/images/logo/ably-logo.svg';
+import Logo from 'src/images/ably-logo.svg';
 import { track } from '@ably/ui/core/insights';
 import { componentMaxHeight, HEADER_BOTTOM_MARGIN, HEADER_HEIGHT } from 'src/utilities/heights';
 import LeftSidebar from './LeftSidebar';