@gnar-engine/cli 1.0.4 → 1.0.5

package/bootstrap/services/portal/src/elements/SelectRepeater/SelectRepeater.jsx

@@ -0,0 +1,63 @@
+import React from "react";
+import CustomSelect from "../CustomSelect/CustomSelect";
+
+/**
+ * SelectRepeater component allows users to add, update, and remove items from a list using a select dropdown.
+ *
+ * Use setItems to manage state setting here, or use setItem override to manage state setting higher up
+ */
+const SelectRepeater = ({ items = [], setItems, setItem, renderRow, selectLabel, selectText, selectOptions, selectLabelKey }) => {
+
+    const addItem = (item) => {
+        if (setItem) {
+            setItem(item);
+        } else if (setItems) {
+            setItems([...items, item]);
+        }
+    }
+
+    const updateItem = (index, newItem) => {
+        if (setItem) {
+            setItem(newItem, index);
+        } else if (setItems) {
+            const newItems = [...items];
+            newItems[index] = newItem;
+            setItems(newItems);
+        }
+    }
+
+    const removeItem = (item, index) => {
+        if (setItem) {
+            const remove = true;
+            setItem(item, index, remove);
+        } else {
+            setItems(items.filter((_, i) => i !== index));
+        }
+    }
+
+    return (
+        <div className="repeater">
+            {items.length > 0 && items.map((item, index) => 
+                <div className="repeater-row" key={index}>
+                    {renderRow(item, index, (newItem) => updateItem(index, newItem))}
+                    <span onClick={() => removeItem(item, index)} className="icon-delete remove-repeater-row"></span>
+                </div>
+            )}
+            <div className="button-cont">
+                <CustomSelect
+                    label={selectLabel}
+                    placeholder={selectText}
+                    name="repeater-select"
+                    options={selectOptions}
+                    labelKey={selectLabelKey}
+                    setSelectedOption={(option) => {
+                        addItem(option);
+                    }}
+                    selectedOption={null}
+                />
+            </div>
+        </div>
+    );
+};
+
+export default SelectRepeater;

package/bootstrap/services/portal/src/elements/SelectRepeater/SelectRepeater.less

@@ -0,0 +1,23 @@
+.repeater-row {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    position: relative;
+    align-items: center;
+    gap: 20px;
+}
+
+.remove-repeater-row {
+    display: inline-block;
+    width: 30px;
+    height: 30px;
+    background-repeat: no-repeat;
+    background-position: center center;
+    margin-bottom: 10px;
+    opacity: 0.6;
+    
+    &:hover {
+        cursor: pointer;
+        opacity: 1;
+    }
+}

package/bootstrap/services/portal/src/elements/TextInput/TextInput.jsx

@@ -0,0 +1,17 @@
+
+function TextInput({ label, value, onChange, placeholder }) {
+
+    return (
+        <div className="text-input">
+            {label && <label>{label}</label>}
+            <input 
+                type="text" 
+                value={value} 
+                onChange={onChange} 
+                placeholder={placeholder} 
+            />
+        </div>
+    );
+}
+
+export default TextInput;

package/bootstrap/services/portal/src/layouts/Card/Card.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+function Card({ title, children }) {
+
+    return (
+        <div className="card">
+            <h2 className="card-title">{title}</h2>
+            <div className="card-content">
+                {children}
+            </div>
+        </div>
+    );
+}
+
+export default Card;

package/bootstrap/services/portal/src/layouts/PortalLayout/PortalLayout.jsx

@@ -0,0 +1,29 @@
+import { Outlet } from "react-router-dom";
+import gnarEngineLogo from '../../assets/gnar-engine-white-logo.svg';
+import Topbar from "../../components/Topbar/Topbar";
+import Sidebar from "../../components/Sidebar/Sidebar";
+
+function PortalLayout() {
+
+    return (
+        <>
+            <Topbar />
+            <div className="portal-main">
+                <div className="portal-main-inner flex-row">
+                    <Sidebar />
+                    <div className="portal-page">
+                        <div className="portal-page-header">
+                            <img src={gnarEngineLogo} className="logo" alt="Gnar Engine" />
+                        </div>
+                        <Outlet />
+                        <div className="portal-page-footer">
+                            <p>©2025 Gnar Engine. All rights reserved.</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </>
+    )
+}
+
+export default PortalLayout;

package/bootstrap/services/portal/src/layouts/PortalLayout/PortalLayout.less

