Added useEuiTextDiff hook

.eslintrc.js

@@ -20,40 +20,35 @@ const APACHE_2_0_LICENSE_HEADER = `
 `;
 
 module.exports = {
-  parser: "@typescript-eslint/parser",
+  parser: '@typescript-eslint/parser',
   parserOptions: {
     ecmaFeatures: {
-      jsx: true
-    }
+      jsx: true,
+    },
   },
   settings: {
-    "import/resolver": {
-       node: {
-        extensions: [".ts", ".tsx", ".js", ".json"]
+    'import/resolver': {
+      node: {
+        extensions: ['.ts', '.tsx', '.js', '.json'],
       },
       webpack: {
-        config: "./src-docs/webpack.config.js"
-      }
+        config: './src-docs/webpack.config.js',
+      },
     },
     react: {
-      version: "detect"
-    }
+      version: 'detect',
+    },
   },
   extends: [
-    "@elastic/eslint-config-kibana",
-    "plugin:@typescript-eslint/recommended",
+    '@elastic/eslint-config-kibana',
+    'plugin:@typescript-eslint/recommended',
     // Prettier options need to come last, in order to override other style
     // rules.
-    "prettier/react",
-    "prettier/standard",
-    "plugin:prettier/recommended"
-  ],
-  plugins: [
-    "jsx-a11y",
-    "prettier",
-    "local",
-    "react-hooks"
+    'prettier/react',
+    'prettier/standard',
+    'plugin:prettier/recommended',
   ],
+  plugins: ['jsx-a11y', 'prettier', 'local', 'react-hooks'],
   rules: {
     "prefer-template": "error",
     "local/i18n": "error",
@@ -67,7 +62,6 @@ module.exports = {
     ],
     "no-use-before-define": "off",
     "quotes": ["warn", "single", "avoid-escape"],
-
     "jsx-a11y/accessible-emoji": "error",
     "jsx-a11y/alt-text": "error",
     "jsx-a11y/anchor-has-content": "error",
@@ -118,6 +112,16 @@ module.exports = {
     "@typescript-eslint/no-inferrable-types": "off",
   },
   env: {
-    jest: true
-  }
+    jest: true,
+  },
+  overrides: [
+    {
+      files: ['*.d.ts'],
+      rules: {
+        'react/no-multi-comp': 'off',
+        'react/prefer-es6-class': 'off',
+        'react/prefer-stateless-function': 'off',
+      },
+    },
+  ],
 };

CHANGELOG.md

