@wix/patterns 1.255.0 → 1.256.0

package/src/components/FormPage/FormPage.tsx

@@ -0,0 +1,24 @@
+import { Page, PageProps } from '@wix/design-system';
+import React, { Children, ReactNode } from 'react';
+import { FormPageProvider } from './FormPageProvider';
+import { FormPageState } from '@wix/bex-core';
+
+export interface FormPageProps extends PageProps {
+  state?: FormPageState;
+  children: ReactNode;
+}
+
+const FormPageContent = ({ children, ...rest }: FormPageProps) => {
+  // WSR <Page /> expects a flattened children array
+  const childrenArr = Children.toArray(children);
+
+  return <Page {...rest}>{childrenArr}</Page>;
+};
+
+export function FormPage({ state, ...rest }: FormPageProps) {
+  return (
+    <FormPageProvider state={state}>
+      <FormPageContent {...rest} />
+    </FormPageProvider>
+  );
+}

package/src/components/FormPage/FormPageActionsBar.tsx

@@ -0,0 +1,59 @@
+import { Box, Button, Loader } from '@wix/design-system';
+import React from 'react';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
+import { useFormPageContext } from '../../providers';
+import { observer } from 'mobx-react-lite';
+import { MoreActionsElement } from '../MoreActions';
+import { ActionsBarConfig, ctaKeys } from '@wix/bex-core';
+import { useIsMobile } from '../../hooks/useIsMobile';
+
+export interface FormPageActionsBarProps {
+  moreActions?: MoreActionsElement;
+  onCancel?: () => void;
+  onSave?: () => void;
+  actionsBarConfig?: ActionsBarConfig;
+}
+
+export function _FormPageActionsBar({
+  moreActions,
+  onCancel,
+  onSave,
+  actionsBarConfig,
+}: FormPageActionsBarProps) {
+  const { translate: t, initTask } = useWixPatternsContainer();
+  const state = useFormPageContext();
+  const isMobile = useIsMobile();
+
+  if (!initTask.status.isSuccess) {
+    return null;
+  }
+
+  return (
+    <Box gap="SP2">
+      {isMobile ? undefined : moreActions}
+      <Button
+        priority="secondary"
+        fullWidth={isMobile}
+        size={isMobile ? 'small' : 'medium'}
+        dataHook="form-page-cancel-btn"
+        onClick={onCancel}
+      >
+        {t('cairo.entityPage.header.cancel.CTA')}
+      </Button>
+      <Button
+        fullWidth={isMobile}
+        size={isMobile ? 'small' : 'medium'}
+        dataHook="form-page-save-btn"
+        onClick={onSave}
+      >
+        {state.submitTask.status.isLoading ? (
+          <Loader size="tiny" />
+        ) : (
+          t(ctaKeys[actionsBarConfig?.saveCta?.text ?? 'SAVE'])
+        )}
+      </Button>
+    </Box>
+  );
+}
+
+export const FormPageActionsBar = observer(_FormPageActionsBar);

package/src/components/FormPage/FormPageProvider.tsx

@@ -0,0 +1,37 @@
+import React, { ReactNode, useEffect, useState } from 'react';
+import { FormPageContextProvider } from '@wix/bex-core/react';
+import { PageWrapperBase } from '../PageWrapper';
+import { FormPageState } from '@wix/bex-core';
+import { FieldValues, useForm } from 'react-hook-form';
+
+export function FormPageProvider<V extends FieldValues = FieldValues>({
+  children,
+  state,
+}: {
+  children: ReactNode;
+  state?: FormPageState<V>;
+}) {
+  const newState = useForm<V>();
+  const [formPageState] = useState(
+    () => state ?? new FormPageState({ form: newState }),
+  );
+
+  const {
+    form: {
+      formState: { isSubmitSuccessful, isDirty },
+    },
+  } = formPageState;
+
+  /* formState is wrapped with a Proxy to improve render performance and skip extra logic if specific state is not subscribed to.
+  Therefore, make sure you invoke or read it before a render in order to enable the state update. */
+  useEffect(() => {
+    formPageState._isSubmitSuccessful = isSubmitSuccessful;
+    formPageState._isFormDirty = isDirty;
+  }, [isSubmitSuccessful, isDirty]);
+
+  return (
+    <FormPageContextProvider value={formPageState}>
+      <PageWrapperBase>{children}</PageWrapperBase>
+    </FormPageContextProvider>
+  );
+}

