feat(admin-ui): Implement react Card component

packages/admin-ui/src/lib/core/src/shared/components/card/card.component.scss

@@ -1,4 +1,4 @@
-:host {
+:host, .vdr-card {
     display: block;
     --card-padding: calc(var(--space-unit) * 3);
     container-type: inline-size;
@@ -37,10 +37,6 @@
 ::ng-deep vdr-card + vdr-card {
     margin-top: calc(var(--space-unit) * 2);
 }
-
-/*.contents {
-    display: grid;
-    gap: calc(var(--space-unit) * 4);
-    grid-template-columns: 1fr 1fr;
-}*/
-
+.vdr-card + .vdr-card {
+    margin-top: calc(var(--space-unit) * 2);
+}

packages/admin-ui/src/lib/react/src/components/react-form-input.component.ts

@@ -1,4 +1,4 @@
-import { Component, inject, OnInit } from '@angular/core';
+import { Component, inject, OnInit, ViewEncapsulation } from '@angular/core';
 import { FormControl } from '@angular/forms';
 import { CustomField, FormInputComponent, INPUT_COMPONENT_OPTIONS } from '@vendure/admin-ui/core';
 import { ReactComponentHostDirective } from '../react-component-host.directive';
@@ -7,6 +7,8 @@ import { ReactFormInputOptions } from '../types';
 @Component({
     selector: 'vdr-react-form-input-component',
     template: ` <div [vdrReactComponentHost]="reactComponent" [context]="context" [props]="context"></div> `,
+    styleUrls: ['./react-global-styles.scss'],
+    encapsulation: ViewEncapsulation.None,
     standalone: true,
     imports: [ReactComponentHostDirective],
 })

packages/admin-ui/src/lib/react/src/components/react-global-styles.scss

@@ -0,0 +1 @@
+@import "../../core/src/shared/components/card/card.component";

packages/admin-ui/src/lib/react/src/components/react-route.component.ts

@@ -1,4 +1,4 @@
-import { Component, inject, InjectionToken } from '@angular/core';
+import { Component, inject, InjectionToken, ViewEncapsulation } from '@angular/core';
 import { ROUTE_COMPONENT_OPTIONS, RouteComponent, SharedModule } from '@vendure/admin-ui/core';
 import { ReactComponentHostDirective } from '../react-component-host.directive';
 import { ReactRouteComponentOptions } from '../types';
@@ -14,6 +14,8 @@ export const REACT_ROUTE_COMPONENT_OPTIONS = new InjectionToken<ReactRouteCompon
             ><div [vdrReactComponentHost]="reactComponent" [props]="props"></div
         ></vdr-route-component>
     `,
+    styleUrls: ['./react-global-styles.scss'],
+    encapsulation: ViewEncapsulation.None,
     standalone: true,
     imports: [ReactComponentHostDirective, RouteComponent, SharedModule],
 })

packages/admin-ui/src/lib/react/src/public_api.ts

@@ -7,6 +7,7 @@ export * from './hooks/use-page-metadata';
 export * from './hooks/use-query';
 export * from './providers';
 export * from './react-component-host.directive';
+export * from './react-components/Card';
 export * from './react-components/Link';
 export * from './register-react-route-component';
 export * from './types';

packages/admin-ui/src/lib/react/src/react-components/Card.tsx

@@ -0,0 +1,35 @@
+import React, { PropsWithChildren } from 'react';
+
+/**
+ * @description
+ * A card component which can be used to group related content.
+ *
+ * @example
+ * ```ts
+ * import { Card } from '@vendure/admin-ui/react';
+ *
+ * export function MyComponent() {
+ *   return (
+ *     <Card title='My Title'>
+ *       <p>Some content</p>
+ *     </Card>
+ *   );
+ * }
+ * ```
+ *
+ * @docsCategory react-components
+ */
+export function Card(props: PropsWithChildren<{ title?: string; paddingX?: boolean }>) {
+    return (
+        <div className={'vdr-card'}>
+            <div className={`card-container ${props.paddingX !== false ? 'padding-x' : ''}`}>
+                {props.title && (
+                    <div className={'title-row'}>
+                        <div className="title">{props.title}</div>
+                    </div>
+                )}
+                <div className="contents">{props.children}</div>
+            </div>
+        </div>
+    );
+}