@chayns-components/typewriter 5.0.0-beta.48

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2021 Tobit Laboratories AG
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/lib/components/typewriter/Typewriter.d.ts

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+export type TypewriterProps = {
+    /**
+     * The text to type
+     */
+    children: string;
+};
+declare const Typewriter: FC<TypewriterProps>;
+export default Typewriter;

package/lib/components/typewriter/Typewriter.js

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _Typewriter = require("./Typewriter.styles");
+var _utils = require("./utils");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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; }
+const Typewriter = _ref => {
+  let {
+    children
+  } = _ref;
+  const [shownCharCount, setShownCharCount] = (0, _react.useState)(0);
+  const shownText = (0, _react.useMemo)(() => (0, _utils.getSubTextFromHTML)(children, shownCharCount), [children, shownCharCount]);
+  (0, _react.useEffect)(() => {
+    setShownCharCount(0);
+    const interval = window.setInterval(() => {
+      setShownCharCount(prevState => {
+        const nextState = prevState + 1;
+        if (nextState === children.length) {
+          window.clearInterval(interval);
+        }
+        return nextState;
+      });
+    }, 25);
+    return () => {
+      window.clearInterval(interval);
+    };
+  }, [children.length]);
+  const isAnimatingText = shownCharCount !== children.length;
+  return /*#__PURE__*/_react.default.createElement(_Typewriter.StyledTypewriter, null, /*#__PURE__*/_react.default.createElement(_Typewriter.StyledTypewriterText, {
+    shouldUseAbsolutePosition: isAnimatingText
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    dangerouslySetInnerHTML: {
+      __html: shownText
+    }
+  }), /*#__PURE__*/_react.default.createElement(_Typewriter.StyledTypewriterCursor, null)), isAnimatingText && /*#__PURE__*/_react.default.createElement(_Typewriter.StyledTypewriterPseudoText, null, children));
+};
+Typewriter.displayName = 'Typewriter';
+var _default = Typewriter;
+exports.default = _default;
+//# sourceMappingURL=Typewriter.js.map

