open-index/open-npm huggingface dataset:
npm package: @jfrk/gatsby-shadow-cli
Description: CLI tool for working with shadowing in Gatsby
Latest version: 0.1.1

# @jfrk/gatsby-shadow-cli

CLI tool for working with shadowing in Gatsby

## Install

```bash
$ npm i --g gatsby-shadow-cli
```

## How to use

```
$ gatsby-shadow-cli --help

  Usage
    $ gatsby-shadow create <sourceFile>

  Options
    --force, -f  Overwrite existing file
    --open, -o  Open file after creation

  Examples
    $ gatsby-shadow create @jfrk/gatsby-theme-example/src/components/ExampleComponent.js
    Shadow created: src/@jfrk/gatsby-theme-example/components/ExampleComponent.js
```
npm package: @jfrk/ink-router
Description: Router for [ink](https://github.com/vadimdemedes/ink) based on [@reach/router](https://github.com/reach/router).
Latest version: 0.1.1

# @jfrk/ink-router

Router for [ink](https://github.com/vadimdemedes/ink) based on
[@reach/router](https://github.com/reach/router).

## How to use

Wrap your Ink app in `<ServerLocation url="...">` and then use `<Router>` the
same way as in Reach Router;

## Example

```js
// cli.js

import { ServerLocation } from "@jfrk/ink-router";
import { render } from "ink";
import meow from "meow";
import qs from "query-string";
import React from "react";

import App from "./App.js";

const cli = meow(`
  Usage
    $ example-cli counter <start>

  Options
    --interval  Milliseconds between increments

  Examples
    $ example-cli counter 1 --interval=1000
`);

let url =
  "/" +
  cli.input.map(encodeURIComponent).join("/") +
  "?" +
  qs.stringify(cli.flags);

render(
  <ServerLocation url={url}>
    <App />
  </ServerLocation>,
);

// App.js
import { Router } from "@jfrk/ink-router";
import React from "react";

import Counter from "./Counter.js";

export default function App() {
  return (
    <Router primary={false}>
      <Counter path="/counter/:start" />
    </Router>
  );
}

// Counter.js
import { useLocation } from "@jfrk/ink-router";
import { render, Text } from "ink";
import qs from "query-string";
import React, { useState, useEffect } from "react";

export default function Counter ({start}) {
  const { search } = useLocation();
  const { interval = 100 } = qs.parse(search);
  const [counter, setCounter] = useState(start);

  useEffect(() => {
    const timer = setInterval(() => {
      setCounter((previousCounter) => previousCounter + 1);
    }, interval);

    return () => {
      clearInterval(timer);
    };
  }, [interval]);

  return <Text color="green">{counter} tests passed</Text>;
};
```
npm package: @jfrk/react-heading-levels
Description: Provides components that calculate the correct HTML heading levels for you
Author: Fredrik Johansson
Latest version: 1.0.0

# React Heading Levels

Provides components that calculate the correct HTML heading levels for you.

## Getting started

Install with NPM:

```bash
npm install --save @jfrk/react-heading-levels
```

or Yarn:

```bash
yarn add @jfrk/react-heading-levels
```

## How to use

Wrap your app in `<HeadingLevelProvider>` and then use the `<H>` component instead of `<h1>`, `<h2>`, `<h3>` etc. Wrap components in the `<Section>` component to increase the heading level for all contained `<H>` components.

Example:

```js
import React from 'react';
import { HeadingLevelProvider, H, Section } from '@jfrk/react-heading-levels';

export default function App() {
  return (
    <HeadingLevelProvider>
      <main className="App">
        <H>Heading 1</H>
        <Section>
          <H>Heading 2</H>
          <H>Heading 2</H>
          <Section>
            <H>Heading 3</H>
            <H>Heading 3</H>
          </Section>
          <H>Heading 2</H>
        </Section>
      </main>
    </HeadingLevelProvider>
  );
}
```

Resulting DOM structure:

```html
<main>
  <h1>Heading 1</h1>
  <h2>Heading 2</h2>
  <h2>Heading 2</h2>
  <h3>Heading 3</h3>
  <h3>Heading 3</h3>
  <h2>Heading 2</h2>
</main>
```
npm package: @jfrk/react-id
Description: A React hook that ensures unique id attributes on HTML elements
Author: Fredrik Johansson
Latest version: 1.0.0

# React ID

A React hook that ensures unique id attributes on HTML elements.

## Get started

Install with npm:

```bash
npm install --save @jfrk/react-id
```

… or with Yarn:

```bash
yarn add @jfrk/react-id
```

## Usage

Wrap your app in the `IDContextProvider` component and then use the `useID` hook
to get a function that generates unique IDs for your elements. Example:

```js
// App.js

import React from 'react';
import { IDContextProvider } from '@jfrk/react-id';

export default function App() {
  return <IDContextProvider>{/* Your app code here */}</IDContextProvider>;
}
```

```js
// TextInput.js

import React from 'react';
import { useID } from '@jfrk/react-id';

export default function TextInput({ label, ...restProps }) {
  const id = useID();
  return (
    <div>
      <label htmlFor={id('field')}>{label}</label>
      <input id={id('field')} type="text" {...restProps} />
    </div>
  );
}
```

## How it works

Each component instance gets a unique ID (using
[nanoid](https://github.com/ai/nanoid)) that is added to the string passed to
`id()` if there is already another element with that ID. So the first element
that calls `id("field")` will get `"field"` returned, but other elements will
have their unique component ID appended, e.g. `"field-pszjtj4u"`.

## API

### `<IDContextProvider>` component

The exported `<IDContextProvider>` component can take these props:

- `generateComponentId` – By setting this prop, you can override the default
  function used to generate the unique ID for a component instance. This default
  to the exported function `nanoidComponentId` which uses the fast (non-secure)
  version of [nanoid](https://github.com/ai/nanoid) to generate a short string.
  The function receives no arguments.
- `generateSuffix` – Set this prop to a function to override the default
  behavior for generating ID suffixes. The default function is the exported
  `componentIdSuffix` which simply uses the already generared unique component
  ID. The function receives an objects with these properties:
  - `id` – The ID that have been passed to `id()` by the component
  - `componentId` – The unique component instance ID
  - `count` – The number of components that already uses this ID
  - `registeredIds` – An object containing all the information about what IDs
    have been generated for each component.
npm package: @jfrk/storybook-addon-code
Description: A storybook addon that display any type of code highlighted with Prismjs
Author: SoftVision
Latest version: 1.0.0

# storybook-addon-code
![React Storybook code addon](./assets/info.gif)


A Storybook addon enabling to show off code samples in the Storybook panel for your stories in [Storybook](https://storybook.js.org).

### Getting Started

```sh
npm i --save-dev storybook-addon-code
```
### Usage

Create a file called `addons.js` in your storybook config.

Add following content to it:

```js
import * as CodeAddon from '../src/register';
CodeAddon.setTabs(
    [{ label: 'Sass', type: 'sass' }, {label: 'TypeScript', type: 'typescript'}]
);
```
setTab function accept and object like  {label: 'Sass', type:'sass'} or if you want to have multiple tabs you can pass an array with multiple objects. The label will pe displayed in the Storybook panel.


Then write your stories like this:

```js
import { storiesOf } from '@storybook/react';
import withCode from 'storybook-addon-code';
import Button from './Button';

const styleFile = require('raw-loader!./style.scss');
const typescriptFile  = require('./test.tsx');

storiesOf('Button', module)
  .addDecorator(withCode(typescriptFile, 'typescript'))
  .addDecorator(withCode(styleFile, 'sass'))
  .add('with text', () =>
      <Button onClick={action('clicked')}>Hello Button</Button>
    )
```
### Available list of format's for withCode function
1. clike (withCode(YourCFile, 'clike'))
2. css (withCode(YourCssFile, 'css'))
3. html (withCode(YourHtmlFile, 'html'))
4. js | javascript (withCode(YourJavascriptFile, 'js'))
5. markup (withCode(YourMarkupFile, 'js'))
6. mathml (withCode(YourMatHmlFile, 'mathml'))
7. sass (withCode(YourSassFile, 'sass'))
8. svg (withCode(YourSvgFile, 'svg'))
9. ts (withCode(YourTsFile, 'ts'))
10. typescript (withCode(YourTypescriptFile, 'typescript'))
11. xml (withCode(YourXmlFile, 'xml'))

> Have a look at [this example](examples/index.js) stories to learn more about the `withCode` API
npm package: @jfrk/twig-loader
Description: Webpack loader for compiling twig.js templates
Author: Mathieu Maes @ Zimmo.be
Latest version: 1.1.0

# twig-loader [![Build Status](https://travis-ci.org/zimmo-be/twig-loader.svg)](https://travis-ci.org/zimmo-be/twig-loader)
Webpack loader for compiling Twig.js templates. This loader will allow you to require Twig.js views to your code.

## Installation

`npm install @jfrk/twig-loader`

## Usage

[Documentation: Using loaders](http://webpack.github.io/docs/using-loaders.html?branch=master)

``` javascript

module.exports = {
    //...

    module: {
        rules: [
            {
                test: /\.twig$/,
                loader: "twig-loader",
                options: {
                    // See options section below
                },
            }
        ]
    },

    node: {
        fs: "empty" // avoids error messages
    }
};
```

### Options

- `extender`: optional; the full path to a module which exports a `function(Twig)`
  which extends Twig (such as adding filters and functions). Must use `export default` instead of `module.exports`.
  Example: `__dirname + "/src/extendTwig.js"`
- `paths`: optional; an array of absolute paths that contain Twig templates. When this option is included, paths that doesn’t begin with a `.` or `/` inside tags like `{% include %}` and `{% extends %}` will be considered relative to one of these paths instead of the file. This mimics the PHP implementation of Twig.
- `twigOptions`: optional; a map of options to be passed through to Twig.
  Example: `{autoescape: true}`

## Loading templates

```twig
{# File: dialog.html.twig #}
<p>{{title}}</p>
```

```javascript
// File: app.js
var template = require("./dialog.html.twig");
// => returns pre-compiled template as a function and automatically includes Twig.js to your project

var html = template({title: 'dialog title'});
// => Render the view with the given context

```

When you extend another view, it will also be added as a dependency. All twig functions that refer to additional templates are supported: import, include, extends & embed.
npm package: @jfrolich/create-emotion-styled
Description: The styled API for emotion
Author: Kye Hohenberger
Latest version: 9.2.9

# create-emotion-styled

> Create the styled API with emotion for React-like libraries

`create-emotion-styled` allows you to use the `styled` API with instances of emotion. This is **only** needed if you use a custom instance of emotion from `create-emotion` and you want to use the `styled` API. `create-emotion-styled` accepts an instance of emotion from `create-emotion` and a React-like view library.

```jsx
import React from 'react'
import * as emotion from 'my-emotion-instance'
import createEmotionStyled from 'create-emotion-styled'

export default createEmotionStyled(emotion, React)

// Exporting emotion isn't required but generally recommended
export * from 'my-emotion-instance'
```
npm package: @jfrolich/gatsby-plugin-extract-schema
Description: Extract Gatsby's generated graphql schema to a JSON file
Author: Nicky Meuleman
Latest version: 0.0.4

# gatsby-plugin-extract-schema

A [Gatsby](https://github.com/gatsbyjs/gatsby) plugin that extracts your graphql schema to a `.json` file.

You can use this file to check your queries against your schema, by using [eslint-plugin-graphql](https://github.com/apollographql/eslint-plugin-graphql).

## Install

Extract schema:
`npm install --save gatsby-plugin-extract-schema`

Use extracted schema:
`npm install --save-dev eslint babel-eslint eslint-plugin-graphql`

## How to use

### Edit `gatsby-config.js`

```javascript
module.exports = {
  plugins: ["gatsby-plugin-extract-schema"]
};
```

or

```javascript
{
  resolve: "gatsby-plugin-extract-schema",
    options: {
      dest: `${__dirname}/path/to/schema.json`,
    },
  },
}
```

## Check queries against schema

### Add `.eslintrc.js` to the project root

```javascript
const path = require("path");
module.exports = {
  parser: "babel-eslint",
  rules: {
    "graphql/template-strings": [
      "error",
      {
        env: "relay",
        schemaJsonFilepath: path.resolve(__dirname, "./schema.json"),
        tagName: "graphql"
      }
    ]
  },
  plugins: ["graphql"]
};
```

Big thanks to [Kurtis Kemple](https://twitter.com/kurtiskemple) for all his help!
npm package: @jfrolich/gatsby-plugin-reason
Description: Make gatsby work with ReasonML (.re) files
Author: Jaap Frolich
Latest version: 0.1.4

# gatsby-plugin-reason

This allows you to create a Gatsby site with ReasonML for a working example have
a look at [jfrolich/reason-gatsby-starter](https://github.com/jfrolich/reason-gatsby-starter).
npm package: @jfrolich/react-emotion
Description: The Next Generation of CSS-in-JS, for React projects.
Author: Kye Hohenberger
Latest version: 9.2.14

# react-emotion

> The styled API for emotion and react

`react-emotion` exports `styled` which allows you to use emotion to create React components that have styles attached to them, it also exports all of `emotion`'s exports.

For more documentation on `styled`, [read about it and try it out in the `styled` docs](https://emotion.sh/docs/styled)

```bash
npm install --save emotion react-emotion
```

```jsx
// @live
import styled, { css } from 'react-emotion'
const SomeComponent = styled('div')`
  display: flex;
  background-color: ${props => props.color};
`

const AnotherComponent = styled('h1')(
  {
    color: 'hotpink'
  },
  props => ({ flex: props.flex })
)

render(
  <SomeComponent color="#DA70D6">
    <AnotherComponent flex={1}>Some text.</AnotherComponent>
  </SomeComponent>
)
```
npm package: @jfrolich/reason-gatsby
Description: This allows you to create a Gatsby site with ReasonML for a working example have a look at [jfrolich/reason-gatsby-starter-blog](https://github.com/jfrolich/reason-gatsby-starter-blog).
Latest version: 0.1.7

# Reason-Gatsby

This allows you to create a Gatsby site with ReasonML for a working example have
a look at [jfrolich/reason-gatsby-starter-blog](https://github.com/jfrolich/reason-gatsby-starter-blog).
npm package: @jfrolich/slate-react
Description: A set of React components for building completely customizable rich-text editors.
Latest version: 0.14.9

This package contains the React-specific logic for Slate. It's separated further into a series of directories:

* [**Components**](./src/components) — containing the React components for rendering Slate editors.
* [**Constants**](./src/constants) — containing a few private constants modules.
* [**Plugins**](./src/plugins) — containing the React-specific plugins for Slate editors.
* [**Utils**](./src/utils) — containing a few private convenience modules.

Feel free to poke around in each of them to learn more!
npm package: @jfrolich/slate-react2
Description: A set of React components for building completely customizable rich-text editors.
Latest version: 0.14.11

This package contains the React-specific logic for Slate. It's separated further into a series of directories:

* [**Components**](./src/components) — containing the React components for rendering Slate editors.
* [**Constants**](./src/constants) — containing a few private constants modules.
* [**Plugins**](./src/plugins) — containing the React-specific plugins for Slate editors.
* [**Utils**](./src/utils) — containing a few private convenience modules.

Feel free to poke around in each of them to learn more!
npm package: @jfromaniello/bcrypt-cli
Description: A command line utility for hashing and comparing passwords using bcrypt.
Author: José F. Romaniello
Latest version: 1.0.0

A command line utility for hashing and comparing passwords using bcrypt.

## Install

```
npm i -g @jfromaniello/bcrypt-cli
```

## Usage

```
» bcrypt <cmd> [args]

Commands:
  bcrypt compare [password] [hash]  Compare a password to a hash
  bcrypt hash [password]            Hash a password and return the result

Options:
  --version   Show version number                                      [boolean]
  -h, --help  Show help                                                [boolean]
```

## Example:

```
» bcrypt hash super-duper-duper
The hash is $2b$10$ZAwDHekJ2gzqjnd/luQoS.MVbxq11.T3FT69sH0QXJ/yuspqxMLRu

» HASH=$(bcrypt hash super-duper-duper)
» echo $HASH
$2b$10$ZAwDHekJ2gzqjnd/luQoS.MVbxq11.T3FT69sH0QXJ/yuspqxMLRu

» bcrypt compare super-duper-duper $HASH
The password match.

» bcrypt compare another-password $HASH
The password does not match.

$ echo $?
1
```

You can also use - to provide the input through the standard input:

```
» echo -n foobar | bcrypt hash | bcrypt compare foobar -
The password match.
```

## License

MIT 2019 - José F. Romaniello
npm package: @jfromaniello/typedmap
Description: Typescript strongly typed Map.
Author: José F. Romaniello
Latest version: 1.4.1

Typescript strongly typed Map.

Typescript comes with a generic Map<K, V> type which allows you to set a fixed type for the Keys and another for the Values. This is enough for most cases but sometimes you need more granularity as to which tuples are allowed in the map.

## Installation

```
npm install @jfromaniello/typedmap
```

## Usage

```ts
import { TypedMap } from '@jfromaniello/typedmap';

type KeyValue =
  ['foo' | 'bar', string] |
  [number, string] |
  ['person', Person];

const map = new TypedMap<KeyValue>();

// Valid examples
map.set('foo', 'hello');
map.set(1, 'world');
map.set('person', new Person());

// Invalid examples
// new Map([['person', 123]]);
// map.set('foo', 'test');
// map.get('fiii');
```

## License

MIT - 2024 José F. Romaniello