@pixelated-tech/components 3.1.4

package/README.md

@@ -0,0 +1,231 @@
+
+[![Contributors][contributors-shield]][contributors-url]
+[![Forks][forks-shield]][forks-url]
+[![Stargazers][stars-shield]][stars-url]
+[![Issues][issues-shield]][issues-url]
+[![MIT License][license-shield]][license-url]
+[![LinkedIn][linkedin-shield]][linkedin-url]
+
+
+
+<!-- PROJECT LOGO -->
+<br />
+<div align="center">
+  <a href="https://github.com/brianwhaley/pixelated-components">
+    <img src="images/bg6.gif" alt="Logo" width="80" height="80">
+  </a>
+
+<h3 align="center">Pixelated Components</h3>
+
+  <p align="center">
+    project_description
+    <br />
+    <a href="https://github.com/brianwhaley/pixelated-components"><strong>Explore the docs »</strong></a>
+    <br />
+    <br />
+    <a href="https://github.com/brianwhaley/pixelated-components">View Demo</a>
+    &middot;
+    <a href="https://github.com/brianwhaley/pixelated-components/issues/new?labels=bug&template=bug-report---.md">Report Bug</a>
+    &middot;
+    <a href="https://github.com/brianwhaley/pixelated-components/issues/new?labels=enhancement&template=feature-request---.md">Request Feature</a>
+  </p>
+</div>
+
+
+
+<!-- ABOUT THE PROJECT -->
+## About The Project
+
+This is a library of components I have found useful to build web sites quickly.  
+
+
+
+### Built With
+
+* [![Next][Next.js]][Next-url]
+* [![React][React.js]][React-url]
+* [![Storybook][Storybook.js]][Storybook-url]
+* [![Contentful][Contentful.com]][Contentful-url]
+* [![Wordpress][Wordpress.com]][Wordpress-url]
+* [![Github][Github.com]][Github-url]
+* [![npm][npm.org]][npm-url]
+
+
+
+
+
+<!-- GETTING STARTED -->
+## Getting Started
+
+This is an example of how you may give instructions on setting up your project locally.
+To get a local copy up and running follow these simple example steps.
+
+
+### Installation
+
+1. Install NPM packages
+   ```sh
+   npm install @brianwhaley/pixelated-components@latest
+   ```
+
+
+
+
+<!-- USAGE EXAMPLES -->
+## Usage
+
+Components to help build websites quicker:
+1. Buzzword Bingo Cards
+1. Page Callouts - Large and Small
+1. Image Carousel - Page, Header, and Simple
+1. Contentful CMS Integration
+1. eBay Store Listings
+1. Form Components and Form Builder
+1. Google Search and Google Analytics Integration
+1. Markdown to HTMl Engine
+1. Menu Components - Simple and Accordion
+1. Metadata Injection from Route JSON file
+1. Modal Dialogs
+1. NerdJokes Integration
+1. Recipe XML MicroFormat Engine
+1. Resume MicroFormat Engine
+1. Sitemap.XML dynamic generation from Route JSON file
+1. Social Card Engine
+1. Table Components
+1. Other Utilities
+
+### Google Reviews (server-side)
+- Requires: `GOOGLE_MAPS_API_KEY` (or use the built-in hard-coded key during testing).
+- Import: `import { getGoogleReviewsByCompanyName } from 'pixelated-components';`
+- Example:
+
+```
+const { place, reviews } = await getGoogleReviewsByCompanyName({
+  companyName: 'PixelVivid',
+  language: 'en',
+  near: { lat: 32.2163, lng: -80.7526 },
+  radiusMeters: 50000,
+  region: 'us',
+  type: 'point_of_interest',
+  maxReviews: 5,
+});
+```
+
+- Tips:
+  - Prefer `near` + `radiusMeters` for better disambiguation.
+  - If results return 0, try adjusting `region` or `type`, or use the exact business name.
+
+
+
+
+<!-- ROADMAP -->
+## Roadmap
+
+- [ ] LinkedIn Recommendations Integration
+- [ ] eBay Feedback Integration
+- [ ] Yelp Recommendations integration
+- [ ] Calendly Integration
+- [ ] Instagram Image Integration for Carousels
+- [ ] Expanding menu based on 
+- [ ] eCommerce Features + Paypal ( or Stripe, Square)
+- [ ] Shopify Integration
+- [ ] Quickbooks Integration
+- [ ] Buffer Integration (or Sendible, Sprout Social, Hootsuite)
+- [ ] Zapier Integration
+
+
+See the [open issues](https://github.com/brianwhaley/pixelated-components/issues) for a full list of proposed features (and known issues).
+
+
+
+
+<!-- CONTRIBUTING -->
+## Contributing
+
+Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**.
+
+If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement".
+Don't forget to give the project a star! Thanks again!
+
+1. Fork the Project
+2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
+3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
+4. Push to the Branch (`git push origin feature/AmazingFeature`)
+5. Open a Pull Request
+
+
+
+
+
+
+### Top contributors:
+
+<a href="https://github.com/brianwhaley/pixelated-components/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=brianwhaley/pixelated-components" alt="contrib.rocks image" />
+</a>
+
+
+
+<!-- LICENSE -->
+## License
+
+Distributed under the MIT License. See `LICENSE.txt` for more information.
+
+
+
+
+<!-- CONTACT -->
+## Contact
+
+Your Name - [@brianwhaley](https://twitter.com/@brianwhaley) - brian.whaley@gmail.com
+
+Project Link: [https://github.com/brianwhaley/pixelated-components](https://github.com/brianwhaley/pixelated-components)
+
+
+
+
+
+
+
+<!-- MARKDOWN LINKS & IMAGES -->
+<!-- https://www.markdownguide.org/basic-syntax/#reference-style-links -->
+[contributors-shield]: https://img.shields.io/github/contributors/brianwhaley/pixelated-components.svg?style=for-the-badge
+[contributors-url]: https://github.com/brianwhaley/pixelated-components/graphs/contributors
+
+[forks-shield]: https://img.shields.io/github/forks/brianwhaley/pixelated-components.svg?style=for-the-badge
+[forks-url]: https://github.com/brianwhaley/pixelated-components/network/members
+
+[stars-shield]: https://img.shields.io/github/stars/brianwhaley/pixelated-components.svg?style=for-the-badge
+[stars-url]: https://github.com/brianwhaley/pixelated-components/stargazers
+
+[issues-shield]: https://img.shields.io/github/issues/brianwhaley/pixelated-components.svg?style=for-the-badge
+[issues-url]: https://github.com/brianwhaley/pixelated-components/issues
+
+[license-shield]: https://img.shields.io/github/license/brianwhaley/pixelated-components.svg?style=for-the-badge
+[license-url]: https://github.com/brianwhaley/pixelated-components/blob/master/LICENSE.txt
+
+[linkedin-shield]: https://img.shields.io/badge/-LinkedIn-black.svg?style=for-the-badge&logo=linkedin&colorB=555
+[linkedin-url]: https://linkedin.com/in/brianwhaley
+
+[product-screenshot]: images/screenshot.png
+
+[Next.js]: https://img.shields.io/badge/next.js-000000?style=for-the-badge&logo=nextdotjs&logoColor=white
+[Next-url]: https://nextjs.org/
+
+[React.js]: https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB
+[React-url]: https://reactjs.org/
+
+[Storybook.js]: https://img.shields.io/badge/Storybook-FF4785?logo=storybook&logoColor=white
+[Storybook-url]: https://storybook.js.org
+
+[Contentful.com]: https://img.shields.io/badge/Contentful-2478CC?logo=contentful&logoColor=fff
+[Contentful-url]: https://contentful.com
+
+[WordPress.com]: https://img.shields.io/badge/WordPress-%2321759B.svg?logo=wordpress&logoColor=white
+[Wordpress-url]: http://www.wordpress.com
+
+[npm.org]: https://img.shields.io/badge/npm-CB3837?logo=npm&logoColor=fff
+[npm-url]: https://www.npmjs.org
+
+[GitHub.com]: https://img.shields.io/badge/GitHub-%23121011.svg?logo=github&logoColor=white
+[Github-url]: https://www.github.com

package/dist/components/buzzwordbingo/buzzwordbingo.css

@@ -0,0 +1,42 @@
+/* ========================================
+============  BUZZWORD BINGO   ============
+======================================== */
+
+.bingoCard {
+	border: 1px solid #AAA;
+	max-width: 640px;
+	margin: 0 auto;
+}
+
+.bingoCard {
+
+	.bingoHeader{
+		border: 1px solid #AAA;
+		background-color: #CCC;
+		font-size: 2em;
+		font-weight: bold;
+		aspect-ratio : 3 / 1;
+	}
+
+	.bingoBox {
+		border: 1px solid #AAA;
+		aspect-ratio : 1 / 1;
+		width: 100%;
+		height: 100%;
+	}
+
+	.bingoBoxText, 
+	.bingoBoxFreeSpace {
+		text-align:center;
+		margin: auto 0;
+		/* word-spacing: 1000px; */ /* force wrap after each word */
+	}
+
+	.bingoBoxFreeSpace {
+		background-color: #EEE;
+		font-size: 1.1em;
+		font-weight: bold;
+	}
+	
+}
+

package/dist/components/buzzwordbingo/buzzwordbingo.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import './buzzwordbingo.css';
+import "../../css/pixelated.grid.scss";
+function getBingoWords(arr, x) {
+    var myBingoWords = [...arr].sort(() => Math.random() - 0.5); // Shuffle the array
+    myBingoWords = myBingoWords.slice(0, x); // Return the first x elements
+    myBingoWords.splice(12, 0, "FREE SPACE");
+    return myBingoWords;
+}
+BuzzwordBingo.propTypes = {
+    buzzwords: PropTypes.array.isRequired,
+};
+export function BuzzwordBingo(props) {
+    const buzzwords = props.buzzwords;
+    const myBingoHeaders = ["B", "I", "N", "G", "O"];
+    const [bingoWords, setBingoWords] = useState([]);
+    useEffect(() => {
+        setBingoWords(getBingoWords(buzzwords, 24));
+    }, []);
+    return (_jsxs("div", { className: "bingoCard rowfix-5col", children: [myBingoHeaders.map((word) => (_jsx(BingoHeader, { word: word }, word))), bingoWords.map((word) => (_jsx(BingoBox, { word: word }, word)))] }));
+}
+BingoHeader.propTypes = {
+    word: PropTypes.string.isRequired,
+};
+function BingoHeader({ word }) {
+    return (_jsx("div", { className: "bingoHeader gridItem", children: _jsx("div", { className: "bingoBoxText", children: word }) }));
+}
+BingoBox.propTypes = {
+    word: PropTypes.string.isRequired,
+};
+function BingoBox({ word }) {
+    return (_jsx("div", { className: "bingoBox gridItem", children: _jsx("div", { className: (word == "FREE SPACE") ? "bingoBoxFreeSpace" : "bingoBoxText", children: word }) }));
+}

package/dist/components/callout/callout.js

@@ -0,0 +1,95 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import PropTypes from 'prop-types';
+import { usePixelatedConfig } from "../config/config.client";
+import { SmartImage } from '../cms/cloudinary.image';
+import "./callout.scss";
+/* ==================== NOTES ====================
+DEFAULT = flexbox layout, no border around callout
+BOXED = border around callout
+BOXED GRID = applies both
+FULL = full width callout with minimal margin and padding
+GRID = grid layout
+SPLIT = full width split page layout, cannot use LAYOUT (HORIZONTAL / VERTICAL)
+LAYOUT = horizontal or vertical callout, VERTICAL cannot use DIRECTION (LEFT / RIGHT)
+DIRECTION = used to place image on left or right side, does not apply to VERTICAL layout
+
+GRID is basic 1/2 GRID shape, needs enhanement
+BOXSHAPE has not been complete
+==================== NOTES ==================== */
+// Define option arrays - used by both PropTypes and form generation
+export const variants = ['default', 'boxed', 'boxed grid', 'full', 'grid', 'overlay', 'split'];
+export const shapes = ['square', 'bevel', 'squircle', 'round'];
+export const layouts = ['horizontal', 'vertical'];
+export const directions = ['left', 'right'];
+Callout.propTypes = {
+    variant: PropTypes.oneOf([...variants]),
+    boxShape: PropTypes.oneOf([...shapes]),
+    layout: PropTypes.oneOf([...layouts]),
+    direction: PropTypes.oneOf([...directions]),
+    gridColumns: PropTypes.shape({
+        left: PropTypes.number,
+        right: PropTypes.number
+    }),
+    url: PropTypes.string,
+    img: PropTypes.string,
+    imgAlt: PropTypes.string,
+    imgShape: PropTypes.oneOf([...shapes]),
+    imgClick: PropTypes.func,
+    title: PropTypes.string,
+    subtitle: PropTypes.string,
+    content: PropTypes.string,
+    buttonText: PropTypes.string,
+    // SmartImage props
+    aboveFold: PropTypes.bool,
+    /* cloudinaryEnv: PropTypes.string,
+    cloudinaryDomain: PropTypes.string,
+    cloudinaryTransforms: PropTypes.string, */
+};
+export function Callout({ variant = 'default', boxShape = "squircle", layout = "horizontal", direction = 'left', gridColumns = { left: 1, right: 2 }, url, img, imgAlt, imgShape = 'square', imgClick, title, subtitle, content, buttonText, aboveFold,
+/* cloudinaryEnv,
+cloudinaryDomain,
+cloudinaryTransforms */  }) {
+    const target = url && url.substring(0, 4).toLowerCase() === 'http' ? '_blank' : '_self';
+    const body = _jsxs("div", { className: "calloutBody", children: [(title) ? _jsx(CalloutHeader, { title: title, url: url, target: target }) : null, (subtitle) ? _jsx("div", { className: "calloutSubtitle", children: _jsx("h3", { children: subtitle }) }) : null, content ? _jsx("div", { className: "calloutContent", children: _jsx(_Fragment, { children: content }) }) : null, url && buttonText
+                ? _jsx(CalloutButton, { title: buttonText, url: url, target: target })
+                : url && title
+                    ? _jsx(CalloutButton, { title: title || "", url: url, target: target })
+                    : null] });
+    const config = usePixelatedConfig();
+    const image = (img) ?
+        _jsx("div", { className: "calloutImage" + (imgShape ? " " + imgShape : ""), children: (url && !imgClick)
+                ? _jsx("a", { href: url, target: target, rel: target == "_blank" ? "noopener noreferrer" : "", children: _jsx(SmartImage, { src: img, title: title ?? imgAlt ?? undefined, alt: imgAlt ?? title ?? "", aboveFold: aboveFold, cloudinaryEnv: config?.cloudinary?.product_env ?? undefined, cloudinaryDomain: config?.cloudinary?.baseUrl ?? undefined, cloudinaryTransforms: config?.cloudinary?.transforms ?? undefined, suppressHydrationWarning: true }) })
+                : (url && imgClick)
+                    ? _jsx(SmartImage, { src: img, title: title ?? imgAlt ?? undefined, alt: imgAlt ?? title ?? "", onClick: (event) => imgClick(event, url), aboveFold: aboveFold, cloudinaryEnv: config?.cloudinary?.product_env ?? undefined, cloudinaryDomain: config?.cloudinary?.baseUrl ?? undefined, cloudinaryTransforms: config?.cloudinary?.transforms ?? undefined, suppressHydrationWarning: true })
+                    /* <img src={img} title={title ?? imgAlt ?? undefined} alt={imgAlt ?? title ?? undefined} onClick={(event) => imgClick(event, url)} /> */
+                    : _jsx(SmartImage, { src: img, title: title ?? imgAlt ?? undefined, alt: imgAlt ?? title ?? "", aboveFold: aboveFold, cloudinaryEnv: config?.cloudinary?.product_env ?? undefined, cloudinaryDomain: config?.cloudinary?.baseUrl ?? undefined, cloudinaryTransforms: config?.cloudinary?.transforms ?? undefined, suppressHydrationWarning: true }) }) : null;
+    return (_jsx("div", { className: "callout" +
+            (variant ? " " + variant : "") +
+            ((variant === 'boxed' || variant === 'boxed grid') && boxShape ? " " + boxShape : "") +
+            (layout && variant !== 'split' ? " " + layout : "") +
+            (direction && layout !== 'vertical' ? " " + direction : "") +
+            (variant && (variant === 'boxed grid' || variant === 'grid') && gridColumns ? ` calloutGrid-${gridColumns.left}-${gridColumns.right}` : ''), children: (direction === "right") ? _jsxs(_Fragment, { children: [body, image] }) : _jsxs(_Fragment, { children: [image, body] }) }));
+}
+/* ========== CALLOUT HEADER ========== */
+CalloutHeader.propTypes = {
+    title: PropTypes.string.isRequired,
+    url: PropTypes.string,
+    target: PropTypes.string
+};
+export function CalloutHeader({ title, url, target }) {
+    return (_jsx("div", { className: "calloutHeader", children: (url)
+            ? _jsx("a", { href: url, target: target ? target : "", rel: target == "_blank" ? "noopener noreferrer" : "", children: _jsx("h2", { className: "calloutTitle", children: title }) })
+            : _jsx("h2", { className: "calloutTitle", children: title }) }));
+}
+/* ========== CALLOUT BUTTON ========== */
+CalloutButton.propTypes = {
+    title: PropTypes.string.isRequired,
+    url: PropTypes.string,
+    target: PropTypes.string
+};
+export function CalloutButton({ title, url, target }) {
+    return (_jsx("div", { className: "calloutButton", children: (url)
+            ? _jsx("button", { type: "button", className: "calloutButton", children: _jsx("a", { href: url || "", target: target || "", rel: target == "_blank" ? "noopener noreferrer" : "", children: title }) })
+            : null }));
+}