Alissav/board templates for comp templates

codux.config.json

@@ -7,10 +7,33 @@
   },
   "newComponent": {
     "componentsPath": "src/components",
-    "templatesPath": "src/_codux/component-templates"
+    "templatesPath": "src/_codux/component-templates",
+    "templatesConfig": {
+      "page": {
+        "path": "src/pages",
+        "boardTemplate": "2-page-fake-data"
+      }
+    }
   },
   "newBoard": {
-    "templatesPath": "src/_codux/board-templates"
+    "templatesPath": "src/_codux/board-templates",
+    "templatesConfig": {
+      "5-documentation": {
+        "path": "src/_codux/boards/documentation"
+      },
+      "1-component-with-data": {
+        "path": "src/_codux/boards/components"
+      },
+      "4-component-empty": {
+        "path": "src/_codux/boards/components"
+      },
+      "2-page-fake-data": {
+        "path": "src/_codux/boards/pages"
+      },
+      "3-page-real-data": {
+        "path": "src/_codux/boards/pages"
+      }
+    }
   },
   "safeRender": {
     "maxInstancesPerComponent": 1000

src/_codux/board-wrappers/page-wrapper.tsx

@@ -10,8 +10,9 @@ import { CartOpenContextProvider } from '/src/components/cart/cart-open-context'
 type Props = {
     children: React.ReactNode;
     /** @important */
-    settings?: FakeDataSettings;
     path?: string;
+    /** @important */
+    settings?: FakeDataSettings;
 };
 
 export function PageWrapper(props: Props) {

src/_codux/boards/pages/thank-you-page/page-thank-you.board.tsx

@@ -1,4 +1,4 @@
-import { ThankYouPage } from '../../../../components/thank-you-page/thank-you-page';
+import { ThankYouPage } from '../../../../pages/thank-you-page/thank-you-page';
 import { ContentSlot, createBoard } from '@wixc3/react-board';
 import { PageWrapper } from '/src/_codux/board-wrappers/page-wrapper';
 

src/_codux/component-templates/page/new-component.module.scss

@@ -0,0 +1,4 @@
+@import '@styles/theme.module.scss';
+
+.root {
+}

src/_codux/component-templates/page/new-component.tsx

@@ -0,0 +1,6 @@
+import styles from './new-component.module.scss';
+import commonStyles from '@styles/common-styles.module.scss';
+
+export const NewComponent = () => {
+    return <div className={styles.root}>NewComponent</div>;
+};

src/pages/about-page/about-page.tsx

@@ -1,13 +1,8 @@
-import classNames from 'classnames';
 import styles from './about-page.module.scss';
 
-export interface AboutPageProps {
-    className?: string;
-}
-
-export const AboutPage = ({ className }: AboutPageProps) => {
+export const AboutPage = () => {
     return (
-<div className={classNames(styles.root, className)}>
+        <div className={styles.root}>
             <div className={styles.text}>
                 <h1 className={styles.title}>I&apos;m a Title</h1>
                 <p className={styles.paragraph}>

src/pages/home-page/home-page.tsx

@@ -1,22 +1,17 @@
-import classNames from 'classnames';
 import styles from './home-page.module.scss';
 import { HeroImage } from './hero-image/hero-image';
 import { ROUTES } from '../../router/config';
 import { Link, useNavigate } from 'react-router-dom';
 import { ProductCard } from '../../components/product-card/product-card';
 import { usePromotedProducts } from '../../api/api-hooks';
 
-export interface HomePageProps {
-    className?: string;
-}
-
-export const HomePage = ({ className }: HomePageProps) => {
+export const HomePage = () => {
     const navigate = useNavigate();
 
     const { data: products } = usePromotedProducts();
 
     return (
-        <div className={classNames(styles.root, className)}>
+        <div className={styles.root}>
             <HeroImage
                 title="Incredible Prices on All Your Favorite Items"
                 topLabel="Best Prices"

src/pages/product-details-page/product-details-page.tsx

@@ -10,11 +10,7 @@ import { useContext, useRef } from 'react';
 import { CartOpenContext } from '../../components/cart/cart-open-context';
 import { OptionType } from '@wix/stores/build/cjs/src/stores-catalog-v1-product.universal';
 
-export interface ProductDetailsPageProps {
-    className?: string;
-}
-
-export const ProductDetailsPage: React.FC<ProductDetailsPageProps> = ({ className }) => {
+export const ProductDetailsPage = () => {
     const { setIsOpen } = useContext(CartOpenContext);
     const { slug: productSlug } = useParams<RouteParams['/product/:slug']>();
 
@@ -52,7 +48,7 @@ export const ProductDetailsPage: React.FC<ProductDetailsPageProps> = ({ classNam
     }
 
     return (
-        <div className={classNames(styles.root, className)}>
+        <div className={styles.root}>
             <ProductImages
                 mainImage={product.media?.mainMedia}
                 images={product.media?.items}

src/pages/products-page/products-page.tsx

@@ -1,4 +1,3 @@
-import classNames from 'classnames';
 import styles from './products-page.module.scss';
 import { Link } from 'react-router-dom';
 import { ROUTES } from '../../router/config';
@@ -7,19 +6,15 @@ import { useProducts } from '../../api/api-hooks';
 import { getImageHttpUrl } from '../../api/wix-image';
 import commonStyles from '../../styles/common-styles.module.scss';
 
-export interface ProductsPageProps {
-    className?: string;
-}
-
-export const ProductsPage = ({ className }: ProductsPageProps) => {
+export const ProductsPage = () => {
     const { data: myProducts, isLoading } = useProducts();
 
     if (!myProducts && isLoading) {
         return <div className={commonStyles.loading}>Loading...</div>;
     }
 
     return (
-        <div className={classNames(styles.root, className)}>
+        <div className={styles.root}>
             <h1 className={styles.title}>All Products</h1>
             <div className={styles.gallery}>
                 {myProducts?.map(

src/components/thank-you-page/thank-you-page.tsx → src/pages/thank-you-page/thank-you-page.tsx

@@ -1,19 +1,14 @@
-import classNames from 'classnames';
 import styles from './thank-you-page.module.scss';
 import CommonStyles_module from '../../styles/common-styles.module.scss';
 import { Link, useSearchParams } from 'react-router-dom';
 import { ROUTES } from '../../router/config';
 
-export interface ThankYouPageProps {
-    className?: string;
-}
-
-export const ThankYouPage = ({ className }: ThankYouPageProps) => {
+export const ThankYouPage = () => {
     const [search] = useSearchParams();
     const orderId = search.get('orderId');
 
     return (
-        <div className={classNames(styles.root, className)}>
+        <div className={styles.root}>
             <div className={styles.text}>
                 <h1 className={styles.title}>Thank You!</h1>
                 <p className={styles.paragraph}>

src/router/routes.tsx

@@ -5,7 +5,7 @@ import { AboutPage } from '../pages/about-page/about-page';
 import { ROUTES } from './config';
 import { ProductDetailsPage } from '../pages/product-details-page/product-details-page';
 import { ProductsPage } from '../pages/products-page/products-page';
-import { ThankYouPage } from '../components/thank-you-page/thank-you-page';
+import { ThankYouPage } from '../pages/thank-you-page/thank-you-page';
 
 export const getRoutes: () => RouteObject[] = () => [
     {