chore(dashboard): Add fixes to login and widget docs

packages/dashboard/src/lib/components/login/login-form.tsx

@@ -60,18 +60,19 @@ export function LoginForm({ className, onFormSubmit, isVerifying, loginError, ..
                             className="flex flex-col items-center gap-6"
                             onSubmit={form.handleSubmit(data => onFormSubmit?.(data.username, data.password))}
                         >
-                            <div className="flex flex-col items-center text-center gap-2">
-                                <h1 className="text-2xl font-semibold tracking-tight">
-                                    <Trans>Welcome to Vendure</Trans>
-                                </h1>
-                                <p className="text-sm text-muted-foreground">
-                                    <Trans>Sign in to access the admin dashboard</Trans>
-                                </p>
-                            </div>
-                            {loginExtensions.beforeForm && (
+                            {loginExtensions.beforeForm ? (
                                 <div className="w-full">
                                     <loginExtensions.beforeForm.component />
                                 </div>
+                            ) : (
+                                <div className="flex flex-col items-center text-center gap-2">
+                                    <h1 className="text-2xl font-semibold tracking-tight">
+                                        <Trans>Welcome to Vendure</Trans>
+                                    </h1>
+                                    <p className="text-sm text-muted-foreground">
+                                        <Trans>Sign in to access the admin dashboard</Trans>
+                                    </p>
+                                </div>
                             )}
                             <div className="grid gap-4 w-full">
                                 <FormField

packages/dashboard/src/lib/framework/dashboard-widget/base-widget.tsx

@@ -1,8 +1,7 @@
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/vdb/components/ui/card.js';
 import { DashboardBaseWidgetProps } from '@/vdb/framework/extension-api/types/index.js';
-import { Trans } from '@lingui/react/macro';
-import { useLingui } from '@lingui/react/macro';
 import { cn } from '@/vdb/lib/utils.js';
+import { Trans, useLingui } from '@lingui/react/macro';
 import { createContext, useContext, useEffect, useRef, useState } from 'react';
 
 type WidgetDimensions = {
@@ -21,14 +20,24 @@ export const useWidgetDimensions = () => {
     return context;
 };
 
+/**
+ * @description
+ * A wrapper component that should be used for any custom Insights page widgets.
+ * This ensures that your custom widget has all the basic functionality needed to be
+ * correctly rendered on the Insights page.
+ *
+ * @docsCategory extensions-api
+ * @docsPage widgets
+ * @since 3.3.0
+ */
 export function DashboardBaseWidget({
-                                        id,
-                                        config,
-                                        children,
-                                        title,
-                                        description,
-                                        actions,
-                                    }: DashboardBaseWidgetProps) {
+    id,
+    config,
+    children,
+    title,
+    description,
+    actions,
+}: DashboardBaseWidgetProps) {
     const headerRef = useRef<HTMLDivElement>(null);
     const wrapperRef = useRef<HTMLDivElement>(null);
     const contentRef = useRef<HTMLDivElement>(null);

packages/dashboard/src/lib/framework/dashboard-widget/widget-filters-context.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useLingui } from '@lingui/react/macro';
-import { createContext, useContext, PropsWithChildren } from 'react';
+import { createContext, PropsWithChildren, useContext } from 'react';
 
 export interface DefinedDateRange {
     from: Date;
@@ -14,17 +14,18 @@ export interface WidgetFilters {
 
 const WidgetFiltersContext = createContext<WidgetFilters | undefined>(undefined);
 
-export function WidgetFiltersProvider({
-    children,
-    filters
-}: PropsWithChildren<{ filters: WidgetFilters }>) {
-    return (
-        <WidgetFiltersContext.Provider value={filters}>
-            {children}
-        </WidgetFiltersContext.Provider>
-    );
+export function WidgetFiltersProvider({ children, filters }: PropsWithChildren<{ filters: WidgetFilters }>) {
+    return <WidgetFiltersContext.Provider value={filters}>{children}</WidgetFiltersContext.Provider>;
 }
 
+/**
+ * @description
+ * Exposes a context object for use in building Insights page widgets.
+ *
+ * @docsCategory hooks
+ * @docsPage useWidgetFilters
+ * @since 3.5.0
+ */
 export function useWidgetFilters() {
     const { t } = useLingui();
     const context = useContext(WidgetFiltersContext);
@@ -32,4 +33,4 @@ export function useWidgetFilters() {
         throw new Error(t`useWidgetFilters must be used within a WidgetFiltersProvider`);
     }
     return context;
-}
+}