scoobie 15.0.0 → 15.2.0

package/package.json

@@ -4,7 +4,7 @@
   "license": "MIT",
   "main": "src/index.ts",
   "sideEffects": false,
-  "version": "15.0.0",
+  "version": "15.2.0",
   "dependencies": {
     "@capsizecss/core": "^3.0.0",
     "@mdx-js/react": "^1.6.22",
@@ -17,7 +17,7 @@
     "fs-extra": "^11.0.0",
     "jsonc-parser": "^3.0.0",
     "polished": "^4.1.3",
-    "prism-react-renderer": "2.1.0",
+    "prism-react-renderer": "2.3.1",
     "react-keyed-flatten-children": "^2.0.0",
     "refractor": "^3.4.0",
     "remark-slug": "^6.1.0",
@@ -28,20 +28,20 @@
     "which": "^4.0.0"
   },
   "devDependencies": {
-    "@mermaid-js/mermaid-cli": "10.4.0",
-    "@storybook/addon-essentials": "7.4.6",
-    "@storybook/storybook-deployer": "2.8.16",
-    "@types/react": "18.2.25",
-    "@types/react-dom": "18.2.10",
-    "braid-design-system": "32.12.1",
-    "loki": "0.32.0",
+    "@changesets/cli": "2.27.1",
+    "@changesets/get-github-info": "0.6.0",
+    "@mermaid-js/mermaid-cli": "10.6.1",
+    "@types/react": "18.2.47",
+    "@storybook/addon-essentials": "7.6.8",
+    "@types/react-dom": "18.2.18",
+    "braid-design-system": "32.14.4",
+    "loki": "0.33.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-helmet-async": "1.3.0",
-    "react-router-dom": "6.16.0",
-    "semantic-release": "21.1.2",
-    "sku": "12.4.2",
-    "webpack": "5.88.2",
+    "react-router-dom": "6.21.2",
+    "sku": "12.4.9",
+    "webpack": "5.89.0",
     "@mdx-js/loader": "^1.6.22"
   },
   "files": [
@@ -78,9 +78,9 @@
     "loki:test": "loki test --host host.docker.internal --port 8081",
     "loki:test:ci": "cp -R dist-storybook/. dist-storybook-tmp/ && loki --requireReference --reactUri file:./dist-storybook-tmp --chromeFlags='--headless --hide-scrollbars --no-sandbox'",
     "loki:update": "loki update --host host.docker.internal --port 8081",
-    "release": "semantic-release --success false",
+    "release": "changeset publish",
+    "stage": "changeset version && yarn format",
     "storybook:build": "sku build-storybook",
-    "storybook:deploy": "storybook-to-ghpages --existing-output-dir=dist-storybook",
     "storybook:start": "sku storybook",
     "test": "sku test",
     "test:ci": "sku test --coverage"

package/remark/mermaid/style.css

@@ -91,6 +91,7 @@ g.node foreignObject.label {
 }
 
 circle.label-container,
+.node circle,
 .node path,
 .node polygon,
 .node rect {

package/src/components/CodeBlock.tsx

@@ -79,7 +79,7 @@ export const CodeBlock = ({
 
   return (
     <Stack space={tablePadding}>
-      <ScrollableInline>
+      <ScrollableInline whiteSpace="nowrap">
         <Box display="flex" justifyContent="spaceBetween">
           <Box display="flex">
             {children.map(({ label }, labelIndex) => (

package/src/components/Table.tsx

@@ -12,7 +12,7 @@ import { DEFAULT_SIZE, type Size } from '../private/size';
 
 import { TableRow } from './TableRow';
 
-interface Props {
+interface BaseProps {
   align?: readonly TableAlign[];
   children: ReactNode;
   header: ComponentProps<typeof Stack>['children'] | readonly string[];
@@ -21,15 +21,29 @@ interface Props {
   width?: 'full';
 }
 
+type Props = BaseProps &
+  (
+    | {
+        overflowX: 'scroll';
+        whiteSpace?: 'nowrap';
+      }
+    | {
+        overflowX?: never;
+        whiteSpace?: never;
+      }
+  );
+
 export const Table = ({
   align,
   children,
   header,
+  overflowX,
   size = DEFAULT_SIZE,
   type = DEFAULT_TABLE_TYPE,
+  whiteSpace,
   width,
 }: Props) => (
-  <BaseTable width={width}>
+  <BaseTable overflowX={overflowX} whiteSpace={whiteSpace} width={width}>
     <TableContext.Provider
       value={{
         align,

package/src/private/Prism.ts

@@ -1,15 +1,18 @@
 import { Prism } from 'prism-react-renderer';
-// @ts-ignore
+// @ts-expect-error
+import bashLang from 'refractor/lang/bash';
+// @ts-expect-error
 import csharpLang from 'refractor/lang/csharp';
-// @ts-ignore
+// @ts-expect-error
 import diffLang from 'refractor/lang/diff';
-// @ts-ignore
+// @ts-expect-error
 import httpLang from 'refractor/lang/http';
-// @ts-ignore
+// @ts-expect-error
 import jsonLang from 'refractor/lang/json';
-// @ts-ignore
+// @ts-expect-error
 import splunkSplLang from 'refractor/lang/splunk-spl';
 
+bashLang(Prism);
 csharpLang(Prism);
 diffLang(Prism);
 httpLang(Prism);

package/src/private/ScrollableInline.css.ts

@@ -1,4 +1,4 @@
-import { style } from '@vanilla-extract/css';
+import { style, styleVariants } from '@vanilla-extract/css';
 import { calc } from '@vanilla-extract/css-utils';
 import { vars } from 'braid-design-system/css';
 
@@ -12,7 +12,11 @@ export const scrollX = style({
   overflowX: 'auto',
   overflowY: 'hidden',
   scrollbarWidth: 'none',
-  whiteSpace: 'nowrap',
 
   WebkitOverflowScrolling: 'touch',
 });
+
+export const whiteSpace = styleVariants(
+  { undefined, nowrap: 'nowrap' } as const,
+  (value) => ({ whiteSpace: value }),
+);

package/src/private/ScrollableInline.tsx

@@ -1,16 +1,21 @@
-import { Box } from 'braid-design-system';
+import { Bleed, Box } from 'braid-design-system';
 import React, { type ReactNode } from 'react';
 
 import * as styles from './ScrollableInline.css';
 
 interface Props {
   children: ReactNode;
+  whiteSpace?: 'nowrap';
 }
 
-export const ScrollableInline = ({ children }: Props) => (
-  <Box className={styles.trimPaddingY}>
-    <Box className={styles.scrollX} paddingY="small" width="full">
+export const ScrollableInline = ({ children, whiteSpace }: Props) => (
+  <Bleed vertical="small">
+    <Box
+      className={[styles.scrollX, styles.whiteSpace[whiteSpace ?? 'undefined']]}
+      paddingY="small"
+      width="full"
+    >
       {children}
     </Box>
-  </Box>
+  </Bleed>
 );

package/src/private/Table.css.ts

@@ -8,7 +8,3 @@ export const table = style({
   borderCollapse: 'separate',
   borderSpacing: 0,
 });
-
-export const tableWrapper = style({
-  overflowX: 'auto',
-});

package/src/private/Table.tsx

@@ -1,6 +1,7 @@
 import { Box } from 'braid-design-system';
-import React, { type ReactNode } from 'react';
+import React, { Fragment, type ReactNode } from 'react';
 
+import { ScrollableInline } from './ScrollableInline';
 import {
   DEFAULT_TABLE_CELL_COMPONENT,
   DEFAULT_TABLE_TYPE,
@@ -13,17 +14,33 @@ import * as styles from './Table.css';
 
 interface BaseTableProps {
   children: ReactNode;
+  overflowX?: 'scroll';
+  whiteSpace?: 'nowrap';
   width?: 'full';
 }
 
-export const BaseTable = ({ children, width }: BaseTableProps) => (
-  <Box
-    component="table"
-    className={{ [styles.table]: true, [styles.fullWidth]: width === 'full' }}
-  >
-    {children}
-  </Box>
-);
+export const BaseTable = ({
+  children,
+  overflowX,
+  whiteSpace,
+  width,
+}: BaseTableProps) => {
+  const Wrapper = overflowX === 'scroll' ? ScrollableInline : Fragment;
+
+  return (
+    <Wrapper {...(overflowX === 'scroll' ? { whiteSpace } : {})}>
+      <Box
+        component="table"
+        className={{
+          [styles.table]: true,
+          [styles.fullWidth]: width === 'full',
+        }}
+      >
+        {children}
+      </Box>
+    </Wrapper>
+  );
+};
 
 interface MdxTableProps {
   children: ReactNode;
@@ -43,8 +60,8 @@ export const MdxTable = ({
       type,
     }}
   >
-    <Box className={styles.tableWrapper}>
-      <BaseTable>{children}</BaseTable>
-    </Box>
+    <BaseTable overflowX="scroll" width="full">
+      {children}
+    </BaseTable>
   </TableContext.Provider>
 );

package/src/private/TableRow.css.ts

@@ -1,11 +1,12 @@
 import { style, styleVariants } from '@vanilla-extract/css';
-import { vars } from 'braid-design-system/css';
+
+import { codeBackgroundColor } from '../../styles';
 
 export const tableRow = styleVariants({
   stripe: {
     selectors: {
       'tbody &:nth-child(odd)': {
-        backgroundColor: vars.backgroundColor.body,
+        backgroundColor: codeBackgroundColor,
       },
     },
   },

package/styles/index.ts

@@ -1,5 +1,5 @@
 // Braid grey.50
-// https://github.com/seek-oss/braid-design-system/blob/v31.14.0/lib/color/palette.ts
+// https://github.com/seek-oss/braid-design-system/blob/braid-design-system%4032.14.4/packages/braid-design-system/src/lib/color/palette.ts#L13
 export const codeBackgroundColor = '#F7F8FB';
 
 // SEEK's corporate font + GitHub defaults