Skip to content

Commit

Permalink
feat: d2c next app dir (#102)
Browse files Browse the repository at this point in the history
* feat: added SITE_NAME environment var

* feat: removed icons

* feat: updated app directory new pages and components

* feat: latest changes for d2c app directory

* chore: changeset

* refactor: remove console log

* fix: removed extra package.json content

* feat: latest examples d2c starter kit app directory

* feat: latest lock file

* test: cart tests no longer had these files - expected

* fix: replaced missing if for search modal

* test: resolved tests after changes

* feat: latest examples

* chore: generated latest examples

* feat: package fixes

* feat: copied over fix for cookie issue

* feat: instantsearch fix

* feat: latest examples

* feat: bumped to next 14

* feat: bumped react types version

* feat: latest examples

* feat: use workspace

* chore: changeset

---------

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
  • Loading branch information
field123 and github-actions[bot] authored Oct 30, 2023
1 parent e1f97c9 commit 462cccd
Show file tree
Hide file tree
Showing 347 changed files with 4,389 additions and 5,539 deletions.
6 changes: 6 additions & 0 deletions .changeset/fluffy-donuts-jump.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
"@elasticpath/react-shopper-hooks": patch
"@elasticpath/d2c-schematics": patch
---

bumped react types version
6 changes: 6 additions & 0 deletions .changeset/ninety-seas-joke.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
"@elasticpath/d2c-schematics": minor
"composable-cli": patch
---

Migrated D2C starter kit to Next.js 13 App directory routing
13 changes: 7 additions & 6 deletions examples/algolia/next.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,13 @@
**/
const nextConfig = {
images: {
domains: ["files-eu.epusercontent.com", "files-na.epusercontent.com"],
formats: ["image/avif", "image/webp"],
remotePatterns: [
{
protocol: "https",
hostname: "**.epusercontent.com",
},
],
},
i18n: {
locales: ["en"],
Expand All @@ -16,11 +22,6 @@ const nextConfig = {
...config.resolve.fallback,
fs: false,
};
config.module.rules.push({
test: /\.svg$/i,
issuer: /\.[jt]sx?$/,
use: ["@svgr/webpack"],
});

return config;
},
Expand Down
46 changes: 24 additions & 22 deletions examples/algolia/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -21,56 +21,58 @@
},
"dependencies": {
"@algolia/react-instantsearch-widget-color-refinement-list": "^1.4.7",
"@elasticpath/react-shopper-hooks": "0.5.1",
"@elasticpath/react-shopper-hooks": "workspace:^0.5.1",
"@elasticpath/shopper-common": "workspace:^0.1.1",
"@headlessui/react": "^1.7.17",
"@heroicons/react": "^2.0.18",
"@moltin/sdk": "^25.0.2",
"algoliasearch": "^4.14.2",
"clsx": "^1.2.1",
"cookies-next": "^2.1.1",
"dequal": "^2.0.3",
"cookies-next": "^4.0.0",
"focus-visible": "^5.2.0",
"formik": "^2.2.9",
"next": "^12.2.5",
"instantsearch.js": "4.59.0",
"next": "^14.0.0",
"pure-react-carousel": "^1.29.0",
"rc-slider": "^10.3.0",
"react": "^18.2.0",
"react-device-detect": "^2.2.2",
"react-dom": "^18.2.0",
"react-instantsearch-hooks-server": "6.38.1",
"react-instantsearch-hooks-web": "6.38.1",
"react-instantsearch": "^7.2.0",
"react-instantsearch-nextjs": "^0.1.2",
"react-toastify": "^9.1.3",
"server-only": "^0.0.1",
"zod": "^3.22.4",
"zod-formik-adapter": "^1.2.0"
},
"devDependencies": {
"@babel/core": "^7.18.10",
"@next/bundle-analyzer": "13.0.4",
"@playwright/test": "^1.28.1",
"@next/bundle-analyzer": "^14.0.0",
"@next/env": "^14.0.0",
"@svgr/webpack": "^6.3.1",
"@testing-library/jest-dom": "^6.1.3",
"@testing-library/react": "^14.0.0",
"@types/node": "18.7.3",
"@types/react": "^18.2.0",
"@types/react-dom": "^18.2.0",
"@types/react-toastify": "^4.1.0",
"@vitest/coverage-istanbul": "^0.34.5",
"autoprefixer": "^10.4.14",
"@types/react": "^18.2.33",
"@types/react-dom": "^18.2.14",
"babel-loader": "^8.2.5",
"eslint": "^8.49.0",
"eslint-config-next": "^13.5.2",
"eslint-config-next": "^14.0.0",
"eslint-config-prettier": "^9.0.0",
"encoding": "^0.1.13",
"eslint-plugin-react": "^7.33.2",
"instantsearch.js": "4.56.8",
"vite": "^4.2.1",
"vitest": "^0.34.5",
"@vitest/coverage-istanbul": "^0.34.5",
"@testing-library/jest-dom": "^6.1.3",
"@testing-library/react": "^14.0.0",
"@playwright/test": "^1.28.1",
"lint-staged": "^13.0.3",
"postcss": "^8.4.30",
"prettier": "^3.0.3",
"prettier-eslint": "^15.0.1",
"prettier-eslint-cli": "^7.1.0",
"prettier-plugin-tailwindcss": "^0.5.4",
"tailwindcss": "^3.3.3",
"typescript": "^5.2.2",
"vite": "^4.2.1",
"vitest": "^0.34.5"
"tailwindcss": "^3.3.3",
"autoprefixer": "^10.4.14",
"postcss": "^8.4.30",
"prettier-plugin-tailwindcss": "^0.5.4"
}
}
Binary file removed examples/algolia/public/150-placeholder.png
Binary file not shown.
113 changes: 0 additions & 113 deletions examples/algolia/public/icons/empty.svg

