open-index/open-npm huggingface dataset:
npm package: @storybook/native-components
Description: This module contains React components that allow you to interact with appetize.io. This lets you take advantage of controls, as well as add-ons.
Author: Adil Malik
Latest version: 3.1.2

# @storybook/native-components
This module contains React components that allow you to interact with appetize.io. This lets you take advantage of controls, as well as add-ons.

## Installation
This package is included within the `@storybook/native` package already, so if you have that as a dependency you do not need to manually install this.

If you are not using that package, use one of these commands to install this package:
`npm install @storybook/native-components`
or
`yarn add @storybook/native-components`

## Usage
`import { EmulatorRenderer } from '@storybook/native-components';`

An example usage can be found [here](../../examples/controls/src/button.stories.jsx)
npm package: @storybook/native-dev-middleware
Description: Middleware for using storybook with emulators open on a local machine
Author: Adil Malik
Latest version: 3.1.2

# @storybook/native-dev-middleware

This package allows you to control an emulator open on your local device by interacting with storybook. It only supports stories that use deep linking.

To use this package, you must have an emulator open on your local machine through `adb` (for Android apps), or through `xcrun` (for iOS apps). You can also open your app from either Android Studio or XCode directly.

## Installation
`npm install @storybook/native-dev-middleware`
or
`yarn add @storybook/native-dev-middleware`

## Usage

#### 1. Enabling middleware
Create a file called `middleware.js` inside of your `.storybook` folder. It should have contents like the below:
```js
const { middleware } = require("@storybook/native-dev-middleware");
module.exports = middleware();
```

The `middleware` function optionally takes in an object argument that lets you configure how to interact with emulators. Supported keys in that object are:
- androidCommandPath: Path to `adb`. Defaults to `adb`
- iosCommandPath: Path to `xcrun`. Defaults to `xcrun`
- timeout: How long before a command times out. Defaults to `10000` ms

An example of this file can be found [here](../../examples/cross-platform/.storybook/middleware.js)

#### 2. Setting environment variable
To actually tell storybook to interact with a local emulator, the `STORYBOOK_NATIVE_LOCAL_EMULATOR` environment variable must be set to a non-empty string.

Example:
```sh
export STORYBOOK_NATIVE_LOCAL_EMULATOR="true"
```

If you want to clear this value to go back to testing with your application with `appetize.io`, you can run:
```sh
export STORYBOOK_NATIVE_LOCAL_EMULATOR=
```

