feat: builder vite tailwind

adamberecz · adamberecz · commit 3b4c65f8d679 · 2024-04-17T07:00:56.000+02:00
diff --git a/src/files/builder/vite/tailwind/js/builder.config.js b/src/files/builder/vite/tailwind/js/builder.config.js
@@ -0,0 +1,5 @@
+import { defineConfig } from '@vueform/builder'
+
+import '@vueform/builder/index.css'
+
+export default defineConfig({})
diff --git a/src/files/builder/vite/tailwind/js/postcss.config.js b/src/files/builder/vite/tailwind/js/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/src/files/builder/vite/tailwind/js/src/App.vue b/src/files/builder/vite/tailwind/js/src/App.vue
@@ -0,0 +1,5 @@
+<template>
+  <div class="h-screen">
+    <VueformBuilder />
+  </div>
+</template>
diff --git a/src/files/builder/vite/tailwind/js/src/main.js b/src/files/builder/vite/tailwind/js/src/main.js
@@ -0,0 +1,12 @@
+import { createApp } from 'vue'
+import './style.css'
+import App from './App.vue'
+import Vueform from '@vueform/vueform'
+import vueformConfig from './../vueform.config'
+import Builder from '@vueform/builder'
+import builderConfig from './../builder.config'
+
+const app = createApp(App)
+app.use(Vueform, vueformConfig)
+app.use(Builder, builderConfig)
+app.mount('#app')
diff --git a/src/files/builder/vite/tailwind/js/src/style.css b/src/files/builder/vite/tailwind/js/src/style.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/src/files/builder/vite/tailwind/js/tailwind.config.js b/src/files/builder/vite/tailwind/js/tailwind.config.js
@@ -0,0 +1,23 @@
+import vueformPlugin from '@vueform/vueform/tailwind'
+import builderPlugin from '@vueform/builder/tailwind'
+
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    './index.html',
+    './src/**/*.{vue,js,ts,jsx,tsx}',
+    './vueform.config.js',
+    './node_modules/@vueform/vueform/themes/tailwind/**/*.vue',
+    './node_modules/@vueform/vueform/themes/tailwind/**/*.js',
+    './node_modules/@vueform/builder/**/*.js',
+    './node_modules/@vueform/builder/**/*.css',
+  ],
+  darkMode: 'class',
+  theme: {
+    extend: {},
+  },
+  plugins: [
+    vueformPlugin,
+    builderPlugin,
+  ]
+}
diff --git a/src/files/builder/vite/tailwind/js/vueform.config.js b/src/files/builder/vite/tailwind/js/vueform.config.js
@@ -0,0 +1,14 @@
+import en from '@vueform/vueform/locales/en'
+import theme from '@vueform/vueform/dist/tailwind'
+import { defineConfig } from '@vueform/vueform'
+import builder from '@vueform/builder/plugin'
+
+export default defineConfig({
+  theme,
+  locales: { en },
+  locale: 'en',
+  apiKey: 'YOUR_PUBLIC_KEY',
+  plugins: [
+    builder,
+  ],
+})
diff --git a/src/files/builder/vite/tailwind/ts/builder.config.ts b/src/files/builder/vite/tailwind/ts/builder.config.ts
@@ -0,0 +1,5 @@
+import { defineConfig } from '@vueform/builder'
+
+import '@vueform/builder/index.css'
+
+export default defineConfig({})
diff --git a/src/files/builder/vite/tailwind/ts/postcss.config.js b/src/files/builder/vite/tailwind/ts/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/src/files/builder/vite/tailwind/ts/src/App.vue b/src/files/builder/vite/tailwind/ts/src/App.vue
@@ -0,0 +1,5 @@
+<template>
+  <div class="h-screen">
+    <VueformBuilder />
+  </div>
+</template>
diff --git a/src/files/builder/vite/tailwind/ts/src/main.ts b/src/files/builder/vite/tailwind/ts/src/main.ts
@@ -0,0 +1,12 @@
+import { createApp } from 'vue'
+import './style.css'
+import App from './App.vue'
+import Vueform from '@vueform/vueform'
+import vueformConfig from '../vueform.config'
+import Builder from '@vueform/builder'
+import builderConfig from '../builder.config'
+
+const app = createApp(App)
+app.use(Vueform, vueformConfig)
+app.use(Builder, builderConfig)
+app.mount('#app')
diff --git a/src/files/builder/vite/tailwind/ts/src/style.css b/src/files/builder/vite/tailwind/ts/src/style.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/src/files/builder/vite/tailwind/ts/tailwind.config.js b/src/files/builder/vite/tailwind/ts/tailwind.config.js
@@ -0,0 +1,23 @@
+import vueformPlugin from '@vueform/vueform/tailwind'
+import builderPlugin from '@vueform/builder/tailwind'
+
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    './index.html',
+    './src/**/*.{vue,js,ts,jsx,tsx}',
+    './vueform.config.js',
+    './node_modules/@vueform/vueform/themes/tailwind/**/*.vue',
+    './node_modules/@vueform/vueform/themes/tailwind/**/*.js',
+    './node_modules/@vueform/builder/**/*.js',
+    './node_modules/@vueform/builder/**/*.css',
+  ],
+  darkMode: 'class',
+  theme: {
+    extend: {},
+  },
+  plugins: [
+    vueformPlugin,
+    builderPlugin,
+  ]
+}
diff --git a/src/files/builder/vite/tailwind/ts/vueform.config.ts b/src/files/builder/vite/tailwind/ts/vueform.config.ts
@@ -0,0 +1,14 @@
+import en from '@vueform/vueform/locales/en'
+import theme from '@vueform/vueform/dist/tailwind'
+import { defineConfig } from '@vueform/vueform'
+import builder from '@vueform/builder/plugin'
+
+export default defineConfig({
+  theme,
+  locales: { en },
+  locale: 'en',
+  apiKey: 'YOUR_PUBLIC_KEY',
+  plugins: [
+    builder,
+  ],
+})
diff --git a/src/test.js b/src/test.js
@@ -91,6 +91,21 @@ async function main() {
           },
         ]
       },
