chore: prettify preview

Author: shruti-shreyasi

src/components/molecules/StaticEditor.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useRef, useState, type ReactElement } from 'react';
 import { useTheme } from '../ThemeProvider';
+import prettify from '@/lib/utils.ts';
 
 const SANDBOX_THEMES = {
   light: 'sandbox',
@@ -55,7 +56,11 @@ export function StaticEditor({ code }: { code: string }): ReactElement {
   }, []);
 
   useEffect(() => {
-    if (code !== sandboxRef.current?.getText?.()) sandboxRef.current?.setText?.(code);
+    prettify(code)
+      .then(prettyCode => {
+        sandboxRef.current?.setText?.(prettyCode);
+      })
+      .catch(() => sandboxRef.current?.setText?.(code));
   }, [code]);
 
   useEffect(() => {

src/lib/utils.ts

@@ -1,6 +1,28 @@
 import { type ClassValue, clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 
+import * as prettier from 'prettier/standalone';
+import * as estreePlugin from 'prettier/plugins/estree';
+import * as tsPlugin from 'prettier/plugins/typescript';
+
+const prettierConfig = {
+  singleQuote: true,
+  trailingComma: 'es5',
+  printWidth: 120,
+  arrowParens: 'avoid',
+} as const;
+
+const plugins = [estreePlugin, tsPlugin];
+
+export default async function prettify(file: string, path = 'default.tsx'): Promise<string> {
+  return prettier.format(file, {
+    ...prettierConfig,
+    parser: 'typescript',
+    plugins,
+    filepath: path,
+  });
+}
+
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
 }