How to use the @uifabric/example-app-base.lorem function in @uifabric/example-app-base

getTileLayout,
  renderTileWithLayout
} from '@uifabric/experiments';
import { lorem } from '@uifabric/example-app-base';
import * as TileExampleStylesModule from './Tile.Example.scss';

// tslint:disable-next-line:no-any
const TileExampleStyles = TileExampleStylesModule as any;

const ITEMS: { name: string; activity: string }[] = [
  {
    name: lorem(2),
    activity: lorem(6)
  },
  {
    name: lorem(2),
    activity: lorem(6)
  },
  {
    name: lorem(2),
    activity: lorem(6)
  },
  {
    name: lorem(2),
    activity: lorem(6)
  },
  {
    name: lorem(2),
    activity: lorem(6)
  }
];

renderTileWithLayout
} from '@uifabric/experiments';
import { lorem } from '@uifabric/example-app-base';
import * as TileExampleStylesModule from './Tile.Example.scss';

const ITEMS: { name: string; activity: string }[] = [
  {
    name: lorem(2),
    activity: lorem(6)
  },
  {
    name: lorem(2),
    activity: lorem(6)
  },
  {
    name: lorem(2),
    activity: lorem(6)
  },
  {
    name: lorem(2),
    activity: lorem(6)
  }
];

// tslint:disable-next-line:no-any
const TileExampleStyles = TileExampleStylesModule as any;

interface IImageTileProps {
  tileSize: ISize;
  originalImageSize: ISize;
  showBackground: boolean;
  item: typeof ITEMS[0];

} from '@uifabric/experiments';
import { lorem } from '@uifabric/example-app-base';
import * as TileExampleStylesModule from './Tile.Example.scss';

const ITEMS: { name: string; activity: string }[] = [
  {
    name: lorem(2),
    activity: lorem(6)
  },
  {
    name: lorem(2),
    activity: lorem(6)
  },
  {
    name: lorem(2),
    activity: lorem(6)
  },
  {
    name: lorem(2),
    activity: lorem(6)
  }
];

// tslint:disable-next-line:no-any
const TileExampleStyles = TileExampleStylesModule as any;

interface IImageTileProps {
  tileSize: ISize;
  originalImageSize: ISize;
  showBackground: boolean;
  item: typeof ITEMS[0];
}

export function createDocumentItems(count: number, indexOffset: number): IExampleItem[] {
  const items: IExampleItem[] = [];

  for (let i = 0; i < count; i++) {
    items.push({
      key: `item-${indexOffset + i}`,
      name: lorem(4),
      index: indexOffset + i,
      aspectRatio: 1
    });
  }

  return items;
}

export function createGroup(items: IExampleItem[], type: 'document' | 'media', index: number): IExampleGroup {
  return {
    items: items,
    index: index,
    name: lorem(4),
    type: type,
    key: `group-${index}`
  };
}

export function createMediaItems(count: number, indexOffset: number): IExampleItem[] {
  const items: IExampleItem[] = [];

  for (let i = 0; i < count; i++) {
    const seed = Math.random();

    items.push({
      key: `item-${indexOffset + i}`,
      name: lorem(4),
      index: indexOffset + i,
      aspectRatio: ENTRIES.filter((entry: { probability: number; aspectRatio: number }) => seed >= entry.probability)[0].aspectRatio
    });
  }

  return items;
}

const SignalExample: React.StatelessComponent = (props: ISignalExampleProps): JSX.Element => {
  const { text = lorem(4) } = props;

  return (
    <div>
      <h3>{props.name}</h3>
      {text}
    </div>
  );
};

import * as React from 'react';
import { SignalField, SignalFieldMode, YouCheckedOutSignal, AwaitingApprovalSignal } from '@uifabric/experiments';
import { lorem } from '@uifabric/example-app-base';
import { Checkbox } from 'office-ui-fabric-react';

export interface ISignalFieldBasicExampleState {
  mode: SignalFieldMode;
}

const text = lorem(4);

export class SignalFieldBasicExample extends React.Component<{}, ISignalFieldBasicExampleState> {
  constructor(props: {}) {
    super(props);

    this.state = {
      mode: 'compact'
    };
  }

  public render(): JSX.Element {
    return (
      <div>
        
        </div>

activity: lorem(6),
    childCount: 4
  },
  {
    name: lorem(2),
    activity: lorem(6)
  },
  {
    name: lorem(2),
    activity: lorem(6),
    isShared: true,
    childCount: 4
  },
  {
    name: lorem(2),
    activity: lorem(6),
    childCount: 4
  },
  {
    name: lorem(2),
    activity: lorem(6),
    childCount: 4
  }
];

interface IFolderTileWithThumbnailProps {
  folderCoverType?: FolderCoverType;
  originalImageSize?: ISize;
  size: 'small' | 'large';
  item: typeof ITEMS[0];
}

showBackgroundFrame={true}
        itemName={item.name}
        itemActivity={
          <>
            <div style="{{">
              {pixelWidth} × {pixelHeight} · 3.14&nbsp;MB
            </div>
            
                  
                  
                
              }
            &gt;
              {lorem(7)}
            
          
        }
        nameplateOnlyOnHover={this.state.nameplateOnlyOnHover}
      /&gt;
    );

    const { backgroundSize = { width: 0, height: 0 } } = getTileLayout(tile);

    return renderTileWithLayout(tile, {
      background: (
        <img src="{`//placehold.it/${Math.round(backgroundSize.width)}x${Math.round(backgroundSize.height)}`}">
      )