From 36f834acccff384f8e8f06accd24051b3aba4008 Mon Sep 17 00:00:00 2001 From: Nathan Kluth Date: Fri, 15 Dec 2023 11:20:28 -0700 Subject: [PATCH] use client wrapper on tsup --- packages/nextjs/app/about/page.tsx | 2 +- packages/nextjs/app/categories/page.tsx | 2 +- packages/nextjs/app/components/Card.tsx | 2 +- packages/nextjs/app/components/ImageCarousel.tsx | 2 +- packages/nextjs/app/components/Pagination.tsx | 2 +- packages/nextjs/app/components/PaginationFade.tsx | 2 +- packages/nextjs/app/components/Product.tsx | 2 +- packages/nextjs/app/components/ProductDetailBody.tsx | 2 +- .../nextjs/app/components/ProductFilters/FilterGroup.tsx | 2 +- packages/nextjs/app/components/ProductSort.tsx | 2 +- packages/nextjs/app/components/ProductsList.tsx | 2 +- .../nextjs/app/components/SortAndFiltersToolbarMobile.tsx | 2 +- packages/nextjs/app/components/page.tsx | 2 +- packages/nextjs/app/layout.tsx | 2 +- packages/nextjs/app/page.tsx | 2 +- packages/nextjs/app/products/[slug]/page.tsx | 2 +- packages/nextjs/app/template.tsx | 2 +- packages/nextjs/app/ui/shared-ui.ts | 5 ----- packages/shared-ui/tsup.config.ts | 5 +++++ 19 files changed, 22 insertions(+), 22 deletions(-) delete mode 100644 packages/nextjs/app/ui/shared-ui.ts diff --git a/packages/nextjs/app/about/page.tsx b/packages/nextjs/app/about/page.tsx index 1a8d81b..ac293fa 100644 --- a/packages/nextjs/app/about/page.tsx +++ b/packages/nextjs/app/about/page.tsx @@ -1,7 +1,7 @@ import { Metadata } from "next"; import Link from "next/link"; -import { BreadIcon } from "../ui/shared-ui"; +import { BreadIcon } from "shared-ui"; import { Breadcrumbs } from "app/components/Breadcrumbs"; import LocalImage from "app/components/LocalImage"; import bigPictureImage from "../../../../docs/img/big-picture.png"; diff --git a/packages/nextjs/app/categories/page.tsx b/packages/nextjs/app/categories/page.tsx index 851282c..75aae36 100644 --- a/packages/nextjs/app/categories/page.tsx +++ b/packages/nextjs/app/categories/page.tsx @@ -1,7 +1,7 @@ import { Breadcrumbs } from "app/components/Breadcrumbs"; import { CategoryList } from "app/components/CategoryList"; import { Metadata } from "next"; -import { WeDontSellBreadBanner } from "../ui/shared-ui"; +import { WeDontSellBreadBanner } from "shared-ui"; import { getAllCategories } from "utils/getAllCategoriesQuery"; import { isString, pluralize } from "utils/pluralize"; diff --git a/packages/nextjs/app/components/Card.tsx b/packages/nextjs/app/components/Card.tsx index 5ca246c..6fc27c3 100644 --- a/packages/nextjs/app/components/Card.tsx +++ b/packages/nextjs/app/components/Card.tsx @@ -2,7 +2,7 @@ import * as React from "react"; import { SanityImageSource } from "@sanity/image-url/lib/types/types"; import Link, { LinkProps } from "next/link"; import { Image } from "./Image"; -import { Card as BaseCard } from "../ui/shared-ui"; +import { Card as BaseCard } from "shared-ui"; export interface CardProps { title: string; diff --git a/packages/nextjs/app/components/ImageCarousel.tsx b/packages/nextjs/app/components/ImageCarousel.tsx index b8117e5..92cdcc1 100644 --- a/packages/nextjs/app/components/ImageCarousel.tsx +++ b/packages/nextjs/app/components/ImageCarousel.tsx @@ -1,7 +1,7 @@ import { ProductImage } from "utils/groqTypes/ProductList"; import * as React from "react"; import { Image } from "app/components/Image"; -import { ImageCarousel as BaseImageCarousel } from "../ui/shared-ui"; +import { ImageCarousel as BaseImageCarousel } from "shared-ui"; export type ImageCarouselProps = { productImages: ProductImage[]; diff --git a/packages/nextjs/app/components/Pagination.tsx b/packages/nextjs/app/components/Pagination.tsx index b8e1d6b..ae545fd 100644 --- a/packages/nextjs/app/components/Pagination.tsx +++ b/packages/nextjs/app/components/Pagination.tsx @@ -1,7 +1,7 @@ "use client"; import * as React from "react"; -import { Pagination as BasePagination } from "../ui/shared-ui"; +import { Pagination as BasePagination } from "shared-ui"; import Link from "next/link"; import classNames from "classnames"; import { usePathname, useSearchParams } from "next/navigation"; diff --git a/packages/nextjs/app/components/PaginationFade.tsx b/packages/nextjs/app/components/PaginationFade.tsx index c8d7f9e..2cf9640 100644 --- a/packages/nextjs/app/components/PaginationFade.tsx +++ b/packages/nextjs/app/components/PaginationFade.tsx @@ -1,7 +1,7 @@ "use client"; import classNames from "classnames"; -import { FadeInOut } from "../ui/shared-ui"; +import { FadeInOut } from "shared-ui"; import { useSearchParams } from "next/navigation"; import { pluralize } from "utils/pluralize"; import { PLPVariant } from "utils/groqTypes/ProductList"; diff --git a/packages/nextjs/app/components/Product.tsx b/packages/nextjs/app/components/Product.tsx index f96644d..d32514a 100644 --- a/packages/nextjs/app/components/Product.tsx +++ b/packages/nextjs/app/components/Product.tsx @@ -1,5 +1,5 @@ import Link from "next/link"; -import { Price } from "../ui/shared-ui"; +import { Price } from "shared-ui"; import { PLPVariant } from "utils/groqTypes/ProductList"; import { Image } from "./Image"; diff --git a/packages/nextjs/app/components/ProductDetailBody.tsx b/packages/nextjs/app/components/ProductDetailBody.tsx index 1eca7c0..0d88caa 100644 --- a/packages/nextjs/app/components/ProductDetailBody.tsx +++ b/packages/nextjs/app/components/ProductDetailBody.tsx @@ -1,6 +1,6 @@ import * as React from "react"; -import { BlockContent, Price } from "../ui/shared-ui"; +import { BlockContent, Price } from "shared-ui"; import { ImageCarousel } from "app/components/ImageCarousel"; import { StyleOptions } from "app/components/ProductPage/StyleOptions"; diff --git a/packages/nextjs/app/components/ProductFilters/FilterGroup.tsx b/packages/nextjs/app/components/ProductFilters/FilterGroup.tsx index d031a65..ff1b9f7 100644 --- a/packages/nextjs/app/components/ProductFilters/FilterGroup.tsx +++ b/packages/nextjs/app/components/ProductFilters/FilterGroup.tsx @@ -3,7 +3,7 @@ import type { FilterGroup as FilterGroupType } from "utils/filters"; import * as React from "react"; import { ChangeEvent } from "react"; -import { Checkbox } from "../../ui/shared-ui"; +import { Checkbox } from "shared-ui"; import { useRouterQueryParams } from "utils/useRouterQueryParams"; type FilterGroupProps = { diff --git a/packages/nextjs/app/components/ProductSort.tsx b/packages/nextjs/app/components/ProductSort.tsx index a595a6b..6d6e691 100644 --- a/packages/nextjs/app/components/ProductSort.tsx +++ b/packages/nextjs/app/components/ProductSort.tsx @@ -2,7 +2,7 @@ import * as React from "react"; import { useRouterQueryParams } from "utils/useRouterQueryParams"; -import { ProductSort as BaseProductSort, ProductSortProps as BaseProps } from "../ui/shared-ui"; +import { ProductSort as BaseProductSort, ProductSortProps as BaseProps } from "shared-ui"; type ProductSortProps = Pick; diff --git a/packages/nextjs/app/components/ProductsList.tsx b/packages/nextjs/app/components/ProductsList.tsx index 8fd1b57..438821f 100644 --- a/packages/nextjs/app/components/ProductsList.tsx +++ b/packages/nextjs/app/components/ProductsList.tsx @@ -1,7 +1,7 @@ import * as React from "react"; import { AnimatePresence } from "../ui/framer"; -import { H6, WeDontSellBreadBanner } from "../ui/shared-ui"; +import { H6, WeDontSellBreadBanner } from "shared-ui"; import { CategoryFilterItem, FlavourFilterItem, PLPVariant, StyleFilterItem } from "utils/groqTypes/ProductList"; import { ProductFilters } from "app/components/ProductFilters/ProductFilters"; diff --git a/packages/nextjs/app/components/SortAndFiltersToolbarMobile.tsx b/packages/nextjs/app/components/SortAndFiltersToolbarMobile.tsx index db2e93e..21996fa 100644 --- a/packages/nextjs/app/components/SortAndFiltersToolbarMobile.tsx +++ b/packages/nextjs/app/components/SortAndFiltersToolbarMobile.tsx @@ -1,6 +1,6 @@ "use client"; -import { Button } from "../ui/shared-ui"; +import { Button } from "shared-ui"; import React from "react"; import { MdOutlineFilterList } from "react-icons/md"; import { ProductSort } from "app/components/ProductSort"; diff --git a/packages/nextjs/app/components/page.tsx b/packages/nextjs/app/components/page.tsx index a2bda12..ae6aebc 100644 --- a/packages/nextjs/app/components/page.tsx +++ b/packages/nextjs/app/components/page.tsx @@ -1,5 +1,5 @@ import { MdArrowForward } from "react-icons/md"; -import { Button, Input, Pill, Checkbox, Select, LinkText } from "../ui/shared-ui"; +import { Button, Input, Pill, Checkbox, Select, LinkText } from "shared-ui"; export default async function Page() { return ( diff --git a/packages/nextjs/app/layout.tsx b/packages/nextjs/app/layout.tsx index ef3a36e..1a807f7 100644 --- a/packages/nextjs/app/layout.tsx +++ b/packages/nextjs/app/layout.tsx @@ -1,4 +1,4 @@ -import { Footer, MobileNavProvider } from "./ui/shared-ui"; +import { Footer, MobileNavProvider } from "shared-ui"; import "./global.css"; import { Header } from "app/components/Header/Header"; import { Metadata } from "next"; diff --git a/packages/nextjs/app/page.tsx b/packages/nextjs/app/page.tsx index 6380dd2..73e012e 100644 --- a/packages/nextjs/app/page.tsx +++ b/packages/nextjs/app/page.tsx @@ -4,7 +4,7 @@ import { getRecommendations } from "utils/getRecommendationsQuery"; import { FiArrowRight } from "react-icons/fi"; import Link from "next/link"; -import { Button, FeaturedQuote } from "./ui/shared-ui"; +import { Button, FeaturedQuote } from "shared-ui"; import featuredImg from "assets/featured-story.jpg"; import { FeaturedList } from "app/components/FeaturedList"; diff --git a/packages/nextjs/app/products/[slug]/page.tsx b/packages/nextjs/app/products/[slug]/page.tsx index 8cee0e0..b9ee334 100644 --- a/packages/nextjs/app/products/[slug]/page.tsx +++ b/packages/nextjs/app/products/[slug]/page.tsx @@ -4,7 +4,7 @@ import { Breadcrumbs } from "app/components/Breadcrumbs"; import { AnimatePresence } from "../../ui/framer"; import { Metadata } from "next"; import React from "react"; -import { H6, FadeInOut } from "../../ui/shared-ui"; +import { H6, FadeInOut } from "shared-ui"; import { getProductBySlug } from "utils/getProductBySlug"; import { getRecommendations } from "utils/getRecommendationsQuery"; import { isSlug } from "utils/isSlug"; diff --git a/packages/nextjs/app/template.tsx b/packages/nextjs/app/template.tsx index dbf0fa0..dad338b 100644 --- a/packages/nextjs/app/template.tsx +++ b/packages/nextjs/app/template.tsx @@ -1,6 +1,6 @@ "use client"; -import { FadeInOut } from "./ui/shared-ui"; +import { FadeInOut } from "shared-ui"; // TODO: exit animations currently do not work in next app router export default function Template({ children }: { children: React.ReactNode }) { diff --git a/packages/nextjs/app/ui/shared-ui.ts b/packages/nextjs/app/ui/shared-ui.ts deleted file mode 100644 index 325b7d1..0000000 --- a/packages/nextjs/app/ui/shared-ui.ts +++ /dev/null @@ -1,5 +0,0 @@ -"use client"; - -// TODO: separate imports so this isn't needed -// for server-compatible components like Footer -export * from "shared-ui"; diff --git a/packages/shared-ui/tsup.config.ts b/packages/shared-ui/tsup.config.ts index 54a8376..5c72529 100644 --- a/packages/shared-ui/tsup.config.ts +++ b/packages/shared-ui/tsup.config.ts @@ -7,4 +7,9 @@ export default defineConfig({ dts: true, format: ["cjs", "esm"], target: "es6", + esbuildOptions(options) { + options.banner = { + js: '"use client"', + }; + }, });