Merge pull request #376 from uyupun/refactor/base-components

Heading / Text コンポーネントのリファクタリング
uyupun · Mar 23, 2024 · 4b5a2d8 · 4b5a2d8
2 parents a14a733 + 3da3603
commit 4b5a2d8
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 36 deletions.
diff --git a/src/components/base/Heading/index.stories.tsx b/src/components/base/Heading/index.stories.tsx
@@ -13,7 +13,7 @@ export const Heading: Story = {
   render: () => (
     <div>
       <BaseHeading>Heading level 1</BaseHeading>
-      <BaseHeading tag="h2">Heading level 2</BaseHeading>
+      <BaseHeading tagName="h2">Heading level 2</BaseHeading>
     </div>
   ),
 };
diff --git a/src/components/base/Heading/index.tsx b/src/components/base/Heading/index.tsx
@@ -2,26 +2,30 @@ import clsx from 'clsx';
 
 import { styles } from './styles.css';
 
-import type { FC, ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, FC, ReactNode } from 'react';
 
-type Props = {
+type TagName = 'h1' | 'h2';
+
+type BaseProps<T extends TagName> = {
   /**
    * 見出しのタグ
    */
-  tag?: 'h1' | 'h2';
+  tagName?: T;
   /**
    * 見出しのコンテンツ
    */
   children: ReactNode;
 };
 
-const Heading: FC<Props> = ({ tag = 'h1', children }) => {
-  switch (tag) {
-    case 'h1':
-      return <h1 className={clsx(styles.common, styles.h1)}>{children}</h1>;
-    case 'h2':
-      return <h2 className={clsx(styles.common, styles.h2)}>{children}</h2>;
-  }
+type Props<T extends TagName> = BaseProps<T> &
+  Omit<ComponentPropsWithoutRef<T>, keyof BaseProps<T>>;
+
+const Heading: FC<Props<TagName>> = ({ tagName: TagName = 'h1', children, className, ...rest }) => {
+  return (
+    <TagName className={clsx(styles.common, styles[TagName], className)} {...rest}>
+      {children}
+    </TagName>
+  );
 };
 
 export { Heading };
diff --git a/src/components/base/Text/index.stories.tsx b/src/components/base/Text/index.stories.tsx
@@ -14,33 +14,33 @@ export const Text: Story = {
     <dl>
       <dt style={{ color: 'white', marginBottom: '8px' }}>Tag</dt>
       <dd style={{ marginBottom: '24px' }}>
-        <BaseText>tag=&quot;span&quot;</BaseText>
-        <BaseText tag="p">tag=&quot;p&quot;</BaseText>
-        <BaseText tag="div">tag=&quot;div&quot;</BaseText>
+        <BaseText>tagName=&quot;span&quot;</BaseText>
+        <BaseText tagName="p">tagName=&quot;p&quot;</BaseText>
+        <BaseText tagName="div">tagName=&quot;div&quot;</BaseText>
       </dd>
       <dt style={{ color: 'white', marginBottom: '8px' }}>Font Weight</dt>
       <dd style={{ marginBottom: '24px' }}>
-        <BaseText tag="p">fontWeight=&quot;normal&quot;</BaseText>
-        <BaseText fontWeight="bold" tag="p">
+        <BaseText tagName="p">fontWeight=&quot;normal&quot;</BaseText>
+        <BaseText fontWeight="bold" tagName="p">
           fontWeight=&quot;bold&quot;
         </BaseText>
       </dd>
       <dt style={{ color: 'white', marginBottom: '8px' }}>Font Style</dt>
       <dd style={{ marginBottom: '24px' }}>
-        <BaseText tag="p">fontStyle=&quot;normal&quot;</BaseText>
-        <BaseText fontStyle="italic" tag="p">
+        <BaseText tagName="p">fontStyle=&quot;normal&quot;</BaseText>
+        <BaseText fontStyle="italic" tagName="p">
           fontStyle=&quot;italic&quot;
         </BaseText>
       </dd>
       <dt style={{ color: 'white', marginBottom: '8px' }}>Color</dt>
       <dd style={{ marginBottom: '24px' }}>
-        <BaseText color="white" tag="p">
+        <BaseText color="white" tagName="p">
           color=&quot;white&quot;
         </BaseText>
-        <BaseText color="red" tag="p">
+        <BaseText color="red" tagName="p">
           color=&quot;red&quot;
         </BaseText>
-        <BaseText color="lightGray" tag="p">
+        <BaseText color="lightGray" tagName="p">
           color=&quot;lightGray&quot;
         </BaseText>
       </dd>

diff --git a/src/components/base/Text/index.tsx b/src/components/base/Text/index.tsx
@@ -1,12 +1,16 @@
+import clsx from 'clsx';
+
 import { styles, type TextColor, type TextFontStyle, type TextFontWeight } from './styles.css';
 
-import type { FC, ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, FC, ReactNode } from 'react';
+
+type TagName = 'span' | 'p' | 'div';
 
-type Props = {
+type BaseProps<T extends TagName> = {
   /**
    * テキストのタグ
    */
-  tag?: 'span' | 'p' | 'div';
+  tagName?: T;
   /**
    * テキストの太さ
    */
@@ -25,28 +29,30 @@ type Props = {
   children: ReactNode;
 };
 
-const Text: FC<Props> = ({
-  tag = 'span',
+type Props<T extends TagName> = BaseProps<T> &
+  Omit<ComponentPropsWithoutRef<T>, keyof BaseProps<T>>;
+
+const Text: FC<Props<TagName>> = ({
+  tagName: TagName = 'span',
   fontWeight = 'normal',
   fontStyle = 'normal',
   color = 'white',
   children,
+  className,
+  ...rest
 }) => {
-  const className = styles({
+  const style = styles({
     color,
     fontWeight,
-    display: tag === 'span' ? 'inlineBlock' : 'block',
+    display: TagName === 'span' ? 'inlineBlock' : 'block',
     fontStyle,
   });
 
-  switch (tag) {
-    case 'span':
-      return <span className={className}>{children}</span>;
-    case 'p':
-      return <p className={className}>{children}</p>;
-    case 'div':
-      return <div className={className}>{children}</div>;
-  }
+  return (
+    <TagName className={clsx(style, className)} {...rest}>
+      {children}
+    </TagName>
+  );
 };
 
 export { Text };