open-index/open-npm huggingface dataset:
npm package: @foo-software/react-charts-candle-detail
Description: A detail candlestick chart component for React
Author: Adam Henson
Latest version: 2.1.9

# `@foo-software/react-charts-candle-detail`

A simple snapshot candlestick view of stock or stock-like data. This is meant to just show the general pattern structure (tested on 3 candles).

Checkout our [Storybook instance](https://foo-software.github.io/foo-react-charts/) for component API details (or [`CandleDetailChart.tsx`](./src/CandleDetailChart.tsx))

<hr />

> <img src="https://lighthouse-check.s3.amazonaws.com/images/logo-simple-blue-light-512.png" width="100" height="100" align="left" /> This package was brought to you by [Foo - a website quality monitoring tool](https://www.foo.software). Automatically test and monitor website performance, SEO and accessibility with Lighthouse. Analyze historical records of Lighthouse tests with automated monitoring. Report with confidence about SEO and performance improvements to stay on top of changes when they happen!
npm package: @foo-software/react-charts-donut
Description: A donut chart component for React
Author: Adam Henson
Latest version: 2.1.9

# `@foo-software/react-charts-donut`

A donut chart inspired by Google's Lighthouse.

Checkout our [Storybook instance](https://foo-software.github.io/foo-react-charts/) for component API details (or [`DonutChart.tsx`](./src/DonutChart.tsx))

Note the following:
- Styles can be imported from this package - see the [example in Storybook](https://github.com/foo-software/foo-react-charts/blob/master/packages/react-charts-styleguide/src/stories/DonutChart.stories.tsx).
- Styles will try to use `Roboto Mono` Google font, so you can optionally [link it the way we do in Storybook](https://github.com/foo-software/foo-react-charts/blob/master/packages/react-charts-styleguide/.storybook/preview-head.html).

> <img src="https://lighthouse-check.s3.amazonaws.com/images/logo-simple-blue-light-512.png" width="100" height="100" align="left" /> This package was brought to you by [Foo - a website quality monitoring tool](https://www.foo.software). Automatically test and monitor website performance, SEO and accessibility with Lighthouse. Analyze historical records of Lighthouse tests with automated monitoring. Report with confidence about SEO and performance improvements to stay on top of changes when they happen!
npm package: @foo-software/react-charts-time-series
Description: A time series chart component for React
Author: Adam Henson
Latest version: 2.1.9

# `@foo-software/react-charts-time-series`

A time series component for React. This component uses [`visx`](https://github.com/airbnb/visx) and was inspired by the [area example](https://airbnb.io/visx/areas).

Checkout our [Storybook instance](https://foo-software.github.io/foo-react-charts/) for component API details (or [`TimeSeriesChart.tsx`](./src/TimeSeriesChart.tsx))

> <img src="https://lighthouse-check.s3.amazonaws.com/images/logo-simple-blue-light-512.png" width="100" height="100" align="left" /> This package was brought to you by [Foo - a website quality monitoring tool](https://www.foo.software). Automatically test and monitor website performance, SEO and accessibility with Lighthouse. Analyze historical records of Lighthouse tests with automated monitoring. Report with confidence about SEO and performance improvements to stay on top of changes when they happen!
npm package: @foo-software/react-charts-time-series-complex
Description: A complex time series chart component for React
Author: Adam Henson
Latest version: 2.1.9

# `@foo-software/react-charts-time-series-complex`

A time series component for React. This component uses [`amCharts`](https://www.amcharts.com).

Checkout our [Storybook instance](https://foo-software.github.io/foo-react-charts/) for component API details (or [`TimeSeriesComplexChart.tsx`](./src/TimeSeriesComplexChart.tsx))

# Interface

For the most updated representation of component API see the [TypeScript interfaces](./src/interfaces.ts).

<hr />

> <img src="https://lighthouse-check.s3.amazonaws.com/images/logo-simple-blue-light-512.png" width="100" height="100" align="left" /> This package was brought to you by [Foo - a website quality monitoring tool](https://www.foo.software). Automatically test and monitor website performance, SEO and accessibility with Lighthouse. Analyze historical records of Lighthouse tests with automated monitoring. Report with confidence about SEO and performance improvements to stay on top of changes when they happen!
npm package: @foo-software/with-server-side-caching
Description: HOCs and providers to cache pages of a Create React App on the server.
Author: Adam Henson
Latest version: 0.1.4

# `@foo-software/with-server-side-caching`

HOCs and providers to cache pages of a Create React App on the server.

For complete documentation, including usage go to the [main project README](https://github.com/foo-software/create-react-app-server).
npm package: @foo-style/v1
Description: Open Source CSS Framework ported from FSA-STYLE
Author: Casey Hill
Latest version: 1.0.2

# FOO Style | v1.0.2

FOO Style is a non-branded and customizable codebased that allows for easy integration into Single Page Applications.

### Install using NPM

If you have `node` installed on your machine, you can use npm to install the Standards. Add `foo-style`
to your project’s `package.json` as a dependency:

```shell
npm install --save @foo-style/v1
npm package: @foo-x/react-container
Description: Hooks + View = Container
Author: Foo-x
Latest version: 0.1.1

# react-container

One of the best practices in React is to separate logic and views. Otherwise, it would be painful to test components with complex logic.  
This library helps you to separate components into Hooks and views.


## Installation

```sh
npm install @foo-x/react-container
```


## Example

```tsx
import { Container, UseHooks, View } from '@foo-x/react-container';
import { useCallback, useState } from 'react';

type Props = {
  defaultValue: number;
  label: string;
};

type HooksResult = {
  value: number;
  increment: () => void;
  decrement: () => void;
};

export const useHooks: UseHooks<Props, HooksResult> = ({
  props: { defaultValue },
}) => {
  const [value, setValue] = useState(defaultValue);
  return {
    value,
    increment: useCallback(() => {
      setValue((prev) => prev + 1);
    }, []),
    decrement: useCallback(() => {
      setValue((prev) => prev - 1);
    }, []),
  };
};

export const view: View<Props, HooksResult> = ({
  props: { label },
  hooksResult: { value, increment, decrement },
}) => {
  return (
    <div>
      <h2>{label}</h2>
      <div style={{ display: 'flex', gap: '1rem' }}>
        <button type='button' onClick={decrement}>
          -
        </button>
        {value}
        <button type='button' onClick={increment}>
          +
        </button>
      </div>
    </div>
  );
};

const Counter = Container({ useHooks, view });

export default Counter
```

As shown above, the logic and the view are separated, so each can be tested easily.


## Snippets

- [For VSCode](./.vscode/container.code-snippets)


## Advance

If you have very complex logic, consider using [react-tea](https://github.com/Foo-x/react-tea), which applies The Elm Architecture for React.


## License

MIT
npm package: @foo-x/react-tea
Description: The Elm Architecture for React
Author: Foo-x
Latest version: 0.2.1

# react-tea

The Elm Architecture for React.

[The Elm Architecture · An Introduction to Elm](https://guide.elm-lang.org/architecture/)

The differences from the original TEA are that:

- it is applied to each component, not to the entire app.
    - This allows you to partially introduce the library to your app.
- it can be combined with Hooks.


## Why is it?

React has Hooks to manage states and side effects.  
However, they are tightly coupled with view, which makes it difficult to test.  
There is also the problem that useReducer cannot handle asynchronous code.

The advantages of TEA are that:

- view and logic are separated, so they are easy to test.
- "update" can handle asynchronous code.

This library also supports using Hooks, so you can leverage assets of custom hooks.


## Installation

```sh
npm install @foo-x/react-tea
```


## Documents

- [Tutorial](./doc/Tutorial.md)
- [Reference](./doc/Reference.md)


## Examples

- [Simple Counter](./example/src/SimpleCounter.tsx)
- [Counter with Effects](./example/src/CounterWithEffects.tsx)
- [Counter with Context](./example/src/CounterWithContext.tsx)

There is also an example of a test, which will show you how easy it is to test!

- [Test for Simple Counter](./example/src/SimpleCounter.test.tsx)


## Snippets

- [For VSCode](./.vscode/tea.code-snippets)


## Advance

If the logic of the component is only with Hooks, consider using [react-container](https://github.com/Foo-x/react-container).


## License

MIT
npm package: @foobarhq/progressive-form
Description: A React Form Library
Author: Guylian Cox
Latest version: 0.1.1

# Progressive Form

A react form library

## Install

`npm install @foobarhq/progressive-form`

```javascript
// see /example for the list of available components.
import { Input, Form } from 'progressive-form';

// optionally
import 'progressive-form/dist/bundle.css';
```

## Roadmap

- Unit tests
- Documentation (currently written in /example)
npm package: @food-for-you/common-react-components
Description: This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
Latest version: 1.0.0

This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).

## Available Scripts

In the project directory, you can run:

### `npm run storybook`

It will start Storybook locally and output the address. Depending on your system configuration, it will automatically open the address in a new browser tab and you'll be greeted by a welcome screen.<br />
If it does not open by default, Open [http://localhost:6006](http://localhost:6006) to view it in the browser.

The page will reload if you make edits.<br />
You will also see any lint errors in the console.

More about it can be found at https://storybook.js.org/docs/react/get-started/introduction
npm package: @fooday/gl-react-expo
Description: React Native via Expo implementation of gl-react, an universal React library to write and compose WebGL shaders
Author: Gaëtan Renaudeau
Latest version: 5.2.3

# <img width="32" alt="icon" src="https://cloud.githubusercontent.com/assets/211411/9813786/eacfcc24-5888-11e5-8f9b-5a907a2cbb21.png"> gl-react-expo

`gl-react-expo` is the [React Native](https://facebook.github.io/react-native/) via Expo implementation of [gl-react](https://github.com/gre/gl-react), library to write and compose WebGL shaders.

## Camera support

You can enable camera support with this:

```
yarn add expo-camera webgltexture-loader-expo-camera
```

and you just need to load the lib in your entry point:

```
import "webgltexture-loader-expo-camera";
```

## Links

- [Github](https://github.com/gre/gl-react)
- [Cookbook, examples, API](https://gl-react-cookbook.surge.sh)
- [![Join the chat at https://gitter.im/gl-react/Lobby](https://badges.gitter.im/gl-react/Lobby.svg)](https://gitter.im/gl-react/Lobby?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
npm package: @fooday/gl-react-native
Description: React Native standalone implementation of gl-react, an universal React library to write and compose WebGL shaders
Author: Gaëtan Renaudeau
Latest version: 5.2.6

# <img width="32" alt="icon" src="https://cloud.githubusercontent.com/assets/211411/9813786/eacfcc24-5888-11e5-8f9b-5a907a2cbb21.png"> gl-react-native

If you are using Expo, it is recommended to use `gl-react-expo` instead.

`gl-react-native` is the [React Native](https://facebook.github.io/react-native/) implementation of [gl-react](https://github.com/gre/gl-react). It is in fact backed by [unimodules](https://github.com/unimodules/react-native-unimodules) and [expo-gl](https://www.npmjs.com/package/expo-gl).

## Install

You will have to set up `react-native-unimodules` as documented here: https://github.com/unimodules/react-native-unimodules

**You will need to setup react-native-unimodules**

```
yarn add react-native-unimodules
```

If it's the first time you install `react-native-unimodules`, you will have to carefully follow the documentation to configure your project:
[configure unimodules](https://github.com/unimodules/react-native-unimodules) (if not yet done)

**You can then install gl-react dependencies:**

```
yarn add gl-react gl-react-native
```

## Links

- [Github](https://github.com/gre/gl-react)
- [Cookbook, examples, API](https://gl-react-cookbook.surge.sh)
- [![Join the chat at https://gitter.im/gl-react/Lobby](https://badges.gitter.im/gl-react/Lobby.svg)](https://gitter.im/gl-react/Lobby?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
npm package: @fooday/react-native-vision-camera
Description: The Camera library that sees the vision.
Author: Marc Rousavy
Latest version: 2.15.8

<a href="https://margelo.io">
  <img src="./docs/static/img/banner.svg" width="100%" />
</a>

<h1 align="center">Vision Camera</h1>

<div align="center">
  <img src="docs/static/img/11.png" width="50%">
  <br />
  <br />
  <blockquote><b>📸 The Camera library that sees the vision.</b></blockquote>
  <pre align="center">npm i <a href="https://www.npmjs.com/package/react-native-vision-camera">react-native-vision-camera</a><br/>npx pod-install                 </pre>
  <a align="center" href='https://ko-fi.com/F1F8CLXG' target='_blank'>
    <img height='36' style='border:0px;height:36px;' src='https://az743702.vo.msecnd.net/cdn/kofi2.png?v=0' border='0' alt='Buy Me a Coffee at ko-fi.com' />
  </a>
  <br/>
  <a align="center" href="https://github.com/mrousavy?tab=followers">
    <img src="https://img.shields.io/github/followers/mrousavy?label=Follow%20%40mrousavy&style=social" />
  </a>
  <br />
  <a align="center" href="https://twitter.com/mrousavy">
    <img src="https://img.shields.io/twitter/follow/mrousavy?label=Follow%20%40mrousavy&style=social" />
  </a>
</div>

<br/>
<br/>

<div>
  <img align="right" width="35%" src="docs/static/img/example.png">
</div>

### ‼️‼️‼️‼️‼️ ✨ VisionCamera V3 ‼️‼️‼️‼️‼️

**See [this discussion](https://github.com/mrousavy/react-native-vision-camera/issues/1376) for the latest upcoming version of VisionCamera**

### Documentation

* [Guides](https://react-native-vision-camera.com/docs/guides)
* [API](https://react-native-vision-camera.com/docs/api)
* [Example](./example/)

### Features

* Photo, Video and Snapshot capture
* Customizable devices and multi-cameras (smoothly zoom out to "fish-eye" camera)
* Customizable FPS
* [Frame Processors](https://react-native-vision-camera.com/docs/guides/frame-processors) (JS worklets to run QR-Code scanning, facial recognition, AI object detection, realtime video chats, ...)
* Smooth zooming (Reanimated)
* Fast pause and resume
* HDR & Night modes

> See the [example](./example/) app

### Example

```tsx
function App() {
  const devices = useCameraDevices('wide-angle-camera')
  const device = devices.back

  if (device == null) return <LoadingView />
  return (
    <Camera
      style={StyleSheet.absoluteFill}
      device={device}
      isActive={true}
    />
  )
}
```

### Adopting at scale

<a href="https://github.com/sponsors/mrousavy">
  <img align="right" width="160" alt="This library helped you? Consider sponsoring!" src=".github/funding-octocat.svg">
</a>

VisionCamera is provided _as is_, I work on it in my free time.

If you're integrating VisionCamera in a production app, consider [funding this project](https://github.com/sponsors/mrousavy) and <a href="mailto:me@mrousavy.com?subject=Adopting VisionCamera at scale">contact me</a> to receive premium enterprise support, help with issues, prioritize bugfixes, request features, help at integrating VisionCamera and/or Frame Processors, and more.

<br />

#### 🚀 Get started by [setting up permissions](https://react-native-vision-camera.com/docs/guides/)!
npm package: @foodcourtfinance/sdk-bkc
Description: 🛠 An SDK for building applications on top of foodcourt.
Latest version: 1.0.12

# Pancakeswap SDK

[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
[![Actions Status](https://github.com/pancakeswap/pancakeswap-sdk/workflows/CI/badge.svg)](https://github.com/pancakeswap/pancakeswap-sdk)
[![npm version](https://img.shields.io/npm/v/@pancakeswap-lib/sdk/latest.svg)](https://www.npmjs.com/package/@pancakeswap-lib/sdk/v/latest)

## Running tests

To run the tests, follow these steps. You must have at least node v10 and [yarn](https://yarnpkg.com/) installed.

First clone the repository:

```sh
git clone https://github.com/pancakeswap/pancakeswap-sdk.git
```

Move into the pancakeswap-sdk working directory

```sh
cd pancakeswap-sdk/
```

Install dependencies

```sh
yarn install
```

Run tests

```sh
yarn test
```

You should see output like the following:

```sh
yarn run v1.22.4
$ tsdx test
 PASS  test/constants.test.ts
 PASS  test/pair.test.ts
 PASS  test/fraction.test.ts
 PASS  test/miscellaneous.test.ts
 PASS  test/entities.test.ts
 PASS  test/trade.test.ts

Test Suites: 1 skipped, 6 passed, 6 of 7 total
Tests:       3 skipped, 82 passed, 85 total
Snapshots:   0 total
Time:        5.091s
Ran all test suites.
✨  Done in 6.61s.
```
npm package: @foodfresh/storybook-state
Description: Manage state in storybook stories
Author: Sam Bellen
Latest version: 1.0.4-alpha.2

# Storybook state

### Getting Started

```sh
npm install --save @foodfresh/storybook-state
```

First you will need to create a new store, to save the state and handle updates.
You can add all properties which you component expects, and the State component will propagate them to your component.
Once you've created the store, yo can wrap your components in a `State` component and pass along the store.

In the example below we create a modal which will expect an `active` property.
When clicking on the button we will update the store, which in turn will update the property `active` on the modal;

```js
import React from 'react';
import { storiesOf } from "@storybook/react";
import { State, Store} from '@foodfresh/storybook-state';

const store = new Store({
    active: false,
});

storiesOf('Button', module).add('with text', () => (
    <div>
        <State store={store}>
            <Modal>
                Modal content
            </Modal>
        </State>
        <Button onClick={() => store.setState({ active: !store.getState('active') })} />
    </div>
));
```

### Store

The store has a few methods you can use to get and update the state.

When creating a new instance, you can pass along the initial state.
```js
const store = new Store({
    foo: 'bar',
    active: true,
    items: ['item 1', 'item 2'],
})
```

You can retrieve a state from the store by using the `getState()` method.
```js
store.getState('foo') // will return 'bar'
store.getState('active') // will return true
store.getState('items') // will return ['item 1', 'item 2']
```

You can update the store by using the `setState()` method.
```js
store.setState({
    active: false,
    bar: 'foo',
});
```

You can subscribe to changes in the store by using the `subscribe()` method.
You can register a callback, which will have the updated state as the first parameter whenever the state updates.
```js
store.subscribe(state => // Do something with the updated state.
```

### State component

The state component accepts one property, an instance of `Store`. All properties that depend on the state, or should update on state changes, should be added in the Store, and will be propagated to your component by the `<State />` component.
```js
<State store={store}>
    <StateDependendComponent />
</State>
```