open-index/open-npm huggingface dataset:
npm package: @stormtroopper/multi-step-form
Description: Reusable multi-step form component for React using React Hook Form
Latest version: 0.0.1

# React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh

## React Compiler

The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).

## Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:

```js
export default defineConfig([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      // Other configs...

      // Remove tseslint.configs.recommended and replace with this
      tseslint.configs.recommendedTypeChecked,
      // Alternatively, use this for stricter rules
      tseslint.configs.strictTypeChecked,
      // Optionally, add this for stylistic rules
      tseslint.configs.stylisticTypeChecked,

      // Other configs...
    ],
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.node.json', './tsconfig.app.json'],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
])
```

You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:

```js
// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'

export default defineConfig([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      // Other configs...
      // Enable lint rules for React
      reactX.configs['recommended-typescript'],
      // Enable lint rules for React DOM
      reactDom.configs.recommended,
    ],
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.node.json', './tsconfig.app.json'],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
])
```
npm package: @stormwild/ckeditor5-build-custom
Description: Custom editor based on the classic editor build of CKEditor 5 – the best browser-based rich text editor.
Author: Alexander R Torrijos
Latest version: 1.0.3

# Custom CKEditor

Custom editor based on the classic editor build of CKEditor 5

## Usage

### Install

```
yarn add @stormwild/ckeditor
```

### React

Install

```
yarn add @ckeditor/react
```

```jsx
import CustomEditor from '@stormwild/ckeditor'

export default const App = () => {
    return <CKEditor editor={CustomEditor} />
}
```

## Local Development

### Prerequisites

- Git
- Node
  - Npm
  - Yarn
- Visual Studio code

## Setup

```
git clone git@github.com:stormwild/ckeditor.git
cd ckeditor
yarn && yarn build
# open public/index.html in browser to test
```
npm package: @stormzx/context
Description: A simple context library using AsyncLocalStorage.
Author: wvqigescy@gmail.com
Latest version: 0.1.3

## Description

This is a simple context library.

Node.js 16.0 or higher is required.

## Installation

