-
Notifications
You must be signed in to change notification settings - Fork 264
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Migrate cartlinequantityadjustbutton (#180)
* Start migration of CartLineQuantityAdjustButton Co-Authored-By: Jason Kurian <2642545+JaKXz@users.noreply.github.com> * 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 <2642545+JaKXz@users.noreply.github.com> * 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 <2642545+JaKXz@users.noreply.github.com>
- Loading branch information
Showing
20 changed files
with
902 additions
and
214 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
--- | ||
'@shopify/hydrogen-react': patch | ||
--- | ||
|
||
Adding `<CartLineQuantity />` and `<CartLineQuantityAdjustButton />` | ||
|
||
The `<CartLineQuantity />` and `<CartLineQuantityAdjustButton />` components have been added / migrated over from Hydrogen v1. | ||
|
||
Additionally, fixed a bug when using `<CartLineQuantityAdjustButton />` that caused CartLine Attributes to be erased. CartLine Attributes should now be persisted when using that component. | ||
|
||
## `useCartLine()` TypeScript types update | ||
|
||
`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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
491 changes: 312 additions & 179 deletions
491
packages/react/docs/generated/generated_docs_data.json
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,50 @@ | ||
import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; | ||
|
||
const data: ReferenceEntityTemplateSchema = { | ||
name: 'CartLineQuantity', | ||
category: 'components', | ||
isVisualComponent: false, | ||
related: [ | ||
{ | ||
name: 'useCartLine', | ||
type: 'gear', | ||
url: '/api/hydrogen-react/hooks/useCartLine', | ||
}, | ||
{ | ||
name: 'CartLineQuantityAdjustButton', | ||
type: 'component', | ||
url: '/api/hydrogen-react/components/CartLineQuantityAdjustButton', | ||
}, | ||
], | ||
description: ` | ||
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. | ||
`, | ||
type: 'component', | ||
defaultExample: { | ||
description: 'I am the default example', | ||
codeblock: { | ||
tabs: [ | ||
{ | ||
title: 'JavaScript', | ||
code: './CartLineQuantity.example.jsx', | ||
language: 'jsx', | ||
}, | ||
{ | ||
title: 'TypeScript', | ||
code: './CartLineQuantity.example.tsx', | ||
language: 'tsx', | ||
}, | ||
], | ||
title: 'Example code', | ||
}, | ||
}, | ||
definitions: [ | ||
{ | ||
title: 'Props', | ||
type: 'CartLineQuantityBaseProps', | ||
description: '', | ||
}, | ||
], | ||
}; | ||
|
||
export default data; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
import {CartLineQuantity, CartLineProvider} from '@shopify/hydrogen-react'; | ||
|
||
export function Example({line}) { | ||
return ( | ||
<CartLineProvider line={line}> | ||
<CartLineQuantity /> | ||
</CartLineProvider> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
import {CartLineQuantity, CartLineProvider} from '@shopify/hydrogen-react'; | ||
import type {CartLine} from '@shopify/hydrogen-react/storefront-api-types'; | ||
|
||
export function Example({line}: {line: CartLine}) { | ||
return ( | ||
<CartLineProvider line={line}> | ||
<CartLineQuantity /> | ||
</CartLineProvider> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,59 @@ | ||
import {render, screen} from '@testing-library/react'; | ||
import {CartLineProvider} from './CartLineProvider.js'; | ||
import {CartLineQuantity} from './CartLineQuantity.js'; | ||
import {CART_LINE} from './CartProvider.test.helpers.js'; | ||
|
||
describe('<CartLineQuantity />', () => { | ||
it('displays the quantity', () => { | ||
render( | ||
<CartLineProvider line={CART_LINE}> | ||
<CartLineQuantity /> | ||
</CartLineProvider> | ||
); | ||
|
||
expect(screen.getByText(CART_LINE?.quantity ?? '')).toBeInTheDocument(); | ||
}); | ||
|
||
it('allows a custom tag', () => { | ||
render( | ||
<CartLineProvider line={CART_LINE}> | ||
<CartLineQuantity as="p" /> | ||
</CartLineProvider> | ||
); | ||
|
||
const quantity = screen.getByText(CART_LINE?.quantity ?? ''); | ||
|
||
expect(quantity).toBeInTheDocument(); | ||
expect(quantity.tagName).toBe('P'); | ||
}); | ||
|
||
describe(`typescript validation`, () => { | ||
it.skip(`validates props for a component passed to the 'as' prop`, () => { | ||
expect.assertions(0); | ||
render( | ||
<CartLineProvider line={CART_LINE}> | ||
<CartLineQuantity as={FakeComponentWithRequiredProp} testing /> | ||
</CartLineProvider> | ||
); | ||
}); | ||
|
||
it.skip(`typescript validation: validates props for a component passed to the 'as' prop`, () => { | ||
expect.assertions(0); | ||
render( | ||
<CartLineProvider line={CART_LINE}> | ||
<CartLineQuantity | ||
as={FakeComponentWithRequiredProp} | ||
// @ts-expect-error Testing should be a boolean | ||
testing="alsdkjf" | ||
/> | ||
</CartLineProvider> | ||
); | ||
}); | ||
}); | ||
}); | ||
|
||
const FAKECOMPONENTID = 'fake-component'; | ||
|
||
function FakeComponentWithRequiredProp({testing}: {testing: boolean}) { | ||
return <div data-testid={FAKECOMPONENTID}>{testing}</div>; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,32 @@ | ||
import type {ComponentPropsWithoutRef, ElementType} from 'react'; | ||
import {useCartLine} from './CartLineProvider.js'; | ||
|
||
interface CartLineQuantityBaseProps< | ||
ComponentGeneric extends ElementType = 'span' | ||
> { | ||
/** An HTML tag or React Component to be rendered as the base element wrapper. The default is `span`. */ | ||
as?: ComponentGeneric; | ||
} | ||
|
||
export type CartLineQuantityProps<ComponentGeneric extends ElementType> = | ||
CartLineQuantityBaseProps<ComponentGeneric> & | ||
Omit< | ||
ComponentPropsWithoutRef<ComponentGeneric>, | ||
keyof CartLineQuantityBaseProps<ComponentGeneric> | ||
>; | ||
|
||
/** | ||
* The `<CartLineQuantity/>` component renders a `span` (or another element / component that can be customized by the `as` prop) with the cart line's quantity. | ||
* | ||
* It must be a descendent of a `<CartLineProvider/>` component, and uses the `useCartLine()` hook internally. | ||
*/ | ||
export function CartLineQuantity<ComponentGeneric extends ElementType = 'span'>( | ||
props: CartLineQuantityProps<ComponentGeneric> | ||
): JSX.Element { | ||
const cartLine = useCartLine(); | ||
const {as, ...passthroughProps} = props; | ||
|
||
const Wrapper = as ? as : 'span'; | ||
|
||
return <Wrapper {...passthroughProps}>{cartLine.quantity}</Wrapper>; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,50 @@ | ||
import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; | ||
|
||
const data: ReferenceEntityTemplateSchema = { | ||
name: 'CartLineQuantityAdjustButton', | ||
category: 'components', | ||
isVisualComponent: false, | ||
related: [ | ||
{ | ||
name: 'useCartLine', | ||
type: 'gear', | ||
url: '/api/hydrogen-react/hooks/useCartLine', | ||
}, | ||
{ | ||
name: 'CartLineQuantity', | ||
type: 'component', | ||
url: '/api/hydrogen-react/components/CartLineQuantity', | ||
}, | ||
], | ||
description: ` | ||
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. | ||
`, | ||
type: 'component', | ||
defaultExample: { | ||
description: 'I am the default example', | ||
codeblock: { | ||
tabs: [ | ||
{ | ||
title: 'JavaScript', | ||
code: './CartLineQuantityAdjustButton.example.jsx', | ||
language: 'jsx', | ||
}, | ||
{ | ||
title: 'TypeScript', | ||
code: './CartLineQuantityAdjustButton.example.tsx', | ||
language: 'tsx', | ||
}, | ||
], | ||
title: 'Example code', | ||
}, | ||
}, | ||
definitions: [ | ||
{ | ||
title: 'Props', | ||
type: 'CartLineQuantityAdjustButtonBaseProps', | ||
description: '', | ||
}, | ||
], | ||
}; | ||
|
||
export default data; |
23 changes: 23 additions & 0 deletions
23
packages/react/src/CartLineQuantityAdjustButton.example.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,23 @@ | ||
import { | ||
CartLineQuantityAdjustButton, | ||
CartLineProvider, | ||
CartProvider, | ||
} from '@shopify/hydrogen-react'; | ||
|
||
export function Example({line}) { | ||
return ( | ||
<CartProvider> | ||
<CartLineProvider line={line}> | ||
<CartLineQuantityAdjustButton adjust="increase"> | ||
Increase | ||
</CartLineQuantityAdjustButton> | ||
<CartLineQuantityAdjustButton adjust="decrease"> | ||
Decrease | ||
</CartLineQuantityAdjustButton> | ||
<CartLineQuantityAdjustButton adjust="remove"> | ||
Remove | ||
</CartLineQuantityAdjustButton> | ||
</CartLineProvider> | ||
</CartProvider> | ||
); | ||
} |
24 changes: 24 additions & 0 deletions
24
packages/react/src/CartLineQuantityAdjustButton.example.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,24 @@ | ||
import { | ||
CartLineQuantityAdjustButton, | ||
CartLineProvider, | ||
CartProvider, | ||
} from '@shopify/hydrogen-react'; | ||
import type {CartLine} from '@shopify/hydrogen-react/storefront-api-types'; | ||
|
||
export function Example({line}: {line: CartLine}) { | ||
return ( | ||
<CartProvider> | ||
<CartLineProvider line={line}> | ||
<CartLineQuantityAdjustButton adjust="increase"> | ||
Increase | ||
</CartLineQuantityAdjustButton> | ||
<CartLineQuantityAdjustButton adjust="decrease"> | ||
Decrease | ||
</CartLineQuantityAdjustButton> | ||
<CartLineQuantityAdjustButton adjust="remove"> | ||
Remove | ||
</CartLineQuantityAdjustButton> | ||
</CartLineProvider> | ||
</CartProvider> | ||
); | ||
} |
Oops, something went wrong.