open-index/open-npm huggingface dataset:
npm package: @kaniyarasu/react-editor.js
Description: React wrapper component for Editor.js
Author: Semenyuk Timofey
Latest version: 0.1.6

# react-editor.js

![npm version](https://img.shields.io/npm/v/@stfy/react-editor.js.svg)

React wrapper component for [Editor.js](https://github.com/codex-team/editor.js)

## Install

```bash
npm install --save @kaniyarasu/react-editor.js

// or Yarn

yarn add @kaniyarasu/react-editor.js
```

## Usage

```jsx

import React, { Component } from 'react'
import Editor from '@kaniyarasu/react-editor.js'

const App => (
  <>
    <Editor
        autofocus
        holderId="editorjs-container"
        excludeDefaultTools={['header']}
        onChange={(data) => console.log(data)}
        customTools={{
          header: CustomHeader
        }}
        onReady={() => console.log('Start!')}
        data={{
          "time" : 1554920381017,
          "blocks" : [
              {
                  "type" : "header",
                  "data" : {
                      "text" : "Hello Editor.js",
                      "level" : 2
                  }
              },
          ],
          "version" : "2.12.4"
        }}
      />
  </>
)

```

## Props

| Name                |    Type    |      Default      | Description                                   |
| :------------------ | :--------: | :---------------: | :-------------------------------------------- |
| autofocus           | `boolean`  |      `true`       | Set Caret to the Editor after initialisation  |
| holderId            |  `string`  | `editorjs-holder` | Id of Element that should contain the Editor  |
| onChange            | `function` |      `null`       | onChange callback                             |
| onReady             | `function` |      `null`       | onReady callback                              |
| data                |  `object`  |      `null`       | Previously saved data that should be rendered |
| customTools         |  `object`  |      `null`       | Set custom tools config or overwrite existed  |
| excludeDefaultTools |  `array`   |      `null`       | Exclude default tool by tool name             |

## Default tools

| Name       |        Package         |
| :--------- | :--------------------: |
| header     |   `@editorjs/header`   |
| list       |    `@editorjs/list`    |
| inlineCode | `@editorjs/inlineCode` |
| image      |   `@editorjs/image`    |
| embed      |   `@editorjs/embed`    |
| quote      |   `@editorjs/quote`    |
| marker     |   `@editorjs/marker`   |
| code       |    `@editorjs/code`    |
| link       |    `@editorjs/link`    |
| delimiter  | `@editorjs/delimiter`  |
| raw        |    `@editorjs/raw`     |
| table      |   `@editorjs/table`    |
| warning    |  `@editorjs/warning`   |
| paragraph  | `@editorjs/paragraph`  |
| checklist  | `@editorjs/checklist`  |

## Contributing

Welcome to contribute.

## License

[MIT Licensed.](https://github.com/stfy/react-editor.js/blob/master/LICENSE) License 2019
npm package: @kanjianmusic/fn
Description: 看见音乐公共函数库
Latest version: 0.14.1

# fn

看见音乐公共函数库

**业务无关** 且 **跨项目（工程）高频使用** 的函数库。

## 安装
```
pnpm i @kanjianmusic/fn
```

## 使用
```ts
import { padLeadingZero } from '@kanjianmusic/fn';

padLeadingZero(9);
// 09
```

或

```ts
import * as Fn from '@kanjianmusic/fn';

Fn.padLeadingZero(9);
```

## 开发相关

### plop 脚手架
运行 `pnpm plop` 可以交互式创建函数模版，需要填入函数名（必填）和描述（选填）


### 边界
当前阶段，此函数库只包含工具化的函数，如 `formatSeconds()` 只是为了把 `audio.duration` 转为 `01:02` 的格式显示。
某种意义上，更像 Vue2 时的 filter。

具体业务对象的操作方法，如 `dsp.getLogo()`，不在当前的计划中。

### 函数命名
1. 如果有约定俗成的方案，则遵循社区方案，如 `nl2br`
2. 否则，函数名应统一为动词启首， `doSomthing` 的格式

### 参数命名
函数的参数名，如果原生 JS 有类似场景实现，则遵循原生 JS 的命名，如 ```digits```，即为 [toFixed](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed) 的原生参数名

### 发布到 npm 的版本号要求
使用通行的 semver 规范外，需要遵循一条约定：

任何新增函数的发布，都必须要有配套的测试代码及文档；如果确实需要临时发布，必须使用 [先行版本号(Pre-Release-Version)](https://semver.org/lang/zh-CN/#spec-item-9) 修饰，如 `1.1.0-beta.1`

## 其他

### 为什么没有像 vueuse 一样分成多个包？
> Done is better than perfect

初始阶段，同时满足 **业务无关** 、**跨项目高频使用** 条件的函数数量并不算多。在这个前提下去拆分，性价比太低。

一方面，单一子包内可能只有 1-2 个函数，信息过于分散；

另一方面，配套的文档、编译等工程复杂度直线上升，投入产出比过低。
npm package: @kanjianmusic/logos-iconify
Description: Iconify compatible JSON collection for Kanjian music logos
Author: Kanjian Music
Latest version: 0.2.1

# @kanjianmusic/logos-iconify

看见音乐平台图标库的 Iconify 格式包。

## 说明
本图标库为每个平台提供两种版本：

- **彩色版本**：`{platform}-color` - 保持品牌原色，不受 CSS 影响
- **单色版本**：`{platform}` - 使用 `currentColor`，可通过 CSS 自定义颜色

查看所有可用图标列表，请查看 [icons.json](./lib/index.json) 文件。

### 示例

| 图标名称 | 类型 | 描述 |
|---------|------|------|
| `spotify` | 单色 | Spotify 单色图标，可自定义颜色 |
| `spotify-color` | 彩色 | Spotify 品牌色图标 |
| `apple-music` | 单色 | Apple Music 单色图标 |
| `apple-music-color` | 彩色 | Apple Music 品牌色图标 |

> 💡 **提示**：目前包含 35+ 音乐平台图标，每个平台都有彩色和单色两个版本。

## 安装

```bash
npm install @kanjianmusic/logos-iconify
# 或
yarn add @kanjianmusic/logos-iconify
# 或
pnpm add @kanjianmusic/logos-iconify
```

## 使用方法（以 vue 为例）

### 1. 引入

在 `App.vue` 中

```typescript
import { addCollection } from '@iconify/vue';
import kanjianLogos from '@kanjianmusic/logos-iconify';

// 添加图标集合到 Iconify
addCollection(kanjianLogos)
```

### 2. 使用

```vue
<template>
  <!-- 彩色版本 -->
  <Icon icon="kanjian-logos:spotify-color" />

  <!-- 单色版本，可自定义颜色 -->
  <Icon icon="kanjian-logos:spotify" style="color: #1db954;" />
</template>

<script setup>
import { Icon } from '@iconify/vue'
</script>
```

## VSCode Iconify IntelliSense 插件配置

如果你使用 [Iconify IntelliSense](https://marketplace.visualstudio.com/items?itemName=antfu.iconify) 插件，可以添加本地图标集合以获得智能提示。

在项目根目录的 `.vscode/settings.json` 中添加：

```json
{
  "iconify.customCollectionJsonPaths": [
    "./node_modules/@kanjianmusic/logos-iconify/lib/index.json"
  ]
}
```

这样你就可以在编辑器中获得图标的智能提示和预览。
npm package: @kanjianmusic/mcp-core
Description: Kanjian MCP - Core
Author: cuiguojie@kanjian.com
Latest version: 0.0.1

# MCP Core Server

MCP Core Server 提供了一些弥补 LLM 能力不足的基础服务，目前包含当前日期功能。

## 安装与配置

在 MCP 客户端（Cursor） 中添加 MCP 服务：

* 名称：Kanjian MCP Core Server（或者你可以随意命名）
* 类型：`Command`
* 命令：`npx @kanjianmusic/mcp-core`

## 功能说明

### 日期工具

在 MCP 客户端（Cursor） 中输入：

```bash
今天是几号？
```

返回信息包含：
- ISO 格式的时间戳
- 当前时区信息
npm package: @kanjianmusic/mcp-notification
Description: Kanjian MCP - Notification
Author: cuiguojie@kanjian.com
Latest version: 0.0.2

# MCP Notification Server

MCP Notification Server 提供了一些公司内部的通知功能。

## 安装与配置

在 MCP 客户端（Cursor） 中添加 MCP 服务：

* 名称：Kanjian MCP Notification Server（或者你可以随意命名）
* 类型：`Command`
* 命令：`env EMAIL_USER=your_email@kanjian.com EMAIL_PASSWORD=your_email_password npx @kanjianmusic/mcp-notification`

请替换 `your_email@kanjian.com` 和 `your_email_password` 为你的企业邮箱账号和密码。

另外，使用邮件功能，你需要在企业邮箱中，开启 SMTP 服务。

## 功能说明

### 邮件发送

在 MCP 客户端（Cursor） 中输入：

```bash
发送邮件到 cuiguojie@kanjian.com，主题为 "测试邮件"，内容为 "测试邮件内容"
```

或者，借助 Cursor 的上下文工具，你可以这样输入：

```bash
@demo.png 整理这张图片上的内容，并发送邮件到 cuiguojie@kanjian.com。
```

返回信息包含：
- 邮件发送成功
- 邮件发送失败
npm package: @kanjianmusic/mcp-prompthub
Description: Kanjian MCP - PromptHub
Author: cuiguojie@kanjian.com
Latest version: 0.0.2

# MCP PromptHub Server

MCP Prompt Server，可以查询和使用 prompthub.seemusic.xyz 上的提示词。

## 安装与配置

在 MCP 客户端（Cursor） 中添加 MCP 服务：

```
{
  "mcpServers": {
    "prompthub": {
      "command": "npx",
      "args": [
        "@kanjianmusic/mcp-prompthub"
      ],
      "description": "PromptHub 服务",
      "env": {
        "PROMPTHUB_PERSONAL_TOKEN": ""
      }
    }
  }
}
```

## 功能说明

### 获取提示词列表

支持：

* 关键词模糊搜索（当前接口只支持了 path 上的搜索）
* 按照创建者（owner）搜索
* 支持分页

```
查询第二页的提示词
```

```
查询 hanli 的提示词
```

```
查询 OpenAI 相关的提示词
```

### 获取指定提示词内容

支持
* 精确指定 fullPath（owner/path）关键词的详情；
* 搜索后，由 AI 语义化分流某个关键词

```
给我 cuiguojie/openai-prompt-generator 的内容
```

```
把通过 openai 生成提示词的内容保存到本地成 md 文件
```
npm package: @kanjianmusic/mcp-tech
Description: Kanjian MCP - Tech
Author: cuiguojie@kanjian.com
Latest version: 0.0.1

# MCP Tech Server

MCP Tech Server 提供了一些技术部的辅助工具。

## 安装与配置

### 安装

在 MCP 客户端（Cursor） 中添加 MCP 服务：

* 名称：Kanjian MCP Tech Server（或者你可以随意命名）
* 类型：`Command`
* 命令：`npx @kanjianmusic/mcp-tech`

### 配置

在系统用户根目录，创建 `.kanjian-mcp/mcp-tech.json` 文件。内容例子：

```json
{
  "gitlab": {
    "token": "your_gitlab_token"
  },
  "jira": {
    "token": "your_jirabot_token"
  }
}   
```

具体的参数，参见各工具的具体说明。

## 功能说明

### 创建 Gitlab 仓库

需要在配置文件中，配置 `gitlab.token` 信息。格式如下：

```json
{
  "gitlab": {
    "token": "your_gitlab_token"
  }
}   
```

在 MCP 客户端（Cursor） 中输入：

```bash
我想在前端组创建一个 mcp demo 测试仓库
```

返回信息包含：
- 仓库的 SSH 地址、HTTP 地址、Web 访问地址
npm package: @kanjianmusic/saas-theme
Description: theme for SaaS
Latest version: 0.0.3-rc.2

# kanjian-saas-theme-generator
saas主题生成

## 使用

```
import {
  changeElementUIThemeColorForSaaS,
  changeThemeColorForSaaS,
  changeSopThemeColorForSaaS,
  createFaviconForSaaS
} from '@kanjianmusic/saas-theme';

/**
 * 为了适配不同透明度，需要在:root中添加一下变量
 * --saas-color-r: 0;
 * --saas-color-g: 64;
 * --saas-color-b: 255;
 * --saas-color-primary: rgb(var(--saas-color-r), var(--saas-color-g), var(--saas-color-b));
 * --saas-color-primary-light: rgba(var(--saas-color-r), var(--saas-color-g), var(--saas-color-b), 0.08);
 * --saas-color-primary-light1: rgba(var(--saas-color-r), var(--saas-color-g), var(--saas-color-b), 0.04);
 * --saas-color-primary-light2: rgba(var(--saas-color-r), var(--saas-color-g), var(--saas-color-b), 0.48);
 * --saas-color-primary-light3: linear-gradient(0deg, rgba(var(--saas-color-r), var(--saas-color-g), var(--saas-color-b), 0.48), rgba(var(--saas-color-r), var(--saas-color-g), var(--saas-color-b), 0.48));
 */
changeThemeColorForSaaS('#ED0A47');

changeElementUIThemeColorForSaaS('rgb(255, 10, 100)');

// 引用了@seemusic/element-plus-theme-sop, 需要修改主题色配置
changeSopThemeColorForSaaS('#ED0A47');

createFaviconForSaaS($iconUrl, $documentTitle);

```

## License

[MIT](./LICENSE) License © 2024-PRESENT
npm package: @kanjianmusic/vite-plugin-third-party-injector
Description: Vite plugin for injecting third-party scripts into HTML files, such as gtag, gtm, etc.
Author: cuiguojie@kanjian.com
Latest version: 0.1.0

# @kanjianmusic/vite-plugin-third-party-injector

插入常见的第三方代码（比如谷歌统计）到 vite 项目的 index.html 中。目前支持：

* gtag
* gtm
* clarity
* fbevents

## 安装

```
npm install @kanjianmusic/vite-plugin-third-party-injector -D
```

或

```
pnpm install @kanjianmusic/vite-plugin-third-party-injector -D
```


## 使用

`vite.config.ts` 配置示例：

```
import { defineConfig } from 'vite';
import thirdPartyInjectorPlugin from '@kanjianmusic/vite-plugin-third-party-injector';

export default defineConfig({
  plugins: [
    thirdPartyInjectorPlugin({
      gtag: 'G-XXXXXXXXXX',
    }),
  ],
})
```
npm package: @kankanreno/vostro-flamingo
Description: html svg diagram
Latest version: 1.0.0

# `create-preact`

<h2 align="center">
  <img height="256" width="256" src="./src/assets/preact.svg">
</h2>

<h3 align="center">Get started using Preact and Vite!</h3>

## Getting Started

-   `npm run dev` - Starts a dev server at http://localhost:5173/

-   `npm run build` - Builds for production, emitting to `dist/`

-   `npm run preview` - Starts a server at http://localhost:4173/ to test production build locally
npm package: @kanli8_supabase/functions-js
Description: JS Client library to interact with Supabase Functions.
Author: Supabase
Latest version: 2.1.0-3

# `functions-js`

[![Coverage Status](https://coveralls.io/repos/github/supabase/functions-js/badge.svg?branch=main)](https://coveralls.io/github/supabase/functions-js?branch=main)

JS Client library to interact with Supabase Functions.

## Docs

<https://supabase.com/docs/reference/javascript/functions-invoke>

## testing

To run tests you will need Node 18+.

You are going to need docker daemon running to execute tests.

To start test run use the following command:

```sh
npm i
npm run test
```
npm package: @kanli8_supabase/gotrue-js
Description: Isomorphic GoTrue client
Author: Supabase
Latest version: 2.23.0-3

# `gotrue-js`

An isomorphic JavaScript client library for the [GoTrue](https://github.com/supabase/gotrue) API.

## Docs

- Using `gotrue-js`: https://supabase.com/docs/reference/javascript/auth-signup
- TypeDoc: https://supabase.github.io/gotrue-js/v2

## Quick start

Install

```bash
npm install --save @supabase/gotrue-js
```

Usage

```js
import { GoTrueClient } from '@supabase/gotrue-js'

const GOTRUE_URL = 'http://localhost:9999'

const auth = new GoTrueClient({ url: GOTRUE_URL })
```

- `signUp()`: https://supabase.io/docs/reference/javascript/auth-signup
- `signIn()`: https://supabase.io/docs/reference/javascript/auth-signin
- `signOut()`: https://supabase.io/docs/reference/javascript/auth-signout

### Custom `fetch` implementation

`gotrue-js` uses the [`cross-fetch`](https://www.npmjs.com/package/cross-fetch) library to make HTTP requests, but an alternative `fetch` implementation can be provided as an option. This is most useful in environments where `cross-fetch` is not compatible, for instance Cloudflare Workers:

```js
import { GoTrueClient } from '@supabase/gotrue-js'

const GOTRUE_URL = 'http://localhost:9999'

const auth = new GoTrueClient({ url: GOTRUE_URL, fetch: fetch })
```

## Sponsors

We are building the features of Firebase using enterprise-grade, open source products. We support existing communities wherever possible, and if the products don’t exist we build them and open source them ourselves.

[![New Sponsor](https://user-images.githubusercontent.com/10214025/90518111-e74bbb00-e198-11ea-8f88-c9e3c1aa4b5b.png)](https://github.com/sponsors/supabase)

![Watch this repo](https://gitcdn.xyz/repo/supabase/monorepo/master/web/static/watch-repo.gif 'Watch this repo')
npm package: @kanli8_supabase/postgrest-js
Description: Isomorphic PostgREST client
Author: Supabase
Latest version: 1.4.1-3

# `postgrest-js`

[![Build](https://github.com/supabase/postgrest-js/workflows/CI/badge.svg)](https://github.com/supabase/postgrest-js/actions?query=branch%3Amaster)
[![Package](https://img.shields.io/npm/v/@supabase/postgrest-js)](https://www.npmjs.com/package/@supabase/postgrest-js)
[![License: MIT](https://img.shields.io/npm/l/@supabase/postgrest-js)](#license)

Isomorphic JavaScript client for [PostgREST](https://postgrest.org). The goal of this library is to make an "ORM-like" restful interface.

Full documentation can be found [here](https://supabase.github.io/postgrest-js/v2).

### Quick start

Install

```bash
npm install @supabase/postgrest-js
```

Usage

```js
import { PostgrestClient } from '@supabase/postgrest-js'

const REST_URL = 'http://localhost:3000'
const postgrest = new PostgrestClient(REST_URL)
```

- select(): https://supabase.com/docs/reference/javascript/select
- insert(): https://supabase.com/docs/reference/javascript/insert
- update(): https://supabase.com/docs/reference/javascript/update
- delete(): https://supabase.com/docs/reference/javascript/delete

#### Custom `fetch` implementation

`postgrest-js` uses the [`cross-fetch`](https://www.npmjs.com/package/cross-fetch) library to make HTTP requests, but an alternative `fetch` implementation can be provided as an option. This is most useful in environments where `cross-fetch` is not compatible, for instance Cloudflare Workers:

```js
import { PostgrestClient } from '@supabase/postgrest-js'

const REST_URL = 'http://localhost:3000'
const postgrest = new PostgrestClient(REST_URL, {
  fetch: (...args) => fetch(...args),
})
```

## License

This repo is licensed under MIT License.

## Sponsors

We are building the features of Firebase using enterprise-grade, open source products. We support existing communities wherever possible, and if the products don’t exist we build them and open source them ourselves. Thanks to these sponsors who are making the OSS ecosystem better for everyone.

[![New Sponsor](https://user-images.githubusercontent.com/10214025/90518111-e74bbb00-e198-11ea-8f88-c9e3c1aa4b5b.png)](https://github.com/sponsors/supabase)
npm package: @kanli8_supabase/supabase-js
Description: Isomorphic Javascript client for Supabase
Author: Supabase
Latest version: 2.21.0-7

# `supabase-js`

[![Coverage Status](https://coveralls.io/repos/github/supabase/supabase-js/badge.svg?branch=master)](https://coveralls.io/github/supabase/supabase-js?branch=master)

An isomorphic JavaScript client for Supabase.

- **Documentation:** https://supabase.com/docs/reference
- TypeDoc: https://supabase.github.io/supabase-js/v2/

## Usage

First of all, you need to install the library:

```sh
npm install @supabase/supabase-js
```

Then you're able to import the library and establish the connection with the database:

```js
import { createClient } from '@supabase/supabase-js'

// Create a single supabase client for interacting with your database
const supabase = createClient('https://xyzcompany.supabase.co', 'public-anon-key')
```

### UMD

You can now use plain `<script>`s to import supabase-js from CDNs, like:

```html
<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js"></script>
```

or even:

```html
<script src="https://unpkg.com/@supabase/supabase-js"></script>
```

Then you can use it from a global `supabase` variable:

```html
<script>
  const { createClient } = supabase
  const _supabase = createClient('https://xyzcompany.supabase.co', 'public-anon-key')

  console.log('Supabase Instance: ', _supabase)
  // ...
</script>
```

### ESM

You can now use type="module" `<script>`s to import supabase-js from CDNs, like:

```html
<script type="module">
  import { createClient } from 'https://cdn.jsdelivr.net/npm/@supabase/supabase-js/+esm'
  const supabase = createClient('https://xyzcompany.supabase.co', 'public-anon-key')

  console.log('Supabase Instance: ', supabase)
  // ...
</script>
```

### Custom `fetch` implementation

`supabase-js` uses the [`cross-fetch`](https://www.npmjs.com/package/cross-fetch) library to make HTTP requests, but an alternative `fetch` implementation can be provided as an option. This is most useful in environments where `cross-fetch` is not compatible, for instance Cloudflare Workers:

```js
import { createClient } from '@supabase/supabase-js'

// Provide a custom `fetch` implementation as an option
const supabase = createClient('https://xyzcompany.supabase.co', 'public-anon-key', {
  global: {
    fetch: (...args) => fetch(...args),
  },
})
```

## Sponsors

We are building the features of Firebase using enterprise-grade, open source products. We support existing communities wherever possible, and if the products don’t exist we build them and open source them ourselves. Thanks to these sponsors who are making the OSS ecosystem better for everyone.

[![New Sponsor](https://user-images.githubusercontent.com/10214025/90518111-e74bbb00-e198-11ea-8f88-c9e3c1aa4b5b.png)](https://github.com/sponsors/supabase)
npm package: @kanmon/react-native-sdk
Description: Kanmon React Native SDK
Author: Kanmon
Latest version: 1.1.0

# @kanmon/react-native-sdk

This provides a simple way to embed Kanmon in a React Native application.

## Installation

```sh
npm install @kanmon/react-native-sdk
```

## iOS Setup

```
cd ios && bundle install && bundle exec pod install
```

Kanmon requires access to the camera for ID Verification. The following will need to be added to `Info.plist` for this to work. Permission will be requested from the user when they see the ID Verification Step.

```
	<key>NSCameraUsageDescription</key>
	<string>This app needs access to the camera to take photos for verification purposes.</string>
```

## Android Setup

Autolinking should automatically detect the new dependency.

Kanmon requires access to the camera for ID Verification. This is declared in the AndroidManifest.xml. Permission will be requested from the user when they see the ID Verification Step.

## Example

Check out the [example](https://github.com/Kanmon/react-native-sdk/blob/main/example/src/App.tsx) integration.

## Additional Documentation

Check out our [documentation](https://kanmon.dev/docs/types) for additional information on the types.
npm package: @kanmon/sdk
Description: Kanmon API client
Author: Kanmon
Latest version: 3.2.0

# Kanmon JS/TS SDK

Kanmon SDK is a library that provides a simple way to interact with the Kanmon API.

## Documentation

You can find our full API docs at [https://kanmon.dev](https://kanmon.dev). Request an invite from your account manager if you don't have access yet.

### SDK Quickstart

Getting started with the SDK is easy. First, install the SDK:

```bash
npm install @kanmon/sdk
```

Then, you can initialize the SDK in your project:

```typescript
import { KanmonPlatformApi } from '@kanmon/sdk';

const kanmonApi = new KanmonPlatformApi('YOUR_API_KEY');
```

Example use of one of our API endpoints:

```typescript
const business = await kanmonApi.businesses.getBusiness({id: 'YourBizId', idType: 'PLATFORM'});
```

## Versioning

### Kanmon's spin on Semver

- Major version changes - non-backwards compatible API or SDK changes.
- Minor version changes - API changed, but backwards compatible. (SDK will change because of this too)
- Patch version changes - SDK bug fixes without syntax changes.

Our API docs located at [https://kanmon.dev](https://kanmon.dev) will always be up to date with the latest minor version. Patches won't be reflected in the API docs. Example: `v2.1`.

SDK tracks all the way to patches. `v2.1.3` -> `v2.1.4` would update the SDK package but the README docs wouldn't have changed.

### SDK Monorepo

Versioning for each SDK will always be the same across all SDKs. This means that occasionally, one language SDK could receive a version bump without any changes to the SDK itself. This is because another SDK had a change that required a version bump.

## Support

If you have any issues, please report them in the [issues](https://github.com/Kanmon/sdk/issues) section of Github. If you have any questions or need help, please contact your account manager and we'll be happy to help you directly!
npm package: @kanmu/popcorn-tokens
Description: Popcorn Tokens for Vandle.
Author: Kanmu Design Team
Latest version: 0.2.0

# @kanmu/popcorn-tokens

Popcorn Design Kit で使用するデザイントークン

![MIT license](https://img.shields.io/npm/l/@kanmu/popcorn-tokens) ![npm](https://img.shields.io/npm/v/@kanmu/popcorn-tokens)

## インストール

```bash
yarn add @kanmu/popcorn-tokens
```

## トークン一覧

本パッケージでは、以下のデザイントークンを提供します。

### 色（Colors）

**Primitive colors**

デザインシステムの基本となる色のパレット（例: `green`, `gray`, `blue`, `red`, `yellow` など、各色は 100-900 の階調を持ちます）

**Semantic colors**

用途に応じた意味を持つ色（例: `background`, `text`, `border`, `icon`, `surface` など）

### タイポグラフィ（Typography）

**Font size**

テキストサイズの定義（例: `typographyFontSizeBodySmall`, `typographyFontSizeBodyMedium`, `typographyFontSizeHeadingLarge` など）

**Line height**

行間の定義

- `default` - 標準の行間（1.5）
- `compact` - コンパクトな行間（1.25）

### サイズ（Size）

**Spacing**

余白・間隔の定義（例: `spacingSmall`, `spacingMedium`, `spacingLarge` など）

**Radius**

角丸の定義（例: `radiusSmall`, `radiusMedium`, `radiusLarge` など）

**Icon**

アイコンサイズの定義（例: `iconSmall`, `iconMedium`, `iconLarge` など）

すべてのトークンは TypeScript の型定義を含み、型安全に使用できます。

## 使い方

### 基本的な使用例

```tsx
import {
  colorsSemanticBackgroundGray,
  colorsSemanticTextPrimary,
  spacingMedium,
  radiusSmall,
  typographyFontSizeBodyMedium,
} from '@kanmu/popcorn-tokens';
import {View, Text, StyleSheet} from 'react-native';

function MyComponent() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello, Popcorn Tokens!</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: colorsSemanticBackgroundGray,
    padding: spacingMedium.number,
    borderRadius: radiusSmall.number,
  },
  text: {
    color: colorsSemanticTextPrimary,
    fontSize: typographyFontSizeBodyMedium.number,
  },
});
```

## Contributing

デザイントークンパッケージの開発に貢献いただける方は、以下のドキュメントを参照してください。

- [コントリビューションガイド](../../CONTRIBUTING.md) - 開発環境のセットアップとワークフロー
- [リリースガイド](./docs/release-guide.md) - Figma からトークンを更新してリリースする手順
npm package: @kanmu/popcorn-ui
Description: Popcorn UI for React Native.
Author: Kanmu Design Team
Latest version: 0.0.1

# @kanmu/popcorn-ui

Popcorn Design Kit で使用する React Native 製の UI コンポーネントライブラリ

## インストール

```bash
yarn add @kanmu/popcorn-ui
```

### Peer Dependencies

このパッケージには以下の peer dependencies が必要です。

```bash
yarn add react react-native react-native-svg react-native-safe-area-context @react-native-picker/picker react-native-actions-sheet react-native-modal-datetime-picker @kanmu/popcorn-tokens @kanmu/popcorn-icons
```

※ React 18 以上、React Native 0.73 以上、React Native SVG 15 以上が必要です。

## コンポーネント一覧

Coming soon...

## 使い方

### 基本的な使用例

```tsx
import {Text, Button, Badge, Space} from '@kanmu/popcorn-ui';
import {View} from 'react-native';

const MyComponent = () => {
  return (
    <View>
      <Text typographyStyle="heading/medium">見出しテキスト</Text>
      <Space.Stack size="small" />
      <Text typographyStyle="body/medium">本文テキスト</Text>
      <Space.Stack size="medium" />
      <Badge color="notice">
        <Text size="xxsmall" color="light">
          NEW
        </Text>
      </Badge>
      <Space.Stack size="medium" />
      <Button.Basic color="primary" startIcon="check" onPress={() => {}}>
        ボタン
      </Button.Basic>
    </View>
  );
};
```

## コンポーネントのプレビュー

コンポーネントのプレビューに [Storybook for React Native](https://github.com/storybookjs/react-native) を使用しています。

```bash
# popcorn-ui の Storybook は popcorn-tokens と popcorn-icons のビルド成果物（dist/）に依存しています。
# 初回セットアップ時に以下のコマンドですべてのパッケージをビルドしないと、
# Storybook 起動時にモジュール解決エラーが発生します。
yarn build  # プロジェクトルートで実行

# パッケージディレクトリに移動
cd packages/popcorn-ui

# Storybook でコンポーネントをプレビュー
yarn storybook-generate  # ストーリーを生成
yarn storybook           # Metro bundler を Storybook モードで起動

# 別のターミナルからアプリをビルド・起動
yarn storybook:ios       # iOS シミュレーターで起動
yarn storybook:android   # Android エミュレーターで起動

# テストを実行
yarn test
```

## Contributing

UI コンポーネントパッケージの開発に貢献いただける方は、以下のドキュメントを参照してください。

- [コントリビューションガイド](../../CONTRIBUTING.md) - 開発環境のセットアップとワークフロー