open-index/open-npm huggingface dataset:
npm package: @jadesrochers/formbuilder
Description: Components to set up selection forms with selector updates
Author: Jared Desrochers
Latest version: 0.4.2

## Formbuilder; for selection forms with changing fields  
The form library is aimed specifically at forms where changing one field  
can change the options in the other fields.  

#### Set up using the Form and Selector components -  
RegSelectors will hold a static set of selections, while UpdateSelectors  
fields can change based on the variables in other Selectors.  
#### Each selector needs a dataget fcn/object to set the contents  
This can be a function that retrieves data or just an array that specifies  
what the options will be.  
For UpdateSelectors it needs to be a fcn because the UpdateSelector will call  
it anytime the specified other fields (changeon) change.  
RegSelectors will just call it/use it once to populate the selector.  
#### The form needs a submit fcn  
The submit function will be passed the values stored in each selector, as well  
as the submit event. I found the event hard to work with so it is just there  
if anyone else prefers that format.  
#### Also takes a defaultval  
The argument is optional, but there is a good chance the Selector will not  
pick the default value you want, since there are a lot of possible formats,  
values and sorting preferences.  
#### Selector variable sorting is alphabetical/numeric by default -  
I just try and get it to do ascending order alpha/numeric sort as consistently  
as possible.

### Example setup 
Two RegSelectors and and UpdateSelector that will update its values if either  
of the others changes.  
```javascript
import { Form, RegSelector, UpdateSelector } from '@jadesrochers/formbuilder'
const Form = (props) => {
  return(
    <Form
      submitFormFcn = {handleFormSubmit}
    >
      <RegSelector dataget={getDataYears} varname='year' defaultval={props.year} />
      <RegSelector dataget={getDataMonths} varname='month' defaultval={props.month} />
      <UpdateSelector dataget={getDataVars} varname='varname' defaultval={props.varname} changeon={['year', 'month']}
/>
    </Form>
  )
}
```
npm package: @jadesrochers/legends
Description: A custom legend that matched my map formats
Author: Jared Desrochers
Latest version: 0.3.4

## legends 

#### Just a barscale  
It is a horizontal barscale.   

#### Using it requires passing data  
It takes the data, formatter, styling and tries to put together a decent  
looking bar legend.  
I was going to use d3 built in but found a lot of parts do not work  
with react readily.  
```javascript
  <BarScale key='legend' 
    cssStyles={ props.legendstyle }
    data={ props.geodata } 
    formatter={ howtoformatlabelfcn }
    legendstyle={props.legendstyle}  
    offset="20%" {...pass}
  />
```
### The built in demos demonstrate several variations
If you download the github repo you can use:  
```bash
npm start
```
To start up a demo site accessible at 127.0.0.1 and check out several variations of how the barscale can be used with different formatting and scaling. The code for these is available in the /demo directory in the repo.

#### Could add vertical setup  
Right now it is only a horizontal scale, but the underlying elements would  
easily support a vertical scale.
npm package: @jadesrochers/reacthelpers
Description: Helper functions for use in React
Author: Jared Desrochers
Latest version: 0.5.0

## Reacthelpers  
Just some functions I tend to use in a lot of different places.  

### HookWrappers are for testing hooks -  
They provide a generic element that takes a hook argument to allow testing  
the hook outside of any specific context.  
I have several variations to handle passing hooks to children and testing  
elements that rely on hooks for what they render, but they are all similar.  
#### The wrappers just set up a very simple component to use the hook  
That is really all they do. They take the hook you want to test, then you  
find and use the hook calls directly.  

#### Hooks are passed as functions in case you need to configure them  
Just use an arrow function with no args if the hook does not need any.  
```javascript
  let wrapper = shallow(<HookWrapper hook={() => useMouseStatus()}  />) 
```
#### Using HookWrapper vs HookForceWrapper just depends on the hook  
The setup is the same, it just depends on whether the hook has useRef()  
variables that you want to be able to force update, thats it.  
```javascript
  let wrapper = shallow(<HookWrapper hook={() => useMouseStatus()}  />) 
  let wrapper = mount(<HookForceWrapper  hook={() => useMouseLocation()}  />) 
```

#### The SvgWrapper is just a convenience wrapper for svg components -  
This wrapper passes all arguments to children and uses an `<svg>` element  
instead of a div.  
I used it because I have many components that pass props to children and  
end up rendering svg specific elements.  


### passProp functions pass props to children -  
I was repeating this pattern frequently so I made general purpose functions  
to take children/props you want to pass and return the modified children.  
I mostly use the passExceptChildren because I almost never what the children  
to be passed when doing this.  
#### Slight variations; pass all props, given props, all but children  
```javascript
// Pass given props to children, avoiding passing children
let pass = R.pipe(R.dissoc('height'), R.dissoc('width'))(props)
pass = { ...pass, var1, var2}
const propsToChildren = passExceptChildren(pass)
// Pass all props
const propsToChildren = passAllProps(props)
// Pass selected props
let pass = R.omit(['x','y','startx','starty','endx','endy','clickx','clicky'])(props)
const propsToChildren = passGivenProps(pass)
```

### Rounding  
Seem silly, but I was creating functions for rounding in a number of places  
so I put them here.  
roundtenth, roundhundth, roundthousth

### Highlight/dehighlight  
For interactive maps/displays I often wanted to highlight but then return the  
element to the original style, which would frequently change.  
createHighlight() returns highlight/dehighlight fcns that have clousure around  
shared data so they can track style changes.