chore: decoratorsに対する処理を共通化できるよう、useDecoratorsを定義する #5326

AtsushiM · 2025-01-23T23:53:48Z

概要

各コンポーネント内で定義しているdecoratorsの扱いが煩雑になっているため、useDecoratorsを定義、共通の仕様で扱えるようにします

変更内容

useDecoratsを定義
Textareaをお試しで置き換え

確認方法

pkg-pr-new · 2025-01-24T00:31:16Z

npm i https://pkg.pr.new/kufu/smarthr-ui@5326

commit: 74f1c62

uknmr · 2025-01-24T04:43:28Z

packages/smarthr-ui/src/components/Browser/Browser.tsx

@@ -1,7 +1,7 @@
 import React, { FC, KeyboardEventHandler, useCallback, useMemo } from 'react'
 import { tv } from 'tailwind-variants'

-import { DecoratorsType } from '../../types'
+import { type DecoratorsType } from '../../libs/decorator'


type の場合は type を強制する lint ってないのかしら。

ありそう。
全プロダクトonにしてもいいのでは？ (可読性かなり上がりそう)
https://typescript-eslint.io/rules/consistent-type-imports/

uknmr · 2025-01-24T04:44:47Z

packages/smarthr-ui/src/components/Textarea/stories/VRTTextarea.stories.tsx

@@ -21,6 +21,30 @@ export default {
          <Textarea {...args} maxLetters={5} value="テキスト" />
          <Textarea {...args} maxLetters={5} value="テキストエ" />
          <Textarea {...args} maxLetters={5} value="テキストエリア" />
+          <Textarea


imo: decorator.ts の動作が担保されているのであれば、各コンポーネントで VRT に足す必要はなさそうに思いました。

decorator.ts の動作が担保されているのであれば、各コンポーネントで VRT に足す必要はなさそうに思いました。

decorator自体の動作はそうですが、decoratorがどこに反映されるのか？は確認できないのでVRTに含めておくほうが良くないです？
特に今回のような処理が外部で行われる様になる場合はバグったことが検知しにくくなるのでテストしておきたい所存

uknmr · 2025-01-24T04:49:28Z

packages/smarthr-ui/src/libs/decorator.ts

+export type DecoratorType = (text: string) => ReactNode
+
+export const useDecorators = <T extends string>(
+  defaultTexts: { [K in T]: string },


imo: デフォルトテキスト、というかは変換表だなと思った。translateTable 的な。

変換表

いや、指定無い場合の文字列のまとまりなんでtranslateTableだと役割の一部しか表せてない気がします
役割も翻訳だけじゃなくて違う文字列にすることも有り得るのでtranslateは不適切っぽい。

…e-add-use-decorators

Qs-F

useDecoratorsとTextarea以外は見てないですが良さそうな気はしました！

Qs-F · 2025-01-31T13:12:29Z

packages/smarthr-ui/src/hooks/useDecorators.ts

+      return defaultTexts
+    }
+
+    const decorated = {} as { [K in T]: ReactNode }


asちょっと怖い気がするので

Suggested change

const decorated = {} as { [K in T]: ReactNode }

const decorated: { [K in T]: ReactNode } = {}

とか、satisfiesとかで代用できないんでしたっけ

変数に型として設定してしまうと、 {} は明らかに型違反なので駄目っすね...

例えば

const decorated: { [key: string]: ReactNode } = {} .... return decorated as { [K in T]: ReactNode }

とすればもうちょいわかりやすいかもですがあまり意味はなさそう...

AtsushiM added 2 commits January 24, 2025 08:03

chore: decoratorsのデフォルト文字列の持ち方を調整する

3bb40d3

chore: DecoratorsTypeの設置場所を移動

5ef9eda

yagimushi force-pushed the chore-add-use-decorators branch 7 times, most recently from 93b6e65 to 2f643da Compare January 24, 2025 00:12

chore: useDecoratorsを定義

0d284e1

yagimushi force-pushed the chore-add-use-decorators branch from 2f643da to 0d284e1 Compare January 24, 2025 00:18

AtsushiM marked this pull request as ready for review January 24, 2025 00:27

AtsushiM requested a review from a team as a code owner January 24, 2025 00:27

AtsushiM requested review from misako0927 and s-sasaki-0529 and removed request for a team January 24, 2025 00:27

uknmr reviewed Jan 24, 2025

View reviewed changes

Merge branch 'master' of https://github.com/kufu/smarthr-ui into chor…

139d213

…e-add-use-decorators

yagimushi force-pushed the chore-add-use-decorators branch 4 times, most recently from 7c70320 to 606ccb4 Compare January 24, 2025 23:13

chore: useDecoratorsにわたすgenericsを調整

7f05277

yagimushi force-pushed the chore-add-use-decorators branch from 606ccb4 to 7f05277 Compare January 24, 2025 23:19

chore: libs/decorator を hooks/useDecorators に移動

10baf9d

AtsushiM requested a review from uknmr January 24, 2025 23:25

AtsushiM added 2 commits January 25, 2025 08:33

chore: fix stories

660292c

Merge branch 'master' of https://github.com/kufu/smarthr-ui into chor…

74f1c62

…e-add-use-decorators

Qs-F reviewed Jan 31, 2025

View reviewed changes

AtsushiM requested a review from Qs-F February 2, 2025 23:34

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore: decoratorsに対する処理を共通化できるよう、useDecoratorsを定義する #5326

chore: decoratorsに対する処理を共通化できるよう、useDecoratorsを定義する #5326

AtsushiM commented Jan 23, 2025 •

edited

Loading

pkg-pr-new bot commented Jan 24, 2025 •

edited

Loading

uknmr Jan 24, 2025

AtsushiM Jan 24, 2025

uknmr Jan 24, 2025

AtsushiM Jan 24, 2025

uknmr Jan 24, 2025

AtsushiM Jan 24, 2025 •

edited

Loading

Qs-F left a comment

Qs-F Jan 31, 2025

AtsushiM Feb 2, 2025

AtsushiM Feb 2, 2025

	const decorated = {} as { [K in T]: ReactNode }
	const decorated: { [K in T]: ReactNode } = {}

chore: decoratorsに対する処理を共通化できるよう、useDecoratorsを定義する #5326

Are you sure you want to change the base?

chore: decoratorsに対する処理を共通化できるよう、useDecoratorsを定義する #5326

Conversation

AtsushiM commented Jan 23, 2025 • edited Loading

関連URL

概要

変更内容

確認方法

pkg-pr-new bot commented Jan 24, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

AtsushiM Jan 24, 2025 • edited Loading

Choose a reason for hiding this comment

Qs-F left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

AtsushiM commented Jan 23, 2025 •

edited

Loading

pkg-pr-new bot commented Jan 24, 2025 •

edited

Loading

AtsushiM Jan 24, 2025 •

edited

Loading