docs(docs): 📝 add docs website

.eslintignore

@@ -3,3 +3,4 @@ coverage
 lib
 node_modules
 pnpm-lock.yaml
+docs

.markdownlintignore

@@ -2,3 +2,4 @@
 CHANGELOG.md
 lib/
 node_modules/
+docs/

.prettierignore

@@ -2,3 +2,4 @@
 coverage/
 lib/
 pnpm-lock.yaml
+docs/

docs/.gitignore

@@ -0,0 +1,3 @@
+.next
+node_modules
+.github

docs/components/floatingButton.tsx

@@ -0,0 +1,25 @@
+import {useCart, withSSR} from 'cart'
+import { ShoppingCart } from "lucide-react";
+import React from 'react';
+
+export const FloatingButton = () => {
+    const cart = withSSR(useCart, (state) => state);
+
+  return (
+    <div className="fixed bottom-0 right-0 p-6 z-50 cursor-pointer">
+    {cart?.cartItems?.length! > 0 && (
+      <div
+        className="bg-blue-500 hover:bg-blue-700 rounded-full text-white font-bold py-4 px-4 relative"
+        role="cart"
+        onClick={() => alert(cart?.cartItems?.length! > 0 ? "Items in the cart: " + JSON.stringify(cart?.cartItems, null, 2): "No Items in the cart")}
+      >
+        <ShoppingCart className="h-6 w-6" />
+        {cart?.cartItems?.length! > 0 && (
+          <div className="bg-red-500 absolute p-[7px] rounded-full top-0 right-0 text-white text-xs border-white border-2" />
+        )}
+      </div>
+    )}
+    </div>
+  )
+
+}

docs/components/mycart.tsx

