@springmicro/cart 0.2.0-alpha.1

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@springmicro/cart",
+  "private": false,
+  "version": "0.2.0-alpha.1",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "rm -rf dist && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.5",
+    "@mui/icons-material": "^5.15.18",
+    "@mui/material": "^5.15.18",
+    "@nanostores/persistent": "^0.10.1",
+    "@nanostores/query": "^0.3.3",
+    "@nanostores/react": "^0.7.2",
+    "dotenv": "^16.4.5",
+    "nanostores": "^0.10.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "unstorage": "^1.10.2"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.66",
+    "@types/react-dom": "^18.2.22",
+    "@typescript-eslint/eslint-plugin": "^7.2.0",
+    "@typescript-eslint/parser": "^7.2.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "eslint": "^8.57.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.6",
+    "typescript": "^5.2.2",
+    "vite": "^5.2.0"
+  },
+  "gitHead": "d988e7008130d071792f11d20bd22ab2fe4ea695"
+}

package/src/AddToCartForm.tsx

@@ -0,0 +1,15 @@
+import { addToCart } from "./utils/storage";
+
+type Props = {
+  item: any;
+  children: any;
+};
+
+export default function AddToCartForm({ item, children }: Props) {
+  function addItemToCart(e: any) {
+    e.preventDefault();
+    addToCart(item);
+  }
+
+  return <form onSubmit={addItemToCart}>{children}</form>;
+}

package/src/CartButton.tsx

@@ -0,0 +1,178 @@
+import {
+  Box,
+  Button,
+  ClickAwayListener,
+  IconButton,
+  Tooltip,
+} from "@mui/material";
+import ShoppingCartOutlinedIcon from "@mui/icons-material/ShoppingCartOutlined";
+import ShoppingCartIcon from "@mui/icons-material/ShoppingCart";
+import React from "react";
+import CloseIcon from "@mui/icons-material/Close";
+import type { Cart } from "./types";
+import { useStore } from "@nanostores/react";
+import {
+  clearCart,
+  removeFromCart,
+  cartStore,
+  apiPathDetails,
+} from "./utils/storage";
+
+export default function CartButton({
+  user,
+  apiBaseUrl,
+  color,
+  modalYOffset,
+}: {
+  user: ({ id: string | number } & any) | undefined;
+  apiBaseUrl: string;
+  color: string | undefined;
+  modalYOffset: string | number | undefined;
+}) {
+  const [modalOpen, setModalOpen] = React.useState(false);
+
+  React.useEffect(() => {
+    apiPathDetails.set({
+      baseUrl: apiBaseUrl,
+      userId: user ? user.id : undefined,
+    });
+  }, [user]);
+
+  const cartStorage = useStore(cartStore);
+
+  return (
+    <Cart
+      cart={JSON.parse(cartStorage)}
+      modalState={[modalOpen, setModalOpen]}
+      color={color}
+      modalYOffset={modalYOffset}
+    />
+  );
+}
+
+function Cart({
+  modalState,
+  cart,
+  color,
+  modalYOffset,
+}: {
+  modalState: [boolean, React.Dispatch<React.SetStateAction<boolean>>];
+  cart: Cart;
+  color?: string;
+  modalYOffset?: string | number;
+}) {
+  const [modalOpen, setModalOpen] = modalState;
+
+  return (
+    <Box>
+      <ClickAwayListener
+        onClickAway={() => {
+          setModalOpen(false);
+        }}
+      >
+        <Box>
+          <IconButton
+            sx={{ color: color ?? "white" }}
+            onClick={() => {
+              setModalOpen((t) => !t);
+            }}
+          >
+            {cart.cart.length > 0 ? (
+              <ShoppingCartIcon />
+            ) : (
+              <ShoppingCartOutlinedIcon />
+            )}
+          </IconButton>
+          <CartModal
+            open={modalOpen}
+            cart={cart}
+            clearCart={clearCart}
+            removeFromCart={removeFromCart}
+            modalYOffset={modalYOffset}
+          />
+        </Box>
+      </ClickAwayListener>
+    </Box>
+  );
+}
+
+function CartModal({
+  open,
+  cart,
+  removeFromCart,
+  clearCart,
+  modalYOffset,
+}: {
+  open?: boolean;
+  cart: Cart;
+  removeFromCart: (i: number) => void;
+  clearCart: () => void;
+  modalYOffset?: string | number;
+}) {
+  if (!open) return null;
+  return (
+    <Box
+      sx={{
+        marginTop: modalYOffset,
+        position: "fixed",
+        width: 275,
+        minHeight: 300,
+        maxHeight: "calc(90vh - 8rem)",
+        borderLeft: "2px solid #999",
+        borderBottom: "2px solid #999",
+        pl: 4,
+        pr: 2,
+        py: 2,
+        right: 0,
+        display: "grid",
+        gridTemplateRows: "1fr 40px",
+        color: "black",
+        bgcolor: "white",
+        borderBottomLeftRadius: 12,
+        gap: 2,
+        zIndex: 1,
+      }}
+    >
+      <Box sx={{ overflow: "auto" }}>
+        {cart.cart.length === 0 ? <Box>Your cart is empty.</Box> : null}
+        {cart.cart.map((product, i) => (
+          <Box
+            key={product.id}
+            sx={{
+              display: "flex",
+              width: "100%",
+              borderBottom: "2px solid #ddd",
+              py: 1,
+              "&>*": {
+                m: 0,
+              },
+              justifyContent: "space-between",
+            }}
+          >
+            <h2>{product.name}</h2>
+            <Tooltip title="Remove from cart">
+              <IconButton
+                sx={{ color: "red" }}
+                onClick={() => {
+                  removeFromCart(i);
+                }}
+              >
+                <CloseIcon />
+              </IconButton>
+            </Tooltip>
+          </Box>
+        ))}
+      </Box>
+      <Box sx={{ display: "flex", justifyContent: "space-between" }}>
+        <Button
+          sx={{ color: "red" }}
+          onClick={clearCart}
+          disabled={cart.cart.length === 0}
+        >
+          Clear cart
+        </Button>
+        <Button>Checkout →</Button>
+      </Box>
+    </Box>
+  );
+}

