Skip to content

Commit d5159ce

Browse files
committed
Improve debug
1 parent e9a38b1 commit d5159ce

26 files changed

+890
-843
lines changed

apps/debug/app/layout.tsx

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
2+
import type { Metadata } from "next";
3+
import "../styles/globals.css";
4+
5+
export const metadata: Metadata = {
6+
title: "v0 App",
7+
description: "Created with v0",
8+
generator: "v0.dev",
9+
};
10+
11+
export default function RootLayout({
12+
children,
13+
}: Readonly<{
14+
children: React.ReactNode;
15+
}>) {
16+
return (
17+
<html lang="en">
18+
<body>{children}</body>
19+
</html>
20+
);
21+
}

apps/debug/app/page.tsx

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
"use client";
2+
3+
import { Framework } from "types";
4+
import * as React from "react";
5+
import { PluginUI } from "plugin-ui";
6+
7+
export default function Web() {
8+
const [selectedFramework, setSelectedFramework] =
9+
React.useState<Framework>("HTML");
10+
const testWarnings = ["This is an example of a conversion warning message."];
11+
12+
return (
13+
<div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 p-8">
14+
<header className="mb-10">
15+
<h1 className="text-5xl font-bold text-gray-900 tracking-tight">
16+
Debug Mode
17+
</h1>
18+
<p className="text-gray-600 mt-2">
19+
Preview your Figma to Code plugin in both light and dark modes
20+
</p>
21+
<div className="h-0.5 bg-gradient-to-r from-blue-500 to-purple-500 mt-6"></div>
22+
</header>
23+
24+
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
25+
<div className="flex flex-col">
26+
<div className="bg-gradient-to-br from-white to-gray-50 p-6 rounded-xl shadow-xl border border-gray-100">
27+
<h2 className="text-2xl font-semibold mb-4 text-gray-800">
28+
Light Mode
29+
</h2>
30+
<div className="border rounded-xl">
31+
<PluginFigmaToolbar variant="(Light)" />
32+
<PluginUI
33+
code={"code goes hereeeee"}
34+
isLoading={false}
35+
selectedFramework={selectedFramework}
36+
setSelectedFramework={setSelectedFramework}
37+
htmlPreview={null}
38+
settings={undefined}
39+
onPreferenceChanged={() => {}}
40+
colors={[]}
41+
gradients={[]}
42+
warnings={testWarnings}
43+
/>
44+
</div>
45+
</div>
46+
</div>
47+
48+
<div className="flex flex-col">
49+
<div className="p-6 rounded-xl shadow-xl border border-gray-700 bg-[#2C2C2C]">
50+
<h2 className="text-2xl font-semibold mb-4 text-gray-100">
51+
Dark Mode
52+
</h2>
53+
<div className="border rounded-xl dark">
54+
<PluginFigmaToolbar variant="(Dark)" />
55+
<PluginUI
56+
code={"code goes hereeeee"}
57+
isLoading={false}
58+
selectedFramework={selectedFramework}
59+
setSelectedFramework={setSelectedFramework}
60+
htmlPreview={null}
61+
settings={undefined}
62+
onPreferenceChanged={() => {}}
63+
colors={[]}
64+
gradients={[]}
65+
warnings={testWarnings}
66+
/>
67+
</div>
68+
</div>
69+
</div>
70+
</div>
71+
</div>
72+
);
73+
}
74+
75+
const PluginFigmaToolbar = (props: { variant: string }) => (
76+
<div className="bg-neutral-800 w-full h-12 flex items-center text-white gap-4 px-5 rounded-t-lg shadow-sm">
77+
<div className="flex items-center gap-2">
78+
<div className="w-3 h-3 rounded-full bg-red-500"></div>
79+
<div className="w-3 h-3 rounded-full bg-yellow-500"></div>
80+
<div className="w-3 h-3 rounded-full bg-green-500"></div>
81+
</div>
82+
<span className="font-medium ml-2">Figma to Code {props.variant}</span>
83+
</div>
84+
);

apps/debug/next-env.d.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,4 @@
22
/// <reference types="next/image-types/global" />
33

44
// NOTE: This file should not be edited
5-
// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.
5+
// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

apps/debug/next.config.js

Lines changed: 0 additions & 29 deletions
This file was deleted.

apps/debug/next.config.mjs

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
let userConfig = undefined
2+
try {
3+
userConfig = await import('./v0-user-next.config')
4+
} catch (e) {
5+
// ignore error
6+
}
7+
8+
/** @type {import('next').NextConfig} */
9+
const nextConfig = {
10+
eslint: {
11+
ignoreDuringBuilds: true,
12+
},
13+
typescript: {
14+
ignoreBuildErrors: true,
15+
},
16+
experimental: {
17+
webpackBuildWorker: true,
18+
parallelServerBuildTraces: true,
19+
parallelServerCompiles: true,
20+
},
21+
}
22+
23+
mergeConfig(nextConfig, userConfig)
24+
25+
function mergeConfig(nextConfig, userConfig) {
26+
if (!userConfig) {
27+
return
28+
}
29+
30+
for (const key in userConfig) {
31+
if (
32+
typeof nextConfig[key] === 'object' &&
33+
!Array.isArray(nextConfig[key])
34+
) {
35+
nextConfig[key] = {
36+
...nextConfig[key],
37+
...userConfig[key],
38+
}
39+
} else {
40+
nextConfig[key] = userConfig[key]
41+
}
42+
}
43+
}
44+
45+
export default nextConfig

apps/debug/package.json

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,19 +11,19 @@
1111
},
1212
"dependencies": {
1313
"backend": "workspace:*",
14-
"next": "^15.2.1",
14+
"next": "^15.2.3",
1515
"plugin-ui": "workspace:*",
1616
"react": "^19.0.0",
1717
"react-dom": "^19.0.0"
1818
},
1919
"devDependencies": {
20-
"@types/node": "^22.13.9",
21-
"@types/react": "^19.0.10",
20+
"@tailwindcss/postcss": "^4.0.14",
21+
"@types/node": "^22.13.10",
22+
"@types/react": "^19.0.11",
2223
"@types/react-dom": "^19.0.4",
23-
"autoprefixer": "^10.4.20",
2424
"eslint-config-custom": "workspace:*",
2525
"postcss": "^8.5.3",
26-
"tailwindcss": "3.4.6",
26+
"tailwindcss": "4.0.14",
2727
"tsconfig": "workspace:*",
2828
"types": "workspace:*",
2929
"typescript": "^5.8.2"

apps/debug/pages/_app.tsx

Lines changed: 0 additions & 6 deletions
This file was deleted.

apps/debug/pages/index.tsx

Lines changed: 0 additions & 112 deletions
This file was deleted.

apps/debug/postcss.config.js

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
module.exports = {
22
plugins: {
3-
tailwindcss: {},
4-
autoprefixer: {},
3+
'@tailwindcss/postcss': {},
54
},
65
};

0 commit comments

Comments
 (0)