@reni-corp/reni-2c-ui v0.2.21

reni-2C-ui

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

インストール

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

または

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

クイックスタート

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, VariationSelector

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)

開発

必要なソフトウェア

• Node.js (バージョン: 20.9.0)
• YARN (バージョン: 4.2.2)

セットアップ

1. corepackを有効化：

corepack enable

2. yarnをインストール：

yarn set version 4.2.2

3. 依存関係をインストール：

yarn install

利用可能なスクリプト

• yarn dev - 開発サーバーを起動
• yarn build - ライブラリをビルド
• yarn storybook - Storybook開発サーバーを起動
• yarn lint - ESLintを実行
• yarn test - テストを実行