reni-2C-ui

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

インストール

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

または

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

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

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

npm install happy-dom

または

yarn add happy-dom

クイックスタート

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

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. コンポーネントの使用

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

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

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サポートのための追加インポートは不要

バリューオブジェクト

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

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

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

Composables

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

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

リンク

• デザインシステム
• [Storybook ドキュメント](# Add your storybook URL here)

ライセンス

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