From 608a9170f4209018de980af5342b462f24d0ad08 Mon Sep 17 00:00:00 2001 From: alissawix Date: Mon, 17 Jun 2024 06:45:38 +0300 Subject: [PATCH 1/8] extract set children to route --- packages/client/src/App.tsx | 4 ++- .../_codux/board-wrappers/page-wrapper.tsx | 25 +++++-------------- .../board-wrappers/real-data-wrapper.tsx | 4 +-- .../board-wrappers/set-children-to-route.ts | 18 +++++++++++++ packages/client/src/router/routes.tsx | 2 +- 5 files changed, 30 insertions(+), 23 deletions(-) create mode 100644 packages/client/src/_codux/board-wrappers/set-children-to-route.ts diff --git a/packages/client/src/App.tsx b/packages/client/src/App.tsx index fdd5356..57036f9 100644 --- a/packages/client/src/App.tsx +++ b/packages/client/src/App.tsx @@ -1,7 +1,9 @@ import { useMemo } from 'react'; import { APIContextProvider } from './api'; import { RouterProvider, createBrowserRouter } from 'react-router-dom'; -import { routes } from './router/routes'; +import { getRoutes } from './router/routes'; + +const routes = getRoutes(); function App() { const router = useMemo(() => createBrowserRouter(routes), []); diff --git a/packages/client/src/_codux/board-wrappers/page-wrapper.tsx b/packages/client/src/_codux/board-wrappers/page-wrapper.tsx index 822173a..cffd5ec 100644 --- a/packages/client/src/_codux/board-wrappers/page-wrapper.tsx +++ b/packages/client/src/_codux/board-wrappers/page-wrapper.tsx @@ -1,8 +1,9 @@ import { FakeAPIContextProvider } from '../../api/fake/fake-provider'; -import { RouterProvider, createMemoryRouter, matchRoutes } from 'react-router'; -import { routes } from '../../router/routes'; +import { RouterProvider, createMemoryRouter } from 'react-router'; +import { getRoutes } from '../../router/routes'; import { ReactNode } from 'react'; import { FakeDataSettings } from '../../api/fake/fake-data'; +import { replaceRouteWithChildren } from './set-children-to-route'; /** * @@ -14,11 +15,12 @@ import { FakeDataSettings } from '../../api/fake/fake-data'; * @returns {ReactNode} */ export function PageWrapper(props: { path: string; children?: ReactNode; settings?: FakeDataSettings }) { + const routes = getRoutes(); if (props.children) { - replaceRouteWithChildren(props.path, props.children); + replaceRouteWithChildren(routes, props.path, props.children); } - const router = createMemoryRouter(routes, { + const router = createMemoryRouter(getRoutes(), { initialEntries: [props.path || '/'], }); return ( @@ -27,18 +29,3 @@ export function PageWrapper(props: { path: string; children?: ReactNode; setting ); } - -/** - * sets the children component to the path in the routes. - * @param path the path of the page - * @param children the component we want to render in that path - */ -function replaceRouteWithChildren(path: string, children: ReactNode) { - const matchingRoutes = matchRoutes(routes, path); - if (!matchingRoutes) { - routes.push({ path: path, element: children }); - } else { - const bestMatchingRoute = matchingRoutes[matchingRoutes.length - 1]; - bestMatchingRoute.route.element = children; - } -} diff --git a/packages/client/src/_codux/board-wrappers/real-data-wrapper.tsx b/packages/client/src/_codux/board-wrappers/real-data-wrapper.tsx index 37b64ee..8f7580f 100644 --- a/packages/client/src/_codux/board-wrappers/real-data-wrapper.tsx +++ b/packages/client/src/_codux/board-wrappers/real-data-wrapper.tsx @@ -1,5 +1,5 @@ import { RouterProvider, createMemoryRouter } from 'react-router'; -import { routes } from '../../router/routes'; +import { getRoutes } from '../../router/routes'; import { APIContextProvider } from '../../api'; /** @@ -9,7 +9,7 @@ import { APIContextProvider } from '../../api'; * @returns */ export function RealDataWrapper(props: { path: string }) { - const router = createMemoryRouter(routes, { initialEntries: [props.path || '/'] }); + const router = createMemoryRouter(getRoutes(), { initialEntries: [props.path || '/'] }); return ( diff --git a/packages/client/src/_codux/board-wrappers/set-children-to-route.ts b/packages/client/src/_codux/board-wrappers/set-children-to-route.ts new file mode 100644 index 0000000..339afd3 --- /dev/null +++ b/packages/client/src/_codux/board-wrappers/set-children-to-route.ts @@ -0,0 +1,18 @@ +import { ReactNode } from 'react'; +import { RouteObject, matchRoutes } from 'react-router-dom'; + +/** + * sets the children component to the path in the routes. + * we do this so the board will be tagged with the page component. + * @param path the path of the page + * @param children the component we want to render in that path + */ +export function replaceRouteWithChildren(routes: RouteObject[], path: string, children: ReactNode) { + const matchingRoutes = matchRoutes(routes, path); + if (!matchingRoutes) { + routes.push({ path: path, element: children }); + } else { + const bestMatchingRoute = matchingRoutes[matchingRoutes.length - 1]; + bestMatchingRoute.route.element = children; + } +} diff --git a/packages/client/src/router/routes.tsx b/packages/client/src/router/routes.tsx index af97c40..9d9e020 100644 --- a/packages/client/src/router/routes.tsx +++ b/packages/client/src/router/routes.tsx @@ -5,7 +5,7 @@ import { AboutPage } from '../pages/about-page/about-page'; import { ROUTES } from './config'; import { ProjectPage } from '../pages/project-page/project-page'; -export const routes: RouteObject[] = [ +export const getRoutes: () => RouteObject[] = () => [ { path: '/', element: , From d2ae90ba89912c29cfc7d0cf14481f9d4c134af9 Mon Sep 17 00:00:00 2001 From: alissawix Date: Mon, 17 Jun 2024 07:07:02 +0300 Subject: [PATCH 2/8] enable absolute paths --- packages/client/tsconfig.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/client/tsconfig.json b/packages/client/tsconfig.json index 3d0a51a..5df5aa5 100644 --- a/packages/client/tsconfig.json +++ b/packages/client/tsconfig.json @@ -14,7 +14,8 @@ "resolveJsonModule": true, "isolatedModules": true, "noEmit": true, - "jsx": "react-jsx" + "jsx": "react-jsx", + "paths": { "/*": ["./*"] } }, "include": ["src"], "references": [{ "path": "./tsconfig.node.json" }] From 5ce1216e72db1f25d8252fcaa520defc12d19ea0 Mon Sep 17 00:00:00 2001 From: alissawix Date: Mon, 17 Jun 2024 07:07:30 +0300 Subject: [PATCH 3/8] add @important to PageWrapper props --- .../_codux/board-wrappers/page-wrapper.tsx | 23 +++++++++---------- packages/client/src/api/fake/fake-data.ts | 4 ++++ 2 files changed, 15 insertions(+), 12 deletions(-) diff --git a/packages/client/src/_codux/board-wrappers/page-wrapper.tsx b/packages/client/src/_codux/board-wrappers/page-wrapper.tsx index cffd5ec..d35d9e8 100644 --- a/packages/client/src/_codux/board-wrappers/page-wrapper.tsx +++ b/packages/client/src/_codux/board-wrappers/page-wrapper.tsx @@ -5,22 +5,21 @@ import { ReactNode } from 'react'; import { FakeDataSettings } from '../../api/fake/fake-data'; import { replaceRouteWithChildren } from './set-children-to-route'; -/** - * - * @param {{}} props - * @param {string} props.path - the path (route) of the page - * @param {ReactNode} [props.children] -the component to render. we pass this only because codux tags boards by the components - * preset in the board (for now). in practice this is redundant. - * @param {FakeDataSettings} [props.setting] - settings for the fake data - * @returns {ReactNode} - */ -export function PageWrapper(props: { path: string; children?: ReactNode; settings?: FakeDataSettings }) { +export type PageWrapperProps = { + /** @important the path (route) of the page*/ + path?: string; + children?: ReactNode; + /** @important */ + settings?: FakeDataSettings; +}; + +export function PageWrapper(props: PageWrapperProps) { const routes = getRoutes(); if (props.children) { - replaceRouteWithChildren(routes, props.path, props.children); + replaceRouteWithChildren(routes, props.path || '/', props.children); } - const router = createMemoryRouter(getRoutes(), { + const router = createMemoryRouter(routes, { initialEntries: [props.path || '/'], }); return ( diff --git a/packages/client/src/api/fake/fake-data.ts b/packages/client/src/api/fake/fake-data.ts index eaacbb4..093c42d 100644 --- a/packages/client/src/api/fake/fake-data.ts +++ b/packages/client/src/api/fake/fake-data.ts @@ -10,9 +10,13 @@ import { } from '../types'; export type FakeDataSettings = { + /** @important */ numberOfItems?: number; + /** @important */ footerData?: { + /** @important */ email?: string; + /** @important */ phone?: string; }; }; From b11d4be69f51a1c516159f84647a6f5a0189aba1 Mon Sep 17 00:00:00 2001 From: alissawix Date: Mon, 17 Jun 2024 07:11:50 +0300 Subject: [PATCH 4/8] re-add page boards --- codux.config.json | 8 ++++ .../2-page-fake-data.board.tsx | 16 ++++++++ .../pages/about-page/about-page.board.tsx | 27 +++++++------ .../pages/home-page/home-page.board.tsx | 38 +++++++++---------- .../pages/project-page/project-page.board.tsx | 29 +++++++------- 5 files changed, 73 insertions(+), 45 deletions(-) create mode 100644 packages/client/src/_codux/board-templates/2-page-fake-data.board.tsx diff --git a/codux.config.json b/codux.config.json index efc2cd5..25ee565 100644 --- a/codux.config.json +++ b/codux.config.json @@ -9,6 +9,14 @@ "componentsPath": "packages/client/src/components", "templatesPath": "packages/client/src/_codux/component-templates" }, + "newBoard": { + "templatesPath": "packages/client/src/_codux/board-templates", + "templatesConfig": { + "2-page-fake-data": { + "path": "packages/client/src/_codux/boards/pages" + } + } + }, "boardsPath": "packages/client/src/_codux/boards/components", "safeRender": { "maxInstancesPerComponent": 1000 diff --git a/packages/client/src/_codux/board-templates/2-page-fake-data.board.tsx b/packages/client/src/_codux/board-templates/2-page-fake-data.board.tsx new file mode 100644 index 0000000..e22045f --- /dev/null +++ b/packages/client/src/_codux/board-templates/2-page-fake-data.board.tsx @@ -0,0 +1,16 @@ +import { ContentSlot, createBoard } from '@wixc3/react-board'; +import { PageWrapper } from '/src/_codux/board-wrappers/page-wrapper'; + +export default createBoard({ + name: 'New Board', + Board: () => ( + //in practice PageWrapper with a path will render the correct page, but it is less convenient to use in a board + + + + ), + isSnippet: false, + environmentProps: { + canvasMargin: { right: 0, bottom: 0, left: 0 }, + }, +}); diff --git a/packages/client/src/_codux/boards/pages/about-page/about-page.board.tsx b/packages/client/src/_codux/boards/pages/about-page/about-page.board.tsx index 1b97da5..0efd54a 100644 --- a/packages/client/src/_codux/boards/pages/about-page/about-page.board.tsx +++ b/packages/client/src/_codux/boards/pages/about-page/about-page.board.tsx @@ -1,16 +1,19 @@ -import { createBoard } from '@wixc3/react-board'; -import { ROUTES } from '../../../../router/config'; import { AboutPage } from '../../../../pages/about-page/about-page'; -import { PageWrapper } from '../../../board-wrappers/page-wrapper'; +import { ContentSlot, createBoard } from '@wixc3/react-board'; +import { PageWrapper } from '/src/_codux/board-wrappers/page-wrapper'; export default createBoard({ - name: 'Page-About', - Board: () => ( - - - - ), - environmentProps: { - windowWidth: 1024, windowHeight: 768, - }, + name: 'Page About', + Board: () => ( + //in practice PageWrapper with a path will render the correct page, but it is less convenient to use in a board + + + + + + ), + isSnippet: false, + environmentProps: { + canvasMargin: { right: 0, bottom: 0, left: 0 }, + }, }); diff --git a/packages/client/src/_codux/boards/pages/home-page/home-page.board.tsx b/packages/client/src/_codux/boards/pages/home-page/home-page.board.tsx index 5e2addc..af5f7bf 100644 --- a/packages/client/src/_codux/boards/pages/home-page/home-page.board.tsx +++ b/packages/client/src/_codux/boards/pages/home-page/home-page.board.tsx @@ -1,23 +1,23 @@ -import { createBoard } from '@wixc3/react-board'; -import { PageWrapper } from '../../../board-wrappers/page-wrapper'; import { HomePage } from '../../../../pages/home-page/home-page'; -import { ROUTES } from '../../../../router/config'; +import { ContentSlot, createBoard } from '@wixc3/react-board'; +import { PageWrapper } from '/src/_codux/board-wrappers/page-wrapper'; export default createBoard({ - name: 'Page-Home', - Board: () => ( - - - - ), - isSnippet: false, - environmentProps: { - windowWidth: 1024, - windowHeight: 768 - }, + name: 'Page Home', + Board: () => ( + //in practice PageWrapper with a path will render the correct page, but it is less convenient to use in a board + + + + + + ), + isSnippet: false, + environmentProps: { + canvasMargin: { right: 0, bottom: 0, left: 0 }, + }, }); diff --git a/packages/client/src/_codux/boards/pages/project-page/project-page.board.tsx b/packages/client/src/_codux/boards/pages/project-page/project-page.board.tsx index b887da0..2a96e87 100644 --- a/packages/client/src/_codux/boards/pages/project-page/project-page.board.tsx +++ b/packages/client/src/_codux/boards/pages/project-page/project-page.board.tsx @@ -1,18 +1,19 @@ -import { createBoard } from '@wixc3/react-board'; import { ProjectPage } from '../../../../pages/project-page/project-page'; -import { ROUTES } from '../../../../router/config'; -import { PageWrapper } from '../../../board-wrappers/page-wrapper'; +import { ContentSlot, createBoard } from '@wixc3/react-board'; +import { PageWrapper } from '/src/_codux/board-wrappers/page-wrapper'; export default createBoard({ - name: 'Page-Project', - Board: () => ( - - - - ), - isSnippet: false, - environmentProps: { - windowWidth: 1024, - windowHeight: 768 - }, + name: 'Page Project', + Board: () => ( + //in practice PageWrapper with a path will render the correct page, but it is less convenient to use in a board + + + + + + ), + isSnippet: false, + environmentProps: { + canvasMargin: { right: 0, bottom: 0, left: 0 }, + }, }); From 904391dcd51f7467b728226ac8b60c7240b72240 Mon Sep 17 00:00:00 2001 From: alissawix Date: Tue, 18 Jun 2024 09:47:56 +0300 Subject: [PATCH 5/8] component board template --- codux.config.json | 3 ++ .../1-component-with-data.board.tsx | 15 ++++++++++ .../board-wrappers/component-wrapper.tsx | 27 +++++++---------- .../_codux/board-wrappers/page-wrapper.tsx | 4 +-- .../boards/components/footer/footer.board.tsx | 28 +++++++++--------- .../boards/components/header/header.board.tsx | 29 +++++++++---------- .../components/menu/menu-closed.board.tsx | 13 --------- .../components/menu/menu-open.board.tsx | 17 ----------- .../project-item/project-item.board.tsx | 10 +++++-- .../projects-gallery-few-items.board.tsx | 13 +++++---- .../projects-gallery-many-items.board.tsx | 13 +++++---- .../projects-gallery.board.tsx | 27 ++++++++--------- .../site-menu/menu-closed.board.tsx | 18 ++++++++++++ .../site-menu/menu-opened.board.tsx | 18 ++++++++++++ 14 files changed, 130 insertions(+), 105 deletions(-) create mode 100644 packages/client/src/_codux/board-templates/1-component-with-data.board.tsx delete mode 100644 packages/client/src/_codux/boards/components/menu/menu-closed.board.tsx delete mode 100644 packages/client/src/_codux/boards/components/menu/menu-open.board.tsx create mode 100644 packages/client/src/_codux/boards/components/site-menu/menu-closed.board.tsx create mode 100644 packages/client/src/_codux/boards/components/site-menu/menu-opened.board.tsx diff --git a/codux.config.json b/codux.config.json index 25ee565..ff25a35 100644 --- a/codux.config.json +++ b/codux.config.json @@ -14,6 +14,9 @@ "templatesConfig": { "2-page-fake-data": { "path": "packages/client/src/_codux/boards/pages" + }, + "1-component-with-data": { + "path": "packages/client/src/_codux/boards/components" } } }, diff --git a/packages/client/src/_codux/board-templates/1-component-with-data.board.tsx b/packages/client/src/_codux/board-templates/1-component-with-data.board.tsx new file mode 100644 index 0000000..1ca5186 --- /dev/null +++ b/packages/client/src/_codux/board-templates/1-component-with-data.board.tsx @@ -0,0 +1,15 @@ +import { ContentSlot, createBoard } from '@wixc3/react-board'; +import { ComponentWrapper } from '/src/_codux/board-wrappers/component-wrapper'; + +export default createBoard({ + name: 'New Board', + Board: () => ( + + + + ), + isSnippet: true, + environmentProps: { + canvasMargin: { right: 0, bottom: 0, left: 0 }, + }, +}); diff --git a/packages/client/src/_codux/board-wrappers/component-wrapper.tsx b/packages/client/src/_codux/board-wrappers/component-wrapper.tsx index 487a334..a44be6d 100644 --- a/packages/client/src/_codux/board-wrappers/component-wrapper.tsx +++ b/packages/client/src/_codux/board-wrappers/component-wrapper.tsx @@ -3,24 +3,19 @@ import { FakeAPIContextProvider } from '../../api/fake/fake-provider'; import { RouterProvider, createMemoryRouter } from 'react-router'; import { FakeDataSettings } from '../../api/fake/fake-data'; -/** - * - * @param {{}} props - * @param {ReactNode} props.children - the component to render - * @param {string} [props.path = /] - the actual path to use ('projects/1') - * @param {string} [props.pattern] - the route pattern to use ('projects/:id') - * @param {FakeDataSettings} [props.settings] - settings for the fake data - * @returns - */ -export function ComponentWrapper(props: { +export type ComponentWrapperProps = { children: ReactNode; + /** @important settings for the fake data */ settings?: FakeDataSettings; - path?: string; - patters?: string; -}) { - const router = createMemoryRouter([{ path: props.patters || props.path || '/', element: props.children }], { - initialEntries: [props.path || '/'], - }); +}; + +export function ComponentWrapper(props: ComponentWrapperProps) { + const router = createMemoryRouter([ + { + path: '*', + element: props.children, + }, + ]); return ( diff --git a/packages/client/src/_codux/board-wrappers/page-wrapper.tsx b/packages/client/src/_codux/board-wrappers/page-wrapper.tsx index d35d9e8..5b41467 100644 --- a/packages/client/src/_codux/board-wrappers/page-wrapper.tsx +++ b/packages/client/src/_codux/board-wrappers/page-wrapper.tsx @@ -6,10 +6,10 @@ import { FakeDataSettings } from '../../api/fake/fake-data'; import { replaceRouteWithChildren } from './set-children-to-route'; export type PageWrapperProps = { - /** @important the path (route) of the page*/ + /** @important the path (route) of the page */ path?: string; children?: ReactNode; - /** @important */ + /** @important settings for the fake data */ settings?: FakeDataSettings; }; diff --git a/packages/client/src/_codux/boards/components/footer/footer.board.tsx b/packages/client/src/_codux/boards/components/footer/footer.board.tsx index 552a73d..1bf8091 100644 --- a/packages/client/src/_codux/boards/components/footer/footer.board.tsx +++ b/packages/client/src/_codux/boards/components/footer/footer.board.tsx @@ -1,18 +1,18 @@ -import { createBoard } from '@wixc3/react-board'; -import { ComponentWrapper } from '../../../board-wrappers/component-wrapper'; import { Footer } from '../../../../components/footer/footer'; +import { ContentSlot, createBoard } from '@wixc3/react-board'; +import { ComponentWrapper } from '/src/_codux/board-wrappers/component-wrapper'; export default createBoard({ - name: 'Footer', - Board: () => ( - -