https://github.com/nasa-pds/wds-react-legacy
PDS Web Design System - React Implementation
https://github.com/nasa-pds/wds-react-legacy
pds
Last synced: 5 months ago
JSON representation
PDS Web Design System - React Implementation
- Host: GitHub
- URL: https://github.com/nasa-pds/wds-react-legacy
- Owner: NASA-PDS
- License: apache-2.0
- Created: 2020-07-23T22:51:02.000Z (about 6 years ago)
- Default Branch: main
- Last Pushed: 2026-02-12T18:25:48.000Z (5 months ago)
- Last Synced: 2026-02-13T01:55:09.750Z (5 months ago)
- Topics: pds
- Language: JavaScript
- Homepage: https://github.com/NASA-PDS/wds-react
- Size: 12.7 MB
- Stars: 1
- Watchers: 6
- Forks: 1
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.txt
- Codeowners: .github/CODEOWNERS
- Security: SECURITY.md
Awesome Lists containing this project
README
# pds-wds-react
A library of Planetary Data System web widgets and components in react.
## Installation
Run in a terminal:
npm i @nasapds/pds-wds-react
## Usage
### Doi Search Widget In React
Import the Doi Search into your component:
import {DoiSearch} from 'pds-wds-react';
Then include the component in your react render code:
**Parameters:**
- `api` The endpoint to the search API. By default this is pointing to http://localhost:8085/PDS_APIs/pds_doi_api/0.2/
- `showActions` Hides or shows action buttons next to each search result. False by default.
- `useClientRouter` If set to true will disable the widget's internal react-router. Set this to true if your app uses react-router. False by default.
- `history` A history object from react-router. If your app uses react-router pass the history here. Null by default.
- `store` A Redux store object. If you want to customize the behavior of the widget action buttons or the call process you can pass your own store. This is null by default.
In react the doi search could look like this with the parameters changed:
```javascript
```
### Doi Search Widget As Embeddable JS
In your project create a directory for example:
pds-widgets/
Drop the contents of the `/embedbuild` directory into the newly created directory.
Link the library into your project HTML using the script tag. Change the directory to the one that you created:
Add a div with the ID of the component set as `DoiSearch`:
**Parameters:**
- `data-api` Point this to your doi api. It is set to localhost 8085 by default.
In your html page the doi search could look like this with the parameters changed:
```javascript
`
`
```
## Code Base Development Instructions
### Source
Clone this repository into your workspace first.
The components are found inside `/src/pds/`
Each component has an index.js and a .js file.
`index.js` is for building the embeddable js widget.
`.js` is for building the npm package.
There are three index files inside `/src/pds/` that need to be updated with an import of a new component when one is created. These are `embedBuildIndex.js`, `embedIndex.js` and `npmBuildIndex.js`
### Development Scripts
For testing embeddable widgets run the script `npm run embeddev` This will run a server with `/public/embedIndex.html` as the entry point. You can update this file to show the component that you want to test.
For testing the NPM package run the script `npm run npmbuild` Then run `npm link` you can then create a client app and import using `npm link pds-wds-react`
Import the component into your client app using the Usage section.
There are sometimes problems with multiple instances of react caused by npm link. If this happens, delete `node_modules/react` inside the pds-wds-react source. Then stop and restart the client test app again.
### Test Dependabot Upgrades
1. Build locally
```
nvm use
npm clean-install --legacy-peer-deps
```
2. If that passes, deploy updated package into locally running package of our site
* [clone portal-legacy-docker](https://github.com/NASA-PDS/portal-legacy-docker?tab=readme-ov-file#clone-the-repository)
* git pull and [update sub-modules](https://github.com/NASA-PDS/portal-legacy-docker?tab=readme-ov-file#pull-git-submodules)
* [run docker container](https://github.com/NASA-PDS/portal-legacy-docker?tab=readme-ov-file#running-docker-container)
3. Run `make copy-js-files` on this repo (assumes portal-legacy-docker is at same level directory as this repo)
## Building
### Prerequisite
Install nvm to manage the nodejs environments. https://github.com/nvm-sh/nvm
Use nvmrc file to switch Node.js to version 16.20.0 (LTS/Gallium):
nvm use
### Build the packages
`npm install --legacy-peer-deps`
`npm run build`
Two directories will be created `/build` and `/embedbuild`.
`/build` will the contain the ready to deploy npm files. This is what is deployed to the NPM JS website.
`/embedbuild` will contain the ready to deploy embeddable widget files. This is what can be dropped into a website that is not built with React.
### Publishing to NPM
Update the version in the `/package.json` file.
Use the `X.X.X` semver syntax to set a version or `X.X.X-beta.X` semver syntax for a beta version.
Use `npm publish` to publish a stable version or use `npm publish --tag beta` to publish a beta version.
If you want to test a beta version make sure to install the beta version instead of the latest version. Use `npm install @nasapds/pds-wds-react@beta` for the latest beta version or `npm install @nasapds/pds-wds-react@X.X.X-beta.X` for a specific version.