@tollbrothers/tollbrothers-ui 1.7.0

package/README.md

@@ -0,0 +1,35 @@
+# tollbrothers-ui package
+# Release 01
+
+## How was this package created?
+1. Created the `tollbrothers-ui` project on Github as an empty repo for the `tollbros` Github org.
+2. Locally created a `packages` directory.
+3. Checked out the `tollbrothers-ui` repo in the `packages` directory.
+4. Within the `packages/tollbrothers-ui` directory, run `npm init --scope=tollbrothers` and chose all the defaults.
+5. Run `npx create-react-library tollbrothers-ui` in the directory and modify the `package.json` file in the created directory to include what's in the root directory.
+6. Move all files from created directory into the root.
+7. Run `npm install next` and `npm install sass` to add NextJS and SASS to the project.
+8. Change `dependencies` to `peerDependencies` in the `package.json` file.
+
+## How was this package tested locally?
+1. Within the `packages/tollbrothers-ui` directory, run `npm link`. This created the `package-lock.json` file.
+2. Went back to the `packages` directory and run `npx create-next-app tollbrothers-ui-test`
+3. Within the `packages/tollbrothers-ui-test` directory, run `npm link @tollbrothers/tollbrothers-ui`. This linked the `tollbrothers-ui` package to the test script.
+4. Add `import '@tollbrothers/tollbrothers-ui/dist/index.css` in `packages/tollbrothers-ui-test/pages/_app.js`.
+5. Add `import { HeroComponent } from '@tollbrothers/tollbrothers-ui'` in `packages/tollbrothers-ui-test/pages/index.js`.
+6. Create a `heroSlides` array of objects that contain an `image`, `title`, and `URL` parameter for each slide.
+7. Add `<HeroComponent>` to return statement and pass in `slides={heroSlides}` and `darkness={true or false}` to component. It will resize to fit whatever container it is in.
+8. Verify that the component shows on the page via `npm run dev`.
+
+## How do we publish changes?
+1. Publishing has been automated by the Semantic Release Workflow.
+
+## Semantic Release Workflow
+Basically, follow the commit message format below. Then when the commit is posted on the `main` branch semantic-release will do its thing and publish a new version on `merge to main` or a direct commit to `main`.
+* [Commit message format](https://github.com/angular/angular/blob/main/CONTRIBUTING.md#type)
+* [How does it work?](https://github.com/angular/angular/blob/main/CONTRIBUTING.md#type) 
+
+## Things to consider
+- You can publish code without commiting it. Not sure why you would but there are no guards to prevent you from doing so.
+- On github, the org is `tollbros`
+- On npm, the org is `tollbrothers`

package/dist/index.css

@@ -0,0 +1,63 @@
+/* add css module styles here (optional) */
+._3wJe6 {
+  margin: 2em;
+  padding: 0.5em;
+  border: 2px solid #000;
+  font-size: 2em;
+  text-align: center;
+}
+
+._iZwr_ {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+}
+._iZwr_ ._1bGxA {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+._iZwr_ ._1bGxA ._3GCKU {
+  width: 100%;
+  height: 100%;
+  display: block;
+  background-color: rgba(0, 0, 0, 0.5);
+  position: absolute;
+  z-index: 0;
+}
+._iZwr_ ._1bGxA img {
+  width: 100%;
+  height: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+._iZwr_ ._1bGxA ._2S0hq {
+  position: relative;
+  display: block;
+  height: 100%;
+  top: 0;
+  left: 0;
+  z-index: -3;
+  opacity: 1;
+  transition: opacity 1s ease-out;
+}
+._iZwr_ ._1bGxA ._2S0hq._2wBtF {
+  opacity: 0;
+}
+._iZwr_ ._1bGxA ._29vM6 {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -4;
+}
+._iZwr_ ._1OS_c {
+  position: absolute;
+  left: 24px;
+  bottom: 14px;
+  z-index: 0;
+  color: white;
+  font-size: 0.74em;
+  text-shadow: 0 1px 1px #000;
+  width: 125px;
+}

package/dist/index.js

@@ -0,0 +1,98 @@
+function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
+
+var React = require('react');
+var React__default = _interopDefault(React);
+var Link = _interopDefault(require('next/dist/client/link'));
+
+var styles = {"test":"_3wJe6","heroContainer":"_iZwr_","imageHolder":"_1bGxA","darkness":"_3GCKU","currentImage":"_2S0hq","fadeIn":"_2wBtF","nextImage":"_29vM6","caption":"_1OS_c"};
+
+var HeroComponent = function HeroComponent(_ref) {
+  var slides = _ref.slides,
+    darkness = _ref.darkness;
+  var _useState = React.useState(0),
+    setCurrentSlideIndex = _useState[1];
+  var _useState2 = React.useState(slides[0]),
+    currentSlide = _useState2[0],
+    setCurrentSlide = _useState2[1];
+  var _useState3 = React.useState(1),
+    nextSlideIndex = _useState3[0],
+    setNextSlideIndex = _useState3[1];
+  var _useState4 = React.useState(),
+    nextSlide = _useState4[0],
+    setNextSlide = _useState4[1];
+  var changeSlides = function changeSlides() {
+    if (slides.length > 1 && nextSlide) {
+      setCurrentSlide(nextSlide);
+      setCurrentSlideIndex(nextSlideIndex);
+      var timer = setTimeout(function () {
+        if (nextSlideIndex == slides.length - 1) {
+          setNextSlide(slides[0]);
+          setNextSlideIndex(0);
+        } else {
+          setNextSlide(slides[nextSlideIndex + 1]);
+          setNextSlideIndex(nextSlideIndex + 1);
+        }
+      }, 1000);
+    }
+  };
+  React.useEffect(function () {
+    if (slides.length > 1) {
+      var randomStartIndex = Math.floor(Math.random() * slides.length);
+      setCurrentSlideIndex(randomStartIndex);
+      setCurrentSlide(slides[randomStartIndex]);
+      if (randomStartIndex == slides.length - 1) {
+        setNextSlideIndex(0);
+        setNextSlide(slides[0]);
+      } else {
+        setNextSlideIndex(randomStartIndex + 1);
+        setNextSlide(slides[randomStartIndex + 1]);
+      }
+    }
+  }, []);
+  React.useEffect(function () {
+    if (slides.length > 1) {
+      var fader = document.getElementById("frontImage");
+      var interval = setInterval(function () {
+        fader.classList.add(styles.fadeIn);
+        var timer = setTimeout(function () {
+          changeSlides();
+          fader.classList.remove(styles.fadeIn);
+        }, 1000);
+      }, 10000);
+      return function () {
+        return clearInterval(interval);
+      };
+    }
+  }, [changeSlides]);
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: styles.heroContainer
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: styles.imageHolder
+  }, darkness ? /*#__PURE__*/React__default.createElement("div", {
+    className: styles.darkness
+  }) : null, slides.length == 1 ? /*#__PURE__*/React__default.createElement("img", {
+    src: currentSlide.image,
+    alt: currentSlide.title ? currentSlide.title : "",
+    loading: "lazy"
+  }) : slides.length > 1 ? /*#__PURE__*/React__default.createElement(React.Fragment, null, currentSlide && /*#__PURE__*/React__default.createElement("img", {
+    src: currentSlide.image,
+    alt: currentSlide.title ? currentSlide.title : "",
+    loading: "lazy",
+    id: "frontImage",
+    className: styles.currentImage
+  }), nextSlide && /*#__PURE__*/React__default.createElement("img", {
+    src: nextSlide.image,
+    alt: nextSlide.title ? nextSlide.title : "",
+    loading: "lazy",
+    id: "backImage",
+    className: styles.nextImage
+  })) : null), slides.length > 0 && currentSlide.URL && currentSlide.title ? /*#__PURE__*/React__default.createElement(Link, {
+    href: currentSlide.URL
+  }, /*#__PURE__*/React__default.createElement("a", {
+    className: styles.caption,
+    title: currentSlide.title
+  }, currentSlide.title)) : null);
+};
+
+exports.HeroComponent = HeroComponent;
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../src/index.js"],"sourcesContent":["import React, { useState, useEffect, useRef, Fragment } from \"react\";\nimport styles from './styles.module.scss';\nimport Link from \"next/dist/client/link\";\n\nexport const HeroComponent = ({ children, slides, darkness }) => {\n\n  const [currentSlideIndex, setCurrentSlideIndex] = useState(0);\n  const [currentSlide, setCurrentSlide] = useState(slides[0]);\n  const [nextSlideIndex, setNextSlideIndex] = useState(1);\n  const [nextSlide, setNextSlide] = useState();\n\n  const changeSlides = () => {\n    if (slides.length > 1 && nextSlide) {\n\n      setCurrentSlide(nextSlide);\n      setCurrentSlideIndex(nextSlideIndex);\n\n      const timer = setTimeout(() => {\n        if (nextSlideIndex == (slides.length - 1)) {\n          setNextSlide(slides[0]);\n          setNextSlideIndex(0);\n        } else {\n          setNextSlide(slides[nextSlideIndex + 1]);\n          setNextSlideIndex(nextSlideIndex + 1);\n        }\n      }, 1000);\n\n    }\n  }\n\n  useEffect(() => { // Handles Random Start Index\n    if (slides.length > 1) {\n\n      let randomStartIndex = Math.floor(Math.random() * slides.length)\n\n      setCurrentSlideIndex(randomStartIndex);\n      setCurrentSlide(slides[randomStartIndex]);\n\n      if (randomStartIndex == (slides.length - 1)) {\n        setNextSlideIndex(0);\n        setNextSlide(slides[0]);\n      } else {\n        setNextSlideIndex(randomStartIndex + 1);\n        setNextSlide(slides[randomStartIndex + 1]);\n      }\n\n    }\n  }, []);\n\n  useEffect(() => { // Handles Slideshow Timer\n    if (slides.length > 1) {\n\n      let fader = document.getElementById(\"frontImage\");\n      const interval = setInterval(() => {\n        \n        fader.classList.add(styles.fadeIn);\n\n        const timer = setTimeout(() => {\n          changeSlides();\n          fader.classList.remove(styles.fadeIn);\n        }, 1000);\n        \n      }, 10000);\n      return () => clearInterval(interval);\n\n    }\n  }, [changeSlides]);\n\n  return (\n    <div className={styles.heroContainer}>\n      <div className={styles.imageHolder}>\n\n        {\n          darkness ?\n            <div className={styles.darkness}></div>\n          :\n            null\n        }\n\n        {\n          slides.length == 1 ?\n            <img src={currentSlide.image} alt={currentSlide.title ? currentSlide.title : \"\"} loading=\"lazy\" />\n          : slides.length > 1 ?\n            <>\n              \n              {\n                currentSlide && <img src={currentSlide.image} alt={currentSlide.title ? currentSlide.title : \"\"} loading=\"lazy\" id=\"frontImage\" className={styles.currentImage} />\n              }\n\n              {\n                nextSlide && <img src={nextSlide.image} alt={nextSlide.title ? nextSlide.title : \"\"} loading=\"lazy\" id=\"backImage\" className={styles.nextImage} />\n              }\n\n            </>\n          :\n            null\n        }\n\n      </div>\n\n      {\n        slides.length > 0 && currentSlide.URL && currentSlide.title ?\n          <Link href={currentSlide.URL}>\n            <a className={styles.caption} title={currentSlide.title}>\n              {currentSlide.title}\n            </a>\n          </Link>\n        :\n          null\n      }\n\n    </div>\n  )\n}\n\n// Using this tutorial to make components:\n// https://triveniglobalsoft.com/how-to-publish-a-custom-react-component-to-npm-using-create-react-library/"],"names":["HeroComponent","slides","darkness","useState","currentSlideIndex","setCurrentSlideIndex","currentSlide","setCurrentSlide","nextSlideIndex","setNextSlideIndex","nextSlide","setNextSlide","changeSlides","length","timer","setTimeout","useEffect","randomStartIndex","Math","floor","random","fader","document","getElementById","interval","setInterval","classList","add","styles","fadeIn","remove","clearInterval","React","heroContainer","imageHolder","image","title","currentImage","nextImage","URL","caption"],"mappings":"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"}

