@vc-shell/framework 1.2.4-beta.4 → 1.2.4-beta.5

package/shared/pages/LoginPage/components/login/Login.vue

@@ -13,89 +13,102 @@
     >
       <ExternalProviders :providers="loginProviders" />
 
-      <div class="vc-login-page__separator-line">
+      <div
+        v-if="!ssoOnly"
+        class="vc-login-page__separator-line"
+      >
         {{ $t("LOGIN.OR") }}
       </div>
     </div>
 
-    <VcForm
-      @submit.prevent="login"
-      class="tw-gap-5"
+    <!-- SSO-only error: no providers configured -->
+    <VcHint
+      v-if="ssoOnly && providersLoaded && !loginProviders?.length"
+      class="tw-mt-4 tw-text-danger-500"
     >
-      <Field
-        v-slot="{ errorMessage, handleChange, errors }"
-        :label="$t('LOGIN.FIELDS.LOGIN.LABEL')"
-        name="username"
-        :model-value="form.username"
-        rules="required"
+      {{ $t("LOGIN.SSO_NO_PROVIDERS_ERROR") }}
+    </VcHint>
+
+    <template v-if="!ssoOnly">
+      <VcForm
+        @submit="login"
+        class="tw-gap-5"
       >
-        <VcInput
-          ref="loginField"
-          v-model="form.username"
+        <Field
+          v-slot="{ errorMessage, handleChange, errors }"
           :label="$t('LOGIN.FIELDS.LOGIN.LABEL')"
-          :placeholder="$t('LOGIN.FIELDS.LOGIN.PLACEHOLDER')"
-          required
-          :error="!!errors.length"
-          :error-message="errorMessage"
-          @update:model-value="handleChange"
-        />
-      </Field>
-
-      <Field
-        v-slot="{ errorMessage, handleChange, errors }"
-        :label="$t('LOGIN.FIELDS.PASSWORD.LABEL')"
-        name="password"
-        :model-value="form.password"
-        rules="required"
-      >
-        <VcInput
-          ref="passwordField"
-          v-model="form.password"
+          name="username"
+          :model-value="form.username"
+          rules="required"
+        >
+          <VcInput
+            ref="loginField"
+            v-model="form.username"
+            :label="$t('LOGIN.FIELDS.LOGIN.LABEL')"
+            :placeholder="$t('LOGIN.FIELDS.LOGIN.PLACEHOLDER')"
+            required
+            :error="!!errors.length"
+            :error-message="errorMessage"
+            @update:model-value="handleChange"
+          />
+        </Field>
+
+        <Field
+          v-slot="{ errorMessage, handleChange, errors }"
           :label="$t('LOGIN.FIELDS.PASSWORD.LABEL')"
-          :placeholder="$t('LOGIN.FIELDS.PASSWORD.PLACEHOLDER')"
-          type="password"
-          required
-          :error="!!errors.length"
-          :error-message="errorMessage"
-          @keyup.enter="login"
-          @update:model-value="handleChange"
-        />
-      </Field>
-
-      <VcButton
-        variant="primary"
-        class="tw-w-full"
-        :disabled="!isValid"
-        :loading="loading"
-        @click="login"
+          name="password"
+          :model-value="form.password"
+          rules="required"
+        >
+          <VcInput
+            ref="passwordField"
+            v-model="form.password"
+            :label="$t('LOGIN.FIELDS.PASSWORD.LABEL')"
+            :placeholder="$t('LOGIN.FIELDS.PASSWORD.PLACEHOLDER')"
+            type="password"
+            required
+            :error="!!errors.length"
+            :error-message="errorMessage"
+            @keyup.enter="login"
+            @update:model-value="handleChange"
+          />
+        </Field>
+
+        <VcButton
+          variant="primary"
+          class="tw-w-full"
+          :disabled="!isValid"
+          :loading="loading"
+          @click="login"
+        >
+          {{ $t("LOGIN.BUTTON") }}
+        </VcButton>
+
+        <VcButton
+          variant="link"
+          class="tw-w-full tw-justify-center"
+          type="button"
+          @click="goToForgotPassword"
+        >
+          {{ $t("LOGIN.FORGOT_PASSWORD_BUTTON") }}
+        </VcButton>
+      </VcForm>
+
+      <!-- Plugin extension point -->
+      <ExtensionPoint
+        name="auth:after-form"
+        separator
+        separator-class="tw-border-t tw-border-[color:var(--login-separator)] tw-border-solid tw-pb-5"
+        wrapper-class="vc-login-page__separator"
+      />
+
+      <VcHint
+        v-if="!signInResult.succeeded"
+        class="tw-mt-4 tw-text-danger-500"
       >
