@wix/patterns-fields 1.0.0

package/package.json

@@ -0,0 +1,185 @@
+{
+  "name": "@wix/patterns-fields",
+  "version": "1.0.0",
+  "license": "UNLICENSED",
+  "author": {
+    "name": "Kobi",
+    "email": "kobia@wix.com"
+  },
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/types/index.d.ts",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js"
+    },
+    "./auto-field-types": {
+      "types": "./dist/types/exports/auto-field-types.d.ts",
+      "import": "./dist/esm/exports/auto-field-types.js",
+      "require": "./dist/cjs/exports/auto-field-types.js"
+    },
+    "./validations": {
+      "types": "./dist/types/exports/validations.d.ts",
+      "import": "./dist/esm/exports/validations.js",
+      "require": "./dist/cjs/exports/validations.js"
+    },
+    "./types": {
+      "types": "./dist/types/exports/types.d.ts",
+      "import": "./dist/esm/exports/types.js",
+      "require": "./dist/cjs/exports/types.js"
+    },
+    "./unidriver": {
+      "types": "./dist/types/exports/unidriver.d.ts",
+      "import": "./dist/esm/exports/unidriver.js",
+      "require": "./dist/cjs/exports/unidriver.js"
+    },
+    "./rich-content/rich-content-view": {
+      "types": "./dist/types/exports/rich-content-view.d.ts",
+      "import": "./dist/esm/exports/rich-content-view.js",
+      "require": "./dist/cjs/exports/rich-content-view.js"
+    },
+    "./form-document-field": {
+      "types": "./dist/types/exports/form-document-field.d.ts",
+      "import": "./dist/esm/exports/form-document-field.js",
+      "require": "./dist/cjs/exports/form-document-field.js"
+    },
+    "./form-media-gallery-field": {
+      "types": "./dist/types/exports/form-media-gallery-field.d.ts",
+      "import": "./dist/esm/exports/form-media-gallery-field.js",
+      "require": "./dist/cjs/exports/form-media-gallery-field.js"
+    },
+    "./form-rich-content-input": {
+      "types": "./dist/types/exports/form-rich-content-input.d.ts",
+      "import": "./dist/esm/exports/form-rich-content-input.js",
+      "require": "./dist/cjs/exports/form-rich-content-input.js"
+    },
+    "./providers": {
+      "types": "./dist/types/exports/providers.d.ts",
+      "import": "./dist/esm/exports/providers.js",
+      "require": "./dist/cjs/exports/providers.js"
+    },
+    "./src/styles.global.css": {
+      "default": "./src/styles.global.css"
+    }
+  },
+  "files": [
+    "dist/cjs",
+    "dist/esm",
+    "dist/types",
+    "src",
+    "!dist/**/__tests__",
+    "auto-field-types",
+    "validations",
+    "types",
+    "unidriver",
+    "rich-content",
+    "form-document-field",
+    "form-media-gallery-field",
+    "form-rich-content-input",
+    "providers"
+  ],
+  "scripts": {
+    "build": "yarn stc:all && yarn build:translations && yoshi-library build",
+    "start": "yarn stc:all && yarn build:translations && yoshi-library start",
+    "build:translations": "yarn build:translations:types & yarn build:translations:imports",
+    "build:translations:types": "npx ts-node --project tsconfig.scripts.json -T scripts/generate-keys.ts && npx prettier src/services/translations.ts --write",
+    "build:translations:imports": "npx ts-node --project tsconfig.scripts.json -T scripts/generate-translations-imports.ts && npx prettier src/services/translationsImportsMap.ts --write",
+    "test": "yarn test:unit",
+    "test:unit": "yoshi-library test",
+    "lint": "yoshi-library lint",
+    "type-check": "tsc --noEmit",
+    "stc:all": "yarn stc:bundle && yarn stc:src && yarn stc:ts",
+    "stc:bundle": "stc --srcDir=./src --outDir=src --bundle=styles.global.css --minify --optimize",
+    "stc:src": "stc --srcDir=./src --outDir=src --esm --esmExt=.js --inlineRuntime --optimize",
+    "stc:ts": "npx ts-node -T scripts/rename-st-css-files.ts"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.0.0",
+    "@wix/atlas": "^1.0.35",
+    "@wix/data": "^1.0.323",
+    "@wix/media": "^1.0.231",
+    "@wix/patterns-fields-utils": "1.0.0",
+    "@wix/rich-content": "1.0.37",
+    "@wix/ricos": "^10.155.2",
+    "@wix/wix-ui-icons-common": "^3.100.0",
+    "color": "^2.0.1",
+    "draft-js": "^0.11.7",
+    "draft-js-export-html": "^1.4.1",
+    "draft-js-import-html": "^1.4.1",
+    "draftjs-conductor": "^2.0.4",
+    "immutable": "^3.8.3",
+    "lodash": "^4.17.21",
+    "semver": "^7.7.3",
+    "uuid": "^8.3.2"
+  },
+  "devDependencies": {
+    "@formatjs/icu-messageformat-parser": "^2.7.6",
+    "@stylable/cli": "^5.19.0",
+    "@stylable/runtime": "^5.19.0",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^11.2.7",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/color": "^2.0.5",
+    "@types/draft-js": "^0.11.18",
+    "@types/jest": "^27.5.2",
+    "@types/lodash": "^4.17.20",
+    "@types/react": "^16.14.68",
+    "@wix/design-system": "^1.247.1",
+    "@wix/eslint-config-yoshi": "^6.74.0",
+    "@wix/jest-yoshi-preset": "^6.74.0",
+    "@wix/patterns": "^1.360.0",
+    "@wix/sdk": "^1.17.2",
+    "@wix/wix-data-items-common": "^1.0.270",
+    "@wix/wix-ui-test-utils": "^1.3.3",
+    "@wix/yoshi-flow-library": "^6.74.0",
+    "@wix/yoshi-style-dependencies": "^6.74.0",
+    "globby": "^11.0.0",
+    "react": "16.14.0",
+    "ts-node": "^10.9.1",
+    "typescript": "~4.9.5"
+  },
+  "peerDependencies": {
+    "@wix/dashboard": "^1.3.33",
+    "@wix/design-system": "^1.204.0",
+    "@wix/patterns": "^1.360.0",
+    "react": "^16.8.0 || ^18.0.0"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "eslintConfig": {
+    "extends": "@wix/eslint-config-yoshi",
+    "overrides": [
+      {
+        "files": [
+          "src/**/*.ts*"
+        ],
+        "rules": {
+          "no-console": [
+            "error",
+            {
+              "allow": [
+                "warn",
+                "error"
+              ]
+            }
+          ]
+        }
+      }
+    ]
+  },
+  "wix": {
+    "artifact": {
+      "groupId": "com.wixpress",
+      "artifactId": "patterns-fields"
+    },
+    "framework": {
+      "type": "yoshi-flow-library"
+    }
+  },
+  "falconPackageHash": "b24dc0ced4f41f45cc9266bf407d76b0a58da55a679b4afa652e873a"
+}

