@pixelated-tech/components 3.1.4

package/dist/components/timeline/timeline.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import PropTypes from "prop-types";
+import "./timeline.css";
+import "../../css/pixelated.grid.scss";
+import { usePixelatedConfig } from '../config/config.client';
+import { SmartImage } from '../cms/cloudinary.image';
+// https://www.w3schools.com/howto/howto_css_timeline.asp
+Timeline.propTypes = {
+    timelineData: PropTypes.arrayOf(PropTypes.shape({
+        title: PropTypes.string.isRequired,
+        content: PropTypes.string,
+        image: PropTypes.string,
+        direction: PropTypes.string.isRequired
+    })).isRequired
+};
+export function Timeline(props) {
+    return (_jsx("div", { className: "timeline", children: props.timelineData.map((item, index) => item ? (_jsx(TimelineItem, { title: item.title ?? '', content: item.content, image: item.image, direction: item.direction }, index)) : null) }));
+}
+TimelineItem.propTypes = {
+    title: PropTypes.string.isRequired,
+    content: PropTypes.string,
+    image: PropTypes.string,
+    direction: PropTypes.string.isRequired
+};
+export default function TimelineItem(props) {
+    const config = usePixelatedConfig();
+    return (_jsx("div", { className: "timelineContainer timeline" + props.direction, children: _jsx("div", { className: "timelineContent", children: _jsxs("div", { className: "row-3col", children: [_jsx("div", { className: "grid-s1-e2", children: _jsx(SmartImage, { src: props.image || "", title: props.title, alt: props.title, cloudinaryEnv: config?.cloudinary?.product_env ?? undefined }) }), _jsxs("div", { className: "grid-s2-e4", children: [_jsx("h2", { children: props.title }), _jsx("p", { children: props.content })] })] }) }) }));
+}

package/dist/components/utilities/api.js

@@ -0,0 +1,36 @@
+import PropTypes from 'prop-types';
+export function getXHRData(apiURL, apiMethod, myCallback) {
+    const xhr = new XMLHttpRequest();
+    xhr.open(apiMethod, apiURL, true);
+    // xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
+    // xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
+    // xhr.setRequestHeader("Access-Control-Allow-Origin", "*");
+    xhr.onreadystatechange = () => {
+        // if (xhr.readyState === 4) {
+        if (xhr.readyState === 4 && xhr.status === 200) {
+            let response;
+            response = JSON.parse(xhr.responseText);
+            myCallback(response);
+        }
+    };
+    xhr.send();
+}
+getXHRData.propTypes = {
+    apiURL: PropTypes.string.isRequired,
+    apiMethod: PropTypes.string.isRequired
+};
+export function generateURL(baseURL, props) {
+    let url = baseURL;
+    let allProps = '';
+    for (const prop in props) {
+        if (props) {
+            allProps += (allProps.length === 0) ? prop + '=' + props[prop] : '&' + prop + '=' + props[prop];
+        }
+    }
+    url += allProps;
+    return url;
+}
+generateURL.propTypes = {
+    baseURL: PropTypes.string.isRequired,
+    props: PropTypes.object
+};

package/dist/components/utilities/functions.js

