【アップデート】ui-componentsに18個のコンポーネントを追加した

こんにちは、[Yui](https://twitter.com/yui_active)です。

引き続き週イチ発信をしていきます。
過去の週イチ発信は以下

- [【React + Typescriptで顔認識】tensorflowを使って画像にマスクをかけるアプリを作った](https://qiita.com/Yui_active/items/b8062b9f89f72c6865ed)
- [【React + Typescript】ボタン一つでコンポーネントのscssをコピーできるサイトを作った](https://qiita.com/Yui_active/items/1288fed0dcc24c71e159)

今回は、新しいアプリのリリースではないのですが、前回作った[ui-components](https://www.ui-components.com/)をより強くするべく、新しいコンポーネントを20個追加と少しバグ修正を行ったのでその報告です。

行ったことは以下です。

- バグ修正
- 4つのボタンを追加
- 2つのインプットを追加
- 新しくテキストアニメーションの項目を追加
- 新しく矢印の項目を追加
- 新しく吹き出しの項目を追加

中身のコードに関してはこの記事では扱いませんが、サイト上から各コンポーネントをクリックすればコードが見れるので、興味のある人はそこからクリックしてみて下さい。（宣伝）

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">ボタン一つでscssをコピーできるコンポーネント集作りました！<br>個人的によく実装するけど忘れがちなものを集めました。<br>素材はこれからどんどん増やしていきます！<br>頑張って作ったので拡散してもらえると嬉しいです。<a href="https://t.co/q9mYT3W4aL">https://t.co/q9mYT3W4aL</a> <a href="https://t.co/xK4Lz8rbyl">pic.twitter.com/xK4Lz8rbyl</a></p>&mdash; Yui 🌗 Yuiko Ito (@yui_active) <a href="https://twitter.com/yui_active/status/1398990248609161223?ref_src=twsrc%5Etfw">May 30, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## バグ修正
行ったバグ修正は以下です
- モーダルが開いているときにどこをクリックしてもモーダルが閉じてしまう

以下の部分です。
[![Image from Gyazo](https://i.gyazo.com/202a68f4462402edf371b782c1c323a7.gif)](https://gyazo.com/202a68f4462402edf371b782c1c323a7)

今回コードを表示するという性質上、モーダルを開いた状態で一部分だけコピーしたりすることがあるとは思うのですが、今のままではモーダルを開いてどこをクリックしても閉じてしまいます。

それを今回の修正で以下のようにしました。

[![Image from Gyazo](https://i.gyazo.com/c2a0bd6c6aaa55c042d6ab9b869720f7.gif)](https://gyazo.com/c2a0bd6c6aaa55c042d6ab9b869720f7)

モーダル内部をクリックしても閉じないように。
ただし、モーダル外部をクリックしたら閉じるというのは個人的に欲しかったので残したままにしてます。

実装方法としては子要素から親要素のクリックを伝播させないようにすれば良いので、内部の子要素に以下の関数をonClick要素で追加しただけの簡単実装です。

```react
  const stopPropagation = (e: { stopPropagation: () => void }) => {
    e.stopPropagation();
  };
```

参考→https://ja.reactjs.org/docs/events.html

## ボタンの追加

以下の4つを追加しました
[![Image from Gyazo](https://i.gyazo.com/58c38dd277a6669a2305c3aa5eac0a4f.gif)](https://gyazo.com/58c38dd277a6669a2305c3aa5eac0a4f)

## インプットの追加

以下の2つを追加しました
[![Image from Gyazo](https://i.gyazo.com/53f15ba54cc914618781d5dae62b0173.gif)](https://gyazo.com/53f15ba54cc914618781d5dae62b0173)

もっと追加しようと思ったんですが、input要素のレイアウトってそんなにないですね笑
たまに凝ったデザインが来るときがあって、そのときは結構悩んだりしますが、いざ書くとなるとあんまり思いつきませんでした。

## テキストアニメーションの追加

新しく``Text``ページを用意して、以下の4つを追加しました
個人的に最後のウネウネしてるやつは気に入っています（どこで使うんだ感もありますが笑）

[![Image from Gyazo](https://i.gyazo.com/df7822f488a5029efdea84c633729b05.gif)](https://gyazo.com/df7822f488a5029efdea84c633729b05)

ちなみに今回spanタグで一文字ずつ区切ってるんですが、一文字ずつ等間隔でアニメーションをずらすために毎回``&:nth-child(1)``、``&:nth-child(2)``とかでそれぞれ書くのが嫌だったので、なにかいい方法ないかなと調べたら``@for``を使えるというのを今更ながら知りました。

```scss
  @for $i from 1 through 5 {
    &:nth-child(#{$i + 1}) {
      $delay: $i * 0.1 + s;
      animation-delay: $delay;
    }
  }
```

参考→[SCSS 内でのループ処理 (@for, @while)](https://maku77.github.io/sass/for-while.html)

ただ、さすがに``span``で区切ってるとhtml部分が長くなってしまったので、そろそろhtml自体もscssみたいにシンタックスハイライトで見やすくできるようにして、モーダル内でタブ切り分けをできるようにしたほうが良いかもしれないなとは思いました。（イメージはcodepenみたいな感じ）
そのうちやると思います。


## 矢印の追加

以下の4つを追加しました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/670446/06f8af8b-6b34-0c2f-e821-f632cb5b5c79.png)

アニメーションはないので一気にしょぼくなったように感じます。笑

簡単だけど微妙に実装がめんどいと感じるので入れてみました。

## 吹き出しの追加

吹き出し実装微妙にめんどいですよね
ということで以下の4つを追加しました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/670446/604a9cf2-330e-4f86-5359-1a763ac0427c.png)


## まとめ

というわけで、週イチ発信3週目は先週作ったサービスの中身を充実させるという感じになりました。
できれば20個追加とかにしてキリの良い数字で締めたかった感はありますが、もう力尽きたので次回にまわします。

今後も色々追加していこうと思うので、なにかリクエストなどあればお待ちしております！