{"id":19292145,"url":"https://github.com/nasa-pds/wds-react-legacy","last_synced_at":"2026-03-03T17:34:15.133Z","repository":{"id":185431162,"uuid":"282072810","full_name":"NASA-PDS/wds-react-legacy","owner":"NASA-PDS","description":"PDS Web Design System - React Implementation","archived":false,"fork":false,"pushed_at":"2026-02-12T18:25:48.000Z","size":13350,"stargazers_count":1,"open_issues_count":16,"forks_count":1,"subscribers_count":6,"default_branch":"main","last_synced_at":"2026-02-13T01:55:09.750Z","etag":null,"topics":["pds"],"latest_commit_sha":null,"homepage":"https://github.com/NASA-PDS/wds-react","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/NASA-PDS.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-07-23T22:51:02.000Z","updated_at":"2026-02-12T18:17:30.000Z","dependencies_parsed_at":"2024-02-14T21:26:25.413Z","dependency_job_id":"5b1f73f1-b4d1-4d1b-bf22-a68757d2b98d","html_url":"https://github.com/NASA-PDS/wds-react-legacy","commit_stats":null,"previous_names":["nasa-pds/wds-react","nasa-pds/pds-wds-react","nasa-pds/wds-react-legacy"],"tags_count":4,"template":false,"template_full_name":"NASA-PDS/template-repo-java","purl":"pkg:github/NASA-PDS/wds-react-legacy","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NASA-PDS%2Fwds-react-legacy","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NASA-PDS%2Fwds-react-legacy/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NASA-PDS%2Fwds-react-legacy/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NASA-PDS%2Fwds-react-legacy/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/NASA-PDS","download_url":"https://codeload.github.com/NASA-PDS/wds-react-legacy/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NASA-PDS%2Fwds-react-legacy/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30052506,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-03T15:26:47.567Z","status":"ssl_error","status_checked_at":"2026-03-03T15:26:17.132Z","response_time":61,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["pds"],"created_at":"2024-11-09T22:29:26.878Z","updated_at":"2026-03-03T17:34:15.128Z","avatar_url":"https://github.com/NASA-PDS.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# pds-wds-react\nA library of Planetary Data System web widgets and components in react.\n\n## Installation\n\nRun in a terminal:\n\n    npm i @nasapds/pds-wds-react\n\n## Usage\n\n### Doi Search Widget In React\nImport the Doi Search into your component:\n\n    import {DoiSearch} from 'pds-wds-react';\n\nThen include the component in your react render code:\n\n    \u003cDoiSearch api=\"{api}\" ... /\u003e\n\n**Parameters:**\n\n- `api` The endpoint to the search API. By default this is pointing to http://localhost:8085/PDS_APIs/pds_doi_api/0.2/\n\n- `showActions` Hides or shows action buttons next to each search result. False by default.\n\n- `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.\n\n- `history` A history object from react-router. If your app uses react-router pass the history here. Null by default.\n\n- `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.\n\nIn react the doi search could look like this with the parameters changed:\n\n```javascript\n\u003cDoiSearch\n    api={'http//localhost:8085/PDS_APIs/pds_doi_api/0.2/'}\n    useClientRouter={true}\n    showActions={true}\n/\u003e\n```\n\n### Doi Search Widget As Embeddable JS\nIn your project create a directory for example:\n\n    pds-widgets/\n\nDrop the contents of the `/embedbuild` directory into the newly created directory.\n\nLink the library into your project HTML using the script tag. Change the directory to the one that you created:\n\n    \u003cscript src=\"pds-widgets/index.js\"\u003e\u003c/script\u003e\n\nAdd a div with the ID of the component set as `DoiSearch`:\n\n    \u003cdiv id=\"DoiSearch\"\u003e\u003c/div\u003e\n\n**Parameters:**\n\n- `data-api` Point this to your doi api. It is set to localhost 8085 by default.\n\n\nIn your html page the doi search could look like this with the parameters changed:\n\n```javascript\n`\u003cdiv id=\"DoiSearch\" data-api='http//localhost:8085/PDS_APIs/pds_doi_api/0.2/'\u003e\u003c/div\u003e`\n```\n\n## Code Base Development Instructions\n\n### Source\n\nClone this repository into your workspace first.\n\nThe components are found inside `/src/pds/`\n\nEach component has an index.js and a \u003cname\u003e.js file.\n`index.js` is for building the embeddable js widget.\n`\u003cname\u003e.js` is for building the npm package.\n\nThere 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`\n\n### Development Scripts\nFor 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.\n\nFor 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`\n\nImport the component into your client app using the Usage section.\n\nThere 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.\n\n### Test Dependabot Upgrades\n1. Build locally\n```\n    nvm use\n    npm clean-install --legacy-peer-deps\n```\n\n2. If that passes, deploy updated package into locally running package of our site\n     * [clone portal-legacy-docker](https://github.com/NASA-PDS/portal-legacy-docker?tab=readme-ov-file#clone-the-repository)\n     * git pull and [update sub-modules](https://github.com/NASA-PDS/portal-legacy-docker?tab=readme-ov-file#pull-git-submodules)\n     * [run docker container](https://github.com/NASA-PDS/portal-legacy-docker?tab=readme-ov-file#running-docker-container)\n\n3. Run `make copy-js-files` on this repo (assumes portal-legacy-docker is at same level directory as this repo)\n\n## Building\n\n### Prerequisite\n\nInstall nvm to manage the nodejs environments. https://github.com/nvm-sh/nvm\n\nUse nvmrc file to switch Node.js to version 16.20.0 (LTS/Gallium):\n\n    nvm use\n\n\n\n### Build the packages\n\n`npm install --legacy-peer-deps`\n\n`npm run build`\nTwo directories will be created `/build` and `/embedbuild`.\n\n`/build` will the contain the ready to deploy npm files. This is what is deployed to the NPM JS website.\n\n`/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.\n\n### Publishing to NPM\nUpdate the version in the `/package.json` file.\n\nUse the `X.X.X` semver syntax to set a version or `X.X.X-beta.X` semver syntax for a beta version.\n\nUse `npm publish` to publish a stable version or use `npm publish --tag beta` to publish a beta version.\n\nIf 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.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnasa-pds%2Fwds-react-legacy","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnasa-pds%2Fwds-react-legacy","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnasa-pds%2Fwds-react-legacy/lists"}