refactor(DropZone)!: decorators属性を削除しIntlProviderのみを使用 (#6236)

Co-authored-by: Claude Sonnet 4.5 <noreply@anthropic.com>

Author: AtsushiM

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

@@ -16,14 +16,11 @@ import {
 } from 'react'
 import { tv } from 'tailwind-variants'
 
-import { useDecorators } from '../../hooks/useDecorators'
 import { useIntl } from '../../intl'
 import { Button } from '../Button'
 import { FaFolderOpenIcon } from '../Icon'
 import { VisuallyHiddenText } from '../VisuallyHiddenText'
 
-import type { DecoratorsType } from '../../hooks/useDecorators'
-
 const classNameGenerator = tv({
   slots: {
     wrapper: [
@@ -74,8 +71,8 @@ type AbstractProps = PropsWithChildren<{
   disabled?: boolean
   /** フォームにエラーがあるかどうか */
   error?: boolean
-  /** コンポーネント内の文言を変更するための関数を設定 */
-  decorators?: DecoratorsType<'selectButtonLabel'>
+  /** ファイル選択ボタンのラベル */
+  selectButtonLabel?: string
 }>
 type Props = AbstractProps & Omit<ComponentPropsWithRef<'div'>, keyof AbstractProps>
 
@@ -85,7 +82,10 @@ const overrideEventDefault = (e: DragEvent<HTMLElement>) => {
 }
 
 export const DropZone = forwardRef<HTMLInputElement, Props>(
-  ({ children, onSelectFiles, multiple = true, disabled, error, decorators, ...rest }, ref) => {
+  (
+    { children, onSelectFiles, multiple = true, disabled, error, selectButtonLabel, ...rest },
+    ref,
+  ) => {
     const fileRef = useRef<HTMLInputElement>(null)
     const [filesDraggedOver, setFilesDraggedOver] = useState(false)
     const classNames = useMemo(() => {
@@ -149,7 +149,7 @@ export const DropZone = forwardRef<HTMLInputElement, Props>(
           onClick={onClickButton}
           disabled={disabled}
           className={classNames.button}
-          decorators={decorators}
+          label={selectButtonLabel}
         />
         <VisuallyHiddenText>
           {/* eslint-disable-next-line smarthr/a11y-input-in-form-control */}
@@ -171,25 +171,23 @@ export const DropZone = forwardRef<HTMLInputElement, Props>(
 )
 
 const SelectButton = memo<
-  ComponentPropsWithoutRef<typeof Button> & Pick<Props, 'decorators'> & { onClick: () => void }
->(({ onClick, decorators, ...rest }) => {
+  ComponentPropsWithoutRef<typeof Button> & { onClick: () => void; label?: string }
+>(({ onClick, label, ...rest }) => {
   const { localize } = useIntl()
 
-  const decoratorDefaultTexts = useMemo(
-    () => ({
-      selectButtonLabel: localize({
+  const buttonLabel = useMemo(
+    () =>
+      label ||
+      localize({
         id: 'smarthr-ui/DropZone/selectButtonLabel',
         defaultText: 'ファイルを選択',
       }),
-    }),
-    [localize],
+    [label, localize],
   )
 
-  const decorated = useDecorators<'selectButtonLabel'>(decoratorDefaultTexts, decorators)
-
   return (
     <Button {...rest} prefix={<FaFolderOpenIcon />} onClick={onClick}>
-      {decorated.selectButtonLabel}
+      {buttonLabel}
     </Button>
   )
 })

packages/smarthr-ui/src/components/DropZone/stories/DropZone.stories.tsx

@@ -50,12 +50,10 @@ export const Error: StoryObj<typeof DropZone> = {
   },
 }
 
-export const Decorators: StoryObj<typeof DropZone> = {
-  name: 'decorators',
+export const SelectButtonLabel: StoryObj<typeof DropZone> = {
+  name: 'selectButtonLabel',
   args: {
-    decorators: {
-      selectButtonLabel: (txt) => `select file.(${txt})`,
-    },
-    children: 'ボタンのテキストを変更',
+    selectButtonLabel: 'Choose File',
+    children: 'カスタムラベルのボタン',
   },
 }

packages/smarthr-ui/src/components/DropZone/stories/VRTDropZone.stories.tsx

@@ -9,9 +9,9 @@ export default {
     <Stack>
       <DropZone {...args} />
       <DropZone {...args}>children あり</DropZone>
-      <DropZone {...args} decorators={{ selectButtonLabel: (txt) => `select file.(${txt})` }} />
       <DropZone {...args} disabled />
       <DropZone {...args} error />
+      <DropZone {...args} selectButtonLabel="Choose File" />
     </Stack>
   ),
   parameters: {