optimizely-oui/module/js/components/CodeDiff/CodeDiff.story.js

Optimizely's Component Library.

function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }

function _iterableToArrayLimit(arr, i) { if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) { return; } var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

import React from "react";
import { storiesOf } from "@storybook/react";
import { withKnobs, boolean as _boolean, text, number, select } from "@storybook/addon-knobs";
import { JSON_DIFF, STRING_DIFF } from "./data.json";
import CodeDiff from "./";
import { StoryStateWrapper } from "../../utils/storybook-utils";
var stories = storiesOf("Informational|CodeDiff", module);
stories.addDecorator(withKnobs).addDecorator(function (story) {
  return React.createElement("div", {
    id: "root-preview"
  }, story());
});
var OLDSTRING = STRING_DIFF.before;
var NEWSTRING = STRING_DIFF.after;
var OLDJSON = JSON_DIFF.before;
var NEWJSON = JSON_DIFF.after;
stories.add("No differences", function () {
  return React.createElement("div", null, React.createElement("h2", null, "CodeDiff"), React.createElement("p", null, "Get info on the core component (ReactDiffViewer) props at", " ", React.createElement("a", {
    href: "https://github.com/praneshr/react-diff-viewer/tree/v3.0.0#props",
    rel: "noopener noreferrer",
    target: "_blank"
  }, "https://github.com/praneshr/react-diff-viewer/tree/v3.0.0#props"), "."), React.createElement(CodeDiff, {
    header: text("header", "my_awesome_file.py"),
    oldValue: OLDSTRING,
    newValue: OLDSTRING,
    hideLineNumbers: _boolean("hideLineNumbers", false),
    showDiffOnly: _boolean("showDiffOnly", true),
    splitView: _boolean("splitView", true)
  }));
}).add("Minimal differences", function () {
  return React.createElement("div", null, React.createElement("h2", null, "CodeDiff"), React.createElement("p", null, "Get info on the core component (ReactDiffViewer) props at", " ", React.createElement("a", {
    href: "https://github.com/praneshr/react-diff-viewer/tree/v3.0.0#props",
    rel: "noopener noreferrer",
    target: "_blank"
  }, "https://github.com/praneshr/react-diff-viewer/tree/v3.0.0#props"), "."), React.createElement(CodeDiff, {
    header: text("fileName", "fileName.md"),
    hideLineNumbers: _boolean("hideLineNumbers", false),
    oldValue: "A test with old things",
    newValue: "A test with new things"
  }));
}).add("Long contiguous string", function () {
  return React.createElement("div", null, React.createElement("h2", null, "CodeDiff"), React.createElement("p", null, "Get info on the core component (ReactDiffViewer) props at", " ", React.createElement("a", {
    href: "https://github.com/praneshr/react-diff-viewer/tree/v3.0.0#props",
    rel: "noopener noreferrer",
    target: "_blank"
  }, "https://github.com/praneshr/react-diff-viewer/tree/v3.0.0#props"), "."), React.createElement(CodeDiff, {
    header: text("fileName", "fileName.md"),
    hideLineNumbers: _boolean("hideLineNumbers", false),
    oldValue: "AveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryAveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryverylongstring" // eslint-disable max-len
    ,
    newValue: "AveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryAveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryverylongstring" // eslint-disable max-len

  }));
}).add("Differences with collapsed sections", function () {
  return React.createElement("div", null, React.createElement("h2", null, "CodeDiff"), React.createElement("p", null, "Get info on the core component (ReactDiffViewer) props at", " ", React.createElement("a", {
    href: "https://github.com/praneshr/react-diff-viewer/tree/v3.0.0#props",
    rel: "noopener noreferrer",
    target: "_blank"
  }, "https://github.com/praneshr/react-diff-viewer/tree/v3.0.0#props"), "."), React.createElement(CodeDiff, {
    extraLinesSurroundingDiff: number("extraLinesSurroundingDiff", 3),
    header: text("header", "my_awesome_file.py"),
    oldValue: OLDJSON,
    newValue: NEWJSON,
    hideLineNumbers: _boolean("hideLineNumbers", false),
    showDiffOnly: _boolean("showDiffOnly", true),
    splitView: _boolean("splitView", true)
  }));
}).add("Unified vs. Side by Side", function () {
  return React.createElement("div", null, React.createElement("h2", null, "CodeDiff"), React.createElement("p", null, "Get info on the core component (ReactDiffViewer) props at", " ", React.createElement("a", {
    href: "https://github.com/praneshr/react-diff-viewer/tree/v3.0.0#props",
    rel: "noopener noreferrer",
    target: "_blank"
  }, "https://github.com/praneshr/react-diff-viewer/tree/v3.0.0#props"), "."), React.createElement(CodeDiff, {
    header: text("Unified View > header", "This is a Unified Diff"),
    oldValue: OLDSTRING,
    newValue: NEWSTRING,
    hideLineNumbers: _boolean("Unified View > hideLineNumbers", true),
    splitView: false
  }), React.createElement("br", null), React.createElement("br", null), React.createElement(CodeDiff, {
    header: text("Split View > header", "This is a Split Diff"),
    oldValue: OLDSTRING,
    newValue: NEWSTRING,
    hideLineNumbers: _boolean("Split View > hideLineNumbers", true),
    splitView: true
  }));
}).add("Line Selection", function () {
  return React.createElement("div", null, React.createElement("h2", null, "CodeDiff"), React.createElement("p", null, "This story implement an example method of highliting lines that are clicked. This example demostrates being able to add consecutive lines via the shift key or arbitrary lines via the alt key."), React.createElement("p", null, "Get info on the core component (ReactDiffViewer) props at", " ", React.createElement("a", {
    href: "https://github.com/praneshr/react-diff-viewer/tree/v3.0.0#props",
    rel: "noopener noreferrer",
    target: "_blank"
  }, "https://github.com/praneshr/react-diff-viewer/tree/v3.0.0#props"), "."), React.createElement(StoryStateWrapper, {
    initialValue: []
  }, function (selectedLines, setSelectedLineNumbers) {
    var handleLineClick = function handleLineClick(lineId, _ref) {
      var altKey = _ref.altKey,
          shiftKey = _ref.shiftKey;
      var highlightedLines = [lineId];

      if (shiftKey && selectedLines.length === 1) {
        var _selectedLines$0$spli = selectedLines[0].split("-"),
            _selectedLines$0$spli2 = _slicedToArray(_selectedLines$0$spli, 2),
            dir = _selectedLines$0$spli2[0],
            oldId = _selectedLines$0$spli2[1];

        var _lineId$split = lineId.split("-"),
            _lineId$split2 = _slicedToArray(_lineId$split, 2),
            newDir = _lineId$split2[0],
            newId = _lineId$split2[1];

        if (dir === newDir) {
          highlightedLines = [];
          var lowEnd = Math.min(Number(oldId), Number(newId));
          var highEnd = Math.max(Number(oldId), Number(newId));

          for (var i = lowEnd; i <= highEnd; i++) {
            highlightedLines.push("".concat(dir, "-").concat(i));
          }
        }
      }

      setSelectedLineNumbers(altKey ? selectedLines.concat(highlightedLines) : highlightedLines);
    };

    return React.createElement(CodeDiff, {
      oldValue: OLDJSON,
      newValue: NEWJSON,
      highlightLines: selectedLines,
      onLineNumberClick: handleLineClick // eslint-disable-line react/jsx-no-bind

    });
  }));
}).add("Knobs Playground", function () {
  return React.createElement("div", null, React.createElement("h2", null, "CodeDiff"), React.createElement("p", null, "This story adds knobs for OUI-only props as well as underlying ReactDiffViewer props."), React.createElement("p", null, "Get info on the core component (ReactDiffViewer) props at", " ", React.createElement("a", {
    href: "https://github.com/praneshr/react-diff-viewer/tree/v3.0.0#props",
    rel: "noopener noreferrer",
    target: "_blank"
  }, "https://github.com/praneshr/react-diff-viewer/tree/v3.0.0#props"), "."), React.createElement(CodeDiff, {
    oldValue: OLDJSON,
    newValue: NEWJSON,
    compareMethod: select("compareMethod", ["diffChars", "diffWords", "diffWordsWithSpace", "diffLines", "diffTrimmedLines", "diffSentences", "diffCss"], "diffWords"),
    disableWordDiff: _boolean("disableWordDiff", false),
    extraLinesSurroundingDiff: number("extraLinesSurroundingDiff", 3),
    header: text("header", ""),
    leftTitle: text("leftTitle", "v3.60.5"),
    rightTitle: text("rightTitle", "v3.61.0"),
    showDiffOnly: _boolean("showDiffOnly", true),
    splitView: _boolean("splitView", true),
    useDarkTheme: _boolean("useDarkTheme", false)
  }));
});