From 902db588f6a317f4d6a5a76f4814bdb1f80395db Mon Sep 17 00:00:00 2001 From: Adam Cooper Date: Fri, 14 Jun 2024 08:44:13 -0700 Subject: [PATCH] Fix example code generation for Codesandbox Button (#12252) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ### WHY are these changes introduced? Fixes #12251 This PR fixes an issue where clicking **edit in CodeSandbox** on any component example results in a broken CodeSandbox example where the component is exported as Example, as opposed to it's proper name. In the images below you will see that clicking **edit in Codesandbox** for a `CardWithSection` in production results in a `export default Example` line at the bottom. Screenshot 2024-06-13 at 3 53 46 PM ### WHAT is this pull request doing? This PR fixes the issue by finding the proper name in the code example ### 🎩 checklist - [ ] Tested a [snapshot](https://github.com/Shopify/polaris/blob/main/documentation/Releasing.md#-snapshot-releases) - [ ] 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 --- .../src/components/CodesandboxButton/CodesandboxButton.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/polaris.shopify.com/src/components/CodesandboxButton/CodesandboxButton.tsx b/polaris.shopify.com/src/components/CodesandboxButton/CodesandboxButton.tsx index a94889d5676..c26e539b27f 100644 --- a/polaris.shopify.com/src/components/CodesandboxButton/CodesandboxButton.tsx +++ b/polaris.shopify.com/src/components/CodesandboxButton/CodesandboxButton.tsx @@ -4,7 +4,7 @@ import styles from './CodesandboxButton.module.scss'; const getAppCode = (code: string) => { const lineWithFunctionName = code .split('\n') - .filter((name) => name.match(/function .*Example/g))?.[0]; + .filter((name) => name.match(/function\s+(\w+)\s*\(/))?.[0]; const functionName = lineWithFunctionName ? lineWithFunctionName.replace('function ', '').replace('() {', '') : 'Example';