@inseefr/lunatic 2.7.5 → 2.7.6

package/lib/use-lunatic/commons/compile-controls.js

@@ -1,71 +1,172 @@
 "use strict";
 
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.compileControls = compileControls;
 var _commons = require("../reducer/commons");
-var _resolveComponentControls = require("../reducer/resolve-component-controls");
 var _replaceComponentSequence = require("../replace-component-sequence");
 var _typeSource = require("../type-source");
 var _fillComponentExpressions = _interopRequireDefault(require("./fill-components/fill-component-expressions"));
 var _getComponentsFromState = _interopRequireDefault(require("./get-components-from-state"));
-var _getErrorsWithoutEmptyValue = _interopRequireDefault(require("./get-errors-without-empty-value"));
+var _checkRoundaboutControl = require("../reducer/controls/check-roundabout-control");
+var _checkBaseControl = require("../reducer/controls/check-base-control");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 /**
- * Check if components of current page have errors
+ * Check if components of the current page have errors, and return a map of error (indexed by component ID)
  */
-function validateComponents(state, components) {
-  var pager = state.pager;
-  return components.reduce(function (errors, component) {
-    var controls = component.controls,
-      id = component.id;
-    if (Array.isArray(controls)) {
-      var componentErrors = (0, _resolveComponentControls.resolveComponentControls)(state, controls);
-      var shallowIteration = pager.shallowIteration;
-      var idC = shallowIteration !== undefined ? "".concat(id, "-").concat(shallowIteration) : id;
-      return (0, _getErrorsWithoutEmptyValue["default"])(_objectSpread(_objectSpread({}, errors), {}, _defineProperty({}, idC, componentErrors)));
+function checkComponents(state, components) {
+  var errors = {};
+  var _iterator = _createForOfIteratorHelper(components),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var component = _step.value;
+      var controls = component.controls,
+        id = component.id;
+      // The component has global level controls
+      if (Array.isArray(controls)) {
+        var componentErrors = checkControls(controls.filter(function (c) {
+          return c.type !== _typeSource.ControlTypeEnum.row;
+        }), state.executeExpression, state.pager);
+        if (componentErrors.length > 0) {
+          errors[id] = componentErrors;
+        }
+      }
+
+      // For loop, inspect children
+      if ((0, _commons.isLoopComponent)(component)) {
+        var _component$controls;
+        var rowControls = (_component$controls = component.controls) === null || _component$controls === void 0 ? void 0 : _component$controls.filter(function (c) {
+          return c.type === _typeSource.ControlTypeEnum.row;
+        });
+        if (rowControls !== null && rowControls !== void 0 && rowControls.length) {
+          errors = checkComponentInLoop(state, _objectSpread(_objectSpread({}, component), {}, {
+            controls: rowControls
+          }), errors);
+        }
+        var _iterator2 = _createForOfIteratorHelper(component.components),
+          _step2;
+        try {
+          for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+            var child = _step2.value;
+            errors = checkComponentInLoop(state, child, errors);
+          }
+        } catch (err) {
+          _iterator2.e(err);
+        } finally {
+          _iterator2.f();
+        }
+      }
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  return errors;
+}
+function checkControls(controls, executeExpression, pager) {
+  return controls.map(function (control) {
+    switch (control.type) {
+      case _typeSource.ControlTypeEnum.roundabout:
+        return (0, _checkRoundaboutControl.checkRoundaboutControl)(control, executeExpression);
+      default:
+        return (0, _checkBaseControl.checkBaseControl)(control, executeExpression, pager);
     }
+  }).filter(function (error) {
+    return error !== undefined;
+  });
+}
 
-    //Thanks to init which split basic Loops, we only go into unPaginatedLoops
-    if ((0, _commons.isLoopComponent)(component)) {
-      var _components = component.components;
-      var recurs = validateComponents(state, _components);
-      return (0, _getErrorsWithoutEmptyValue["default"])(_objectSpread(_objectSpread({}, errors), recurs));
+/**
+ * Figure out the number of iterations of a component
+ */
+function computeIterations(component, executeExpression) {
+  if ('iterations' in component) {
+    return executeExpression(component.iterations.value);
+  }
+  if ('response' in component) {
+    var value = executeExpression(component.response.name);
+    if (Array.isArray(value)) {
+      return value.length;
     }
-    // Keep previous errors to allow multiple controls in same page (multiple question/component in the same page)
+  }
+  // Look at the first component
+  if ('components' in component) {
+    return computeIterations(component.components[0], executeExpression);
+  }
+  return 0;
+}
+
+/**
+ * Check controls on a component for each iteration
+ * Errors are returned using a map of id suffixed with the iteration index (ex: {prenom-1: [], prenom-3: []})
+ */
+function checkComponentInLoop(state, component, errors) {
+  // The component has no controls, skip it
+  if (!Array.isArray(component.controls)) {
     return errors;
-  }, {});
+  }
+
+  // Execute control for each iteration
+  var iterations = computeIterations(component, state.executeExpression);
+  for (var i = 0; i < iterations; i++) {
+    // Create a pager representing the iteration we want to check
+    var iterationPager = _objectSpread(_objectSpread({}, state.pager), {}, {
+      iteration: i,
+      nbIterations: iterations
+    });
+    // The component is filtered on this iteration, skip it
+    if (component.conditionFilter && !state.executeExpression(component.conditionFilter.value, iterationPager)) {
+      continue;
+    }
+    var componentErrors = checkControls(component.controls, state.executeExpression, iterationPager);
+    if (componentErrors.length > 0) {
+      errors["".concat(component.id, "-").concat(i)] = componentErrors;
+    }
+  }
+  return errors;
 }
-function isCriticalErrors(errors) {
-  if (errors) {
-    return Object.values(errors).flat().reduce(function (status, _ref) {
-      var criticality = _ref.criticality,
-        typeOfControl = _ref.typeOfControl;
-      return status || typeOfControl === _typeSource.TypeOfControl.FORMAT || criticality.startsWith(_typeSource.Criticality.ERROR);
-    }, false);
+
+/**
+ * Check if there is a critical error (type: "Error" and criticality: "Format")
+ */
+function hasCriticalError(errors) {
+  if (!errors) {
+    return false;
   }
-  return false;
+  // Look for at least one critical error in the list
+  var criticalError = Object.values(errors).flat().find(function (error) {
+    return error.criticality.startsWith(_typeSource.Criticality.ERROR) || error.typeOfControl === _typeSource.TypeOfControl.FORMAT;
+  });
+  return criticalError !== undefined;
 }
+
+/**
+ * Check controls for currently visible components and output errors
+ */
 function compileControls(state) {
   var components = (0, _replaceComponentSequence.replaceComponentSequence)((0, _getComponentsFromState["default"])(state));
   var componentFiltered = components.map(function (component) {
     return (0, _fillComponentExpressions["default"])(component, state);
-  }).filter(function (_ref2) {
-    var conditionFilter = _ref2.conditionFilter;
+  }).filter(function (_ref) {
+    var conditionFilter = _ref.conditionFilter;
     return conditionFilter !== null && conditionFilter !== void 0 ? conditionFilter : true;
   });
-  var errors = validateComponents(state, componentFiltered);
+  var errors = checkComponents(state, componentFiltered);
   var currentErrors = Object.keys(errors).length > 0 ? errors : undefined;
-  var isCritical = isCriticalErrors(currentErrors);
   return {
     currentErrors: currentErrors,
-    isCritical: isCritical
+    isCritical: hasCriticalError(currentErrors)
   };
 }

package/lib/use-lunatic/commons/fill-components/fill-component-value.js

@@ -32,5 +32,15 @@ function getValueForComponent(component, state) {
   if ((0, _component.hasResponse)(component)) {
     return state.variables.get(component.response.name, iteration);
   }
+  // For loop, value will be a map of child component values
+  if ('components' in component) {
+    return Object.fromEntries(component.components.map(function (c) {
+      return 'response' in c ? c.response.name : null;
+    }).filter(function (name) {
+      return name !== null;
+    }).map(function (name) {
+      return [name, state.variables.get(name)];
+    }));
+  }
   return null;
 }

package/lib/use-lunatic/commons/fill-components/fill-specific-expression.js

@@ -114,7 +114,10 @@ function fillTable(component, state) {
         if ((0, _component.hasComponentType)(component)) {
           return (0, _fillComponents.fillComponent)(component, state);
         }
-        return state.executeExpression((0, _vtl.getVTLCompatibleValue)(component.label));
+        // We can have a non typed component with extra attributes (colspan, rowspan)
+        return _objectSpread(_objectSpread({}, component), {}, {
+          label: state.executeExpression((0, _vtl.getVTLCompatibleValue)(component.label))
+        });
       });
     })
   });

