@pixelated-tech/components 3.1.4

package/dist/components/pagebuilder/lib/usePageBuilder.js

@@ -0,0 +1,234 @@
+import { useState } from 'react';
+import { generateComponentObject } from './componentGeneration';
+/**
+ * usePageBuilder - Custom hook for PageBuilder state management
+ * Handles all state and business logic for component management
+ */
+export function usePageBuilder() {
+    const [pageJSON, setPageJSON] = useState({ components: [] });
+    const [editableComponent, setEditableComponent] = useState({});
+    const [selectedPath, setSelectedPath] = useState('');
+    const [editMode, setEditMode] = useState(null);
+    /**
+     * Handles adding new components or updating existing ones
+     */
+    function handleAddNewComponent(event) {
+        const { component: newComponent, parentPath } = generateComponentObject(event);
+        const components = JSON.parse(JSON.stringify(pageJSON.components));
+        // Check if we're editing an existing component
+        if (editMode) {
+            // Update existing component at editMode.path
+            const pathParts = editMode.path.split(/[.[\]]/).filter(p => p);
+            let current = { components };
+            for (let i = 0; i < pathParts.length - 1; i++) {
+                const part = pathParts[i];
+                if (part === 'children' || part === 'root') {
+                    current = current[part === 'root' ? 'components' : part];
+                }
+                else {
+                    current = current[parseInt(part)];
+                }
+            }
+            const lastPart = pathParts[pathParts.length - 1];
+            const index = parseInt(lastPart);
+            // Preserve children if it's a layout component
+            if (current[index]?.children) {
+                newComponent.children = current[index].children;
+            }
+            current[index] = newComponent;
+            setPageJSON({ components });
+            setEditableComponent({});
+            setSelectedPath('');
+            setEditMode(null);
+            return;
+        }
+        if (!parentPath) {
+            // Add to root level
+            components.push(newComponent);
+        }
+        else {
+            // Find parent and add to its children
+            const pathParts = parentPath.split(/[[\].]/).filter(Boolean);
+            let current = { components };
+            for (let i = 0; i < pathParts.length; i++) {
+                const part = pathParts[i];
+                if (part === 'root') {
+                    current = current.components;
+                }
+                else if (part === 'children') {
+                    // Next part should be an index
+                    continue;
+                }
+                else {
+                    const idx = parseInt(part);
+                    if (!isNaN(idx)) {
+                        current = current[idx];
+                    }
+                }
+            }
+            if (current && Array.isArray(current.children)) {
+                current.children.push(newComponent);
+            }
+        }
+        setPageJSON({ components });
+        setEditableComponent({});
+        setSelectedPath('');
+    }
+    /**
+     * Handles selecting a component for adding children
+     */
+    function handleSelectComponent(component, path) {
+        // Toggle selection - if clicking same component, unselect it
+        if (selectedPath === path) {
+            setSelectedPath('');
+        }
+        else {
+            setSelectedPath(path);
+        }
+        setEditMode(null);
+    }
+    /**
+     * Handles editing an existing component
+     */
+    function handleEditComponent(component, path) {
+        // Load component properties for editing
+        setEditMode({ path, component });
+        setSelectedPath('');
+        // ComponentSelector will generate the form when editMode changes
+    }
+    /**
+     * Clears component selection
+     */
+    function clearSelection() {
+        setSelectedPath('');
+    }
+    /**
+     * Cancels edit mode
+     */
+    function cancelEdit() {
+        setEditMode(null);
+        setEditableComponent({});
+    }
+    /**
+     * Handles deleting a component by path
+     */
+    function handleDeleteComponent(path) {
+        const components = JSON.parse(JSON.stringify(pageJSON.components));
+        const pathParts = path.split(/[.[\]]/).filter(p => p);
+        // Navigate to parent
+        let current = { components };
+        for (let i = 0; i < pathParts.length - 1; i++) {
+            const part = pathParts[i];
+            if (part === 'root') {
+                current = current.components;
+            }
+            else if (part === 'children') {
+                continue;
+            }
+            else {
+                current = current[parseInt(part)];
+            }
+        }
+        // Get the index to delete
+        const lastPart = pathParts[pathParts.length - 1];
+        const index = parseInt(lastPart);
+        // Delete from array
+        if (Array.isArray(current)) {
+            current.splice(index, 1);
+        }
+        else if (current.children && Array.isArray(current.children)) {
+            current.children.splice(index, 1);
+        }
+        setPageJSON({ components });
+        // Clear edit mode and selection if deleting that component
+        if (editMode?.path === path) {
+            cancelEdit();
+        }
+        if (selectedPath === path) {
+            clearSelection();
+        }
+    }
+    /**
+     * Move component up in the array (swap with previous sibling)
+     */
+    function handleMoveUp(path) {
+        const components = JSON.parse(JSON.stringify(pageJSON.components));
+        const pathParts = path.split(/[.[\]]/).filter(p => p);
+        let current = { components };
+        // Navigate to parent array
+        for (let i = 0; i < pathParts.length - 1; i++) {
+            const part = pathParts[i];
+            if (part === 'root') {
+                current = current.components;
+            }
+            else if (part === 'children') {
+                continue;
+            }
+            else {
+                current = current[parseInt(part)];
+            }
+        }
+        const lastPart = pathParts[pathParts.length - 1];
+        const index = parseInt(lastPart);
+        // Get the array containing this component
+        const array = Array.isArray(current) ? current : current.children;
+        // Can't move up if already first
+        if (index > 0 && array) {
+            // Swap with previous
+            [array[index - 1], array[index]] = [array[index], array[index - 1]];
+            setPageJSON({ components });
+        }
+    }
+    /**
+     * Move component down in the array (swap with next sibling)
+     */
+    function handleMoveDown(path) {
+        const components = JSON.parse(JSON.stringify(pageJSON.components));
+        const pathParts = path.split(/[.[\]]/).filter(p => p);
+        let current = { components };
+        // Navigate to parent array
+        for (let i = 0; i < pathParts.length - 1; i++) {
+            const part = pathParts[i];
+            if (part === 'root') {
+                current = current.components;
+            }
+            else if (part === 'children') {
+                continue;
+            }
+            else {
+                current = current[parseInt(part)];
+            }
+        }
+        const lastPart = pathParts[pathParts.length - 1];
+        const index = parseInt(lastPart);
+        // Get the array containing this component
+        const array = Array.isArray(current) ? current : current.children;
+        // Can't move down if already last
+        if (array && index < array.length - 1) {
+            // Swap with next
+            [array[index], array[index + 1]] = [array[index + 1], array[index]];
+            setPageJSON({ components });
+        }
+    }
+    return {
+        // State
+        pageJSON,
+        editableComponent,
+        selectedPath,
+        editMode,
+        // Setters
+        setPageJSON,
+        setEditableComponent,
+        setSelectedPath,
+        setEditMode,
+        // Handlers
+        handleAddNewComponent,
+        handleSelectComponent,
+        handleEditComponent,
+        clearSelection,
+        cancelEdit,
+        handleDeleteComponent,
+        handleMoveUp,
+        handleMoveDown,
+    };
+}

