open-index/open-npm huggingface dataset:
npm package: @reni-corp/reni-2c-ui
Description: モダンなストアフロントアプリケーション構築のための、美しくアクセシブルなコンポーネントを提供する包括的なVue 3コンポーネントライブラリです。
Latest version: 0.4.11

# reni-2C-ui

モダンなストアフロントアプリケーション構築のための、美しくアクセシブルなコンポーネントを提供する包括的なVue 3コンポーネントライブラリです。

## インストール

```bash
npm install @reni-corp/reni-2c-ui
```

または

```bash
yarn add @reni-corp/reni-2c-ui
```

#### RnHtmlコンポーネントをSSR環境で利用する場合

SSR（サーバーサイドレンダリング）環境で`RnHtml`コンポーネントを使用する場合は、`happy-dom`のインストールが必要です。

```bash
npm install happy-dom
```

または

```bash
yarn add happy-dom
```

## クイックスタート

### 1. プラグインのインポートとインストール

```typescript
import { createApp } from 'vue'
import { createReniOneUI } from '@reni-corp/reni-2c-ui'
import '@reni-corp/reni-2c-ui/dist/style.css'

const app = createApp(App)
app.use(createReniOneUI())
```

### 2. コンポーネントの使用

```vue
<template>
  <rn-button variant="primary" @click="handleClick"> Click me </rn-button>
  <rn-card>
    <rn-text>Hello World</rn-text>
  </rn-card>
</template>
```

### 3. 個別コンポーネントのインポート

```typescript
import { Button, Card, Text } from '@reni-corp/reni-2c-ui'

export default {
  components: {
    RnButton: Button,
    RnCard: Card,
    RnText: Text,
  },
}
```

## コンポーネントカテゴリ

### Elements（要素）

基本的なUIビルディングブロック: `Button`, `Icon`, `Text`, `TextField`, `SelectBox`, `Checkbox`, `RadioButton`, `Alert`, `Spinner` など

### Layouts（レイアウト）

レイアウトと構造のコンポーネント: `Stack`, `Card`, `Grid`, `List`, `Section`, `Page`

### Interactive（インタラクティブ）

インタラクティブなコンポーネント: `Modal`, `Dialog`, `Gallery`, `Carousel`, `Tabs`, `Notification`, `DropDown`

### Navigation（ナビゲーション）

ナビゲーションコンポーネント: `AppBar`, `Drawer`, `BottomBar`

### Features（機能）

ビジネス特化型コンポーネント: `ProductList`, `Schedule`, `Hero`, `AnnounceBar`, `CategoryBanner`

## TypeScript サポート

このライブラリはTypeScriptで構築されており、完全な型定義を提供します。グローバル登録を使用する際、すべてのコンポーネントが自動的に型付けされます。

```typescript
// グローバルコンポーネント型は自動的に利用可能
// TypeScriptサポートのための追加インポートは不要
```

## バリューオブジェクト

ライブラリには、一般的なデータ型のためのユーティリティバリューオブジェクトが含まれています：

```typescript
import { CurrencyValue, NumberValue } from '@reni-corp/reni-2c-ui/valueObjects'

const price = new CurrencyValue(1000, 'JPY')
const quantity = new NumberValue(5)
```

## Composables

一般的なUIパターンのための便利なComposablesにアクセスできます：

```typescript
import {
  useAppNotifications,
  useSyncedTabPanel,
  useToolChip,
  useAppDialogGuidance,
} from '@reni-corp/reni-2c-ui'
```

## リンク

- [デザインシステム](https://reni-design.web.app/)
- [Storybook ドキュメント](# Add your storybook URL here)

## ライセンス

このライブラリはプライベートパッケージです。