@@ -0,0 +1,105 @@
+'use client';
+
+import { type CartItems, type CartState, useCart, withSSR } from 'cart';
+import React from 'react';
+
+import {FloatingButton} from "./floatingButton"
+
+interface Product {
+  name: string;
+  price: number;
+  productId: string;
+}
+
+const products: Product[] = [
+  {
+    name: 'Product 1',
+    price: 10,
+    productId: '123',
+  },
+  {
+    name: 'Product 2',
+    price: 15,
+    productId: '456',
+  },
+  {
+    name: 'Product 3',
+    price: 20,
+    productId: '789',
+  },
+];
+
+export function MyCart() {
+  const cart = withSSR(useCart, (state) => state);
+
+  const handleToggle = () => {
+    cart?.toggleCart?.();
+  };
+
+  const addItem = (product: CartItems) => {
+    cart?.addToCart?.(product);
+  };
+
+  const subtractItem = (productId: string) => {
+    cart?.decreaseItem?.(productId, 1);
+  };
+
+  return (
+    <>
+    <FloatingButton />
+    <div className="max-w-xs mx-auto p-4 bg-white rounded shadow-lg mt-4">
+      <p className="text-center text-xl font-semibold mb-4 text-gray-600">
+        Cart Status: {cart?.isCartOpen ? 'Open' : 'Closed'}
+      </p>
+      <div className="flex flex-col space-y-4 mb-4">
+
+        <button
+          className="bg-blue-500 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded"
+          onClick={() => handleToggle()}
+        >
+          Toggle Cart
+        </button>
+        <button
+          className="bg-red-500 hover:bg-red-700 text-white font-semibold py-2 px-4 rounded"
+          onClick={() => cart?.clearCart?.()}
+        >
+          Clear Cart
+        </button>
+        {products.map((product) => {
+          const cartItem = cart?.cartItems?.find(
+            (item) => item.productId === product.productId
+          );
+          const quantity = cartItem ? cartItem.quantity : 0;
+          const total = quantity * product.price;
+
+          return (
+            <div
+              className="flex items-center text-black"
+              key={product.productId}
+            >
+              <div className="flex-grow">
+                {product.name} - ${product.price} (x{quantity}) - ${total}
+              </div>
+              <div className='flex gap-2'>
+              <button
+                className="bg-green-500 hover:bg-green-700 text-white font-semibold py-2 px-4 rounded"
+               // @ts-ignore
+                onClick={() => addItem(product)}
+              >
+                +
+              </button>
+              <button
+                className="bg-yellow-500 hover:bg-yellow-700 text-white font-semibold py-2 px-4 rounded"
+                onClick={() => subtractItem(product.productId)}
+              >
+                -
+              </button>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+    </>
+  );
+}

docs/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

docs/next.config.js

@@ -0,0 +1,6 @@
+const withNextra = require('nextra')({
+  theme: 'nextra-theme-docs',
+  themeConfig: './theme.config.tsx',
+})
+
+module.exports = withNextra()

docs/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "nextra-docs-template",
+  "version": "0.0.1",
+  "description": "Nextra docs template",
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/shuding/nextra-docs-template.git"
+  },
+  "author": "Shu Ding <g@shud.in>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/shuding/nextra-docs-template/issues"
+  },
+  "homepage": "https://github.com/shuding/nextra-docs-template#readme",
+  "dependencies": {
+    "cart": "^1.1.1",
+    "lucide-react": "^0.279.0",
+    "next": "^13.0.6",
+    "nextra": "latest",
+    "nextra-theme-docs": "latest",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/node": "18.11.10",
+    "autoprefixer": "^10.4.16",
+    "postcss": "^8.4.30",
+    "tailwindcss": "^3.3.3",
+    "typescript": "^4.9.3"
+  }
+}

docs/pages/_app.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+import "../styles/globals.css";
+
+export default function MyApp({ Component, pageProps }) {
+	const getLayout = Component.getLayout ?? ((page) => page);
+
+	return getLayout(<Component {...pageProps} />);
+}

docs/pages/_meta.json

@@ -0,0 +1,6 @@
+{
+  "index": "Introduction",
+  "installation": "Installation",
+  "api-reference": "API Reference",
+  "usage": "Usage"
+}

docs/pages/api-reference.mdx

@@ -0,0 +1,14 @@
+# API Reference
+See what are the API is being exposed by the cart library
+
+| Name             | Type       | Default Value | Description                                                                                        | Example                                                                                                                                          |
+| ---------------- | ---------- | ------------- | -------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `isCartOpen`     | `boolean`  | `false`       | Indicates whether the cart is open or not.                                                         | `isCartOpen ? "Yes" : "No"`                                                                                                                      |
+| `toggleCart`     | `function` | -             | Toggles the visibility of the shopping cart.                                                       | `toggleCart();`                                                                                                                                  |
+| `openCart`       | `function` | -             | Sets the cart open state to `true`.                                                                | `openCart();`                                                                                                                                    |
+| `closeCart`      | `function` | -             | Sets the cart open state to `false`.                                                               | `closeCart();`                                                                                                                                   |
+| `cartItems`      | `array`    | `[]`          | An array of items in the cart.                                                                     | `cartItems.map((item) => ( <div key={item.productId}> <p>{item.name}</p> <p>Quantity: {item.quantity}</p> <p>Price: ${item.price}</p> </div> ))` |
+| `addToCart`      | `function` | -             | Adds an item to the shopping cart or updates its quantity if already in the cart.                  | `addToCart({ productId: 'product1', name: 'Product 1', quantity: 2, price: 20 });`                                                               |
+| `decreaseItem`   | `function` | -             | Decreases the quantity of an item in the shopping cart or removes it if the quantity becomes zero. | `decreaseItem('product1', 1);`                                                                                                                   |
+| `removeFromCart` | `function` | -             | Removes an item from the shopping cart.                                                            | `removeFromCart('product1');`                                                                                                                    |
+| `clearCart`      | `function` | -             | Clears all items from the shopping cart.                                                           | `clearCart();`                                                                                                                                   |

docs/pages/index.mdx

@@ -0,0 +1,18 @@
+# Introduction
+
+Welcome to Cart! 🛒 An Open Source Headless cart management library that does all the heavy lifting of managing the cart state, storing them in local storage, and even more.
+
+
+## What is Cart?
+
+
+An online shopping cart is like a virtual basket for your online purchases. It helps you add items, review them, and make payments easily. However, building one from scratch can be tough and time-consuming. It requires a lot of coding and might have more bugs or security issues.
+
+
+## Example
+
+> Please note that the cart library is a headless, means only the cart functions will be provided. No UI, No styles. Below one I created the UI for demo purpose. You can test using the below example.
+
+import {MyCart} from "../components/mycart.tsx"
+
+<MyCart />

docs/pages/installation.mdx

@@ -0,0 +1,17 @@
+# Installation
+
+A Cart library can be installed on your JavaScript projects including Reactjs, Nextjs and so on just with a single line of command.
+
+```bash
+# npm
+npm install cart --save
+
+# yarn
+yarn add cart
+
+#pnpm
+pnpm add cart
+
+# bun
+bun install cart
+```

docs/pages/usage/nextjs.mdx

@@ -0,0 +1,113 @@
+# Using with Nextjs
+
+### Intro
+Once you have done with the Installation, All you have to do is to Import `useCart` hook and `withSSR` in your Cart Component
+
+Then create a new file called `mycart.jsx` and use the below example code.
+
+> If you're using App Directory, make sure you have `"use client"` directive at the top.
+
+Feel free to remove the `types` if you're using JavaScript.
+
+### Example
+
+```tsx filename="mycart.tsx" copy
+'use client';
+
+import React from 'react';
+import { useCart, withSSR, type CartItems, type CartState } from 'cart';
+interface Product {
+  productId: string;
+  name: string;
+  price: number;
+}
+
+const products: Product[] = [
+  {
+    productId: '123',
+    name: 'Product 1',
+    price: 10,
+  },
+  {
+    productId: '456',
+    name: 'Product 2',
+    price: 15,
+  },
+  {
+    productId: '789',
+    name: 'Product 3',
+    price: 20,
+  },
+];
+
+export function MyCart() {
+  // For using with SSR, Wrap the useCart using withSSR like below 
+  const cart: CartState = withSSR(useCart, (state) => state);
+
+  const handleToggle = () => {
+    cart?.toggleCart?.();
+  };
+
+  const addItem = (product: CartItems) => {
+    cart?.addToCart?.(product);
+  };
+
+  const subtractItem = (productId: string) => {
+    cart?.decreaseItem?.(productId, 1);
+  };
+
+  return (
+    <div>
+      <p>
+        Cart Status: {cart?.isCartOpen ? 'Open' : 'Closed'}
+      </p>
+      <div>
+        {cart?.isCartOpen && (
+          <div>
+            <p>Cart Items:</p>
+            <pre>{JSON.stringify(cart?.cartItems, null, 2)}</pre>
+          </div>
+        )}
+        <button
+          onClick={() => handleToggle()}
+        >
+          Toggle Cart
+        </button>
+        <button
+          onClick={() => cart?.clearCart?.()}
+        >
+          Clear Cart
+        </button>
+        {products.map((product) => {
+          const cartItem = cart?.cartItems?.find(
+            (item) => item.productId === product.productId
+          );
+          const quantity = cartItem ? cartItem.quantity : 0;
+          const total = quantity * product.price;
+
+          return (
+            <div
+              key={product.productId}
+
+            >
+              <div className="flex-grow">
+                {product.name} - ${product.price} (x{quantity}) - ${total}
+              </div>
+              <button
+                onClick={() => addItem(product)}
+              >
+                +
+              </button>
+              <button
+                onClick={() => subtractItem(product.productId)}
+              >
+                -
+              </button>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+```