package/providers/package.json

@@ -0,0 +1,5 @@
+{
+  "main": "../dist/cjs/exports/providers.js",
+  "module": "../dist/esm/exports/providers.js",
+  "types": "../dist/types/exports/providers.d.ts"
+}

package/rich-content/rich-content-view/package.json

@@ -0,0 +1,5 @@
+{
+  "main": "../../dist/cjs/exports/rich-content-view.js",
+  "module": "../../dist/esm/exports/rich-content-view.js",
+  "types": "../../dist/types/exports/rich-content-view.d.ts"
+}

package/src/__tests__/components/address/address-input.driver.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { render, act, RenderResult } from '@testing-library/react';
+
+import { AddressInput, AddressInputProps } from '../../../components/address';
+
+import type { AtlasService } from '../../../services/atlas';
+import { AddressInputUniDriver } from '../../../components/address/input/address-input.uni.driver';
+import { uniTestkitFactoryCreator } from '@wix/wix-ui-test-utils/testing-library';
+import { flush } from '@wix/patterns/testkit';
+import { PatternsFieldsTestProvider } from '../../../testkit/patterns-fields-test-provider';
+
+const SEARCH_DEBOUNCE_MS = 250;
+
+export class AddressInputDriver {
+  private _renderResult?: RenderResult;
+  readonly _mockService?: AtlasService;
+
+  constructor(options: { service?: AtlasService }) {
+    this._mockService = options.service;
+  }
+
+  get renderResult() {
+    if (this._renderResult == null) {
+      throw new Error('Driver was not initialized');
+    }
+
+    return this._renderResult;
+  }
+
+  get addressInput() {
+    return uniTestkitFactoryCreator(AddressInputUniDriver)({
+      wrapper: this.renderResult.container,
+      dataHook: 'address-input',
+    });
+  }
+
+  waitForDebounce() {
+    return act(async () => {
+      jest.advanceTimersByTime(SEARCH_DEBOUNCE_MS);
+    });
+  }
+
+  render(props: AddressInputProps) {
+    this._renderResult = render(
+      <AddressInput {...props} atlasService={this._mockService} />,
+      { wrapper: PatternsFieldsTestProvider },
+    );
+  }
+
+  async flush(iterations?: number) {
+    return flush(iterations);
+  }
+}