package/src/components/FormPage/WidgetsFormProvider.tsx

@@ -0,0 +1,20 @@
+import React, { ReactNode, useState } from 'react';
+import { WidgetsFormContextProvider } from '@wix/bex-core/react';
+import { PageWrapperBase } from '../PageWrapper';
+import { WidgetsFormState } from '@wix/bex-core';
+
+export function WidgetsFormProvider({
+  children,
+  state,
+}: {
+  children: ReactNode;
+  state?: WidgetsFormState;
+}) {
+  const [widgetsFormState] = useState(() => state ?? new WidgetsFormState());
+
+  return (
+    <WidgetsFormContextProvider value={widgetsFormState}>
+      <PageWrapperBase>{children}</PageWrapperBase>
+    </WidgetsFormContextProvider>
+  );
+}

package/src/components/FormPage/index.ts

@@ -0,0 +1,4 @@
+export * from './FormPage';
+export * from './FormPageProvider';
+export * from './WidgetsFormProvider';
+export * from './FormPageActionsBar';

package/src/components/FormPageAdditionalContent/FormPageAdditionalContent.tsx

@@ -0,0 +1,27 @@
+import React, { ReactNode } from 'react';
+import { Box, Cell } from '@wix/design-system';
+import { useIsMobile } from '../../hooks/useIsMobile';
+
+export interface FormPageAdditionalContentProps {
+  /**
+   * Applies a data-hook HTML attribute that can be used in tests
+   */
+  dataHook?: string;
+  children?: ReactNode;
+}
+
+export function FormPageAdditionalContent(
+  props: FormPageAdditionalContentProps,
+) {
+  const isMobile = useIsMobile();
+  const { children, ...rest } = props;
+  return (
+    <Cell span={isMobile ? 12 : 4} {...rest}>
+      <Box direction="vertical" gap={isMobile ? 'SP2' : 'SP4'}>
+        {children}
+      </Box>
+    </Cell>
+  );
+}
+
+FormPageAdditionalContent.displayName = 'FormPageAdditionalContent';

package/src/components/FormPageAdditionalContent/index.ts

@@ -0,0 +1 @@
+export * from './FormPageAdditionalContent';

package/src/components/FormPageCard/FormPageCard.tsx

@@ -0,0 +1,49 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { useFormPageContext } from '../../providers';
+import { observer } from 'mobx-react-lite';
+import { CardContainer, CardContainerProps } from '../CardContainer';
+import { FocusableProps, withFocusable } from '@wix/bex-utils';
+
+export interface FormPageCardProps extends CardContainerProps {}
+
+export function _FormPageCard(props: FormPageCardProps & FocusableProps) {
+  const { status: statusProp, id, registerScrollableItem, ...rest } = props;
+  const pageState = useFormPageContext();
+  const status = !pageState || pageState.isFetching ? 'loading' : statusProp;
+  const [highlight, setHighlight] = useState<'focus'>();
+  const timeoutRef = useRef<number>();
+
+  useEffect(() => {
+    return () => {
+      window.clearTimeout(timeoutRef.current);
+    };
+  });
+
+  return (
+    <div
+      id={id}
+      ref={(ref) => {
+        if (id && ref) {
+          registerScrollableItem({
+            ref,
+            itemName: id,
+            containerName: id,
+            afterScroll: () => {
+              setHighlight('focus');
+
+              timeoutRef.current = window.setTimeout(() => {
+                setHighlight(undefined);
+              }, 3000);
+            },
+          });
+        }
+      }}
+    >
+      <CardContainer status={status} {...rest} highlight={highlight} />
+    </div>
+  );
+}
+
+_FormPageCard.displayName = 'FormPageCard';
+
+export const FormPageCard = withFocusable(observer(_FormPageCard));

