scoobie 17.2.2 → 18.0.0

package/README.md

@@ -6,76 +6,25 @@
 
 Component library for SEEK documentation sites.
 
-- Author content in [Markdown] files
-- Diagram with [mermaid] code blocks
-- Render content with [Braid] styling
-- Integrate with [sku]
-
 We use this to build [developer.seek.com](https://developer.seek.com), among other things.
 
-[braid]: https://github.com/seek-oss/braid-design-system
-[markdown]: https://en.wikipedia.org/wiki/Markdown
-[mermaid]: https://mermaid-js.github.io/mermaid/#/n00b-overview
-[react]: https://reactjs.org/
-[sku]: https://github.com/seek-oss/sku
-
 ```shell
 yarn add --exact scoobie
 ```
 
-## Table of contents
-
-- [Setup](#setup)
-- [Markdown reference](#markdown-reference)
-  - [Getting started](#getting-started)
-  - [Diagrams](#diagrams)
-  - [Headings](#headings)
-  - [Images](#images)
-  - [Links](#links)
-  - [Tables](#tables)
-- [React API reference](#react-api-reference)
-  - [Blockquote](#blockquote)
-  - [CodeBlock](#codeblock)
-  - [CopyableText](#copyabletext)
-  - [InlineCode](#inlinecode)
-  - [InternalLink](#internallink)
-  - [MdxProvider](#mdxprovider)
-  - [ScoobieLink](#scoobielink)
-  - [SmartTextLink](#smarttextlink)
-  - [Table](#table)
-  - [TableRow](#tablerow)
-  - [TocRenderer](#tocrenderer)
-  - [WrapperRenderer](#wrapperrenderer)
-- [Styling reference](#styling-reference)
-  - [code](#code)
-  - [img](#img)
-- [Webpack reference](#webpack-reference)
-  - [ScoobieWebpackPlugin](#scoobiewebpackplugin)
-  - [dangerouslySetWebpackConfig](#dangerouslysetwebpackconfig)
-  - [merge](#merge)
-- [Contributing](https://github.com/seek-oss/scoobie/blob/master/CONTRIBUTING.md)
-
 ## Setup
 
-### `sku.config.js`
+### `sku.config.ts`
 
-Compile Scoobie and bundle your Markdown content with its [Webpack plugin]:
-
-[webpack plugin]: https://webpack.js.org/plugins/
+Compile Scoobie:
 
 ```javascript
-const { dangerouslySetWebpackConfig } = require('scoobie/webpack');
-
 module.exports = {
   // ...
-
   compilePackages: ['scoobie'],
-  dangerouslySetWebpackConfig,
 };
 ```
 
-For detailed usage, see the [Webpack reference](#webpack-reference).
-
 ### `src/render.tsx`
 
 Fetch our favourite fonts from our Google overlords, Roboto and Roboto Mono:
@@ -105,186 +54,7 @@ Content-Security-Policy: font-src https://fonts.gstatic.com; script-src 'sha256-
 
 [content security policy]: https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP
 
-### `src/scoobie.d.ts`
-
-Import TypeScript definitions for `MDX`, `*.md` and `*.mdx`:
-
-```ts
-import 'scoobie/types';
-```
-
-## Markdown reference
-
-### Getting started
-
-Scoobie’s Markdown support is powered by [MDX] and custom [Remark plugins].
-
-[mdx]: https://mdxjs.com/
-[remark plugins]: https://github.com/remarkjs/remark/blob/master/doc/plugins.md
-
-Create your content in `.md` or `.mdx` files:
-
-```markdown
-# A normal Markdown heading
-
-Some text...
-
-import { Alert, Text } from 'braid-design-system';
-
-<Alert tone="critical"><Text>And a React component!</Text></Alert>
-```
-
-Import your content into a typical `.tsx` file:
-
-```tsx
-import React from 'react';
-
-import Content from './Content.mdx';
-
-export const ContentWithPointlessDiv = () => (
-  <div>
-    <Content />
-  </div>
-);
-```
-
-Nest your Markdown components within an [MdxProvider](#mdxprovider):
-
-```tsx
-import 'braid-design-system/reset';
-
-import { BraidProvider } from 'braid-design-system';
-import apacTheme from 'braid-design-system/themes/apac';
-import React from 'react';
-import { MdxProvider, ScoobieLink } from 'scoobie';
-
-import { ContentWithPointlessDiv } from './SomeFile.tsx';
-
-export const App = () => (
-  <BraidProvider linkComponent={ScoobieLink} theme={apacTheme}>
-    <MdxProvider>
-      <ContentWithPointlessDiv />
-    </MdxProvider>
-  </BraidProvider>
-);
-```
-
-(See [React context] to learn more about this pattern.)
-
-[react context]: https://reactjs.org/docs/context.html#contextprovider
-
-### Diagrams
-
-Scoobie optionally supports simple, source-controlled diagrams via [mermaid].
-
-This requires the `mermaid` configuration option to be set on [ScoobieWebpackPlugin](#scoobiewebpackplugin), and the `mermaid-isomorphic` peer dependency installed.
-A playwright installattion of chromium is required, which can be done by installing `playwright` and executing `playwright install chromium`.
-From there, the easiest way to get started is to check out the [mermaid live editor].
-
-You can use a named code block in Markdown files:
-
-````markdown
-```mermaid Optional title
-sequenceDiagram
-  autonumber
-  participant P as Partner
-  participant S as SEEK
-
-  P->>S: Make request
-```
-````
-
-Some Mermaid diagrams allow for YAML frontmatter. Scoobie has extended this by allowing a deep merge of the Mermaid configuration
-with a special `overrides` key in the frontmatter. This could be useful for diagram-specific configuration that is not otherwise easy to set.
-
-````markdown
-```mermaid
----
-overrides:
-  gantt:
-    useWidth: 500
----
-gantt
-    title A Gantt Diagram
-    dateFormat  YYYY-MM-DD
-    section Section
-    A task           :a1, 2014-01-01, 30d
-```
-````
-
-[mermaid live editor]: https://mermaidjs.github.io/mermaid-live-editor
-
-### Headings
-
-Anchor slugs are automatically generated for h1–h6:
-
-```markdown
-# My Little Heading1
-
-<!-- #my-little-heading1 -->
-```
-
-### Images
-
-Vanilla Markdown image syntax is supported:
-
-```markdown
-![Boo raster](./image.png)
-
-![Woo vector](./image.svg)
-```
-
-Define width and height px constraints by overloading the title:
-
-```markdown
-![Alt text](./image.png '=100x20 Rest of title')
-```
-
-### Links
-
-Use a root-relative path to navigate to a route managed by your React app.
-This will be rendered as a React Router link and won't require a full page refresh.
-
-Make sure to point to the route rather than the source file location:
-
-```markdown
-[👍 like this](/root/relative)
-
-[👎 not this](/src/root/Relative.mdx)
-```
-
-Use a full URL to denote an external link.
-This will open in a new tab.
-
-```markdown
-[Schema reference](https://developer.seek.com/schema)
-```
-
-### Tables
-
-Standard Markdown table syntax is supported:
-
-```markdown
-| Default | Left | Centre | Right |
-| ------- | :--- | :----: | ----: |
-| x       | x    |   x    |     x |
-```
-
-Use raw HTML to render multiple lines and lists in table cells.
-
-Care must be taken with `<p>`s; they are mapped to Braid `Text`s, which have strict semantics.
-Paragraph tags must be placed around text content and cannot be nested within each other.
-
-```markdown
-| Description             | Example                                                            |
-| :---------------------- | :----------------------------------------------------------------- |
-| Single-line             | Line                                                               |
-| Multi-line              | <p>Line 1</p><p>Line 2</p>                                         |
-| Bullets                 | <ul><li><p>Bullet 1</p></li></ul>                                  |
-| Multi-line with bullets | <p>Line before</p><ul><li><p>Bullet</p></li></ul><p>Line after</p> |
-```
-
-## React API reference
+## Components
 
 ### Blockquote
 
@@ -352,9 +122,7 @@ export const MyFirstInlineCode = () => (
 
 ### InternalLink
 
-Render an internal link with the same opinions as our [MdxProvider](#mdxprovider):
-
-- Internal links pass through the `v` or [ScoobieLinkProvider] URL parameters for UI version switching
+Render an internal link. Internal links pass through the `v` or [ScoobieLinkProvider] 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.
@@ -379,31 +147,6 @@ export const SomeComplexLinkElement = () => (
 );
 ```
 
-### MdxProvider
-
-Provide a base collection of [Braid]-styled renderers for child MDX documents.
-
-This should be paired with [ScoobieLink](#scoobielink) for proper internal link rendering.
-
-```tsx
-import { BraidProvider, Card } from 'braid-design-system';
-import apacTheme from 'braid-design-system/themes/apac';
-import React from 'react';
-import { MdxProvider, ScoobieLink } from 'scoobie';
-
-import Content from './Content.mdx';
-
-export const Component = () => (
-  <BraidProvider linkComponent={ScoobieLink} theme={apacTheme}>
-    <MdxProvider>
-      <Card>
-        <Content />
-      </Card>
-    </MdxProvider>
-  </BraidProvider>
-);
-```
-
 ### ScoobieLink
 
 Render all underlying links as follows:
@@ -452,9 +195,7 @@ export const Component = () => (
 
 ### SmartTextLink
 
-Render a text link with the same opinions as our [MdxProvider](#mdxprovider):
-
-- External links open in a new tab and have an [IconNewWindow] suffix
+Render a text link. External links open in a new tab and have an [IconNewWindow] suffix.
 
 [iconnewwindow]: https://seek-oss.github.io/braid-design-system/components/IconNewWindow
 
@@ -478,8 +219,6 @@ export const SomeLinks = () => (
 
 ### Table
 
-Render an HTML table with the same styling as our [MdxProvider](#mdxprovider):
-
 ```tsx
 import React, { Fragment } from 'react';
 import { Table, TableRow } from 'scoobie';
@@ -505,77 +244,6 @@ export const MyFirstTable = () => (
 
 Row children are flattened then wrapped with `<td>`s.
 
-### TocRenderer
-
-Render headings from an MDX document with a custom function.
-
-```tsx
-import { Stack, TextLink } from 'braid-design-system';
-import React from 'react';
-import { TocRenderer } from 'scoobie';
-
-import Content from './Content.mdx';
-
-export const PageWithToc = () => (
-  <Stack space="medium">
-    <TocRenderer document={Content}>
-      {(toc) => (
-        <Text>
-          <Stack space="small">
-            {toc.map((item) => (
-              <TextLink href={`#${item.id}`} key={item.id}>
-                {'|'.repeat(item.level)} {item.children}
-              </TextLink>
-            ))}
-          </Stack>
-        </Text>
-      )}
-    </TocRenderer>
-
-    <Content />
-  </Stack>
-);
-```
-
-A heading must start at the beginning of its line to be parsed:
-
-```markdown
-# Good
-
-- ## Bad
-
-  - ### Super bad
-
-## Good again
-```
-
-(This can be enforced with [markdownlint]’s [MD023] rule.)
-
-[markdownlint]: https://github.com/markdownlint/markdownlint
-[md023]: https://github.com/markdownlint/markdownlint/blob/master/docs/RULES.md#md023---headers-must-start-at-the-beginning-of-the-line
-
-### WrapperRenderer
-
-Render an MDX document with a [customised wrapper].
-
-[customised wrapper]: https://mdxjs.com/guides/wrapper-customization
-
-This allows you to derive arbitrary components from select parts of the document.
-
-```tsx
-import { Text } from 'braid-design-system';
-import React, { Children } from 'react';
-import { WrapperRenderer } from 'scoobie';
-
-export const NodeCount = (Document: MDX.Document) => (
-  <WrapperRenderer document={Document}>
-    {({ children }) => (
-      <Text>{Children.toArray(children).length} top-level node(s)</Text>
-    )}
-  </WrapperRenderer>
-);
-```
-
 ## Styling reference
 
 Scoobie distributes some vanilla-extract styles via `scoobie/styles` submodules.
@@ -598,8 +266,6 @@ export const MyBox = () => (
 
 ### img
 
-Render an image with the same styling as our [MdxProvider](#mdxprovider):
-
 ```tsx
 import React from 'react';
 import { img } from 'scoobie/styles/img.css';
@@ -624,46 +290,3 @@ Compatibility notes:
 - SVGs cannot be directly imported into JSX as components.
 
   Consider inlining the SVGs in your JSX instead.
-
-### ScoobieWebpackPlugin
-
-A bundle of MDX and image loaders that complement sku's Webpack config.
-
-This needs to be ordered to run after SkuWebpackPlugin:
-
-```javascript
-const { ScoobieWebpackPlugin, merge } = require('scoobie/webpack');
-
-module.exports = {
-  // ...
-
-  compilePackages: ['scoobie'],
-  dangerouslySetWebpackConfig: (config) =>
-    merge(config, {
-      plugins: [
-        new ScoobieWebpackPlugin({
-          // Optional configuration option to enable mermaid support.
-          // `@mermaid-js/mermaid-cli` must be installed as a peer dependency.
-          // Temporary files are written to `${rootDir}/mermaid`.
-          mermaid: {
-            rootDir: __dirname,
-          },
-        }),
-      ],
-    }),
-};
-```
-
-### dangerouslySetWebpackConfig
-
-Zero-config option referenced in [sku.config.js](#skuconfigjs) above.
-
-This slots in on top of sku without much fuss.
-If you're wrangling other Webpack config and need something more composable,
-see [ScoobieWebpackPlugin](#scoobiewebpackplugin).
-
-### merge
-
-Re-export of [webpack-merge] for convenience.
-
-[webpack-merge]: https://github.com/survivejs/webpack-merge

package/package.json

@@ -4,36 +4,22 @@
   "license": "MIT",
   "main": "src/index.ts",
   "sideEffects": false,
-  "version": "17.2.2",
+  "version": "18.0.0",
   "dependencies": {
     "@capsizecss/core": "^4.0.0",
-    "@mdx-js/react": "^1.6.22",
-    "@types/mdx-js__react": "^1.5.5",
     "@vanilla-extract/css": "^1.2.3",
     "@vanilla-extract/css-utils": "^0.1.1",
-    "babel-loader": "^9.0.0",
     "clsx": "^2.0.0",
-    "deepmerge-ts": "^7.1.0",
-    "find-up": "^5.0.0",
-    "fs-extra": "^11.0.0",
     "jsonc-parser": "^3.0.0",
     "polished": "^4.1.3",
     "prism-react-renderer": "2.4.0",
     "react-keyed-flatten-children": "^3.0.0",
     "refractor": "^3.4.0",
-    "remark-slug": "^6.1.0",
-    "svgo": "^3.0.0",
-    "svgo-loader": "^4.0.0",
-    "unist-util-visit": "^2.0.3",
-    "unist-util-visit-parents": "^3.1.1",
-    "webpack-merge": "^6.0.0",
-    "which": "^4.0.0",
-    "yaml": "^2.5.0"
+    "remark-slug": "^6.1.0"
   },
   "devDependencies": {
     "@changesets/cli": "2.27.8",
     "@changesets/get-github-info": "0.6.0",
-    "@mdx-js/loader": "^1.6.22",
     "@storybook/addon-essentials": "8.3.2",
     "@storybook/addon-webpack5-compiler-babel": "3.0.3",
     "@storybook/react": "8.3.2",
@@ -42,8 +28,6 @@
     "@types/react-dom": "18.3.0",
     "braid-design-system": "32.24.1",
     "loki": "0.35.1",
-    "mermaid-isomorphic": "2.2.1",
-    "playwright": "1.47.2",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-helmet-async": "1.3.0",
@@ -61,21 +45,11 @@
     "typography.ts"
   ],
   "peerDependencies": {
-    "@mdx-js/loader": "^1.6.22",
     "braid-design-system": ">= 31.21.0",
-    "mermaid-isomorphic": "^2.2.1",
     "react": ">= 17 < 19",
     "react-router-dom": ">= 5.3.0",
     "sku": ">= 13.0.0 < 14"
   },
-  "peerDependenciesMeta": {
-    "@mdx-js/loader": {
-      "optional": true
-    },
-    "mermaid-isomorphic": {
-      "optional": true
-    }
-  },
   "repository": {
     "type": "git",
     "url": "https://github.com/seek-oss/scoobie.git"
@@ -91,8 +65,7 @@
     "storybook:build": "storybook build --output-dir dist-storybook",
     "storybook:start": "storybook dev",
     "test": "sku test",
-    "test:ci": "sku test --coverage",
-    "prepare": "playwright install chromium"
+    "test:ci": "sku test --coverage"
   },
   "loki": {
     "configurations": {

package/src/index.ts

@@ -3,13 +3,8 @@ export { CodeBlock } from './components/CodeBlock';
 export { CopyableText } from './components/CopyableText';
 export { InlineCode } from './components/InlineCode';
 export { InternalLink } from './components/InternalLink';
-export { MdxProvider } from './components/MdxProvider';
 export { ScoobieLink } from './components/ScoobieLink';
 export { ScoobieLinkProvider } from './components/ScoobieLinkProvider';
 export { SmartTextLink } from './components/SmartTextLink';
 export { Table } from './components/Table';
 export { TableRow } from './components/TableRow';
-export { TocRenderer } from './components/TocRenderer';
-export { WrapperRenderer } from './components/WrapperRenderer';
-
-export type { Toc, TocItem } from './components/TocRenderer';

package/src/private/Table.tsx

@@ -2,13 +2,6 @@ import { Box } from 'braid-design-system';
 import React, { Fragment, type ReactNode } from 'react';
 
 import { ScrollableInline } from './ScrollableInline';
-import {
-  DEFAULT_TABLE_CELL_COMPONENT,
-  DEFAULT_TABLE_TYPE,
-  TableContext,
-  type TableType,
-} from './TableContext';
-import { DEFAULT_SIZE, type Size } from './size';
 
 import * as styles from './Table.css';
 
@@ -41,27 +34,3 @@ export const BaseTable = ({
     </Wrapper>
   );
 };
-
-interface MdxTableProps {
-  children: ReactNode;
-  size?: Size;
-  type?: TableType;
-}
-
-export const MdxTable = ({
-  children,
-  size = DEFAULT_SIZE,
-  type = DEFAULT_TABLE_TYPE,
-}: MdxTableProps) => (
-  <TableContext.Provider
-    value={{
-      component: DEFAULT_TABLE_CELL_COMPONENT,
-      size,
-      type,
-    }}
-  >
-    <BaseTable overflowX="scroll" width="full">
-      {children}
-    </BaseTable>
-  </TableContext.Provider>
-);

package/src/private/types.ts

@@ -3,10 +3,4 @@ import type { ComponentProps } from 'react';
 
 export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
 
-export interface MdxElement {
-  props: {
-    mdxType: string;
-  };
-}
-
 export type StackChildrenProps = Pick<ComponentProps<typeof Stack>, 'children'>;

package/remark/formatTableCells.js

@@ -1,43 +0,0 @@
-const visit = require('unist-util-visit');
-
-const containsParagraphNode = (node) =>
-  (node.type === 'jsx' &&
-    typeof node.value === 'string' &&
-    node.value.toLocaleLowerCase().trim().replace(/[\s/]/g, '') === '<p>') ||
-  (Array.isArray(node.children) && node.children.some(containsParagraphNode));
-
-/**
- * Apply default formatting to table cells for improved rendering in a Braid
- * context:
- *
- * - Wrap cell in a `<strong>` if it is a header cell
- * - Wrap cell in a `<p>`
- *
- * This can be disabled by using an explicit `<p>` tag in the cell.
- */
-module.exports.formatTableCells = () => (tree) =>
-  visit(tree, 'table', (node) =>
-    node.children.forEach((row, rowIndex) =>
-      row.children.forEach((cell) => {
-        if (containsParagraphNode(cell)) {
-          return;
-        }
-
-        if (rowIndex === 0) {
-          cell.children = [
-            {
-              children: cell.children,
-              type: 'strong',
-            },
-          ];
-        }
-
-        cell.children = [
-          {
-            children: cell.children,
-            type: 'paragraph',
-          },
-        ];
-      }),
-    ),
-  );