Chore/migration (#208)

* chore: git mv tailwind, assets, storybook

* wip

* pnpm version mismatch

* fix: ts version mismatch

* chore: basic tsup setup

* ci step

* chore: e2e ci

* refactor: ui -> shared-ui

* chore: shared tsconfig

* fix: tsconfig include/exclude

* chore: build for next deploy

* fix: pull in external classes

* mv Typography

* mv Input

* mv ui folder

* mv banner

* fix file path

* mv pill

* mv small components

* add dep

* mv select

* mv modal

* mv linktext blockcontent

* mv price

* mv quantityinput

* fix ci package dir

.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"

.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)

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;

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 (

packages/nextjs/components/Footer/FooterLinks.tsx

@@ -1,4 +1,4 @@
-import { LinkText } from "components/LinkText";
+import { LinkText } from "shared-ui";
 
 export const FooterLinks = () => {
   return (

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;

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;

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 {

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 {

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";

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[];

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",

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") {

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";
 

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";

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 (

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";
 

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 {

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";

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: {

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";
 

packages/nextjs/components/Bread.icon.tsx → packages/shared-ui/components/Bread.icon.tsx

@@ -1,5 +1,3 @@
-import * as React from "react";
-
 type BreadIconProps = {
   size?: number;
 };

packages/nextjs/components/Pill.tsx → packages/shared-ui/components/Pill.tsx

@@ -13,7 +13,7 @@ export const Pill: React.FC<Props> = ({ disabled, className, selected, children,
     <button
       disabled={disabled}
       className={classNames(
-        "border text-body-sm rounded-full py-2 px-4 hover:bg-primary hover:text-sky transition transition-colors duration-150",
+        "border text-body-sm rounded-full py-2 px-4 hover:bg-primary hover:text-sky transition-colors duration-150",
         {
           "text-primary": !selected,
           "bg-primary text-sky": selected,

packages/nextjs/components/Price.tsx → packages/shared-ui/components/Price.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
-import { Eyebrow } from "components/Typography/Eyebrow";
-import { currencyFormatter } from "utils/currencyFormatter";
+import { Eyebrow } from "./Typography";
+import { currencyFormatter } from "../uitls/currencyFormatter";
 
 interface Props {
   msrp?: number | null;

packages/nextjs/components/ProductPage/QuantityInput.tsx → packages/shared-ui/components/QuantityInput.tsx

@@ -1,7 +1,7 @@
 import { FiPlus } from "react-icons/fi";
-import { Button } from "shared-ui";
-import { Input } from "components/Input";
-import { H6 } from "components/Typography/H6";
+import { Button } from "./Button/Button";
+import { H6 } from "./Typography";
+import { Input } from "./Input";
 
 interface Props {
   quantity: string;

packages/shared-ui/components/Typography/index.ts

@@ -0,0 +1,3 @@
+export * from "./Eyebrow";
+export * from "./H3";
+export * from "./H6";

packages/nextjs/components/WeDontSellBreadBanner.tsx → packages/shared-ui/components/WeDontSellBreadBanner.tsx

@@ -1,5 +1,3 @@
-import * as React from "react";
-
 export const WeDontSellBreadBanner = () => {
   return (
     <div className="p-2 bg-primary">

packages/shared-ui/components/sanity/index.ts

@@ -0,0 +1 @@
+export * from "./BlockContent";

packages/shared-ui/index.ts

@@ -0,0 +1,16 @@
+export * from "./components/Button/Button";
+export * from "./components/Typography";
+export * from "./components/Input";
+export * from "./components/Pill";
+export * from "./components/Checkbox";
+export * from "./components/Bread.icon";
+export * from "./components/FeaturedQuote";
+export * from "./components/FadeInOut";
+export * from "./components/Select";
+export * from "./components/LinkText";
+export * from "./components/Modal";
+export * from "./components/WeDontSellBreadBanner";
+export * from "./components/Price";
+export * from "./components/QuantityInput";
+
+export * from "./components/sanity";

packages/ui/package.json → packages/shared-ui/package.json

@@ -16,9 +16,13 @@
     "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",
     "@tailwindcss/typography": "^0.5.4",
     "classnames": "^2.3.2",
-    "framer-motion": "^7.4.0"
+    "framer-motion": "^7.4.0",
+    "downshift": "^6.1.9",
+    "react-icons": "^4.4.0"
   },
   "peerDependencies": {
     "react": ">=18.0.0",

packages/shared-ui/uitls/currencyFormatter.ts

@@ -0,0 +1 @@
+export const currencyFormatter = Intl.NumberFormat("en-US", { style: "currency", currency: "USD" });