Set up normalizeName string utility function

app/components/form/fields/NameField.tsx

@@ -7,7 +7,7 @@
  */
 import type { FieldPath, FieldValues } from 'react-hook-form'
 
-import { capitalize } from '~/util/str'
+import { capitalize, normalizeName } from '~/util/str'
 
 import { TextField, type TextFieldProps } from './TextField'
 
@@ -30,12 +30,7 @@ export function NameField<
       required={required}
       label={label}
       name={name}
-      transform={(value) =>
-        value
-          .toLowerCase()
-          .replace(/[\s_]+/g, '-')
-          .replace(/[^a-z0-9-]/g, '')
-      }
+      transform={(value) => normalizeName(value)}
       // https://www.stefanjudis.com/snippets/turn-off-password-managers/
       data-1p-ignore
       data-bwignore

app/util/str.spec.tsx

@@ -13,6 +13,7 @@ import {
   commaSeries,
   extractText,
   kebabCase,
+  normalizeName,
   titleCase,
 } from './str'
 
@@ -110,3 +111,40 @@ describe('extractText', () => {
     expect(extractText('Some more text')).toBe('Some more text')
   })
 })
+
+describe('normalizeName', () => {
+  it('converts to lowercase', () => {
+    expect(normalizeName('Hello')).toBe('hello')
+  })
+
+  it('replaces spaces with dashes', () => {
+    expect(normalizeName('Hello World')).toBe('hello-world')
+  })
+
+  it('removes non-alphanumeric characters', () => {
+    expect(normalizeName('Hello, World!')).toBe('hello-world')
+  })
+
+  it('caps at 63 characters', () => {
+    expect(normalizeName('aaa')).toBe('aaa')
+    expect(normalizeName('aaaaaaaaa')).toBe('aaaaaaaaa')
+    expect(normalizeName('a'.repeat(63))).toBe('a'.repeat(63))
+    expect(normalizeName('a'.repeat(64))).toBe('a'.repeat(63))
+  })
+
+  it('can optionally start with numbers', () => {
+    expect(normalizeName('123abc')).toBe('abc')
+    expect(normalizeName('123abc', false)).toBe('abc')
+    expect(normalizeName('123abc', true)).toBe('123abc')
+  })
+
+  it('can optionally start with a dash', () => {
+    expect(normalizeName('-abc')).toBe('abc')
+    expect(normalizeName('-abc', false)).toBe('abc')
+    expect(normalizeName('-abc', true)).toBe('-abc')
+  })
+
+  it('does not complain when multiple dashes are present', () => {
+    expect(normalizeName('a--b')).toBe('a--b')
+  })
+})

app/util/str.ts

@@ -58,6 +58,26 @@ export const titleCase = (text: string): string => {
  */
 export const isAllZeros = (base64Data: string) => /^A*=*$/.test(base64Data)
 
+/** Clean up text so that it conforms to Name field syntax rules:
+ *   - lowercase only
+ *   - no spaces
+ *   - only letters/numbers/dashes allowed
+ *   - capped at 63 characters
+ *  By default, it must start with a letter; this can be overriden with the second argument,
+ *  for contexts where we want to allow numbers at the start, like searching in comboboxes.
+ */
+export const normalizeName = (text: string, allowNonLetterStart = false): string => {
+  const normalizedName = text
+    .toLowerCase()
+    .replace(/[\s_]+/g, '-') // Replace spaces and underscores with dashes
+    .replace(/[^a-z0-9-]/g, '') // Remove non-alphanumeric (or dash) characters
+    .slice(0, 63) // Limit string to 63 characters
+  if (allowNonLetterStart) {
+    return normalizedName
+  }
+  return normalizedName.replace(/^[^a-z]+/, '') // Remove any non-letter characters from the start
+}
+
 /**
  * Extract the string contents of a ReactNode, so <>This <HL>highlighted</HL> text</> becomes "This highlighted text"
  */