feat(gui): setup

prismicio · Sep 5, 2023 · 7f8f518 · 7f8f518
1 parent 400da42
commit 7f8f518
Show file tree

Hide file tree

Showing 21 changed files with 6,158 additions and 380 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -12,8 +12,9 @@ module.exports = {
 		"plugin:@typescript-eslint/eslint-recommended",
 		"plugin:@typescript-eslint/recommended",
 		"plugin:prettier/recommended",
+		"plugin:react-hooks/recommended",
 	],
-	plugins: ["eslint-plugin-tsdoc"],
+	plugins: ["eslint-plugin-tsdoc", "react-refresh"],
 	rules: {
 		"no-console": ["warn", { allow: ["info", "warn", "error"] }],
 		"no-debugger": "warn",
@@ -34,5 +35,9 @@ module.exports = {
 		"@typescript-eslint/no-var-requires": "off",
 		"@typescript-eslint/explicit-module-boundary-types": "error",
 		"tsdoc/syntax": "warn",
+		"react-refresh/only-export-components": [
+      "warn",
+      { allowConstantExport: true },
+    ],
 	},
 };
diff --git a/bin/prismic-upgrade-from-legacy.js b/bin/prismic-upgrade-from-legacy.js
@@ -1,3 +1,3 @@
 #!/usr/bin/env node
 
-import("../dist/cli.cjs");
+import("../dist/cli-watcher.cjs");
diff --git a/gui/index.html b/gui/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/gui/postcss.config.js b/gui/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+	plugins: {
+		tailwindcss: { config: "./gui/tailwind.config.js" },
+		autoprefixer: {},
+	},
+};
diff --git a/gui/public/vite.svg b/gui/public/vite.svg
diff --git a/gui/src/App.tsx b/gui/src/App.tsx
@@ -0,0 +1,21 @@
+import { Alert, AlertButton, Box } from "@prismicio/editor-ui";
+
+export function App(): JSX.Element {
+	return (
+		<div className="bg-green-500">
+			<Box display="grid" gridTemplateColumns="repeat(5, 600px)" gap={16}>
+				<Alert
+					title="Title"
+					subtitle="This is a subtitle"
+					onClose={() => null}
+					footerButtons={
+						<>
+							<AlertButton title="Customer Support" onClick={() => null} />
+							<AlertButton title="Retry" onClick={() => null} />
+						</>
+					}
+				/>
+			</Box>
+		</div>
+	);
+}
diff --git a/gui/src/index.css b/gui/src/index.css
@@ -0,0 +1,5 @@
+@import "@prismicio/editor-ui/style.css";
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/gui/src/main.tsx b/gui/src/main.tsx
@@ -0,0 +1,14 @@
+import { ThemeProvider } from "@prismicio/editor-ui";
+import React from "react";
+import ReactDOM from "react-dom/client";
+
+import { App } from "./App.tsx";
+import "./index.css";
+
+ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
+	<React.StrictMode>
+		<ThemeProvider>
+			<App />
+		</ThemeProvider>
+	</React.StrictMode>,
+);
diff --git a/gui/src/vite-env.d.ts b/gui/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/gui/tailwind.config.js b/gui/tailwind.config.js
@@ -0,0 +1,10 @@
+/**
+ * @type {import("tailwindcss").Config}
+ */
+export default {
+	content: ["./gui/index.html", "./gui/src/**/*.{js,ts,jsx,tsx}"],
+	theme: {
+		extend: {},
+	},
+	plugins: [],
+};
diff --git a/gui/tsconfig.json b/gui/tsconfig.json
@@ -0,0 +1,33 @@
+{
+	"compilerOptions": {
+		"target": "ES2020",
+		"useDefineForClassFields": true,
+		"lib": [
+			"ES2020",
+			"DOM",
+			"DOM.Iterable"
+		],
+		"module": "ESNext",
+		"skipLibCheck": true,
+		/* Bundler mode */
+		"moduleResolution": "bundler",
+		"allowImportingTsExtensions": true,
+		"resolveJsonModule": true,
+		"isolatedModules": true,
+		"noEmit": true,
+		"jsx": "react-jsx",
+		/* Linting */
+		"strict": true,
+		"noUnusedLocals": true,
+		"noUnusedParameters": true,
+		"noFallthroughCasesInSwitch": true
+	},
+	"include": [
+		"src"
+	],
+	"references": [
+		{
+			"path": "./tsconfig.node.json"
+		}
+	]
+}
diff --git a/gui/tsconfig.node.json b/gui/tsconfig.node.json
@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/gui/vite.config.ts b/gui/vite.config.ts
@@ -0,0 +1,11 @@
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+	plugins: [react()],
+	root: __dirname,
+	build: {
+		outDir: "../dist/gui",
+	},
+});