@vendure/admin-ui 2.1.0-next.3 → 2.1.0-next.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vendure/admin-ui",
-  "version": "2.1.0-next.3",
+  "version": "2.1.0-next.5",
   "license": "MIT",
   "dependencies": {
     "@angular/animations": "^16.2.2",
@@ -23,7 +23,7 @@
     "@ng-select/ng-select": "^11.1.1",
     "@ngx-translate/core": "^15.0.0",
     "@ngx-translate/http-loader": "^8.0.0",
-    "@vendure/common": "2.1.0-next.3",
+    "@vendure/common": "2.1.0-next.5",
     "@webcomponents/custom-elements": "^1.6.0",
     "apollo-angular": "^5.0.0",
     "apollo-upload-client": "^17.0.0",
@@ -71,17 +71,11 @@
       "esm": "./esm2022/catalog/vendure-admin-ui-catalog.mjs",
       "default": "./fesm2022/vendure-admin-ui-catalog.mjs"
     },
-    "./dashboard": {
-      "types": "./dashboard/index.d.ts",
-      "esm2022": "./esm2022/dashboard/vendure-admin-ui-dashboard.mjs",
-      "esm": "./esm2022/dashboard/vendure-admin-ui-dashboard.mjs",
-      "default": "./fesm2022/vendure-admin-ui-dashboard.mjs"
-    },
-    "./marketing": {
-      "types": "./marketing/index.d.ts",
-      "esm2022": "./esm2022/marketing/vendure-admin-ui-marketing.mjs",
-      "esm": "./esm2022/marketing/vendure-admin-ui-marketing.mjs",
-      "default": "./fesm2022/vendure-admin-ui-marketing.mjs"
+    "./customer": {
+      "types": "./customer/index.d.ts",
+      "esm2022": "./esm2022/customer/vendure-admin-ui-customer.mjs",
+      "esm": "./esm2022/customer/vendure-admin-ui-customer.mjs",
+      "default": "./fesm2022/vendure-admin-ui-customer.mjs"
     },
     "./core": {
       "types": "./core/index.d.ts",
@@ -89,18 +83,24 @@
       "esm": "./esm2022/core/vendure-admin-ui-core.mjs",
       "default": "./fesm2022/vendure-admin-ui-core.mjs"
     },
-    "./customer": {
-      "types": "./customer/index.d.ts",
-      "esm2022": "./esm2022/customer/vendure-admin-ui-customer.mjs",
-      "esm": "./esm2022/customer/vendure-admin-ui-customer.mjs",
-      "default": "./fesm2022/vendure-admin-ui-customer.mjs"
-    },
     "./login": {
       "types": "./login/index.d.ts",
       "esm2022": "./esm2022/login/vendure-admin-ui-login.mjs",
       "esm": "./esm2022/login/vendure-admin-ui-login.mjs",
       "default": "./fesm2022/vendure-admin-ui-login.mjs"
     },
+    "./marketing": {
+      "types": "./marketing/index.d.ts",
+      "esm2022": "./esm2022/marketing/vendure-admin-ui-marketing.mjs",
+      "esm": "./esm2022/marketing/vendure-admin-ui-marketing.mjs",
+      "default": "./fesm2022/vendure-admin-ui-marketing.mjs"
+    },
+    "./dashboard": {
+      "types": "./dashboard/index.d.ts",
+      "esm2022": "./esm2022/dashboard/vendure-admin-ui-dashboard.mjs",
+      "esm": "./esm2022/dashboard/vendure-admin-ui-dashboard.mjs",
+      "default": "./fesm2022/vendure-admin-ui-dashboard.mjs"
+    },
     "./order": {
       "types": "./order/index.d.ts",
       "esm2022": "./esm2022/order/vendure-admin-ui-order.mjs",

package/react/public_api.d.ts

@@ -3,13 +3,19 @@ export * from './components/react-custom-detail.component';
 export * from './components/react-form-input.component';
 export * from './components/react-route.component';
 export * from './directives/react-component-host.directive';
+export * from './react-components/ActionBar';
 export * from './react-components/Card';
+export * from './react-components/CdsIcon';
+export * from './react-components/FormField';
 export * from './react-components/Link';
+export * from './react-components/PageBlock';
+export * from './react-components/PageDetailLayout';
 export * from './react-hooks/use-detail-component-data';
 export * from './react-hooks/use-form-control';
 export * from './react-hooks/use-injector';
 export * from './react-hooks/use-page-metadata';
 export * from './react-hooks/use-query';
+export * from './react-hooks/use-route-params';
 export * from './register-react-custom-detail-component';
 export * from './register-react-data-table-component';
 export * from './register-react-form-input-component';

package/react/react-components/ActionBar.d.ts

@@ -0,0 +1,23 @@
+import React, { PropsWithChildren, ReactNode } from 'react';
+/**
+ * @description
+ * A container for the primary actions on a list or detail page
+ *
+ * @example
+ * ```ts
+ * import { ActionBar } from '@vendure/admin-ui/react';
+ *
+ * export function MyComponent() {
+ *   return (
+ *     <ActionBar leftContent={<div>Optional left content</div>}>
+ *       <button className='button primary'>Primary action</button>
+ *     </ActionBar>
+ *   );
+ * }
+ * ```
+ *
+ * @docsCategory react-components
+ */
+export declare function ActionBar(props: PropsWithChildren<{
+    leftContent?: ReactNode;
+}>): React.JSX.Element;

package/react/react-components/CdsIcon.d.ts

@@ -0,0 +1,45 @@
+import { IconShapeTuple } from '@cds/core/icon/interfaces/icon.interfaces';
+import React, { DOMAttributes } from 'react';
+type CustomElement<T> = Partial<T & DOMAttributes<T> & {
+    children: any;
+}>;
+export interface CdsIconProps {
+    shape: string;
+    size: string | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+    direction: 'up' | 'down' | 'left' | 'right';
+    flip: 'horizontal' | 'vertical';
+    solid: boolean;
+    status: 'info' | 'success' | 'warning' | 'danger';
+    inverse: boolean;
+    badge: 'info' | 'success' | 'warning' | 'danger';
+}
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            ['cds-icon']: CustomElement<CdsIconProps>;
+        }
+    }
+}
+export declare function registerCdsIcon(icon: IconShapeTuple): void;
+/**
+ * @description
+ * A React wrapper for the Clarity UI icon component.
+ *
+ * @example
+ * ```ts
+ * import { userIcon } from '@cds/core/icon';
+ * import { CdsIcon } from '@vendure/admin-ui/react';
+ *
+ * registerCdsIcon(userIcon);
+ * export function MyComponent() {
+ *    return <CdsIcon icon={userIcon} badge="warning" solid size="lg"></CdsIcon>;
+ * }
+ * ```
+ *
+ * @docsCategory react-components
+ */
+export declare function CdsIcon(props: {
+    icon: IconShapeTuple;
+    className?: string;
+} & Partial<CdsIconProps>): React.JSX.Element;
+export {};

