open-index/open-npm huggingface dataset:
npm package: @oscaraag1493/network-test-hooks
Description: This is a small library that helps us calculate the speed in Mb/s from React.js using hooks.
Author: Oscar
Latest version: 1.5.0

# Network test hooks for React

This is a small library that helps us calculate the speed in Mb/s from React.js using hooks.

This project is beign built using https://tsdx.io/ 👌🚀
npm package: @oscarbarrett/babel-plugin-inline-react-svg
Description: A babel plugin that optimizes and inlines SVGs for your react components.
Author: Jordan Gensler
Latest version: 1.2.0-alpha.5

# babel-plugin-inline-react-svg

Transforms imports to SVG files into React Components, and optimizes the SVGs with [SVGO](https://github.com/svg/svgo/).

For example, the following code...

```jsx
import React from 'react';
import CloseSVG from './close.svg';

const MyComponent = () => <CloseSVG />;
```

will be transformed into...

```jsx
import React from 'react';
const CloseSVG = () => <svg>{/* ... */}</svg>;

const MyComponent = () => <CloseSVG />;
```

## Installation

```
npm install --save-dev babel-plugin-inline-react-svg
```

## Usage

### Via `.babelrc` (Recommended)

**.babelrc**

```json
{
  "plugins": [
    "inline-react-svg"
  ]
}
```

#### Options

- *`ignorePattern`* - A pattern that imports will be tested against to selectively ignore imports.
- *`caseSensitive`* - A boolean value that if true will require file paths to match with case-sensitivity. Useful to ensure consistent behavior if working on both a case-sensitive operating system like Linux and a case-insensitive one like OS X or Windows.
- *`svgo`* - svgo options (`false` to disable). Example:
```json
{
  "plugins": [
    [
      "inline-react-svg",
      {
        "svgo": {
          "plugins": [
            {
              "removeAttrs": { "attrs": "(data-name)" }
            },
            {
              "cleanupIDs": true
            }
          ]

        }
      }
    ]
  ]
}

```

### Via CLI

```sh
$ babel --plugins inline-react-svg script.js
```

### Via Node API


```javascript
require('@babel/core').transform('code', {
  plugins: [
    ['inline-react-svg', { filename: 'filename representing the code' }],
  ]
}) // => { code, map, ast };
```

---

Inspired by and code foundation provided by [react-svg-loader](https://github.com/boopathi/react-svg-loader).
npm package: @oscarbarrett/flow-to-ts
Description: [![Actions Status](https://github.com/Khan/flow-to-ts/workflows/Node%20CI/badge.svg)](https://github.com/Khan/flow-to-ts/actions) [![codecov](https://codecov.io/gh/Khan/flow-to-ts/branch/master/graph/badge.svg)](https://codecov.io/gh/Khan/flow-to-ts) [![n
Latest version: 0.1.7-alpha.1

# flow-to-ts

[![Actions Status](https://github.com/Khan/flow-to-ts/workflows/Node%20CI/badge.svg)](https://github.com/Khan/flow-to-ts/actions)
[![codecov](https://codecov.io/gh/Khan/flow-to-ts/branch/master/graph/badge.svg)](https://codecov.io/gh/Khan/flow-to-ts)
[![npm version](https://badge.fury.io/js/%40khanacademy%2Fflow-to-ts.svg)](https://badge.fury.io/js/%40khanacademy%2Fflow-to-ts)

Convert Flow code to TypeScript.

The goal of this project is to provide a tool that can translate 95% of Flow
to TypeScript while maintaining a high percentage of the existing type
information. We don't want to convert code and end up with everything using
`any`. We also want to avoid having to make a lot of manual changes to files
afterwards, e.g. changing `SyntheticEvent` to `React.Event`.

# Quick start

- `yarn global add @khanacademy/flow-to-ts`
- `flow-to-ts [options] <file globs>`

# Playground

https://flow-to-ts.netlify.com

# Principles

- when exact translation isn't possible:
  - downgrade to `any` when possible and provide a gentle warning
  - when it isn't possible to downgrade (e.g. `%checks`), remove the syntax
    and provide a forceful warning that the code in question will need a human
    to convert it manually.
- best effort to maintain blank lines and the position comments, this isn't
  always possible so warn in those situations where we can't, e.g. converting
  object type spreads to intersection types.

# Contibuting

## Bugs

Bug reports for converting Flow to TypeScript should include a link to the
playground with an example of a minimal reproducible example of the bug.

## Feature Requests

Feature requests are welcome.

## Pull Requests

Please make sure there is a GitHub issue first before creating a pull request
except for small things. Also, please sign our [Contributor License Agreement](https://docs.google.com/forms/d/e/1FAIpQLSdyXYrc8ogVoA46J9KXyIj5nKlZzNkOnQG-4A1R7X_BWGTShQ/viewform).

Pull requests that fix a bug in the conversion code should include one or more
test cases and should have 100% diff coverage.

## Dev quick start

```bash
git clone git@github.com:Khan/flow-to-ts.git
cd flow-to-ts
yarn
yarn test
```

## Helpful resources

- https://github.com/niieani/typescript-vs-flowtype
- https://astexplorer.net/
npm package: @oscarbarrett/open-iframe-resizer-core
Description: Open-source modern iframe resizer
Latest version: 0.0.0-alpha.1

# Open Iframe Resizer

![NPM Version](https://img.shields.io/npm/v/%40open-iframe-resizer%2Fcore)
![NPM License](https://img.shields.io/npm/l/%40open-iframe-resizer%2Fcore)
[![](https://data.jsdelivr.com/v1/package/npm/@open-iframe-resizer/core/badge)](https://www.jsdelivr.com/package/npm/@open-iframe-resizer/core)

## Overview

A modern, lightweight alternative for resizing iframes dynamically. It is shipped under the MIT license, making it usable in commercial projects.

If you found this plugin helpful, please consider starring the repository!

## Getting Started

### Browser (ES6 modules)

```html

<script type="module">
  import { initialize } from "https://cdn.jsdelivr.net/npm/@open-iframe-resizer/core@latest/dist/index.min.js";

  initialize({}, "#my-iframe");
</script>
```

You can found a working example [here](https://codesandbox.io/p/sandbox/open-iframe-resize-browser-m655zt)

### Package

Note you can also install the core package through [npm](https://www.npmjs.com/package/@open-iframe-resizer/core):

```bash
npm install @open-iframe-resizer/core
```

### React

A React component is also available:

```bash
npm install @open-iframe-resizer/react
```

## Notes

### Performing actions after a resize

You can execute a custom function after an iframe has been resized. Also, you can use built-in functions
like `updateParentScrollOnResize` to help keep the iframe within the viewport after resizing:

```javascript
import { initialize, updateParentScrollOnResize } from "https://cdn.jsdelivr.net/npm/@open-iframe-resizer/core@latest/dist/index.min.js";

initialize({ onIframeResize: updateParentScrollOnResize }, "#myIframe");
```

### Resize iframes from a different origin

- If you have control over the embedded page, you need to load the script on your child page to enable messaging between the two windows (you do not need to call the initialize function in the child;
  loading the module is sufficient).

  Here is an example of the [parent page](https://codesandbox.io/p/sandbox/xj24pg) and the [child](https://codesandbox.io/p/sandbox/growing-iframe-msv4hr).


- If you have no control over the child iframe domain, and, by chance, the child page loads the legacy *iframe-resizer* script, you can initialize the library with the compatibility mode; it will try
  to connect to the child iframe:
  ```javascript
  initialize({ enableLegacyLibSupport: true }, "#my-iframe");
  ```

### Comparison with iframe-resizer

This library is very good, but it has changed its license, so it is no longer usable in closed-source projects for free.
I decided to replicate some parts of the API, as it may facilitate migration to this project.

Some features from this library are missing, but they could be implemented in future versions.

## Browser support

| Chrome | Safari | Firefox | Opera | IE    |
|--------|--------|---------|-------|-------|
| 64+    | 13.1+  | 69+     | 51+   | 🙅‍♂️ |
npm package: @oscarcampos/11ty-simple-page-post-creator
Description: A simple cli to create posts or pages with 11ty
Author: Oscar Campos
Latest version: 1.1.0

# 11ty-simple-page-post-creator

A simple cli to create posts or pages with 11ty.

To install run `npm i @oscarcampos/11ty-simple-page-post-creator --save-dev`

The to run `11ty-simple-page-post-creator` and follow the prompts:

* What type of page would you like to create? Page/Blog
* Enter a Title for your Blog/Page: <enter title>

Pages use the templating engine `njk` and are created at the __root__

Blogs use the templating engine `md` and are created under __posts__ directory
npm package: @oscarnewman/inertia-core
Description: A framework for creating server-driven single page apps.
Latest version: 1.0.15

# Inertia.js

Inertia.js lets you quickly build modern single-page React, Vue and Svelte apps using classic server-side routing and controllers.

Visit [inertiajs.com](https://inertiajs.com/) to learn more.
npm package: @oscarnewman/tsup
Description: [![npm version](https://badgen.net/npm/v/tsup)](https://npm.im/tsup) [![npm downloads](https://badgen.net/npm/dm/tsup)](https://npm.im/tsup)
Author: EGOIST
Latest version: 1.0.0

# tsup

[![npm version](https://badgen.net/npm/v/tsup)](https://npm.im/tsup) [![npm downloads](https://badgen.net/npm/dm/tsup)](https://npm.im/tsup)

Bundle your TypeScript library with no config, powered by [esbuild](https://github.com/evanw/esbuild).

## 👀 What can it bundle?

Anything that's supported by Node.js natively, namely `.js`, `.json`, `.mjs`. And TypeScript `.ts`, `.tsx`. [CSS support is experimental](https://tsup.egoist.sh/#css-support).

## ⚙️ Install

Install it locally in your project folder:

```bash
npm i tsup -D
# Or Yarn
yarn add tsup --dev
```

You can also install it globally but it's not recommended.

## 📖 Usage

### Bundle files

```bash
tsup [...files]
```

Files are written into `./dist`.

You can bundle multiple files in one go:

```bash
tsup src/index.ts src/cli.ts
```

This will output `dist/index.js` and `dist/cli.js`.

## 📚 Documentation

For complete usages, please dive into the [docs](https://tsup.egoist.sh).

For all configuration options, please see [the API docs](https://paka.dev/npm/tsup#module-index-export-Options).

## 💬 Discussions

Head over to the [discussions](https://github.com/egoist/tsup/discussions) to share your ideas.

## Sponsors

[![sponsors](https://sponsors-images.egoist.sh/sponsors.svg)](https://github.com/sponsors/egoist)

## Project Stats

![Alt](https://repobeats.axiom.co/api/embed/4ef361ec8445b33c2dab451e1d23784015834c72.svg 'Repobeats analytics image')

## License

MIT &copy; [EGOIST](https://github.com/sponsors/egoist)
npm package: @oscarnewman/twist
Description: Unopinionated, helpful components built on Tailwind
Author: Oscar Newman
Latest version: 0.0.2

# twist

> Unopinionated, helpful components built on Tailwind

[![NPM](https://img.shields.io/npm/v/twist.svg)](https://www.npmjs.com/package/twist) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save twist
```

## Usage

```tsx
import React, { Component } from 'react'

import MyComponent from 'twist'
import 'twist/dist/index.css'

class Example extends Component {
  render() {
    return <MyComponent />
  }
}
```

## License

MIT © [oscarnewman](https://github.com/oscarnewman)
npm package: @oscarobot/randomstrmsg
Description: Random String Messages
Author: Oscar Ortiz
Latest version: 1.2.0

# randomStrMsg

Whenever I start a new project, I don't know what to write for the first commit. After doing a “git init” there is technically nothing there...

## Install

```npm
npm install -g randomStrMsg
```

# Usage

```Bash
randomStrMsg
```

# Contributing
If someone wants to add or improve something, I invite you to collaborate directly in this repository: [randomStrMsg](https://github.com/oskrobot/randomStrMsg)

___

# License
funny-commit is released under the [MIT License](https://opensource.org/license/mit).
npm package: @oscarotero/designtokens
Description: Node package to parse and manipulate design tokens following the [DTCG](https://www.designtokens.org/) format.
Author: Oscar Otero
Latest version: 0.1.0

# Design Tokens

Deno and Node library to parse, manipulate and transform tokens format as
[Design Tokens Community Group](https://www.designtokens.org/) specifications.

- [Current spec](https://design-tokens.github.io/community-group/format/)

## Usage

```js
import parse from "designtokens";
import json_tokens from "./my-json-with-tokens.json" assert { type: "json" };

const tokens = parse(json_tokens);

// Get a token
const mainColor = tokens.get("colors.main");
console.log(mainColor.value); // Get the value
mainColor.value = "#112233"; // Change the value

// Manipulate tokens
tokens.all.forEach((token) => {
  if (token.type === "color") {
    token.value = editColor(token.value);
  }
});

// Export to JSON or stringifyed JSON
const json = tokens.toJson();
const txt = tokens.toString();
```

### Alias

The spec has the concept of
[aliases](https://design-tokens.github.io/community-group/format/#aliases-references)
as a way to reuse the values. This library supports aliases automatically:

```json
{
  "group name": {
    "token name": {
      "$value": 1234,
      "$type": "number"
    }
  },
  "alias name": {
    "$value": "{group name.token name}"
  }
}
```

```js
const tokens = parse(json_tokens);

const alias = tokens.get("alias name");

alias.value; // resolved value: 1234
alias.$value; // RAW value: "{group name.token name}"

alias.type; // resolved type: number
alias.$type; // RAW type: undefined
```

## Import from Style Dictionary

You can import tokens from the
[Style Dictionary](https://amzn.github.io/style-dictionary/) format by setting
the input format in the second argument.

```js
import parse from "designtokens";
import style_dictionary_tokens from "./my-json-with-tokens.json" assert {
  type: "json",
};

const tokens = parse(style_dictionary_tokens, "style-dictionary");
```
npm package: @oscarpalmer/atoms
Description: Atomic utilities for making your JavaScript better.
Author: Oscar Palmér
Latest version: 0.176.0

# Atoms

[![npm](https://badge.fury.io/js/@oscarpalmer%2Fatoms.svg)](https://www.npmjs.com/package/@oscarpalmer/atoms) [![Tests](https://github.com/oscarpalmer/atoms/actions/workflows/test.yml/badge.svg)](https://github.com/oscarpalmer/atoms/actions/workflows/test.yml)

Atomic utilities for making your _JavaScript_ better.

## License

[MIT licensed](LICENSE), natch :wink:
npm package: @oscarpalmer/blixt
Description: ⚡️
Author: Oscar Palmér
Latest version: 0.33.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# ⚡️ Blixt

[![npm](https://badge.fury.io/js/@oscarpalmer%2Fblixt.svg)](https://www.npmjs.com/package/@oscarpalmer/blixt) [![Tests](https://github.com/oscarpalmer/blixt/actions/workflows/test.yml/badge.svg)](https://github.com/oscarpalmer/blixt/actions/workflows/test.yml)

Just a little thing, you know?

Inspired by [ArrowJS](https://github.com/justin-schroeder/arrow-js) and other similar, cool things, so please use them instead. :blush:

## License

[MIT licensed](LICENSE), natch :wink:
npm package: @oscarpalmer/jhunal
Description: Flies free beneath the glistening moons…
Author: Oscar Palmér
Latest version: 0.26.0

# Jhunal

[![npm](https://badge.fury.io/js/@oscarpalmer%2Fjhunal.svg)](https://www.npmjs.com/package/@oscarpalmer/jhunal) [![Tests](https://github.com/oscarpalmer/jhunal/actions/workflows/test.yml/badge.svg)](https://github.com/oscarpalmer/jhunal/actions/workflows/test.yml)

> Jhunal, sage God of Runes,  
> Flies free beneath the glistening moons.  
> A night owl who's so droll,  
> Soars with us, the wise Jhunal.

— [The Song of Gods](https://en.uesp.net/wiki/Lore:The_Song_of_Gods)

## License

[MIT licensed](LICENSE), natch :wink:
npm package: @oscarpalmer/mora
Description: Signals and stuff…
Author: Oscar Palmér
Latest version: 0.28.0

# Mora

[![npm](https://badge.fury.io/js/@oscarpalmer%2Fmora.svg)](https://www.npmjs.com/package/@oscarpalmer/mora) [![Tests](https://github.com/oscarpalmer/mora/actions/workflows/test.yml/badge.svg)](https://github.com/oscarpalmer/mora/actions/workflows/test.yml)

Signals and stuff…

## License

[MIT licensed](LICENSE), natch :wink:
npm package: @oscarpalmer/oui
Description: Styles, components, and utilities for building websites and applications.
Author: Oscar Palmér
Latest version: 0.20.0

# Oui

[![npm](https://badge.fury.io/js/@oscarpalmer%2Foui.svg)](https://www.npmjs.com/package/@oscarpalmer/oui)

_Oui_ _(Oscar UI)_ is a collection of styles, components, and related thingamjigs for designing websites and applications, which I often use to build prototypes and proof-of-concepts for myself and at work.

## License

[MIT licensed](LICENSE), natch :wink:
npm package: @oscarpalmer/seht
Description: A JavaScript library, like jQuery.
Author: Oscar Palmér
Latest version: 0.18.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# &#x1F916;&nbsp;&nbsp;Seht

[![npm version](https://badge.fury.io/js/seht.svg)](https://badge.fury.io/js/seht)

A JavaScript library, and a decent replacement – hopefully – for jQuery, et alia.

Until a `1.0` of Seht has been released, you should probably use [jQuery](//github.com/jquery/jquery). :v:

## The name

> In the smoky catacombs beneath the city where Sotha Sil forged the future with his arcane clockwork apparatus, something unforeseen happened&hellip; Nothing broke, but everything changed.
>
> &lsquo;It cannot be fixed now&rsquo;, said the sorcerer quietly.

&mdash; Carlovac Townway, Book Twelve of _[2920, The Last Year of the First Era](http://en.uesp.net/wiki/Lore:2920,_Evening_Star_%28v12%29)_ :books:

## License

[MIT Licensed](LICENSE). You're free to do whatever you'd like with Seht. Have fun!
npm package: @oscarpalmer/sentinel
Description: > Sed quis custodiet ipsos custodes?
Author: Oscar Palmér
Latest version: 0.24.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# Sentinel

> Sed quis custodiet ipsos custodes?

## License

[MIT licensed](LICENSE), natch :wink:
npm package: @oscarpalmer/sprout
Description: … sprouting like a cute little weird flower
Author: Oscar Palmér
Latest version: 0.16.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# Sprout

Something like [Blixt](//github.com/oscarpalmer/blixt), [Magnus](//github.com/oscarpalmer/magnus), and other cool things, all together, sprouting like a cute little weird flower. :seedling:

## License

[MIT licensed](LICENSE), natch :wink:
npm package: @oscarpalmer/toretto
Description: A collection of badass DOM utilities.
Author: Oscar Palmér
Latest version: 0.42.0

# Toretto

[![npm](https://badge.fury.io/js/@oscarpalmer%2Ftoretto.svg)](https://www.npmjs.com/package/@oscarpalmer/toretto)

A collection of badass DOM utitilies.

## License

[MIT licensed](LICENSE), natch :wink:
npm package: @oscarteg/gatsby-theme-showoff
Description: A gatsby theme to showoff portfolio
Latest version: 0.0.10

# Homepage

[![Netlify Status](https://api.netlify.com/api/v1/badges/8d9e8857-241b-4014-a933-d0bc5f5b0a39/deploy-status)](https://app.netlify.com/sites/oscartegiffel/deploys)

This is my own homepage created in **Gatsby**

## Develop

```
yarn install
yarn dev
```

## Production

```
yarn build
```

To serve the production build

```
yarn serve
```
npm package: @oscbco/lapse
Description: Get how long ago an inputted date was
Author: Oscar Barrera
Latest version: 0.0.7

# @oscbco/lapse
Returns how long ago a given date was

## Installation
  ```console
    npm install @oscbco/lapse
  ```

## Parameters
  - language: `en` for english or `es` for spanish. The messages for these two languages are hard coded for now
  - The fist date (expressed in milliseconds). This is expected to be in the past with respect to the second date or to the present. Otherwise `false` is returned.
  - An optional second date (expressed in milliseconds). If omitted the current date will be used.

## Examples
  ```js
  const pinnedDate = new Date("1/31/2020 16:59:00").getTime();

  getLapse('en', new Date("1/31/2020 16:58:30").getTime(), pinnedDate))
  // Less than a minute ago

  getLapse('en', new Date("1/31/2020 16:58:00").getTime(), pinnedDate))
  // 1 minute ago

  getLapse('en', new Date("1/31/2020 15:48:30").getTime(), pinnedDate))
  // 1 hour ago

  getLapse('en', new Date("1/30/2020 15:48:30").getTime(), pinnedDate))
  // 1 day ago


  getLapse('es', new Date("1/20/2020 15:48:30").getTime(), pinnedDate))
  // Hace 1.6 semanas

  getLapse('es', new Date("12/25/2019 15:48:30").getTime(), pinnedDate))
  // Hace 1.3 meses

  getLapse('es', new Date("12/25/2018 15:48:30").getTime(), pinnedDate))
  // Hace 1.1 años

  getLapse('es', new Date("1/31/2019 16:59:00").getTime(), pinnedDate))
  // Hace 1 año

  ```
## Tests
  ```console
    npm test
  ```
npm package: @oscbco/text-toggle
Description: Text toggle
Author: Oscar Barrera
Latest version: 0.0.5

# @oscbco/text-toggle

A react toggle

![Demo](https://oscbco.github.io/images/text-toggle-demo.gif)

## Props
- `style`: This is an object containing the styles to be applied to the control

- `leftItem`: This is represents the item on the left
  - `value`: This is an id, it will be passed to the onChange callback
  - `label`: JSX element to be rendered on this item (Can also include styling of its own or be a simple string)
  - `style`: This is an object containing the styles to be applied to this item

- `rightItem`: This prop is the same as the left one.

- `onChange`: This is an callback that will be called when the control changes its value

- `defaultItem`: This is string containing the value of the item selected by default

## Example

```JS
<TextToggle defaultItem='dark'
  leftItem={{
    value: 'dark',
    label: 'DARK'
  }}
  rightItem={{
    value: 'light',
    label: 'LIGHT'
  }}
  onChange={this.onChange}
/>
```

To run the examples:

      $ git clone https://github.com/oscbco/text-toggle.git
      $ cd select
      $ npm install
      $ npm start

  Visit [http://localhost:9002](http://localhost:9002) to see and edit the examples. The development server is set up to be available from everywhere, even your mobile phone in your LAN.
npm package: @oscli-dev/react
Description: React components for oscli demos and interactive CLI previews.
Author: Aidan McAlister
Latest version: 0.1.1

# @oscli-dev/react

React components for `oscli` demos and previews.

`@oscli-dev/react` lets you render an animated CLI walkthrough from the same
`createCLI()` instance you use in the terminal. It works well for docs sites,
landing pages, and onboarding flows.

## Install

Install the React package alongside the core CLI package.

```bash
npm install @oscli-dev/react @oscli-dev/oscli
```

You also need `react` 18 or newer.

## Quick start

Pass your CLI instance to `OscliDemo`, and give the parent container a fixed
height.

```tsx
import { OscliDemo } from "@oscli-dev/react";
import { cli } from "./cli";

export function Demo() {
  return (
    <div style={{ height: 320 }}>
      <OscliDemo cli={cli} />
    </div>
  );
}
```

## Common props

Use these props most often.

| Prop | What it does |
| --- | --- |
| `cli` | Uses the CLI instance returned by `createCLI()`. |
| `speed` | Applies the built-in `"slow"`, `"normal"`, or `"fast"` preset. |
| `timing` | Sets exact delays for typing and prompt transitions. |
| `forcedAnswers` | Pins some generated answers while keeping replay enabled. |
| `inputs` | Uses fixed inputs and disables auto-replay. |
| `theme` | Switches between `"dark"` and `"light"`. |
| `fade` | Turns replay fading on, off, or sets a custom duration. |
| `replayDelay` | Controls the pause before the next replay. |
| `className`, `style`, `onRunComplete` | Control presentation and lifecycle hooks. |

## Deterministic runs

Use `inputs` when you want the same sequence every time. Use
`forcedAnswers` when you want replay to continue, but keep some answers
stable.

```tsx
<OscliDemo
  cli={cli}
  inputs={{
    project: "my-app",
    framework: "next",
    approved: true,
  }}
/>
```

## Docs

Read these pages next.

- [OscliDemo docs](https://oscli.dev/docs/oscli-demo)
- [Getting started](https://oscli.dev/docs)
- [Testing](https://oscli.dev/docs/testing)
npm package: @oscloudlab/knowledge-card
Description: A beautiful and customizable knowledge card component for React
Author: huangjianzhong
Latest version: 0.0.89

# KnowledgeCard

一个功能丰富的知识卡片组件库，专为教育和学习场景设计，支持多种内容类型的展示和交互。

## 特性

### 📚 多类型知识内容支持
- **文本解释**：支持Markdown渲染、文本选择高亮、AI辅助解释
- **代码示例**：支持代码语法高亮、代码运行演示
- **视频教程**：集成阿里云播放器，支持视频播放控制
- **问题练习**：支持选择题、填空题、简答题、代码题等多种题型
- **动画演示**：支持SVG动画展示

### 🎯 交互式学习体验
- **文本选择交互**：划词高亮、划词问AI
- **代码运行**：内置终端模拟器，支持代码执行
- **问题回答**：实时验证答案正确性
- **AI辅助**：集成AI助手，提供智能解释和帮助

### 🛠️ 技术特性
- **TypeScript**：完整的类型定义
- **React 18+**：支持最新的React特性
- **Tailwind CSS**：现代化的样式解决方案
- **Ant Design**：集成企业级UI组件
- **模块化设计**：支持按需导入

## 安装

```bash
npm install @oscloudlab/knowledge-card

# 或
yarn add @oscloudlab/knowledge-card
```

## 使用方法

### 1. 基本用法

```tsx
import React from 'react'
import { KnowledgeCard } from '@oscloudlab/knowledge-card'

function App() {
  return (
    <KnowledgeCard
      knowledgeId="1"
      content="# React Hooks 入门\n\nReact Hooks 是 React 16.8 引入的新特性，它允许我们在函数组件中使用状态和其他 React 特性..."
      contentType="text"
      isEdit={false}
      textSelectionEnable={true}
    />
  )
}
```

### 2. 文本解释组件

```tsx
import React from 'react'
import { TextExplanation } from '@oscloudlab/knowledge-card'

function App() {
  return (
    <TextExplanation
      content="# JavaScript 闭包\n\n闭包是指有权访问另一个函数作用域中变量的函数..."
      knowledgeId="2"
      textSelectionEnable={true}
      editCallBack={(data) => console.log('编辑回调:', data)}
    />
  )
}
```

### 3. 代码示例组件

```tsx
import React from 'react'
import { CodePlayer } from '@oscloudlab/knowledge-card'

function App() {
  return (
    <CodePlayer
      code="function fibonacci(n) {\n  if (n <= 1) return n;\n  return fibonacci(n - 1) + fibonacci(n - 2);\n}\n\nconsole.log(fibonacci(10));"
      language="javascript"
      title="斐波那契数列"
    />
  )
}
```

## API

### KnowledgeCard 组件

| 属性 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| knowledgeId | string | - | 知识卡片唯一标识 |
| content | string | - | 卡片内容（支持Markdown） |
| contentType | string | 'text' | 内容类型：text, code, video, question |
| isEdit | boolean | false | 是否可编辑 |
| textSelectionEnable | boolean | false | 是否启用文本选择功能 |
| editCallBack | (data: { id: string, content: string, showTip: boolean }) => void | - | 编辑回调函数 |
| aiCreateContentCallback | (content: string) => void | - | AI优化生成的知识内容回调 |
| textAiConsultCallback | (text: string, question: string) => void | - | 文本AI咨询回调 |
| swapContentCallback | (content: string) => void | - | 替换原文回调 |
| insertContentCallback | (content: string) => void | - | 插入下方回调 |

### TextExplanation 组件

| 属性 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| content | string | - | 文本内容（支持Markdown） |
| knowledgeId | string | - | 知识ID |
| textSelectionEnable | boolean | false | 是否启用文本选择 |
| editCallBack | (data: { id: string, content: string, showTip: boolean }) => void | - | 编辑回调 |
| contentEditable | boolean | false | 内容是否可编辑 |

## 开发

```bash
# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建组件库
npm run build:lib

# 发布到npm
npm run publish
```

## 浏览器兼容性

- Chrome 60+
- Firefox 55+
- Safari 12+
- Edge 79+

## 许可证

MIT License
npm package: @oscloudlab/thinkup
Description: AI智能助手.
Author: yin
Latest version: 0.0.18

# ThinkUp使用文档

## 接入步骤
1. 安装依赖
   ```
   pip install @oscollege/thinkup@0.0.5
   ```
   [查看最新版本](https://www.npmjs.com/package/@oscollege/thinkup?activeTab=versions)
2. 在App或其他组件里引入
   ```
   import TU from '@oscollege/thinkup'
   ```
3. 使用
   ```
   const initButtons = [{label: '问题解析', value: 'query:只提供解题思路, 不要给出任何具体代码'},{label: '参考答案', value: 'query: 请给出代码答案, 只要纯代码, 不要其他文字, 不要测试代码, 不要main函数'}];
   const welcomeMessage = "### 欢迎使用编码AI助手!";

   useEffect(() => {
     // 调用初始化(只需执行一次)
     TU.init({baseUrl:process.env.REACT_APP_THINKUP_URL,initButtons, welcomeMessage, agent:'app-CVOhZBE2kdNzsAS6IUOSK6sY'});
   }, []);
   ```
   参数说明:
   - baseUrl 为ThinkUp服务地址
   - initButtons为初始化按钮
   - welcomeMessage为欢迎语
   - agent为agent的token
   
## 方法说明
1. init 调用初始化, 只需执行一次
2. open 打开对话框
    ```
   TU.open();
   ```
3. setInputs 设置agent入参, 改方法只会设置或覆盖参数提供的属性, 不影响其他已有属性
    ```
   TU.setInputs({code,...props,"msg": "hello"});
   ```
4. setConfig 修改配置信息, 与init方法的入参相同
5. startConversation 开始对话  
   ```
    TU.startConversation({code,...props,"msg": "hello"},"你好", 'app-CVOhZBE2kdNzsAS6IUOSK6sY');
   ```
   参数说明:
   - inputs 为agent入参
   - userMessage 在用户侧显示聊天消息 (可为空, 为空时用户侧不会显示聊天消息)
   - agent 为agent的token (可为空, 为空时使用初始化时的agent)
6. disableInput 禁用输入框
7. enableInput 启用输入框
npm package: @oscm/node-red-contrib-oscm-socketio
Description: Node Red client to work with OSCM server
Author: adapted from Rajat Jain
Latest version: 0.1.2

# node-red-contrib-oscm-socketio

node-red OSCM Socket.IO client node that allows connection with OSCM server.

## Nodes

- OSCM Socket.IO

## How to use

1. Drag and drop onto canvas OSCM Socket.IO node
2. Optionally set node's name
npm package: @oscollege/thinkup
Description: AI智能助手.
Author: yin
Latest version: 0.0.20

# ThinkUp使用文档

## 接入步骤
1. 安装依赖
   ```
   pip install @oscollege/thinkup@0.0.5
   ```
   [查看最新版本](https://www.npmjs.com/package/@oscollege/thinkup?activeTab=versions)
2. 在App或其他组件里引入
   ```
   import TU from '@oscollege/thinkup'
   ```
3. 使用
   ```
   const initButtons = [{label: '问题解析', value: 'query:只提供解题思路, 不要给出任何具体代码'},{label: '参考答案', value: 'query: 请给出代码答案, 只要纯代码, 不要其他文字, 不要测试代码, 不要main函数'}];
   const welcomeMessage = "### 欢迎使用编码AI助手!";

   useEffect(() => {
     // 调用初始化(只需执行一次)
     TU.init({baseUrl:process.env.REACT_APP_THINKUP_URL,initButtons, welcomeMessage, agent:'app-CVOhZBE2kdNzsAS6IUOSK6sY'});
   }, []);
   ```
   参数说明:
   - baseUrl 为ThinkUp服务地址
   - initButtons为初始化按钮
   - welcomeMessage为欢迎语
   - agent为agent的token
   
## 方法说明
1. init 调用初始化, 只需执行一次
2. open 打开对话框
    ```
   TU.open();
   ```
3. setInputs 设置agent入参, 改方法只会设置或覆盖参数提供的属性, 不影响其他已有属性
    ```
   TU.setInputs({code,...props,"msg": "hello"});
   ```
4. setConfig 修改配置信息, 与init方法的入参相同
5. startConversation 开始对话  
   ```
    TU.startConversation({code,...props,"msg": "hello"},"你好", 'app-CVOhZBE2kdNzsAS6IUOSK6sY');
   ```
   参数说明:
   - inputs 为agent入参
   - userMessage 在用户侧显示聊天消息 (可为空, 为空时用户侧不会显示聊天消息)
   - agent 为agent的token (可为空, 为空时使用初始化时的agent)
6. disableInput 禁用输入框
7. enableInput 启用输入框
npm package: @osdevisnot/prettier
Description: Sensible Code Formatting Setup in **One Command**
Author: osdevisnot
Latest version: 6.0.0

# @osdevisnot/prettier

Sensible Code Formatting Setup in **One Command**

```bash
$ yarn add --dev @osdevisnot/prettier
```

or

```bash
npm install --save-dev @osdevisnot/prettier
```

## What

Setup `prettier`, `husky` and `pretty-quick` just by installing `@osdevisnot/prettier`

Uses `postinstall` scripts to automatically configure the project.

## How

- This package brings in `prettier`, `husky`, `pretty-quick` and `prettier-plugin-packagejson` as dependencies.
- These dependencies are marked with `*` so that you always get latest versions for these dependencies.
- When installed, we use a `postinstall` script to configure project with sensible defaults:

- [x] sets `prettier` property in `package.json` to `@osdevisnot/prettier` if not already defined
- [x] removes `.prettierrc` and `prettier.config.js` if these files exist
- [x] sets `husky` property in `package.json` to use `pretty-quick` on `pre-commit` (if not already defined) :

```json
{ "husky": { "hooks": { "pre-commit": "pretty-quick --staged" } } }
```
npm package: @osdevisnot/prettier-config
Description: My personal Prettier config
Author: osdevisnot
Latest version: 0.0.4
Deprecated: moved to @osdevisnot/prettier

# `@osdevisnot/prettier-config`

> My personal [Prettier](https://prettier.io) config.

## Usage

**Install**:

```bash
$ yarn add --dev @osdevisnot/prettier-config
```

**Edit `package.json`**:

```jsonc
{
  // ...
  "prettier": "@osdevisnot/prettier-config"
}
```
npm package: @osdiab/io-ts
Description: TypeScript runtime type system for IO decoding/encoding
Author: Giulio Canti
Latest version: 2.3.1

[![build status](https://img.shields.io/travis/gcanti/io-ts/master.svg?style=flat-square)](https://travis-ci.org/gcanti/io-ts)
[![dependency status](https://img.shields.io/david/gcanti/io-ts.svg?style=flat-square)](https://david-dm.org/gcanti/io-ts)
![npm downloads](https://img.shields.io/npm/dm/io-ts.svg)

<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->

- [Installation](#installation)
- [Usage](#usage)
  - [Stable features](#stable-features)
  - [Experimental features (version `2.2+`)](#experimental-features-version-22)

<!-- END doctoc generated TOC please keep comment here to allow auto update -->

# Installation

To install the stable version

```sh
npm i io-ts fp-ts
```

**Note**. [`fp-ts`](https://github.com/gcanti/fp-ts) is a peer dependency for `io-ts`

# Usage

## Stable features

- [`index.ts` module](index.md)

## Experimental features (version `2.2+`)

Experimental features (\*) are published in order to get early feedback from the community, see these tracking [issues](https://github.com/gcanti/io-ts/issues?q=label%3Av2.2+) for further discussions and enhancements.

- [`Decoder.ts` module](Decoder.md)
- [`Encoder.ts` module](Encoder.md)
- [`Codec.ts` module](Codec.md)
- [`Eq.ts` module](Eq.md)
- [`Schema.ts` module (advanced feature)](Schema.md)

(\*) A feature tagged as _Experimental_ is in a high state of flux, you're at risk of it changing without notice.
npm package: @osdiab/io-ts-reporters
Description: Formatting of io-ts validation errors
Latest version: 1.3.2

# io-ts-reporters

[Error reporters](https://github.com/gcanti/io-ts#error-reporters) for
[io-ts](https://github.com/gcanti/io-ts).

Currently this package only includes one reporter. The output is an array of
strings in the format of:

```
Expecting ${expectedType} at ${path} but instead got: ${expectedType}
```

And for union types:

```
Expecting one of:
    ${unionType1}
    ${unionType2}
    ${...}
    ${unionTypeN}
at ${path} but instead got: ${actualValue}
```

## Installation

```bash
yarn add io-ts-reporters
```

## Example

```ts
import * as t from 'io-ts';
import reporter from 'io-ts-reporters';

const User = t.interface({ name: t.string });

// When decoding fails, the errors are reported
reporter.report(User.decode({ nam: 'Jane' }));
//=> ['Expecting string at name but instead got: undefined']

// Nothing gets reported on success
reporter.report(User.decode({ name: 'Jane' }));
//=> []
```

To only format the validation errors in case the validation failed (ie.
`mapLeft`) use `formatValidationErrors` instead.

```ts
import * as t from 'io-ts';
import { formatValidationErrors } from 'io-ts-reporters';
import * as E from 'fp-ts/Either';
import { pipe } from 'fp-ts/pipeable';

const User = t.interface({ name: t.string });

const result = User.decode({ nam: 'Jane' }); // Either<t.Errors, User>

E.mapLeft(formatValidationErrors)(result); // Either<string[], User>
```

For more examples see [the tests](./tests/index.test.ts).

## TypeScript compatibility

| io-ts-reporters version | required typescript version |
| ----------------------- | --------------------------- |
| 1.0.0                   | 3.5+                        |
| <= 0.0.21               | 2.7+                        |

## Testing

```bash
yarn
yarn run test
```

[io-ts]: https://github.com/gcanti/io-ts#error-reporters

## Credits

This library was created by [OliverJAsh](https://github.com/OliverJAsh).
npm package: @osdiab/io-ts-types
Description: A collection of codecs and combinators for use with io-ts
Author: Giulio Canti
Latest version: 0.6.2

A collection of runtime types and combinators for use with [io-ts](https://github.com/gcanti/io-ts)

# Installation

To install the stable version:

```sh
npm i io-ts-types
```

**Note**. `io-ts-types` depends on

- [`fp-ts`](https://github.com/gcanti/fp-ts)
- [`io-ts`](https://github.com/gcanti/io-ts)
- [`monocle-ts`](https://github.com/gcanti/monocle-ts)

starting from `0.5.0` you must install `fp-ts`, `io-ts` and `monocle-ts` manually (`fp-ts`, `io-ts` and `monocle-ts` are listed in `peerDependency`)

# Usage

Import specific codecs and combinators directly from the `lib` folder, as in:

```ts
import { NonEmptyString } from "io-ts-types/lib/NonEmptyString"
```

In this way, you'll only need to add the `monocle-ts` dependency if you import any of the combinators depending on it, like `getLenses`

# TypeScript compatibility

The stable version is tested against TypeScript 3.2.2, but should run with TypeScript 3.0.1+ too

**Note**. If you are running `< typescript@3.0.1` you have to polyfill `unknown`.

You can use [unknown-ts](https://github.com/gcanti/unknown-ts) as a polyfill.

# Documentation

- [API Reference](https://gcanti.github.io/io-ts-types)