Only show web description in storybook notes

Shopify · Jan 4, 2019 · a4d1e98 · a4d1e98
1 parent 7c247ad
commit a4d1e98
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 16 deletions.
diff --git a/.storybook/polaris-readme-loader.js b/.storybook/polaris-readme-loader.js
@@ -101,7 +101,6 @@ function parseCodeExamples(data) {
   return {
     name: matter.data.name,
     category: matter.data.category,
-    slug: slugify(matter.data.name),
     examples: generateExamples(matter),
   };
 }
@@ -145,7 +144,7 @@ function generateExamples(matter) {
     console.log(
       chalk`🚨 {red [${
         matter.data.name
-      }]} No examples found. For troubleshooting advice see https://github.com/Shopify/polaris-react/blob/master/documentation/Component%20READMEs.md#troubleshooting'`,
+      }]} No examples found. For troubleshooting advice see https://github.com/Shopify/polaris-react/blob/master/documentation/Component%20READMEs.md#troubleshooting`,
     );
   }
 
@@ -162,13 +161,15 @@ function generateExamples(matter) {
       const code =
         codeBlock !== null ? wrapExample(stripCodeBlock(codeBlock[0])) : '';
 
-      // TODO need to strip out android/ios examples
-      const description = example
-        .replace(nameRegex, '')
-        .replace(codeRegex, '')
-        .trim();
+      const description = filterMarkdownForPlatform(
+        example
+          .replace(nameRegex, '')
+          .replace(codeRegex, '')
+          .replace(exampleForRegExp, ''),
+        'web',
+      ).trim();
 
-      return {name, slug: slugify(name), code, description};
+      return {name, code, description};
     });
 
   if (examples.filter((example) => example.code).length === 0) {
@@ -190,6 +191,33 @@ function generateExamples(matter) {
   return examples;
 }
 
+function filterMarkdownForPlatform(markdown, platform) {
+  const unwrapSinglePlatformContentRegExp = new RegExp(
+    `<!-- content-for: ${platform} -->([\\s\\S]+?)<!-- \\/content-for -->`,
+    'gu',
+  );
+
+  const deleteSinglePlatformContentRegExp = new RegExp(
+    `<!-- content-for: (?:[\\w\\s]*) -->([\\s\\S]+?)<!-- \\/content-for -->`,
+    'gu',
+  );
+
+  const unwrapMultiplatformContentRegExp = new RegExp(
+    `<!-- content-for: (?:[\\w\\s,]*${platform}[\\w\\s,]*) -->([\\s\\S]+?)<!-- \\/content-for -->`,
+    'gu',
+  );
+  const deleteRemainingPlatformsRegExp = /<!-- content-for: [\w\s,]+ -->[\s\S]+?<!-- \/content-for -->/gu;
+
+  return (
+    markdown
+      // Unwrap content in multiple passes to support nested content-for blocks
+      .replace(unwrapSinglePlatformContentRegExp, '$1')
+      .replace(deleteSinglePlatformContentRegExp, '')
+      .replace(unwrapMultiplatformContentRegExp, '$1')
+      .replace(deleteRemainingPlatformsRegExp, '')
+  );
+}
+
 function wrapExample(code) {
   const classPattern = /class (\w+) extends React.Component/g;
   const classMatch = classPattern.exec(code);
@@ -222,10 +250,3 @@ return ${classMatch[1]};
     }, scope);
   }`;
 }
-
-function slugify(value) {
-  return value
-    .replace(/’/g, '')
-    .replace(/\s+/g, '-')
-    .toLowerCase();
-}
diff --git a/.storybook/stories-from-readme.js b/.storybook/stories-from-readme.js
@@ -43,7 +43,6 @@ export function generateStories(readme) {
       .addParameters({
         // TODO links use styleguide-style URLs. It'd be neat to mutate them
         // to deeplink to examples in storybook.
-        // TODO remove content-for android/ios blocks from the description
         notes: {markdown: example.description},
       })
       .addWithPercyOptions(