React icon export tagNames and exports refactor (#2819)

# Pull Request

## 🤨 Rationale

- export tag names from the react wrappers
- change icon file generation paths in a non-breaking way so `exports`
config is simplified

## 👩‍💻 Implementation

See above

## 🧪 Testing

Manually check react app didn't regress

## ✅ Checklist

- [x] I have updated the project documentation to reflect my changes or
determined no changes are needed.

Author: rajsite

change/@ni-nimble-react-f660e371-f4ba-4867-98e1-ad511e32e53d.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Simplify icon export paths",
+  "packageName": "@ni/nimble-react",
+  "email": "rajsite@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/react-workspace/nimble-react/build/generate-icons.mjs

@@ -23,27 +23,31 @@ if (fs.existsSync(iconsDirectory)) {
 }
 console.log(`Creating icons directory "${iconsDirectory}"`);
 fs.mkdirSync(iconsDirectory);
-
 console.log('Finished creating icons directory');
 
 console.log('Writing icon react wrapper files');
 
 let fileCount = 0;
 for (const key of Object.keys(icons)) {
     const iconName = trimSizeFromName(key); // e.g. "arrowExpanderLeft"
+    const directoryName = spinalCase(iconName); // e.g. "arrow-expander-left"
     const fileName = spinalCase(iconName); // e.g. "arrow-expander-left";
     const className = `Icon${pascalCase(iconName)}`; // e.g. "IconArrowExpanderLeft"
+    const tagName = `icon${pascalCase(iconName)}Tag`; // e.g. "iconArrowExpanderLeftTag"
+    const iconDirectory = path.resolve(iconsDirectory, directoryName);
+    fs.mkdirSync(iconDirectory);
 
     fileCount += 1;
 
     const iconReactWrapperContent = `${generatedFilePrefix}
-import { ${className} } from '@ni/nimble-components/dist/esm/icons/${fileName}';
-import { wrap } from '../utilities/react-wrapper';
+import { ${className}, ${tagName} } from '@ni/nimble-components/dist/esm/icons/${fileName}';
+import { wrap } from '../../utilities/react-wrapper';
 
-export { type ${className} };
+export type { ${className} };
+export { ${tagName} };
 export const Nimble${className} = wrap(${className});`;
 
-    const outputPath = path.resolve(iconsDirectory, `${fileName}.ts`);
+    const outputPath = path.resolve(iconDirectory, 'index.ts');
     fs.writeFileSync(outputPath, iconReactWrapperContent, {
         encoding: 'utf-8'
     });

packages/react-workspace/nimble-react/package.json

@@ -11,9 +11,9 @@
   "exports": {
     "./package.json": "./package.json",
     "./styles/*": "./styles/*",
-    "./icons/*": {
-      "types": "./dist/esm/icons/*.d.ts",
-      "import": "./dist/esm/icons/*.js"
+    ".": {
+      "types": "./dist/esm/index.d.ts",
+      "import": "./dist/esm/index.js"
     },
     "./*": {
       "types": "./dist/esm/*.d.ts",
@@ -22,10 +22,8 @@
   },
   "typesVersions": {
     "*": {
-      "icons/*": [
-        "dist/esm/icons/*.d.ts"
-      ],
       "*": [
+        "dist/esm/*",
         "dist/esm/*/index.d.ts"
       ]
     }

packages/react-workspace/nimble-react/src/anchor-button/index.ts

@@ -1,5 +1,6 @@
-import { AnchorButton } from '@ni/nimble-components/dist/esm/anchor-button';
+import { AnchorButton, anchorButtonTag } from '@ni/nimble-components/dist/esm/anchor-button';
 import { wrap } from '../utilities/react-wrapper';
 
+export { anchorButtonTag };
 export { type AnchorButton };
 export const NimbleAnchorButton = wrap(AnchorButton);

packages/react-workspace/nimble-react/src/anchor-menu-item/index.ts

@@ -1,5 +1,6 @@
-import { AnchorMenuItem } from '@ni/nimble-components/dist/esm/anchor-menu-item';
+import { AnchorMenuItem, anchorMenuItemTag } from '@ni/nimble-components/dist/esm/anchor-menu-item';
 import { wrap } from '../utilities/react-wrapper';
 
+export { anchorMenuItemTag };
 export { type AnchorMenuItem };
 export const NimbleAnchorMenuItem = wrap(AnchorMenuItem);

packages/react-workspace/nimble-react/src/anchor-tab/index.ts

@@ -1,5 +1,6 @@
-import { AnchorTab } from '@ni/nimble-components/dist/esm/anchor-tab';
+import { AnchorTab, anchorTabTag } from '@ni/nimble-components/dist/esm/anchor-tab';
 import { wrap } from '../utilities/react-wrapper';
 
+export { anchorTabTag };
 export { type AnchorTab };
 export const NimbleAnchorTab = wrap(AnchorTab);

packages/react-workspace/nimble-react/src/anchor-tabs/index.ts

@@ -1,5 +1,6 @@
-import { AnchorTabs } from '@ni/nimble-components/dist/esm/anchor-tabs';
+import { AnchorTabs, anchorTabsTag } from '@ni/nimble-components/dist/esm/anchor-tabs';
 import { wrap } from '../utilities/react-wrapper';
 
+export { anchorTabsTag };
 export { type AnchorTabs };
 export const NimbleAnchorTabs = wrap(AnchorTabs);

packages/react-workspace/nimble-react/src/anchor-tree-item/index.ts

@@ -1,5 +1,6 @@
-import { AnchorTreeItem } from '@ni/nimble-components/dist/esm/anchor-tree-item';
+import { AnchorTreeItem, anchorTreeItemTag } from '@ni/nimble-components/dist/esm/anchor-tree-item';
 import { wrap } from '../utilities/react-wrapper';
 
+export { anchorTreeItemTag };
 export { type AnchorTreeItem };
 export const NimbleAnchorTreeItem = wrap(AnchorTreeItem);

packages/react-workspace/nimble-react/src/anchor/index.ts

@@ -1,5 +1,6 @@
-import { Anchor } from '@ni/nimble-components/dist/esm/anchor';
+import { Anchor, anchorTag } from '@ni/nimble-components/dist/esm/anchor';
 import { wrap } from '../utilities/react-wrapper';
 
+export { anchorTag };
 export { type Anchor };
 export const NimbleAnchor = wrap(Anchor);

packages/react-workspace/nimble-react/src/anchored-region/index.ts

@@ -1,5 +1,6 @@
-import { AnchoredRegion } from '@ni/nimble-components/dist/esm/anchored-region';
+import { AnchoredRegion, anchoredRegionTag } from '@ni/nimble-components/dist/esm/anchored-region';
 import { wrap } from '../utilities/react-wrapper';
 
+export { anchoredRegionTag };
 export { type AnchoredRegion };
 export const NimbleAnchoredRegion = wrap(AnchoredRegion);