@onepercentio/one-ui 0.19.9 → 0.20.1

package/dist/components/FileInput/FileInput.d.ts

@@ -22,6 +22,7 @@ export declare type FileInputProps = {
     file?: File;
     onFile: (file: File | undefined) => void;
     progress?: number;
+    disabled?: boolean;
 } & React.HTMLProps<HTMLInputElement>;
 /**
  * A component to provide the upload of a file

package/dist/components/FileInput/View/Compact/Compact.d.ts

@@ -2,4 +2,4 @@ import { FileInputViewProps } from "../View.types";
 /**
  * Shows the file submission input in a more compact form
  **/
-export default function Compact({ states, file, footer, inputEl, onAction, progress, className, }: FileInputViewProps): JSX.Element;
+export default function Compact({ states, file, footer, inputEl, onAction, progress, className, disabled, }: FileInputViewProps): JSX.Element;

package/dist/components/FileInput/View/Compact/Compact.js

@@ -23,7 +23,8 @@ function Compact(_ref) {
     inputEl = _ref.inputEl,
     onAction = _ref.onAction,
     progress = _ref.progress,
-    className = _ref.className;
+    className = _ref.className,
+    disabled = _ref.disabled;
   const state = states[file ? "fileProvided" : "waitingFile"];
   const statusClass = progress !== undefined && progress < 100 ? "loading" : file ? "completed" : "waiting";
   const progressDashArray = (0, _react.useMemo)(function () {
@@ -43,7 +44,8 @@ function Compact(_ref) {
     }
   }, [statusClass]);
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(_CompactModule.default.root, " ").concat(className),
+    className: "".concat(_CompactModule.default.root, " ").concat(className, " ").concat(disabled ? _CompactModule.default.disabled : ""),
+    onClick: onAction,
     style: {
       "--progress-stroke-dasharray": progressDashArray
     }
@@ -51,8 +53,7 @@ function Compact(_ref) {
     transitionType: _Transition.TransitionAnimationTypes.COIN_FLIP
   }, /*#__PURE__*/_react.default.createElement(_Button.default, {
     variant: "transparent",
-    key: statusClass,
-    onClick: onAction
+    key: statusClass
   }, /*#__PURE__*/_react.default.createElement("svg", {
     viewBox: "0 0 46 47",
     className: _CompactModule.default[statusClass],
@@ -68,7 +69,21 @@ function Compact(_ref) {
     "stroke-width": "2",
     "stroke-linecap": "round",
     "stroke-linejoin": "round"
-  }), /*#__PURE__*/_react.default.createElement("g", {
+  }), statusClass === "completed" ? /*#__PURE__*/_react.default.createElement("g", {
+    transform: "translate(11, 11)"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M22 11.0801V12.0001C21.9988 14.1565 21.3005 16.2548 20.0093 17.9819C18.7182 19.7091 16.9033 20.9726 14.8354 21.584C12.7674 22.1954 10.5573 22.122 8.53447 21.3747C6.51168 20.6274 4.78465 19.2462 3.61096 17.4372C2.43727 15.6281 1.87979 13.4882 2.02168 11.3364C2.16356 9.18467 2.99721 7.13643 4.39828 5.49718C5.79935 3.85793 7.69279 2.71549 9.79619 2.24025C11.8996 1.76502 14.1003 1.98245 16.07 2.86011",
+    stroke: "white",
+    "stroke-width": "2",
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M22 4L12 14.01L9 11.01",
+    stroke: "white",
+    "stroke-width": "2",
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round"
+  })) : /*#__PURE__*/_react.default.createElement("g", {
     transform: polylines[0]
   }, /*#__PURE__*/_react.default.createElement("polyline", {
     points: polylines[1],

package/dist/components/FileInput/View/Compact/Compact.module.scss

@@ -5,6 +5,11 @@
   background-color: $fileInputBackgroundColor;
   display: flex;
   align-items: center;
+  cursor: pointer;
+  &.disabled {
+    pointer-events: none;
+    cursor: initial;
+  }
   button {
     padding: 0px;
     min-width: initial;
@@ -41,10 +46,8 @@
       }
     }
     &.completed {
-      --svg-color: #{$successDark};
       circle {
-        fill: #{$success};
-        stroke: #{$successDark};
+        fill: var(--svg-color);
       }
       polyline {
         stroke-width: 3;

package/dist/components/FileInput/View/View.types.d.ts

@@ -5,4 +5,4 @@ export declare type FileInputViewProps = {
     onAction: () => void;
     /** A range from 0-100 to indicate some file upload progress */
     progress?: number;
-} & Pick<FileInputProps, "states" | "file" | "footer" | "className">;
+} & Pick<FileInputProps, "states" | "file" | "footer" | "className" | "disabled">;

package/dist/components/Switch/Switch.d.ts

@@ -2,8 +2,9 @@ import { DetailedHTMLProps, HTMLAttributes } from "react";
 /**
  * Switchs between states
  **/
-export default function Switch({ enabled, onToggle, size, ...props }: {
+export default function Switch({ enabled, onToggle, size, disabled, ...props }: {
     enabled: boolean;
     onToggle: (newState: boolean) => void;
     size: number;
+    disabled?: boolean;
 } & Omit<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">): JSX.Element;

package/dist/components/Switch/Switch.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = Switch;
 var _react = _interopRequireDefault(require("react"));
 var _SwitchModule = _interopRequireDefault(require("./Switch.module.scss"));
-const _excluded = ["enabled", "onToggle", "size"];
+const _excluded = ["enabled", "onToggle", "size", "disabled"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
@@ -18,16 +18,20 @@ function Switch(_ref) {
   let enabled = _ref.enabled,
     onToggle = _ref.onToggle,
     size = _ref.size,
+    disabled = _ref.disabled,
     props = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", _extends({
     style: {
       fontSize: "".concat(size, "px")
     },
-    className: "".concat(_SwitchModule.default.root, " ").concat(enabled ? _SwitchModule.default.enabled : ""),
+    className: "".concat(_SwitchModule.default.root, " ").concat(enabled ? _SwitchModule.default.on : "", " ").concat(disabled ? _SwitchModule.default.disabled : ""),
     onClick: function onClick() {
       return onToggle(!enabled);
     }
   }, props), /*#__PURE__*/_react.default.createElement("div", {
     className: _SwitchModule.default.toggler
+  }), /*#__PURE__*/_react.default.createElement("input", {
+    checked: enabled,
+    type: "checkbox"
   })));
 }

package/dist/components/Switch/Switch.module.scss

@@ -8,11 +8,19 @@
   width: 2em + 0.4em;
   padding: 0.1em;
   border-radius: math.div($height, 1);
-  border: .1em solid $digitalBlue;
+  border: 0.1em solid $digitalBlue;
   background-color: white;
   transition: background-color $fast linear;
   cursor: pointer;
 
+  input {
+    max-width: 0px;
+    max-height: 0px;
+    width: 0;
+    height: 0;
+    opacity: 0;
+  }
+
   .toggler {
     height: 1em;
     width: 1em;
@@ -21,7 +29,11 @@
     transition: transform $fast linear;
   }
 
-  &.enabled {
+  &.disabled {
+    opacity: 0.4;
+    cursor: initial;
+  }
+  &.on {
     background-color: $digitalBlue;
     .toggler {
       transform: translateX(1em);

package/dist/hooks/ui/useSnapToViewport.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+/**
+ * This takes a container and applies padding and margin so the content overflow container and goes until it hits the viewport border
+ */
+export default function useSnapToViewport(defaultPadding: number): import("react").RefObject<HTMLDivElement>;

package/dist/hooks/ui/useSnapToViewport.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useSnapToViewport;
+var _react = require("react");
+var _useSnapToViewportModule = _interopRequireDefault(require("./useSnapToViewport.module.scss"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/**
+ * This takes a container and applies padding and margin so the content overflow container and goes until it hits the viewport border
+ */
+function useSnapToViewport(defaultPadding) {
+  const elRef = (0, _react.useRef)(null);
+  (0, _react.useLayoutEffect)(function () {
+    const diff = window.visualViewport.width - elRef.current.clientWidth;
+    const margin = diff / 2;
+    elRef.current.style.setProperty("--overflow-padding", "".concat(margin, "px"));
+    elRef.current.style.setProperty("--overflow-margin", "".concat(-margin, "px"));
+    elRef.current.style.setProperty("--default-padding", "".concat(defaultPadding, "px"));
+    elRef.current.style.setProperty("--default-margin", "".concat(-defaultPadding, "px"));
+    elRef.current.classList.add(_useSnapToViewportModule.default.applySpacings);
+  }, []);
+  return elRef;
+}

package/dist/hooks/ui/useSnapToViewport.module.scss

@@ -0,0 +1,6 @@
+.applySpacings {
+  padding-left: var(--overflow-padding, var(--default-padding));
+  padding-right: var(--overflow-padding, var(--default-padding));
+  margin-left: var(--overflow-margin, var(--default-margin));
+  margin-right: var(--overflow-margin, var(--default-margin));
+}

package/dist/hooks/useHero.d.ts

@@ -57,4 +57,9 @@ export default function useHero(id: string, options?: Partial<{
     getHerosOnScreen: () => HTMLDivElement[];
     trigger: () => void;
 };
+declare type EVENTS_INTERFACE = Parameters<typeof useHero>[2];
+declare type TRANSITION_TYPES = "ACCELERATION";
+export declare const TRANSITION_FACTORY: {
+    [n in TRANSITION_TYPES]: (events?: EVENTS_INTERFACE) => EVENTS_INTERFACE;
+};
 export {};

package/dist/hooks/useHero.js

@@ -1,12 +1,20 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.TRANSITION_FACTORY = void 0;
 exports.default = useHero;
 var _react = require("react");
 var _ownEvent = _interopRequireDefault(require("../utils/ownEvent"));
+var _useHeroModule = _interopRequireDefault(require("./useHero.module.scss"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
@@ -138,7 +146,7 @@ function useHero(id) {
         /** Set the clone over the new position */
         const willMove = setCloneToCoordinatesOf(el);
         if (!willMove) cleanup();else {
-          for (let propToTransition of propsToTransition) clone.style[propToTransition] = el.style[propToTransition];
+          for (let propToTransition of propsToTransition) clone.style[propToTransition] = window.getComputedStyle(el)[propToTransition];
           const transitionEndCb = (0, _ownEvent.default)(function (_ref3) {
             let target = _ref3.target,
               currentTarget = _ref3.currentTarget;
@@ -181,4 +189,36 @@ function isElementOutsideContainer(container, coordinates) {
     const elementUnderflowsViewport = containerBounds.left - coordinates.left >= coordinates.width || containerBounds.top - coordinates.top >= coordinates.height;
     return elementUnderflowsViewport || elementOverflowsViewport;
   }
-}
+}
+function centerPoint(rect) {
+  return [rect.left + rect.width / 2, rect.top + rect.height / 2];
+}
+const angle = function angle(pointA, pointB) {
+  return Number((Math.atan2(pointA[1] - pointB[1], pointA[0] - pointB[0]) * (179.08 / Math.PI)).toFixed(5));
+};
+const TRANSITION_FACTORY = {
+  ACCELERATION: function ACCELERATION(events) {
+    return _objectSpread(_objectSpread({}, events), {}, {
+      onHeroStart: function onHeroStart(clone, origin, target) {
+        if (events !== null && events !== void 0 && events.onHeroStart) events.onHeroStart(clone, origin, target);
+        clone.classList.add(_useHeroModule.default.acceleration);
+        const centerPointOrigin = centerPoint(origin.getBoundingClientRect());
+        const centerPointDestination = centerPoint(target.getBoundingClientRect());
+        const angleBetweenElements = angle(centerPointOrigin, centerPointDestination);
+        const vectorX = Math.sin(angleBetweenElements);
+        const vectorY = Math.cos(angleBetweenElements);
+        const rotateY = (10 * vectorY).toFixed(0);
+        const originX = (vectorY + 1) * 50;
+        const rotateX = -(10 * vectorX).toFixed(0);
+        const originY = (vectorX + 1) * 50;
+        console.log(vectorX, vectorY, originX);
+        clone.style.setProperty("--stage-1", "rotateY(".concat(rotateY, "deg) rotateX(").concat(-rotateX, "deg)"));
+        clone.style.setProperty("--stage-2", "rotateY(".concat(-rotateY, "deg) rotateX(").concat(rotateX, "deg)"));
+        clone.style.setProperty("--origin-1", "".concat(originX, "% ").concat(originY, "%"));
+        clone.style.setProperty("--origin-2", "".concat(100 - originX, "% ").concat(100 - originY, "%"));
+        document.body.style.perspective = "100vw";
+      }
+    });
+  }
+};
+exports.TRANSITION_FACTORY = TRANSITION_FACTORY;

package/dist/hooks/useHero.module.scss

@@ -0,0 +1,33 @@
+$timing: cubic-bezier(0.5, -0.45, 0.44, 1.37);
+// $timing: cubic-bezier(0.73, -0.49, 0.16, 1.4);
+
+.acceleration {
+  --animation--speed-fast: 1s;
+  animation-name: acceleration;
+  animation-duration: var(--animation--speed-fast);
+  animation-timing-function: $timing;
+  transition-timing-function: $timing !important;
+  transform-origin: var(--origin-1);
+}
+
+@keyframes acceleration {
+  0% {
+    transform: rotateY(0deg);
+  }
+  10% {
+    transform-origin: var(--origin-1);
+    transform: var(--stage-1);
+  }
+
+  70% {
+    transform: var(--stage-1);
+    transform-origin: var(--origin-1);
+  }
+  85% {
+    transform-origin: var(--origin-2);
+    transform: var(--stage-2);
+  }
+  100% {
+    transform: rotateY(0deg);
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onepercentio/one-ui",
-  "version": "0.19.9",
+  "version": "0.20.1",
   "description": "A set of reusable components created through the development of Onepercent projects",
   "repository": "git@github.com:onepercentio/one-ui.git",
   "author": "Murilo Oliveira de Araujo <murilo.araujo@onepercent.io>",