@@ -1,6 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `25.0.0`.
+- Added `EuiTextDiff` component ([#3288](https://github.com/elastic/eui/pull/3288))
 
 ## [`25.0.0`](https://github.com/elastic/eui/tree/v25.0.0)
 

package.json

@@ -69,6 +69,7 @@
     "react-virtualized": "^9.21.2",
     "resize-observer-polyfill": "^1.5.0",
     "tabbable": "^3.0.0",
+    "text-diff": "^1.0.1",
     "uuid": "^3.1.0"
   },
   "devDependencies": {

src-docs/src/routes.js

@@ -195,6 +195,8 @@ import { TableInMemoryExample } from './views/tables/tables_in_memory_example';
 
 import { TabsExample } from './views/tabs/tabs_example';
 
+import { TextDiffExample } from './views/text_diff/text_diff_example';
+
 import { TextExample } from './views/text/text_example';
 
 import { TitleExample } from './views/title/title_example';
@@ -383,6 +385,7 @@ const navigation = [
       LoadingExample,
       ProgressExample,
       StatExample,
+
       TextExample,
       TitleExample,
       ToastExample,
@@ -444,6 +447,7 @@ const navigation = [
       PrettyDurationExample,
       ResizeObserverExample,
       ResponsiveExample,
+      TextDiffExample,
       ToggleExample,
       WindowEventExample,
     ].map(example => createExample(example)),

src-docs/src/views/html_id_generator/html_id_generator_example.js

@@ -27,7 +27,7 @@ const PrefixSufixHtml = renderToHtml(PrefixSufix);
 const prefixSuffixSnippet = " htmlIdGenerator('prefix')('suffix')";
 
 export const HtmlIdGeneratorExample = {
-  title: 'HTML ID Generator',
+  title: 'HTML ID generator',
   sections: [
     {
       source: [

src-docs/src/views/overlay_mask/overlay_mask_example.js

@@ -16,7 +16,7 @@ const overlayMaskSnippet = `<EuiOverlayMask>
 </EuiOverlayMask>`;
 
 export const OverlayMaskExample = {
-  title: 'Overlay Mask',
+  title: 'Overlay mask',
   sections: [
     {
       source: [

src-docs/src/views/text_diff/props.tsx

@@ -0,0 +1,7 @@
+import React, { FunctionComponent } from 'react';
+
+import { EuiTextDiffProps } from '../../../../src/components/text_diff';
+
+export const useEuiTextDiffProp: FunctionComponent<EuiTextDiffProps> = () => {
+  return <div />;
+};

src-docs/src/views/text_diff/text_diff.js

@@ -0,0 +1,49 @@
+import React, { useState, useEffect } from 'react';
+
+import {
+  useEuiTextDiff,
+  EuiCode,
+  EuiSpacer,
+  EuiTextColor,
+  EuiText,
+} from '../../../../src/components';
+
+export default () => {
+  const [del, setDel] = useState(0);
+  const [ins, setIns] = useState(0);
+
+  const beforeText =
+    'Orbiting this at a distance of roughly ninety-two million miles is an utterly insignificant little blue green planet whose ape- descended life forms are so amazingly primitive that they still think digital watches are a pretty neat idea.';
+  const afterText =
+    'Orbiting those at a distance of roughly ninety-nine billion yards is not insignificant dwaf red green planet whose ape- ascended life forms are so amazingly primitive that they still think digital clocks are a pretty neat idea.';
+
+  const [rendered, textDiffObject] = useEuiTextDiff({
+    beforeText,
+    afterText,
+  });
+
+  useEffect(() => {
+    textDiffObject.forEach(el => {
+      if (el[0] === 1) {
+        setIns(add => add + 1);
+      } else if (el[0] === -1) {
+        setDel(sub => sub + 1);
+      }
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <>
+      <EuiText>
+        <p>{rendered}</p>
+      </EuiText>
+      <EuiSpacer />
+      <EuiCode>
+        <EuiTextColor color="secondary"> {ins} </EuiTextColor> Insertions,
+        <EuiTextColor color="danger"> {del} </EuiTextColor>
+        Deletions
+      </EuiCode>
+    </>
+  );
+};

src-docs/src/views/text_diff/text_diff_custom_components.js

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import { useEuiTextDiff, EuiCodeBlock } from '../../../../src/components';
+
+export default () => {
+  const beforeText =
+    'Orbiting this at a distance of roughly ninety-two million miles is an utterly insignificant little blue green planet whose ape- descended life forms are so amazingly primitive that they still think digital watches are a pretty neat idea.';
+  const afterText =
+    'Orbiting those at a distance of roughly ninety-nine billion yards is not insignificant dwaf red green planet whose ape- ascended life forms are so amazingly primitive that they still think digital clocks are a pretty neat idea.';
+  const [rendered] = useEuiTextDiff({
+    beforeText,
+    afterText,
+    insertComponent: 'strong',
+    deleteComponent: 's',
+  });
+
+  return (
+    <EuiCodeBlock fontSize="m" paddingSize="m">
+      {rendered}
+    </EuiCodeBlock>
+  );
+};

src-docs/src/views/text_diff/text_diff_example.js

@@ -0,0 +1,108 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+import { renderToHtml } from '../../services';
+
+import { GuideSectionTypes } from '../../components';
+
+import { EuiCode } from '../../../../src/components';
+import { useEuiTextDiffProp } from './props';
+import TextDiff from './text_diff';
+const textDiffSource = require('!!raw-loader!./text_diff');
+const textDiffHtml = renderToHtml(TextDiff);
+
+import TextDiffCustomComponents from './text_diff_custom_components';
+const customComponentsSource = require('!!raw-loader!./text_diff_custom_components');
+const customComponentsHtml = renderToHtml(TextDiffCustomComponents);
+
+export const TextDiffExample = {
+  title: 'Text diff',
+  isNew: true,
+  sections: [
+    {
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: textDiffSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: textDiffHtml,
+        },
+      ],
+      text: (
+        <>
+          <p>
+            The hook, <strong>useEuiTextDiff</strong>, generates a set of
+            changes between two strings. It returns both React elements for
+            displaying the diff and an object representing the identified
+            changes. The <EuiCode>timeout</EuiCode> prop is used to set how many
+            seconds any diff&apos;s exploration phase may take. The default
+            value is 0.1, a value of 0 disables the timeout and lets diff run
+            until completion. The higher the timeout, the more detailed the
+            comparison.
+          </p>
+          <p>
+            <EuiCode language="tsx">
+              {
+                'const [rendered, textDiffObject] = useEuiTextDiff({ beforeText, afterText })'
+              }
+            </EuiCode>
+          </p>
+        </>
+      ),
+      demo: <TextDiff />,
+      props: { useEuiTextDiffProp },
+      snippet: `const [rendered, textDiffObject] = useEuiTextDiff({ beforeText, afterText })
+
+<EuiText><p>{rendered}</p></EuiText>`,
+    },
+    {
+      title: 'Custom rendered elements',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: customComponentsSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: customComponentsHtml,
+        },
+      ],
+      text: (
+        <>
+          <p>
+            By default, the hook will wrap deletions with{' '}
+            <EuiCode>{'<del>'}</EuiCode> and insertions with{' '}
+            <EuiCode>{'<ins>'}</EuiCode> elements. You can replace these
+            elements with the <EuiCode>deleteComponent</EuiCode> and{' '}
+            <EuiCode>insertComponent</EuiCode>
+            props respectively.
+          </p>
+          <p>
+            Also, since <EuiCode>rendered</EuiCode> is simple html string, you
+            can wrap it in any contextual element like{' '}
+            <Link to="/display/text">
+              <strong>EuiText</strong>
+            </Link>{' '}
+            or{' '}
+            <Link to="/display/code">
+              <strong>EuiCodeBlock</strong>
+            </Link>
+            .
+          </p>
+        </>
+      ),
+      demo: <TextDiffCustomComponents />,
+      snippet: `const [rendered] = useEuiTextDiff({
+  beforeText,
+  afterText,
+  insertComponent: 'strong',
+});
+
+<EuiCodeBlock fontSize="m" paddingSize="m">
+  {rendered}
+</EuiCodeBlock>`,
+    },
+  ],
+};

src/components/index.js

@@ -322,6 +322,8 @@ export { EuiTab, EuiTabs, EuiTabbedContent } from './tabs';
 
 export { EuiText, EuiTextColor, EuiTextAlign } from './text';
 
+export { useEuiTextDiff } from './text_diff';
+
 export { EuiTitle } from './title';
 
 export { EuiGlobalToastList, EuiGlobalToastListItem, EuiToast } from './toast';

src/components/index.scss

@@ -63,6 +63,7 @@
 @import 'suggest/index';
 @import 'table/index';
 @import 'tabs/index';
+@import 'text_diff/index';
 @import 'title/index';
 @import 'toast/index';
 @import 'token/index';