package/src/index.ts

@@ -0,0 +1,20 @@
+import CartButton from "./CartButton";
+import {
+  cartStore,
+  addToCart,
+  removeFromCart,
+  clearCart,
+} from "./utils/storage";
+import type { Cart, CartProduct } from "./types";
+import AddToCartForm from "./AddToCartForm";
+
+export {
+  cartStore,
+  CartButton,
+  Cart,
+  CartProduct,
+  addToCart,
+  removeFromCart,
+  clearCart,
+  AddToCartForm,
+};

package/src/types.d.ts

@@ -0,0 +1,31 @@
+export interface Cart {
+  authentication: {
+    loggedIn: boolean;
+    user_id?: number | string;
+  };
+  cart: CartProduct[];
+}
+export type CartProduct = {
+  id: number | string;
+  name: string;
+  quantity?: number;
+  price?: number;
+};
+
+type CartContextType = {
+  cart: Cart;
+  addToCart: (p: CartProduct) => void;
+  removeFromCart: (i: number) => void;
+  clearCart: () => void;
+};
+
+type ApiCartResponse = {
+  cart: string;
+  id: any;
+  user_id: number | string;
+};
+
+export type PathDetailsType = {
+  baseUrl?: string;
+  userId?: string | number;
+};

package/src/utils/cartAuthHandler.ts

@@ -0,0 +1,50 @@
+import { defaultCartValue } from ".";
+import { ApiCartResponse, Cart } from "../types";
+import { Storage } from "unstorage";
+
+export function cartAuthHandler(
+  cartState: [Cart, React.Dispatch<React.SetStateAction<Cart>>],
+  storage: {
+    api: Storage<any>;
+    local: Storage<any>;
+  } | null,
+  userId: number | string | undefined,
+  prevUserId: number | string | undefined
+) {
+  const [cart, setCart] = cartState;
+  if (storage === null) return () => {}; // storage can be null.
+
+  if (userId === prevUserId) return;
+
+  if (userId === undefined) {
+    // logout
+    setCart(defaultCartValue);
+    return;
+  }
+
+  // login
+  if (cart.cart.length > 0) {
+    setCart((c) => ({
+      ...c,
+      authentication: {
+        loggedIn: true,
+        user_id: userId,
+      },
+    }));
+    return;
+  }
+  storage.api
+    .getItem(`${userId}`)
+    .then((c2: ApiCartResponse) => {
+      if (!c2) return;
+
+      setCart({
+        cart: JSON.parse(c2.cart),
+        authentication: {
+          loggedIn: true,
+          user_id: c2.user_id,
+        },
+      });
+    })
+    .catch(() => {});
+}

package/src/utils/index.ts

