From c7c372f2b946fcdecfd4ab3fd0d06e3604ab790c Mon Sep 17 00:00:00 2001
From: mimo <mimo@pixiv.co.jp>
Date: Wed, 31 Jan 2024 18:45:24 +0900
Subject: [PATCH] feat(react): tag item replace to csf3

---
 .../__snapshots__/index.story.storyshot       |   3 -
 .../src/components/TagItem/index.story.tsx    | 313 +++++++++---------
 2 files changed, 154 insertions(+), 162 deletions(-)

diff --git a/packages/react/src/components/TagItem/__snapshots__/index.story.storyshot b/packages/react/src/components/TagItem/__snapshots__/index.story.storyshot
index 3a3019041..9286af2a4 100644
--- a/packages/react/src/components/TagItem/__snapshots__/index.story.storyshot
+++ b/packages/react/src/components/TagItem/__snapshots__/index.story.storyshot
@@ -106,7 +106,6 @@ exports[`Storyshots TagItem Default 1`] = `
 >
   <a
     className="c0"
-    href=""
     onClick={[Function]}
     onDragStart={[Function]}
     onKeyDown={[Function]}
@@ -119,11 +118,9 @@ exports[`Storyshots TagItem Default 1`] = `
     onTouchEnd={[Function]}
     onTouchMove={[Function]}
     onTouchStart={[Function]}
-    rel=""
     role="button"
     size="M"
     tabIndex={0}
-    target=""
   >
     <div
       className="c1"
diff --git a/packages/react/src/components/TagItem/index.story.tsx b/packages/react/src/components/TagItem/index.story.tsx
index 6333b43b8..78aaf0c2f 100644
--- a/packages/react/src/components/TagItem/index.story.tsx
+++ b/packages/react/src/components/TagItem/index.story.tsx
@@ -1,7 +1,7 @@
 import { action } from '@storybook/addon-actions'
 import styled from 'styled-components'
-import TagItem, { TagItemProps } from '.'
-import { Story } from '../../_lib/compat'
+import TagItem from '.'
+import { Meta, StoryObj } from '@storybook/react'
 
 export default {
   title: 'TagItem',
@@ -13,160 +13,161 @@ export default {
       },
     },
   },
-}
+  render: function Render(args) {
+    return <TagItem {...args} />
+  },
+} as Meta<typeof TagItem>
 
