@aerogel/cli 0.0.0-next.926bde19326fe7b6b24b277666936862b64d8295 → 0.0.0-next.9a02fcd3bcf698211dd7a71d4c48257c96dd7832

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-input/[component.name].vue

@@ -0,0 +1,16 @@
+<template>
+    <AGHeadlessInput v-bind="props">
+        <AGHeadlessInputLabel />
+        <AGHeadlessInputInput v-bind="attrs" />
+        <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/histoire/histoire.config.ts

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

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

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

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" />
+        <div class="mt-4 flex flex-row-reverse">
+            <AGButton @click="close(true)">
+                {{ renderedAcceptText }}
+            </AGButton>
+            <AGButton color="clear" 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>

package/templates/overrides-story/Overrides.story.vue

@@ -0,0 +1,86 @@
+<template>
+    <Story :layout="{ type: 'grid', width: '90%' }">
+        <Variant title="Playground">
+            <div class="flex space-x-3">
+                <AGButton @click="$ui.alert(alertTitle, alertMessage)">
+                    Alert
+                </AGButton>
+                <AGButton @click="$ui.confirm(confirmTitle, confirmMessage)">
+                    Confirm
+                </AGButton>
+                <AGButton @click="$ui.loading(loadingMessage, after({ seconds: loadingDuration }))">
+                    Loading
+                </AGButton>
+                <AGButton @click="$ui.showSnackbar(snackbarMessage, snackbarOptions)">
+                    Snackbar
+                </AGButton>
+                <AGButton @click="$errors.inspect(errorReports)">
+                    Error Report
+                </AGButton>
+            </div>
+
+            <AGAppOverlays />
+
+            <template #controls>
+                <HstText v-model="alertTitle" title="Alert Title" />
+                <HstText v-model="alertMessage" title="Alert Message" />
+                <HstText v-model="confirmTitle" title="Confirm Title" />
+                <HstText v-model="confirmMessage" title="Confirm Message" />
+                <HstText v-model="loadingMessage" title="Loading Message" />
+                <HstNumber v-model="loadingDuration" title="Loading Duration" />
+                <HstText v-model="snackbarMessage" title="Snackbar Message" />
+                <HstSelect v-model="snackbarColor" title="Snackbar Color" :options="snackbarColors" />
+                <HstText v-model="snackbarAction" title="Snackbar Action" />
+                <HstText v-model="errorReportTitle" title="Error Report Title" />
+                <HstText v-model="errorReportDescription" title="Error Report Description" />
+            </template>
+        </Variant>
+    </Story>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { after, invert } from '@noeldemartin/utils';
+import { Colors, SnackbarColors } from '@aerogel/core';
+import type { ErrorReport, ShowSnackbarOptions } from '@aerogel/core';
+
+const alertTitle = ref('Something important happened');
+const alertMessage = ref('And here you can read the details...');
+const confirmTitle = ref('Confirmation');
+const confirmMessage = ref('Are you sure?');
+const loadingMessage = ref('Loading...');
+const loadingDuration = ref(3);
+const snackbarMessage = ref('Something happened');
+const snackbarColor = ref(Colors.Secondary);
+const snackbarColors = invert(SnackbarColors);
+const snackbarAction = ref('Ok');
+const snackbarOptions = computed((): ShowSnackbarOptions => {
+    if (!snackbarAction.value) {
+        return {};
+    }
+
+    return {
+        color: snackbarColor.value,
+        actions: [
+            {
+                text: snackbarAction.value,
+                dismiss: true,
+            },
+        ],
+    };
+});
+const errorReportTitle = ref('Error');
+const errorReportDescription = ref('Something went wrong!');
+const errorReports = computed((): ErrorReport[] => [
+    {
+        title: errorReportTitle.value,
+        description: errorReportDescription.value,
+        details: new Error().stack,
+    },
+    {
+        title: errorReportTitle.value,
+        description: errorReportDescription.value,
+        details: new Error().stack,
+    },
+]);
+</script>

package/templates/postcss-pseudo-classes/postcss.config.js

@@ -0,0 +1,15 @@
+const plugins = {
+    tailwindcss: {},
+    autoprefixer: {},
+};
+
+if (process.env.NODE_ENV === 'development') {
+    plugins['postcss-pseudo-classes'] = {
+        blacklist: [],
+        restrictTo: ['hover', 'focus-visible', 'focus'],
+        allCombinations: true,
+        preserveBeforeAfter: false,
+    };
+}
+
+module.exports = { plugins };

package/templates/service/[service.name].ts

@@ -0,0 +1,8 @@
+import { Service } from '@aerogel/core';
+import { facade } from '@noeldemartin/utils';
+
+export class <% service.name %>Service extends Service {
+
+}
+
+export default facade(<% service.name %>Service);

package/.eslintrc.js

@@ -1,7 +0,0 @@
-module.exports = {
-    env: {
-        browser: true,
-        es2021: true,
-    },
-    extends: ['@noeldemartin/eslint-config-typescript'],
-};

package/noeldemartin.config.js

@@ -1,4 +0,0 @@
-/** @type {import('@noeldemartin/scripts').Config} */
-module.exports = {
-    external: ['fs', '@noeldemartin/utils', 'chalk', 'child_process', 'commander', 'mustache', 'path', 'readline'],
-};

package/src/lib/utils.test.ts

@@ -1,33 +0,0 @@
-import { describe, expect, it } from 'vitest';
-
-import { formatCodeBlock } from './utils';
-
-describe('Utils', () => {
-
-    it('Formats code blocks', () => {
-        // Arrange
-        const raw = `
-
-            const foo = 'bar';
-
-            if (foo) {
-                doSomething();
-            }
-
-        `;
-        const formatted = [
-            'const foo = \'bar\';', //
-            '', //
-            'if (foo) {', //
-            '    doSomething();', //
-            '}', //
-        ].join('\n');
-
-        // Act
-        const actual = formatCodeBlock(raw);
-
-        // Assert
-        expect(actual).toEqual(formatted);
-    });
-
-});

package/src/lib/utils.ts

@@ -1,44 +0,0 @@
-import { resolve } from 'path';
-
-export interface FormatCodeBlockOptions {
-    indent?: number;
-}
-
-export function basePath(path: string): string {
-    return resolve(__dirname, '../', path);
-}
-
-export function formatCodeBlock(code: string, options: FormatCodeBlockOptions = {}): string {
-    const lines = code.split('\n');
-    const indent = options.indent ?? 0;
-    let originalIndent = 0;
-    let formatted = '';
-
-    for (const line of lines) {
-        const trimmedLine = line.trim();
-        const isEmptyLine = trimmedLine.length === 0;
-
-        if (formatted.length === 0) {
-            if (isEmptyLine) {
-                continue;
-            }
-
-            originalIndent = line.indexOf(trimmedLine[0] ?? '');
-            formatted += `${' '.repeat(indent)}${trimmedLine}\n`;
-
-            continue;
-        }
-
-        if (isEmptyLine) {
-            formatted += '\n';
-
-            continue;
-        }
-
-        const lineIndent = line.indexOf(trimmedLine[0] ?? '');
-
-        formatted += `${' '.repeat(indent + lineIndent - originalIndent)}${trimmedLine}\n`;
-    }
-
-    return formatted.trimEnd();
-}

package/templates/app/cypress.config.ts

@@ -1,8 +0,0 @@
-import { defineConfig } from 'cypress';
-
-export default defineConfig({
-    e2e: {
-        baseUrl: 'http://localhost:5001',
-        video: false,
-    },
-});