package/dist/components/recipe/recipe.css

@@ -0,0 +1,107 @@
+
+/* ========================================
+===============  RECIPES    ===============
+======================================== */
+
+#recipe-list {
+	/* background-image: url(/images/pix/pix-bg-sm-bw.gif); */
+	border: 1px solid #999;
+	box-shadow: 5px 5px 5px rgba(127, 127, 127, 1.0);
+	font-size: 18px;
+	height: 2em;
+    margin-bottom: 15px;
+}
+
+.h-recipe-category {
+	background-color: #EEE;
+	/* background-image: url(/images/pix/pix-bg-sm-bw.gif); */
+	border: 1px solid #CCC;
+	color: #000;
+	font-size: 22px;
+	text-transform: uppercase;
+	margin: 30px 0px;
+	padding: 14px;
+	float: left;
+	width: 100%;
+}
+
+/* https://microformats.org/wiki/h-recipe */
+
+.h-recipe { font-size: 12px; }
+.h-recipe p { margin: 0px !important; }
+.h-recipe.p-name {
+    background-color: #F9F9F9;
+    border: 1px solid #CCC;
+    color: #000;
+    font-size: 18px;
+    margin: 20px 0;
+    padding: 10px;
+    float: left;
+    width: 100%;
+}
+.e-ingredients, .e-instructions {
+	color: #454545;
+    font-family: Lucida Sans Unicode, Lucida, Helvetica, sans-serif;
+    font-size: 16px;
+    font-style: italic;
+    margin-top: 20px;
+}
+.h-recipe .p-ingredient { --do-nothing: true }
+.h-recipe .p-yield { --do-nothing: true }
+.h-recipe .e-instructions {
+	list-style-type: decimal-leading-zero;
+}
+.h-recipe .p-instruction { --do-nothing: true }
+.h-recipe .dt-duration { --do-nothing: true }
+.h-recipe .u-photo {
+	float: right;
+	margin: 15px;
+    max-width: 400px;
+    max-height: 400px;
+}
+.h-recipe .u-photo:after{
+	content: "";
+  	display: table;
+  	clear: both;
+}
+@media screen and (max-width: 480px) {
+	.h-recipe .u-photo {
+		float: none;
+		margin: 10px auto;
+		display: block;
+	}
+}
+
+/* EXPERIMENTAL PROPERTIES WITH WIDE ADOPTION */
+.h-recipe .p-summary { --do-nothing: true }
+.h-recipe .p-author { --do-nothing: true }
+.h-recipe .dt-published { --do-nothing: true }
+.h-recipe .p-nutrition { --do-nothing: true }
+.h-recipe .p-category { --do-nothing: true }
+
+/* PROPOSED PROPERTIES */
+.h-recipe .u-remix-of { --do-nothing: true }
+
+/* ========================================
+==========    BACK TO TOP    ==============
+======================================== */
+
+.backToTop {
+	background: #FFF;
+	border: 1px solid #CCC;
+	color: #000;
+	font-size: 10px;
+	padding: 5px;
+	position: fixed;
+	right: 10px;
+	text-align: center;
+	text-decoration: none;
+	top: 70px;
+	width: 50px;
+	z-index: 400;
+
+	/* .rounded; */
+	-moz-border-radius: 5px;
+	-webkit-border-radius: 5px;
+	border-radius: 5px;
+}

