@mirai/ui 1.0.12 → 1.0.13

package/build/primitives/Radio/Radio.js

@@ -0,0 +1,62 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Radio = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _helpers = require("../../helpers");
+
+var _RadioModule = _interopRequireDefault(require("./Radio.module.css"));
+
+var _excluded = ["checked", "disabled", "name", "value", "onChange"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+var Radio = function Radio(_ref) {
+  var checked = _ref.checked,
+      disabled = _ref.disabled,
+      name = _ref.name,
+      _ref$value = _ref.value,
+      value = _ref$value === void 0 ? '' : _ref$value,
+      onChange = _ref.onChange,
+      others = _objectWithoutProperties(_ref, _excluded);
+
+  var handleChange = function handleChange(event) {
+    onChange && onChange(value, event);
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _helpers.styles)(_RadioModule.default.radio, others.className),
+    style: others.style
+  }, /*#__PURE__*/_react.default.createElement("input", {
+    checked: checked,
+    "data-testid": others['data-testid'],
+    disabled: disabled,
+    name: name,
+    type: "radio",
+    value: value,
+    onChange: !disabled ? handleChange : undefined
+  }), /*#__PURE__*/_react.default.createElement("span", {
+    className: _RadioModule.default.checkmark
+  }));
+};
+
+exports.Radio = Radio;
+Radio.displayName = 'Primitive:Radio';
+Radio.propTypes = {
+  checked: _propTypes.default.bool,
+  disabled: _propTypes.default.bool,
+  name: _propTypes.default.string.isRequired,
+  value: _propTypes.default.string,
+  onChange: _propTypes.default.func
+};
+//# sourceMappingURL=Radio.js.map

