open-index/open-npm huggingface dataset:
npm package: @referrizer/angular-materialize
Description: Angularjs directives for Materialize CSS Framework
Author: @krescruz
Latest version: 0.2.2

angular-materialize
===================

**angular-materialize** in action http://krescruz.github.io/angular-materialize/

This library is a set of AngularJS directives which make it possible to use features from [Materialize](http://materializecss.com/) with AngularJS.
It is basically a set of directives, which calls the JavaScript functions defined by Materialize. This means that you still need to include Materialize for this to work. 

This project is not to be confused with the [Angular Material](https://material.angularjs.org/) project, which is a standalone Material design implementation for AngularJS.

A minimal example of how to set up this project can be found here: http://krescruz.github.io/angular-materialize/#getting-started

You can download this project through our [`bower package`](http://bower.io/search/?q=angular-materialize), or [`npm package`](https://www.npmjs.com/package/angular-materialize).
Or just use the cdn:

```html
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-materialize/0.2.2/angular-materialize.min.js"></script>
```


Angular looks for jQuery and if no exists, it uses jQlite. Some directives of `angular-materialize` uses some jQuery methods, so be sure that Angular uses it instead of jQlite. It can be done by including jquery before you include angular on your view
```
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
```
If you are using Webpack, it can also be done by adding the following lines in your config:
##### Use with Webpack
```javascript
//webpack.config.js
plugins: [
    new webpack.ProvidePlugin({
      'window.jQuery': 'jquery'
    })
  ],
```
then simply add to your module:
```javascript
// yourModule.js
// ES6 style
import angularMaterialize from 'angular-materialize';
// OR commonjs style
var angularMaterialize = require('angular-materialize');
angular.module('yourModule', [angularMaterialize]);
```
npm package: @refetty/async
Description: Refetty promise tools to manages promise state and handle promise aborts
Author: Bruno Bertolini
Latest version: 1.0.0-rc.11

# Refetty - Async

Refetty promise tools to manages promise state and handle promise aborts

## Usage

To install run `yarn add @refetty/async`

### Promise state manager

The `execState` is a simple handler, you will pass a promise to them was first params, and a boolean was second, if true, it will not execute promise initially, and wait for a manual call.


You will receive a array return with state (arr[0]) and a dispatch function (arr[1]) to re-execute promise when you want.
State is a obersvable, so you can call subsbribe and unsubscribe methods.


```js
import { execState } from '@refetty/async'

const lazy = true // default false

// to create state
const [state, run] = execState(promise, lazy)

// to listen state chages
const listner = state.subscribe(value => console.log('State changes:' value))

// to unsubscribe listner
state.unsubscribe(listner)
```

State value is an object with follow props:

- status (_string_) - indicates the executes status, and can be one fo these: `idle` | `pending` | `fulfilled` | `rejected` | `aborted`
- loading (_boolean_) - shorthand to check if a promise is in `pending` status
- result - a resolved promise response with `fulfilled` status (cleared only on next execution error or success)
- error - a rejected promise response with `rejected` or `aborted` status (cleared in all re-executions)

> Note: aborted status depends on the promise to have an `isAborted` method that checks error (`promise.isAborted`)

### Promise abort handler

In `makeAbortable`, we require two args: a function and an instanciable abort controller [spec compilant](https://dom.spec.whatwg.org/#dom-abortcontroller-abortcontroller).

This return an array with two items, the first is a handled dispatcher, every call will create a new instance of abort controller. And the aborter function as second. Let's me show the code:

```js
const handler = params => signal => fetch({
	...params,
	signal
})

const [dispath, abort] = makeCancelable(handler, AbortController)

dispath({
	method: 'get',
	url: '/users
})

abort()
```

> Note: the `abort()` function will not called automatically on call dispatch again.


### Putting all together

To make our dev process painless, you have the option to use all-in-one method. The `control` method uses `execState` and `makeCancelable` under the hood. It's expect	only one required param: promise. Abort Controller need be a prop on promise, like this:

```js
import { control } from '@refetty/async'

const promise = params => signal => fetch(...)
promise.AbortContoller = AbortController

const [state, dispatch] = control(promise)
```

Unlike from `makeCancelable`, every `dispatch` call will call `abort` function automatically before.
And if you need use `abort` by yourself, you can acess them on `dispatch.abort()`

It's has a second param too, option object when you can pass `lazy` and 'abortMessage`

```js
const [state, dispatch] = control(promise, { lazy: true, abortMessage: 'This request was aborted!' })
```
npm package: @refetty/fetch
Description: ## Basic usage
Author: Bruno Bertolini
Latest version: 0.2.0-beta.14

# Fetch

## Basic usage

Install: `yarn add @refetty/fetch`

Create a `fetch.js`:

```
import { stateProvider } from '@refetty/fetch'
import axios from 'axios'

const request = axios.create({
  baseURL: 'https://jsonplaceholder.typicode.com',
});

const handler = options => state =>
  request({
    ...options,
		headers: {
			...options.headers,
    	...(state.token && { Authorization: `Bearer ${state.token}` }
    }
  })

const initialState = {}

export const fetch = stateProvider(hanlder, initialState)
```

And to change instance state:

```
fetch.setState(prev => ({ ...prev, token: '123' }))
```

## Advanced Usage
npm package: @refetty/observable
Description: Simple and lightweight observable creator
Author: Bruno Bertolini
Latest version: 1.0.0-rc.10

# Refetty - Observable

Simple and lightweight observable creator

## Usage

To install run `yarn add @refetty/observable`

```js
import { observable } from '@refetty/observable'

const initalValue = 100
const obs = observable(initialValue)

console.log(obs.value)
// logs: 100

// To add listners:
const lisnter = obs.subscribe(value => console.log(value)) // will log new value on each change

// to remove listner
obs.unsubscribe(listner)

// And finally, to change value
obs.next('your new value')

// or if you want get previous value, pass a callback
obs.next(prevValue => prevValue+100)
// and the new value is 200

```
npm package: @refetty/react
Description: React Hooks to make data fetch easy
Author: Bruno Bertolini
Latest version: 1.0.0-rc.12

# Refetty - React

React Hooks to make data fetch easy

## Usage

Install `yarn add @refetty/react`

### usePromise

Use `control` from [@refetty/async](./../async) under the hood and bypass all args to them.
It's will make an `abort` call on component unmout too.

```js
import { usePromise } from '@refetty/react'

const List = () => {
  const [result, { loading }, fetch] = usePromise(getUsers)

  if (loading) {
    return <Loading />
  }

  return result && result.data && result.data.length
    ? result.data.map(user => <UserCard {...user} />)
    : <EmptyList />
}
```

### useFetch

Use `usePromise`, but change the first returned array item to return only the request data (`request.data`).


```diff
- import { usePromise } from '@refetty/react'
+ import { useFetch } from '@refetty/react'

const List = () => {
-  const [result, { loading }, fetch] = usePromise(getUsers)
+  const [data, { loading }, fetch] = useFetch(getUsers)

  if (loading) {
    return <Loading />
  }

-  return result && result.data && result.data.length
+  return data && data.length
-    ? result.data.map(user => <UserCard {...user} />)
+    ? data.map(user => <UserCard {...user} />)
    : <EmptyList />
}
```

If you need the statusCode or anytihng else from promise response, you can access it from named `result` prop in state item

```js
  const [data, { result }, fetch] = useFetch(getUsers)
```

Both hooks `usePromise` and `useFetch` will call your promise on component mount. So, if you don't want this behavior and need call promise only when you need (maybe useful when showing data depends on users interaction), you can use `lazy` option:


```js
  const [data, { loading, status }, fetch] = useFetch(getUsers, { lazy: true })
```

In this case, loading start as `false` and status `ìdle`
npm package: @reffect/core
Description: The state manager
Author: acacode
Latest version: 1.5.1

<div align="center">

[![reffect logo](https://raw.githubusercontent.com/acacode/reffect/master/assets/reffect.png)](https://github.com/acacode/reffect)  
[![npm](https://img.shields.io/npm/v/@reffect/core?style=flat-square&color=blue)](https://www.npmjs.com/package/@reffect/core)
[![npm bundle size](https://img.shields.io/bundlephobia/minzip/@reffect/core?style=flat-square&color=blue)](https://bundlephobia.com/result?p=@reffect/core)
[![license](https://img.shields.io/github/license/acacode/reffect?style=flat-square&color=blue)](https://github.com/acacode/reffect)

<div align="left">

Reffect — is a declarative and reactive multi-store state manager for JavaScript/TypeScript applications inspired by [Reatom](https://github.com/artalar/reatom) and [Effector](https://github.com/zerobias/effector)

# @reffect/core

Package which contains main features of [`Reffect`](https://github.com/acacode/reffect)

## Brief docs

`Reffect` have stores and effects:

1. Store - it is a simple JavaScript object which needed to store data in your application.  
   The value of the created store is its state.
2. Effect - it is a function which needed to update the store.  
   Effects are created via `effect(store, effectDeclaration?)`  
   Effect declaration can be `function`, `property name of store state`.

Also `Reffect` have export `manage(store)` which gives extra internal features for additional packages(like subscribe on store changes, partial update)

## How to use

Create a store

```ts
import { store } from "@reffect/core";

type KeyboardsState = {
  list: Keyboard[];
  selected?: Keyboard;
};

const keyboards = store<KeyboardsState>({ list: [] });

// keyboards.list -> []
// Object.keys(keyboards) -> ["list"]
```

Create a store effects

Simple property update

```ts
import { effect } from "@reffect/core";

const setKeyboards = effect(keyboards, "list");

// setKeyboards([{ name: "keyboard1" }]) // void
```

Custom store update

```ts
import { effect } from "@reffect/core";

const selectKeyboard = effect(keyboards, keyboardId => {
  return {
    selected: keyboards.find(keyboard => keyboard.id === keyboardId),
  };
});

// selectKeyboard(1) // void
```

Custom async store update

```ts
import { effect } from "@reffect/core";

const getKeyboards = effect(keyboards, async () => {
  const keyboardsList = await api.getKeyboards();

  return {
    list: keyboardsList,
  };
});

// or more beauty
const getKeyboards = effect(keyboards, async () => setKeyboards(await api.getKeyboards));
```

And just simple store update

```ts
const updateKeyboards = effect(keyboards);

// updateKeyboards({ list: [], selected: null })
```