[CCI] Migrate from faker to @faker-js/faker

package.json

@@ -120,6 +120,7 @@
     "vfile": "^4.2.0"
   },
   "devDependencies": {
+    "@faker-js/faker": "^7.6.0",
     "@axe-core/puppeteer": "^4.1.1",
     "@babel/cli": "^7.10.5",
     "@babel/core": "^7.11.4",
@@ -189,7 +190,6 @@
     "eslint-plugin-react": "^7.21.3",
     "eslint-plugin-react-hooks": "^4.1.2",
     "expose-gc": "^1.0.0",
-    "faker": "^4.1.0",
     "file-loader": "^6.1.0",
     "findup": "^0.1.5",
     "fork-ts-checker-webpack-plugin": "^5.1.0",

src-docs/src/views/datagrid/additional_controls.js

@@ -10,7 +10,7 @@
  */
 
 import React, { useState, useCallback, Fragment } from 'react';
-import { fake } from 'faker';
+import { faker } from '@faker-js/faker';
 
 import {
   OuiDataGrid,
@@ -40,13 +40,17 @@ const data = [];
 
 for (let i = 1; i < 20; i++) {
   data.push({
-    name: fake('{{name.lastName}}, {{name.firstName}} {{name.suffix}}'),
-    email: fake('{{internet.email}}'),
+    name: faker.helpers.fake(
+      '{{name.lastName}}, {{name.firstName}} {{name.suffix}}'
+    ),
+    email: faker.helpers.fake('{{internet.email}}'),
     city: (
-      <OuiLink href="http://google.com">{fake('{{address.city}}')}</OuiLink>
+      <OuiLink href="http://google.com">
+        {faker.helpers.fake('{{address.city}}')}
+      </OuiLink>
     ),
-    country: fake('{{address.country}}'),
-    account: fake('{{finance.account}}'),
+    country: faker.helpers.fake('{{address.country}}'),
+    account: faker.helpers.fake('{{finance.account}}'),
   });
 }
 

src-docs/src/views/datagrid/column_actions.js

@@ -10,7 +10,7 @@
  */
 
 import React, { useState, useCallback } from 'react';
-import { fake } from 'faker';
+import { faker } from '@faker-js/faker';
 
 import { OuiDataGrid, OuiAvatar } from '../../../../src/components/';
 
@@ -68,14 +68,16 @@ for (let i = 1; i < 5; i++) {
     avatar: (
       <OuiAvatar
         size="s"
-        name={fake('{{name.lastName}}, {{name.firstName}}')}
+        name={faker.helpers.fake('{{name.lastName}}, {{name.firstName}}')}
       />
     ),
-    name: fake('{{name.lastName}}, {{name.firstName}} {{name.suffix}}'),
-    email: fake('{{internet.email}}'),
-    city: fake('{{address.city}}'),
-    country: fake('{{address.country}}'),
-    account: fake('{{finance.account}}'),
+    name: faker.helpers.fake(
+      '{{name.lastName}}, {{name.firstName}} {{name.suffix}}'
+    ),
+    email: faker.helpers.fake('{{internet.email}}'),
+    city: faker.helpers.fake('{{address.city}}'),
+    country: faker.helpers.fake('{{address.country}}'),
+    account: faker.helpers.fake('{{finance.account}}'),
   });
 }
 

src-docs/src/views/datagrid/column_cell_actions.js

@@ -10,7 +10,7 @@
  */
 
 import React, { useState, useCallback } from 'react';
-import { fake } from 'faker';
+import { faker } from '@faker-js/faker';
 
 import { OuiDataGrid, OuiAvatar } from '../../../../src/components/';
 
@@ -115,14 +115,16 @@ for (let i = 1; i < 5; i++) {
     avatar: (
       <OuiAvatar
         size="s"
-        name={fake('{{name.lastName}}, {{name.firstName}}')}
+        name={faker.helpers.fake('{{name.lastName}}, {{name.firstName}}')}
       />
     ),
-    name: fake('{{name.lastName}}, {{name.firstName}} {{name.suffix}}'),
-    email: fake('{{internet.email}}'),
-    city: fake('{{address.city}}'),
-    country: fake('{{address.country}}'),
-    account: fake('{{finance.account}}'),
+    name: faker.helpers.fake(
+      '{{name.lastName}}, {{name.firstName}} {{name.suffix}}'
+    ),
+    email: faker.helpers.fake('{{internet.email}}'),
+    city: faker.helpers.fake('{{address.city}}'),
+    country: faker.helpers.fake('{{address.country}}'),
+    account: faker.helpers.fake('{{finance.account}}'),
   });
 }
 

src-docs/src/views/datagrid/column_widths.js

@@ -10,7 +10,7 @@
  */
 
 import React, { useState, useCallback } from 'react';
-import { fake } from 'faker';
+import { faker } from '@faker-js/faker';
 
 import { OuiDataGrid, OuiAvatar } from '../../../../src/components/';
 
