scoobie 14.2.1 → 14.3.1

package/README.md

@@ -345,7 +345,7 @@ export const MyFirstInlineCode = () => (
 
 Render an internal link with the same opinions as our [MdxProvider](#mdxprovider):
 
-- Internal links pass through the `v` URL parameter for UI version switching
+- Internal links pass through the `v` and `v-panel` URL parameters for UI version switching
 
 Unlike [SmartTextLink](#smarttextlink), this is not bound to a parent [Text] as it has no underlying [TextLink].
 It can be used to make complex components navigable rather than just sections of text.
@@ -398,7 +398,7 @@ export const Component = () => (
 
 Render all underlying links as follows:
 
-- Internal links pass through the `v` URL parameter for UI version switching
+- Internal links pass through the `v` and `v-panel` URL parameters for UI version switching
 - External links open in a new tab
 - Links with a [`download` attribute] prompt the user with a file download
 

package/package.json

@@ -4,7 +4,7 @@
   "license": "MIT",
   "main": "src/index.ts",
   "sideEffects": false,
-  "version": "14.2.1",
+  "version": "14.3.1",
   "dependencies": {
     "@capsizecss/core": "^3.0.0",
     "@mdx-js/loader": "^1.6.22",
@@ -34,14 +34,14 @@
     "@storybook/storybook-deployer": "2.8.16",
     "@types/react": "18.0.17",
     "@types/react-dom": "18.0.6",
-    "braid-design-system": "32.3.1",
+    "braid-design-system": "32.5.0",
     "loki": "0.31.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-helmet-async": "1.3.0",
     "react-router-dom": "6.9.0",
     "semantic-release": "21.0.0",
-    "sku": "11.8.2",
+    "sku": "11.10.0",
     "webpack": "5.76.3"
   },
   "files": [

package/remark/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "../tsconfig.json",
+  "include": ["**/*"]
+}

package/src/components/Blockquote.tsx

@@ -1,8 +1,8 @@
 import { Box, Heading, Secondary, Stack } from 'braid-design-system';
 import React from 'react';
 
-import { DEFAULT_SIZE, SIZE_TO_SPACE, Size } from '../private/size';
-import { StackChildrenProps } from '../private/types';
+import { DEFAULT_SIZE, SIZE_TO_SPACE, type Size } from '../private/size';
+import type { StackChildrenProps } from '../private/types';
 
 import * as styles from './Blockquote.css';
 

package/src/components/CodeBlock/GraphQLPlaygroundAction.tsx

@@ -3,7 +3,7 @@ import url from 'url';
 import { IconVideo, Text, TextLink } from 'braid-design-system';
 import React from 'react';
 
-import { SIZE_TO_SMALLER, Size } from '../../private/size';
+import { SIZE_TO_SMALLER, type Size } from '../../private/size';
 
 const URL = url.URL ?? window.URL;
 

package/src/components/CodeBlock/LineNumbers.tsx

@@ -1,7 +1,7 @@
 import { Box, Stack } from 'braid-design-system';
 import React from 'react';
 
-import { Size } from '../../private/size';
+import type { Size } from '../../private/size';
 
 import { code } from '../../../styles/code.css';
 import * as styles from '../CodeBlock.css';

package/src/components/CodeBlock/Lines.tsx

@@ -1,8 +1,8 @@
 import { Box, Stack } from 'braid-design-system';
-import Highlight from 'prism-react-renderer';
+import type Highlight from 'prism-react-renderer';
 import React from 'react';
 
-import { Size } from '../../private/size';
+import type { Size } from '../../private/size';
 
 import { code } from '../../../styles/code.css';
 

package/src/components/CodeBlock.tsx

@@ -9,10 +9,10 @@ import {
   DEFAULT_SIZE,
   SIZE_TO_SMALLER,
   SIZE_TO_TABLE_PADDING,
-  Size,
+  type Size,
 } from '../private/size';
 
-import { CodeChildProps, normaliseChildren } from './CodeBlock/CodeChild';
+import { type CodeChildProps, normaliseChildren } from './CodeBlock/CodeChild';
 import { GraphQLPlaygroundAction } from './CodeBlock/GraphQLPlaygroundAction';
 import { LineNumbers } from './CodeBlock/LineNumbers';
 import { Lines } from './CodeBlock/Lines';

package/src/components/CopyableText.tsx

@@ -1,5 +1,10 @@
 import { IconCopy, IconTick, Text, TextLinkButton } from 'braid-design-system';
-import React, { ComponentProps, ReactNode, useCallback, useState } from 'react';
+import React, {
+  type ComponentProps,
+  type ReactNode,
+  useCallback,
+  useState,
+} from 'react';
 
 interface Props {
   children: string;

package/src/components/InlineCode.tsx

@@ -1,5 +1,5 @@
 import { Box } from 'braid-design-system';
-import React, { Fragment, ReactNode } from 'react';
+import React, { Fragment, type ReactNode } from 'react';
 
 import * as styles from './InlineCode.css';
 

package/src/components/InternalLink.tsx

@@ -1,5 +1,5 @@
-import clsx, { ClassValue } from 'clsx';
-import React, { ComponentProps, forwardRef } from 'react';
+import clsx, { type ClassValue } from 'clsx';
+import React, { type ComponentProps, forwardRef } from 'react';
 import { NavLink, useLocation } from 'react-router-dom';
 
 import { parseInternalHref } from '../private/url';

package/src/components/MdxProvider.tsx

@@ -1,8 +1,8 @@
 import { MDXProvider } from '@mdx-js/react';
-import React, { ReactNode } from 'react';
+import React, { type ReactNode } from 'react';
 
 import { GraphQLPlaygroundProvider } from '../private/hooks/graphqlPlayground';
-import { DEFAULT_SIZE, Size } from '../private/size';
+import { DEFAULT_SIZE, type Size } from '../private/size';
 import { useMdxComponents } from '../private/useMdxComponents';
 
 interface MdxProviderProps {

package/src/components/SmartTextLink.tsx

@@ -1,5 +1,5 @@
 import { TextLink } from 'braid-design-system';
-import React, { ComponentProps, ReactNode } from 'react';
+import React, { type ComponentProps, type ReactNode } from 'react';
 
 import { ExternalTextLink } from '../private/ExternalTextLink';
 import { isExternalHref } from '../private/url';

package/src/components/Table.tsx

@@ -1,14 +1,14 @@
-import { Box, Stack } from 'braid-design-system';
-import React, { ComponentProps, ReactNode } from 'react';
+import { Box, type Stack } from 'braid-design-system';
+import React, { type ComponentProps, type ReactNode } from 'react';
 
 import { BaseTable } from '../private/Table';
 import {
   DEFAULT_TABLE_TYPE,
-  TableAlign,
+  type TableAlign,
   TableContext,
-  TableType,
+  type TableType,
 } from '../private/TableContext';
-import { DEFAULT_SIZE, Size } from '../private/size';
+import { DEFAULT_SIZE, type Size } from '../private/size';
 
 import { TableRow } from './TableRow';
 

package/src/components/TableRow.tsx

@@ -1,5 +1,5 @@
-import { Stack, Text } from 'braid-design-system';
-import React, { Children, ComponentProps, useContext } from 'react';
+import { type Stack, Text } from 'braid-design-system';
+import React, { Children, type ComponentProps, useContext } from 'react';
 import flattenChildren from 'react-keyed-flatten-children';
 
 import { TableCell } from '../private/TableCell';

package/src/components/TocRenderer.tsx

@@ -1,6 +1,6 @@
-import React, { Children, FunctionComponent, ReactNode } from 'react';
+import React, { Children, type FunctionComponent, type ReactNode } from 'react';
 
-import { HeadingLevel, StackChildrenProps } from '../private/types';
+import type { HeadingLevel, StackChildrenProps } from '../private/types';
 import { isMdxElement } from '../private/validation';
 
 import { WrapperRenderer } from './WrapperRenderer';

package/src/components/WrapperRenderer.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { WrapperComponent } from '../private/Wrapper';
+import type { WrapperComponent } from '../private/Wrapper';
 import { DEFAULT_SIZE } from '../private/size';
 import { useMdxWrapper } from '../private/useMdxWrapper';
 

package/src/private/ExternalTextLink.tsx

@@ -1,5 +1,5 @@
 import { IconNewWindow, TextLink } from 'braid-design-system';
-import React, { ComponentProps, ReactNode } from 'react';
+import React, { type ComponentProps, type ReactNode } from 'react';
 
 interface Props {
   children: ReactNode;

package/src/private/MdxCodeBlock.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 
 import { CodeBlock } from '../components/CodeBlock';
-import { CodeChildProps } from '../components/CodeBlock/CodeChild';
+import type { CodeChildProps } from '../components/CodeBlock/CodeChild';
 
 import { useGraphQLPlayground } from './hooks/graphqlPlayground';
-import { Size } from './size';
+import type { Size } from './size';
 
 const toLabel = (meta?: string) => meta?.match(/label="([^"]+)"/)?.[1];
 

package/src/private/MdxOrderedList.tsx

@@ -2,8 +2,8 @@ import { List } from 'braid-design-system';
 import React from 'react';
 
 import { useOrderedListContext } from './OrderedListContext';
-import { SIZE_TO_SPACE, Size } from './size';
-import { StackChildrenProps } from './types';
+import { SIZE_TO_SPACE, type Size } from './size';
+import type { StackChildrenProps } from './types';
 
 type Props = StackChildrenProps & {
   size: Size;

package/src/private/OrderedListContext.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode, createContext, useContext } from 'react';
+import React, { type ReactNode, createContext, useContext } from 'react';
 
 const LIST_TYPES = ['number', 'alpha', 'roman'] as const;
 

package/src/private/Prism.ts

@@ -1,4 +1,4 @@
-import { Language, Prism } from 'prism-react-renderer';
+import { type Language, Prism } from 'prism-react-renderer';
 // @ts-ignore
 import csharpLang from 'refractor/lang/csharp';
 // @ts-ignore

package/src/private/ScrollableInline.tsx

@@ -1,5 +1,5 @@
 import { Box } from 'braid-design-system';
-import React, { ReactNode } from 'react';
+import React, { type ReactNode } from 'react';
 
 import * as styles from './ScrollableInline.css';
 

package/src/private/SpacedHeading.tsx

@@ -1,9 +1,9 @@
 import { Box, Heading, IconLink, Text } from 'braid-design-system';
-import React, { FunctionComponent, ReactNode } from 'react';
+import React, { type FunctionComponent, type ReactNode } from 'react';
 
 import { SmartTextLink } from '../components/SmartTextLink';
 
-import { HeadingLevel } from './types';
+import type { HeadingLevel } from './types';
 
 import * as styles from './SpacedHeading.css';
 

package/src/private/Table.tsx

@@ -1,13 +1,13 @@
 import { Box } from 'braid-design-system';
-import React, { ReactNode } from 'react';
+import React, { type ReactNode } from 'react';
 
 import {
   DEFAULT_TABLE_CELL_COMPONENT,
   DEFAULT_TABLE_TYPE,
   TableContext,
-  TableType,
+  type TableType,
 } from './TableContext';
-import { DEFAULT_SIZE, Size } from './size';
+import { DEFAULT_SIZE, type Size } from './size';
 
 import * as styles from './Table.css';
 

package/src/private/TableCell.css.ts

@@ -1,7 +1,7 @@
 import { styleVariants } from '@vanilla-extract/css';
 import { vars } from 'braid-design-system/css';
 
-import { SIZE_TO_TABLE_PADDING, Size } from './size';
+import { SIZE_TO_TABLE_PADDING, type Size } from './size';
 
 import { tableRowSelection } from './TableRow.css';
 

package/src/private/TableCell.tsx

@@ -1,9 +1,9 @@
 import { Box, Stack } from 'braid-design-system';
 import React, { useContext } from 'react';
 
-import { TableAlign, TableContext } from './TableContext';
+import { type TableAlign, TableContext } from './TableContext';
 import { SIZE_TO_SPACE, SIZE_TO_TABLE_PADDING } from './size';
-import { StackChildrenProps } from './types';
+import type { StackChildrenProps } from './types';
 
 import * as styles from './TableCell.css';
 

package/src/private/TableContext.ts

@@ -1,6 +1,6 @@
 import { createContext } from 'react';
 
-import { DEFAULT_SIZE, Size } from './size';
+import { DEFAULT_SIZE, type Size } from './size';
 
 interface TableContextValue {
   align?: ReadonlyArray<TableAlign>;

package/src/private/TableRow.tsx

@@ -3,7 +3,7 @@ import React, { useContext } from 'react';
 
 import { TableContext } from '../private/TableContext';
 
-import { StackChildrenProps } from './types';
+import type { StackChildrenProps } from './types';
 
 import * as styles from './TableRow.css';
 

package/src/private/Wrapper.tsx

@@ -1,8 +1,8 @@
 import { Box, Stack } from 'braid-design-system';
-import React, { FunctionComponent } from 'react';
+import React, { type FunctionComponent } from 'react';
 
-import { SIZE_TO_SPACE, Size } from './size';
-import { StackChildrenProps } from './types';
+import { SIZE_TO_SPACE, type Size } from './size';
+import type { StackChildrenProps } from './types';
 
 import * as styles from './Wrapper.css';
 

package/src/private/hooks/graphqlPlayground.tsx

@@ -1,5 +1,4 @@
-import React, { createContext, useContext } from 'react';
-import { ReactNode } from 'react';
+import React, { type ReactNode, createContext, useContext } from 'react';
 
 const ctx = createContext<string | undefined>(undefined);
 

package/src/private/types.ts

@@ -1,5 +1,5 @@
-import { Stack } from 'braid-design-system';
-import { ComponentProps } from 'react';
+import type { Stack } from 'braid-design-system';
+import type { ComponentProps } from 'react';
 
 export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
 

package/src/private/url.ts

@@ -5,10 +5,13 @@ const URLSearchParams = url.URLSearchParams ?? window.URLSearchParams;
 
 const EXAMPLE_BASE_URL = 'https://example.com';
 
-const parseVersionParam = (search: string) => {
+const parseVersionParams = (search: string) => {
   const urlSearchParams = new URLSearchParams(search);
 
-  return urlSearchParams.get('v');
+  return {
+    v: urlSearchParams.get('v'),
+    vPanel: urlSearchParams.get('v-panel'),
+  };
 };
 
 const hrefToUrl = (href: string, pathname: string) => {
@@ -32,11 +35,14 @@ export const parseInternalHref = (
 ) => {
   const { hash, pathname, searchParams } = hrefToUrl(href, location.pathname);
 
-  const v = parseVersionParam(location.search);
+  const { v, vPanel } = parseVersionParams(location.search);
 
   if (v !== null) {
     searchParams.set('v', v);
   }
+  if (vPanel !== null) {
+    searchParams.set('v-panel', vPanel);
+  }
 
   const search = searchParams.toString();
 

package/src/private/useMdxComponents.tsx

@@ -13,10 +13,10 @@ import { MdxTable } from './Table';
 import { TableCell } from './TableCell';
 import { BaseTableRow } from './TableRow';
 import { Wrapper } from './Wrapper';
-import { SIZE_TO_SPACE, Size } from './size';
+import { SIZE_TO_SPACE, type Size } from './size';
 
-import { img } from '../../styles/img.css';
 import * as styles from './useMdxComponents.css';
+import { img } from '../../styles/img.css';
 
 interface Props {
   size: Size;

package/src/private/useMdxWrapper.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 
-import { Wrapper, WrapperComponent } from './Wrapper';
-import { Size } from './size';
-import { StackChildrenProps } from './types';
+import { Wrapper, type WrapperComponent } from './Wrapper';
+import type { Size } from './size';
+import type { StackChildrenProps } from './types';
 
 export const useMdxWrapper =
   (component: WrapperComponent, size: Size) =>

package/src/private/validation.ts

@@ -1,4 +1,4 @@
-import { MdxElement } from './types';
+import type { MdxElement } from './types';
 
 const isObject = (value: unknown): value is Record<PropertyKey, unknown> =>
   typeof value === 'object' && value !== null;

package/styles/code.css.ts

@@ -2,7 +2,7 @@ import { createStyleObject, getCapHeight } from '@capsizecss/core';
 import { styleVariants } from '@vanilla-extract/css';
 import { responsiveStyle } from 'braid-design-system/css';
 
-import { Size } from '../src/private/size';
+import type { Size } from '../src/private/size';
 
 import { monospaceFontFamily } from '.';
 

package/types.d.ts

@@ -11,6 +11,7 @@ declare module '*.mdx' {
 }
 
 declare namespace MDX {
+  // eslint-disable-next-line @typescript-eslint/consistent-type-imports
   type Document = import('react').FunctionComponent<{
     components?:
       | ProviderComponents
@@ -20,6 +21,7 @@ declare namespace MDX {
   // Braid's type-level strictness does not play well with dynamic ReactNodes,
   // so we simply lie to TypeScript.
   type ProviderComponent<Props = Record<string, unknown>> =
+    // eslint-disable-next-line @typescript-eslint/consistent-type-imports
     import('react').ComponentType<{ children: any } & Props>;
 
   type ProviderComponents = Partial<{