docs: add line highlight validation (#14380)

* docs: add line highlight validation * add to all projects * fixes * fixes * fix * fixes
2025-12-22 14:10:39 +02:00
parent 6380c1fdf4
commit cb33388202
59 changed files with 514 additions and 243 deletions
@@ -26,7 +26,6 @@ For example:
 export const highlights = [
  ["17", "cartId", "Retrieve the cart ID from `localStorage`."],
  ["19", "TODO", "You can create the cart and set it here as explained in the Create Cart guide."],
-  ["23"], ["24"], ["25"], ["26"],
  ["29", "formatPrice", "This function was previously created to format product prices. You can re-use the same function."],
  ["32", "currency", "If you reuse the `formatPrice` function, pass the currency code as a parameter."],
 ]
@@ -50,8 +50,6 @@ For example:
 export const highlights = [
  ["4", "useCart", "The `useCart` hook was defined in the Cart React Context documentation."],
  ["30", "address", "Assemble the address object to be used for both shipping and billing addresses."],
-  ["42"], ["43"], ["44"], ["45"], ["46"], ["47"], ["48"],
-  ["49"], ["50"],
  ["96", "", "The address's country can only be within the cart's region."]
 ]

@@ -39,7 +39,6 @@ For example:
 export const highlights = [
  ["4", "useCart", "The `useCart` hook was defined in the Cart React Context documentation."],
  ["14", "TODO", "Cart must have at least one item. If not, redirect to another page."],
-  ["28"], ["29"], ["30"], ["31"], ["32"], ["33"], ["34"],
 ]

  ```tsx highlights={highlights}
@@ -200,12 +200,12 @@ export const highlights = [

 export const fetchHighlights = [
  ["5", "retrieveShippingOptions", "This function retrieves the shipping options of the customer's cart."],
-  ["21", "calculateShippingOptionPrices", "This function retrieves the prices of shipping options of type `calculated`."],
-  ["34", "data", "Pass in this property any data relevant to the fulfillment provider."],
-  ["56", "formatPrice", "This function formats a price based on the cart's currency."],
-  ["65", "getShippingOptionPrice", "This function gets the price of a shipping option based on its type."],
-  ["77", "setShippingMethod", "This function sets the shipping method of the cart using the selected shipping option."],
-  ["91", "data", "Pass in this property any data relevant to the fulfillment provider."],
+  ["13", "calculateShippingOptionPrices", "This function retrieves the prices of shipping options of type `calculated`."],
+  ["19", "data", "Pass in this property any data relevant to the fulfillment provider."],
+  ["39", "formatPrice", "This function formats a price based on the cart's currency."],
+  ["48", "getShippingOptionPrice", "This function gets the price of a shipping option based on its type."],
+  ["60", "setShippingMethod", "This function sets the shipping method of the cart using the selected shipping option."],
+  ["65", "data", "Pass in this property any data relevant to the fulfillment provider."],
 ]

  ```ts highlights={fetchHighlights}
@@ -161,8 +161,6 @@ To add a new address for the customer, send a request to the [Add Customer Addre
 export const addHighlights = [
  ["4", "useRegion", "Use the hook defined in the Region Context guide."],
  ["5", "useCustomer", "Use the hook defined in the Customer Context guide."],
-  ["29"], ["30"], ["31"], ["32"], ["33"], ["34"], ["35"], ["36"], ["37"],
-  ["38"], ["39"], ["40"], ["41"], ["42"], ["43"],
 ]

  ```tsx highlights={addHighlights} collapsibleLines="46-117" expandButtonLabel="Show form"
@@ -334,8 +332,6 @@ export const editHighlights = [
  ["4", "useRegion", "Use the hook defined in the Region Context guide."],
  ["5", "useCustomer", "Use the hook defined in the Customer Context guide."],
  ["18", "address", "Retrieve the address from the customer's `addresses` property."],
-  ["59"], ["60"], ["61"], ["62"], ["63"], ["64"], ["65"], ["66"], ["67"],
-  ["68"], ["69"], ["70"], ["71"], ["72"], ["73"],
 ]

  ```tsx highlights={editHighlights} collapsibleLines="76-147" expandButtonLabel="Show form"
@@ -292,7 +292,7 @@ curl '{backend_url}/store/products' \
  </CodeTab>
  <CodeTab label="Fetch" value="fetch">

-```ts highlights={["2", "", "Passes the cookie session ID in your request."]}
+```ts highlights={[["2", "credentials", "Passes the cookie session ID in your request."]]}
 fetch(`<BACKEND_URL>/store/products`, {
  credentials: "include",
 })
@@ -33,7 +33,6 @@ For example:

 export const highlights = [
  ["4", "useCustomer", "Use the hook defined in the Customer Context guide."],
-  ["35"], ["36"], ["37"], ["38"], ["39"], ["40"], ["41"], ["42"], ["43"], ["44"],
 ]

  ```tsx highlights={highlights} collapsibleLines="47-85" expandButtonLabel="Show form"
@@ -1350,7 +1350,7 @@ Then, replace the `TODO` in the `Product` component with the following:
 export const productHighlights4 = [
  ["1", "price", "The formatted price to show to the customer."],
  ["2", "selectedVariantPrice", "Determine the variant to show its price, which is either the selected variant or the variant with the smallest price."],
-  ["29", "formatPrice", "Return the formatted price using the utility you created."]
+  ["19", "formatPrice", "Return the formatted price using the utility you created."]
 ]

 ```tsx title="components/Product/index.tsx" highlights={productHighlights4}
@@ -2049,7 +2049,7 @@ export const shippingHighlights3 = [
  ["7", "filter", "Retrieve shipping options with calculated prices only."],
  ["9", "fetch", "Retrieve the calculated price from the Medusa application."],
  ["24", "Promise.allSettled", "Wait for all calculated prices to be retrieved."],
-  ["13", "setCalculatedPrices", "Set the calculated prices in the state variable."],
+  ["33", "setCalculatedPrices", "Set the calculated prices in the state variable."],
 ]

 ```tsx title="components/Shipping/index.tsx" highlights={shippingHighlights3}
@@ -50,11 +50,7 @@ Learn how to install and configure the JS SDK in the [JS SDK documentation](../.
 <CodeTabs group="store-request">
  <CodeTab label="React" value="react">

-export const highlights = [
-  ["18"], ["19"], ["20"], ["21"], ["22"]
-]
-
-  ```tsx highlights={highlights}
+  ```tsx highlights={[["18"], ["19"], ["20"], ["21"], ["22"]]}
  "use client" // include with Next.js 13+

  import { useEffect, useState } from "react"
@@ -36,12 +36,7 @@ Learn how to install and configure the JS SDK in the [JS SDK documentation](../.
 <CodeTabs group="store-request">
  <CodeTab label="React" value="react">

-export const highlights = [
-  ["18"], ["19"], ["20"],
-  ["21"], ["22"],
-]
-
-  ```tsx highlights={highlights}
+  ```tsx highlights={[["18"], ["19"], ["20"], ["21"], ["22"]]}
  "use client" // include with Next.js 13+

  import { useEffect, useState } from "react"
@@ -48,9 +48,8 @@ Learn how to install and configure the JS SDK in the [JS SDK documentation](../.
  <CodeTab label="React" value="react">

 export const highlights = [
-  ["22"], ["23", `fields`, "Select the fields of category children"],
+  ["23", `fields`, "Select the fields of category children"],
  ["24", "include_descendants_tree", "Indicate that all nested categories should be retrieved."],
-  ["25"], ["26"], ["27"], ["28"], ["29"],
  ["39", "category_children", "Show the nested categories."],
 ]

@@ -156,11 +155,9 @@ For example:
  <CodeTab label="React" value="react">

 export const categoriesHighlights = [
-  ["22"], ["23"], ["24", `fields`, "Select the fields of category children"],
+  ["24", `fields`, "Select the fields of category children"],
  ["25", "include_descendants_tree", "Indicate that all nested categories should be retrieved."],
  ["26", "parent_category_id", "Since each category will have its children, you only retrieve categories that don't have a parent."],
-  ["27"], ["28"], 
-  ["29"], ["30"], ["31"],
  ["45", "category_children", "Show the nested categories."],
 ]

@@ -31,10 +31,7 @@ Learn how to install and configure the JS SDK in the [JS SDK documentation](../.
  <CodeTab label="React" value="react">

 export const highlights = [
-  ["29"], ["30"], ["31"],
-  ["32", "category_id", "Pass the category ID as a query parameter."], ["33"],
-  ["34"], ["35"], ["36"], 
-  ["37"], ["38"], ["39"], ["40"], ["41"], ["42"], ["43"], ["44"]
+  ["32", "category_id", "Pass the category ID as a query parameter."],
 ]

  ```tsx highlights={highlights}
@@ -39,12 +39,7 @@ Learn how to install and configure the JS SDK in the [JS SDK documentation](../.
 <CodeTabs group="store-request">
  <CodeTab label="React" value="react">

-export const highlights = [
-  ["22"], ["23"], ["24"],
-  ["25"], ["26"],
-]
-
-  ```tsx highlights={highlights}
+  ```tsx highlights={[["22"], ["23"], ["24"], ["25"], ["26"]]}
  "use client" // include with Next.js 13+

  import { useEffect, useState } from "react"
@@ -118,13 +113,7 @@ To retrieve a product by its handle, send a request to the [List Product Categor
 <CodeTabs group="store-request">
  <CodeTab label="React" value="react">

-export const handleHighlights = [
-  ["22"], ["23"], ["24"],
-  ["25"], ["26"], ["27"], ["28"],
-  ["29"], ["30"],
-]
-
-  ```tsx highlights={handleHighlights}
+  ```tsx highlights={[["22"], ["23"], ["24"], ["25"], ["26"], ["27"], ["28"], ["29"], ["30"]]}
  "use client" // include with Next.js 13+

  import { useEffect, useState } from "react"
@@ -36,12 +36,7 @@ Learn how to install and configure the JS SDK in the [JS SDK documentation](../.
 <CodeTabs group="store-request">
  <CodeTab label="React" value="react">

-export const highlights = [
-  ["18"], ["19"], ["20"],
-  ["21"], ["22"],
-]
-
-  ```tsx highlights={highlights}
+  ```tsx highlights={[["18"], ["19"], ["20"], ["21"], ["22"]]}
  "use client" // include with Next.js 13+

  import { useEffect, useState } from "react"
@@ -31,10 +31,7 @@ Learn how to install and configure the JS SDK in the [JS SDK documentation](../.
  <CodeTab label="React" value="react">

 export const highlights = [
-  ["29"], ["30"], ["31"],
-  ["32", "collection_id", "Pass the collection ID as a query parameter."], ["33"],
-  ["34"], ["35"], ["36"], 
-  ["37"], ["38"], ["39"], ["40"], ["41"], ["42"], ["43"], ["44"], ["45"], ["46"], ["47"]
+  ["32", "collection_id", "Pass the collection ID as a query parameter."],
 ]

  ```tsx highlights={highlights}
@@ -39,12 +39,7 @@ Learn how to install and configure the JS SDK in the [JS SDK documentation](../.
 <CodeTabs group="store-request">
  <CodeTab label="React" value="react">

-export const highlights = [
-  ["22"], ["23"], ["24"],
-  ["25"], ["26"],
-]
-
-  ```tsx highlights={highlights}
+  ```tsx highlights={[["22"], ["23"], ["24"], ["25"], ["26"]]}
  "use client" // include with Next.js 13+

  import { useEffect, useState } from "react"
@@ -117,12 +112,7 @@ To retrieve a product by its handle, send a request to the [List Product Collect
 <CodeTabs group="store-request">
  <CodeTab label="React" value="react">

-export const handleHighlights = [
-  ["24"], ["25"], ["26"],
-  ["27"], ["28"], ["29"], ["30"], ["31"], ["32"],
-]
-
-  ```tsx highlights={handleHighlights}
+  ```tsx highlights={[["24"], ["25"], ["26"], ["27"], ["28"], ["29"], ["30"], ["31"], ["32"]]}
  "use client" // include with Next.js 13+

  import { useEffect, useState } from "react"
@@ -29,11 +29,7 @@ Learn how to install and configure the JS SDK in the [JS SDK documentation](../.
 <CodeTabs group="store-request">
  <CodeTab label="React" value="react">

-export const highlights = [
-  ["18"], ["19"], ["20"], ["21"], ["22"]
-]
-
-  ```tsx highlights={highlights}
+  ```tsx highlights={[["18"], ["19"], ["20"], ["21"], ["22"]]}
  "use client" // include with Next.js 13+

  import { useEffect, useState } from "react"
@@ -38,12 +38,7 @@ Learn how to install and configure the JS SDK in the [JS SDK documentation](../.
 <CodeTabs group="store-request">
  <CodeTab label="React" value="react">

-export const highlights = [
-  ["22"], ["23"], 
-  ["24"], ["25"], ["26"], ["27"],
-]
-
-  ```tsx highlights={highlights}
+  ```tsx highlights={[["22"], ["23"], ["24"], ["25"], ["26"], ["27"]]}
  "use client" // include with Next.js 13+

  import { useEffect, useState } from "react"
@@ -137,11 +132,7 @@ To retrieve a product by its handle, send a request to the [List Products API ro
 <CodeTabs group="store-request">
  <CodeTab label="React" value="react">

-export const handleHighlights = [
-  ["24"], ["25"], ["26"], ["27"], ["28"], ["29"], ["30"], ["31"], ["32"]
-]
-
-  ```tsx highlights={handleHighlights}
+  ```tsx highlights={[["24"], ["25"], ["26"], ["27"], ["28"], ["29"], ["30"], ["31"], ["32"]]}
  "use client" // include with Next.js 13+

  import { useEffect, useState } from "react"
@@ -48,7 +48,7 @@ export const highlights = [
  ["38", "regionId", "Retrieve the selected region from the `localStorage`."],
  ["41", "list", "If no region is selected, retrieve the list of regions from the Medusa application and select the first one."],
  ["47", "retrieve", "If a region is selected, retrieve it from the Medusa application."],
-  ["6", "useRegion", "The hook that child components of the provider use to access the region."]
+  ["64", "useRegion", "The hook that child components of the provider use to access the region."]
 ]

 ```tsx highlights={highlights}
@@ -33,11 +33,7 @@ Learn how to install and configure the JS SDK in the [JS SDK documentation](../.
 <CodeTabs group="store-request">
  <CodeTab label="React" value="react">

-export const highlights = [
-  ["18"], ["19"], ["20"], ["21"], ["22"]
-]
-
-  ```tsx highlights={highlights}
+  ```tsx highlights={[["18"], ["19"], ["20"], ["21"], ["22"]]}
  "use client" // include with Next.js 13+

  import { useEffect, useState } from "react"