Provide mock data that is representative of the data that your standalone component will display or manage at run time.

If you want to use the storybook to preview your standalone component, you must create a PCore and PConnect mock function along with any required data for every function call made from the main component node.

When you create your extension DX component using Constellation DX Component Builder, the mock data relevant to the sample type and sub type will be available for modification in the mock.ts or mock.tsx file.

The process for updating this mock data for your own component use case depends upon the purpose of your component and the data it needs to function. To develop your component in the storybook, you must provide mock data that is representative of the data that will be provided to your component at run time through the PCore and PConnect APIs.

The following example is of a mock.tsx file used to provide mock data to the PCore.getDataPageUtils().getDataAsync() API.
import type { DataAsyncResponse } from '@pega/pcore-pconnect-typedefs/data-view/types';

export const newRating = {
  CustomerRating: 0,
  NumberOfStars: 5,
  CaseID: 'SL-TELLUSMORE-WORK Z-12345',
  CaseClassName: 'SL-TellUsMore-Work-Incident',
  CustomerID: 'Q1234',
  pxUpdateDateTime: '2020-06-29T11:06:24.329Z'
};

const ratingData: Omit<DataAsyncResponse, 'config'> = {
  data: [
    {
      CustomerRating: 3,
      NumberOfStars: 5,
      CaseID: 'SL-TELLUSMORE-WORK Z-1234',
      CaseClassName: 'SL-TellUsMore-Work-Incident',
      CustomerID: 'Q1234',
      pyGUID: '6876786876876868123',
      pxUpdateDateTime: '2020-06-29T11:06:24.329Z'
    },
    {
      CustomerRating: 3,
      NumberOfStars: 5,
      CaseID: 'SL-TELLUSMORE-WORK Z-123',
      CaseClassName: 'SL-TellUsMore-Work-Incident',
      CustomerID: 'Q1234',
      pyGUID: '68767868768768681',
      pxUpdateDateTime: '2020-06-29T11:06:24.329Z'
    }
  ],
  status: 200
};

export default ratingData;
This example mock data above is used in the demo.stories.tsx file as shown below to provide a mock of the PCore.getDataPageUtils().getDataAsync() function.
import mockRatingData from './mock';
import type DataPageUtils from '@pega/pcore-pconnect-typedefs/datapage/index';
import type { DataAsyncResponse } from '@pega/pcore-pconnect-typedefs/data-view/types';


const mockGetDataAsync = (
  ...args: any[]
): Promise<Partial<DataAsyncResponse>> => {
  const filter = args[4]?.filter as Filter;
  const queryCustomerID = filter?.filterConditions.F1.rhs.value;
  let { data } = mockRatingData;
  if (queryCustomerID?.length)
    data = data.filter(rating => rating.CustomerID === queryCustomerID);

  return Promise.resolve({ data, status: 200 });
};

const mockDataPageUtils = (): Partial<typeof DataPageUtils> => {
  return {
    getDataAsync: mockGetDataAsync as () => Promise<DataAsyncResponse>
  };
};

...