feat: Export dash-cased names

src/components/component-definition.ts

@@ -36,6 +36,7 @@ function castI18nTag(tag: string | undefined) {
 
 export function buildComponentDefinition(
   name: string,
+  dashCaseName: string,
   props: Array<ExpandedProp>,
   functions: Array<ExpandedProp>,
   defaultValues: Record<string, string>,
@@ -48,6 +49,7 @@ export function buildComponentDefinition(
 
   return {
     name,
+    dashCaseName,
     releaseStatus: 'stable',
     description: componentDescription.text,
     systemTags: getCommentTags(componentDescription, 'awsuiSystem'),

src/components/index.ts

@@ -11,8 +11,8 @@ import { bootstrapTypescriptProject } from '../bootstrap/typescript';
 import { extractDeclaration, getDescription } from './type-utils';
 
 function componentNameFromPath(componentPath: string) {
-  const directoryName = pathe.dirname(componentPath);
-  return pascalCase(pathe.basename(directoryName));
+  const dashCaseName = pathe.basename(pathe.dirname(componentPath));
+  return { dashCaseName, name: pascalCase(dashCaseName) };
 }
 
 interface DocumenterOptions {
@@ -36,7 +36,7 @@ export function documentComponents(
     .filter(file => isMatch(file.fileName))
     .map(sourceFile => {
       const moduleSymbol = checker.getSymbolAtLocation(sourceFile);
-      const name = componentNameFromPath(sourceFile.fileName);
+      const { name, dashCaseName } = componentNameFromPath(sourceFile.fileName);
 
       // istanbul ignore next
       if (!moduleSymbol) {
@@ -57,6 +57,14 @@ export function documentComponents(
         extractDeclaration(componentSymbol)
       );
 
-      return buildComponentDefinition(name, props, functions, defaultValues, componentDescription, checker);
+      return buildComponentDefinition(
+        name,
+        dashCaseName,
+        props,
+        functions,
+        defaultValues,
+        componentDescription,
+        checker
+      );
     });
 }

src/components/interfaces.ts

@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 export interface ComponentDefinition {
   name: string;
+  dashCaseName: string;
   /** @deprecated */
   releaseStatus: string;
   /** @deprecated */

test/components/complex-types.test.ts

@@ -15,6 +15,17 @@ beforeAll(() => {
   [buttonGroup, columnLayout, sideNavigation, table] = result;
 });
 
+test('should have camel and dash-cased names', () => {
+  expect(buttonGroup.name).toEqual('ButtonGroup');
+  expect(buttonGroup.dashCaseName).toEqual('button-group');
+  expect(sideNavigation.name).toEqual('SideNavigation');
+  expect(sideNavigation.dashCaseName).toEqual('side-navigation');
+  expect(columnLayout.name).toEqual('ColumnLayout');
+  expect(columnLayout.dashCaseName).toEqual('column-layout');
+  expect(table.name).toEqual('Table');
+  expect(table.dashCaseName).toEqual('table');
+});
+
 test('should only have expected properties, regions and events', () => {
   expect(table.properties.map(prop => prop.name)).toEqual(['ariaLabels', 'columns', 'filteringFn', 'items', 'trackBy']);
   expect(table.events.map(prop => prop.name)).toEqual(['onWidthChange']);