jaoafa/jao-ui

🎨 jao UI Components with Vue.js 3

jao UI Components with Vue.js 3 💣✨

jao UI is Vue based component library for jao community that provides Minecraft multi-server services.

🚀 Install

You can install jao-ui using npm:

$ npm install @jaoafa/jao-ui

or using yarn:

$ yarn add @jaoafa/jao-ui

📖 Documentation

You can find for more docs on https://jaoafa.github.io/jao-ui.
To see actual display, go to Storybook.

🛠 Contributing

Developers interested in contributing should read CONTRIBUTING.md.

📑 License

Licensed under the MIT License.

jao-ui's Issues

テキスト入力のコンポーネントを作成する

テキストを入力するコンポーネントを新規作成する

StyleLintを導入する

CSS/Sassの書き方を揃えるためにESLintを入れる。

グリッドシステムのコンポーネントを作成する

グリッドシステムのコンポーネントを新規作成する。

テキスト入力コンポーネントの枠線内に任意のコンテンツを追加できるslotの追加

Describe the idea you'd like

j-text-field j-textarea コンポーネントの枠線内に、任意のコンテンツを追加できるslotを追加する。

Additional context

https://vuetifyjs.com/ja/api/v-text-field/#slots-prepend-inner
https://vuetifyjs.com/ja/api/v-text-field/#slots-append

不要になっている @vue/compiler-sfc を削除する

@vue/compiler-sfc は、 [email protected] 以降でメインの依存関係として含まれている。
https://www.npmjs.com/package/@vue/compiler-sfc

vue/compiler-sfc でアクセスできるらしいので、個別に追加している @vue/compiler-sfc を削除する。

commitlintをいれる

commitlintをいれる。
https://commitlint.js.org/

Vue3への対応

Vue3に対応する。

このへんとか見る。
https://v3.vuejs.org/
https://www.codegrid.net/articles/2020-vue3-1/

色の変数をJSとSassで共通化する

JavaScript と Sass の両方で使用している、色の変数の値を共通のファイルから読み込むようにし、2重管理を解消する。

テキスト入力コンポーネントの前後に追加した任意コンテンツのクリックイベントの追加

Describe the idea you'd like

j-text-field j-textarea コンポーネントの前後へ prepend prepend-inner append append-outer で追加した任意のコンテンツがクリックされた場合のイベントを検知できるようにする。

Additional context

https://vuetifyjs.com/ja/api/v-text-field/#events

Stylelint14の対応

Stylelintのバージョン14への移行対応を行う。
https://stylelint.io/migration-guide/to-14/

required が require になっている

j-image コンポーネントの src prop に require: true が指定されているが、正しくは required: true なので修正する。

直線のプログレスバーをローディングのコンポーネントに追加する

ローディングの表示は円形以外にも必要だと思うので j-progress コンポーネントに直線のものを追加する。

テキストエリアのコンポーネントを作成する

Describe the idea you'd like

テキストエリアのコンポーネント j-textarea を新規作成する。

Additional context

https://vuetifyjs.com/ja/components/textareas/

テキスト入力コンポーネントにrequired属性を付与

Describe the idea you'd like

j-text-field j-textarea コンポーネントでrequired選択時、iuput・textareaタグにrequired属性を付与する。

Additional context

https://developer.mozilla.org/ja/docs/Web/HTML/Attributes/required

ドキュメントにある表の項目表示位置が正しくない

一部コンポーネントの props の表で、文章が正しい列に表示されていない。

ローディングアニメーションのコンポーネントを作成する

ローディングアニメーションはボタン以外でも使うので、Vuetifyみたいに別のコンポーネントとして用意する。
https://vuetifyjs.com/ja/components/progress-circular/

#12 から分離

ボタンのコンポーネントを作成する

ボタンのコンポーネントを新規作成する。

ボタンコンポーネントがリンクとして機能しない

