@micromag/screen-game-sort 0.3.714

package/assets/css/styles.css

@@ -0,0 +1 @@
+.micromag-screen-game-sort-layout{scrollbar-width:none}.micromag-screen-game-sort-layout::-webkit-scrollbar{display:none}.micromag-screen-game-sort-button.micromag-screen-game-sort-layoutLabelOver .micromag-screen-game-sort-buttonLabel,.micromag-screen-game-sort-container .micromag-screen-game-sort-background{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-screen-game-sort-container{height:100%;overflow:hidden;position:relative;width:100%}.micromag-screen-game-sort-disabled.micromag-screen-game-sort-container{overflow:hidden;pointer-events:none}.micromag-screen-game-sort-hidden.micromag-screen-game-sort-container{display:none;visibility:hidden}.micromag-screen-game-sort-placeholder.micromag-screen-game-sort-container .micromag-screen-game-sort-content{padding:6px;position:relative}.micromag-screen-game-sort-emptyHeading,.micromag-screen-game-sort-emptyItems{border:2px dashed #343434;color:#343434;margin:5px auto}.micromag-screen-game-sort-container .micromag-screen-game-sort-background{z-index:0}.micromag-screen-game-sort-container .micromag-screen-game-sort-content{z-index:1}.micromag-screen-game-sort-container .micromag-screen-game-sort-heading{margin-bottom:10px}.micromag-screen-game-sort-layout{overflow-x:hidden;overflow-y:auto;padding:10px}.micromag-screen-game-sort-emptyHeading,.micromag-screen-game-sort-emptyItems{margin:10px auto;padding:10px;width:100%}.micromag-screen-game-sort-emptyItems{padding:40px}.micromag-screen-game-sort-header{left:0;margin-top:0;position:absolute;top:0;width:100%;z-index:1}.micromag-screen-game-sort-footer{bottom:0;left:0;margin-top:0;position:absolute;width:100%}.micromag-screen-game-sort-items{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.micromag-screen-game-sort-item{border-radius:0;display:block;opacity:0;padding-bottom:10px;-ms-touch-action:none;touch-action:none;-webkit-transform-origin:50% 50%;-ms-transform-origin:50% 50%;transform-origin:50% 50%;width:100%}.micromag-screen-game-sort-sorted .micromag-screen-game-sort-item{opacity:1}.micromag-screen-game-sort-button{background-clip:padding-box;background-color:hsla(0,0%,100%,.1);display:block;padding:10px;text-align:center;width:100%}.micromag-screen-game-sort-isEmpty .micromag-screen-game-sort-button{min-height:2em}.micromag-screen-game-sort-valid .micromag-screen-game-sort-button{background:rgba(0,255,0,.4)}.micromag-screen-game-sort-invalid .micromag-screen-game-sort-button{background:rgba(255,0,0,.4)}.micromag-screen-game-sort-button.micromag-screen-game-sort-layoutLabelTop{display:-ms-flexbox;display:flex;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.micromag-screen-game-sort-button.micromag-screen-game-sort-layoutNoLabel .micromag-screen-game-sort-buttonLabel{display:none}.micromag-screen-game-sort-button.micromag-screen-game-sort-layoutLabelOver .micromag-screen-game-sort-buttonVisual{position:relative;z-index:1}.micromag-screen-game-sort-button.micromag-screen-game-sort-layoutLabelOver .micromag-screen-game-sort-buttonLabel{background-image:-webkit-gradient(linear,left top,left bottom,from(rgba(28,28,28,0)),to(rgba(28,28,28,.75)));background-image:linear-gradient(180deg,rgba(28,28,28,0),rgba(28,28,28,.75));bottom:0;display:block;height:auto;top:auto;z-index:2}.micromag-screen-game-sort-submitButton{background:#fff;color:#000;padding:10px}.micromag-screen-game-sort-submitButton:disabled{opacity:.5}

package/es/index.js

@@ -0,0 +1,686 @@
+import { useIntl, FormattedMessage, defineMessage } from 'react-intl';
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { useSprings, animated } from '@react-spring/web';
+import { useDrag } from '@use-gesture/react';
+import classNames from 'classnames';
+import isString from 'lodash/isString';
+import shuffle from 'lodash/shuffle';
+import PropTypes from 'prop-types';
+import React, { useState, useRef, useEffect, useCallback } from 'react';
+import { PropTypes as PropTypes$1 } from '@micromag/core';
+import { ScreenElement } from '@micromag/core/components';
+import { useScreenSize, useScreenRenderContext, useViewerContext, useViewerWebView, usePlaybackContext, usePlaybackMediaRef } from '@micromag/core/contexts';
+import { useDimensionObserver, useTrackScreenEvent } from '@micromag/core/hooks';
+import { isHeaderFilled, isFooterFilled, getFooterProps, getStyleFromBox, getStyleFromText } from '@micromag/core/utils';
+import Background from '@micromag/element-background';
+import Button from '@micromag/element-button';
+import Container from '@micromag/element-container';
+import Footer from '@micromag/element-footer';
+import Header from '@micromag/element-header';
+import Heading from '@micromag/element-heading';
+import Layout, { Spacer } from '@micromag/element-layout';
+import Text from '@micromag/element-text';
+import Visual from '@micromag/element-visual';
+
+var styles = {"layout":"micromag-screen-game-sort-layout","button":"micromag-screen-game-sort-button","layoutLabelOver":"micromag-screen-game-sort-layoutLabelOver","buttonLabel":"micromag-screen-game-sort-buttonLabel","container":"micromag-screen-game-sort-container","background":"micromag-screen-game-sort-background","content":"micromag-screen-game-sort-content","emptyHeading":"micromag-screen-game-sort-emptyHeading","emptyItems":"micromag-screen-game-sort-emptyItems","heading":"micromag-screen-game-sort-heading","header":"micromag-screen-game-sort-header","footer":"micromag-screen-game-sort-footer","items":"micromag-screen-game-sort-items","item":"micromag-screen-game-sort-item","sorted":"micromag-screen-game-sort-sorted","isEmpty":"micromag-screen-game-sort-isEmpty","valid":"micromag-screen-game-sort-valid","invalid":"micromag-screen-game-sort-invalid","layoutLabelTop":"micromag-screen-game-sort-layoutLabelTop","layoutNoLabel":"micromag-screen-game-sort-layoutNoLabel","buttonVisual":"micromag-screen-game-sort-buttonVisual","submitButton":"micromag-screen-game-sort-submitButton"};
+
+var propTypes = {
+  layout: PropTypes.oneOf(['top', 'middle', 'bottom']),
+  heading: PropTypes$1.headingElement,
+  // eslint-disable-next-line react/forbid-prop-types
+  items: PropTypes.array,
+  spacing: PropTypes.number,
+  buttonStyles: PropTypes.shape({}),
+  background: PropTypes$1.backgroundElement,
+  header: PropTypes$1.header,
+  footer: PropTypes$1.footer,
+  id: PropTypes.string,
+  index: PropTypes.number,
+  current: PropTypes.bool,
+  active: PropTypes.bool,
+  className: PropTypes.string
+};
+var defaultProps = {
+  layout: 'top',
+  heading: null,
+  items: null,
+  buttonStyles: null,
+  spacing: 20,
+  background: null,
+  header: null,
+  footer: null,
+  id: null,
+  index: null,
+  current: true,
+  active: true,
+  className: null
+};
+var ShareScreen = function ShareScreen(_ref) {
+  var layout = _ref.layout,
+    heading = _ref.heading,
+    items = _ref.items,
+    buttonStyles = _ref.buttonStyles,
+    spacing = _ref.spacing,
+    background = _ref.background,
+    header = _ref.header,
+    footer = _ref.footer;
+    _ref.id;
+    _ref.index;
+    var current = _ref.current,
+    active = _ref.active,
+    className = _ref.className;
+  var intl = useIntl();
+  var _useScreenSize = useScreenSize(),
+    width = _useScreenSize.width,
+    height = _useScreenSize.height,
+    resolution = _useScreenSize.resolution;
+  var _useScreenRenderConte = useScreenRenderContext(),
+    isView = _useScreenRenderConte.isView,
+    isPreview = _useScreenRenderConte.isPreview,
+    isPlaceholder = _useScreenRenderConte.isPlaceholder,
+    isEdit = _useScreenRenderConte.isEdit;
+  var _useViewerContext = useViewerContext(),
+    viewerTopHeight = _useViewerContext.topHeight,
+    viewerBottomHeight = _useViewerContext.bottomHeight,
+    viewerBottomSidesWidth = _useViewerContext.bottomSidesWidth;
+  var _useViewerWebView = useViewerWebView(),
+    openWebView = _useViewerWebView.open;
+  var _usePlaybackContext = usePlaybackContext(),
+    muted = _usePlaybackContext.muted;
+  var mediaRef = usePlaybackMediaRef(current);
+  var backgroundPlaying = current && (isView || isEdit);
+  var backgroundShouldLoad = current || active;
+  var hasHeader = isHeaderFilled(header);
+  var hasFooter = isFooterFilled(footer);
+  var footerProps = getFooterProps(footer, {
+    isView: isView,
+    current: current,
+    openWebView: openWebView,
+    isPreview: isPreview
+  });
+  var _ref2 = buttonStyles || {},
+    _ref2$layout = _ref2.layout,
+    buttonLayout = _ref2$layout === void 0 ? null : _ref2$layout,
+    _ref2$textStyle = _ref2.textStyle,
+    buttonTextStyle = _ref2$textStyle === void 0 ? null : _ref2$textStyle,
+    _ref2$boxStyle = _ref2.boxStyle,
+    buttonBoxStyle = _ref2$boxStyle === void 0 ? null : _ref2$boxStyle,
+    _ref2$validBoxStyle = _ref2.validBoxStyle,
+    validBoxStyle = _ref2$validBoxStyle === void 0 ? null : _ref2$validBoxStyle,
+    _ref2$invalidBoxStyle = _ref2.invalidBoxStyle,
+    invalidBoxStyle = _ref2$invalidBoxStyle === void 0 ? null : _ref2$invalidBoxStyle,
+    _ref2$submitBoxStyle = _ref2.submitBoxStyle,
+    submitBoxStyle = _ref2$submitBoxStyle === void 0 ? null : _ref2$submitBoxStyle,
+    _ref2$submitButtonLab = _ref2.submitButtonLabel,
+    submitButtonLabel = _ref2$submitButtonLab === void 0 ? null : _ref2$submitButtonLab,
+    _ref2$validatedButton = _ref2.validatedButtonLabel,
+    validatedButtonLabel = _ref2$validatedButton === void 0 ? null : _ref2$validatedButton;
+  var _useDimensionObserver = useDimensionObserver(),
+    headerRef = _useDimensionObserver.ref,
+    _useDimensionObserver2 = _useDimensionObserver.height,
+    headerHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
+  var _useDimensionObserver3 = useDimensionObserver(),
+    footerRef = _useDimensionObserver3.ref,
+    _useDimensionObserver4 = _useDimensionObserver3.height,
+    footerHeight = _useDimensionObserver4 === void 0 ? 0 : _useDimensionObserver4;
+  useTrackScreenEvent('game-sort');
+  var _useState = useState(isView ? shuffle(items || []) : items || []),
+    _useState2 = _slicedToArray(_useState, 2),
+    sortedItems = _useState2[0],
+    setSortedItems = _useState2[1];
+  var sortedItemsRef = useRef(sortedItems);
+  var currentItemsRef = useRef(items);
+  useEffect(function () {
+    if (currentItemsRef.current !== items) {
+      var newSortedItems = isView ? shuffle(items || []) : items || [];
+      setSortedItems(newSortedItems);
+      sortedItemsRef.current = newSortedItems;
+      currentItemsRef.current = items;
+    }
+  }, [items]);
+  var getNewSortedItems = useCallback(function (currentItems, item, newIndex) {
+    var currentIndex = currentItems.findIndex(function (it) {
+      return it === item;
+    });
+    var newSortedItems = _toConsumableArray(currentItems);
+    var currentItem = newSortedItems[newIndex];
+    newSortedItems[newIndex] = item;
+    newSortedItems[currentIndex] = currentItem;
+    return newSortedItems;
+  }, []);
+  var updateIndex = useCallback(function (item, newIndex) {
+    var newSortedItems = getNewSortedItems(sortedItems, item, newIndex);
+    setSortedItems(newSortedItems);
+    sortedItemsRef.current = newSortedItems;
+  }, [sortedItems, getNewSortedItems]);
+  var _useSprings = useSprings((items || []).length, function () {
+      return {
+        y: "0%",
+        scale: 1
+      };
+    }, []),
+    _useSprings2 = _slicedToArray(_useSprings, 2),
+    springs = _useSprings2[0],
+    api = _useSprings2[1];
+  var itemsRef = useRef([]);
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    initialSorted = _useState4[0],
+    setInitialSorted = _useState4[1];
+  var updateSpring = useCallback(function (currentItems) {
+    var _ref3 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+      dragItem = _ref3.dragItem,
+      dragY = _ref3.dragY,
+      _ref3$initial = _ref3.initial,
+      initial = _ref3$initial === void 0 ? false : _ref3$initial;
+    var heights = itemsRef.current.map(function (item) {
+      var _item$getBoundingClie;
+      return (item === null || item === void 0 || (_item$getBoundingClie = item.getBoundingClientRect()) === null || _item$getBoundingClie === void 0 ? void 0 : _item$getBoundingClie.height) || 0;
+    });
+    api.start(function (itemIndex) {
+      var item = (items || [])[itemIndex] || null;
+      var sortedIndex = currentItems.findIndex(function (it) {
+        return it === item;
+      });
+      var currentHeight = heights[itemIndex] || 0;
+      if (item === dragItem) {
+        var _currentY = heights.slice(0, itemIndex).reduce(function (acc, itemHeight) {
+          return acc + itemHeight;
+        }, 0);
+        var _deltaY = dragY - _currentY;
+        return {
+          y: "".concat(_deltaY / currentHeight * 100, "%"),
+          scale: 1.02,
+          immediate: true
+        };
+      }
+      if (itemIndex === sortedIndex) {
+        return {
+          y: "0%",
+          scale: 1,
+          immediate: initial
+        };
+      }
+      var currentY = heights.slice(0, itemIndex).reduce(function (acc, itemHeight) {
+        return acc + itemHeight;
+      }, 0);
+      var newY = heights.slice(0, sortedIndex).reduce(function (acc, itemHeight) {
+        return acc + itemHeight;
+      }, 0);
+      var deltaY = newY - currentY;
+      return {
+        y: "".concat(deltaY / currentHeight * 100, "%"),
+        scale: 1,
+        immediate: initial
+      };
+    });
+    if (initial) {
+      setInitialSorted(true);
+    }
+  }, [api]);
+  var initialSortedItemsRef = useRef(sortedItems);
+  useEffect(function () {
+    if (!isView) {
+      return;
+    }
+    updateSpring(sortedItems, {
+      initial: initialSortedItemsRef.current === sortedItems
+    });
+  }, [sortedItems]);
+  var _useState5 = useState(null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    validated = _useState6[0],
+    setValidated = _useState6[1];
+  var bind = useDrag(function (_ref4) {
+    var _ref4$args = _slicedToArray(_ref4.args, 1),
+      itemIndex = _ref4$args[0],
+      dragActive = _ref4.active,
+      _ref4$movement = _slicedToArray(_ref4.movement, 2),
+      movementY = _ref4$movement[1],
+      tap = _ref4.tap;
+    var item = items[itemIndex] || {};
+    if (tap) {
+      var currentIndex = sortedItems.findIndex(function (it) {
+        return it === item;
+      });
+      var _newIndex = currentIndex === 0 ? sortedItems.length - 1 : currentIndex - 1;
+      updateIndex(item, _newIndex);
+      return;
+    }
+    var sortedIndex = sortedItems.findIndex(function (it) {
+      return it === item;
+    });
+    var heights = sortedItems.map(function (sortedItem) {
+      var _itemsRef$current$ind;
+      var index = items.findIndex(function (it) {
+        return it === sortedItem;
+      });
+      return ((_itemsRef$current$ind = itemsRef.current[index]) === null || _itemsRef$current$ind === void 0 || (_itemsRef$current$ind = _itemsRef$current$ind.getBoundingClientRect()) === null || _itemsRef$current$ind === void 0 ? void 0 : _itemsRef$current$ind.height) || 0;
+    });
+    var ys = heights.map(function (itemHeight, index) {
+      var endY = itemHeight + heights.slice(0, index).reduce(function (acc, h) {
+        return acc + h;
+      }, 0);
+      return {
+        isStart: index === 0,
+        isEnd: index === heights.length - 1,
+        start: endY - itemHeight,
+        end: endY
+      };
+    });
+    var newY = ys[sortedIndex].end - heights[sortedIndex] / 2 + movementY;
+    var newIndex = ys.findIndex(function (_ref5) {
+      var isStart = _ref5.isStart,
+        isEnd = _ref5.isEnd,
+        start = _ref5.start,
+        end = _ref5.end;
+      return (isStart || newY >= start) && (isEnd || newY < end);
+    });
+    if (dragActive) {
+      var newSortedItems = getNewSortedItems(sortedItemsRef.current, item, newIndex);
+      sortedItemsRef.current = newSortedItems;
+      updateSpring(newSortedItems, {
+        dragItem: item,
+        dragY: ys[sortedIndex].start + movementY
+      });
+    } else {
+      setSortedItems(sortedItemsRef.current);
+      // updateIndex(item, newIndex !== -1 ? newIndex : sortedIndex);
+    }
+    // console.log({
+    //     movementY,
+    //     newY,
+    //     itemIndex,
+    //     sortedIndex,
+    //     newIndex,
+    //     ys,
+    //     items: sortedItemsRef.current.map(({ label }) => label),
+    // });
+  }, {
+    axis: 'y',
+    preventDefault: true,
+    filterTaps: true,
+    enabled: isView && active && current && validated === null
+    // preventScroll: 250,
+    // preventScrollAxis: 'y',
+  });
+  var onClickSubmit = useCallback(function () {
+    setValidated(items.map(function (it, index) {
+      var sortedIndex = sortedItems.findIndex(function (sortedItem) {
+        return sortedItem === it;
+      });
+      return index === sortedIndex;
+    }));
+  }, [items, sortedItems]);
+  useEffect(function () {
+    if (validated === null) {
+      return function () {};
+    }
+    var timeout = setTimeout(function () {
+      setSortedItems(items);
+    }, 2000);
+    return function () {
+      clearTimeout(timeout);
+    };
+  }, [validated]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles.container, _defineProperty(_defineProperty(_defineProperty({}, className, className !== null), styles.sorted, initialSorted || !isView), styles.isPlaceholder, isPlaceholder)]),
+    "data-screen-ready": true
+  }, /*#__PURE__*/React.createElement(Container, {
+    width: width,
+    height: height,
+    className: styles.content
+  }, /*#__PURE__*/React.createElement(Layout, {
+    className: styles.layout,
+    verticalAlign: layout,
+    fullscreen: true,
+    style: !isPlaceholder ? {
+      padding: spacing,
+      paddingTop: (!isPreview ? viewerTopHeight : 0) + (headerHeight || spacing),
+      paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + (footerHeight || spacing)
+    } : null
+  }, !isPlaceholder && hasHeader ? /*#__PURE__*/React.createElement("div", {
+    className: styles.header,
+    ref: headerRef,
+    style: {
+      paddingTop: spacing / 2,
+      paddingBottom: spacing,
+      paddingLeft: spacing,
+      paddingRight: spacing,
+      transform: "translate(0px, ".concat(viewerTopHeight, "px)")
+    }
+  }, /*#__PURE__*/React.createElement(Header, header)) : null, /*#__PURE__*/React.createElement(ScreenElement, {
+    key: "title",
+    placeholder: "title",
+    emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "X7kRRa",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Heading"
+      }]
+    }),
+    emptyClassName: styles.emptyHeading,
+    isEmpty: !heading || (heading === null || heading === void 0 ? void 0 : heading.body) === ''
+  }, heading ? /*#__PURE__*/React.createElement(Heading, Object.assign({
+    className: classNames([styles.heading])
+  }, heading)) : null), /*#__PURE__*/React.createElement(Spacer, {
+    key: "spacer",
+    size: 5
+  }), /*#__PURE__*/React.createElement(ScreenElement, {
+    key: "items",
+    placeholder: "items",
+    emptyLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "03U69o",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Buttons"
+      }]
+    }),
+    className: styles.items,
+    emptyClassName: styles.emptyItems,
+    isEmpty: (items || []).length === 0
+  }, springs.map(function (props, itemIndex) {
+    var item = items[itemIndex] || {};
+    var _ref7 = item || {},
+      _ref7$visual = _ref7.visual,
+      visual = _ref7$visual === void 0 ? null : _ref7$visual,
+      itemLabel = _ref7.label,
+      _ref7$boxStyle = _ref7.boxStyle,
+      boxStyle = _ref7$boxStyle === void 0 ? null : _ref7$boxStyle;
+    var finalLabel = isString(itemLabel) ? {
+      body: itemLabel
+    } : itemLabel || {};
+    var _ref8 = finalLabel || {},
+      _ref8$body = _ref8.body,
+      label = _ref8$body === void 0 ? null : _ref8$body,
+      _ref8$textStyle = _ref8.textStyle,
+      textStyle = _ref8$textStyle === void 0 ? null : _ref8$textStyle;
+    var isEmpty = label === null && visual === null;
+    var isValid = validated !== null && validated[itemIndex];
+    return /*#__PURE__*/React.createElement(animated.div, Object.assign({
+      key: "button-".concat(itemIndex),
+      className: classNames([styles.item, _defineProperty(_defineProperty(_defineProperty({}, styles.isEmpty, isEmpty), styles.valid, validated !== null && isValid), styles.invalid, validated !== null && !isValid)]),
+      style: props,
+      ref: function ref(_ref1) {
+        itemsRef.current[itemIndex] = _ref1;
+      }
+    }, bind(itemIndex)), /*#__PURE__*/React.createElement("div", {
+      className: classNames([styles.button, _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles.layoutLabelBottom, buttonLayout === 'label-bottom'), styles.layoutLabelTop, buttonLayout === 'label-top'), styles.layoutNoLabel, buttonLayout === 'no-label'), styles.layoutLabelOver, buttonLayout === 'label-over')]),
+      style: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, getStyleFromBox(buttonBoxStyle)), getStyleFromBox(boxStyle)), getStyleFromBox(validated && isValid ? validBoxStyle : null)), getStyleFromBox(validated && !isValid ? invalidBoxStyle : null))
+      // onClick={(e) => onItemClick(e, item, itemIndex)}
+    }, visual !== null ? /*#__PURE__*/React.createElement(Visual, {
+      className: styles.buttonVisual,
+      imageClassName: styles.thumbnail,
+      media: visual,
+      width: "auto"
+    }) : null, label !== null ? /*#__PURE__*/React.createElement(Text, Object.assign({
+      className: styles.buttonLabel
+    }, finalLabel, {
+      textStyle: _objectSpread(_objectSpread({}, getStyleFromText(buttonTextStyle)), getStyleFromText(textStyle))
+    })) : null));
+  })), /*#__PURE__*/React.createElement(Button, {
+    className: styles.submitButton,
+    disabled: validated !== null,
+    type: "button",
+    onClick: onClickSubmit,
+    style: getStyleFromBox(submitBoxStyle)
+  }, validated !== null ? /*#__PURE__*/React.createElement(Text, Object.assign({
+    className: styles.buttonLabel,
+    body: intl.formatMessage({
+      id: "CTculh",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Validated"
+      }]
+    })
+  }, validatedButtonLabel)) : /*#__PURE__*/React.createElement(Text, Object.assign({
+    className: styles.buttonLabel,
+    body: intl.formatMessage({
+      id: "IbZVf0",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Submit"
+      }]
+    })
+  }, submitButtonLabel))), !isPlaceholder && hasFooter ? /*#__PURE__*/React.createElement("div", {
+    className: styles.footer,
+    ref: footerRef,
+    style: {
+      paddingTop: spacing,
+      paddingBottom: spacing / 2,
+      paddingLeft: Math.max(viewerBottomSidesWidth - spacing, 0),
+      paddingRight: Math.max(viewerBottomSidesWidth - spacing, 0)
+    }
+  }, /*#__PURE__*/React.createElement(Footer, footerProps)) : null)), !isPlaceholder ? /*#__PURE__*/React.createElement(Background, {
+    background: background,
+    width: width,
+    height: height,
+    resolution: resolution,
+    playing: backgroundPlaying,
+    muted: muted,
+    shouldLoad: backgroundShouldLoad,
+    mediaRef: mediaRef,
+    withoutVideo: isPreview,
+    className: styles.background
+  }) : null);
+};
+ShareScreen.propTypes = propTypes;
+ShareScreen.defaultProps = defaultProps;
+
+// import * as transforms from './transforms/index';
+
+var definition = {
+  id: 'game-sort',
+  type: 'screen',
+  group: {
+    label: defineMessage({
+      id: "w3+kFW",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Game"
+      }]
+    }),
+    order: 12
+  },
+  title: defineMessage({
+    id: "OOIQh7",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Game Sort"
+    }]
+  }),
+  component: ShareScreen,
+  layouts: ['top', 'middle', 'bottom'],
+  // transforms,
+  fields: [{
+    name: 'layout',
+    type: 'screen-layout',
+    defaultValue: 'middle',
+    label: defineMessage({
+      id: "4iBXj2",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Layout"
+      }]
+    })
+  }, {
+    name: 'heading',
+    type: 'heading-element',
+    label: defineMessage({
+      id: "wx5PI0",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Heading"
+      }]
+    })
+  }, {
+    name: 'items',
+    type: 'buttons',
+    label: defineMessage({
+      id: "l5uLMd",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Buttons"
+      }]
+    }),
+    itemsProps: {
+      excludedFields: ['url', 'inWebView']
+    },
+    isSection: true
+  }, {
+    name: 'buttonStyles',
+    type: 'fields',
+    defaultValue: {
+      layout: 'label-bottom',
+      boxStyle: {
+        backgroundColor: {
+          alpha: 0.15,
+          color: '#000000'
+        }
+      }
+    },
+    isList: true,
+    fields: [{
+      name: 'layout',
+      type: 'button-layout',
+      label: defineMessage({
+        id: "OPxJx/",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Layout"
+        }]
+      })
+    }, {
+      name: 'textStyle',
+      type: 'text-style-form',
+      label: defineMessage({
+        id: "rzXCu2",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Label style"
+        }]
+      })
+    }, {
+      name: 'boxStyle',
+      type: 'box-style-form',
+      label: defineMessage({
+        id: "nno1Pq",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Button style"
+        }]
+      })
+    }, {
+      name: 'validBoxStyle',
+      type: 'box-style-form',
+      label: defineMessage({
+        id: "6bqjZK",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Valid button style"
+        }]
+      })
+    }, {
+      name: 'invalidBoxStyle',
+      type: 'box-style-form',
+      label: defineMessage({
+        id: "NPpncq",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Invalid button style"
+        }]
+      })
+    }, {
+      name: 'submitBoxStyle',
+      type: 'box-style-form',
+      label: defineMessage({
+        id: "9QP1Kj",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Submit button style"
+        }]
+      })
+    }, {
+      name: 'validatedBoxStyle',
+      type: 'box-style-form',
+      label: defineMessage({
+        id: "6EF9gy",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Validated button style"
+        }]
+      })
+    }, {
+      name: 'submitButtonLabel',
+      type: 'text-element',
+      label: defineMessage({
+        id: "Vuj0dX",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Submit button label"
+        }]
+      })
+    }, {
+      name: 'validatedButtonLabel',
+      type: 'text-element',
+      label: defineMessage({
+        id: "tbrIgP",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Validated button label"
+        }]
+      })
+    }]
+  }, {
+    name: 'background',
+    type: 'background',
+    label: defineMessage({
+      id: "+MPZRu",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Background"
+      }]
+    })
+  }, {
+    name: 'header',
+    type: 'header',
+    label: defineMessage({
+      id: "rhuDxI",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Header"
+      }]
+    }),
+    theme: {
+      badge: {
+        label: {
+          textStyle: 'badge'
+        },
+        boxStyle: 'badge'
+      }
+    }
+  }, {
+    name: 'footer',
+    type: 'footer',
+    label: defineMessage({
+      id: "g4nybp",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Footer"
+      }]
+    }),
+    theme: {
+      callToAction: {
+        label: {
+          textStyle: 'cta'
+        },
+        boxStyle: 'cta'
+      }
+    }
+  }]
+};
+
+export { ShareScreen as GameSortScreen, definition as default };

