A library of react components for use with USACE Water Management Webpages
npm install @usace-watermanagement/groundwork-water``bash`
npm install @usace-watermanagement/groundwork-water --save
Will install the groundwork water components to your local node_modules directory, and add it to your packages.json for future use.
You can read the current Groundwork Water Documentation:
https://usace-watermanagement.github.io/groundwork-water/
- #### Pull Requests
- Where possible, commits and pull requests should be atomic:
_Keeping commits and PRs to one topic at a time_
- To ensure reviewers can more easily review code revisions and not miss anything
- Reduces the frequency of merge conflicts
- Provides separation of concern (for bugs) when only one issue is merged at a time
- You _must_ rebase your branch to main before you submit Pull Requests:
- [ Terminal ] _From your branch run_
1. git fetch origin
2.
- [ GUI ] In VSCode:
This can also be done in VSCode using the menu:
!rebase from main
- #### Workflow Recommendations
- Use npm link to connect your project or the docs to the local generated groundwork-water
- See the script in package.json for details
- Commit Often - Atomic Commits
- i.e. if you update style of plot, do a commit related to "Update plotxyz style" then move on to next item/commit
- Use VSCode or Similar Featured Editor to provide advanced features, save time, and integrate various utilities:
- Command Prompt in VSCode : Integrated Terminal
- Tips & Tricks
- #### Extensions
- TailwindCSS -> Provides you inline tailwind options in your className blocks
- Prettier -> Industry standard for styling, large community, and works in many programming languages
- Better Comments -> Highlight TODO and other type comments
- Code Spell Checker -> Don't let the typos win
- Git Graph -> Adds a graph icon on your "Source Control" line to let you view a visual representation of your git state
- #### Styling / formatting
- Style often and consider Format on Save for Workspace)
- Use the Prettier extension mentioned before to format with
1. Press F1 to open command pallette
2. Type "format", and then select "Format Document with..."
3. "Select Prettier"
_There are two directories of interest in this repository for Groundwork Water developers_
_Documentation Website_
The /docs directory contains the source code for the documentation website.
To run the docs you can do the following:
`bash
npm install
npm run build
cd docs
npm install
npm run dev
`
This will first _install_ the dependencies for the library then it npm link's the package in the docs.
When you're making frequent changes you should consider importing the components directly from the package.
i.e.
`js`
import { CWMSPlot } from "../path/to/lib/path/to/component";
This will install the dependencies, and then run the docs in development mode.
_groundwork-water npm library_
The /lib directory contains the source code for the package itself.
These are the components that would be shared with the community but also within the docs themselves for testing and to showcase the components.
_NOTE:_ You will first need to be added as a collaborator to the package on NPM.
To publish a new version of the package, run the following command:
`bash``
npm run publish
This will build the package, and then publish it to NPM.