@wix/patterns 1.366.0 → 1.370.0

package/dist/docs/EntityPage.Header.md

@@ -0,0 +1,260 @@
+# EntityPage.Header
+
+**Category:** Base Components/Pages/Entity Page
+
+## Examples
+
+### Basic
+
+This example shows a basic usage of `EntityPage.Header`.
+
+```tsx
+import React from 'react';
+import {
+  EntityPage,
+  useEntityPage,
+  EntityPageState,
+  useEntity,
+} from '@wix/patterns';
+import { useForm } from '@wix/patterns/form';
+import { Card, Text } from '@wix/design-system';
+
+interface MyEntity {
+  id: string;
+  name?: string;
+  createdAt: Date;
+  updatedAt: Date;
+}
+
+function Basic() {
+  const form = useForm();
+  const state: EntityPageState<MyEntity> = useEntityPage<MyEntity>({
+    parentPageId: '',
+    form,
+    onSave: () =>
+      Promise.resolve({
+        updatedEntity: {
+          ...state.entity,
+        } as MyEntity,
+      }),
+    saveErrorToast: () => 'Failed to save',
+    fetch: () =>
+      Promise.resolve({
+        entity: {
+          id: 'id',
+          name: 'Entity Name',
+          createdAt: new window.Date(),
+          updatedAt: new window.Date(),
+        },
+      }),
+  });
+
+  const entity = useEntity(state);
+
+  return (
+    <EntityPage state={state}>
+      <EntityPage.Header title={{ text: entity?.name || 'New Entity' }} />
+      <EntityPage.MainContent>
+        <EntityPage.Content>
+          <EntityPage.Card minHeight="24px">
+            <Card.Header title="Card" />
+            <Card.Divider />
+            <Card.Content>
+              <Text>Simple card</Text>
+            </Card.Content>
+          </EntityPage.Card>
+        </EntityPage.Content>
+      </EntityPage.MainContent>
+    </EntityPage>
+  );
+}
+```
+
+---
+
+### More Actions
+
+This example displays a header with more actions CTA. To learn how to create a more actions menu, see [`MoreActions`](./?path=/story/features-actions-more-actions--more-actions).
+
+```tsx
+import React from 'react';
+import {
+  EntityPage,
+  useEntityPage,
+  EntityPageState,
+  useEntity,
+  MoreActions,
+} from '@wix/patterns';
+import { useForm } from '@wix/patterns/form';
+import { DummyEntity } from '@wix/ambassador-cairo-dummyservice-v1-dummy-entity/types';
+import { Card, Text } from '@wix/design-system';
+import { InvoiceSmall } from '@wix/wix-ui-icons-common';
+
+function Basic() {
+  const form = useForm();
+  const state: EntityPageState<DummyEntity> = useEntityPage<DummyEntity>({
+    parentPageId: '',
+    form,
+    onSave: () =>
+      Promise.resolve({
+        updatedEntity: {
+          ...state.entity,
+        },
+      }),
+    saveErrorToast: () => 'Failed to save',
+    fetch: () =>
+      Promise.resolve({
+        entity: {
+          id: 'id',
+          name: 'Entity Name',
+        },
+      }),
+  });
+
+  const entity = useEntity(state);
+
+  return (
+    <EntityPage state={state}>
+      <EntityPage.Header
+        moreActions={
+          <MoreActions
+            items={[
+              [
+                {
+                  text: 'Open Subscriptions',
+                  prefixIcon: <InvoiceSmall />,
+                  onClick: () => {
+                    console.log('Open Subscriptions');
+                  },
+                },
+              ],
+            ]}
+          />
+        }
+        title={{ text: entity?.name || 'New Entity' }}
+      />
+      <EntityPage.MainContent>
+        <EntityPage.Content>
+          <EntityPage.Card minHeight="24px">
+            <Card.Header title="Card" />
+            <Card.Divider />
+            <Card.Content>
+              <Text>Simple card</Text>
+            </Card.Content>
+          </EntityPage.Card>
+        </EntityPage.Content>
+      </EntityPage.MainContent>
+    </EntityPage>
+  );
+}
+```
+
+---
+
+### With Badges
+
+This example shows a header with badges.
+
+```tsx
+import React from 'react';
+import {
+  EntityPage,
+  useEntityPage,
+  EntityPageState,
+  useEntity,
+} from '@wix/patterns';
+import { useForm } from '@wix/patterns/form';
+import { DummyEntity } from '@wix/ambassador-cairo-dummyservice-v1-dummy-entity/types';
+import { Card, Text } from '@wix/design-system';
+import { FlagFilledSmall, CheckboxSmall } from '@wix/wix-ui-icons-common';
+
+function Badges() {
+  const form = useForm();
+  const state: EntityPageState<DummyEntity> = useEntityPage<DummyEntity>({
+    parentPageId: '',
+    form,
+    onSave: async () => {
+      const formValues = form.getValues();
+      console.log('formValues', formValues); // Save updated entity
+      return {
+        updatedEntity: {
+          id: 'id',
+          name: 'Entity Name',
+        },
+      };
+    },
+    saveErrorToast: () => 'Failed to save',
+    fetch: () =>
+      Promise.resolve({
+        entity: {
+          id: 'id',
+          name: 'Entity Name',
+        },
+      }),
+  });
+
+  const entity = useEntity<DummyEntity>(state);
+
+  return (
+    <EntityPage state={state}>
+      <EntityPage.Header
+        title={{
+          text: entity?.name || 'New Entity',
+          badges: [
+            {
+              text: 'Active',
+              skin: 'success',
+            },
+            {
+              text: 'High Priority',
+              skin: 'neutralDanger',
+            },
+          ],
+        }}
+      />
+      <EntityPage.MainContent>
+        <EntityPage.Content>
+          <EntityPage.Card minHeight="24px">
+            <Card.Header title="Card" />
+            <Card.Divider />
+            <Card.Content>
+              <Text>Entity page with badges next to the title</Text>
+            </Card.Content>
+          </EntityPage.Card>
+        </EntityPage.Content>
+      </EntityPage.MainContent>
+    </EntityPage>
+  );
+}
+```
+
+## API
+
+### Overview
+
+The header component for an [`EntityPage`](./?path=/story/base-components-pages-entity-page--entitypage). Renders the page title, optional subtitle, breadcrumbs, badges, and a more-actions menu. Place it as a direct child of ``.
+
+```tsx
+import { EntityPage } from '@wix/patterns/page';
+```
+
+### Composition
+
+```tsx
+
+  }
+    moreActions={}
+  />
+  ...
+
+```
+
+### Props
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `moreActions` | `MoreActionsElement` | No | - | <MoreActions /> |
+| `breadcrumbs` | `ReactElement<Breadcrumbs, string \| JSXElementConstructor<any>>` | No | - | Page breadcrumbs |
+| `title` | `{ text: string; badges?: (Pick<BadgeProps, "skin" \| "prefixIcon" \| "suffixIcon"> & { text: string; })[] \| undefined; }` | Yes | - | Page title text and optional badges |
+| `subtitle` | `PageSubTitleProps` | No | - | Page subtitle text |
+

