open-index/open-npm huggingface dataset:
npm package: @micabe/components
Description: A set of React widgets & components
Author: Mickael Abensur
Latest version: 0.2.2

<!-- # Installation
```bash
yarn add @micabe/components --ignore-scripts
or
npm install @micabe/components --ignore-scripts
``` -->

# Running the Storybook
```bash
yarn install --ignore-scripts
yarn start
```

### Get the modules!
```javascript
import {
  ActionBar, // with styles
  AsyncButton, // with styles
  Dropdown,  // with styles
  DualSlider,  // with styles
  Notification,  // with styles
  OffCanvas,
  CssSpinner, // with styles
  CanvasSpinner,
  ZoomedImage,
} from '@micabe/components'
```

### Load basic styles in sass!
```scss
@import '~@micabe/components/lib/styles/AsyncButton';
```

### Override scss variables
```scss
$brand-primary:           #f442bf;
$brand-success:           #46c976;
$brand-info:              #4286f4;
$lighter-grey:            #ddd;
$light-grey:              #aaa;
$grey:                    #999;
$dark-grey:               #666;
$darker-grey:             #333;
$async-btn-color:         #862fa3;
$action-bar-spacing:      40px;
```
npm package: @micabe/react-native-share-instagram
Description: Share base64 image on Instagram app (ios and android)
Author: Mickael Abensur
Latest version: 1.1.0

# react-native-share-instagram
Share your image with the Instagram app using `Intents` (iOS & Android)

## Getting started

`$ yarn add @micabe/react-native-share-instagram`

## Automatic installation

`$ react-native link @micabe/react-native-share-instagram`


## Usage
```javascript
import RNReactNativeSharingWinstagram from 'react-native-sharing-winstagram';

RNReactNativeSharingWinstagram.shareWithInstagram(this.state.fileName, this.state.base64EncodedImageString, message => {
  if (message) alert(message)
}, error => {
  alert(error.message) // error callback for IOs only
})
```

### Troubleshouting

* Make sure you have authorised in `Info.plist` your app to communicate with the Instagram app (iOS):

```xml
<key>LSApplicationQueriesSchemes</key>
<array>
  <string>instagram</string>
</array>

<key>NSPhotoLibraryUsageDescription</key>
<string>This app requires access to the photo library to share on Instagram.</string>
```

### Advanced usage

