@springmicro/cart 0.5.17 → 0.6.0

package/.eslintrc.cjs

@@ -1,21 +1,21 @@
-module.exports = {
-  root: true,
-  env: { browser: true, es2020: true },
-  extends: [
-    "eslint:recommended",
-    "plugin:@typescript-eslint/recommended",
-    "plugin:react-hooks/recommended",
-  ],
-  ignorePatterns: ["dist", ".eslintrc.cjs"],
-  parser: "@typescript-eslint/parser",
-  plugins: ["react-refresh"],
-  rules: {
-    "react-refresh/only-export-components": [
-      "warn",
-      { allowConstantExport: true },
-    ],
-    "@typescript-eslint/no-explicit-any": "off",
-    "@typescript-eslint/no-unused-vars": "off",
-    "react-hooks/exhaustive-deps": "off",
-  },
-};
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react-hooks/recommended",
+  ],
+  ignorePatterns: ["dist", ".eslintrc.cjs"],
+  parser: "@typescript-eslint/parser",
+  plugins: ["react-refresh"],
+  rules: {
+    "react-refresh/only-export-components": [
+      "warn",
+      { allowConstantExport: true },
+    ],
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/no-unused-vars": "off",
+    "react-hooks/exhaustive-deps": "off",
+  },
+};

package/README.md

@@ -1,64 +1,64 @@
-# @springmicro/cart
-
-A package for eCommerce sites that provides shopping cart functionality.
-
-# Exports
-
-## Components
-
-### CartProvider
-
-Provides and handles all the data for the cart.
-Requires a ReactNode child. `apiUrl` will be modified to end with `/api/ecommerce/cart`. If the user object changes, the provider automatically logs in and out of the cart.
-
-#### Required props:
-
-```ts
-user={({ id: number | string } & any) | undefined}
-apiUrl={string}
-```
-
-### CartContext
-
-Allows all scopes under the `CartProvider` to read from the cart data and the functions to modify the cart.
-
-#### Provisions:
-
-- `cart`: `Cart`
-- - Provides cart and authentication data.
-- `addToCart`: `(product: CartProduct) => void`
-- - Adds a product to the cart.
-- `removeFromCart`: `(i: number) => void`
-- - Removes an item from the cart at the given index.
-- `clearCart`: `() => void`
-- - Clears the cart.
-
-### CartButton
-
-A frontend-facing component to display the cart contents in a Modal. This component is designed to go in a top navbar, ideally on the right-hand side.
-This component is required to be in a `CartProvider` scope.
-
-## Types
-
-### Cart
-
-The type of the `cart` in `CartContext.cart`.
-
-```ts
-{
-  cart: CartProducts[],
-  authentication: {loggedIn: boolean, user_id: string | number}
-}
-```
-
-### CartProduct
-
-The type of the products listed in `Cart.cart`.
-
-```ts
-{
-  id: number | string,
-  name: string,
-  quantity: number | undefined
-}
-```
+# @springmicro/cart
+
+A package for eCommerce sites that provides shopping cart functionality.
+
+# Exports
+
+## Components
+
+### CartProvider
+
+Provides and handles all the data for the cart.
+Requires a ReactNode child. `apiUrl` will be modified to end with `/api/ecommerce/cart`. If the user object changes, the provider automatically logs in and out of the cart.
+
+#### Required props:
+
+```ts
+user={({ id: number | string } & any) | undefined}
+apiUrl={string}
+```
+
+### CartContext
+
+Allows all scopes under the `CartProvider` to read from the cart data and the functions to modify the cart.
+
+#### Provisions:
+
+- `cart`: `Cart`
+- - Provides cart and authentication data.
+- `addToCart`: `(product: CartProduct) => void`
+- - Adds a product to the cart.
+- `removeFromCart`: `(i: number) => void`
+- - Removes an item from the cart at the given index.
+- `clearCart`: `() => void`
+- - Clears the cart.
+
+### CartButton
+
+A frontend-facing component to display the cart contents in a Modal. This component is designed to go in a top navbar, ideally on the right-hand side.
+This component is required to be in a `CartProvider` scope.
+
+## Types
+
+### Cart
+
+The type of the `cart` in `CartContext.cart`.
+
+```ts
+{
+  cart: CartProducts[],
+  authentication: {loggedIn: boolean, user_id: string | number}
+}
+```
+
+### CartProduct
+
+The type of the products listed in `Cart.cart`.
+
+```ts
+{
+  id: number | string,
+  name: string,
+  quantity: number | undefined
+}
+```

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@springmicro/cart",
   "private": false,
