@wix/patterns 1.459.0 → 1.460.0

package/dist/docs/EntityPage/delete-action.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import {
+  EntityPage,
+  EntityPageState,
+  useEntity,
+  useEntityPage,
+} from '@wix/patterns';
+import { useForm } from '@wix/patterns/form';
+import { Box, Card, Text } from '@wix/design-system';
+
+interface MyEntity {
+  id: string;
+  name?: string;
+  createdAt: Date;
+  updatedAt: Date;
+}
+
+interface FormValues {
+  name?: string;
+}
+
+function Delete() {
+  const form = useForm<FormValues>();
+  const state: EntityPageState<MyEntity, FormValues> = useEntityPage<
+    MyEntity,
+    FormValues
+  >({
+    parentPageId: '',
+    form,
+    onSave: async () => {
+      const formValues = form.getValues();
+
+      return Promise.resolve({
+        updatedEntity: {
+          ...state.entity,
+          ...formValues,
+        } as MyEntity,
+      });
+    },
+    fetch: () =>
+      Promise.resolve({
+        entity: {
+          id: 'entity-1',
+          name: 'Entity Name',
+          createdAt: new window.Date(),
+          updatedAt: new window.Date(),
+        },
+      }),
+    deleteAction: {
+      onDelete: async (entity) => {
+        console.log('Deleted entity:', entity.id);
+      },
+      itemName: (entity) => entity.name ?? 'item',
+    },
+  });
+
+  const entity = useEntity<MyEntity, FormValues>(state);
+
+  return (
+    <EntityPage state={state}>
+      <EntityPage.Header title={{ text: entity?.name ?? '' }} />
+      <EntityPage.Content>
+        <EntityPage.MainContent>
+          <EntityPage.Card minHeight="24px">
+            <Card.Header title="Name Card" />
+            <Card.Divider />
+            <Card.Content>
+              <Box gap="SP2" direction="vertical">
+                <Text>{entity?.name}</Text>
+              </Box>
+            </Card.Content>
+          </EntityPage.Card>
+        </EntityPage.MainContent>
+      </EntityPage.Content>
+    </EntityPage>
+  );
+}

package/dist/docs/EntityPage/delete-error-handling.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import {
+  EntityPage,
+  EntityPageState,
+  useEntity,
+  useEntityPage,
+} from '@wix/patterns';
+import { useForm } from '@wix/patterns/form';
+import { Box, Card, Text } from '@wix/design-system';
+
+interface MyEntity {
+  id: string;
+  name?: string;
+  createdAt: Date;
+  updatedAt: Date;
+}
+
+function DeleteError() {
+  const form = useForm();
+  const state: EntityPageState<MyEntity> = useEntityPage<MyEntity>({
+    parentPageId: '',
+    form,
+    onSave: async () =>
+      Promise.resolve({
+        updatedEntity: { ...state.entity } as MyEntity,
+      }),
+    fetch: () =>
+      Promise.resolve({
+        entity: {
+          id: 'entity-1',
+          name: 'Entity Name',
+          createdAt: new window.Date(),
+          updatedAt: new window.Date(),
+        },
+      }),
+    deleteAction: {
+      onDelete: () => Promise.reject(new Error('Something went wrong')),
+      errorToast: (e, { retry }) => ({
+        message: 'Failed to delete entity',
+        action: { text: 'Retry', onClick: retry },
+      }),
+    },
+  });
+
+  const entity = useEntity<MyEntity>(state);
+
+  return (
+    <EntityPage state={state}>
+      <EntityPage.Header title={{ text: entity?.name ?? '' }} />
+      <EntityPage.Content>
+        <EntityPage.MainContent>
+          <EntityPage.Card minHeight="24px">
+            <Card.Header title="Card" />
+            <Card.Divider />
+            <Card.Content>
+              <Box gap="SP2" direction="vertical">
+                <Text>Click the delete icon to see the error toast.</Text>
+              </Box>
+            </Card.Content>
+          </EntityPage.Card>
+        </EntityPage.MainContent>
+      </EntityPage.Content>
+    </EntityPage>
+  );
+}