package/dist/index.modern.js

@@ -0,0 +1,95 @@
+import React, { useState, useEffect, Fragment } from 'react';
+import Link from 'next/dist/client/link';
+
+var styles = {"test":"_3wJe6","heroContainer":"_iZwr_","imageHolder":"_1bGxA","darkness":"_3GCKU","currentImage":"_2S0hq","fadeIn":"_2wBtF","nextImage":"_29vM6","caption":"_1OS_c"};
+
+var HeroComponent = function HeroComponent(_ref) {
+  var slides = _ref.slides,
+    darkness = _ref.darkness;
+  var _useState = useState(0),
+    setCurrentSlideIndex = _useState[1];
+  var _useState2 = useState(slides[0]),
+    currentSlide = _useState2[0],
+    setCurrentSlide = _useState2[1];
+  var _useState3 = useState(1),
+    nextSlideIndex = _useState3[0],
+    setNextSlideIndex = _useState3[1];
+  var _useState4 = useState(),
+    nextSlide = _useState4[0],
+    setNextSlide = _useState4[1];
+  var changeSlides = function changeSlides() {
+    if (slides.length > 1 && nextSlide) {
+      setCurrentSlide(nextSlide);
+      setCurrentSlideIndex(nextSlideIndex);
+      var timer = setTimeout(function () {
+        if (nextSlideIndex == slides.length - 1) {
+          setNextSlide(slides[0]);
+          setNextSlideIndex(0);
+        } else {
+          setNextSlide(slides[nextSlideIndex + 1]);
+          setNextSlideIndex(nextSlideIndex + 1);
+        }
+      }, 1000);
+    }
+  };
+  useEffect(function () {
+    if (slides.length > 1) {
+      var randomStartIndex = Math.floor(Math.random() * slides.length);
+      setCurrentSlideIndex(randomStartIndex);
+      setCurrentSlide(slides[randomStartIndex]);
+      if (randomStartIndex == slides.length - 1) {
+        setNextSlideIndex(0);
+        setNextSlide(slides[0]);
+      } else {
+        setNextSlideIndex(randomStartIndex + 1);
+        setNextSlide(slides[randomStartIndex + 1]);
+      }
+    }
+  }, []);
+  useEffect(function () {
+    if (slides.length > 1) {
+      var fader = document.getElementById("frontImage");
+      var interval = setInterval(function () {
+        fader.classList.add(styles.fadeIn);
+        var timer = setTimeout(function () {
+          changeSlides();
+          fader.classList.remove(styles.fadeIn);
+        }, 1000);
+      }, 10000);
+      return function () {
+        return clearInterval(interval);
+      };
+    }
+  }, [changeSlides]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.heroContainer
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.imageHolder
+  }, darkness ? /*#__PURE__*/React.createElement("div", {
+    className: styles.darkness
+  }) : null, slides.length == 1 ? /*#__PURE__*/React.createElement("img", {
+    src: currentSlide.image,
+    alt: currentSlide.title ? currentSlide.title : "",
+    loading: "lazy"
+  }) : slides.length > 1 ? /*#__PURE__*/React.createElement(Fragment, null, currentSlide && /*#__PURE__*/React.createElement("img", {
+    src: currentSlide.image,
+    alt: currentSlide.title ? currentSlide.title : "",
+    loading: "lazy",
+    id: "frontImage",
+    className: styles.currentImage
+  }), nextSlide && /*#__PURE__*/React.createElement("img", {
+    src: nextSlide.image,
+    alt: nextSlide.title ? nextSlide.title : "",
+    loading: "lazy",
+    id: "backImage",
+    className: styles.nextImage
+  })) : null), slides.length > 0 && currentSlide.URL && currentSlide.title ? /*#__PURE__*/React.createElement(Link, {
+    href: currentSlide.URL
+  }, /*#__PURE__*/React.createElement("a", {
+    className: styles.caption,
+    title: currentSlide.title
+  }, currentSlide.title)) : null);
+};
+
+export { HeroComponent };
+//# sourceMappingURL=index.modern.js.map

