@reni-corp/reni-2c-ui 0.3.29 → 0.3.291
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +0 -319
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,319 +0,0 @@
|
|
|
1
|
-
# reni-2C-ui
|
|
2
|
-
|
|
3
|
-
モダンなストアフロントアプリケーション構築のための、美しくアクセシブルなコンポーネントを提供する包括的なVue 3コンポーネントライブラリです。
|
|
4
|
-
|
|
5
|
-
## インストール
|
|
6
|
-
|
|
7
|
-
```bash
|
|
8
|
-
npm install @reni-corp/reni-2c-ui
|
|
9
|
-
```
|
|
10
|
-
|
|
11
|
-
または
|
|
12
|
-
|
|
13
|
-
```bash
|
|
14
|
-
yarn add @reni-corp/reni-2c-ui
|
|
15
|
-
```
|
|
16
|
-
|
|
17
|
-
**RnHtmlコンポーネントをSSR環境で利用する場合**
|
|
18
|
-
|
|
19
|
-
SSR(サーバーサイドレンダリング)環境で`RnHtml`コンポーネントを使用する場合は、`happy-dom`のインストールが必要です。
|
|
20
|
-
|
|
21
|
-
```bash
|
|
22
|
-
npm install happy-dom
|
|
23
|
-
```
|
|
24
|
-
|
|
25
|
-
または
|
|
26
|
-
|
|
27
|
-
```bash
|
|
28
|
-
yarn add happy-dom
|
|
29
|
-
```
|
|
30
|
-
|
|
31
|
-
## クイックスタート
|
|
32
|
-
|
|
33
|
-
### 1. プラグインのインポートとインストール
|
|
34
|
-
|
|
35
|
-
```typescript
|
|
36
|
-
import { createApp } from 'vue'
|
|
37
|
-
import { createReniOneUI } from '@reni-corp/reni-2c-ui'
|
|
38
|
-
import '@reni-corp/reni-2c-ui/dist/style.css'
|
|
39
|
-
|
|
40
|
-
const app = createApp(App)
|
|
41
|
-
app.use(createReniOneUI())
|
|
42
|
-
```
|
|
43
|
-
|
|
44
|
-
### 2. コンポーネントの使用
|
|
45
|
-
|
|
46
|
-
```vue
|
|
47
|
-
<template>
|
|
48
|
-
<rn-button variant="primary" @click="handleClick"> Click me </rn-button>
|
|
49
|
-
<rn-card>
|
|
50
|
-
<rn-text>Hello World</rn-text>
|
|
51
|
-
</rn-card>
|
|
52
|
-
</template>
|
|
53
|
-
```
|
|
54
|
-
|
|
55
|
-
### 3. 個別コンポーネントのインポート
|
|
56
|
-
|
|
57
|
-
```typescript
|
|
58
|
-
import { Button, Card, Text } from '@reni-corp/reni-2c-ui'
|
|
59
|
-
|
|
60
|
-
export default {
|
|
61
|
-
components: {
|
|
62
|
-
RnButton: Button,
|
|
63
|
-
RnCard: Card,
|
|
64
|
-
RnText: Text,
|
|
65
|
-
},
|
|
66
|
-
}
|
|
67
|
-
```
|
|
68
|
-
|
|
69
|
-
## コンポーネントカテゴリ
|
|
70
|
-
|
|
71
|
-
### Elements(要素)
|
|
72
|
-
|
|
73
|
-
基本的なUIビルディングブロック: `Button`, `Icon`, `Text`, `TextField`, `SelectBox`, `Checkbox`, `RadioButton`, `Alert`, `Spinner` など
|
|
74
|
-
|
|
75
|
-
### Layouts(レイアウト)
|
|
76
|
-
|
|
77
|
-
レイアウトと構造のコンポーネント: `Stack`, `Card`, `Grid`, `List`, `Section`, `Page`
|
|
78
|
-
|
|
79
|
-
### Interactive(インタラクティブ)
|
|
80
|
-
|
|
81
|
-
インタラクティブなコンポーネント: `Modal`, `Dialog`, `Gallery`, `Carousel`, `Tabs`, `Notification`, `DropDown`
|
|
82
|
-
|
|
83
|
-
### Navigation(ナビゲーション)
|
|
84
|
-
|
|
85
|
-
ナビゲーションコンポーネント: `AppBar`, `Drawer`, `BottomBar`
|
|
86
|
-
|
|
87
|
-
### Features(機能)
|
|
88
|
-
|
|
89
|
-
ビジネス特化型コンポーネント: `ProductList`, `Schedule`, `Hero`, `AnnounceBar`, `CategoryBanner`, `VariationSelector`
|
|
90
|
-
|
|
91
|
-
## TypeScript サポート
|
|
92
|
-
|
|
93
|
-
このライブラリはTypeScriptで構築されており、完全な型定義を提供します。グローバル登録を使用する際、すべてのコンポーネントが自動的に型付けされます。
|
|
94
|
-
|
|
95
|
-
```typescript
|
|
96
|
-
// グローバルコンポーネント型は自動的に利用可能
|
|
97
|
-
// TypeScriptサポートのための追加インポートは不要
|
|
98
|
-
```
|
|
99
|
-
|
|
100
|
-
## バリューオブジェクト
|
|
101
|
-
|
|
102
|
-
ライブラリには、一般的なデータ型のためのユーティリティバリューオブジェクトが含まれています:
|
|
103
|
-
|
|
104
|
-
```typescript
|
|
105
|
-
import { CurrencyValue, NumberValue } from '@reni-corp/reni-2c-ui/valueObjects'
|
|
106
|
-
|
|
107
|
-
const price = new CurrencyValue(1000, 'JPY')
|
|
108
|
-
const quantity = new NumberValue(5)
|
|
109
|
-
```
|
|
110
|
-
|
|
111
|
-
## Composables
|
|
112
|
-
|
|
113
|
-
一般的なUIパターンのための便利なComposablesにアクセスできます:
|
|
114
|
-
|
|
115
|
-
```typescript
|
|
116
|
-
import {
|
|
117
|
-
useAppNotifications,
|
|
118
|
-
useSyncedTabPanel,
|
|
119
|
-
useToolChip,
|
|
120
|
-
useAppDialogGuidance,
|
|
121
|
-
} from '@reni-corp/reni-2c-ui'
|
|
122
|
-
```
|
|
123
|
-
|
|
124
|
-
## リンク
|
|
125
|
-
|
|
126
|
-
- [デザインシステム](https://reni-design.web.app/)
|
|
127
|
-
- [Storybook ドキュメント](# Add your storybook URL here)
|
|
128
|
-
|
|
129
|
-
## 結合テスト
|
|
130
|
-
|
|
131
|
-
ローカルで開発中のライブラリバージョンとアプリケーションを統合してテストする場合、アプリ側の`package.json`に`resolutions`フィールドを追加することで、ローカルビルドされたパッケージを強制的に使用できます。
|
|
132
|
-
|
|
133
|
-
### セットアップ手順
|
|
134
|
-
|
|
135
|
-
1. このライブラリをビルド:
|
|
136
|
-
|
|
137
|
-
```bash
|
|
138
|
-
yarn build
|
|
139
|
-
```
|
|
140
|
-
|
|
141
|
-
2. アプリ側の`package.json`に以下を追加:
|
|
142
|
-
|
|
143
|
-
```json
|
|
144
|
-
{
|
|
145
|
-
"resolutions": {
|
|
146
|
-
"@reni-corp/reni-2c-ui": "file:/path/to/reni-2C-ui"
|
|
147
|
-
}
|
|
148
|
-
}
|
|
149
|
-
```
|
|
150
|
-
|
|
151
|
-
3. アプリ側で依存関係を再インストール:
|
|
152
|
-
|
|
153
|
-
```bash
|
|
154
|
-
yarn install
|
|
155
|
-
```
|
|
156
|
-
|
|
157
|
-
## 開発
|
|
158
|
-
|
|
159
|
-
### 必要なソフトウェア
|
|
160
|
-
|
|
161
|
-
- Node.js (バージョン: 20.9.0)
|
|
162
|
-
- YARN (バージョン: 4.10.0)
|
|
163
|
-
|
|
164
|
-
### セットアップ
|
|
165
|
-
|
|
166
|
-
1. corepackを有効化:
|
|
167
|
-
|
|
168
|
-
```shell
|
|
169
|
-
corepack enable
|
|
170
|
-
```
|
|
171
|
-
|
|
172
|
-
2. Yarn 4.10.0 をプロジェクトに設定:
|
|
173
|
-
|
|
174
|
-
```shell
|
|
175
|
-
yarn set version 4.10.0
|
|
176
|
-
```
|
|
177
|
-
|
|
178
|
-
3. 環境変数の設定
|
|
179
|
-
|
|
180
|
-
`.yarnrc.yml`はリポジトリにコミット済みです。環境変数を設定する必要があります。
|
|
181
|
-
|
|
182
|
-
#### 1Password CLIを使用する場合(推奨)
|
|
183
|
-
|
|
184
|
-
`.env`ファイルに以下を記載してください:
|
|
185
|
-
|
|
186
|
-
```shell
|
|
187
|
-
# .env
|
|
188
|
-
GITHUB_PACKAGES_ACCESS_TOKEN="op://RMC 開発/GITHUB_PACKAGES_ACCESS_TOKEN - ReniOneUI/credential"
|
|
189
|
-
FONT_AWESOME_NPM_TOKEN="op:///RMC 開発/FONT_AWESOME_TOKEN/credential"
|
|
190
|
-
```
|
|
191
|
-
|
|
192
|
-
その後、`opr`コマンドで依存関係をインストールします:
|
|
193
|
-
|
|
194
|
-
```shell
|
|
195
|
-
opr yarn install
|
|
196
|
-
```
|
|
197
|
-
|
|
198
|
-
#### 1Password CLIを使用しない場合
|
|
199
|
-
|
|
200
|
-
環境変数を直接設定してください:
|
|
201
|
-
|
|
202
|
-
```shell
|
|
203
|
-
export GITHUB_PACKAGES_ACCESS_TOKEN="<your-token>"
|
|
204
|
-
export FONT_AWESOME_NPM_TOKEN="<your-token>"
|
|
205
|
-
yarn install
|
|
206
|
-
```
|
|
207
|
-
|
|
208
|
-
### 利用可能なスクリプト
|
|
209
|
-
|
|
210
|
-
- `yarn dev` - 開発サーバーを起動
|
|
211
|
-
- `yarn build` - ライブラリをビルド
|
|
212
|
-
- `yarn storybook` - Storybook開発サーバーを起動
|
|
213
|
-
- `yarn lint` - ESLintを実行
|
|
214
|
-
- `yarn test` - テストを実行
|
|
215
|
-
|
|
216
|
-
## 1Password CLIを使用したセキュアな環境変数管理
|
|
217
|
-
|
|
218
|
-
このプロジェクトでは、APIキーやアクセストークンなどの機密情報を安全に管理するために、1Password CLIを使用します。
|
|
219
|
-
|
|
220
|
-
### 1Password CLIのインストール
|
|
221
|
-
|
|
222
|
-
#### macOS (Homebrew)
|
|
223
|
-
|
|
224
|
-
```shell
|
|
225
|
-
brew install --cask 1password-cli
|
|
226
|
-
```
|
|
227
|
-
|
|
228
|
-
#### Linux
|
|
229
|
-
|
|
230
|
-
```shell
|
|
231
|
-
curl -sS https://downloads.1password.com/linux/keys/1password.asc | sudo gpg --dearmor --output /usr/share/keyrings/1password-archive-keyring.gpg
|
|
232
|
-
echo "deb [arch=$(dpkg --print-architecture) signed-by=/usr/share/keyrings/1password-archive-keyring.gpg] https://downloads.1password.com/linux/debian/$(dpkg --print-architecture) stable main" | sudo tee /etc/apt/sources.list.d/1password.list
|
|
233
|
-
sudo mkdir -p /etc/debsig/policies/AC2D62742012EA22/
|
|
234
|
-
curl -sS https://downloads.1password.com/linux/debian/debsig/1password.pol | sudo tee /etc/debsig/policies/AC2D62742012EA22/1password.pol
|
|
235
|
-
sudo mkdir -p /usr/share/debsig/keyrings/AC2D62742012EA22
|
|
236
|
-
curl -sS https://downloads.1password.com/linux/keys/1password.asc | sudo gpg --dearmor --output /usr/share/debsig/keyrings/AC2D62742012EA22/debsig.gpg
|
|
237
|
-
sudo apt update && sudo apt install 1password-cli
|
|
238
|
-
```
|
|
239
|
-
|
|
240
|
-
#### Windows
|
|
241
|
-
|
|
242
|
-
```powershell
|
|
243
|
-
winget install 1Password.CLI
|
|
244
|
-
```
|
|
245
|
-
|
|
246
|
-
#### インストール確認
|
|
247
|
-
|
|
248
|
-
```shell
|
|
249
|
-
op --version
|
|
250
|
-
```
|
|
251
|
-
|
|
252
|
-
### 1Passwordの認証
|
|
253
|
-
|
|
254
|
-
初回のみ、1Passwordアカウントでサインインします:
|
|
255
|
-
|
|
256
|
-
```shell
|
|
257
|
-
op signin
|
|
258
|
-
```
|
|
259
|
-
|
|
260
|
-
### シェル設定への`opr`関数の追加
|
|
261
|
-
|
|
262
|
-
`.zshrc`(zshを使用している場合)または`.bashrc`(bashを使用している場合)に以下の関数を追加します:
|
|
263
|
-
|
|
264
|
-
```shell
|
|
265
|
-
opr() {
|
|
266
|
-
who=$(op whoami)
|
|
267
|
-
if [[ $? != 0 ]]; then
|
|
268
|
-
eval $(op signin)
|
|
269
|
-
fi
|
|
270
|
-
|
|
271
|
-
if [[ -f "$PWD/.env" ]]; then
|
|
272
|
-
op run --env-file="$PWD"/.env -- "$@"
|
|
273
|
-
elif [[ -f "$PWD/.env.local" ]]; then
|
|
274
|
-
op run --env-file="$PWD"/.env.local -- "$@"
|
|
275
|
-
else
|
|
276
|
-
"$@"
|
|
277
|
-
fi
|
|
278
|
-
}
|
|
279
|
-
```
|
|
280
|
-
|
|
281
|
-
設定を反映するには、以下を実行します:
|
|
282
|
-
|
|
283
|
-
```shell
|
|
284
|
-
# zshの場合
|
|
285
|
-
source ~/.zshrc
|
|
286
|
-
|
|
287
|
-
# bashの場合
|
|
288
|
-
source ~/.bashrc
|
|
289
|
-
```
|
|
290
|
-
|
|
291
|
-
### 開発サーバーの起動
|
|
292
|
-
|
|
293
|
-
`opr`関数を使用して開発サーバーを起動します:
|
|
294
|
-
|
|
295
|
-
```shell
|
|
296
|
-
opr yarn dev
|
|
297
|
-
```
|
|
298
|
-
|
|
299
|
-
### その他のコマンド例
|
|
300
|
-
|
|
301
|
-
```shell
|
|
302
|
-
# ビルド
|
|
303
|
-
opr yarn build
|
|
304
|
-
|
|
305
|
-
# 型チェック
|
|
306
|
-
opr yarn typecheck
|
|
307
|
-
|
|
308
|
-
# リント
|
|
309
|
-
opr yarn lint
|
|
310
|
-
|
|
311
|
-
# Storybook
|
|
312
|
-
opr yarn storybook
|
|
313
|
-
```
|
|
314
|
-
|
|
315
|
-
### セキュリティ上の注意事項
|
|
316
|
-
|
|
317
|
-
- ⚠️ `.env`ファイルには実際のAPIキーやトークンではなく、1Passwordの参照パス(`op://`形式)のみを記載してください
|
|
318
|
-
- ⚠️ 実際のAPIキーやトークンをコードやコミットに含めないでください
|
|
319
|
-
- ⚠️ `.env`ファイルが`.gitignore`に追加されていることを確認してください
|