Reboot Polaris patterns (#7843)

## Reboot Pattern Guidance
See [Reboot Polaris patterns vault
project](https://vault.shopify.io/gsd/projects/30559)

- New layout primitives `Stack`, `Box`, `Grid`, `Row`.
- Playroom patched to support larger code snippets.
- New designs and content for the
[patterns](https://polaris.shopify.com/patterns) pages.
- Deprecated old patterns:
  ||Old|New|
  |--|--|--|
  |**design-patterns** | `/patterns/design-patterns` | `404`|
  |**page-layouts** | `/patterns/page-layouts` | `404`|
|**error-messages** | `/patterns/error-messages` |
`/content/error-messages`|
|**help-content** | `/patterns/help-content` | `/content/help-content`|
  |**loading** | `/patterns/loading` | `/patterns-legacy/loading`|
  |**new-badge** | `/patterns/new-badge` | `/patterns-legacy/new-badge`|
  |**pickers** | `/patterns/pickers` | `/patterns-legacy/pickers`|
|**text-fields** | `/patterns/text-fields` |
`/patterns-legacy/text-fields`|
- Page padding and max-width adjusted such that live previews for
components and patterns always display the desktop breakpoint.


### How to 🎩

🖥 [Local development
instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development)
🗒 [General tophatting
guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md)
📄 [Changelog
guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog)

<!--
  Give as much information as needed to experiment with the component
  in the playground.
-->

<details>
<summary>Copy-paste this code in
<code>playground/Playground.tsx</code>:</summary>

```jsx
import React from 'react';
import {Page} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      {/* Add the code you want to test in here */}
    </Page>
  );
}
```

</details>

### 🎩 checklist

- [ ] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [ ] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [ ] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [ ] Updated the component's `README.md` with documentation changes
- [ ] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide

---------

Co-authored-by: Raquel Breternitz <raquelbreternitz@gmail.com>
Co-authored-by: Raquel Breternitz <raquel.breternitz@shopify.com>
Co-authored-by: Jess Telford <jess+github@jes.st>
Co-authored-by: Jess Telford <jess.telford@shopify.com>

Author: 4 people

.changeset/tame-adults-wash.md

@@ -0,0 +1,21 @@
+---
+'polaris.shopify.com': minor
+---
+
+## Reboot Pattern Guidance
+
+- New layout primitives `Stack`, `Box`, `Grid`, `Row`.
+- Playroom patched to support larger code snippets.
+- New designs and content for the [patterns](https://polaris.shopify.com/patterns) pages.
+- Deprecated old patterns:
+  ||Old|New|
+  |--|--|--|
+  |**design-patterns** | `/patterns/design-patterns` | `404`|
+  |**page-layouts** | `/patterns/page-layouts` | `404`|
+  |**error-messages** | `/patterns/error-messages` | `/content/error-messages`|
+  |**help-content** | `/patterns/help-content` | `/content/help-content`|
+  |**loading** | `/patterns/loading` | `/patterns-legacy/loading`|
+  |**new-badge** | `/patterns/new-badge` | `/patterns-legacy/new-badge`|
+  |**pickers** | `/patterns/pickers` | `/patterns-legacy/pickers`|
+  |**text-fields** | `/patterns/text-fields` | `/patterns-legacy/text-fields`|
+- Page padding and max-width adjusted such that live previews for components and patterns always display the desktop breakpoint.

.gitignore

@@ -8,6 +8,7 @@
 .turbo
 dist
 node_modules
+Session.vim
 /polaris-react/build
 /polaris-react/build-internal
 /polaris-react/src/styles/_media-queries.scss

patches/playroom+0.28.0.patch

@@ -5,15 +5,15 @@ index 6c82bbe..f05b80b 100644
 @@ -160,6 +160,12 @@ export { themeB } from './themeB';
  // etc...
  ```
- 
+
 +## Additional Code Transformations
 +
 +A hook into the internal processing of code is available via the `processCode` option, which is a path to a file that exports a function that receives the code as entered into the editor, and returns the new code to be rendered.
 +
 +One example is [wrapping code in an IIFE for state support](https://github.com/seek-oss/playroom/issues/66).
 +
  ## TypeScript Support
- 
+
  If a `tsconfig.json` file is present in your project, static prop types are parsed using [react-docgen-typescript](https://github.com/styleguidist/react-docgen-typescript) to provide better autocompletion in the Playroom editor.
 diff --git a/node_modules/playroom/lib/defaultModules/processCode.js b/node_modules/playroom/lib/defaultModules/processCode.js
 new file mode 100644
@@ -36,6 +36,173 @@ index 56defa7..1e7cf3b 100644
        },
      },
      module: {
+diff --git a/node_modules/playroom/src/Playroom/Frame.tsx b/node_modules/playroom/src/Playroom/Frame.tsx
+index b175d74..ce3e7ef 100644
+--- a/node_modules/playroom/src/Playroom/Frame.tsx
++++ b/node_modules/playroom/src/Playroom/Frame.tsx
+@@ -1,9 +1,9 @@
+-import React from 'react';
+-import { useParams } from '../utils/params';
++import React, { useEffect, useState } from 'react';
+ // @ts-ignore
+ import CatchErrors from './CatchErrors/CatchErrors';
+ // @ts-ignore
+ import RenderCode from './RenderCode/RenderCode';
++import { INCOMING_CODE, READY_TO_RECEIVE } from './constants';
+
+ interface FrameProps {
+   themes: Record<string, any>;
+@@ -18,11 +18,21 @@ export default function Frame({
+   components,
+   FrameComponent,
+ }: FrameProps) {
+-  const { themeName, code } = useParams((rawParams) => ({
+-    themeName:
+-      typeof rawParams.themeName === 'string' ? rawParams.themeName : '',
+-    code: typeof rawParams.code === 'string' ? rawParams.code : '',
+-  }));
++  const [code, setCode] = useState(`/*#__PURE__*/
++  React.createElement(React.Fragment, null);`);
++  const [themeName, setThemeName] = useState('');
++  useEffect(() => {
++    const listener = (e: any) => {
++      if (e.data && e.data.type === INCOMING_CODE ) {
++        setCode(e.data.code);
++        setThemeName(e.data.themeName);
++      };
++
++    }
++    window.addEventListener('message', listener);
++    window.parent.postMessage({ type: READY_TO_RECEIVE, ready: true }, window.origin);
++    return () => window.removeEventListener('message', listener);
++  }, []);
+
+   const resolvedThemeName =
+     themeName === '__PLAYROOM__NO_THEME__' ? null : themeName;
+diff --git a/node_modules/playroom/src/Playroom/Frames/Frames.tsx b/node_modules/playroom/src/Playroom/Frames/Frames.tsx
+index 5b4af43..3bb2615 100644
+--- a/node_modules/playroom/src/Playroom/Frames/Frames.tsx
++++ b/node_modules/playroom/src/Playroom/Frames/Frames.tsx
+@@ -6,7 +6,6 @@ import { PlayroomProps } from '../Playroom';
+ import { Strong } from '../Strong/Strong';
+ import { Text } from '../Text/Text';
+ import playroomConfig from '../../config';
+-import frameSrc from './frameSrc';
+
+ import * as styles from './Frames.css';
+
+@@ -44,10 +43,9 @@ export default function Frames({ code, themes, widths }: FramesProps) {
+             <div className={styles.frameBorder} />
+             <Iframe
+               intersectionRootRef={scrollingPanelRef}
+-              src={frameSrc(
+-                { themeName: frame.theme, code: renderCode },
+-                playroomConfig
+-              )}
++              code={renderCode}
++              themeName={frame.theme}
++              src={`${playroomConfig.baseUrl}frame.html`}
+               className={styles.frame}
+               style={{ width: frame.width }}
+               data-testid="previewFrame"
+diff --git a/node_modules/playroom/src/Playroom/Frames/Iframe.tsx b/node_modules/playroom/src/Playroom/Frames/Iframe.tsx
+index 9285b94..cd57b41 100644
+--- a/node_modules/playroom/src/Playroom/Frames/Iframe.tsx
++++ b/node_modules/playroom/src/Playroom/Frames/Iframe.tsx
+@@ -6,22 +6,29 @@ import React, {
+   MutableRefObject,
+ } from 'react';
+ import { useIntersection } from 'react-use';
++import { READY_TO_RECEIVE, INCOMING_CODE } from '../constants';
+
+ import playroomConfig from '../../config';
+
+ interface IframeProps extends AllHTMLAttributes<HTMLIFrameElement> {
+   src: string;
++  code: string;
++  themeName: string;
+   intersectionRootRef: MutableRefObject<Element | null>;
+ }
+
++
+ export default function Iframe({
+   intersectionRootRef,
++  code,
++  themeName,
+   style,
+   src,
+   ...restProps
+ }: IframeProps) {
+   const [loaded, setLoaded] = useState(false);
+-  const [renderedSrc, setRenderedSrc] = useState<string | null>(null);
++  const [renderedSrc, setRenderedSrc] = useState<string | undefined>(undefined);
++  const [readyToPost, setReadyToPost] = useState(false);
+   const iframeRef = useRef<HTMLIFrameElement | null>(null);
+   const intersection = useIntersection(iframeRef, {
+     root: intersectionRootRef.current,
+@@ -32,35 +39,41 @@ export default function Iframe({
+   const intersectionRatio = intersection?.intersectionRatio ?? null;
+
+   useEffect(() => {
+-    if (intersectionRatio === null) {
+-      return;
++    if (intersectionRatio === null) return;
++    const listener = (e: any) => {
++      if (e.data.type === READY_TO_RECEIVE && e.source === iframeRef.current?.contentWindow) {
++        setReadyToPost(true);
++        const contentWindow = iframeRef.current?.contentWindow;
++        if (contentWindow) {
++          contentWindow.postMessage({ type: INCOMING_CODE,  themeName, code }, window.origin);
++        }
++      }
+     }
++    window.addEventListener('message', listener);
+
+     if (intersectionRatio > 0 && src !== renderedSrc) {
+       setRenderedSrc(src);
+     }
++    return () => window.removeEventListener('message', listener);
+   }, [intersectionRatio, src, renderedSrc]);
+
+   useEffect(() => {
+-    if (renderedSrc !== null) {
+-      const location = iframeRef.current?.contentWindow?.location;
+-
+-      if (location) {
+-        location.replace(renderedSrc);
++    if (readyToPost) {
++      const contentWindow = iframeRef.current?.contentWindow;
++      if (contentWindow) {
++        contentWindow.postMessage({ type: INCOMING_CODE,  themeName, code }, window.origin);
+       }
+     }
+-  }, [renderedSrc]);
++  }, [readyToPost, code])
++
++
+
+   return (
+     <iframe
+       ref={iframeRef}
+       sandbox={playroomConfig.iframeSandbox}
+       onLoad={() => setLoaded(true)}
+-      onMouseEnter={() => {
+-        if (src !== renderedSrc) {
+-          setRenderedSrc(src);
+-        }
+-      }}
++      src={renderedSrc}
+       style={{
+         ...style,
+         transition: 'opacity .3s ease',
+diff --git a/node_modules/playroom/src/Playroom/constants.ts b/node_modules/playroom/src/Playroom/constants.ts
+new file mode 100644
+index 0000000..90c35d0
+--- /dev/null
++++ b/node_modules/playroom/src/Playroom/constants.ts
+@@ -0,0 +1,2 @@
++export const READY_TO_RECEIVE = "PLAYROOM_READY_TO_RECEIVE";
++export const INCOMING_CODE = "PLAYROOM_INCOMING_CODE";
 diff --git a/node_modules/playroom/src/utils/compileJsx.ts b/node_modules/playroom/src/utils/compileJsx.ts
 index dadea77..82d080c 100644
 --- a/node_modules/playroom/src/utils/compileJsx.ts
@@ -44,7 +211,7 @@ index dadea77..82d080c 100644
  import { transform } from '@babel/standalone';
 +/* eslint-disable-next-line import/no-unresolved */
 +import processCode from '__PLAYROOM_ALIAS__PROCESS_CODE__';
- 
+
 -export const compileJsx = (code: string) =>
 -  transform(`<React.Fragment>${code.trim() || ''}</React.Fragment>`, {
 +export const compileJsx = (code: string) => {
@@ -58,7 +225,7 @@ index dadea77..82d080c 100644
      presets: ['react'],
    }).code;
 +}
- 
+
  export const validateCode = (code: string) => {
    try {
 diff --git a/node_modules/playroom/src/utils/formatting.ts b/node_modules/playroom/src/utils/formatting.ts
@@ -68,13 +235,13 @@ index a1819bf..70ac15c 100644
 @@ -133,10 +133,10 @@ export const formatAndInsert = ({
      snippet,
    });
- 
+
 -  return formatCode({
 +  return {
      code: newCode,
      cursor: updatedCursor,
 -  });
 +  };
  };
- 
+
  export const formatForInsertion = ({

polaris.shopify.com/content/components/layout-and-structure/page.md

@@ -19,6 +19,7 @@ keywords:
   - outer wrapper
   - page actions
   - page layouts
+updateBannerMessage: We are [adding patterns](/patterns) to our documentation. Check out related patterns, expect changes to happen, and [join the discussion](https://github.com/Shopify/polaris/discussions/categories/pattern-documentation) to make it better!
 examples:
   - fileName: page-default.tsx
     title: Default
@@ -158,3 +159,8 @@ Add a menu item
 - To lay out the content within a page, use the [layout component](https://polaris.shopify.com/components/layout-and-structure/layout)
 - To add pagination within the context of a list or other page content, use the [pagination component](https://polaris.shopify.com/components/navigation/pagination)
 - To add primary and secondary calls to action at the bottom of a page, see the [page actions component](https://polaris.shopify.com/components/actions/page-actions)
+
+## Related patterns
+
+- [App settings layout](/patterns/app-settings-layout)
+- [Resource details layout](/patterns/resource-details-layout)

polaris.shopify.com/content/components/navigation/navigation.md

@@ -68,7 +68,7 @@ The navigation component should:
 - Use a major icon for item actions.
 - Use a minor icon for secondary actions.
 - Use the provided navigation section component to group navigation items.
-- Not add additional components, like [badge](/components/feedback-indicators/badge), in navigation items. Example: Don‘t add the [New badge](/patterns/new-badge).
+- Not add additional components, like [badge](/components/feedback-indicators/badge), in navigation items. Example: Don‘t add the [New badge](/patterns-legacy/new-badge).
 
 ---
 

polaris.shopify.com/content/components/selection-and-input/date-picker.md

@@ -16,6 +16,7 @@ keywords:
   - date selector
   - date range picker
   - date range selector
+updateBannerMessage: We are [adding patterns](/patterns) to our documentation. Check out related patterns, expect changes to happen, and [join the discussion](https://github.com/Shopify/polaris/discussions/categories/pattern-documentation) to make it better!
 examples:
   - fileName: date-picker-default.tsx
     title: Default
@@ -57,3 +58,7 @@ If you use the date picker within a [popover component](/components/overlays/pop
 - Press the <kbd>tab</kbd> key to move forward and <kbd>shift</kbd> + <kbd>tab</kbd> to move backward through the previous button, next button, and the calendar
 - When focus is in the calendar, move keyboard focus between the dates using the arrow keys
 - To select a date that has focus, press the <kbd>enter</kbd>/<kbd>return</kbd> key
+
+## Related patterns
+
+- [Date picking](/patterns/date-picking)

polaris.shopify.com/content/patterns/error-messages.md renamed to polaris.shopify.com/content/content/error-messages.md

@@ -0,0 +1,9 @@
+---
+title: Patterns (legacy)
+description: Design patterns help ensure consistent behavior across the Shopify admin.
+status:
+  value: Deprecated
+  message: These patterns are deprecated, please use with caution.
+noIndex: true
+hideFromNav: true
+---

polaris.shopify.com/content/patterns/help-content.md renamed to polaris.shopify.com/content/content/help-content.md

@@ -2,6 +2,10 @@
 title: Loading
 description: Navigating the Shopify admin should be fast, meaningful, and focused. Intentional loading states deliver a continuous flow for merchants.
 icon: RefreshMajor
+noIndex: true
+status:
+  value: Deprecated
+  message: This pattern is no longer supported.
 keywords:
   - page loading
   - loading