-        {{ $t("LOGIN.BUTTON") }}
-      </VcButton>
-
-      <VcButton
-        variant="link"
-        class="tw-w-full tw-justify-center"
-        type="button"
-        @click="goToForgotPassword"
-      >
-        {{ $t("LOGIN.FORGOT_PASSWORD_BUTTON") }}
-      </VcButton>
-    </VcForm>
-
-    <!-- Plugin extension point -->
-    <ExtensionPoint
-      name="auth:after-form"
-      separator
-      separator-class="tw-border-t tw-border-[color:var(--login-separator)] tw-border-solid tw-pb-5"
-      wrapper-class="vc-login-page__separator"
-    />
-
-    <VcHint
-      v-if="!signInResult.succeeded"
-      class="tw-mt-4 tw-text-danger-500"
-    >
-      {{ signInResult.error }}
-    </VcHint>
+        {{ signInResult.error }}
+      </VcHint>
+    </template>
   </VcAuthLayout>
 </template>
 
@@ -119,6 +132,7 @@ export interface Props {
   background?: string;
   title?: string;
   subtitle?: string;
+  ssoOnly?: boolean;
 }
 
 const props = defineProps<Props>();
@@ -132,9 +146,11 @@ const { signIn, loading, user } = useUserManagement();
 const { getProviders } = useExternalProvider();
 const isValid = useIsFormValid();
 const loginProviders = ref<ExternalSignInProviderInfo[]>();
+const providersLoaded = ref(false);
 
 onMounted(async () => {
   loginProviders.value = await getProviders();
+  providersLoaded.value = true;
 });
 
 const customization = computed(() => ({
@@ -172,8 +188,10 @@ const login = async () => {
     signInResult.value.error = "The login or password is incorrect.";
   } else if (signInResult.value.status) {
     signInResult.value.error = "Authentication error (code: " + signInResult.value.status + ").";
-  } else {
+  } else if (signInResult.value.error) {
     signInResult.value.error = "Authentication error: " + signInResult.value.error;
+  } else {
+    signInResult.value.error = "The login or password is incorrect.";
   }
 
   form.password = "";

package/tailwind.config.ts

@@ -218,27 +218,8 @@ export default {
           950: "var(--additional-950)",
         },
       },
-      keyframes: {
-        loadingMarker: {
-          "50%": { transform: "translateX(96px)" },
-        },
-        loadingMarkers: {
-          "50%": { transform: "translateX(-31px)" },
-        },
-        loadingProgress: {
-          from: {
-            "background-position": "0 0, left",
-          },
-          to: {
-            "background-position": "30px 0, left",
-          },
-        },
-      },
-      animation: {
-        loadingMarker: "loadingMarker 3s infinite",
-        loadingMarkers: "loadingMarkers 3s infinite",
-        loadingProgress: "loadingProgress 1s linear infinite",
-      },
+      keyframes: {},
+      animation: {},
     },
   },
   content,

package/ui/components/atoms/vc-banner/vc-banner.stories.ts

