Override default components

cypress/e2e/auth.cy.ts

@@ -10,6 +10,7 @@ describe('Auth', () => {
     it('Logs in', () => {
         // Arrange
         cy.see('Log in with Solid');
+        cy.matchImageSnapshot();
 
         // Act
         cy.ariaInput('Login url').clear().type(`${cssUrl()}{enter}`);
@@ -36,7 +37,7 @@ describe('Auth', () => {
         // Act
         cy.ariaLabel('Logout').click();
         cy.contains('[role="dialog"]', 'Are you sure you want to log out?').within(() => {
-            cy.press('OK');
+            cy.press('Ok');
         });
 
         // Assert

cypress/e2e/cookbook.cy.ts

@@ -18,6 +18,7 @@ describe('Cookbook', () => {
 
         // Act
         cy.see('You don\'t have a place to store your recipes');
+        cy.matchImageSnapshot();
         cy.press('Create cookbook');
 
         // Assert
@@ -46,6 +47,7 @@ describe('Cookbook', () => {
 
         // Act
         cy.see('You don\'t know how to make Ramen');
+        cy.matchImageSnapshot();
         cy.press('Teach me');
 
         // Assert
@@ -88,6 +90,7 @@ describe('Cookbook', () => {
         // Assert
         cy.see('You know how to make Ramen!');
         cy.see(`Your Ramen recipe is at ${cssPodUrl('/cookbook/ramen#it')}`);
+        cy.matchImageSnapshot();
     });
 
 });

package.json

@@ -30,15 +30,15 @@
         "@tailwindcss/forms": "^0.5.3",
         "@tailwindcss/typography": "^0.5.9",
         "soukai": "next",
-        "soukai-solid": "0.5.2-next.b6340345e228903e404a02c1ed9be8fc95162e8f",
+        "soukai-solid": "next",
         "tailwindcss": "^3.3.2",
         "vue": "^3.3.0",
         "vue-i18n": "9.3.0-beta.19"
     },
     "devDependencies": {
         "@aerogel/cli": "next",
         "@aerogel/cypress": "next",
-        "@aerogel/histoire": "0.0.0-next.980a397d575dcb5ff8c5a0bff769d09f938ea03c",
+        "@aerogel/histoire": "next",
         "@aerogel/vite": "next",
         "@iconify/json": "^2.2.134",
         "@noeldemartin/eslint-config-vue": "next",

src/components/AppLoginForm.vue

@@ -16,7 +16,10 @@
                     class="text-sm opacity-90"
                 />
                 <div class="flex flex-row-reverse justify-start">
-                    <TextButton color="secondary" @click="$ui.loading($solid.reconnect({ onError, force: true }))">
+                    <TextButton
+                        color="solid-secondary"
+                        @click="$ui.loading($solid.reconnect({ onError, force: true }))"
+                    >
                         {{ $t('login.reconnect') }}
                     </TextButton>
                     <TextButton class="mr-3" color="clear" @click="$solid.logout(true)">

src/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,
+};

src/components/inputs/TextButton.story.vue

@@ -27,6 +27,12 @@
             </TextButton>
         </Variant>
 
+        <Variant title="Disabled">
+            <TextButton disabled>
+                You can't click me
+            </TextButton>
+        </Variant>
+
         <Variant title="Colors" :layout="{ width: '300px' }">
             <div class="flex items-center gap-2">
                 <TextButton color="primary">
@@ -38,6 +44,9 @@
                 <TextButton color="solid">
                     Solid
                 </TextButton>
+                <TextButton color="solid-secondary">
+                    Solid Secondary
+                </TextButton>
                 <TextButton color="danger">
                     Danger
                 </TextButton>
@@ -63,7 +72,7 @@ const colorOptions = invert(Colors);
 
 <style>
 .story-textbutton {
-    grid-template-columns: repeat(3, 200px) !important;
+    grid-template-columns: repeat(2, 300px) !important;
 }
 
 .story-textbutton .variant-playground,

src/components/inputs/TextButton.vue

@@ -1,20 +1,22 @@
 <template>
     <AGHeadlessButton
         class="rounded-md px-3 py-2 text-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
-        :class="colorClasses"
+        :class="variantClasses"
+        :disabled="disabled"
     >
         <slot />
     </AGHeadlessButton>
 </template>
 
 <script setup lang="ts">
-import { enumProp } from '@aerogel/core';
+import { booleanProp, enumProp, removeInteractiveClasses } from '@aerogel/core';
 import { computed } from 'vue';
 
 import { Colors } from '@/lib/colors';
 
 const props = defineProps({
     color: enumProp(Colors, Colors.Primary),
+    disabled: booleanProp(),
 });
 
 const colorClasses = computed(() => {
@@ -25,12 +27,18 @@ const colorClasses = computed(() => {
             return 'bg-red-600 font-semibold text-white shadow-sm hover:bg-red-500 focus-visible:outline-red-600';
         case Colors.Secondary:
             return `
-                text-solid-500 ring-1 ring-inset ring-solid-500 shadow-sm
+                text-emerald-500 ring-1 ring-inset ring-emerald-500 shadow-sm
                 hover:bg-gray-200
-                focus-visible:outline-solid-500
+                focus-visible:outline-emerald-500
             `;
         case Colors.Solid:
             return 'bg-solid-600 font-semibold text-white shadow-sm hover:bg-solid-500 focus-visible:outline-solid-600';
+        case Colors.SolidSecondary:
+            return `
+                text-solid-500 ring-1 ring-inset ring-solid-500 shadow-sm
+                hover:bg-gray-200
+                focus-visible:outline-solid-500
+            `;
         case Colors.Primary:
         default:
             return `
@@ -40,4 +48,12 @@ const colorClasses = computed(() => {
             `;
     }
 });
+
+const variantClasses = computed(() => {
+    if (props.disabled) {
+        return `opacity-50 ${removeInteractiveClasses(colorClasses.value)}`;
+    }
+
+    return colorClasses.value;
+});
 </script>

src/components/overrides/AlertModal.vue

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

src/components/overrides/ConfirmModal.vue

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

src/components/overrides/ErrorReportModal.vue

@@ -0,0 +1,71 @@
+<template>
+    <ModalWrapper no-padding>
+        <div class="p-4">
+            <h2 class="flex justify-between gap-4">
+                <div class="flex items-center gap-2">
+                    <i-zondicons-exclamation-solid class="h-5 w-5 text-red-600" />
+                    <AGErrorReportModalTitle
+                        class="text-lg font-semibold leading-6 text-gray-900"
+                        :report="report"
+                        :current-report="activeReportIndex + 1"
+                        :total-reports="reports.length"
+                    />
+                    <span v-if="reports.length > 1" class="flex gap-0.5">
+                        <TextButton
+                            icon
+                            color="clear"
+                            :disabled="activeReportIndex === 0"
+                            :aria-label="previousReportText"
+                            :title="previousReportText"
+                            @click="activeReportIndex--"
+                        >
+                            <i-zondicons-cheveron-left class="h-4 w-4" />
+                        </TextButton>
+                        <TextButton
+                            icon
+                            color="clear"
+                            :disabled="activeReportIndex === reports.length - 1"
+                            :aria-label="nextReportText"
+                            :title="nextReportText"
+                            @click="activeReportIndex++"
+                        >
+                            <i-zondicons-cheveron-right class="h-4 w-4" />
+                        </TextButton>
+                    </span>
+                </div>
+                <AGErrorReportModalButtons :report="report" class="gap-2">
+                    <template
+                        #default="{
+                            url,
+                            handler,
+                            iconComponent,
+                            description,
+                        }: IAGErrorReportModalButtonsDefaultSlotProps"
+                    >
+                        <TextButton
+                            :url="url"
+                            color="secondary"
+                            class="flex items-center gap-1"
+                            @click="handler"
+                        >
+                            <component :is="iconComponent" />
+                            {{ description }}
+                        </TextButton>
+                    </template>
+                </AGErrorReportModalButtons>
+            </h2>
+            <AGMarkdown v-if="report.description" :text="report.description" class="text-gray-600" />
+        </div>
+        <div class="-mt-2 max-h-[80vh] overflow-auto bg-red-50">
+            <pre class="p-4 text-xs text-red-800" v-text="details" />
+        </div>
+    </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>

src/components/overrides/LoadingModal.vue

@@ -0,0 +1,15 @@
+<template>
+    <ModalWrapper :cancellable="false">
+        <div class="flex items-center justify-center gap-2">
+            <i-svg-spinners:90-ring-with-bg class="h-8 w-8 flex-shrink-0 text-emerald-600" />
+            <AGMarkdown :text="renderedMessage" class="text-gray-500" />
+        </div>
+    </ModalWrapper>
+</template>
+
+<script setup lang="ts">
+import { useLoadingModal, useLoadingModalProps } from '@aerogel/core';
+
+const props = defineProps(useLoadingModalProps());
+const { renderedMessage } = useLoadingModal(props);
+</script>

src/components/overrides/ModalWrapper.vue

@@ -0,0 +1,37 @@
+<template>
+    <AGHeadlessModal
+        ref="$modal"
+        v-slot="{ close }"
+        v-bind="props"
+        class="relative z-50"
+    >
+        <div class="fixed inset-0 z-10">
+            <div class="flex h-full items-center justify-center p-4 text-center">
+                <AGHeadlessModalPanel
+                    class="relative max-h-full transform overflow-auto rounded-lg bg-white text-left shadow-xl"
+                    :class="{ 'p-4': !noPadding }"
+                >
+                    <AGHeadlessModalTitle v-if="title" class="text-base font-semibold leading-6 text-gray-900">
+                        <AGMarkdown :text="title" inline />
+                    </AGHeadlessModalTitle>
+                    <slot :close="close" />
+                </AGHeadlessModalPanel>
+            </div>
+        </div>
+    </AGHeadlessModal>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { booleanProp, useModalExpose, useModalProps } from '@aerogel/core';
+import type { IAGHeadlessModal, IAGModal } from '@aerogel/core';
+
+const props = defineProps({
+    noPadding: booleanProp(),
+    ...useModalProps(),
+});
+const $modal = ref<IAGHeadlessModal>();
+
+defineOptions({ inheritAttrs: false });
+defineExpose<IAGModal>(useModalExpose($modal));
+</script>