-export const Default: Story<TagItemProps> = (props) => {
-  return <TagItem {...props} onClick={action('click')} />
-}
-Default.args = {
-  label: '#女の子',
-  bgColor: '#7ACCB1',
-  href: '',
-  rel: '',
-  target: '',
-  className: '',
+export const Default: StoryObj<typeof TagItem> = {
+  args: {
+    label: '#女の子',
+    bgColor: '#7ACCB1',
+  },
 }
 
-export const Playground: Story<TagItemProps> = ({
-  bgColor,
-  label,
-  translatedLabel,
-}) => {
-  return (
-    <div>
-      <Container>
-        <div>
-          <TagItem
-            label={label}
-            size="M"
-            status="default"
-            bgColor={bgColor}
-            onClick={action('click')}
-          />
-        </div>
-        <div />
-        <div>
-          <TagItem
-            label={label}
-            translatedLabel={translatedLabel}
-            size="M"
-            status="default"
-            bgColor={bgColor}
-            onClick={action('click')}
-          />
-        </div>
-        <div />
-      </Container>
-      <Container>
-        <div>
-          <TagItem
-            label={label}
-            size="M"
-            status="active"
-            bgColor={bgColor}
-            onClick={action('click')}
-          />
-        </div>
-        <div />
-        <div>
-          <TagItem
-            label={label}
-            translatedLabel={translatedLabel}
-            size="M"
-            status="active"
-            bgColor={bgColor}
-            onClick={action('click')}
-          />
-        </div>
-        <div />
-      </Container>
-      <Container>
-        <div>
-          <TagItem
-            label={label}
-            size="M"
-            status="inactive"
-            bgColor={bgColor}
-            onClick={action('click')}
-          />
-        </div>
-        <div>
-          <TagItem
-            label={label}
-            size="M"
-            status="inactive"
-            disabled
-            bgColor={bgColor}
-            onClick={action('click')}
-          />
-        </div>
-        <div>
-          <TagItem
-            label={label}
-            translatedLabel={translatedLabel}
-            size="M"
-            status="inactive"
-            bgColor={bgColor}
-            onClick={action('click')}
-          />
-        </div>
-        <div>
-          <TagItem
-            label={label}
-            translatedLabel={translatedLabel}
-            size="M"
-            status="inactive"
-            disabled
-            bgColor={bgColor}
-            onClick={action('click')}
-          />
-        </div>
-      </Container>
-      <Container>
-        <div>
-          <TagItem
-            label={label}
-            size="S"
-            status="default"
-            bgColor={bgColor}
-            onClick={action('click')}
-          />
-        </div>
-      </Container>
-      <Container>
-        <div>
-          <TagItem
-            label={label}
-            size="S"
-            status="active"
-            bgColor={bgColor}
-            onClick={action('click')}
-          />
-        </div>
-      </Container>
-      <Container>
-        <div>
-          <TagItem
-            label={label}
-            size="S"
-            status="inactive"
-            bgColor={bgColor}
-            onClick={action('click')}
-          />
-        </div>
-        <div>
-          <TagItem
-            label={label}
-            size="S"
-            status="inactive"
-            disabled
-            bgColor={bgColor}
-            onClick={action('click')}
-          />
-        </div>
-      </Container>
-    </div>
-  )
+export const Playground: StoryObj<typeof TagItem> = {
+  render: function Render({ bgColor, label, translatedLabel }) {
+    return (
+      <div>
+        <Container>
+          <div>
+            <TagItem
+              label={label}
+              size="M"
+              status="default"
+              bgColor={bgColor}
+              onClick={action('click')}
+            />
+          </div>
+          <div />
+          <div>
+            <TagItem
+              label={label}
+              translatedLabel={translatedLabel}
+              size="M"
+              status="default"
+              bgColor={bgColor}
+              onClick={action('click')}
+            />
+          </div>
+          <div />
+        </Container>
+        <Container>
+          <div>
+            <TagItem
+              label={label}
+              size="M"
+              status="active"
+              bgColor={bgColor}
+              onClick={action('click')}
+            />
+          </div>
+          <div />
+          <div>
+            <TagItem
+              label={label}
+              translatedLabel={translatedLabel}
+              size="M"
+              status="active"
+              bgColor={bgColor}
+              onClick={action('click')}
+            />
+          </div>
+          <div />
+        </Container>
+        <Container>
+          <div>
+            <TagItem
+              label={label}
+              size="M"
+              status="inactive"
+              bgColor={bgColor}
+              onClick={action('click')}
+            />
+          </div>
+          <div>
+            <TagItem
+              label={label}
+              size="M"
+              status="inactive"
+              disabled
+              bgColor={bgColor}
+              onClick={action('click')}
+            />
+          </div>
+          <div>
+            <TagItem
+              label={label}
+              translatedLabel={translatedLabel}
+              size="M"
+              status="inactive"
+              bgColor={bgColor}
+              onClick={action('click')}
+            />
+          </div>
+          <div>
+            <TagItem
+              label={label}
+              translatedLabel={translatedLabel}
+              size="M"
+              status="inactive"
+              disabled
+              bgColor={bgColor}
+              onClick={action('click')}
+            />
+          </div>
+        </Container>
+        <Container>
+          <div>
+            <TagItem
+              label={label}
+              size="S"
+              status="default"
+              bgColor={bgColor}
+              onClick={action('click')}
+            />
+          </div>
+        </Container>
+        <Container>
+          <div>
+            <TagItem
+              label={label}
+              size="S"
+              status="active"
+              bgColor={bgColor}
+              onClick={action('click')}
+            />
+          </div>
+        </Container>
+        <Container>
+          <div>
+            <TagItem
+              label={label}
+              size="S"
+              status="inactive"
+              bgColor={bgColor}
+              onClick={action('click')}
+            />
+          </div>
+          <div>
+            <TagItem
+              label={label}
+              size="S"
+              status="inactive"
+              disabled
+              bgColor={bgColor}
+              onClick={action('click')}
+            />
+          </div>
+        </Container>
+      </div>
+    )
+  },
+  args: {
+    label: '#女の子',
+    translatedLabel: 'girl',
+    bgColor: '#7ACCB1',
+  },
 }
 
 const Container = styled.div`
@@ -180,9 +181,3 @@ const Container = styled.div`
     padding: 1em;
   }
 `
-
-Playground.args = {
-  label: '#女の子',
-  translatedLabel: 'girl',
-  bgColor: '#7ACCB1',
-}