mirror of
https://github.com/vercel/commerce.git
synced 2025-05-12 12:47:50 +00:00
feat: first step of adding core charge functionality
Signed-off-by: Chloe <pinkcloudvnn@gmail.com>
This commit is contained in:
Chloe
parent
649a54891c
commit
e3f564ca77
23
components/cart/core-charge-badge.tsx
Normal file
23
components/cart/core-charge-badge.tsx
Normal file
@ -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;
|
||||
@ -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>
|
||||
|
||||
28
components/checkbox.tsx
Normal file
28
components/checkbox.tsx
Normal file
@ -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 };
|
||||
47
components/core-charge.tsx
Normal file
47
components/core-charge.tsx
Normal file
@ -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;
|
||||
52
components/product/price-with-core-charge.tsx
Normal file
52
components/product/price-with-core-charge.tsx
Normal file
@ -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;
|
||||
@ -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} />
|
||||
|
||||
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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))
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
};
|
||||
|
||||
@ -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",
|
||||
|
||||
199
pnpm-lock.yaml
generated
199
pnpm-lock.yaml
generated
@ -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==}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user