braid-design-system 31.21.1 → 31.22.1

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # braid-design-system
 
+## 31.22.1
+
+### Patch Changes
+
+- Fix type checking for Playroom config ([#1192](https://github.com/seek-oss/braid-design-system/pull/1192))
+
+## 31.22.0
+
+### Minor Changes
+
+- Expose Playroom config ([#1190](https://github.com/seek-oss/braid-design-system/pull/1190))
+
+  This allows consuming packages (e.g. Metropolis) to enhance the Playroom experience by leveraging Braid's internal Playroom configuration.
+
+  **EXAMPLE USAGE:**
+
+  ```jsx
+  // playroom.config.js
+  module.exports = {
+    frameComponent: require.resolve(
+      'braid-design-system/playroom/FrameComponent.tsx',
+    ),
+    components: require.resolve('braid-design-system/playroom/components.ts'),
+    snippets: require.resolve('braid-design-system/playroom/snippets.ts'),
+    scope: require.resolve('braid-design-system/playroom/scope.ts'),
+  };
+  ```
+
 ## 31.21.1
 
 ### Patch Changes

package/lib/components/private/Snippets.ts

@@ -3,9 +3,9 @@ import type { Snippets as PlayroomSnippets } from 'playroom';
 import type { Optional } from 'utility-types';
 import type { Source } from '../../utils/source.macro';
 
-export interface BraidSnippet
+interface BraidSnippet
   extends Omit<Optional<PlayroomSnippets[number], 'group'>, 'code'> {
   code: Source<ReactElement>;
 }
 
-export type Snippets = Array<BraidSnippet>;
+export type Snippets = BraidSnippet[];

package/lib/css/reset/resetTracker.ts

@@ -10,12 +10,12 @@ export const ensureResetImported = () => {
   if (!resetImported) {
     throw new Error(dedent`
       Braid components imported before reset.
-
-      Make sure to import the Braid reset module before importing any components. 
-      This ensures the CSS reset does not override the component styles. 
-    
+      ‎
+      Make sure to import the Braid reset module before importing any components.
+      This ensures the CSS reset does not override the component styles.
+      ‎
       e.g.
-
+      ‎
       import 'braid-design-system/reset'; // <-- Must be first
       import { BraidProvider, Box } from 'braid-design-system';
     `);

package/lib/playroom/snippets.ts

@@ -1,7 +1,8 @@
 import { flatten } from 'lodash';
-import type { BraidSnippet } from '../components/private/Snippets';
+import type { Snippets } from '../components/private/Snippets';
 
 const req = require.context('../components', true, /\.snippets\.tsx?$/);
+
 export default flatten(
   req.keys().map((filename) => {
     const matches = filename.match(/([a-zA-Z]+)\.snippets\.tsx?$/);
@@ -9,7 +10,7 @@ export default flatten(
       return [];
     }
 
-    const snippets = req(filename).snippets as BraidSnippet[];
+    const snippets = req(filename).snippets as Snippets;
 
     return snippets.map((snippet) => ({
       ...snippet,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "braid-design-system",
-  "version": "31.21.1",
+  "version": "31.22.1",
   "description": "Themeable design system for the SEEK Group",
   "main": "lib/components/index.ts",
   "bin": {
@@ -12,6 +12,7 @@
     "lib/css/reset/**/*",
     "themes/**/*",
     "reset/**/*",
+    "playroom/**/*",
     "*.css.ts"
   ],
   "repository": {

package/playroom/FrameComponent.tsx

@@ -0,0 +1 @@
+export { default } from '../lib/playroom/FrameComponent';

package/playroom/components.ts

@@ -0,0 +1,17 @@
+import dedent from 'dedent';
+
+declare const global: typeof globalThis & {
+  __IS_PLAYROOM_ENVIRONMENT__?: string;
+};
+if (global?.__IS_PLAYROOM_ENVIRONMENT__ !== 'clearly') {
+  throw new Error(dedent`
+    Playroom prototyping components are being imported instead of Braid components.
+    ‎
+    These components must not be used in production. Please import from the top level Braid entry point:
+    ‎
+    -import { Component } from 'braid-design-system/playroom/components';
+    +import { Component } from 'braid-design-system';
+  `);
+}
+
+export * from '../lib/playroom/components';

package/playroom/scope.ts

@@ -0,0 +1 @@
+export { default } from '../lib/playroom/useScope';

package/playroom/snippets.ts

@@ -0,0 +1 @@
+export { default } from '../lib/playroom/snippets';