@hywax/cms 0.0.1 → 0.0.3

package/.nuxt/cms/button-clear.ts

@@ -0,0 +1,5 @@
+export default {
+  "slots": {
+    "base": "p-0"
+  }
+}

package/.nuxt/cms/index.ts

@@ -0,0 +1,2 @@
+export { default as buttonClear } from './button-clear'
+export { default as uploraImage } from './uplora-image'

package/.nuxt/cms/prose/index.ts

@@ -0,0 +1 @@
+export { default as uploraImage } from './uplora-image'

package/.nuxt/cms/prose/uplora-image.ts

@@ -0,0 +1,5 @@
+export default {
+  "slots": {
+    "base": ""
+  }
+}

package/.nuxt/cms/uplora-image.ts

@@ -0,0 +1,8 @@
+export default {
+  "slots": {
+    "root": "relative grid grid-cols-[100%] grid-rows-[100%] overflow-hidden",
+    "lqip": "bg-cover bg-no-repeat bg-center col-[1] row-[1]",
+    "picture": "aspect-3/2 col-[1] row-[1]",
+    "img": "w-full h-full block object-cover"
+  }
+}

package/.nuxt/cms.css

@@ -0,0 +1 @@
+@source "./cms";

package/cli/commands/make/component.mjs

@@ -0,0 +1,75 @@
+import { existsSync, promises as fsp } from 'node:fs'
+import process from 'node:process'
+import { defineCommand } from 'citty'
+import { consola } from 'consola'
+import { resolve } from 'pathe'
+import { camelCase, kebabCase, splitByCase, upperFirst } from 'scule'
+import templates from '../../templates.mjs'
+import { appendFile, sortFile } from '../../utils.mjs'
+
+export default defineCommand({
+  meta: {
+    name: 'component',
+    description: 'Создать новый компонент',
+  },
+  args: {
+    name: {
+      type: 'positional',
+      required: true,
+      description: 'Имя компонента',
+    },
+    prose: {
+      type: 'boolean',
+      description: 'Создать компонент для контента',
+    },
+    template: {
+      type: 'string',
+      description: 'Сгенерировать только шаблон',
+    },
+  },
+  async setup({ args }) {
+    const name = args.name
+    if (!name) {
+      consola.error('`name` argument is missing!')
+      process.exit(1)
+    }
+
+    const path = resolve('.')
+
+    for (const template of Object.keys(templates)) {
+      if (args.template && template !== args.template) {
+        continue
+      }
+
+      const { filename, contents } = templates[template](args)
+      if (!contents) {
+        continue
+      }
+
+      const filePath = resolve(path, filename)
+
+      if (existsSync(filePath)) {
+        consola.error(`🚨 ${filePath} уже существует!`)
+        continue
+      }
+
+      await fsp.writeFile(filePath, `${contents.trim()}\n`)
+
+      consola.success(`🪄 ${filePath} создан!`)
+    }
+
+    if (args.template) {
+      return
+    }
+
+    const themePath = resolve(path, `src/theme/${args.prose ? 'prose/' : ''}index.ts`)
+    await appendFile(themePath, `export { default as ${camelCase(name)} } from './${kebabCase(name)}'`)
+    await sortFile(themePath)
+
+    if (!args.prose) {
+      const typesPath = resolve(path, 'src/runtime/types/index.ts')
+      await appendFile(typesPath, `export * from '../components/${splitByCase(name).map((p) => upperFirst(p)).join('')}.vue'`)
+      await sortFile(typesPath)
+    }
+  },
+})

package/cli/commands/make/index.mjs

@@ -0,0 +1,12 @@
+import { defineCommand } from 'citty'
+import component from './component.mjs'
+
+export default defineCommand({
+  meta: {
+    name: 'make',
+    description: 'Команды для создания новых сущностей Hywax CMS',
+  },
+  subCommands: {
+    component,
+  },
+})

package/cli/index.mjs