package/lib/components/typewriter/Typewriter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Typewriter.js","names":["Typewriter","children","shownCharCount","setShownCharCount","useState","shownText","useMemo","getSubTextFromHTML","useEffect","interval","window","setInterval","prevState","nextState","length","clearInterval","isAnimatingText","__html","displayName"],"sources":["../../../src/components/typewriter/Typewriter.tsx"],"sourcesContent":["import React, { FC, useEffect, useMemo, useState } from 'react';\nimport {\n    StyledTypewriter,\n    StyledTypewriterCursor,\n    StyledTypewriterPseudoText,\n    StyledTypewriterText,\n} from './Typewriter.styles';\nimport { getSubTextFromHTML } from './utils';\n\nexport type TypewriterProps = {\n    /**\n     * The text to type\n     */\n    children: string;\n};\n\nconst Typewriter: FC<TypewriterProps> = ({ children }) => {\n    const [shownCharCount, setShownCharCount] = useState(0);\n\n    const shownText = useMemo(\n        () => getSubTextFromHTML(children, shownCharCount),\n        [children, shownCharCount]\n    );\n\n    useEffect(() => {\n        setShownCharCount(0);\n\n        const interval = window.setInterval(() => {\n            setShownCharCount((prevState) => {\n                const nextState = prevState + 1;\n\n                if (nextState === children.length) {\n                    window.clearInterval(interval);\n                }\n\n                return nextState;\n            });\n        }, 25);\n\n        return () => {\n            window.clearInterval(interval);\n        };\n    }, [children.length]);\n\n    const isAnimatingText = shownCharCount !== children.length;\n\n    return (\n        <StyledTypewriter>\n            <StyledTypewriterText shouldUseAbsolutePosition={isAnimatingText}>\n                <span dangerouslySetInnerHTML={{ __html: shownText }} />\n                <StyledTypewriterCursor />\n            </StyledTypewriterText>\n            {isAnimatingText && <StyledTypewriterPseudoText>{children}</StyledTypewriterPseudoText>}\n        </StyledTypewriter>\n    );\n};\n\nTypewriter.displayName = 'Typewriter';\n\nexport default Typewriter;\n"],"mappings":";;;;;;AAAA;AACA;AAMA;AAA6C;AAAA;AAS7C,MAAMA,UAA+B,GAAG,QAAkB;EAAA,IAAjB;IAAEC;EAAS,CAAC;EACjD,MAAM,CAACC,cAAc,EAAEC,iBAAiB,CAAC,GAAG,IAAAC,eAAQ,EAAC,CAAC,CAAC;EAEvD,MAAMC,SAAS,GAAG,IAAAC,cAAO,EACrB,MAAM,IAAAC,yBAAkB,EAACN,QAAQ,EAAEC,cAAc,CAAC,EAClD,CAACD,QAAQ,EAAEC,cAAc,CAAC,CAC7B;EAED,IAAAM,gBAAS,EAAC,MAAM;IACZL,iBAAiB,CAAC,CAAC,CAAC;IAEpB,MAAMM,QAAQ,GAAGC,MAAM,CAACC,WAAW,CAAC,MAAM;MACtCR,iBAAiB,CAAES,SAAS,IAAK;QAC7B,MAAMC,SAAS,GAAGD,SAAS,GAAG,CAAC;QAE/B,IAAIC,SAAS,KAAKZ,QAAQ,CAACa,MAAM,EAAE;UAC/BJ,MAAM,CAACK,aAAa,CAACN,QAAQ,CAAC;QAClC;QAEA,OAAOI,SAAS;MACpB,CAAC,CAAC;IACN,CAAC,EAAE,EAAE,CAAC;IAEN,OAAO,MAAM;MACTH,MAAM,CAACK,aAAa,CAACN,QAAQ,CAAC;IAClC,CAAC;EACL,CAAC,EAAE,CAACR,QAAQ,CAACa,MAAM,CAAC,CAAC;EAErB,MAAME,eAAe,GAAGd,cAAc,KAAKD,QAAQ,CAACa,MAAM;EAE1D,oBACI,6BAAC,4BAAgB,qBACb,6BAAC,gCAAoB;IAAC,yBAAyB,EAAEE;EAAgB,gBAC7D;IAAM,uBAAuB,EAAE;MAAEC,MAAM,EAAEZ;IAAU;EAAE,EAAG,eACxD,6BAAC,kCAAsB,OAAG,CACP,EACtBW,eAAe,iBAAI,6BAAC,sCAA0B,QAAEf,QAAQ,CAA8B,CACxE;AAE3B,CAAC;AAEDD,UAAU,CAACkB,WAAW,GAAG,YAAY;AAAC,eAEvBlB,UAAU;AAAA"}

package/lib/components/typewriter/Typewriter.styles.d.ts

@@ -0,0 +1,8 @@
+export declare const StyledTypewriter: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledTypewriterCursor: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const StyledTypewriterPseudoText: import("styled-components").StyledComponent<"div", any, {}, never>;
+type StyledTypewriterTextProps = {
+    shouldUseAbsolutePosition: boolean;
+};
+export declare const StyledTypewriterText: import("styled-components").StyledComponent<"div", any, StyledTypewriterTextProps, never>;
+export {};

