open-index/open-npm huggingface dataset:
npm package: @joshdcuneo/gatsby-source-strapi
Description: A fork of the official Gatsby source plugin for building websites using Strapi as a data source with some upgrades and fixes
Author: Strapi Solutions
Latest version: 0.1.1

# gatsby-source-strapi

Source plugin for pulling documents into Gatsby from a Strapi API.

## Install

`npm install --save gatsby-source-strapi`

## How to use

```javascript
// In your gatsby-config.js
plugins: [
  {
    resolve: `gatsby-source-strapi`,
    options: {
      apiURL: `http://localhost:1337`,
      queryLimit: 1000, // Default to 100
      contentTypes: [`article`, `user`],
      // Possibility to login with a strapi user, when content types are not publically available (optional).
      loginData: {
        identifier: "",
        password: "",
      },
    },
  },
]
```

## How to query

You can query Document nodes created from your Strapi API like the following:

```graphql
{
  allStrapiArticle {
    edges {
      node {
        id
        title
        content
      }
    }
  }
}
```
npm package: @joshdcuneo/tsm-react
Description: A simple React hook to make it easier to work with TSM in React.
Author: Josh
Latest version: 0.1.1

# TSM-React

A simple React hook to make it easier to work with TSM in React.

### Example
```tsx
import {components} from "@joshdcuneo/tsm";
import * as React from "react";
import {useMachine} from "../src";

export type CounterProps = {initialCount?: number}
type State = 'idle' | 'counting' | 'maxedOut';
type Event = { type: 'inc' } | { type: 'dec' } | { type: 'reset' };
type Context = number;

const {
  machine,
  state,
  transition,
  reducer,
  guard,
  immediate,
} = components<State, Event, Context>();

const inc = transition(
  'inc',
  'counting',
  reducer(ctx => ctx + 1)
);
const maxedOut = transition(
  'inc',
  'maxedOut',
  guard(ctx => ctx === 5)
);
const dec = transition(
  'dec',
  'counting',
  reducer(ctx => ctx - 1),
  guard(ctx => ctx > 0)
);
const reset = transition(
  'reset',
  'idle',
  reducer(() => 0)
);
const restart = immediate(
  'idle',
  reducer(() => 0),
);

const counterMachineConfig = machine(
  state('idle', inc),
  state('counting', maxedOut, inc, dec, reset),
  state('maxedOut', restart),
);

export const Counter = (props: CounterProps) => {
  const {initialCount = 0} = props
  const [service] = useMachine<State, Event, Context>(counterMachineConfig, initialCount)
  return (
    <div>
        <div>The count is: <span data-testid="count">{service.context()}</span></div>
        <div>The machine state is: <span data-testid="state">{service.machine.state.name}</span></div>
        <button onClick={()=>service.send({type: 'inc'})}>+</button>
        <button onClick={()=>service.send({type: 'dec'})}>-</button>
        <button onClick={()=>service.send({type: 'reset'})}>Reset</button>
    </div>
  )
}

```

#### Storybook

```bash
git clone https://github.com/joshdcuneo/tsm-react.git
cd tsm-react
npm install
npm run storybook
```

This loads the stories from `./stories`.

### Examples

Then run the example inside another:

```bash
git clone https://github.com/joshdcuneo/tsm-react.git
cd tsm-react
npm install
npm run build
cd example
npm run start
```

The default example imports and live reloads whatever is in `/dist`, so if you are seeing an out of date component, make sure TSDX is running in watch mode like we recommend above. **No symlinking required**, we use [Parcel's aliasing](https://parceljs.org/module_resolution.html#aliases).

To do a one-off build, use `npm run build` or `yarn build`.

To run tests, use `npm test` or `yarn test`.
npm package: @joshdoescode/html-base-builder
Description: A CLI for creating a simple base for a HTML project and examples.
Author: Joshua Cain
Latest version: 0.0.26

# HTML Base Builder

_``npm install -g @joshdoescode/html-base-builder``_

_Readme in progress_

A CLI for quickly creating a base project for a HTML example/trial.

## Commands

#### ``jdc-htmlbasebuilder``

Starts the builder.

## What's created

#### Structure 

The following file/folder structure will be created: _(where you run the command)_

- **index.html** - basic structure, with most common meta-tags in place
- **style.css** - empty css file, referenced in the index.html file, and ready to use


.
npm package: @joshdschneider/formation
Description: React component library.
Author: Josh Schneider
Latest version: 1.0.2

<a href="https://formation.fyi/" rel="noopener" target="_blank"><img width="125" height="125" src="https://formation.fyi/logo512.png" alt="MUI logo"></a>

# [Formation](https://formation.fyi/)

Build your frontend faster with Formation—20+ react-based UI components. Free and open-source.

[![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/joshdschneider/docs/blob/main/LICENSE)
[![npm latest package](https://img.shields.io/npm/v/@joshdschneider/formation/latest.svg)](https://www.npmjs.com/package/@joshdschneider/formation)

[**Visit the website ▸**](http://formation.fyi/)

[**Read the documentation ▸**](http://formation.fyi/docs/)

[**View the documentation repo ▸**](https://github.com/joshdschneider/docs)
<br />
<br />

## Installation

Formation is available as an [npm package](https://www.npmjs.com/package/@joshdschneider/formation).

```sh
npm install @joshdschneider/formation
```

## Getting started

Here is an example of a basic app using Formation's `Button` component:

```jsx
import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from '@joshdschneider/formation';

function App() {
  return (
    <Button intent='primary' size='regular'>
      Hello World
    </Button>
  );
}
```
npm package: @joshduck/flocking
Description: A simulation of boids.
Latest version: 1.0.1

# Flocking

A simulation of boids.

![Screenshot](static/screen.png)

```
import Simulation from "@joshduck/flocking";

const canvas = document.getElementById("canvas");
const simulation = new Simulation(canvas);

simulation.start();
simulation.stop();
simulation.frame();
simulation.setConfig({ debug: debug });
```
npm package: @joshduck/vector2d
Description: A simple, zero-dependency, mutable 2d vector class.
Latest version: 1.0.1

# Vector2d

A simple, zero-dependency, mutable 2d vector class.

```javascript
const v = new Vector(10, 10);
v.subtract(new Vector(1, 1)); // Vector(9, 9)
v.normalize();
v.length(); // 1
v.multiply(-1);
```

## Properties

* `x`
* `y`

## Methods

* `clone()`
  Create a new instance with same coordinates.
* `reset()`
  Reset coordinates to 0, 0.
* `subtract(other)`
  Subtract vector.
* `add(other)`
  Add vector.
* `multiply(scale)`
  Multiply by a constant length.
* `normalize(scale = 1)`
  Normalize to length provided.
* `length()`
  Length as numeric value.