Update starter kit file structure to match deprecation tickets (#1253)

* Rename files to match #1252 & #1237
* #1253: update dev editions
* #1253 Update doc locations
* #1253 cleanup merge bugs
* #1253 Fix view all pages are not sorted correctly

Author: JosefBredereck

packages/core/src/lib/object_factory.js

@@ -161,6 +161,18 @@ const Pattern = function(
   this.variantOrder = 0;
   this.engine = patternEngines.getEngineForPattern(this);
 
+  // TODO: Remove the following when ordering by file prefix gets obsolete
+  this.patternGroupData = this.patternGroupData || {};
+  if (!this.patternGroupData.order && info.patternGroupOrder) {
+    this.patternGroupData.order = info.patternGroupOrder;
+  }
+
+  // TODO: Remove the following when ordering by file prefix gets obsolete
+  this.patternSubgroupData = this.patternSubgroupData || {};
+  if (!this.patternSubgroupData.order && info.patternSubgroupOrder) {
+    this.patternGroupData.order = info.patternSubgroupOrder;
+  }
+
   /**
    * Determines if this pattern needs to be recompiled.
    *
@@ -303,6 +315,19 @@ Pattern.prototype = {
     });
   },
 
+  /**
+   * Retrieves the number prefix, which later is used for sorting.
+   * (Can be removed when sorting by number prefix becomes obsolete)
+   * @param {*} pathStr the path that needs to be checked for number prefixes
+   * @returns the order number or 0 when no prefix is available
+   */
+  setPatternOrderDataForInfo: pathStr => {
+    const match = pathStr.match(prefixMatcherDeprecationCheckOrder);
+    return match && match.length >= 1
+      ? pathStr.match(prefixMatcherDeprecationCheckOrder)[1].replace('-', '')
+      : 0;
+  },
+
   /**
    * The "info" object contains information about pattern structure if it is
    * a nested pattern or if it just a sub folder structure. It's just used for
@@ -336,12 +361,29 @@ Pattern.prototype = {
       info.shortNotation = 'root';
     } else if (info.dirLevel === 2 && info.patternHasOwnDir) {
       // -> ./folder
-      info.shortNotation = path.dirname(pathObj.dir);
+      info.shortNotation = path.dirname(pathObj.dir).replace(prefixMatcher, '');
+      info.patternGroupOrder = Pattern.prototype.setPatternOrderDataForInfo(
+        path.dirname(pathObj.dir)
+      );
     } else {
       // -> ./folder/folder
       info.shortNotation = pathObj.dir
         .split(/\/|\\/, 2)
-        .map(o => o.replace(prefixMatcher, ''))
+        .map((o, i) => {
+          if (i === 0) {
+            info.patternGroupOrder = Pattern.prototype.setPatternOrderDataForInfo(
+              o
+            );
+          }
+
+          if (i === 1) {
+            info.patternSubgroupOrder = Pattern.prototype.setPatternOrderDataForInfo(
+              o
+            );
+          }
+
+          return o.replace(prefixMatcher, '');
+        })
         .join('-')
         .replace(new RegExp(`-${info.dir}$`), '');
       info.verbosePartial = pathObj.dir

packages/core/src/lib/readDocumentation.js

@@ -85,7 +85,7 @@ module.exports = function(pattern, patternlab, isVariant) {
   try {
     const markdownFileNameGroup = path.resolve(
       patternlab.config.paths.source.patterns,
-      path.parse(pattern.subdir).dir,
+      path.parse(pattern.subdir).dir || pattern.subdir,
       GROUP_DOC_PREFIX + pattern.patternGroup + FILE_EXTENSION
     );
     const markdownFileContentsGroup = fs.readFileSync(

packages/core/src/lib/ui_builder.js

@@ -159,6 +159,15 @@ const ui_builder = function() {
     );
   }
 
+  /**
+   * Sorts the given patterns in the way they are ment to be sorted
+   * @param {array} patterns which should be sorted
+   * @returns a sorted array of patterns
+   */
+  function getSortedPatterns(patterns) {
+    return _.sortBy(patterns, ['order', 'variantOrder', 'name']);
+  }
+
   /**
    * Registers flat patterns with the patternGroups object
    * This is a new menu group like atoms
@@ -307,9 +316,8 @@ const ui_builder = function() {
 
     const patternSubgroup = getPatternSubgroup(patternlab, pattern);
     patternSubgroup.patternSubgroupItems.push(newSubgroupItem);
-    patternSubgroup.patternSubgroupItems = _.sortBy(
-      patternSubgroup.patternSubgroupItems,
-      ['order', 'variantOrder', 'name']
+    patternSubgroup.patternSubgroupItems = getSortedPatterns(
+      patternSubgroup.patternSubgroupItems
     );
   }
 
@@ -339,65 +347,7 @@ const ui_builder = function() {
     } else {
       patternGroup.patternItems.push(createPatternSubgroupItem(pattern));
     }
-    patternGroup.patternItems = _.sortBy(patternGroup.patternItems, [
-      'order',
-      'variantOrder',
-      'name',
-    ]);
-  }
-
-  /**
-   * Sorts patterns based on order property found within pattern markdown, falling back on name.
-   * @param patternsArray - patterns to sort
-   * @returns sorted patterns
-   */
-  function sortPatterns(patternsArray) {
-    return patternsArray.sort(function(a, b) {
-      let aOrder = parseInt(a.order, 10);
-      const bOrder = parseInt(b.order, 10);
-
-      if (aOrder === NaN) {
-        aOrder = Number.MAX_SAFE_INTEGER;
-      }
-
-      if (bOrder === NaN) {
-        aOrder = Number.MAX_SAFE_INTEGER;
-      }
-
-      // always return a docPattern first
-      if (a.isDocPattern && !b.isDocPattern) {
-        return -1;
-      }
-
-      if (!a.isDocPattern && b.isDocPattern) {
-        return 1;
-      }
-
-      // use old alphabetical ordering if we have nothing else to use
-      // pattern.order will be Number.MAX_SAFE_INTEGER if never defined by markdown, or markdown parsing fails
-      if (
-        aOrder === Number.MAX_SAFE_INTEGER &&
-        bOrder === Number.MAX_SAFE_INTEGER
-      ) {
-        if (a.name > b.name) {
-          return 1;
-        }
-        if (a.name < b.name) {
-          return -1;
-        }
-      }
-
-      // if we get this far, we can sort safely
-      if (aOrder && bOrder) {
-        if (aOrder > bOrder) {
-          return 1;
-        }
-        if (aOrder < bOrder) {
-          return -1;
-        }
-      }
-      return 0;
-    });
+    patternGroup.patternItems = getSortedPatterns(patternGroup.patternItems);
   }
 
   /**
@@ -485,7 +435,7 @@ const ui_builder = function() {
       pattern => pattern.patternGroup === patternGroup && pattern.isFlatPattern
     );
     if (patterns) {
-      return sortPatterns(patterns);
+      return getSortedPatterns(patterns);
     }
     return [];
   }
@@ -518,6 +468,45 @@ const ui_builder = function() {
     });
   }
 
+  /**
+   * Sorts the pattern groups for the view all page as they are meant to be sorted.
+   * Therefore the function searches for the subgroup in the patternGroupItems and retrieves its sorting.
+   * @param patternGroup The pattern group object with it's subgroups
+   * @param patternGroupName the pattern group name e.g. atoms
+   * @param patternlab - global data store
+   * @returns a sorted list of pattern groups
+   */
+  function getSortedPatternSubgroups(
+    patternGroup,
+    patternGroupName,
+    patternlab
+  ) {
+    return _.sortBy(_.values(patternGroup), [
+      pSubgroup => {
+        const group = patternlab.patternGroups.find(
+          g => g.patternGroup === patternGroupName
+        );
+
+        if (group) {
+          const sg = group.patternGroupItems.find(item => {
+            const firstPattern = _.first(
+              _.values(pSubgroup).filter(p => p.patternBaseName !== '.')
+            );
+            return (
+              item &&
+              firstPattern &&
+              firstPattern.patternSubgroup === item.patternSubgroup
+            );
+          });
+
+          return sg ? sg.order : 0;
+        } else {
+          return 0;
+        }
+      },
+    ]);
+  }
+
   /**
    * Constructs viewall pages for each set of grouped patterns
    * @param mainPageHeadHtml - the already built main page HTML
@@ -536,8 +525,10 @@ const ui_builder = function() {
 
     // loop through the grouped styleguide patterns, building at each level
     const allPatternGroupPromises = _.map(
-      styleguidePatterns.patternGroups,
-      (patternGroup, patternGroupName) => {
+      patternlab.patternGroups,
+      patternGroup => {
+        const patternGroupName = patternGroup.patternGroup;
+        const group = styleguidePatterns.patternGroups[patternGroupName];
         let groupedPatterns = [];
         let styleguideGroupedPatterns = [];
         const styleGuideExcludes = patternlab.config.styleGuideExcludes || [];
@@ -546,7 +537,7 @@ const ui_builder = function() {
          * View all pages for subgroups
          */
         const subgroupPromises = _.map(
-          _.values(patternGroup),
+          getSortedPatternSubgroups(group, patternGroupName, patternlab),
           (patternSubgroups, patternSubgroup, originalPatternGroup) => {
             let p;
             const samplePattern = _.find(
@@ -571,7 +562,7 @@ const ui_builder = function() {
             return buildFooter(patternlab, `viewall-${patternPartial}`, uikit)
               .then(footerHTML => {
                 // render the viewall template by finding these smallest subgroup-grouped patterns
-                const subgroupPatterns = sortPatterns(
+                const subgroupPatterns = getSortedPatterns(
                   _.values(patternSubgroups)
                 );
 

packages/development-edition-engine-handlebars/package.json

@@ -8,7 +8,7 @@
     "pl:help": "patternlab --help",
     "pl:install": "patternlab install --config ./patternlab-config.json",
     "pl:serve": "patternlab serve --config ./patternlab-config.json",
-    "pl:starterkit": "patternlab add --starterkits @pattern-lab/starterkit-handlebars-vanilla",
+    "pl:starterkit": "patternlab add --starterkits @pattern-lab/starterkit-handlebars-demo",
     "pl:version": "patternlab --version",
     "dev": "node ./node_modules/@pattern-lab/uikit-workshop/build-tools.js"
   },
@@ -34,8 +34,7 @@
     "@pattern-lab/engine-handlebars": "^5.10.1",
     "@pattern-lab/engine-mustache": "^5.12.0",
     "@pattern-lab/plugin-tab": "^5.13.0",
-    "@pattern-lab/starterkit-handlebars-vanilla": "1.4.0",
-    "@pattern-lab/starterkit-mustache-demo": "^5.0.0",
+    "@pattern-lab/starterkit-handlebars-demo": "^5.11.1",
     "@pattern-lab/uikit-workshop": "^5.13.3"
   }
 }

packages/development-edition-engine-handlebars/source/_meta/_01-foot.hbs renamed to packages/development-edition-engine-handlebars/source/_meta/_foot.hbs

@@ -1,7 +1,7 @@
 {
   "cacheBust": true,
   "cleanPublic": true,
-  "defaultPattern": "pages-homepage",
+  "defaultPattern": "all",
   "defaultShowPatternInfo": false,
   "ishControlsHide": {
     "s": false,
@@ -105,11 +105,11 @@
   "engines": {
     "twig": {
       "namespaces": {
-        "atoms": "source/_patterns/00-atoms/",
-        "molecules": "source/_patterns/01-molecules/",
-        "organisms": "source/_patterns/02-organisms/",
-        "templates": "source/_patterns/03-templates/",
-        "pages": "source/_patterns/04-pages/",
+        "atoms": "source/_patterns/atoms/",
+        "molecules": "source/_patterns/molecules/",
+        "organisms": "source/_patterns/organisms/",
+        "templates": "source/_patterns/templates/",
+        "pages": "source/_patterns/pages/",
         "macros": "source/_macros/"
       }
     }