docs(storybook): use faker.seed to generate stable data

elastic · Apr 16, 2024 · edbc7e6 · edbc7e6
1 parent 2726b01
commit edbc7e6
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 88 deletions.
diff --git a/src/components/resizable_container/resizable_container.stories.tsx b/src/components/resizable_container/resizable_container.stories.tsx
@@ -8,6 +8,7 @@
 
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
+import { faker } from '@faker-js/faker';
 
 import { enableFunctionToggleControls } from '../../../.storybook/utils';
 import { EuiText } from '../text';
@@ -16,15 +17,14 @@ import {
   EuiResizableContainerProps,
 } from './resizable_container';
 
-// using static text over '@faker-js/faker' to ensure same output in regards to VRT
+faker.seed(42);
+
 const placeholderText = (
-  <p>
-    Autem vitae quibusdam iure aspernatur nobis. Illo dicta debitis aperiam.
-    Assumenda dicta saepe corrupti tempora. Nobis nihil ipsum esse eius
-    perspiciatis velit maiores architecto earum. Minus ipsam dignissimos
-    voluptatem eos ipsa. Laudantium eius porro autem impedit voluptatibus
-    accusamus qui adipisci.
-  </p>
+  <>
+    <p>{faker.lorem.sentences(5)}</p>
+    <p>{faker.lorem.sentences(5)}</p>
+    <p>{faker.lorem.sentences(5)}</p>
+  </>
 );
 
 const TwoColumns: EuiResizableContainerProps['children'] = (
@@ -33,21 +33,13 @@ const TwoColumns: EuiResizableContainerProps['children'] = (
 ) => (
   <>
     <EuiResizablePanel initialSize={50} tabIndex={0}>
-      <EuiText>
-        {placeholderText}
-        {placeholderText}
-        {placeholderText}
-      </EuiText>
+      <EuiText>{placeholderText}</EuiText>
     </EuiResizablePanel>
 
     <EuiResizableButton />
 
     <EuiResizablePanel initialSize={50} tabIndex={0}>
-      <EuiText>
-        {placeholderText}
-        {placeholderText}
-        {placeholderText}
-      </EuiText>
+      <EuiText>{placeholderText}</EuiText>
     </EuiResizablePanel>
   </>
 );
@@ -58,31 +50,19 @@ const ThreeColumns: EuiResizableContainerProps['children'] = (
 ) => (
   <>
     <EuiResizablePanel initialSize={40} tabIndex={0}>
-      <EuiText>
-        {placeholderText}
-        {placeholderText}
-        {placeholderText}
-      </EuiText>
+      <EuiText>{placeholderText}</EuiText>
     </EuiResizablePanel>
 
     <EuiResizableButton />
 
     <EuiResizablePanel initialSize={40} tabIndex={0}>
-      <EuiText>
-        {placeholderText}
-        {placeholderText}
-        {placeholderText}
-      </EuiText>
+      <EuiText>{placeholderText}</EuiText>
     </EuiResizablePanel>
 
     <EuiResizableButton />
 
     <EuiResizablePanel initialSize={20} tabIndex={0}>
-      <EuiText>
-        {placeholderText}
-        {placeholderText}
-        {placeholderText}
-      </EuiText>
+      <EuiText>{placeholderText}</EuiText>
     </EuiResizablePanel>
   </>
 );

diff --git a/src/components/resizable_container/resizable_panel.stories.tsx b/src/components/resizable_container/resizable_panel.stories.tsx
@@ -8,14 +8,17 @@
 
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
+import { css } from '@emotion/react';
+import { faker } from '@faker-js/faker';
 
 import {
   disableStorybookControls,
   moveStorybookControlsToCategory,
 } from '../../../.storybook/utils';
 import { EuiResizableContainer } from './resizable_container';
 import { EuiResizablePanel, EuiResizablePanelProps } from './resizable_panel';
-import { css } from '@emotion/react';
+
+faker.seed(42);
 
 const meta: Meta<EuiResizablePanelProps> = {
   title: 'Layout/EuiResizableContainer/EuiResizablePanel',
@@ -61,8 +64,7 @@ type Story = StoryObj<EuiResizablePanelProps>;
 
 export const Playground: Story = {
   args: {
-    children:
-      'Autem vitae quibusdam iure aspernatur nobis. Illo dicta debitis aperiam. Assumenda dicta saepe corrupti tempora.',
+    children: faker.lorem.sentences(5),
     initialSize: 100,
   },
   render: ({ mode, children, ...rest }) => {

diff --git a/src/components/search_bar/search_bar.stories.tsx b/src/components/search_bar/search_bar.stories.tsx
@@ -8,6 +8,7 @@
 
 import React, { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
+import { faker } from '@faker-js/faker';
 
 import { enableFunctionToggleControls } from '../../../.storybook/utils';
 import { EuiBasicTable } from '../basic_table';
@@ -23,6 +24,8 @@ import {
   QueryType,
 } from './search_bar';
 
+faker.seed(42);
+
 const tags = [
   { name: 'marketing', color: 'danger' },
   { name: 'finance', color: 'success' },
@@ -31,58 +34,22 @@ const tags = [
   { name: 'ga', color: 'success' },
 ];
 
-const items = [
-  {
-    type: 'watch',
-    status: 'open',
-    active: false,
-    tag: ['finance'],
-    owner: 'wanda',
-    stars: 2,
-    followers: 10,
-    comments: 3,
-  },
-  {
-    type: 'visualization',
-    status: 'closed',
-    active: true,
-    tag: ['ga', 'marketing', 'eng'],
-    owner: 'carrie',
-    stars: 2,
-    followers: 7,
-    comments: 2,
-  },
-  {
-    type: 'watch',
-    open: 'open',
-    active: true,
-    tag: [],
-    owner: 'carrie',
-    stars: 4,
-    followers: 2,
-    comments: 10,
-  },
-  {
-    type: 'visualization',
-    open: 'open',
-    active: false,
-    tag: ['eng'],
-    owner: 'dewey',
-    stars: 5,
-    followers: 2,
-    comments: 8,
-  },
-  {
-    type: 'dashboard',
-    open: 'closed',
-    active: false,
-    tag: ['sales', 'marketing', 'ga'],
-    owner: 'gabic',
-    stars: 1,
-    followers: 13,
-    comments: 1,
-  },
-];
+const items = [...Array(5).keys()].map((id) => {
+  return {
+    id,
+    status: faker.helpers.arrayElement(['open', 'closed']),
+    type: faker.helpers.arrayElement(['dashboard', 'visualization', 'watch']),
+    tag: faker.helpers.arrayElements(
+      tags.map((tag) => tag.name),
+      { min: 0, max: 3 }
+    ),
+    active: faker.datatype.boolean(),
+    owner: faker.helpers.arrayElement(['dewey', 'wanda', 'carrie', 'gabic']),
+    followers: faker.number.int({ min: 0, max: 20 }),
+    comments: faker.number.int({ min: 0, max: 10 }),
+    stars: faker.number.int({ min: 0, max: 5 }),
+  };
+});
 
 const meta: Meta<EuiSearchBarProps> = {
   title: 'Forms/EuiSearchBar/EuiSearchBar',