update components stories

src/components/Heading/Heading.stories.tsx

@@ -1,20 +1,23 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react'
+import type { Meta, StoryObj } from '@storybook/react'
 
 import { Heading } from './Heading'
 
-export default {
+const meta = {
   title: 'Heading',
   component: Heading,
-  argTypes: {
-    align: {
-      defaultValue: 'left',
-    },
-    as: {
-      defaultValue: 'h1',
-    },
+  parameters: {
+    layout: 'centered',
   },
-} as ComponentMeta<typeof Heading>
+  tags: ['autodocs'],
+} satisfies Meta<typeof Heading>
 
-const Template: ComponentStory<typeof Heading> = (args) => <Heading {...args}>Heading</Heading>
+export default meta
+type Story = StoryObj<typeof meta>
 
-export const Primary = Template.bind({})
+export const Default: Story = {
+  args: {
+    children: 'Heading',
+    align: 'left',
+    as: 'h1',
+  },
+}

src/components/Navigation/Navigation.stories.tsx

@@ -1,22 +1,27 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/react'
 import { MemoryRouter } from 'react-router-dom'
 
 import { NAV_LINKS } from '~/constants'
 
 import { Navigation } from '.'
 
-export default {
+const meta = {
   title: 'Navigation',
   component: Navigation,
+  decorators: [
+    (Story) => (
+      <MemoryRouter>
+        <Story />
+      </MemoryRouter>
+    )
+  ]
+} satisfies Meta<typeof Navigation>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
   args: {
     links: NAV_LINKS,
   },
-} as ComponentMeta<typeof Navigation>
-
-const Template: ComponentStory<typeof Navigation> = (args) => (
-  <MemoryRouter>
-    <Navigation {...args} />
-  </MemoryRouter>
-)
-
-export const Default = Template.bind({})
+}