@@ -45,14 +45,16 @@ for (let i = 1; i < 5; i++) {
     avatar: (
       <OuiAvatar
         size="s"
-        name={fake('{{name.lastName}}, {{name.firstName}}')}
+        name={faker.helpers.fake('{{name.lastName}}, {{name.firstName}}')}
       />
     ),
-    name: fake('{{name.lastName}}, {{name.firstName}} {{name.suffix}}'),
-    email: fake('{{internet.email}}'),
-    city: fake('{{address.city}}'),
-    country: fake('{{address.country}}'),
-    account: fake('{{finance.account}}'),
+    name: faker.helpers.fake(
+      '{{name.lastName}}, {{name.firstName}} {{name.suffix}}'
+    ),
+    email: faker.helpers.fake('{{internet.email}}'),
+    city: faker.helpers.fake('{{address.city}}'),
+    country: faker.helpers.fake('{{address.country}}'),
+    account: faker.helpers.fake('{{finance.account}}'),
   });
 }
 

src-docs/src/views/datagrid/container.js

@@ -10,7 +10,7 @@
  */
 
 import React, { useState, useCallback } from 'react';
-import { fake } from 'faker';
+import { faker } from '@faker-js/faker';
 
 import { OuiDataGrid, OuiPanel, OuiLink } from '../../../../src/components/';
 
@@ -36,13 +36,17 @@ const data = [];
 
 for (let i = 1; i < 20; i++) {
   data.push({
-    name: fake('{{name.lastName}}, {{name.firstName}} {{name.suffix}}'),
-    email: fake('{{internet.email}}'),
+    name: faker.helpers.fake(
+      '{{name.lastName}}, {{name.firstName}} {{name.suffix}}'
+    ),
+    email: faker.helpers.fake('{{internet.email}}'),
     city: (
-      <OuiLink href="http://google.com">{fake('{{address.city}}')}</OuiLink>
+      <OuiLink href="http://google.com">
+        {faker.helpers.fake('{{address.city}}')}
+      </OuiLink>
     ),
-    country: fake('{{address.country}}'),
-    account: fake('{{finance.account}}'),
+    country: faker.helpers.fake('{{address.country}}'),
+    account: faker.helpers.fake('{{finance.account}}'),
   });
 }
 

src-docs/src/views/datagrid/control_columns.js

@@ -17,7 +17,7 @@ import React, {
   useState,
   Fragment,
 } from 'react';
-import { fake } from 'faker';
+import { faker } from '@faker-js/faker';
 
 import {
   OuiDataGrid,
@@ -72,14 +72,16 @@ for (let i = 1; i < 500; i++) {
     avatar: (
       <OuiAvatar
         size="s"
-        name={fake('{{name.lastName}}, {{name.firstName}}')}
+        name={faker.helpers.fake('{{name.lastName}}, {{name.firstName}}')}
       />
     ),
-    name: fake('{{name.lastName}}, {{name.firstName}} {{name.suffix}}'),
-    email: fake('{{internet.email}}'),
-    city: fake('{{address.city}}'),
-    country: fake('{{address.country}}'),
-    account: fake('{{finance.account}}'),
+    name: faker.helpers.fake(
+      '{{name.lastName}}, {{name.firstName}} {{name.suffix}}'
+    ),
+    email: faker.helpers.fake('{{internet.email}}'),
+    city: faker.helpers.fake('{{address.city}}'),
+    country: faker.helpers.fake('{{address.country}}'),
+    account: faker.helpers.fake('{{finance.account}}'),
   });
 }
 

src-docs/src/views/datagrid/datagrid.js

@@ -19,7 +19,7 @@ import React, {
   useContext,
   useRef,
 } from 'react';