This file was deleted.

4 changes: 0 additions & 4 deletions examples/algolia/public/icons/ep-icon.svg

This file was deleted.

13 changes: 0 additions & 13 deletions examples/algolia/public/icons/ep-logo.svg

This file was deleted.

1 change: 0 additions & 1 deletion examples/algolia/public/icons/github.svg

This file was deleted.

5 changes: 5 additions & 0 deletions examples/algolia/src/app/about/page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import Blurb from "../../components/shared/blurb";

export default function About() {
return <Blurb title="About" />;
}
42 changes: 42 additions & 0 deletions examples/algolia/src/app/cart/page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
"use client";
import Cart from "../../components/cart/Cart";
import CartIcon from "../../components/icons/cart";
import { useCart } from "@elasticpath/react-shopper-hooks";
import { resolveShoppingCartProps } from "../../lib/resolve-shopping-cart-props";
import Link from "next/link";

export default function CartPage() {
const { removeCartItem, state } = useCart();
const shoppingCartProps = resolveShoppingCartProps(state, removeCartItem);

return (
<div className="m-auto w-full max-w-base-max-width px-6 py-10 2xl:px-0">
{shoppingCartProps && (
<>
<h1 className="pb-5 text-3xl font-bold">Your Shopping Cart</h1>
<Cart {...shoppingCartProps} />
</>
)}
{(state.kind === "empty-cart-state" ||
state.kind === "uninitialised-cart-state" ||
state.kind === "loading-cart-state") && (
<div className="text-center min-h-64">
<CartIcon className="mx-auto h-24" />
<h3 className="mt-4 text-sm font-semibold text-gray-900">
Empty Cart
</h3>
<p className="mt-1 text-sm text-gray-500">Your cart is empty</p>
<div className="mt-6">
<Link
href="/"
className="inline-flex items-center rounded-md bg-brand-primary px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-brand-highlight focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-highlight"
type="button"
>
Start shopping
</Link>
</div>
</div>
)}
</div>
);
}
Original file line number Diff line number Diff line change
@@ -1,22 +1,35 @@
import Link from "next/link";
import { GetServerSideProps, NextPage } from "next";
import { Metadata } from "next";

interface IConfigurationError {
from?: string;
issues?: Record<string, string | string[]>;
}
export const metadata: Metadata = {
title: "Configuration Error",
description: "Configuration error page",
};

type Props = {
searchParams: { [key: string]: string | string[] | undefined };
};

