💄 style: support shadcn in Artifacts (#4256)

* 🐛 fix: support shadcn * 🐛 fix: support shadcn * ♻️ refactor: improve shadcn code
lobehub · Oct 5, 2024 · 863bae5 · 863bae5
1 parent 3bf7975
commit 863bae5
Show file tree

Hide file tree

Showing 3 changed files with 83 additions and 31 deletions.
diff --git a/src/app/(main)/chat/(workspace)/@portal/Artifacts/Body/Renderer/React.tsx b/src/app/(main)/chat/(workspace)/@portal/Artifacts/Body/Renderer/React.tsx
diff --git a/src/app/(main)/chat/(workspace)/@portal/Artifacts/Body/Renderer/React/index.tsx b/src/app/(main)/chat/(workspace)/@portal/Artifacts/Body/Renderer/React/index.tsx
@@ -0,0 +1,51 @@
+import { SandpackLayout, SandpackPreview, SandpackProvider } from '@codesandbox/sandpack-react';
+import { memo } from 'react';
+
+import { useChatStore } from '@/store/chat';
+import { chatPortalSelectors } from '@/store/chat/selectors';
+
+import { createTemplateFiles } from './template';
+
+interface ReactRendererProps {
+  code: string;
+}
+
+const ReactRenderer = memo<ReactRendererProps>(({ code }) => {
+  const title = useChatStore(chatPortalSelectors.artifactTitle);
+
+  return (
+    <SandpackProvider
+      customSetup={{
+        dependencies: {
+          '@lshay/ui': 'latest',
+          '@radix-ui/react-alert-dialog': 'latest',
+          '@radix-ui/react-dialog': 'latest',
+          '@radix-ui/react-icons': 'latest',
+          'antd': 'latest',
+          'class-variance-authority': 'latest',
+          'clsx': 'latest',
+          'lucide-react': 'latest',
+          'recharts': 'latest',
+          'tailwind-merge': 'latest',
+        },
+      }}
+      files={{
+        'App.tsx': code,
+        ...createTemplateFiles({ title }),
+      }}
+      options={{
+        externalResources: ['https://cdn.tailwindcss.com'],
+        visibleFiles: ['App.tsx'],
+      }}
+      style={{ height: '100%' }}
+      template="vite-react-ts"
+      theme="auto"
+    >
+      <SandpackLayout style={{ height: '100%' }}>
+        <SandpackPreview style={{ height: '100%' }} />
+      </SandpackLayout>
+    </SandpackProvider>
+  );
+});
+
+export default ReactRenderer;
diff --git a/src/app/(main)/chat/(workspace)/@portal/Artifacts/Body/Renderer/React/template.ts b/src/app/(main)/chat/(workspace)/@portal/Artifacts/Body/Renderer/React/template.ts
@@ -0,0 +1,32 @@
+interface TemplateFilesParams {
+  title?: string;
+}
+export const createTemplateFiles = ({ title }: TemplateFilesParams = {}) => ({
+  'index.html': `<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>${title || 'Artifacts App'}</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+</head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/index.tsx"></script>
+  </body>
+</html>
+`,
+  'vite.config.ts': {
+    code: `import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      '@/components/ui': '@lshay/ui/components/default',
+    },
+  },
+});`,
+  },
+});