Skip to content

Commit 0fbb8da

Browse files
dayhaysoosdayhaysoos
authored
migrated to pnpm, next-js example, fixed warning (#310)
* migrated to pnpm, next-js example, fixed warning * upgrade husky and add scripts that replace yarn commands * fixed types, set up pnpm to handle peer dependencies * remove husky from nextjs app * update github action workflow for pnpm * add docs to packages and give script to run docs for development * downgrade react-dom back to 17.2.0 * trying to resolve dependencies * omfg upgrading docusaurus worked * remove process from docusaurus * update lock file * ignoring gatsby, dev builds work again except for docs FML * use most recent webpack * exclude cra and gatsby from workspaces * get rid of gatsby and cra commands * update contributor doc * update package
1 parent 723cf1c commit 0fbb8da

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+26463
-25574
lines changed

‎.github/workflows/test-pull-requests.yml

Lines changed: 67 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ name: Tests
66

77
on:
88
pull_request:
9-
branches: [ master, next, dev ]
9+
branches: [master, next, dev]
1010

1111
jobs:
1212
test-package:
@@ -16,86 +16,84 @@ jobs:
1616
- macos-latest
1717
strategy:
1818
matrix:
19-
node_version: [ '12', '14', '16' ]
19+
node_version: ['12', '14', '16']
2020
steps:
21-
- uses: actions/checkout@v2
22-
# Set up Node and Yarn
23-
- uses: actions/setup-node@v2.2.0
24-
with:
25-
# Version Spec of the version to use. Examples: 12.x, 10.15.1, >=10.15.0
26-
node-version: ${{ matrix.node-version }}
27-
# Used to specify a package manager for caching in the default directory. Supported values: npm, yarn
28-
cache: yarn
21+
- uses: actions/checkout@v2
22+
# Set up Node and Yarn
23+
- uses: actions/setup-node@v2.2.0
24+
with:
25+
# Version Spec of the version to use. Examples: 12.x, 10.15.1, >=10.15.0
26+
node-version: ${{ matrix.node-version }}
27+
# Used to specify a package manager for caching in the default directory. Supported values: npm, yarn
28+
cache: yarn
2929

30-
# Caching for Yarn
31-
- id: yarn-cache-dir-path
32-
run: echo "::set-output name=dir::$(yarn cache dir)"
33-
- uses: actions/cache@v2
34-
id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
35-
with:
36-
path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
37-
key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
38-
restore-keys: |
39-
${{ runner.os }}-yarn-
30+
# Caching for Yarn
31+
- id: yarn-cache-dir-path
32+
run: echo "::set-output name=dir::$(yarn cache dir)"
33+
- uses: actions/cache@v2
34+
id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
35+
with:
36+
path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
37+
key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
38+
restore-keys: |
39+
${{ runner.os }}-yarn-
4040
41-
# Install dependencies
42-
- run: yarn workspace use-shopping-cart install --frozen-lockfile
43-
# Run integration and unit tests
44-
- run: yarn workspace use-shopping-cart test
45-
# Run TypeScript type definition tests
46-
- run: yarn workspace use-shopping-cart test:types
41+
# Install dependencies
42+
- run: pnpm install --frozen-lockfile
43+
# Run integration and unit tests
44+
- run: pnpm --filter use-shopping-cart run test
45+
# Run TypeScript type definition tests
46+
- run: pnpm --filter use-shopping-cart run test:types
4747

4848
build-package:
4949
name: Build
50-
runs-on:
51-
ubuntu-latest
50+
runs-on: ubuntu-latest
5251
steps:
53-
- uses: actions/checkout@v2
54-
- uses: actions/setup-node@v2
55-
with:
56-
node-version: 16
57-
cache: yarn
52+
- uses: actions/checkout@v2
53+
- uses: actions/setup-node@v2
54+
with:
55+
node-version: 16
56+
cache: yarn
57+
58+
# Caching for Yarn
59+
- id: yarn-cache-dir-path
60+
run: echo "::set-output name=dir::$(yarn cache dir)"
61+
- uses: actions/cache@v2
62+
id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
63+
with:
64+
path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
65+
key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
66+
restore-keys: |
67+
${{ runner.os }}-yarn-
5868
59-
# Caching for Yarn
60-
- id: yarn-cache-dir-path
61-
run: echo "::set-output name=dir::$(yarn cache dir)"
62-
- uses: actions/cache@v2
63-
id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
64-
with:
65-
path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
66-
key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
67-
restore-keys: |
68-
${{ runner.os }}-yarn-
69+
# Install dependencies
70+
- run: pnpm install
71+
# Build package
72+
- run: pnpm --filter use-shopping-cart run build
6973

70-
# Install dependencies
71-
- run: yarn workspace use-shopping-cart install --frozen-lockfile
72-
# Build package
73-
- run: yarn workspace use-shopping-cart build
74-
7574
lint-package:
7675
continue-on-error: true
7776
name: Lint
78-
runs-on:
79-
ubuntu-latest
77+
runs-on: ubuntu-latest
8078
steps:
81-
- uses: actions/checkout@v2
82-
- uses: actions/setup-node@v2
83-
with:
84-
node-version: 16
85-
cache: yarn
79+
- uses: actions/checkout@v2
80+
- uses: actions/setup-node@v2
81+
with:
82+
node-version: 16
83+
cache: yarn
8684

87-
# Caching for Yarn
88-
- id: yarn-cache-dir-path
89-
run: echo "::set-output name=dir::$(yarn cache dir)"
90-
- uses: actions/cache@v2
91-
id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
92-
with:
93-
path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
94-
key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
95-
restore-keys: |
96-
${{ runner.os }}-yarn-
85+
# Caching for Yarn
86+
- id: yarn-cache-dir-path
87+
run: echo "::set-output name=dir::$(yarn cache dir)"
88+
- uses: actions/cache@v2
89+
id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
90+
with:
91+
path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
92+
key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
93+
restore-keys: |
94+
${{ runner.os }}-yarn-
9795
98-
# Install dependencies
99-
- run: yarn workspace use-shopping-cart install --frozen-lockfile
100-
# Lint soure code
101-
- run: yarn workspace use-shopping-cart lint
96+
# Install dependencies
97+
- run: pnpm install --frozen-lockfile
98+
# Lint soure code
99+
- run: pnpm --filter use-shopping-cart run lint

‎.husky/pre-commit

Whitespace-only changes.

‎.npmrc

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
auto-install-peers=true

‎docs/package.json

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,11 @@
1111
"serve": "docusaurus serve"
1212
},
1313
"dependencies": {
14-
"@docusaurus/core": "2.0.0-alpha.70",
15-
"@docusaurus/preset-classic": "2.0.0-alpha.70",
14+
"@docusaurus/core": "2.3.1",
15+
"@docusaurus/preset-classic": "2.3.1",
1616
"@mdx-js/react": "^1.6.22",
1717
"clsx": "^1.1.1",
18+
"prism-react-renderer": "^1.3.5",
1819
"react": "^17.0.2",
1920
"react-dom": "^17.0.2",
2021
"use-shopping-cart": "3.1.0"
@@ -32,3 +33,4 @@
3233
]
3334
}
3435
}
36+

