diff --git a/.github/workflows/code-check.yml b/.github/workflows/code-check.yml index 34b2d8c4..daa08c29 100644 --- a/.github/workflows/code-check.yml +++ b/.github/workflows/code-check.yml @@ -79,7 +79,7 @@ jobs: run: cp .env.sample .env - name: Build UI ${{ matrix.node-version }} - working-directory: packages/ui + working-directory: packages/shared-ui run: pnpm build - name: "Storybook: Install Extra Dependencies" diff --git a/.github/workflows/e2e-tests.yml b/.github/workflows/e2e-tests.yml index 50cf2d6a..1793cab7 100644 --- a/.github/workflows/e2e-tests.yml +++ b/.github/workflows/e2e-tests.yml @@ -53,7 +53,7 @@ jobs: ${{ runner.os }}-cypress-store- - name: Build UI ${{ matrix.node-version }} - working-directory: packages/ui + working-directory: packages/shared-ui run: pnpm build - name: Cypress Run (Production Backend) diff --git a/packages/nextjs/components/CartItem.tsx b/packages/nextjs/components/CartItem.tsx index 128729cb..f56efd2d 100644 --- a/packages/nextjs/components/CartItem.tsx +++ b/packages/nextjs/components/CartItem.tsx @@ -1,8 +1,8 @@ import * as React from "react"; import { IoMdClose } from "react-icons/io"; +import { Input } from "shared-ui"; import { currencyFormatter } from "utils/currencyFormatter"; import { CartItem as CartItemType, useCart } from "./CartContext"; -import { Input } from "./Input"; type CartItemProps = { item: CartItemType; diff --git a/packages/nextjs/components/Footer/EmailSubscribe.tsx b/packages/nextjs/components/Footer/EmailSubscribe.tsx index 8601c891..4b9650f9 100644 --- a/packages/nextjs/components/Footer/EmailSubscribe.tsx +++ b/packages/nextjs/components/Footer/EmailSubscribe.tsx @@ -1,7 +1,5 @@ import { FaChevronRight } from "react-icons/fa"; -import { Input } from "components/Input"; -import { H3 } from "components/Typography/H3"; -import { LinkText } from "components/LinkText"; +import { H3, Input, LinkText } from "shared-ui"; export const EmailSubscribe = () => { return ( diff --git a/packages/nextjs/components/Footer/FooterLinks.tsx b/packages/nextjs/components/Footer/FooterLinks.tsx index c587c28e..3d45d216 100644 --- a/packages/nextjs/components/Footer/FooterLinks.tsx +++ b/packages/nextjs/components/Footer/FooterLinks.tsx @@ -1,4 +1,4 @@ -import { LinkText } from "components/LinkText"; +import { LinkText } from "shared-ui"; export const FooterLinks = () => { return ( diff --git a/packages/nextjs/components/Product.tsx b/packages/nextjs/components/Product.tsx index bf809b0f..37fdb936 100644 --- a/packages/nextjs/components/Product.tsx +++ b/packages/nextjs/components/Product.tsx @@ -1,7 +1,7 @@ import Link from "next/link"; +import { Price } from "shared-ui"; import { PLPVariant } from "utils/groqTypes/ProductList"; import { Image } from "./Image"; -import { Price } from "./Price"; type Props = { item: PLPVariant; diff --git a/packages/nextjs/components/ProductFilters/FilterGroup.tsx b/packages/nextjs/components/ProductFilters/FilterGroup.tsx index 9b45a67e..eb2e6b31 100644 --- a/packages/nextjs/components/ProductFilters/FilterGroup.tsx +++ b/packages/nextjs/components/ProductFilters/FilterGroup.tsx @@ -1,8 +1,8 @@ import type { FilterGroup as FilterGroupType } from "utils/filters"; import * as React from "react"; import { ChangeEvent } from "react"; +import { Checkbox } from "shared-ui"; import { useRouterQueryParams } from "utils/useRouterQueryParams"; -import { Checkbox } from "components/Checkbox"; type FilterGroupProps = { group: FilterGroupType; diff --git a/packages/nextjs/components/ProductPage/ProductVariantSelector.tsx b/packages/nextjs/components/ProductPage/ProductVariantSelector.tsx index 77a57705..d8064bc1 100644 --- a/packages/nextjs/components/ProductPage/ProductVariantSelector.tsx +++ b/packages/nextjs/components/ProductPage/ProductVariantSelector.tsx @@ -1,7 +1,6 @@ import * as React from "react"; import { useMemo } from "react"; -import { Select } from "components/Select"; -import { H6 } from "components/Typography/H6"; +import { H6, Select } from "shared-ui"; import { Variant } from "utils/groqTypes/ProductList"; interface Props { diff --git a/packages/nextjs/components/ProductPage/StyleOptions.tsx b/packages/nextjs/components/ProductPage/StyleOptions.tsx index 4d39bfd7..4c92158d 100644 --- a/packages/nextjs/components/ProductPage/StyleOptions.tsx +++ b/packages/nextjs/components/ProductPage/StyleOptions.tsx @@ -1,6 +1,5 @@ import * as React from "react"; -import { Pill } from "components/Pill"; -import { H6 } from "components/Typography/H6"; +import { H6, Pill } from "shared-ui"; import { Style } from "utils/groqTypes/ProductList"; interface Props { diff --git a/packages/nextjs/components/ProductSort.tsx b/packages/nextjs/components/ProductSort.tsx index cb38a381..3ef193f8 100644 --- a/packages/nextjs/components/ProductSort.tsx +++ b/packages/nextjs/components/ProductSort.tsx @@ -1,8 +1,7 @@ import * as React from "react"; +import { Pill, Select } from "shared-ui"; import { PAGE_QUERY_PARAM, SORT_OPTIONS, SORT_OPTIONS_ARRAY, SORT_QUERY_PARAM, SortType } from "utils/sorting"; import { useRouterQueryParams } from "utils/useRouterQueryParams"; -import { Pill } from "./Pill"; -import { Select } from "./Select"; type ProductSortProps = { as?: "select" | "pills"; diff --git a/packages/nextjs/components/Search.tsx b/packages/nextjs/components/Search.tsx index c22953df..971cb327 100644 --- a/packages/nextjs/components/Search.tsx +++ b/packages/nextjs/components/Search.tsx @@ -4,9 +4,9 @@ import { useCallback, useEffect, useMemo, useReducer } from "react"; import debounce from "lodash.debounce"; import Link from "next/link"; import { q, sanityImage, TypeFromSelection } from "groqd"; +import { Input } from "shared-ui"; import { runQuery } from "utils/sanityClient"; import { Image } from "./Image"; -import { Input } from "./Input"; type State = { results: ProductSearch[]; diff --git a/packages/nextjs/package.json b/packages/nextjs/package.json index 74156cfe..b21084ab 100644 --- a/packages/nextjs/package.json +++ b/packages/nextjs/package.json @@ -21,8 +21,6 @@ "test:storybook:start": "start-server-and-test 'pnpm run storybook:start' 6006 'pnpm run test:storybook'" }, "dependencies": { - "@headlessui/react": "^1.7.8", - "@portabletext/react": "^1.0.6", "@sanity/client": "^3.3.6", "@sanity/dashboard": "^3.1.3", "@sanity/image-url": "^1.0.1", diff --git a/packages/nextjs/pages/_app.tsx b/packages/nextjs/pages/_app.tsx index 23b2e587..7111e5f9 100644 --- a/packages/nextjs/pages/_app.tsx +++ b/packages/nextjs/pages/_app.tsx @@ -3,10 +3,10 @@ import * as React from "react"; import Head from "next/head"; import { AnimatePresence, MotionConfig } from "framer-motion"; +import { FadeInOut } from "shared-ui"; import { CartProvider } from "components/CartContext"; import { Layout } from "components/Layout"; import "styles/global.css"; -import { FadeInOut } from "components/FadeInOut"; (async () => { if (process.env.NEXT_PUBLIC_API_MOCKING === "enabled") { diff --git a/packages/nextjs/pages/about.tsx b/packages/nextjs/pages/about.tsx index d41b49d6..94fa38b1 100644 --- a/packages/nextjs/pages/about.tsx +++ b/packages/nextjs/pages/about.tsx @@ -3,8 +3,8 @@ import { NextPage } from "next"; import NextImage from "next/legacy/image"; import Link from "next/link"; +import { BreadIcon } from "shared-ui"; import { localImageLoader } from "utils/localImageLoader"; -import { BreadIcon } from "components/Bread.icon"; import { PageHead } from "components/PageHead"; import { Breadcrumbs } from "components/Breadcrumbs"; diff --git a/packages/nextjs/pages/categories.tsx b/packages/nextjs/pages/categories.tsx index f66af725..a9921974 100644 --- a/packages/nextjs/pages/categories.tsx +++ b/packages/nextjs/pages/categories.tsx @@ -1,12 +1,12 @@ import { GetServerSideProps, NextPage } from "next"; +import { WeDontSellBreadBanner } from "shared-ui"; import { setCachingHeaders } from "utils/setCachingHeaders"; import { SanityType } from "utils/consts"; import { isString, pluralize } from "utils/pluralize"; import { getAllCategories } from "utils/getAllCategoriesQuery"; import { CategoryList } from "components/CategoryList"; -import { WeDontSellBreadBanner } from "components/WeDontSellBreadBanner"; import { PageHead } from "components/PageHead"; import { Breadcrumbs } from "components/Breadcrumbs"; import { Category } from "utils/groqTypes/ProductList"; diff --git a/packages/nextjs/pages/components.tsx b/packages/nextjs/pages/components.tsx index 7f4de36c..5559baa6 100644 --- a/packages/nextjs/pages/components.tsx +++ b/packages/nextjs/pages/components.tsx @@ -1,10 +1,5 @@ import { MdArrowForward } from "react-icons/md"; -import { Button } from "shared-ui"; -import { Checkbox } from "components/Checkbox"; -import { Input } from "components/Input"; -import { LinkText } from "components/LinkText"; -import { Pill } from "components/Pill"; -import { Select } from "components/Select"; +import { Button, Input, Pill, Checkbox, Select, LinkText } from "shared-ui"; export default function ComponentsPage() { return ( diff --git a/packages/nextjs/pages/index.tsx b/packages/nextjs/pages/index.tsx index 9c28d719..eb848b02 100644 --- a/packages/nextjs/pages/index.tsx +++ b/packages/nextjs/pages/index.tsx @@ -5,7 +5,7 @@ import { FiArrowRight } from "react-icons/fi"; import Link from "next/link"; import NextImage from "next/legacy/image"; -import { Button } from "shared-ui"; +import { Button, FeaturedQuote } from "shared-ui"; import { setCachingHeaders } from "utils/setCachingHeaders"; import { localImageLoader } from "utils/localImageLoader"; import { SanityType } from "utils/consts"; @@ -14,7 +14,6 @@ import { getRecommendations } from "utils/getRecommendationsQuery"; import featuredImg from "assets/featured-story.jpg"; import { FeaturedList } from "components/FeaturedList"; -import { FeaturedQuote } from "components/FeaturedQuote"; import { Image } from "components/Image"; import { PageHead } from "components/PageHead"; diff --git a/packages/nextjs/pages/products/[slug].tsx b/packages/nextjs/pages/products/[slug].tsx index c1d2a0fa..e901d64a 100644 --- a/packages/nextjs/pages/products/[slug].tsx +++ b/packages/nextjs/pages/products/[slug].tsx @@ -5,23 +5,19 @@ import { GetServerSideProps, NextPage } from "next"; import { useRouter } from "next/router"; import { AnimatePresence } from "framer-motion"; +import { H6, FadeInOut, BlockContent, Price, QuantityInput } from "shared-ui"; import { setCachingHeaders } from "utils/setCachingHeaders"; import { isSlug } from "utils/isSlug"; import { SanityType } from "utils/consts"; import { getRecommendations } from "utils/getRecommendationsQuery"; import { getProductBySlug } from "utils/getProductBySlug"; -import { BlockContent } from "components/BlockContent"; import { ImageCarousel } from "components/ImageCarousel"; import { useCart } from "components/CartContext"; import { PageHead } from "components/PageHead"; -import { Price } from "components/Price"; -import { QuantityInput } from "components/ProductPage/QuantityInput"; import { StyleOptions } from "components/ProductPage/StyleOptions"; import { ProductVariantSelector } from "components/ProductPage/ProductVariantSelector"; -import { H6 } from "components/Typography/H6"; import { Product } from "components/Product"; -import { FadeInOut } from "components/FadeInOut"; import { Breadcrumbs } from "components/Breadcrumbs"; interface PageProps { diff --git a/packages/nextjs/pages/products/index.tsx b/packages/nextjs/pages/products/index.tsx index 43747318..d6773800 100644 --- a/packages/nextjs/pages/products/index.tsx +++ b/packages/nextjs/pages/products/index.tsx @@ -4,6 +4,7 @@ import { AnimatePresence } from "framer-motion"; import { useRouter } from "next/router"; import classNames from "classnames"; +import { H6, WeDontSellBreadBanner, FadeInOut } from "shared-ui"; import { getAllFilteredVariants } from "utils/getFilteredPaginatedQuery"; import { getCategoryFilters, getFlavourFilters, getStyleFilters } from "utils/getFilters"; import { getPaginationFromQuery } from "utils/getPaginationFromQuery"; @@ -16,13 +17,10 @@ import { CategoryFilterItem, FlavourFilterItem, PLPVariant, StyleFilterItem } fr import { useDeviceSize } from "utils/useDeviceSize"; import { PageHead } from "components/PageHead"; -import { WeDontSellBreadBanner } from "components/WeDontSellBreadBanner"; import { ProductSort } from "components/ProductSort"; import { ProductFilters } from "components/ProductFilters/ProductFilters"; import { Product } from "components/Product"; -import { H6 } from "components/Typography/H6"; import { Pagination } from "components/Pagination"; -import { FadeInOut } from "components/FadeInOut"; import { Breadcrumbs } from "components/Breadcrumbs/Breadcrumbs"; import { ModalFiltersMobile } from "views/ModalFiltersMobile"; import { SortAndFiltersToolbarMobile } from "views/SortAndFiltersToolbarMobile"; diff --git a/packages/nextjs/tailwind.config.js b/packages/nextjs/tailwind.config.js index 2a8aa418..145d9d32 100644 --- a/packages/nextjs/tailwind.config.js +++ b/packages/nextjs/tailwind.config.js @@ -6,7 +6,7 @@ module.exports = { "./pages/**/*.{js,jsx,ts,tsx}", "./components/**/*.{js,jsx,ts,tsx}", "./views/**/*.{js,jsx,ts,tsx}", - "../ui/components/**/*.{js,jsx,ts,tsx}", + "../shared-ui/components/**/*.{js,jsx,ts,tsx}", ], theme: { extend: { diff --git a/packages/nextjs/views/ModalFiltersMobile.tsx b/packages/nextjs/views/ModalFiltersMobile.tsx index 84b2b6bf..77a067a8 100644 --- a/packages/nextjs/views/ModalFiltersMobile.tsx +++ b/packages/nextjs/views/ModalFiltersMobile.tsx @@ -1,6 +1,5 @@ -import { Button } from "shared-ui"; +import { Button, Modal } from "shared-ui"; import React from "react"; -import { Modal } from "components/Modal"; import { ProductFilters } from "components/ProductFilters/ProductFilters"; import { CategoryFilterItem, FlavourFilterItem, StyleFilterItem } from "utils/groqTypes/ProductList"; diff --git a/packages/ui/.storybook/decorators/TestHarness.tsx b/packages/shared-ui/.storybook/decorators/TestHarness.tsx similarity index 100% rename from packages/ui/.storybook/decorators/TestHarness.tsx rename to packages/shared-ui/.storybook/decorators/TestHarness.tsx diff --git a/packages/ui/.storybook/main.ts b/packages/shared-ui/.storybook/main.ts similarity index 100% rename from packages/ui/.storybook/main.ts rename to packages/shared-ui/.storybook/main.ts diff --git a/packages/ui/.storybook/preview.ts b/packages/shared-ui/.storybook/preview.ts similarity index 100% rename from packages/ui/.storybook/preview.ts rename to packages/shared-ui/.storybook/preview.ts diff --git a/packages/ui/.storybook/types/index.ts b/packages/shared-ui/.storybook/types/index.ts similarity index 100% rename from packages/ui/.storybook/types/index.ts rename to packages/shared-ui/.storybook/types/index.ts diff --git a/packages/ui/assets/fonts/jeanluc/jeanlucweb-bold.eot b/packages/shared-ui/assets/fonts/jeanluc/jeanlucweb-bold.eot similarity index 100% rename from packages/ui/assets/fonts/jeanluc/jeanlucweb-bold.eot rename to packages/shared-ui/assets/fonts/jeanluc/jeanlucweb-bold.eot diff --git a/packages/ui/assets/fonts/jeanluc/jeanlucweb-bold.otf b/packages/shared-ui/assets/fonts/jeanluc/jeanlucweb-bold.otf similarity index 100% rename from packages/ui/assets/fonts/jeanluc/jeanlucweb-bold.otf rename to packages/shared-ui/assets/fonts/jeanluc/jeanlucweb-bold.otf diff --git a/packages/ui/assets/fonts/jeanluc/jeanlucweb-bold.svg b/packages/shared-ui/assets/fonts/jeanluc/jeanlucweb-bold.svg similarity index 100% rename from packages/ui/assets/fonts/jeanluc/jeanlucweb-bold.svg rename to packages/shared-ui/assets/fonts/jeanluc/jeanlucweb-bold.svg diff --git a/packages/ui/assets/fonts/jeanluc/jeanlucweb-bold.woff b/packages/shared-ui/assets/fonts/jeanluc/jeanlucweb-bold.woff similarity index 100% rename from packages/ui/assets/fonts/jeanluc/jeanlucweb-bold.woff rename to packages/shared-ui/assets/fonts/jeanluc/jeanlucweb-bold.woff diff --git a/packages/ui/assets/fonts/jeanluc/jeanlucweb-thin.eot b/packages/shared-ui/assets/fonts/jeanluc/jeanlucweb-thin.eot similarity index 100% rename from packages/ui/assets/fonts/jeanluc/jeanlucweb-thin.eot rename to packages/shared-ui/assets/fonts/jeanluc/jeanlucweb-thin.eot diff --git a/packages/ui/assets/fonts/jeanluc/jeanlucweb-thin.otf b/packages/shared-ui/assets/fonts/jeanluc/jeanlucweb-thin.otf similarity index 100% rename from packages/ui/assets/fonts/jeanluc/jeanlucweb-thin.otf rename to packages/shared-ui/assets/fonts/jeanluc/jeanlucweb-thin.otf diff --git a/packages/ui/assets/fonts/jeanluc/jeanlucweb-thin.svg b/packages/shared-ui/assets/fonts/jeanluc/jeanlucweb-thin.svg similarity index 100% rename from packages/ui/assets/fonts/jeanluc/jeanlucweb-thin.svg rename to packages/shared-ui/assets/fonts/jeanluc/jeanlucweb-thin.svg diff --git a/packages/ui/assets/fonts/jeanluc/jeanlucweb-thin.woff b/packages/shared-ui/assets/fonts/jeanluc/jeanlucweb-thin.woff similarity index 100% rename from packages/ui/assets/fonts/jeanluc/jeanlucweb-thin.woff rename to packages/shared-ui/assets/fonts/jeanluc/jeanlucweb-thin.woff diff --git a/packages/ui/assets/fonts/jeanluc/stylesheet.css b/packages/shared-ui/assets/fonts/jeanluc/stylesheet.css similarity index 100% rename from packages/ui/assets/fonts/jeanluc/stylesheet.css rename to packages/shared-ui/assets/fonts/jeanluc/stylesheet.css diff --git a/packages/ui/assets/fonts/jetbrainsmono/JetBrainsMono-Bold.woff2 b/packages/shared-ui/assets/fonts/jetbrainsmono/JetBrainsMono-Bold.woff2 similarity index 100% rename from packages/ui/assets/fonts/jetbrainsmono/JetBrainsMono-Bold.woff2 rename to packages/shared-ui/assets/fonts/jetbrainsmono/JetBrainsMono-Bold.woff2 diff --git a/packages/ui/assets/fonts/jetbrainsmono/JetBrainsMono-Regular.woff2 b/packages/shared-ui/assets/fonts/jetbrainsmono/JetBrainsMono-Regular.woff2 similarity index 100% rename from packages/ui/assets/fonts/jetbrainsmono/JetBrainsMono-Regular.woff2 rename to packages/shared-ui/assets/fonts/jetbrainsmono/JetBrainsMono-Regular.woff2 diff --git a/packages/nextjs/components/Bread.icon.tsx b/packages/shared-ui/components/Bread.icon.tsx similarity index 98% rename from packages/nextjs/components/Bread.icon.tsx rename to packages/shared-ui/components/Bread.icon.tsx index aab1d736..369191d7 100644 --- a/packages/nextjs/components/Bread.icon.tsx +++ b/packages/shared-ui/components/Bread.icon.tsx @@ -1,5 +1,3 @@ -import * as React from "react"; - type BreadIconProps = { size?: number; }; diff --git a/packages/ui/components/shared/Button.stories.tsx b/packages/shared-ui/components/Button/Button.stories.tsx similarity index 100% rename from packages/ui/components/shared/Button.stories.tsx rename to packages/shared-ui/components/Button/Button.stories.tsx diff --git a/packages/ui/components/shared/Button.tsx b/packages/shared-ui/components/Button/Button.tsx similarity index 100% rename from packages/ui/components/shared/Button.tsx rename to packages/shared-ui/components/Button/Button.tsx diff --git a/packages/nextjs/components/Checkbox.tsx b/packages/shared-ui/components/Checkbox.tsx similarity index 100% rename from packages/nextjs/components/Checkbox.tsx rename to packages/shared-ui/components/Checkbox.tsx diff --git a/packages/nextjs/components/FadeInOut.tsx b/packages/shared-ui/components/FadeInOut.tsx similarity index 100% rename from packages/nextjs/components/FadeInOut.tsx rename to packages/shared-ui/components/FadeInOut.tsx diff --git a/packages/nextjs/components/FeaturedQuote.tsx b/packages/shared-ui/components/FeaturedQuote.tsx similarity index 100% rename from packages/nextjs/components/FeaturedQuote.tsx rename to packages/shared-ui/components/FeaturedQuote.tsx diff --git a/packages/nextjs/components/Input.tsx b/packages/shared-ui/components/Input.tsx similarity index 100% rename from packages/nextjs/components/Input.tsx rename to packages/shared-ui/components/Input.tsx diff --git a/packages/nextjs/components/LinkText.tsx b/packages/shared-ui/components/LinkText.tsx similarity index 100% rename from packages/nextjs/components/LinkText.tsx rename to packages/shared-ui/components/LinkText.tsx diff --git a/packages/nextjs/components/Modal.tsx b/packages/shared-ui/components/Modal.tsx similarity index 100% rename from packages/nextjs/components/Modal.tsx rename to packages/shared-ui/components/Modal.tsx diff --git a/packages/nextjs/components/Pill.tsx b/packages/shared-ui/components/Pill.tsx similarity index 92% rename from packages/nextjs/components/Pill.tsx rename to packages/shared-ui/components/Pill.tsx index e9792cbb..bc8fb8ff 100644 --- a/packages/nextjs/components/Pill.tsx +++ b/packages/shared-ui/components/Pill.tsx @@ -13,7 +13,7 @@ export const Pill: React.FC = ({ disabled, className, selected, children,