chore: className生成を調整

kufu · Feb 12, 2025 · 6bb6154 · 6bb6154
1 parent d2a7a58
commit 6bb6154
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 24 deletions.
diff --git a/packages/smarthr-ui/src/components/Badge/Badge.tsx b/packages/smarthr-ui/src/components/Badge/Badge.tsx
@@ -17,7 +17,7 @@ type BaseProps = PropsWithChildren<{
 }>
 type BadgeProps = Omit<ComponentPropsWithoutRef<'span'>, keyof BaseProps> & BaseProps
 
-const badge = tv({
+const classNameGenerator = tv({
   slots: {
     wrapper: 'smarthr-ui-Badge shr-relative shr-inline-flex',
     pill: ['shr-h-[1.75em] shr-min-w-[1.75em] shr-px-[0.5em] shr-tabular-nums'],
@@ -120,7 +120,10 @@ const ActualBadge: React.FC<Omit<BadgeProps, 'showZero'>> = ({
   // HINT: boolean化することでmemoが有効になる可能性を高くする
   const withChildren = !!children
   const classNames = useMemo(() => {
-    const { wrapper, pill, dotElement } = badge({ color: type || 'blue', withChildren })
+    const { wrapper, pill, dotElement } = classNameGenerator({
+      color: type || 'blue',
+      withChildren,
+    })
 
     return {
       wrapper: wrapper({ className }),

diff --git a/packages/smarthr-ui/src/components/Balloon/Balloon.tsx b/packages/smarthr-ui/src/components/Balloon/Balloon.tsx
@@ -3,7 +3,7 @@ import { VariantProps, tv } from 'tailwind-variants'
 
 // HINT: trianble部分はRetinaディスプレイなどで途切れてしまう場合があるので
 // 1pxほど大きめに描画してbody部分と被るようにしています。
-const balloon = tv({
+const classNameGenerator = tv({
   base: [
     'smarthr-ui-Balloon',
     'shr-relative',
@@ -111,7 +111,7 @@ const balloon = tv({
 })
 
 type Props = PropsWithChildren<
-  VariantProps<typeof balloon> & {
+  VariantProps<typeof classNameGenerator> & {
     /** レンダリングするタグ */
     as?: 'div' | 'span'
   }
@@ -122,7 +122,7 @@ type ElementProps = Omit<ComponentPropsWithoutRef<'div'>, keyof Props>
 export const Balloon = React.memo<Props & ElementProps>(
   ({ horizontal, vertical, className, as: Component = 'div', ...props }) => {
     const actualClassName = useMemo(
-      () => balloon({ horizontal, vertical, className }),
+      () => classNameGenerator({ horizontal, vertical, className }),
       [horizontal, vertical, className],
     )
 

diff --git a/packages/smarthr-ui/src/components/Base/Base.tsx b/packages/smarthr-ui/src/components/Base/Base.tsx
@@ -7,7 +7,7 @@ import { useSectionWrapper } from '../SectioningContent/useSectioningWrapper'
 
 import type { Gap } from '../../types'
 
-export const base = tv({
+export const classNameGenerator = tv({
   base: 'smarthr-ui-Base shr-bg-white forced-colors:shr-border-shorthand contrast-more:shr-border-high-contrast',
   variants: {
     paddingBlock: {
@@ -90,7 +90,7 @@ type Overflow = 'visible' | 'hidden' | 'clip' | 'scroll' | 'auto'
 
 type Props = PropsWithChildren<
   Omit<
-    VariantProps<typeof base>,
+    VariantProps<typeof classNameGenerator>,
     'paddingBlock' | 'paddingInline' | 'overflowBlock' | 'overflowInline'
   > & {
     /** 境界とコンテンツの間の余白 */
@@ -109,22 +109,19 @@ type SeparatePadding = {
 export type ElementProps = Omit<ComponentPropsWithRef<'div'>, keyof Props>
 
 export const Base = forwardRef<HTMLDivElement, Props & ElementProps>(
-  (
-    { padding, radius = 'm', overflow, layer = 1, as: Component = 'div', className, ...props },
-    ref,
-  ) => {
-    const styles = useMemo(() => {
+  ({ padding, radius, overflow, layer, as: Component = 'div', className, ...props }, ref) => {
+    const actualClassName = useMemo(() => {
       const actualPadding =
         padding instanceof Object ? padding : { block: padding, inline: padding }
       const actualOverflow = overflow instanceof Object ? overflow : { x: overflow, y: overflow }
 
-      return base({
+      return classNameGenerator({
         paddingBlock: actualPadding.block,
         paddingInline: actualPadding.inline,
-        radius,
+        radius: radius ?? 'm',
         overflowBlock: actualOverflow.y,
         overflowInline: actualOverflow.x,
-        layer,
+        layer: layer ?? 1,
         className,
       })
     }, [layer, overflow, padding, radius, className])
@@ -133,7 +130,7 @@ export const Base = forwardRef<HTMLDivElement, Props & ElementProps>(
 
     return (
       <Wrapper>
-        <Component {...props} ref={ref} className={styles} />
+        <Component {...props} ref={ref} className={actualClassName} />
       </Wrapper>
     )
   },

diff --git a/packages/smarthr-ui/src/components/Base/BaseColumn/BaseColumn.tsx b/packages/smarthr-ui/src/components/Base/BaseColumn/BaseColumn.tsx
@@ -7,7 +7,7 @@ type BaseProps = Omit<ComponentProps<typeof Base>, 'radius' | 'layer'>
 type Props = VariantProps<typeof baseColumn>
 type ElementProps = Omit<ComponentProps<'div'>, keyof BaseProps | keyof Props>
 
-export const baseColumn = tv({
+export const classNameGenerator = tv({
   base: 'shr-rounded-[unset]',
   variants: {
     bgColor: {
@@ -37,7 +37,10 @@ export const BaseColumn: React.FC<BaseProps & Props & ElementProps> = ({
   className,
   ...props
 }) => {
-  const styles = useMemo(() => baseColumn({ bgColor, className }), [bgColor, className])
+  const actualClassName = useMemo(
+    () => classNameGenerator({ bgColor, className }),
+    [bgColor, className],
+  )
 
-  return <Base {...props} padding={padding} layer={0} className={styles} />
+  return <Base {...props} padding={padding} layer={0} className={actualClassName} />
 }
diff --git a/packages/smarthr-ui/src/components/Base/stories/Base.stories.tsx b/packages/smarthr-ui/src/components/Base/stories/Base.stories.tsx
@@ -2,17 +2,17 @@ import React, { ComponentProps } from 'react'
 
 import { Gap } from '../../../types'
 import { Stack } from '../../Layout'
-import { Base, base } from '../Base'
+import { Base, classNameGenerator } from '../Base'
 import { BaseColumn } from '../BaseColumn'
 
 import type { Meta, StoryObj } from '@storybook/react'
 
-const basePadding = Object.keys(base.variants.paddingBlock)
+const basePadding = Object.keys(classNameGenerator.variants.paddingBlock)
   // Tシャツサイズは後方互換性のために残しており、できるだけ使われたくない
   .filter((v) => !isNaN(Number(v)))
   .sort() as Gap[]
 const baseOverflow = [undefined, 'visible', 'hidden', 'clip', 'scroll', 'auto'] as const
-const baseLayer = Object.keys(base.variants.layer).map(Number) as Array<
+const baseLayer = Object.keys(classNameGenerator.variants.layer).map(Number) as Array<
   ComponentProps<typeof Base>['layer']
 >
 

diff --git a/packages/smarthr-ui/src/components/Base/stories/BaseColumn.stories.tsx b/packages/smarthr-ui/src/components/Base/stories/BaseColumn.stories.tsx
@@ -4,13 +4,13 @@ import React, { ComponentProps } from 'react'
 import { backgroundColor } from '../../../themes'
 import { Gap } from '../../../types'
 import { Stack } from '../../Layout'
-import { base } from '../Base'
+import { classNameGenerator } from '../Base'
 import { BaseColumn } from '../BaseColumn'
 import { baseColumn } from '../BaseColumn/BaseColumn'
 
 import type { Meta, StoryObj } from '@storybook/react'
 
-const basePadding = Object.keys(base.variants.paddingBlock)
+const basePadding = Object.keys(classNameGenerator.variants.paddingBlock)
   // Tシャツサイズは後方互換性のために残しており、できるだけ使われたくない
   .filter((v) => !isNaN(Number(v)))
   .sort() as Gap[]