playroom 0.34.2 → 0.35.0

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # playroom
 
+## 0.35.0
+
+### Minor Changes
+
+- ad60e01: 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
+    ],
+  }
+  ```
+
+- f45dd04: Add ability to customise tab titles via a "Title" section in the settings panel.
+
+### Patch Changes
+
+- f491105: Fix bug in "Wrap selection in tag" command that caused the start cursor to occasionally be placed in the wrong postion.
+
 ## 0.34.2
 
 ### Patch Changes

package/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
+  ],
 };
 ```
 

package/cypress/e2e/keymaps.cy.js

@@ -216,6 +216,21 @@ describe('Keymaps', () => {
       `);
     });
 
+    it('should ignore surrounding whitespace when wrapping a single line selection', () => {
+      typeCode(' ');
+      typeCode('{leftArrow}');
+      selectToEndOfLine();
+
+      typeCode(`{shift+${modifierKey}+,}`);
+      typeCode('span');
+
+      assertCodePaneContains(dedent`
+        <span> <div>First line</div></span>
+        <div>Second line</div>
+        <div>Third line</div>
+      `);
+    });
+
     it('should wrap a multi-line selection', () => {
       typeCode('{shift+downArrow}');
       selectToEndOfLine();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "playroom",
-  "version": "0.34.2",
+  "version": "0.35.0",
   "description": "Design with code, powered by your own component library",
   "main": "utils/index.js",
   "types": "utils/index.d.ts",
@@ -72,6 +72,7 @@
     "query-string": "^7.1.3",
     "re-resizable": "^6.9.9",
     "react-docgen-typescript": "^2.2.2",
+    "react-helmet": "^6.1.0",
     "react-use": "^17.4.0",
     "read-pkg-up": "^7.0.1",
     "scope-eval": "^1.0.0",
@@ -87,6 +88,7 @@
     "@changesets/cli": "^2.25.2",
     "@octokit/rest": "^19.0.5",
     "@types/jest": "^29.2.4",
+    "@types/react-helmet": "^6.1.6",
     "concurrently": "^7.6.0",
     "cypress": "^12.0.2",
     "eslint": "^8.44.0",

package/src/Playroom/CatchErrors/CatchErrors.tsx

@@ -34,12 +34,11 @@ export default class CatchErrors extends Component<Props, State> {
     }
 
     // Ensure the stack only contains user-provided components
-    const componentStack = errorInfo
-      ? errorInfo.componentStack
-          .split('\n')
-          .filter((line: string) => /RenderCode/.test(line))
-          .map((line: string) => line.replace(/ \(created by .*/g, ''))
-      : [];
+    const componentStack =
+      errorInfo?.componentStack
+        ?.split('\n')
+        .filter((line: string) => /RenderCode/.test(line))
+        .map((line: string) => line.replace(/ \(created by .*/g, '')) ?? [];
 
     // Ignore the RenderCode container component
     const lines = componentStack.slice(0, componentStack.length - 1);

package/src/Playroom/CodeEditor/keymaps/wrap.ts

@@ -36,10 +36,13 @@ export const wrapInTag = (cm: Editor) => {
       existingIndent,
     });
 
+    const startCursorCharacterPosition =
+      from.ch + 1 + (isMultiLineSelection ? existingIndent : 0);
     const newStartCursor = new Pos(
       from.line + linesAdded,
-      from.ch + existingIndent + 1
+      startCursorCharacterPosition
     );
+
     const newEndCursor = isMultiLineSelection
       ? new Pos(to.line + linesAdded + 2, from.ch + existingIndent + 2)
       : new Pos(to.line + linesAdded, to.ch + 4);

package/src/Playroom/FramesPanel/FramesPanel.tsx

@@ -90,7 +90,7 @@ export default ({ availableWidths, availableThemes }: FramesPanelProps) => {
 
   return (
     <ToolbarPanel data-testid="frame-panel">
-      <Stack space="large" dividers>
+      <Stack space="xxxlarge">
         <div data-testid="widthsPreferences">
           <FrameHeading
             showReset={hasFilteredWidths}

package/src/Playroom/Preview.tsx

@@ -9,10 +9,12 @@ import CatchErrors from './CatchErrors/CatchErrors';
 import RenderCode from './RenderCode/RenderCode';
 
 import * as styles from './Preview.css';
+import { Helmet } from 'react-helmet';
 
 interface PreviewState {
   code?: string;
   themeName?: string;
+  title?: string;
 }
 
 export interface PreviewProps {
@@ -25,7 +27,7 @@ export interface PreviewProps {
   }>;
 }
 export default ({ themes, components, FrameComponent }: PreviewProps) => {
-  const { themeName, code } = useParams((rawParams): PreviewState => {
+  const { themeName, code, title } = useParams((rawParams): PreviewState => {
     if (rawParams.code) {
       const result = JSON.parse(
         lzString.decompressFromEncodedURIComponent(String(rawParams.code)) ?? ''
@@ -34,6 +36,7 @@ export default ({ themes, components, FrameComponent }: PreviewProps) => {
       return {
         code: compileJsx(result.code),
         themeName: result.theme,
+        title: result.title,
       };
     }
 
@@ -44,6 +47,11 @@ export default ({ themes, components, FrameComponent }: PreviewProps) => {
 
   return (
     <CatchErrors code={code}>
+      <Helmet>
+        <title>
+          {title ? `${title} | Playroom Preview` : 'Playroom Preview'}
+        </title>
+      </Helmet>
       <div className={styles.renderContainer}>
         <FrameComponent
           themeName={themeName || '__PLAYROOM__NO_THEME__'}

package/src/Playroom/PreviewPanel/PreviewPanel.tsx

@@ -29,7 +29,7 @@ export default ({ themes, visibleThemes }: PreviewPanelProps) => {
 
   return (
     <ToolbarPanel data-testid="preview-panel">
-      <Stack space="medium">
+      <Stack space="xxlarge">
         <Heading as="h4" level="3">
           Preview
         </Heading>

package/src/Playroom/SettingsPanel/SettingsPanel.css.ts

@@ -98,3 +98,22 @@ export const label = style([
     },
   },
 ]);
+
+export const textField = style([
+  sprinkles({
+    font: 'large',
+    width: 'full',
+    paddingX: 'large',
+    boxSizing: 'border-box',
+    borderRadius: 'medium',
+  }),
+  {
+    color: colorPaletteVars.foreground.neutral,
+    height: vars.touchableSize,
+    background: colorPaletteVars.background.surface,
+    '::placeholder': {
+      color: colorPaletteVars.foreground.neutralSoft,
+    },
+    border: `1px solid ${colorPaletteVars.border.standard}`,
+  },
+]);

package/src/Playroom/SettingsPanel/SettingsPanel.tsx

@@ -1,4 +1,5 @@
 import React, { useContext, type ReactChild } from 'react';
+import { Helmet } from 'react-helmet';
 import { Heading } from '../Heading/Heading';
 import { ToolbarPanel } from '../ToolbarPanel/ToolbarPanel';
 import {
@@ -73,101 +74,144 @@ const KeyboardShortcut = ({
   );
 };
 
+const getTitle = (title: string | undefined) => {
+  if (title) {
+    return `${title} | Playroom`;
+  }
+
+  const configTitle = window?.__playroomConfig__.title;
+
+  if (configTitle) {
+    return `${configTitle} | Playroom`;
+  }
+
+  return 'Playroom';
+};
+
 export default React.memo(() => {
-  const [{ editorPosition, colorScheme }, dispatch] = useContext(StoreContext);
+  const [{ editorPosition, colorScheme, title }, dispatch] =
+    useContext(StoreContext);
 
   const keybindings = getKeyBindings();
 
+  const displayedTitle = getTitle(title);
+
   return (
-    <ToolbarPanel data-testid="frame-panel">
-      <Stack space="large" dividers>
-        <fieldset className={styles.fieldset}>
-          <legend>
-            <Heading level="3">Editor Position</Heading>
-          </legend>
-          <div className={styles.radioContainer}>
-            {['Bottom', 'Right'].map((option) => (
-              <div key={option}>
-                <input
-                  type="radio"
-                  name="editorPosition"
-                  id={`editorPosition${option}`}
-                  value={option.toLowerCase()}
-                  title={option}
-                  checked={option.toLowerCase() === editorPosition}
-                  onChange={() =>
-                    dispatch({
-                      type: 'updateEditorPosition',
-                      payload: {
-                        position: option.toLowerCase() as EditorPosition,
-                      },
-                    })
-                  }
-                  className={styles.realRadio}
-                />
-                <label
-                  htmlFor={`editorPosition${option}`}
-                  className={styles.label}
-                  title={option}
-                >
-                  <span className={styles.labelText}>
-                    {positionIcon[option.toLowerCase() as EditorPosition]}
-                  </span>
-                </label>
-              </div>
-            ))}
-          </div>
-        </fieldset>
-
-        <fieldset className={styles.fieldset}>
-          <legend>
-            <Heading level="3">Color Scheme</Heading>
-          </legend>
-          <div className={styles.radioContainer}>
-            {['Light', 'Dark', 'System'].map((option) => (
-              <div key={option}>
-                <input
-                  type="radio"
-                  name="colorScheme"
-                  id={`colorScheme${option}`}
-                  value={option.toLowerCase()}
-                  title={option}
-                  checked={option.toLowerCase() === colorScheme}
-                  onChange={() =>
-                    dispatch({
-                      type: 'updateColorScheme',
-                      payload: {
-                        colorScheme: option.toLowerCase() as ColorScheme,
-                      },
-                    })
-                  }
-                  className={styles.realRadio}
-                />
-                <label
-                  htmlFor={`colorScheme${option}`}
-                  className={styles.label}
-                  title={option}
-                >
-                  <span className={styles.labelText}>
-                    {colorModeIcon[option.toLowerCase() as ColorScheme]}
-                  </span>
-                </label>
-              </div>
+    <>
+      {title === undefined ? null : (
+        <Helmet>
+          <title>{displayedTitle}</title>
+        </Helmet>
+      )}
+      <ToolbarPanel data-testid="settings-panel">
+        <Stack space="xxxlarge">
+          <label>
+            <Stack space="medium">
+              <Heading level="3">Title</Heading>
+              <input
+                type="text"
+                id="playroomTitleField"
+                placeholder="Enter a title for this Playroom..."
+                className={styles.textField}
+                value={title}
+                onChange={(e) =>
+                  dispatch({
+                    type: 'updateTitle',
+                    payload: { title: e.target.value },
+                  })
+                }
+              />
+            </Stack>
+          </label>
+
+          <fieldset className={styles.fieldset}>
+            <legend>
+              <Heading level="3">Editor Position</Heading>
+            </legend>
+            <div className={styles.radioContainer}>
+              {['Bottom', 'Right'].map((option) => (
+                <div key={option}>
+                  <input
+                    type="radio"
+                    name="editorPosition"
+                    id={`editorPosition${option}`}
+                    value={option.toLowerCase()}
+                    title={option}
+                    checked={option.toLowerCase() === editorPosition}
+                    onChange={() =>
+                      dispatch({
+                        type: 'updateEditorPosition',
+                        payload: {
+                          position: option.toLowerCase() as EditorPosition,
+                        },
+                      })
+                    }
+                    className={styles.realRadio}
+                  />
+                  <label
+                    htmlFor={`editorPosition${option}`}
+                    className={styles.label}
+                    title={option}
+                  >
+                    <span className={styles.labelText}>
+                      {positionIcon[option.toLowerCase() as EditorPosition]}
+                    </span>
+                  </label>
+                </div>
+              ))}
+            </div>
+          </fieldset>
+
+          <fieldset className={styles.fieldset}>
+            <legend>
+              <Heading level="3">Color Scheme</Heading>
+            </legend>
+            <div className={styles.radioContainer}>
+              {['Light', 'Dark', 'System'].map((option) => (
+                <div key={option}>
+                  <input
+                    type="radio"
+                    name="colorScheme"
+                    id={`colorScheme${option}`}
+                    value={option.toLowerCase()}
+                    title={option}
+                    checked={option.toLowerCase() === colorScheme}
+                    onChange={() =>
+                      dispatch({
+                        type: 'updateColorScheme',
+                        payload: {
+                          colorScheme: option.toLowerCase() as ColorScheme,
+                        },
+                      })
+                    }
+                    className={styles.realRadio}
+                  />
+                  <label
+                    htmlFor={`colorScheme${option}`}
+                    className={styles.label}
+                    title={option}
+                  >
+                    <span className={styles.labelText}>
+                      {colorModeIcon[option.toLowerCase() as ColorScheme]}
+                    </span>
+                  </label>
+                </div>
+              ))}
+            </div>
+          </fieldset>
+
+          <Stack space="xlarge">
+            <Heading level="3">Keyboard Shortcuts</Heading>
+            {Object.entries(keybindings).map(([description, keybinding]) => (
+              <KeyboardShortcut
+                description={description}
+                keybinding={keybinding}
+                key={description}
+              />
             ))}
-          </div>
-        </fieldset>
-
-        <Stack space="medium">
-          <Heading level="3">Keyboard Shortcuts</Heading>
-          {Object.entries(keybindings).map(([description, keybinding]) => (
-            <KeyboardShortcut
-              description={description}
-              keybinding={keybinding}
-              key={description}
-            />
-          ))}
+          </Stack>
         </Stack>
-      </Stack>
-    </ToolbarPanel>
+      </ToolbarPanel>
+    </>
   );
 });

package/src/Playroom/Stack/Stack.css.ts

@@ -1,5 +1,4 @@
-import { calc } from '@vanilla-extract/css-utils';
-import { style, createVar } from '@vanilla-extract/css';
+import { style, createVar, styleVariants } from '@vanilla-extract/css';
 import { vars } from '../sprinkles.css';
 
 const size = createVar();
@@ -12,38 +11,8 @@ export const gap = style({
   },
 });
 
-export const xxsmall = style({
+export const spaceScale = styleVariants(vars.space, (space) => ({
   vars: {
-    [size]: vars.grid,
+    [size]: space,
   },
-});
-
-export const xsmall = style({
-  vars: {
-    [size]: calc(vars.grid).multiply(2).toString(),
-  },
-});
-
-export const small = style({
-  vars: {
-    [size]: calc(vars.grid).multiply(3).toString(),
-  },
-});
-
-export const medium = style({
-  vars: {
-    [size]: calc(vars.grid).multiply(4).toString(),
-  },
-});
-
-export const large = style({
-  vars: {
-    [size]: calc(vars.grid).multiply(6).toString(),
-  },
-});
-
-export const xlarge = style({
-  vars: {
-    [size]: calc(vars.grid).multiply(12).toString(),
-  },
-});
+}));

package/src/Playroom/Stack/Stack.tsx

@@ -15,14 +15,7 @@ type ReactNodeNoStrings =
 
 interface Props {
   children: ReactNodeNoStrings;
-  space:
-    | 'none'
-    | 'xxsmall'
-    | 'xsmall'
-    | 'small'
-    | 'medium'
-    | 'large'
-    | 'xlarge';
+  space: keyof typeof styles.spaceScale;
   dividers?: boolean;
 }
 
@@ -31,7 +24,7 @@ export const Stack = ({ children, space, dividers = false }: Props) => (
     {Children.toArray(children).map((item, index) => (
       <div
         key={index}
-        className={classnames(styles.gap, space !== 'none' && styles[space])}
+        className={classnames(styles.gap, styles.spaceScale[space])}
       >
         {dividers && index > 0 ? (
           <div className={styles.gap}>

package/src/Playroom/sprinkles.css.ts

@@ -42,6 +42,7 @@ export const vars = createGlobalTheme(':root', {
     large: '12px',
     xlarge: '16px',
     xxlarge: '20px',
+    xxxlarge: '28px',
     gutter: '40px',
   },
 });

package/src/StoreContext/StoreContext.tsx

@@ -40,6 +40,7 @@ interface DebounceUpdateUrl {
   code?: string;
   themes?: string[];
   widths?: number[];
+  title?: string;
 }
 
 export interface CursorPosition {
@@ -55,6 +56,7 @@ interface StatusMessage {
 type ToolbarPanel = 'snippets' | 'frames' | 'preview' | 'settings';
 interface State {
   code: string;
+  title?: string;
   previewRenderCode?: string;
   previewEditorCode?: string;
   highlightLineNumber?: number;
@@ -104,7 +106,8 @@ type Action =
   | { type: 'updateVisibleThemes'; payload: { themes: string[] } }
   | { type: 'resetVisibleThemes' }
   | { type: 'updateVisibleWidths'; payload: { widths: number[] } }
-  | { type: 'resetVisibleWidths' };
+  | { type: 'resetVisibleWidths' }
+  | { type: 'updateTitle'; payload: { title: string } };
 
 const resetPreview = ({
   previewRenderCode,
@@ -383,6 +386,16 @@ const createReducer =
         return restState;
       }
 
+      case 'updateTitle': {
+        const { title } = action.payload;
+        store.setItem('title', title);
+
+        return {
+          ...state,
+          title,
+        };
+      }
+
       default:
         return state;
     }
@@ -439,12 +452,14 @@ export const StoreProvider = ({
     let codeFromQuery: State['code'];
     let themesFromQuery: State['visibleThemes'];
     let widthsFromQuery: State['visibleWidths'];
+    let titleFromQuery: State['title'];
 
     if (params.code) {
       const {
         code: parsedCode,
         themes: parsedThemes,
         widths: parsedWidths,
+        title: parsedTitle,
       } = JSON.parse(
         lzString.decompressFromEncodedURIComponent(String(params.code)) ?? ''
       );
@@ -452,6 +467,7 @@ export const StoreProvider = ({
       codeFromQuery = parsedCode;
       themesFromQuery = parsedThemes;
       widthsFromQuery = parsedWidths;
+      titleFromQuery = parsedTitle;
     }
 
     Promise.all([
@@ -462,6 +478,7 @@ export const StoreProvider = ({
       store.getItem<number[]>('visibleWidths'),
       store.getItem<string[]>('visibleThemes'),
       store.getItem<ColorScheme>('colorScheme'),
+      store.getItem<string | undefined>('title'),
     ]).then(
       ([
         storedCode,
@@ -471,14 +488,21 @@ export const StoreProvider = ({
         storedVisibleWidths,
         storedVisibleThemes,
         storedColorScheme,
+        storedTitle,
       ]) => {
         const code = codeFromQuery || storedCode || exampleCode;
         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({
@@ -491,6 +515,7 @@ export const StoreProvider = ({
             ...(visibleThemes ? { visibleThemes } : {}),
             ...(visibleWidths ? { visibleWidths } : {}),
             ...(colorScheme ? { colorScheme } : {}),
+            title: titleFromQuery ?? storedTitle ?? undefined,
             ready: true,
           },
         });
@@ -521,11 +546,13 @@ export const StoreProvider = ({
       code: state.code,
       themes: state.visibleThemes,
       widths: state.visibleWidths,
+      title: state.title,
     });
   }, [
     state.code,
     state.visibleThemes,
     state.visibleWidths,
+    state.title,
     debouncedCodeUpdate,
   ]);
 

package/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 {

package/src/utils/usePreviewUrl.ts

@@ -9,7 +9,7 @@ const baseUrl = window.location.href
   .split('index.html')[0];
 
 export default (theme: string) => {
-  const [{ code }] = useContext(StoreContext);
+  const [{ code, title }] = useContext(StoreContext);
 
   const isThemed = theme !== '__PLAYROOM__NO_THEME__';
 
@@ -18,5 +18,6 @@ export default (theme: string) => {
     code,
     theme: isThemed ? theme : undefined,
     paramType: playroomConfig.paramType,
+    title,
   });
 };

package/utils/index.d.ts

@@ -13,6 +13,7 @@ interface CompressParamsOptions {
   themes?: string[];
   widths?: number[];
   theme?: string;
+  title?: string;
 }
 export const compressParams: (options: CompressParamsOptions) => string;
 
@@ -22,6 +23,7 @@ interface CreateUrlOptions {
   themes?: string[];
   widths?: number[];
   paramType?: ParamType;
+  title?: string;
 }
 
 export const createUrl: (options: CreateUrlOptions) => string;
@@ -31,6 +33,7 @@ interface CreatePreviewUrlOptions {
   code?: string;
   theme?: string;
   paramType?: ParamType;
+  title?: string;
 }
 
 export const createPreviewUrl: (options: CreatePreviewUrlOptions) => string;

package/utils/index.js

@@ -1,21 +1,29 @@
 const lzString = require('lz-string');
 
-const compressParams = ({ code, themes, widths, theme }) => {
+const compressParams = ({ code, themes, widths, theme, title }) => {
   const data = JSON.stringify({
     ...(code ? { code } : {}),
     ...(themes ? { themes } : {}),
     ...(widths ? { widths } : {}),
     ...(theme ? { theme } : {}),
+    ...(title ? { title } : {}),
   });
 
   return lzString.compressToEncodedURIComponent(data);
 };
 
-const createUrl = ({ baseUrl, code, themes, widths, paramType = 'hash' }) => {
+const createUrl = ({
+  baseUrl,
+  code,
+  themes,
+  widths,
+  title,
+  paramType = 'hash',
+}) => {
   let path = '';
 
-  if (code || themes || widths) {
-    const compressedData = compressParams({ code, themes, widths });
+  if (code || themes || widths || title) {
+    const compressedData = compressParams({ code, themes, widths, title });
 
     path = `${paramType === 'hash' ? '#' : ''}?code=${compressedData}`;
   }
@@ -29,11 +37,17 @@ const createUrl = ({ baseUrl, code, themes, widths, paramType = 'hash' }) => {
   return path;
 };
 
-const createPreviewUrl = ({ baseUrl, code, theme, paramType = 'hash' }) => {
+const createPreviewUrl = ({
+  baseUrl,
+  code,
+  theme,
+  title,
+  paramType = 'hash',
+}) => {
   let path = '';
 
-  if (code || theme) {
-    const compressedData = compressParams({ code, theme });
+  if (code || theme || title) {
+    const compressedData = compressParams({ code, theme, title });
 
     path = `/preview/${paramType === 'hash' ? '#' : ''}?code=${compressedData}`;
   }