package/lib/components/typewriter/Typewriter.styles.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledTypewriterText = exports.StyledTypewriterPseudoText = exports.StyledTypewriterCursor = exports.StyledTypewriter = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const StyledTypewriter = _styledComponents.default.div`
+    position: relative;
+`;
+exports.StyledTypewriter = StyledTypewriter;
+const StyledTypewriterCursor = _styledComponents.default.span`
+    height: 1em;
+    width: 1em;
+`;
+exports.StyledTypewriterCursor = StyledTypewriterCursor;
+const StyledTypewriterPseudoText = _styledComponents.default.div`
+    opacity: 0;
+    pointer-events: none;
+    user-select: none;
+`;
+exports.StyledTypewriterPseudoText = StyledTypewriterPseudoText;
+const StyledTypewriterText = _styledComponents.default.div`
+    position: ${_ref => {
+  let {
+    shouldUseAbsolutePosition
+  } = _ref;
+  return shouldUseAbsolutePosition ? 'absolute' : 'relative';
+}};
+`;
+exports.StyledTypewriterText = StyledTypewriterText;
+//# sourceMappingURL=Typewriter.styles.js.map

package/lib/components/typewriter/Typewriter.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Typewriter.styles.js","names":["StyledTypewriter","styled","div","StyledTypewriterCursor","span","StyledTypewriterPseudoText","StyledTypewriterText","shouldUseAbsolutePosition"],"sources":["../../../src/components/typewriter/Typewriter.styles.ts"],"sourcesContent":["import styled from 'styled-components';\n\nexport const StyledTypewriter = styled.div`\n    position: relative;\n`;\n\nexport const StyledTypewriterCursor = styled.span`\n    height: 1em;\n    width: 1em;\n`;\n\nexport const StyledTypewriterPseudoText = styled.div`\n    opacity: 0;\n    pointer-events: none;\n    user-select: none;\n`;\n\ntype StyledTypewriterTextProps = {\n    shouldUseAbsolutePosition: boolean;\n};\n\nexport const StyledTypewriterText = styled.div<StyledTypewriterTextProps>`\n    position: ${({ shouldUseAbsolutePosition }) =>\n        shouldUseAbsolutePosition ? 'absolute' : 'relative'};\n`;\n"],"mappings":";;;;;;AAAA;AAAuC;AAEhC,MAAMA,gBAAgB,GAAGC,yBAAM,CAACC,GAAI;AAC3C;AACA,CAAC;AAAC;AAEK,MAAMC,sBAAsB,GAAGF,yBAAM,CAACG,IAAK;AAClD;AACA;AACA,CAAC;AAAC;AAEK,MAAMC,0BAA0B,GAAGJ,yBAAM,CAACC,GAAI;AACrD;AACA;AACA;AACA,CAAC;AAAC;AAMK,MAAMI,oBAAoB,GAAGL,yBAAM,CAACC,GAA+B;AAC1E,gBAAgB;EAAA,IAAC;IAAEK;EAA0B,CAAC;EAAA,OACtCA,yBAAyB,GAAG,UAAU,GAAG,UAAU;AAAA,CAAC;AAC5D,CAAC;AAAC"}

package/lib/components/typewriter/utils.d.ts

@@ -0,0 +1 @@
+export declare const getSubTextFromHTML: (html: string, length: number) => string;

package/lib/components/typewriter/utils.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getSubTextFromHTML = void 0;
+const getSubTextFromHTML = (html, length) => {
+  const div = document.createElement('div');
+  div.innerHTML = html;
+  let text = '';
+  let currLength = 0;
+  const traverse = node => {
+    if (node.nodeType === 3 && typeof node.textContent === 'string') {
+      const nodeText = node.textContent;
+      if (currLength + nodeText.length <= length) {
+        text += nodeText;
+        currLength += nodeText.length;
+      } else {
+        text += nodeText.substring(0, length - currLength);
+        return false;
+      }
+    } else if (node.nodeType === 1) {
+      const nodeName = node.nodeName.toLowerCase();
+      text += `<${nodeName}>`;
+      for (let i = 0; i < node.childNodes.length; i++) {
+        const childNode = node.childNodes[i];
+        if (childNode && !traverse(childNode)) {
+          return false;
+        }
+      }
+      text += `</${nodeName}>`;
+    }
+    return true;
+  };
+  for (let i = 0; i < div.childNodes.length; i++) {
+    const childNode = div.childNodes[i];
+    if (childNode && !traverse(childNode)) {
+      return text;
+    }
+  }
+  return text;
+};
+exports.getSubTextFromHTML = getSubTextFromHTML;
+//# sourceMappingURL=utils.js.map

