Bump to 13

.env.example

@@ -1,10 +1,11 @@
-BOUNDLESS_BASE_URL=< your shop url, i.e. http://www.myshop.com >
 BOUNDLESS_API_PERMANENT_TOKEN=<< your permanent token here>>
 BOUNDLESS_INSTANCE_ID=<ID>
 
 # Optional params:
+# BOUNDLESS_BASE_URL=< your shop url, i.e. http://www.myshop.com >
 # BOUNDLESS_PRODUCTS_IMAGE_PROPORTION=
 
 # For dev team:
 # BOUNDLESS_API_BASE_URL=https://api.rick.dev.boundless-commerce.com
-# BOUNDLESS_S3_PREFIX=dev-rick
+# BOUNDLESS_S3_PREFIX=dev-rick
+# BOUNDLESS_MEDIA_SERVER=https://dev-img.boundless-commerce.com

.github/workflows/linters.yml

@@ -0,0 +1,27 @@
+name: Linters
+#on: push
+
+on:
+  push:
+    branches-ignore: [master]
+  pull_request:
+    branches: [master]
+
+jobs:
+  super-lint:
+    name: Lint code base
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+
+      - name: Run Super-Linter
+        uses: github/super-linter@v4
+        env:
+          DEFAULT_BRANCH: master
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+#         validate only typescript:
+          VALIDATE_TYPESCRIPT_ES: true
+          VALIDATE_CSS: true
+          CSS_FILE_NAME: .stylelintrc.json
+          LINTER_RULES_PATH: /

.stylelintrc.json

@@ -8,5 +8,5 @@
 		"selector-class-pattern": null,
 		"selector-no-qualifying-type": [true, {"ignore": ["attribute", "class", "id"]}]
 	},
-	"ignoreFiles": ["**/*.css", "**/*.js", "**/*.ts", "**/*.tsx"]
+	"ignoreFiles": ["**/*.css", "**/*.js", "**/*.ts", "**/*.tsx", "**/*.md"]
 }

@types/category.ts

@@ -1,3 +1,3 @@
-import {ICategory} from 'boundless-api-client/types/catalog/category';
+import {ICategory} from 'boundless-api-client';
 
 export type ICategoryPartial = Pick<ICategory, 'category_id' | 'title' | 'custom_link' | 'url_key' | 'image'> & {children?: ICategory[] | null};

@types/components.ts

@@ -0,0 +1,19 @@
+export interface IBreadCrumbItem {
+	title: string;
+	isActive?: boolean;
+	url?: string
+}
+
+export interface IMenuItem {
+	title: string,
+	url?: string,
+	img?: IMenuItemImage,
+	isActive?: boolean,
+	children?: IMenuItem[]
+}
+
+export interface IMenuItemImage {
+	src: string,
+	width?: number,
+	height?: number
+}

@types/settings.ts

@@ -0,0 +1,6 @@
+import {ICurrency, ILocaleSettings} from 'boundless-api-client';
+
+export interface IBasicSettings {
+	'system.locale': ILocaleSettings,
+	'system.currency': ICurrency
+}

LICENSE

@@ -0,0 +1,20 @@
+Copyright (c) 2012-2022 Scott Chacon and others
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

README.md