+      {
+        type: prev => prev === 'builder' ? 'text' : null,
+        name: 'publicKey',
+        initial: 'obtain a FREE one at https://app.vueform.com',
+        message: 'Your Public Key: ',
+        validate: async (name) => {
+          if (!/^[a-zA-Z0-9]{4}-[a-zA-Z0-9]{4}-[a-zA-Z0-9]{4}-[a-zA-Z0-9]{4}-[a-zA-Z0-9]{4}$/.test(name)) {
+            return 'Invalid Public Key. Please go to https://app.vueform.com and generate one for FREE.'
+          }
+          if (!name) {
+            return 'Please provide your Public Key. If you don\'t have one go to https://app.vueform.com and generate one for FREE.'
+          }
+          return true
+        }
+      },
       {
         type: 'select',
         name: 'framework',
@@ -106,14 +121,16 @@ async function main() {
         inactive: 'no',
       },
       {
-        type: 'select',
+        type: (prev, { builder }) => builder === 'builder' ? null : 'select',
         name: 'theme',
         message: 'Select a theme for your project:',
         choices: themes
       }
     ])
 
-    const { framework, ts, builder, theme } = response
+    const { framework, ts, builder, publicKey } = response
+
+    const theme = builder === 'builder' ? 'tailwind' : response.theme
 
     if (projectName && framework) {
       const fw = getFramework(framework)
@@ -157,7 +174,7 @@ async function main() {
     const isAstro = framework === 'astro'
     const isTs = await isTypescript(process.cwd(), framework, ts)
     const isBuilder = builder === 'builder'
-    const isTailwind = ['tailwind', 'tailwind-material'].indexOf(theme) !== -1
+    const isTailwind = ['tailwind', 'tailwind-material'].indexOf(theme) !== -1 || isBuilder
     const isBootstrap = ['bootstrap'].indexOf(theme) !== -1
     const sourcePath = path.join(__dirname, 'files', builder, framework, theme, isTs ? 'ts' : 'js')
     const targetPath = process.cwd()
@@ -201,14 +218,21 @@ async function main() {
       : framework === 'nuxt' ? '@vueform/nuxt' : '@vueform/vueform'
 
     console.log(`Installing Vueform${isBuilder?' + Vueform Builder':''}...`)
-    await runCommand('npm', ['install', vueformPackage])
+    await runCommand('npm', ['install', ...vueformPackage.split(' ')])
 
     /**
      * Copy Vueform files to project directory
      */
     console.log(`Copying additional files to ${projectName}...`)
     await copyFilesToProject(sourcePath, targetPath)
 
+    /**
+     * Inserting Public Key
+     */
+    if (isBuilder) {
+      await addPublicKey(process.cwd(), publicKey)
+    }
+
     /**
      * Show finish instructions
      */
@@ -312,6 +336,37 @@ async function updateAstroTsConfig(dir) {
   }
 }
 
+async function addPublicKey(dir, publicKey) {
+  const jsFilePath = path.join(dir, 'vueform.config.js')
+  const tsFilePath = path.join(dir, 'vueform.config.ts')
+
+  let filePath
+  try {
+    if (await fsExtra.pathExists(jsFilePath)) {
+        filePath = jsFilePath
+    } else if (await fsExtra.pathExists(tsFilePath)) {
+        filePath = tsFilePath
+    } else {
+        console.error('No vueform.config.js or vueform.config.ts file found.')
+        return
+    }
+  } catch (err) {
+    console.error('Error checking for config files:', err)
+    return
+  }
+
+  try {
+    let fileContent = await fsExtra.readFile(filePath, 'utf8')
+    
+    fileContent = fileContent.replace(/YOUR_PUBLIC_KEY/g, publicKey)
+    
+    await fsExtra.writeFile(filePath, fileContent, 'utf8')
+    console.log(`Public Key has been inserted into ${path.basename(filePath)}`)
+  } catch (err) {
+    console.error(`Error inserting Public Key to ${path.basename(filePath)}:`, err)
+    }
+}
+
 async function copyFilesToProject(sourceDir, targetDir) {
   try {
     await fsExtra.copy(sourceDir, targetDir, { overwrite: true })

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+@tailwind base;`
	`2`	`+@tailwind components;`
	`3`	`+@tailwind utilities;`