playroom 1.0.3 → 1.0.5

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # playroom
 
+## 1.0.5
+
+### Patch Changes
+
+- [#467](https://github.com/seek-oss/playroom/pull/467) [`fad3b7f`](https://github.com/seek-oss/playroom/commit/fad3b7fc3fb7e58ee240595ba99994bc2701d5c2) Thanks [@askoufis](https://github.com/askoufis)! - Remove unused code, remove unused deps, update `sucrase` to latest version
+
+## 1.0.4
+
+### Patch Changes
+
+- [#465](https://github.com/seek-oss/playroom/pull/465) [`63a512b`](https://github.com/seek-oss/playroom/commit/63a512bf8c33d5af15a254dba8d4efd69a886df4) Thanks [@michaeltaranto](https://github.com/michaeltaranto)! - Only show available themes and widths
+
+  Ensure that themes or widths selected via the URL or from storage are valid options.
+
 ## 1.0.3
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "playroom",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "description": "Design with code, powered by your own component library",
   "bin": {
     "playroom": "bin/cli.cjs"
@@ -52,7 +52,6 @@
     "@capsizecss/metrics": "^3.5.0",
     "@capsizecss/vanilla-extract": "^2.0.4",
     "@soda/friendly-errors-webpack-plugin": "^1.8.1",
-    "@types/base64-url": "^2.2.0",
     "@types/codemirror": "^5.60.5",
     "@types/prettier": "^2.7.1",
     "@types/react": "^18.0.0 || ^19.0.0",
@@ -88,7 +87,7 @@
     "react-error-boundary": "^4.0.13",
     "read-pkg-up": "^7.0.1",
     "scope-eval": "^1.0.0",
-    "sucrase": "^3.34.0",
+    "sucrase": "^3.35.1",
     "tinyglobby": "^0.2.12",
     "typescript": ">=5.0.0",
     "use-debounce": "^10.0.0",
@@ -104,7 +103,6 @@
     "@testing-library/cypress": "^10.1.0",
     "@types/jest": "^29.2.4",
     "@types/node": "^18.11.9",
-    "@types/webpack-env": "^1.18.8",
     "concurrently": "^9.1.2",
     "cypress": "^15.5.0",
     "eslint": "^9.23.0",

package/src/components/Button/Button.css.ts

@@ -4,7 +4,7 @@ import { minTouchableBeforePseudo } from '../../css/shared.css';
 import { sprinkles, colorPaletteVars } from '../../css/sprinkles.css';
 import { vars } from '../../css/vars.css';
 
-export const sizeVar = createVar();
+const sizeVar = createVar();
 
 const reset = style([
   sprinkles({

package/src/components/ButtonIcon/ButtonIcon.css.ts

@@ -12,8 +12,8 @@ import { minTouchableBeforePseudo } from '../../css/shared.css';
 import { colorPaletteVars, sprinkles } from '../../css/sprinkles.css';
 import { vars } from '../../css/vars.css';
 
-export const sizeVar = createVar();
-export const foreground = createVar();
+const sizeVar = createVar();
+const foreground = createVar();
 
 export const button = style([
   sprinkles({

package/src/components/ButtonIcon/ButtonIcon.tsx

@@ -57,7 +57,7 @@ export const ButtonIcon = forwardRef<HTMLButtonElement, ButtonIconProps>(
   )
 );
 
-export type AnchorElementProps = Omit<
+type AnchorElementProps = Omit<
   AllHTMLAttributes<HTMLAnchorElement>,
   'style' | 'className' | 'size'
 > & {

package/src/components/CodeEditor/CodeMirror2.tsx

@@ -26,34 +26,34 @@ if (!SERVER_RENDERED) {
   cm = require('codemirror');
 }
 
-export interface IDefineModeOptions {
+interface IDefineModeOptions {
   fn: () => codemirror.Mode<any>;
   name: string;
 }
 
-export interface ISetScrollOptions {
+interface ISetScrollOptions {
   x?: number | null;
   y?: number | null;
 }
 
-export interface ISetSelectionOptions {
+interface ISetSelectionOptions {
   anchor: codemirror.Position;
   head: codemirror.Position;
 }
 
-export interface DomEvent {
+interface DomEvent {
   (editor: codemirror.Editor, event?: any): void;
 }
 
-export interface KeyHandledEvent {
+interface KeyHandledEvent {
   (editor: codemirror.Editor, name: string, event: any): void;
 }
 
-export interface EditorChangeEvent {
+interface EditorChangeEvent {
   (editor: codemirror.Editor, changeObj: codemirror.EditorChange): void;
 }
 
-export interface ICodeMirror {
+interface ICodeMirror {
   autoCursor?: boolean; // default: true
   autoScroll?: boolean; // default: false
   className?: string;
@@ -116,7 +116,7 @@ export interface ICodeMirror {
   scroll?: ISetScrollOptions;
 }
 
-export interface IControlledCodeMirror extends ICodeMirror {
+interface IControlledCodeMirror extends ICodeMirror {
   onBeforeChange: (
     editor: codemirror.Editor,
     data: codemirror.EditorChange,
@@ -125,7 +125,7 @@ export interface IControlledCodeMirror extends ICodeMirror {
   value: string;
 }
 
-export interface IUnControlledCodeMirror extends ICodeMirror {
+interface IUnControlledCodeMirror extends ICodeMirror {
   detach?: boolean;
   editorDidAttach?: (editor: codemirror.Editor) => void;
   editorDidDetach?: (editor: codemirror.Editor) => void;

package/src/components/CodeEditor/editorCommands.ts

@@ -32,7 +32,7 @@ export type EditorCommand =
   | 'addCursorToPrevLine'
   | 'addCursorToNextLine';
 
-export interface EditorCommandMeta {
+interface EditorCommandMeta {
   command: EditorCommand;
   label: string;
   shortcut: string[];

package/src/components/ContextMenu/ContextMenu.tsx

@@ -97,10 +97,6 @@ export const ContextMenuItemLink = ({
   />
 );
 
-export const ContextMenuSeparator = () => (
-  <BaseUIContextMenu.Separator className={menuStyles.separator} />
-);
-
 type Props = {
   trigger: ComponentProps<typeof BaseUIContextMenu.Trigger>['render'];
   align?: ComponentProps<typeof BaseUIContextMenu.Positioner>['align'];

package/src/components/EditorActions/EditorActions.css.ts

@@ -20,19 +20,6 @@ export const root = style([
   },
 ]);
 
-export const syntaxErrorsContainer = style([
-  sprinkles({
-    paddingX: 'xsmall',
-    paddingY: 'xxsmall',
-    display: 'flex',
-    alignItems: 'center',
-    boxSizing: 'border-box',
-  }),
-  {
-    height: vars.buttonSizes.medium,
-  },
-]);
-
 export const button = style([
   sprinkles({
     paddingX: 'xsmall',
@@ -68,7 +55,3 @@ export const button = style([
     },
   },
 ]);
-
-export const snippetsPopupWidth = style({
-  width: 'min(300px, 90vw)',
-});

package/src/components/Frame/frameMessenger.tsx

@@ -68,25 +68,6 @@ export const ErrorMessageReceiver = ({ size }: ReceiveErrorMessageProps) => {
  */
 const playroomScreenshotSource = 'Playroom Frame Screenshot';
 
-type ScreenshoMessage = {
-  messageWindow: Window;
-} & ({ action: 'copy' } | { action: 'download'; fileName: string });
-
-export const screenshotMessageSender = ({
-  messageWindow,
-  action,
-  ...restProps
-}: ScreenshoMessage) => {
-  messageWindow.postMessage({
-    source: playroomScreenshotSource,
-    action,
-    fileName:
-      action === 'download' && 'fileName' in restProps
-        ? restProps.fileName
-        : undefined,
-  });
-};
-
 const renderDocumentToCanvas = async (doc: Document) => {
   const result = await snapdom(doc.documentElement, {
     embedFonts: true,

package/src/components/Frames/FrameActionButton.css.ts

@@ -9,7 +9,7 @@ import { calc } from '@vanilla-extract/css-utils';
 import { colorPaletteVars, sprinkles } from '../../css/sprinkles.css';
 import { vars } from '../../css/vars.css';
 
-export const foreground = createVar();
+const foreground = createVar();
 
 export const button = style([
   sprinkles({

package/src/components/Frames/Frames.css.ts

@@ -26,7 +26,7 @@ export const root = style([
 
 export const frameWidth = createVar();
 
-export const frameActive = style({});
+const frameActive = style({});
 
 export const frameContainer = style([
   sprinkles({

package/src/components/Menu/Menu.css.ts

@@ -106,7 +106,7 @@ export const critical = style({
   color: colorPaletteVars.foreground.critical,
 });
 
-export const positive = style({
+const positive = style({
   color: colorPaletteVars.foreground.positive,
   vars: {
     [highlightColor]: 'transparent',
@@ -227,15 +227,6 @@ export const separator = style([
   },
 ]);
 
-export const shortcut = style({
-  display: 'grid',
-  gridAutoFlow: 'column',
-  gridAutoColumns: '1fr',
-  alignItems: 'baseline',
-  justifyItems: 'center',
-  isolation: 'isolate',
-});
-
 const clearItemPadding = 'xsmall';
 export const clearItem = style([
   sprinkles({

package/src/components/Menu/Menu.tsx

@@ -10,13 +10,11 @@ import {
   type AllHTMLAttributes,
   type ComponentProps,
   type ReactElement,
-  type ReactNode,
   createContext,
   forwardRef,
   useContext,
 } from 'react';
 
-import { useCopy } from '../../utils/useCopy';
 import {
   KeyboardShortcut,
   type KeyCombination,
@@ -310,34 +308,6 @@ export const Menu = forwardRef<HTMLButtonElement, Props>(
   }
 );
 
-type MenuCopyItemProps = {
-  content: string;
-  children: ReactNode;
-};
-
-export const MenuCopyItem = ({ content, children }: MenuCopyItemProps) => {
-  const { copying, onCopyClick } = useCopy();
-
-  return (
-    <BaseUIMenu.Item
-      className={clsx({ [styles.item]: true, [styles.positive]: copying })}
-      closeOnClick={false}
-      onClick={() => onCopyClick(content)}
-    >
-      <span className={styles.itemLeft}>
-        {copying ? (
-          <>
-            <Text tone="positive">Copied</Text>
-            <Check size={menuIconSize} />
-          </>
-        ) : (
-          <Text>{children}</Text>
-        )}
-      </span>
-    </BaseUIMenu.Item>
-  );
-};
-
 type MenuClearItemProps = Omit<
   ComponentProps<typeof BaseUIMenu.Item>,
   'render' | 'className'

package/src/components/Playroom/Playroom.css.ts

@@ -32,7 +32,6 @@ export const resizing = style({
 const editorHeight = createVar();
 const editorWidth = createVar();
 export const editorSize = createVar();
-export const assistantWidth = createVar();
 export const root = style([
   sprinkles({
     height: 'viewport',

package/src/components/Snippets/Snippets.css.ts

@@ -117,15 +117,6 @@ export const snippet = style([
   },
 ]);
 
-export const snippetName = style([
-  sprinkles({
-    display: 'block',
-  }),
-  {
-    color: colorPaletteVars.foreground.secondary,
-  },
-]);
-
 export const groupName = style([
   sprinkles({
     paddingRight: 'xsmall',

package/src/components/Text/Text.tsx

@@ -14,7 +14,7 @@ interface Props {
   children: ReactNode;
 }
 
-export const Truncate = ({ children }: { children: ReactNode }) => (
+const Truncate = ({ children }: { children: ReactNode }) => (
   <span className={styles.truncate}>{children}</span>
 );
 

package/src/components/Title/Title.css.ts

@@ -11,8 +11,8 @@ export const fieldContainer = sprinkles({
   alignItems: 'center',
 });
 
-export const titleWeight = 'strong';
-export const titleSize = 'standard';
+const titleWeight = 'strong';
+const titleSize = 'standard';
 
 const paddingX = 'small';
 export const textField = style([

package/src/components/ZeroState/ZeroState.tsx

@@ -51,7 +51,7 @@ export const ZeroState = () => {
 
   return (
     <ScrollContainer direction="vertical">
-      <div className={styles.root} data-testid="zeroState">
+      <div className={styles.root}>
         <div className={styles.maxWidth}>
           <Stack space="xxxlarge">
             <Text size="large">

package/src/contexts/StoreContext.tsx

@@ -41,8 +41,8 @@ const defaultOrientation = 'horizontal';
 const defaultOpenLayout = 'grid';
 
 export type EditorOrientation = 'horizontal' | 'vertical';
-export type ColorScheme = 'light' | 'dark' | 'system';
-export type OpenLayout = 'grid' | 'list';
+type ColorScheme = 'light' | 'dark' | 'system';
+type OpenLayout = 'grid' | 'list';
 
 const applyColorScheme = (colorScheme: Exclude<ColorScheme, 'system'>) => {
   document.documentElement[
@@ -587,8 +587,26 @@ export const StoreProvider = ({ children }: { children: ReactNode }) => {
         openLayout,
         storedPlayrooms,
       ]) => {
-        const selectedWidths = widthsFromUrl || storedSelectedWidths;
-        const selectedThemes = themesFromUrl || storedSelectedThemes;
+        const filteredUrlWidths = widthsFromUrl
+          ? availableWidths.filter((w) => widthsFromUrl.includes(w))
+          : [];
+        const filteredStoredSelectedWidths = storedSelectedWidths
+          ? availableWidths.filter((w) => storedSelectedWidths.includes(w))
+          : [];
+        const selectedWidths = filteredUrlWidths.length
+          ? filteredUrlWidths
+          : filteredStoredSelectedWidths;
+
+        const filteredUrlThemes = themesFromUrl
+          ? availableThemes.filter((t) => themesFromUrl.includes(t))
+          : [];
+        const filteredStoredSelectedThemes = storedSelectedThemes
+          ? availableThemes.filter((t) => storedSelectedThemes.includes(t))
+          : [];
+        const selectedThemes = filteredUrlThemes.length
+          ? filteredUrlThemes
+          : filteredStoredSelectedThemes;
+
         const storedPlayroomValues = Object.entries(storedPlayrooms || {});
         let id = code || title ? createPlayroomId() : '';
 
@@ -613,8 +631,10 @@ export const StoreProvider = ({ children }: { children: ReactNode }) => {
             ...(editorHeight ? { editorHeight } : {}),
             ...(editorWidth ? { editorWidth } : {}),
             ...(editorHidden ? { editorHidden } : {}),
-            ...(themesEnabled && selectedThemes ? { selectedThemes } : {}),
-            ...(selectedWidths ? { selectedWidths } : {}),
+            ...(themesEnabled && selectedThemes.length > 0
+              ? { selectedThemes }
+              : {}),
+            ...(selectedWidths.length > 0 ? { selectedWidths } : {}),
             ...(colorScheme ? { colorScheme } : {}),
             ...(openLayout ? { openLayout } : {}),
             ...(storedPlayrooms

package/src/publicTypes.ts

@@ -1,4 +1,4 @@
-export interface Snippet {
+interface Snippet {
   group: string;
   name: string;
   code: string;

package/src/utils/compileJsx.ts

@@ -5,8 +5,8 @@ import { transform } from 'sucrase';
 export const ReactFragmentPragma = 'R_F';
 export const ReactCreateElementPragma = 'R_cE';
 
-export const openFragmentTag = '<>';
-export const closeFragmentTag = '</>';
+const openFragmentTag = '<>';
+const closeFragmentTag = '</>';
 
 const wrapInFragment = (code: string) =>
   `${openFragmentTag}${code}${closeFragmentTag}`;

package/src/utils/formatting.ts

@@ -6,14 +6,14 @@ import type { CursorPosition } from '../contexts/StoreContext';
 
 import { insertAtCursor } from './cursor';
 
-export interface CodeWithCursor {
+interface CodeWithCursor {
   code: string;
   cursor: CursorPosition;
 }
 
 export const isMac = () => Boolean(navigator.platform.match('Mac'));
 
-export const runPrettier = ({
+const runPrettier = ({
   code,
   cursorOffset,
 }: {
@@ -59,10 +59,10 @@ export const cursorOffsetToPosition = (
   };
 };
 
-export const wrapJsx = (code: string) => `<>\n${code}\n</>`;
+const wrapJsx = (code: string) => `<>\n${code}\n</>`;
 
 // Removes `<>\n`  and `\n</>` and unindents the two spaces due to the wrapping
-export const unwrapJsx = (code: string) => {
+const unwrapJsx = (code: string) => {
   if (code.startsWith('<>\n')) {
     // Multi-line: remove indentation, then unwrap
     return code.replace(/\n {2}/g, '\n').slice(3, -5);

package/src/utils/params.ts

@@ -28,7 +28,7 @@ export function updateUrlCode(code: string) {
   history.replace(createUrlForData(code));
 }
 
-export function getParamsFromQuery(location = history.location) {
+function getParamsFromQuery(location = history.location) {
   try {
     // Prefer checking `hash`, fall back to `search` in case the user has configured a custom
     // `frameSrc` function that uses search params instead of the hash