‎docs/src/components/landing-page/codeExamples.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1+
const process = {
2+
env: {
3+
URL: 'https://useshoppingcart.com'
4+
}
5+
}
6+
17
export const exampleProducts = `
28
[
39
{

‎docs/src/theme/Root.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ function Root({ children }) {
99
<CartProvider
1010
mode="payment"
1111
cartMode="checkout-session"
12-
stripe={process.env.REACT_APP_STRIPE_API_PUBLIC}
12+
stripe={''}
1313
billingAddressCollection={false}
1414
successUrl="https://stripe.com"
1515
cancelUrl="https://twitter.com/dayhaysoos"

‎examples/cra/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
"react-dom": "^17.0.2",
1111
"react-scripts": "^4.0.3",
1212
"theme-ui": "^0.10.0",
13-
"use-shopping-cart": "file:../../use-shopping-cart",
13+
"use-shopping-cart": "workspace:^3.1.4",
1414
"web-vitals": "^1.0.1"
1515
},
1616
"scripts": {

‎examples/gatsby/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
"react": "^17.0.2",
2020
"react-dom": "^17.0.2",
2121
"react-helmet": "^5.2.1",
22-
"use-shopping-cart": "*"
22+
"use-shopping-cart": "workspace:^3.1.4"
2323
},
2424
"keywords": [
2525
"gatsby"

‎examples/nextjs/.gitignore

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
8+
# testing
9+
/coverage
10+
11+
# next.js
12+
/.next/
13+
/out/
14+
15+
# production
16+
/build
17+
18+
# misc
19+
.DS_Store
20+
*.pem
21+
22+
# debug
23+
npm-debug.log*
24+
yarn-debug.log*
25+
yarn-error.log*
26+
.pnpm-debug.log*
27+
28+
# local env files
29+
.env*.local
30+
31+
# vercel
32+
.vercel

‎examples/nextjs/README.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
Resources used:
2+
- [Tabler icons](https://tabler-icons.io/) for shopping cart icon

‎examples/nextjs/components/CartItem.js

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { useShoppingCart } from "use-shopping-cart";
2+
import { formatCurrencyString } from "use-shopping-cart";
3+
import Image from "next/image";
4+
5+
export default function CartItem({ item }) {
6+
const { name, emoji, quantity, price } = item;
7+
const { removeItem } = useShoppingCart();
8+
9+
const removeItemFromCart = () => {
10+
removeItem(item.id);
11+
};
12+
13+
return (
14+
<div className="flex items-center gap-4 mb-3">
15+
<p className="text-4xl">{emoji}</p>
16+
<div>
17+
{name} <span className="text-xs">({quantity})</span>
18+
</div>
19+
<div className="ml-auto">
20+
{formatCurrencyString({ value: price, currency: "GBP" })}
21+
</div>
22+
<button
23+
onClick={() => removeItemFromCart()}
24+
className="hover:bg-emerald-50 transition-colors rounded-full duration-500 p-1"
25+
>
26+
<Image alt="delete icon" src="./trash.svg" width={20} height={20} />
27+
</button>
28+
</div>
29+
);
30+
}

‎examples/nextjs/components/CheckoutButton.js

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import { useState } from "react";
2+
import { useShoppingCart } from "use-shopping-cart";
3+
4+
export default function CheckoutButton() {
5+
const [status, setStatus] = useState("idle");
6+
const { redirectToCheckout, cartCount, totalPrice } = useShoppingCart();
7+
8+
async function handleClick(event) {
9+
event.preventDefault();
10+
if (cartCount > 0) {
11+
setStatus("loading");
12+
try {
13+
const result = await redirectToCheckout();
14+
if (result?.error) {
15+
console.error(result);
16+
setStatus("redirect-error");
17+
}
18+
} catch (error) {
19+
console.error(error);
20+
setStatus("redirect-error");
21+
}
22+
} else {
23+
setStatus("no-items");
24+
}
25+
}
26+
27+
return (
28+
<article className="mt-3 flex flex-col">
29+
<div className="text-red-700 text-xs mb-3 h-5 text-center">
30+
{totalPrice && totalPrice < 30
31+
? "You must have at least £0.30 in your basket"
32+
: cartCount && cartCount > 20
33+
? "You cannot have more than 20 items"
34+
: status === "redirect-error"
35+
? "Unable to redirect to Stripe checkout page"
36+
: status === "no-items"
37+
? "Please add some items to your cart"
38+
: null}
39+
</div>
40+
<button
41+
onClick={handleClick}
42+
className="bg-emerald-50 hover:bg-emerald-500 hover:text-white transition-colors duration-500 text-emerald-500 py-3 px-5 rounded-md w-100 disabled:bg-slate-300 disabled:cursor-not-allowed disabled:text-white"
43+
disabled={
44+
(totalPrice && totalPrice < 30) ||
45+
(cartCount && cartCount > 20) ||
46+
status == "no-items"
47+
? true
48+
: false
49+
}
50+
>
51+
{status !== "loading" ? "Proceed to checkout" : "Loading..."}
52+
</button>
53+
</article>
54+
);
55+
}

‎examples/nextjs/components/Layout.js

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import Head from "next/head";
2+
import NavBar from "./NavBar";
3+
4+
export default function Layout({ children }) {
5+
return (
6+
<>
7+
<Head>
8+
<title>fresh</title>
9+
<meta
10+
name="description"
11+
content="A simple website to show how to use use-shopping-cart"
12+
/>
13+
<meta name="viewport" content="width=device-width, initial-scale=1" />
14+
<link rel="icon" href="/favicon.ico" />
15+
</Head>
16+
<NavBar />
17+
<main className="bg-[#f8f7f5] min-h-[calc(100vh-76px)] px-10 py-8">
18+
<div className="container md:mx-auto md:max-w-[850px]">{children}</div>
19+
</main>
20+
</>
21+
);
22+
}

‎examples/nextjs/components/NavBar.js

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { useShoppingCart } from "use-shopping-cart";
2+
import Image from "next/image";
3+
import Link from "next/link";
4+
import ShoppingCart from "./ShoppingCart";
5+
6+
export default function NavBar() {
7+
const { handleCartClick, cartCount } = useShoppingCart();
8+
return (
9+
<nav className="py-5 px-12 flex justify-between">
10+
<Link href="/">
11+
<p className="bg-white text-3xl font-bold underline underline-offset-4 decoration-wavy decoration-2 decoration-emerald-500">
12+
fresh
13+
</p>
14+
</Link>
15+
<button className="relative" onClick={() => handleCartClick()}>
16+
<Image
17+
src="./cart.svg"
18+
width={40}
19+
height={40}
20+
alt="shopping cart icon"
21+
/>
22+
<div className="rounded-full flex justify-center items-center bg-emerald-500 text-xs text-white absolute w-6 h-5 bottom-6 -right-1">
23+
{cartCount}
24+
</div>
25+
</button>
26+
<ShoppingCart />
27+
</nav>
28+
);
29+
}

0 commit comments

Comments
 (0)