package/src/components/FormPageCard/FormPageCard.uni.driver.ts

@@ -0,0 +1,6 @@
+import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import CardContainerUniDriver from '../CardContainer/CardContainer.uni.driver';
+
+export default (base: UniDriver, body: UniDriver) => {
+  return CardContainerUniDriver(base, body);
+};

package/src/components/FormPageCard/index.ts

@@ -0,0 +1 @@
+export * from './FormPageCard';

package/src/components/FormPageContent/FormPageContent.tsx

@@ -0,0 +1,21 @@
+import { ReactElement, ReactNode } from 'react';
+import { useFormPageContent } from '../../state/FormPage';
+
+export interface FormPageContentProps {
+  /**
+   * <MainContent> and, if needed, <AdditionalContent> elements
+   */
+  children: ReactNode;
+}
+
+export type FormPageContentElement = ReactElement<
+  FormPageContentProps,
+  typeof FormPageContent
+>;
+
+export function FormPageContent(_props: FormPageContentProps) {
+  return null;
+}
+
+FormPageContent.useFormPageContent = useFormPageContent;
+FormPageContent.displayName = 'FormPageContent';

package/src/components/FormPageContent/FormPageContent.uni.driver.ts

@@ -0,0 +1,66 @@
+import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import { baseUniDriverFactory } from '../../unidriver';
+import {
+  ButtonUniDriver,
+  PopoverMenuUniDriver,
+} from '@wix/design-system/dist/testkit/unidriver';
+
+import PageErrorStateUniDriver from '../PageErrorState/PageErrorState.uni.driver';
+import FormPageCardUniDriver from '../FormPageCard/FormPageCard.uni.driver';
+
+export const FormPageContentUniDriver = (base: UniDriver, body: UniDriver) => {
+  const moreActionsPopoverDriver = (dataHook: string) =>
+    PopoverMenuUniDriver(base.$(`[data-hook="${dataHook}"]`), body);
+
+  const getCard = (dataHook: string) =>
+    FormPageCardUniDriver(base.$(`[data-hook="${dataHook}"]`), body);
+
+  return {
+    /** Returns Cancel button driver */
+    cancelButton: () =>
+      ButtonUniDriver(
+        base.$$(`[data-hook="form-page-cancel-btn"]`).get(0),
+        body,
+      ),
+    /** Returns Save button driver */
+    saveButton: () =>
+      ButtonUniDriver(base.$$(`[data-hook="form-page-save-btn"]`).get(0), body),
+
+    getMoreActions: (dataHook: string) => ({
+      exists: () => moreActionsPopoverDriver(dataHook).exists(),
+
+      /** Opens the manage view popover */
+      open: () =>
+        moreActionsPopoverDriver(dataHook)
+          .getTriggerElement('more-actions-popover-button')
+          .click(),
+      /** Indicates whether the manage view popover is open */
+      isOpen: () => moreActionsPopoverDriver(dataHook).isMenuOpen(),
+
+      /** Clicks at child by data-hook */
+      clickAtChildByDataHook: (childDataHook: string) =>
+        moreActionsPopoverDriver(dataHook).clickAtChildByDataHook(
+          childDataHook,
+        ),
+
+      /** Clicks at child by index */
+      clickAtChildByIndex: (index: number) =>
+        moreActionsPopoverDriver(dataHook).clickAtChild(index),
+
+      /** Gets content at index */
+      childContentAt: (index: number) =>
+        moreActionsPopoverDriver(dataHook).itemContentAt(index),
+
+      /** Gets children count */
+      childrenCount: () => moreActionsPopoverDriver(dataHook).childrenCount(),
+    }),
+
+    /** Returns EntityPage.Card driver by dataHook */
+    getCard,
+
+    /** Returns error state driver */
+    getErrorState: () => PageErrorStateUniDriver(base, body),
+
+    ...baseUniDriverFactory(base),
+  };
+};

