react-text-typing 0.0.4 → 0.1.0

package/README.md

@@ -8,8 +8,6 @@
 [![GitHub issues](https://img.shields.io/github/issues/Oda2/react-text-typing)](https://github.com/Oda2/react-text-typing/issues)
 [![GitHub stars](https://img.shields.io/github/stars/Oda2/react-text-typing)](https://github.com/Oda2/react-text-typing/stargazers)
 [![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2FOda2%2Freact-text-typing.svg?type=shield)](https://app.fossa.com/projects/git%2Bgithub.com%2FOda2%2Freact-text-typing?ref=badge_shield)
-[![Dependencies](https://badgen.net/david/dep/Oda2/react-text-typing)](https://badgen.net/david/dep/Oda2/react-text-typing)
-
 [![Edit admiring-sun-5qry6](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/admiring-sun-5qry6?fontsize=14&hidenavigation=1&theme=dark)
 
 ## Installation

package/dist/TextTyping.js

@@ -2,6 +2,8 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,31 +11,60 @@ exports.default = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _reactJss = require("react-jss");
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+var _excluded = ["text", "showBlink", "speed", "component"];
+
+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 _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+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) { (0, _defineProperty2.default)(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; }
 
 var TextTyping = function TextTyping(_ref) {
   var text = _ref.text,
       showBlink = _ref.showBlink,
-      _ref$component = _ref.component,
-      Component = _ref$component === void 0 ? 'h1' : _ref$component,
-      props = (0, _objectWithoutProperties2.default)(_ref, ["text", "showBlink", "component"]);
+      speed = _ref.speed,
+      Component = _ref.component,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var classes = useStyles(_objectSpread({}, props));
-  return _react.default.createElement(Component, (0, _extends2.default)({
+
+  var _useState = (0, _react.useState)(''),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      internalText = _useState2[0],
+      setInternalText = _useState2[1];
+
+  var timer = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    var typing = text.split('');
+    timer.current = setInterval(function () {
+      if (typing.length > 0) {
+        var next = typing.shift();
+        setInternalText(function (value) {
+          return value + next;
+        });
+      } else {
+        clearInterval(timer.current);
+      }
+    }, speed);
+    return function () {};
+  }, [text]);
+  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
     className: "".concat(classes.text, " ").concat(showBlink ? classes.blink : ''),
-    "data-text": text
-  }, props), text);
+    "data-text": internalText
+  }, props), internalText);
 };
 
 var useStyles = (0, _reactJss.createUseStyles)({
@@ -81,25 +112,30 @@ var useStyles = (0, _reactJss.createUseStyles)({
   }
 });
 TextTyping.propTypes = {
-  /** */
+  /** Text to be demonstrated in the component */
   text: _propTypes.default.string.isRequired,
 
-  /** */
+  /** Component to be used internally in the component */
   component: _propTypes.default.elementType,
 
-  /** */
+  /** Text color */
   colorText: _propTypes.default.string,
 
-  /** */
+  /** Background fill color */
   colorTyping: _propTypes.default.string,
 
-  /** */
-  showBlink: _propTypes.default.bool
+  /** Show flashing text icon */
+  showBlink: _propTypes.default.bool,
+
+  /** Text speed appearing */
+  speed: _propTypes.default.number
 };
 TextTyping.defaultProps = {
+  component: 'h1',
   showBlink: true,
   colorText: '#FFF',
-  colorTyping: '#0075D7'
+  colorTyping: '#0075D7',
+  speed: 500
 };
 var _default = TextTyping;
 exports.default = _default;

package/dist/TextTyping.test.js

@@ -2,43 +2,74 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
 var _react = _interopRequireDefault(require("react"));
 
 var _react2 = require("@testing-library/react");
 
 var _TextTyping = _interopRequireDefault(require("./TextTyping"));
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+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) { (0, _defineProperty2.default)(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; }
 
-afterEach(_react2.cleanup);
 describe('TextTyping Component', function () {
-  it('should render component', function () {
-    var text = 'rice';
-
-    var _createComponent = createComponent({
-      text: text
-    }),
-        container = _createComponent.container;
-
-    expect(container.firstChild).toBeDefined();
-    expect((0, _react2.getByText)(container, text)).toBeDefined();
-  });
-  it('should render component with not show blink', function () {
-    var text = 'rice';
-
-    var _createComponent2 = createComponent({
-      showBlink: false,
-      text: text
-    }),
-        container = _createComponent2.container;
-
-    expect(container.firstChild).toBeDefined();
-    expect((0, _react2.getByText)(container, text)).toBeDefined();
-  });
+  it('should render component', /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+    var text;
+    return _regenerator.default.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            text = 'rice';
+            createComponent({
+              text: text
+            });
+            _context.next = 4;
+            return (0, _react2.waitFor)(function () {
+              return _react2.screen.getByText(text);
+            });
+
+          case 4:
+            expect(_react2.screen.getByText(text)).toBeDefined();
+
+          case 5:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
+  it('should render component with not show blink', /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
+    var text;
+    return _regenerator.default.wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            text = 'rice';
+            createComponent({
+              showBlink: false,
+              text: text
+            });
+            _context2.next = 4;
+            return (0, _react2.waitFor)(function () {
+              return _react2.screen.getByText(text);
+            });
+
+          case 4:
+            expect(_react2.screen.getByText(text)).toBeDefined();
+
+          case 5:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  })));
 });
 
 function createComponent() {
@@ -48,10 +79,11 @@ function createComponent() {
     text: 'Example',
     showBlink: true,
     colorText: '#FFF',
-    colorTyping: '#0075D7'
+    colorTyping: '#0075D7',
+    speed: 1
   }, props);
 
-  return (0, _react2.render)(_react.default.createElement(_TextTyping.default, defaultProps));
+  return (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_TextTyping.default, defaultProps));
 }
 
 ;

