chore: 共通部分をexport & import

kufu · Sep 19, 2024 · 0237d6f · 0237d6f
1 parent 7018b64
commit 0237d6f
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 142 deletions.
diff --git a/packages/smarthr-ui/src/components/Fieldset/Fieldset.tsx b/packages/smarthr-ui/src/components/Fieldset/Fieldset.tsx
@@ -10,6 +10,13 @@ import React, {
 import { useId } from 'react'
 import { tv } from 'tailwind-variants'
 
+import {
+  ErrorMessageList,
+  ExampleMessageText,
+  HelpMessageParagraph,
+  SupplementaryMessageText,
+  TitleCluster,
+} from '../FormControl'
 import { FaCircleExclamationIcon } from '../Icon'
 import { Cluster, Stack } from '../Layout'
 import { StatusLabel } from '../StatusLabel'
@@ -173,22 +180,6 @@ export const Fieldset: React.FC<Props & ElementProps> = ({
       }
     }, [className, dangerouslyTitleHidden, innerMargin])
 
-  useEffect(() => {
-    const inputWrapper = inputWrapperRef?.current
-
-    if (inputWrapper) {
-      // HINT: 対象idを持つ要素が既に存在する場合、何もしない
-      if (!describedbyIds || inputWrapper.querySelector(`[aria-describedby="${describedbyIds}"]`)) {
-        return
-      }
-
-      const input = inputWrapper.querySelector('[data-smarthr-ui-input="true"]')
-
-      if (input && !input.getAttribute('aria-describedby')) {
-        input.setAttribute('aria-describedby', describedbyIds)
-      }
-    }
-  }, [describedbyIds])
   useEffect(() => {
     if (!autoBindErrorInput) {
       return
@@ -221,6 +212,7 @@ export const Fieldset: React.FC<Props & ElementProps> = ({
       className={wrapperStyle}
     >
       <TitleCluster
+        as="legend"
         managedHtmlFor={managedHtmlFor}
         managedLabelId={managedLabelId}
         labelStyle={labelStyle}
@@ -247,104 +239,3 @@ export const Fieldset: React.FC<Props & ElementProps> = ({
     </Stack>
   )
 }
-
-const TitleCluster = React.memo<
-  Pick<Props, 'dangerouslyTitleHidden' | 'title'> & {
-    titleType: TextProps['styleType']
-    statusLabelList: StatusLabelProps[]
-    managedHtmlFor: string
-    managedLabelId: string
-    labelStyle: string
-  }
->(
-  ({
-    managedHtmlFor,
-    managedLabelId,
-    labelStyle,
-    dangerouslyTitleHidden,
-    titleType,
-    title,
-    statusLabelList,
-  }) => (
-    <Cluster
-      align="center"
-      id={managedLabelId}
-      className={labelStyle}
-      as="legend"
-      // Stack 対象にしないための hidden
-      hidden={dangerouslyTitleHidden || undefined}
-    >
-      <Text as="span" styleType={titleType}>
-        {title}
-      </Text>
-      {statusLabelList.length > 0 && (
-        <Cluster gap={0.25} as="span">
-          {statusLabelList.map((prop, index) => (
-            <StatusLabel {...prop} key={index} />
-          ))}
-        </Cluster>
-      )}
-    </Cluster>
-  ),
-)
-
-const HelpMessageParagraph = React.memo<Pick<Props, 'helpMessage'> & { managedHtmlFor: string }>(
-  ({ helpMessage, managedHtmlFor }) =>
-    helpMessage ? (
-      <p className="smarthr-ui-FormControl-helpMessage" id={`${managedHtmlFor}_helpMessage`}>
-        {helpMessage}
-      </p>
-    ) : null,
-)
-
-const ExampleMessageText = React.memo<Pick<Props, 'exampleMessage'> & { managedHtmlFor: string }>(
-  ({ exampleMessage, managedHtmlFor }) =>
-    exampleMessage ? (
-      <Text
-        as="p"
-        color="TEXT_GREY"
-        italic
-        id={`${managedHtmlFor}_exampleMessage`}
-        className="smarthr-ui-FormControl-exampleMessage"
-      >
-        {exampleMessage}
-      </Text>
-    ) : null,
-)
-
-const ErrorMessageList = React.memo<{
-  errorMessages: ReactNode[]
-  managedHtmlFor: string
-  errorListStyle: string
-  errorIconStyle: string
-}>(({ errorMessages, managedHtmlFor, errorListStyle, errorIconStyle }) => {
-  if (errorMessages.length === 0) {
-    return null
-  }
-
-  return (
-    <div id={`${managedHtmlFor}_errorMessages`} className={errorListStyle} role="alert">
-      {errorMessages.map((message, index) => (
-        <p key={index}>
-          <FaCircleExclamationIcon text={message} className={errorIconStyle} />
-        </p>
-      ))}
-    </div>
-  )
-})
-
-const SupplementaryMessageText = React.memo<
-  Pick<Props, 'supplementaryMessage'> & { managedHtmlFor: string }
->(({ supplementaryMessage, managedHtmlFor }) =>
-  supplementaryMessage ? (
-    <Text
-      as="p"
-      size="S"
-      color="TEXT_GREY"
-      id={`${managedHtmlFor}_supplementaryMessage`}
-      className="smarthr-ui-FormControl-supplementaryMessage"
-    >
-      {supplementaryMessage}
-    </Text>
-  ) : null,
-)
diff --git a/packages/smarthr-ui/src/components/FormControl/FormControl.tsx b/packages/smarthr-ui/src/components/FormControl/FormControl.tsx
@@ -256,13 +256,14 @@ export const FormControl: React.FC<Props & ElementProps> = ({
   )
 }
 
-const TitleCluster = React.memo<
+export const TitleCluster = React.memo<
   Pick<Props, 'dangerouslyTitleHidden' | 'title'> & {
     titleType: TextProps['styleType']
     statusLabelList: StatusLabelProps[]
     managedHtmlFor: string
     managedLabelId: string
     labelStyle: string
+    as?: 'label' | 'legend'
   }
 >(
   ({
@@ -273,12 +274,13 @@ const TitleCluster = React.memo<
     titleType,
     title,
     statusLabelList,
+    as = 'label',
   }) => (
     <Cluster
       align="center"
       id={managedLabelId}
       className={labelStyle}
-      as="label"
+      as={as}
       // Stack 対象にしないための hidden
       hidden={dangerouslyTitleHidden || undefined}
     >
@@ -296,31 +298,33 @@ const TitleCluster = React.memo<
   ),
 )
 
-const HelpMessageParagraph = React.memo<Pick<Props, 'helpMessage'> & { managedHtmlFor: string }>(
-  ({ helpMessage, managedHtmlFor }) =>
-    helpMessage ? (
-      <p className="smarthr-ui-FormControl-helpMessage" id={`${managedHtmlFor}_helpMessage`}>
-        {helpMessage}
-      </p>
-    ) : null,
+export const HelpMessageParagraph = React.memo<
+  Pick<Props, 'helpMessage'> & { managedHtmlFor: string }
+>(({ helpMessage, managedHtmlFor }) =>
+  helpMessage ? (
+    <p className="smarthr-ui-FormControl-helpMessage" id={`${managedHtmlFor}_helpMessage`}>
+      {helpMessage}
+    </p>
+  ) : null,
 )
 
-const ExampleMessageText = React.memo<Pick<Props, 'exampleMessage'> & { managedHtmlFor: string }>(
-  ({ exampleMessage, managedHtmlFor }) =>
-    exampleMessage ? (
-      <Text
-        as="p"
-        color="TEXT_GREY"
-        italic
-        id={`${managedHtmlFor}_exampleMessage`}
-        className="smarthr-ui-FormControl-exampleMessage"
-      >
-        {exampleMessage}
-      </Text>
-    ) : null,
+export const ExampleMessageText = React.memo<
+  Pick<Props, 'exampleMessage'> & { managedHtmlFor: string }
+>(({ exampleMessage, managedHtmlFor }) =>
+  exampleMessage ? (
+    <Text
+      as="p"
+      color="TEXT_GREY"
+      italic
+      id={`${managedHtmlFor}_exampleMessage`}
+      className="smarthr-ui-FormControl-exampleMessage"
+    >
+      {exampleMessage}
+    </Text>
+  ) : null,
 )
 
-const ErrorMessageList = React.memo<{
+export const ErrorMessageList = React.memo<{
   errorMessages: ReactNode[]
   managedHtmlFor: string
   errorListStyle: string
@@ -341,7 +345,7 @@ const ErrorMessageList = React.memo<{
   )
 })
 
-const SupplementaryMessageText = React.memo<
+export const SupplementaryMessageText = React.memo<
   Pick<Props, 'supplementaryMessage'> & { managedHtmlFor: string }
 >(({ supplementaryMessage, managedHtmlFor }) =>
   supplementaryMessage ? (

diff --git a/packages/smarthr-ui/src/components/FormControl/index.ts b/packages/smarthr-ui/src/components/FormControl/index.ts
@@ -1 +1,8 @@
-export { FormControl } from './FormControl'
+export {
+  FormControl,
+  SupplementaryMessageText,
+  ErrorMessageList,
+  ExampleMessageText,
+  HelpMessageParagraph,
+  TitleCluster,
+} from './FormControl'