package/build/primitives/Radio/Radio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.js","names":["Radio","checked","disabled","name","value","onChange","others","handleChange","event","style","radio","className","undefined","checkmark","displayName","propTypes","PropTypes","bool","string","isRequired","func"],"sources":["../../../src/primitives/Radio/Radio.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport style from './Radio.module.css';\n\nconst Radio = ({ checked, disabled, name, value = '', onChange, ...others }) => {\n  const handleChange = (event) => {\n    onChange && onChange(value, event);\n  };\n\n  return (\n    <div className={styles(style.radio, others.className)} style={others.style}>\n      <input\n        checked={checked}\n        data-testid={others['data-testid']}\n        disabled={disabled}\n        name={name}\n        type=\"radio\"\n        value={value}\n        onChange={!disabled ? handleChange : undefined}\n      />\n      <span className={style.checkmark} />\n    </div>\n  );\n};\n\nRadio.displayName = 'Primitive:Radio';\n\nRadio.propTypes = {\n  checked: PropTypes.bool,\n  disabled: PropTypes.bool,\n  name: PropTypes.string.isRequired,\n  value: PropTypes.string,\n  onChange: PropTypes.func,\n};\n\nexport { Radio };\n"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;;;;;;;;;AAEA,IAAMA,KAAK,GAAG,SAARA,KAAQ,OAAkE;EAAA,IAA/DC,OAA+D,QAA/DA,OAA+D;EAAA,IAAtDC,QAAsD,QAAtDA,QAAsD;EAAA,IAA5CC,IAA4C,QAA5CA,IAA4C;EAAA,sBAAtCC,KAAsC;EAAA,IAAtCA,KAAsC,2BAA9B,EAA8B;EAAA,IAA1BC,QAA0B,QAA1BA,QAA0B;EAAA,IAAbC,MAAa;;EAC9E,IAAMC,YAAY,GAAG,SAAfA,YAAe,CAACC,KAAD,EAAW;IAC9BH,QAAQ,IAAIA,QAAQ,CAACD,KAAD,EAAQI,KAAR,CAApB;EACD,CAFD;;EAIA,oBACE;IAAK,SAAS,EAAE,qBAAOC,qBAAMC,KAAb,EAAoBJ,MAAM,CAACK,SAA3B,CAAhB;IAAuD,KAAK,EAAEL,MAAM,CAACG;EAArE,gBACE;IACE,OAAO,EAAER,OADX;IAEE,eAAaK,MAAM,CAAC,aAAD,CAFrB;IAGE,QAAQ,EAAEJ,QAHZ;IAIE,IAAI,EAAEC,IAJR;IAKE,IAAI,EAAC,OALP;IAME,KAAK,EAAEC,KANT;IAOE,QAAQ,EAAE,CAACF,QAAD,GAAYK,YAAZ,GAA2BK;EAPvC,EADF,eAUE;IAAM,SAAS,EAAEH,qBAAMI;EAAvB,EAVF,CADF;AAcD,CAnBD;;;AAqBAb,KAAK,CAACc,WAAN,GAAoB,iBAApB;AAEAd,KAAK,CAACe,SAAN,GAAkB;EAChBd,OAAO,EAAEe,mBAAUC,IADH;EAEhBf,QAAQ,EAAEc,mBAAUC,IAFJ;EAGhBd,IAAI,EAAEa,mBAAUE,MAAV,CAAiBC,UAHP;EAIhBf,KAAK,EAAEY,mBAAUE,MAJD;EAKhBb,QAAQ,EAAEW,mBAAUI;AALJ,CAAlB"}

package/build/primitives/Radio/Radio.module.css

@@ -0,0 +1,60 @@
+:root {
+  --mirai-ui-radio-base: var(--mirai-ui-base);
+  --mirai-ui-radio-border: var(--mirai-ui-content-400);
+  --mirai-ui-radio-checked: var(--mirai-ui-accent);
+  --mirai-ui-radio-disabled: var(--mirai-ui-content-300);
+  --mirai-ui-radio-size: var(--mirai-ui-space-L);
+}
+
+.radio {
+  cursor: pointer;
+  position: relative;
+  height: var(--mirai-ui-radio-size);
+  width: var(--mirai-ui-radio-size);
+}
+
+.radio input {
+  background-color: var(--mirai-ui-radio-base);
+  border: 1px solid var(--mirai-ui-radio-border);
+  border-radius: 50%;
+  box-sizing: border-box;
+  height: var(--mirai-ui-radio-size);
+  margin: 0;
+  outline: none;
+  user-select: none;
+  transition: border-color var(--mirai-ui-motion-collapse) var(--mirai-ui-motion-easing);
+  width: var(--mirai-ui-radio-size);
+
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+}
+
+.radio .checkmark {
+  border-radius: 50%;
+  margin: calc(var(--mirai-ui-radio-size) / 4);
+  height: calc(var(--mirai-ui-radio-size) / 2);
+  left: 0;
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  transition: background-color var(--mirai-ui-motion-collapse) var(--mirai-ui-motion-easing);
+  width: calc(var(--mirai-ui-radio-size) / 2);
+}
+
+.radio input:disabled {
+  border-color: var(--mirai-ui-radio-disabled);
+}
+
+.radio input:checked:not(:disabled) {
+  background-color: var(--mirai-ui-radio-checked);
+  border-color: var(--mirai-ui-radio-checked);
+}
+
+.radio input:checked:disabled ~ .checkmark {
+  background-color: var(--mirai-ui-radio-disabled);
+}
+
+.radio input:checked:not(:disabled) ~ .checkmark {
+  background-color: var(--mirai-ui-radio-base);
+}

package/build/primitives/Radio/__tests__/__snapshots__/Radio.test.js.snap

@@ -0,0 +1,125 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`primitive:<Radio> inherit:className 1`] = `
+<DocumentFragment>
+  <div
+    class="radio mirai"
+  >
+    <input
+      name="name"
+      type="radio"
+      value=""
+    />
+    <span
+      class="checkmark"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`primitive:<Radio> prop:checked && disabled 1`] = `
+<DocumentFragment>
+  <div
+    class="radio"
+  >
+    <input
+      checked=""
+      disabled=""
+      name="name"
+      type="radio"
+      value=""
+    />
+    <span
+      class="checkmark"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`primitive:<Radio> prop:checked 1`] = `
+<DocumentFragment>
+  <div
+    class="radio"
+  >
+    <input
+      checked=""
+      name="name"
+      type="radio"
+      value=""
+    />
+    <span
+      class="checkmark"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`primitive:<Radio> prop:disabled 1`] = `
+<DocumentFragment>
+  <div
+    class="radio"
+  >
+    <input
+      disabled=""
+      name="name"
+      type="radio"
+      value=""
+    />
+    <span
+      class="checkmark"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`primitive:<Radio> prop:value 1`] = `
+<DocumentFragment>
+  <div
+    class="radio"
+  >
+    <input
+      name="name"
+      type="radio"
+      value="value"
+    />
+    <span
+      class="checkmark"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`primitive:<Radio> render 1`] = `
+<DocumentFragment>
+  <div
+    class="radio"
+  >
+    <input
+      name="name"
+      type="radio"
+      value=""
+    />
+    <span
+      class="checkmark"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`primitive:<Radio> testID 1`] = `
+<DocumentFragment>
+  <div
+    class="radio"
+  >
+    <input
+      data-testid="mirai"
+      name="name"
+      type="radio"
+      value=""
+    />
+    <span
+      class="checkmark"
+    />
+  </div>
+</DocumentFragment>
+`;

