@openmfp/webcomponents 0.6.1 → 0.6.7

package/projects/ngx/declarative-ui/stories/dashboard.stories.ts

@@ -1,296 +0,0 @@
-import { Favorites } from '../../cards/favorites/favorites.component';
-import { ServiceStatusCard } from '../../cards/service-status/service-status-card.component';
-import { VisitedServiceCard } from '../../cards/visited-service-card/visited-service-card.component';
-import { Dashboard } from '../dashboard/dashboard/dashboard.component';
-import type { CardConfig, DashboardConfig } from '../dashboard/models';
-import { ButtonSettings } from '../models/ui-definition';
-import { CARDS, SECTIONS } from './dashboard.cards';
-import { TABLE_CARD_CONFIG, TABLE_RESOURCES } from './pods-table.config';
-import type { Meta, StoryObj } from '@storybook/angular';
-
-Dashboard.registerAngularComponents([
-  Favorites,
-  ServiceStatusCard,
-  VisitedServiceCard,
-]);
-
-// ---------------------------------------------------------------------------
-// Shared config
-// ---------------------------------------------------------------------------
-
-const CUSTOM_ACTIONS: ButtonSettings[] = [
-  {
-    action: 'download-config',
-    text: 'Download config',
-    icon: 'download',
-    design: 'Default',
-    tooltip: 'Download the current dashboard configuration',
-  },
-  {
-    action: 'switch-account',
-    text: 'Switch account',
-    icon: 'customer',
-    design: 'Default',
-    tooltip: 'Switch to a different account',
-  },
-];
-
-const SAMPLE_CONFIG: DashboardConfig = {
-  title: 'System Overview',
-  description:
-    'Monitor your platform metrics, traffic and service health in real time.',
-  backgroundImageUrl: '/background-lightblue.png',
-  customActions: CUSTOM_ACTIONS,
-  editable: true,
-};
-
-const AVAILABLE_CARDS: CardConfig[] = [
-  {
-    id: 'table-pods',
-    label: 'Pods Table',
-    w: 12,
-    h: 100,
-    component: 'mfp-wc-declarative-table-card',
-    componentInputs: {
-      config: TABLE_CARD_CONFIG,
-      resources: TABLE_RESOURCES,
-    },
-  },
-  {
-    id: 'whats-new',
-    label: "What's New",
-    w: 5,
-    h: 57,
-    component: 'mfp-whats-new',
-  },
-  {
-    id: 'favorites',
-    label: 'Favorites',
-    w: 4,
-    h: 21,
-    component: 'mfp-favorites',
-  },
-  {
-    id: 'service-status',
-    label: 'Service Status',
-    w: 4,
-    h: 30,
-    component: 'mfp-service-status-card',
-  },
-];
-
-const REGISTRY_SECTIONS = [
-  {
-    id: 'angular-cards',
-    title: 'Angular cards',
-    editable: true,
-    w: 12,
-  },
-  {
-    id: 'wc-cards',
-    title: 'Webcomponent cards',
-    editable: true,
-    w: 12,
-  },
-];
-
-const REGISTRY_CARDS: CardConfig[] = [
-  {
-    id: 'angular-visited-service',
-    w: 4,
-    h: 10,
-    sectionId: 'angular-cards',
-    component: 'mfp-visited-service-card',
-    componentInputs: {
-      serviceType: 'SAP HANA Cloud',
-      serviceName: 'orders-db',
-      serviceIcon: 'database',
-      serviceDescription: 'Registered Angular component',
-      path: '/hana/orders-db',
-    },
-  },
-  {
-    id: 'angular-favorites',
-    sectionId: 'angular-cards',
-    x: 0,
-    y: 0,
-    w: 5,
-    h: 20,
-    component: 'mfp-favorites',
-  },
-  {
-    id: 'webcomponent-table',
-    sectionId: 'wc-cards',
-    w: 12,
-    h: 50,
-    component: 'mfp-wc-declarative-table-card',
-    componentInputs: {
-      config: TABLE_CARD_CONFIG,
-      header: 'Pods rendered by web component',
-      headerTooltip:
-        'This card intentionally uses the existing custom-element render path.',
-      resources: TABLE_RESOURCES,
-    },
-  },
-];
-
-const ANGULAR_REGISTRY_AVAILABLE_CARDS: CardConfig[] = [
-  {
-    id: 'angular-service-status-template',
-    label: 'Angular Service Status',
-    w: 4,
-    h: 29,
-    component: 'mfp-service-status-card',
-  },
-  {
-    id: 'webcomponent-whats-new-template',
-    label: "Web Component What's New",
-    w: 5,
-    h: 56,
-    component: 'mfp-whats-new',
-  },
-];
-
-// ---------------------------------------------------------------------------
-// Meta
-// ---------------------------------------------------------------------------
-
-const meta: Meta<Dashboard> = {
-  title: 'Declarative UI / Dashboard',
-  component: Dashboard,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'fullscreen',
-  },
-  argTypes: {
-    config: { control: 'object' },
-    sections: { control: 'object' },
-    cards: { control: 'object' },
-    availableCards: { control: 'object' },
-    actionButtonClick: { action: 'actionButtonClick' },
-  },
-  args: {
-    config: SAMPLE_CONFIG,
-    sections: SECTIONS,
-    cards: CARDS,
-    availableCards: AVAILABLE_CARDS,
-  },
-  render: (args) => ({
-    props: args,
-    template: `<mfp-dashboard [config]="config" [sections]="sections" [cards]="cards" [availableCards]="availableCards" (actionButtonClick)="actionButtonClick($event)" />`,
-  }),
-};
-
-export default meta;
-type Story = StoryObj<Dashboard>;
-
-// ---------------------------------------------------------------------------
-// Stories
-// ---------------------------------------------------------------------------
-
-export const Default: Story = {};
-
-export const WithSubheader: Story = {
-  render: (args) => ({
-    props: args,
-    template: `
-      <mfp-dashboard [config]="config" [sections]="sections" [cards]="cards" [availableCards]="availableCards">
-        <div slot="dashboard-subheader" style="display:flex;align-items:center;gap:1.5rem;width:100%">
-          <img src="https://platform-mesh.io/main/pm_logo.svg" alt="Platform Mesh logo" style="width:48px;height:48px;object-fit:contain;flex-shrink:0" />
-          <div style="display:flex;gap:2rem;flex-wrap:wrap">
-            <div style="display:flex;flex-direction:column;gap:0.25rem">
-              <span style="font-size:0.75rem;color:var(--sapContent_LabelColor,#6a6d70)">Workspace Path</span>
-              <span style="font-size:0.875rem">root:orgs:sub:a1</span>
-            </div>
-            <div style="display:flex;flex-direction:column;gap:0.25rem">
-              <span style="font-size:0.75rem;color:var(--sapContent_LabelColor,#6a6d70)">Description</span>
-              <span style="font-size:0.875rem">Platform Mesh sub-organization</span>
-            </div>
-            <div style="display:flex;flex-direction:column;gap:0.25rem">
-              <span style="font-size:0.75rem;color:var(--sapContent_LabelColor,#6a6d70)">Display Name</span>
-              <span style="font-size:0.875rem">a1</span>
-            </div>
-          </div>
-        </div>
-      </mfp-dashboard>
-    `,
-  }),
-};
-
-export const CompactToolbar: Story = {
-  parameters: {
-    viewport: { defaultViewport: 'mobile1' },
-    chromatic: { viewports: [725] },
-    docs: {
-      description: {
-        story:
-          'Below 726 px the individual toolbar buttons collapse into a single menu2 burger button. Click it to see the custom actions and Edit View item separated by a MenuSeparator.',
-      },
-    },
-  },
-  render: (args) => ({
-    props: args,
-    template: `
-      <div style="width:725px;overflow:hidden">
-        <mfp-dashboard [config]="config" [sections]="sections" [cards]="cards" [availableCards]="availableCards">
-          <div slot="dashboard-subheader" style="display:flex;align-items:center;gap:1.5rem;width:100%">
-            <img src="https://platform-mesh.io/main/pm_logo.svg" alt="Platform Mesh logo" style="width:48px;height:48px;object-fit:contain;flex-shrink:0" />
-            <div style="display:flex;gap:2rem;flex-wrap:wrap">
-              <div style="display:flex;flex-direction:column;gap:0.25rem">
-                <span style="font-size:0.75rem;color:var(--sapContent_LabelColor,#6a6d70)">Workspace Path</span>
-                <span style="font-size:0.875rem">root:orgs:sub:a1</span>
-              </div>
-              <div style="display:flex;flex-direction:column;gap:0.25rem">
-                <span style="font-size:0.75rem;color:var(--sapContent_LabelColor,#6a6d70)">Description</span>
-                <span style="font-size:0.875rem">Platform Mesh sub-organization</span>
-              </div>
-              <div style="display:flex;flex-direction:column;gap:0.25rem">
-                <span style="font-size:0.75rem;color:var(--sapContent_LabelColor,#6a6d70)">Display Name</span>
-                <span style="font-size:0.875rem">a1</span>
-              </div>
-            </div>
-          </div>
-        </mfp-dashboard>
-      </div>
-    `,
-  }),
-};
-
-export const AngularComponentRegistry: Story = {
-  args: {
-    config: {
-      ...SAMPLE_CONFIG,
-      title: 'Angular Component Registry',
-      description:
-        'This story mixes registered Angular card components with existing web components.',
-    },
-    sections: REGISTRY_SECTIONS,
-    cards: REGISTRY_CARDS,
-    availableCards: ANGULAR_REGISTRY_AVAILABLE_CARDS,
-  },
-};
-
-export const CustomButtonSettings: Story = {
-  args: {
-    config: {
-      ...SAMPLE_CONFIG,
-      title: 'Custom Button Settings',
-      description:
-        'Edit View and Add Card buttons configured via buttonSettings — text labels, no icons.',
-      buttonsSettings: {
-        editViewButton: {
-          text: 'Edit View',
-          icon: '',
-          design: 'Default',
-          tooltip: '',
-        },
-        addCardButton: {
-          text: 'Add Card',
-          icon: '',
-          design: 'Emphasized',
-          tooltip: '',
-        },
-      },
-    },
-  },
-};

