DX-1128: docs — localise design system off @ably/ui (combined view for review/demo)

.eslintignore

@@ -0,0 +1 @@
+src/components/Icon/glyphs/

.prettierignore

@@ -5,4 +5,10 @@ src/pages/**/*.md
 examples/**/README.md
 
 # Fixture files should not be formatted by Prettier
-data/onPostBuild/__fixtures__/*.mdx
+data/onPostBuild/__fixtures__/*.mdx
+
+# Vendored @ably/ui design tokens, reset and component CSS (DX-1128) - do not reformat
+src/styles/ui/
+
+# Vendored @ably/ui icon glyphs (DX-1128) - do not reformat
+src/components/Icon/glyphs/

package.json

@@ -45,6 +45,7 @@
     "@codesandbox/sandpack-react": "^2.20.0",
     "@codesandbox/sandpack-themes": "^2.0.21",
     "@gfx/zopfli": "^1.0.15",
+    "@heroicons/react": "^2.2.0",
     "@mdx-js/react": "^2.3.0",
     "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
@@ -58,7 +59,9 @@
     "@types/prop-types": "^15.7.4",
     "cheerio": "^1.0.0-rc.10",
     "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
     "dompurify": "^3.4.0",
+    "es-toolkit": "^1.44.0",
     "fast-glob": "^3.3.3",
     "front-matter": "^4.0.2",
     "fs-extra": "^11.3.4",
@@ -81,6 +84,8 @@
     "gatsby-transformer-remark": "6.16.0",
     "gatsby-transformer-sharp": "5.16.0",
     "gatsby-transformer-yaml": "5.16.0",
+    "highlight.js": "^11.11.1",
+    "highlightjs-curl": "^1.3.0",
     "htmr": "^1.0.2",
     "js-yaml": "^4.1.1",
     "lodash": "^4.18.1",
@@ -96,6 +101,8 @@
     "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",
     "util": "^0.12.4"

setupTests.js

@@ -11,7 +11,7 @@ window.ResizeObserver = ResizeObserver;
 
 Element.prototype.scrollIntoView = jest.fn();
 
-jest.mock('@ably/ui/core/utils/syntax-highlighter', () => ({
+jest.mock('src/utilities/syntax-highlighter', () => ({
   highlightSnippet: jest.fn,
   LINE_HIGHLIGHT_CLASSES: {
     addition: 'code-line-addition',
@@ -23,12 +23,12 @@ jest.mock('@ably/ui/core/utils/syntax-highlighter', () => ({
   splitHtmlLines: (html) => html.split('\n'),
 }));
 
-jest.mock('@ably/ui/core/Code', () => ({
+jest.mock('src/components/ui/Code', () => ({
   __esModule: true,
   default: () => null,
 }));
 
-jest.mock('@ably/ui/core/utils/syntax-highlighter-registry', () => ({
+jest.mock('src/utilities/syntax-highlighter-registry', () => ({
   __esModule: true,
   default: [],
 }));

src/components/ButtonWithTooltip/ButtonWithTooltip.tsx

@@ -1,5 +1,5 @@
 import React, { HTMLAttributes, MouseEvent, useState, useRef } from 'react';
-import cn from '@ably/ui/core/utils/cn';
+import cn from 'src/utilities/cn';
 import { button, tooltipClass, isVisible, notificationClass } from './ButtonWithTooltip.module.css';
 
 interface Props extends HTMLAttributes<HTMLButtonElement> {

src/components/CodeEditor/Chrome.tsx

@@ -1,4 +1,4 @@
-import cn from '@ably/ui/core/utils/cn';
+import cn from 'src/utilities/cn';
 import React from 'react';
 import { SmallMenuLabel } from 'src/components/Menu/Label';
 import APIKeyIndicator from 'src/components/blocks/software/Code/ApiKeyIndicator';

src/components/Examples/ExamplesCheckbox.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import Icon from '@ably/ui/core/Icon';
-import cn from '@ably/ui/core/utils/cn';
+import Icon from 'src/components/Icon';
+import cn from 'src/utilities/cn';
 
 const ExamplesCheckbox = ({
   label,

src/components/Examples/ExamplesContent.tsx

@@ -6,7 +6,7 @@ import { ImageProps } from '../Image';
 import { examples, products } from '../../data/examples/';
 import { filterSearchExamples } from './filter-search-examples';
 import ExamplesNoResults from './ExamplesNoResults';
-import { ProductName } from '@ably/ui/core/ProductTile/data';
+import { ProductName } from 'src/components/ui/ProductTile/data';
 import { useLocation } from '@reach/router';
 
 export type SelectedFilters = { products: ProductName[]; useCases: string[] };

src/components/Examples/ExamplesFilter.tsx

@@ -1,16 +1,16 @@
 import React, { ChangeEvent, Dispatch, SetStateAction, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import ReactDOM from 'react-dom';
-import Icon from '@ably/ui/core/Icon';
+import Icon from 'src/components/Icon';
 import { Input } from 'src/components/ui/Input';
 import { products } from '../../data/examples';
-import Button from '@ably/ui/core/Button';
-import cn from '@ably/ui/core/utils/cn';
-import Badge from '@ably/ui/core/Badge';
+import Button from 'src/components/ui/Button';
+import cn from 'src/utilities/cn';
+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 { ProductName } from 'src/components/ui/ProductTile/data';
 
 const ExamplesFilter = ({
   selected,

src/components/Examples/ExamplesGrid.tsx

@@ -1,9 +1,9 @@
 import React, { useCallback } from 'react';
-import Badge from '@ably/ui/core/Badge';
-import Icon from '@ably/ui/core/Icon';
-import { IconName } from '@ably/ui/core/Icon/types';
-import { ProductName, products as dataProducts } from '@ably/ui/core/ProductTile/data';
-import cn from '@ably/ui/core/utils/cn';
+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 'src/components/ui/ProductTile/data';
+import cn from 'src/utilities/cn';
 import { Image, ImageProps } from '../Image';
 import { DEFAULT_EXAMPLE_LANGUAGES } from '../../data/examples/';
 import { Example } from '../../data/examples/types';

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/Examples/ExamplesRenderer.tsx

@@ -5,10 +5,10 @@ import { CodeEditor } from 'src/components/CodeEditor';
 import { LanguageKey } from 'src/data/languages/types';
 import { ExampleFiles, ExampleWithContent } from 'src/data/examples/types';
 import { updateAblyConnectionKey } from 'src/utilities/update-ably-connection-keys';
-import { IconName } from '@ably/ui/core/Icon/types';
-import SegmentedControl from '@ably/ui/core/SegmentedControl';
+import { IconName } from 'src/components/Icon/types';
+import SegmentedControl from 'src/components/ui/SegmentedControl';
 import dotGrid from './images/dot-grid.svg';
-import cn from '@ably/ui/core/utils/cn';
+import cn from 'src/utilities/cn';
 import { getRandomChannelName } from '../../utilities/get-random-channel-name';
 // Shared tsconfig for proper ES2020+ transpilation in Sandpack
 import examplesTsConfig from '../../../examples/tsconfig.json';

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/Homepage/PlatformAndProducts.tsx

@@ -1,5 +1,5 @@
-import ProductTile from '@ably/ui/core/ProductTile';
-import cn from '@ably/ui/core/utils/cn';
+import ProductTile from 'src/components/ui/ProductTile';
+import cn from 'src/utilities/cn';
 import { Image, ImageProps, getImageFromList } from 'src/components/Image';
 import type { PlatformProductsSectionData, PlatformCardData } from 'src/data/content/types';
 import { navigate } from '../Link';