Auto-populate the first title if none are chosen

.npmrc

@@ -0,0 +1 @@
+legacy-peer-deps=true

src/components/NewSongStep.tsx

@@ -66,19 +66,21 @@ export const NewSongStep = (props: NewSongProps) => {
         <SlButton
             variant="success"
             size="large"
-            disabled={title == ''}
             onClick={async () => {
-                if (title != '') {
+                if (title == '') {
+                    persistTitle(options[0])
+                } else {
                     persistTitle(title)
-                    dispatch?.({ type: "start" })
-                    dispatch?.({ type: "setStep", step: WorkflowStep.DRUMS })
-                    const transport = getTransport()
-                    transport.loop = true
-                    transport.loopStart = 0
-                    transport.loopEnd = '4m'
-                    transport.start("+0.1")
-                    await getContext().resume()
                 }
+                dispatch?.({ type: "start" })
+                dispatch?.({ type: "setStep", step: WorkflowStep.DRUMS })
+                const transport = getTransport()
+                transport.loop = true
+                transport.loopStart = 0
+                transport.loopEnd = '4m'
+                transport.start("+0.1")
+                await getContext().resume()
+
             }}
         >
             <SlIcon slot="prefix" name="plus-lg" style={{ fontWeight: 'bold' }} />

src/utils/title.ts

@@ -0,0 +1,84 @@
+import { faker } from "@faker-js/faker"
+import _ from "lodash"
+
+const INCLUDED_TYPES = ['smiley', 'nature'] as const
+
+
+const FILTERED_EMOJIS = new Set([
+    '💋',
+    '🗨️',
+    '😏',
+    '😫',
+    '💮',
+    '🤮',
+    '🥵',
+    '💦'
+
+])
+const FILTERED_PREPOSITIONS = new Set([
+    'abaft',
+    'amid',
+    'anti',
+    'afore',
+    'aside',
+    'anenst',
+    'apropros',
+    'apud',
+    'circa',
+    'lest',
+    'mid',
+    'midst',
+    'pace',
+    'qua',
+    'sans',
+    'save',
+    'vice'
+])
+
+const getEmoji = () => {
+    let emoji: string = ''
+    while (emoji === '' || FILTERED_EMOJIS.has(emoji)) {
+        emoji = faker.internet.emoji({ types: INCLUDED_TYPES })
+    }
+    return emoji
+}
+const getPreposition = () => {
+    let prep: string = ''
+    while (prep === '' || FILTERED_PREPOSITIONS.has(prep)) {
+        prep = faker.word.preposition({ length: { min: 2, max: 5 } })
+    }
+    return prep
+}
+
+const generatePrepTitle = () => {
+    const emoji1 = getEmoji()
+    const prep = getPreposition()
+    const emoji2 = getEmoji()
+    return `${emoji1} ${prep} ${emoji2}`
+}
+
+const generateAdjectiveTitle = () => {
+    const emoji1 = getEmoji()
+    const adjective = faker.word.adjective({length: { min: 1, max: 5}})
+    return _.startCase(`${adjective} ${emoji1}`)
+}
+
+const generateEmojiTitle = () => {
+    const numberOfEmoji = faker.number.int({ min: 1, max: 3})
+    return Array.from({ length: numberOfEmoji }).map(
+        () => getEmoji()
+    ).join('')
+}
+
+export const generateTitleOptions = (length: number = 6) => {
+    const options = Array.from({ length }).map((_, i) => {
+        if (i % 3 === 0) {
+            return generatePrepTitle()
+        } else if (i % 2 === 0) {
+            return generateAdjectiveTitle()
+        } else {
+            return generateEmojiTitle()
+        }
+    })
+    return options
+}