tuqulore / jumpu-ui Goto Github PK
View Code? Open in Web Editor NEWユーティリティフレンドリーな UI コンポーネントライブラリー
Home Page: https://tuqulore.github.io/jumpu-ui/
License: MIT License
ユーティリティフレンドリーな UI コンポーネントライブラリー
Home Page: https://tuqulore.github.io/jumpu-ui/
License: MIT License
コンポーネント内で多用しており、コンポーネントクラス以外でも参照するニーズがあると考えられる
拡張するユーティリティ
ChatはGalleryとして用意して、内部で使っている要素をコンポーネントにする
https://inside.pixiv.blog/2021/07/01/151500 を読んだ
とはいえUtilitiesだけだと付与するクラスがとても多くなる
Utilitiesと組み合わされることを考慮したComponentsが欲しい
コンポーネントをちょっと変えたいというケースってなに
Componentsと組み合わせるUtilitiesは、BEM的にはModifierになりそう
必要なUtilitiesがあまりに多いのであれば、別のComponentsとして分けるとよいのか
例: .button
と .outlined-button
があるけどそれらは独立していて組み合わせる必要がない
.card-title
.card-body
.card-image
のようなBEM的にElementsになるものはあまり用意しなくていいのでは
Utilitiesで表現できる複雑でないものだと思うから
.button
がどの範囲でカスタマイズして使えて、アウトラインなデザインが欲しければ .outlined-button
を使ってね、というのはドキュメンテーションのスコープで取り組む
まずはButtonについてStorybook上で @Hidetaro7 が作業して @knokmki612 もみてみて議論することが必要そう
参考: https://circuit.sumup.com/?path=/story/introduction-welcome--page
このリポジトリより新しいtailwindcss pluginのスタイルが別のプライベートリポジトリに存在するので反映する。
Fontawesomeはfree版だと使いにくい(ルックアンドフィール的に)
もう少しスタイリッシュなものにしたい。
かといってPro版だと汎用性にかける。
以前の話だと、他のアイコンでも実装できることを考えたものにするということもあったが、
ここで見せるサンプルはFontawesome以外のものを使うことに決めたほうがよさそう。。
メモしとく。。
Tagの中にbuttonを使用した場合は閉じるボタンとしてスタイルされる
Tag自身もクリッカブルにしたい場合はbuttonタグでマークアップしたほうがよいが
おそらくbuttonタグのネストはHTMLの仕様に不適合
推奨するマークアップについての議論が必要
.is-active
を取り除く最近は整形はeslintではなくprettierにまかせたほうがいいのではないかと思っているため
現在はdemoディレクトリ内でstyle.cssを吐き出すところまでタスクを用意しているが、ローカルプレビュー用のサーバーを立てるなどは手動でおこなう必要がある。
ブラウザの下記のWarningが表示されている
react-dom.development.js:88 Warning: Invalid DOM property `class`. Did you mean `className`?
in i (created by MDXCreateElement)
in MDXCreateElement (created by MDXContent)
in wrapper (created by MDXCreateElement)
in MDXCreateElement (created by MDXContent)
in MDXContent (created by page)
in AddContext (created by page)
in page
in div (created by Context.Consumer)
in Styled(div) (created by DocsContainer)
in div (created by Context.Consumer)
in Styled(div) (created by DocsContainer)
in MDXProvider (created by DocsContainer)
in ThemeProvider (created by DocsContainer)
in SourceContainer (created by DocsContainer)
in DocsContainer
Originally posted by @Hidetaro7 in #79 (review)
TODO: 移行するStoryのリストアップ
GitHub Actionsで設定する
現在ツクロアのUIコンポーネントはFigmaのコンポーネントとして作成され公開される予定。
Figma to React Component https://www.figma.com/community/plugin/959795830541939498/Figma-to-React-Component でReactコンポーネントを生成して配置することも方法の一つとして考えられる。
その場合はtailwindcssは使わないこともあり得る
ringのバリアントはstoryにて示す。
#39 に関係するのだが、どこまで実装するべきか一定のルールは決めておきたい。
無理に利用する必要はないと言われているし、WAI-ARIAの仕様も広いしやりだしたらキリがないほど冗長になる。
個人的には必要最低限、例えばaria-selected
など、状態管理が必須な場合cssクラスで識別しない方法としては有用だと思うがその他の利用についても確認しておきたい。
役割を示す。例えば <nav>...</nav>
と<div role="navigation">...</div>
は同じ役割として認識される。
ナビゲーションが目的ならnav要素で良いが、HTML要素を詳細に要素名で役割を認識させるには限界があるため、roleがその役割を担う。
SVGにalt属性が存在しないため、altの代替としても利用可能。
buttonのようなコンポーネントまで付与するべきか?現在、icon-buttonおよびtabsに使っているが強い理由はない。
他の有名フレームワーク(Bootstrap, Bulma, Ant Design)を見ると、buttonに使っているケースは見受けられない。
選択状態を示す、従来はclass="is-xxxx"として使っていたが、それよりは価値が高いと感じるのでこちらは積極的に使っていきたい。
ID識別子を付与して、他要素との関連付けを行う。
例えばタブやモーダルウインドウなど、ボタンに対してコントロールしたい要素に紐付けるなど。
現状、tabsで使っている。
サイト内の現在地が自分自身だった場合などに使用する。
何かを処理中、例えば非同期ローディングなどをしめす
なぜしないのか?その理由をドキュメンテーションする。
といった理由が上げられる。
TODO: レビュー
画面遷移が生じるものについてはaタグ、そうでないものはbuttonタグで用意できた方がよい。その際、同じコンポーネントのスタイルであれば同じ見え方がされていてほしい
https://github.com/tuqulore/tuqulore-ui/blob/09a0ee3614f9d9f5341dfcfad16c310895fb9926/packages/tailwindcss/typography.js でtypographyを定義していますが、
@tailwindcss/typography
を使用するのであれば不要なのかな?とも思います
いかがでしょう? @Hidetaro7
現状だとprepareが走るタイミングでビルドが走るが、ソースを編集したらビルドが走る状態にしてローカルでのプレビューができるようにしたい
prettierのembeddedLanguageFormattingを有効にしたが、 "html``" のようなタグテンプレート内でしか整形されないことが分かった。
https://github.com/tuqulore/tailwindcss-tuqulore/blob/main/theme.js にあるプライマリカラーがリニューアル前のものなので、新しいものに変更する
#19 でlernaをセットアップしたがどのようにリリースするのか決まっていない
他のバリアントと同列ではなく、TailwindCSS独自のユーティリティ機能を使った例のように見えて、わざわざバリアントとして並べるのは違和感がある気がする。
解決策として考えられるのは、ドキュメントにして、使用例などで示す、その際にTailwindCSSのユーティリティだということもしっかり明記しておいたほうがある意味フェアじゃないだろうか?(うちで作ったものではないため)
ボタン内の文字数によって適切に感じるパディングが変わってくるように思います。
たとえば、現状のStorybook上のボタンは「ボタン」という文字なので、特に左右に多めにパディングが必要ですが、もう少し長い文字数であれば異なるパディングが必要ではないでしょうか。
どのように対処するとよいかから議論させてください。
React、Vue向けのコンポーネントで
実装がすみわけできてよいのでは
どのケースでどのように使うか、どのように使うべきでないか、といった文章による説明が必要。
mdx形式で表現するのがやりやすいと思われる
https://storybook.js.org/docs/html/api/mdx#writing-stories
roounded じゃなくて rounded に修正
現在aria-label属性とdata-label属性に同じような文字列が設定されており、それによってdata-labelがないのであればツールチップを表示しないような使い分けが可能になっています
現在のスタイルはツールチップがあらかじめ考慮されているので、ツールチップを表示しないことが考えにくいのであれば、aria-labelのみ設定する想定にしてもよいかと思いました
#41 の残タスク
OGP画像の見せかたは比較的パターンが決まっており、他のCSSフレームワークなどと比較するときの参考になったりする
TODO: レビュー
TODO: レビュー
インナーを取り除くことは出来ないでしょうか。
出来ないのであれば
"&:only-child": {
のような擬似クラスで表現できますでしょうか。
Originally posted by @knokmki612 in #26 (comment)
#ebebec この程度でいてほしい。
現在のスタイルの設計方針として
BEMとの比較
となっている。
この方針には .is-active
のようなインタラクティブな要素で用いるModifierがカバーできないという問題点がある。
ARIAで提供されているロールの一部は aria-expanded
などのような属性が用意されているので、それを使用して回避する。
現在 hideki-trial に随時新しいコミットが入っていっていますが、レビューと新規のコミットがいたちごっごのようになり取り扱いにくく感じています。
そこで
という方針をとることでプルリクエストが大きくなりすぎず課題解決していけると考えます。いかがでしょうか @Hidetaro7
プラグインとして作成すると、theme()関数でthemeに定義された変数を参照することはできるが、逆に言えばtheme()関数を使わなければtailwindcssのベーススタイルを反映したスタイルを組まないことになる。
上記を問題点を解決するため、
applyしたクラス群のスタイルを書き、全体あるいは個別のコンポーネント単位で
のようなバリエーションでimportして使えるような形で提供する。
個人的主観かもしれないのでご意見伺いたい。 @knokmki612 @Tomo416
多分Font Awesome Proの細くて小さいサイズだとまだマシに見えるかも。(これも主観)
を検討したプロトタイプがあるので、それをwebsiteディレクトリに移行する
いいねが有効の際のみせかたは検討したほうがいいのか気になりました
Likedというバリアントで表現されていたのですでに実装としては存在していますね
いいねがアクティブになっているように認識できていなかった、という話でしょうか(デザインにおける指摘)
Originally posted by @knokmki612 in #54 (comment)
いつもどおり
https://github.com/tailwindlabs/tailwindcss-typography
の通り導入してもエラーが起こる。
今後ドキュメントを書くときなど必要と考えている。
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.