ui-components-playground

• Web フロントエンドの実装で少し面倒なやつをミニマムに実装するリポジトリです。腕試しや学習のため、あえてライブラリ使わない実装が多いです
• https://lainnao.github.io/ui-components-playground/ にアクセスするか、またはnpm run storybook を実行していただくかのいずれかで Storybook が立ち上がります

一覧

Sticky ヘッダー

• sticky-left-top : 上と左が固定された表
• sticky-left-top-right : 上と左と右が固定された表
• sticky-left-top-right-bottom : 上と左と右と下が固定された表

仮想スクロール

• virtual-scroll-vertical : 縦方向の仮想スクロール
• virtual-scroll-random-item-height : 行の高さが不定な縦方向の仮想スクロール
• virtual-scroll-vertical-horizontal : 縦横両方向の仮想スクロール
• virtual-scroll-vertical-horizontal-with-sticky-headers : 上と左に Sticky ヘッダーがある、縦横の仮想スクロールをした表

Note

• 表示範囲しかレンダリングしないため、以下の留意点はある
  1. cmd(ctrl) + f の検索機能に弱い。もし全文検索をしたい場合、別途検索窓を用意することになる
  2. 大量行選択からの cmd(ctrl) + c のコピーをしてもレンダリングしている範囲しかコピーしてくれない。もし同じ UX でコピーを成功させたい場合、コピー開始位置を状態管理することになりそう
• パフォーマンス問題への対応の場合は、代替としてページネーションを使う方法もある

ノード接続線

• connecting-line-svg : SVG で要素同士を線で結ぶ

ドラッグで並べ替え

• dnd-list-reorder : D&D でリストを並べ替える
• dnd-list-reorder-flip-animation : FLIP アニメーションつきで、D&D でリストを並べ替える

スクロールアニメーション

• animation-scroll-jack : 縦スクロールしてる途中で突然スクロールジャックされ、縦以外のスクロールやアニメーションが始まるやつ

FLIP アニメーション

• flip-animation : FLIP アニメーション

SVG アニメーション

• animation-svg : SVG アニメーション

複数人による同時編集

• realtime-sync-todo : 複数人による同時編集機能ありの TODO リスト
• realtime-sync-todo-with-presence : プレゼンス機能付き、複数人による同時編集機能ありの TODO リスト

パネルのリサイズ

• panel-resizable : ドラッグでパネルをリサイズ

音楽

• keyboard : マウスや MIDI デバイスで音を鳴らせる鍵盤

手書き風

• handwriting-look-container : 手書き風の四角背景
• handwriting-look-asterisk : 手書き風のアスタリスク

TODO

• primitive : プリミティブ
  • carousel : カルーセル
  • parallax-scroll : パララックススクロール
  • animation-page-transition : ページ遷移時にモーフィングする
  • animation-chart-div : div でアニメーションするチャート
  • animation-chart-canvas : canvas でアニメーションするチャート
  • animation-chart-svg : SVG でアニメーションするチャート
  • animation-svg-smil : SVG の SMIL でアニメーション
  • web-components : Web Components
  • calendar : カレンダー
  • date-time-picker : 日付時刻ピッカー
  • viewer-pdf : PDF ビューワー
  • viewer-image : 画像ビューワー
  • viewer-markdown : Markdown ビューワー
  • viewer-office : Office ファイル（Word、Excel、PowerPoint）ビューワー
  • viewer-3d : 3D モデルビューワー
  • viewer-video : 動画ビューワー
  • viewer-audio : 音声ビューワー
  • viewer-midi : MIDI ビューワー
  • viewer-epub : EPUB ビューワー
  • panel-movable : VSCode のように移動可能なパネル
  • sync-crdt : CRDT で複数人リアルタイム同時編集
  • sync-ot : OT で複数人リアルタイム同時
  • shape-snapping : 図形のスナッピング（ex.線を引く時に、近くの図形に吸着する挙動）
  • export-pdf : PDF エクスポート
  • export-office : Office ファイル（Word、Excel、PowerPoint）エクスポート
  • micro-frontend : マイクロフロントエンド
• combination : 組み合わせ
  • editor-rich-text : リッチテキストエディター
  • editor-video : 動画エディター
  • editor-audio : 音声エディター
  • editor-midi : MIDI エディター
  • editor-image : 画像エディター
  • editor-pdf : PDF エディター
  • spreadsheet : スプレッドシート（canvas 版、div 版）
  • map-google: 地図（Google Map の超簡易版）
  • map-mind : マインドマップ
  • realtime-sync-gantt : 複数人でリアルタイム同時編集できるガントチャート

MEMO

• ついでにフロントエンドの少し面倒〜かなり面倒な要件パターン全集を網羅できたら嬉しい。その時は UI のみでないのでリポジトリ名を変更する
  • 例
    • vite プラグイン
    • webpack/rspack プラグイン
    • nextjs のニッチな機能の利用
    • react のニッチな機能の利用
    • nodejs のニッチな機能の利用
    • devtools のニッチな機能の利用