diff --git a/codux.config.json b/codux.config.json index efc2cd5..a43632f 100644 --- a/codux.config.json +++ b/codux.config.json @@ -7,9 +7,25 @@ }, "newComponent": { "componentsPath": "packages/client/src/components", - "templatesPath": "packages/client/src/_codux/component-templates" + "templatesPath": "packages/client/src/_codux/component-templates", + "templatesConfig": { + "page": { + "path": "packages/client/src/pages" + } + } + }, + "newBoard": { + "templatesPath": "packages/client/src/_codux/board-templates", + "templatesConfig": { + "2-page-fake-data": { + "path": "packages/client/src/_codux/boards/pages" + }, + "1-component-with-data": { + "path": "packages/client/src/_codux/boards/components" + } + } }, - "boardsPath": "packages/client/src/_codux/boards/components", + "boardsPath": "packages/client/src/_codux/boards", "safeRender": { "maxInstancesPerComponent": 1000 }, 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-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-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/board-templates/3-page-real-data.board.tsx b/packages/client/src/_codux/board-templates/3-page-real-data.board.tsx new file mode 100644 index 0000000..6138da1 --- /dev/null +++ b/packages/client/src/_codux/board-templates/3-page-real-data.board.tsx @@ -0,0 +1,16 @@ +import { ContentSlot, createBoard } from '@wixc3/react-board'; +import { RealDataWrapper } from '/src/_codux/board-wrappers/real-data-wrapper'; + +export default createBoard({ + name: 'New Board', + Board: () => ( + //in practice PageWrapperRealData 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/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 822173a..230fe1d 100644 --- a/packages/client/src/_codux/board-wrappers/page-wrapper.tsx +++ b/packages/client/src/_codux/board-wrappers/page-wrapper.tsx @@ -1,21 +1,23 @@ 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'; -/** - * - * @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 for the fake data */ + settings?: FakeDataSettings; +}; + +export function PageWrapper(props: PageWrapperProps) { + const routes = getRoutes(); if (props.children) { - replaceRouteWithChildren(props.path, props.children); + //we set the passed component to the current route so it will be easier to reach in the board + replaceRouteWithChildren(routes, props.path || '/', props.children); } const router = createMemoryRouter(routes, { @@ -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..c0737d3 100644 --- a/packages/client/src/_codux/board-wrappers/real-data-wrapper.tsx +++ b/packages/client/src/_codux/board-wrappers/real-data-wrapper.tsx @@ -1,14 +1,19 @@ import { RouterProvider, createMemoryRouter } from 'react-router'; -import { routes } from '../../router/routes'; +import { getRoutes } from '../../router/routes'; import { APIContextProvider } from '../../api'; +import { ReactNode } from 'react'; +import { replaceRouteWithChildren } from './set-children-to-route'; -/** - * - * @param {{}} props - * @param {string} [props.path = /] - the path to render - * @returns - */ -export function RealDataWrapper(props: { path: string }) { +export type RealDataWrapperProps = { + /** @important the path to render */ + path?: string; + children?: ReactNode; +}; +export function RealDataWrapper(props: RealDataWrapperProps) { + const routes = getRoutes(); + if (props.children && props.path) { + replaceRouteWithChildren(routes, props.path, props.children); + } const router = createMemoryRouter(routes, { 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/_codux/boards/app.board.tsx b/packages/client/src/_codux/boards/app.board.tsx new file mode 100644 index 0000000..c3bce5f --- /dev/null +++ b/packages/client/src/_codux/boards/app.board.tsx @@ -0,0 +1,16 @@ +import { ContentSlot, createBoard } from '@wixc3/react-board'; +import { RealDataWrapper } from '/src/_codux/board-wrappers/real-data-wrapper'; + +export default createBoard({ + name: 'App', + Board: () => ( + //in practice PageWrapperRealData 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/app/app.board.tsx b/packages/client/src/_codux/boards/app/app.board.tsx deleted file mode 100644 index d5c680a..0000000 --- a/packages/client/src/_codux/boards/app/app.board.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { createBoard } from '@wixc3/react-board'; -import { RealDataWrapper } from '../../board-wrappers/real-data-wrapper'; -import { ROUTES } from '../../../router/config'; - -export default createBoard({ - name: 'App With CMS Data', - Board: () => , - environmentProps: { - windowWidth: 1024, - windowHeight: 768, - }, -}); 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: () => ( - -