Merge development into main

_codux/boards/ui-kits/ui-kit-buttons.board.tsx

@@ -1,7 +1,7 @@
 import { NavLink } from '@remix-run/react';
 import { createBoard, Variant } from '@wixc3/react-board';
 import classNames from 'classnames';
-import { MemoryRouter } from 'react-router-dom';
+import ComponentWrapper from '~/_codux/board-wrappers/component-wrapper';
 import discordIcon from '~/src/assets/svg/discord.svg';
 import facebookIcon from '~/src/assets/svg/facebook.svg';
 import githubIcon from '~/src/assets/svg/github.svg';
@@ -13,7 +13,7 @@ import styles from '~/src/styles/ui-kit-buttons.module.scss';
 export default createBoard({
     name: 'UI Kit - Buttons',
     Board: () => (
-        <MemoryRouter>
+        <ComponentWrapper>
             <div className={styles.container}>
                 <div>
                     <span className={styles.uikit}>UI Kit</span>
@@ -88,7 +88,7 @@ export default createBoard({
                     </div>
                 </Variant>
             </div>
-        </MemoryRouter>
+        </ComponentWrapper>
     ),
     isSnippet: true,
     environmentProps: {

app/root.tsx

@@ -11,7 +11,7 @@ import {
     useNavigation,
     useRouteError,
 } from '@remix-run/react';
-import { LoaderFunctionArgs } from '@remix-run/node';
+import { LoaderFunctionArgs, MetaFunction } from '@remix-run/node';
 import { Tokens } from '@wix/sdk';
 import { useEffect } from 'react';
 import { CartOpenContextProvider } from '~/lib/cart-open-context';
@@ -117,3 +117,32 @@ export function ErrorBoundary() {
         </ContentWrapper>
     );
 }
+
+export const meta: MetaFunction = () => {
+    const title = 'E-Commerce Starter';
+    const description = 'Create your own e-commerce store';
+
+    return [
+        { title },
+        {
+            name: 'description',
+            content: description,
+        },
+        {
+            property: 'robots',
+            content: 'index, follow',
+        },
+        {
+            property: 'og:title',
+            content: title,
+        },
+        {
+            property: 'og:description',
+            content: description,
+        },
+        {
+            property: 'og:image',
+            content: '/social-media-image.jpg',
+        },
+    ];
+};

app/routes/_index/route.tsx

@@ -1,7 +1,7 @@
-import { LinksFunction, LoaderFunctionArgs } from '@remix-run/node';
+import { LoaderFunctionArgs } from '@remix-run/node';
 import { Link, MetaFunction, useLoaderData, useNavigate, json } from '@remix-run/react';
 import { initializeEcomApi } from '~/lib/ecom/session';
-import { isOutOfStock, removeQueryStringFromUrl } from '~/lib/utils';
+import { isOutOfStock } from '~/lib/utils';
 import { HeroImage } from '~/src/components/hero-image/hero-image';
 import { ProductCard } from '~/src/components/product-card/product-card';
 import styles from './index.module.scss';
@@ -13,7 +13,7 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
         throw json(productsResponse.error);
     }
 
-    return { products: productsResponse.body, canonicalUrl: removeQueryStringFromUrl(request.url) };
+    return { products: productsResponse.body };
 };
 
 export default function HomePage() {
@@ -52,22 +52,16 @@ export default function HomePage() {
     );
 }
 
-export const meta: MetaFunction<typeof loader> = ({ data }) => {
-    const title = 'E-Commerce App';
-    const description = 'Welcome to the E-Commerce App';
-    const imageUrl = 'https://e-commerce.com/image.png';
+export const meta: MetaFunction<typeof loader> = () => {
+    const title = 'E-Commerce Starter';
+    const description = 'Create your own e-commerce store';
 
     return [
         { title },
         {
             name: 'description',
             content: description,
         },
-        {
-            tagName: 'link',
-            rel: 'canonical',
-            href: data?.canonicalUrl,
-        },
         {
             property: 'robots',
             content: 'index, follow',
@@ -82,33 +76,7 @@ export const meta: MetaFunction<typeof loader> = ({ data }) => {
         },
         {
             property: 'og:image',
-            content: imageUrl,
-        },
-        {
-            name: 'twitter:card',
-            content: 'summary_large_image',
-        },
-        {
-            name: 'twitter:title',
-            content: title,
-        },
-        {
-            name: 'twitter:description',
-            content: description,
-        },
-        {
-            name: 'twitter:image',
-            content: imageUrl,
-        },
-    ];
-};
-
-export const links: LinksFunction = () => {
-    return [
-        {
-            rel: 'icon',
-            href: '/favicon.ico',
-            type: 'image/ico',
+            content: '/social-media-image.jpg',
         },
     ];
 };

app/routes/about/route.tsx

@@ -1,11 +1,6 @@
-import { LinksFunction, LoaderFunctionArgs, MetaFunction } from '@remix-run/node';
-import { removeQueryStringFromUrl } from '~/lib/utils';
+import { MetaFunction } from '@remix-run/node';
 import styles from './about.module.scss';
 
-export const loader = async ({ request }: LoaderFunctionArgs) => {
-    return { canonicalUrl: removeQueryStringFromUrl(request.url) };
-};
-
 export default function AboutPage() {
     return (
         <div className={styles.root}>
@@ -26,63 +21,16 @@ export default function AboutPage() {
     );
 }
 
-export const meta: MetaFunction<typeof loader> = ({ data }) => {
-    const title = 'E-Commerce App - About';
-    const description = 'Welcome to the E-Commerce App - About Page';
-    const imageUrl = 'https://e-commerce.com/image.png';
-
+export const meta: MetaFunction = () => {
     return [
-        { title },
+        { title: 'About Us' },
         {
             name: 'description',
-            content: description,
-        },
-        {
-            tagName: 'link',
-            rel: 'canonical',
-            href: data?.canonicalUrl,
+            content: 'Create your own e-commerce store',
         },
         {
             property: 'robots',
             content: 'index, follow',
         },
-        {
-            property: 'og:title',
-            content: title,
-        },
-        {
-            property: 'og:description',
-            content: description,
-        },
-        {
-            property: 'og:image',
-            content: imageUrl,
-        },
-        {
-            name: 'twitter:card',
-            content: 'summary_large_image',
-        },
-        {
-            name: 'twitter:title',
-            content: title,
-        },
-        {
-            name: 'twitter:description',
-            content: description,
-        },
-        {
-            name: 'twitter:image',
-            content: imageUrl,
-        },
-    ];
-};
-
-export const links: LinksFunction = () => {
-    return [
-        {
-            rel: 'icon',
-            href: '/favicon.ico',
-            type: 'image/ico',
-        },
     ];
 };

app/routes/category.$categorySlug/category.module.scss

@@ -26,6 +26,8 @@
     text-transform: uppercase;
     padding-bottom: 10px;
     border-bottom: solid 1px var(--grey);
+    font: var(--heading6);
+    font-weight: 400;
 }
 
 .products {
@@ -68,6 +70,15 @@
     height: 100%;
 }
 
+.categoryList {
+    list-style: none;
+    padding: 0;
+}
+
+.categoryItem {
+    height: 42px;
+}
+
 .activeCategory {
     font-weight: bold;
 }

app/routes/category.$categorySlug/route.tsx

@@ -1,4 +1,4 @@
-import { LinksFunction, LoaderFunctionArgs, MetaFunction } from '@remix-run/node';
+import { LoaderFunctionArgs, MetaFunction } from '@remix-run/node';
 import { NavLink, useLoaderData, json, useRouteError, useNavigate, isRouteErrorResponse } from '@remix-run/react';
 import { GetStaticRoutes } from '@wixc3/define-remix-app';
 import classNames from 'classnames';
@@ -11,7 +11,7 @@ import {
 } from '~/lib/ecom';
 import { useAppliedProductFilters } from '~/lib/hooks';
 import { initializeEcomApi } from '~/lib/ecom/session';
-import { getErrorMessage, isOutOfStock, removeQueryStringFromUrl } from '~/lib/utils';
+import { getErrorMessage, isOutOfStock } from '~/lib/utils';
 import { ProductCard } from '~/src/components/product-card/product-card';
 import { ErrorComponent } from '~/src/components/error-component/error-component';
 import { ProductFilters } from '~/src/components/product-filters/product-filters';
@@ -58,7 +58,6 @@ export const loader = async ({ params, request }: LoaderFunctionArgs) => {
         categoryProducts: categoryProductsResponse.body,
         allCategories: allCategoriesResponse.body,
         productPriceBounds: productPriceBoundsResponse.body,
-        canonicalUrl: removeQueryStringFromUrl(request.url),
     };
 };
 
@@ -86,14 +85,14 @@ export default function ProductsCategoryPage() {
                 <nav className={styles.sidebarSection}>
                     <h2 className={styles.sidebarTitle}>Browse by</h2>
 
-                    <ul>
+                    <ul className={styles.categoryList}>
                         {allCategories.map((category) =>
                             category.slug ? (
                                 <NavLink
                                     key={category._id}
                                     to={`/category/${category.slug}`}
                                     className={({ isActive }) =>
-                                        classNames('linkButton', {
+                                        classNames(styles.categoryItem, 'linkButton', {
                                             [styles.activeCategory]: isActive,
                                         })
                                     }
@@ -185,62 +184,15 @@ export function ErrorBoundary() {
 }
 
 export const meta: MetaFunction<typeof loader> = ({ data }) => {
-    const title = 'E-Commerce App - Projects';
-    const description = 'Welcome to the E-Commerce App - Projects Page';
-    const imageUrl = 'https://e-commerce.com/image.png';
-
     return [
-        { title },
+        { title: data?.category.name ?? 'Products' },
         {
             name: 'description',
-            content: description,
-        },
-        {
-            tagName: 'link',
-            rel: 'canonical',
-            href: data?.canonicalUrl,
+            content: data?.category.description,
         },
         {
             property: 'robots',
             content: 'index, follow',
         },
-        {
-            property: 'og:title',
-            content: title,
-        },
-        {
-            property: 'og:description',
-            content: description,
-        },
-        {
-            property: 'og:image',
-            content: imageUrl,
-        },
-        {
-            name: 'twitter:card',
-            content: 'summary_large_image',
-        },
-        {
-            name: 'twitter:title',
-            content: title,
-        },
-        {
-            name: 'twitter:description',
-            content: description,
-        },
-        {
-            name: 'twitter:image',
-            content: imageUrl,
-        },
-    ];
-};
-
-export const links: LinksFunction = () => {
-    return [
-        {
-            rel: 'icon',
-            href: '/favicon.ico',
-            type: 'image/ico',
-        },
     ];
 };