package/src/__tests__/components/address/address-input.spec.tsx

@@ -0,0 +1,75 @@
+import type { Address } from '../../../types/address';
+import { AddressInputDriver } from './address-input.driver';
+import { AtlasService } from '../../../services/atlas';
+import {
+  createAsyncAtlasServiceMock,
+  createAtlasServiceMock,
+} from '../../../services/atlas/atlas-service-mock';
+
+describe('AddressInput', () => {
+  const mockAddress: Address = {
+    formatted: 'Halimon 25, Tel Mond, IL',
+    city: 'Tel Mond',
+    country: 'IL',
+  };
+
+  const setup = async ({
+    mockAtlasService,
+    initialValue,
+  }: {
+    mockAtlasService?: AtlasService;
+    initialValue?: Address;
+  } = {}) => {
+    const driver = new AddressInputDriver({ service: mockAtlasService });
+    driver.render({ value: initialValue });
+
+    await driver.flush();
+    return { driver };
+  };
+
+  it('renders with initial value displayed', async () => {
+    const { driver } = await setup({ initialValue: mockAddress });
+
+    expect(await driver.addressInput.exists()).toBe(true);
+    expect(await driver.addressInput.getInputValue()).toBe(
+      'Halimon 25, Tel Mond, IL',
+    );
+  });
+
+  it('triggers debounced search on input change', async () => {
+    const mockService = createAtlasServiceMock();
+    const { driver } = await setup({ mockAtlasService: mockService });
+
+    await driver.addressInput.enterText('New York');
+
+    expect(mockService.searchAddress).not.toHaveBeenCalled();
+
+    await driver.waitForDebounce();
+
+    expect(mockService.searchAddress).toHaveBeenCalledWith('New York');
+  });
+
+  it('shows loading state during search', async () => {
+    const mockService = createAsyncAtlasServiceMock([], 1000);
+    const { driver } = await setup({ mockAtlasService: mockService });
+
+    await driver.addressInput.enterText('Test');
+    await driver.addressInput.pressEnter();
+
+    await driver.waitForDebounce();
+    expect(await driver.addressInput.isLoading()).toBe(true);
+  });
+
+  it('handles empty search results', async () => {
+    const mockService = createAtlasServiceMock([]);
+    const { driver } = await setup({ mockAtlasService: mockService });
+
+    expect(await driver.addressInput.exists()).toBe(true);
+
+    await driver.addressInput.enterText('Test address');
+    await driver.waitForDebounce();
+
+    expect(await driver.addressInput.getInputValue()).toBe('Test address');
+    expect(await driver.addressInput.getAmountOfItems()).toBe(0);
+  });
+});