-  "version": "0.5.17",
+  "version": "0.6.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -24,7 +24,7 @@
     "@nanostores/persistent": "^0.10.1",
     "@nanostores/query": "^0.3.3",
     "@nanostores/react": "^0.7.2",
-    "@springmicro/utils": "0.5.17",
+    "@springmicro/utils": "0.6.0",
     "dotenv": "^16.4.5",
     "nanostores": "^0.10.3",
     "react": "^18.2.0",
@@ -49,5 +49,5 @@
     "vite-plugin-css-injected-by-js": "^3.5.1",
     "yup": "^1.4.0"
   },
-  "gitHead": "915dac621fa9bf06ffe49dadd56452f28bbd5737"
+  "gitHead": "37c816671357a3b1af66ad231880216fbda2fb72"
 }

package/src/AddToCartForm.tsx

@@ -1,16 +1,16 @@
-import { CartProduct } from "./types";
-import { addToCart } from "./utils/storage";
-
-type Props = {
-  item: CartProduct;
-  children: any;
-};
-
-export default function AddToCartForm({ item, children }: Props) {
-  function addItemToCart(e: any) {
-    e.preventDefault();
-    addToCart(item);
-  }
-
-  return <form onSubmit={addItemToCart}>{children}</form>;
-}
+import { CartProduct } from "./types";
+import { addToCart } from "./utils/storage";
+
+type Props = {
+  item: CartProduct;
+  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/ProductCard.css

@@ -1,106 +1,106 @@
-.card {
-  display: flex;
-  gap: 0.5rem;
-  flex-direction: column;
-  border-radius: 8px;
-  padding: 1rem;
-  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
-  transition: all 0.3s 0.1s;
-  cursor: pointer;
-}
-
-.card:hover {
-  box-shadow: 0px 2px 5px 2px #dfdfdfff;
-  transition: all 0.3s 0s;
-}
-
-.card-section {
-  display: flex;
-  gap: 8px;
-  flex-direction: column;
-  align-items: center;
-}
-
-.image-container {
-  width: 100%;
-  background-color: #ccc;
-  border-radius: 4px;
-  aspect-ratio: 1.5;
-}
-
-.button-section {
-  display: flex;
-  justify-content: space-around;
-  flex-direction: row;
-  flex-wrap: wrap;
-  margin: 4px 2rem 0px;
-  gap: 0.5rem;
-}
-
-.addtocartbutton {
-  color: white;
-  background-color: rgb(39, 138, 230);
-  padding: 4px 16px 6px;
-  border-radius: 8px;
-  outline: none;
-  transition: all 0.3s;
-}
-
-.addtocartbutton.red {
-  background-color: rgb(230, 39, 39);
-}
-
-.addtocartbutton.disabled {
-  background-color: rgb(170, 170, 170);
-  cursor: not-allowed;
-}
-.addtocartbutton.disabled:hover {
-  background-color: rgb(170, 170, 170);
-}
-
-.addtocartbutton:hover {
-  background-color: rgb(36, 124, 207);
-}
-
-.hover-button > .hover-section {
-  display: none;
-  position: absolute;
-  width: 325px;
-  margin-left: calc(-113.75px);
-  padding: 1rem;
-  color: black;
-}
-
-.hover-button:hover > .hover-section {
-  display: flex;
-  justify-content: center;
-}
-
-.hover-data {
-  border-radius: 8px;
-  padding: 1rem;
-  box-shadow: 0px 2px 5px 2px rgb(173, 173, 173);
-  background-color: white;
-}
-
-.hover-data > div {
-  display: flex;
-  flex-direction: column;
-  background-color: rgb(203, 203, 203);
-  gap: 1px;
-}
-
-.tieredpricingbutton {
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  align-items: flex-start;
-  text-align: left;
-  padding: 4px 0.5rem 8px;
-  background-color: white;
-  transition: all 0.3s;
-}
-
-.tieredpricingbutton:hover {
-  background-color: rgb(233, 233, 233);
-}
+.card {
+  display: flex;
+  gap: 0.5rem;
+  flex-direction: column;
+  border-radius: 8px;
+  padding: 1rem;
+  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
+  transition: all 0.3s 0.1s;
+  cursor: pointer;
+}
+
+.card:hover {
+  box-shadow: 0px 2px 5px 2px #dfdfdfff;
+  transition: all 0.3s 0s;
+}
+
+.card-section {
+  display: flex;
+  gap: 8px;
+  flex-direction: column;
+  align-items: center;
+}
+
+.image-container {
+  width: 100%;
+  background-color: #ccc;
+  border-radius: 4px;
+  aspect-ratio: 1.5;
+}
+
+.button-section {
+  display: flex;
+  justify-content: space-around;
+  flex-direction: row;
+  flex-wrap: wrap;
+  margin: 4px 2rem 0px;
+  gap: 0.5rem;
+}
+
+.addtocartbutton {
+  color: white;
+  background-color: rgb(39, 138, 230);
+  padding: 4px 16px 6px;
+  border-radius: 8px;
+  outline: none;
+  transition: all 0.3s;
+}
+
+.addtocartbutton.red {
+  background-color: rgb(230, 39, 39);
+}
+
+.addtocartbutton.disabled {
+  background-color: rgb(170, 170, 170);
+  cursor: not-allowed;
+}
+.addtocartbutton.disabled:hover {
+  background-color: rgb(170, 170, 170);
+}
+
+.addtocartbutton:hover {
+  background-color: rgb(36, 124, 207);
+}
+
+.hover-button > .hover-section {
+  display: none;
+  position: absolute;
+  width: 325px;
+  margin-left: calc(-113.75px);
+  padding: 1rem;
+  color: black;
+}
+
+.hover-button:hover > .hover-section {
+  display: flex;
+  justify-content: center;
+}
+
+.hover-data {
+  border-radius: 8px;
+  padding: 1rem;
+  box-shadow: 0px 2px 5px 2px rgb(173, 173, 173);
+  background-color: white;
+}
+
+.hover-data > div {
+  display: flex;
+  flex-direction: column;
+  background-color: rgb(203, 203, 203);
+  gap: 1px;
+}
+
+.tieredpricingbutton {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+  text-align: left;
+  padding: 4px 0.5rem 8px;
+  background-color: white;
+  transition: all 0.3s;
+}
+
+.tieredpricingbutton:hover {
+  background-color: rgb(233, 233, 233);
+}

package/src/checkout/ReviewCartAndCalculateTaxes.css

@@ -1,93 +1,93 @@
-.two-col {
-  display: flex;
-  /* grid-template-columns: 1fr 1fr; */
-  margin-top: 2rem;
-  align-items: flex-start;
-}
-
-.two-col > * {
-  width: 50%;
-}
-
-.checkout-list {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 1rem;
-  padding: 8px 4px;
-  margin-top: 1rem;
-  max-height: 50vh;
-  overflow: auto;
-}
-
-@keyframes cardanimate {
-  0% {
-    box-shadow: 0px 2px 5px 2px #dfdfdfff;
-  }
-  50% {
-    box-shadow: 0px 0px 0px 0px #ffffff00;
-  }
-  100% {
-    box-shadow: 0px 2px 5px 2px #dfdfdfff;
-  }
-}
-
-.skeleton-card {
-  min-height: 318px;
-  border-radius: 8px;
-  box-shadow: 0px 2px 5px 2px #dfdfdfff;
-  animation: cardanimate 1.25s linear infinite;
-}
-
-#status-bar {
-  display: flex;
-  flex-direction: row;
-  gap: 1rem;
-  align-items: center;
-  margin-left: -29px;
-  margin-bottom: 1rem;
-  margin-top: 2rem;
-  font-size: 18px;
-  font-weight: 600;
-}
-
-.status-bar {
-  width: 200px;
-  height: 6px;
-  background: linear-gradient(
-    90deg,
-    rgb(40, 130, 213) 0%,
-    rgb(40, 130, 213) 50%,
-    lightgrey 50%,
-    lightgrey 100%
-  );
-  background-position: 100% 0;
-  transition: color 0.3s 0s; /* active -> inactive */
-  background-size: 200% 100%;
-  border-radius: 16px;
-}
-
-.status-bar.active {
-  background-position: 0 0;
-  transition: background-position 0.75s; /* inactive -> active */
-}
-
-.status-text {
-  color: lightgrey;
-  transition: color 0.3s 0s; /* active -> inactive */
-}
-
-.status-text.active {
-  color: rgb(40, 130, 213);
-  transition: color 0.5s 0.65s; /* inactive -> active */
-}
-
-.shopping-button {
-  color: white;
-  background-color: rgb(39, 138, 230);
-  padding: 4px 16px 6px;
-  border-radius: 8px;
-  outline: none;
-  transition: all 0.3s;
-  text-decoration: none;
-}
+.two-col {
+  display: flex;
+  /* grid-template-columns: 1fr 1fr; */
+  margin-top: 2rem;
+  align-items: flex-start;
+}
+
+.two-col > * {
+  width: 50%;
+}
+
+.checkout-list {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+  padding: 8px 4px;
+  margin-top: 1rem;
+  max-height: 50vh;
+  overflow: auto;
+}
+
+@keyframes cardanimate {
+  0% {
+    box-shadow: 0px 2px 5px 2px #dfdfdfff;
+  }
+  50% {
+    box-shadow: 0px 0px 0px 0px #ffffff00;
+  }
+  100% {
+    box-shadow: 0px 2px 5px 2px #dfdfdfff;
+  }
+}
+
+.skeleton-card {
+  min-height: 318px;
+  border-radius: 8px;
+  box-shadow: 0px 2px 5px 2px #dfdfdfff;
+  animation: cardanimate 1.25s linear infinite;
+}
+
+#status-bar {
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+  align-items: center;
+  margin-left: -29px;
+  margin-bottom: 1rem;
+  margin-top: 2rem;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.status-bar {
+  width: 200px;
+  height: 6px;
+  background: linear-gradient(
+    90deg,
+    rgb(40, 130, 213) 0%,
+    rgb(40, 130, 213) 50%,
+    lightgrey 50%,
+    lightgrey 100%
+  );
+  background-position: 100% 0;
+  transition: color 0.3s 0s; /* active -> inactive */
+  background-size: 200% 100%;
+  border-radius: 16px;
+}
+
+.status-bar.active {
+  background-position: 0 0;
+  transition: background-position 0.75s; /* inactive -> active */
+}
+
+.status-text {
+  color: lightgrey;
+  transition: color 0.3s 0s; /* active -> inactive */
+}
+
+.status-text.active {
+  color: rgb(40, 130, 213);
+  transition: color 0.5s 0.65s; /* inactive -> active */
+}
+
+.shopping-button {
+  color: white;
+  background-color: rgb(39, 138, 230);
+  padding: 4px 16px 6px;
+  border-radius: 8px;
+  outline: none;
+  transition: all 0.3s;
+  text-decoration: none;
+}