Theme config

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"
+      }
+    }
+  },
+  "boardsPath": "packages/client/src/_codux/boards",
+  "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",
   "safeRender": {
     "maxInstancesPerComponent": 1000
   },
@@ -24,6 +40,9 @@
   "styling": {
     "solution": "scss modules"
   },
+  "styleFilesConfig": {
+    "commonStyleFilePattern": "**/src/styles/*.scss"
+  },
   "svgLoader": "both",
   "previewConfiguration": {
     "environmentVariables": {

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), []);

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: () => (
+    <ComponentWrapper settings={{}}>
+      <ContentSlot />
+    </ComponentWrapper>
+  ),
+  isSnippet: true,
+  environmentProps: {
+    canvasMargin: { right: 0, bottom: 0, left: 0 },
+  },
+});

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
+    <PageWrapper>
+      <ContentSlot />
+    </PageWrapper>
+  ),
+  isSnippet: false,
+  environmentProps: {
+    canvasMargin: { right: 0, bottom: 0, left: 0 },
+  },
+});

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
+    <RealDataWrapper>
+      <ContentSlot />
+    </RealDataWrapper>
+  ),
+  isSnippet: false,
+  environmentProps: {
+    canvasMargin: { right: 0, bottom: 0, left: 0 },
+  },
+});

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 (
     <FakeAPIContextProvider settings={props.settings}>
       <RouterProvider router={router} />

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
     </FakeAPIContextProvider>
   );
 }
-
-/**
- * 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;
-  }
-}

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 (
     <APIContextProvider>

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;
+    }
+}

packages/client/src/_codux/boards-global-setup.ts

@@ -1,2 +1 @@
 import '../styles/index.css';
-import '../styles/util-classes.scss';

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
+    <RealDataWrapper>
+      <ContentSlot />
+    </RealDataWrapper>
+  ),
+  isSnippet: false,
+  environmentProps: {
+    canvasMargin: { right: 0, bottom: 0, left: 0 },
+  },
+});

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: () => (
-        <ComponentWrapper>
-            <Footer />
-        </ComponentWrapper>
-    ),
-    isSnippet: false,
-    environmentProps: {
-        windowWidth: 1024,
-        windowHeight: 768,
-        canvasWidth: 1024,
-    },
+  name: 'Footer',
+  Board: () => (
+    <ComponentWrapper settings={{}}>
+      <ContentSlot>
+        <Footer />
+      </ContentSlot>
+    </ComponentWrapper>
+  ),
+  isSnippet: true,
+  environmentProps: {
+    canvasMargin: { right: 0, bottom: 0, left: 0 },
+  },
 });

packages/client/src/_codux/boards/components/header/header.board.tsx

@@ -1,19 +1,18 @@
-import { createBoard } from '@wixc3/react-board';
 import { Header } from '../../../../components/header/header';
-import { ComponentWrapper } from '../../../board-wrappers/component-wrapper';
-import { ROUTES } from '../../../../router/config';
+import { ContentSlot, createBoard } from '@wixc3/react-board';
+import { ComponentWrapper } from '/src/_codux/board-wrappers/component-wrapper';
 
 export default createBoard({
-    name: 'Header',
-    Board: () => (
-        <ComponentWrapper path={ROUTES.projects.to()} settings={{ numberOfItems: 0 }}>
-            <Header />
-        </ComponentWrapper>
-    ),
-    isSnippet: false,
-    environmentProps: {
-        windowWidth: 1024,
-        windowHeight: 768,
-        canvasWidth: 1024
-    },
+  name: 'Header',
+  Board: () => (
+    <ComponentWrapper settings={{}}>
+      <ContentSlot>
+        <Header />
+      </ContentSlot>
+    </ComponentWrapper>
+  ),
+  isSnippet: true,
+  environmentProps: {
+    canvasMargin: { right: 0, bottom: 0, left: 0, top: 0 },
+  },
 });

packages/client/src/_codux/boards/components/project-item/project-item.board.tsx

@@ -7,12 +7,17 @@ export default createBoard({
   Board: () => (
     <ProjectItem
       title="Project Item"
-      image={createImage({ width: 300 })}
-      description="this is a very long description... aldskfj alskd jflsak jflksd jflaks jflksad jflksad jflsak jfl"
+      image={createImage({ width: 300, height: 400 })}
+      description="this is a very long description... this is a very long description... this is a very long description..."
     />
   ),
   isSnippet: true,
   environmentProps: {
-    canvasWidth: 572,
+    canvasMargin: {
+      top: 0,
+      right: 0,
+      bottom: 0,
+      left: 0,
+    },
   },
 });