package/src/__tests__/components/address/address-view.driver.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { RenderResult, render } from '@testing-library/react';
+import { AddressView, AddressViewProps } from '../../../components/address';
+import { flush } from '@wix/patterns/testkit';
+import { uniTestkitFactoryCreator } from '@wix/wix-ui-test-utils/testing-library';
+import { AddressViewUniDriver } from '../../../components/address/view/address-view.uni.driver';
+
+export class AddressViewDriver {
+  private _renderResult?: RenderResult;
+
+  get renderResult() {
+    if (this._renderResult == null) {
+      throw new Error('Driver was not initialized');
+    }
+
+    return this._renderResult;
+  }
+
+  get addressView() {
+    return uniTestkitFactoryCreator(AddressViewUniDriver)({
+      wrapper: this.renderResult.container,
+      dataHook: 'address-view',
+    });
+  }
+
+  render(props: AddressViewProps) {
+    this._renderResult = render(<AddressView {...props} />);
+  }
+
+  async flush(iterations?: number) {
+    return flush(iterations);
+  }
+}

package/src/__tests__/components/address/address-view.spec.tsx

@@ -0,0 +1,32 @@
+import type { Address } from '../../../types/address';
+import { AddressViewDriver } from './address-view.driver';
+
+describe('AddressView', () => {
+  const mockAddress: Address = {
+    formatted: 'Halimon 25, Tel Mond, IL',
+    city: 'Tel Mond',
+    country: 'IL',
+  };
+
+  const setup = async ({ data }: { data?: Address } = {}) => {
+    const driver = new AddressViewDriver();
+    driver.render({ data });
+
+    await driver.flush();
+    return { driver };
+  };
+
+  it('renders formatted address string', async () => {
+    const { driver } = await setup({ data: mockAddress });
+
+    expect(await driver.addressView.exists()).toBe(true);
+    expect(await driver.addressView.getText()).toBe('Halimon 25, Tel Mond, IL');
+  });
+
+  it('renders empty string for undefined data', async () => {
+    const { driver } = await setup();
+
+    expect(await driver.addressView.exists()).toBe(true);
+    expect(await driver.addressView.getText()).toBe('');
+  });
+});

package/src/__tests__/components/form-multi-document-field.spec.tsx

