chore(npm): build TS to JS when publishing

ui/.eslintrc.js

@@ -34,7 +34,8 @@ module.exports = {
                     '**/stories/**', // storybook stories
                     '**/tests/**',
                     '**/mocks/**',
-                    '**/*{.,_}{test,spec}.{ts,tsx}', // tests where the extension or filename suffix denotes that it is a test
+                    '**/*{.,_}{test,spec}.{ts,tsx}', // tests where the extension or filename suffix denotes that it is a test,
+                    '*.js', // js configs from the root folder
                 ],
                 optionalDependencies: false,
             },

ui/CONTRIBUTING.md

@@ -0,0 +1,136 @@
+# Contributing to the UCC UI Library
+
+## Overview
+
+This project features a UI framework that dynamically renders UI components based on a provided `globalConfig.json`.
+
+For a quick start, refer to the [quick_start_ui.sh](../scripts/quick_start_ui.sh) script.
+
+## Getting Started
+
+1. Clone the repository.
+1. Install Yarn Classic (version >=1.2) if you haven't already: `npm install --global yarn`.
+1. Execute the setup task: `yarn run setup`.
+
+Once these steps are complete, the following tasks become available:
+
+* `yarn start` – Initiates a server that serves JavaScript bundles from memory and proxies other requests to the target (default: `localhost:8000`).
+* `yarn build` – Generates a production bundle.
+* `yarn build:watch` – Creates a development bundle and writes it to the output folder.
+* `yarn run storybook` – Launches Storybook and opens <http://localhost:6006>.
+* `yarn run test-storybook` – Verifies if screenshots match for each story.
+* `yarn run test-storybook:update-snapshots` – Updates screenshots.  Run this after any visual modifications.
+* `yarn run eslint` – Executes linters.
+* `yarn run eslint:fix` – Addresses linter issues and applies Prettier formatting.
+* `yarn run format` – Uses Prettier to automatically format source code files.  This command overwrites files without prompting. Use `format:verify` for a non-destructive check.
+
+Running `yarn run setup` is a prerequisite for all other tasks.  This command may require a few minutes to finish.
+
+A published version of Storybook is available at: <https://splunk.github.io/addonfactory-ucc-generator/storybook>
+
+## Development Server
+
+This project incorporates [webpack-dev-server](https://webpack.js.org/configuration/dev-server/) to streamline development, providing live reloading and in-memory serving of UI builds and static JavaScript files.
+
+```bash
+yarn start
+```
+
+This starts the server at <http://localhost:8080> (or a custom port, if specified) and automatically refreshes the browser when file changes are detected. It intersects static assets for all TAs. You might want to modify the proxy target in the [webpack.config.js](webpack.config.js) file.
+
+## Code Formatting
+
+The UCC UI Library utilizes [Prettier](https://github.com/prettier/prettier) to ensure consistent code formatting.  It's highly recommended to [integrate a Prettier plugin into your editor/IDE](https://github.com/prettier/prettier#editor-integration).
+
+## Screenshot Testing Guide
+
+This section details how to use screenshot testing, leveraging [Git Large File Storage (Git LFS)](https://git-lfs.com/) and a continuous integration (CI) setup to maintain visual consistency across Storybook stories.
+
+### Prerequisites
+
+* **Git LFS:** Screenshots are stored using Git LFS.  Ensure it's installed on your system by following the [installation guide](https://github.com/git-lfs/git-lfs#installing).  For macOS:
+
+    ```bash
+    brew install git-lfs
+    ```
+
+    After installing Git LFS, initialize it with:
+
+    ```bash
+    git lfs install
+    git lfs pull
+    ```
+
+### Automated Screenshot Testing
+
+Our CI pipeline includes a job defined in [storybook-visual.yml](../.github/workflows/storybook-visual.yml). This job automates the following:
+
+* Builds and serves Storybook.
+* Captures screenshots of all stories.
+* Compares these screenshots against those stored in the repository.
+* If differences are detected, the job updates the screenshots and pushes the changes to the current branch.
+
+### Updating Screenshots Locally
+
+Due to differences in application rendering between macOS and Linux (particularly text rendering), we recommend using Docker to update screenshots for consistency.  Follow these steps:
+
+1. **Start Storybook:**
+
+    Launch Storybook locally using Yarn:
+
+    ```bash
+    yarn run storybook
+    ```
+
+1. **Capture and Update Screenshots:**
+
+    With Storybook running, use Docker Compose to update the screenshots:
+
+    ```bash
+    docker compose up --build
+    ```
+
+This ensures that screenshots are consistent and accurately represent the application's appearance across different environments.
+
+## Publishing the UI as an NPM Package
+
+Publishing is handled automatically by the CI pipeline. The version is determined by the `version` field in the `package.json` file, which is updated by the release job. The publishing commands are described in [npm-publish.yml](../.github/workflows/npm-publish.yml).
+
+It's good practice to verify that changes in this package function correctly for users. To test changes locally, you can use [Verdaccio](https://github.com/verdaccio/verdaccio). Here's a brief overview:
+
+* Run a Verdaccio server.
+* Publish the package to Verdaccio.
+* Switch to the TA repository and install the package from the local registry.
+
+First, start the Verdaccio server. Execute this command in your terminal:
+
+```bash
+npx verdaccio
+```
+
+Create a user if you haven't already. The actual credentials aren't critical since it's a local server.
+
+```bash
+npm adduser --scope=@splunk --registry http://localhost:4873/
+```
+
+Keep the server running while publishing or installing packages.  Publish the package to Verdaccio using:
+
+```bash
+# Updates the version in package.json to prevent publishing the same version.
+npm version prerelease
+
+npm publish --registry http://localhost:4873
+```
+
+You can inspect the published version by visiting <http://localhost:4873> in your browser.
+
+To install the package from Verdaccio in your TA repository, use:
+
+```bash
+npm install @splunk/add-on-ucc-framework@latest --registry http://localhost:4873
+# or
+yarn add @splunk/add-on-ucc-framework@latest --registry http://localhost:4873
+```
+
+After testing, discard changes in the TA repository's lock file (which will contain the localhost registry URL) and the version bump in the UCC UI's `package.json` file.

ui/README.md

@@ -1,93 +1,32 @@
-# Contributing to UCC UI Library
+# UCC-UI
 
-## Overview
-
-This project includes a UI framework that dynamically renders UI components based on the provided `globalConfig.json`.
-
-For a quickstart, please check [quick_start_ui.sh](../scripts/quick_start_ui.sh)
+This is a UI library that extends UCC with custom UI components.  It provides TypeScript-based components and hooks for building custom user interfaces.
 
 ## Getting Started
 
-1. Clone the repo.
-1. Install yarn (>= 1.2) if you haven't already: `npm install --global yarn`.
-1. Run the setup task: `yarn run setup`.
-
-After completing these steps, the following tasks will be available:
-
-* `yarn start` – Starts a server that serves JS bundles from memory and proxies other requests to the target, which is `localhost:8000` by default.
-* `yarn build` – Creates a production bundle.
-* `yarn build:watch` – Creates a dev bundle and writes to output folder
-* `yarn run storybook` - Starts Storybook and opens http://localhost:6006.
-* `yarn run test-storybook` - Checks if screenshots match for every story.
-* `yarn run test-storybook:update-snapshots` - Updates screenshots. Must be run after every visual change.
-* `yarn run eslint` – Runs linters.
-* `yarn run eslint:fix` – Fixes linter issues and runs prettier.
-* `yarn run format` – Runs prettier to auto-format `*.js`, `*.jsx`, and `*.css` files. This command overwrites files without confirmation. Use `format:verify` for a non-destructive check.
-
-Running `yarn run setup` is required to enable all other tasks. This command might take a few minutes to complete.
-
-We have published Storybook at: https://splunk.github.io/addonfactory-ucc-generator/storybook
-
-## Development Server
-
-This project integrates [webpack-dev-server](https://webpack.js.org/configuration/dev-server/) to enhance the development workflow, facilitating live reloading and in-memory serving of UI builds and static JavaScript files
-
 ```bash
-yarn start
+npm install --save @splunk/add-on-ucc-framework
+# or
+yarn add @splunk/add-on-ucc-framework
 ```
 
-This initiates the server at http://localhost:8080 (or a custom port, if configured) and automatically refreshes the browser upon detecting file changes. It intersects static assets for all TAs. You may want to change target for the proxy in the file [webpack.config.js](webpack.config.js)
-
-## Code Formatting
-
-UCC UI Lib uses [prettier](https://github.com/prettier/prettier) for consistent code formatting. It's recommended to [add a prettier plugin to your editor/IDE](https://github.com/prettier/prettier#editor-integration).
-
-## Screenshot Testing Guide
+## Usage
 
-This section outlines how to work with screenshot testing in our project, utilizing [Git Large File Storage (Git LFS)](https://git-lfs.com/) and a continuous integration (CI) setup to ensure visual consistency across our Storybook stories.
+Import a base class to extend for your custom UI components. If you're using TypeScript, you'll have static type support in lifecycle methods.
 
-### Prerequisites
-
-* Git LFS: Our screenshots are stored with Git LFS. Ensure it's installed on your system by following [the installation guide](https://github.com/git-lfs/git-lfs#installing). For MacOS it is:
-
-```bash
-brew install git-lfs
-```
+```tsx
+import React from "react";
+import ReactDOM from "react-dom";
+import { CustomControlBase } from "@splunk/add-on-ucc-framework";
 
-After installing Git LFS, set it up with the following command:
-
-```bash
-git lfs install
-git lfs pull
-```
-
-### Automated Screenshot Testing
-
-Our CI pipeline includes a job defined in [storybook-visual.yml](../.github/workflows/storybook-visual.yml). This job automates the following process:
-
-* Build and serve Storybook.
-* Captures screenshots of all stories.
-* Compares these screenshots against those stored in the repository.
-* If discrepancies are found, the job updates the screenshots and pushes the updates to the current branch.
-
-### Updating Screenshots Locally
-
-Due to differences in application appearance between MacOS and Linux (especially in text rendering), we recommend using Docker to update screenshots for consistency. Here's how you can update screenshots locally:
-
-1. Start Storybook:
-
-    Run Storybook locally using Yarn:
-
-    ```bash
-    yarn run storybook
-    ```
-
-1. Capture and Update Screenshots:
-
-    Once Storybook is running, use Docker Compose to update the screenshots:
-
-```bash
-docker compose up --build
+export default class MyCustomControl extends CustomControlBase {
+  render() {
+    ReactDOM.render(
+      <input value={this.data.value} />,
+      this.el,
+    );
+  }
+}
 ```
 
-This approach ensures that screenshots are consistent and reflective of how the application is intended to look across different environments.
+Refer to the [splunk-example-ta](https://github.com/splunk/splunk-example-ta) repository for more examples.

ui/package.json

@@ -11,23 +11,25 @@
   "author": "Splunk Inc.",
   "homepage": "https://splunk.github.io/addonfactory-ucc-generator",
   "scripts": {
-    "build": "cross-env NODE_ENV=production webpack --bail",
-    "build:lib": "cross-env NODE_ENV=production tsc --project tsconfig.lib.json",
-    "build:watch": "webpack --watch",
+    "build": "webpack --mode=production",
+    "build:lib": "webpack --mode=production --config webpack.config.lib.js",
+    "build:lib:types": "tsc --project tsconfig.lib.json",
+    "build:lib:full": "yarn run build:lib && yarn run build:lib:types",
+    "build:watch": "webpack --mode=development --watch",
     "format": "prettier \"src/**/*.(js|jsx|ts|tsx|css)\" --write",
     "format:verify": "prettier \"src/**/*.(js|jsx|ts|tsx|css)\" --list-different",
     "eslint": "eslint src --ext \".js,.jsx,.ts,.tsx\"",
     "eslint:fix": "yarn run eslint --fix",
     "lint": "yarn run eslint && yarn run format:verify",
     "test": "jest",
     "test:watch": "jest --watch",
-    "start": "webpack serve",
+    "start": "webpack serve --mode=development",
     "setup": "yarn && yarn run build",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "test-storybook": "test-storybook",
     "test-storybook:update-snapshots": "yarn run test-storybook -u",
-    "prepublishOnly": "yarn run build:lib"
+    "prepublishOnly": "yarn run build:lib:full"
   },
   "dependencies": {
     "@splunk/dashboard-action-buttons": "^28.1.0",
@@ -96,7 +98,6 @@
     "babel-eslint": "^10.1.0",
     "babel-jest": "^29.7.0",
     "babel-loader": "^8.4.1",
-    "cross-env": "^7.0.3",
     "css-loader": "^7.1.2",
     "eslint": "^8.57.1",
     "eslint-config-airbnb": "^19.0.4",
@@ -158,5 +159,6 @@
   "types": "./dist/lib/publicApi.d.ts",
   "files": [
     "dist/lib"
-  ]
+  ],
+  "main": "./dist/lib/main.js"
 }

ui/src/publicApi.ts

@@ -1,8 +1,8 @@
-export { Mode } from './constants/modes';
+export type { Mode } from './constants/modes';
 
-export { GlobalConfig } from './types/globalConfig/globalConfig';
+export type { GlobalConfig } from './types/globalConfig/globalConfig';
 
-export { BaseFormState } from './types/components/BaseFormTypes';
+export type { BaseFormState } from './types/components/BaseFormTypes';
 
 export { CustomHookClass } from './types/components/CustomHookClass';
 

ui/tsconfig.lib.json

@@ -3,7 +3,8 @@
   "compilerOptions": {
     "emitDeclarationOnly": true,
     "declaration": true,
-    "declarationDir": "./dist/lib"
+    "declarationDir": "./dist/lib",
+    "outDir": "./dist/lib"
   },
   "include": [
     "src/publicApi.ts"