playroom 0.34.2 → 0.36.0

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/Toolbar/Toolbar.tsx

@@ -81,7 +81,7 @@ export default ({ themes: allThemes, widths: allWidths, snippets }: Props) => {
             {hasSnippets && (
               <ToolbarItem
                 active={isSnippetsOpen}
-                title={`Insert snippet (${isMac() ? '\u2318' : 'Ctrl + '}K)`}
+                title={`Insert snippet (${isMac() ? '⌘K' : 'Ctrl+K'})`}
                 disabled={!validCursorPosition}
                 data-testid="toggleSnippets"
                 onClick={() => {
@@ -127,7 +127,7 @@ export default ({ themes: allThemes, widths: allWidths, snippets }: Props) => {
 
           <div>
             <ToolbarItem
-              title="Copy link to clipboard"
+              title={`Copy Playroom link (${isMac() ? '⌘⇧C' : 'Ctrl+Shift+C'})`}
               success={copying}
               onClick={copyHandler}
               data-testid="copyToClipboard"

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,
@@ -159,7 +162,7 @@ const createReducer =
           statusMessage:
             trigger === 'toolbarItem'
               ? {
-                  message: 'Copied to clipboard',
+                  message: 'Copied Playroom link to clipboard',
                   tone: 'positive',
                 }
               : undefined,
@@ -383,6 +386,15 @@ const createReducer =
         return restState;
       }
 
+      case 'updateTitle': {
+        const { title } = action.payload;
+
+        return {
+          ...state,
+          title,
+        };
+      }
+
       default:
         return state;
     }
@@ -439,19 +451,23 @@ export const StoreProvider = ({
     let codeFromQuery: State['code'];
     let themesFromQuery: State['visibleThemes'];
     let widthsFromQuery: State['visibleWidths'];
+    let titleFromQuery: State['title'];
 
-    if (params.code) {
+    const paramsCode = params.get('code');
+    if (paramsCode) {
       const {
         code: parsedCode,
         themes: parsedThemes,
         widths: parsedWidths,
+        title: parsedTitle,
       } = JSON.parse(
-        lzString.decompressFromEncodedURIComponent(String(params.code)) ?? ''
+        lzString.decompressFromEncodedURIComponent(String(paramsCode)) ?? ''
       );
 
       codeFromQuery = parsedCode;
       themesFromQuery = parsedThemes;
       widthsFromQuery = parsedWidths;
+      titleFromQuery = parsedTitle;
     }
 
     Promise.all([
@@ -476,9 +492,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({
@@ -491,6 +513,7 @@ export const StoreProvider = ({
             ...(visibleThemes ? { visibleThemes } : {}),
             ...(visibleWidths ? { visibleWidths } : {}),
             ...(colorScheme ? { colorScheme } : {}),
+            title: titleFromQuery,
             ready: true,
           },
         });
@@ -521,11 +544,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/params.ts

@@ -1,6 +1,5 @@
 import { createBrowserHistory } from 'history';
 import { useState, useEffect } from 'react';
-import queryString, { type ParsedQuery } from 'query-string';
 
 import playroomConfig from '../config';
 
@@ -11,10 +10,8 @@ export function updateUrlCode(code: string) {
 
   const existingQuery = getParamsFromQuery();
 
-  const newQuery = queryString.stringify({
-    ...existingQuery,
-    code,
-  });
+  const newQuery = new URLSearchParams(existingQuery);
+  newQuery.set('code', code);
 
   const params =
     playroomConfig.paramType === 'hash' ? `#?${newQuery}` : `?${newQuery}`;
@@ -24,18 +21,18 @@ export function updateUrlCode(code: string) {
 
 export function getParamsFromQuery(location = history.location) {
   try {
-    return queryString.parse(
+    return new URLSearchParams(
       playroomConfig.paramType === 'hash'
         ? location.hash.replace(/^#/, '')
         : location.search
     );
   } catch (err) {
-    return {};
+    return new URLSearchParams();
   }
 }
 
 export function useParams<ReturnType>(
-  selector: (rawParams: ParsedQuery) => ReturnType
+  selector: (rawParams: URLSearchParams) => ReturnType
 ): ReturnType {
   const [params, setParams] = useState(getParamsFromQuery);
 

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}`;
   }