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

Optimizely's Component Library.

"use strict";

var _react = _interopRequireDefault(require("react"));

var _react2 = require("@storybook/react");

var _addonKnobs = require("@storybook/addon-knobs");

var _data = require("./data.json");

var _ = _interopRequireDefault(require("./"));

var _storybookUtils = require("../../utils/storybook-utils");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

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; }

var stories = (0, _react2.storiesOf)("Informational|CodeDiff", module);
stories.addDecorator(_addonKnobs.withKnobs).addDecorator(function (story) {
  return _react["default"].createElement("div", {
    id: "root-preview"
  }, story());
});
var OLDSTRING = _data.STRING_DIFF.before;
var NEWSTRING = _data.STRING_DIFF.after;
var OLDJSON = _data.JSON_DIFF.before;
var NEWJSON = _data.JSON_DIFF.after;
stories.add("No differences", function () {
  return _react["default"].createElement("div", null, _react["default"].createElement("h2", null, "CodeDiff"), _react["default"].createElement("p", null, "Get info on the core component (ReactDiffViewer) props at", " ", _react["default"].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["default"].createElement(_["default"], {
    header: (0, _addonKnobs.text)("header", "my_awesome_file.py"),
    oldValue: OLDSTRING,
    newValue: OLDSTRING,
    hideLineNumbers: (0, _addonKnobs["boolean"])("hideLineNumbers", false),
    showDiffOnly: (0, _addonKnobs["boolean"])("showDiffOnly", true),
    splitView: (0, _addonKnobs["boolean"])("splitView", true)
  }));
}).add("Minimal differences", function () {
  return _react["default"].createElement("div", null, _react["default"].createElement("h2", null, "CodeDiff"), _react["default"].createElement("p", null, "Get info on the core component (ReactDiffViewer) props at", " ", _react["default"].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["default"].createElement(_["default"], {
    header: (0, _addonKnobs.text)("fileName", "fileName.md"),
    hideLineNumbers: (0, _addonKnobs["boolean"])("hideLineNumbers", false),
    oldValue: "A test with old things",
    newValue: "A test with new things"
  }));
}).add("Long contiguous string", function () {
  return _react["default"].createElement("div", null, _react["default"].createElement("h2", null, "CodeDiff"), _react["default"].createElement("p", null, "Get info on the core component (ReactDiffViewer) props at", " ", _react["default"].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["default"].createElement(_["default"], {
    header: (0, _addonKnobs.text)("fileName", "fileName.md"),
    hideLineNumbers: (0, _addonKnobs["boolean"])("hideLineNumbers", false),
    oldValue: "AveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryAveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryverylongstring" // eslint-disable max-len
    ,
    newValue: "AveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryAveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryveryverylongstring" // eslint-disable max-len

  }));
}).add("Differences with collapsed sections", function () {
  return _react["default"].createElement("div", null, _react["default"].createElement("h2", null, "CodeDiff"), _react["default"].createElement("p", null, "Get info on the core component (ReactDiffViewer) props at", " ", _react["default"].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["default"].createElement(_["default"], {
    extraLinesSurroundingDiff: (0, _addonKnobs.number)("extraLinesSurroundingDiff", 3),
    header: (0, _addonKnobs.text)("header", "my_awesome_file.py"),
    oldValue: OLDJSON,
    newValue: NEWJSON,
    hideLineNumbers: (0, _addonKnobs["boolean"])("hideLineNumbers", false),
    showDiffOnly: (0, _addonKnobs["boolean"])("showDiffOnly", true),
    splitView: (0, _addonKnobs["boolean"])("splitView", true)
  }));
}).add("Unified vs. Side by Side", function () {
  return _react["default"].createElement("div", null, _react["default"].createElement("h2", null, "CodeDiff"), _react["default"].createElement("p", null, "Get info on the core component (ReactDiffViewer) props at", " ", _react["default"].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["default"].createElement(_["default"], {
    header: (0, _addonKnobs.text)("Unified View > header", "This is a Unified Diff"),
    oldValue: OLDSTRING,
    newValue: NEWSTRING,
    hideLineNumbers: (0, _addonKnobs["boolean"])("Unified View > hideLineNumbers", true),
    splitView: false
  }), _react["default"].createElement("br", null), _react["default"].createElement("br", null), _react["default"].createElement(_["default"], {
    header: (0, _addonKnobs.text)("Split View > header", "This is a Split Diff"),
    oldValue: OLDSTRING,
    newValue: NEWSTRING,
    hideLineNumbers: (0, _addonKnobs["boolean"])("Split View > hideLineNumbers", true),
    splitView: true
  }));
}).add("Line Selection", function () {
  return _react["default"].createElement("div", null, _react["default"].createElement("h2", null, "CodeDiff"), _react["default"].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["default"].createElement("p", null, "Get info on the core component (ReactDiffViewer) props at", " ", _react["default"].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["default"].createElement(_storybookUtils.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["default"].createElement(_["default"], {
      oldValue: OLDJSON,
      newValue: NEWJSON,
      highlightLines: selectedLines,
      onLineNumberClick: handleLineClick // eslint-disable-line react/jsx-no-bind

    });
  }));
}).add("Knobs Playground", function () {
  return _react["default"].createElement("div", null, _react["default"].createElement("h2", null, "CodeDiff"), _react["default"].createElement("p", null, "This story adds knobs for OUI-only props as well as underlying ReactDiffViewer props."), _react["default"].createElement("p", null, "Get info on the core component (ReactDiffViewer) props at", " ", _react["default"].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["default"].createElement(_["default"], {
    oldValue: OLDJSON,
    newValue: NEWJSON,
    compareMethod: (0, _addonKnobs.select)("compareMethod", ["diffChars", "diffWords", "diffWordsWithSpace", "diffLines", "diffTrimmedLines", "diffSentences", "diffCss"], "diffWords"),
    disableWordDiff: (0, _addonKnobs["boolean"])("disableWordDiff", false),
    extraLinesSurroundingDiff: (0, _addonKnobs.number)("extraLinesSurroundingDiff", 3),
    header: (0, _addonKnobs.text)("header", ""),
    leftTitle: (0, _addonKnobs.text)("leftTitle", "v3.60.5"),
    rightTitle: (0, _addonKnobs.text)("rightTitle", "v3.61.0"),
    showDiffOnly: (0, _addonKnobs["boolean"])("showDiffOnly", true),
    splitView: (0, _addonKnobs["boolean"])("splitView", true),
    useDarkTheme: (0, _addonKnobs["boolean"])("useDarkTheme", false)
  }));
});