package/dist/docs/EntityPage/demo.tsx

@@ -0,0 +1,212 @@
+import React from 'react';
+import {
+  CustomFieldsWidget,
+  EntityPage,
+  EntityPageState,
+  MoreActions,
+  TagsWidget,
+  useEntity,
+  useEntityPage,
+  useEntityPageContext,
+} from '@wix/patterns';
+import { useController, useForm } from '@wix/patterns/form';
+import { ExtendedFields, Tags } from '@wix/patterns/core';
+import {
+  Box,
+  Card,
+  FormField,
+  Input,
+  Text,
+  Checkbox,
+} from '@wix/design-system';
+import { InvoiceSmall } from '@wix/wix-ui-icons-common';
+
+interface MyEntity {
+  id?: string;
+  name?: string;
+  booleanField?: boolean;
+  createdDate?: Date;
+  updatedDate?: Date;
+  extendedFields?: ExtendedFields;
+  tags?: Tags;
+}
+
+interface FormFields {
+  name?: string;
+  booleanField?: boolean;
+}
+
+function FullExample() {
+  const form = useForm<FormFields>();
+  const state: EntityPageState<MyEntity> = useEntityPage<MyEntity, FormFields>({
+    parentPageId: 'YOUR_PARENT_PAGE_ID',
+    form,
+    onSave: ({ widgetsFormData: { extendedFields, tags } }) =>
+      new Promise((res) => {
+        window.setTimeout(() => {
+          const formValues = form.getValues();
+
+          const updatedEntity: MyEntity = {
+            ...state.entity,
+            ...formValues,
+            extendedFields,
+            tags,
+          };
+
+          console.log('updated entity:', updatedEntity);
+
+          if (state.entity?.id) {
+            console.log('update request');
+          } else {
+            console.log('create request');
+          }
+
+          res({ updatedEntity });
+        }, 1000);
+      }),
+    saveErrorToast: (e) => 'Failed to save',
+    fetch: () =>
+      new Promise((res) => {
+        window.setTimeout(
+          () =>
+            res({
+              entity: {
+                id: 'id',
+                name: 'Entity Name',
+                booleanField: true,
+                createdDate: new window.Date(),
+                updatedDate: new window.Date(),
+                extendedFields: {
+                  namespaces: {
+                    _user_fields: {
+                      datetime: '2023-05-31T21:00:00.000Z',
+                      date: '1990-06-13',
+                      shortText: 'Hello world!',
+                      longText: 'Hello world! '.repeat(15),
+                      checkbox: true,
+                      decimal: 3.14,
+                      integer: 43,
+                      url: 'https://www.wix.com/',
+                    },
+                  },
+                },
+                tags: { privateTags: { tagIds: [] } },
+              },
+            }),
+          500,
+        );
+      }),
+  });
+
+  // Usually we will extract this component to a separate file
+  const MainContent = () => {
+    const pageState = useEntityPageContext<MyEntity, FormFields>();
+
+    const name = useController({
+      name: 'name',
+      control: pageState.form.control,
+      defaultValue: pageState.entity?.name,
+      rules: { required: { value: true, message: 'This field is required!' } },
+    });
+
+    const booleanField = useController({
+      name: 'booleanField',
+      control: pageState.form.control,
+      defaultValue: pageState.entity?.booleanField,
+    });
+
+    return (
+      <Card.Content>
+        <Box gap="SP2" direction="vertical">
+          <FormField label="Name">
+            <Input
+              dataHook="name-input"
+              status={name.fieldState.invalid ? 'error' : undefined}
+              statusMessage={name.fieldState.error?.message}
+              inputRef={name.field.ref}
+              value={name.field.value}
+              onChange={name.field.onChange}
+              onBlur={name.field.onBlur}
+            />
+          </FormField>
+          <FormField label="Boolean Field">
+            <Checkbox
+              dataHook="boolean-field-checkbox"
+              checked={booleanField.field.value}
+              onChange={booleanField.field.onChange}
+            >
+              Use boolean field
+            </Checkbox>
+          </FormField>
+        </Box>
+      </Card.Content>
+    );
+  };
+
+  const entity = useEntity<MyEntity, FormFields>(state);
+
+  return (
+    <EntityPage state={state}>
+      <EntityPage.Header
+        title={{ text: entity?.name ?? '' }}
+        subtitle={{
+          text: `id: ${entity?.id}`,
+          learnMore: {
+            url: 'https://www.wix.com/',
+            label: 'My custom learn more', // Defaults to "Learn more"
+          },
+        }}
+        moreActions={
+          <MoreActions
+            containerId="cd910877-1bb2-445e-822a-aa04a342c2f5"
+            items={[
+              [
+                {
+                  biName: 'open-subscriptions',
+                  text: 'Open Subscriptions',
+                  prefixIcon: <InvoiceSmall />,
+                  onClick: () => {
+                    console.log('Open Subscriptions');
+                  },
+                },
+              ],
+            ]}
+          />
+        }
+      />
+      <EntityPage.Content>
+        <EntityPage.MainContent>
+          <EntityPage.Card minHeight="24px">
+            <Card.Header title="Main Content Card" />
+            <Card.Divider />
+            <MainContent />
+          </EntityPage.Card>
+          <CustomFieldsWidget
+            fqdn="wix.patterns.dummyservice.v1.dummy_entity"
+            dataHook="demo-custom-fields-widget"
+            extendedFields={entity?.extendedFields}
+          />
+        </EntityPage.MainContent>
+        <EntityPage.AdditionalContent>
+          <EntityPage.Card minHeight="24px">
+            <Card.Header title="Side Content Card" />
+            <Card.Divider />
+            <Card.Content>
+              <Box gap="SP2" direction="vertical">
+                <Text>Stretched to 4/12 of available space.</Text>
+              </Box>
+            </Card.Content>
+          </EntityPage.Card>
+          <EntityPage.Slots containerId="cd910877-1bb2-445e-822a-aa04a342c2f5" />
+          <TagsWidget
+            fqdn="wix.patterns.dummyservice.v1.dummy_entity"
+            dataHook="demo-tags-widget"
+            entityTypeName="My Entity"
+            entityId={entity?.id}
+            initialTags={entity?.tags}
+          />
+        </EntityPage.AdditionalContent>
+      </EntityPage.Content>
+    </EntityPage>
+  );
+}