@@ -0,0 +1,98 @@
+export function html2dom(str) {
+    if (window.DOMParser) {
+        const parser = new DOMParser();
+        const doc = parser.parseFromString(str, 'text/html');
+        return doc.body.firstChild;
+    }
+    const dom = document.createElement('div');
+    dom.innerHTML = str;
+    return dom;
+}
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function mergeDeep(a, b) {
+    // first is default vals, all other objects overwrite
+    const extended = {};
+    for (let i = 0; i < arguments.length; i++) {
+        const thisObj = arguments[i];
+        for (const prop in thisObj) {
+            if (Object.prototype.hasOwnProperty.call(thisObj, prop)) {
+                if (Object.prototype.toString.call(thisObj[prop]) === '[object Object]') {
+                    // not sure why true was the first param... or why there were 3 params
+                    extended[prop] = mergeDeep(extended[prop], thisObj[prop]);
+                }
+                else {
+                    extended[prop] = thisObj[prop];
+                }
+            }
+        }
+    }
+    return extended;
+}
+export function pushNewValueToStateArray(that, oldState, newValue) {
+    const myNewArray = that.state[oldState];
+    myNewArray.push(newValue);
+    that.setState({ [oldState]: myNewArray });
+}
+export function randomBetween(min, max) {
+    /* ===== RANDOM NUM BETWEEN MIN AND MAX ===== */
+    if (min < 0) {
+        return min + Math.random() * (Math.abs(min) + max);
+    }
+    else {
+        return min + Math.random() * (max - min);
+    }
+}
+export function generateKey() {
+    const vals = [];
+    vals[0] = Math.random().toString(36).substring(2, 15);
+    vals[1] = Math.floor(performance.now() * Math.floor(Math.random() * 1000)).toString(36);
+    vals[2] = Math.floor(Math.random() * new Date().getTime()).toString(36);
+    vals[3] = Number(crypto.getRandomValues(new Uint16Array(4)).join('')).toString(36);
+    return (vals[Math.floor(Math.random() * 4)] + vals[Math.floor(Math.random() * 4)]);
+}
+export function generateUUID() {
+    // https://stackoverflow.com/questions/105034/how-do-i-create-a-guid-uuid
+    // var d8 = crypto.randomUUID();
+    return window.URL.createObjectURL(new Blob([])).substr(-36);
+}
+export function capitalize(str) {
+    return str[0].toUpperCase() + str.toLowerCase().slice(1);
+}
+/*
+Array.prototype.contains = function(obj) {
+  return this.indexOf(obj) > -1;
+};
+*/
+export function attributeMap(oldAttribute) {
+    // https://reactjs.org/docs/dom-elements.html
+    const attributes = {
+        autocapitalize: 'autoCapitalize',
+        autocomplete: 'autoComplete',
+        autocorrect: 'autoCorrect',
+        autofocus: 'autoFocus',
+        cellpadding: 'cellPadding',
+        cellspacing: 'cellSpacing',
+        charset: 'charSet',
+        class: 'className',
+        colspan: 'colSpan',
+        datetime: 'dateTime',
+        defaultvalue: 'defaultValue',
+        for: 'htmlFor',
+        formaction: 'formAction',
+        formmethod: 'formMethod',
+        formtarget: 'formTarget',
+        frameborder: 'frameBorder',
+        hreflang: 'hrefLang',
+        httpequiv: 'httpEquiv',
+        marginheight: 'marginHeight',
+        marginwidth: 'marginWidth',
+        maxlength: 'maxLength',
+        minlength: 'minLength',
+        onchange: 'onChange',
+        readonly: 'readOnly',
+        rowspan: 'rowSpan',
+        spellcheck: 'spellCheck',
+        tabindex: 'tabIndex'
+    };
+    return (attributes[oldAttribute] ? attributes[oldAttribute] : oldAttribute);
+}

package/dist/components/yelp/yelp.js