@@ -0,0 +1,49 @@
+.portal-main {
+    background: @dark-2;
+    min-height: calc(100vh - 71px);
+    width: 100vw;
+    position: absolute;
+    top: 71px;
+    left: 0px;
+    border-top-left-radius: 15px;
+    border-top-right-radius: 15px;
+    overflow: hidden;
+
+    .portal-main-inner {
+        position: relative;
+        width: 100%;
+        min-height: calc(100vh - 71px);
+        gap: 0px;
+    }
+
+    .portal-page {
+        width: 100%;
+        padding: 45px 45px 70px 45px;
+        box-sizing: border-box;
+        position: relative;
+
+        .portal-page-header {
+            margin-bottom: 30px;
+
+            .logo {
+                max-width: 200px;
+            }
+        }
+
+        .portal-page-footer {
+            display: flex;
+            flex-direction: row-reverse;
+            width: 100%;
+            position: absolute;
+            box-sizing: border-box;
+            bottom: 30px;
+            left: 0px;
+            padding: 0px 45px;
+
+            p, span {
+                margin: 0px;
+                color: @mid-grey;
+            }
+        }
+    }
+}

package/bootstrap/services/portal/src/main.jsx

@@ -0,0 +1,51 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './css/style.css'
+import App from './App.jsx'
+import { createBrowserRouter, RouterProvider } from 'react-router-dom'
+import LoginPage from './pages/LoginPage/LoginPage.jsx'
+import PortalLayout from './layouts/PortalLayout/PortalLayout.jsx'
+import DashboardPage from './pages/DashboardPage/DashboardPage.jsx'
+import UsersPage from './pages/UsersPage/UsersPage.jsx'
+import UserSinglePage from './pages/UserSinglePage/UserSinglePage.jsx'
+import PagesPage from './pages/PagesPage/PagesPage.jsx'
+import PageSinglePage from './pages/PageSinglePage/PageSinglePage.jsx'
+import BlocksPage from './pages/BlocksPage/BlocksPage.jsx'
+import BlockSinglePage from './pages/BlockSinglePage/BlockSinglePage.jsx'
+
+const router = createBrowserRouter([
+    {
+        path: "portal",
+        element: <App />,
+        children: [
+            {
+                path: "login",
+                element: <LoginPage />,
+            },
+            {
+                path: "",
+                element: <PortalLayout />,
+                children: [
+                    { index: true, element: <DashboardPage /> },
+                    { path: "dashboard", element: <DashboardPage /> },
+
+                    // Users
+                    { path: "users", element: <UsersPage /> },
+                    { path: "users/:id", element: <UserSinglePage /> },
+
+                    // CMS / Pages
+                    { path: "pages", element: <PagesPage /> },
+                    { path: "pages/:id", element: <PageSinglePage /> },
+                    { path: "blocks", element: <BlocksPage /> },
+                    { path: "blocks/:id", element: <BlockSinglePage /> }
+                ],
+            }
+        ]
+    }
+]);
+
+createRoot(document.getElementById('root')).render(
+    <StrictMode>
+        <RouterProvider router={router} />
+    </StrictMode>
+)

package/bootstrap/services/portal/src/pages/BlockSinglePage/BlockSinglePage.jsx

