From cb968b474d565528d9422f4207b0cf8f25e634c4 Mon Sep 17 00:00:00 2001
From: koji <kk2796@nyu.edu>
Date: Sat, 13 Apr 2024 16:10:10 -0400
Subject: [PATCH 1/2] refactor(components): refactor styledtext stories

refactor styledtext stories

close AUTH-346
---
 .../atoms/StyledText/StyledText.stories.tsx   | 132 ++++++++++--------
 1 file changed, 76 insertions(+), 56 deletions(-)

diff --git a/components/src/atoms/StyledText/StyledText.stories.tsx b/components/src/atoms/StyledText/StyledText.stories.tsx
index 12f8ab8c16a..6c3f692c5f4 100644
--- a/components/src/atoms/StyledText/StyledText.stories.tsx
+++ b/components/src/atoms/StyledText/StyledText.stories.tsx
@@ -1,87 +1,107 @@
+/* eslint-disable storybook/prefer-pascal-case */
 import * as React from 'react'
+import { SPACING, TYPOGRAPHY } from '../../ui-style-constants'
+import { Flex } from '../../primitives'
 import { StyledText } from './'
-import { TYPOGRAPHY } from '../../ui-style-constants'
-import type { Story, Meta } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react'
 
-export default {
+const meta: Meta<typeof StyledText> = {
   title: 'Library/Atoms/StyledText',
   component: StyledText,
-} as Meta
+  decorators: [
+    Story => (
+      <Flex padding={SPACING.spacing16}>
+        <Story />
+      </Flex>
+    ),
+  ],
+}
+
+export default meta
 
-const Template: Story<React.ComponentProps<typeof StyledText>> = args => (
-  <StyledText {...args} />
-)
+type Story = StoryObj<typeof StyledText>
 
 const dummyText =
   'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Purus sapien nunc dolor, aliquet nibh placerat et nisl, arcu. Pellentesque blandit sollicitudin vitae morbi morbi vulputate cursus tellus. Amet proin donec proin id aliquet in nullam.'
 
-export const h1 = Template.bind({})
-h1.args = {
-  as: 'h1',
-  children: dummyText,
+export const h1: Story = {
+  args: {
+    as: 'h1',
+    children: dummyText,
+  },
 }
 
-export const h2 = Template.bind({})
-h2.args = {
-  as: 'h2',
-  children: dummyText,
+export const h2: Story = {
+  args: {
+    as: 'h2',
+    children: dummyText,
+  },
 }
 
-export const h3 = Template.bind({})
-h3.args = {
-  as: 'h3',
-  children: dummyText,
+export const h3: Story = {
+  args: {
+    as: 'h3',
+    children: dummyText,
+  },
 }
 
-export const h6 = Template.bind({})
-h6.args = {
-  as: 'h6',
-  children: dummyText,
+export const h6: Story = {
+  args: {
+    as: 'h6',
+    children: dummyText,
+  },
 }
 
-export const p = Template.bind({})
-p.args = {
-  as: 'p',
-  children: dummyText,
+export const p: Story = {
+  args: {
+    as: 'p',
+    children: dummyText,
+  },
 }
 
-export const label = Template.bind({})
-label.args = {
-  as: 'label',
-  children: dummyText,
+export const label: Story = {
+  args: {
+    as: 'label',
+    children: dummyText,
+  },
 }
 
-export const h2SemiBold = Template.bind({})
-h2SemiBold.args = {
-  as: 'h2',
-  fontWeight: TYPOGRAPHY.fontWeightSemiBold,
-  children: dummyText,
+export const h2SemiBold: Story = {
+  args: {
+    as: 'h2',
+    fontWeight: TYPOGRAPHY.fontWeightSemiBold,
+    children: dummyText,
+  },
 }
 
-export const h3SemiBold = Template.bind({})
-h3SemiBold.args = {
-  as: 'h3',
-  fontWeight: TYPOGRAPHY.fontWeightSemiBold,
-  children: dummyText,
+export const h3SemiBold: Story = {
+  args: {
+    as: 'h3',
+    fontWeight: TYPOGRAPHY.fontWeightSemiBold,
+    children: dummyText,
+  },
 }
 
-export const h6SemiBold = Template.bind({})
-h6SemiBold.args = {
-  as: 'h6',
-  fontWeight: TYPOGRAPHY.fontWeightSemiBold,
-  children: dummyText,
+export const h6SemiBold: Story = {
+  args: {
+    as: 'h6',
+    fontWeight: TYPOGRAPHY.fontWeightSemiBold,
+    children: dummyText,
+  },
 }
 
-export const pSemiBold = Template.bind({})
-pSemiBold.args = {
-  as: 'p',
-  fontWeight: TYPOGRAPHY.fontWeightSemiBold,
-  children: dummyText,
+export const pSemiBold: Story = {
+  args: {
+    as: 'p',
+    fontWeight: TYPOGRAPHY.fontWeightSemiBold,
+    children: dummyText,
+  },
 }
 
-export const labelSemiBold = Template.bind({})
-labelSemiBold.args = {
-  as: 'label',
-  fontWeight: TYPOGRAPHY.fontWeightSemiBold,
-  children: dummyText,
+export const labelSemiBold: Story = {
+  args: {
+    as: 'label',
+    fontWeight: TYPOGRAPHY.fontWeightSemiBold,
+    children: dummyText,
+  },
 }

From 867926f055b5db3bc234450fd1ce77bf6ae48a07 Mon Sep 17 00:00:00 2001
From: koji <kk2796@nyu.edu>
Date: Mon, 15 Apr 2024 11:41:35 -0400
Subject: [PATCH 2/2] Update StyledText.stories.tsx

---
 components/src/atoms/StyledText/StyledText.stories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/src/atoms/StyledText/StyledText.stories.tsx b/components/src/atoms/StyledText/StyledText.stories.tsx
index 6c3f692c5f4..388f7e79bdf 100644
--- a/components/src/atoms/StyledText/StyledText.stories.tsx
+++ b/components/src/atoms/StyledText/StyledText.stories.tsx
@@ -2,7 +2,7 @@
 import * as React from 'react'
 import { SPACING, TYPOGRAPHY } from '../../ui-style-constants'
 import { Flex } from '../../primitives'
-import { StyledText } from './'
+import { StyledText } from './index'
 import type { Meta, StoryObj } from '@storybook/react'
 
 const meta: Meta<typeof StyledText> = {