fix: Heading と Text の相互参照をなくして Text が Heading に依存しないようにする (#4732)

* fix: Heading 側の変数を Text に移して相互参照が起きないようにする

* fix: import のミスを修正

packages/smarthr-ui/src/components/AccordionPanel/AccordionPanelTrigger.tsx

@@ -9,17 +9,18 @@ import React, {
 import { tv } from 'tailwind-variants'
 
 import { getIsInclude, mapToKeyArray } from '../../libs/map'
-import { Heading, HeadingTagTypes, HeadingTypes } from '../Heading'
+import { Heading, HeadingTagTypes } from '../Heading'
 import { FaCaretDownIcon, FaCaretRightIcon } from '../Icon'
 import { Cluster } from '../Layout'
+import { TextProps } from '../Text'
 
 import { AccordionPanelContext } from './AccordionPanel'
 import { AccordionPanelItemContext } from './AccordionPanelItem'
 import { getNewExpandedItems } from './accordionPanelHelper'
 
 type Props = PropsWithChildren<{
   /** ヘッダ部分のテキストのスタイル */
-  headingType?: HeadingTypes
+  headingType?: TextProps['styleType']
   /**
    * @deprecated headingTag属性は非推奨です
    */

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

@@ -13,14 +13,13 @@ import { useId } from '../../hooks/useId'
 import { MultiComboBox, SingleComboBox } from '../ComboBox'
 import { DatePicker } from '../DatePicker'
 import { DropZone } from '../DropZone'
-import { HeadingTypes } from '../Heading'
 import { FaCircleExclamationIcon } from '../Icon'
 import { CurrencyInput, Input } from '../Input'
 import { InputFile } from '../InputFile'
 import { Cluster, Stack } from '../Layout'
 import { Select } from '../Select'
 import { StatusLabel } from '../StatusLabel'
-import { Text } from '../Text'
+import { Text, TextProps } from '../Text'
 import { Textarea } from '../Textarea'
 import { visuallyHiddenText } from '../VisuallyHiddenText/VisuallyHiddenText'
 
@@ -31,7 +30,7 @@ type Props = PropsWithChildren<{
   /** グループのタイトル名 */
   title: ReactNode
   /** タイトルの見出しのタイプ */
-  titleType?: HeadingTypes
+  titleType?: TextProps['styleType']
   /** タイトルの見出しを視覚的に隠すかどうか */
   dangerouslyTitleHidden?: boolean
   /** label 要素に適用する `htmlFor` 値 */

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

@@ -2,12 +2,12 @@ import React, { ComponentProps, FC, PropsWithChildren, useContext, useMemo } fro
 import { tv } from 'tailwind-variants'
 
 import { LevelContext } from '../SectioningContent'
-import { Text, TextProps } from '../Text'
+import { STYLE_TYPE_MAP, Text, TextProps } from '../Text'
 import { VisuallyHiddenText } from '../VisuallyHiddenText'
 
 export type Props = PropsWithChildren<{
   /** テキストのスタイル */
-  type?: HeadingTypes
+  type?: TextProps['styleType']
   /**
    * @deprecated SectioningContent(Article, Aside, Nav, Section)を使ってHeadingと関連する範囲を明確に指定してください
    */
@@ -16,50 +16,13 @@ export type Props = PropsWithChildren<{
   visuallyHidden?: boolean
 }>
 
-export type HeadingTypes =
-  | 'screenTitle'
-  | 'sectionTitle'
-  | 'blockTitle'
-  | 'subBlockTitle'
-  | 'subSubBlockTitle'
-
 export type HeadingTagTypes = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
 
 type ElementProps = Omit<
   ComponentProps<'h1'>,
   keyof Props | keyof TextProps | 'role' | 'aria-level'
 >
 
-export const MAPPER_SIZE_AND_WEIGHT: { [key in HeadingTypes]: TextProps } = {
-  screenTitle: {
-    size: 'XL',
-    leading: 'TIGHT',
-    weight: 'normal',
-  },
-  sectionTitle: {
-    size: 'L',
-    leading: 'TIGHT',
-    weight: 'normal',
-  },
-  blockTitle: {
-    size: 'M',
-    leading: 'TIGHT',
-    weight: 'bold',
-  },
-  subBlockTitle: {
-    size: 'M',
-    leading: 'TIGHT',
-    weight: 'bold',
-    color: 'TEXT_GREY',
-  },
-  subSubBlockTitle: {
-    size: 'S',
-    leading: 'TIGHT',
-    weight: 'bold',
-    color: 'TEXT_GREY',
-  },
-}
-
 const generateTagProps = (level: number, tag?: HeadingTagTypes) => {
   let role = undefined
   let ariaLevel = undefined
@@ -101,7 +64,7 @@ export const Heading: FC<Props & ElementProps> = ({
   const styles = useMemo(() => heading({ visuallyHidden, className }), [className, visuallyHidden])
   const actualProps = {
     ...props,
-    ...MAPPER_SIZE_AND_WEIGHT[type],
+    ...STYLE_TYPE_MAP[type],
     ...tagProps,
     className: styles,
   }

packages/smarthr-ui/src/components/Heading/index.ts

@@ -1,2 +1,2 @@
 export { PageHeading, Heading } from './Heading'
-export type { Props, HeadingTypes, HeadingTagTypes } from './Heading'
+export type { Props, HeadingTagTypes } from './Heading'

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

@@ -1,7 +1,42 @@
 import React, { ComponentProps, PropsWithChildren, useMemo } from 'react'
 import { VariantProps, tv } from 'tailwind-variants'
 
-import { HeadingTypes, MAPPER_SIZE_AND_WEIGHT } from '../Heading/Heading'
+type StyleType =
+  | 'screenTitle'
+  | 'sectionTitle'
+  | 'blockTitle'
+  | 'subBlockTitle'
+  | 'subSubBlockTitle'
+
+export const STYLE_TYPE_MAP: { [key in StyleType]: VariantProps<typeof text> } = {
+  screenTitle: {
+    size: 'XL',
+    leading: 'TIGHT',
+    weight: 'normal',
+  },
+  sectionTitle: {
+    size: 'L',
+    leading: 'TIGHT',
+    weight: 'normal',
+  },
+  blockTitle: {
+    size: 'M',
+    leading: 'TIGHT',
+    weight: 'bold',
+  },
+  subBlockTitle: {
+    size: 'M',
+    leading: 'TIGHT',
+    weight: 'bold',
+    color: 'TEXT_GREY',
+  },
+  subSubBlockTitle: {
+    size: 'S',
+    leading: 'TIGHT',
+    weight: 'bold',
+    color: 'TEXT_GREY',
+  },
+}
 
 const text = tv({
   variants: {
@@ -51,8 +86,8 @@ export type TextProps = VariantProps<typeof text> & {
   as?: string | React.ComponentType<any> | undefined
   /** 強調するかどうかの真偽値。指定すると em 要素になる */
   emphasis?: boolean
-  /** 見た目の種類。Heading の種類と同じ */
-  styleType?: HeadingTypes
+  /** 見た目の種類 */
+  styleType?: StyleType
 }
 
 export const Text: React.FC<PropsWithChildren<TextProps & ComponentProps<'span'>>> = ({
@@ -63,7 +98,7 @@ export const Text: React.FC<PropsWithChildren<TextProps & ComponentProps<'span'>
   ...props
 }) => {
   const { size, italic, color, leading, whiteSpace, className, ...others } = props
-  const styleTypeValues = styleType ? MAPPER_SIZE_AND_WEIGHT[styleType] : null
+  const styleTypeValues = styleType ? STYLE_TYPE_MAP[styleType] : null
 
   const styles = useMemo(
     () =>

packages/smarthr-ui/src/components/Text/index.ts

@@ -1,3 +1,3 @@
-export { Text } from './Text'
+export { Text, STYLE_TYPE_MAP } from './Text'
 export { RangeSeparator } from './RangeSeparator'
 export type { TextProps } from './Text'