Add support for defaulting visible themes and widths (#305)

.changeset/itchy-taxis-rhyme.md

@@ -0,0 +1,20 @@
+---
+'playroom': minor
+---
+
+Add support for specifying default subsets of themes and screen widths via the config.
+
+#### Example usage
+
+```js
+// playroom.config.js
+module.exports = {
+  ...,
+  defaultVisibleWidths: [
+    // subset of widths to display on first load
+  ],
+  defaultVisibleThemes: [
+    // subset of themes to display on first load
+  ],
+}
+```

README.md

@@ -80,6 +80,12 @@ module.exports = {
     // Custom webpack config goes here...
   }),
   iframeSandbox: 'allow-scripts',
+  defaultVisibleWidths: [
+    // subset of widths to display on first load
+  ],
+  defaultVisibleThemes: [
+    // subset of themes to display on first load
+  ],
 };
 ```
 

src/StoreContext/StoreContext.tsx

@@ -494,9 +494,15 @@ export const StoreProvider = ({
         const editorPosition = storedPosition;
         const editorHeight = storedHeight;
         const editorWidth = storedWidth;
-        const visibleWidths = widthsFromQuery || storedVisibleWidths;
+        const visibleWidths =
+          widthsFromQuery ||
+          storedVisibleWidths ||
+          playroomConfig?.defaultVisibleWidths;
         const visibleThemes =
-          hasThemesConfigured && (themesFromQuery || storedVisibleThemes);
+          hasThemesConfigured &&
+          (themesFromQuery ||
+            storedVisibleThemes ||
+            playroomConfig?.defaultVisibleThemes);
         const colorScheme = storedColorScheme;
 
         dispatch({

src/index.d.ts

@@ -15,6 +15,8 @@ interface PlayroomConfig {
   iframeSandbox?: string;
   // eslint-disable-next-line @typescript-eslint/consistent-type-imports
   reactDocgenTypescriptConfig?: import('react-docgen-typescript').ParserOptions;
+  defaultVisibleThemes?: string[];
+  defaultVisibleWidths?: number[];
 }
 
 interface InternalPlayroomConfig extends PlayroomConfig {