easyblockshq · timoconnellaus · May 18, 2024
diff --git a/apps/tailwind-components-example/.eslintrc.json b/apps/tailwind-components-example/.eslintrc.json
@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}
diff --git a/apps/tailwind-components-example/.gitignore b/apps/tailwind-components-example/.gitignore
@@ -0,0 +1,35 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
diff --git a/apps/tailwind-components-example/README.md b/apps/tailwind-components-example/README.md
@@ -0,0 +1,3 @@
+# Introduction
+
+Easyblocks Quickstart project.
diff --git a/apps/tailwind-components-example/next.config.js b/apps/tailwind-components-example/next.config.js
@@ -0,0 +1,13 @@
+const path = require("node:path");
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  webpack: (config) => {
+    // apps/README.md#Apps and internal packages
+    config.resolve.modules.unshift(path.resolve(__dirname, "node_modules"));
+
+    return config;
+  },
+};
+
+module.exports = nextConfig;
diff --git a/apps/tailwind-components-example/package.json b/apps/tailwind-components-example/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "tailwind-components-example",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@easyblocks/core": "workspace:*",
+    "@easyblocks/editor": "workspace:*",
+    "@mhsdesign/jit-browser-tailwindcss": "^0.4.0",
+    "@types/lodash": "^4.14.191",
+    "@types/node": "20.4.2",
+    "@types/react": "18.2.20",
+    "@types/react-dom": "18.2.7",
+    "autoprefixer": "10.4.14",
+    "eslint": "8.45.0",
+    "eslint-config-next": "13.4.10",
+    "lodash": "^4.17.21",
+    "next": "13.4.12",
+    "postcss": "8.4.26",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "tailwindcss": "3.3.3",
+    "typescript": "5.1.6"
+  }
+}
diff --git a/apps/tailwind-components-example/postcss.config.js b/apps/tailwind-components-example/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
diff --git a/apps/tailwind-components-example/src/app/easyblocks-editor/easyblocksConfig.tsx b/apps/tailwind-components-example/src/app/easyblocks-editor/easyblocksConfig.tsx
@@ -0,0 +1,154 @@
+"use client";
+import {
+  Config,
+  EasyblocksBackend,
+  NoCodeComponentDefinition,
+} from "@easyblocks/core";
+
+export const easyblocksConfig = ({
+  definitions,
+}: {
+  definitions: NoCodeComponentDefinition[];
+}): Config => {
+  if (!process.env.NEXT_PUBLIC_EASYBLOCKS_ACCESS_TOKEN) {
+    throw new Error("Missing NEXT_PUBLIC_EASYBLOCKS_ACCESS_TOKEN");
+  }
+
+  return {
+    backend: new EasyblocksBackend({
+      accessToken: process.env.NEXT_PUBLIC_EASYBLOCKS_ACCESS_TOKEN,
+    }),
+    locales: [
+      {
+        code: "en-US",
+        isDefault: true,
+      },
+      {
+        code: "de-DE",
+        fallback: "en-US",
+      },
+    ],
+    components: definitions,
+    tokens: {
+      colors: [
+        {
+          id: "black",
+          label: "Black",
+          value: "#000000",
+          isDefault: true,
+        },
+        {
+          id: "white",
+          label: "White",
+          value: "#ffffff",
+        },
+        {
+          id: "coral",
+          label: "Coral",
+          value: "#ff7f50",
+        },
+      ],
+      fonts: [
+        {
+          id: "body",
+          label: "Body",
+          value: {
+            fontSize: 18,
+            lineHeight: 1.8,
+            fontFamily: "sans-serif",
+          },
+          isDefault: true,
+        },
+        {
+          id: "heading",
+          label: "Heading",
+          value: {
+            fontSize: 24,
+            fontFamily: "sans-serif",
+            lineHeight: 1.2,
+            fontWeight: 700,
+          },
+        },
+      ],
+      space: [
+        {
+          id: "0",
+          label: "0",
+          value: "0px",
+          isDefault: true,
+        },
+        {
+          id: "1",
+          label: "1",
+          value: "1px",
+        },
+        {
+          id: "2",
+          label: "2",
+          value: "2px",
+        },
+        {
+          id: "4",
+          label: "4",
+          value: "4px",
+        },
+        {
+          id: "6",
+          label: "6",
+          value: "6px",
+        },
+        {
+          id: "8",
+          label: "8",
+          value: "8px",
+        },
+        {
+          id: "12",
+          label: "12",
+          value: "12px",
+        },
+        {
+          id: "16",
+          label: "16",
+          value: "16px",
+        },
+        {
+          id: "24",
+          label: "24",
+          value: "24px",
+        },
+        {
+          id: "32",
+          label: "32",
+          value: "32px",
+        },
+        {
+          id: "48",
+          label: "48",
+          value: "48px",
+        },
+        {
+          id: "64",
+          label: "64",
+          value: "64px",
+        },
+        {
+          id: "96",
+          label: "96",
+          value: "96px",
+        },
+        {
+          id: "128",
+          label: "128",
+          value: "128px",
+        },
+        {
+          id: "160",
+          label: "160",
+          value: "160px",
+        },
+      ],
+    },
+    hideCloseButton: true,
+  };
+};
diff --git a/apps/tailwind-components-example/src/app/easyblocks-editor/helpers.ts b/apps/tailwind-components-example/src/app/easyblocks-editor/helpers.ts
@@ -0,0 +1,44 @@
+import { createTailwindcss } from "@mhsdesign/jit-browser-tailwindcss";
+
+export function traverseAndExtractClasses(obj: any): string {
+  let result = "";
+  function traverse(obj: any) {
+    if (Array.isArray(obj)) {
+      obj.forEach(traverse);
+    } else if (typeof obj === "object" && obj !== null) {
+      for (const key in obj) {
+        if (key.startsWith("__className") || key.startsWith("tw")) {
+          const value = obj[key];
+          if (typeof value === "string") {
+            result += ` ${value}`;
+          } else if (typeof value === "object" || Array.isArray(value)) {
+            result += ` ${JSON.stringify(value)}`;
+          }
+        } else {
+          traverse(obj[key]);
+        }
+      }
+    }
+  }
+
+  traverse(obj);
+  return result;
+}
+
+export const tailwind = createTailwindcss({
+  tailwindConfig: {
+    // disable normalize css
+    theme: {
+      extend: {
+        screens: {
+          sm: `568px`,
+          md: `768px`,
+          lg: `992px`,
+          xl: `1280px`,
+          "2xl": `1600px`,
+        },
+      },
+    },
+    corePlugins: { preflight: false },
+  },
+});
diff --git a/apps/tailwind-components-example/src/app/easyblocks-editor/layout.tsx b/apps/tailwind-components-example/src/app/easyblocks-editor/layout.tsx
@@ -0,0 +1,13 @@
+import "../globals.css";
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body className={"bg-white-1"}>{children}</body>
+    </html>
+  );
+}