package/projects/ngx/declarative-ui/stories/declarative-form.stories.ts

@@ -1,149 +0,0 @@
-import type {
-  FormFieldChangeEvent,
-  FormFieldDefinition,
-  FormFieldErrors,
-} from '../form/models';
-import { CUSTOM_ELEMENTS_SCHEMA, Component, Input } from '@angular/core';
-import type { Meta, StoryObj } from '@storybook/angular';
-
-@Component({
-  selector: 'mfp-declarative-form-story',
-  template: `
-    <mfp-wc-declarative-form
-      [editMode]="editMode"
-      [fieldErrors]="fieldErrors"
-      [fields]="fields"
-      [initialValues]="initialValues"
-      (fieldChange)="handleFormChange($event)"
-    />
-  `,
-  schemas: [CUSTOM_ELEMENTS_SCHEMA],
-})
-class DeclarativeFormStory {
-  @Input() fields: FormFieldDefinition[] = [];
-  @Input() initialValues: Record<string, unknown> = {};
-  @Input() fieldErrors: FormFieldErrors = {};
-  @Input() editMode = false;
-
-  handleFormChange(event: CustomEvent<FormFieldChangeEvent>): void {
-    const { fieldProperty, value } = event.detail;
-    const field = this.fields.find((f) => f.name === fieldProperty);
-    const nextErrors = { ...this.fieldErrors };
-    nextErrors[fieldProperty] =
-      field?.required && !value
-        ? `${field.label ?? fieldProperty} is required`
-        : null;
-    this.fieldErrors = nextErrors;
-  }
-}
-
-// ---------------------------------------------------------------------------
-// Meta
-// ---------------------------------------------------------------------------
-
-const meta: Meta<DeclarativeFormStory> = {
-  title: 'Declarative UI / DeclarativeForm',
-  component: DeclarativeFormStory,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'centered',
-  },
-  argTypes: {
-    fields: { control: 'object' },
-    fieldErrors: { control: 'object' },
-    initialValues: { control: 'object' },
-    editMode: { control: 'boolean' },
-  },
-  args: {
-    fields: [
-      { name: 'metadata_name', label: 'Name' },
-      { name: 'metadata_namespace', label: 'Namespace' },
-    ],
-    fieldErrors: {},
-    initialValues: {},
-    editMode: false,
-  },
-};
-
-export default meta;
-type Story = StoryObj<DeclarativeFormStory>;
-
-// ---------------------------------------------------------------------------
-// Stories
-// ---------------------------------------------------------------------------
-
-/** Minimal setup: two plain text fields. */
-export const Basic: Story = {
-  args: {
-    fields: [
-      { name: 'metadata_name', label: 'Name' },
-      { name: 'metadata_namespace', label: 'Namespace' },
-    ] satisfies FormFieldDefinition[],
-  },
-};
-
-/**
- * Required markers are visual. This story validates in the host wrapper and
- * passes a string error back after the field is dirty.
- */
-export const WithHostValidation: Story = {
-  args: {
-    fields: [
-      {
-        name: 'metadata_name',
-        label: 'Name',
-        required: true,
-        validation: 'onChange',
-      },
-      { name: 'metadata_namespace', label: 'Namespace' },
-    ] satisfies FormFieldDefinition[],
-  },
-};
-
-/** Static select — options provided as a plain string array via `values`. */
-export const WithSelect: Story = {
-  args: {
-    fields: [
-      { name: 'metadata_name', label: 'Name', required: true },
-      {
-        name: 'spec_scope',
-        label: 'Scope',
-        required: true,
-        values: ['ClusterScoped', 'Namespaced'],
-      },
-    ] satisfies FormFieldDefinition[],
-  },
-};
-
-/**
- * Edit mode — form pre-populated with `initialValues`.
- * The `editMode` flag is available for consumers to conditionally
- * disable fields or adjust layout.
- */
-export const EditMode: Story = {
-  args: {
-    editMode: true,
-    initialValues: {
-      metadata_name: 'my-resource',
-      metadata_namespace: 'default',
-    },
-    fields: [
-      { name: 'metadata_name', label: 'Name', required: true },
-      { name: 'metadata_namespace', label: 'Namespace' },
-    ] satisfies FormFieldDefinition[],
-  },
-};
-
-/** All field types combined: text input and select. */
-export const AllFieldTypes: Story = {
-  args: {
-    fields: [
-      { name: 'metadata_name', label: 'Name', required: true },
-      {
-        name: 'spec_scope',
-        label: 'Scope',
-        values: ['ClusterScoped', 'Namespaced'],
-      },
-    ] satisfies FormFieldDefinition[],
-  },
-};