package/dist/docs/EntityPage/error-on-fetch.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import {
+  EntityPage,
+  EntityPageState,
+  useEntity,
+  useEntityPage,
+} from '@wix/patterns';
+import { useForm } from '@wix/patterns/form';
+import { Box, Card, Text } from '@wix/design-system';
+
+interface MyEntity {
+  id: string;
+  name?: string;
+  createdAt: Date;
+  updatedAt: Date;
+}
+
+function FetchError() {
+  const form = useForm();
+  const state: EntityPageState<MyEntity> = useEntityPage<MyEntity>({
+    parentPageId: '',
+    form,
+    onSave: async () => {
+      return Promise.resolve({
+        updatedEntity: {
+          ...state.entity,
+        } as MyEntity,
+      });
+    },
+    saveErrorToast: (e) => 'Failed to save',
+    fetch: () =>
+      new Promise((_, reject) =>
+        window.setTimeout(() => reject(new Error('Something went wrong')), 1000),
+      ),
+  });
+
+  const entity = useEntity<MyEntity>(state);
+
+  return (
+    <EntityPage state={state}>
+      <EntityPage.Header title={{ text: entity?.name ?? '' }} />
+      <EntityPage.Content>
+        <EntityPage.MainContent>
+          <EntityPage.Card minHeight="24px">
+            <Card.Header title="Main Content Card" />
+            <Card.Divider />
+            <Card.Content>
+              <Box gap="SP2" direction="vertical">
+                <Text>Stretched to 8/12 of available space.</Text>
+              </Box>
+            </Card.Content>
+          </EntityPage.Card>
+        </EntityPage.MainContent>
+        <EntityPage.AdditionalContent>
+          <EntityPage.Card minHeight="24px">
+            <Card.Header title="Side Content Card" />
+            <Card.Divider />
+            <Card.Content>
+              <Box gap="SP2" direction="vertical">
+                <Text>Stretched to 4/12 of available space.</Text>
+              </Box>
+            </Card.Content>
+          </EntityPage.Card>
+        </EntityPage.AdditionalContent>
+      </EntityPage.Content>
+    </EntityPage>
+  );
+}