@@ -0,0 +1,50 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+/*
+NOTE : development has stopped for this component
+as Yelp Base API Access costs $229 per month.
+Not ok.
+*/
+/*
+https://www.yelp.com/developers
+https://www.google.com/search?q=yelp+reviews+react+component&oq=yelp+reviews+react+component&gs_lcrp=EgZjaHJvbWUyBggAEEUYOTIHCAEQIRigATIHCAIQIRigATIHCAMQIRigATIHCAQQIRigATIHCAUQIRigATIHCAYQIRirAtIBCDYzOThqMWo3qAIAsAIA&sourceid=chrome&ie=UTF-8
+https://www.reddit.com/r/nextjs/comments/16smhqa/next_js_fetching_data_from_yelp_api/
+https://helloputnam.medium.com/easiest-way-to-include-business-reviews-on-a-web-app-google-facebook-yelp-etc-de3e243bbe75
+*/
+export function YelpReviews(props) {
+    const [reviews, setReviews] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState();
+    useEffect(() => {
+        const fetchReviews = async () => {
+            const apiKey = 'YOUR_YELP_API_KEY';
+            const url = `https://cors-anywhere.herokuapp.com/https://api.yelp.com/v3/businesses/${props.businessID}/reviews`;
+            try {
+                const response = await fetch(url, {
+                    headers: {
+                        Authorization: `Bearer ${apiKey}`,
+                    },
+                });
+                if (!response.ok) {
+                    throw new Error(`HTTP error! status: ${response.status}`);
+                }
+                const data = await response.json();
+                setReviews(data.reviews);
+                setLoading(false);
+            }
+            catch (e) {
+                setError(e);
+                setLoading(false);
+            }
+        };
+        fetchReviews();
+    }, [props.businessID]);
+    if (loading) {
+        return _jsx("p", { children: "Loading reviews..." });
+    }
+    if (error) {
+        return _jsxs("p", { children: ["Error: ", error.message] });
+    }
+    return (_jsxs("div", { children: [_jsx("h3", { children: "Yelp Reviews" }), reviews.map((review) => (_jsxs("div", { className: "review", children: [_jsxs("p", { className: "rating", children: ["Rating: ", review.rating] }), _jsx("p", { className: "text", children: review.text }), _jsxs("p", { className: "user", children: ["- ", review.user.name] }), _jsx("hr", {})] }, review.id)))] }));
+}

package/dist/css/pixelated.font.scss

@@ -0,0 +1,68 @@
+/* ========================================
+========  DEFAULT FONT STYLES   ===========
+======================================== */
+
+/* 
+https://hanjing.medium.com/font-sizing-4259801c04c1
+https://www.learnui.design/blog/mobile-desktop-website-font-size-guidelines.html 
+https://www.smashingmagazine.com/2022/01/modern-fluid-typography-css-clamp/
+https://robertcelt95.medium.com/responsive-typography-that-actually-works-beyond-font-size-clamp-acf592b79774
+https://medium.com/better-web-type/the-state-of-fluid-web-typography-135cd26e0612
+*/
+
+/* --font-size1: font-size: 32px; 
+--font-size2: font-size: 24px; 
+--font-size3: font-size: 18.75px;
+--font-size4: font-size: 16px;
+--font-size5: font-size: 13.25px;
+--font-size6: font-size: 10.75px; */
+
+:root {
+  --font-size1-min: 2.00rem;
+  --font-size1-max: 3.00rem;
+
+  --font-size2-min: 1.35rem;
+  --font-size2-max: 1.75rem;
+
+  --font-size3-min: 1.17rem;
+  --font-size3-max: 1.35rem;
+
+  --font-size4-min: 1.00rem;
+  --font-size4-max: 1.25rem;
+
+  --font-size5-min: 0.83rem;
+  --font-size5-max: 1.00rem;
+
+  --font-size6-min: 0.67rem;
+  --font-size6-max: 0.85rem;
+}
+
+$minScreen: 375px;
+$maxScreen: 1440px;
+
+:root { 
+	@for $i from 1 through 6 {
+		$min: var(--font-size#{$i}-min); 
+		$max: var(--font-size#{$i}-max); 
+		$preferred: calc(#{$min} + ((#{$max} - #{$min}) * ((100vw - #{$minScreen}) / #{($maxScreen - $minScreen)})));
+		--font-size#{$i}: clamp(#{$min}, #{$preferred}, #{$max});
+	}
+}
+
+@for $i from 1 through 6 {
+   	h#{$i} { font-size: var(--font-size#{$i}); }
+}
+
+:root {	
+	--header-font: "Montserrat", Verdana, sans-serif;
+	--body-font: "Roboto", Arial, sans-serif;
+}
+body { 
+	font-family: var(--body-font); 
+	font-size: var(--font-size4); 
+}
+h1, h2, h3, h4, h5, h6 {
+	font-family: var(--header-font); 
+	line-height: 1.1;
+}
+html { font-size: 1.0rem; /* 16px; */ }