DX-1128: docs local cn + heights utils (drop @ably/ui/core/utils)

package.json

@@ -58,6 +58,7 @@
     "@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",
     "fast-glob": "^3.3.3",
     "front-matter": "^4.0.2",
@@ -96,6 +97,7 @@
     "react-medium-image-zoom": "^5.4.1",
     "react-select": "^5.7.0",
     "remark-gfm": "^1.0.0",
+    "tailwind-merge": "^2.5.5",
     "typescript": "^4.6.3",
     "use-keyboard-shortcut": "^1.1.6",
     "util": "^0.12.4"

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 cn from 'src/utilities/cn';
 
 const ExamplesCheckbox = ({
   label,

src/components/Examples/ExamplesFilter.tsx

@@ -4,7 +4,7 @@ import Icon from '@ably/ui/core/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 cn from 'src/utilities/cn';
 import Badge from '@ably/ui/core/Badge';
 import ExamplesCheckbox from './ExamplesCheckbox';
 import { SelectedFilters } from './ExamplesContent';

src/components/Examples/ExamplesGrid.tsx

@@ -3,7 +3,7 @@ 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 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/ExamplesRenderer.tsx

@@ -8,7 +8,7 @@ import { updateAblyConnectionKey } from 'src/utilities/update-ably-connection-ke
 import { IconName } from '@ably/ui/core/Icon/types';
 import SegmentedControl from '@ably/ui/core/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/PlatformAndProducts.tsx

@@ -1,5 +1,5 @@
 import ProductTile from '@ably/ui/core/ProductTile';
-import cn from '@ably/ui/core/utils/cn';
+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';

src/components/Layout/Breadcrumbs.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { useLayoutContext } from 'src/contexts/layout-context';
 import Link from '../Link';
 import Icon from '@ably/ui/core/Icon';
-import cn from '@ably/ui/core/utils/cn';
+import cn from 'src/utilities/cn';
 import { hierarchicalKey } from './utils/nav';
 
 const linkStyles =

src/components/Layout/CopyForLLM.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useLocation } from '@reach/router';
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
-import cn from '@ably/ui/core/utils/cn';
+import cn from 'src/utilities/cn';
 import Icon from '@ably/ui/core/Icon';
 import { IconName } from '@ably/ui/core/Icon/types';
 import { track } from '@ably/ui/core/insights';

src/components/Layout/Footer.tsx

@@ -3,7 +3,7 @@ import { useLocation } from '@reach/router';
 import Icon from '@ably/ui/core/Icon';
 import { IconName } from '@ably/ui/core/Icon/types';
 import Status, { StatusUrl } from '@ably/ui/core/Status';
-import cn from '@ably/ui/core/utils/cn';
+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';

src/components/Layout/Header.tsx

@@ -4,12 +4,12 @@ import { graphql, useStaticQuery } from 'gatsby';
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
 import * as Tooltip from '@radix-ui/react-tooltip';
 import { throttle } from 'es-toolkit/compat';
-import cn from '@ably/ui/core/utils/cn';
+import cn from 'src/utilities/cn';
 import Icon from '@ably/ui/core/Icon';
 import TabMenu from '@ably/ui/core/TabMenu';
 import Logo from '@ably/ui/core/images/logo/ably-logo.svg';
 import { track } from '@ably/ui/core/insights';
-import { componentMaxHeight, HEADER_BOTTOM_MARGIN, HEADER_HEIGHT } from '@ably/ui/core/utils/heights';
+import { componentMaxHeight, HEADER_BOTTOM_MARGIN, HEADER_HEIGHT } from 'src/utilities/heights';
 import { IconName } from '@ably/ui/core/Icon/types';
 import LeftSidebar from './LeftSidebar';
 import ProductBar from './ProductBar';

src/components/Layout/LanguageSelector.tsx

@@ -3,8 +3,8 @@ import { useLocation } from '@reach/router';
 import Badge from '@ably/ui/core/Badge';
 import Icon from '@ably/ui/core/Icon';
 import { IconName } from '@ably/ui/core/Icon/types';
-import cn from '@ably/ui/core/utils/cn';
-import { componentMaxHeight, HEADER_BOTTOM_MARGIN, HEADER_HEIGHT } from '@ably/ui/core/utils/heights';
+import cn from 'src/utilities/cn';
+import { componentMaxHeight, HEADER_BOTTOM_MARGIN, HEADER_HEIGHT } from 'src/utilities/heights';
 import { track } from '@ably/ui/core/insights';
 import { languageData, languageInfo } from 'src/data/languages';
 import { LanguageKey } from 'src/data/languages/types';

src/components/Layout/Layout.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { PageProps } from 'gatsby';
 import { useLocation } from '@reach/router';
-import cn from '@ably/ui/core/utils/cn';
+import cn from 'src/utilities/cn';
 
 import '../../styles/global.css';
 import { Container } from 'src/components/Container';

src/components/Layout/LeftSidebar.tsx

@@ -2,8 +2,8 @@ import { useEffect, useMemo, useRef, useState } from 'react';
 import { graphql, useStaticQuery } from 'gatsby';
 import { useLocation } from '@reach/router';
 import * as Accordion from '@radix-ui/react-accordion';
-import cn from '@ably/ui/core/utils/cn';
-import { HEADER_HEIGHT } from '@ably/ui/core/utils/heights';
+import cn from 'src/utilities/cn';
+import { HEADER_HEIGHT } from 'src/utilities/heights';
 import Icon from '@ably/ui/core/Icon';
 
 import { productData } from 'src/data';

src/components/Layout/MDXWrapper.tsx

@@ -11,7 +11,7 @@ import React, {
 import { navigate, PageProps } from 'gatsby';
 import CodeSnippet from '@ably/ui/core/CodeSnippet';
 import type { CodeSnippetProps, SDKType } from '@ably/ui/core/CodeSnippet';
-import cn from '@ably/ui/core/utils/cn';
+import cn from 'src/utilities/cn';
 
 import { getRandomChannelName } from '../../utilities/get-random-channel-name';
 

src/components/Layout/ProductBar.tsx

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import cn from '@ably/ui/core/utils/cn';
+import cn from 'src/utilities/cn';
 import Icon from '@ably/ui/core/Icon';
 import { IconName } from '@ably/ui/core/Icon/types';
 

src/components/Layout/RightSidebar.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useMemo, useRef, useState, useCallback } from 'react';
 import { useLocation } from '@reach/router';
-import cn from '@ably/ui/core/utils/cn';
-import { componentMaxHeight, HEADER_HEIGHT, HEADER_BOTTOM_MARGIN } from '@ably/ui/core/utils/heights';
+import cn from 'src/utilities/cn';
+import { componentMaxHeight, HEADER_HEIGHT, HEADER_BOTTOM_MARGIN } from 'src/utilities/heights';
 import { PRODUCT_BAR_HEIGHT } from './utils/heights';
 import { useLayoutContext } from 'src/contexts/layout-context';
 import { languageData } from 'src/data/languages';

src/components/Layout/mdx/Admonition.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import cn from '@ably/ui/core/utils/cn';
+import cn from 'src/utilities/cn';
 import Aside from '../../blocks/dividers/Aside';
 
 const LEGACY_ADMONITION_TYPES = ['new', 'updated', 'experimental', 'public-preview'];

src/components/Layout/mdx/MethodSignature.tsx

@@ -1,5 +1,5 @@
 import React, { useRef, useLayoutEffect, useState } from 'react';
-import cn from '@ably/ui/core/utils/cn';
+import cn from 'src/utilities/cn';
 
 interface MethodSignatureProps {
   children: React.ReactNode;

src/components/Layout/mdx/NestedTable/NestedTable.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo } from 'react';
-import cn from '@ably/ui/core/utils/cn';
+import cn from 'src/utilities/cn';
 import { TableData, useNestedTable } from './NestedTableContext';
 import { parseTableChildren } from './parseTable';
 import { NestedTablePropertyRow } from './NestedTablePropertyRow';

src/components/Layout/mdx/NestedTable/NestedTableExpandButton.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import cn from '@ably/ui/core/utils/cn';
+import cn from 'src/utilities/cn';
 
 interface NestedTableExpandButtonProps {
   typeName: string;

src/components/Layout/mdx/NestedTable/NestedTablePropertyRow.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import cn from '@ably/ui/core/utils/cn';
+import cn from 'src/utilities/cn';
 import { TableData, TableProperty, useNestedTable } from './NestedTableContext';
 import { NestedTableExpandButton } from './NestedTableExpandButton';
 

src/components/Layout/mdx/PageHeader.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import cn from '@ably/ui/core/utils/cn';
+import cn from 'src/utilities/cn';
 
 type PageHeaderProps = {
   title: string;

src/components/Layout/mdx/Table.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import cn from '@ably/ui/core/utils/cn';
+import cn from 'src/utilities/cn';
 
 // Table Root Component
 export interface TableRootProps extends React.HTMLAttributes<HTMLDivElement> {

src/components/Layout/mdx/Tabs.tsx

@@ -1,6 +1,6 @@
 import React, { isValidElement, ReactNode } from 'react';
 import * as RadixTabs from '@radix-ui/react-tabs';
-import cn from '@ably/ui/core/utils/cn';
+import cn from 'src/utilities/cn';
 
 interface TabProps {
   value: string;

src/components/Layout/utils/styles.ts

@@ -1,4 +1,4 @@
-import cn from '@ably/ui/core/utils/cn';
+import cn from 'src/utilities/cn';
 
 export const tooltipContentClassName = cn(
   'px-2 py-1 bg-neutral-1000 dark:bg-neutral-300 text-neutral-200 dark:text-neutral-1100 ui-text-p3 font-medium rounded-lg relative z-50 mt-2',

src/components/Menu/Label/index.tsx

@@ -1,5 +1,5 @@
 import React, { FunctionComponent as FC, HTMLProps } from 'react';
-import cn from '@ably/ui/core/utils/cn';
+import cn from 'src/utilities/cn';
 
 import { smallMenuLabel } from './Label.module.css';
 

src/components/SDKsPage/Card/index.tsx

@@ -1,7 +1,7 @@
 import Icon from '@ably/ui/core/Icon';
 import Link from 'src/components/Link';
 import { btn_sdks } from '../sdks.module.css';
-import cn from '@ably/ui/core/utils/cn';
+import cn from 'src/utilities/cn';
 
 type ImagesSDK = {
   src: string;

src/components/SDKsPage/MainSection/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import cn from '@ably/ui/core/utils/cn';
+import cn from 'src/utilities/cn';
 import { container } from '../sdks.module.css';
 import CardGrid from '../Card/CardGrid';
 import { data } from '../data';

src/components/ui/ButtonGroup.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { cva, type VariantProps } from 'class-variance-authority';
-import cn from '@ably/ui/core/utils/cn';
+import cn from 'src/utilities/cn';
 import { Separator } from './Separator';
 
 const buttonGroupVariants = cva(

src/components/ui/Input.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import cn from '@ably/ui/core/utils/cn';
+import cn from 'src/utilities/cn';
 
 function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
   return (

src/components/ui/Separator.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
-import cn from '@ably/ui/core/utils/cn';
+import cn from 'src/utilities/cn';
 
 function Separator({
   className,

src/components/ui/Skeleton.tsx

@@ -1,4 +1,4 @@
-import cn from '@ably/ui/core/utils/cn';
+import cn from 'src/utilities/cn';
 
 function Skeleton({ className, ...props }: React.ComponentProps<'div'>) {
   return (

src/utilities/cn.ts

@@ -0,0 +1,10 @@
+import clsx, { type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+/**
+ * Merge class names with clsx and resolve Tailwind class conflicts with
+ * tailwind-merge. Local replacement for @ably/ui/core/utils/cn (DX-1128).
+ */
+const cn = (...inputs: ClassValue[]): string => twMerge(clsx(inputs));
+
+export default cn;

src/utilities/heights.ts

@@ -0,0 +1,11 @@
+/**
+ * Layout height helpers. Local replacement for @ably/ui/core/utils/heights
+ * (DX-1128).
+ */
+export const HEADER_HEIGHT = 64;
+export const HEADER_BOTTOM_MARGIN = 24;
+
+export const componentMaxHeight = (...heights: number[]): string => {
+  const totalHeight = `${heights.reduce((sum, height) => sum + height, 0)}px`;
+  return `calc(min(100dvh, 100vh) - ${totalHeight})`;
+};