feat: new command architecture (#55)

* feat: added basic commands wip

* feat: added additional foundational commands wip

* refactor: return promise direct

* feat: d2c specific command

* refactor: clean up wrong command inline

* feat: enhanced error checking and middleware added to generate

* feat: added package manager option to schema

* feat: option to take in a package manager choice d2c command

* feat: clear session on first prompt response login

* feat: attempt to surface some error messages

* feat: check for error response

* refactor: use shared util to clear creds

* refactor: remove log

* feat: command for insights opt in

* build: added posthog node

* feat: added posthog tracking to composable cli

* refactor: just use --help

* feat: support tracking for all commands

* refactor: remove log

* refactor: remove log

* feat: added generate command descriptions

* feat: added schematic schema options to yargs for d2c generate

* refactor: removed comment

* feat: added strict to force a subcommand for config

* feat: added strict to force a subcommand for config

* feat: use argv instead of parse

* feat: added interactive option at the top level

* feat: added interactive check before opening feedback site

* feat: insight commands checking for interactive

* feat: conditionally show token refresh log

* feat: no default catalog error message

* chore: d2c schematic changeset

* feat: add us images location

* chore: changeset

* feat: added mock pages

- shipping
- FAQ
- terms
- about

* chore: changeset

* feat: home creates the featured products now by default

* chore: changeset

* feat: home page featured products components that pulls from all products in catalog

* chore: changeset

* feat: added examples for commands

* chore: updated readme to describe d2c

* chore: changeset

* chore: updated readme with installation instructions

* build: removed unused scripts

* fix: no longer need this property

* build: .env file needed for posthog key

* fix: old required property was still required even after being removed.

* feat: made sure a simple promotion banner is always visible

* feat: changed visibility of schema properties so the yargs cli can find them

* feat: support to generate examples with new cli commands

* feat: updated examples using latest schematics

* feat: handle non-interactive

* chore: generated latest examples

* feat: added promotion banner schematic to homepage

* feat: promotion banner refactor cleanup

* refactor: remove unused import

* feat: removed husky

* build: removed husky

* test: removed husky references

* build: output test file for e2e tests

---------

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>

.changeset/hip-nails-watch.md

@@ -0,0 +1,5 @@
+---
+"@elasticpath/d2c-schematics": patch
+---
+
+home page featured products components that pulls from all products in catalog

.changeset/khaki-shoes-listen.md

@@ -0,0 +1,5 @@
+---
+"@elasticpath/d2c-schematics": patch
+---
+
+Error message handling for no catalog for epcc store

.changeset/loud-toys-kiss.md

@@ -0,0 +1,5 @@
+---
+"@elasticpath/d2c-schematics": patch
+---
+
+home creates the featured products now by default

.changeset/serious-badgers-brake.md

@@ -0,0 +1,17 @@
+---
+"composable-cli": minor
+---
+
+Composable cli now has a more complete set of commands
+
+- READ_ME has clear descirption on how to use the CLI
+- CLI now supports help functionality with examples
+- There are 7 new base commands - see the cli help for more information
+  - login
+  - logout
+  - feedback
+  - config
+  - store
+  - generate
+  - insights
+

.changeset/smooth-wolves-brake.md

@@ -0,0 +1,5 @@
+---
+"@elasticpath/d2c-schematics": patch
+---
+
+Added mock pages for shipping, FAQ, terms and about us

.changeset/stupid-turkeys-decide.md

@@ -0,0 +1,5 @@
+---
+"@elasticpath/d2c-schematics": patch
+---
+
+us-east image location added to next config to allow images from that domain by default

.github/workflows/generate-examples.yml

@@ -41,6 +41,12 @@ jobs:
         run: |
           echo "${{ secrets.EXAMPLES_ENV_FILE }}" > .env.examples
 
+      - name: Make .env file for composable-cli package
+        run: |
+          touch ./packages/composable-cli/.env
+          echo POSTHOG_PUBLIC_API_KEY=${{ secrets.POSTHOG_PUBLIC_API_KEY }} >> .env
+          cat .env
+
       - name: Install Dependencies
         run: yarn install
 
@@ -126,6 +132,10 @@ jobs:
           conclusion: ${{ steps.examples-unit-int-tests.outcome }}
           fail-on-error: true
 
+      - name: Make .env.test file
+        run: |
+          echo "${{ secrets.TEST_ENV_FILE }}" > .env.test
+
       - name: Build everything
         run: yarn build
 

.github/workflows/release.yml

@@ -20,6 +20,12 @@ jobs:
         with:
           node-version: 16.x
 
+      - name: Make .env file for composable-cli package
+        run: |
+          touch ./packages/composable-cli/.env
+          echo POSTHOG_PUBLIC_API_KEY=${{ secrets.POSTHOG_PUBLIC_API_KEY }} >> .env
+          cat .env
+
       - name: Install Dependencies
         run: yarn
 

examples/algolia/next.config.js

@@ -5,7 +5,7 @@
  **/
 const nextConfig = {
   images: {
-    domains: ["files-eu.epusercontent.com"],
+    domains: ["files-eu.epusercontent.com", "files-na.epusercontent.com"],
   },
   i18n: {
     locales: ["en"],

examples/algolia/package.json

@@ -11,7 +11,6 @@
     "format:check": "prettier --check .",
     "format:fix": "prettier --write .",
     "type:check": "tsc --noEmit",
-    "prepare": "husky install",
     "test": "vitest run",
     "test:coverage": "vitest run --coverage",
     "test:watch": "vitest",
@@ -54,7 +53,6 @@
     "eslint-config-next": "12.2.5",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-react": "^7.30.1",
-    "husky": "^8.0.1",
     "vite": "^4.2.1",
     "vitest": "^0.30.1",
     "@vitest/coverage-istanbul": "^0.30.1",

examples/algolia/src/components/featured-products/FeaturedProducts.tsx

@@ -0,0 +1,148 @@
+import { Box, Center, Flex, Heading, Link, Text } from "@chakra-ui/react";
+import React, { useCallback, useEffect, useState } from "react";
+import { useRouter } from "next/router";
+import type { ProductResponseWithImage } from "../../lib/types/product-types";
+import { connectProductsWithMainImages } from "../../lib/product-util";
+import { ArrowForwardIcon, ViewOffIcon } from "@chakra-ui/icons";
+import { globalBaseWidth } from "../../styles/theme";
+import { ChakraNextImage } from "../ChakraNextImage";
+import {getProducts} from "../../services/products";
+
+interface IFeaturedProductsBaseProps {
+  title: string;
+  linkProps?: {
+    link: string;
+    text: string;
+  };
+}
+
+interface IFeaturedProductsProvidedProps extends IFeaturedProductsBaseProps {
+  type: "provided";
+  products: ProductResponseWithImage[];
+}
+
+interface IFeaturedProductsFetchProps extends IFeaturedProductsBaseProps {
+  type: "fetch";
+}
+
+type IFeaturedProductsProps =
+  | IFeaturedProductsFetchProps
+  | IFeaturedProductsProvidedProps;
+
+const FeaturedProducts = (props: IFeaturedProductsProps): JSX.Element => {
+  const router = useRouter();
+  const { type, title, linkProps } = props;
+
+  const [products, setProducts] = useState<ProductResponseWithImage[]>(
+    type === "provided" ? props.products : []
+  );
+
+  const fetchNodeProducts = useCallback(async () => {
+    if (type === "fetch") {
+      const { data, included } = await getProducts();
+      let products = data.slice(0, 4);
+      if (included?.main_images) {
+        products = connectProductsWithMainImages(
+          products,
+          included.main_images
+        );
+      }
+      setProducts(products);
+    }
+  }, [props, type]);
+
+  useEffect(() => {
+    try {
+      fetchNodeProducts();
+    } catch (error) {
+      console.error(error);
+      throw error;
+    }
+  }, [fetchNodeProducts]);
+
+  return (
+    <Box
+      display={products.length ? "block" : "none"}
+      maxW={globalBaseWidth}
+      m="0 auto"
+    >
+      <Flex justifyContent="space-between">
+        <Heading
+          as="h2"
+          fontSize={{ base: "1rem", md: "1.1rem", lg: "1.3rem" }}
+          fontWeight="extrabold"
+        >
+          {title}
+        </Heading>
+        {linkProps && (
+          <Link
+            color="brand.primary"
+            fontWeight="bold"
+            fontSize={{ base: "sm", md: "md", lg: "lg" }}
+            onClick={() => {
+              linkProps.link && router.push(linkProps.link);
+            }}
+          >
+            {linkProps.text} <ArrowForwardIcon />
+          </Link>
+        )}
+      </Flex>
+      <Flex
+        justifyContent="space-around"
+        alignItems="center"
+        mt={4}
+        mb={8}
+        flexWrap="wrap"
+      >
+        {products.map((product) => (
+          <Link
+            display="flex"
+            alignItems="center"
+            justifyContent="center"
+            flexDirection="column"
+            p={4}
+            flex={{ base: "100%", md: "50%", lg: "25%" }}
+            key={product.id}
+            href={`/products/${product.id}`}
+          >
+            <Box width="100%" maxW={200} textAlign="center">
+              {product.main_image?.link.href ? (
+                <ChakraNextImage
+                  width={200}
+                  height={200}
+                  alt={product.main_image?.file_name || "Empty"}
+                  src={product.main_image?.link.href}
+                  borderRadius={5}
+                  objectFit="cover"
+                  boxShadow="sm"
+                  quality={100}
+                />
+              ) : (
+                <Center
+                  width={64}
+                  height={64}
+                  bg="gray.200"
+                  color="white"
+                  borderRadius={5}
+                  objectFit="cover"
+                  boxShadow="sm"
+                >
+                  <ViewOffIcon w="10" h="10" />
+                </Center>
+              )}
+
+              <Heading size="sm" p="2" fontWeight="semibold">
+                {product.attributes.name}
+              </Heading>
+              <Heading size="sm">
+                {product.meta.display_price?.without_tax.formatted}
+              </Heading>
+            </Box>
+          </Link>
+        ))}
+      </Flex>
+    </Box>
+  );
+};
+
+export default FeaturedProducts;

examples/algolia/src/components/featured-products/fetchFeaturedProducts.ts

@@ -0,0 +1,15 @@
+// Fetching the first 4 products of in the catalog to display in the featured-products component
+import { connectProductsWithMainImages } from "../../lib/product-util";
+import {getProducts} from "../../services/products";
+
+export const fetchFeaturedProducts = async () => {
+  const { data: productsResponse, included: productsIncluded } =
+    await getProducts();
+
+  return productsIncluded?.main_images
+    ? connectProductsWithMainImages(
+          productsResponse.slice(0, 4), // Only need the first 4 products to feature
+          productsIncluded?.main_images
+      )
+    : productsResponse;
+};

examples/algolia/src/components/promotion-banner/PromotionBanner.tsx

@@ -0,0 +1,111 @@
+import { Box, Button, Heading } from "@chakra-ui/react";
+import { useRouter } from "next/router";
+
+export interface IPromotion {
+  title?: string;
+  description?: string;
+  imageHref?: string;
+}
+
+interface IPromotionBanner {
+  linkProps?: {
+    link: string;
+    text: string;
+  };
+  alignment?: "center" | "left" | "right";
+  promotion: IPromotion;
+}
+
+const PromotionBanner = (props: IPromotionBanner): JSX.Element => {
+  const router = useRouter();
+  const { linkProps, promotion, alignment } = props;
+
+  const { title, imageHref, description } = promotion;
+
+  let background;
+
+  if (imageHref) {
+    background = {
+      backgroundImage: `url(${imageHref})`,
+      backgroundSize: "cover",
+      backgroundPosition: "center",
+      _before: {
+        content: "''",
+        position: "absolute",
+        top: 0,
+        left: 0,
+        width: "100%",
+        height: "100%",
+        backgroundColor: "white",
+        filter: "opacity(0.5)",
+        zIndex: 0,
+      },
+    };
+  } else {
+    background = {
+      backgroundColor: "gray.100",
+    };
+  }
+
+  const contentAlignment = {
+    alignItems: (() => {
+      switch (alignment) {
+        case "left":
+          return "flex-start";
+        case "right":
+          return "flex-end";
+        default:
+          return "center";
+      }
+    })(),
+    textAlign: alignment || "center",
+  };
+
+  return (
+    <>
+      {promotion && (
+        <Box
+          display="flex"
+          justifyContent="center"
+          flexDirection="column"
+          padding={8}
+          position="relative"
+          height="xl"
+          {...contentAlignment}
+          {...background}
+        >
+          {title && (
+            <Heading as="h1" size="3xl" zIndex={1} mb={4}>
+              {title}
+            </Heading>
+          )}
+          {description && (
+            <Heading size="sm" zIndex={1}>
+              {description}
+            </Heading>
+          )}
+          {linkProps && (
+            <Button
+              bg="brand.primary"
+              color="white"
+              _hover={{
+                backgroundColor: "brand.highlight",
+                boxShadow: "lg",
+              }}
+              variant="solid"
+              mt="5"
+              zIndex={1}
+              onClick={() => {
+                router.push(linkProps.link);
+              }}
+            >
+              {linkProps.text}
+            </Button>
+          )}
+        </Box>
+      )}
+    </>
+  );
+};
+
+export default PromotionBanner;