package/package.json

@@ -0,0 +1,91 @@
+{
+    "name": "@micromag/screen-game-sort",
+    "version": "0.3.714",
+    "private": false,
+    "description": "",
+    "keywords": [
+        "javascript"
+    ],
+    "homepage": "https://github.com/urbania-media/micromag-js",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/urbania-media/micromag-js.git"
+    },
+    "author": {
+        "name": "Folklore",
+        "email": "info@folklore.email"
+    },
+    "contributors": [
+        {
+            "name": "David Mongeau-Petitpas",
+            "email": "dmp@folklore.email"
+        },
+        {
+            "name": "Nicolas Roy-Bourdages",
+            "email": "nrb@folklore.email"
+        },
+        {
+            "name": "Julien Carignan",
+            "email": "jc@folklore.email"
+        },
+        {
+            "name": "Fred Mercy",
+            "email": "fred@atelierfolklore.ca"
+        }
+    ],
+    "license": "ISC",
+    "type": "module",
+    "module": "es/index.js",
+    "style": "assets/css/styles.css",
+    "exports": {
+        ".": {
+            "import": "./es/index.js"
+        },
+        "./assets/css/styles": "./assets/css/styles.css",
+        "./assets/css/styles.css": "./assets/css/styles.css"
+    },
+    "files": [
+        "lib",
+        "es",
+        "assets"
+    ],
+    "scripts": {
+        "clean": "rm -rf es && rm -rf lib && rm -rf assets",
+        "prepublishOnly": "npm run build",
+        "build": "../../scripts/prepare-package.sh"
+    },
+    "devDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+    },
+    "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+    },
+    "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@micromag/core": "^0.3.714",
+        "@micromag/element-background": "^0.3.714",
+        "@micromag/element-button": "^0.3.714",
+        "@micromag/element-container": "^0.3.714",
+        "@micromag/element-footer": "^0.3.714",
+        "@micromag/element-header": "^0.3.714",
+        "@micromag/element-heading": "^0.3.714",
+        "@micromag/element-layout": "^0.3.714",
+        "@micromag/element-text": "^0.3.714",
+        "@micromag/element-visual": "^0.3.714",
+        "@micromag/transforms": "^0.3.714",
+        "@react-spring/web": "^9.6.1",
+        "@use-gesture/react": "^10.3.0",
+        "classnames": "^2.2.6",
+        "lodash": "^4.17.21",
+        "prop-types": "^15.7.2",
+        "react-intl": "^6.6.4",
+        "uuid": "^9.0.0"
+    },
+    "publishConfig": {
+        "access": "public",
+        "registry": "https://registry.npmjs.org/"
+    },
+    "gitHead": "85dd03193fcac7776b74d8a41a2ebf116890b507"
+}