npm library「@kenmori/corner-islands」をpublishしました
[@kenmori/corner-islands]
https://www.npmjs.com/package/@kenmori/corner-islands
今芽が出てきたところですので大切に育てていこうと思います
解決すること
複数のAndとOr条件が整列している場合、
隣り合う And + Andはグルーピング
And + Or + Andは Or以降のAndをグルーピングする始まり
などどの順番で出現するかでグルーピング処理が変わるかと思います
これらは海に浮かぶ島々のようだと思いネーミングしました
私は実際border-radiusを決める際に使っています
条件によってグルーピング処理し、利用したい場合を解決してくれるものになります
他で使えるケースを実際AIに聞いてみました
getIslandのロジックは、要素やデータの連続性を考慮する必要がある様々なシーンで応用可能です。
border-rudiusの指定以外に何かこのロジックでできることはありますか？
1. カスタムスタイルの適用
要素が連続しているかどうかに基づいて、異なるスタイル（背景色、テキストの太さ、境界線のスタイルなど）を適用することができます。例えば、連続した要素には特定の色を付けるなどが考えられます。
2. 連続データのグルーピング
ロジックを使って、データの連続性を判定し、連続したデータをグルーピングする処理に応用できます。たとえば、カレンダーアプリで連続した日付を一つのブロックとして表示する場合に使えます。
3. フォームの条件設定
フォームの入力フィールドが連続して関連する場合に、グルーピングや条件付き表示を行うために使用できます。たとえば、連続するフィールドに同じバリデーションを適用する場合などです。
4. ナビゲーションメニューの強調
サイドバーやメニューバーで、選択されているメニュー項目やその前後の項目を強調表示するために使用できます。選択された項目とその前後をグループ化し、スタイルを変更できます。
5. アニメーションのトリガー
要素がつながっているかどうかを基にアニメーションをトリガーできます。例えば、連続した要素に対してフェードインやスライドインなどのアニメーションを適用する際に使用できます。
6. ツールチップやポップオーバーの表示
つながっている要素に対して、一つのツールチップやポップオーバーをまとめて表示するために使うことができます。例えば、連続した要素を一つのグループとして扱い、その上に情報を表示する場合に有効です。
7. レイアウトの調整
要素のつながりを基に、グリッドやフレックスボックスのレイアウトを動的に変更することができます。連続した要素を一つの行や列にまとめたり、逆に分離したりすることが可能です。
8. 条件付きロジックのトリガー
連続した条件が満たされた場合に特定のロジックを実行するトリガーとして利用できます。例えば、連続した「And」条件が揃ったときに特定の処理を実行するなどが考えられます。これらは副次的な産物ですので、実際に使ってみて
exampleを充実させてみようと思います