sort correctly

packages/launchpad/src/setup/EnvironmentSetup.cy.tsx

@@ -22,6 +22,14 @@ describe('<EnvironmentSetup />', { viewportWidth: 800 }, () => {
     .click()
     .should('have.attr', 'aria-expanded', 'true')
 
+    cy.get('li')
+    .then(($items) => {
+      return $items.map((_idx, html) => Cypress.$(html).text()).get()
+    })
+    // alphabetical order
+    // we should "support is in alpha" for a11y (not shown visually)
+    .should('deep.eq', ['Create React App (v5) Support is in Alpha', 'Vue.js (v3)'])
+
     const frameworkIconName = (frameworkName: string) => {
       if (frameworkName.includes('React')) {
         return 'react-logo'

packages/launchpad/src/setup/EnvironmentSetup.vue

@@ -43,7 +43,6 @@ import {
 } from '../generated/graphql'
 
 import { useI18n } from '@cy/i18n'
-import { sortBy } from 'lodash'
 import { useMutation } from '@urql/vue'
 
 gql`
@@ -93,18 +92,12 @@ const { t } = useI18n()
 
 const bundlers = computed(() => {
   const all = props.gql.framework?.supportedBundlers || []
-  const _bundlers = all.map((b) => {
-    return {
-      disabled: all.length <= 1,
-      ...b,
-    }
-  })
 
-  return _bundlers
+  return all.map((b) => ({ disabled: all.length <= 1, ...b })).sort((x, y) => x.name.localeCompare(y.name))
 })
 
 const frameworks = computed(() => {
-  return sortBy((props.gql.frameworks ?? []).map((f) => ({ ...f })), 'category')
+  return (props.gql.frameworks || []).map((x) => ({ ...x })).sort((x, y) => x.name.localeCompare(y.name))
 })
 
 gql`