package/src/components/FormPageContent/index.ts

@@ -0,0 +1 @@
+export * from './FormPageContent';

package/src/components/FormPageHeader/FormPageHeader.tsx

@@ -0,0 +1,41 @@
+import { BadgeProps, Breadcrumbs } from '@wix/design-system';
+import { ReactElement } from 'react';
+import { MoreActionsElement } from '../MoreActions';
+import { PageSubTitleProps } from '../PageSubTitle';
+import { useFormPageHeader } from '../../state/FormPage';
+
+export interface FormPageHeaderProps {
+  /**
+   * <MoreActions />
+   */
+  moreActions?: MoreActionsElement;
+  /**
+   * Page breadcrumbs
+   */
+  breadcrumbs?: ReactElement<Breadcrumbs>;
+  /**
+   * Page title text and optional badges
+   */
+  title: {
+    text: string;
+    badges?: (Pick<BadgeProps, 'skin' | 'prefixIcon' | 'suffixIcon'> & {
+      text: string;
+    })[];
+  };
+  /**
+   * Page subtitle text
+   */
+  subtitle?: PageSubTitleProps;
+}
+
+export type FormPageHeaderElement = ReactElement<
+  FormPageHeaderProps,
+  typeof FormPageHeader
+>;
+
+export function FormPageHeader(_props: FormPageHeaderProps) {
+  return null;
+}
+
+FormPageHeader.useFormPageHeader = useFormPageHeader;
+FormPageHeader.displayName = 'FormPageHeader';

package/src/components/FormPageHeader/index.ts

@@ -0,0 +1 @@
+export * from './FormPageHeader';

package/src/components/FormPageMainContent/FormPageMainContent.tsx

@@ -0,0 +1,26 @@
+import React, { ReactNode } from 'react';
+import { Box, Cell } from '@wix/design-system';
+import { useIsMobile } from '../../hooks/useIsMobile';
+
+export interface FormPageMainContentProps {
+  /**
+   * Applies a data-hook HTML attribute that can be used in tests
+   */
+  dataHook?: string;
+  children?: ReactNode;
+}
+
+export function FormPageMainContent(props: FormPageMainContentProps) {
+  const { children, ...rest } = props;
+  const isMobile = useIsMobile();
+
+  return (
+    <Cell span={isMobile ? 12 : undefined} {...rest}>
+      <Box direction="vertical" gap={isMobile ? 'SP2' : 'SP4'}>
+        {children}
+      </Box>
+    </Cell>
+  );
+}
+
+FormPageMainContent.displayName = 'FormPageMainContent';

package/src/components/FormPageMainContent/index.ts

@@ -0,0 +1 @@
+export * from './FormPageMainContent';

package/src/components/Grid/DebugItemKeyRecycler.tsx

@@ -0,0 +1,20 @@
+import React, { ReactNode } from 'react';
+
+// this helps rendering the item key inside the card instead of inspecting in in react-dev-tools
+export function DebugItemKeyRecycler({ children }: { children?: ReactNode }) {
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        border: 'solid 1px #fff',
+        top: 6,
+        left: 6,
+        padding: 6,
+        backgroundColor: '#000',
+        zIndex: 2000,
+      }}
+    >
+      <span style={{ color: '#fff' }}>{children}</span>
+    </div>
+  );
+}

package/src/components/Grid/Grid.scss

@@ -0,0 +1,3 @@
+.shadow30 {
+  filter: drop-shadow(0px 6px 6px rgba(0, 6, 36, 0.06));
+}

package/src/components/Grid/Grid.tsx

