Adding NextJS as an e2e testing point / app (#49)

* save progress

* Save progress and updates

* Saving prettier output

* Cleanup the repo and get dev scripts working across packages

* Build before typecheck as nextjs relies on the output

* fix linting setup for nextjs

* add a todo note

* Fix build issues with outputting a node_modules folder

Always remove the dist folder as part of dev (and prod) to make sure that the dist folder looks accurate across starts

Move unneeded ts-expect in sourcecode and move to test

Fix some tsconfig issues with included files

.prettierignore

@@ -2,3 +2,7 @@
 **/dist/**
 packages/react/storefront.schema.json
 **/coverage/
+
+# apps/nextjs ignored files/folders
+apps/nextjs/.next/**
+apps/nextjs/gql/**

CONTRIBUTING.md

@@ -2,14 +2,11 @@
 
 There are two ways you can develop Hydrogen-UI components:
 
-- Develop components in isolation:
-  1. Run `yarn dev` (or `yarn dev:story`) in the hydrogen-ui directory to spin up an instance of [Ladle](https://ladle.dev/)
+- Develop components in isolation (faster & easier):
+  1. Run `yarn dev:story` in the hydrogen-ui directory to spin up an instance of [Ladle](https://ladle.dev/)
   2. Edit the component or the component's story `[ComponentName].stories.tsx`
-- TODO: setup and document how to link this package to the demo store
-<!-- - Develop components in the demo store:
-  1. Add `"@shopify/hydrogen-react": "{major}.{minor}.{patch}"` to the demo-store's `package.json`
-  2. Run `yarn` then `yarn dev` in the demo-store directory,
-  3. Run `yarn dev:demo` in the hydrogen-ui directory -->
+- Develop components in a demo app (good for testing out the ecosystem support)
+  1. Run `yarn dev`
 
 ## Authoring Components
 
@@ -62,3 +59,4 @@ Processes that need to happen:
   - Do one last `ci:checks`
   - Push the branch up to Github. Do _not_ make a Pull Request - we want the older Storefront API branch to stay as a snapshot of the code that was there at that release.
 - Change the default branch in Github to the newly-created branch.
+- Create a new changelog and PR to officially publish the new version

apps/nextjs/.eslintrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+  extends: ['next/core-web-vitals', '../../packages/react/.eslintrc.cjs'],
+  rules: {
+    // not a big deal if we don't use extensions in the nextjs app
+    'import/extensions': ['off'],
+  },
+};

apps/nextjs/.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

apps/nextjs/README.md

@@ -0,0 +1,34 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
+
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
+
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

apps/nextjs/codegen.ts

@@ -0,0 +1,18 @@
+import type {CodegenConfig} from '@graphql-codegen/cli';
+
+const config: CodegenConfig = {
+  overwrite: true,
+  // a normal app would only need `./node_modules/...` but we're in a monorepo
+  schema: '../../node_modules/@shopify/hydrogen-react/storefront.schema.json',
+  documents: 'pages/**/*.tsx',
+  // @TODO a chance here to provide the settings we use to generate our Types for the schema here as well,
+  // so that the Custom Scalar definitions we have in hydrogen-ui can be used here as well.
+  generates: {
+    './gql/': {
+      preset: 'client',
+      plugins: [],
+    },
+  },
+};
+
+export default config;

apps/nextjs/gql/fragment-masking.ts

@@ -0,0 +1,40 @@
+import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
+
+
+export type FragmentType<TDocumentType extends DocumentNode<any, any>> = TDocumentType extends DocumentNode<
+  infer TType,
+  any
+>
+  ? TType extends { ' $fragmentName'?: infer TKey }
+    ? TKey extends string
+      ? { ' $fragmentRefs'?: { [key in TKey]: TType } }
+      : never
+    : never
+  : never;
+
+// return non-nullable if `fragmentType` is non-nullable
+export function useFragment<TType>(
+  _documentNode: DocumentNode<TType, any>,
+  fragmentType: FragmentType<DocumentNode<TType, any>>
+): TType;
+// return nullable if `fragmentType` is nullable
+export function useFragment<TType>(
+  _documentNode: DocumentNode<TType, any>,
+  fragmentType: FragmentType<DocumentNode<TType, any>> | null | undefined
+): TType | null | undefined;
+// return array of non-nullable if `fragmentType` is array of non-nullable
+export function useFragment<TType>(
+  _documentNode: DocumentNode<TType, any>,
+  fragmentType: ReadonlyArray<FragmentType<DocumentNode<TType, any>>>
+): ReadonlyArray<TType>;
+// return array of nullable if `fragmentType` is array of nullable
+export function useFragment<TType>(
+  _documentNode: DocumentNode<TType, any>,
+  fragmentType: ReadonlyArray<FragmentType<DocumentNode<TType, any>>> | null | undefined
+): ReadonlyArray<TType> | null | undefined
+export function useFragment<TType>(
+  _documentNode: DocumentNode<TType, any>,
+  fragmentType: FragmentType<DocumentNode<TType, any>> | ReadonlyArray<FragmentType<DocumentNode<TType, any>>> | null | undefined
+): TType | ReadonlyArray<TType> | null | undefined {
+  return fragmentType as any
+}

apps/nextjs/gql/gql.ts

@@ -0,0 +1,16 @@
+/* eslint-disable */
+import * as types from './graphql';
+import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
+
+const documents = {
+    "\n  query IndexQuery {\n    shop {\n      name\n    }\n    products(first: 1) {\n      nodes {\n        # if you uncomment 'blah', it should have a GraphQL validation error in your IDE if you have a GraphQL plugin. It should also give an error during 'npm run dev'\n        # blah\n        id\n        title\n        publishedAt\n        handle\n        variants(first: 1) {\n          nodes {\n            id\n            image {\n              url\n              altText\n              width\n              height\n            }\n          }\n        }\n      }\n    }\n  }\n": types.IndexQueryDocument,
+};
+
+export function graphql(source: "\n  query IndexQuery {\n    shop {\n      name\n    }\n    products(first: 1) {\n      nodes {\n        # if you uncomment 'blah', it should have a GraphQL validation error in your IDE if you have a GraphQL plugin. It should also give an error during 'npm run dev'\n        # blah\n        id\n        title\n        publishedAt\n        handle\n        variants(first: 1) {\n          nodes {\n            id\n            image {\n              url\n              altText\n              width\n              height\n            }\n          }\n        }\n      }\n    }\n  }\n"): (typeof documents)["\n  query IndexQuery {\n    shop {\n      name\n    }\n    products(first: 1) {\n      nodes {\n        # if you uncomment 'blah', it should have a GraphQL validation error in your IDE if you have a GraphQL plugin. It should also give an error during 'npm run dev'\n        # blah\n        id\n        title\n        publishedAt\n        handle\n        variants(first: 1) {\n          nodes {\n            id\n            image {\n              url\n              altText\n              width\n              height\n            }\n          }\n        }\n      }\n    }\n  }\n"];
+
+export function graphql(source: string): unknown;
+export function graphql(source: string) {
+  return (documents as any)[source] ?? {};
+}
+
+export type DocumentType<TDocumentNode extends DocumentNode<any, any>> = TDocumentNode extends DocumentNode<  infer TType,  any>  ? TType  : never;