package/dist/index.modern.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.modern.js","sources":["../src/index.js"],"sourcesContent":["import React, { useState, useEffect, useRef, Fragment } from \"react\";\nimport styles from './styles.module.scss';\nimport Link from \"next/dist/client/link\";\n\nexport const HeroComponent = ({ children, slides, darkness }) => {\n\n  const [currentSlideIndex, setCurrentSlideIndex] = useState(0);\n  const [currentSlide, setCurrentSlide] = useState(slides[0]);\n  const [nextSlideIndex, setNextSlideIndex] = useState(1);\n  const [nextSlide, setNextSlide] = useState();\n\n  const changeSlides = () => {\n    if (slides.length > 1 && nextSlide) {\n\n      setCurrentSlide(nextSlide);\n      setCurrentSlideIndex(nextSlideIndex);\n\n      const timer = setTimeout(() => {\n        if (nextSlideIndex == (slides.length - 1)) {\n          setNextSlide(slides[0]);\n          setNextSlideIndex(0);\n        } else {\n          setNextSlide(slides[nextSlideIndex + 1]);\n          setNextSlideIndex(nextSlideIndex + 1);\n        }\n      }, 1000);\n\n    }\n  }\n\n  useEffect(() => { // Handles Random Start Index\n    if (slides.length > 1) {\n\n      let randomStartIndex = Math.floor(Math.random() * slides.length)\n\n      setCurrentSlideIndex(randomStartIndex);\n      setCurrentSlide(slides[randomStartIndex]);\n\n      if (randomStartIndex == (slides.length - 1)) {\n        setNextSlideIndex(0);\n        setNextSlide(slides[0]);\n      } else {\n        setNextSlideIndex(randomStartIndex + 1);\n        setNextSlide(slides[randomStartIndex + 1]);\n      }\n\n    }\n  }, []);\n\n  useEffect(() => { // Handles Slideshow Timer\n    if (slides.length > 1) {\n\n      let fader = document.getElementById(\"frontImage\");\n      const interval = setInterval(() => {\n        \n        fader.classList.add(styles.fadeIn);\n\n        const timer = setTimeout(() => {\n          changeSlides();\n          fader.classList.remove(styles.fadeIn);\n        }, 1000);\n        \n      }, 10000);\n      return () => clearInterval(interval);\n\n    }\n  }, [changeSlides]);\n\n  return (\n    <div className={styles.heroContainer}>\n      <div className={styles.imageHolder}>\n\n        {\n          darkness ?\n            <div className={styles.darkness}></div>\n          :\n            null\n        }\n\n        {\n          slides.length == 1 ?\n            <img src={currentSlide.image} alt={currentSlide.title ? currentSlide.title : \"\"} loading=\"lazy\" />\n          : slides.length > 1 ?\n            <>\n              \n              {\n                currentSlide && <img src={currentSlide.image} alt={currentSlide.title ? currentSlide.title : \"\"} loading=\"lazy\" id=\"frontImage\" className={styles.currentImage} />\n              }\n\n              {\n                nextSlide && <img src={nextSlide.image} alt={nextSlide.title ? nextSlide.title : \"\"} loading=\"lazy\" id=\"backImage\" className={styles.nextImage} />\n              }\n\n            </>\n          :\n            null\n        }\n\n      </div>\n\n      {\n        slides.length > 0 && currentSlide.URL && currentSlide.title ?\n          <Link href={currentSlide.URL}>\n            <a className={styles.caption} title={currentSlide.title}>\n              {currentSlide.title}\n            </a>\n          </Link>\n        :\n          null\n      }\n\n    </div>\n  )\n}\n\n// Using this tutorial to make components:\n// https://triveniglobalsoft.com/how-to-publish-a-custom-react-component-to-npm-using-create-react-library/"],"names":["HeroComponent","slides","darkness","useState","currentSlideIndex","setCurrentSlideIndex","currentSlide","setCurrentSlide","nextSlideIndex","setNextSlideIndex","nextSlide","setNextSlide","changeSlides","length","timer","setTimeout","useEffect","randomStartIndex","Math","floor","random","fader","document","getElementById","interval","setInterval","classList","add","styles","fadeIn","remove","clearInterval","heroContainer","imageHolder","image","title","currentImage","nextImage","URL","caption"],"mappings":"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"}

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@tollbrothers/tollbrothers-ui",
+  "version": "1.7.0",
+  "description": "Import UI components into a React project",
+  "author": "",
+  "license": "ISC",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/tollbros/tollbrothers-ui.git"
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.modern.js",
+  "source": "src/index.js",
+  "engines": {
+    "node": ">=10"
+  },
+  "scripts": {
+    "build": "microbundle-crl --no-compress --format modern,cjs",
+    "start": "microbundle-crl watch --no-compress --format modern,cjs",
+    "prepare": "run-s build",
+    "test": "run-s test:unit test:lint test:build",
+    "test:build": "run-s build",
+    "test:lint": "eslint .",
+    "test:unit": "cross-env CI=1 react-scripts test --env=jsdom",
+    "test:watch": "react-scripts test --env=jsdom",
+    "predeploy": "cd example && npm install && npm run build",
+    "deploy": "gh-pages -d example/build"
+  },
+  "bugs": {
+    "url": "https://github.com/tollbros/tollbrothers-ui/issues"
+  },
+  "homepage": "https://github.com/tollbros/tollbrothers-ui#readme",
+  "peerDependencies": {
+    "react": "^17.0.2",
+    "sass": "^1.56.1",
+    "next": "^12.0.7"
+  },
+  "devDependencies": {
+    "babel-eslint": "^10.0.3",
+    "cross-env": "^7.0.2",
+    "eslint": "^6.8.0",
+    "eslint-config-prettier": "^6.7.0",
+    "eslint-config-standard": "^14.1.0",
+    "eslint-config-standard-react": "^9.2.0",
+    "eslint-plugin-import": "^2.18.2",
+    "eslint-plugin-node": "^11.0.0",
+    "eslint-plugin-prettier": "^3.1.1",
+    "eslint-plugin-promise": "^4.2.1",
+    "eslint-plugin-react": "^7.17.0",
+    "eslint-plugin-standard": "^4.0.1",
+    "gh-pages": "^2.2.0",
+    "microbundle-crl": "^0.13.10",
+    "npm-run-all": "^4.1.5",
+    "prettier": "^2.0.4",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-scripts": "^3.4.1",
+    "sass": "^1.56.1",
+    "semantic-release": "^19.0.5"
+  },
+  "files": [
+    "dist"
+  ]
+}