@@ -0,0 +1,150 @@
+import React, { useEffect } from 'react';
+import { FiltersMap } from '@wix/bex-core';
+import { GridPresetProps } from './Grid.types';
+import { GridState, LayoutType } from '../../state';
+import { getToolbarCollectionFeaturesInitializers } from '../../state/getToolbarCollectionFeaturesInitializers';
+import { ToolbarCollectionContentAutoSizer } from '../ToolbarCollectionContentAutoSizer';
+import { BulkActionToolbarRenderProp } from '../BulkAction';
+import { GridItemBaseProps } from './GridItemBaseProps';
+import { GridPlaceholderStates } from './GridPlaceholderStates';
+import { CollectionCard } from '../CollectionCard';
+import {
+  ToolbarCollection,
+  ToolbarCollectionBaseProps,
+} from '../ToolbarCollection';
+import { observer } from 'mobx-react-lite';
+import { useToolbarCollectionSyncProps } from '../ToolbarCollection/useToolbarCollectionSyncProps';
+import type { GridSectionsContent } from '../GridSections/GridSectionsContent';
+import type { Section } from '../CollectionSectionHeader';
+import { GridSingleGridContent } from './GridSingleGridContent';
+import { GridDragAndDrop } from '../GridDragAndDropDndKit/GridDragAndDrop';
+
+interface GridBaseProps<T, F extends FiltersMap>
+  extends Omit<ToolbarCollectionBaseProps<T, F>, 'sticky' | 'maxSelection'>,
+    GridItemBaseProps<T, F> {
+  dataHook?: string;
+  /**
+   * Adds functionality to allow visitors to reorder items manually.
+   * For more information, see the [Drag and Drop Overview](./?path=/story/features-sort-drag-and-drop--overview).
+   * @overrideType [GridDragAndDrop](./?path=/story/features-sort-drag-and-drop--griddraganddrop)
+   * @external
+   */
+  dragAndDrop?: typeof GridDragAndDrop;
+
+  /**
+   * Grid state instance created using [`useGridCollection`](./?path=/story/base-components-collections-grid-usegridcollection--usegridcollection).
+   * @overrideType [GridState](./?path=/story/base-components-collections-grid-gridstate--gridstate)
+   * @external
+   */
+  state: GridState<T, F>;
+
+  /**
+   * A toolbar for performing bulk actions on multiple items.<br> <br>
+   * Supported parameters: <br>
+   * -`selectedValues`: [array] Items that are checked in the selection column. <br>
+   * -`uncheckedValues`: [array] Items that are unchecked in the selection column. <br>
+   * -`isSelectAll`: [bool] Whether **Select All** is checked. <br>
+   * -`openModal`: [func] Opens a modal that contains the component from `bulkActionModal` render prop. <br>
+   * -`clearSelection`: [func] Clears all selections. Call this after the action on the selected items finishes. <br>
+   * -`total`: [number] Total number of items in the server. <br>
+   * -`openConfirmModal`: [func] Opens a `<MessageModalLayout>` to confirm an action is about to be applied to the selected items. <br>
+   * -`query`: [object] Current paging, sorting, and filtering. Often used together with bulk actions, such as `updateAll`. <br>
+   * @external
+   */
+  bulkActionToolbar?: BulkActionToolbarRenderProp<T, F>;
+
+  /**
+   * Creates [grid sections](./?path=/story/features-display-grid-sections--grid-sections) that group data based on the values of a specific field.
+   * @external
+   * @overrideType [SectionsProp](./?path=/story/common-types--sectionsprop)
+   */
+  sections?: {
+    GridSections: typeof GridSectionsContent;
+    renderSection?: (item: T) => Section;
+  };
+
+  layoutType?: LayoutType;
+}
+
+export type GridBasePropsWithoutPreset<T, F extends FiltersMap> = Omit<
+  GridBaseProps<T, F>,
+  'preset' | 'renderItem'
+>;
+
+export type GridProps<T, F extends FiltersMap> = GridPresetProps<
+  T,
+  GridBasePropsWithoutPreset<T, F>
+>;
+
+function _Grid<T, F extends FiltersMap = FiltersMap>(props: GridProps<T, F>) {
+  const {
+    state,
+    dragAndDrop,
+    renderError,
+    errorState = renderError &&
+      (((err, { isOnline, retry }) =>
+        renderError?.({ err, isOnline, retry })) as GridProps<
+        T,
+        F
+      >['errorState']),
+    emptyState,
+    noResultsState,
+    cardProps,
+    dataHook,
+    exportModal,
+    sections,
+  } = props;
+
+  const { toolbar } = state;
+
+  useToolbarCollectionSyncProps({
+    ...props,
+    state: state.toolbar,
+    isUsingDragAndDrop: !!dragAndDrop,
+    isUsingBulkActionsToolbar: false,
+    isUsingHorizontalScroll: false,
+    isUsingFolders: false,
+    isUsingTableVirtualization: false,
+  });
+
+  useEffect(
+    () =>
+      state.init({
+        featuresInitializers: getToolbarCollectionFeaturesInitializers(props),
+      }),
+    [],
+  );
+
+  return (
+    <CollectionCard
+      errorState={false}
+      state={toolbar}
+      dataHook={dataHook}
+      {...cardProps}
+    >
+      <ToolbarCollection {...props} sticky state={toolbar}>
+        <GridPlaceholderStates
+          state={state.toolbar}
+          errorState={errorState}
+          emptyState={emptyState}
+          noResultsState={noResultsState}
+        >
+          <ToolbarCollectionContentAutoSizer>
+            {sections ? (
+              <sections.GridSections
+                {...props}
+                renderSection={sections.renderSection}
+                state={state}
+              />
+            ) : (
+              <GridSingleGridContent {...props} state={state} />
+            )}
+          </ToolbarCollectionContentAutoSizer>
+        </GridPlaceholderStates>
+      </ToolbarCollection>
+      {exportModal ?? toolbar.featuredComponents.exportModal.value}
+    </CollectionCard>
+  );
+}
+
+export const Grid = observer(_Grid);

