@aerogel/cli 0.0.0-next.b58141fee5d2fe7d25debdbca6b1d2bf1c13e48e → 0.0.0-next.bf95405357e75d2e8b0268a5e8ce7b2b7dd0c895

package/templates/app/package.json

@@ -2,19 +2,20 @@
     "name": "<% app.slug %>",
     "version": "0.0.0",
     "private": true,
+    "type": "module",
     "scripts": {
         "build": "vite build",
         "cy:dev": "concurrently --kill-others \"npm run test:serve-app\" \"npm run cy:open\"",
-        "cy:open": "cypress open --e2e --browser chromium",
-        "cy:run": "cypress run",
+        "cy:open": "cypress open --config-file ./cypress/cypress.config.ts --e2e --browser chromium",
+        "cy:run": "cypress run --config-file ./cypress/cypress.config.ts",
         "cy:test": "start-server-and-test test:serve-app http-get://localhost:5001 cy:run",
         "cy:test-snapshots": "docker run -it -u `id -u ${whoami}` -e CYPRESS_SNAPSHOTS=true -v ./:/app -w /app cypress/base:18.16.0 sh -c \"npx cypress install && npm run cy:test\"",
         "cy:test-snapshots:ci": "docker run -e CYPRESS_SNAPSHOTS=true -v ./:/app -w /app cypress/base:18.16.0 sh -c \"npx cypress install && npm run cy:test\"",
         "dev": "vite",
-        "lint": "noeldemartin-lint src",
+        "lint": "noeldemartin-lint src cypress",
         "test": "vitest --run",
         "test:ci": "vitest --run --reporter verbose",
-        "test:serve-app": "vite --port 5001"
+        "test:serve-app": "vite --port 5001 --mode testing"
     },
     "dependencies": {
         "@aerogel/core": "<% &dependencies.aerogelCore %>",
@@ -22,10 +23,10 @@
         "@aerogel/plugin-soukai": "<% &dependencies.aerogelPluginSoukai %>",
         "@intlify/unplugin-vue-i18n": "^0.12.2",
         "@noeldemartin/utils": "next",
-        "@tailwindcss/forms": "^0.5.3",
-        "@tailwindcss/typography": "^0.5.9",
+        "@tailwindcss/forms": "^0.5.10",
+        "@tailwindcss/typography": "^0.5.16",
         "soukai": "next",
-        "tailwindcss": "^3.3.2",
+        "tailwindcss": "^4.1.1",
         "vue": "^3.3.0",
         "vue-i18n": "9.3.0-beta.19"
     },
@@ -37,19 +38,30 @@
         "@noeldemartin/eslint-config-vue": "next",
         "@noeldemartin/scripts": "next",
         "@total-typescript/ts-reset": "^0.4.2",
+        "@tsconfig/node22": "^22.0.1",
         "@types/node": "^20.3.1",
+        "@vue/tsconfig": "^0.7.0",
         "autoprefixer": "^10.4.14",
         "concurrently": "^8.2.0",
-        "cypress": "^12.17.0",
-        "eslint": "^8.40.0",
-        "prettier": "^2.8.8",
-        "prettier-eslint-cli": "^7.1.0",
-        "prettier-plugin-tailwindcss": "^0.2.8",
+        "cypress": "^14.2.0",
+        "prettier-plugin-tailwindcss": "^0.6.11",
         "start-server-and-test": "^2.0.0",
+        "typescript": "^5.8.2",
         "unplugin-icons": "^0.16.3",
         "unplugin-vue-components": "^0.24.1",
-        "vite": "^4.3.0",
-        "vitest": "^0.33.0",
-        "vue-tsc": "^1.8.15"
+        "vite": "^6.2.2",
+        "vitest": "^3.0.9",
+        "vue-tsc": "^2.2.8"
+    },
+    "eslintConfig": {
+        "extends": [
+            "@noeldemartin/eslint-config-vue"
+        ]
+    },
+    "prettier": {
+        "printWidth": 120,
+        "plugins": [
+            "prettier-plugin-tailwindcss"
+        ]
     }
 }

package/templates/app/src/App.vue

@@ -1,6 +1,6 @@
 <template>
-    <AGAppLayout>
-        <main class="flex flex-grow flex-col items-center justify-center bg-blue-50">
+    <AGAppLayout class="bg-blue-50">
+        <main class="flex grow flex-col items-center justify-center">
             <h1 class="text-4xl font-semibold">
                 {{ $t('home.title') }}
             </h1>

package/templates/app/src/assets/css/main.css

