fix: storybook

Author: adaam2

.storybook/main.ts

@@ -1,4 +1,5 @@
 import type { StorybookConfig } from '@storybook/react-vite'
+import path from 'path'
 
 const config: StorybookConfig = {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
@@ -18,8 +19,17 @@ const config: StorybookConfig = {
   },
   async viteFinal(config) {
     const { mergeConfig } = await import('vite')
+    const { resolve } = await import('path')
+    const { fileURLToPath } = await import('url')
+    const __filename = fileURLToPath(import.meta.url)
+    const __dirname = path.dirname(__filename)
 
     return mergeConfig(config, {
+      resolve: {
+        alias: {
+          '@': resolve(__dirname, '../src'),
+        },
+      },
       optimizeDeps: {
         // https://github.com/storybookjs/storybook/issues/28542#issuecomment-2268031095
         exclude: [

src/components/CodePlayground/index.tsx

@@ -17,7 +17,7 @@ import {
   SelectValue,
 } from '../Select'
 import { prettyLanguageName, SupportedLanguage } from '../../types'
-import '@/styles/codeSyntax.css'
+import '../../styles/codeSyntax.css'
 import { motion } from 'motion/react'
 import { cn } from '../../lib/utils'
 import { AnimatePresence } from 'motion/react'

src/components/CodeSnippet/index.tsx

@@ -2,7 +2,7 @@ import { useCallback, useState, useEffect, useRef } from 'react'
 import { cn } from '../../lib/utils'
 import { ProgrammingLanguage, Size } from '../../types'
 import { AnimatePresence, motion } from 'motion/react'
-import '@/styles/codeSyntax.css'
+import '../../styles/codeSyntax.css'
 import './codeSnippet.css'
 import { Icon } from '../Icon'
 import {

src/components/Logo/Animated.tsx

@@ -8,9 +8,7 @@ import {
 } from '@rive-app/react-canvas-lite'
 import { cva } from 'class-variance-authority'
 import { FC, useEffect, useState } from 'react'
-
-// read rive file from local directory into arraybuffer
-const riveFile = await import('./speakeasy-logo.riv')
+import riveFileUrl from './speakeasy-logo.riv'
 
 const stackLogoClass = cva('relative', {
   variants: {
@@ -54,7 +52,7 @@ export const AnimatedLogo = ({
   const theme = useTheme()
   const [stateMachine, setStateMachine] = useState<StateMachine>('loop-dark')
   const { rive, RiveComponent } = useRive({
-    src: riveFile.default,
+    src: riveFileUrl,
     stateMachines: stateMachine,
     autoplay: true,
     layout: new Layout({