package/dist/index.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+
+export interface ReactTextTypingProps {
+  text: React.string;
+  component?: React.ElementType = 'h1';
+  colorText?: string = '#FFF';
+  colorTyping?: string = '#0075D7';
+  showBlink?: boolean = true;
+}
+
+export default class ReactTextTyping extends React.Component<
+  ReactTextTypingProps
+> {}

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "react-text-typing",
-  "version": "0.0.4",
+  "version": "0.1.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
+  "types": "dist/index.d.ts",
   "homepage": "https://renato-oda2.gitbook.io/react-text-typing",
   "license": "MIT",
   "author": {
@@ -13,7 +14,10 @@
     "type": "git",
     "url": "git++https://github.com/Oda2/react-text-typing"
   },
-  "keywords": ["react", "library"],
+  "keywords": [
+    "react",
+    "library"
+  ],
   "bugs": {
     "url": "https://github.com/oda2/react-text-typing/issues"
   },
@@ -26,20 +30,22 @@
     "lint": "eslint .",
     "test": "react-dependency-scripts test",
     "coverage": "yarn test --coverage",
-    "coveralls": "cat ./coverage/lcov.info | ./node_modules/.bin/coveralls"
+    "coveralls": "cat ./coverage/lcov.info | ./node_modules/.bin/coveralls",
+    "cypress": "$(yarn bin)/cypress"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^5.1.1",
-    "@testing-library/react": "^9.4.0",
-    "babel-eslint": "^10.0.3",
-    "coveralls": "^3.0.9",
-    "eslint": "^6.8.0",
-    "eslint-plugin-jsx-a11y": "^6.2.3",
-    "eslint-plugin-react": "^7.18.3",
-    "prop-types": "^15.7.2",
-    "react": "^16.12.0",
-    "react-dependency-scripts": "^0.5.0",
-    "react-dom": "^16.12.0"
+    "@babel/eslint-parser": "^7.17.0",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^13.1.1",
+    "coveralls": "^3.1.1",
+    "cypress": "^9.5.4",
+    "eslint": "^8.13.0",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-react": "^7.29.4",
+    "prop-types": "^15.8.1",
+    "react": "^18.0.0",
+    "react-dependency-scripts": "^1.0.6",
+    "react-dom": "^18.0.0"
   },
   "browserslist": {
     "production": [
@@ -54,6 +60,19 @@
     ]
   },
   "dependencies": {
-    "react-jss": "^10.0.4"
+    "react-jss": "^10.9.0"
+  },
+  "jest": {
+    "testMatch": [
+      "<rootDir>src/lib/**/*.test.js"
+    ],
+    "coverageThreshold": {
+      "global": {
+        "branches": 100,
+        "functions": 100,
+        "lines": 100,
+        "statements": 100
+      }
+    }
   }
 }