feat: TextLinkをnext/linkなどのラップされたコンポーネントに対応

[masa0527]

Related URL

https://smarthr.atlassian.net/browse/SHRUI-1018

Overview

UpwardLink をSPA対応するために、内部で使われている TextLinkコンポーネントにelementAsプロパティを追加しました。このelementAsプロパティに要素を指定した場合、指定された要素に固有のpropsが自動的に引き継がれるようになります。

What I did

• TextLinkコンポーネントにジェネリック型Tを導入しました。
• この変更は、既存のTextLinkコンポーネントの使用方法に影響を与えません。
• elementAsと定義したのはnext/linkがasというpropsを持っていたので被りが発生しないようにしています。

next/linkを利用した場合

import Link from 'next/link'
import { TextLink, UpwardLink } from 'smarthr-ui'

<TextLink elementAs={Link} href="/about" suffix={<FaArrowRightIcon />}>
  smarthr-ui with next/link
</TextLink>

<UpwardLink elementAs={Link} href="/" indent={false}>
  前へ戻る
</UpwardLink>

Capture

nextのSandbox環境での例
TextLinkのStyleを適用しつつ next/linkが問題なく動作する

[s-sasaki-0529]

sandbox どう扱うか迷いますね。
今回はこうしないと確認は出来ないけど、かといってここに実装してるからって何かが担保できるわけでもないですし。 (sandbox については型チェックすらしてない)

方針決まるまでは特に何も実装しないでサンドボックスとして使えるまっさらな状態で良いかもしれません。
(個人的にはサーバーコンポーネント対応の中でこのサンドボックスを有効活用したい)

[Qs-F]

sandboxに置かないなら

type Props = Omit<ComponentPropsWithoutRef<'a'> & { to: ComponentPropsWithoutRef<'a'>['href'] }

const Link = (props: Props) => <a {...props} href={to} />

的なのをtestにおいてもいいかも、と思いましたがsandboxでも良さそうでした！

[s-sasaki-0529]

👍 next/link と react-router/link 両方で動作確認できました！型エラーもリンターエラーも発生しないし最高です！

[Qs-F]

よさそうでした！！

一応参照元を見えるところに残しておきます:
参考にした実装

[Qs-F]

sandboxに置かないなら

type Props = Omit<ComponentPropsWithoutRef<'a'> & { to: ComponentPropsWithoutRef<'a'>['href'] }

const Link = (props: Props) => <a {...props} href={to} />

的なのをtestにおいてもいいかも、と思いましたがsandboxでも良さそうでした！