package/lib/use-lunatic/hooks/use-page-has-response.js

@@ -5,7 +5,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.usePageHasResponse = usePageHasResponse;
 var _react = require("react");
+var _isObject = require("../../utils/is-object");
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
 function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
@@ -26,6 +31,18 @@ function usePageHasResponse(components, executeExpression) {
         if (['PairwiseLinks', 'Roundabout'].includes(component.componentType)) {
           return true;
         }
+        // For Table, we have to extract components from its body and apply isSubComponentsEmpty function
+        if (component.componentType === 'Table') {
+          // Body is array for array (row), each "cell" could be an Label or Component, so we filter array.
+          var childrenComponent = component.body.reduce(function (_, row) {
+            var componentsInRow = row.filter(function (cell) {
+              return (0, _isObject.isObject)(cell) && 'componentType' in cell;
+            });
+            return [].concat(_toConsumableArray(_), _toConsumableArray(componentsInRow));
+          }, []);
+          return !isSubComponentsEmpty(childrenComponent, executeExpression);
+        }
+
         // We found a value in one of the root component
         if ('value' in component && !isEmpty(component.value)) {
           return true;

package/lib/use-lunatic/reducer/{resolve-component-controls/resolve-simple-control.js → controls/check-base-control.js}

@@ -3,13 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.resolveSimpleControl = resolveSimpleControl;
-function resolveSimpleControl(state, control) {
-  var _state$pager, _control$control$valu, _control$control;
-  var executeExpression = state.executeExpression;
-  var _ref = (_state$pager = state.pager) !== null && _state$pager !== void 0 ? _state$pager : {},
-    iteration = _ref.iteration,
-    linksIterations = _ref.linksIterations;
+exports.checkBaseControl = checkBaseControl;
+function checkBaseControl(control, executeExpression, pager) {
+  var _control$control$valu, _control$control;
+  var iteration = pager.iteration,
+    linksIterations = pager.linksIterations;
   var criticality = control.criticality,
     errorMessage = control.errorMessage,
     id = control.id,

package/lib/use-lunatic/reducer/{resolve-component-controls/resolve-roundabout-control.js → controls/check-roundabout-control.js}

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.resolveRoundaboutControl = resolveRoundaboutControl;
+exports.checkRoundaboutControl = checkRoundaboutControl;
 /**
  * Pour le Roundabout, le controle doit être validé pour chaque itération
  * composants l'unité enquêtée.
@@ -11,9 +11,8 @@ exports.resolveRoundaboutControl = resolveRoundaboutControl;
  * Le rondpoint ne peut pas être placé dans une boucle car l'itération est effacée.
  * TODO intégrer cela dans le cadre de boucle de bloucle.
  */
-function resolveRoundaboutControl(state, control) {
+function checkRoundaboutControl(control, executeExpression) {
   var _control$control$valu, _control$control;
-  var executeExpression = state.executeExpression;
   var criticality = control.criticality,
     errorMessage = control.errorMessage,
     id = control.id,

package/lib/use-lunatic/reducer/overview/overview-on-init.js

@@ -25,10 +25,12 @@ var isSequence = function isSequence(sourceComponent) {
   return sourceComponent.components.length > 0 && 'hierarchy' in sourceComponent.components[0];
 };
 var isSequenceSamePage = function isSequenceSamePage(sourceComponent, page) {
-  return sourceComponent.components[0].hierarchy.sequence.page === page;
+  var _sourceComponent$comp;
+  return ((_sourceComponent$comp = sourceComponent.components[0].hierarchy) === null || _sourceComponent$comp === void 0 ? void 0 : _sourceComponent$comp.sequence.page) === page;
 };
 var isSubsequenceSamePage = function isSubsequenceSamePage(sourceComponent, page) {
-  return sourceComponent.components[0].hierarchy.subSequence !== undefined && sourceComponent.components[0].hierarchy.subSequence.page === page;
+  var _sourceComponent$comp2, _sourceComponent$comp3;
+  return ((_sourceComponent$comp2 = sourceComponent.components[0].hierarchy) === null || _sourceComponent$comp2 === void 0 ? void 0 : _sourceComponent$comp2.subSequence) !== undefined && ((_sourceComponent$comp3 = sourceComponent.components[0].hierarchy) === null || _sourceComponent$comp3 === void 0 ? void 0 : _sourceComponent$comp3.subSequence.page) === page;
 };
 var isPageReached = function isPageReached(page, lastReachedPage) {
   return parseInt(page, 10) <= parseInt(lastReachedPage, 10);
@@ -64,7 +66,7 @@ function getOverview(state) {
       var component = _step.value;
       var hierarchy = component.hierarchy,
         conditionFilter = component.conditionFilter;
-      if (hierarchy.subSequence) {
+      if (hierarchy && hierarchy.subSequence) {
         var _executeExpression, _pager$lastReachedPag;
         overviewEntries.subSequences.push(_objectSpread(_objectSpread({}, hierarchy.subSequence), {}, {
           type: 'subSequence',
@@ -75,7 +77,7 @@ function getOverview(state) {
           evaluatedLabel: executeExpression(hierarchy.subSequence.label),
           children: []
         }));
-      } else {
+      } else if (hierarchy) {
         var _pager$lastReachedPag2, _executeExpression2;
         overviewEntries.sequences.push(_objectSpread(_objectSpread({}, hierarchy.sequence), {}, {
           type: 'sequence',

package/lib/use-lunatic/type-source.js

@@ -20,6 +20,7 @@ var TypeOfControl = exports.TypeOfControl = /*#__PURE__*/function (TypeOfControl
 }({});
 var ControlTypeEnum = exports.ControlTypeEnum = /*#__PURE__*/function (ControlTypeEnum) {
   ControlTypeEnum["roundabout"] = "roundabout";
+  ControlTypeEnum["row"] = "ROW";
   ControlTypeEnum["simple"] = "simple";
   return ControlTypeEnum;
 }({});

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@inseefr/lunatic",
-	"version": "2.7.5",
+	"version": "2.7.6",
 	"workersVersion": "0.3.0",
 	"description": "Library of questionnaire components",
 	"repository": {

package/lib/src/use-lunatic/commons/get-errors-without-empty-value.d.ts

@@ -1,6 +0,0 @@
-import type { LunaticError } from '../type';
-/**
- * Keep errors with at least one error inside
- */
-declare function getErrorsWithoutEmptyValue(errors?: Record<string, LunaticError[]>): Record<string, LunaticError[]>;
-export default getErrorsWithoutEmptyValue;

package/lib/src/use-lunatic/reducer/resolve-component-controls/index.d.ts

@@ -1 +0,0 @@
-export { resolveComponentControls } from './resolve-component-control';

package/lib/src/use-lunatic/reducer/resolve-component-controls/resolve-component-control.d.ts

@@ -1,6 +0,0 @@
-import { type StateForControls } from '../../commons/compile-controls';
-import type { LunaticControl, LunaticError } from '../../type';
-/**
- * Convert controls into errors
- */
-export declare function resolveComponentControls(state: StateForControls, controls: LunaticControl[]): LunaticError[];

package/lib/src/use-lunatic/reducer/resolve-component-controls/resolve-simple-control.d.ts

@@ -1,3 +0,0 @@
-import { type StateForControls } from '../../commons/compile-controls';
-import type { LunaticControl, LunaticError } from '../../type';
-export declare function resolveSimpleControl(state: StateForControls, control: LunaticControl): LunaticError | undefined;

package/lib/stories/Introduction.stories.mdx

@@ -1,112 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-import Lunatic from '../../docs/img/lunatic-logo.png';
-import { version } from '../../package.json';
-
-<Meta title="Introduction" />
-
-<style>
-	{`
-    .subheading {
-      --mediumdark: '#999999';
-      font-weight: 900;
-      font-size: 13px;
-      color: #999;
-      letter-spacing: 6px;
-      line-height: 24px;
-      text-transform: uppercase;
-      margin-bottom: 12px;
-      margin-top: 40px;
-    }
-
-    .link-list {
-      display: grid;
-      grid-template-columns: 1fr;
-      grid-template-rows: 1fr 1fr;
-      row-gap: 10px;
-    }
-
-    @media (min-width: 620px) {
-      .link-list {
-        row-gap: 20px;
-        column-gap: 20px;
-        grid-template-columns: 1fr 1fr;
-      }
-    }
-
-    @media all and (-ms-high-contrast:none) {
-    .link-list {
-        display: -ms-grid;
-        -ms-grid-columns: 1fr 1fr;
-        -ms-grid-rows: 1fr 1fr;
-      }
-    }
-
-    .link-item {
-      display: block;
-      padding: 20px 30px 20px 15px;
-      border: 1px solid #00000010;
-      border-radius: 5px;
-      transition: background 150ms ease-out, border 150ms ease-out, transform 150ms ease-out;
-      color: #333333;
-      display: flex;
-      align-items: flex-start;
-    }
-
-    .link-item:hover {
-      border-color: #1EA7FD50;
-      transform: translate3d(0, -3px, 0);
-      box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0;
-    }
-
-    .link-item:active {
-      border-color: #1EA7FD;
-      transform: translate3d(0, 0, 0);
-    }
-
-    .link-item strong {
-      font-weight: 700;
-      display: block;
-      margin-bottom: 2px;
-    }
-
-    .link-item img {
-      height: 40px;
-      width: 40px;
-      margin-right: 15px;
-      flex: none;
-    }
-
-    .link-item span {
-      font-size: 14px;
-      line-height: 20px;
-    }
-
-    .tip {
-      display: inline-block;
-      border-radius: 1em;
-      font-size: 11px;
-      line-height: 12px;
-      font-weight: 700;
-      background: #E7FDD8;
-      color: #66BF3C;
-      padding: 4px 12px;
-      margin-right: 10px;
-      vertical-align: top;
-    }
-
-    .tip-wrapper {
-      font-size: 13px;
-      line-height: 20px;
-      margin-top: 40px;
-      margin-bottom: 40px;
-    }
-
-    .tip-wrapper code {
-      font-size: 12px;
-      display: inline-block;
-    }
-  `}
-</style>
-
-<h1>Welcome to Lunatic storybook version: {version} </h1>
-<img src={Lunatic} alt="Lunatic logo" />