@@ -0,0 +1,66 @@
+# Next.js E-Commerce template
+
+Ready to use [Next.js](https://nextjs.org) (TypeScript) starter kit for high-performance 
+e-commerce websites 🔥.
+
+Free 👍. Ready to use 😎. Just clone & deploy! 🤘
+
+## Online Demo ⚡️
+
+[blank.demos.my-boundless.app](https://blank.demos.my-boundless.app/) - deployed to Netlify.
+
+## About Boundless Commerce
+
+![Boundless-commerce.com](assets/logo.svg)
+
+[Boundless-commerce.com](https://boundless-commerce.com/) - API’s First Headless E-commerce CMS: We Provide An 
+Admin-Side For Store Management, Powerful API, And Ready-To-Use Checkout Area.
+
+## Getting Started
+
+1. Go to [Boundless-commerce.com](https://boundless-commerce.com/) and create a free account (no credit card required).
+2. Go to "Control panel" -> "Settings" -> "Access tokens" and create a new one: 
+
+![](assets/settings-menu.png)
+![](assets/create-access-token-btn.png)
+
+3. Copy `.env.example` to `.env`
+4. Modify `.env`: put values for the `BOUNDLESS_API_PERMANENT_TOKEN` and `BOUNDLESS_INSTANCE_ID`, copy values from:
+
+![](assets/copy-credentials.png)
+
+5. Install dependencies: `yarn install`
+6. `yarn dev` - to start locally, then open `http://localhost:3000`
+7. If you want to have absolute URLs in the sitemap.xml and OpenGraph meta tags 
+you need to also specify `BOUNDLESS_BASE_URL`.
+
+### Optional parameters
+
+- `BOUNDLESS_BASE_URL` - Base URL if you want to have absolute 
+URLs in the sitemap.xml and OpenGraph meta tags.
+- `BOUNDLESS_PRODUCTS_IMAGE_PROPORTION` - Specify resize proportion so product images in lists have 
+the same size. Possible values are: `1-1`, `2-3`, `3-2`,`4-5`, `5-4`, `3-4`, `4-3`, `16-9`, `9-16`.
+
+## What is included?
+
+Fully ready E-Commerce website with a hierarchical catalog, product widgets, 
+filters, and marketing components like sliders and carousels.
+
+We developed the template keeping SEO in mind: schema markup, sitemap, and 
+all necessary meta-tags.
+
+Shopping cart with a nice animated widget and [Fully customizable React checkout](https://github.com/kirill-zhirnov/boundless-checkout-react).
+
+User friendly mobile version.
+
+## Video tutorial
+
+[![How to build React E-commerce Website with Next.js, TypeScript, and Redux in 2023 (Tutorial)](https://img.youtube.com/vi/BOZRLereGig/0.jpg)](https://youtu.be/BOZRLereGig "How to build React E-commerce Website with Next.js, TypeScript, and Redux in 2023 (Tutorial)")
+
+## Ways to deploy Node.js Apps
+
+[![Ways to deploy NodeJs (and/or NextJS) apps - quick overview](https://img.youtube.com/vi/pRj0o-B57O4/0.jpg)](https://www.youtube.com/watch?v=pRj0o-B57O4 " Ways to deploy NodeJs (and/or NextJS) apps - quick overview")
+
+---
+
+[NextJS eCommerce templates](https://boundless-commerce.com/templates) - Free. Ready to use. Just clone & deploy!

components/AsideMenu.tsx

@@ -0,0 +1,105 @@
+import clsx from 'clsx';
+import {useAppDispatch, useAppSelector} from '../hooks/redux';
+import {RootState} from '../redux/store';
+import {disableBodyScroll, enableBodyScroll, clearAllBodyScrollLocks} from 'body-scroll-lock';
+import {useEffect, useRef} from 'react';
+import {setIsOpened} from '../redux/reducers/asideMenu';
+import HeaderCart from './cart/HeaderCart';
+import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+import {faTimes} from '@fortawesome/free-solid-svg-icons';
+import AsideMenuList from './asideMenu/MenuList';
+import {DragGesture} from '@use-gesture/vanilla';
+import {IMenuItem} from '../@types/components';
+
+export default function AsideMenu({menuList}: {menuList?: IMenuItem[]}) {
+	const rootEl = useRef(null);
+	const isOpened = useAppSelector((state: RootState) => state.asideMenu.isOpened);
+	const isRouteChanging = useAppSelector((state: RootState) => state.app.isRouteChanging);
+	const dispatch = useAppDispatch();
+	const gesture = useRef<DragGesture | null>(null);
+
+	const closeIfOpened = () => {
+		if (isOpened) {
+			dispatch(setIsOpened(false));
+		}
+	};
+	const onEscPressed = (e: KeyboardEvent) => {
+		if (e.defaultPrevented || !isOpened) {
+			return;
+		}
+
+		if (e.key !== undefined && e.key === 'Escape') {
+			closeIfOpened();
+		} else if (e.keyCode !== undefined && e.keyCode === 27) {
+			closeIfOpened();
+		}
+	};
+
+	const enableSwipe = () => {
+		const body = document.querySelector('body');
+
+		body!.style.touchAction = 'none';
+		gesture.current = new DragGesture(body!, ({last, movement}) => {
+			// if (last && vx > 0.3 && (Math.abs(vy) < Math.abs(vx)) && dx === 1) {
+			if (last && movement[0] > 100) {
+				closeIfOpened();
+			}
+		});
+	};
+
+	const disableSwipe = () => {
+		const body = document.querySelector('body');
+
+		if (gesture.current) gesture.current.destroy();
+		gesture.current = null;
+		body!.style.touchAction = 'auto';
+	};
+
+	useEffect(() => {
+		if (isRouteChanging) closeIfOpened();
+	}, [isRouteChanging]); //eslint-disable-line
+
+	useEffect(() => {
+		if (isOpened) {
+			if (rootEl.current) {
+				disableBodyScroll(rootEl.current);
+			}
+
+			enableSwipe();
+
+			window.addEventListener('resize', closeIfOpened);
+			window.addEventListener('keydown', onEscPressed);
+		} else {
+			if (rootEl.current) {
+				enableBodyScroll(rootEl.current);
+			}
+
+			disableSwipe();
+
+			window.removeEventListener('resize', closeIfOpened);
+			window.removeEventListener('keydown', onEscPressed);
+		}
+
+		return () => {
+			clearAllBodyScrollLocks();
+			window.removeEventListener('resize', closeIfOpened);
+			window.removeEventListener('keydown', onEscPressed);
+
+			disableSwipe();
+		};
+	}, [isOpened]);//eslint-disable-line
+
+	return (
+		<aside className={clsx('aside-menu', {'aside-menu_visible': isOpened})}
+			ref={rootEl}
+		>
+			<div className='aside-menu__header'>
+				<HeaderCart className={'cart-header cart-header_horizontal'} />
+				<button className='btn' onClick={closeIfOpened} >
+					<FontAwesomeIcon icon={faTimes} />
+				</button>
+			</div>
+			{menuList && <AsideMenuList menuList={menuList} />}
+		</aside>
+	);
+}

components/BreadCrumbs.tsx

@@ -1,54 +1,48 @@
-import {ICategoryFlatItem} from 'boundless-api-client/types/catalog/category';
 import clsx from 'clsx';
 import Link from 'next/link';
-import {TQuery} from '../@types/common';
-import {getCategoryUrl} from '../lib/services/urls';
+import {IBreadCrumbItem} from '../@types/components';
 
-export default function BreadCrumbs({parents, activeParams}: IBreadCrumbsProps) {
-	const _parents = [...parents];
+export default function BreadCrumbs({items}: {items: IBreadCrumbItem[]}) {
+	const isEmpty = items.length === 0;
 
 	const richItemAttrs = {
 		itemProp: 'itemListElement',
 		itemScope: true,
-		itemType: 'http://schema.org/ListItem'
+		itemType: '//schema.org/ListItem'
 	};
 
 	return (
-		<nav className='breadcrumb-wrapper'>
-			<ol className='breadcrumb' itemProp='breadcrumb' itemScope itemType='http://schema.org/BreadcrumbList'>
+        <nav className={clsx('breadcrumb-wrapper', isEmpty && 'd-none')}>
+			{!isEmpty && <ol className='breadcrumb' itemProp='breadcrumb' itemScope itemType='//schema.org/BreadcrumbList'>
 				<li className='breadcrumb-item' {...richItemAttrs}>
-					<Link href='/'>
-						<a itemProp='item'><span itemProp='name'>Home</span></a>
+					<Link href='/' itemProp='item'>
+						<span itemProp='name'>Home</span>
 					</Link>
 					<meta itemProp='position' content='1' />
 				</li>
-				{parents?.length > 0 && _parents.reverse().map((parent, i) => {
-					const isLast = parents.length === i + 1;
-					const isActive = isLast && !activeParams;
-					const title = parent.title || parent.joined_title;
-
-					return (
-						<li
-							className={clsx('breadcrumb-item', isActive && 'active')}
-							key={parent.category_id}
-							{...(isActive ? {} : richItemAttrs)}
-						>
-							{isActive
-								? title
-								: <Link href={getCategoryUrl(parent, activeParams)}>
-									<a itemProp='item'>
-										<span itemProp='name'>{title}</span>
-									</a>
-								</Link>}
-							<meta itemProp='position' content={String(i + 2)} />
-						</li>);
-				})}
-			</ol>
+				{items.map((item, i) => (
+					<li
+						className={clsx('breadcrumb-item', item.isActive && 'active')}
+						key={i}
+						{...(item.url ? richItemAttrs : {})}
+					>
+						{item.url && !item.isActive
+							? <>
+								<Link href={item.url} itemProp='item'>
+									<span itemProp='name'>{item.title}</span>
+								</Link>
+								<meta itemProp='position' content={String(i + 2)} />
+							</>
+							:
+							<>
+								<span itemProp='item'>
+									<span itemProp='name'>{item.title}</span>
+								</span>
+								<meta itemProp='position' content={String(i + 2)} />
+							</>
+						}
+					</li>))}
+			</ol>}
 		</nav>
-	);
-}
-
-interface IBreadCrumbsProps {
-	parents: ICategoryFlatItem[];
-	activeParams?: TQuery;
+    );
 }