@@ -0,0 +1,4 @@
+@import 'tailwindcss';
+@plugin '@tailwindcss/forms';
+@plugin '@tailwindcss/typography';
+@source '../../../node_modules/@aerogel/core';

package/templates/app/src/assets/public/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Disallow:

package/templates/app/src/main.ts

@@ -1,13 +1,13 @@
 import i18n from '@aerogel/plugin-i18n';
 import soukai from '@aerogel/plugin-soukai';
-import { bootstrapApplication } from '@aerogel/core';
+import { bootstrap } from '@aerogel/core';
 
-import './assets/styles.css';
+import './assets/css/main.css';
 import App from './App.vue';
 
-bootstrapApplication(App, {
+bootstrap(App, {
     plugins: [
         i18n({ messages: import.meta.glob('@/lang/*.yaml') }),
-        soukai({ models: import.meta.glob('@/models/*', { eager: true }) }),
+        soukai({ models: import.meta.glob(['@/models/*', '!**/*.test.ts'], { eager: true }) }),
     ],
 });

package/templates/app/tsconfig.json

@@ -1,16 +1,9 @@
 {
+    "extends": "@vue/tsconfig/tsconfig.dom.json",
     "compilerOptions": {
-        "target": "esnext",
-        "module": "esnext",
-        "moduleResolution": "node",
-        "strict": true,
-        "jsx": "preserve",
-        "noUncheckedIndexedAccess": true,
-        "skipLibCheck": true,
-        "resolveJsonModule": true,
-        "esModuleInterop": true,
-        "lib": ["esnext", "dom"],
         "baseUrl": ".",
+        "module": "ESNext",
+        "moduleResolution": "Bundler",
         "paths": {
             "@/*": ["./src/*"]
         }

package/templates/app/vite.config.ts

@@ -1,19 +1,22 @@
+import { URL, fileURLToPath } from 'node:url';
+
 import Aerogel, { AerogelResolver } from '@aerogel/vite';
 import Components from 'unplugin-vue-components/vite';
 import I18n from '@intlify/unplugin-vue-i18n/vite';
 import Icons from 'unplugin-icons/vite';
 import IconsResolver from 'unplugin-icons/resolver';
 import { defineConfig } from 'vitest/config';
-import { resolve } from 'path';
 
 export default defineConfig({
+    build: { sourcemap: true },
+    publicDir: fileURLToPath(new URL('./src/assets/public/', import.meta.url)),
     plugins: [
-        Aerogel(),
+        Aerogel({ name: '<% app.name %>' }),
         Components({
             dts: false,
             resolvers: [AerogelResolver(), IconsResolver()],
         }),
-        I18n({ include: resolve(__dirname, './src/lang/**/*.yaml') }),
+        I18n({ include: fileURLToPath(new URL('./src/lang/**/*.yaml', import.meta.url)) }),
         Icons({
             iconCustomizer(_, __, props) {
                 props['aria-hidden'] = 'true';
@@ -22,7 +25,7 @@ export default defineConfig({
     ],
     resolve: {
         alias: {
-            '@': resolve(__dirname, './src'),
+            '@': fileURLToPath(new URL('./src', import.meta.url)),
         },
     },
 });

package/templates/component-button/[component.name].vue

@@ -0,0 +1,42 @@
+<template>
+    <AGHeadlessButton :class="variantClasses" :disabled="disabled">
+        <slot />
+    </AGHeadlessButton>
+</template>
+
+<script setup lang="ts">
+import { Colors, booleanProp, enumProp, removeInteractiveClasses } from '@aerogel/core';
+import { computed } from 'vue';
+
+const props = defineProps({
+    color: enumProp(Colors, Colors.Primary),
+    disabled: booleanProp(),
+});
+
+const colorClasses = computed(() => {
+    switch (props.color) {
+        case Colors.Secondary:
+            // Add your custom color classes here.
+            return '';
+        case Colors.Clear:
+            // Add your custom color classes here.
+            return '';
+        case Colors.Danger:
+            // Add your custom color classes here.
+            return '';
+        case Colors.Primary:
+        default:
+            // Add your custom color classes here.
+            return '';
+    }
+});
+
+const variantClasses = computed(() => {
+    if (props.disabled) {
+        // Add additional classes for disabled state here.
+        return removeInteractiveClasses(colorClasses.value);
+    }
+
+    return colorClasses.value;
+});
+</script>

package/templates/component-button-story/[component.name].story.vue

@@ -0,0 +1,77 @@
+<template>
+    <Story :layout="{ type: 'grid' }">
+        <Variant title="Playground">
+            <<% component.name %> :color="color">
+                {{ content }}
+            </<% component.name %>>
+
+            <template #controls>
+                <HstText v-model="content" title="Content" />
+                <HstSelect v-model="color" title="Color" :options="colorOptions" />
+            </template>
+        </Variant>
+
+        <Variant title="Default">
+            <<% component.name %>>
+                Click me!
+            </<% component.name %>>
+        </Variant>
+
+        <Variant title="Hover">
+            <<% component.name %> class=":hover">
+                Click me!
+            </<% component.name %>>
+        </Variant>
+
+        <Variant title="Focus">
+            <<% component.name %> class=":focus :focus-visible">
+                Click me!
+            </<% component.name %>>
+        </Variant>
+
+        <Variant title="Disabled">
+            <<% component.name %> disabled>
+                You can't click me
+            </<% component.name %>>
+        </Variant>
+
+        <Variant title="Colors" :layout="{ width: '300px' }">
+            <div class="flex items-center gap-2">
+                <<% component.name %> color="primary">
+                    Primary
+                </<% component.name %>>
+                <<% component.name %> color="secondary">
+                    Secondary
+                </<% component.name %>>
+                <<% component.name %> color="danger">
+                    Danger
+                </<% component.name %>>
+                <<% component.name %> color="clear">
+                    Clear
+                </<% component.name %>>
+            </div>
+        </Variant>
+    </Story>
+</template>
+
+<script setup lang="ts">
+import { Colors } from '@aerogel/core';
+import { invert } from '@noeldemartin/utils';
+import { ref } from 'vue';
+import type { Color } from '@aerogel/core';
+
+const content = ref('Click me!');
+const color = ref<Color>(Colors.Primary);
+const colorOptions = invert(Colors);
+</script>
+
+<style>
+.story-<% component.slug %> {
+    grid-template-columns: repeat(2, 300px) !important;
+}
+
+.story-<% component.slug %> .variant-playground,
+.story-<% component.slug %> .variant-colors{
+    grid-column: 1 / -1;
+}
+</style>

package/templates/component-checkbox/[component.name].vue

@@ -0,0 +1,34 @@
+<template>
+    <AGHeadlessInput
+        ref="$input"
+        :name="name"
+        :class="className"
+        :label="label"
+    >
+        <AGHeadlessInputInput
+            v-bind="attrs"
+            type="checkbox"
+        />
+        <div v-if="$slots.default">
+            <AGHeadlessInputLabel>
+                <slot />
+            </AGHeadlessInputLabel>
+            <AGHeadlessInputError />
+        </div>
+    </AGHeadlessInput>
+</template>
+
+<script setup lang="ts">
+import { AGHeadlessInputLabel, componentRef, stringProp, useInputAttrs } from '@aerogel/core';
+import type { IAGHeadlessInput } from '@aerogel/core';
+
+defineOptions({ inheritAttrs: false });
+defineProps({
+    name: stringProp(),
+    label: stringProp(),
+    inputClass: stringProp(''),
+});
+
+const $input = componentRef<IAGHeadlessInput>();
+const [attrs, className] = useInputAttrs();
+</script>

package/templates/component-checkbox-story/[component.name].story.vue

@@ -0,0 +1,63 @@
+<template>
+    <Story group="base" :layout="{ type: 'grid' }">
+        <Variant title="Playground">
+            <AGForm :form="form" class="m-1">
+                <<% component.name %> name="accept" :form="form">
+                    {{ label }}
+                </<% component.name %>>
+            </AGForm>
+
+            <template #controls>
+                <HstText v-model="label" title="Label" />
+            </template>
+        </Variant>
+
+        <Variant title="Default">
+            <<% component.name %> class="m-1">
+                Accept Terms & Conditions
+            </<% component.name %>>
+        </Variant>
+
+        <Variant title="Hover">
+            <<% component.name %> class="m-1" input-class=":hover">
+                Accept Terms & Conditions
+            </<% component.name %>>
+        </Variant>
+
+        <Variant title="Focus">
+            <<% component.name %> class="m-1" input-class=":focus :focus-visible">
+                Accept Terms & Conditions
+            </<% component.name %>>
+        </Variant>
+
+        <Variant title="Error">
+            <AGForm :form="errorForm" class="m-1">
+                <<% component.name %> name="accept">
+                    Accept Terms & Conditions
+                </<% component.name %>>
+            </AGForm>
+        </Variant>
+    </Story>
+</template>
+
+<script setup lang="ts">
+import { requiredBooleanInput, useForm } from '@aerogel/core';
+import { ref } from 'vue';
+
+const form = useForm({ accept: requiredBooleanInput(true) });
+const errorForm = useForm({ accept: requiredBooleanInput() });
+const label = ref('Accept Terms & Conditions');
+
+form.submit();
+errorForm.submit();
+</script>
+
+<style>
+.story-<% component.slug %> {
+    grid-template-columns: repeat(2, 300px) !important;
+}
+
+.story-<% component.slug %> .variant-playground {
+    grid-column: 1 / -1;
+}
+</style>

package/templates/component-input/[component.name].vue

@@ -0,0 +1,17 @@
+<template>
+    <AGHeadlessInput v-bind="props">
+        <AGHeadlessInputLabel />
+        <AGHeadlessInputInput v-bind="attrs" />
+        <AGHeadlessInputDescription />
+        <AGHeadlessInputError />
+    </AGHeadlessInput>
+</template>
+
+<script setup lang="ts">
+import { useInputAttrs, useInputProps } from '@aerogel/core';
+
+defineOptions({ inheritAttrs: false });
+
+const props = defineProps(useInputProps());
+const [attrs] = useInputAttrs();
+</script>

package/templates/component-input-story/[component.name].story.vue

@@ -0,0 +1,63 @@
+<template>
+    <Story :layout="{ type: 'grid' }">
+        <Variant title="Playground">
+            <AGForm :form="form">
+                <<% component.name %> name="food" :label="label" :placeholder="placeholder" />
+            </AGForm>
+
+            <template #controls>
+                <HstText v-model="label" title="Label" />
+                <HstText v-model="placeholder" title="Placeholder" />
+                <HstCheckbox v-model="hasErrors" title="Errors" />
+            </template>
+        </Variant>
+
+        <Variant title="Default">
+            <<% component.name %> label="What's the best food?" placeholder="Ramen" />
+        </Variant>
+
+        <Variant title="Hover">
+            <<% component.name %> label="What's the best food?" placeholder="Ramen" input-class=":hover" />
+        </Variant>
+
+        <Variant title="Focus">
+            <<% component.name %> label="What's the best food?" placeholder="Ramen" input-class=":focus :focus-visible" />
+        </Variant>
+
+        <Variant title="Error">
+            <AGForm :form="errorForm">
+                <<% component.name %>
+                    name="food"
+                    label="What's the best food?"
+                    placeholder="Ramen"
+                    class=":focus :focus-visible"
+                />
+            </AGForm>
+        </Variant>
+    </Story>
+</template>
+
+<script setup lang="ts">
+import { requiredStringInput, useForm } from '@aerogel/core';
+import { ref, watchEffect } from 'vue';
+
+const form = useForm({ food: requiredStringInput() });
+const errorForm = useForm({ food: requiredStringInput() });
+const label = ref('What\'s the best food?');
+const placeholder = ref('Ramen');
+const hasErrors = ref(false);
+
+errorForm.submit();
+
+watchEffect(() => (hasErrors.value ? form.submit() : form.reset()));
+</script>
+
+<style>
+.story-<% component.slug %> {
+    grid-template-columns: repeat(2, 300px) !important;
+}
+
+.story-<% component.slug %> .variant-playground {
+    grid-column: 1 / -1;
+}
+</style>

package/templates/overrides/components/index.ts

@@ -0,0 +1,15 @@
+import { UIComponents } from '@aerogel/core';
+
+import AlertModal from './overrides/AlertModal.vue';
+import ConfirmModal from './overrides/ConfirmModal.vue';
+import ErrorReportModal from './overrides/ErrorReportModal.vue';
+import LoadingModal from './overrides/LoadingModal.vue';
+import SnackbarNotification from './overrides/SnackbarNotification.vue';
+
+export const components = {
+    [UIComponents.AlertModal]: AlertModal,
+    [UIComponents.ConfirmModal]: ConfirmModal,
+    [UIComponents.ErrorReportModal]: ErrorReportModal,
+    [UIComponents.LoadingModal]: LoadingModal,
+    [UIComponents.Snackbar]: SnackbarNotification,
+};

package/templates/overrides/components/overrides/AlertModal.vue

@@ -0,0 +1,11 @@
+<template>
+    <ModalWrapper :title="title">
+        <AGMarkdown :text="message" />
+    </ModalWrapper>
+</template>
+
+<script setup lang="ts">
+import { useAlertModalProps } from '@aerogel/core';
+
+defineProps(useAlertModalProps());
+</script>

package/templates/overrides/components/overrides/ConfirmModal.vue

@@ -0,0 +1,20 @@
+<template>
+    <ModalWrapper v-slot="{ close }" :title="title" :cancellable="false">
+        <AGMarkdown :text="message" :actions="actions" />
+        <div class="mt-4 flex flex-row-reverse">
+            <AGButton :color="acceptColor" @click="close(true)">
+                {{ renderedAcceptText }}
+            </AGButton>
+            <AGButton v-if="!required" :color="cancelColor" class="mr-2" @click="close(false)">
+                {{ renderedCancelText }}
+            </AGButton>
+        </div>
+    </ModalWrapper>
+</template>
+
+<script setup lang="ts">
+import { useConfirmModal, useConfirmModalProps } from '@aerogel/core';
+
+const props = defineProps(useConfirmModalProps());
+const { renderedAcceptText, renderedCancelText } = useConfirmModal(props);
+</script>

package/templates/overrides/components/overrides/ErrorReportModal.vue

@@ -0,0 +1,35 @@
+<template>
+    <ModalWrapper>
+        <AGErrorReportModalTitle
+            :report="report"
+            :current-report="activeReportIndex + 1"
+            :total-reports="reports.length"
+        />
+        <AGButton color="clear" :disabled="activeReportIndex === 0" @click="activeReportIndex--">
+            {{ previousReportText }}
+        </AGButton>
+        <AGButton color="clear" :disabled="activeReportIndex === reports.length - 1" @click="activeReportIndex++">
+            {{ nextReportText }}
+        </AGButton>
+        <AGErrorReportModalButtons :report="report">
+            <template
+                #default="{ url, handler, iconComponent, description }: IAGErrorReportModalButtonsDefaultSlotProps"
+            >
+                <AGButton :url="url" :aria-label="description" @click="handler">
+                    <component :is="iconComponent" />
+                    {{ description }}
+                </AGButton>
+            </template>
+        </AGErrorReportModalButtons>
+        <AGMarkdown v-if="report.description" :text="report.description" />
+        <pre v-text="details" />
+    </ModalWrapper>
+</template>
+
+<script setup lang="ts">
+import { useErrorReportModal, useErrorReportModalProps } from '@aerogel/core';
+import type { IAGErrorReportModalButtonsDefaultSlotProps } from '@aerogel/core';
+
+const props = defineProps(useErrorReportModalProps());
+const { activeReportIndex, details, nextReportText, previousReportText, report } = useErrorReportModal(props);
+</script>

package/templates/overrides/components/overrides/LoadingModal.vue

@@ -0,0 +1,12 @@
+<template>
+    <ModalWrapper :cancellable="false">
+        <AGMarkdown :text="renderedMessage" />
+    </ModalWrapper>
+</template>
+
+<script setup lang="ts">
+import { useLoadingModal, useLoadingModalProps } from '@aerogel/core';
+
+const props = defineProps(useLoadingModalProps());
+const { renderedMessage } = useLoadingModal(props);
+</script>

package/templates/overrides/components/overrides/ModalWrapper.vue

@@ -0,0 +1,22 @@
+<template>
+    <AGHeadlessModal ref="$modal" v-slot="{ close }" v-bind="props">
+        <AGHeadlessModalPanel>
+            <AGHeadlessModalTitle v-if="title">
+                <AGMarkdown :text="title" inline />
+            </AGHeadlessModalTitle>
+            <slot :close="close" />
+        </AGHeadlessModalPanel>
+    </AGHeadlessModal>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useModalExpose, useModalProps } from '@aerogel/core';
+import type { IAGHeadlessModal, IAGModal } from '@aerogel/core';
+
+const props = defineProps(useModalProps());
+const $modal = ref<IAGHeadlessModal>();
+
+defineOptions({ inheritAttrs: false });
+defineExpose<IAGModal>(useModalExpose($modal));
+</script>

package/templates/overrides/components/overrides/SnackbarNotification.vue

@@ -0,0 +1,34 @@
+<template>
+    <AGHeadlessSnackbar :class="colorClasses">
+        <AGMarkdown :text="message" inline />
+
+        <AGButton
+            v-for="(action, i) of actions"
+            :key="i"
+            :color="color"
+            @click="activate(action)"
+        >
+            {{ action.text }}
+        </AGButton>
+    </AGHeadlessSnackbar>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { Colors, useSnackbar, useSnackbarProps } from '@aerogel/core';
+
+const props = defineProps(useSnackbarProps());
+const { activate } = useSnackbar(props);
+
+const colorClasses = computed(() => {
+    switch (props.color) {
+        case Colors.Danger:
+            // Add your custom color classes here.
+            return '';
+        case Colors.Secondary:
+        default:
+            // Add your custom color classes here.
+            return '';
+    }
+});
+</script>