@aerogel/cli 0.0.0-next.f9394854509d71d644498ac087706a2f8f8eea1c → 0.1.0-next.a2c47ef9c46c7b0d64e60e038d48772b0444e38a

package/templates/app/src/lang/en.yaml

@@ -1,3 +0,0 @@
-home:
-  title: Aerogel
-  getStarted: Get started

package/templates/app/src/main.test.ts

@@ -1,9 +0,0 @@
-import { describe, expect, it } from 'vitest';
-
-describe('App', () => {
-
-    it('works', () => {
-        expect(true).toBe(true);
-    });
-
-});

package/templates/app/src/main.ts

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

package/templates/app/src/types/globals.d.ts

@@ -1,2 +0,0 @@
-/// <reference types="vite/client" />
-/// <reference types="vue-i18n" />

package/templates/app/src/types/shims.d.ts

@@ -1,7 +0,0 @@
-declare module '*.vue' {
-    import type { ComponentOptions } from 'vue';
-
-    const component: ComponentOptions;
-
-    export default component;
-}

package/templates/app/src/types/ts-reset.d.ts

@@ -1 +0,0 @@
-/// <reference types="@total-typescript/ts-reset" />

package/templates/app/tailwind.config.js

@@ -1,5 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-    content: ['./index.html', './src/**/*.{vue,ts}', '<% &contentPath %>'],
-    plugins: [require('@tailwindcss/forms'), require('@tailwindcss/typography')],
-};

package/templates/app/tsconfig.json

@@ -1,19 +0,0 @@
-{
-    "compilerOptions": {
-        "target": "esnext",
-        "module": "esnext",
-        "moduleResolution": "node",
-        "strict": true,
-        "jsx": "preserve",
-        "noUncheckedIndexedAccess": true,
-        "skipLibCheck": true,
-        "resolveJsonModule": true,
-        "esModuleInterop": true,
-        "lib": ["esnext", "dom"],
-        "baseUrl": ".",
-        "paths": {
-            "@/*": ["./src/*"]
-        }
-    },
-    "include": ["src/**/*.ts", "src/**/*.vue"]
-}

package/templates/app/vite.config.ts

@@ -1,30 +0,0 @@
-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: resolve(__dirname, './src/assets/public/'),
-    plugins: [
-        Aerogel({ name: '<% app.name %>' }),
-        Components({
-            dts: false,
-            resolvers: [AerogelResolver(), IconsResolver()],
-        }),
-        I18n({ include: resolve(__dirname, './src/lang/**/*.yaml') }),
-        Icons({
-            iconCustomizer(_, __, props) {
-                props['aria-hidden'] = 'true';
-            },
-        }),
-    ],
-    resolve: {
-        alias: {
-            '@': resolve(__dirname, './src'),
-        },
-    },
-});

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

@@ -1,42 +0,0 @@
-<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

@@ -1,77 +0,0 @@
-<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

@@ -1,34 +0,0 @@
-<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

@@ -1,63 +0,0 @@
-<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

@@ -1,17 +0,0 @@
-<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

@@ -1,63 +0,0 @@
-<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/component-story/[component.name].story.vue

@@ -1,7 +0,0 @@
-<template>
-    <Story>
-        <Variant title="Primary">
-            <<% component.name %> />
-        </Variant>
-    </Story>
-</template>

package/templates/histoire/histoire.config.ts

@@ -1,7 +0,0 @@
-import HstAerogel from '@aerogel/histoire/dist/plugin';
-import { defineConfig } from 'histoire';
-
-export default defineConfig({
-    setupFile: '/src/main.histoire.ts',
-    plugins: [HstAerogel()],
-});

package/templates/histoire/patches/histoire+0.17.6.patch

@@ -1,13 +0,0 @@
-diff --git a/node_modules/histoire/dist/node/collect/index.js b/node_modules/histoire/dist/node/collect/index.js
-index 8ffd507..37be43e 100644
---- a/node_modules/histoire/dist/node/collect/index.js
-+++ b/node_modules/histoire/dist/node/collect/index.js
-@@ -22,7 +22,7 @@ export function useCollectStories(options, ctx) {
-                 /vite\w*\/dist\/client\/(client|env).mjs/,
-                 ...ctx.config.viteNodeInlineDeps ?? [],
-             ],
--            fallbackCJS: true,
-+            fallbackCJS: false,
-         },
-         transformMode: ctx.config.viteNodeTransformMode,
-     });

package/templates/histoire/src/main.histoire.ts

@@ -1,8 +0,0 @@
-import '@aerogel/histoire/dist/styles.css';
-import { defineSetupAerogel } from '@aerogel/histoire';
-
-import './assets/css/main.css';
-
-export const setupVue3 = defineSetupAerogel({
-    messages: import.meta.glob('@/lang/*.yaml'),
-});

package/templates/overrides/components/index.ts

@@ -1,15 +0,0 @@
-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

@@ -1,11 +0,0 @@
-<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

@@ -1,20 +0,0 @@
-<template>
-    <ModalWrapper v-slot="{ close }" :title="title" :cancellable="false">
-        <AGMarkdown :text="message" />
-        <div class="mt-4 flex flex-row-reverse">
-            <AGButton :color="acceptColor" @click="close(true)">
-                {{ renderedAcceptText }}
-            </AGButton>
-            <AGButton :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

@@ -1,35 +0,0 @@
-<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

@@ -1,12 +0,0 @@
-<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

@@ -1,22 +0,0 @@
-<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

@@ -1,34 +0,0 @@
-<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>