Skip to content
This repository was archived by the owner on Mar 3, 2023. It is now read-only.

Commit 2bb8c81

Browse files
frehnerJaKXz
frehner
and
JaKXz
authored
Migrate cartlinequantityadjustbutton (#180)
* Start migration of CartLineQuantityAdjustButton Co-Authored-By: Jason Kurian <[email protected]> * Get CartLineQuantity typescript tests passing * Update tests for CartLineQuantityAdjustButton to use RTL Fix a couple instances of unnecessary "data-testId" camel casing. Update BuyNowButton tests to use a shared utility Co-Authored-By: Jason Kurian <[email protected]> * Add attributes to linesUpdate() so that they're not lost When adjusting the quantity. * Add documentation for the components * Update docs icons * Small update to PR template * Allow dev to disable manually if they want. * Make the typing DX better for these keys --------- Co-authored-by: Jason Kurian <[email protected]>
1 parent ee2d134 commit 2bb8c81

20 files changed

+902
-214
lines changed

‎.changeset/sharp-walls-perform.md

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
---
2+
'@shopify/hydrogen-react': patch
3+
---
4+
5+
Adding `<CartLineQuantity />` and `<CartLineQuantityAdjustButton />`
6+
7+
The `<CartLineQuantity />` and `<CartLineQuantityAdjustButton />` components have been added / migrated over from Hydrogen v1.
8+
9+
Additionally, fixed a bug when using `<CartLineQuantityAdjustButton />` that caused CartLine Attributes to be erased. CartLine Attributes should now be persisted when using that component.
10+
11+
## `useCartLine()` TypeScript types update
12+
13+
`useCartLine()`'s TypeScript type originally returned a `CartLine`. It has now been updated to be `PartialDeep<CartLine>`, which makes all the properties optional instead of required. This matches with the rest of hydrogen-react in that we can't know or guarnatee what properties exist on certain objects so we reflect that state in the TypeScript types.

‎.github/PULL_REQUEST_TEMPLATE.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212

1313
### Before submitting the PR, please make sure you do the following:
1414

15-
- [ ] Read the [Contributing Guidelines](https://github.com/shopify/hydrogen-react/blob/main/contributing.md)
15+
- [ ] Read the [Contributing Guidelines](https://github.com/Shopify/hydrogen-react/blob/main/CONTRIBUTING.md)
1616
- [ ] Provide a description in this PR that addresses **what** the PR is solving, or reference the issue that it solves (e.g. `fixes #123`)
17-
- [ ] Update docs in this repository according to your change
17+
- [ ] Update docs in this repository according to your change, and run `yarn build-docs` in the `packages/react` folder.
1818
- [ ] Run `yarn changeset add` if this PR cause a version bump based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/). If you have a breaking change, it will need to wait until the next major version release. Otherwise, use patch updates even for new features. Read [more about Hydrogen React's versioning](https://github.com/shopify/hydrogen-react/blob/main/readme.md#versioning).

‎packages/react/docs/generated/generated_docs_data.json

+312-179
Large diffs are not rendered by default.

‎packages/react/src/BuyNowButton.test.tsx

+11-23
Original file line numberDiff line numberDiff line change
@@ -3,24 +3,10 @@ import {render, screen} from '@testing-library/react';
33
import {vi} from 'vitest';
44
import userEvent from '@testing-library/user-event';
55
import {BuyNowButton} from './BuyNowButton.js';
6+
import {getCartWithActionsMock} from './CartProvider.test.helpers.js';
67

78
vi.mock('./CartProvider');
89

9-
const defaultCart = {
10-
buyerIdentityUpdate: vi.fn(),
11-
cartAttributesUpdate: vi.fn(),
12-
cartCreate: vi.fn(),
13-
cartFragment: '',
14-
checkoutUrl: '',
15-
discountCodesUpdate: vi.fn(),
16-
linesAdd: vi.fn(),
17-
linesRemove: vi.fn(),
18-
linesUpdate: vi.fn(),
19-
noteUpdate: vi.fn(),
20-
status: 'idle' as const,
21-
totalQuantity: 0,
22-
};
23-
2410
describe('<BuyNowButton/>', () => {
2511
it('renders a button', () => {
2612
render(<BuyNowButton variantId="1">Buy now</BuyNowButton>, {
@@ -59,10 +45,11 @@ describe('<BuyNowButton/>', () => {
5945
it('uses useCartCreateCallback with the correct arguments', async () => {
6046
const mockCartCreate = vi.fn();
6147

62-
vi.mocked(useCart).mockImplementation(() => ({
63-
...defaultCart,
64-
cartCreate: mockCartCreate,
65-
}));
48+
vi.mocked(useCart).mockImplementation(() =>
49+
getCartWithActionsMock({
50+
cartCreate: mockCartCreate,
51+
})
52+
);
6653

6754
const user = userEvent.setup();
6855

@@ -133,10 +120,11 @@ describe('<BuyNowButton/>', () => {
133120
});
134121

135122
it('redirects to checkout', () => {
136-
vi.mocked(useCart).mockImplementation(() => ({
137-
...defaultCart,
138-
checkoutUrl: '/checkout?id=123',
139-
}));
123+
vi.mocked(useCart).mockImplementation(() =>
124+
getCartWithActionsMock({
125+
checkoutUrl: '/checkout?id=123',
126+
})
127+
);
140128

141129
render(<BuyNowButton variantId="1">Buy now</BuyNowButton>, {
142130
wrapper: CartProvider,

‎packages/react/src/CartLineProvider.test.tsx

+1-4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import {renderHook} from '@testing-library/react';
2-
import {CartLine} from './storefront-api-types.js';
32
import {useCartLine, CartLineProvider} from './CartLineProvider.js';
43
import {getCartLineMock} from './CartProvider.test.helpers.js';
54

@@ -8,9 +7,7 @@ it('provides a hook to access cart line data', () => {
87

98
const {result} = renderHook(() => useCartLine(), {
109
wrapper: ({children}) => (
11-
<CartLineProvider line={cartLine as CartLine}>
12-
{children}
13-
</CartLineProvider>
10+
<CartLineProvider line={cartLine}>{children}</CartLineProvider>
1411
),
1512
});
1613

‎packages/react/src/CartLineProvider.tsx

+6-3
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,15 @@
11
import {useContext, createContext, type ReactNode} from 'react';
22
import type {CartLine} from './storefront-api-types.js';
3+
import type {PartialDeep} from 'type-fest';
34

4-
export const CartLineContext = createContext<CartLine | null>(null);
5+
type CartLinePartialDeep = PartialDeep<CartLine, {recurseIntoArrays: true}>;
6+
7+
export const CartLineContext = createContext<CartLinePartialDeep | null>(null);
58

69
/**
710
* The `useCartLine` hook provides access to the [CartLine object](https://shopify.dev/api/storefront/unstable/objects/cartline) from the Storefront API. It must be a descendent of a `CartProvider` component.
811
*/
9-
export function useCartLine(): CartLine {
12+
export function useCartLine(): CartLinePartialDeep {
1013
const context = useContext(CartLineContext);
1114

1215
if (context == null) {
@@ -20,7 +23,7 @@ type CartLineProviderProps = {
2023
/** Any `ReactNode` elements. */
2124
children: ReactNode;
2225
/** A cart line object. */
23-
line: CartLine;
26+
line: CartLinePartialDeep;
2427
};
2528

2629
/**

‎packages/react/src/CartLineQuantity.doc.ts

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
2+
3+
const data: ReferenceEntityTemplateSchema = {
4+
name: 'CartLineQuantity',
5+
category: 'components',
6+
isVisualComponent: false,
7+
related: [
8+
{
9+
name: 'useCartLine',
10+
type: 'gear',
11+
url: '/api/hydrogen-react/hooks/useCartLine',
12+
},
13+
{
14+
name: 'CartLineQuantityAdjustButton',
15+
type: 'component',
16+
url: '/api/hydrogen-react/components/CartLineQuantityAdjustButton',
17+
},
18+
],
19+
description: `
20+
The \`<CartLineQuantity/>\` component renders a \`span\` (or another element / component that can be customized by the \`as\` prop) with the cart line's quantity.\n\nIt must be a descendent of a \`<CartLineProvider/>\` component, and uses the \`useCartLine()\` hook internally.
21+
`,
22+
type: 'component',
23+
defaultExample: {
24+
description: 'I am the default example',
25+
codeblock: {
26+
tabs: [
27+
{
28+
title: 'JavaScript',
29+
code: './CartLineQuantity.example.jsx',
30+
language: 'jsx',
31+
},
32+
{
33+
title: 'TypeScript',
34+
code: './CartLineQuantity.example.tsx',
35+
language: 'tsx',
36+
},
37+
],
38+
title: 'Example code',
39+
},
40+
},
41+
definitions: [
42+
{
43+
title: 'Props',
44+
type: 'CartLineQuantityBaseProps',
45+
description: '',
46+
},
47+
],
48+
};
49+
50+
export default data;

‎packages/react/src/CartLineQuantity.example.jsx

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import {CartLineQuantity, CartLineProvider} from '@shopify/hydrogen-react';
2+
3+
export function Example({line}) {
4+
return (
5+
<CartLineProvider line={line}>
6+
<CartLineQuantity />
7+
</CartLineProvider>
8+
);
9+
}

‎packages/react/src/CartLineQuantity.example.tsx

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import {CartLineQuantity, CartLineProvider} from '@shopify/hydrogen-react';
2+
import type {CartLine} from '@shopify/hydrogen-react/storefront-api-types';
3+
4+
export function Example({line}: {line: CartLine}) {
5+
return (
6+
<CartLineProvider line={line}>
7+
<CartLineQuantity />
8+
</CartLineProvider>
9+
);
10+
}

‎packages/react/src/CartLineQuantity.test.tsx

+59
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import {render, screen} from '@testing-library/react';
2+
import {CartLineProvider} from './CartLineProvider.js';
3+
import {CartLineQuantity} from './CartLineQuantity.js';
4+
import {CART_LINE} from './CartProvider.test.helpers.js';
5+
6+
describe('<CartLineQuantity />', () => {
7+
it('displays the quantity', () => {
8+
render(
9+
<CartLineProvider line={CART_LINE}>
10+
<CartLineQuantity />
11+
</CartLineProvider>
12+
);
13+
14+
expect(screen.getByText(CART_LINE?.quantity ?? '')).toBeInTheDocument();
15+
});
16+
17+
it('allows a custom tag', () => {
18+
render(
19+
<CartLineProvider line={CART_LINE}>
20+
<CartLineQuantity as="p" />
21+
</CartLineProvider>
22+
);
23+
24+
const quantity = screen.getByText(CART_LINE?.quantity ?? '');
25+
26+
expect(quantity).toBeInTheDocument();
27+
expect(quantity.tagName).toBe('P');
28+
});
29+
30+
describe(`typescript validation`, () => {
31+
it.skip(`validates props for a component passed to the 'as' prop`, () => {
32+
expect.assertions(0);
33+
render(
34+
<CartLineProvider line={CART_LINE}>
35+
<CartLineQuantity as={FakeComponentWithRequiredProp} testing />
36+
</CartLineProvider>
37+
);
38+
});
39+
40+
it.skip(`typescript validation: validates props for a component passed to the 'as' prop`, () => {
41+
expect.assertions(0);
42+
render(
43+
<CartLineProvider line={CART_LINE}>
44+
<CartLineQuantity
45+
as={FakeComponentWithRequiredProp}
46+
// @ts-expect-error Testing should be a boolean
47+
testing="alsdkjf"
48+
/>
49+
</CartLineProvider>
50+
);
51+
});
52+
});
53+
});
54+
55+
const FAKECOMPONENTID = 'fake-component';
56+
57+
function FakeComponentWithRequiredProp({testing}: {testing: boolean}) {
58+
return <div data-testid={FAKECOMPONENTID}>{testing}</div>;
59+
}

‎packages/react/src/CartLineQuantity.tsx

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import type {ComponentPropsWithoutRef, ElementType} from 'react';
2+
import {useCartLine} from './CartLineProvider.js';
3+
4+
interface CartLineQuantityBaseProps<
5+
ComponentGeneric extends ElementType = 'span'
6+
> {
7+
/** An HTML tag or React Component to be rendered as the base element wrapper. The default is `span`. */
8+
as?: ComponentGeneric;
9+
}
10+
11+
export type CartLineQuantityProps<ComponentGeneric extends ElementType> =
12+
CartLineQuantityBaseProps<ComponentGeneric> &
13+
Omit<
14+
ComponentPropsWithoutRef<ComponentGeneric>,
15+
keyof CartLineQuantityBaseProps<ComponentGeneric>
16+
>;
17+
18+
/**
19+
* The `<CartLineQuantity/>` component renders a `span` (or another element / component that can be customized by the `as` prop) with the cart line's quantity.
20+
*
21+
* It must be a descendent of a `<CartLineProvider/>` component, and uses the `useCartLine()` hook internally.
22+
*/
23+
export function CartLineQuantity<ComponentGeneric extends ElementType = 'span'>(
24+
props: CartLineQuantityProps<ComponentGeneric>
25+
): JSX.Element {
26+
const cartLine = useCartLine();
27+
const {as, ...passthroughProps} = props;
28+
29+
const Wrapper = as ? as : 'span';
30+
31+
return <Wrapper {...passthroughProps}>{cartLine.quantity}</Wrapper>;
32+
}

‎packages/react/src/CartLineQuantityAdjustButton.doc.ts

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs';
2+
3+
const data: ReferenceEntityTemplateSchema = {
4+
name: 'CartLineQuantityAdjustButton',
5+
category: 'components',
6+
isVisualComponent: false,
7+
related: [
8+
{
9+
name: 'useCartLine',
10+
type: 'gear',
11+
url: '/api/hydrogen-react/hooks/useCartLine',
12+
},
13+
{
14+
name: 'CartLineQuantity',
15+
type: 'component',
16+
url: '/api/hydrogen-react/components/CartLineQuantity',
17+
},
18+
],
19+
description: `
20+
The \`<CartLineQuantityAdjustButton/>\` component renders a \`span\` (or another element / component that can be customized by the \`as\` prop) with the cart line's quantity.\n\nIt must be a descendent of a \`<CartLineProvider/>\` component, and uses the \`useCartLine()\` hook internally.
21+
`,
22+
type: 'component',
23+
defaultExample: {
24+
description: 'I am the default example',
25+
codeblock: {
26+
tabs: [
27+
{
28+
title: 'JavaScript',
29+
code: './CartLineQuantityAdjustButton.example.jsx',
30+
language: 'jsx',
31+
},
32+
{
33+
title: 'TypeScript',
34+
code: './CartLineQuantityAdjustButton.example.tsx',
35+
language: 'tsx',
36+
},
37+
],
38+
title: 'Example code',
39+
},
40+
},
41+
definitions: [
42+
{
43+
title: 'Props',
44+
type: 'CartLineQuantityAdjustButtonBaseProps',
45+
description: '',
46+
},
47+
],
48+
};
49+
50+
export default data;

‎packages/react/src/CartLineQuantityAdjustButton.example.jsx

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import {
2+
CartLineQuantityAdjustButton,
3+
CartLineProvider,
4+
CartProvider,
5+
} from '@shopify/hydrogen-react';
6+
7+
export function Example({line}) {
8+
return (
9+
<CartProvider>
10+
<CartLineProvider line={line}>
11+
<CartLineQuantityAdjustButton adjust="increase">
12+
Increase
13+
</CartLineQuantityAdjustButton>
14+
<CartLineQuantityAdjustButton adjust="decrease">
15+
Decrease
16+
</CartLineQuantityAdjustButton>
17+
<CartLineQuantityAdjustButton adjust="remove">
18+
Remove
19+
</CartLineQuantityAdjustButton>
20+
</CartLineProvider>
21+
</CartProvider>
22+
);
23+
}

‎packages/react/src/CartLineQuantityAdjustButton.example.tsx

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import {
2+
CartLineQuantityAdjustButton,
3+
CartLineProvider,
4+
CartProvider,
5+
} from '@shopify/hydrogen-react';
6+
import type {CartLine} from '@shopify/hydrogen-react/storefront-api-types';
7+
8+
export function Example({line}: {line: CartLine}) {
9+
return (
10+
<CartProvider>
11+
<CartLineProvider line={line}>
12+
<CartLineQuantityAdjustButton adjust="increase">
13+
Increase
14+
</CartLineQuantityAdjustButton>
15+
<CartLineQuantityAdjustButton adjust="decrease">
16+
Decrease
17+
</CartLineQuantityAdjustButton>
18+
<CartLineQuantityAdjustButton adjust="remove">
19+
Remove
20+
</CartLineQuantityAdjustButton>
21+
</CartLineProvider>
22+
</CartProvider>
23+
);
24+
}

0 commit comments

Comments
 (0)