package/dist/docs/EntityPage.MainContent.md

@@ -0,0 +1,24 @@
+# EntityPage.MainContent
+
+**Category:** Base Components/Pages/Entity Page
+
+## API
+
+### Overview
+
+A slot component for the main content area of an [`EntityPage`](./?path=/story/base-components-pages-entity-page--entitypage). Place it inside ``. This is where you render the primary form fields and cards.
+
+```tsx
+import { EntityPage } from '@wix/patterns/page';
+```
+
+### Usage
+
+This component acts as a container for [EntityPage.Card](./?path=/story/base-components-pages-entity-page--entitypage-card) child components and is displayed on the left side of the Page layout. For examples of how this component is used, please refer to the [EntityPage](./?path=/story/base-components-pages-entity-page--entitypage&tab=Examples) examples.
+
+### Props
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `dataHook` | `string` | No | - | Applies a data-hook HTML attribute that can be used in tests |
+

package/dist/docs/EntityPage.Slots.md

@@ -0,0 +1,75 @@
+# EntityPage.Slots
+
+**Category:** Base Components/Pages/Entity Page
+
+## Examples
+
+### Basic
+
+This example renders plugin widgets in the entity page slot by passing a `componentId` from Dev Center to `EntityPage.Slots`. Learn more about [Slots and Plugins](./?path=/story/features-enrich-slots-and-plugins--slots-and-plugins).
+
+```tsx
+import React from 'react';
+import { EntityPage, EntityPageState, useEntityPage } from '@wix/patterns';
+import { useForm } from '@wix/patterns/form';
+
+interface MyEntity {
+  id: string;
+  name?: string;
+  createdDate: Date;
+  updatedDate: Date;
+}
+
+function Basic() {
+  const form = useForm();
+  const state: EntityPageState<MyEntity> = useEntityPage<MyEntity>({
+    parentPageId: '',
+    form,
+    onSave: () =>
+      Promise.resolve({
+        updatedEntity: {
+          ...state.entity,
+        } as MyEntity,
+      }),
+    saveErrorToast: (e) => 'Failed to save',
+    fetch: () =>
+      Promise.resolve({
+        entity: {
+          id: 'id',
+          name: 'name',
+          createdDate: new window.Date(),
+          updatedDate: new window.Date(),
+        },
+      }),
+  });
+
+  return (
+    <EntityPage state={state}>
+      <EntityPage.Header title={{ text: 'Entity Name' }} />
+      <EntityPage.Content>
+        <EntityPage.MainContent>
+          <EntityPage.Slots containerId="cd910877-1bb2-445e-822a-aa04a342c2f5" />
+        </EntityPage.MainContent>
+      </EntityPage.Content>
+    </EntityPage>
+  );
+}
+```
+
+## API
+
+### Overview
+
+A slot container for rendering TPA plugin widgets inside an [`EntityPage`](./?path=/story/base-components-pages-entity-page--entitypage). Pass a `containerId` from your Dev Center app to render third-party plugins in the entity page layout. Learn more about [Slots and Plugins](./?path=/story/features-enrich-slots-and-plugins--slots-and-plugins).
+
+```tsx
+import { EntityPage } from '@wix/patterns/page';
+```
+
+### Props
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `containerId` | `string` | Yes | - | An id of the container defined in the installed on a site application that contains TPA's actions. |
+| `dataHook` | `string` | No | - | Applies a data-hook HTML attribute that can be used in tests. |
+