open-index/open-npm huggingface dataset:
npm package: @lih1989/vkui
Description: VK UI - Vue.js
Latest version: 0.6.6
Deprecated: false

# vkui

VKUI — это набор компонентов для Vue, с помощью которых можно создавать интерфейсы, внешне неотличимые от нативных iOS и Android приложений.

Данный репозиторий является форком пакета https://www.npmjs.com/package/@denull/vkui, который, в свою очередь, порт библиотеки https://github.com/VKCOM/VKUI, написанной на React.

За исключением некоторых деталей, использование библиотеки идентично оригинальной на React. [Документация к исходной библиотеке](https://vkcom.github.io/vkui-styleguide/).

# Установка

```
npm install --save @lih1989/vkui
```

Подключить все компоненты можно так (в `main.js`):
```js
import '@lih1989/vkui'
```

Чтобы подключить только часть компонентов из исходников(в компонентах):
```js
import { Button, Epic, VKView, Panel } from "@lih1989/vkui/src/components"

Vue.component('Button', Button)
Vue.component('Epic', Epic)
Vue.component('VKView', VKView)
Vue.component('Panel', Panel)
```
Вместо вызовов Vue.component(…) также можно передавать импортированные компоненты в поле `components` при объявлении собственных компонентов. В таком случае они будут доступны только внутри них.


```js
/* Замените эти стили на свои, если хотите использовать другую тему */
import '@lih1989/vkui/src/styles/generated/palette.css';
import '@lih1989/vkui/src/styles/generated/client_light.css';
```
### Сделано, так или иначе(работает):
* Input - v-model
* TextArea - v-model, resize, disabled
* Button - @click, disabled, | Tappable - заменен на button, хз чем это грозит в будущем |
* Switch - v-model, @click, change, readonly, disabled
* pull-refresh - перезагрузка содержимого панели стягиваем вниз(Swipe Down)
* Panel - prop onRefresh - метод который нужно запустить при Swipe Down

# TODO

* Довести до ума компоненты используемые в проекте
npm package: @liha-cli/lcr
Description: Liha CodeReview 向けのローカル CLI です。   `git diff` からコミットメッセージを生成し、必要に応じてコミットまで実行します。
Latest version: 0.1.3

# @liha-cli/lcr

Liha CodeReview 向けのローカル CLI です。  
`git diff` からコミットメッセージを生成し、必要に応じてコミットまで実行します。

## コマンド

- `lcr init`
- `lcr commit [options]`
- `lcr budget`
- `lcr help`
- `lcr version`
- `lcr reset`

## `lcr init`

初期設定を行います。

- コミット言語を選択: `ja` / `en`
- 匿名モード設定を保存

保存先:

- `~/.liha/lcr/config.yaml`
- `<repo>/.liha/lcr/cli.yaml`

## `lcr commit`

差分からコミットメッセージ候補を生成し、選択後に `git commit` を実行します。

挙動:

- 差分は `staged` 優先（`git diff --staged`）
- staged が空なら `unstaged`（`git diff`）
- どちらも空なら終了
- `docs/git-commit-rules.md` があれば優先利用
- 実行後に `git push` の確認を表示（デフォルト: `No`）

オプション:

- `-s, --split`: 分割コミットモード
- `-n, --candidates <number>`: 候補数（1〜3、デフォルト2）
- `--plan`: 案の表示のみ（コミットしない）
- `--yes`: 確認プロンプトを最小化

## `lcr budget`

CLI commit 利用可能トークンを表示します。

表示内容:

- 残量（%付き）
- リセット日時

※ 出力は `.liha/lcr/cli.yaml` の `locale`（`ja` / `en`）に従ってフォーマットされます。

## `lcr reset`

現在リポジトリの `./.liha/lcr/cli.yaml` を削除します。  
`~/.liha/lcr/config.yaml` は削除しません。

## 設定ファイル

### グローバル設定

`~/.liha/lcr/config.yaml`

主な項目:

- `mode`（現在は匿名運用）
- `anonymousId`
- `createdAt`
- `updatedAt`

### リポジトリ設定

- `.liha/lcr/cli.yaml`
  - `locale: ja | en`
- `.liha/lcr/config.yaml`
  - `limits.inputMaxBytes`（入力上限）

## API

使用 API:

- `POST /v1/cli/auth/token`（短命トークン発行）
- `POST /v1/lcr/commit/generate`（コミット案生成）
- `GET /v1/lcr/commit/budget`（利用可能トークン取得）

認証:

- CLI は匿名 ID を保持し、短命トークンを取得して API を呼びます。
- 期限切れ時は自動再取得します。

## API ベースURL

- `https://codereview.api.liha.dev` に固定

## ルール解決順

1. `docs/git-commit-rules.md`（repo）
2. CLI 内蔵ルール
3. 最終フォールバック

## 制限事項

- 分割コミットはファイル単位（hunk単位分割なし）
- `--split` 実行時はグループごとに stage を再構成してコミット
- API 失敗時はローカルフォールバック候補を生成

## 開発時の実行例

```bash
pnpm --dir packages/lcr-cli install
pnpm --dir packages/lcr-cli dev init
pnpm --dir packages/lcr-cli dev commit
pnpm --dir packages/lcr-cli dev commit --candidates 3
pnpm --dir packages/lcr-cli dev commit --plan
pnpm --dir packages/lcr-cli dev commit -s
pnpm --dir packages/lcr-cli dev commit -s --plan
pnpm --dir packages/lcr-cli dev budget
```
npm package: @liha-css/foundation
Description: `@liha-css/foundation` は **Void Reset 後の“最低限の足場”** を配布します。 タイポグラフィ（h1/h2…）や見た目のルールは提供せず、**「読める・操作できる」だけを保証**します。
Latest version: 0.0.0

## `@liha-css/foundation`

`@liha-css/foundation` は **Void Reset 後の“最低限の足場”** を配布します。
タイポグラフィ（h1/h2…）や見た目のルールは提供せず、**「読める・操作できる」だけを保証**します。

- `@liha-css/reset` で **全破壊された世界**に
- `@liha-css/tokens` の値（色/フォント/フォーカス）を使って
- **最低限のアプリ基盤**を敷き直す

### Install

```bash
pnpm add @liha-css/foundation
# or npm i @liha-css/foundation
# or yarn add @liha-css/foundation
````

### Usage

> `@layer liha.foundation` で定義されます。
> 基本は **tokens → reset → foundation → app** の順で読み込むのを推奨します。

```ts
import '@liha-css/foundation'
```

---

## What it does

* Safari/iOS の事故（勝手な文字拡大）を抑制
* `tab-size` を固定してコード表示を安定化
* `tokens` の semantic を参照して **body の基本（font / text / bg / line-height）** を復帰
* リンクが「リンク」と分かる最低限の色を付与
* `:focus-visible` を tokens の `--liha-color-focus-ring` で統一
* `code/pre` の等幅フォントと `pre` のスクロールを最低限保証
* （任意）`accent-color` / `color-scheme` でネイティブUIの方向性を揃える

### Important notes (Read this)

* **見た目を揃えるのが目的ではありません**
  * 見出しサイズ、余白、ボタンの装飾などは *一切* 提供しません（それをやるなら Tailwind 的にクラスを用意する方針）。
* **tokens への依存があります**
  * `--liha-color-*` / `--liha-font-*` を参照するため、基本は `@liha-css/tokens` と併用してください。
* **`accent-color` は任意です**
  * `checkbox/radio` などネイティブUIを tokens に寄せたいときだけ有効です（完全自作するなら不要）。

---

## CSS

```css
@layer liha.foundation {
  html {
    /* iOS/Safariの事故防止 */
    -webkit-text-size-adjust: 100%;
    -moz-tab-size: 4;
    tab-size: 4;

    /* 任意: ネイティブUIの色を tokens に寄せる（checkbox等） */
    accent-color: var(--liha-color-primary-main);

    /* 任意: UAにテーマの意図を伝える（今はlight固定でOK） */
    color-scheme: light;
  }

  body {
    font-family: var(--liha-font-body);
    color: var(--liha-color-text-main);
    background-color: var(--liha-color-bg-default);
    line-height: 1.5;
  }

  /* リンクは tokens の semantic を参照（“リンクがリンク” になる最低限） */
  a {
    color: var(--liha-color-link);
    text-decoration: inherit;
  }
  a:hover {
    color: var(--liha-color-link-hover);
  }

  /* focus は tokens の focus-ring を使う（操作性の統一） */
  :where(:focus-visible) {
    outline: 2px solid var(--liha-color-focus-ring);
    outline-offset: 2px;
  }

  /* Voidでも最低限の可読性（コード/等幅） */
  code,
  pre {
    font-family: var(--liha-font-code);
  }

  pre {
    overflow: auto;
  }
}
```

---

## Recommended pairings

* `@liha-css/tokens`
  * 色 / フォント / focus-ring など、foundation が参照する値を提供します。
* `@liha-css/reset`
  * foundation は “全破壊後の足場” なので、reset とセットでの利用が前提です。

---

## Browser support

* Modern browsers only
* CSS Cascade Layers（`@layer`）に依存します
* Safari/iOS 向けの最小パッチ（`-webkit-text-size-adjust`）を含みます
npm package: @liha-css/tokens
Description: `@liha-css/tokens` は **CSS Variables（Design Tokens）** を配布します。 このパッケージは “スタイルを当てる” のではなく、**スタイルの材料（値）だけ**を提供します。
Latest version: 0.0.0

## `@liha-css/tokens`

`@liha-css/tokens` は **CSS Variables（Design Tokens）** を配布します。
このパッケージは “スタイルを当てる” のではなく、**スタイルの材料（値）だけ**を提供します。

- **Palette tokens**: `--liha-color-blue-6` のような色の階調
- **Semantic tokens**: `--liha-color-text-main` のような「用途」に紐づいた値
- **UI tokens**: `radius / shadow / z-index` など、UIの土台となる値

> すべての変数は `--liha-` プレフィックス付きです（他ライブラリとの衝突を避けるため）。

### Install

```bash
pnpm add @liha-css/tokens
# or npm i @liha-css/tokens
# or yarn add @liha-css/tokens
````

### Usage

このパッケージは `@layer liha.tokens` で定義されます。
`reset / foundation` と併用する場合は、**import順で優先順位が決まる**ため、基本は **最初に読み込む**のを推奨します。

> Recommended order: `tokens` → `reset` → `foundation`

```ts
import '@liha-css/tokens'
```

### Token structure

#### 1) Palette (raw scale)

直接使ってもOKですが、基本は semantic 経由を推奨します。

例:

* `--liha-color-gray-0 .. 9`
* `--liha-color-blue-0 .. 9`
* `--liha-color-red-0 .. 9`
* ...etc

#### 2) Semantic (meaning)

色の用途を固定し、アプリ側は “意味” を参照します。

例:

* `--liha-color-bg-default`
* `--liha-color-text-main`
* `--liha-color-border-default`
* `--liha-color-primary-main`
* `--liha-color-danger-main`
* `--liha-color-focus-ring`
* `--liha-color-link`, `--liha-color-link-hover`

**使い方例**

```css
.card {
  background: var(--liha-color-bg-surface);
  color: var(--liha-color-text-main);
  border: 1px solid var(--liha-color-border-default);
  border-radius: var(--liha-radius-surface);
  box-shadow: var(--liha-shadow-surface);
}
```

#### 3) Radius

Tailwind をリスペクトした段階値です。

* `--liha-radius-none`
* `--liha-radius-sm`
* `--liha-radius-md`
* `--liha-radius-lg`
* `--liha-radius-xl`
* `--liha-radius-2xl`
* `--liha-radius-3xl`
* `--liha-radius-full`

Semantic:

* `--liha-radius-control`
* `--liha-radius-surface`
* `--liha-radius-modal`
* `--liha-radius-pill`

#### 4) Shadow

Tailwind をリスペクトした段階値です。

* `--liha-shadow-none`
* `--liha-shadow-sm`
* `--liha-shadow-md`
* `--liha-shadow-lg`
* `--liha-shadow-xl`
* `--liha-shadow-2xl`

Semantic:

* `--liha-shadow-surface`
* `--liha-shadow-popover`
* `--liha-shadow-modal`

#### 5) Z-index

段階が分かれば勝ち、の思想で **用途に名前を付けた**トークンです。

* `--liha-z-base`
* `--liha-z-sticky`
* `--liha-z-dropdown`
* `--liha-z-popover`
* `--liha-z-modal`
* `--liha-z-toast`
* `--liha-z-overlay`

**使い方例**

```css
.modal {
  z-index: var(--liha-z-modal);
}
.toast {
  z-index: var(--liha-z-toast);
}
```

### Theme (optional)

将来的にテーマ（darkなど）を追加する場合は、**palette は固定**し、`semantic` の上書きで切り替えるのを推奨します。

```css
[data-theme='dark'] {
  --liha-color-bg-default: var(--liha-color-gray-9);
  --liha-color-text-main: var(--liha-color-white);
  /* ...必要な semantic を上書き */
}
```

### Notes

* このパッケージは **タイポグラフィのスタイル（h1…）は提供しません**。
  そういった“見た目”を揃えたい場合は、Tailwind のように **クラスユーティリティ**として別途用意する方針です。
* `@layer` を使用します（CSS Cascade Layers をサポートするブラウザが対象です）。