Variant selector refactor

[NabeelAhmed1721]

WHY are these changes introduced?

Improve VariantSelector to return variant object in option values:

<VariantSelector handle={product.handle} options={product.options} variants={product.variants}>
    {({option}) => (
        <>
          <div>{option.name}</div>
          <div>
            /*                          [now accessible as such]     vvvvvvv     */
            {option.values.map(({value, isAvailable, path, isActive, variant}) => (
              <Link
                to={path}
                prefetch="intent"
                className={
                  isActive ? 'active' : isAvailable ? '' : 'opacity-80'
                }
              >
                {value}
                <br />
                {variant && `SKU: ${variant.sku}`}
              </Link>
            ))}
          </div>
        </>
      )}
</VariantSelector>

There has been some small discussion around this issue for a while now and there hasn't been any clear solution. Thus, like others, I had to write a work-around to get the expected results.

HOW to test your changes?

I've also created a new test in VariantSelector.test.ts which now tests for variant objects returned by option values.

Checklist

• I've read the Contributing Guidelines
• I've considered possible cross-platform impacts (Mac, Linux, Windows)
• I've added a changeset if this PR contains user-facing or noteworthy changes
• I've added tests to cover my changes
• I've added or updated the documentation

[NabeelAhmed1721]

I have signed the CLA!

[blittle]

Thank you for this!

[shopify]

Oxygen deployed a preview of your VariantSelector-Refactor branch. Details:

Storefront	Status	Preview link	Deployment details	Last update (UTC)
subscriptions	✅ Successful (Logs)	Preview deployment	Inspect deployment	May 10, 2024 1:40 PM
vite	✅ Successful (Logs)	Preview deployment	Inspect deployment	May 10, 2024 1:40 PM
optimistic-cart-ui	✅ Successful (Logs)	Preview deployment	Inspect deployment	May 10, 2024 1:40 PM
Skeleton (skeleton.hydrogen.shop)	✅ Successful (Logs)	Preview deployment	Inspect deployment	May 10, 2024 1:40 PM
custom-cart-method	✅ Successful (Logs)	Preview deployment	Inspect deployment	May 10, 2024 1:40 PM
third-party-queries-caching	✅ Successful (Logs)	Preview deployment	Inspect deployment	May 10, 2024 1:40 PM

Learn more about Hydrogen's GitHub integration.