The [Storybook docs](https://storybook.js.org/docs/react/configure/environment-variables#using-env-files) discuss additional ways to declare this environment variable.

**IMPORTANT NOTE:** You should not have this environment variable set when you run the `build-storybook` command, as that will prevent your static storybook from working in production.

#### 3. Start your storybook
Now, you can start your storybook like how you normally would. As you interact with storybook, the emulator open on your local machine will be sent information such as what deep links to open.

## Troubleshooting

#### Android stories not updating
On Android, there may be instances where your emulator will not start an activity because an existing instance of that activity was already active. 

To work around this, you can add `android:launchMode="singleTask"` to your activity in your `AndroidManifest.xml` file, and create a function called `onNewIntent(intent: Intent?)` in your activity class to handle switching to a new deep link.

Example [manifest file](../../examples/android-material-ui/app/app/src/main/AndroidManifest.xml#L24)  
Example [activity class](../../examples/android-material-ui/app/app/src/main/java/com/intuit/august2020/storybookdemoapp/MainActivity.kt#L121)
npm package: @storybook/nextjs-server
Description: Storybook for NextJS Server: Embedded server-side rendering
Latest version: 0.0.4

# Storybook Next.js Server

An experimental embedded version of [Storybook](https://storybook.js.org/) that runs **inside** your Next.js dev server.

To install, run the installer from the root of your Next.js project:

```
npm create nextjs-storybook
```

For more information, [please see the docs](https://github.com/storybookjs/nextjs-server).
npm package: @storybook/polymer
Description: Storybook for Polymer: Develop Polymer components in isolation with Hot Reloading.
Latest version: 5.3.21

# Storybook for Polymer

Storybook for polymer is a UI development environment for your Polymer components.
With it, you can visualize different states of your UI components and develop them interactively.

> Storybook for Polymer is at the **EXPERIMENTAL** stage!

![Storybook Screenshot](https://github.com/storybookjs/storybook/blob/master/media/storybook-intro.gif)

Storybook runs outside of your app.
So you can develop UI components in isolation without worrying about app specific dependencies and requirements.

## Getting Started

```sh
cd my-polymer-app
npx -p @storybook/cli sb init
```

For more information visit: [storybook.js.org](https://storybook.js.org)

---

Storybook also comes with a lot of [addons](https://storybook.js.org/addons/introduction) and a great API to customize as you wish.
You can also build a [static version](https://storybook.js.org/basics/exporting-storybook) of your storybook and deploy it anywhere you want.

## Polymer Notes

- This is super super experimental, if you want to use this, expect some bugs, and missing features.
- We're looking for help to support this. If you're a member of the Polymer community and like this project, please help us!
  If you need any onboarding from us, we're happy to help you in any way!
npm package: @storybook/preset-ant-design
Description: Ant Design preset for Storybook
Latest version: 0.0.2

# Ant Design preset for Storybook

One-line Ant Design configuration for Storybook.

## Basic usage

```
yarn add -D @storybook/preset-ant-design
```

Then add the following to `.storybook/presets.js`:

```js
module.exports = ['@storybook/preset-ant-design'];
```

If used with `preset-create-react-app`, Make sure override the default file loader.

```json
{
  "name": "@storybook/preset-create-react-app",
  "options": {
    "craOverrides": {
      "fileLoaderExcludes": ["less"]
    }
  }
}
```

## Advanced usage

You can customize theme variable by passing `modifyVars` options into less loader in`.storybook/presets.js`, e.g.:

```js
module.exports = [
  {
    name: '@storybook/preset-ant-design',
    options: {
      lessOptions: {
        modifyVars: {
          'primary-color': '#1DA57A',
          'border-radius-base': '2px',
        },
      },
    },
  },
];
```
npm package: @storybook/preset-ie11
Description: IE11 preset for Storybook
Latest version: 0.0.1
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

<h1>Storybook IE 11 preset</h1>

One-line IE 11 configuration for Storybook.

## Installation

First, install this preset to your project.

```
npm install -D @storybook/preset-ie11 # or yarn
```

Once installed, add this preset to the appropriate file:

- `./.storybook/main.js` (for Storybook 5.3.0 and newer)

  ```js
  module.exports = {
    addons: ['@storybook/preset-ie11'],
  };
  ```

- `./.storybook/presets.js` (for all Storybook versions)

  ```js
  module.exports = ['@storybook/preset-ie11'];
  ```
npm package: @storybook/preset-scss
Description: SCSS preset for Storybook
Latest version: 1.0.3

# SCSS preset for Storybook

One-line SCSS configuration for storybook.

## Basic usage

```
yarn add -D @storybook/preset-scss css-loader sass-loader style-loader
```

Then add the following to `.storybook/main.js`:

```js
module.exports = {
  addons: ['@storybook/preset-scss'],
};
```

## Advanced usage

You can pass configurations by using Object addon declaration for `@storybook/preset-scss` and adding the configurations under the `option` key. You can pass configurations into the preset's webpack loaders using `styleLoaderOptions`, `cssLoaderOptions`, and `sassLoaderOptions` keys. See documentation for each respective loader to learn about valid options. You can register other addons through the string declaration as normal.

```
module.exports = {
  addons: [
    {
      name: '@storybook/preset-scss',
      options: {
        cssLoaderOptions: {
           modules: true,
           localIdentName: '[name]__[local]--[hash:base64:5]',
        }
      }
    },
    // You can add other presets/addons by using the string declaration
    '@storybook/preset-typescript',
    '@storybook/addon-actions',
  ]
}
```
npm package: @storybook/preset-typescript
Description: TypeScript preset for Storybook
Latest version: 3.0.0

<h1>Storybook TypeScript preset</h1>

One-line TypeScript configuration for Storybook.

- [Installation](#installation)
- [Advanced usage](#advanced-usage)
- [Options](#options)
  - [forkTsCheckerWebpackPluginOptions](#forktscheckerwebpackpluginoptions)
  - [include](#include)
  - [transpileManager](#transpilemanager)

## Installation

First, install this preset to your project.

```
npm install -D @storybook/preset-typescript ts-loader fork-ts-checker-webpack-plugin # or yarn
```

Once installed, add this preset to the appropriate file:

- `./.storybook/main.js` (for Storybook 5.3.0 and newer)

  ```js
  module.exports = {
    addons: ['@storybook/preset-typescript'],
  };
  ```

- `./.storybook/presets.js` (for all Storybook versions)

  ```js
  module.exports = ['@storybook/preset-typescript'];
  ```

## Advanced usage

You can also pass extra configuration options to configure the preset. For example:

```js
// ./storybook/main.js
const path = require('path');

module.exports = {
  addons: [
    {
      name: '@storybook/preset-typescript',
      options: {
        tsLoaderOptions: {
          configFile: path.resolve(__dirname, './tsconfig.json'),
        },
        forkTsCheckerWebpackPluginOptions: {
          colors: false, // disables built-in colors in logger messages
        },
        include: [path.resolve(__dirname, '../src')],
        transpileManager: true,
      },
    },
  ],
};
```

All available options are described in the [Options](#options) section below.

## Options

### forkTsCheckerWebpackPluginOptions

Type: `Object`

<h5>Default value</h5>

```js
undefined;
```

[fork-ts-checker-webpack-plugin](https://github.com/TypeStrong/fork-ts-checker-webpack-plugin#options) options. `transpileOnly` flag needs to be set to `true` in `tsLoaderOptions` to be able to set options for this webpack plugin.

### include

Type: [Rule condition](https://webpack.js.org/configuration/module/#rule-conditions)

<h5>Default value</h5>

```js
undefined;
```

[include rule](https://webpack.js.org/configuration/module/#ruleinclude) for `/\.tsx?$/`.

### transpileManager

Type: `Boolean`

<h5>Default value</h5>

```js
false;
```

Toggles TypeScript transpilation on [manager](https://storybook.js.org/docs/addons/writing-addons/) side.
npm package: @storybook/react-native-server
Description: A better way to develop React Native Components for your app
Latest version: 6.5.8

# Storybook Server for React Native
Additional package for @storybook/react-native to support a web server and browser UI that runs alongside the RN on-device UI

For more information visit: [storybook.js.org](https://storybook.js.org)

## Usage
After setting up Storybook for React Native install this package. 

```shell
npm install --save-dev @storybook/react-native-server
```

Then run `npx storybook start`
npm package: @storybook/react-simple-di
Description: Simple Dependancy Injection Solution for React
Latest version: 1.3.0

# react-simple-di

Simple dependancy injection solution for React.

### Installation

```
npm i react-simple-di
```

### Intro

In `react-simple-di`, we've two types of dependencies, they are:

1. context - These are usually, configurations, models and client for different remote data solutions.
2. actions - Actions are simple functions which used to perform business logic with the help of the above context.

> Every action will receive the `context` as it's first argument.

### Injecting Dependancies

First, we need to inject dependencies to a root level React component. Mostly, this will be the main layout component of our app.

Here are our dependencies:
```js
const context = {
    DB,
    Router,
    appName: 'My Blog'
};

const actions = {
    posts: {
        create({DB, Router}, title, content) {
            const id = String(Math.random());
            DB.createPost(id, title, content);
            Router.go(`/post/${id}`);
        }
    }
};
```

First we've defined our context. Then, we have our actions. Here actions must follow a structure like mentioned above.

Let's inject our dependencies:

```js
import {injectDeps} from 'react-simple-di';
import Layout from './layout.jsx';

// Above mentioned actions and context are defined here.

const LayoutWithDeps = injectDeps(context, actions)(Layout);
```

Now you can use `LayoutWithDeps` anywhere in your app.

## Using Depedencies

Any component rendered inside `LayoutWithDeps` can access both context and actions. 

When using dependecies it will compose a new React component and pass dependencies via props to the original component.

First let's create our UI component. Here it will expect dependecies to come via props `appName` and `createPost`.

```js
class CreatePost extends React.Component {
    render() {
        const {appName} = this.props;
        return (
            <div>
                Create a blog post on app: ${appName}. <br/>
                <button onClick={this.create.bind(this)}>Create Now</button>
            </div>
        );
    }

    create() {
        const {createPost} = this.props;
        createPost('My Blog Title', 'Some Content');
    }
}
```

So, let's use dependencies:

```js
import {useDeps} from 'react-simple-di';

// Assume above mentioned CreatePost react component is
// defined here.

const depsToPropsMapper = (context, actions) => ({
    appName: context.appName,
    createPost: actions.posts.create
});

const CreatePostWithDeps = useDeps(depsToPropsMapper)(CreatePost);
```

That's it. 

> Note: Here when calling the `actions.posts.create` action, you don't need to provide the context as the first argument. It'll handle by `react-simple-di`.

**Default Mapper**

If you didn't provide a mapper function, useDeps will use a default mapper function will allows you to get context and props directy. Here's that default mapper:

```js
const mapper = (context, actions) => ({
    context: () => context,
    actions: () => actions
});
```
npm package: @storybook/react-stubber
Description: Simple but useful stubbing solution React
Latest version: 1.0.1

# React Stubber

A simple but useful stubbing solution for React. This will work with any container library whether it's Redux, [React Komposer](https://github.com/kadirahq/react-komposer) or with any React Component.

---

Read this article for an introduction: [Stubbing React Containers for Testing](https://voice.kadira.io/stubbing-react-containers-for-testing-11bcd537e586?source=latest)

## Usage

First of all, we need to wrap React classes we need to stub with the `mayBeStubbed` function. See:

```js
import React from 'react';
// compose if our container building library.
import compose from './compose';
import { mayBeStubbed } from 'react-stubber';

export const CommentList = () => (
  <ul>

  </ul>
);
CommentList.displayName = 'CommentList';
export const CommentListContainer = mayBeStubbed(compose(CommentList));
```

Then we can use the `CommentListContainer` anywhere we need.

So, let's use the above `CommentListContainer` inside another Component called `Post`.

```js
export const Post = (post) => (
  <div style={style}>
    <h1>{post.title}</h1>
    <p>{post.text}</p>
    <hr />
    <h3>Comments</h3>
    <CommentListContainer postId={post.id} />
  </div>
);
```

In order to do isolated testing, first make sure we are in the **stubbing mode**.

We need to do this, before importing any React component. This is something you could do when doing the test setup or in the React Storybook config file.

```js
import { setStubbingMode } from 'react-stubber';
setStubbingMode(true);
```

Then when we render Post we will get something like this:

![](docs/with-default-stub.png)

We can also stub this component with a custom component we like. This is how we do that. You need to do this before using the `Post` component. <br />
(The test file or storybook story file is a good place for this).

```js
import { stub } from 'react-stubber';

stub(CommentListContainer3, (props) => (
  <div>Comments for postId: {props.postId}</div>
));
```

Then once rendered it will looks like this.

![](docs/with-custom-stub.png)
npm package: @storybook/testing-library
Description: Instrumented version of Testing Library for Storybook Interactions
Author: yannbf@gmail.com
Latest version: 0.2.2
Deprecated: In Storybook 8, this package functionality has been integrated to a new package called @storybook/test, which uses Vitest APIs for an improved experience. When upgrading to Storybook 8 with 'npx storybook@latest upgrade', you will get prompted and will get an automigration for the new package. Please migrate when you can.

# Storybook Testing Library

Storybook integration for Testing Library, instrumented for use with the Interactions addon.

For documentation, check the [Storybook docs](https://storybook.js.org/docs/react/writing-tests/interaction-testing)
npm package: @storybook/testing-react
Description: Testing utilities that allow you to reuse your stories in your unit tests
Author: yannbf@gmail.com
Latest version: 2.0.1
Deprecated: In Storybook 7, this package has been promoted to a first-class Storybook functionality. This means that you no longer need it! Instead, you can import the same utilities, but from the @storybook/react package. Please migrate when you can.
npm package: @storybook/vue-vite
Description: Storybook for Vue2 and Vite: Develop Vue2 Components in isolation with Hot Reloading.
Latest version: 7.6.17
Deprecated: Vue2 will end-of-life on 2023-12-31, so we plan to remove support in Storybook's next major release. More info: https://github.com/storybookjs/storybook/discussions/24951
npm package: @storybook/vue-webpack5
Description: Storybook for Vue: Develop Vue Component in isolation with Hot Reloading.
Latest version: 7.6.17
Deprecated: Vue2 will end-of-life on 2023-12-31, so we plan to remove support in Storybook's next major release. More info: https://github.com/storybookjs/storybook/discussions/24951
npm package: @storybynumbers/jck-navigation
Description: Primary navigation component for jck.nl
Author: Jason Yergeau
Latest version: 2.0.8

# JCK Navigation

## Usage

```jsx
const languageLinks = {
    en: '/en',
    nl: '/'
};
<Navigation absoluteDomain="//jck.nl"
            langLinks={languageLinks}
            language={this.state.language}
            pages={p.pages}
            menuShown={this.state.menuShown}
            toggle={this._toggleMenu}
            hide={this._hideMenu} />
```
            
## Options

Property|Type	|Description
|:---|:---|:---
 absoluteDomain	|   String  |  Websites other than jck.nl should set this to "//jck.nl"
 hide	|	Function	|	Callback function to set the menuShown property to false
 language   |   String  |   Language (eg: 'en')   
 languageSelectorOptions |   Object  |   Options to pass to LanguageSelector  
 menuShown	|	Boolean	|	If true, the menu will expand outwards.
 pages   |   Array  |   Menu structure. Should be result from menu API endpoint. DEPRECIATED.
 toggle	|	Function	|	Callback function to toggle the menuShown property
 

## Building the library

This library component is based off the [create-react-library](https://github.com/UdiliaInc/create-react-library)
starter kit. The build asset is an exportable module: 

`npm run build` or `yarn run build`

This can be published to npm by bumping up the version number in package.json and running:

`npm publish`

## Developing the library

Fire up a development environment based off `src/demo/index.js`:

`HTTPS=true yarn start`
npm package: @storybynumbers_/remotion-glitch-effect
Description: Digital glitch effect with RGB channel splitting for Remotion
Author: Story by Numbers
Latest version: 1.1.0

# @storybynumbers_/remotion-glitch-effect

Digital glitch effect with RGB channel splitting for Remotion.

## Install

```bash
npm install @storybynumbers_/remotion-glitch-effect
```

## Minimal use

```tsx
import { DigitalGlitchRGB } from '@storybynumbers_/remotion-glitch-effect';

<DigitalGlitchRGB>
  <YourContent />
</DigitalGlitchRGB>
```

## How it’s made (overview)

- Schedules sparse “bursts” up front using Remotion’s deterministic `random()` and a `seed`.
- During a burst, computes a quick intensity envelope and varies offsets per-frame (still deterministic).
- Renders three layers (R/G/B) and uses SVG filters: `feColorMatrix` to isolate channels, `feOffset` for separation, optional `feGaussianBlur` for softness.
- Composites layers with `mixBlendMode: 'screen'`.
- Outside bursts, renders children directly (no filters applied).

Implementation: `lib/DigitalGlitchRGB.tsx`.

## Props

- `splitAmount` (number, default 4) RGB offset in pixels
- `blurAmount` (number, default 0.8) Blur radius
- `jitterAmount` (number, default 1.5) Global shake in pixels
- `burstSpacing` (number, default 25) Avg frames between bursts
- `burstDuration` ([number, number], default [2, 5]) Min/max burst length
- `seed` (number, default 42) Deterministic randomization seed

Full docs and examples: https://github.com/storybynumbers/remotion-glitch-effect#readme