Add caveats to code examples in Patterns

.changeset/plenty-panthers-prove.md

@@ -0,0 +1,5 @@
+---
+'polaris.shopify.com': patch
+---
+
+Add caveats to code examples in Patterns

polaris.shopify.com/content/patterns/date-picking.ts

@@ -1058,68 +1058,68 @@ const pattern: MultiVariantPattern = {
         )}
         `,
         code: `
-{(function DateListPicker () {
-  const ranges = [{
-      title: "No Date",
-      alias: "no-date",
-      period: null
-    },
-    {
-      title: "Today",
-      alias: "today",
-      period: {
-        since: "today",
-        until: "today"
-      }
-    },
-    {
-      title: "Yesterday",
-      alias: "yesterday",
-      period: {
-        since: "yesterday",
-        until: "yesterday"
-      }
-    },
-    {
-      title: "Last 7 days",
-      alias: "last7days",
-      period: {
-        since: "-7d",
-        until: "-1d"
-      }
-    }
-  ];
-  const [selected, setSelected] = useState(ranges[0]);
-  const [popoverActive, setPopoverActive] = useState(false);
-  return (
-    <Popover
-      autofocusTarget="none"
-      preferredAlignment="left"
-      preferInputActivator={false}
-      preferredPosition="below"
-      activator={
-        <Button
-          onClick={() => setPopoverActive(!popoverActive)}
-          icon={CalendarMinor}
-        >
-          {selected.title}
-        </Button>
-      }
-      active={popoverActive}
-    >
-      <OptionList
-        options={ranges.map((range) => ({
-          value: range.alias,
-          label: range.title
-        }))}
-        selected={selected.alias}
-        onChange={(value) => {
-          setSelected(ranges.find((range) => range.alias === value[0]));
-          setPopoverActive(false);
-        }}
-      />
-  </Popover>
-)})()}
+          {(function DateListPicker () {
+            const ranges = [{
+              title: "No Date",
+              alias: "no-date",
+              period: null
+            },
+            {
+              title: "Today",
+              alias: "today",
+              period: {
+                since: "today",
+                until: "today"
+              }
+            },
+            {
+              title: "Yesterday",
+              alias: "yesterday",
+              period: {
+                since: "yesterday",
+                until: "yesterday"
+              }
+            },
+            {
+              title: "Last 7 days",
+              alias: "last7days",
+              period: {
+                since: "-7d",
+                until: "-1d"
+              }
+            }
+          ];
+          const [selected, setSelected] = useState(ranges[0]);
+          const [popoverActive, setPopoverActive] = useState(false);
+          return (
+            <Popover
+              autofocusTarget="none"
+              preferredAlignment="left"
+              preferInputActivator={false}
+              preferredPosition="below"
+              activator={
+                <Button
+                  onClick={() => setPopoverActive(!popoverActive)}
+                  icon={CalendarMinor}
+                >
+                  {selected.title}
+                </Button>
+              }
+              active={popoverActive}
+            >
+              <OptionList
+                options={ranges.map((range) => ({
+                  value: range.alias,
+                  label: range.title
+                }))}
+                selected={selected.alias}
+                onChange={(value) => {
+                  setSelected(ranges.find((range) => range.alias === value[0]));
+                  setPopoverActive(false);
+                }}
+              />
+            </Popover>
+          )})()}
 `,
       },
     },

polaris.shopify.com/package.json

@@ -27,6 +27,7 @@
     "@radix-ui/react-polymorphic": "^0.0.14",
     "@types/react-syntax-highlighter": "^15.5.6",
     "codesandbox": "^2.2.3",
+    "endent": "^2.1.0",
     "framer-motion": "^6.5.1",
     "fuse.js": "^6.5.3",
     "gray-matter": "^4.0.3",

polaris.shopify.com/src/components/PatternsExample/PatternsExample.tsx

@@ -1,6 +1,7 @@
 import {Fragment, useEffect, useState} from 'react';
 import {format} from 'prettier/standalone';
 import babel from 'prettier/parser-babel';
+import endent from 'endent';
 import {createUrl} from 'playroom';
 import {Stack} from '../Stack';
 import styles from './PatternsExample.module.scss';
@@ -21,14 +22,20 @@ const PlayroomButton = ({
 }) => {
   const [encodedUrl, setEncodedUrl] = useState('');
   useEffect(() => {
+    // Casting because the typescript function(str: string) overload is missing
+    const dedentedCode = endent(code as unknown as TemplateStringsArray);
     setEncodedUrl(
       createUrl({
         baseUrl: '/sandbox/',
-        code: `
-{/* [Polaris Pattern] ${patternName} */}
-{/* Generated on ${getISOStringYear()} from ${window.location.href} */}
-  ${/* intentional blank line */ ''}
-  ${code}`.trim(),
+        code: endent`
+          {/* [Polaris Pattern] ${patternName} */}
+          {/* Generated on ${getISOStringYear()} from ${
+          window.location.href
+        } */}
+          {/* This example is for guidance purposes. Copying it will come with caveats. */}
+          ${/* intentional blank line */ ''}
+          ${dedentedCode}
+        `,
         // TODO: Is this correct?
         themes: ['locale:en'],
         paramType: 'search',
@@ -72,7 +79,8 @@ const PatternsExample = ({
     let prettifiedCode;
 
     try {
-      prettifiedCode = format(code, {
+      // Casting because the typescript function(str: string) overload is missing
+      prettifiedCode = format(endent(code as unknown as TemplateStringsArray), {
         parser: 'babel',
         plugins: [babel],
       });
@@ -114,6 +122,7 @@ const PatternsExample = ({
     }
     setPreviewUrl(constructLivePreview(example.code, example.context));
   }, [example.code, example.context]);
+
   const {code, snippetCode} = example;
 
   return (
@@ -168,7 +177,10 @@ const PatternsExample = ({
             code={[
               {
                 title: 'React',
-                code: formatCodeSnippet(snippetCode ? snippetCode : code),
+                code: endent`
+                  // This example is for guidance purposes. Copying it will come with caveats.
+                  ${formatCodeSnippet(snippetCode ? snippetCode : code)}
+                `,
               },
             ]}
           />

yarn.lock

@@ -9359,7 +9359,7 @@ end-of-stream@^1.0.0, end-of-stream@^1.1.0, end-of-stream@^1.4.1:
   dependencies:
     once "^1.4.0"
 
-endent@^2.0.1:
+endent@^2.0.1, endent@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/endent/-/endent-2.1.0.tgz#5aaba698fb569e5e18e69e1ff7a28ff35373cd88"
   integrity sha512-r8VyPX7XL8U01Xgnb1CjZ3XV+z90cXIJ9JPE/R9SEC9vpw2P6CfsRPJmp20DppC5N7ZAMCmjYkJIa744Iyg96w==