* You can use the [react-native-fetch-blob](https://github.com/wkh237/react-native-fetch-blob) library to download your remote image and convert it to `.base64()`

### Contribution

* Test library to work with windows OS
npm package: @micah2015/canvas-roi
Description: 组件主要用于在图片或视频提供绘制选区并将选区数据输出。
Author: Micah2015
Latest version: 2.4.3

# CanvasRoi

组件主要用于在图片或视频提供绘制选区并将选区数据输出。

> 2.0版本支持vue3

> 2.1版本支持react

> 从2.1版本开始，默认导出不再是vue组件，而是CanvasRoi类。vue组合和react组件分别放在对应的独立文件中。避免相互干扰

### 如何安装

NPM:

```shell
npm install @micah2015/canvas-roi --save
```

CDN:

```html
<script src="[npm url]/[pkg@version]/index.js"></script>
```

### 用法示例


```html
<div class="roi-container">
  <img src="pic.jpg" alt="">
</div>
```

```js
import { CanvasRoi } from '@micah2015/canvas-roi';

const roi = new CanvasRoi('.roi-container', {
  // input回调函数可从组件内接收数据的变化
  input: value => {}
});
// 也可以外部设置组件的数据
roi.setValue(value)
```

详细说明可查看仓库内文档
[Document](https://github.com/Micah2015/canvas-roi/blob/master/Document.md)

## License

[MIT](https://opensource.org/licenses/MIT)



[⬆ back to top](#内容目录)
npm package: @micahbrich/react-variable-fonts
Description: React hook for loading and manipulating variable fonts
Author: Vince Picone
Latest version: 1.3.2

<div align="center">
  <h1>
    react-variable-fonts
    <br/>
    <br/>
    🖋️
    <br/>
    <br/>
  </h1>
  <br/>
  <sup>
    A <a href="https://reactjs.org/docs/hooks-intro.html">React Hook</a> for loading and manipulating <a href="https://v-fonts.com/">variable fonts.</a></em>
    <br/>
    You need React <code>^16.7.0-alpha.0</code> to use Hooks.
      <br/>
  <a href="https://wakamaifondue.com/">What can my font do?</a>
  </sup>
</div>

## Setup
#### Install the package
[![npm version](https://badge.fury.io/js/react-variable-fonts.svg)](https://badge.fury.io/js/react-variable-fonts)

<pre>npm i <a href="https://www.npmjs.com/package/react-variable-fonts">react-variable-fonts</a></pre>

#### Define your font-face somewhere in your stylesheet
```css
@font-face {
    font-family: "Rocher";
    src: url("./Rocher.woff2") format("woff2");
    font-display: block;
    font-weight: normal;
}
```


## Usage
#### Pass in a font-family string and some initial settings (or `normal`).

```javascript
const settings = {
  // axis: value,
  SHDW: 40,
  BVEL: 100
}

const [styles] = useVariableFont("Rocher", settings);
```

#### The first index will be CSS property object.
```javascript
const [normalStyles] = useVariableFont("Rocher", "normal");

return <p style={{...normalStyles}}>Hello world</p>
```

#### The second index will be function to update the settings
```javascript
const [styles, updateStyles] = useVariableFont("Rocher", "normal");

updateStyles({SHDW: 100});
```
* Same rules as initial settings
* New settings override previous settings
* passing `normal` resets the variation settings


## Example
```javascript
import React from "react";
import useVariableFont from "react-variable-fonts";

const initialSettings = {
    BVEL: 20,
    SHDW: 50
}

const Demo = () => {
  const [normalStyles] = useVariableFont("Rocher", "normal");
  const [customStyles, updateStyles] = useVariableFont("Rocher", initialSettings);

  const randomSetting = () => Math.floor(Math.random() * 100);

  return (
    <>
      <h1 style={{ ...normalStyles }}>Hello World</h1>
      <h1 style={{ ...customStyles }}>Hello Variable Fonts</h1>
      <button onClick={() => updateStyles({ SHDW: randomSetting() })}>
        ▲ bevel
      </button>
    </>
  );
};
```
npm package: @micahfang/recorder
Description: 录制音频，可转成 PCM 或者 WAV 格式
Author: Micah
Latest version: 1.4.9

# @micahfang/recorder

录制音频文件

## 安装

```
npm install -S @micahfang/recorder
```

## 使用

```javascript
import Recorder from "@micahfang/recorder";
// 或 import {Recorder} from '@micahfang/recorder'

const options = {
  sampleBits: 16, // 采样位数 8, 16
  sampleRate: 16000, // 采样率16khz 16000
  bufferSize: 2048, // 录音缓存大小 1024/2048/4096
  inputChannels: 1, // 输入声道数
  outputChannels: 1, // 输出声道数
  inputSampleRate: 48000, // 音频输入的采样率
};

const recorder = new Recorder(options);

recorder.check(); // 检查浏览器是否能够录音

const startRecord = async () => {
  await recorder.initAudio(); // 初始化录音 track
  recorder.start(); // 开始录音
};

const stopRecord = async () => {
  recorder.stop(); // 结束录音

  const bytes = recorder.getAllBytes();
  const base64 = await recorder.toPCMBase64(bytes);
  // base64

  recorder.destroy(); // 销毁 track
};
```

## API

`const recorder = new Recorder(config:)`

- ** config:RecorderOptions **

  - sampleBits: number 采样位数 8, 16 默认: 16
  - sampleRate: number 采样率 16khz 16000 8khz 8000, 默认 16000
  - bufferSize: number 录音缓存大小 1024/2048/4096 默认 2048
  - inputChannels: number 输入声道数 默认 1
  - outputChannels: number 输出声道数 默认 1
  - inputSampleRate: number 音频输入的采样率 默认 48000

- `Recorder.check()` 检查浏览器是否支持录音，返回 boolean
- `recorder.initAudio(): Promise<undefined>` 初始化录音
- `recorder.start(): void` 开始录音
- `recorder.stop(): void` 结束录音
- `recorder.destroy(): void` 销毁 tracks，用于关闭浏览器录音
- `recorder.getConfig(): RecorderOptions` 获取 recorder 的配置
- `recorder.clearBuffer(): void` 清空缓存
- `recorder.getAllBytes(): Blob` 返回缓存中的所有数据
- `recorder.getBufferBytes(index: number): Blob` 获取单个分片的数据
- `recorder.encodeWavBlob(bytes: Blob): Blob` 将音频流转化成 wav 文件
- `recorder.toPCMDataView(bytes: Blob): DataView` 将 Blob 数据 转化成 pcm DataView
- `recorder.toPCMBase64(bytes: Blob): string` 将 Blob 数据转化成 Base64 字符串
npm package: @micahgoodman/sidebar
Description: A reusable sidebar layout component for React with searchable list and detail view
Author: Your Name
Latest version: 1.0.0

# @micahgoodman/sidebar

A reusable sidebar layout component for React with searchable list and detail view.

## Features

📋 **Searchable List** - Built-in search with filtering  
✅ **Selection Management** - Track selected items  
🎨 **Customizable** - Full control over rendering and styling  
📱 **Type Safe** - Full TypeScript support  
🔌 **Zero Dependencies** - Only requires React

## Installation

```bash
npm install @micahgoodman/sidebar
```

## Quick Start

```tsx
import { SidebarLayout, SidebarList } from '@micahgoodman/sidebar';

// Define your list item component
const MyListItem = ({ item, isSelected, onSelect }) => (
  <div
    onClick={onSelect}
    style={{ 
      padding: '12px',
      backgroundColor: isSelected ? '#f0f0f0' : 'white',
    }}
  >
    {item.title}
  </div>
);

function App() {
  const items = [{ id: '1', title: 'Item 1' }, { id: '2', title: 'Item 2' }];
  const [selectedId, setSelectedId] = useState(null);

  return (
    <SidebarLayout
      SidebarComponent={
        <SidebarList
          items={items}
          selectedId={selectedId}
          onSelect={setSelectedId}
          onAddNew={() => console.log('Add new')}
          config={{
            addButtonLabel: '+ New Item',
            searchPlaceholder: 'Search items...',
            emptyStateText: 'No items yet',
            noResultsText: 'No results found',
            showSearchThreshold: 3,
          }}
          ItemComponent={MyListItem}
          filterItem={(item, query) => 
            item.title.toLowerCase().includes(query.toLowerCase())
          }
        />
      }
      DetailComponent={
        selectedId ? <div>Detail view for {selectedId}</div> : <div>Select an item</div>
      }
    />
  );
}
```

## API

### `<SidebarLayout>`

Two-column layout with sidebar and detail view.

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `SidebarComponent` | `React.ReactNode` | ✅ | Content for sidebar |
| `DetailComponent` | `React.ReactNode` | ✅ | Content for detail view |

### `<SidebarList<T>>`

Searchable list with add button.

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `items` | `SidebarListItem<T>[]` | ✅ | List items |
| `selectedId` | `string \| null` | ✅ | Selected item ID |
| `onSelect` | `(id: string) => void` | ✅ | Selection handler |
| `onAddNew` | `() => void` | ✅ | Add button handler |
| `config` | `SidebarListConfig` | ✅ | Configuration |
| `ItemComponent` | `React.ComponentType<...>` | ✅ | List item component |
| `filterItem` | `(item, query) => boolean` | ✅ | Filter function |

## TypeScript

```ts
import type {
  SidebarLayoutProps,
  SidebarListProps,
  SidebarListConfig,
  SidebarListItem,
} from '@micahgoodman/sidebar';
```

## License

MIT
npm package: @micahjones13/angular
Description: Astro Web Components Angular Wrapper
Latest version: 6.9.32

# AngularLib

This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 13.2.0.

## Code scaffolding

Run `ng generate component component-name --project angular-lib` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project angular-lib`.
> Note: Don't forget to add `--project angular-lib` or else it will be added to the default project in your `angular.json` file. 

## Build

Run `ng build angular-lib` to build the project. The build artifacts will be stored in the `dist/` directory.

## Publishing

After building your library with `ng build angular-lib`, go to the dist folder `cd dist/angular-lib` and run `npm publish`.

## Running unit tests

Run `ng test angular-lib` to execute the unit tests via [Karma](https://karma-runner.github.io).

## Further help

To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.