-import { fake } from 'faker';
+import { faker } from '@faker-js/faker';
 
 import {
   OuiDataGrid,
@@ -36,31 +36,33 @@ const DataContext = createContext();
 const raw_data = [];
 
 for (let i = 1; i < 100; i++) {
-  const email = fake('{{internet.email}}');
-  const name = fake('{{name.lastName}}, {{name.firstName}}');
-  const suffix = fake('{{name.suffix}}');
+  const email = faker.helpers.fake('{{internet.email}}');
+  const name = faker.helpers.fake('{{name.lastName}}, {{name.firstName}}');
+  const suffix = faker.helpers.fake('{{name.suffix}}');
   raw_data.push({
     name: {
       formatted: `${name} ${suffix}`,
       raw: name,
     },
     email: {
-      formatted: <OuiLink href="">{fake('{{internet.email}}')}</OuiLink>,
+      formatted: (
+        <OuiLink href="">{faker.helpers.fake('{{internet.email}}')}</OuiLink>
+      ),
       raw: email,
     },
     location: (
       <Fragment>
-        {`${fake('{{address.city}}')}, `}
+        {`${faker.helpers.fake('{{address.city}}')}, `}
         <OuiLink href="https://google.com">
-          {fake('{{address.country}}')}
+          {faker.helpers.fake('{{address.country}}')}
         </OuiLink>
       </Fragment>
     ),
-    date: fake('{{date.past}}'),
-    account: fake('{{finance.account}}'),
-    amount: fake('${{commerce.price}}'),
-    phone: fake('{{phone.phoneNumber}}'),
-    version: fake('{{system.semver}}'),
+    date: faker.helpers.fake('{{date.past}}'),
+    account: faker.helpers.fake('{{finance.account}}'),
+    amount: faker.helpers.fake('${{commerce.price}}'),
+    phone: faker.helpers.fake('{{phone.number}}'),
+    version: faker.helpers.fake('{{system.semver}}'),
   });
 }
 

src-docs/src/views/datagrid/focus.js

@@ -11,7 +11,7 @@
 
 /* eslint-disable jsx-a11y/accessible-emoji */
 import React, { useState, useCallback, useMemo } from 'react';
-import { fake } from 'faker';
+import { faker } from '@faker-js/faker';
 
 import {
   OuiDataGrid,
@@ -30,17 +30,17 @@ const data = [];
 
 for (let i = 0; i < 10; i++) {
   data.push([
-    <span>{fake('{{name.firstName}}')}</span>,
-    <span>{fake('{{name.firstName}}')}</span>,
+    <span>{faker.helpers.fake('{{name.firstName}}')}</span>,
+    <span>{faker.helpers.fake('{{name.firstName}}')}</span>,
 
     <span>
       <OuiLink href="#/tabular-content/data-grid-focus">
-        {fake('{{internet.email}}')}
+        {faker.helpers.fake('{{internet.email}}')}
       </OuiLink>
     </span>,
     <span>
       <OuiLink href="#/tabular-content/data-grid-focus">
-        {fake('{{internet.email}}')}
+        {faker.helpers.fake('{{internet.email}}')}
       </OuiLink>
     </span>,
 

src-docs/src/views/datagrid/footer_row.js

@@ -10,7 +10,7 @@
  */
 
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { fake } from 'faker';
+import { faker } from '@faker-js/faker';
 
 import {
   OuiDataGrid,
@@ -23,11 +23,13 @@ const raw_data = [];
 
 for (let i = 1; i < 20; i++) {
   raw_data.push({
-    name: fake('{{name.lastName}}, {{name.firstName}} {{name.suffix}}'),
-    date: fake('{{date.past}}'),
-    amount: fake('${{commerce.price}}'),
-    phone: fake('{{phone.phoneNumber}}'),
-    version: fake('{{system.semver}}'),
+    name: faker.helpers.fake(
+      '{{name.lastName}}, {{name.firstName}} {{name.suffix}}'
+    ),
+    date: faker.helpers.fake('{{date.past}}'),
+    amount: faker.helpers.fake('${{commerce.price}}'),
+    phone: faker.helpers.fake('{{phone.number}}'),
+    version: faker.helpers.fake('{{system.semver}}'),
   });
 }
 

src-docs/src/views/datagrid/in_memory.js

@@ -10,7 +10,7 @@
  */
 
 import React, { Fragment, useCallback, useMemo, useState } from 'react';
-import { fake } from 'faker';
+import { faker } from '@faker-js/faker';
 
 import { OuiDataGrid, OuiLink } from '../../../../src/components/';
 
@@ -46,21 +46,25 @@ const raw_data = [];
 
 for (let i = 1; i < 100; i++) {
   raw_data.push({
-    name: fake('{{name.lastName}}, {{name.firstName}} {{name.suffix}}'),
-    email: <OuiLink href="">{fake('{{internet.email}}')}</OuiLink>,
+    name: faker.helpers.fake(
+      '{{name.lastName}}, {{name.firstName}} {{name.suffix}}'
+    ),
+    email: (
+      <OuiLink href="">{faker.helpers.fake('{{internet.email}}')}</OuiLink>
+    ),
     location: (
       <Fragment>
-        {`${fake('{{address.city}}')}, `}
+        {`${faker.helpers.fake('{{address.city}}')}, `}
         <OuiLink href="https://google.com">
-          {fake('{{address.country}}')}
+          {faker.helpers.fake('{{address.country}}')}
         </OuiLink>
       </Fragment>
     ),
-    date: fake('{{date.past}}'),
-    account: fake('{{finance.account}}'),
-    amount: fake('${{commerce.price}}'),
-    phone: fake('{{phone.phoneNumber}}'),
-    version: fake('{{system.semver}}'),
+    date: faker.helpers.fake('{{date.past}}'),
+    account: faker.helpers.fake('{{finance.account}}'),
+    amount: faker.helpers.fake('${{commerce.price}}'),
+    phone: faker.helpers.fake('{{phone.number}}'),
+    version: faker.helpers.fake('{{system.semver}}'),
   });
 }