@wix/patterns 1.255.0 → 1.256.0

package/src/fields/Number/Number.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { FormField, NumberInput } from '@wix/design-system';
+import { BaseInputProps } from '../BaseInput';
+import { Field } from '../Field';
+import { dataHooks } from '../dataHooks';
+
+export interface NumberProps extends BaseInputProps<number | null> {}
+
+export const Number = ({
+  dataHook,
+  schema,
+  initialValue,
+  onChange,
+}: NumberProps) => {
+  return (
+    <Field dataHook={dataHook} type={schema.type}>
+      <FormField dataHook={dataHooks.Label} label={schema.label}>
+        <NumberInput
+          dataHook={dataHooks.Input}
+          defaultValue={initialValue || undefined}
+          onChange={(e) => onChange(e)}
+        />
+      </FormField>
+    </Field>
+  );
+};

package/src/fields/Number/index.ts

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

package/src/fields/ShortText/ShortText.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { FormField, Input } from '@wix/design-system';
+import { BaseInputProps } from '../BaseInput';
+import { Field } from '../Field';
+import { dataHooks } from '../dataHooks';
+import { useTextInput } from '../useTextInput';
+
+export interface ShortTextProps extends BaseInputProps<string> {}
+
+export const ShortText = ({
+  dataHook,
+  schema,
+  initialValue,
+  onChange,
+}: ShortTextProps) => {
+  const { value, charCount, handleChange } = useTextInput({
+    initialValue,
+    maxLength: schema.maxLength,
+    onChange,
+  });
+
+  return (
+    <Field dataHook={dataHook} type={schema.type}>
+      <FormField
+        dataHook={dataHooks.Label}
+        label={schema.label}
+        charCount={charCount}
+      >
+        <Input
+          dataHook={dataHooks.Input}
+          value={value}
+          onChange={handleChange}
+        />
+      </FormField>
+    </Field>
+  );
+};

package/src/fields/ShortText/index.ts

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

package/src/fields/Url/Url.tsx

