Initial commit

.eslintignore

@@ -0,0 +1,4 @@
+build
+node_modules
+bin
+*.d.ts

.eslintrc.js

@@ -0,0 +1,10 @@
+module.exports = {
+  extends: ['plugin:hydrogen/recommended'],
+  rules: {
+    'node/no-missing-import': 'off',
+    '@typescript-eslint/ban-ts-comment': 'off',
+    '@typescript-eslint/naming-convention': 'off',
+    singleQuote: true,
+    semi: [1, 'never']
+  },
+};

.github/workflows/oxygen-deployment-2228544.yml

@@ -0,0 +1,55 @@
+# Don't change the line below!
+#! oxygen_storefront_id: 2228544
+
+name: Storefront 2228544
+on: [push]
+
+permissions:
+  contents: read
+  deployments: write
+
+jobs:
+  deploy:
+    name: Deploy to Oxygen
+    timeout-minutes: 30
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Setup node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '16'
+          check-latest: true
+
+      - name: Get yarn cache directory
+        id: yarn-cache-dir-path
+        run: echo "dir=$(yarn cache dir)" >> $GITHUB_OUTPUT
+
+      - uses: actions/cache@v3
+        with:
+          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+
+      - name: Install dependencies
+        id: 'install-dependencies'
+        run: yarn
+
+      - name: Build and Publish to Oxygen
+        id: deploy
+        uses: shopify/oxygenctl-action@v4
+        with:
+          oxygen_deployment_token: ${{ secrets.OXYGEN_DEPLOYMENT_TOKEN_2228544 }}
+          build_command: "HYDROGEN_ASSET_BASE_URL=$OXYGEN_ASSET_BASE_URL yarn build"
+
+      # Create GitHub Deployment
+      - name: Create GitHub Deployment
+        uses: shopify/github-deployment-action@v1
+        if: always()
+        with:
+          token: ${{ github.token }}
+          environment: 'preview'
+          preview_url: ${{ steps.deploy.outputs.url }}
+          description: ${{ github.event.head_commit.message }}

.gitignore

@@ -0,0 +1,10 @@
+node_modules
+
+/.cache
+/build
+/dist
+/public/build
+/.mf
+.env
+
+.env.*

.graphqlrc.yml

@@ -0,0 +1 @@
+schema: node_modules/@shopify/hydrogen-react/storefront.schema.json

.npmrc

@@ -0,0 +1,2 @@
+@shopify:registry=https://registry.npmjs.com
+progress=false

.sample.env

@@ -0,0 +1,16 @@
+# These variables are only available locally in MiniOxygen
+
+SESSION_SECRET="superhiscecretinternet"
+
+PUBLIC_STOREFRONT_API_VERSION="2023-04"
+
+PUBLIC_STOREFRONT_API_TOKEN=""
+PUBLIC_STOREFRONT_ID=""
+PUBLIC_STORE_DOMAIN="site.myshopify.com"
+PRIVATE_STOREFRONT_API_TOKEN=""
+
+SANITY_PROJECT_ID=""
+SANITY_DATASET="production"
+SANITY_API_TOKEN=""
+SANITY_USE_CDN="false"
+SANITY_API_VERSION="2021-06-07"

README.md