@@ -0,0 +1,286 @@
+import React from 'react';
+import { act, render, screen } from '@testing-library/react';
+import { getMediaTitle } from '../../auto-field-types';
+import {
+  AddItemTestkit,
+  TableActionCellTestkit,
+  TextButtonTestkit,
+} from '@wix/design-system/dist/testkit';
+
+import type { FormMediaControlProps } from '../../components/media-control';
+import { FormMultiDocumentField } from '../../components/multi-document';
+import { PatternsFieldsTestProvider } from '../../testkit/patterns-fields-test-provider';
+
+// Mock the useWithCallback hook
+jest.mock('../../hooks/use-with-callback', () => ({
+  useWithCallback: (callback: unknown) => callback,
+}));
+
+// Mock useWixPatternsContainer
+jest.mock('@wix/patterns', () => ({
+  useWixPatternsContainer: () => ({
+    environment: { msid: 'test-meta-site-id' },
+  }),
+}));
+
+// Mock variables for media control
+const mockCallMedia = jest.fn();
+const mockDownloadMedia = jest.fn();
+const mockOnOpen = jest.fn(() => jest.fn());
+const mockOnClose = jest.fn();
+const mockOnSave = jest.fn();
+
+jest.mock('../../components/media-control', () => {
+  const actual = jest.requireActual('../../components/media-control');
+  return {
+    ...actual,
+    useMediaControl: () => ({
+      callMedia: mockCallMedia,
+      downloadMedia: mockDownloadMedia,
+      loading: false,
+    }),
+    usePasteURLForm: () => ({
+      isOpen: false,
+      title: 'Paste URL',
+      value: undefined,
+      onOpen: mockOnOpen,
+      onClose: mockOnClose,
+      onSave: mockOnSave,
+    }),
+    useDocumentDelete: ({
+      data,
+      onChange,
+    }: {
+      data: string[];
+      onChange: (value: string[]) => void;
+    }) => ({
+      isOpen: false,
+      onDelete: (index: number) => () => {
+        const nextData = [...data];
+        nextData.splice(index, 1);
+        onChange(nextData);
+      },
+      onDeleteCancel: jest.fn(),
+      onDeleteConfirm: jest.fn(),
+      title: 'Delete Document',
+      text: 'Are you sure?',
+    }),
+  };
+});
+
+describe('<FormMultiDocumentField/>', () => {
+  const inputDataHook = 'multi-document-input';
+
+  const multiDocumentsData = [
+    'wix:document://v1/ugd/fefc9f_d8295aad65e0419fb9301388ef94369c.pdf/wix-pdf.pdf',
+    'wix:document://v1/ugd/fefc9f_8b0cbb8466bc488cbda6ab1eaf642e02.pdf/Untitled.pdf',
+    'wix:audio://v1/fefc9f_692cfee4742648a9971136ead5d8d005.mp3/SampleAudio_0.4mb.mp3#duration=28',
+  ];
+
+  let onChange: jest.Mock;
+  let onClear: jest.Mock;
+  let onInput: jest.Mock;
+
+  beforeEach(() => {
+    onChange = jest.fn();
+    onClear = jest.fn();
+    onInput = jest.fn();
+    mockCallMedia.mockClear();
+    mockDownloadMedia.mockClear();
+    mockOnOpen.mockClear();
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  function renderMultiDocumentField(
+    props: Partial<FormMediaControlProps<string[]>> = {},
+  ) {
+    const defaultProps: FormMediaControlProps<string[]> = {
+      data: undefined,
+      onChange,
+      onClear,
+      onInput,
+      dataHook: inputDataHook,
+    };
+
+    return render(<FormMultiDocumentField {...defaultProps} {...props} />, {
+      wrapper: PatternsFieldsTestProvider,
+    });
+  }
+
+  describe('Multi Document Input (empty state)', () => {
+    it('should render add document and paste URL buttons when no data', () => {
+      renderMultiDocumentField({ data: undefined });
+      const addDocumentButton = screen.getByTestId('add-document-button');
+      expect(addDocumentButton).toBeInTheDocument();
+
+      const pasteURLButton = screen.getByTestId('paste-url-button');
+      expect(pasteURLButton).toBeInTheDocument();
+    });
+
+    it('should call callMedia when add document button is clicked', async () => {
+      const { baseElement } = renderMultiDocumentField({ data: undefined });
+
+      const addItemButton = AddItemTestkit({
+        wrapper: baseElement,
+        dataHook: 'add-document-button',
+      });
+
+      await addItemButton.click();
+
+      expect(mockCallMedia).toHaveBeenCalled();
+    });
+
+    it('should call onOpen when paste URL button is clicked', async () => {
+      const { baseElement } = renderMultiDocumentField({ data: undefined });
+
+      const pasteUrlTestkit = TextButtonTestkit({
+        wrapper: baseElement,
+        dataHook: 'paste-url-button',
+      });
+
+      await pasteUrlTestkit.click();
+
+      expect(mockOnOpen).toHaveBeenCalled();
+    });
+  });
+
+  describe('Multi Document View (with data)', () => {
+    it('should render add document button when data exists', () => {
+      renderMultiDocumentField({ data: multiDocumentsData });
+
+      const addDocumentButton = screen.getByTestId(
+        'multi-document-field-add-document-button',
+      );
+      expect(addDocumentButton).toBeInTheDocument();
+    });
+
+    it('should render paste URL button when data exists', () => {
+      renderMultiDocumentField({ data: multiDocumentsData });
+
+      const pasteURLButton = screen.getByTestId('paste-url-button');
+      expect(pasteURLButton).toBeInTheDocument();
+    });
+
+    it('should render all document items in the list', () => {
+      renderMultiDocumentField({ data: multiDocumentsData });
+
+      multiDocumentsData.forEach((_, index) => {
+        const documentItem = screen.getByTestId(
+          `multi-document-field-document-${index}`,
+        );
+        expect(documentItem).toBeInTheDocument();
+      });
+    });
+
+    it('should display correct document titles', () => {
+      renderMultiDocumentField({ data: multiDocumentsData });
+
+      multiDocumentsData.forEach((documentUri) => {
+        const expectedTitle = getMediaTitle(documentUri);
+        const titleElements = screen.getAllByText(expectedTitle);
+        expect(titleElements.length).toBeGreaterThan(0);
+      });
+    });
+
+    it('should render document with Open action button', () => {
+      renderMultiDocumentField({ data: multiDocumentsData });
+
+      const openButton = screen.getAllByTestId('document-view-open-action');
+      expect(openButton.length).toBeGreaterThan(0);
+    });
+
+    it('should render document with actions menu', async () => {
+      renderMultiDocumentField({ data: multiDocumentsData });
+
+      const actionsButtons = screen.getAllByTestId(
+        'document-view-actions-button',
+      );
+      expect(actionsButtons.length).toBeGreaterThan(0);
+    });
+
+    it('should call callMedia when add document button is clicked with data', async () => {
+      const { baseElement } = renderMultiDocumentField({
+        data: multiDocumentsData,
+      });
+
+      const addButton = AddItemTestkit({
+        wrapper: baseElement,
+        dataHook: `add-document-button`,
+      });
+
+      await addButton.click();
+
+      expect(mockCallMedia).toHaveBeenCalled();
+    });
+  });
+
+  describe('Document item actions', () => {
+    it('should call downloadMedia when download action is clicked', async () => {
+      const { baseElement } = renderMultiDocumentField({
+        data: multiDocumentsData,
+      });
+
+      const documentControlActionsTestkit = TableActionCellTestkit({
+        wrapper: baseElement,
+        dataHook: `multi-document-field-document-0`,
+      });
+
+      const downloadElement =
+        await documentControlActionsTestkit.getVisibleActionByDataHookButtonDriver(
+          'document-view-download-action',
+        );
+
+      expect(await downloadElement.exists()).toBe(true);
+
+      const downloadAction = (await downloadElement.element()).querySelector(
+        'button',
+      );
+      expect(downloadAction).toBeInTheDocument();
+
+      await downloadAction.click();
+
+      expect(mockDownloadMedia).toHaveBeenCalledWith(multiDocumentsData[0]);
+    });
+
+    it('should render Downlowd, Replace, ReplaceByURl, Delete action in the document menu', async () => {
+      const { baseElement } = renderMultiDocumentField({
+        data: multiDocumentsData,
+      });
+
+      const documentControlActionsTestkit = TableActionCellTestkit({
+        wrapper: baseElement,
+        dataHook: `multi-document-field-document-0`,
+      });
+
+      const secondaryActionsTestKit =
+        await documentControlActionsTestkit.getHiddenActionsPopoverMenuDriver();
+
+      await act(async () => {
+        await documentControlActionsTestkit.clickPopoverMenu();
+      });
+
+      const replaceAction =
+        await documentControlActionsTestkit.getVisibleActionByDataHookButtonDriver(
+          'document-view-replace-action',
+        );
+
+      // no text for the visibleAction so just verify it exists
+      expect(await replaceAction.exists()).toBe(true);
+
+      expect(await secondaryActionsTestKit.isMenuOpen()).toBe(true);
+      expect(await secondaryActionsTestKit.itemContentAt(0)).toContain(
+        'replace',
+      );
+      expect(await secondaryActionsTestKit.itemContentAt(1)).toContain(
+        'replaceWithUrl',
+      );
+      // item(2) is a seperator so we skip it
+      expect(await secondaryActionsTestKit.itemContentAt(3)).toContain(
+        'delete',
+      );
+    });
+  });
+});