@shopify/hydrogen-react 0.0.0-next-9b64572 → 0.0.0-next-f20525d
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +23 -0
- package/dist/browser-dev/AddToCartButton.mjs.map +1 -1
- package/dist/browser-dev/codegen.helpers.mjs +12 -0
- package/dist/browser-dev/codegen.helpers.mjs.map +1 -0
- package/dist/browser-dev/index.mjs +2 -0
- package/dist/browser-dev/index.mjs.map +1 -1
- package/dist/browser-prod/AddToCartButton.mjs.map +1 -1
- package/dist/browser-prod/codegen.helpers.mjs +12 -0
- package/dist/browser-prod/codegen.helpers.mjs.map +1 -0
- package/dist/browser-prod/index.mjs +2 -0
- package/dist/browser-prod/index.mjs.map +1 -1
- package/dist/node-dev/AddToCartButton.js.map +1 -1
- package/dist/node-dev/AddToCartButton.mjs.map +1 -1
- package/dist/node-dev/codegen.helpers.js +12 -0
- package/dist/node-dev/codegen.helpers.js.map +1 -0
- package/dist/node-dev/codegen.helpers.mjs +12 -0
- package/dist/node-dev/codegen.helpers.mjs.map +1 -0
- package/dist/node-dev/index.js +2 -0
- package/dist/node-dev/index.js.map +1 -1
- package/dist/node-dev/index.mjs +2 -0
- package/dist/node-dev/index.mjs.map +1 -1
- package/dist/node-prod/AddToCartButton.js.map +1 -1
- package/dist/node-prod/AddToCartButton.mjs.map +1 -1
- package/dist/node-prod/codegen.helpers.js +12 -0
- package/dist/node-prod/codegen.helpers.js.map +1 -0
- package/dist/node-prod/codegen.helpers.mjs +12 -0
- package/dist/node-prod/codegen.helpers.mjs.map +1 -0
- package/dist/node-prod/index.js +2 -0
- package/dist/node-prod/index.js.map +1 -1
- package/dist/node-prod/index.mjs +2 -0
- package/dist/node-prod/index.mjs.map +1 -1
- package/dist/types/AddToCartButton.d.ts +1 -2
- package/dist/types/codegen.helpers.d.ts +9 -0
- package/dist/types/index.d.cts +1 -0
- package/dist/types/index.d.ts +1 -0
- package/dist/types/storefront-api-types.d.ts +1 -1
- package/dist/umd/hydrogen-react.dev.js +9 -0
- package/dist/umd/hydrogen-react.dev.js.map +1 -1
- package/dist/umd/hydrogen-react.prod.js +8 -8
- package/dist/umd/hydrogen-react.prod.js.map +1 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -154,6 +154,29 @@ If you're having trouble getting it to work, then consult our [troubleshooting s
|
|
|
154
154
|
|
|
155
155
|
Improve your development experience by adding strong typing to Storefront API responses. The following are some options for doing this.
|
|
156
156
|
|
|
157
|
+
## GraphQL CodeGen
|
|
158
|
+
|
|
159
|
+
To use GraphQL CodeGen, follow [their guide](https://the-guild.dev/graphql/codegen/docs/getting-started/installation) to get started. Then, when you have a `codegen.ts` file, you can modify the following lines in the codegen object to improve the CodgeGen experience:
|
|
160
|
+
|
|
161
|
+
```ts
|
|
162
|
+
import {storefrontApiCustomScalars} from '@shopify/hydrogen-react';
|
|
163
|
+
|
|
164
|
+
const config: CodegenConfig = {
|
|
165
|
+
// Use the schema that's bundled with @shopify/hydrogen-react
|
|
166
|
+
schema: './node_modules/@shopify/hydrogen-react/storefront.schema.json',
|
|
167
|
+
generates: {
|
|
168
|
+
'./gql/': {
|
|
169
|
+
preset: 'client',
|
|
170
|
+
plugins: [],
|
|
171
|
+
config: {
|
|
172
|
+
// Use the custom scalar definitions that @shopify/hydrogen-react provides to improve the types
|
|
173
|
+
scalars: storefrontApiCustomScalars,
|
|
174
|
+
},
|
|
175
|
+
},
|
|
176
|
+
},
|
|
177
|
+
};
|
|
178
|
+
```
|
|
179
|
+
|
|
157
180
|
### Use the `StorefrontApiResponseError` and `StorefrontApiResponseOk` helpers
|
|
158
181
|
|
|
159
182
|
The following is an example:
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AddToCartButton.mjs","sources":["../../src/AddToCartButton.tsx"],"sourcesContent":["import {useCallback, useEffect, useState} from 'react';\n\nimport {useCart} from './CartProvider.js';\nimport {useProduct} from './ProductProvider.js';\nimport {BaseButton, BaseButtonProps} from './BaseButton.js';\n\
|
|
1
|
+
{"version":3,"file":"AddToCartButton.mjs","sources":["../../src/AddToCartButton.tsx"],"sourcesContent":["import {useCallback, useEffect, useState} from 'react';\n\nimport {useCart} from './CartProvider.js';\nimport {useProduct} from './ProductProvider.js';\nimport {BaseButton, BaseButtonProps} from './BaseButton.js';\n\nexport interface AddToCartButtonProps {\n /** An array of cart line attributes that belong to the item being added to the cart. */\n attributes?: {\n key: string;\n value: string;\n }[];\n /** The ID of the variant. */\n variantId?: string | null;\n /** The item quantity. */\n quantity?: number;\n /** The text that is announced by the screen reader when the item is being added to the cart. Used for accessibility purposes only and not displayed on the page. */\n accessibleAddingToCartLabel?: string;\n /** The selling plan ID of the subscription variant */\n sellingPlanId?: string;\n}\n\n/**\n * The `AddToCartButton` component renders a button that adds an item to the cart when pressed.\n * It must be a descendent of the `CartProvider` component.\n */\nexport function AddToCartButton<AsType extends React.ElementType = 'button'>(\n props: AddToCartButtonProps & BaseButtonProps<AsType>\n) {\n const [addingItem, setAddingItem] = useState<boolean>(false);\n const {\n variantId: explicitVariantId,\n quantity = 1,\n attributes,\n sellingPlanId,\n onClick,\n children,\n accessibleAddingToCartLabel,\n ...passthroughProps\n } = props;\n const {status, linesAdd} = useCart();\n const {selectedVariant} = useProduct();\n const variantId = explicitVariantId ?? selectedVariant?.id ?? '';\n const disabled =\n explicitVariantId === null ||\n variantId === '' ||\n selectedVariant === null ||\n addingItem ||\n passthroughProps.disabled;\n\n useEffect(() => {\n if (addingItem && status === 'idle') {\n setAddingItem(false);\n }\n }, [status, addingItem]);\n\n const handleAddItem = useCallback(() => {\n setAddingItem(true);\n linesAdd([\n {\n quantity,\n merchandiseId: variantId || '',\n attributes,\n sellingPlanId,\n },\n ]);\n }, [linesAdd, quantity, variantId, attributes, sellingPlanId]);\n\n return (\n <>\n <BaseButton\n {...passthroughProps}\n disabled={disabled}\n onClick={onClick}\n defaultOnClick={handleAddItem}\n >\n {children}\n </BaseButton>\n {accessibleAddingToCartLabel ? (\n <p\n style={{\n position: 'absolute',\n width: '1px',\n height: '1px',\n padding: '0',\n margin: '-1px',\n overflow: 'hidden',\n clip: 'rect(0, 0, 0, 0)',\n whiteSpace: 'nowrap',\n borderWidth: '0',\n }}\n role=\"alert\"\n aria-live=\"assertive\"\n >\n {addingItem ? accessibleAddingToCartLabel : null}\n </p>\n ) : null}\n </>\n );\n}\n"],"names":["AddToCartButton","props","addingItem","setAddingItem","useState","variantId","explicitVariantId","quantity","attributes","sellingPlanId","onClick","children","accessibleAddingToCartLabel","passthroughProps","status","linesAdd","useCart","selectedVariant","useProduct","id","disabled","useEffect","handleAddItem","useCallback","merchandiseId","_Fragment","_jsx","position","width","height","padding","margin","overflow","clip","whiteSpace","borderWidth"],"mappings":";;;;;AA0BO,SAASA,gBACdC,OACA;;AACA,QAAM,CAACC,YAAYC,aAAb,IAA8BC,SAAkB,KAAV;AACtC,QAAA;AAAA,IACJC,WAAWC;AAAAA,IACXC,WAAW;AAAA,IACXC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,OACGC;AAAAA,EACDZ,IAAAA;AACE,QAAA;AAAA,IAACa;AAAAA,IAAQC;AAAAA,MAAYC,QAA3B;AACM,QAAA;AAAA,IAACC;AAAAA,MAAmBC,WAA1B;AACMb,QAAAA,aAAYC,qDAAqBW,mDAAiBE,OAAtCb,YAA4C;AACxDc,QAAAA,WACJd,sBAAsB,QACtBD,cAAc,MACdY,oBAAoB,QACpBf,cACAW,iBAAiBO;AAEnBC,YAAU,MAAM;AACVnB,QAAAA,cAAcY,WAAW,QAAQ;AACnCX,oBAAc,KAAD;AAAA,IACd;AAAA,EAAA,GACA,CAACW,QAAQZ,UAAT,CAJM;AAMHoB,QAAAA,gBAAgBC,YAAY,MAAM;AACtCpB,kBAAc,IAAD;AACbY,aAAS,CACP;AAAA,MACER;AAAAA,MACAiB,eAAenB,aAAa;AAAA,MAC5BG;AAAAA,MACAC;AAAAA,IALK,CAAA,CAAD;AAAA,EAAA,GAQP,CAACM,UAAUR,UAAUF,WAAWG,YAAYC,aAA5C,CAV8B;AAYjC,8BACEgB,UAAA;AAAA,IAAA,UACE,CAAAC,oBAAC,YAAD;AAAA,MAAA,GACMb;AAAAA,MACJ;AAAA,MACA;AAAA,MACA,gBAAgBS;AAAAA,MAJlB;AAAA,IAAA,CADF,GASGV,8BACCc,oBAAA,KAAA;AAAA,MACE,OAAO;AAAA,QACLC,UAAU;AAAA,QACVC,OAAO;AAAA,QACPC,QAAQ;AAAA,QACRC,SAAS;AAAA,QACTC,QAAQ;AAAA,QACRC,UAAU;AAAA,QACVC,MAAM;AAAA,QACNC,YAAY;AAAA,QACZC,aAAa;AAAA,MATR;AAAA,MAWP,MAAK;AAAA,MACL,aAAU;AAAA,MAbZ,UAeGjC,aAAaU,8BAA8B;AAAA,IAf9C,CAAA,IAiBE,IA3BN;AAAA,EAAA,CADF;AA+BD;"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
const storefrontApiCustomScalars = {
|
|
2
|
+
DateTime: "string",
|
|
3
|
+
Decimal: "string",
|
|
4
|
+
HTML: "string",
|
|
5
|
+
URL: "string",
|
|
6
|
+
Color: "string",
|
|
7
|
+
UnsignedInt64: "string"
|
|
8
|
+
};
|
|
9
|
+
export {
|
|
10
|
+
storefrontApiCustomScalars
|
|
11
|
+
};
|
|
12
|
+
//# sourceMappingURL=codegen.helpers.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"codegen.helpers.mjs","sources":["../../src/codegen.helpers.ts"],"sourcesContent":["/** Meant to be used with GraphQL CodeGen to type the Storefront API's custom scalars correctly */\nexport const storefrontApiCustomScalars = {\n // Keep in sync with the definitions in the app/nextjs/codegen.ts!\n DateTime: 'string',\n Decimal: 'string',\n HTML: 'string',\n URL: 'string',\n Color: 'string',\n UnsignedInt64: 'string',\n};\n"],"names":[],"mappings":"AACO,MAAM,6BAA6B;AAAA,EAExC,UAAU;AAAA,EACV,SAAS;AAAA,EACT,MAAM;AAAA,EACN,KAAK;AAAA,EACL,OAAO;AAAA,EACP,eAAe;AACjB;"}
|
|
@@ -2,6 +2,7 @@ import { AddToCartButton } from "./AddToCartButton.mjs";
|
|
|
2
2
|
import { BuyNowButton } from "./BuyNowButton.mjs";
|
|
3
3
|
import { CartCheckoutButton } from "./CartCheckoutButton.mjs";
|
|
4
4
|
import { CartProvider, useCart } from "./CartProvider.mjs";
|
|
5
|
+
import { storefrontApiCustomScalars } from "./codegen.helpers.mjs";
|
|
5
6
|
import { ExternalVideo } from "./ExternalVideo.mjs";
|
|
6
7
|
import { flattenConnection } from "./flatten-connection.mjs";
|
|
7
8
|
import { Image } from "./Image.mjs";
|
|
@@ -38,6 +39,7 @@ export {
|
|
|
38
39
|
metafieldParser,
|
|
39
40
|
parseMetafield,
|
|
40
41
|
parseMetafieldValue,
|
|
42
|
+
storefrontApiCustomScalars,
|
|
41
43
|
useCart,
|
|
42
44
|
useMoney,
|
|
43
45
|
useProduct,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AddToCartButton.mjs","sources":["../../src/AddToCartButton.tsx"],"sourcesContent":["import {useCallback, useEffect, useState} from 'react';\n\nimport {useCart} from './CartProvider.js';\nimport {useProduct} from './ProductProvider.js';\nimport {BaseButton, BaseButtonProps} from './BaseButton.js';\n\
|
|
1
|
+
{"version":3,"file":"AddToCartButton.mjs","sources":["../../src/AddToCartButton.tsx"],"sourcesContent":["import {useCallback, useEffect, useState} from 'react';\n\nimport {useCart} from './CartProvider.js';\nimport {useProduct} from './ProductProvider.js';\nimport {BaseButton, BaseButtonProps} from './BaseButton.js';\n\nexport interface AddToCartButtonProps {\n /** An array of cart line attributes that belong to the item being added to the cart. */\n attributes?: {\n key: string;\n value: string;\n }[];\n /** The ID of the variant. */\n variantId?: string | null;\n /** The item quantity. */\n quantity?: number;\n /** The text that is announced by the screen reader when the item is being added to the cart. Used for accessibility purposes only and not displayed on the page. */\n accessibleAddingToCartLabel?: string;\n /** The selling plan ID of the subscription variant */\n sellingPlanId?: string;\n}\n\n/**\n * The `AddToCartButton` component renders a button that adds an item to the cart when pressed.\n * It must be a descendent of the `CartProvider` component.\n */\nexport function AddToCartButton<AsType extends React.ElementType = 'button'>(\n props: AddToCartButtonProps & BaseButtonProps<AsType>\n) {\n const [addingItem, setAddingItem] = useState<boolean>(false);\n const {\n variantId: explicitVariantId,\n quantity = 1,\n attributes,\n sellingPlanId,\n onClick,\n children,\n accessibleAddingToCartLabel,\n ...passthroughProps\n } = props;\n const {status, linesAdd} = useCart();\n const {selectedVariant} = useProduct();\n const variantId = explicitVariantId ?? selectedVariant?.id ?? '';\n const disabled =\n explicitVariantId === null ||\n variantId === '' ||\n selectedVariant === null ||\n addingItem ||\n passthroughProps.disabled;\n\n useEffect(() => {\n if (addingItem && status === 'idle') {\n setAddingItem(false);\n }\n }, [status, addingItem]);\n\n const handleAddItem = useCallback(() => {\n setAddingItem(true);\n linesAdd([\n {\n quantity,\n merchandiseId: variantId || '',\n attributes,\n sellingPlanId,\n },\n ]);\n }, [linesAdd, quantity, variantId, attributes, sellingPlanId]);\n\n return (\n <>\n <BaseButton\n {...passthroughProps}\n disabled={disabled}\n onClick={onClick}\n defaultOnClick={handleAddItem}\n >\n {children}\n </BaseButton>\n {accessibleAddingToCartLabel ? (\n <p\n style={{\n position: 'absolute',\n width: '1px',\n height: '1px',\n padding: '0',\n margin: '-1px',\n overflow: 'hidden',\n clip: 'rect(0, 0, 0, 0)',\n whiteSpace: 'nowrap',\n borderWidth: '0',\n }}\n role=\"alert\"\n aria-live=\"assertive\"\n >\n {addingItem ? accessibleAddingToCartLabel : null}\n </p>\n ) : null}\n </>\n );\n}\n"],"names":["AddToCartButton","props","addingItem","setAddingItem","useState","variantId","explicitVariantId","quantity","attributes","sellingPlanId","onClick","children","accessibleAddingToCartLabel","passthroughProps","status","linesAdd","useCart","selectedVariant","useProduct","id","disabled","useEffect","handleAddItem","useCallback","merchandiseId","_Fragment","_jsx","position","width","height","padding","margin","overflow","clip","whiteSpace","borderWidth"],"mappings":";;;;;AA0BO,SAASA,gBACdC,OACA;;AACA,QAAM,CAACC,YAAYC,aAAb,IAA8BC,SAAkB,KAAV;AACtC,QAAA;AAAA,IACJC,WAAWC;AAAAA,IACXC,WAAW;AAAA,IACXC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,OACGC;AAAAA,EACDZ,IAAAA;AACE,QAAA;AAAA,IAACa;AAAAA,IAAQC;AAAAA,MAAYC,QAA3B;AACM,QAAA;AAAA,IAACC;AAAAA,MAAmBC,WAA1B;AACMb,QAAAA,aAAYC,qDAAqBW,mDAAiBE,OAAtCb,YAA4C;AACxDc,QAAAA,WACJd,sBAAsB,QACtBD,cAAc,MACdY,oBAAoB,QACpBf,cACAW,iBAAiBO;AAEnBC,YAAU,MAAM;AACVnB,QAAAA,cAAcY,WAAW,QAAQ;AACnCX,oBAAc,KAAD;AAAA,IACd;AAAA,EAAA,GACA,CAACW,QAAQZ,UAAT,CAJM;AAMHoB,QAAAA,gBAAgBC,YAAY,MAAM;AACtCpB,kBAAc,IAAD;AACbY,aAAS,CACP;AAAA,MACER;AAAAA,MACAiB,eAAenB,aAAa;AAAA,MAC5BG;AAAAA,MACAC;AAAAA,IALK,CAAA,CAAD;AAAA,EAAA,GAQP,CAACM,UAAUR,UAAUF,WAAWG,YAAYC,aAA5C,CAV8B;AAYjC,8BACEgB,UAAA;AAAA,IAAA,UACE,CAAAC,oBAAC,YAAD;AAAA,MAAA,GACMb;AAAAA,MACJ;AAAA,MACA;AAAA,MACA,gBAAgBS;AAAAA,MAJlB;AAAA,IAAA,CADF,GASGV,8BACCc,oBAAA,KAAA;AAAA,MACE,OAAO;AAAA,QACLC,UAAU;AAAA,QACVC,OAAO;AAAA,QACPC,QAAQ;AAAA,QACRC,SAAS;AAAA,QACTC,QAAQ;AAAA,QACRC,UAAU;AAAA,QACVC,MAAM;AAAA,QACNC,YAAY;AAAA,QACZC,aAAa;AAAA,MATR;AAAA,MAWP,MAAK;AAAA,MACL,aAAU;AAAA,MAbZ,UAeGjC,aAAaU,8BAA8B;AAAA,IAf9C,CAAA,IAiBE,IA3BN;AAAA,EAAA,CADF;AA+BD;"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
const storefrontApiCustomScalars = {
|
|
2
|
+
DateTime: "string",
|
|
3
|
+
Decimal: "string",
|
|
4
|
+
HTML: "string",
|
|
5
|
+
URL: "string",
|
|
6
|
+
Color: "string",
|
|
7
|
+
UnsignedInt64: "string"
|
|
8
|
+
};
|
|
9
|
+
export {
|
|
10
|
+
storefrontApiCustomScalars
|
|
11
|
+
};
|
|
12
|
+
//# sourceMappingURL=codegen.helpers.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"codegen.helpers.mjs","sources":["../../src/codegen.helpers.ts"],"sourcesContent":["/** Meant to be used with GraphQL CodeGen to type the Storefront API's custom scalars correctly */\nexport const storefrontApiCustomScalars = {\n // Keep in sync with the definitions in the app/nextjs/codegen.ts!\n DateTime: 'string',\n Decimal: 'string',\n HTML: 'string',\n URL: 'string',\n Color: 'string',\n UnsignedInt64: 'string',\n};\n"],"names":[],"mappings":"AACO,MAAM,6BAA6B;AAAA,EAExC,UAAU;AAAA,EACV,SAAS;AAAA,EACT,MAAM;AAAA,EACN,KAAK;AAAA,EACL,OAAO;AAAA,EACP,eAAe;AACjB;"}
|
|
@@ -2,6 +2,7 @@ import { AddToCartButton } from "./AddToCartButton.mjs";
|
|
|
2
2
|
import { BuyNowButton } from "./BuyNowButton.mjs";
|
|
3
3
|
import { CartCheckoutButton } from "./CartCheckoutButton.mjs";
|
|
4
4
|
import { CartProvider, useCart } from "./CartProvider.mjs";
|
|
5
|
+
import { storefrontApiCustomScalars } from "./codegen.helpers.mjs";
|
|
5
6
|
import { ExternalVideo } from "./ExternalVideo.mjs";
|
|
6
7
|
import { flattenConnection } from "./flatten-connection.mjs";
|
|
7
8
|
import { Image } from "./Image.mjs";
|
|
@@ -38,6 +39,7 @@ export {
|
|
|
38
39
|
metafieldParser,
|
|
39
40
|
parseMetafield,
|
|
40
41
|
parseMetafieldValue,
|
|
42
|
+
storefrontApiCustomScalars,
|
|
41
43
|
useCart,
|
|
42
44
|
useMoney,
|
|
43
45
|
useProduct,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AddToCartButton.js","sources":["../../src/AddToCartButton.tsx"],"sourcesContent":["import {useCallback, useEffect, useState} from 'react';\n\nimport {useCart} from './CartProvider.js';\nimport {useProduct} from './ProductProvider.js';\nimport {BaseButton, BaseButtonProps} from './BaseButton.js';\n\
|
|
1
|
+
{"version":3,"file":"AddToCartButton.js","sources":["../../src/AddToCartButton.tsx"],"sourcesContent":["import {useCallback, useEffect, useState} from 'react';\n\nimport {useCart} from './CartProvider.js';\nimport {useProduct} from './ProductProvider.js';\nimport {BaseButton, BaseButtonProps} from './BaseButton.js';\n\nexport interface AddToCartButtonProps {\n /** An array of cart line attributes that belong to the item being added to the cart. */\n attributes?: {\n key: string;\n value: string;\n }[];\n /** The ID of the variant. */\n variantId?: string | null;\n /** The item quantity. */\n quantity?: number;\n /** The text that is announced by the screen reader when the item is being added to the cart. Used for accessibility purposes only and not displayed on the page. */\n accessibleAddingToCartLabel?: string;\n /** The selling plan ID of the subscription variant */\n sellingPlanId?: string;\n}\n\n/**\n * The `AddToCartButton` component renders a button that adds an item to the cart when pressed.\n * It must be a descendent of the `CartProvider` component.\n */\nexport function AddToCartButton<AsType extends React.ElementType = 'button'>(\n props: AddToCartButtonProps & BaseButtonProps<AsType>\n) {\n const [addingItem, setAddingItem] = useState<boolean>(false);\n const {\n variantId: explicitVariantId,\n quantity = 1,\n attributes,\n sellingPlanId,\n onClick,\n children,\n accessibleAddingToCartLabel,\n ...passthroughProps\n } = props;\n const {status, linesAdd} = useCart();\n const {selectedVariant} = useProduct();\n const variantId = explicitVariantId ?? selectedVariant?.id ?? '';\n const disabled =\n explicitVariantId === null ||\n variantId === '' ||\n selectedVariant === null ||\n addingItem ||\n passthroughProps.disabled;\n\n useEffect(() => {\n if (addingItem && status === 'idle') {\n setAddingItem(false);\n }\n }, [status, addingItem]);\n\n const handleAddItem = useCallback(() => {\n setAddingItem(true);\n linesAdd([\n {\n quantity,\n merchandiseId: variantId || '',\n attributes,\n sellingPlanId,\n },\n ]);\n }, [linesAdd, quantity, variantId, attributes, sellingPlanId]);\n\n return (\n <>\n <BaseButton\n {...passthroughProps}\n disabled={disabled}\n onClick={onClick}\n defaultOnClick={handleAddItem}\n >\n {children}\n </BaseButton>\n {accessibleAddingToCartLabel ? (\n <p\n style={{\n position: 'absolute',\n width: '1px',\n height: '1px',\n padding: '0',\n margin: '-1px',\n overflow: 'hidden',\n clip: 'rect(0, 0, 0, 0)',\n whiteSpace: 'nowrap',\n borderWidth: '0',\n }}\n role=\"alert\"\n aria-live=\"assertive\"\n >\n {addingItem ? accessibleAddingToCartLabel : null}\n </p>\n ) : null}\n </>\n );\n}\n"],"names":["AddToCartButton","props","addingItem","setAddingItem","useState","variantId","explicitVariantId","quantity","attributes","sellingPlanId","onClick","children","accessibleAddingToCartLabel","passthroughProps","status","linesAdd","useCart","selectedVariant","useProduct","id","disabled","useEffect","handleAddItem","useCallback","merchandiseId","_Fragment","_jsx","BaseButton","position","width","height","padding","margin","overflow","clip","whiteSpace","borderWidth"],"mappings":";;;;;;;AA0BO,SAASA,gBACdC,OACA;;AACA,QAAM,CAACC,YAAYC,aAAb,IAA8BC,oBAAkB,KAAV;AACtC,QAAA;AAAA,IACJC,WAAWC;AAAAA,IACXC,WAAW;AAAA,IACXC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,OACGC;AAAAA,EACDZ,IAAAA;AACE,QAAA;AAAA,IAACa;AAAAA,IAAQC;AAAAA,MAAYC,aAA3B,QAAA;AACM,QAAA;AAAA,IAACC;AAAAA,MAAmBC,gBAA1B,WAAA;AACMb,QAAAA,aAAYC,qDAAqBW,mDAAiBE,OAAtCb,YAA4C;AACxDc,QAAAA,WACJd,sBAAsB,QACtBD,cAAc,MACdY,oBAAoB,QACpBf,cACAW,iBAAiBO;AAEnBC,aAAAA,UAAU,MAAM;AACVnB,QAAAA,cAAcY,WAAW,QAAQ;AACnCX,oBAAc,KAAD;AAAA,IACd;AAAA,EAAA,GACA,CAACW,QAAQZ,UAAT,CAJM;AAMHoB,QAAAA,gBAAgBC,WAAAA,YAAY,MAAM;AACtCpB,kBAAc,IAAD;AACbY,aAAS,CACP;AAAA,MACER;AAAAA,MACAiB,eAAenB,aAAa;AAAA,MAC5BG;AAAAA,MACAC;AAAAA,IALK,CAAA,CAAD;AAAA,EAAA,GAQP,CAACM,UAAUR,UAAUF,WAAWG,YAAYC,aAA5C,CAV8B;AAYjC,yCACEgB,WAAAA,UAAA;AAAA,IAAA,UACE,CAAAC,2BAAA,IAACC,uBAAD;AAAA,MAAA,GACMd;AAAAA,MACJ;AAAA,MACA;AAAA,MACA,gBAAgBS;AAAAA,MAJlB;AAAA,IAAA,CADF,GASGV,8BACCc,2BAAA,IAAA,KAAA;AAAA,MACE,OAAO;AAAA,QACLE,UAAU;AAAA,QACVC,OAAO;AAAA,QACPC,QAAQ;AAAA,QACRC,SAAS;AAAA,QACTC,QAAQ;AAAA,QACRC,UAAU;AAAA,QACVC,MAAM;AAAA,QACNC,YAAY;AAAA,QACZC,aAAa;AAAA,MATR;AAAA,MAWP,MAAK;AAAA,MACL,aAAU;AAAA,MAbZ,UAeGlC,aAAaU,8BAA8B;AAAA,IAf9C,CAAA,IAiBE,IA3BN;AAAA,EAAA,CADF;AA+BD;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AddToCartButton.mjs","sources":["../../src/AddToCartButton.tsx"],"sourcesContent":["import {useCallback, useEffect, useState} from 'react';\n\nimport {useCart} from './CartProvider.js';\nimport {useProduct} from './ProductProvider.js';\nimport {BaseButton, BaseButtonProps} from './BaseButton.js';\n\
|
|
1
|
+
{"version":3,"file":"AddToCartButton.mjs","sources":["../../src/AddToCartButton.tsx"],"sourcesContent":["import {useCallback, useEffect, useState} from 'react';\n\nimport {useCart} from './CartProvider.js';\nimport {useProduct} from './ProductProvider.js';\nimport {BaseButton, BaseButtonProps} from './BaseButton.js';\n\nexport interface AddToCartButtonProps {\n /** An array of cart line attributes that belong to the item being added to the cart. */\n attributes?: {\n key: string;\n value: string;\n }[];\n /** The ID of the variant. */\n variantId?: string | null;\n /** The item quantity. */\n quantity?: number;\n /** The text that is announced by the screen reader when the item is being added to the cart. Used for accessibility purposes only and not displayed on the page. */\n accessibleAddingToCartLabel?: string;\n /** The selling plan ID of the subscription variant */\n sellingPlanId?: string;\n}\n\n/**\n * The `AddToCartButton` component renders a button that adds an item to the cart when pressed.\n * It must be a descendent of the `CartProvider` component.\n */\nexport function AddToCartButton<AsType extends React.ElementType = 'button'>(\n props: AddToCartButtonProps & BaseButtonProps<AsType>\n) {\n const [addingItem, setAddingItem] = useState<boolean>(false);\n const {\n variantId: explicitVariantId,\n quantity = 1,\n attributes,\n sellingPlanId,\n onClick,\n children,\n accessibleAddingToCartLabel,\n ...passthroughProps\n } = props;\n const {status, linesAdd} = useCart();\n const {selectedVariant} = useProduct();\n const variantId = explicitVariantId ?? selectedVariant?.id ?? '';\n const disabled =\n explicitVariantId === null ||\n variantId === '' ||\n selectedVariant === null ||\n addingItem ||\n passthroughProps.disabled;\n\n useEffect(() => {\n if (addingItem && status === 'idle') {\n setAddingItem(false);\n }\n }, [status, addingItem]);\n\n const handleAddItem = useCallback(() => {\n setAddingItem(true);\n linesAdd([\n {\n quantity,\n merchandiseId: variantId || '',\n attributes,\n sellingPlanId,\n },\n ]);\n }, [linesAdd, quantity, variantId, attributes, sellingPlanId]);\n\n return (\n <>\n <BaseButton\n {...passthroughProps}\n disabled={disabled}\n onClick={onClick}\n defaultOnClick={handleAddItem}\n >\n {children}\n </BaseButton>\n {accessibleAddingToCartLabel ? (\n <p\n style={{\n position: 'absolute',\n width: '1px',\n height: '1px',\n padding: '0',\n margin: '-1px',\n overflow: 'hidden',\n clip: 'rect(0, 0, 0, 0)',\n whiteSpace: 'nowrap',\n borderWidth: '0',\n }}\n role=\"alert\"\n aria-live=\"assertive\"\n >\n {addingItem ? accessibleAddingToCartLabel : null}\n </p>\n ) : null}\n </>\n );\n}\n"],"names":["AddToCartButton","props","addingItem","setAddingItem","useState","variantId","explicitVariantId","quantity","attributes","sellingPlanId","onClick","children","accessibleAddingToCartLabel","passthroughProps","status","linesAdd","useCart","selectedVariant","useProduct","id","disabled","useEffect","handleAddItem","useCallback","merchandiseId","_Fragment","_jsx","position","width","height","padding","margin","overflow","clip","whiteSpace","borderWidth"],"mappings":";;;;;AA0BO,SAASA,gBACdC,OACA;;AACA,QAAM,CAACC,YAAYC,aAAb,IAA8BC,SAAkB,KAAV;AACtC,QAAA;AAAA,IACJC,WAAWC;AAAAA,IACXC,WAAW;AAAA,IACXC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,OACGC;AAAAA,EACDZ,IAAAA;AACE,QAAA;AAAA,IAACa;AAAAA,IAAQC;AAAAA,MAAYC,QAA3B;AACM,QAAA;AAAA,IAACC;AAAAA,MAAmBC,WAA1B;AACMb,QAAAA,aAAYC,qDAAqBW,mDAAiBE,OAAtCb,YAA4C;AACxDc,QAAAA,WACJd,sBAAsB,QACtBD,cAAc,MACdY,oBAAoB,QACpBf,cACAW,iBAAiBO;AAEnBC,YAAU,MAAM;AACVnB,QAAAA,cAAcY,WAAW,QAAQ;AACnCX,oBAAc,KAAD;AAAA,IACd;AAAA,EAAA,GACA,CAACW,QAAQZ,UAAT,CAJM;AAMHoB,QAAAA,gBAAgBC,YAAY,MAAM;AACtCpB,kBAAc,IAAD;AACbY,aAAS,CACP;AAAA,MACER;AAAAA,MACAiB,eAAenB,aAAa;AAAA,MAC5BG;AAAAA,MACAC;AAAAA,IALK,CAAA,CAAD;AAAA,EAAA,GAQP,CAACM,UAAUR,UAAUF,WAAWG,YAAYC,aAA5C,CAV8B;AAYjC,8BACEgB,UAAA;AAAA,IAAA,UACE,CAAAC,oBAAC,YAAD;AAAA,MAAA,GACMb;AAAAA,MACJ;AAAA,MACA;AAAA,MACA,gBAAgBS;AAAAA,MAJlB;AAAA,IAAA,CADF,GASGV,8BACCc,oBAAA,KAAA;AAAA,MACE,OAAO;AAAA,QACLC,UAAU;AAAA,QACVC,OAAO;AAAA,QACPC,QAAQ;AAAA,QACRC,SAAS;AAAA,QACTC,QAAQ;AAAA,QACRC,UAAU;AAAA,QACVC,MAAM;AAAA,QACNC,YAAY;AAAA,QACZC,aAAa;AAAA,MATR;AAAA,MAWP,MAAK;AAAA,MACL,aAAU;AAAA,MAbZ,UAeGjC,aAAaU,8BAA8B;AAAA,IAf9C,CAAA,IAiBE,IA3BN;AAAA,EAAA,CADF;AA+BD;"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
|
|
3
|
+
const storefrontApiCustomScalars = {
|
|
4
|
+
DateTime: "string",
|
|
5
|
+
Decimal: "string",
|
|
6
|
+
HTML: "string",
|
|
7
|
+
URL: "string",
|
|
8
|
+
Color: "string",
|
|
9
|
+
UnsignedInt64: "string"
|
|
10
|
+
};
|
|
11
|
+
exports.storefrontApiCustomScalars = storefrontApiCustomScalars;
|
|
12
|
+
//# sourceMappingURL=codegen.helpers.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"codegen.helpers.js","sources":["../../src/codegen.helpers.ts"],"sourcesContent":["/** Meant to be used with GraphQL CodeGen to type the Storefront API's custom scalars correctly */\nexport const storefrontApiCustomScalars = {\n // Keep in sync with the definitions in the app/nextjs/codegen.ts!\n DateTime: 'string',\n Decimal: 'string',\n HTML: 'string',\n URL: 'string',\n Color: 'string',\n UnsignedInt64: 'string',\n};\n"],"names":[],"mappings":";;AACO,MAAM,6BAA6B;AAAA,EAExC,UAAU;AAAA,EACV,SAAS;AAAA,EACT,MAAM;AAAA,EACN,KAAK;AAAA,EACL,OAAO;AAAA,EACP,eAAe;AACjB;;"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
const storefrontApiCustomScalars = {
|
|
2
|
+
DateTime: "string",
|
|
3
|
+
Decimal: "string",
|
|
4
|
+
HTML: "string",
|
|
5
|
+
URL: "string",
|
|
6
|
+
Color: "string",
|
|
7
|
+
UnsignedInt64: "string"
|
|
8
|
+
};
|
|
9
|
+
export {
|
|
10
|
+
storefrontApiCustomScalars
|
|
11
|
+
};
|
|
12
|
+
//# sourceMappingURL=codegen.helpers.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"codegen.helpers.mjs","sources":["../../src/codegen.helpers.ts"],"sourcesContent":["/** Meant to be used with GraphQL CodeGen to type the Storefront API's custom scalars correctly */\nexport const storefrontApiCustomScalars = {\n // Keep in sync with the definitions in the app/nextjs/codegen.ts!\n DateTime: 'string',\n Decimal: 'string',\n HTML: 'string',\n URL: 'string',\n Color: 'string',\n UnsignedInt64: 'string',\n};\n"],"names":[],"mappings":"AACO,MAAM,6BAA6B;AAAA,EAExC,UAAU;AAAA,EACV,SAAS;AAAA,EACT,MAAM;AAAA,EACN,KAAK;AAAA,EACL,OAAO;AAAA,EACP,eAAe;AACjB;"}
|
package/dist/node-dev/index.js
CHANGED
|
@@ -4,6 +4,7 @@ const AddToCartButton = require("./AddToCartButton.js");
|
|
|
4
4
|
const BuyNowButton = require("./BuyNowButton.js");
|
|
5
5
|
const CartCheckoutButton = require("./CartCheckoutButton.js");
|
|
6
6
|
const CartProvider = require("./CartProvider.js");
|
|
7
|
+
const codegen_helpers = require("./codegen.helpers.js");
|
|
7
8
|
const ExternalVideo = require("./ExternalVideo.js");
|
|
8
9
|
const flattenConnection = require("./flatten-connection.js");
|
|
9
10
|
const Image = require("./Image.js");
|
|
@@ -24,6 +25,7 @@ exports.BuyNowButton = BuyNowButton.BuyNowButton;
|
|
|
24
25
|
exports.CartCheckoutButton = CartCheckoutButton.CartCheckoutButton;
|
|
25
26
|
exports.CartProvider = CartProvider.CartProvider;
|
|
26
27
|
exports.useCart = CartProvider.useCart;
|
|
28
|
+
exports.storefrontApiCustomScalars = codegen_helpers.storefrontApiCustomScalars;
|
|
27
29
|
exports.ExternalVideo = ExternalVideo.ExternalVideo;
|
|
28
30
|
exports.flattenConnection = flattenConnection.flattenConnection;
|
|
29
31
|
exports.Image = Image.Image;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/dist/node-dev/index.mjs
CHANGED
|
@@ -2,6 +2,7 @@ import { AddToCartButton } from "./AddToCartButton.mjs";
|
|
|
2
2
|
import { BuyNowButton } from "./BuyNowButton.mjs";
|
|
3
3
|
import { CartCheckoutButton } from "./CartCheckoutButton.mjs";
|
|
4
4
|
import { CartProvider, useCart } from "./CartProvider.mjs";
|
|
5
|
+
import { storefrontApiCustomScalars } from "./codegen.helpers.mjs";
|
|
5
6
|
import { ExternalVideo } from "./ExternalVideo.mjs";
|
|
6
7
|
import { flattenConnection } from "./flatten-connection.mjs";
|
|
7
8
|
import { Image } from "./Image.mjs";
|
|
@@ -38,6 +39,7 @@ export {
|
|
|
38
39
|
metafieldParser,
|
|
39
40
|
parseMetafield,
|
|
40
41
|
parseMetafieldValue,
|
|
42
|
+
storefrontApiCustomScalars,
|
|
41
43
|
useCart,
|
|
42
44
|
useMoney,
|
|
43
45
|
useProduct,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AddToCartButton.js","sources":["../../src/AddToCartButton.tsx"],"sourcesContent":["import {useCallback, useEffect, useState} from 'react';\n\nimport {useCart} from './CartProvider.js';\nimport {useProduct} from './ProductProvider.js';\nimport {BaseButton, BaseButtonProps} from './BaseButton.js';\n\
|
|
1
|
+
{"version":3,"file":"AddToCartButton.js","sources":["../../src/AddToCartButton.tsx"],"sourcesContent":["import {useCallback, useEffect, useState} from 'react';\n\nimport {useCart} from './CartProvider.js';\nimport {useProduct} from './ProductProvider.js';\nimport {BaseButton, BaseButtonProps} from './BaseButton.js';\n\nexport interface AddToCartButtonProps {\n /** An array of cart line attributes that belong to the item being added to the cart. */\n attributes?: {\n key: string;\n value: string;\n }[];\n /** The ID of the variant. */\n variantId?: string | null;\n /** The item quantity. */\n quantity?: number;\n /** The text that is announced by the screen reader when the item is being added to the cart. Used for accessibility purposes only and not displayed on the page. */\n accessibleAddingToCartLabel?: string;\n /** The selling plan ID of the subscription variant */\n sellingPlanId?: string;\n}\n\n/**\n * The `AddToCartButton` component renders a button that adds an item to the cart when pressed.\n * It must be a descendent of the `CartProvider` component.\n */\nexport function AddToCartButton<AsType extends React.ElementType = 'button'>(\n props: AddToCartButtonProps & BaseButtonProps<AsType>\n) {\n const [addingItem, setAddingItem] = useState<boolean>(false);\n const {\n variantId: explicitVariantId,\n quantity = 1,\n attributes,\n sellingPlanId,\n onClick,\n children,\n accessibleAddingToCartLabel,\n ...passthroughProps\n } = props;\n const {status, linesAdd} = useCart();\n const {selectedVariant} = useProduct();\n const variantId = explicitVariantId ?? selectedVariant?.id ?? '';\n const disabled =\n explicitVariantId === null ||\n variantId === '' ||\n selectedVariant === null ||\n addingItem ||\n passthroughProps.disabled;\n\n useEffect(() => {\n if (addingItem && status === 'idle') {\n setAddingItem(false);\n }\n }, [status, addingItem]);\n\n const handleAddItem = useCallback(() => {\n setAddingItem(true);\n linesAdd([\n {\n quantity,\n merchandiseId: variantId || '',\n attributes,\n sellingPlanId,\n },\n ]);\n }, [linesAdd, quantity, variantId, attributes, sellingPlanId]);\n\n return (\n <>\n <BaseButton\n {...passthroughProps}\n disabled={disabled}\n onClick={onClick}\n defaultOnClick={handleAddItem}\n >\n {children}\n </BaseButton>\n {accessibleAddingToCartLabel ? (\n <p\n style={{\n position: 'absolute',\n width: '1px',\n height: '1px',\n padding: '0',\n margin: '-1px',\n overflow: 'hidden',\n clip: 'rect(0, 0, 0, 0)',\n whiteSpace: 'nowrap',\n borderWidth: '0',\n }}\n role=\"alert\"\n aria-live=\"assertive\"\n >\n {addingItem ? accessibleAddingToCartLabel : null}\n </p>\n ) : null}\n </>\n );\n}\n"],"names":["AddToCartButton","props","addingItem","setAddingItem","useState","variantId","explicitVariantId","quantity","attributes","sellingPlanId","onClick","children","accessibleAddingToCartLabel","passthroughProps","status","linesAdd","useCart","selectedVariant","useProduct","id","disabled","useEffect","handleAddItem","useCallback","merchandiseId","_Fragment","_jsx","BaseButton","position","width","height","padding","margin","overflow","clip","whiteSpace","borderWidth"],"mappings":";;;;;;;AA0BO,SAASA,gBACdC,OACA;;AACA,QAAM,CAACC,YAAYC,aAAb,IAA8BC,oBAAkB,KAAV;AACtC,QAAA;AAAA,IACJC,WAAWC;AAAAA,IACXC,WAAW;AAAA,IACXC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,OACGC;AAAAA,EACDZ,IAAAA;AACE,QAAA;AAAA,IAACa;AAAAA,IAAQC;AAAAA,MAAYC,aAA3B,QAAA;AACM,QAAA;AAAA,IAACC;AAAAA,MAAmBC,gBAA1B,WAAA;AACMb,QAAAA,aAAYC,qDAAqBW,mDAAiBE,OAAtCb,YAA4C;AACxDc,QAAAA,WACJd,sBAAsB,QACtBD,cAAc,MACdY,oBAAoB,QACpBf,cACAW,iBAAiBO;AAEnBC,aAAAA,UAAU,MAAM;AACVnB,QAAAA,cAAcY,WAAW,QAAQ;AACnCX,oBAAc,KAAD;AAAA,IACd;AAAA,EAAA,GACA,CAACW,QAAQZ,UAAT,CAJM;AAMHoB,QAAAA,gBAAgBC,WAAAA,YAAY,MAAM;AACtCpB,kBAAc,IAAD;AACbY,aAAS,CACP;AAAA,MACER;AAAAA,MACAiB,eAAenB,aAAa;AAAA,MAC5BG;AAAAA,MACAC;AAAAA,IALK,CAAA,CAAD;AAAA,EAAA,GAQP,CAACM,UAAUR,UAAUF,WAAWG,YAAYC,aAA5C,CAV8B;AAYjC,yCACEgB,WAAAA,UAAA;AAAA,IAAA,UACE,CAAAC,2BAAA,IAACC,uBAAD;AAAA,MAAA,GACMd;AAAAA,MACJ;AAAA,MACA;AAAA,MACA,gBAAgBS;AAAAA,MAJlB;AAAA,IAAA,CADF,GASGV,8BACCc,2BAAA,IAAA,KAAA;AAAA,MACE,OAAO;AAAA,QACLE,UAAU;AAAA,QACVC,OAAO;AAAA,QACPC,QAAQ;AAAA,QACRC,SAAS;AAAA,QACTC,QAAQ;AAAA,QACRC,UAAU;AAAA,QACVC,MAAM;AAAA,QACNC,YAAY;AAAA,QACZC,aAAa;AAAA,MATR;AAAA,MAWP,MAAK;AAAA,MACL,aAAU;AAAA,MAbZ,UAeGlC,aAAaU,8BAA8B;AAAA,IAf9C,CAAA,IAiBE,IA3BN;AAAA,EAAA,CADF;AA+BD;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AddToCartButton.mjs","sources":["../../src/AddToCartButton.tsx"],"sourcesContent":["import {useCallback, useEffect, useState} from 'react';\n\nimport {useCart} from './CartProvider.js';\nimport {useProduct} from './ProductProvider.js';\nimport {BaseButton, BaseButtonProps} from './BaseButton.js';\n\
|
|
1
|
+
{"version":3,"file":"AddToCartButton.mjs","sources":["../../src/AddToCartButton.tsx"],"sourcesContent":["import {useCallback, useEffect, useState} from 'react';\n\nimport {useCart} from './CartProvider.js';\nimport {useProduct} from './ProductProvider.js';\nimport {BaseButton, BaseButtonProps} from './BaseButton.js';\n\nexport interface AddToCartButtonProps {\n /** An array of cart line attributes that belong to the item being added to the cart. */\n attributes?: {\n key: string;\n value: string;\n }[];\n /** The ID of the variant. */\n variantId?: string | null;\n /** The item quantity. */\n quantity?: number;\n /** The text that is announced by the screen reader when the item is being added to the cart. Used for accessibility purposes only and not displayed on the page. */\n accessibleAddingToCartLabel?: string;\n /** The selling plan ID of the subscription variant */\n sellingPlanId?: string;\n}\n\n/**\n * The `AddToCartButton` component renders a button that adds an item to the cart when pressed.\n * It must be a descendent of the `CartProvider` component.\n */\nexport function AddToCartButton<AsType extends React.ElementType = 'button'>(\n props: AddToCartButtonProps & BaseButtonProps<AsType>\n) {\n const [addingItem, setAddingItem] = useState<boolean>(false);\n const {\n variantId: explicitVariantId,\n quantity = 1,\n attributes,\n sellingPlanId,\n onClick,\n children,\n accessibleAddingToCartLabel,\n ...passthroughProps\n } = props;\n const {status, linesAdd} = useCart();\n const {selectedVariant} = useProduct();\n const variantId = explicitVariantId ?? selectedVariant?.id ?? '';\n const disabled =\n explicitVariantId === null ||\n variantId === '' ||\n selectedVariant === null ||\n addingItem ||\n passthroughProps.disabled;\n\n useEffect(() => {\n if (addingItem && status === 'idle') {\n setAddingItem(false);\n }\n }, [status, addingItem]);\n\n const handleAddItem = useCallback(() => {\n setAddingItem(true);\n linesAdd([\n {\n quantity,\n merchandiseId: variantId || '',\n attributes,\n sellingPlanId,\n },\n ]);\n }, [linesAdd, quantity, variantId, attributes, sellingPlanId]);\n\n return (\n <>\n <BaseButton\n {...passthroughProps}\n disabled={disabled}\n onClick={onClick}\n defaultOnClick={handleAddItem}\n >\n {children}\n </BaseButton>\n {accessibleAddingToCartLabel ? (\n <p\n style={{\n position: 'absolute',\n width: '1px',\n height: '1px',\n padding: '0',\n margin: '-1px',\n overflow: 'hidden',\n clip: 'rect(0, 0, 0, 0)',\n whiteSpace: 'nowrap',\n borderWidth: '0',\n }}\n role=\"alert\"\n aria-live=\"assertive\"\n >\n {addingItem ? accessibleAddingToCartLabel : null}\n </p>\n ) : null}\n </>\n );\n}\n"],"names":["AddToCartButton","props","addingItem","setAddingItem","useState","variantId","explicitVariantId","quantity","attributes","sellingPlanId","onClick","children","accessibleAddingToCartLabel","passthroughProps","status","linesAdd","useCart","selectedVariant","useProduct","id","disabled","useEffect","handleAddItem","useCallback","merchandiseId","_Fragment","_jsx","position","width","height","padding","margin","overflow","clip","whiteSpace","borderWidth"],"mappings":";;;;;AA0BO,SAASA,gBACdC,OACA;;AACA,QAAM,CAACC,YAAYC,aAAb,IAA8BC,SAAkB,KAAV;AACtC,QAAA;AAAA,IACJC,WAAWC;AAAAA,IACXC,WAAW;AAAA,IACXC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,OACGC;AAAAA,EACDZ,IAAAA;AACE,QAAA;AAAA,IAACa;AAAAA,IAAQC;AAAAA,MAAYC,QAA3B;AACM,QAAA;AAAA,IAACC;AAAAA,MAAmBC,WAA1B;AACMb,QAAAA,aAAYC,qDAAqBW,mDAAiBE,OAAtCb,YAA4C;AACxDc,QAAAA,WACJd,sBAAsB,QACtBD,cAAc,MACdY,oBAAoB,QACpBf,cACAW,iBAAiBO;AAEnBC,YAAU,MAAM;AACVnB,QAAAA,cAAcY,WAAW,QAAQ;AACnCX,oBAAc,KAAD;AAAA,IACd;AAAA,EAAA,GACA,CAACW,QAAQZ,UAAT,CAJM;AAMHoB,QAAAA,gBAAgBC,YAAY,MAAM;AACtCpB,kBAAc,IAAD;AACbY,aAAS,CACP;AAAA,MACER;AAAAA,MACAiB,eAAenB,aAAa;AAAA,MAC5BG;AAAAA,MACAC;AAAAA,IALK,CAAA,CAAD;AAAA,EAAA,GAQP,CAACM,UAAUR,UAAUF,WAAWG,YAAYC,aAA5C,CAV8B;AAYjC,8BACEgB,UAAA;AAAA,IAAA,UACE,CAAAC,oBAAC,YAAD;AAAA,MAAA,GACMb;AAAAA,MACJ;AAAA,MACA;AAAA,MACA,gBAAgBS;AAAAA,MAJlB;AAAA,IAAA,CADF,GASGV,8BACCc,oBAAA,KAAA;AAAA,MACE,OAAO;AAAA,QACLC,UAAU;AAAA,QACVC,OAAO;AAAA,QACPC,QAAQ;AAAA,QACRC,SAAS;AAAA,QACTC,QAAQ;AAAA,QACRC,UAAU;AAAA,QACVC,MAAM;AAAA,QACNC,YAAY;AAAA,QACZC,aAAa;AAAA,MATR;AAAA,MAWP,MAAK;AAAA,MACL,aAAU;AAAA,MAbZ,UAeGjC,aAAaU,8BAA8B;AAAA,IAf9C,CAAA,IAiBE,IA3BN;AAAA,EAAA,CADF;AA+BD;"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
|
|
3
|
+
const storefrontApiCustomScalars = {
|
|
4
|
+
DateTime: "string",
|
|
5
|
+
Decimal: "string",
|
|
6
|
+
HTML: "string",
|
|
7
|
+
URL: "string",
|
|
8
|
+
Color: "string",
|
|
9
|
+
UnsignedInt64: "string"
|
|
10
|
+
};
|
|
11
|
+
exports.storefrontApiCustomScalars = storefrontApiCustomScalars;
|
|
12
|
+
//# sourceMappingURL=codegen.helpers.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"codegen.helpers.js","sources":["../../src/codegen.helpers.ts"],"sourcesContent":["/** Meant to be used with GraphQL CodeGen to type the Storefront API's custom scalars correctly */\nexport const storefrontApiCustomScalars = {\n // Keep in sync with the definitions in the app/nextjs/codegen.ts!\n DateTime: 'string',\n Decimal: 'string',\n HTML: 'string',\n URL: 'string',\n Color: 'string',\n UnsignedInt64: 'string',\n};\n"],"names":[],"mappings":";;AACO,MAAM,6BAA6B;AAAA,EAExC,UAAU;AAAA,EACV,SAAS;AAAA,EACT,MAAM;AAAA,EACN,KAAK;AAAA,EACL,OAAO;AAAA,EACP,eAAe;AACjB;;"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
const storefrontApiCustomScalars = {
|
|
2
|
+
DateTime: "string",
|
|
3
|
+
Decimal: "string",
|
|
4
|
+
HTML: "string",
|
|
5
|
+
URL: "string",
|
|
6
|
+
Color: "string",
|
|
7
|
+
UnsignedInt64: "string"
|
|
8
|
+
};
|
|
9
|
+
export {
|
|
10
|
+
storefrontApiCustomScalars
|
|
11
|
+
};
|
|
12
|
+
//# sourceMappingURL=codegen.helpers.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"codegen.helpers.mjs","sources":["../../src/codegen.helpers.ts"],"sourcesContent":["/** Meant to be used with GraphQL CodeGen to type the Storefront API's custom scalars correctly */\nexport const storefrontApiCustomScalars = {\n // Keep in sync with the definitions in the app/nextjs/codegen.ts!\n DateTime: 'string',\n Decimal: 'string',\n HTML: 'string',\n URL: 'string',\n Color: 'string',\n UnsignedInt64: 'string',\n};\n"],"names":[],"mappings":"AACO,MAAM,6BAA6B;AAAA,EAExC,UAAU;AAAA,EACV,SAAS;AAAA,EACT,MAAM;AAAA,EACN,KAAK;AAAA,EACL,OAAO;AAAA,EACP,eAAe;AACjB;"}
|
package/dist/node-prod/index.js
CHANGED
|
@@ -4,6 +4,7 @@ const AddToCartButton = require("./AddToCartButton.js");
|
|
|
4
4
|
const BuyNowButton = require("./BuyNowButton.js");
|
|
5
5
|
const CartCheckoutButton = require("./CartCheckoutButton.js");
|
|
6
6
|
const CartProvider = require("./CartProvider.js");
|
|
7
|
+
const codegen_helpers = require("./codegen.helpers.js");
|
|
7
8
|
const ExternalVideo = require("./ExternalVideo.js");
|
|
8
9
|
const flattenConnection = require("./flatten-connection.js");
|
|
9
10
|
const Image = require("./Image.js");
|
|
@@ -24,6 +25,7 @@ exports.BuyNowButton = BuyNowButton.BuyNowButton;
|
|
|
24
25
|
exports.CartCheckoutButton = CartCheckoutButton.CartCheckoutButton;
|
|
25
26
|
exports.CartProvider = CartProvider.CartProvider;
|
|
26
27
|
exports.useCart = CartProvider.useCart;
|
|
28
|
+
exports.storefrontApiCustomScalars = codegen_helpers.storefrontApiCustomScalars;
|
|
27
29
|
exports.ExternalVideo = ExternalVideo.ExternalVideo;
|
|
28
30
|
exports.flattenConnection = flattenConnection.flattenConnection;
|
|
29
31
|
exports.Image = Image.Image;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/dist/node-prod/index.mjs
CHANGED
|
@@ -2,6 +2,7 @@ import { AddToCartButton } from "./AddToCartButton.mjs";
|
|
|
2
2
|
import { BuyNowButton } from "./BuyNowButton.mjs";
|
|
3
3
|
import { CartCheckoutButton } from "./CartCheckoutButton.mjs";
|
|
4
4
|
import { CartProvider, useCart } from "./CartProvider.mjs";
|
|
5
|
+
import { storefrontApiCustomScalars } from "./codegen.helpers.mjs";
|
|
5
6
|
import { ExternalVideo } from "./ExternalVideo.mjs";
|
|
6
7
|
import { flattenConnection } from "./flatten-connection.mjs";
|
|
7
8
|
import { Image } from "./Image.mjs";
|
|
@@ -38,6 +39,7 @@ export {
|
|
|
38
39
|
metafieldParser,
|
|
39
40
|
parseMetafield,
|
|
40
41
|
parseMetafieldValue,
|
|
42
|
+
storefrontApiCustomScalars,
|
|
41
43
|
useCart,
|
|
42
44
|
useMoney,
|
|
43
45
|
useProduct,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { BaseButtonProps } from './BaseButton.js';
|
|
2
|
-
interface AddToCartButtonProps {
|
|
2
|
+
export interface AddToCartButtonProps {
|
|
3
3
|
/** An array of cart line attributes that belong to the item being added to the cart. */
|
|
4
4
|
attributes?: {
|
|
5
5
|
key: string;
|
|
@@ -19,4 +19,3 @@ interface AddToCartButtonProps {
|
|
|
19
19
|
* It must be a descendent of the `CartProvider` component.
|
|
20
20
|
*/
|
|
21
21
|
export declare function AddToCartButton<AsType extends React.ElementType = 'button'>(props: AddToCartButtonProps & BaseButtonProps<AsType>): JSX.Element;
|
|
22
|
-
export {};
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/** Meant to be used with GraphQL CodeGen to type the Storefront API's custom scalars correctly */
|
|
2
|
+
export declare const storefrontApiCustomScalars: {
|
|
3
|
+
DateTime: string;
|
|
4
|
+
Decimal: string;
|
|
5
|
+
HTML: string;
|
|
6
|
+
URL: string;
|
|
7
|
+
Color: string;
|
|
8
|
+
UnsignedInt64: string;
|
|
9
|
+
};
|
package/dist/types/index.d.cts
CHANGED
|
@@ -3,6 +3,7 @@ export { BuyNowButton } from './BuyNowButton.js';
|
|
|
3
3
|
export type { CartState, CartStatus, Cart, CartWithActions, CartAction, } from './cart-types.js';
|
|
4
4
|
export { CartCheckoutButton } from './CartCheckoutButton.js';
|
|
5
5
|
export { CartProvider, useCart } from './CartProvider.js';
|
|
6
|
+
export { storefrontApiCustomScalars } from './codegen.helpers.js';
|
|
6
7
|
export { ExternalVideo } from './ExternalVideo.js';
|
|
7
8
|
export { flattenConnection } from './flatten-connection.js';
|
|
8
9
|
export { Image } from './Image.js';
|
package/dist/types/index.d.ts
CHANGED
|
@@ -3,6 +3,7 @@ export { BuyNowButton } from './BuyNowButton.js';
|
|
|
3
3
|
export type { CartState, CartStatus, Cart, CartWithActions, CartAction, } from './cart-types.js';
|
|
4
4
|
export { CartCheckoutButton } from './CartCheckoutButton.js';
|
|
5
5
|
export { CartProvider, useCart } from './CartProvider.js';
|
|
6
|
+
export { storefrontApiCustomScalars } from './codegen.helpers.js';
|
|
6
7
|
export { ExternalVideo } from './ExternalVideo.js';
|
|
7
8
|
export { flattenConnection } from './flatten-connection.js';
|
|
8
9
|
export { Image } from './Image.js';
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
* THIS FILE IS AUTO-GENERATED, DO NOT EDIT
|
|
3
3
|
* Based on Storefront API 2022-10
|
|
4
4
|
* If changes need to happen to the types defined in this file, then generally the Storefront API needs to update, and then you can run `yarn graphql-types`
|
|
5
|
-
* Except custom Scalars, which are defined in the `codegen.
|
|
5
|
+
* Except custom Scalars, which are defined in the `codegen.ts` file
|
|
6
6
|
*/
|
|
7
7
|
/* eslint-disable */
|
|
8
8
|
export type Maybe<T> = T | null;
|
|
@@ -2208,6 +2208,14 @@ fragment ImageFragment on Image {
|
|
|
2208
2208
|
}
|
|
2209
2209
|
}, children);
|
|
2210
2210
|
}
|
|
2211
|
+
const storefrontApiCustomScalars = {
|
|
2212
|
+
DateTime: "string",
|
|
2213
|
+
Decimal: "string",
|
|
2214
|
+
HTML: "string",
|
|
2215
|
+
URL: "string",
|
|
2216
|
+
Color: "string",
|
|
2217
|
+
UnsignedInt64: "string"
|
|
2218
|
+
};
|
|
2211
2219
|
var _jsxFileName$8 = "/home/runner/work/hydrogen-ui/hydrogen-ui/packages/react/src/ExternalVideo.tsx";
|
|
2212
2220
|
function ExternalVideo(props) {
|
|
2213
2221
|
var _a, _b;
|
|
@@ -3467,6 +3475,7 @@ fragment ImageFragment on Image {
|
|
|
3467
3475
|
exports2.metafieldParser = metafieldParser;
|
|
3468
3476
|
exports2.parseMetafield = parseMetafield;
|
|
3469
3477
|
exports2.parseMetafieldValue = parseMetafieldValue;
|
|
3478
|
+
exports2.storefrontApiCustomScalars = storefrontApiCustomScalars;
|
|
3470
3479
|
exports2.useCart = useCart;
|
|
3471
3480
|
exports2.useMoney = useMoney;
|
|
3472
3481
|
exports2.useProduct = useProduct;
|