package/src/components/Grid/Grid.types.ts

@@ -0,0 +1,71 @@
+import React from 'react';
+import { SupportedCardGalleryItemProps } from './SupportedCardGalleryItemProps';
+
+type RenderItemRawProps = Omit<
+  Partial<SupportedCardGalleryItemProps>,
+  'title' | 'subtitle>'
+>;
+
+type GridPresetFullProps<T, P> = P & {
+  preset: 'full';
+  renderItem?: (
+    item: T,
+    index: number,
+  ) => RenderItemRawProps & {
+    title?: React.ReactNode;
+    subtitle?: React.ReactNode;
+  };
+};
+
+type GridPresetFooterProps<T, P> = P & {
+  preset: 'footer';
+  renderItem?: (
+    item: T,
+    index: number,
+  ) => RenderItemRawProps & {
+    title?: React.ReactNode;
+    subtitle?: React.ReactNode;
+  };
+};
+
+type GridPresetTitleProps<T, P> = P & {
+  preset?: 'title';
+  renderItem?: (
+    item: T,
+    index: number,
+  ) => RenderItemRawProps & {
+    title?: React.ReactNode;
+    subtitle?: undefined;
+  };
+};
+
+type GridPresetEmptyProps<T, P> = P & {
+  preset: 'empty';
+  renderItem?: (
+    item: T,
+    index: number,
+  ) => RenderItemRawProps & {
+    title?: undefined;
+    subtitle?: undefined;
+  };
+};
+
+export type Preset = 'full' | 'footer' | 'title' | 'empty';
+
+type GridPresetGenericProps<T, P> = P & {
+  preset?: Preset;
+  renderItem?: (
+    item: T,
+    index: number,
+  ) => RenderItemRawProps & {
+    title?: React.ReactNode;
+    subtitle?: React.ReactNode;
+  };
+};
+
+export type GridPresetProps<T, P> =
+  | GridPresetFullProps<T, P>
+  | GridPresetTitleProps<T, P>
+  | GridPresetEmptyProps<T, P>
+  | GridPresetGenericProps<T, P>
+  | GridPresetFooterProps<T, P>;