Merge branch 'main' into angular-updates

Author: rajsite

package-lock.json

@@ -45,6 +45,9 @@
     "packages/nimble-tokens",
     "packages/nimble-components",
     "packages/spright-components",
+    "packages/react-workspace/nimble-react",
+    "packages/react-workspace/spright-react",
+    "packages/react-workspace/react-client-app",
     "packages/storybook",
     "packages/angular-workspace",
     "packages/angular-workspace/nimble-angular",

package.json

@@ -0,0 +1,44 @@
+module.exports = {
+    root: true,
+    ignorePatterns: [
+        'node_modules',
+        'dist'
+    ],
+    overrides: [
+        {
+            files: ['*.js', '*.cjs'],
+            extends: ['@ni-private/eslint-config-nimble/javascript'],
+            rules: {
+                // Configuration scripts will not be in published package and are allowed to use devDependencies
+                'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
+            }
+        },
+        {
+            files: ['build/**/*.js'],
+            rules: {
+                // Build scripts should give verbose logging
+                'no-console': 'off',
+                // Rollup config files use default exports
+                'import/no-default-export': 'off',
+            },
+        },
+        {
+            files: ['*.ts'],
+            extends: ['@ni-private/eslint-config-nimble/typescript'],
+            parserOptions: {
+                project: 'tsconfig.json',
+                tsconfigRootDir: __dirname
+            },
+            rules: {
+                // The React components should use PascalCase
+                '@typescript-eslint/naming-convention': [
+                    'error',
+                    {
+                        selector: 'variable',
+                        format: ['camelCase', 'PascalCase']
+                    },
+                ],
+            }
+        }
+    ],
+};

packages/react-workspace/nimble-react/.eslintrc.cjs

@@ -0,0 +1 @@
+src/icons

packages/react-workspace/nimble-react/.gitignore

@@ -0,0 +1,4 @@
+*
+!/dist/*.*
+!/dist/esm/**
+/dist/esm/**/tests

packages/react-workspace/nimble-react/.npmignore

@@ -0,0 +1,20 @@
+{
+  "name": "@ni/nimble-react",
+  "entries": [
+    {
+      "date": "Tue, 27 May 2025 20:25:14 GMT",
+      "version": "0.0.2",
+      "tag": "@ni/nimble-react_v0.0.2",
+      "comments": {
+        "patch": [
+          {
+            "author": "[email protected]",
+            "package": "@ni/nimble-react",
+            "commit": "32fb7facb3daf1d092a47119110504f7206a92eb",
+            "comment": "Nimble react preview release"
+          }
+        ]
+      }
+    }
+  ]
+}

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

