@aerogel/cli 0.0.0-next.c2e6acc000e97a1020c2e232678563c53884dd0e → 0.0.0-next.c33ad773d3eb977461630ff22012d99eeedf46cb

package/src/commands/generate-overrides.ts

@@ -1,85 +0,0 @@
-import { arrayFrom } from '@noeldemartin/utils';
-
-import Command from '@aerogel/cli/commands/Command';
-import File from '@aerogel/cli/lib/File';
-import Log from '@aerogel/cli/lib/Log';
-import Template from '@aerogel/cli/lib/Template';
-import { templatePath } from '@aerogel/cli/lib/utils/paths';
-import type { CommandOptions } from '@aerogel/cli/commands/Command';
-
-export interface Options {
-    story?: boolean;
-}
-
-export class GenerateOverridesCommand extends Command {
-
-    protected static override command: string = 'generate:overrides';
-    protected static override description: string = 'Generate AerogelJS component overrides';
-
-    protected static override options: CommandOptions = {
-        story: {
-            description: 'Create overrides story using Histoire',
-            type: 'boolean',
-        },
-    };
-
-    private options: Options;
-
-    constructor(options: Options = {}) {
-        super();
-
-        this.options = options;
-    }
-
-    protected override async run(): Promise<void> {
-        this.assertAerogelOrDirectory('src/components');
-        this.assertHistoireInstalled();
-
-        const files = new Set<string>();
-
-        await this.createComponents(files);
-        await this.createStory(files);
-
-        const filesList = arrayFrom(files)
-            .map((file) => `- ${file}`)
-            .join('\n');
-
-        Log.info(`Overrides created successfully! The following files were created:\n\n${filesList}`);
-        Log.info('\nRemember to declare your components in main.ts and main.histoire.ts!');
-    }
-
-    protected assertHistoireInstalled(): void {
-        if (!this.options.story) {
-            return;
-        }
-
-        if (!File.contains('package.json', '"histoire"') && !File.contains('package.json', '"@aerogel/histoire"')) {
-            Log.fail(`
-                Histoire is not installed yet! You can install it running:
-                npx gel install histoire
-            `);
-        }
-    }
-
-    protected async createComponents(files: Set<string>): Promise<void> {
-        await Log.animate('Creating components', async () => {
-            if (File.exists('src/components/ModalWrapper.vue')) {
-                Log.fail('ModalWrapper component already exists!');
-            }
-
-            Template.instantiate(templatePath('overrides'), 'src').forEach((file) => files.add(file));
-        });
-    }
-
-    protected async createStory(files: Set<string>): Promise<void> {
-        if (!this.options.story) {
-            return;
-        }
-
-        await Log.animate('Creating story', async () => {
-            Template.instantiate(templatePath('overrides-story'), 'src/components/overrides/').forEach((file) =>
-                files.add(file));
-        });
-    }
-
-}

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">
-        <Markdown :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" persistent>
-        <Markdown :text="message" :actions="actions" />
-        <div class="mt-4 flex flex-row-reverse">
-            <Button :variant="acceptColor" @click="close(true)">
-                {{ renderedAcceptText }}
-            </Button>
-            <Button v-if="!required" :variant="cancelColor" class="mr-2" @click="close(false)">
-                {{ renderedCancelText }}
-            </Button>
-        </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/LoadingModal.vue

@@ -1,12 +0,0 @@
-<template>
-    <ModalWrapper persistent>
-        <Markdown :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">
-                <Markdown :text="title" inline />
-            </AGHeadlessModalTitle>
-            <slot :close="close" />
-        </AGHeadlessModalPanel>
-    </AGHeadlessModal>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue';
-import { modalExpose, modalProps } from '@aerogel/core';
-import type { IAGHeadlessModal, IAGModal } from '@aerogel/core';
-
-const props = defineProps(modalProps());
-const $modal = ref<IAGHeadlessModal>();
-
-defineOptions({ inheritAttrs: false });
-defineExpose(modalExpose($modal));
-</script>

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

@@ -1,34 +0,0 @@
-<template>
-    <AGHeadlessSnackbar :class="colorClasses">
-        <Markdown :text="message" inline />
-
-        <Button
-            v-for="(action, i) of actions"
-            :key="i"
-            :variant="color"
-            @click="activate(action)"
-        >
-            {{ action.text }}
-        </Button>
-    </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

@@ -1,86 +0,0 @@
-<template>
-    <Story :layout="{ type: 'grid', width: '90%' }">
-        <Variant title="Playground">
-            <div class="flex space-x-3">
-                <Button @click="$ui.alert(alertTitle, alertMessage)">
-                    Alert
-                </Button>
-                <Button @click="$ui.confirm(confirmTitle, confirmMessage)">
-                    Confirm
-                </Button>
-                <Button @click="$ui.loading(loadingMessage, after({ seconds: loadingDuration }))">
-                    Loading
-                </Button>
-                <Button @click="$ui.showSnackbar(snackbarMessage, snackbarOptions)">
-                    Snackbar
-                </Button>
-                <Button @click="$errors.inspect(errorReports)">
-                    Error Report
-                </Button>
-            </div>
-
-            <AppOverlays />
-
-            <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>