open-index/open-npm huggingface dataset:
npm package: @graph-paper/graph-paper
Description: Reusable Svelte components for building data visualizations & data products
Latest version: 0.0.1

# graph-paper

A Svelte component library optimized for data visualizations and data apps.

_note: this project is in very early alpha, and as such is subject to API
changes and restructuring without notice._

See the graph-paper storybook at
[https://graph-paper-org.github.io/graph-paper/](https://graph-paper-org.github.io/graph-paper/)

## installation

graph-paper is (for now) one big package. Don't worry, when your app is bundled,
anything not needed should be discarded. Install it as follows:

```
npm install --save-dev @graph-paper/graph-paper
```

## development

1. Run `npm install`
2. Run `npm run storybook`

See the [developer documentation](docs/development.md) for more information.
npm package: @graph-state/plugin-extend
Description: > Plugin for extend Graph. May use like computed.
Latest version: 0.5.1

# @graph-state/plugin-ws

> Plugin for extend Graph. May use like computed.

## Installation

```sh
npm i @graph-state/core @graph-state/plugin-extend
```

or

```sh
yarn add @graph-state/core @graph-state/plugin-extend
```

## Get started

```jsx
import { createState } from '@graph-state/core';
import extendPlugin from '@graph-state/plugin-extend';

export const graphState = createState({
  plugins: [
    extendPlugin({
      User: (cache, graph) => {
        return {
          ...graph,
          someProp: 'test'
        }
      }
    }),
  ],
});

graphState.mutate({
  _type: 'User',
  _id: 'id'
})

graphState.resolve('User:id')
/**
 * _type: 'User',
 * _id: 'id'
 * someProp: 'test'
 */
```

## Extend method
Plugin append new method to GraphState instance

```jsx
export const graphState = createState({
  plugins: [extendPlugin()],
});

graphState.extendGraph('User:test', (cache, graph) => graph)

```

## Lazy extends
You can add lazy extender.

```jsx
export const graphState = createState({
  plugins: [extendPlugin()],
});

setTimeout(() => {
  // Extend all User graphs and add extender for next updates.
  graphState.declareExtendGraph('User', (cache, graph) => graph)
}, 1000)


```
npm package: @graph-state/plugin-ws
Description: > Plugin for connect socket server to @graph-state. Work with Socket.io and WebSocket.
Latest version: 0.2.0

# @graph-state/plugin-ws

> Plugin for connect socket server to @graph-state. Work with Socket.io and WebSocket.

## Installation

```sh
npm i @graph-state/core @graph-state/plugin-ws
```

or

```sh
yarn add @graph-state/core @graph-state/plugin-ws
```

## Get started

```jsx
import io from 'socket.io-client';
import { createState } from '@graph-state/core';
import wsPlugin from '@graph-state/plugin-ws';

// Create socket
const socket = io('path to server');

// Apply plugin
export const graphState = createState({
  plugins: [
    wsPlugin(socket),
  ],
});


```

Now each event from socket will populate graphState. Server acts as source of truth.
For mutations server need return **graph-based object**.

### Example server response

```jsx
// server

// That emit update User graph or create new
io.emit('anyEventName', {
  _type: 'User',
  _id: 'userId',
  name: 'testUser'
})

```

#### WebSocket server response
```jsx
socket.send(JSON.stringify({
  eventName: 'anyEventName',
  data: {
    _type: 'User',
    _id: 'userId',
    name: 'testUser'
  }
}))
```


### Transforms

If you use socket server which you can control and adaptive server response. Use **transforms**.

```jsx
import { isGraph } from '@graph-state/core'

export const graphState = createState({
  plugins: [
    wsPlugin(socket, {
      transforms: {
        eventName(cache, value) {
          // You can modify input event

          if (!isGraph(value)) {
            // Return graph
            return {
              _type: 'User',
              _id: 'userId', // Attention!! Dot't generate id inside transform.
              anyData: 'data'
            }
          }
          
          return null
        }
      }
    }),
  ],
});

```

> Don't generate id inside transform because socket server is alone 
> but many clients and **each client had uniq id for self session**.
> You can build uniq key by incoming data.

```js
wsPlugin(socket,
  {
    transforms: {
      eventName(cache, value) {
        if (!isGraph(value)) {
          return {
            _type: 'User',
            _id: `user-${someUniqFields}`,
            anyData: 'data'
          }
        }

        return null
      }
    }
  }),
```

### Effects
Effect need for side effects of events.

```jsx
export const graphState = createState({
  plugins: [
    wsPlugin(socket, {
      effects: {
        eventName(cache, value) {
          // do somithing
          cache.invalidate('User:userId')
        }
      }
    }),
  ],
});
```
npm package: @graph-state/react
Description: > Bindings for react apps.
Latest version: 0.8.3

# @graph-state/react

> Bindings for react apps.

## Installation

```sh
npm i @graph-state/core @graph-state/react
```

or

```sh
yarn add @graph-state/core @graph-state/react
```

## Get started

```jsx
import { createState } from '@graph-state/core';

export const graphState = createState({
  initialState: {
    version: 1,
    user: {
      _type: 'User',
      _id: 'id',
      age: 23
    }
  }
});
```

```jsx
// App.tsx
import { useGraph } from '@graph-state/react';

const App = () => {
  const [state, updateState] = useGraph(graphState)
  const [user, updateUser] = useGraph(graphState, 'User:id')
  
  return <div>
    <h2>Version: {state.version}</h2>
    <h2>Age: {user.age}</h2>
    <button onClick={() => updateUser({age: Math.random() * 100})}>Update age</button>
  </div>
}
```

## `useGraph(graphState, entity)`

A React hook that returns a tuple `[value, setter]`, similar to the `useState` React hook.

### Parameters
- **graphState**: Instance of graph manager state.
- **entity**: The key of the graph entity that we subscribe and mutate.

### Returns
`useGraph` returns an array with exactly two values:

- The current value of the graph in the state. 
- The set function that lets you update the value to a different value and trigger a re-render.

## `useGraphFields`

Hook return array links of types
### Parameters
- **graphState**: Instance of graph manager state.
- **entityType**: The type of entity. Example: _User_

### Returns
`useGraphFields` returns an array links of type


## `useGraphStack`

Hook return array links of types
### Parameters
- **graphState**: Instance of graph manager state.
- **entities**: Array of links.

### Returns
`useGraphStack` returns an array of graphs.

```jsx
// App.tsx
import { useGraphFields, useGraphStack } from '@graph-state/react';

const App = () => {
  const allUserLinks = useGraphFields(graphState, 'User') // [User:id]
  const users = useGraphStack(graphState, allUserLinks)
  
  return <div>
    <h2>Ages:</h2>
    <ul>
      {users.map(user => <li>{user.age}</li>)}
    </ul>
  </div>
}
```

## `GraphValue`
Helper component for declarative reactions.

```jsx
import { useGraph, GraphValue } from '@graph-state/react';
import { graphState } from './App'

const App = () => <div>
  <GraphValue graphState={graphState} field='User:id'>
    {(user, updateUser) =>
      <>
        <h2>Age: {user.age}</h2>
        <button onClick={() => updateUser({ age: Math.random() * 100 })}>Update age</button>
      </>
    }
  </GraphValue>
</div>
```

## `GraphValues`
Helper component for get declarative graphs.

```jsx
import { useGraphFields, useGraphStack, GraphValues } from '@graph-state/react';
import { graphState } from './App'

const App = () => {
  const allUserLinks = useGraphFields(graphState, 'User') // [User:id]

  return <div>
    <h2>Ages:</h2>
    <ul>
      <GraphValues graphState={graphState} fields={allUserLinks}>
        {(users) => users.map(user => <li>{user.age}</li>)}
      </GraphValues>
    </ul>
  </div>
}
```