package/dist/docs/EntityPage/error-on-save.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import {
+  EntityPage,
+  EntityPageState,
+  useEntity,
+  useEntityPage,
+} from '@wix/patterns';
+import { useForm } from '@wix/patterns/form';
+import { Box, Card, Text } from '@wix/design-system';
+
+interface MyEntity {
+  id: string;
+  name?: string;
+  createdAt: Date;
+  updatedAt: Date;
+}
+
+function SaveError() {
+  const form = useForm();
+  const state: EntityPageState<MyEntity> = useEntityPage<MyEntity>({
+    parentPageId: '',
+    form,
+    onSave: () => Promise.reject(new Error('Something went wrong')),
+    saveErrorToast: (e, { retry }) => ({
+      message: 'oops.. unknown error',
+      action: { text: 'Retry', onClick: retry },
+    }),
+    fetch: () =>
+      Promise.resolve({
+        entity: {
+          id: 'id',
+          name: 'Entity Name',
+          createdAt: new window.Date(),
+          updatedAt: new window.Date(),
+        },
+      }),
+  });
+
+  const entity = useEntity<MyEntity>(state);
+
+  return (
+    <EntityPage state={state}>
+      <EntityPage.Header title={{ text: entity?.name ?? '' }} />
+      <EntityPage.Content>
+        <EntityPage.MainContent>
+          <EntityPage.Card minHeight="24px">
+            <Card.Header title="Card" />
+            <Card.Divider />
+            <Card.Content>
+              <Box gap="SP2" direction="vertical">
+                <Text>I'm a card</Text>
+              </Box>
+            </Card.Content>
+          </EntityPage.Card>
+        </EntityPage.MainContent>
+      </EntityPage.Content>
+    </EntityPage>
+  );
+}

package/dist/docs/EntityPage/input-initialization-with-controller.tsx

@@ -0,0 +1,96 @@
+import React from 'react';
+import {
+  EntityPage,
+  EntityPageState,
+  useEntity,
+  useEntityPage,
+} from '@wix/patterns';
+import { Controller, useController, useForm } from '@wix/patterns/form';
+import { Box, Card, FormField, Input } from '@wix/design-system';
+import { CardContainerProps } from '../../../dist/types/components/CardContainer';
+
+interface MyEntity {
+  id: string;
+  name?: string;
+  createdAt: Date;
+  updatedAt: Date;
+}
+
+interface FormValues {
+  name?: string;
+}
+
+function ControllerExample() {
+  const form = useForm<FormValues>();
+  const state: EntityPageState<MyEntity, FormValues> = useEntityPage<
+    MyEntity,
+    FormValues
+  >({
+    parentPageId: '',
+    form,
+    onSave: async () => {
+      const formValues = form.getValues();
+
+      return Promise.resolve({
+        updatedEntity: {
+          ...state.entity,
+          ...formValues,
+        } as MyEntity,
+      });
+    },
+    saveErrorToast: (e) => 'Failed to save',
+    fetch: () =>
+      Promise.resolve({
+        entity: {
+          id: 'id',
+          name: 'Entity Name',
+          createdAt: new window.Date(),
+          updatedAt: new window.Date(),
+        },
+      }),
+  });
+
+  const entity = useEntity<MyEntity, FormValues>(state);
+
+  return (
+    <EntityPage state={state}>
+      <EntityPage.Header title={{ text: entity?.name ?? '' }} />
+      <EntityPage.Content>
+        <EntityPage.MainContent>
+          <EntityPage.Card minHeight="24px">
+            <Card.Header title="Name Card" />
+            <Card.Divider />
+            <Card.Content>
+              <Controller
+                control={form.control}
+                name="name"
+                defaultValue={entity?.name}
+                rules={{
+                  required: { value: true, message: 'This field is required!' },
+                }}
+                render={({
+                  field: { onChange, onBlur, value, ref },
+                  fieldState: { invalid, error },
+                }) => (
+                  <FormField
+                    label="Name"
+                    status={invalid ? 'error' : undefined}
+                    statusMessage={error?.message}
+                  >
+                    <Input
+                      dataHook="name-input"
+                      inputRef={ref}
+                      value={value}
+                      onChange={onChange}
+                      onBlur={onBlur}
+                    />
+                  </FormField>
+                )}
+              />
+            </Card.Content>
+          </EntityPage.Card>
+        </EntityPage.MainContent>
+      </EntityPage.Content>
+    </EntityPage>
+  );
+}

