cli: handle --prose && --content options for pro

cli/commands/init.mjs

@@ -24,12 +24,29 @@ export default defineCommand({
     pro: {
       type: 'boolean',
       description: 'Create a pro component.'
+    },
+    prose: {
+      type: 'boolean',
+      description: 'Create a prose component (with --pro).'
+    },
+    content: {
+      type: 'boolean',
+      description: 'Create a content component (with --pro).'
     }
   },
   async setup({ args }) {
     const name = args.name
     if (!name) {
-      consola.error('name argument is missing!')
+      consola.error('`name` argument is missing!')
+      process.exit(1)
+    }
+
+    if (args.prose && !args.pro) {
+      consola.error('`--prose` flag can only be used with `--pro` flag!')
+      process.exit(1)
+    }
+    if (args.content && !args.pro) {
+      consola.error('`--content` flag can only be used with `--pro` flag!')
       process.exit(1)
     }
 
@@ -53,12 +70,14 @@ export default defineCommand({
       consola.success(`🪄 Generated ${filePath}!`)
     }
 
-    const themePath = resolve(path, 'src/theme/index.ts')
+    const themePath = resolve(path, `src/theme/${args.prose ? 'prose/' : ''}${args.content ? 'content/' : ''}index.ts`)
     await appendFile(themePath, `export { default as ${camelCase(name)} } from './${kebabCase(name)}'`)
     await sortFile(themePath)
 
-    const typesPath = resolve(path, 'src/runtime/types/index.d.ts')
+    if (!args.prose) {
-    await appendFile(typesPath, `export * from '../components/${splitByCase(name).map(p => upperFirst(p)).join('')}.vue'`)
+      const typesPath = resolve(path, 'src/runtime/types/index.d.ts')
-    await sortFile(typesPath)
+      await appendFile(typesPath, `export * from '../components/${args.content && 'content/'}${splitByCase(name).map(p => upperFirst(p)).join('')}.vue'`)
+      await sortFile(typesPath)
+    }
   }
 })

cli/templates.mjs

@@ -14,11 +14,11 @@ const playground = ({ name, pro }) => {
     <U${upperName} />
   </div>
 </template>
-    `
+`
   }
 }
 
-const component = ({ name, primitive, pro }) => {
+const component = ({ name, primitive, pro, prose, content }) => {
   const upperName = splitByCase(name).map(p => upperFirst(p)).join('')
   const camelName = camelCase(name)
   const kebabName = kebabCase(name)
@@ -26,7 +26,7 @@ const component = ({ name, primitive, pro }) => {
   const path = pro ? 'ui-pro' : 'ui'
 
   return {
-    filename: `src/runtime/components/${upperName}.vue`,
+    filename: `src/runtime/components/${prose ? 'prose/' : ''}${content ? 'content/' : ''}${upperName}.vue`,
     contents: primitive
       ? `
 <script lang="ts">
@@ -34,11 +34,11 @@ import { tv } from 'tailwind-variants'
 import type { PrimitiveProps } from 'radix-vue'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
-import theme from '#build/${path}/${kebabName}'
+import theme from '#build/${path}/${prose ? 'prose/' : ''}${content ? 'content/' : ''}${kebabName}'
 
-const appConfig = _appConfig as AppConfig & { ${key}: { ${camelName}: Partial<typeof theme> } }
+const appConfig = _appConfig as AppConfig & { ${key}: { ${prose ? 'prose: { ' : ''}${camelName}: Partial<typeof theme> } }${prose ? ' }' : ''}
 
-const ${camelName} = tv({ extend: tv(theme), ...(appConfig.${key}?.${camelName} || {}) })
+const ${camelName} = tv({ extend: tv(theme), ...(appConfig.${key}?.${prose ? 'prose?.' : ''}${camelName} || {}) })
 
 export interface ${upperName}Props extends Omit<PrimitiveProps, 'asChild'> {
   class?: any
@@ -72,11 +72,11 @@ import { tv, type VariantProps } from 'tailwind-variants'
 import type { ${upperName}RootProps, ${upperName}RootEmits } from 'radix-vue'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
-import theme from '#build/${path}/${kebabName}'
+import theme from '#build/${path}/${prose ? 'prose/' : ''}${content ? 'content/' : ''}${kebabName}'
 
-const appConfig = _appConfig as AppConfig & { ${key}: { ${camelName}: Partial<typeof theme> } }
+const appConfig = _appConfig as AppConfig & { ${key}: { ${prose ? 'prose: { ' : ''}${camelName}: Partial<typeof theme> } }${prose ? ' }' : ''}
 
-const ${camelName} = tv({ extend: tv(theme), ...(appConfig.${key}?.${camelName} || {}) })
+const ${camelName} = tv({ extend: tv(theme), ...(appConfig.${key}?.${prose ? 'prose?.' : ''}${camelName} || {}) })
 
 type ${upperName}Variants = VariantProps<typeof ${camelName}>
 
@@ -111,30 +111,38 @@ const ui = computed(() => tv({ extend: ${camelName}, slots: props.ui })())
   }
 }
 
-const theme = ({ name }) => {
+const theme = ({ name, prose, content }) => {
   const kebabName = kebabCase(name)
 
   return {
-    filename: `src/theme/${kebabName}.ts`,
+    filename: `src/theme/${prose ? 'prose/' : ''}${content ? 'content/' : ''}${kebabName}.ts`,
-    contents: `
+    contents: prose
+      ? `
+export default {
+  base: ''
+}
+`
+      : `
 export default {
   slots: {
     root: ''
   }
 }
-    `
+`
   }
 }
 
-const test = ({ name }) => {
+const test = ({ name, prose, content }) => {
   const upperName = splitByCase(name).map(p => upperFirst(p)).join('')
 
   return {
-    filename: `test/components/${upperName}.spec.ts`,
+    filename: `test/components/${content ? 'content/' : ''}${upperName}.spec.ts`,
-    contents: `
+    contents: prose
+      ? undefined
+      : `
 import { describe, it, expect } from 'vitest'
-import ${upperName}, { type ${upperName}Props, type ${upperName}Slots } from '../../src/runtime/components/${upperName}.vue'
+import ${upperName}, { type ${upperName}Props, type ${upperName}Slots } from '../../${content ? '../' : ''}src/runtime/components/${content ? 'content/' : ''}${upperName}.vue'
-import ComponentRender from '../component-render'
+import ComponentRender from '../${content ? '../' : ''}component-render'
 
 describe('${upperName}', () => {
   it.each([
@@ -149,7 +157,7 @@ describe('${upperName}', () => {
     expect(html).toMatchSnapshot()
   })
 })
-    `
+`
   }
 }