@@ -0,0 +1,15 @@
+#!/usr/bin/env node
+import { defineCommand, runMain } from 'citty'
+import make from './commands/make/index.mjs'
+
+const main = defineCommand({
+  meta: {
+    name: 'cms',
+    description: 'Hywax CMS CLI',
+  },
+  subCommands: {
+    make,
+  },
+})
+
+runMain(main)

package/cli/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "@hywax/cms-cli",
+  "type": "module",
+  "exports": {
+    ".": "./index.mjs"
+  },
+  "dependencies": {
+    "citty": "^0.1.6",
+    "consola": "^3.4.2",
+    "pathe": "^2.0.3",
+    "scule": "^1.3.0"
+  }
+}

package/cli/templates.mjs

@@ -0,0 +1,101 @@
+import { camelCase, kebabCase, splitByCase, upperFirst } from 'scule'
+
+function component({ name, prose }) {
+  const upperName = splitByCase(name).map((p) => upperFirst(p)).join('')
+  const camelName = camelCase(name)
+  const kebabName = kebabCase(name)
+  const path = 'cms'
+
+  return {
+    filename: `src/runtime/components/${prose ? 'prose/' : ''}${upperName}.vue`,
+    contents: `
+<template>
+  <Primitive :as="as" :class="ui.root({ class: [props.ui?.root, props.class] })">
+    <slot />
+  </Primitive>
+</template>
+
+<script lang="ts">
+import type { AppConfig } from '@nuxt/schema'
+import type { ComponentConfig } from '${prose ? '../../types' : '../types'}'
+import theme from '#build/${path}/${prose ? 'prose/' : ''}${kebabName}'
+import { computed, useAppConfig } from '#imports'
+import { Primitive } from 'reka-ui'
+import { tv } from '${prose ? '../../utils/tv' : '../utils/tv'}'
+
+type ${upperName} = ComponentConfig<typeof theme, AppConfig, ${upperName}>
+
+export interface ${upperName}Props {
+  as?: any
+  class?: any
+  ui?: ${upperName}['slots']
+}
+
+export interface ${upperName}Emits {
+  // 'update:modelValue': [string]
+}
+
+export interface ${upperName}Slots {
+  default?: () => any
+}
+</script>
+
+<script setup lang="ts">
+const props = defineProps<${upperName}Props>()
+const emit = defineEmits<${upperName}Emits>()
+defineSlots<${upperName}Slots>()
+
+const appConfig = useAppConfig() as ${upperName}['AppConfig']
+
+const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.cms?.${camelName} || {}) })())
+</script>
+`,
+  }
+}
+
+function test({ name, prose }) {
+  const upperName = splitByCase(name).map((p) => upperFirst(p)).join('')
+
+  return {
+    filename: `test/runtime/components/${upperName}.spec.ts`,
+    contents: prose
+      ? undefined
+      : `
+import type { ${upperName}Props, ${upperName}Slots } from '../../../src/runtime/components/${upperName}.vue'
+import { describe, it, expect } from 'vitest'
+import ${upperName} from '../../../src/runtime/components/${upperName}.vue'
+import ComponentRender from '../../component-render'
+
+describe('${upperName}', () => {
+  it.each([
+    // Props
+    ['с алиасом', { props: { as: 'section' } }],
+    ['с class', { props: { class: '' } }],
+    ['с ui', { props: { ui: {} } }],
+    // Slots
+    ['с дефолтным слотом', { slots: { default: () => 'Default slot' } }]
+  ])('рендерит %s корректно', async (nameOrHtml: string, options: { props?: ${upperName}Props, slots?: Partial<${upperName}Slots> }) => {
+    const html = await ComponentRender(nameOrHtml, options, ${upperName})
+    expect(html).toMatchSnapshot()
+  })
+})
+`,
+  }
+}
+
+function theme({ name, prose }) {
+  const kebabName = kebabCase(name)
+
+  return {
+    filename: `src/theme/${prose ? 'prose/' : ''}${kebabName}.ts`,
+    contents: `
+export default {
+  slots: {
+    root: '',
+  },
+}
+`,
+  }
+}
+
+export default { component, test, theme }