@@ -0,0 +1,72 @@
+import React, { useRef, useState } from 'react';
+import { FormField, Input, StatusType } from '@wix/design-system';
+import { BaseInputProps, BaseInputRef } from '../BaseInput';
+import { Field } from '../Field';
+import { dataHooks } from '../dataHooks';
+import { useTextInput } from '../useTextInput';
+import { Link } from '@wix/wix-ui-icons-common';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
+
+export interface UrlProps extends BaseInputProps<string> {}
+
+export const Url = ({
+  dataHook,
+  schema,
+  initialValue,
+  onChange,
+  inputRef,
+}: UrlProps) => {
+  const { value, charCount, handleChange } = useTextInput({
+    initialValue,
+    maxLength: schema.maxLength,
+    onChange,
+  });
+  const ref = useRef<BaseInputRef>({});
+  const [fieldsStatus, setFieldStatus] = useState<{
+    status?: StatusType;
+    statusMessage?: string;
+  }>({});
+  const { translate: t } = useWixPatternsContainer();
+  // Same regex as data-extensions https://github.com/wix-private/server-infra/blob/a6c3009d39bbb0312c929f68ee81c559e1eb5b4e/iptf/dataextensions/src/main/scala/com/wixpress/infra/dataextensions/runtime/validator/Formats.scala#L31
+  const uriPattern =
+    /^[A-Za-z][A-Za-z0-9+.-]*:(\/\/([A-Za-z0-9._~\-%!$&'()*+,;=:]*@)?[A-Za-z0-9._~\-!$&'()*+,;=%:\[\]]*(:[0-9]*)?)?[A-Za-z0-9._~\-%!$&'()*+,;=:@\/]*([?][A-Za-z0-9._~\-%!$&'()*+,;=:@\/?]*)?([#][A-Za-z0-9._~\-%!$&'()*+,;=:@\/?]*)?$/;
+
+  return (
+    <Field dataHook={dataHook} type={schema.type}>
+      <FormField
+        dataHook={dataHooks.Label}
+        label={schema.label}
+        charCount={charCount}
+        {...fieldsStatus}
+      >
+        <Input
+          prefix={
+            <Input.IconAffix>
+              <Link />
+            </Input.IconAffix>
+          }
+          placeholder={t('cairo.customFields.url-input.placeholder')}
+          dataHook={dataHooks.Input}
+          value={value}
+          onChange={handleChange}
+          onBlur={() => {
+            ref.current.invalid = value ? !uriPattern.test(value) : false;
+
+            if (ref.current.invalid) {
+              setFieldStatus({
+                status: 'error',
+                statusMessage: t('cairo.customFields.url-input.error'),
+              });
+            } else {
+              setFieldStatus({ status: undefined, statusMessage: undefined });
+            }
+          }}
+          ref={(internalRef) => {
+            inputRef?.(ref.current);
+            ref.current.focus = () => internalRef?.focus();
+          }}
+        />
+      </FormField>
+    </Field>
+  );
+};

package/src/fields/Url/index.ts

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

package/src/fields/dataHooks.ts

@@ -0,0 +1,4 @@
+export const dataHooks = {
+  Label: 'form-field',
+  Input: 'input-field',
+};

package/src/fields/index.ts

@@ -0,0 +1,8 @@
+export * from './Checkbox';
+export * from './DateInput';
+export * from './DateTime';
+export * from './Dropdown';
+export * from './LongText';
+export * from './Number';
+export * from './ShortText';
+export * from './BaseInput';

package/src/fields/useTextInput.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+
+export const useTextInput = ({
+  initialValue,
+  maxLength,
+  onChange,
+}: {
+  initialValue: string;
+  maxLength?: number;
+  onChange: (value: string) => void;
+}) => {
+  const [value, setValue] = React.useState(initialValue || '');
+  const charCount = maxLength ? maxLength - value.length : undefined;
+
+  const handleChange = (
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+  ) => {
+    const newValue = e.target.value;
+
+    if (
+      maxLength === undefined ||
+      (maxLength && newValue.length <= maxLength)
+    ) {
+      setValue(newValue);
+      onChange?.(newValue);
+    }
+  };
+
+  return {
+    value,
+    charCount,
+    handleChange,
+  };
+};

package/src/giza/WixPatternsGizaProvider.tsx

@@ -0,0 +1,75 @@
+import React, { ReactNode, useState } from 'react';
+import {
+  ContextType,
+  WixPatternsEssentialsOverrides,
+  showToastCompat,
+} from '@wix/bex-core';
+import { useEssentials } from '@wix/yoshi-flow-bm/fe-essentials-giza';
+import { useComponentLoaded, usePlatformApi } from '@wix/yoshi-flow-bm';
+import { CairoProvider } from '../providers';
+import { buildWixPatternsEssentials } from './buildWixPatternsEssentials';
+import { minimalRequiredRuntimeCheck } from '../utils/minimalRequiredRuntimeCheck';
+import { usePageLocation } from '@wix/bex-core/react';
+
+export interface WixPatternsGizaProviderProps {
+  children?: ReactNode;
+  value?: Partial<WixPatternsEssentialsOverrides>;
+  localCache?: boolean;
+  contextType?: ContextType;
+}
+
+export function WixPatternsGizaProvider(props: WixPatternsGizaProviderProps) {
+  if (process.env.NODE_ENV !== 'production') {
+    minimalRequiredRuntimeCheck({
+      packageJson: require('@wix/yoshi-flow-bm/package.json'),
+      required: '^6.103.0',
+    });
+  }
+
+  const {
+    children,
+    value: wixPatternsEssentialsOverridesProp,
+    localCache,
+    contextType = 'ACCOUNT',
+  } = props;
+  const { showToast, navigateTo, onBeforeUnload, getHostContainer } =
+    usePlatformApi();
+
+  const essentials = useEssentials();
+
+  const [wixPatternsEssentialsOverrides] = useState(
+    (): Partial<WixPatternsEssentialsOverrides> => ({
+      usePageLocation,
+      navigateTo: ({ pageId, appState, referrer, relativeUrl }) => {
+        navigateTo({
+          pageId,
+          appState: appState || relativeUrl,
+          referrer,
+        });
+      },
+      getHostContainer,
+      showToast: showToastCompat(showToast),
+      useAppLoaded: () => {
+        useComponentLoaded();
+      },
+      onBeforeUnload,
+      ...wixPatternsEssentialsOverridesProp,
+    }),
+  );
+
+  const [wixPatternsEssentials] = useState(() =>
+    buildWixPatternsEssentials(essentials, {
+      overrides: wixPatternsEssentialsOverrides,
+    }),
+  );
+
+  return (
+    <CairoProvider
+      value={wixPatternsEssentials}
+      localCache={localCache}
+      contextType={contextType}
+    >
+      {children}
+    </CairoProvider>
+  );
+}

package/src/giza/buildWixPatternsEssentials.ts

@@ -0,0 +1,61 @@
+import type { Essentials } from '@wix/fe-essentials/core';
+import { Trans, useExperiments, useTranslation } from '@wix/yoshi-flow-bm';
+import {
+  WixPatternsEssentials,
+  WixPatternsEssentialsOverrides,
+  createAccountComponentSettings,
+  getWixPatternsWindowExperiments,
+  getExperimentsCompat,
+  Environment,
+} from '@wix/bex-core';
+
+export function buildWixPatternsEssentials(
+  essentials: Essentials,
+  { overrides }: { overrides?: Partial<WixPatternsEssentialsOverrides> } = {},
+): WixPatternsEssentials {
+  const {
+    errorMonitor,
+    httpClient,
+    environment: essentialsEnvironment,
+    errorHandler,
+  } = essentials;
+
+  const environment = {
+    ...essentialsEnvironment,
+    ...overrides?.environment,
+    providerType: 'giza' as const,
+  };
+
+  return {
+    createEssentials: (options) =>
+      essentials.createChildEssentials({
+        ...options,
+        experiments: {
+          bag: getWixPatternsWindowExperiments() ?? {},
+        },
+      }),
+    errorMonitor: errorMonitor ?? { captureException: () => {} },
+    errorHandler: errorHandler.v2,
+    useTranslation,
+    biLogger:
+      process.env.NODE_ENV !== 'test'
+        ? essentials.asPartial.biLogger
+        : undefined,
+    Trans,
+    useExperiments: () => useExperiments({ readOnly: true }),
+    showToast: () => ({ remove: () => {} }),
+    httpClient,
+    experiments: getExperimentsCompat(essentials),
+    createComponentSettings: createAccountComponentSettings,
+    ...overrides,
+    user: {
+      permissions: [],
+      ...overrides?.user,
+    },
+    environment,
+    environmentBI: {
+      artifactId: essentials.environment.artifactId,
+      componentId: (essentials.environment as Environment).componentId,
+    },
+  };
+}

package/src/giza/index.ts

@@ -0,0 +1,2 @@
+export * from './WixPatternsGizaProvider';
+export * from './usePickerModal';

package/src/giza/usePickerModal.ts

@@ -0,0 +1,70 @@
+import {
+  PickerModalState,
+  useCreatePickerModal as useCreatePickerModalBase,
+  UsePickerModalParams as UsePickerModalParamsOriginal,
+  UsePickerModalParamsBase,
+  useSyncPickerModalProps,
+} from '../hooks';
+import {
+  wixPatternsEnvironment,
+  FiltersMap,
+  OptionalFiltersMap,
+} from '@wix/bex-core';
+import { PaginationModeConfig } from '@wix/bex-core/react';
+import { useEssentials } from '@wix/yoshi-flow-bm/fe-essentials-giza';
+import { useCallback, useState } from 'react';
+
+interface UsePickerModalParamsOverrides<T, F extends FiltersMap> {
+  environment?: Partial<UsePickerModalParamsBase<T, F>['environment']>;
+}
+
+type UsePickerModalParamsEssentials<T, F extends FiltersMap> = Omit<
+  UsePickerModalParamsBase<T, F>,
+  | 'paginationMode'
+  | 'fetchData'
+  | 'environment'
+  | 'errorMonitor'
+  | 'biLoggerFactory'
+>;
+
+export type UsePickerModalParams<
+  T,
+  F extends FiltersMap,
+> = UsePickerModalParamsEssentials<T, F> &
+  UsePickerModalParamsOverrides<T, F> &
+  PaginationModeConfig<T, F>;
+
+export type PikerModalFactory = <T, F extends FiltersMap = OptionalFiltersMap>(
+  config: UsePickerModalParams<T, F>,
+) => PickerModalState<T, F>;
+
+export function useCreatePickerModal(): PikerModalFactory {
+  const { errorMonitor, environment, createChildEssentials } = useEssentials();
+
+  const createPickerModalBase = useCreatePickerModalBase();
+
+  return useCallback<PikerModalFactory>(
+    <T, F extends FiltersMap = OptionalFiltersMap>(params: any) => {
+      const { biLoggerFactory } = createChildEssentials({});
+      return createPickerModalBase({
+        errorMonitor,
+        biLoggerFactory,
+        ...params,
+        environment: wixPatternsEnvironment({
+          ...environment,
+          ...params?.environment,
+        }),
+      } as UsePickerModalParamsOriginal<T, F>);
+    },
+    [],
+  );
+}
+
+export function usePickerModal<T, F extends FiltersMap = OptionalFiltersMap>(
+  params: UsePickerModalParams<T, F>,
+) {
+  const createPickerModal = useCreatePickerModal();
+  const [state] = useState(() => createPickerModal<T, F>(params));
+  useSyncPickerModalProps(state, params);
+  return state;
+}

package/src/hooks/CollectionFoldersBaseConfig.ts

@@ -0,0 +1,13 @@
+import { CollectionState, FiltersMap } from '@wix/bex-core';
+
+export interface CollectionFoldersBaseConfig<
+  T1,
+  F1 extends FiltersMap,
+  T2,
+  F2 extends FiltersMap,
+> {
+  /** A [collection state](./?path=/story/common-hooks--usecollection) that fetches items */
+  items: CollectionState<T1, F1>;
+  /** A [collection state](./?path=/story/common-hooks--usecollection) that fetches folders */
+  folders: CollectionState<T2, F2>;
+}

package/src/hooks/customModalContent.ts

@@ -0,0 +1,8 @@
+import { CustomModalLayoutProps } from '@wix/design-system';
+import { ReactNode } from 'react';
+
+export type CustomModalContent<T> = (props: {
+  isOpen: boolean;
+  close: (items?: T[]) => Promise<unknown>;
+  width?: CustomModalLayoutProps['width'];
+}) => ReactNode;

package/src/hooks/index.ts

@@ -0,0 +1,23 @@
+export * from './listItem';
+export * from './useBuildOption';
+export * from './usePickerModal';
+export * from './usePickerStandalone';
+export * from './useViews';
+export * from './useEmptyStateTexts';
+export * from './customModalContent';
+export * from './useDropdownSelectFilterState';
+export * from './useAmbassador';
+export * from './useDateRangeFilterState';
+export * from './useGridFolders';
+export * from './useTableFolders';
+export * from './useTableCollection';
+export * from './useGridCollection';
+export * from './useTableGridSwitchCollection';
+export * from './useEntityPage';
+export * from './useSettingsPage';
+export * from './useEntityPageChild';
+export * from './useSettingsPageChild';
+export * from './useCreateNestedOptimisticActions';
+export * from './useEntity';
+export * from './useSettings';
+export * from './useTagsWidget';

package/src/hooks/listItem.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { ListItemSelectSizes } from '@wix/design-system';
+
+export interface ListItem {
+  className?: string;
+  checkbox?: boolean;
+  prefix?: React.ReactNode;
+  title?: string;
+  subtitle?: string;
+  suffix?: React.ReactNode;
+  selected?: boolean;
+  disabled?: boolean;
+  size?: ListItemSelectSizes;
+  ellipsis?: boolean;
+  dataHook?: string;
+  sectionId?: string;
+  label?: string;
+}

package/src/hooks/useAmbassador/index.ts

@@ -0,0 +1,2 @@
+export * from './useAmbassadorGrid';
+export * from './useAmbassadorTable';

package/src/hooks/useAmbassador/useAmbassadorGrid.ts

@@ -0,0 +1,25 @@
+import { useState } from 'react';
+import { FiltersMap, OptionalFiltersMap } from '@wix/bex-core';
+import {
+  AmbassadorCollectionConfig,
+  useWixPatternsContainer,
+  useCreateAmbassadorCollection,
+} from '@wix/bex-core/react';
+import { GridState } from '../../state';
+
+export function useAmbassadorGrid<T, F extends FiltersMap = OptionalFiltersMap>(
+  config: AmbassadorCollectionConfig<T, F>,
+) {
+  const createCollection = useCreateAmbassadorCollection();
+  const container = useWixPatternsContainer();
+
+  const [state] = useState(
+    () =>
+      new GridState({
+        collection: createCollection<T, F>(config),
+        container,
+      }),
+  );
+
+  return state;
+}

package/src/hooks/useAmbassador/useAmbassadorTable.ts

@@ -0,0 +1,26 @@
+import { useState } from 'react';
+import { FiltersMap, OptionalFiltersMap } from '@wix/bex-core';
+import {
+  AmbassadorCollectionConfig,
+  useWixPatternsContainer,
+  useCreateAmbassadorCollection,
+} from '@wix/bex-core/react';
+import { TableState } from '../../state';
+
+export function useAmbassadorTable<
+  T,
+  F extends FiltersMap = OptionalFiltersMap,
+>(config: AmbassadorCollectionConfig<T, F>) {
+  const createCollection = useCreateAmbassadorCollection();
+  const container = useWixPatternsContainer();
+
+  const [state] = useState(
+    () =>
+      new TableState({
+        collection: createCollection<T, F>(config),
+        container,
+      }),
+  );
+
+  return state;
+}

package/src/hooks/useAutoScrollOnLoad.tsx

@@ -0,0 +1,35 @@
+import React, { useEffect } from 'react';
+import {
+  useFormPageContext,
+  useWixPatternsContainer,
+} from '@wix/bex-core/react';
+import { getAnchorParam } from '@wix/bex-utils';
+
+export function useAutoScrollOnLoad(
+  scrollToItem: React.MutableRefObject<(() => void) | undefined>,
+  doesItemExist: React.MutableRefObject<(() => boolean) | undefined>,
+) {
+  const { showToast, translate: t } = useWixPatternsContainer();
+  const pageState = useFormPageContext();
+
+  useEffect(() => {
+    const pageStatus = pageState?.initTask?.status;
+
+    if (!pageStatus.isLoading && !pageStatus.isIdle) {
+      const anchorName = getAnchorParam();
+
+      if (anchorName) {
+        if (doesItemExist.current?.()) {
+          scrollToItem.current?.();
+        } else {
+          showToast?.({
+            message: t('cairo.settings.search.anchor-doesnt-exist.error', {
+              anchorName,
+            }),
+            type: 'WARNING',
+          });
+        }
+      }
+    }
+  }, [pageState?.initTask?.status]);
+}

package/src/hooks/useBuildAccordionItems.tsx

@@ -0,0 +1,108 @@
+import { FiltersMap } from '@wix/bex-core';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
+import React, { useCallback } from 'react';
+import {
+  AccordionProps,
+  accordionSectionItemBuilder,
+} from '@wix/design-system';
+import { CollectionFilter } from '../components/CollectionFilter';
+import { FilterElement } from '../components/CollectionToolbarFilters';
+import { CollectionToolbarFiltersState } from '../components/CollectionToolbarFilters/CollectionToolbarFiltersState';
+import { FilterAccordionTitle } from '../components/FiltersPanel/FilterAccordionTitle';
+
+function useBuildAccordionItem<T, F extends FiltersMap>(
+  state: CollectionToolbarFiltersState<T, F>,
+) {
+  return useCallback((filterElement: FilterElement) => {
+    const { type: Component, props: filterProps } = filterElement;
+    const { filter, initiallyOpen, popoverProps, accordionItemProps } =
+      filterProps;
+
+    const clonedElement = (
+      <Component
+        {...filterProps}
+        popoverProps={{ appendTo: 'window', ...popoverProps }}
+      />
+    );
+
+    return {
+      title: (
+        <FilterAccordionTitle
+          state={state.toolbar}
+          filter={filter}
+          filterProps={filterProps}
+        />
+      ),
+      children: filterProps.filter ? (
+        <CollectionFilter filter={filterProps.filter} state={state}>
+          {clonedElement}
+        </CollectionFilter>
+      ) : (
+        clonedElement
+      ),
+      initiallyOpen,
+      ...accordionItemProps,
+    };
+  }, []);
+}
+
+export function useBuildAccordionItems<T, F extends FiltersMap>(
+  state: CollectionToolbarFiltersState<T, F>,
+) {
+  const { translate: t } = useWixPatternsContainer();
+  const buildAccordionItem = useBuildAccordionItem(state);
+  const { panelFilterElements } = state;
+
+  const defaultSectionTitle = t('cairo.filtersPanel.sections.default.title');
+
+  const { groups, defaultGroup } = panelFilterElements.reduce<{
+    groups: Record<string, NonNullable<AccordionProps['items']>>;
+    defaultGroup: NonNullable<AccordionProps['items']>;
+  }>(
+    (accumulator, item) => {
+      const sectionTitle = item.props?.sectionTitle;
+
+      if (!sectionTitle) {
+        return {
+          ...accumulator,
+          defaultGroup: [...accumulator.defaultGroup, buildAccordionItem(item)],
+        };
+      }
+
+      const groupItems = accumulator.groups[sectionTitle]
+        ? [...accumulator.groups[sectionTitle], buildAccordionItem(item)]
+        : [
+            accordionSectionItemBuilder({ title: sectionTitle }),
+            buildAccordionItem(item),
+          ];
+
+      return {
+        ...accumulator,
+        groups: {
+          ...accumulator.groups,
+          [sectionTitle]: groupItems,
+        },
+      };
+    },
+    {
+      groups: {},
+      defaultGroup: [],
+    },
+  );
+
+  const items = Object.values(groups).flat();
+
+  if (!items.length) {
+    return defaultGroup;
+  }
+
+  return [
+    ...items,
+    ...(defaultGroup.length
+      ? [
+          accordionSectionItemBuilder({ title: defaultSectionTitle }),
+          ...defaultGroup,
+        ]
+      : []),
+  ];
+}