@nuxt/ui 3.0.0-alpha.1 → 3.0.0-alpha.10

package/cli/commands/make/locale.mjs

@@ -0,0 +1,64 @@
+import { existsSync, promises as fsp } from 'node:fs'
+import { resolve } from 'pathe'
+import { consola } from 'consola'
+import { appendFile, sortFile, normalizeLocale } from '../../utils.mjs'
+import { defineCommand } from 'citty'
+
+export default defineCommand({
+  meta: {
+    name: 'locale',
+    description: 'Make a new locale.'
+  },
+  args: {
+    code: {
+      description: 'Locale code to create. For example: en.',
+      required: true
+    },
+    name: {
+      description: 'Locale name to create. For example: English.',
+      required: true
+    },
+    dir: {
+      description: 'Locale direction. For example: rtl.',
+      default: 'ltr'
+    }
+  },
+  async setup({ args }) {
+    const path = resolve('.')
+    const localePath = resolve(path, `src/runtime/locale`)
+
+    const originLocaleFilePath = resolve(localePath, 'en.ts')
+    const newLocaleFilePath = resolve(localePath, `${args.code}.ts`)
+
+    // Validate locale code
+    if (existsSync(newLocaleFilePath)) {
+      consola.error(`🚨 ${args.code} already exists!`)
+      process.exit(1)
+    }
+
+    if (!['ltr', 'rtl'].includes(args.dir)) {
+      consola.error(`🚨 Direction ${args.dir} not supported!`)
+      process.exit(1)
+    }
+
+    if (!args.code.match(/^[a-z]{2}(?:_[a-z]{2,4})?$/)) {
+      consola.error(`🚨 ${args.code} is not a valid locale code!\nExample: en or en_us`)
+      process.exit(1)
+    }
+
+    // Create new locale export
+    const localeExportFile = resolve(localePath, `index.ts`)
+    await appendFile(localeExportFile, `export { default as ${args.code} } from './${args.code}'`)
+    await sortFile(localeExportFile)
+
+    // Create new locale file
+    await fsp.copyFile(originLocaleFilePath, newLocaleFilePath)
+    const localeFile = await fsp.readFile(newLocaleFilePath, 'utf-8')
+    const rewrittenLocaleFile = localeFile
+      .replace(/name: '(.*)',/, `name: '${args.name}',`)
+      .replace(/code: '(.*)',/, `code: '${normalizeLocale(args.code)}',${(args.dir && args.dir !== 'ltr') ? `\n  dir: '${args.dir}',` : ''}`)
+    await fsp.writeFile(newLocaleFilePath, rewrittenLocaleFile)
+
+    consola.success(`🪄 Generated ${newLocaleFilePath}`)
+  }
+})

package/cli/index.mjs

@@ -1,6 +1,6 @@
 #!/usr/bin/env node
 import { defineCommand, runMain } from 'citty'
-import init from './commands/init.mjs'
+import make from './commands/make/index.mjs'
 
 const main = defineCommand({
   meta: {
@@ -8,7 +8,7 @@ const main = defineCommand({
     description: 'Nuxt UI CLI'
   },
   subCommands: {
-    init
+    make
   }
 })
 

package/cli/templates.mjs

@@ -5,7 +5,7 @@ const playground = ({ name, pro }) => {
   const kebabName = kebabCase(name)
 
   return {
-    filename: `playground/pages/components/${kebabName}.vue`,
+    filename: `playground/app/pages/components/${kebabName}.vue`,
     contents: pro
       ? undefined
       : `
@@ -42,7 +42,7 @@ const ${camelName} = tv({ extend: tv(theme), ...(appConfig.${key}?.${prose ? 'pr
 export interface ${upperName}Props {
   /**
    * The element or component this component should render as.
-   * @defaultValue \`div\`
+   * @defaultValue 'div'
    */
   as?: any
   class?: any
@@ -55,7 +55,7 @@ export interface ${upperName}Slots {
 </script>
 
 <script setup lang="ts">
-import { Primitive } from 'radix-vue'
+import { Primitive } from 'reka-ui'
 
 const props = withDefaults(defineProps<${upperName}Props>(), { as: 'div' })
 defineSlots<${upperName}Slots>()
@@ -72,7 +72,7 @@ const ui = ${camelName}()
       : `
 <script lang="ts">
 import { tv, type VariantProps } from 'tailwind-variants'
-import type { ${upperName}RootProps, ${upperName}RootEmits } from 'radix-vue'
+import type { ${upperName}RootProps, ${upperName}RootEmits } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/${path}/${prose ? 'prose/' : ''}${content ? 'content/' : ''}${kebabName}'
@@ -94,7 +94,7 @@ export interface ${upperName}Slots {}
 </script>
 
 <script setup lang="ts">
-import { ${upperName}Root, useForwardPropsEmits } from 'radix-vue'
+import { ${upperName}Root, useForwardPropsEmits } from 'reka-ui'
 import { reactivePick } from '@vueuse/core'
 
 const props = defineProps<${upperName}Props>()
@@ -149,7 +149,7 @@ import ComponentRender from '../${content ? '../' : ''}component-render'
 describe('${upperName}', () => {
   it.each([
     // Props
-    ['with as', { props: { as: 'div' } }],
+    ['with as', { props: { as: 'section' } }],
     ['with class', { props: { class: '' } }],
     ['with ui', { props: { ui: {} } }],
     // Slots
@@ -163,9 +163,54 @@ describe('${upperName}', () => {
   }
 }
 
+const doc = ({ name, pro }) => {
+  const kebabName = kebabCase(name)
+  const upperName = splitByCase(name).map(p => upperFirst(p)).join('')
+
+  return {
+    filename: `docs/content/${pro ? 'pro' : '3.components'}/${kebabName}.md`,
+    contents: `---
+description:
+links: ${pro
+  ? ''
+  : `
+  - label: ${upperName}
+    icon: i-custom-reka-ui
+    to: https://www.reka-ui.com/components/${kebabName}.html`}
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/${pro ? 'ui-pro' : 'ui'}/tree/v3/src/runtime/components/${upperName}.vue
+---
+
+## Usage
+
+## Examples
+
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Emits
+
+:component-emits
+
+## Theme
+
+:component-theme
+`
+  }
+}
+
 export default {
   playground,
   component,
   theme,
-  test
+  test,
+  doc
 }

package/cli/utils.mjs

@@ -15,3 +15,17 @@ export async function appendFile(path, contents) {
     await fsp.writeFile(path, file.trim() + '\n' + contents + '\n')
   }
 }
+
+export function normalizeLocale(locale) {
+  if (!locale) {
+    return ''
+  }
+
+  if (locale.includes('_')) {
+    return locale.split('_')
+      .map((part, index) => index === 0 ? part.toLowerCase() : part.toUpperCase())
+      .join('-')
+  }
+
+  return locale.toLowerCase()
+}