Installation is done using the
[`npm install` command](https://docs.npmjs.com/getting-started/installing-npm-packages-locally):

```bash
$ npm install @stormzx/context
```

## Examples:

```js
const {Context} = require('@stormzx/context')

// set something on global context
Context.set('arg', 'at global')
// or
Context.rootStore.set('arg2', 'arg2 at global')

Context.run({arg: 'at context'}, () => {
  console.log(Context.get('arg')); // at contxt

  console.log(Context.get('arg2')); // arg2 at global

  Context.run({arg: 'at context 2'}, () => {
    console.log(Context.get('arg')); // at contxt 2
  })
})

console.log(Context.get('arg')); // at global

```
npm package: @stormzx/sqlbuilder
Description: A simple sql builder.
Latest version: 0.0.11

## a simple sql builder for mysql.

### Todo
- [x] select 
- [x] insert
- [x] update
- [ ] delete

### Raw:
1. raw        = raw
2. string     = raw#string
3. table      = raw#table
4. column     = raw#column
5. expression = raw#expression
6. orderBy    = raw#order

### api:

1. table(tablename:string, as?:string) 


``` javascript
import { table } from '@stormzx/sqlbuilder'

let u = table('users', 'u')

let transform = `
  # use like object
  u                   => ${u}
  u.id                => ${u.id}
  u.userId            => ${u.userId}
  u.userId.as('uid')  => ${u.userId.as('uid')}

  # use like function
  u('id', 'userId')           = [u.id, u.userId]            => ${u('id', 'userId')}
  u('id', ['userId', 'uid'])  = [u.id, u.userId.as('uid')]  => ${u('id', ['userId', 'uid'])}
`

console.log(transform)

// Output:
// # use like object
// u                   => `users` as `u`
// u.id                => `u`.`id`
// u.userId            => `u`.`user_id`
// u.userId.as('uid')  => `u`.`user_id` as `uid`

// # use like function
// u('id', 'userId')           = [u.id, u.userId]            => `u`.`id`,`u`.`user_id`
// u('id', ['userId', 'uid'])  = [u.id, u.userId.as('uid')]  => `u`.`id`,`u`.`0` as `uid`

```

2. raw(rawSql: string)
3. escape(value: any)
4. escapeId(column: string)
5. SQLBuilder
``` javascript
import {SQLBuilder, table} from '@stormzx/sqlbuilder'
let u = table('users', 'u')


```
npm package: @storona/discord.js
Description: File-based router adapter for discord.js
Author: domin-mnd
Latest version: 2.0.0

![Preview banner](public/preview-banner.png)

<h1>
  Overview
  <sup>
    <strong>
      <code>&nbsp;<a href="https://storona.domin.zip/adapters/discord.js/">Documentation</a>&nbsp;</code>
    </strong>
  </sup>
</h1>

This package is an adapter for [storona](https://storona.domin.zip/) file-based router. It allows to use [discord.js](https://discord.js.org/) with storona.

> Regarding all features and caveats, please refer to the documentation.

# Install

```bash
$ npm install storona discord.js @storona/discord.js
$ yarn add storona discord.js @storona/discord.js
$ pnpm add storona discord.js @storona/discord.js
$ bun add storona discord.js @storona/discord.js
```

# License

This project is under [MIT](https://choosealicense.com/licenses/mit/) license. You can freely use it for your own purposes.
npm package: @storona/express
Description: File-based router adapter for express
Author: domin-mnd
Latest version: 2.0.0

![Preview banner](public/preview-banner.png)

<h1>
  Overview
  <sup>
    <strong>
      <code>&nbsp;<a href="https://storona.domin.zip/adapters/express/">Documentation</a>&nbsp;</code>
    </strong>
  </sup>
</h1>

This package is an adapter for [storona](https://storona.domin.zip/) file-based router. It allows to use [Express](https://expressjs.com/) web framework with storona.

> Regarding all features and caveats, please refer to the documentation.

# Install

```bash
$ npm install storona express @storona/express
$ yarn add storona express @storona/express
$ pnpm add storona express @storona/express
$ bun add storona express @storona/express
```

# License

This project is under [MIT](https://choosealicense.com/licenses/mit/) license. You can freely use it for your own purposes.
npm package: @storona/fastify
Description: File-based router adapter for fastify
Author: domin-mnd
Latest version: 2.0.0

![Preview banner](public/preview-banner.png)

<h1>
  Overview
  <sup>
    <strong>
      <code>&nbsp;<a href="https://storona.domin.zip/adapters/fastify/">Documentation</a>&nbsp;</code>
    </strong>
  </sup>
</h1>

This package is an adapter for [storona](https://storona.domin.zip/) file-based router. It allows to use [Fastify](https://fastify.dev/) web framework with storona.

> Regarding all features and caveats, please refer to the documentation.

# Install

```bash
$ npm install storona fastify @storona/fastify
$ yarn add storona fastify @storona/fastify
$ pnpm add storona fastify @storona/fastify
$ bun add storona fastify @storona/fastify
```

# License

This project is under [MIT](https://choosealicense.com/licenses/mit/) license. You can freely use it for your own purposes.
npm package: @storona/grammy
Description: File-based router adapter for grammY
Author: domin-mnd
Latest version: 2.0.0

![Preview banner](public/preview-banner.png)

<h1>
  Overview
  <sup>
    <strong>
      <code>&nbsp;<a href="https://storona.domin.zip/adapters/grammy/">Documentation</a>&nbsp;</code>
    </strong>
  </sup>
</h1>

This package is an adapter for [storona](https://storona.domin.zip/) file-based router. It allows to use [grammY](https://grammy.dev/) telegram bot framework with storona.

> Regarding all features and caveats, please refer to the documentation.

# Install

```bash
$ npm install storona grammy @storona/grammy
$ yarn add storona grammy @storona/grammy
$ pnpm add storona grammy @storona/grammy
$ bun add storona grammy @storona/grammy
```

# License

This project is under [MIT](https://choosealicense.com/licenses/mit/) license. You can freely use it for your own purposes.
npm package: @storozhok/adminjs
Description: Admin panel for apps written in node.js
Author: Wojciech Krysiak
Latest version: 1.0.1

# AdminJS

[AdminJS](https://adminjs.co/) is an automatic admin interface that can be plugged into your application. You, as a developer, provide database models (like posts, comments, stores, products or whatever else your application uses), and AdminJS generates UI which allows you (or other trusted users) to manage content.

Inspired by: [django admin](https://docs.djangoproject.com), [rails admin](https://github.com/sferik/rails_admin) and [active admin](https://activeadmin.info/).

## How it looks

<img src='./docs/anim.gif'>

## Example application

Check out the example application with mongodb and postgres models here:

- Login: `admin@example.com`
- Password: `password`

https://adminjs-demo.herokuapp.com

## Getting started

- Check out the [documentation](https://docs.adminjs.co)
- Try the [live demo](https://demo.adminjs.co) as mentioned above

## Our open source community on Slack

- [Join the community](https://adminjs.page.link/slack) to get help and be inspired.

# What kind of problems it solves

So you have a working service built in Node.js. It uses (for example) [Hapi.js](https://hapijs.com/) for rendering a couple of REST routes and [mongoose](https://mongoosejs.com/) as the _connector_ to the database.

Everything works fine, but now you would like to:
* view all the data in the app,
* perform custom _business_ actions on objects in the database,
* bootstrap the tables with the _initial_ data,
* build custom report pages,
* allow other team members (not necessary programmers) to see what is going on in the application.

And all these cases can be solved by AdminJS. By adding couple of lines of code you have a running admin interface.

# Features

* CRUD any data in any resource
* Custom actions
* Form validation based on schema in your resources
* Full featured dashboard with widgets
* Custom resource decorators

## Contribute

If you would like work on an AdminJS and develop new features please check out our [Contribution Guide](https://github.com/SoftwareBrothers/adminjs/blob/master/CONTRIBUTING.md)

There you can find instructions on how to run AdminJS locally for development.

## License

AdminJS is copyrighted © 2023 rst.software. It is a free software, and may be redistributed under the terms specified in the [LICENSE](LICENSE.md) file.

## About rst.software

<img src="https://pbs.twimg.com/profile_images/1367119173604810752/dKVlj1YY_400x400.jpg" width=150>

We’re an open, friendly team that helps clients from all over the world to transform their businesses and create astonishing products.

* We are available for [hire](https://www.rst.software/estimate-your-project).
* If you want to work for us - check out the [career page](https://www.rst.software/join-us).
npm package: @storozhok/vue3-qr-reader
Description: Vue 3 QR reader.
Author: hj
Latest version: 1.0.6

# vue3-qr-reader
Vue 3 qr reader.

### Credit to: [vue-qrcode-reader](https://github.com/gruhn/vue-qrcode-reader)
refactor for vue 3.

### Demo
[Demo](https://hj29.github.io/vue3-qr-reader/)

[Demo Code](https://github.com/HJ29/vue3-qr-reader/tree/master/example/src/)

### Install
```bash
yarn add vue3-qr-reader
npm i --save vue3-qr-reader
```

### Register Global Component
```js
import { createApp } from 'vue';
import App from './App.vue'
import QrReader from 'vue3-qr-reader';

const app = createApp(App);
app.use(QrReader);
app.mount('#app')
```

### Register Local Component
```js
import { QrStream, QrCapture, QrDropzone } from 'vue3-qr-reader';

export default {
  components: {
    QrStream,
    QrCapture,
    QrDropzone
  },
};
```

## Project setup
```
yarn
```

### Compiles and hot-reloads for development
```
yarn serve
```

### Compiles and minifies for production
```
yarn build
```

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).
npm package: @storxnetwork/storx-mcp-gateway
Description: MCP server for Storx decentralized storage
Author: Storx
Latest version: 0.1.2

StorX MCP Server
A Model Context Protocol (MCP) server that enables AI models to interact with StorX S3-compatible storage. This server provides a set of tools for managing your StorX storage buckets and objects through AI models like Claude and local LLMs.

What is MCP?
The Model Context Protocol (MCP) is an open protocol that standardizes how applications provide context to Large Language Models (LLMs). Think of MCP like a USB-C port for AI applications - it provides a standardized way to connect AI models to different data sources and tools.

Features
1. List and manage buckets
2. Upload, download, and manage objects
3. Generate signed URLs for secure access
4. Support for Claude.
5. Simple configuration through JSON

Prerequisites
    Node.js 16+
    Access to an StorX account with:
        Access Key ID
        Secret Access Key
        Endpoint URL

Steps to Install and Run the code 
1. Clone the repository using the git clone method.
2. Open the file in the VSCode/any code Editor.
3. Create a package.json file and add this data into the package.json
{
    "name": "storx-mcp-server",
    "version": "0.1.0",
    "description": "MCP server for Storx decentralized storage",
    "type": "module",
    "main": "index.js",
    "bin": {
        "storx-mcp-server": "./index.js"
    },
    "scripts": {
        "start": "node index.js",
        "dev": "node --inspect index.js"
    },
    "dependencies": {
        "@aws-sdk/client-s3": "^3.654.0",
        "@modelcontextprotocol/sdk": "^0.4.0",
        "dotenv": "^16.5.0"
    },
    "keywords": [
        "mcp",
        "storx",
        "storage",
        "decentralized"
    ],
    "author": "Storx",
    "license": "MIT"
}

4. Now open the terminal and run the command below to install packages and node modules.
    npm install

Usage with Claude Desktop
1. Download and install Claude for Desktop (macOS or Windows)
2. Open Claude Desktop Settings:

    Click on the Claude menu
    Select "Settings..."
    Click on "Developer" in the left-hand bar
    Click on "Edit Config"
3. This will create/update the configuration file at:

        macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
        Windows: %APPDATA%\Claude\claude_desktop_config.json
4. Add the StorX MCP server configuration to the file:
{
  "mcpServers": {
    "storx": {
      "command": "node",
      "args": ["path\to\index.js"],
      "env": {
        "STORX_ACCESS_KEY": "Your_access_Key",
        "STORX_SECRET_KEY": "Your_secret_key"
      }
    }
  }
}
5. Restart Claude Desktop
6. You should see a slider icon in the bottom left corner of the input box. Click it to see the available StorX tools.

Now you will be able to :
1. list_buckets
2. list_objects
3. upload_objects
4. download_object
5. delete_object
6. create_bucket
npm package: @story-health/fhir-r4
Description: TypeScript types for the FHIR R4 specification
Latest version: 1.0.1

# TypeScript Type Definitions for FHIR R4

This package contains TypeScript types for [FHIR R4](http://hl7.org/fhir/index.html).

All definitions have been forked from [Ahryman40k/typescript-fhir-types](https://github.com/Ahryman40k/typescript-fhir-types).

RTTI based runtime checks have been removed from the original library to reduce frontend bundle sizes. If you need runtime validation, please consider using the [original library](https://github.com/Ahryman40k/typescript-fhir-types).

## Installation

```
npm i --save @story-health/fhir-r4
```

or

```
yarn install @story-health/fhir-r4
```
npm package: @story-protocol-tools/ip-cli
Description: CLI tool to register IP on Story using the TypeScript SDK
Author: Atomizer
Latest version: 1.0.3

# IP Registry - Story CLI

A minimal CLI to register your intellectual property (IP) on [Story Protocol](https://www.story.foundation/).

## Installation

**Install:** Install the cli:
```bash
npm install ip-story-cli
```

Usage
```bash
npx ip-story-cli --help
```

**Initialize Config**
Prompts for private key, Pinata JWT, and RPC URL:

```bash
npx ip-story-cli init
```

***Create SPG Collection***
Deploy a new SPG NFT collection:

```bash
npx ip-story-cli create-collection
```

**Register IP**
Mint an NFT and register your IP in one step:

```bash
npx ip-story-cli register-ip
```

### License
MIT License
npm package: @story-protocol/react-sdk
Description: The Story Protocol React SDK
Latest version: 1.1.0-stable

# Story Protocol React SDK

The react-sdk is a library that provides a set of hooks to interact with the SDK. It is designed to be used in a React application.

## How to use Story Protocol SDK in Your Project

### Generate React SDK

1. Install the dependencies

```bash
pnpm install
```

2. Update the `@story-protocol/core-sdk` package version in the `packages/react-sdk/package.json` file to the latest version.

Important: Once publish core-sdk, you need to update the core-sdk version in the react-sdk package.json file.

3. Generate the SDK

```bash
pnpm run generate
```

This SDK is generated using the command `pnpm run generate`. The source code resides in the `packages/sdk` directory and the generated SDK can be found in the `packages/react-sdk` folder.

### How to use Story Protocol React SDK in Your Project

- Install Story Protocol React SDK

```bash
pnpm install @story-protocol/react-sdk
```

- Import the provider in your React application

```typescript
import { StoryProvider } from "@story-protocol/react-sdk";
const client = StoryClient.newClient(config);
 <StoryProvider
  config={{
    chainId: "sepolia",
    transport: http("RPC_URL"),
    wallet: walletClient,
  }}
  </StoryProvider>
```

- Use the hooks in your component

```typescript
import { useIpAsset } from "@story-protocol/react-sdk";
const { data, error, loading, register } = useIpAsset();
register({ nftContract: "0x1234", tokenId: "1" });
```

### How To Build and Test Story Protocol React SDK for local testing

- Install yalc

```bash
npm install -g yalc
```

- For manual testing of the react-sdk, set up a separate web project. The guide below uses `yalc` to link the `react-sdk` locally, enabling its installation and import for testing.

Under the `typescript-sdk/packages/react-sdk` directory:

- Execute `npm run build` to build your latest code.
- Run `yalc publish`. You should see a message like `@story-protocol/react-sdk@<version> published in store.` (Note: The version number may vary).
- To set up your testing environment (e.g., a new Next.js project), use `yalc add @story-protocol/react-sdk@<version>` (ensure the version number is updated accordingly).

- Run `pnpm install`. This installs `@story-protocol/react-sdk@<version>` with your local changes.

### Steps to Refresh the Changes

Under the `typescript-sdk/packages/react-sdk` directory:

- Execute `npm run build` to build your latest code.
- Run `yalc push`.

In your testing environment:

- Run `yalc update` to pull the latest changes.
npm package: @story-telling-reporter/cms-core
Description: ### Installation
Latest version: 1.0.1

# [@mirrormedia/lilith-core](https://www.npmjs.com/package/@mirrormedia/lilith-core) &middot; ![npm version](https://img.shields.io/npm/v/@mirrormedia/lilith-core.svg?style=flat)

### Installation

`yarn install`

### Development

`@mirrormedia/lilith-core` 被 `@mirrormedia/lilith-(vision|mesh|editools)` 所依賴，因此，在開發 lilith-core 的程式碼時，
可以透過 lilith-(vision|mesh|editools) 來協助開發。

舉 lilith-editools 為例，
我們可以先起 lilith-editools server，接著修改 lilith-core 的程式碼，
修改到一個階段，想要測試，便在 `packages/core` 底下跑 `yarn build`，產生新的 transpiled 程式碼。
因為 lilith-editools 和 lilith-core 都在 monorepo 中，yarn workspaces 會為 lilith-core pkg 建立 soft link，
將 `node_modules/@mirrormedia/lilith-core` 指到 `packages/core`，所以 `yarn build` 產生的新的程式碼，
可以不需要透過 npm publish 和 yarn install 的方式，立即讓 lilith-editools 使用。
等到確定程式碼修改完畢後，我們再將最新的程式碼上傳(`npm publish`)到 npm registry 去，讓 lilith-editools 的 CI/CD 可以下載到最新的版本。

#### After v1.2.6

使用 `@mirrormedia/lilith-core` 的 richTextEditor 時，需要帶入 `website` 的參數以便 `@mirrormedia/lilith-core` 引用的對應網站的 draft-editor 版本，
在新增 keystone 的情況下，可以暫時填入既有的 `website` 值先快速建立，日後若有需求可以再另外新增 website 在 `@mirrormedia/lilith-core`, `@mirrormedia/lilith-draft-editor` 和 `@mirrormedia/lilith-renderer` 中。

### Build

`yarn build`

### Publish

`npm run publish`

在 publish 前，請根據 conventional commits 的規範，將 package.json#version 升版。

### Notable Details

#### For those files under `views/` folder, we transpile them specifically.

For those files under `views/` folder, we transpile them by babel according to different configuation.
The specific babel configuration is `.views.babelrc.js`.
In `.views.babelrc.js`, we tell babel not to transpile `import` and `export` es6 codes into commonJS codes.
The Keystone server won't start server well if those files under `views/` are transpiled into commonJS codes.
npm package: @story-telling-reporter/draft-editor
Description: ### Development
Latest version: 2.1.3

# [@story-telling-reporter/draft-editor](https://www.npmjs.com/package/@story-telling-reporter/draft-editor) &middot; ![npm version](https://img.shields.io/npm/v/@story-telling-reporter/draft-editor.svg?style=flat)

### Development

`yarn dev`

### Installation

`yarn install`

### Build

`yarn build`

### Publish

`npm run publish`

在 publish 前，請根據 conventional commits 的規範，將 package.json#version 升版。
npm package: @story-telling-reporter/react-dual-slides
Description: ## Demo <img src="https://user-images.githubusercontent.com/3000343/235827137-a1468a86-398b-4c5d-9f8c-cea30341afad.gif">
Latest version: 0.1.1

# [@story-telling-reporter/react-dual-slides](https://www.npmjs.com/package/@story-telling-reporter/react-dual-slides) &middot; ![npm version](https://img.shields.io/npm/v/@story-telling-reporter/react-dual-slides.svg?style=flat)

## Demo
<img src="https://user-images.githubusercontent.com/3000343/235827137-a1468a86-398b-4c5d-9f8c-cea30341afad.gif">

## Usage Example
```javascript
import DualSlides from '@story-telling-reporter/react-dual-slides'
import React from 'react'
import { createRoot } from 'react-dom/client'
const reactRootId = 'root'
const container = document.getElementById(reactRootId)
const root = createRoot(container)

const slides: [
    {
      content: [
        'In a dense forest lived a red fox named Rusty. He was cunning and always on the hunt for food. One day, while wandering through the woods, he came across a family of rabbits enjoying a delicious carrot feast. Rusty knew he had to find a way to get his paws on those carrots.',
      ],
      imgSrc: 'https://user-images.githubusercontent.com/3000343/235827862-d76f4e1d-3e32-4aab-9790-945738abcc4e.jpg',
    },
    {
      content: [
        'He hatched a plan to lure the rabbits away from their meal. Rusty pretended to be stuck in a trap, wailing for help. One of the rabbits took pity and approached him, but as soon as the rabbit got close enough, Rusty sprang up and snatched the carrot from his grasp. The rabbits were furious and vowed to never let Rusty get the best of them again.',
      ],
      imgSrc: 'https://user-images.githubusercontent.com/3000343/235827868-4ed5507e-8881-4b69-9cf0-40282d6b3898.jpg',
    },
    {
      content: ['But Rusty wasn\'t deterred. He came up with an even more devious plan to steal from the rabbits. He disguised himself as a friendly hedgehog and befriended the rabbits. He even helped them gather carrots and other food. However, one day, Rusty\'s true identity was revealed, and the rabbits chased him out of their territory. From that day on, Rusty learned that deceit would never bring true friendship and loyalty.'],
      imgSrc: 'https://user-images.githubusercontent.com/3000343/235827873-823da419-adb3-4a2c-b71a-f558b2b33f22.jpg',
    },
  ]

root.render(
  <DualSlides slides={mocks.slides} />
)
```

## Create Embed Code
See [@story-telling-reporter/react-embed-code-generator](https://github.com/nickhsine/story-telling-reporter/blob/main/packages/embed-code-generator/README.md) for more information.

## Installation
`yarn install`

## Development
```
$ yarn dev
// or
$ npm run dev
// or
$ make dev
```

## Build (React, ES6 above Transpiling)
```
$ npm run build
// or
$ make build
```

### NPM Publish
After executing `Build` scripts, we will have `/lib` folders,
and then we can execute publish command,
```
npm publish
```

Note: before publish npm package, we need to bump the package version first.
npm package: @story-telling-reporter/react-embed-code-generator
Description: ## Installation `yarn install`
Latest version: 2.2.16

# [@story-telling-reporter/react-embed-code-generator](https://www.npmjs.com/package/@story-telling-reporter/react-embed-code-generator) &middot; ![npm version](https://img.shields.io/npm/v/@story-telling-reporter/react-embed-code-generator.svg?style=flat)

## Installation
`yarn install`

## Development
```
$ yarn dev
// or
$ npm run dev
// or
$ make dev
```

## Build (Webpack Bundles and ES5 Transpiling)
```
$ npm run build
// or
$ make build
```

### Build Webpack Bundles 
```
$ make build-dist
```

### Transpile React, ES6 Codes to ES5 
```
$ make build-lib
```

### NPM Publish
After executing `Build` scripts, we will have `./dist` and `/lib` folders,
and then we can execute publish command,
```
npm publish
```

Note: before publish npm package, we need to bump the package version first. 

### Manually Build and Publish
Since we haven't adopt lerna or other monorepo management tools, we have to build and publish new codes by ourselves.

You can follow the following steps to create a new subpkg on the npmjs registry.

1. update `pacakge.json` `version` property (make sure you update version before build since build process will refer to pkg version)
2. `yarn build`: transpile codes and build webpack bundles
3. `npm publish`: publish built files onto npmjs registry

### Monorepo Settings
Due to manual building and publishing, we might encounter collaboration problems. 
You can see this [PR](https://github.com/readr-media/react/pull/138) for more information.

Since this subpkg is NOT under `workspaces` control,
please do not forget to commit `yarn.lock` if changed.
npm package: @story-telling-reporter/react-karaoke
Description: ## Installation `yarn install`
Latest version: 1.0.3

# [@story-telling-reporter/react-karaoke](https://www.npmjs.com/package/@story-telling-reporter/react-karaoke) &middot; ![npm version](https://img.shields.io/npm/v/@story-telling-reporter/react-karaoke.svg?style=flat)

## Installation
`yarn install`

## Development
```
$ yarn dev
// or
$ npm run dev
// or
$ make dev
```

## Build (Webpack Bundles and ES5 Transpiling)
```
$ npm run build
// or
$ make build
```

### Build Webpack Bundles 
```
$ make build-dist
```

### Transpile React, ES6 Codes to ES5 
```
$ make build-lib
```

### NPM Publish
After executing `Build` scripts, we will have `./dist` and `/lib` folders,
and then we can execute publish command,
```
npm publish
```

Note: before publish npm package, we need to bump the package version first. 


## TODOs
- [ ] 建立 CI pipeline，透過 CI 產生 npm package，並且上傳至 npm registry
- [ ] 透過 Lerna 控制 packages 之間的版號
- [ ] 加入 React lazy load，讓 webpack 可以動態載入 webpack chunks
npm package: @story-telling-reporter/react-scroll-to-audio
Description: ## Create Embed Code See [@story-telling-reporter/react-embed-code-generator](https://github.com/nickhsine/story-telling-reporter/blob/main/packages/embed-code-generator/README.md) for more information.
Latest version: 3.0.3

# [@story-telling-reporter/react-scroll-to-audio](https://www.npmjs.com/package/@story-telling-reporter/react-scroll-to-audio) &middot; ![npm version](https://img.shields.io/npm/v/@story-telling-reporter/react-scroll-to-audio.svg?style=flat)

## Create Embed Code
See [@story-telling-reporter/react-embed-code-generator](https://github.com/nickhsine/story-telling-reporter/blob/main/packages/embed-code-generator/README.md) for more information.

## Installation
`yarn install`

## Development
```
$ yarn dev
// or
$ npm run dev
// or
$ make dev
```

## Build (React, ES6 above Transpiling)
```
$ npm run build
// or
$ make build
```

### NPM Publish
After executing `Build` scripts, we will have `/lib` folders,
and then we can execute publish command,
```
npm publish
```

Note: before publish npm package, we need to bump the package version first.
npm package: @story-telling-reporter/react-scrollable-image
Description: ## Create Embed Code See [@story-telling-reporter/react-embed-code-generator](https://github.com/nickhsine/story-telling-reporter/blob/main/packages/embed-code-generator/README.md) for more information.
Latest version: 0.3.4

# [@story-telling-reporter/react-scrollable-image](https://www.npmjs.com/package/@story-telling-reporter/react-scrollable-image) &middot; ![npm version](https://img.shields.io/npm/v/@story-telling-reporter/react-scrollable-image.svg?style=flat)

## Create Embed Code
See [@story-telling-reporter/react-embed-code-generator](https://github.com/nickhsine/story-telling-reporter/blob/main/packages/embed-code-generator/README.md) for more information.

## Installation
`yarn install`

## Development
```
$ yarn dev
// or
$ npm run dev
// or
$ make dev
```

## Build (React, ES6 above Transpiling)
```
$ npm run build
// or
$ make build
```

### NPM Publish
After executing `Build` scripts, we will have `/lib` folders,
and then we can execute publish command,
```
npm publish
```

Note: before publish npm package, we need to bump the package version first.
npm package: @story-telling-reporter/react-scrollable-video
Description: ## Demo <img src="https://user-images.githubusercontent.com/3000343/235827137-a1468a86-398b-4c5d-9f8c-cea30341afad.gif">
Latest version: 3.0.2

# [@story-telling-reporter/react-scrollable-video](https://www.npmjs.com/package/@story-telling-reporter/react-scrollable-video) &middot; ![npm version](https://img.shields.io/npm/v/@story-telling-reporter/react-scrollable-video.svg?style=flat)

## Demo
<img src="https://user-images.githubusercontent.com/3000343/235827137-a1468a86-398b-4c5d-9f8c-cea30341afad.gif">

## Create Embed Code
See [@story-telling-reporter/react-embed-code-generator](https://github.com/nickhsine/story-telling-reporter/blob/main/packages/embed-code-generator/README.md) for more information.

## Installation
`yarn install`

## Development
```
$ yarn dev
// or
$ npm run dev
// or
$ make dev
```

## Build (React, ES6 above Transpiling)
```
$ npm run build
// or
$ make build
```

### NPM Publish
After executing `Build` scripts, we will have `/lib` folders,
and then we can execute publish command,
```
npm publish
```

Note: before publish npm package, we need to bump the package version first.
npm package: @story-telling-reporter/react-subtitled-audio
Description: ## Installation `yarn install`
Latest version: 1.1.4

# [@story-telling-reporter/react-subtitled-audio](https://www.npmjs.com/package/@story-telling-reporter/react-subtitled-audio) &middot; ![npm version](https://img.shields.io/npm/v/@story-telling-reporter/react-subtitled-audio.svg?style=flat)

## Installation
`yarn install`

## Development
```
$ yarn dev
// or
$ npm run dev
// or
$ make dev
```

## Build (Webpack Bundles and ES5 Transpiling)
```
$ npm run build
// or
$ make build
```

### Build Webpack Bundles 
```
$ make build-dist
```

### Transpile React, ES6 Codes to ES5 
```
$ make build-lib
```

### NPM Publish
After executing `Build` scripts, we will have `./dist` and `/lib` folders,
and then we can execute publish command,
```
npm publish
```

Note: before publish npm package, we need to bump the package version first. 


## TODOs
- [ ] 建立 CI pipeline，透過 CI 產生 npm package，並且上傳至 npm registry
- [ ] 透過 Lerna 控制 packages 之間的版號
- [ ] 加入 React lazy load，讓 webpack 可以動態載入 webpack chunks
npm package: @story-telling-reporter/react-three-hong-kong-project
Description: ## Demo <img src="https://user-images.githubusercontent.com/3000343/235827137-a1468a86-398b-4c5d-9f8c-cea30341afad.gif">
Latest version: 1.0.0

# [@story-telling-reporter/react-scrollable-video](https://www.npmjs.com/package/@story-telling-reporter/react-scrollable-video) &middot; ![npm version](https://img.shields.io/npm/v/@story-telling-reporter/react-scrollable-video.svg?style=flat)

## Demo
<img src="https://user-images.githubusercontent.com/3000343/235827137-a1468a86-398b-4c5d-9f8c-cea30341afad.gif">

## Create Embed Code
See [@story-telling-reporter/react-embed-code-generator](https://github.com/nickhsine/story-telling-reporter/blob/main/packages/embed-code-generator/README.md) for more information.

## Installation
`yarn install`

## Development
```
$ yarn dev
// or
$ npm run dev
// or
$ make dev
```

## Build (React, ES6 above Transpiling)
```
$ npm run build
// or
$ make build
```

### NPM Publish
After executing `Build` scripts, we will have `/lib` folders,
and then we can execute publish command,
```
npm publish
```

Note: before publish npm package, we need to bump the package version first.
npm package: @story-telling-reporter/react-three-story-points
Description: ## Installation `yarn install`
Latest version: 0.1.1

# [@story-telling-reporter/react-three-story-points](https://www.npmjs.com/package/@story-telling-reporter/react-three-story-points) &middot; ![npm version](https://img.shields.io/npm/v/@story-telling-reporter/react-three-story-points.svg?style=flat)

## Installation
`yarn install`

## Development
```
$ yarn dev
// or
$ npm run dev
// or
$ make dev
```

## Build (React, ES6 above Transpiling)
```
$ npm run build
// or
$ make build
```

### NPM Publish
After executing `Build` scripts, we will have `/lib` folders,
and then we can execute publish command,
```
npm publish
```

Note: before publish npm package, we need to bump the package version first.
npm package: @story-telling-reporter/react-ui-toolkit
Description: ## Installation `yarn install`
Latest version: 1.1.4

# [@story-telling-reporter/react-ui-toolkit](https://www.npmjs.com/package/@story-telling-reporter/react-ui-toolkit) &middot; ![npm version](https://img.shields.io/npm/v/@story-telling-reporter/react-ui-toolkit.svg?style=flat)

## Installation
`yarn install`

## Development
```
$ yarn dev
// or
$ npm run dev
// or
$ make dev
```

## Build (React, ES6 above Transpiling)
```
$ npm run build
// or
$ make build
```

### NPM Publish
After executing `Build` scripts, we will have `/lib` folders,
and then we can execute publish command,
```
npm publish
```

Note: before publish npm package, we need to bump the package version first.
npm package: @story75/pixel-forge
Description: This is the main package for Pixel Forge. It contains the core functionality to create 2D pixel art games.
Latest version: 0.4.0

# @story75/pixel-forge

This is the main package for Pixel Forge. It contains the core functionality to create 2D pixel art games.

This package contains the following:

- A TextureLoader to load textures from the network
- Math utilities for vectors and matrices
- A renderer based on WebGPU to render textures to a canvas
- A Sprite class to render textures

Please check the README.md in the root of the repository for general information.
If you want to go more in depth, check the TSDoc annotations in the source code.
npm package: @storyblok-components/simple-text-block
Description: Simple text block with markdown for Storyblok
Author: Marcin Krawczyk
Latest version: 0.3.0

## Requirements to use this component
- ...

## Install
```
npm install @storyblok-components/simple-text-block --save
```
or
```
yarn add @storyblok-components/simple-text-block
```

## Usage
You can immediately use installed components schema with `sb-mig` `sync --ext` functionality.

You just need to edit your `storyblok.config.js` and add `'node_modules/@storyblok-components'` which will tell `sb-mig` to look for schema files inside `@storyblok-components` folder.
```
module.exports = {
    ...
    componentsDirectories: ['src', 'storyblok', 'node_modules/@storyblok-components'],
    ...
};

```

then you can just run

```
sb-mig sync --ext simple-text-block
```

which will sync simple-text-block schema to your storyblok space.
You can also, import schema inside your other schema, and use only part of it:
```
const SimpleTextBlock = require("@storyblok-components/simple-text-block/simple-text-block.sb");
```

For React part of component
```
import SimpleTextBlock from '@storyblok-components/simple-text-block`
```


## FAQ
1) ?