open-index/open-npm huggingface dataset:
npm package: @janicedong/admin-ui
Description: ## Project setup ``` npm install ```
Latest version: 0.1.2

# admin-ui

## Project setup
```
npm install
```

### Compiles and hot-reloads for development
```
npm run serve
```

### Compiles and minifies for production
```
npm run build
```

### Run your unit tests
```
npm run test:unit
```

### Lints and fixes files
```
npm run lint
```

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).
npm package: @janiking/format
Description: Format strings into different types
Author: Jani-King
Latest version: 0.5.54

# format

Format strings into different types

## To run tests

There is no built-in server, it is a simple test page. It can be run by opening the file in a browser, or on a Mac, use Python:

```
python -m SimpleHTTPServer
```

Or use an alias:

```
serve 8003
```
npm package: @janiking/no-dash
Description: Smaller, common utility functionality used to replace LoDash.
Author: Jani-King
Latest version: 0.7.6

# NoDash

Smaller, common utility functionality used to replace LoDash

In development. Not ready for common use.

## Docs

Objects
-------

### copy
Creates a deep copy of a JavaScript object. HTML elements will throw errors. functions are passed as references.

### equal
Determines if two objects have deep equality.

### getObject
Returns a value from an object based on a stringified path.

### setObject
Sets a value to an object based on a stringified path.

Arrays
------

### remove
Removes all references of a value from an array

    nodash.remove([1,2,2,2,3], 2); // [1,3]
    
### loop
A "lazy" for-loop.

### sawLoop
Loops across an array of arrays, starting with 0 of each array:

	0:0, 0:1, 0:2 - 1:0, 1:1, 1:2 - etc

Called a "saw" loop because it starts at the top of the first, goes down to the bottom, and moves up to the top of the second.

### deDupe
Removes duplicates from arrays. A second, optional argument is `property` for dealing with arrays of objects.

### equalValues
Shallow comparison of two arrays, regardless of order:

    nodash.equalValues([1,2,3,4], [4,3,2,1]); // true

### same
Determines if all values, or a property of a value, of an array are equal

    nodash.same([1, 1, 1]) // true
    nodash.same([1, 1, 2]) // false
    nodash.same([{id:1},{id:1},{id:1}]) // true
    nodash.same([{id:1},{id:1},{id:1, foo: 'bar'}], 'id') // true
    
Types
------

### getType
Extends the native `typeof` to also return:
* array
* date
* html
* window (if browser environment)
* global (if Node environment)
* nan
* null
* error
* promise
* map
* weakmap
* set
* weakset

Strings
-------

### dashify
Replaces spaces with dashes

### cap
Capitalizes a word
npm package: @janiking/react-web-component
Description: Wrapper for Web Components so that React will play nice
Author: Jani-King
Latest version: 1.3.8

# React Web Component

Wrapper for Web Components so that React will play nice

## Description

The wrapper makes for a smooth transition between React and Web Components by allowing to pass objects as attributes,
and listen to custom events. Simple attributes (strings, numbers, booleans) are passed in on creation, while complex
attributes (objects, arrays) are passed in when the element is mounted.

The custom events are generated by convention. if you add: `onEvent={onEvent}`, "on" is removed, and the 
remainder is lower-cased. In this case it will look for a `event` event:
 
 ```jsx harmony
element.addEventListener('event', callback);
```

Events with hyphens are now supported:

 ```jsx harmony
 <Component 
    onCustomEvent={() => { console.log('custom event'); }}
 />
```

Same as:

 ```jsx harmony
element.addEventListener('custom-event', callback);
```



## Example

```jsx harmony
export default function Chart ({ title, total, data }) {
	
	function onCustomEvent (e) {
		console.log('onCustomEvent', e);
	}
	
	return (
		<WebComponent
			component="chart-pie"
			header={title}
			total={total}
			data={data}
			onCustomEvent={onCustomEvent}
		>
			<div>child</div>
		</WebComponent>
	);
}
```

## State/Props

A WebComponent can be updated like any other React Component. Under the hood, `shouldComponentUpdate` always returns 
false (The JSX is never re-rendered), and instead, the web component's properties are passed in.

If `deep` is passed as a prop, `shouldComponentUpdate` will do a deep comparison. It defaulst to shallow.

## Value

WebComponent has a `value` getter, which can come in handy if you need to uses `refs`.

## Properties/Attributes

In spite of their similarity, properties and attributes ae not the same. It is important that your web component uses 
best practices and syncs them, so that `element.foo = true` works the same way as `element.setAttribute('foo', true);`.

Obviously, you can't set an object via attributes (it coerces into a string). In these cases, they are always passed in 
as properties.

## onUnmount

If desired, pass in an `onUnmount` callback which will be fired on `componentWillUnmount`, passing the custom element.