Reverse sorting

src/system/footer/shared/main.js

@@ -13,12 +13,12 @@ const addSharedSystems = function (systems) {
   const propGroups = getPropGroups(propEntries)
   const propGroupsA = simplifyPropGroups(propGroups, systems)
   const propGroupsB = addTopSystem(propGroupsA)
-  const propGroupsC = sortSystems(propGroupsB)
-  const systemsA = finalizeSystems(propGroupsC)
-  systemsA.forEach(({ dimensions, ...props }) => {
+  const systemsA = finalizeSystems(propGroupsB)
+  const systemsB = sortSystems(systemsA)
+  systemsB.forEach(({ dimensions, ...props }) => {
     console.log(props, dimensions)
   })
-  return systemsA
+  return systemsB
 }
 
 // Transform `propGroups` back to `systems`

src/system/footer/shared/sort/main.js

@@ -6,15 +6,16 @@ import { compareSystems } from './systems.js'
 
 // Sort systems deeply so they are shown in a user-friendly and predictable way
 // in the footer
-export const sortSystems = function (propGroups) {
+export const sortSystems = function (systems) {
   // eslint-disable-next-line fp/no-mutating-methods
-  return propGroups.map(addSortProps).sort(compareSystems).map(removeSortProps)
+  return systems.map(addSortProps).sort(compareSystems).map(removeSortProps)
 }
 
 // Add properties used during sorting so they are only computed once
-const addSortProps = function ({ propEntries, dimensionsArray }) {
+const addSortProps = function ({ dimensions: dimensionsArray, ...props }) {
   const isTopSystem = isTopPropGroup({ dimensionsArray })
-  const propEntriesA = sortPropEntries(propEntries.map(addPropOrder))
+  const propEntries = Object.entries(props).map(addPropOrder)
+  const propEntriesA = sortPropEntries(propEntries)
   const dimensionsArrayA = sortDimensionsArray(
     dimensionsArray.map(Object.entries),
   )
@@ -26,7 +27,7 @@ const addSortProps = function ({ propEntries, dimensionsArray }) {
 }
 
 const removeSortProps = function ({ propEntries, dimensionsArray }) {
-  const propEntriesA = propEntries.map(removePropOrder)
-  const dimensionsArrayA = dimensionsArray.map(Object.fromEntries)
-  return { propEntries: propEntriesA, dimensionsArray: dimensionsArrayA }
+  const props = Object.fromEntries(propEntries.map(removePropOrder))
+  const dimensions = dimensionsArray.map(Object.fromEntries)
+  return { dimensions, ...props }
 }

src/system/footer/shared/sort/props.js

@@ -2,7 +2,7 @@ import sortOn from 'sort-on'
 
 // Sort the properties in each system, when it has several.
 // Those follow a static order since the property names are known.
-export const addPropOrder = function ({ propName, propValue }) {
+export const addPropOrder = function ([propName, propValue]) {
   const propOrder = PROP_ORDER.indexOf(propName)
   return { propName, propValue, propOrder }
 }
@@ -15,5 +15,5 @@ export const sortPropEntries = function (propEntries) {
 }
 
 export const removePropOrder = function ({ propName, propValue }) {
-  return { propName, propValue }
+  return [propName, propValue]
 }