[polaris.shopify.com] Move examples to app directory

[martenbjork]

The problem

• The website needs a stylesheet
• The website needs to render Polaris examples, including a Polaris stylesheet
• These stylesheets collide

The way we currently solve this is by adding both stylesheets to the website. If you inspect the elements on the site, you can see traces of Polaris styles, like CSS variables prefixed with --p-.

It's not too bad, but it messes with the website styles in small ways all over the place. It's also unclear to website contributors wether or not they should rely on Polaris styles and variables (they shouldn't).

The solution

Next.js 13 adds a new feature, namely to use different global stylesheets for different routes:

/examples <- Use Polaris stylesheets
/anything-else <- Use website stylesheets

This is part of the new App dir feature in Next.js 13.

What this PR does

It adds two scripts:

• move-examples.mjs — A one time migration that moves the examples to app/examples.
• fix-examples.mjd — Updates the relative imports inside examples and adds 'use client'; to them (to let Next.js 13 know that these shouldn't be server rendered).
• It executes these scripts. The scripts are now only there for posterity.
• Adds two layout.tsx files to the app directory. These are needed to render the examples at their new location. They also help apply the Polaris stylesheets to the examples.
• Updates next.config.ts to enable the experimental "app dir" from next.js 13
• Updates tsconfig.json to use a next plugin. I'm not sure exactly what it does, but I think it's part of next.js 13.
• Fixes the design of the new Pattern pages. These relied on --p- values that are no longer present in the website stylesheet.

What's next

We've shipped a ton of features to the website lately which is awesome! However, it's getting quite messy. I'll give it some love over the coming weeks.