package/dist/components/recipe/recipe.js

@@ -0,0 +1,161 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { SmartImage } from '../cms/cloudinary.image';
+import { usePixelatedConfig } from '../config/config.client';
+import './recipe.css';
+/* ========== RECIPE BOOK ========== */
+RecipeBook.propTypes = {
+    recipeData: PropTypes.shape({
+        items: PropTypes.array.isRequired
+    }).isRequired,
+    recipeCategories: PropTypes.array.isRequired
+};
+// export type RecipeBookType = InferProps<typeof RecipeBook.propTypes>;
+export function RecipeBook(props) {
+    const [recipeElems] = useState(generateMyElems());
+    const [outputElems, setOutputElems] = useState([]);
+    const [showOnlyCat, setShowOnlyCat] = useState('');
+    const [showOnlyRecipe, setShowOnlyRecipe] = useState('');
+    function generateMyElems() {
+        const myElems = [];
+        const recipeBookItems = props.recipeData.items;
+        for (const catKey in props.recipeCategories) {
+            const category = props.recipeCategories[catKey];
+            myElems[category] = [];
+            for (const recipeKey in recipeBookItems) {
+                const recipe = recipeBookItems[recipeKey];
+                const cats = recipe.properties.category;
+                if (cats.includes(category)) {
+                    myElems[category].push(recipe);
+                }
+            }
+        }
+        return myElems;
+    }
+    function outputMyElems() {
+        const myElems = [];
+        let catKey = 1;
+        for (const category in recipeElems) {
+            const cID = 'c' + (catKey);
+            myElems.push(_jsx(RecipeCategory, { id: cID, className: 'h-recipe-category', category: category, showOnly: showOnlyCat }, cID));
+            for (const recipeKey in recipeElems[category]) {
+                const recipe = recipeElems[category][recipeKey];
+                const cats = recipe.properties.category;
+                const rID = cID + '-r' + (parseInt(recipeKey, 10) + 1);
+                if (cats.includes(category)) {
+                    myElems.push(_jsx(RecipeBookItem, { id: rID, recipeData: recipe, showOnly: showOnlyRecipe }, rID));
+                }
+            }
+            catKey += 1;
+        }
+        return myElems;
+    }
+    useEffect(() => {
+        setOutputElems(outputMyElems());
+    }, [showOnlyCat, showOnlyRecipe]);
+    function onRecipePickListChange(optionVal) {
+        let cID, rID;
+        if (optionVal.includes('-')) {
+            cID = optionVal.substring(0, optionVal.indexOf('-'));
+            rID = optionVal;
+        }
+        else {
+            cID = optionVal;
+            rID = optionVal;
+        }
+        setShowOnlyCat(cID);
+        setShowOnlyRecipe(rID);
+        setOutputElems(outputMyElems());
+        window.location.hash = rID;
+    }
+    return (_jsxs("div", { id: "recipes", children: [_jsx(BackToTop, {}), _jsx(RecipePickList, { recipeData: props.recipeData, recipeCategories: props.recipeCategories, handleRecipePickListChange: onRecipePickListChange }), outputElems] }));
+}
+/* ========== RECIPE CATEGORY ========== */
+RecipeCategory.propTypes = {
+    id: PropTypes.string.isRequired,
+    className: PropTypes.string.isRequired,
+    category: PropTypes.string.isRequired,
+    showOnly: PropTypes.string.isRequired
+};
+export function RecipeCategory(props) {
+    const isHidden = ((props.showOnly.length > 0) && (!(props.id.includes(props.showOnly)))
+        ? { display: 'none' }
+        : { display: 'initial' });
+    return (_jsx("h2", { id: props.id, className: props.className, style: isHidden, children: props.category }));
+}
+/* ========== RECIPE ========== */
+RecipeBookItem.propTypes = {
+    recipeData: PropTypes.object.isRequired,
+    id: PropTypes.string.isRequired,
+    showOnly: PropTypes.string.isRequired
+};
+export function RecipeBookItem(props) {
+    const config = usePixelatedConfig();
+    const recipeData = props.recipeData;
+    const recipe = recipeData.properties;
+    const ingredients = recipe.ingredients.map((ingredient, iKey) => _jsx("li", { className: "p-ingredient", children: ingredient }, iKey));
+    const instructions = recipe.instructions.map((instruction, iKey) => _jsx("li", { className: "p-instruction", children: instruction }, iKey));
+    /* ? <img className='u-photo' src={recipe.photo} title={recipe.name} alt={recipe.name} /> */
+    const recipeImage = (recipe.photo.length > 0
+        ? _jsx(SmartImage, { className: 'u-photo', src: recipe.photo, title: recipe.name, alt: recipe.name, cloudinaryEnv: config?.cloudinary?.product_env ?? undefined, cloudinaryDomain: config?.cloudinary?.baseUrl ?? undefined, cloudinaryTransforms: config?.cloudinary?.transforms ?? undefined })
+        : null);
+    const isHidden = ((props.showOnly.length > 0) && (!(props.id.includes(props.showOnly))) ? { display: 'none' } : { display: 'initial' });
+    /* event.preventDefault(); */
+    return (_jsxs("article", { id: props.id, className: "h-recipe", style: isHidden, children: [_jsx("h3", { className: "p-name", children: _jsx("a", { id: props.id, href: `#${props.id}`, onClick: () => { return false; }, children: recipe.name }) }), recipeImage, _jsx("p", { className: "p-summary", children: recipe.summary }), _jsx("p", { children: "\u00A0" }), _jsxs("p", { className: "p-author", children: ["Author: ", recipe.author] }), _jsxs("p", { className: "p-published", children: ["Published: ", recipe.published] }), _jsxs("p", { className: "dt-duration", children: ["Duration: ", recipe.duration] }), _jsxs("p", { className: "p-yield", children: ["Yield: ", recipe.yield] }), _jsx("h4", { className: "e-ingredients", children: "Ingredients" }), _jsx("ul", { children: ingredients }), _jsx("h4", { className: "e-instructions", children: "Instructions" }), _jsx("ol", { children: instructions })] }));
+}
+/* ========== RECIPE PICK LIST ========== */
+RecipePickList.propTypes = {
+    recipeData: PropTypes.object.isRequired,
+    recipeCategories: PropTypes.array.isRequired,
+    handleRecipePickListChange: PropTypes.func.isRequired
+};
+export function RecipePickList(props) {
+    const [recipeOptions, setRecipeOptions] = useState([]);
+    function generateMyOptions() {
+        const myOpts = [];
+        myOpts.push(_jsx("option", { value: '', children: "Choose a recipe below:" }, 'x0'));
+        for (const catKey in props.recipeCategories) {
+            const category = props.recipeCategories[catKey];
+            const cID = 'c' + (parseInt(catKey, 10) + 1);
+            myOpts.push(_jsxs("option", { value: cID, children: ["=== ", category.toUpperCase(), " ==="] }, cID));
+            let rID = 1;
+            const recipeData = props.recipeData;
+            const recipeDataItems = recipeData.items;
+            for (const recipeKey in recipeDataItems) {
+                const recipe = recipeDataItems[recipeKey];
+                const cats = recipe.properties.category;
+                if (cats.includes(category)) {
+                    myOpts.push(_jsx("option", { value: cID + '-r' + rID, children: recipe.properties.name }, cID + '-r' + rID));
+                    rID += 1;
+                }
+            }
+        }
+        return myOpts;
+    }
+    function recipeListChanged(e) {
+        if (e.target.value.length > 0) {
+            props.handleRecipePickListChange(e.target.value);
+        }
+        else {
+            props.handleRecipePickListChange('');
+        }
+    }
+    useEffect(() => {
+        setRecipeOptions(generateMyOptions());
+    }, []);
+    return (_jsx("form", { children: _jsx("select", { id: "recipe-list", name: "recipe-list", onChange: recipeListChanged, children: recipeOptions }) }));
+}
+/* ========== RECIPE BACK TO TOP ========== */
+export function BackToTop() {
+    function scrollToTop() {
+        window.scroll({
+            top: 0,
+            left: 0,
+            behavior: 'smooth'
+        });
+        return false;
+    }
+    const config = usePixelatedConfig();
+    return (_jsx("div", { className: "backToTop", children: _jsxs("a", { href: "#top", onClick: scrollToTop, children: [_jsx("div", { children: _jsx(SmartImage, { src: "/images/icons/up.jpg", title: "Back To Top", alt: "Back To Top", cloudinaryEnv: config?.cloudinary?.product_env ?? undefined, cloudinaryDomain: config?.cloudinary?.baseUrl ?? undefined, cloudinaryTransforms: config?.cloudinary?.transforms ?? undefined }) }), _jsx("div", { children: "Back To Top" })] }) }));
+}