package/build/primitives/Radio/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _Radio = require("./Radio");
+
+Object.keys(_Radio).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Radio[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Radio[key];
+    }
+  });
+});
+//# sourceMappingURL=index.js.map

package/build/primitives/Radio/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/primitives/Radio/index.js"],"sourcesContent":["export * from './Radio';\n"],"mappings":";;;;;;AAAA;;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}

package/build/primitives/ScrollView/ScrollView.js

@@ -0,0 +1,112 @@
+"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.ScrollView = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _helpers = require("../../helpers");
+
+var _ScrollViewModule = _interopRequireDefault(require("./ScrollView.module.css"));
+
+var _excluded = ["behavior", "children", "height", "horizontal", "scrollEventThrottle", "scrollIndicator", "scrollTo", "tag", "width", "onScroll"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+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) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+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; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+var ScrollView = function ScrollView(_ref) {
+  var _ref$behavior = _ref.behavior,
+      behavior = _ref$behavior === void 0 ? 'smooth' : _ref$behavior,
+      children = _ref.children,
+      height = _ref.height,
+      horizontal = _ref.horizontal,
+      _ref$scrollEventThrot = _ref.scrollEventThrottle,
+      scrollEventThrottle = _ref$scrollEventThrot === void 0 ? 16 : _ref$scrollEventThrot,
+      scrollIndicator = _ref.scrollIndicator,
+      scrollTo = _ref.scrollTo,
+      _ref$tag = _ref.tag,
+      tag = _ref$tag === void 0 ? 'div' : _ref$tag,
+      width = _ref.width,
+      onScroll = _ref.onScroll,
+      others = _objectWithoutProperties(_ref, _excluded);
+
+  var ref = (0, _react.useRef)();
+  var timeout = null;
+  (0, _react.useEffect)(function () {
+    var _current$scrollTo;
+
+    var _ref2 = ref || {},
+        _ref2$current = _ref2.current,
+        current = _ref2$current === void 0 ? {} : _ref2$current;
+
+    if (!current.scrollTo || !scrollTo) return;
+    current.scrollTo((_current$scrollTo = {}, _defineProperty(_current$scrollTo, horizontal ? 'left' : 'top', scrollTo), _defineProperty(_current$scrollTo, "behavior", behavior), _current$scrollTo)); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [scrollTo]);
+
+  var handleScroll = function handleScroll(_ref3) {
+    var _ref3$target = _ref3.target;
+    _ref3$target = _ref3$target === void 0 ? {} : _ref3$target;
+    var clientHeight = _ref3$target.clientHeight,
+        clientWidth = _ref3$target.clientWidth,
+        scrollHeight = _ref3$target.scrollHeight,
+        scrollWidth = _ref3$target.scrollWidth,
+        scrollTop = _ref3$target.scrollTop,
+        scrollLeft = _ref3$target.scrollLeft;
+    var x = parseInt(scrollLeft, 10);
+    var y = parseInt(scrollTop, 10);
+    clearTimeout(timeout);
+    timeout = setTimeout(function () {
+      onScroll({
+        x: x,
+        y: y,
+        percentX: parseInt(x * 100 / (scrollWidth - clientWidth), 10),
+        percentY: parseInt(y * 100 / (scrollHeight - clientHeight), 10)
+      });
+    }, scrollEventThrottle);
+  };
+
+  return /*#__PURE__*/_react.default.createElement(tag, _objectSpread(_objectSpread({}, others), {}, {
+    ref: ref,
+    className: (0, _helpers.styles)(_ScrollViewModule.default.scrollview, horizontal && _ScrollViewModule.default.horizontal, scrollIndicator && _ScrollViewModule.default.indicator, others.className),
+    style: {
+      height: height,
+      width: width
+    },
+    onScroll: onScroll ? handleScroll : undefined
+  }), children);
+};
+
+exports.ScrollView = ScrollView;
+ScrollView.displayName = 'Primitive:ScrollView';
+ScrollView.propTypes = {
+  behavior: _propTypes.default.string,
+  children: _propTypes.default.node.isRequired,
+  height: _propTypes.default.number,
+  horizontal: _propTypes.default.bool,
+  scrollEventThrottle: _propTypes.default.number,
+  scrollIndicator: _propTypes.default.bool,
+  scrollTo: _propTypes.default.number,
+  tag: _propTypes.default.string,
+  width: _propTypes.default.number,
+  onScroll: _propTypes.default.func
+};
+//# sourceMappingURL=ScrollView.js.map

package/build/primitives/ScrollView/ScrollView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollView.js","names":["ScrollView","behavior","children","height","horizontal","scrollEventThrottle","scrollIndicator","scrollTo","tag","width","onScroll","others","ref","timeout","current","handleScroll","target","clientHeight","clientWidth","scrollHeight","scrollWidth","scrollTop","scrollLeft","x","parseInt","y","clearTimeout","setTimeout","percentX","percentY","React","createElement","className","style","scrollview","indicator","undefined","displayName","propTypes","PropTypes","string","node","isRequired","number","bool","func"],"sources":["../../../src/primitives/ScrollView/ScrollView.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React, { useEffect, useRef } from 'react';\n\nimport { styles } from '../../helpers';\nimport style from './ScrollView.module.css';\n\nconst ScrollView = ({\n  behavior = 'smooth',\n  children,\n  height,\n  horizontal,\n  scrollEventThrottle = 16, // * 60fps\n  scrollIndicator,\n  scrollTo,\n  tag = 'div',\n  width,\n  onScroll,\n  ...others\n}) => {\n  const ref = useRef();\n\n  let timeout = null;\n\n  useEffect(() => {\n    const { current = {} } = ref || {};\n    if (!current.scrollTo || !scrollTo) return;\n\n    current.scrollTo({ [horizontal ? 'left' : 'top']: scrollTo, behavior });\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [scrollTo]);\n\n  const handleScroll = ({\n    target: { clientHeight, clientWidth, scrollHeight, scrollWidth, scrollTop, scrollLeft } = {},\n  }) => {\n    const x = parseInt(scrollLeft, 10);\n    const y = parseInt(scrollTop, 10);\n\n    clearTimeout(timeout);\n    timeout = setTimeout(() => {\n      onScroll({\n        x,\n        y,\n        percentX: parseInt((x * 100) / (scrollWidth - clientWidth), 10),\n        percentY: parseInt((y * 100) / (scrollHeight - clientHeight), 10),\n      });\n    }, scrollEventThrottle);\n  };\n\n  return React.createElement(\n    tag,\n    {\n      ...others,\n      ref,\n      className: styles(\n        style.scrollview,\n        horizontal && style.horizontal,\n        scrollIndicator && style.indicator,\n        others.className,\n      ),\n      style: { height, width },\n      onScroll: onScroll ? handleScroll : undefined,\n    },\n    children,\n  );\n};\n\nScrollView.displayName = 'Primitive:ScrollView';\n\nScrollView.propTypes = {\n  behavior: PropTypes.string,\n  children: PropTypes.node.isRequired,\n  height: PropTypes.number,\n  horizontal: PropTypes.bool,\n  scrollEventThrottle: PropTypes.number,\n  scrollIndicator: PropTypes.bool,\n  scrollTo: PropTypes.number,\n  tag: PropTypes.string,\n  width: PropTypes.number,\n  onScroll: PropTypes.func,\n};\n\nexport { ScrollView };\n"],"mappings":"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"}

package/build/primitives/ScrollView/ScrollView.module.css

@@ -0,0 +1,35 @@
+.scrollview {
+  align-items: flex-start;
+  display: flex;
+  height: fit-content;
+  width: fit-content;
+}
+
+.scrollview:not(.horizontal) {
+  flex-direction: column;
+  scroll-snap-type: y mandatory;
+  overflow-y: scroll;
+}
+
+.scrollview.horizontal {
+  flex-direction: row;
+  scroll-snap-type: x mandatory;
+  overflow-x: scroll;
+}
+
+.indicator {
+  /* TODO: Just need this empty class */
+}
+
+.scrollview:not(.indicator) {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.scrollview:not(.indicator)::-webkit-scrollbar {
+  display: none;
+}
+
+.scrollview > * {
+  scroll-snap-align: start;
+}