package/cli/utils.mjs

@@ -0,0 +1,31 @@
+import { promises as fsp } from 'node:fs'
+
+export async function sortFile(path) {
+  const file = await fsp.readFile(path, 'utf-8')
+
+  const lines = file.trim().split('\n').sort()
+
+  await fsp.writeFile(path, `${lines.join('\n')}\n`)
+}
+
+export async function appendFile(path, contents) {
+  const file = await fsp.readFile(path, 'utf-8')
+
+  if (!file.includes(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()
+}

package/dist/module.d.mts

@@ -1,6 +1,32 @@
 import * as _nuxt_schema from '@nuxt/schema';
+export * from '../dist/runtime/types/index.js';
+
+declare module '@nuxt/schema' {
+    interface ConfigSchema {
+        public?: {
+            cms: {
+                fluxorUrl: string;
+            };
+        };
+    }
+}
 
 interface ModuleOptions {
+    /**
+     * Name of the module
+     * @defaultValue 'cms'
+     */
+    name?: string;
+    /**
+     * Prefix for the components
+     * @defaultValue 'C'
+     */
+    prefix?: string;
+    /**
+     * Fluxor URL
+     * @defaultValue 'https://fluxor.uplora.ru'
+     */
+    fluxorUrl?: string;
 }
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
 

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@hywax/cms",
-  "version": "0.0.0",
+  "version": "0.0.3",
   "configKey": "cms",
   "builder": {
     "@nuxt/module-builder": "1.0.1",

package/dist/module.mjs

@@ -1,7 +1,131 @@
-import { defineNuxtModule } from '@nuxt/kit';
+import { addTypeTemplate, addTemplate, defineNuxtModule, hasNuxtModule, installModule, createResolver, addComponentsDir, addImportsDir, addPlugin } from '@nuxt/kit';
+import { defu } from 'defu';
+import 'node:url';
+import { kebabCase } from 'scule';
 
 const name = "@hywax/cms";
-const version = "0.0.0";
+const version = "0.0.3";
+
+const buttonClear = {
+  slots: {
+    base: "p-0"
+  }
+};
+
+const uploraImage$1 = {
+  slots: {
+    root: "relative grid grid-cols-[100%] grid-rows-[100%] overflow-hidden",
+    lqip: "bg-cover bg-no-repeat bg-center col-[1] row-[1]",
+    picture: "aspect-3/2 col-[1] row-[1]",
+    img: "w-full h-full block object-cover"
+  }
+};
+
+const theme = {
+  __proto__: null,
+  buttonClear: buttonClear,
+  uploraImage: uploraImage$1
+};
+
+const uploraImage = {
+  slots: {
+    base: ""
+  }
+};
+
+const themeProse = {
+  __proto__: null,
+  uploraImage: uploraImage
+};
+
+function getTemplates(options) {
+  const templates = [];
+  function writeThemeTemplate(theme2, path) {
+    for (const component in theme2) {
+      templates.push({
+        filename: `cms/${path ? `${path}/` : ""}${kebabCase(component)}.ts`,
+        write: true,
+        getContents: async () => {
+          const template = theme2[component];
+          const result = typeof template === "function" ? template(options) : template;
+          const variants = Object.entries(result.variants || {}).filter(([_, values]) => {
+            const keys = Object.keys(values);
+            return keys.some((key) => key !== "true" && key !== "false");
+          }).map(([key]) => key);
+          let json = JSON.stringify(result, null, 2);
+          for (const variant of variants) {
+            json = json.replace(new RegExp(`("${variant}": "[^"]+")`, "g"), `$1 as typeof ${variant}[number]`);
+            json = json.replace(new RegExp(`("${variant}": \\[\\s*)((?:"[^"]+",?\\s*)+)(\\])`, "g"), (_, before, match, after) => {
+              const replaced = match.replace(/("[^"]+")/g, `$1 as typeof ${variant}[number]`);
+              return `${before}${replaced}${after}`;
+            });
+          }
+          function generateVariantDeclarations(variants2) {
+            return variants2.filter((variant) => json.includes(`as typeof ${variant}`)).map((variant) => {
+              const keys = Object.keys(result.variants[variant]);
+              return `const ${variant} = ${JSON.stringify(keys, null, 2)} as const`;
+            });
+          }
+          return [
+            ...generateVariantDeclarations(variants),
+            `export default ${json}`
+          ].join("\n\n");
+        }
+      });
+    }
+  }
+  writeThemeTemplate(themeProse, "prose");
+  writeThemeTemplate(theme);
+  templates.push({
+    filename: `cms/prose/index.ts`,
+    write: true,
+    getContents: () => Object.keys(themeProse).map((component) => `export { default as ${component} } from './${kebabCase(component)}'`).join("\n")
+  });
+  templates.push({
+    filename: "cms.css",
+    write: true,
+    getContents: () => `@source "./cms";`
+  });
+  templates.push({
+    filename: "cms/index.ts",
+    write: true,
+    getContents: () => {
+      return Object.keys(theme).map((component) => `export { default as ${component} } from './${kebabCase(component)}'`).join("\n");
+    }
+  });
+  templates.push({
+    filename: "types/cms.d.ts",
+    getContents: () => `import * as cms from '#build/cms'
+import type { TVConfig } from '@nuxt/ui'
+
+type AppConfigCMS = TVConfig<typeof cms>
+
+declare module '@nuxt/schema' {
+  interface AppConfigInput {
+    /**
+     * CMS theme configuration
+     */
+    cms?: AppConfigCMS
+  }
+}
+
+export {}
+`
+  });
+  return templates;
+}
+function addTemplates(options) {
+  const templates = getTemplates(options);
+  for (const template of templates) {
+    if (template.filename.endsWith(".d.ts")) {
+      addTypeTemplate(template);
+    } else {
+      addTemplate(template);
+    }
+  }
+}
+
+const icons = {};
 
 const module = defineNuxtModule({
   meta: {
@@ -9,8 +133,65 @@ const module = defineNuxtModule({
     version,
     configKey: "cms"
   },
-  defaults: {},
-  setup(_options, _nuxt) {
+  defaults: {
+    name: "cms",
+    prefix: "C",
+    fluxorUrl: "https://fluxor.uplora.ru"
+  },
+  async setup(options, nuxt) {
+    nuxt.options.runtimeConfig.public.cms = defu(nuxt.options.runtimeConfig.public.cms || {}, {
+      fluxorUrl: options.fluxorUrl
+    });
+    nuxt.options.appConfig.ui = defu(nuxt.options.appConfig.ui || {}, {
+      icons
+    });
+    nuxt.options.ui = defu(nuxt.options.ui || {}, {
+      colorMode: true,
+      fonts: true
+    });
+    nuxt.options.colorMode = defu(nuxt.options.colorMode || {}, {
+      storageKey: `${options.name}-color-mode`
+    });
+    nuxt.options.mdc = defu(nuxt.options.mdc || {}, {
+      components: {
+        map: {
+          "uplora-image": "ProseUploraImage"
+        }
+      }
+    });
+    nuxt.options.auth = defu(nuxt.options.auth || {}, {
+      name: `${options.name}-session`
+    });
+    if (!hasNuxtModule("@nuxt/ui-pro")) {
+      await installModule("@nuxt/ui-pro");
+    }
+    if (!hasNuxtModule("@nuxtjs/mdc")) {
+      await installModule("@nuxtjs/mdc");
+    }
+    if (!hasNuxtModule("@vueuse/nuxt")) {
+      await installModule("@vueuse/nuxt");
+    }
+    if (!hasNuxtModule("nuxt-auth-utils")) {
+      await installModule("nuxt-auth-utils");
+    }
+    const { resolve } = createResolver(import.meta.url);
+    nuxt.options.alias["#cms"] = resolve("./runtime");
+    nuxt.options.appConfig.cms = defu(nuxt.options.appConfig.cms || {}, {});
+    addComponentsDir({
+      path: resolve("./runtime/components"),
+      pathPrefix: false,
+      prefix: options?.prefix || "C",
+      ignore: ["prose/**"]
+    });
+    addComponentsDir({
+      path: resolve("./runtime/components/prose"),
+      prefix: "Prose",
+      pathPrefix: false,
+      global: true
+    });
+    addImportsDir(resolve("./runtime/composables"));
+    addTemplates(options);
+    addPlugin(resolve("./runtime/plugins/api.ts"));
   }
 });
 

package/dist/runtime/components/ButtonClear.vue

@@ -0,0 +1,35 @@
+<template>
+  <UButton
+    :class="ui.base({ class: [props.ui?.base, props.class] })"
+    :color="color"
+    :variant="variant"
+    :size="size"
+    :icon="icon || appConfig.ui.icons.close"
+    :aria-label="label"
+    :disabled="!modelValue"
+    @click.stop="emit('update:modelValue', resetValue)"
+  />
+</template>
+
+<script>
+import theme from "#build/cms/button-clear";
+import { computed, useAppConfig } from "#imports";
+import { tv } from "../utils/tv";
+</script>
+
+<script setup>
+const props = defineProps({
+  icon: { type: String, required: false },
+  label: { type: String, required: false, default: "\u041E\u0447\u0438\u0441\u0442\u0438\u0442\u044C \u0437\u043D\u0430\u0447\u0435\u043D\u0438\u0435" },
+  color: { type: null, required: false, default: "neutral" },
+  variant: { type: null, required: false, default: "link" },
+  size: { type: null, required: false, default: "sm" },
+  resetValue: { type: [String, Number, Boolean, null], required: false, skipCheck: true, default: void 0 },
+  class: { type: null, required: false },
+  ui: { type: null, required: false }
+});
+const emit = defineEmits(["update:modelValue"]);
+const modelValue = defineModel({ type: [String, Number, Boolean, null], skipCheck: true });
+const appConfig = useAppConfig();
+const ui = computed(() => tv({ extend: tv(theme), ...appConfig.cms?.buttonClear || {} })());
+</script>

package/dist/runtime/components/ButtonClear.vue.d.ts

@@ -0,0 +1,35 @@
+import type { AppConfig } from '@nuxt/schema';
+import type { ButtonProps } from '@nuxt/ui';
+import type { ComponentConfig } from '../types';
+import theme from '#build/cms/button-clear';
+export type ButtonClear = ComponentConfig<typeof theme, AppConfig, 'buttonClear'>;
+export type ResetValue = string | number | boolean | null | undefined;
+export interface ButtonClearProps {
+    icon?: string;
+    label?: string;
+    color?: ButtonProps['color'];
+    variant?: ButtonProps['variant'];
+    size?: ButtonProps['size'];
+    resetValue?: ResetValue;
+    class?: any;
+    ui?: ButtonClear['slots'];
+}
+export interface ButtonClearEmits {
+    'update:modelValue': [ResetValue];
+}
+declare const _default: import("vue").DefineComponent<ButtonClearProps & {
+    modelValue?: ResetValue;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (...args: unknown[]) => any;
+}, string, import("vue").PublicProps, Readonly<ButtonClearProps & {
+    modelValue?: ResetValue;
+}> & Readonly<{
+    "onUpdate:modelValue"?: ((...args: unknown[]) => any) | undefined;
+}>, {
+    size: "xs" | "sm" | "md" | "lg" | "xl";
+    color: "primary" | "secondary" | "success" | "info" | "warning" | "error" | "neutral";
+    variant: "solid" | "outline" | "soft" | "subtle" | "ghost" | "link";
+    label: string;
+    resetValue: string | number | boolean | null;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;