package/dist/components/resume/resume.css

@@ -0,0 +1,162 @@
+
+/* ========================================
+==========      RESUME       ==============
+======================================== */
+
+.p-resume {
+	word-break: break-word;
+	line-height: 1.4;
+}
+
+.p-resume {
+	h1, h2, h3 {
+		display: block;
+		font-weight: bold;
+		margin-top:10px;
+		letter-spacing: -1px;
+		text-transform: uppercase;
+	}
+	h1	{
+		font-size: 2.5em;
+		text-align: center;
+	}
+	h2	{
+		font-size: 1.5em;
+	}
+	h3	{
+		font-size: 1.17em;
+	}
+	ul, ol {
+		margin: 0 0 10px 0;
+		padding-left: 20px;
+	}
+}
+
+/* http://microformats.org/wiki/h-resume */
+
+.p-resume {
+	.p-name { --do-nothing: true }
+	.p-summary { --do-nothing: true }
+	.p-contact { --do-nothing: true }
+	.p-education { --do-nothing: true }
+	.p-experience { --do-nothing: true }
+	.p-skills { --do-nothing: true }
+	.p-skill-category { display: inline !important; } /* THIS ONE IS MINE */
+	.p-skill { --do-nothing: true }
+	.p-affiliation { --do-nothing: true }
+}
+
+/* ===== MY OWN SECTIONS ===== */
+
+.p-resume {
+	.p-projects { --do-nothing: true }
+	.p-project { --do-nothing: true }
+	.p-qualifications { --do-nothing: true }
+	.p-qualification { --do-nothing: true }
+	.p-volunteer { --do-nothing: true }
+	.p-certifications { --do-nothing: true }
+	.p-awards { --do-nothing: true }
+	.p-training { --do-nothing: true }
+	.p-references { --do-nothing: true }
+}
+
+/* http://microformats.org/wiki/h-card */
+
+.p-resume {
+	.p-name { --do-nothing: true }
+	.p-honorific-prefix { --do-nothing: true }
+	.p-given-name { --do-nothing: true }
+	.p-additional-name { --do-nothing: true }
+	.p-family-name { --do-nothing: true }
+	.p-sort-string { --do-nothing: true }
+	.p-honorific-suffix { --do-nothing: true }
+	.p-nickname { --do-nothing: true }
+	.u-email { --do-nothing: true }
+	.u-logo { --do-nothing: true }
+	.u-photo { --do-nothing: true }
+	.u-photo-icon { width: 12px; height: 12px; } /* THIS ONE IS MINE */
+	.u-url { --do-nothing: true }
+	.u-url-icon { background: #BDF; width: 12px; height: 12px; } /* THIS ONE IS MINE */
+	.u-uid { --do-nothing: true }
+	.p-category { --do-nothing: true }
+	.p-adr { --do-nothing: true }
+	.p-post-office-box { --do-nothing: true }
+	.p-extended-address { --do-nothing: true }
+	.p-street-address { --do-nothing: true }
+	.p-locality { --do-nothing: true }
+	.p-region { --do-nothing: true }
+	.p-postal-code { --do-nothing: true }
+	.p-country-name { --do-nothing: true }
+	.p-label { --do-nothing: true }
+	.p-geo { --do-nothing: true }
+	.u-geo { --do-nothing: true }
+	.p-latitude { --do-nothing: true }
+	.p-longitude { --do-nothing: true }
+	.p-altitude { --do-nothing: true }
+	.p-tel { --do-nothing: true }
+	.p-note { --do-nothing: true }
+	.dt-bday { --do-nothing: true }
+	.u-key { --do-nothing: true }
+	.p-org { --do-nothing: true }
+	.p-job-title { --do-nothing: true }
+	.p-role { --do-nothing: true }
+	.u-impp { --do-nothing: true }
+	.p-sex { --do-nothing: true }
+	.p-gender-identity { --do-nothing: true }
+	.dt-anniversary { --do-nothing: true }
+}
+
+/* http://microformats.org/wiki/h-event */
+
+.p-resume {
+	/* .p-name */
+	.p-summary { --do-nothing: true }
+	.dt-start {
+		font-weight: bold;
+		letter-spacing: -1px;
+	}
+	.dt-end {
+		font-weight: bold;
+		letter-spacing: -1px;
+	}
+	.dt-duration { --do-nothing: true }
+	.p-description { --do-nothing: true }
+	.e-content { --do-nothing: true } /* from h-entry */
+	/* .u-url { --do-nothing: true } */
+	/* .p-category { --do-nothing: true } */
+	.p-location { --do-nothing: true }
+}
+
+/* STYLES FOR DETAILS / SUMMARY EXPAND / COLLAPSE */
+
+details {
+	border: 1px solid #ccc;
+	margin-bottom: 10px; 
+}
+details[open] {
+	border: none;
+}
+summary {
+	background-color: #eee;
+	padding: 10px;
+	cursor: pointer;
+	list-style-position: outside;
+}
+summary > h2 {
+	margin: 0 !important;
+}
+
+/* OTHER STYLES */
+
+.divider {
+	border-right: 1px solid #ccc;
+}
+@media screen and (max-width: 480px) {
+	.divider {
+		border-right: 0;
+	}
+}
+@media print {
+	header { display: none; }
+	nav { display: none; }
+}