package/dist/docs/EntityPage/input-initialization-with-usecontroller.tsx

@@ -0,0 +1,99 @@
+import React from 'react';
+import {
+  EntityPage,
+  EntityPageState,
+  useEntity,
+  useEntityPage,
+  useEntityPageContext,
+} from '@wix/patterns';
+import { useController, useForm } from '@wix/patterns/form';
+import { Box, Card, FormField, Input } from '@wix/design-system';
+import { CardContainerProps } from '../../../dist/types/components/CardContainer';
+
+interface MyEntity {
+  id: string;
+  name?: string;
+  createdAt: Date;
+  updatedAt: Date;
+}
+
+interface FormValues {
+  name?: string;
+}
+
+function useControllerExample() {
+  const form = useForm<FormValues>();
+  const state: EntityPageState<MyEntity, FormValues> = useEntityPage<
+    MyEntity,
+    FormValues
+  >({
+    parentPageId: '',
+    form,
+    onSave: async () => {
+      const formValues = form.getValues();
+
+      return Promise.resolve({
+        updatedEntity: {
+          ...state.entity,
+          ...formValues,
+        } as MyEntity,
+      });
+    },
+    saveErrorToast: (e) => 'Failed to save',
+    fetch: () =>
+      Promise.resolve({
+        entity: {
+          id: 'id',
+          name: 'Entity Name',
+          createdAt: new window.Date(),
+          updatedAt: new window.Date(),
+        },
+      }),
+  });
+
+  // Usually we will extract this component to a separate file
+  const CardContent = () => {
+    const pageState = useEntityPageContext<MyEntity, FormValues>();
+    const name = useController({
+      name: 'name',
+      control: pageState.form.control,
+      defaultValue: pageState.entity?.name,
+      rules: {
+        required: { value: true, message: 'This field is required!' },
+      },
+    });
+
+    return (
+      <Box gap="SP2" direction="vertical">
+        <FormField label="Name">
+          <Input
+            dataHook="name-input"
+            inputRef={name.field.ref}
+            value={name.field.value}
+            onChange={name.field.onChange}
+            onBlur={name.field.onBlur}
+          />
+        </FormField>
+      </Box>
+    );
+  };
+
+  const entity = useEntity<MyEntity, FormValues>(state);
+
+  return (
+    <EntityPage state={state}>
+      <EntityPage.Header title={{ text: entity?.name ?? '' }} />
+      <EntityPage.Content>
+        <EntityPage.MainContent>
+          <EntityPage.Card minHeight="24px">
+            <Card.Header title="Name Card" />
+            <Card.Divider />
+            <Card.Content>
+              <CardContent />
+            </Card.Content>
+          </EntityPage.Card>
+        </EntityPage.MainContent>
+      </EntityPage.Content>
+    </EntityPage>
+  );
+}