@@ -0,0 +1,277 @@
+import React, { useState, useEffect } from 'react';
+import Card from '../../layouts/Card/Card';
+import Repeater from '../../elements/Repeater/Repeater';
+import SaveButton from '../../elements/SaveButton/SaveButton';
+import TextInput from '../../elements/TextInput/TextInput';
+import CustomSelect from '../../elements/CustomSelect/CustomSelect';
+import { blocks } from '../../services/block.js';
+import { fieldTypes } from '../../data/pages.data.js';
+import { useParams } from "react-router-dom";
+
+function BlockSinglePage() {
+
+    const { id } = useParams();
+    const [blockId, setBlockId] = useState('');
+    const [blockFields, setBlockFields] = useState([]);
+    const [blockDetails, setBlockDetails] = useState({});
+    const [allBlocks, setAllBlocks] = useState([]);
+    const [errors, setErrors] = useState([]);
+    const [loading, setLoading] = useState(false);
+
+    useEffect(() => {
+        // fetch all blocks for repeater field type options
+        (async () => {
+            try {
+                const blocksData = await blocks.getMany();
+                const blockOptions = (blocksData.blocks || []).map(block => ({
+                    name: block.name,
+                    value: block.key
+                }));
+                setAllBlocks(blockOptions || []);
+            } catch (error) {
+                console.error('Error fetching blocks data:', error);
+                setErrors([error]);
+            }
+        })();
+    }, []);
+
+    // fetch data if editing existing
+    useEffect(() => {
+        if (id && id !== 'new') {
+            (async () => {
+                setLoading(true);
+                try {
+                    let blockData = await blocks.getSingle(id);
+                    blockData = blockData.block;
+                    setBlockId(blockData.id);
+                    setBlockDetails({
+                        blockName: blockData.name,
+                        blockKey: blockData.key
+                    });
+                    setBlockFields(blockData.fields || []);
+                } catch (error) {
+                    console.error('Error fetching block data:', error);
+                    setErrors([error]);
+                }
+                setLoading(false);
+            })();
+        }
+    }, [id]);
+
+    const validateField = (e) => {
+        const value = e.target.value;
+        setErrors([]);
+
+    }
+
+    const save = async () => {
+        setLoading(true);
+        console.log('Saving...', { blockId, blockFields, blockDetails });
+
+        // create new
+        if (!blockId) {
+            try {
+                await blocks.create({
+                    name: blockDetails.blockName,
+                    key: blockDetails.blockKey,
+                    fields: blockFields
+                })
+                setErrors([]);
+            } catch (error) {
+                console.error('Error creating block:', error);
+                setErrors([error]);
+            }
+        }
+
+        // update existing
+        else {
+            confirm('Are you sure you would like to update this block? This could result in page content being removed when they are next updated.')
+
+            try {
+                await blocks.update(blockId, {
+                    name: blockDetails.blockName,
+                    key: blockDetails.blockKey,
+                    fields: blockFields
+                });
+                setErrors([]);
+            } catch (error) {
+                console.error('Error creating block:', error);
+                setErrors([error]);
+            }
+        }
+
+        setLoading(false);
+    }
+
+    return (
+        <div className="single-crud-page">
+            <h1>Create / Update Block</h1>
+
+            <div className="flex-row top-bar">
+                <p className="single-crud-id">{blockId || 'Creating new block...'}</p>
+                <div className="button-group">
+                    <button onClick={() => window.history.back()} className="secondary-btn">Back</button>
+                    <button onClick={save}>Save</button>
+                </div>
+            </div>
+
+            <div className="card-columns">
+                <div className="col-66">
+                    <Card
+                        title="Block Fields"
+                    >
+                        <p className="instruction">Add fields to your block, save it and then use the block in your pages</p>
+
+                        <Repeater
+                            items={blockFields}
+                            setItems={setBlockFields}
+                            defaultItem= {{}}
+                            buttonText= "Add Field"
+                            renderRow= {(item, index, updateItem) => (
+
+                                <div className="flex-row">
+                                    <TextInput 
+                                        label="Field Name"
+                                        placeholder="Enter field name"
+                                        value={blockFields[index].name || ''}
+                                        onChange={(e) => {
+                                            validateField(e)
+                                            const blockField = { ...blockFields[index], name: e.target.value };
+                                            setBlockFields([
+                                                ...blockFields.slice(0, index),
+                                                blockField,
+                                                ...blockFields.slice(index + 1)
+                                            ]);
+                                        }}
+                                        errorMessage="Invalid field name"
+                                        isValid={true}
+                                    />
+
+                                    <TextInput 
+                                        label="Field Key"
+                                        placeholder="Enter field key"
+                                        value={blockFields[index].key || ''}
+                                        onChange={(e) => {
+                                            validateField(e)
+                                            const blockField = { ...blockFields[index], key: e.target.value };
+                                            setBlockFields([
+                                                ...blockFields.slice(0, index),
+                                                blockField,
+                                                ...blockFields.slice(index + 1)
+                                            ]);
+                                        }}
+                                        errorMessage="Invalid field key"
+                                        isValid={true}
+                                    />
+
+                                    <CustomSelect
+                                        label="Field Type"
+                                        placeholder="Select Field Type"
+                                        name={`field-type-select-${index}`}
+                                        options={fieldTypes}
+                                        labelKey="name"
+                                        setSelectedOption={(option) => {
+                                            const blockField = { ...blockFields[index], type: option.value };
+                                            setBlockFields([
+                                                ...blockFields.slice(0, index),
+                                                blockField,
+                                                ...blockFields.slice(index + 1)
+                                            ]);
+                                        }}
+                                        selectedOption={fieldTypes.find(ft => ft.value === (blockFields[index].type || ''))}
+                                    />
+
+                                    {allBlocks && blockFields[index].type === 'repeater' &&
+                                        <CustomSelect
+                                            label="Repeater Type"
+                                            placeholder="Select Repeater Type"
+                                            name={`repeater-type-select-${index}`}
+                                            options={allBlocks}
+                                            labelKey="name"
+                                            setSelectedOption={(option) => {
+                                                const blockField = { ...blockFields[index], repeaterType: option.value };
+                                                console.log('blockField', blockField);
+
+                                                setBlockFields([
+                                                    ...blockFields.slice(0, index),
+                                                    blockField,
+                                                    ...blockFields.slice(index + 1)
+                                                ]);
+                                            }}
+                                            selectedOption={allBlocks.find(ft => ft.value === (blockFields[index].repeaterType || ''))}
+                                        />
+
+                                    }
+                                </div>
+                            )}
+                        />
+                    </Card>
+                </div>
+
+                <div className="col-33">
+                    <Card
+                        title="Block details"
+                    >
+                        <div className="flex-col">
+                            <TextInput 
+                                label="Block Name"
+                                placeholder="Enter block Name"
+                                value={blockDetails.blockName || ''}
+                                onChange={(e) => {
+                                    validateField(e)
+                                    setBlockDetails({
+                                        ...blockDetails,
+                                        blockName: e.target.value
+                                    })
+                                }}
+                                errorMessage="Invalid block name"
+                                isValid={true}
+                            />
+
+                            <TextInput 
+                                label="Block Key"
+                                placeholder="Enter block key"
+                                value={blockDetails.blockKey || ''}
+                                onChange={(e) => {
+                                    validateField(e)
+                                    setBlockDetails({
+                                        ...blockDetails,
+                                        blockKey: e.target.value
+                                    })
+                                }}
+                                errorMessage="Invalid block key"
+                                isValid={true}
+                            />
+                        </div>
+                    </Card>
+                </div>
+            </div>
+
+            <div className="flex-row bottom-bar">
+                <div className="button-group">
+                    <SaveButton
+                        onClick={save}
+                        itemName="Block"
+                        loading={loading}
+                        error={errors.length > 0}
+                        isNew={!blockId}
+                    />
+                </div>
+            </div>
+
+            <div>
+                {errors.length > 0 && (
+                    <div className="error-messages">
+                        <ul>
+                            {errors.map((error, index) => (
+                                <li key={index}>{error.message}</li>
+                            ))}
+                        </ul>
+                    </div>
+                )}
+            </div>
+        </div>
+    )
+}
+
+export default BlockSinglePage;