export default function ConfigurationErrorPage({ searchParams }: Props) {
const {
"missing-env-variable": missingEnvVariables,
authentication,
from,
} = searchParams;

const issues: { [key: string]: string | string[] } = {
...(missingEnvVariables && { missingEnvVariables }),
...(authentication && { authentication }),
};
const fromProcessed = Array.isArray(from) ? from[0] : from;

export const ConfigurationError: NextPage = ({
issues,
from,
}: IConfigurationError) => {
return (
<div className="m-auto flex h-[36rem] w-full max-w-base-max-width flex-col items-center justify-center gap-4 p-8">
<span className="text-center text-xl md:text-3xl">
There is a problem with the stores setup
</span>
<Link
href={from ? from : "/"}
href={fromProcessed ? fromProcessed : "/"}
className="text-md text-brand-primary lg:text-lg"
>
Refresh
Expand All @@ -38,9 +51,9 @@ export const ConfigurationError: NextPage = ({
<td>
<ul>
{(Array.isArray(issue) ? issue : [issue]).map(
(messsage) => (
<li className="break-words" key={messsage}>
{decodeURIComponent(messsage)}
(message) => (
<li className="break-words" key={message}>
{decodeURIComponent(message)}
</li>
),
)}
Expand All @@ -53,23 +66,4 @@ export const ConfigurationError: NextPage = ({
</table>
</div>
);
};

export default ConfigurationError;

export const getServerSideProps: GetServerSideProps = async ({ query }) => {
const {
"missing-env-variable": missingEnvVariables,
authentication,
from,
} = query;
return {
props: {
issues: {
...(missingEnvVariables && { missingEnvVariables }),
...(authentication && { authentication }),
},
from: Array.isArray(from) ? from[0] : from,
},
};
};
}
31 changes: 31 additions & 0 deletions examples/algolia/src/app/error.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
"use client";
import Link from "next/link";

export default function GlobalError({
error,
reset,
}: {
error: Error & { digest?: string };
reset: () => void;
}) {
return (
<html>
<body>
<div className="flex h-[36rem] flex-col items-center justify-center gap-4 p-8">
<span className="text-center text-xl md:text-3xl">
{error.digest} - Internal server error.
</span>
<Link href="/" className="font-md md:font-lg text-brand-primary">
Back to home
</Link>
<button
className="font-md md:font-lg text-brand-secondary"
onClick={() => reset()}
>
Try again
</button>
</div>
</body>
</html>
);
}
5 changes: 5 additions & 0 deletions examples/algolia/src/app/faq/page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import Blurb from "../../components/shared/blurb";

export default function FAQ() {
return <Blurb title="FAQ" />;
}
59 changes: 59 additions & 0 deletions examples/algolia/src/app/layout.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
import { Inter } from "next/font/google";
import { ReactNode, Suspense } from "react";
import "../styles/globals.css";
import Header from "../components/header/Header";
import { getStoreContext } from "../lib/get-store-context";
import { getServerSideImplicitClient } from "../lib/epcc-server-side-implicit-client";
import { Providers } from "./providers";
import { Toaster } from "../components/toast/toaster";
import Footer from "../components/footer/Footer";

const { SITE_NAME } = process.env;
const baseUrl = process.env.NEXT_PUBLIC_VERCEL_URL
? `https://${process.env.NEXT_PUBLIC_VERCEL_URL}`
: "http://localhost:3000";

export const metadata = {
metadataBase: new URL(baseUrl),
title: {
default: SITE_NAME!,
template: `%s | ${SITE_NAME}`,
},
robots: {
follow: true,
index: true,
},
};

const inter = Inter({
subsets: ["latin"],
display: "swap",
variable: "--font-inter",
});

export default async function RootLayout({
children,
}: {
children: ReactNode;
}) {
const client = getServerSideImplicitClient();
const storeContext = await getStoreContext(client);

return (
<html lang="en" className={inter.variable}>
<body>
{/* headless ui needs this div - https://github.com/tailwindlabs/headlessui/issues/2752#issuecomment-1745272229 */}
<div>
<Providers store={storeContext}>
<Header />
<Toaster />
<Suspense>
<main>{children}</main>
</Suspense>
<Footer />
</Providers>
</div>
</body>
</html>
);
}
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import Link from "next/link";

export default function Custom404() {
export default function NotFound() {
return (
<div className="flex h-[36rem] flex-col items-center justify-center gap-4 p-8">
<span className="text-center text-xl md:text-3xl">
Expand Down
Loading

0 comments on commit 462cccd

Please sign in to comment.