chore: TabBarとSwitchの内部処理を整理

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

@@ -1,4 +1,12 @@
-import React, { InputHTMLAttributes, ReactNode, forwardRef, useId, useMemo } from 'react'
+import React, {
+  InputHTMLAttributes,
+  PropsWithChildren,
+  ReactNode,
+  forwardRef,
+  memo,
+  useId,
+  useMemo,
+} from 'react'
 import { tv } from 'tailwind-variants'
 
 import { FaCheckIcon } from '../Icon'
@@ -57,38 +65,54 @@ export const Switch = forwardRef<HTMLInputElement, Props>(
     const defaultId = useId()
     const inputId = id || defaultId
 
-    const { wrapperStyle, inputStyle, iconStyle, iconWrapperStyle } = useMemo(() => {
+    const classNames = useMemo(() => {
       const { wrapper, input, icon, iconWrapper } = switchStyle()
 
       return {
-        wrapperStyle: wrapper({ className }),
-        inputStyle: input(),
-        iconStyle: icon(),
-        iconWrapperStyle: iconWrapper(),
+        wrapper: wrapper({ className }),
+        input: input(),
+        icon: icon(),
+        iconWrapper: iconWrapper(),
       }
     }, [className])
 
-    const ActualLabelComponent = dangerouslyLabelHidden ? VisuallyHiddenText : Text
-
     return (
       <Cluster align="center">
-        <ActualLabelComponent as="label" htmlFor={inputId}>
+        <MemoizedLabel htmlFor={inputId} dangerouslyLabelHidden={dangerouslyLabelHidden}>
           {children}
-        </ActualLabelComponent>
-        <span className={wrapperStyle}>
+        </MemoizedLabel>
+        <span className={classNames.wrapper}>
           <input
             {...props}
             type="checkbox"
             role="switch"
             id={inputId}
-            className={inputStyle}
+            className={classNames.input}
             ref={ref}
           />
-          <span className={iconWrapperStyle}>
-            <FaCheckIcon className={iconStyle} size="XXS" />
-          </span>
+          <MemoizedSuffixIcon className={classNames.iconWrapper} iconClassName={classNames.icon} />
         </span>
       </Cluster>
     )
   },
 )
+
+const MemoizedLabel = memo<
+  Pick<Props, 'dangerouslyLabelHidden'> & PropsWithChildren<{ htmlFor: string }>
+>(({ dangerouslyLabelHidden, htmlFor, children }) => {
+  const Component = dangerouslyLabelHidden ? VisuallyHiddenText : Text
+
+  return (
+    <Component as="label" htmlFor={htmlFor}>
+      {children}
+    </Component>
+  )
+})
+
+const MemoizedSuffixIcon = memo<{ className: string; iconClassName: string }>(
+  ({ className, iconClassName }) => (
+    <span className={className}>
+      <FaCheckIcon className={iconClassName} size="XXS" />
+    </span>
+  ),
+)

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

@@ -3,7 +3,7 @@ import { tv } from 'tailwind-variants'
 
 import { Reel } from '../Layout'
 
-const tabBar = tv({
+const classNameGenerator = tv({
   slots: {
     wrapper: 'smarthr-ui-TabBar',
     inner: 'shr-grow',
@@ -26,23 +26,19 @@ type Props = PropsWithChildren<{
 }>
 type ElementProps = Omit<ComponentPropsWithoutRef<'div'>, keyof Props | 'role'>
 
-export const TabBar: FC<Props & ElementProps> = ({
-  className,
-  bordered = true,
-  children,
-  ...props
-}) => {
-  const { wrapperStyle, innerStyle } = useMemo(() => {
-    const { wrapper, inner } = tabBar()
+export const TabBar: FC<Props & ElementProps> = ({ className, bordered, children, ...props }) => {
+  const classNames = useMemo(() => {
+    const { wrapper, inner } = classNameGenerator()
+
     return {
-      wrapperStyle: wrapper({ className }),
-      innerStyle: inner({ bordered }),
+      wrapper: wrapper({ className }),
+      inner: inner({ bordered: bordered ?? true }),
     }
   }, [bordered, className])
 
   return (
-    <Reel {...props} role="tablist" className={wrapperStyle}>
-      <div className={innerStyle}>{children}</div>
+    <Reel {...props} role="tablist" className={classNames.wrapper}>
+      <div className={classNames.inner}>{children}</div>
     </Reel>
   )
 }

packages/smarthr-ui/src/components/TabBar/TabItem.tsx

@@ -1,12 +1,12 @@
-import React, { ComponentProps, FC, PropsWithChildren, useMemo } from 'react'
+import React, { ComponentProps, FC, PropsWithChildren, memo, useCallback, useMemo } from 'react'
 import { tv } from 'tailwind-variants'
 
 import { isTouchDevice } from '../../libs/ua'
 import { UnstyledButton } from '../Button'
 import { FaCircleInfoIcon } from '../Icon'
 import { Tooltip } from '../Tooltip'
 
-const tabItem = tv({
+const classNameGenerator = tv({
   slots: {
     wrapper: [
       'smarthr-ui-TabItem',
@@ -76,6 +76,7 @@ export const TabItem: FC<Props & ElementProps> = ({
 
   if (rest.disabled && disabledDetail) {
     const Icon = disabledDetail.icon || <FaCircleInfoIcon color="TEXT_GREY" />
+
     return (
       <Tooltip
         {...tabAttrs}
@@ -102,25 +103,39 @@ const TabButton: FC<Props & ElementProps> = ({
   className,
   ...rest
 }) => {
-  const { wrapperStyle, labelStyle, suffixStyle } = useMemo(() => {
-    const { wrapper, label, suffixWrapper } = tabItem({ isTouchDevice })
+  const classNames = useMemo(() => {
+    const { wrapper, label, suffixWrapper } = classNameGenerator({ isTouchDevice })
+
     return {
-      wrapperStyle: wrapper({ className }),
-      labelStyle: label(),
-      suffixStyle: suffixWrapper(),
+      wrapper: wrapper({ className }),
+      label: label(),
+      suffixWrapper: suffixWrapper(),
     }
   }, [className])
 
+  const actualOnClick = useCallback(
+    (e: React.MouseEvent<HTMLButtonElement>) => onClick(e.currentTarget.value),
+    [onClick],
+  )
+
   return (
     <UnstyledButton
       {...rest}
       type="button"
+      value={id}
       id={id}
-      className={wrapperStyle}
-      onClick={() => onClick(id)}
+      className={classNames.wrapper}
+      onClick={actualOnClick}
     >
-      <span className={labelStyle}>{children}</span>
-      {suffix && <span className={suffixStyle}>{suffix}</span>}
+      <TabLabel className={classNames.label}>{children}</TabLabel>
+      <TabButtonSuffix className={classNames.suffixWrapper}>{suffix}</TabButtonSuffix>
     </UnstyledButton>
   )
 }
+
+const TabLabel = memo<PropsWithChildren<{ className: string }>>(({ children, className }) => (
+  <span className={className}>{children}</span>
+))
+const TabButtonSuffix = memo<PropsWithChildren<{ className: string }>>(
+  ({ children, className }) => children && <span className={className}>{children}</span>,
+)