package/bootstrap/services/portal/src/pages/BlocksPage/BlocksPage.jsx

@@ -0,0 +1,23 @@
+import CrudList from '../../components/CrudList/CrudList';
+import { blocks } from '../../services/block.js';
+
+function BlocksPage() {
+
+    return (
+        <div>
+            <h1>Manage Blocks</h1>
+            <CrudList 
+                entityKey="blocks"
+                fetchData={blocks.getMany}
+                entitySingleName="Block"
+                entityPluralName="Blocks"
+                columns={[
+                    { key: 'id', label: 'ID' },
+                    { key: 'name', label: 'Block name' }
+                ]}
+            />
+        </div>
+    )
+}
+
+export default BlocksPage;

package/bootstrap/services/portal/src/pages/DashboardPage/DashboardPage.jsx

@@ -0,0 +1,11 @@
+
+function DashboardPage() {
+    return (
+        <div>
+            <h1>Dashboard</h1>
+            <p>Welcome to your Gnar Engine admin portal!</p>
+        </div>
+    );
+}
+
+export default DashboardPage;

package/bootstrap/services/portal/src/pages/LoginPage/LoginPage.jsx

@@ -0,0 +1,21 @@
+import LoginForm from "../../components/LoginForm/LoginForm";
+import gnarEngineLogo from '../../assets/gnar-engine-white-logo.svg';
+
+function LoginPage() {
+
+    return (
+        <div className="login-page flex-row">
+            <div className="login-left-panel">
+                <img src={gnarEngineLogo} className="logo" alt="Gnar Engine" />
+            </div>
+            <div className="login-right-panel">
+                <div>
+                    <h1>Admin Login</h1>
+                    <LoginForm />
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default LoginPage;

package/bootstrap/services/portal/src/pages/LoginPage/LoginPage.less

@@ -0,0 +1,51 @@
+.login-page {
+    width: 100%;
+    max-width: 100%;
+    height: 100vh;
+    gap: 0px;
+    
+    .login-left-panel {
+        min-width: 50%;
+        background: url('../assets/login-green-rad-back-1.jpg');
+        background-size: cover;
+        background-position: center center;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+    
+    .login-right-panel {
+        min-width: 50%;
+        background: @dark-1;
+        padding: 135px;
+        box-sizing: border-box;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .username,
+    .password {
+        padding-left: 50px;
+        position: relative;
+        background-repeat: no-repeat;
+        background-position: 12px center;
+        background-size: 18px 18px;
+    }
+
+    .username {
+        background-image: url('../assets/icon-user.svg');
+    }
+
+    .password {
+        background-image: url('../assets/icon-padlock.svg');
+    }
+
+    .login-form {
+        max-width: 450px;
+    }
+
+    .forgotten-password {
+        width: 100%; 
+    }
+}