refactor: split the file into smaller

packages/react/src/components/Button/StyledButton.tsx

@@ -0,0 +1,66 @@
+import styled, { css } from 'styled-components'
+import Clickable from '../Clickable'
+import { variantToFont } from './lib/variantToFont'
+import { variantToBackground } from './lib/variantToBackground'
+import type { Size } from '.'
+
+const horizontalPaddingSmall = css`
+  padding-right: 16px;
+  padding-left: 16px;
+`
+
+const horizontalPaddingMedium = css`
+  padding-right: 24px;
+  padding-left: 24px;
+`
+
+type StyledButtonProps = {
+  $fullWidth: boolean
+  $size: Size
+  $background: ReturnType<typeof variantToBackground>
+  $color: ReturnType<typeof variantToFont>
+}
+
+export const StyledButton = styled(Clickable)<StyledButtonProps>`
+  width: ${(p) => (p.$fullWidth ? 'stretch' : 'min-content')};
+  display: inline-grid;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  user-select: none;
+  white-space: nowrap;
+  border-radius: 999999px;
+  font-size: 14px;
+  line-height: 22px;
+  font-weight: bold;
+
+  ${(p) => (p.$size === 'M' ? horizontalPaddingMedium : horizontalPaddingSmall)}
+  color: var(--charcoal-${(p) => p.$color});
+  background-color: var(--charcoal-${(p) => p.$background});
+  transition: 0.2s color, 0.2s background-color, 0.2s box-shadow;
+
+  &:not(:disabled):not([aria-disabled]),
+  &[aria-disabled='false'] {
+    &:active,
+    &:focus,
+    &:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
+    }
+
+    &:hover {
+      color: var(--charcoal-${(p) => p.$color}-hover);
+      background-color: var(--charcoal-${(p) => p.$background}-hover);
+    }
+    &:active {
+      color: var(--charcoal-${(p) => p.$color}-press);
+      background-color: var(--charcoal-${(p) => p.$background}-press);
+    }
+  }
+
+  &:disabled,
+  &[aria-disabled]:not([aria-disabled='false']) {
+    opacity: 0.32;
+  }
+  height: ${(p) => (p.$size === 'M' ? 40 : 32)}px;
+`

packages/react/src/components/Button/index.tsx

@@ -1,16 +1,17 @@
 import { forwardRef } from 'react'
-import styled, { css } from 'styled-components'
-import { unreachable } from '../../_lib'
-import Clickable, { ClickableElement, ClickableProps } from '../Clickable'
+import { ClickableElement, ClickableProps } from '../Clickable'
+import { variantToFont } from './lib/variantToFont'
+import { variantToBackground } from './lib/variantToBackground'
+import { StyledButton } from './StyledButton'
 
-type Variant = 'Primary' | 'Default' | 'Overlay' | 'Danger' | 'Navigation'
-type Size = 'S' | 'M'
+export type Variant =
+  | 'Primary'
+  | 'Default'
+  | 'Overlay'
+  | 'Danger'
+  | 'Navigation'
 
-interface StyledProps {
-  $variant: Variant
-  $fullWidth: boolean
-  $size: Size
-}
+export type Size = 'S' | 'M'
 
 export type ButtonProps = Partial<{
   variant: Variant
@@ -44,98 +45,5 @@ const Button = forwardRef<ClickableElement, ButtonProps>(function Button(
     </StyledButton>
   )
 })
-export default Button
-
-const horizontalPaddingSmall = css`
-  padding-right: 16px;
-  padding-left: 16px;
-`
-const horizontalPaddingMedium = css`
-  padding-right: 24px;
-  padding-left: 24px;
-`
-
-type StyledButtonProps = Omit<StyledProps, '$variant'> & {
-  $background: ReturnType<typeof variantToBackground>
-  $color: ReturnType<typeof variantToFont>
-}
-const StyledButton = styled(Clickable)<StyledButtonProps>`
-  width: ${(p) => (p.$fullWidth ? 'stretch' : 'min-content')};
-  display: inline-grid;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  user-select: none;
-  white-space: nowrap;
-  border-radius: 999999px;
-  font-size: 14px;
-  line-height: 22px;
-  font-weight: bold;
-
-  ${(p) => (p.$size === 'M' ? horizontalPaddingMedium : horizontalPaddingSmall)}
-
-  color: var(--charcoal-${(p) => p.$color});
-  background-color: var(--charcoal-${(p) => p.$background});
-  transition: 0.2s color, 0.2s background-color, 0.2s box-shadow;
-
-  &:not(:disabled):not([aria-disabled]),
-  &[aria-disabled='false'] {
-    &:active,
-    &:focus,
-    &:focus-visible {
-      outline: none;
-      box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
-    }
 
-    &:hover {
-      color: var(--charcoal-${(p) => p.$color}-hover);
-      background-color: var(--charcoal-${(p) => p.$background}-hover);
-    }
-    &:active {
-      color: var(--charcoal-${(p) => p.$color}-press);
-      background-color: var(--charcoal-${(p) => p.$background}-press);
-    }
-  }
-
-  &:disabled,
-  &[aria-disabled]:not([aria-disabled='false']) {
-    opacity: 0.32;
-  }
-
-  /* よく考えたらheight=32って定義が存在しないな... */
-  height: ${(p) => (p.$size === 'M' ? 40 : 32)}px;
-`
-
-function variantToBackground(variant: Variant) {
-  switch (variant) {
-    case 'Overlay':
-      return 'surface4'
-    case 'Default':
-      return 'surface3'
-    case 'Primary':
-      return 'brand'
-    case 'Navigation':
-      return 'surface6'
-    case 'Danger':
-      return 'assertive'
-    default:
-      return unreachable(variant)
-  }
-}
-
-function variantToFont(variant: Variant) {
-  switch (variant) {
-    case 'Overlay':
-      return 'text5'
-    case 'Default':
-      return 'text2'
-    case 'Primary':
-      return 'text5'
-    case 'Navigation':
-      return 'text5'
-    case 'Danger':
-      return 'text5'
-    default:
-      return unreachable(variant)
-  }
-}
+export default Button

packages/react/src/components/Button/lib/variantToBackground.tsx

@@ -0,0 +1,19 @@
+import { unreachable } from '../../../_lib'
+import type { Variant } from '..'
+
+export function variantToBackground(variant: Variant) {
+  switch (variant) {
+    case 'Overlay':
+      return 'surface4'
+    case 'Default':
+      return 'surface3'
+    case 'Primary':
+      return 'brand'
+    case 'Navigation':
+      return 'surface6'
+    case 'Danger':
+      return 'assertive'
+    default:
+      return unreachable(variant)
+  }
+}

packages/react/src/components/Button/lib/variantToFont.tsx

@@ -0,0 +1,19 @@
+import { unreachable } from '../../../_lib'
+import type { Variant } from '..'
+
+export function variantToFont(variant: Variant) {
+  switch (variant) {
+    case 'Overlay':
+      return 'text5'
+    case 'Default':
+      return 'text2'
+    case 'Primary':
+      return 'text5'
+    case 'Navigation':
+      return 'text5'
+    case 'Danger':
+      return 'text5'
+    default:
+      return unreachable(variant)
+  }
+}