package/react/react-components/FormField.d.ts

@@ -0,0 +1,27 @@
+import React, { PropsWithChildren } from 'react';
+/**
+ * @description
+ * A wrapper around form fields which provides a label, tooltip and error message.
+ *
+ * @example
+ * ```ts
+ * import { FormField } from '@vendure/admin-ui/react';
+ *
+ * export function MyReactComponent() {
+ *     return (
+ *        <FormField label="My field" tooltip="This is a tooltip" invalid errorMessage="This field is invalid">
+ *            <input type="text" />
+ *        </FormField>
+ *     );
+ * }
+ * ```
+ *
+ * @docsCategory react-components
+ */
+export declare function FormField(props: PropsWithChildren<{
+    for?: string;
+    label?: string;
+    tooltip?: string;
+    invalid?: boolean;
+    errorMessage?: string;
+}>): React.JSX.Element;

package/react/react-components/PageBlock.d.ts

@@ -0,0 +1,21 @@
+import React, { PropsWithChildren } from 'react';
+/**
+ * @description
+ * A container for page content which provides a consistent width and spacing.
+ *
+ * @example
+ * ```ts
+ * import { PageBlock } from '@vendure/admin-ui/react';
+ *
+ * export function MyComponent() {
+ *   return (
+ *     <PageBlock>
+ *       ...
+ *     </PageBlock>
+ *   );
+ * }
+ * ```
+ *
+ * @docsCategory react-components
+ */
+export declare function PageBlock(props: PropsWithChildren): React.JSX.Element;

package/react/react-components/PageDetailLayout.d.ts

@@ -0,0 +1,23 @@
+import React, { PropsWithChildren, ReactNode } from 'react';
+/**
+ * @description
+ * A responsive container for detail views with a main content area and an optional sidebar.
+ *
+ * @example
+ * ```ts
+ * import { PageDetailLayout } from '@vendure/admin-ui/react';
+ *
+ * export function MyComponent() {
+ *   return (
+ *     <PageDetailLayout sidebar={<div>Sidebar content</div>}>
+ *       <div>Main content</div>
+ *     </PageDetailLayout>
+ *   );
+ * }
+ * ```
+ *
+ * @docsCategory react-components
+ */
+export declare function PageDetailLayout(props: PropsWithChildren<{
+    sidebar?: ReactNode;
+}>): React.JSX.Element;

package/react/react-hooks/use-detail-component-data.d.ts

@@ -26,7 +26,7 @@
  *
  * @docsCategory react-hooks
  */
-export declare function useDetailComponentData(): {
-    entity: null;
+export declare function useDetailComponentData<T = any>(): {
+    entity: T | null;
     detailForm: import("@angular/forms").FormGroup<any>;
 };

package/react/react-hooks/use-route-params.d.ts

@@ -0,0 +1,22 @@
+/**
+ * @description
+ * Provides access to the current route params and query params.
+ *
+ * @example
+ * ```ts
+ * import { useRouteParams } from '\@vendure/admin-ui/react';
+ * import React from 'react';
+ *
+ * export function MyComponent() {
+ *     const { params, queryParams } = useRouteParams();
+ *     // ...
+ *     return <div>{ params.id }</div>;
+ * }
+ * ```
+ *
+ * @docsCategory react-hooks
+ */
+export declare function useRouteParams(): {
+    params: import("@angular/router").Params;
+    queryParams: import("@angular/router").Params;
+};

package/react/register-react-data-table-component.d.ts

@@ -72,6 +72,8 @@ export interface ReactDataTableComponentProps {
  *     }),
  * ];
  * ```
+ *
+ * @docsCategory react-extensions
  */
 export declare function registerReactDataTableComponent(config: ReactDataTableComponentConfig): {
     provide: import("@angular/core").InjectionToken<readonly (() => void | import("rxjs").Observable<unknown> | Promise<unknown>)[]>;

package/react/register-react-route-component.d.ts

@@ -3,6 +3,12 @@ import { ResultOf, TypedDocumentNode } from '@graphql-typed-document-node/core';
 import { RegisterRouteComponentOptions } from '@vendure/admin-ui/core';
 import { DocumentNode } from 'graphql/index';
 import { ElementType } from 'react';
+/**
+ * @description
+ * Configuration for a React-based route component.
+ *
+ * @docsCategory react-extensions
+ */
 type RegisterReactRouteComponentOptions<Entity extends {
     id: string;
     updatedAt?: string;