j-button コンポーネントに href prop もしくは to prop を指定した場合に、クリックしてもページ移動せず、リンクとして機能しない。

Feature: テーブルコンポーネント

なにかしらのデータを表示する場合に、テーブルを扱うケースがあるのでテーブルコンポーネントが欲しいです。(少なくとも直近では jaoafa/jaoweb#32)
横スクロール・ページネーション・ソーティングあたりがあると嬉しいです。

参考までに Vuetify の v-data-table を…
https://vuetifyjs.com/en/components/data-tables/

他の issue を全て追えてないので、被っていたら非常に申し訳ない。

依存関係更新のプルリクエストでcodecovを実行しないようにする

dependabot や renovate のPRで、テストの実行結果を可視化するのは必要ないと思われるので実行しないようにする。
テストの実行は、依存関係の更新によって動作しなくなるなどありそうなのでチェックする。
（テスト実行後の結果をcodecovに送信しない）

件数が0の場合に件数表示が負の値になる

j-table の items が0件の場合に j-table-footer の件数表示が「-1-0」になる。

Sassを使えるようにする

Vueコンポーネント内でSassを記述できるようにする。

サイズ関連の処理を共通化

CSSに記述できる値かどうか判定する関数など、複数のコンポーネントで使用するようなサイズ関連の関数・定数を共通して使えるよう別ファイルに分割する。

ページネーションコンポーネントの線の色を変更できるようにする

ページネーションコンポーネントの、現在選択中ページ番号の下線の色を変更できるよう、 color props を追加する。
https://jaoui.vercel.app/?path=/story/components-pagination--default

画像のコンポーネントを作成する

画像のコンポーネント j-image を新規作成する。

ラジオボタン入力のコンポーネントを作成する

Describe the idea you'd like

ラジオボタン入力のコンポーネント j-radio を新規作成する。

Additional context

https://vuetifyjs.com/ja/components/radio-buttons/

色関連の処理を共通化

色名からカラーコードを算出する関数や、16進数表記からRGBに変換する関数など、複数のコンポーネントで使用するような色関連の関数・定数を共通して使えるよう別ファイルに分割する。

パンくずリストのコンポーネントを作成する

パンくずリストのコンポーネント j-breadcrumbs を新規作成する。

コンポーネントの使用方法をまとめたドキュメントを作成する

jao UI に含まれているコンポーネントの種類や、各コンポーネントの props や event についてドキュメントにまとめる。
Github Pages でホスティングする。開発時に docs/ ディレクトリは使用していないので、 docs/ ディレクトリにドキュメントをまとめて置いておく。

Semantic Release を入れる

Describe the idea you'd like

semantic-release を追加する。
現在のrelease用workflowを置き換え。

Additional context

https://krdlab.hatenablog.com/entry/2020/01/03/163307
https://dev.classmethod.jp/articles/github-actions-semantic-release-sample/
https://semantic-release.gitbook.io/semantic-release/

設定を package.json に記述する説明が各所でなされているが、 .releaserc.js とか .releaserc.json を配置しても読み込めるらしい。
https://semantic-release.gitbook.io/semantic-release/usage/configuration#configuration-file

ボタンコンポーネントを無効表示にできるようにする

disabled Props を追加し true のときにクリックできないようにする。

WorkflowにJestのテスト実行を追加

GitHub Actions のワークフローに Jest の実行を追加する。

画像コンポーネントにローディングアニメーションを追加する

表示する画像を読み込み中にローディングアニメーションを表示する。

開発環境をViteに切り替える

vue-cli を使用している開発環境を、流行りの Vite で作り直す。

ビルド時のエラーを修正する

npm run build 実行時に以下メッセージが表示されるので、 build/rollup.config.js を修正する。

(!) Plugin replace: @rollup/plugin-replace: 'preventAssignment' currently defaults to false. It is recommended to set this option to `true`, as the next major version will default this option to `true`.

ブランドカラーを指定した場合の文字色が正しくない

ブランドカラーを背景色に指定した場合の文字色について、コントラスト比から算出しているため、各サービスが指定している色とは異なる組み合わせとなっているものがある。
（Discordの場合、ブランドカラーが背景色に指定されている場合の文字色は白だが、黒色で出力されてしまう）

ブランドカラーで異なる色となってしまうものについて、例外として個別に処理する。

カルーセルのコンポーネントを作成する

画像のスライドショーなどで使う、カルーセルのコンポーネント j-carousel を新規作成する。

Git-Flowのreleaseブランチのマージを自動化する

Git-Flow では release ブランチを main と dev にマージする必要があるので自動化する。(参考)

画像コンポーネントに load イベントを追加する

j-image コンポーネントで画像の読み込みが完了したときに load イベントをemitする。

テストフレームワークの導入

不具合を未然に防ぐため、テストを行うためのフレームワークを導入する。

コンポーネント内のアイコンをアイコンコンポーネントに置き換える

j-pagination や j-table 内で使われているアイコンを j-icon に置き換える。

チェックボックス入力のコンポーネントを作成する

Describe the idea you'd like

チェックボックス入力のコンポーネント j-checkbox を新規作成する。

Additional context

https://vuetifyjs.com/ja/components/checkboxes/

ESLintを導入する

コードの書き方を揃えるためにESLintを入れる。

ボタンがdisabled時に選択できてしまう

disabled が true のとき、見た目が変化しているだけで属性が付与されていない。
Tabキー等で選択できてしまうため、 disabled 属性を付与する。

TypeScriptの導入

TypeScriptを導入する。

Dependency Dashboard

This issue provides visibility into Renovate updates and their statuses. Learn more

Other Branches

These updates are pending. To force PRs open, click the checkbox below.

• chore(deps): update dependency ansi-regex to 5.0.1 [security]
• chore(deps): update dependency immer to 9.0.6 [security]
• chore(deps): update dependency json-schema to 0.4.0 [security]
• chore(deps): update dependency nth-check to 2.0.1 [security]
• chore(deps): update dependency trim to 0.0.3 [security]

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): update babel monorepo to v7.16.5 (@babel/core, @babel/preset-env, @babel/preset-typescript)
• chore(deps): update dependency lint-staged to v12.1.3
• chore(deps): update dependency sass to v1.45.1
• chore(deps): update dependency ts-jest to v27.1.2
• chore(deps): update dependency typescript to v4.5.4
• chore(deps): update dependency stylelint to v14.2.0
• chore(deps): update typescript-eslint monorepo to v5.8.0 (@typescript-eslint/eslint-plugin, @typescript-eslint/parser)
• chore(deps): update dependency eslint-plugin-promise to v6
• Click on this checkbox to rebase all open PRs at once

Ignored or Blocked

These are blocked by an existing closed PR and will not be recreated unless you click a checkbox below.

• chore(deps): update dependency css-loader to v6
• chore(deps): update dependency eslint to v8
• chore(deps): update dependency sass-loader to v12
• chore(deps): update dependency style-loader to v3

---

• Check this box to trigger a request for Renovate to run again on this repository

ボタンコンポーネントにローディングアニメーションを追加する

loading Props を追加し true のときにローディングアニメーションを表示する。

装飾のないボタンを使用できるようにする

ボタンコンポーネントに、装飾を外すオプションを追加する。
オプションが有効な場合に、ボタンの右と下に線が描画されるのを非表示にする。

PR時にLintを実行する

dev とか main へのPR時などに npm run lint で ESLint と stylelint を実行したい。

ボタンをTabキーで選択した際にhover時と同じ表示にならない

Tabキーでフォームを操作する場合に、ボタンにカーソルを合わせても見た目が変化しない。
フォーカスが合っているのかいないのかが判別できない状態はよくないので、hover時と同じ表示となるようにする。