@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.
Files changed (2) hide show
  1. package/README.md +0 -319
  2. 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`に追加されていることを確認してください
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@reni-corp/reni-2c-ui",
3
- "version": "0.3.29",
3
+ "version": "0.3.291",
4
4
  "type": "module",
5
5
  "repository": {
6
6
  "type": "git",