package/lib/components/typewriter/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","names":["getSubTextFromHTML","html","length","div","document","createElement","innerHTML","text","currLength","traverse","node","nodeType","textContent","nodeText","substring","nodeName","toLowerCase","i","childNodes","childNode"],"sources":["../../../src/components/typewriter/utils.ts"],"sourcesContent":["export const getSubTextFromHTML = (html: string, length: number): string => {\n    const div = document.createElement('div');\n\n    div.innerHTML = html;\n\n    let text = '';\n    let currLength = 0;\n\n    const traverse = (node: Node): boolean => {\n        if (node.nodeType === 3 && typeof node.textContent === 'string') {\n            const nodeText = node.textContent;\n\n            if (currLength + nodeText.length <= length) {\n                text += nodeText;\n                currLength += nodeText.length;\n            } else {\n                text += nodeText.substring(0, length - currLength);\n\n                return false;\n            }\n        } else if (node.nodeType === 1) {\n            const nodeName = node.nodeName.toLowerCase();\n\n            text += `<${nodeName}>`;\n\n            for (let i = 0; i < node.childNodes.length; i++) {\n                const childNode = node.childNodes[i];\n\n                if (childNode && !traverse(childNode)) {\n                    return false;\n                }\n            }\n\n            text += `</${nodeName}>`;\n        }\n\n        return true;\n    };\n\n    for (let i = 0; i < div.childNodes.length; i++) {\n        const childNode = div.childNodes[i];\n\n        if (childNode && !traverse(childNode)) {\n            return text;\n        }\n    }\n\n    return text;\n};\n"],"mappings":";;;;;;AAAO,MAAMA,kBAAkB,GAAG,CAACC,IAAY,EAAEC,MAAc,KAAa;EACxE,MAAMC,GAAG,GAAGC,QAAQ,CAACC,aAAa,CAAC,KAAK,CAAC;EAEzCF,GAAG,CAACG,SAAS,GAAGL,IAAI;EAEpB,IAAIM,IAAI,GAAG,EAAE;EACb,IAAIC,UAAU,GAAG,CAAC;EAElB,MAAMC,QAAQ,GAAIC,IAAU,IAAc;IACtC,IAAIA,IAAI,CAACC,QAAQ,KAAK,CAAC,IAAI,OAAOD,IAAI,CAACE,WAAW,KAAK,QAAQ,EAAE;MAC7D,MAAMC,QAAQ,GAAGH,IAAI,CAACE,WAAW;MAEjC,IAAIJ,UAAU,GAAGK,QAAQ,CAACX,MAAM,IAAIA,MAAM,EAAE;QACxCK,IAAI,IAAIM,QAAQ;QAChBL,UAAU,IAAIK,QAAQ,CAACX,MAAM;MACjC,CAAC,MAAM;QACHK,IAAI,IAAIM,QAAQ,CAACC,SAAS,CAAC,CAAC,EAAEZ,MAAM,GAAGM,UAAU,CAAC;QAElD,OAAO,KAAK;MAChB;IACJ,CAAC,MAAM,IAAIE,IAAI,CAACC,QAAQ,KAAK,CAAC,EAAE;MAC5B,MAAMI,QAAQ,GAAGL,IAAI,CAACK,QAAQ,CAACC,WAAW,EAAE;MAE5CT,IAAI,IAAK,IAAGQ,QAAS,GAAE;MAEvB,KAAK,IAAIE,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGP,IAAI,CAACQ,UAAU,CAAChB,MAAM,EAAEe,CAAC,EAAE,EAAE;QAC7C,MAAME,SAAS,GAAGT,IAAI,CAACQ,UAAU,CAACD,CAAC,CAAC;QAEpC,IAAIE,SAAS,IAAI,CAACV,QAAQ,CAACU,SAAS,CAAC,EAAE;UACnC,OAAO,KAAK;QAChB;MACJ;MAEAZ,IAAI,IAAK,KAAIQ,QAAS,GAAE;IAC5B;IAEA,OAAO,IAAI;EACf,CAAC;EAED,KAAK,IAAIE,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGd,GAAG,CAACe,UAAU,CAAChB,MAAM,EAAEe,CAAC,EAAE,EAAE;IAC5C,MAAME,SAAS,GAAGhB,GAAG,CAACe,UAAU,CAACD,CAAC,CAAC;IAEnC,IAAIE,SAAS,IAAI,CAACV,QAAQ,CAACU,SAAS,CAAC,EAAE;MACnC,OAAOZ,IAAI;IACf;EACJ;EAEA,OAAOA,IAAI;AACf,CAAC;AAAC"}