@@ -0,0 +1,67 @@
+# Superhi - Modular Commerce
+
+This is a mono-repo-like experience, you will find the core of hydrogen running in the root directory, you will also find a `sanity` instance running inside of the `cms` directory powered by `next.js`. 
+
+### Hydrogen:
+
+[Check out Hydrogen docs](https://shopify.dev/custom-storefronts/hydrogen)
+[Get familiar with Remix](https://remix.run/docs/en/v1)
+
+## What's included
+
+- Remix
+- Hydrogen
+- Oxygen
+- Shopify CLI
+- ESLint
+- Prettier
+- GraphQL generator
+- TypeScript and JavaScript flavors
+- Minimal setup of components and routes
+
+## Getting started
+
+**Requirements:**
+
+- Node.js version 16.14.0 or higher
+
+*Remember to update `.env` with your shop's domain and Storefront API token!
+
+```bash
+yarn or npm install
+```
+
+## CMS 
+
+This is tricker given the way the Sanity CLI is configured, the easiest method is to generate a new Sanity instance which you can do following this [guide](https://www.sanity.io/docs/installation) and I will explain in a lesson to make it easier.
+
+Once you have the SANITY-CLI installed you can simply navigate to the `cms` directory and run `sanity init --env .env.local` in the terminal.
+
+You will be asked a series of questions, create a new project, name the project and assign it to your personal sanity or your personal sanity or, from there you can follow the prompts as follows:
+
+```bash
+? Use the default dataset configuration? Yes
+✔ Creating dataset
+? Would you like to add configuration files for a Sanity project in this Next.js folder? Yes
+? Do you want to use TypeScript? No
+? Would you like an embedded Sanity Studio? No
+? File /sanity.cli.js already exists. Do you want to overwrite it? No
+? Select project template to use Clean project with no predefined schemas
+? File /sanity/schema.js already exists. Do you want to overwrite it? No
+? File /sanity/env.js already exists. Do you want to overwrite it? No
+? File /sanity/lib/client.js already exists. Do you want to overwrite it? No
+? File /sanity/lib/image.js already exists. Do you want to overwrite it? No
+? Would you like to add the project ID and dataset to your .env.local file? Yes
+```
+
+^^ Mostly override/create the `env.local`` is all you need to do 
+
+Once you init a new sanity instance, you can simply take the generate sanity ID and place it in a duplicated `.sample.env` file that you should save as `.env` and not commit to your repo! We will be deploying the cms to vercel and putting our environment variable there as well so the sanity instance is hosted.
+
+
+### FAQs
+
+<details>
+  <summary>Why is Sanity in Next.js?</summary>
+  Sanity is a unique CMS platform that can be embedded anywhere, that means we don't have to host the studio on sanity itself. We can instead host it on any platform we want (in this case vercel). We do this because it gives our sanity extra powers out of the box, we can now utilize next.js as well as `api` routes for handling complex api interactions without our studio, we won't go into explicit details around everything you can do with the additional power of next.js but I want you to have the best tool set to do more with modular commerce. I'll be linking a tutorial to how I upload files directly to Shopify in my Sanity studio and it's only possible with next.js and vercel hosted solutions. We can also give our CMS a custom domain like cms.website.com that makes it easier for the client or you to access it on the web. 
+</details>

app/components/AddToCartButton.jsx

@@ -0,0 +1,36 @@
+import {useFetcher, useMatches} from '@remix-run/react';
+import {Button} from '~/components';
+import {CartAction} from '~/lib/type';
+
+export function AddToCartButton({
+  children,
+  lines,
+  className = '',
+  variant = 'primary',
+  width = 'full',
+  productAnalytics,
+  ...props
+}) {
+  const [root] = useMatches();
+  const selectedLocale = root?.data?.selectedLocale;
+  const fetcher = useFetcher();
+
+  return (
+    <fetcher.Form action="/cart" method="post">
+      <input type="hidden" name="cartAction" value={CartAction.ADD_TO_CART} />
+      <input type="hidden" name="countryCode" value={selectedLocale.country} />
+      <input type="hidden" name="lines" value={JSON.stringify(lines)} />
+      <input type="hidden" name="analytics" value={JSON.stringify(productAnalytics)} />
+      <Button
+        as="button"
+        type="submit"
+        width={width}
+        variant={variant}
+        className={className}
+        {...props}
+      >
+        {children}
+      </Button>
+    </fetcher.Form>
+  );
+}

app/components/Button.jsx

@@ -0,0 +1,45 @@
+import {forwardRef} from 'react';
+import {Link} from '@remix-run/react';
+import clsx from 'clsx';
+
+import {missingClass} from '~/lib/utils';
+
+export const Button = forwardRef(
+  (
+    {
+      as = 'button',
+      className = '',
+      variant = 'primary',
+      width = 'auto',
+      ...props
+    },
+    ref,
+  ) => {
+    const Component = props?.to ? Link : as;
+
+    const baseButtonClasses =
+      'inline-block rounded-[5px] border-2 font-500 uppercase text-center py-2 px-5 text-sans-16 transition-colors';
+
+    const variants = {
+      primary: `${baseButtonClasses} border-primary-grey border-solid bg-primary-grey text-white `,
+      secondary: `${baseButtonClasses}  bg-white text-primary-grey border-solid border-primary-grey `,
+      transparentDark: `${baseButtonClasses} bg-transparent text-primary-grey  border-solid border-primary-grey hover:bg-primary-grey hover:text-white duration-300`,
+      transparentLight: `${baseButtonClasses} bg-transparent text-white  border-solid border-white hover:bg-white hover:text-primary-grey duration-300`,
+    };
+
+    const styles = clsx(
+      variants[variant],
+      className,
+    );
+
+    return (
+      <Component
+        // @todo: not supported until react-router makes it into Remix.
+        // preventScrollReset={true}
+        className={styles}
+        {...props}
+        ref={ref}
+      />
+    );
+  },
+);