@@ -0,0 +1,28 @@
+import { Cart, PathDetailsType } from "../types";
+
+export const defaultCartValue: Cart = {
+  authentication: {
+    loggedIn: false,
+  },
+  cart: [],
+};
+
+export function fetchFromCartApi(
+  method: "GET" | "PUT" | "DELETE",
+  { baseUrl, userId }: PathDetailsType,
+  body?: string
+) {
+  return fetch(`${baseUrl}/api/ecommerce/cart/${userId}`, {
+    method,
+    body,
+    headers: {
+      "Content-Type": "application/json",
+    },
+  });
+}
+
+export function pathDetailsIsFullyDefined(pathDetails: PathDetailsType) {
+  if (pathDetails.userId === undefined) return false;
+  if (pathDetails.baseUrl === undefined) return false;
+  return true;
+}

package/src/utils/storage.ts

@@ -0,0 +1,98 @@
+import {
+  fetchFromCartApi,
+  defaultCartValue,
+  pathDetailsIsFullyDefined,
+} from "./";
+import { persistentAtom } from "@nanostores/persistent";
+import { atom } from "nanostores";
+import { Cart, CartProduct, PathDetailsType } from "../types";
+
+export const cartStore = persistentAtom(
+  "cart",
+  JSON.stringify(defaultCartValue)
+);
+
+export const apiPathDetails = atom<PathDetailsType>({});
+
+apiPathDetails.listen((pathDetails) => {
+  if (pathDetailsIsFullyDefined(pathDetails)) {
+    // Runs on init if there is a user id and api key. Automatically logs in if userId is updated from undefined.
+    fetchFromCartApi("GET", pathDetails).then(async (c) => {
+      const cart = await c.json();
+      cartStore.set(
+        JSON.stringify({
+          authentication: { loggedIn: true, user_id: cart.user_id },
+          cart: JSON.parse((cart as any).cart),
+        })
+      );
+    });
+  } else {
+    const localCartData = JSON.parse(cartStore.get());
+    if (localCartData.authentication.loggedIn)
+      cartStore.set(JSON.stringify(defaultCartValue));
+  }
+});
+
+export function addToCart(p: CartProduct) {
+  const cart: Cart = JSON.parse(cartStore.get());
+  const newCart = { ...cart, cart: [...cart.cart, p] };
+
+  const pathDetails = apiPathDetails.get();
+  if (pathDetailsIsFullyDefined(pathDetails)) {
+    fetchFromCartApi(
+      "PUT",
+      pathDetails,
+      JSON.stringify({
+        user_id: pathDetails.userId,
+        cart: JSON.stringify(newCart.cart),
+      })
+    ).then(async () => {
+      cartStore.set(JSON.stringify(newCart));
+    });
+  } else {
+    cartStore.set(JSON.stringify(newCart));
+  }
+}
+
+export function removeFromCart(i: number) {
+  const cart = JSON.parse(cartStore.get());
+
+  const products: CartProduct[] = [...cart.cart];
+  products.splice(i, 1);
+  const newCart = { ...cart, cart: products };
+
+  const pathDetails = apiPathDetails.get();
+  if (pathDetailsIsFullyDefined(pathDetails)) {
+    // If products.length is 0, delete cart. Otheriwise, update cart.
+    const cartIsEmpty = products.length > 0;
+
+    const body = {
+      user_id: pathDetails.userId,
+      cart: JSON.stringify(newCart.cart),
+    };
+
+    fetchFromCartApi(
+      cartIsEmpty ? "PUT" : "DELETE",
+      pathDetails,
+      cartIsEmpty ? JSON.stringify(body) : undefined
+    ).then(async () => {
+      cartStore.set(JSON.stringify(newCart));
+    });
+  } else {
+    cartStore.set(JSON.stringify(newCart));
+  }
+}
+
+export function clearCart() {
+  const cart = JSON.parse(cartStore.get());
+  const newCart = { ...cart, cart: [] };
+
+  const pathDetails = apiPathDetails.get();
+  if (pathDetailsIsFullyDefined(pathDetails)) {
+    fetchFromCartApi("DELETE", pathDetails).then(async () => {
+      cartStore.set(JSON.stringify(newCart));
+    });
+  } else {
+    cartStore.set(JSON.stringify(newCart));
+  }
+}

package/tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": false,
+    "noFallthroughCasesInSwitch": true,
+    "noImplicitAny": false
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

package/tsconfig.node.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true
+  },
+  "include": ["vite.config.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,24 @@
+import react from "@vitejs/plugin-react";
+import { resolve } from "path";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  plugins: [react()],
+  build: {
+    lib: {
+      entry: resolve(__dirname, "src/index.ts"),
+      name: "@springmicro/forms",
+      fileName: "index",
+    },
+    rollupOptions: {
+      external: ["react", "react-dom", "nanoid"],
+      output: {
+        globals: {
+          react: "React",
+          "react-dom": "ReactDOM",
+          nanoid: "Nanoid",
+        },
+      },
+    },
+  },
+});