From e3f564ca77ddfb0838483dc24b718c41bbe676c3 Mon Sep 17 00:00:00 2001
From: Chloe <pinkcloudvnn@gmail.com>
Date: Wed, 24 Apr 2024 16:38:08 +0700
Subject: [PATCH] feat: first step of adding core charge functionality
Signed-off-by: Chloe <pinkcloudvnn@gmail.com>
---
components/cart/core-charge-badge.tsx | 23 ++
components/cart/modal.tsx | 29 ++-
components/checkbox.tsx | 28 +++
components/core-charge.tsx | 47 +++++
components/product/price-with-core-charge.tsx | 52 +++++
components/product/product-description.tsx | 15 +-
lib/shopify/fragments/product.ts | 6 +
lib/shopify/index.ts | 23 +-
lib/shopify/types.ts | 9 +-
lib/utils.ts | 8 +
package.json | 1 +
pnpm-lock.yaml | 199 +++++++++++++++++-
12 files changed, 412 insertions(+), 28 deletions(-)
create mode 100644 components/cart/core-charge-badge.tsx
create mode 100644 components/checkbox.tsx
create mode 100644 components/core-charge.tsx
create mode 100644 components/product/price-with-core-charge.tsx
diff --git a/components/cart/core-charge-badge.tsx b/components/cart/core-charge-badge.tsx
new file mode 100644
index 000000000..f977d9fe7
--- /dev/null
+++ b/components/cart/core-charge-badge.tsx
@@ -0,0 +1,23 @@
+import CoreCharge from 'components/core-charge';
+import { ProductVariant } from 'lib/shopify/types';
+
+type CoreChargeBadgeProps = {
+ selectedOptions: {
+ name: string;
+ value: string;
+ }[];
+ variants: ProductVariant[];
+};
+
+const CoreChargeBadge = ({ variants, selectedOptions }: CoreChargeBadgeProps) => {
+ const selectedOptionsMap = new Map(selectedOptions.map((option) => [option.name, option.value]));
+ console.log({ selectedOptionsMap, variants });
+ const variant = variants.find((variant: ProductVariant) =>
+ variant.selectedOptions.every((option) => option.value === selectedOptionsMap.get(option.name))
+ );
+
+ console.log({ variant });
+ return <CoreCharge variant={variant} sm />;
+};
+
+export default CoreChargeBadge;
diff --git a/components/cart/modal.tsx b/components/cart/modal.tsx
index 8a414afd3..1f6cdad5c 100644
--- a/components/cart/modal.tsx
+++ b/components/cart/modal.tsx
@@ -10,6 +10,7 @@ import Image from 'next/image';
import Link from 'next/link';
import { Fragment, useEffect, useRef, useState } from 'react';
import CloseCart from './close-cart';
+import CoreChargeBadge from './core-charge-badge';
import { DeleteItemButton } from './delete-item-button';
import { EditItemQuantityButton } from './edit-item-quantity-button';
import OpenCart from './open-cart';
@@ -98,7 +99,7 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
return (
<li
key={i}
- className="flex w-full flex-col border-b border-neutral-300 dark:border-neutral-700"
+ className="flex w-full flex-col border-b border-neutral-300 pb-3 dark:border-neutral-700"
>
<div className="relative flex w-full flex-row justify-between px-1 py-4">
<div className="absolute z-40 -mt-2 ml-[55px]">
@@ -122,7 +123,7 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
/>
</div>
- <div className="flex flex-1 flex-col text-base">
+ <div className="flex flex-1 flex-col gap-1 text-base">
<span className="leading-tight">
{item.merchandise.product.title}
</span>
@@ -133,19 +134,25 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
) : null}
</div>
</Link>
- <div className="flex h-16 flex-col justify-between">
+ </div>
+ <div className="ml-20 flex flex-col gap-2">
+ <div className="flex flex-row items-center gap-2">
<Price
- className="flex justify-end space-y-2 text-right text-sm"
+ className="font-semibold"
amount={item.cost.totalAmount.amount}
currencyCode={item.cost.totalAmount.currencyCode}
/>
- <div className="ml-auto flex h-9 flex-row items-center rounded-full border border-neutral-200 dark:border-neutral-700">
- <EditItemQuantityButton item={item} type="minus" />
- <p className="w-6 text-center">
- <span className="w-full text-sm">{item.quantity}</span>
- </p>
- <EditItemQuantityButton item={item} type="plus" />
- </div>
+ <CoreChargeBadge
+ variants={item.merchandise.product.variants}
+ selectedOptions={item.merchandise.selectedOptions}
+ />
+ </div>
+ <div className="flex h-9 w-fit flex-row items-center rounded-sm border border-neutral-300 dark:border-neutral-700">
+ <EditItemQuantityButton item={item} type="minus" />
+ <p className="w-6 text-center">
+ <span className="w-full text-sm">{item.quantity}</span>
+ </p>
+ <EditItemQuantityButton item={item} type="plus" />
</div>
</div>
</li>
diff --git a/components/checkbox.tsx b/components/checkbox.tsx
new file mode 100644
index 000000000..197cb3b1d
--- /dev/null
+++ b/components/checkbox.tsx
@@ -0,0 +1,28 @@
+'use client';
+
+import { CheckIcon } from '@heroicons/react/24/outline';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { cn } from 'lib/utils';
+import { forwardRef } from 'react';
+
+const Checkbox = forwardRef<
+ React.ElementRef<typeof CheckboxPrimitive.Root>,
+ React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+ <CheckboxPrimitive.Root
+ ref={ref}
+ className={cn(
+ 'ring-offset-background focus-visible:ring-ring peer h-4 w-4 shrink-0 rounded-sm border border-dark focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-dark data-[state=checked]:text-white',
+ className
+ )}
+ {...props}
+ >
+ <CheckboxPrimitive.Indicator className={cn('flex items-center justify-center text-current')}>
+ <CheckIcon className="h-4 w-4" />
+ </CheckboxPrimitive.Indicator>
+ </CheckboxPrimitive.Root>
+));
+
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+
+export { Checkbox };
diff --git a/components/core-charge.tsx b/components/core-charge.tsx
new file mode 100644
index 000000000..55346fb91
--- /dev/null
+++ b/components/core-charge.tsx
@@ -0,0 +1,47 @@
+import { ArrowPathIcon } from '@heroicons/react/16/solid';
+import { ProductVariant } from 'lib/shopify/types';
+import Price from './price';
+import Tooltip from './tooltip';
+
+type CoreChargeProps = {
+ variant?: ProductVariant;
+ sm?: boolean;
+};
+
+const CoreCharge = ({ variant, sm = false }: CoreChargeProps) => {
+ if (!variant || !variant.coreCharge?.amount || variant.waiverAvailable) return null;
+
+ const originalPrice = String(Number(variant.price.amount) - Number(variant.coreCharge.amount));
+
+ const coreChargeDisplay = (
+ <Price amount={variant.coreCharge.amount} currencyCode={variant.price.currencyCode} />
+ );
+
+ return (
+ <div className="flex items-center gap-2 rounded-md bg-gray-100 px-3 py-1 text-sm">
+ <ArrowPathIcon className="h-4 w-4" />
+ <span className="flex items-center gap-1" data-tooltip-id="core-charge-explanation">
+ {sm ? coreChargeDisplay : <>Core Charge: {coreChargeDisplay}</>}
+ </span>
+ {sm ? null : (
+ <Tooltip id="core-charge-explanation" className="max-w-64">
+ <p className="flex flex-wrap items-center gap-1">
+ The core charge of {coreChargeDisplay} is a refundable deposit that is added to the
+ price of the part.
+ </p>
+ <p>
+ This charge ensures that the old, worn-out part is returned to the supplier for proper
+ disposal or recycling.
+ </p>
+ <p className="flex flex-wrap items-center gap-1">
+ When you return the old part, you'll receive a refund of the core charge, making
+ the final price of the part{' '}
+ <Price amount={originalPrice} currencyCode={variant.price.currencyCode} />
+ </p>
+ </Tooltip>
+ )}
+ </div>
+ );
+};
+
+export default CoreCharge;
diff --git a/components/product/price-with-core-charge.tsx b/components/product/price-with-core-charge.tsx
new file mode 100644
index 000000000..0d177ce4e
--- /dev/null
+++ b/components/product/price-with-core-charge.tsx
@@ -0,0 +1,52 @@
+'use client';
+
+import { InformationCircleIcon } from '@heroicons/react/24/outline';
+import { Checkbox } from 'components/checkbox';
+import CoreCharge from 'components/core-charge';
+import Price from 'components/price';
+import Tooltip from 'components/tooltip';
+import { Money, ProductVariant } from 'lib/shopify/types';
+import { useSearchParams } from 'next/navigation';
+
+type PriceWithCoreChargeProps = {
+ variants: ProductVariant[];
+ defaultPrice: Money;
+};
+
+const PriceWithCoreCharge = ({ variants, defaultPrice }: PriceWithCoreChargeProps) => {
+ const searchParams = useSearchParams();
+ const variant = variants.find((variant: ProductVariant) =>
+ variant.selectedOptions.every(
+ (option) => option.value === searchParams.get(option.name.toLowerCase())
+ )
+ );
+ console.log({ variant });
+ return (
+ <div className="mr-auto flex w-auto flex-row flex-wrap items-center gap-3 text-sm">
+ <Price
+ amount={variant?.price.amount || defaultPrice.amount}
+ currencyCode={variant?.price.currencyCode || defaultPrice.currencyCode}
+ className="text-lg font-semibold"
+ />
+ <CoreCharge variant={variant} />
+ {variant?.coreCharge?.amount && variant.waiverAvailable ? (
+ <div className="mt-1 flex w-full items-center space-x-3">
+ <Checkbox id="payCoreCharge" />
+ <label htmlFor="payCoreCharge" className="text-md flex items-center gap-1 leading-none">
+ Pay a core charge of
+ <Price
+ amount={variant.coreCharge.amount}
+ currencyCode={variant.coreCharge.currencyCode}
+ />
+ <span data-tooltip-id="payCoreCharge">
+ <InformationCircleIcon className="ml-1 h-4 w-4 text-gray-500" />
+ </span>
+ </label>
+ <Tooltip id="payCoreCharge">Select this if you do not have a core to return</Tooltip>
+ </div>
+ ) : null}
+ </div>
+ );
+};
+
+export default PriceWithCoreCharge;
diff --git a/components/product/product-description.tsx b/components/product/product-description.tsx
index 83567fe7c..0faec0d43 100644
--- a/components/product/product-description.tsx
+++ b/components/product/product-description.tsx
@@ -1,22 +1,19 @@
import { AddToCart } from 'components/cart/add-to-cart';
-import Price from 'components/price';
import Prose from 'components/prose';
import { Product } from 'lib/shopify/types';
import { Suspense } from 'react';
+import PriceWithCoreCharge from './price-with-core-charge';
import { VariantSelector } from './variant-selector';
export function ProductDescription({ product }: { product: Product }) {
return (
<>
<div className="mb-6 flex flex-col border-b pb-6 dark:border-neutral-700">
- <h1 className="mb-2 text-4xl font-bold">{product.title}</h1>
- <div className="mr-auto w-auto text-sm">
- <Price
- amount={product.priceRange.minVariantPrice.amount}
- currencyCode={product.priceRange.minVariantPrice.currencyCode}
- className="text-base font-semibold"
- />
- </div>
+ <h1 className="mb-3 text-4xl font-bold">{product.title}</h1>
+ <PriceWithCoreCharge
+ variants={product.variants}
+ defaultPrice={product.priceRange.minVariantPrice}
+ />
</div>
<Suspense fallback={null}>
<VariantSelector options={product.options} variants={product.variants} />
diff --git a/lib/shopify/fragments/product.ts b/lib/shopify/fragments/product.ts
index aa194ccbb..e78df9862 100644
--- a/lib/shopify/fragments/product.ts
+++ b/lib/shopify/fragments/product.ts
@@ -44,6 +44,12 @@ const productFragment = /* GraphQL */ `
amount
currencyCode
}
+ coreCharge: metafield(namespace: "custom", key: "core_charge") {
+ value
+ }
+ waiverAvailable: metafield(namespace: "custom", key: "waiver_available") {
+ value
+ }
}
}
}
diff --git a/lib/shopify/index.ts b/lib/shopify/index.ts
index ddf082fc4..65dcebcfa 100644
--- a/lib/shopify/index.ts
+++ b/lib/shopify/index.ts
@@ -1,6 +1,6 @@
import { HIDDEN_PRODUCT_TAG, SHOPIFY_GRAPHQL_API_ENDPOINT, TAGS } from 'lib/constants';
import { isShopifyError } from 'lib/type-guards';
-import { ensureStartsWith, normalizeUrl } from 'lib/utils';
+import { ensureStartsWith, normalizeUrl, parseMetaFieldValue } from 'lib/utils';
import { revalidateTag } from 'next/cache';
import { headers } from 'next/headers';
import { NextRequest, NextResponse } from 'next/server';
@@ -29,8 +29,10 @@ import {
Connection,
Image,
Menu,
+ Money,
Page,
Product,
+ ProductVariant,
ShopifyAddToCartOperation,
ShopifyCart,
ShopifyCartOperation,
@@ -45,6 +47,7 @@ import {
ShopifyProduct,
ShopifyProductOperation,
ShopifyProductRecommendationsOperation,
+ ShopifyProductVariant,
ShopifyProductsOperation,
ShopifyRemoveFromCartOperation,
ShopifyUpdateCartOperation
@@ -128,7 +131,13 @@ const reshapeCart = (cart: ShopifyCart): Cart => {
return {
...cart,
- lines: removeEdgesAndNodes(cart.lines)
+ lines: removeEdgesAndNodes(cart.lines).map((lineItem) => ({
+ ...lineItem,
+ merchandise: {
+ ...lineItem.merchandise,
+ product: reshapeProduct(lineItem.merchandise.product)
+ }
+ }))
};
};
@@ -171,6 +180,14 @@ const reshapeImages = (images: Connection<Image>, productTitle: string) => {
});
};
+const reshapeVariants = (variants: ShopifyProductVariant[]): ProductVariant[] => {
+ return variants.map((variant) => ({
+ ...variant,
+ coreCharge: parseMetaFieldValue<Money>(variant.coreCharge),
+ waiverAvailable: parseMetaFieldValue<boolean>(variant.waiverAvailable)
+ }));
+};
+
const reshapeProduct = (product: ShopifyProduct, filterHiddenProducts: boolean = true) => {
if (!product || (filterHiddenProducts && product.tags.includes(HIDDEN_PRODUCT_TAG))) {
return undefined;
@@ -181,7 +198,7 @@ const reshapeProduct = (product: ShopifyProduct, filterHiddenProducts: boolean =
return {
...rest,
images: reshapeImages(images, product.title),
- variants: removeEdgesAndNodes(variants)
+ variants: reshapeVariants(removeEdgesAndNodes(variants))
};
};
diff --git a/lib/shopify/types.ts b/lib/shopify/types.ts
index 5069ee168..3a4dbfee2 100644
--- a/lib/shopify/types.ts
+++ b/lib/shopify/types.ts
@@ -82,6 +82,13 @@ export type ProductVariant = {
value: string;
}[];
price: Money;
+ coreCharge: Money | null;
+ waiverAvailable: boolean | null;
+};
+
+export type ShopifyProductVariant = Omit<ProductVariant, 'coreCharge' | 'waiverAvailable'> & {
+ coreCharge: { value: string } | null;
+ waiverAvailable: { value: string };
};
export type SEO = {
@@ -121,7 +128,7 @@ export type ShopifyProduct = {
maxVariantPrice: Money;
minVariantPrice: Money;
};
- variants: Connection<ProductVariant>;
+ variants: Connection<ShopifyProductVariant>;
featuredImage: Image;
images: Connection<Image>;
seo: SEO;
diff --git a/lib/utils.ts b/lib/utils.ts
index 76628eee9..9d2179caf 100644
--- a/lib/utils.ts
+++ b/lib/utils.ts
@@ -47,3 +47,11 @@ export function cn(...inputs: ClassValue[]) {
export function normalizeUrl(domain: string, url: string) {
return url.replace(domain, '').replace('/collections', '/search').replace('/pages', '');
}
+
+export const parseMetaFieldValue = <T>(field: { value: string } | null): T | null => {
+ try {
+ return JSON.parse(field?.value || '{}');
+ } catch (error) {
+ return null;
+ }
+};
diff --git a/package.json b/package.json
index b0faf5da2..f758ea0e5 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
"dependencies": {
"@headlessui/react": "^1.7.18",
"@heroicons/react": "^2.1.3",
+ "@radix-ui/react-checkbox": "^1.0.4",
"clsx": "^2.1.0",
"geist": "^1.3.0",
"next": "14.1.4",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1954facb9..03dcf6dca 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -11,6 +11,9 @@ dependencies:
'@heroicons/react':
specifier: ^2.1.3
version: 2.1.3(react@18.2.0)
+ '@radix-ui/react-checkbox':
+ specifier: ^1.0.4
+ version: 1.0.4(@types/react-dom@18.2.22)(@types/react@18.2.72)(react-dom@18.2.0)(react@18.2.0)
clsx:
specifier: ^2.1.0
version: 2.1.0
@@ -383,6 +386,198 @@ packages:
dev: true
optional: true
+ /@radix-ui/primitive@1.0.1:
+ resolution: {integrity: sha512-yQ8oGX2GVsEYMWGxcovu1uGWPCxV5BFfeeYxqPmuAzUyLT9qmaMXSAhXpb0WrspIeqYzdJpkh2vHModJPgRIaw==}
+ dependencies:
+ '@babel/runtime': 7.24.1
+ dev: false
+
+ /@radix-ui/react-checkbox@1.0.4(@types/react-dom@18.2.22)(@types/react@18.2.72)(react-dom@18.2.0)(react@18.2.0):
+ resolution: {integrity: sha512-CBuGQa52aAYnADZVt/KBQzXrwx6TqnlwtcIPGtVt5JkkzQwMOLJjPukimhfKEr4GQNd43C+djUh5Ikopj8pSLg==}
+ peerDependencies:
+ '@types/react': '*'
+ '@types/react-dom': '*'
+ react: ^16.8 || ^17.0 || ^18.0
+ react-dom: ^16.8 || ^17.0 || ^18.0
+ peerDependenciesMeta:
+ '@types/react':
+ optional: true
+ '@types/react-dom':
+ optional: true
+ dependencies:
+ '@babel/runtime': 7.24.1
+ '@radix-ui/primitive': 1.0.1
+ '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.72)(react@18.2.0)
+ '@radix-ui/react-context': 1.0.1(@types/react@18.2.72)(react@18.2.0)
+ '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.2.22)(@types/react@18.2.72)(react-dom@18.2.0)(react@18.2.0)
+ '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.22)(@types/react@18.2.72)(react-dom@18.2.0)(react@18.2.0)
+ '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.72)(react@18.2.0)
+ '@radix-ui/react-use-previous': 1.0.1(@types/react@18.2.72)(react@18.2.0)
+ '@radix-ui/react-use-size': 1.0.1(@types/react@18.2.72)(react@18.2.0)
+ '@types/react': 18.2.72
+ '@types/react-dom': 18.2.22
+ react: 18.2.0
+ react-dom: 18.2.0(react@18.2.0)
+ dev: false
+
+ /@radix-ui/react-compose-refs@1.0.1(@types/react@18.2.72)(react@18.2.0):
+ resolution: {integrity: sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==}
+ peerDependencies:
+ '@types/react': '*'
+ react: ^16.8 || ^17.0 || ^18.0
+ peerDependenciesMeta:
+ '@types/react':
+ optional: true
+ dependencies:
+ '@babel/runtime': 7.24.1
+ '@types/react': 18.2.72
+ react: 18.2.0
+ dev: false
+
+ /@radix-ui/react-context@1.0.1(@types/react@18.2.72)(react@18.2.0):
+ resolution: {integrity: sha512-ebbrdFoYTcuZ0v4wG5tedGnp9tzcV8awzsxYph7gXUyvnNLuTIcCk1q17JEbnVhXAKG9oX3KtchwiMIAYp9NLg==}
+ peerDependencies:
+ '@types/react': '*'
+ react: ^16.8 || ^17.0 || ^18.0
+ peerDependenciesMeta:
+ '@types/react':
+ optional: true
+ dependencies:
+ '@babel/runtime': 7.24.1
+ '@types/react': 18.2.72
+ react: 18.2.0
+ dev: false
+
+ /@radix-ui/react-presence@1.0.1(@types/react-dom@18.2.22)(@types/react@18.2.72)(react-dom@18.2.0)(react@18.2.0):
+ resolution: {integrity: sha512-UXLW4UAbIY5ZjcvzjfRFo5gxva8QirC9hF7wRE4U5gz+TP0DbRk+//qyuAQ1McDxBt1xNMBTaciFGvEmJvAZCg==}
+ peerDependencies:
+ '@types/react': '*'
+ '@types/react-dom': '*'
+ react: ^16.8 || ^17.0 || ^18.0
+ react-dom: ^16.8 || ^17.0 || ^18.0
+ peerDependenciesMeta:
+ '@types/react':
+ optional: true
+ '@types/react-dom':
+ optional: true
+ dependencies:
+ '@babel/runtime': 7.24.1
+ '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.72)(react@18.2.0)
+ '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.72)(react@18.2.0)
+ '@types/react': 18.2.72
+ '@types/react-dom': 18.2.22
+ react: 18.2.0
+ react-dom: 18.2.0(react@18.2.0)
+ dev: false
+
+ /@radix-ui/react-primitive@1.0.3(@types/react-dom@18.2.22)(@types/react@18.2.72)(react-dom@18.2.0)(react@18.2.0):
+ resolution: {integrity: sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==}
+ peerDependencies:
+ '@types/react': '*'
+ '@types/react-dom': '*'
+ react: ^16.8 || ^17.0 || ^18.0
+ react-dom: ^16.8 || ^17.0 || ^18.0
+ peerDependenciesMeta:
+ '@types/react':
+ optional: true
+ '@types/react-dom':
+ optional: true
+ dependencies:
+ '@babel/runtime': 7.24.1
+ '@radix-ui/react-slot': 1.0.2(@types/react@18.2.72)(react@18.2.0)
+ '@types/react': 18.2.72
+ '@types/react-dom': 18.2.22
+ react: 18.2.0
+ react-dom: 18.2.0(react@18.2.0)
+ dev: false
+
+ /@radix-ui/react-slot@1.0.2(@types/react@18.2.72)(react@18.2.0):
+ resolution: {integrity: sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==}
+ peerDependencies:
+ '@types/react': '*'
+ react: ^16.8 || ^17.0 || ^18.0
+ peerDependenciesMeta:
+ '@types/react':
+ optional: true
+ dependencies:
+ '@babel/runtime': 7.24.1
+ '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.72)(react@18.2.0)
+ '@types/react': 18.2.72
+ react: 18.2.0
+ dev: false
+
+ /@radix-ui/react-use-callback-ref@1.0.1(@types/react@18.2.72)(react@18.2.0):
+ resolution: {integrity: sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==}
+ peerDependencies:
+ '@types/react': '*'
+ react: ^16.8 || ^17.0 || ^18.0
+ peerDependenciesMeta:
+ '@types/react':
+ optional: true
+ dependencies:
+ '@babel/runtime': 7.24.1
+ '@types/react': 18.2.72
+ react: 18.2.0
+ dev: false
+
+ /@radix-ui/react-use-controllable-state@1.0.1(@types/react@18.2.72)(react@18.2.0):
+ resolution: {integrity: sha512-Svl5GY5FQeN758fWKrjM6Qb7asvXeiZltlT4U2gVfl8Gx5UAv2sMR0LWo8yhsIZh2oQ0eFdZ59aoOOMV7b47VA==}
+ peerDependencies:
+ '@types/react': '*'
+ react: ^16.8 || ^17.0 || ^18.0
+ peerDependenciesMeta:
+ '@types/react':
+ optional: true
+ dependencies:
+ '@babel/runtime': 7.24.1
+ '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.72)(react@18.2.0)
+ '@types/react': 18.2.72
+ react: 18.2.0
+ dev: false
+
+ /@radix-ui/react-use-layout-effect@1.0.1(@types/react@18.2.72)(react@18.2.0):
+ resolution: {integrity: sha512-v/5RegiJWYdoCvMnITBkNNx6bCj20fiaJnWtRkU18yITptraXjffz5Qbn05uOiQnOvi+dbkznkoaMltz1GnszQ==}
+ peerDependencies:
+ '@types/react': '*'
+ react: ^16.8 || ^17.0 || ^18.0
+ peerDependenciesMeta:
+ '@types/react':
+ optional: true
+ dependencies:
+ '@babel/runtime': 7.24.1
+ '@types/react': 18.2.72
+ react: 18.2.0
+ dev: false
+
+ /@radix-ui/react-use-previous@1.0.1(@types/react@18.2.72)(react@18.2.0):
+ resolution: {integrity: sha512-cV5La9DPwiQ7S0gf/0qiD6YgNqM5Fk97Kdrlc5yBcrF3jyEZQwm7vYFqMo4IfeHgJXsRaMvLABFtd0OVEmZhDw==}
+ peerDependencies:
+ '@types/react': '*'
+ react: ^16.8 || ^17.0 || ^18.0
+ peerDependenciesMeta:
+ '@types/react':
+ optional: true
+ dependencies:
+ '@babel/runtime': 7.24.1
+ '@types/react': 18.2.72
+ react: 18.2.0
+ dev: false
+
+ /@radix-ui/react-use-size@1.0.1(@types/react@18.2.72)(react@18.2.0):
+ resolution: {integrity: sha512-ibay+VqrgcaI6veAojjofPATwledXiSmX+C0KrBk/xgpX9rBzPV3OsfwlhQdUOFbh+LKQorLYT+xTXW9V8yd0g==}
+ peerDependencies:
+ '@types/react': '*'
+ react: ^16.8 || ^17.0 || ^18.0
+ peerDependenciesMeta:
+ '@types/react':
+ optional: true
+ dependencies:
+ '@babel/runtime': 7.24.1
+ '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.72)(react@18.2.0)
+ '@types/react': 18.2.72
+ react: 18.2.0
+ dev: false
+
/@rushstack/eslint-patch@1.8.0:
resolution: {integrity: sha512-0HejFckBN2W+ucM6cUOlwsByTKt9/+0tWhqUffNIcHqCXkthY/mZ7AuYPK/2IIaGWhdl0h+tICDO0ssLMd6XMQ==}
dev: true
@@ -444,20 +639,17 @@ packages:
/@types/prop-types@15.7.12:
resolution: {integrity: sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==}
- dev: true
/@types/react-dom@18.2.22:
resolution: {integrity: sha512-fHkBXPeNtfvri6gdsMYyW+dW7RXFo6Ad09nLFK0VQWR7yGLai/Cyvyj696gbwYvBnhGtevUG9cET0pmUbMtoPQ==}
dependencies:
'@types/react': 18.2.72
- dev: true
/@types/react@18.2.72:
resolution: {integrity: sha512-/e7GWxGzXQF7OJAua7UAYqYi/4VpXEfbGtmYQcAQwP3SjjjAXfybTf/JK5S+SaetB/ChXl8Y2g1hCsj7jDXxcg==}
dependencies:
'@types/prop-types': 15.7.12
csstype: 3.1.3
- dev: true
/@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@5.4.3):
resolution: {integrity: sha512-tbsV1jPne5CkFQCgPBcDOt30ItF7aJoZL997JSF7MhGQqOeT3svWRYxiqlfA5RUdlHN6Fi+EI9bxqbdyAUZjYQ==}
@@ -970,7 +1162,6 @@ packages:
/csstype@3.1.3:
resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
- dev: true
/damerau-levenshtein@1.0.8:
resolution: {integrity: sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==}