@@ -0,0 +1,259 @@
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
+import { VcBanner } from "@ui/components/atoms/vc-banner";
+import { VcIcon } from "@ui/components/atoms/vc-icon";
+
+/**
+ * `VcBanner` is a contextual alert component for displaying important messages.
+ * Inspired by shadcn Alert — clean borders, subtle semantic backgrounds, refined typography.
+ *
+ * Supports 4 variants: `info`, `warning`, `danger`, `success`.
+ * Long content is automatically collapsible via the `useCollapsible` composable.
+ */
+const meta = {
+  title: "Atoms/VcBanner",
+  component: VcBanner,
+  tags: ["autodocs"],
+  argTypes: {
+    variant: {
+      description: "Semantic color variant",
+      control: "select",
+      options: ["info", "warning", "danger", "success"],
+      table: {
+        type: { summary: '"info" | "warning" | "danger" | "success"' },
+        defaultValue: { summary: "info" },
+      },
+    },
+    icon: {
+      description: "Icon identifier (e.g. `fas fa-info-circle`, `material-warning`)",
+      control: "text",
+      table: {
+        type: { summary: "string" },
+      },
+    },
+    iconSize: {
+      description: "Size of the icon",
+      control: "select",
+      options: ["xs", "s", "m", "l", "xl", "xxl"],
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "l" },
+      },
+    },
+    collapsedHeight: {
+      description: "Max height in px before content becomes collapsible",
+      control: "number",
+      table: {
+        type: { summary: "number" },
+        defaultValue: { summary: "100" },
+      },
+    },
+    title: {
+      description: "Title slot content",
+      control: "text",
+      table: {
+        category: "slots",
+        type: { summary: "VNode | string" },
+      },
+    },
+    default: {
+      description: "Description / body content",
+      control: "text",
+      table: {
+        category: "slots",
+        type: { summary: "VNode | string" },
+      },
+    },
+  },
+  args: {
+    variant: "info",
+    icon: "fas fa-info-circle",
+    iconSize: "l",
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `
+A contextual alert banner for displaying status messages, warnings, and informational content.
+
+Features:
+- 4 semantic variants with distinct color palettes
+- Optional icon with configurable size
+- Title + description layout via slots
+- Auto-collapsible content when it exceeds \`collapsedHeight\` (default: 100px)
+- Customizable trigger slot for expand/collapse control
+        `,
+      },
+    },
+  },
+} satisfies Meta<typeof VcBanner>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Default info banner with icon and description
+ */
+export const Default: Story = {
+  render: (args) => ({
+    components: { VcBanner },
+    setup() {
+      return { args };
+    },
+    template: `
+      <vc-banner v-bind="args">
+        <template #title>Heads up!</template>
+        You can add components to your app using the CLI.
+      </vc-banner>
+    `,
+  }),
+};
+
+/**
+ * All four semantic variants displayed together
+ */
+export const AllVariants: Story = {
+  render: () => ({
+    components: { VcBanner },
+    setup() {
+      const variants = [
+        { variant: "info", icon: "fas fa-info-circle", title: "Information", text: "This is an informational message for the user." },
+        { variant: "success", icon: "fas fa-check-circle", title: "Success", text: "The operation completed successfully." },
+        { variant: "warning", icon: "fas fa-exclamation-triangle", title: "Warning", text: "Please review before proceeding with this action." },
+        { variant: "danger", icon: "fas fa-exclamation-circle", title: "Error", text: "Something went wrong. Please try again later." },
+      ] as const;
+      return { variants };
+    },
+    template: `
+      <div class="tw-space-y-3 tw-max-w-lg">
+        <vc-banner
+          v-for="v in variants"
+          :key="v.variant"
+          :variant="v.variant"
+          :icon="v.icon"
+        >
+          <template #title>{{ v.title }}</template>
+          {{ v.text }}
+        </vc-banner>
+      </div>
+    `,
+  }),
+};
+
+/**
+ * Banner with title only (no description)
+ */
+export const TitleOnly: Story = {
+  args: {
+    variant: "warning",
+    icon: "fas fa-exclamation-triangle",
+  },
+  render: (args) => ({
+    components: { VcBanner },
+    setup() {
+      return { args };
+    },
+    template: `
+      <vc-banner v-bind="args" class="tw-max-w-lg">
+        <template #title>This action cannot be undone.</template>
+      </vc-banner>
+    `,
+  }),
+};
+
+/**
+ * Banner with description only (no title)
+ */
+export const DescriptionOnly: Story = {
+  args: {
+    variant: "success",
+    icon: "fas fa-check-circle",
+  },
+  render: (args) => ({
+    components: { VcBanner },
+    setup() {
+      return { args };
+    },
+    template: `
+      <vc-banner v-bind="args" class="tw-max-w-lg">
+        Your changes have been saved successfully.
+      </vc-banner>
+    `,
+  }),
+};
+
+/**
+ * Banner without icon — minimal style
+ */
+export const NoIcon: Story = {
+  args: {
+    variant: "info",
+    icon: undefined,
+  },
+  render: (args) => ({
+    components: { VcBanner },
+    setup() {
+      return { args };
+    },
+    template: `
+      <vc-banner v-bind="args" class="tw-max-w-lg">
+        <template #title>Note</template>
+        You can customize this banner by providing an icon prop.
+      </vc-banner>
+    `,
+  }),
+};
+
+/**
+ * Danger banner for decline/error reasons (matches ProductDetailsBase usage)
+ */
+export const DeclineReason: Story = {
+  args: {
+    variant: "danger",
+    icon: "material-error",
+    iconSize: "l",
+    iconVariant: "danger",
+  },
+  render: (args) => ({
+    components: { VcBanner },
+    setup() {
+      return { args };
+    },
+    template: `
+      <vc-banner v-bind="args" class="tw-max-w-lg">
+        <template #title>Decline Reason</template>
+        Product does not meet the quality standards. Please review the images and description, then resubmit for approval.
+      </vc-banner>
+    `,
+  }),
+};
+
+/**
+ * Long content that triggers the collapsible behavior
+ */
+export const CollapsibleContent: Story = {
+  args: {
+    variant: "danger",
+    icon: "fas fa-exclamation-circle",
+    collapsedHeight: 60,
+  },
+  render: (args) => ({
+    components: { VcBanner },
+    setup() {
+      return { args };
+    },
+    template: `
+      <vc-banner v-bind="args" class="tw-max-w-lg">
+        <template #title>Error Details</template>
+        <p>The following validation errors were found during processing:</p>
+        <ul class="tw-list-disc tw-pl-4 tw-mt-1 tw-space-y-1">
+          <li>Product SKU is required and must be unique</li>
+          <li>Price must be a positive number greater than zero</li>
+          <li>At least one product image is required for listing</li>
+          <li>Product description must be at least 50 characters long</li>
+          <li>Category selection is mandatory for marketplace placement</li>
+          <li>Weight and dimensions are required for shipping calculation</li>
+        </ul>
+      </vc-banner>
+    `,
+  }),
+};