Merge /patterns-legacy index page into /patterns to ease discovery

.changeset/tidy-papayas-exist.md

@@ -0,0 +1,5 @@
+---
+'polaris.shopify.com': patch
+---
+
+Merge /patterns-legacy index page into /patterns to ease discovery (includes a redirect so old links continue to work)

polaris-react/playground/KitchenSink.tsx

@@ -8,7 +8,7 @@ interface Stories {
 
 const stories: Stories = {};
 const req = require.context('../src/components', true, /.stories.tsx$/);
-req.keys().forEach((filePath) =>
+req.keys().forEach((filePath: string) =>
   req(filePath).__namedExportsOrder.forEach((namedExport: string) => {
     const componentName = `${filePath.split('/')[1]}:${namedExport}`;
     stories[componentName] = req(filePath)[namedExport];

polaris.shopify.com/content/patterns-legacy/loading.md

@@ -3,6 +3,7 @@ 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
+url: /patterns-legacy/loading
 keywords:
   - page loading
   - loading

polaris.shopify.com/content/patterns-legacy/new-badge.md

@@ -3,6 +3,7 @@ title: New badge
 description: The New badge can be used to inform merchants about the release of a feature that creates new value. It should be used sparingly and for a short time frame.
 icon: StarFilledMinor
 noIndex: true
+url: /patterns-legacy/new-badge
 keywords:
   - new badge
   - new features

polaris.shopify.com/content/patterns-legacy/pickers.md

@@ -3,6 +3,7 @@ title: Pickers
 description: Picker experiences help merchants browse, find, and select from multiple options. Use them for selecting locations, customer segments, and more.
 icon: LocationMajor
 noIndex: true
+url: /patterns-legacy/pickers
 keywords:
   - customer segments
   - locations

polaris.shopify.com/content/patterns-legacy/text-fields.md

@@ -3,6 +3,7 @@ title: Text fields
 description: Text fields combine the field label (the title) and the input area. Inputs can vary from typed text to URLs to date pickers.
 icon: FormsMajor
 noIndex: true
+url: /patterns-legacy/text-fields
 keywords:
   - text fields
   - search

polaris.shopify.com/next.config.js

@@ -134,6 +134,11 @@ const nextConfig = {
         destination: '/patterns-legacy/text-fields',
         permanent: true,
       },
+      {
+        source: '/patterns-legacy',
+        destination: '/patterns#legacy',
+        permanent: true,
+      },
       ...actions,
       ...deprecated,
       ...feedbackIndicators,

polaris.shopify.com/src/components/PatternsPage/index.tsx

@@ -3,12 +3,14 @@ import PageMeta from '../PageMeta';
 import Longform from '../Longform';
 import {Grid, GridItem} from '../Grid';
 import {Stack} from '../Stack';
+import {Heading} from '../Heading';
 import {Status} from '../../types';
 import styles from './PatternsPage.module.scss';
 import Preview from '../ThumbnailPreview';
-import {patterns} from '../../utils/various';
+import {patterns, legacyPatterns} from '../../utils/various';
 import UpdateBanner from '../UpdateBanner';
 import {FoundationsProps} from '../FoundationsPage/FoundationsPage';
+import FoundationsThumbnail from '../FoundationsThumbnail';
 
 export const PatternsPage = ({title, description}: FoundationsProps) => (
   <>
@@ -18,11 +20,13 @@ export const PatternsPage = ({title, description}: FoundationsProps) => (
       <Stack gap={'8'}>
         <div>
           <Longform>
-            <h1 className={styles.Header}>Patterns </h1>
+            <Heading as="h1" className={styles.Header}>
+              Patterns
+            </Heading>
             <p>{description}</p>
           </Longform>
           <UpdateBanner
-            message={`Our pattern documentation is evolving. [Join our discussions](https://github.com/Shopify/polaris/discussions/categories/pattern-documentation) to make it better. The [legacy patterns documentation](/patterns-legacy) can still be used.`}
+            message={`Our pattern documentation is evolving. [Join our discussions](https://github.com/Shopify/polaris/discussions/categories/pattern-documentation) to make it better. The [legacy patterns documentation](#legacy) can still be used.`}
             className={styles.UpdateBanner}
           />
         </div>
@@ -42,6 +46,34 @@ export const PatternsPage = ({title, description}: FoundationsProps) => (
               />
             ))}
         </Grid>
+        <Longform>
+          <Heading as="h1" id="legacy" className={styles.Header}>
+            Legacy Patterns
+          </Heading>
+          <p>
+            Previously documented patterns are considered legacy and should not
+            be used for new projects. Use at your own risk.
+          </p>
+        </Longform>
+        <Grid>
+          {Object.values(legacyPatterns)
+            .filter(({frontMatter: {draft}}) => !draft)
+            .map(({frontMatter: pattern}, index) => (
+              <GridItem
+                key={index}
+                title={pattern.title}
+                description={pattern.description ?? ''}
+                url={pattern.url ?? ''}
+                renderPreview={() => (
+                  <FoundationsThumbnail
+                    icon={pattern.icon!}
+                    category={pattern.title.toLowerCase()}
+                  />
+                )}
+                status={pattern.status as Status}
+              />
+            ))}
+        </Grid>
       </Stack>
     </Page>
   </>

polaris.shopify.com/src/utils/various.ts

@@ -22,6 +22,15 @@ export const patterns: PatternJSON = Object.keys(pages)
     return memo;
   }, {} as PatternJSON);
 
+export const legacyPatterns: PatternJSON = Object.keys(pages)
+  .filter((slug) => slug.startsWith('patterns-legacy/'))
+  .sort((a, b) => a.localeCompare(b))
+  .reduce((memo, key) => {
+    // @ts-expect-error Yes it is compatible Typescript. Shhhh.
+    memo[key] = pages[key];
+    return memo;
+  }, {} as PatternJSON);
+
 export const getComponentCategories = (): string[] => {
   const componentCategories: string[] = [];