chore: move packages/components into core (#767)

* chore: merge package.json

* chore: merge tailwind config

* chore: move /components into core, update imports

* fix: remove package.json

.changeset/config.json

@@ -5,7 +5,6 @@
     { "repo": "bigcommerce/catalyst" }
   ],
   "commit": false,
-  "fixed": [["@bigcommerce/components"]],
   "linked": [],
   "access": "public",
   "privatePackages": {

.changeset/hungry-points-wash.md

@@ -0,0 +1,5 @@
+---
+"@bigcommerce/catalyst-core": patch
+---
+
+Move /packages/components into core, update related configurations.

apps/core/app/[locale]/(default)/(faceted)/_components/breadcrumbs.tsx

@@ -1,12 +1,12 @@
-import {
-  BreadcrumbDivider,
-  BreadcrumbItem,
-  Breadcrumbs as ComponentsBreadcrumbs,
-} from '@bigcommerce/components/breadcrumbs';
 import { ChevronRight } from 'lucide-react';
 import { Fragment } from 'react';
 
 import { Link } from '~/components/link';
+import {
+  BreadcrumbDivider,
+  BreadcrumbItem,
+  Breadcrumbs as ComponentsBreadcrumbs,
+} from '~/components/ui/breadcrumbs';
 
 interface Props {
   breadcrumbs: Array<{

apps/core/app/[locale]/(default)/(faceted)/_components/facets.tsx

@@ -1,21 +1,21 @@
 'use client';
 
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from '@bigcommerce/components/accordion';
-import { Button } from '@bigcommerce/components/button';
-import { Checkbox } from '@bigcommerce/components/checkbox';
-import { Input } from '@bigcommerce/components/input';
-import { Label } from '@bigcommerce/components/label';
-import { Rating } from '@bigcommerce/components/rating';
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 import { useTranslations } from 'next-intl';
 import { FormEvent, useRef } from 'react';
 
 import { Link } from '~/components/link';
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from '~/components/ui/accordion';
+import { Button } from '~/components/ui/button';
+import { Checkbox } from '~/components/ui/checkbox';
+import { Input } from '~/components/ui/input';
+import { Label } from '~/components/ui/label';
+import { Rating } from '~/components/ui/rating';
 import { cn } from '~/lib/utils';
 
 import type { Facet, PageType } from '../types';

apps/core/app/[locale]/(default)/(faceted)/_components/mobile-side-nav.tsx

@@ -1,6 +1,10 @@
 'use client';
 
-import { Button } from '@bigcommerce/components/button';
+import { Filter } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { PropsWithChildren, useEffect, useState } from 'react';
+
+import { Button } from '~/components/ui/button';
 import {
   Sheet,
   SheetClose,
@@ -9,10 +13,7 @@ import {
   SheetOverlay,
   SheetTitle,
   SheetTrigger,
-} from '@bigcommerce/components/sheet';
-import { Filter } from 'lucide-react';
-import { useTranslations } from 'next-intl';
-import { PropsWithChildren, useEffect, useState } from 'react';
+} from '~/components/ui/sheet';
 
 export const MobileSideNav = ({ children }: PropsWithChildren) => {
   const [open, setOpen] = useState(false);

apps/core/app/[locale]/(default)/(faceted)/_components/refine-by.tsx

@@ -1,9 +1,10 @@
 'use client';
 
-import { Tag, TagAction, TagContent } from '@bigcommerce/components/tag';
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 import { useTranslations } from 'next-intl';
 
+import { Tag, TagAction, TagContent } from '~/components/ui/tag';
+
 import type { Facet, PageType, PublicParamKeys } from '../types';
 
 export interface Props {

apps/core/app/[locale]/(default)/(faceted)/_components/skeleton-ui.tsx

@@ -1,4 +1,4 @@
-import { Skeleton } from '@bigcommerce/components/skeleton';
+import { Skeleton } from '~/components/ui/skeleton';
 
 export const SkeletonIU = () => (
   <div>

apps/core/app/[locale]/(default)/(faceted)/_components/sort-by.tsx

@@ -1,9 +1,10 @@
 'use client';
 
-import { Select, SelectContent, SelectItem } from '@bigcommerce/components/select';
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 import { useTranslations } from 'next-intl';
 
+import { Select, SelectContent, SelectItem } from '~/components/ui/select';
+
 export function SortBy() {
   const router = useRouter();
   const pathname = usePathname();

apps/core/app/[locale]/(default)/account/[tab]/_components/account-tabs.tsx

@@ -1,10 +1,10 @@
 'use client';
 
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@bigcommerce/components/tabs';
 import { useTranslations } from 'next-intl';
 import { PropsWithChildren } from 'react';
 
 import { Link } from '~/components/link';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '~/components/ui/tabs';
 
 import { TabType } from '../layout';
 

apps/core/app/[locale]/(default)/account/[tab]/_components/addresses-list.tsx

@@ -1,8 +1,8 @@
-import { Button } from '@bigcommerce/components/button';
 import { useTranslations } from 'next-intl';
 
 import { getCustomerAddresses } from '~/client/queries/get-customer-addresses';
 import { Link } from '~/components/link';
+import { Button } from '~/components/ui/button';
 
 type Addresses = NonNullable<Awaited<ReturnType<typeof getCustomerAddresses>>>['addresses'];
 

apps/core/app/[locale]/(default)/blog/[blogId]/page.tsx

@@ -1,11 +1,3 @@
-import {
-  BlogPostAuthor,
-  BlogPostBanner,
-  BlogPostDate,
-  BlogPostImage,
-  BlogPostTitle,
-} from '@bigcommerce/components/blog-post-card';
-import { Tag, TagContent } from '@bigcommerce/components/tag';
 import type { Metadata } from 'next';
 import { notFound } from 'next/navigation';
 import { getFormatter } from 'next-intl/server';
@@ -14,6 +6,14 @@ import { getBlogPost } from '~/client/queries/get-blog-post';
 import { BcImage } from '~/components/bc-image';
 import { Link } from '~/components/link';
 import { SharingLinks } from '~/components/sharing-links';
+import {
+  BlogPostAuthor,
+  BlogPostBanner,
+  BlogPostDate,
+  BlogPostImage,
+  BlogPostTitle,
+} from '~/components/ui/blog-post-card';
+import { Tag, TagContent } from '~/components/ui/tag';
 import { LocaleType } from '~/i18n';
 
 interface Props {

apps/core/app/[locale]/(default)/cart/_components/checkout-button.tsx

@@ -1,6 +1,5 @@
-import { Button } from '@bigcommerce/components/button';
-
 import { getCheckoutUrl } from '~/client/management/get-checkout-url';
+import { Button } from '~/components/ui/button';
 
 export const CheckoutButton = async ({ cartId, label }: { cartId: string; label: string }) => {
   const checkoutUrl = await getCheckoutUrl(cartId);

apps/core/app/[locale]/(default)/cart/_components/coupon-code/index.tsx

@@ -1,15 +1,15 @@
 'use client';
 
-import { Button } from '@bigcommerce/components/button';
-import { Field, FieldControl, FieldMessage, Form, FormSubmit } from '@bigcommerce/components/form';
-import { Input } from '@bigcommerce/components/input';
 import { AlertCircle, Loader2 as Spinner } from 'lucide-react';
 import { useFormatter, useTranslations } from 'next-intl';
 import { useEffect, useState } from 'react';
 import { useFormStatus } from 'react-dom';
 import { toast } from 'react-hot-toast';
 
 import { FragmentOf } from '~/client/graphql';
+import { Button } from '~/components/ui/button';
+import { Field, FieldControl, FieldMessage, Form, FormSubmit } from '~/components/ui/form';
+import { Input } from '~/components/ui/input';
 
 import { applyCouponCode } from './apply-coupon-code';
 import { CouponCodeFragment } from './fragment';

apps/core/app/[locale]/(default)/cart/_components/shipping-estimator/index.tsx

@@ -1,11 +1,11 @@
 'use client';
 
-import { Button } from '@bigcommerce/components/button';
 import { useFormatter, useTranslations } from 'next-intl';
 import { useEffect, useRef, useState } from 'react';
 
 import { FragmentOf } from '~/client/graphql';
 import { ExistingResultType } from '~/client/util';
+import { Button } from '~/components/ui/button';
 
 import { ShippingInfo } from '../shipping-info';
 import { ShippingOptions } from '../shipping-options';

apps/core/app/[locale]/(default)/cart/_components/shipping-info/index.tsx

@@ -1,7 +1,3 @@
-import { Button } from '@bigcommerce/components/button';
-import { Field, FieldControl, FieldLabel, Form, FormSubmit } from '@bigcommerce/components/form';
-import { Input } from '@bigcommerce/components/input';
-import { Select, SelectContent, SelectItem } from '@bigcommerce/components/select';
 import { AlertCircle, Loader2 as Spinner } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { useEffect, useReducer } from 'react';
@@ -11,6 +7,10 @@ import { toast } from 'react-hot-toast';
 import { getShippingCountries } from '~/app/[locale]/(default)/cart/_components/shipping-estimator/get-shipping-countries';
 import { FragmentOf } from '~/client/graphql';
 import { ExistingResultType } from '~/client/util';
+import { Button } from '~/components/ui/button';
+import { Field, FieldControl, FieldLabel, Form, FormSubmit } from '~/components/ui/form';
+import { Input } from '~/components/ui/input';
+import { Select, SelectContent, SelectItem } from '~/components/ui/select';
 import { cn } from '~/lib/utils';
 
 import { ShippingInfoFragment } from './fragment';

apps/core/app/[locale]/(default)/cart/_components/shipping-options/index.tsx

@@ -1,12 +1,12 @@
-import { Field, FieldLabel, Form, FormSubmit } from '@bigcommerce/components/form';
-import { Label } from '@bigcommerce/components/label';
-import { Message } from '@bigcommerce/components/message';
-import { RadioGroup, RadioItem } from '@bigcommerce/components/radio-group';
 import { AlertCircle } from 'lucide-react';
 import { useFormatter, useTranslations } from 'next-intl';
 import { toast } from 'react-hot-toast';
 
 import { FragmentOf } from '~/client/graphql';
+import { Field, FieldLabel, Form, FormSubmit } from '~/components/ui/form';
+import { Label } from '~/components/ui/label';
+import { Message } from '~/components/ui/message';
+import { RadioGroup, RadioItem } from '~/components/ui/radio-group';
 
 import { ShippingOptionsFragment } from './fragment';
 import { SubmitButton } from './submit-button';

apps/core/app/[locale]/(default)/cart/_components/shipping-options/submit-button.tsx

@@ -1,8 +1,9 @@
-import { Button } from '@bigcommerce/components/button';
 import { Loader2 as Spinner } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { useFormStatus } from 'react-dom';
 
+import { Button } from '~/components/ui/button';
+
 export const SubmitButton = () => {
   const t = useTranslations('Cart.SubmitShippingCost');
   const { pending } = useFormStatus();

apps/core/app/[locale]/(default)/compare/_components/add-to-cart.tsx

@@ -1,10 +1,11 @@
 'use client';
 
-import { Button } from '@bigcommerce/components/button';
 import { Loader2 as Spinner } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { useFormStatus } from 'react-dom';
 
+import { Button } from '~/components/ui/button';
+
 export const AddToCart = ({
   disabled = false,
   productName,

apps/core/app/[locale]/(default)/compare/page.tsx

@@ -1,6 +1,4 @@
 import { removeEdgesAndNodes } from '@bigcommerce/catalyst-client';
-import { Button } from '@bigcommerce/components/button';
-import { Rating } from '@bigcommerce/components/rating';
 import { NextIntlClientProvider } from 'next-intl';
 import { getMessages, getTranslations } from 'next-intl/server';
 import * as z from 'zod';
@@ -13,6 +11,8 @@ import { BcImage } from '~/components/bc-image';
 import { Link } from '~/components/link';
 import { Pricing, PricingFragment } from '~/components/pricing';
 import { SearchForm } from '~/components/search-form';
+import { Button } from '~/components/ui/button';
+import { Rating } from '~/components/ui/rating';
 import { LocaleType } from '~/i18n';
 import { cn } from '~/lib/utils';
 

apps/core/app/[locale]/(default)/login/_components/change-password-form.tsx

@@ -1,21 +1,21 @@
 'use client';
 
-import { Button } from '@bigcommerce/components/button';
+import { Loader2 as Spinner } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { ChangeEvent, useRef, useState } from 'react';
+import { useFormState, useFormStatus } from 'react-dom';
+
+import { Button } from '~/components/ui/button';
 import {
   Field,
   FieldControl,
   FieldLabel,
   FieldMessage,
   Form,
   FormSubmit,
-} from '@bigcommerce/components/form';
-import { Input } from '@bigcommerce/components/input';
-import { Message } from '@bigcommerce/components/message';
-import { Loader2 as Spinner } from 'lucide-react';
-import { useTranslations } from 'next-intl';
-import { ChangeEvent, useRef, useState } from 'react';
-import { useFormState, useFormStatus } from 'react-dom';
-
+} from '~/components/ui/form';
+import { Input } from '~/components/ui/input';
+import { Message } from '~/components/ui/message';
 import { useRouter } from '~/navigation';
 
 import { submitChangePasswordForm } from '../_actions/submit-change-password-form';

apps/core/app/[locale]/(default)/login/_components/login-form.tsx

@@ -1,22 +1,22 @@
 'use client';
 
-import { Button } from '@bigcommerce/components/button';
+import { Loader2 as Spinner } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { ChangeEvent, useState } from 'react';
+import { useFormState, useFormStatus } from 'react-dom';
+
+import { Link } from '~/components/link';
+import { Button } from '~/components/ui/button';
 import {
   Field,
   FieldControl,
   FieldLabel,
   FieldMessage,
   Form,
   FormSubmit,
-} from '@bigcommerce/components/form';
-import { Input } from '@bigcommerce/components/input';
-import { Message } from '@bigcommerce/components/message';
-import { Loader2 as Spinner } from 'lucide-react';
-import { useTranslations } from 'next-intl';
-import { ChangeEvent, useState } from 'react';
-import { useFormState, useFormStatus } from 'react-dom';
-
-import { Link } from '~/components/link';
+} from '~/components/ui/form';
+import { Input } from '~/components/ui/input';
+import { Message } from '~/components/ui/message';
 
 import { submitLoginForm } from '../_actions/submit-login-form';
 

apps/core/app/[locale]/(default)/login/_components/reset-password-form.tsx

@@ -1,21 +1,22 @@
 'use client';
 
-import { Button } from '@bigcommerce/components/button';
+import { Loader2 as Spinner } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { ChangeEvent, useRef, useState } from 'react';
+import { useFormStatus } from 'react-dom';
+import ReCaptcha from 'react-google-recaptcha';
+
+import { Button } from '~/components/ui/button';
 import {
   Field,
   FieldControl,
   FieldLabel,
   FieldMessage,
   Form,
   FormSubmit,
-} from '@bigcommerce/components/form';
-import { Input } from '@bigcommerce/components/input';
-import { Message } from '@bigcommerce/components/message';
-import { Loader2 as Spinner } from 'lucide-react';
-import { useTranslations } from 'next-intl';
-import { ChangeEvent, useRef, useState } from 'react';
-import { useFormStatus } from 'react-dom';
-import ReCaptcha from 'react-google-recaptcha';
+} from '~/components/ui/form';
+import { Input } from '~/components/ui/input';
+import { Message } from '~/components/ui/message';
 
 import { submitResetPasswordForm } from '../_actions/submit-reset-password-form';
 

apps/core/app/[locale]/(default)/login/page.tsx

@@ -1,9 +1,9 @@
-import { Button } from '@bigcommerce/components/button';
 import { NextIntlClientProvider } from 'next-intl';
 import { getMessages, getTranslations } from 'next-intl/server';
 
 import { getReCaptchaSettings } from '~/client/queries/get-recaptcha-settings';
 import { Link } from '~/components/link';
+import { Button } from '~/components/ui/button';
 import { LocaleType } from '~/i18n';
 
 import { ChangePasswordForm } from './_components/change-password-form';