package/lib/index.d.ts

@@ -0,0 +1 @@
+export { default as Typewriter } from './components/typewriter/Typewriter';

package/lib/index.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Typewriter", {
+  enumerable: true,
+  get: function () {
+    return _Typewriter.default;
+  }
+});
+var _Typewriter = _interopRequireDefault(require("./components/typewriter/Typewriter"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../src/index.ts"],"sourcesContent":["export { default as Typewriter } from './components/typewriter/Typewriter';\n"],"mappings":";;;;;;;;;;;AAAA;AAA2E"}

package/package.json

@@ -0,0 +1,66 @@
+{
+    "name": "@chayns-components/typewriter",
+    "version": "5.0.0-beta.48",
+    "description": "A set of beautiful React components for developing your own applications with chayns.",
+    "keywords": [
+        "chayns",
+        "react",
+        "components"
+    ],
+    "author": "Tobit.Software",
+    "homepage": "https://github.com/TobitSoftware/chayns-components/tree/main/packages/typewriter#readme",
+    "license": "MIT",
+    "main": "lib/index.js",
+    "types": "lib/index.d.ts",
+    "directories": {
+        "lib": "lib",
+        "test": "__tests__"
+    },
+    "files": [
+        "lib"
+    ],
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/TobitSoftware/chayns-components.git"
+    },
+    "scripts": {
+        "build": "npm run build:js && npm run build:types",
+        "build:js": "babel src --out-dir lib --extensions=.ts,.tsx --source-maps --ignore=src/stories",
+        "build:types": "tsc",
+        "prepublishOnly": "npm run build"
+    },
+    "bugs": {
+        "url": "https://github.com/TobitSoftware/chayns-components/issues"
+    },
+    "devDependencies": {
+        "@babel/cli": "^7.20.7",
+        "@babel/core": "^7.20.12",
+        "@babel/preset-env": "^7.20.2",
+        "@babel/preset-react": "^7.18.6",
+        "@babel/preset-typescript": "^7.18.6",
+        "@types/react": "^17.0.53",
+        "@types/react-dom": "^17.0.18",
+        "@types/styled-components": "^5.1.26",
+        "@types/uuid": "^9.0.0",
+        "babel-loader": "^8.3.0",
+        "lerna": "^4.0.0",
+        "react": "^17.0.2",
+        "react-dom": "^17.0.2",
+        "typescript": "^4.9.4"
+    },
+    "dependencies": {
+        "@chayns/colors": "^2.0.0",
+        "clsx": "^1.2.1",
+        "framer-motion": "^6.5.1",
+        "styled-components": "^5.3.6",
+        "uuid": "^9.0.0"
+    },
+    "peerDependencies": {
+        "react": ">=16.14.0",
+        "react-dom": ">=16.14.0"
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "gitHead": "fc6c1986b98d2ebe01a4e485f443c241d330fdb5"
+}