feat: Publish Veda UI to npm and workflow proposal (#1391)

**Related Ticket:** closes
[#1369](#1369)

### Description of Changes
- Changed the registry in .npmrc from the private Verdaccio registry to
the public NPM registry under the scope `teamimpact`
- [Published the
library](https://www.npmjs.com/~teamimpact?activeTab=packages) under the
`teamimpact` scope and updated the docs on how to set the necessary npm
credentials
- Experimented with a new `README-lib.md`:
- Added an experimental workflow to copy this file to the lib dist
during the library build
- This allows us to have a unique `README.md` for the library when its
published on NPM, separate from the veda-ui submodule documentation
- I noticed the lib bundle size increased, largely due to the USWDS
images and fonts being copied in the library build. There’s room for
optimization, including removing unused assets or modules from the
existing veda-ui (e.g. `air-quality-and-covid-19--story-cover.png` etc),
and I made a tracking issue for that: #1392

### Notes & Questions About Changes

Proposed workflow for developing, testing and publishing the NPM
registry:
 
- Workflow proposal for veda-ui NPM publishing and development / testing
with consuming apps (Next.JS) is [documented
here](https://docs.google.com/document/d/1JRvZybU08mSdZTTXPkJr5pqYgoB_5EYYNWixXlgUIlA/edit?usp=sharing).
The proposal aligns and extends our current veda-ui publishing workflow
with the bi-weekly automated releases

### Validation / Testing
1. Set the necessary npm auth credentials mentioned in the set up docs
2. dry-run publish a version to make sure everything you're correctly
authenticated
3. Review the [Google
doc](https://docs.google.com/document/d/1JRvZybU08mSdZTTXPkJr5pqYgoB_5EYYNWixXlgUIlA/edit?usp=sharing)
proposal and share feedback

Author: dzole0311

.npmrc

@@ -1 +1 @@
-registry=http://verdaccio.ds.io:4873
+registry=https://registry.npmjs.org

README-lib.md

@@ -0,0 +1,30 @@
+# VEDA Dashboard
+
+![VEDA logo](./docs/media/nasa-veda-logo-pos.svg)
+
+VEDA is a dashboard to explore data.
+
+This repository contains the UI component of Veda where development of new features happens.
+If you're looking to add content check the [veda-config](https://github.com/NASA-IMPACT/veda-config) repository.
+
+## Content documentation
+
+**⚠️ The content configuration should not happen on this repository, but on your instance of [veda-config](https://github.com/NASA-IMPACT/veda-config).**
+
+The following documentation will guide you through the process of configuring the content.
+
+- Check [CONFIGURATION](./docs/content/CONFIGURATION.md) to see a list of configuration options for VEDA.
+- Check [CONTENT](./docs/content/CONTENT.md) for how to structure the content pieces.
+- Check [PAGE_OVERRIDES](./docs/content/PAGE_OVERRIDES.md) for all the layout overrides available to you and how they work.
+
+
+## Development documentation
+
+Check the documentation below for how to setup and develop features for `veda-ui`.
+
+- **Start here**: Check [SETUP.md](./docs/development/SETUP.md) for instructions on how to set up your local development environment.
+- Check [ARCHITECTURE](./docs/development/ARCHITECTURE.md) docs to read about architecture.
+- Check [PAGE_OVERRIDES](./docs/development/PAGE_OVERRIDES.md) for information about the component/content overriding feature.
+
+## License
+This project is licensed under **Apache 2**, see the [LICENSE](./LICENSE) file for more details.

docs/development/REGISTRY.md

@@ -12,11 +12,11 @@ yarn buildlib
 After successfully building the library, link the project to your local environment with the following command, executed inside the VEDA-UI directory:
 
 ```
-yarn link 
+yarn link
 ```
-Then change your directory to the project that is using veda-ui, which has `@developmentseed/veda-ui` as a dependency. Create a local alias for VEDA-UI by running:
+Then change your directory to the project that is using veda-ui, which has `@teamimpact/veda-ui` as a dependency. Create a local alias for VEDA-UI by running:
 ```
-yarn link @developmentseed/veda-ui
+yarn link @teamimpact/veda-ui
 ```
 
 Your project should now use the local version of the VEDA-UI library.
@@ -29,7 +29,28 @@ Note: Package publishing is not yet part of the CI system since the library is s
 
 ### Publish
 
-As of September 2024, VEDA-UI is being published to Development Seed's Verdaccio instance.To publish the package, authenticate using Development Seed's NPM credentials. Run the following command to test the publishing process before pushing live:
+As of January 2025, VEDA-UI is published to NASA IMPACT's npm registry.
+
+## Authentication
+
+To publish the package, make sure you are authenticated with teamimpact's NPM registry. Use the following steps to set up authentication and scope:
+
+1. Set the scoped registry for @teamimpact:
+
+```
+npm config set @teamimpact:registry=https://registry.npmjs.org/
+```
+
+2. Add your authentication token for the registry:
+
+```
+npm config set //registry.npmjs.org/:_authToken=<your-token>
+```
+Replace <your-token> with the actual token provided to you.
+
+> **Important:** Avoid using `npm logout` while working with the registry locally. Logging out invalidates the authentication token globally, which will disrupt publishing and other registry-related actions.
+
+Before publishing live, test the process with:
 
 ```
 npm publish --dry-run
@@ -49,7 +70,7 @@ For example, if the current version is v5.7.0 and further changes are necessary
 To check the latest version in the registry and ensure proper versioning, run:
 
 ```
-npm view @developmentseed/veda-ui version
+npm view @teamimpact/veda-ui version
 ```
 
 Currently, developers manually update the version number in the package.json file to publish with pre-release tags (instead of using npm tag) because a formal release cycle for the library has not yet been established.

docs/development/THEMING_GUIDE.md

@@ -59,7 +59,7 @@ The order of importing styles is important so that proper styles cascading can b
 // Note: For custom styles that override VEDA UI and/or USWDS,
 // create a separate custom.scss file and import it last in your application
 // Import order in your app:
-// 1. import '@developmentseed/veda-ui/lib/main.css';
+// 1. import '@teamimpact/veda-ui/lib/main.css';
 // 2. import './styles/index.scss';
 // 3. import './styles/custom.scss';
 ```
@@ -123,7 +123,7 @@ module.exports = {
 
 ```typescript
 import './styles/index.scss';
-import '@developmentseed/veda-ui/lib/main.css';
+import '@teamimpact/veda-ui/lib/main.css';
 // Any other custom styles
 import './styles/custom.scss';
 ```

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@developmentseed/veda-ui",
+  "name": "@teamimpact/veda-ui",
   "description": "Dashboard",
   "version": "5.12.1",
   "author": {
@@ -22,7 +22,7 @@
   "scripts": {
     "serve": "NODE_ENV=development gulp serve",
     "build": "NODE_ENV=production gulp",
-    "buildlib": "gulp buildlib",
+    "buildlib": "gulp buildlib && cp README-lib.md lib/README.md",
     "stage": "yarn buildlib && NODE_ENV=staging gulp",
     "clean": "gulp clean",
     "lint": "yarn lint:scripts && yarn lint:css",