@@ -0,0 +1,13 @@
+# Change Log - @ni/nimble-react
+
+<!-- This log was last generated on Tue, 27 May 2025 20:25:14 GMT and should not be manually modified. -->
+
+<!-- Start content -->
+
+## 0.0.2
+
+Tue, 27 May 2025 20:25:14 GMT
+
+### Patches
+
+- Nimble react preview release ([ni/nimble@32fb7fa](https://github.com/ni/nimble/commit/32fb7facb3daf1d092a47119110504f7206a92eb))

packages/react-workspace/nimble-react/CHANGELOG.md

@@ -0,0 +1,7 @@
+<div align="center">
+    <p><b>ni | nimble | react</b></p>
+</div>
+
+# Nimble React
+
+Work in progress alpha package

packages/react-workspace/nimble-react/README.md

@@ -13,9 +13,9 @@ const trimSizeFromName = text => {
 };
 
 const generatedFilePrefix = `// AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
-// See generation source in storybook/build/generate-icons\n`;
+// See generation source in nimble-react/build/generate-icons\n`;
 
-const iconsDirectory = path.resolve(__dirname, '../../../src/nimble/icons');
+const iconsDirectory = path.resolve(__dirname, '../../../src/icons');
 
 if (fs.existsSync(iconsDirectory)) {
     console.log(`Deleting existing icons directory "${iconsDirectory}"`);
@@ -39,11 +39,12 @@ for (const key of Object.keys(icons)) {
 
     const iconReactWrapperContent = `${generatedFilePrefix}
 import { ${className} } from '@ni/nimble-components/dist/esm/icons/${fileName}';
-import { wrap } from '../../utilities/react-wrapper';
+import { wrap } from '../utilities/react-wrapper';
 
+export { type ${className} };
 export const Nimble${className} = wrap(${className});`;
 
-    const outputPath = path.resolve(iconsDirectory, `${fileName}.react.tsx`);
+    const outputPath = path.resolve(iconsDirectory, `${fileName}.ts`);
     fs.writeFileSync(outputPath, iconReactWrapperContent, {
         encoding: 'utf-8'
     });

packages/storybook/build/generate-icons/rollup.config.js renamed to packages/react-workspace/nimble-react/build/generate-icons/rollup.config.js

@@ -0,0 +1,43 @@
+{
+  "name": "@ni/nimble-react",
+  "version": "0.0.2",
+  "description": "React components for the NI Nimble Design System",
+  "keywords": [
+    "nimble",
+    "react"
+  ],
+  "scripts": {
+    "build": "npm run build:icons && npm run build:components",
+    "build:icons": "npm run build:icons:bundle && npm run build:icons:run",
+    "build:icons:bundle": "rollup --bundleConfigAsCjs --config build/generate-icons/rollup.config.js",
+    "build:icons:run": "node build/generate-icons/dist/index.js",
+    "build:components": "tsc -p ./tsconfig.json",
+    "lint": "eslint .",
+    "format": "eslint . --fix",
+    "pack": "npm pack",
+    "invoke-publish": "npm publish"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ni/nimble.git",
+    "directory": "packages/react-workspace/nimble-react"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "author": "National Instruments",
+  "license": "MIT",
+  "devDependencies": {
+    "@ni-private/eslint-config-nimble": "*",
+    "@ni/fast-web-utilities": "^10.0.0",
+    "@ni/nimble-tokens": "^8.9.0",
+    "@rollup/plugin-node-resolve": "^16.0.0",
+    "rollup": "^4.12.0",
+    "typescript": "~5.4.5"
+  },
+  "peerDependencies": {
+    "@ni/fast-react-wrapper": "^10.1.0",
+    "@ni/nimble-components": "^33.8.0",
+    "react": "^16 || ^17 || ^18"
+  }
+}

packages/storybook/build/generate-icons/source/index.js renamed to packages/react-workspace/nimble-react/build/generate-icons/source/index.js

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

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

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

packages/storybook/src/nimble/anchor-button/anchor-button.react.tsx renamed to packages/react-workspace/nimble-react/src/anchor-button/index.ts

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

packages/storybook/src/nimble/anchor-menu-item/anchor-menu-item.react.tsx renamed to packages/react-workspace/nimble-react/src/anchor-menu-item/index.ts

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

packages/storybook/src/nimble/anchor-tab/anchor-tab.react.tsx renamed to packages/react-workspace/nimble-react/src/anchor-tab/index.ts

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

packages/storybook/src/nimble/anchor-tabs/anchor-tabs.react.tsx renamed to packages/react-workspace/nimble-react/src/anchor-tabs/index.ts

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

packages/storybook/src/nimble/anchor-tree-item/anchor-tree-item.react.tsx renamed to packages/react-workspace/nimble-react/src/anchor-tree-item/index.ts

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

packages/storybook/src/nimble/anchor/anchor.react.tsx renamed to packages/react-workspace/nimble-react/src/anchor/index.ts

@@ -0,0 +1,13 @@
+import { Banner } from '@ni/nimble-components/dist/esm/banner';
+import type { BannerToggleEventDetail } from '@ni/nimble-components/dist/esm/banner/types';
+import { wrap } from '../utilities/react-wrapper';
+
+export { type Banner };
+export const NimbleBanner = wrap(Banner, {
+    events: {
+        onToggle: 'toggle',
+    }
+});
+export interface BannerToggleEvent extends CustomEvent<BannerToggleEventDetail> {
+    target: Banner;
+}

packages/storybook/src/nimble/anchored-region/anchored-region.react.tsx renamed to packages/react-workspace/nimble-react/src/anchored-region/index.ts

@@ -1,4 +1,5 @@
 import { BreadcrumbItem } from '@ni/nimble-components/dist/esm/breadcrumb-item';
-import { wrap } from '../../utilities/react-wrapper';
+import { wrap } from '../utilities/react-wrapper';
 
+export { type BreadcrumbItem };
 export const NimbleBreadcrumbItem = wrap(BreadcrumbItem);

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

@@ -1,4 +1,5 @@
 import { Breadcrumb } from '@ni/nimble-components/dist/esm/breadcrumb';
-import { wrap } from '../../utilities/react-wrapper';
+import { wrap } from '../utilities/react-wrapper';
 
+export { type Breadcrumb };
 export const NimbleBreadcrumb = wrap(Breadcrumb);

packages/storybook/src/nimble/breadcrumb-item/breadcrumb-item.react.tsx renamed to packages/react-workspace/nimble-react/src/breadcrumb-item/index.ts

@@ -1,4 +1,5 @@
 import { Button } from '@ni/nimble-components/dist/esm/button';
-import { wrap } from '../../utilities/react-wrapper';
+import { wrap } from '../utilities/react-wrapper';
 
+export { type Button };
 export const NimbleButton = wrap(Button);

packages/storybook/src/nimble/breadcrumb/breadcrumb.react.tsx renamed to packages/react-workspace/nimble-react/src/breadcrumb/index.ts

@@ -1,4 +1,5 @@
 import { CardButton } from '@ni/nimble-components/dist/esm/card-button';
-import { wrap } from '../../utilities/react-wrapper';
+import { wrap } from '../utilities/react-wrapper';
 
+export { type CardButton };
 export const NimbleCardButton = wrap(CardButton);

packages/storybook/src/nimble/button/button.react.tsx renamed to packages/react-workspace/nimble-react/src/button/index.ts

@@ -1,4 +1,5 @@
 import { Card } from '@ni/nimble-components/dist/esm/card';
-import { wrap } from '../../utilities/react-wrapper';
+import { wrap } from '../utilities/react-wrapper';
 
+export { type Card };
 export const NimbleCard = wrap(Card);

packages/storybook/src/nimble/card-button/card-button.react.tsx renamed to packages/react-workspace/nimble-react/src/card-button/index.ts

@@ -0,0 +1,12 @@
+import { Checkbox } from '@ni/nimble-components/dist/esm/checkbox';
+import { wrap } from '../utilities/react-wrapper';
+
+export { type Checkbox };
+export const NimbleCheckbox = wrap(Checkbox, {
+    events: {
+        onChange: 'change',
+    }
+});
+export interface CheckboxChangeEvent extends CustomEvent {
+    target: Checkbox;
+}

packages/storybook/src/nimble/card/card.react.tsx renamed to packages/react-workspace/nimble-react/src/card/index.ts

@@ -0,0 +1,16 @@
+import { Combobox } from '@ni/nimble-components/dist/esm/combobox';
+import { wrap } from '../utilities/react-wrapper';
+
+export { type Combobox };
+export const NimbleCombobox = wrap(Combobox, {
+    events: {
+        onChange: 'change',
+        onInput: 'input'
+    }
+});
+export interface ComboboxChangeEvent extends CustomEvent {
+    target: Combobox;
+}
+export interface ComboboxInputEvent extends CustomEvent {
+    target: Combobox;
+}

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

@@ -0,0 +1,5 @@
+import { Dialog, UserDismissed } from '@ni/nimble-components/dist/esm/dialog';
+import { wrap } from '../utilities/react-wrapper';
+
+export { type Dialog, UserDismissed };
+export const NimbleDialog = wrap(Dialog);

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

@@ -0,0 +1,5 @@
+import { Drawer } from '@ni/nimble-components/dist/esm/drawer';
+import { wrap } from '../utilities/react-wrapper';
+
+export { type Drawer };
+export const NimbleDrawer = wrap(Drawer);

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

@@ -0,0 +1,5 @@
+import { LabelProviderCore } from '@ni/nimble-components/dist/esm/label-provider/core';
+import { wrap } from '../../utilities/react-wrapper';
+
+export { type LabelProviderCore };
+export const NimbleLabelProviderCore = wrap(LabelProviderCore);

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

@@ -1,4 +1,5 @@
 import { LabelProviderRichText } from '@ni/nimble-components/dist/esm/label-provider/rich-text';
-import { wrap } from '../../../utilities/react-wrapper';
+import { wrap } from '../../utilities/react-wrapper';
 
+export { type LabelProviderRichText };
 export const NimbleLabelProviderRichText = wrap(LabelProviderRichText);

packages/react-workspace/nimble-react/src/label-provider/core/index.ts

@@ -1,4 +1,5 @@
 import { LabelProviderTable } from '@ni/nimble-components/dist/esm/label-provider/table';
-import { wrap } from '../../../utilities/react-wrapper';
+import { wrap } from '../../utilities/react-wrapper';
 
+export { type LabelProviderTable };
 export const NimbleLabelProviderTable = wrap(LabelProviderTable);

packages/storybook/src/nimble/label-provider/rich-text/label-provider-rich-text.react.tsx renamed to packages/react-workspace/nimble-react/src/label-provider/rich-text/index.ts

@@ -1,4 +1,5 @@
 import { ListOptionGroup } from '@ni/nimble-components/dist/esm/list-option-group';
-import { wrap } from '../../utilities/react-wrapper';
+import { wrap } from '../utilities/react-wrapper';
 
+export { type ListOptionGroup };
 export const NimbleListOptionGroup = wrap(ListOptionGroup);

packages/storybook/src/nimble/label-provider/table/label-provider-table.react.tsx renamed to packages/react-workspace/nimble-react/src/label-provider/table/index.ts

@@ -1,4 +1,5 @@
 import { ListOption } from '@ni/nimble-components/dist/esm/list-option';
-import { wrap } from '../../utilities/react-wrapper';
+import { wrap } from '../utilities/react-wrapper';
 
+export { type ListOption };
 export const NimbleListOption = wrap(ListOption);

packages/storybook/src/nimble/list-option-group/list-option-group.react.tsx renamed to packages/react-workspace/nimble-react/src/list-option-group/index.ts

@@ -1,4 +1,5 @@
 import { MappingEmpty } from '@ni/nimble-components/dist/esm/mapping/empty';
-import { wrap } from '../../../utilities/react-wrapper';
+import { wrap } from '../../utilities/react-wrapper';
 
+export { type MappingEmpty };
 export const NimbleMappingEmpty = wrap(MappingEmpty);

packages/storybook/src/nimble/list-option/list-option.react.tsx renamed to packages/react-workspace/nimble-react/src/list-option/index.ts

@@ -1,4 +1,5 @@
 import { MappingIcon } from '@ni/nimble-components/dist/esm/mapping/icon';
-import { wrap } from '../../../utilities/react-wrapper';
+import { wrap } from '../../utilities/react-wrapper';
 
+export { type MappingIcon };
 export const NimbleMappingIcon = wrap(MappingIcon);

packages/storybook/src/nimble/mapping/empty/mapping-empty.react.tsx renamed to packages/react-workspace/nimble-react/src/mapping/empty/index.ts

@@ -1,4 +1,5 @@
 import { MappingSpinner } from '@ni/nimble-components/dist/esm/mapping/spinner';
-import { wrap } from '../../../utilities/react-wrapper';
+import { wrap } from '../../utilities/react-wrapper';
 
+export { type MappingSpinner };
 export const NimbleMappingSpinner = wrap(MappingSpinner);

packages/storybook/src/nimble/mapping/icon/mapping-icon.react.tsx renamed to packages/react-workspace/nimble-react/src/mapping/icon/index.ts

@@ -1,4 +1,5 @@
 import { MappingText } from '@ni/nimble-components/dist/esm/mapping/text';
-import { wrap } from '../../../utilities/react-wrapper';
+import { wrap } from '../../utilities/react-wrapper';
 
+export { type MappingText };
 export const NimbleMappingText = wrap(MappingText);

packages/storybook/src/nimble/mapping/spinner/mapping-spinner.react.tsx renamed to packages/react-workspace/nimble-react/src/mapping/spinner/index.ts

@@ -0,0 +1,5 @@
+import { MappingUser } from '@ni/nimble-components/dist/esm/mapping/user';
+import { wrap } from '../../utilities/react-wrapper';
+
+export { type MappingUser };
+export const NimbleMappingUser = wrap(MappingUser);