refactor(mosaic): share a kebabCase util for data attributes

Author: alexcarpenter

packages/mosaic/AGENTS.md

@@ -46,6 +46,7 @@ Most problems a feature hits already have a shared answer. Find the row for your
 | A spinner that should not flash or flicker                               | `useSpinDelay` (`src/hooks/`)                                                                                 |
 | A placeholder for content that is still loading                          | `Skeleton` (`src/components/skeleton/`), see [Skeletons](docs/skeletons.md)                                   |
 | A date shown to the user                                                 | `formatDate` (`src/utils/format-date.ts`)                                                                     |
+| A value turned into kebab case, e.g. for a `data-*` attribute            | `kebabCase` (`src/utils/kebab-case.ts`)                                                                       |
 | Current time for display labels                                          | `useNow` + `MosaicProvider` ([#10098](https://github.com/clerk/javascript/pull/10098), once available)        |
 | Whether enterprise SSO permits adding another identification             | `allowsIdentificationCreation` (`src/utils/allows-identification-creation.ts`)                                |
 | An inline message row that animates open and closed                      | `useHeldMessage`, `useMessageHeight`, `FeedbackBody` (`src/utils/feedback.tsx`) + `styles/feedback.styles.ts` |

packages/mosaic/src/features/user-profile/user-profile-provider-media.tsx

@@ -3,6 +3,7 @@ import * as stylex from '@stylexjs/stylex';
 import { IconFrame } from '../../components/icon';
 import { Section } from '../../components/section';
 import { mergeStyleProps, themeProps } from '../../props';
+import { kebabCase } from '../../utils/kebab-case';
 import { styles } from './user-profile-provider-media.styles';
 
 export function UserProfileProviderMedia({
@@ -17,7 +18,7 @@ export function UserProfileProviderMedia({
   monochromeIcon?: boolean;
 }) {
   const url = iconUrl?.trim();
-  const slot = themeProps('provider-icon', { provider: iconId?.replaceAll('_', '-') });
+  const slot = themeProps('provider-icon', { provider: iconId && kebabCase(iconId) });
   const offset = iconId === 'apple' && styles.appleOffset;
   return (
     <Section.Media size='lg'>

packages/mosaic/src/props.ts

@@ -2,6 +2,7 @@ import type * as stylex from '@stylexjs/stylex';
 import type React from 'react';
 
 import type { ComponentProps } from './primitives/utils';
+import { kebabCase } from './utils/kebab-case';
 
 /**
  * What `xstyle` accepts: exactly what `stylex.props(...)` does, since that is where a part
@@ -63,8 +64,6 @@ export type MosaicComponentProps<Tag extends keyof React.JSX.IntrinsicElements>
 
 type VariantValue = string | number | boolean | null | undefined;
 
-const kebab = (name: string) => name.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
-
 /**
  * The stable class + variant reflection for a slot.
  *
@@ -84,7 +83,7 @@ export function themeProps(
     if (value == null || value === false) {
       continue;
     }
-    attrs[`data-${kebab(axis)}`] = value === true ? '' : String(value);
+    attrs[`data-${kebabCase(axis)}`] = value === true ? '' : String(value);
   }
   return { className: `cl-${slot}`, ...attrs };
 }

packages/mosaic/src/utils/__tests__/kebab-case.test.ts

@@ -0,0 +1,17 @@
+import { describe, expect, it } from 'vitest';
+
+import { kebabCase } from '../kebab-case';
+
+describe('kebabCase', () => {
+  it.each([
+    ['okx_wallet', 'okx-wallet'],
+    ['colorScheme', 'color-scheme'],
+    ['HTTPRequest', 'http-request'],
+    ['some whitespace', 'some-whitespace'],
+    ['already-kebab', 'already-kebab'],
+    ['apple', 'apple'],
+    ['', ''],
+  ])('converts %j to %j', (input, expected) => {
+    expect(kebabCase(input)).toBe(expected);
+  });
+});

packages/mosaic/src/utils/kebab-case.ts

@@ -0,0 +1,12 @@
+export function kebabCase(value: string): string {
+  return words(value)
+    .map(word => word.toLowerCase())
+    .join('-');
+}
+
+const CASE_SPLIT_PATTERN =
+  /\p{Lu}?\p{Ll}+|[0-9]+|\p{Lu}+(?!\p{Ll})|\p{Emoji_Presentation}|\p{Extended_Pictographic}|\p{L}+/gu;
+
+function words(value: string): string[] {
+  return Array.from(value.match(CASE_SPLIT_PATTERN) ?? []);
+}