Merge pull request #1479 from iFixit/fix-ui-package

Footer Package: don't rely on @ifixit/ui

frontend/layouts/default/Footer.tsx

@@ -1,8 +1,8 @@
 import { trackInMatomoAndGA } from '@ifixit/analytics';
 import { Menu, MenuList } from '@chakra-ui/react';
 import { Flag, FlagCountryCode, Language } from '@ifixit/icons';
-import type { MenuItem } from '@ifixit/ui';
-import { MenuItemType } from '@ifixit/ui';
+import type { MenuItem } from '@ifixit/menu';
+import { MenuItemType } from '@ifixit/menu';
 import { ResponsiveImage } from '@ifixit/ui';
 import noImageFixie from '@assets/images/no-image-fixie.jpeg';
 import type { GlobalSettings } from '@models/global-settings';

frontend/layouts/default/index.tsx

@@ -53,7 +53,7 @@ import {
    Wordmark,
    WordmarkLink,
 } from '@ifixit/ui';
-import type { Menu } from '@ifixit/ui';
+import type { Menu } from '@ifixit/menu';
 import Head from 'next/head';
 import NextLink from 'next/link';
 import { useRouter } from 'next/router';

frontend/models/store.ts

@@ -10,8 +10,8 @@ import type {
    MenuItem,
    ProductListLinkMenuItem,
    SubmenuMenuItem,
-} from '@ifixit/ui';
-import { MenuItemType } from '@ifixit/ui';
+} from '@ifixit/menu';
+import { MenuItemType } from '@ifixit/menu';
 
 export type Store = Awaited<ReturnType<typeof findStoreByCode>>;
 

frontend/next.config.js

@@ -19,6 +19,7 @@ const withTM = require('next-transpile-modules')([
    '@ifixit/sentry',
    '@ifixit/shopify-storefront-client',
    '@ifixit/ui',
+   '@ifixit/menu',
 ]);
 
 const { withSentryConfig } = require('@sentry/nextjs');

frontend/package.json

@@ -45,6 +45,7 @@
       "@ifixit/sentry": "workspace:*",
       "@ifixit/shopify-storefront-client": "workspace:*",
       "@ifixit/ui": "workspace:*",
+      "@ifixit/menu": "workspace:*",
       "@sentry/nextjs": "7.42.0",
       "@sentry/tracing": "7.42.0",
       "@tanstack/react-query": "4.14.5",

frontend/tests/jest/__mocks__/products.ts

@@ -1,6 +1,6 @@
 import { CurrencyCode } from '@lib/shopify-storefront-sdk';
 import type { FindProductQuery } from '@lib/shopify-storefront-sdk';
-import { MenuItemType } from '@ifixit/ui/menu';
+import { MenuItemType } from '@ifixit/menu';
 import type { ProductSearchHit } from '@models/product-list';
 import type { ProductReview } from '@models/product/reviews';
 import type {

packages/footer/components/Navigation.tsx

@@ -18,7 +18,7 @@ import type {
 } from '@chakra-ui/react';
 import { NewsletterComponent } from './Newsletter';
 import type { NewsletterFormProps } from './Newsletter';
-import type { Menu as MenuType, MenuItem } from '@ifixit/ui';
+import type { Menu as MenuType, MenuItem } from '@ifixit/menu';
 import { useTrackedOnClick } from '../hooks/useTrackedOnClick';
 
 type NavSectionProps = {

packages/footer/components/Shared.tsx

@@ -1,8 +1,7 @@
 import { Divider, Box, forwardRef, HStack, Icon, Text } from '@chakra-ui/react';
 import type { DividerProps, FlexProps, StackProps } from '@chakra-ui/react';
-import type { Menu } from '@ifixit/ui';
+import type { Menu } from '@ifixit/menu';
 import { useTrackedOnClick } from '../hooks/useTrackedOnClick';
-import { Wrapper } from '@ifixit/ui';
 
 export interface FooterType {
    menu1: Menu | null;
@@ -16,7 +15,17 @@ export const Footer = forwardRef<FlexProps, 'footer'>(
    ({ children, ...otherProps }, ref) => {
       return (
          <Box ref={ref} as="footer" bg="black" py="12" {...otherProps}>
-            <Wrapper>{children}</Wrapper>
+            <Box
+               maxW="80rem"
+               mx="auto"
+               px={{
+                  base: 4,
+                  md: 6,
+                  lg: 8,
+               }}
+            >
+               {children}
+            </Box>
          </Box>
       );
    }

packages/footer/homepage-kpis/index.tsx

@@ -1,5 +1,4 @@
 import { Box, SimpleGrid, Stat, StatLabel, StatNumber } from '@chakra-ui/react';
-import { Wrapper } from '@ifixit/ui';
 
 interface Stat {
    value: string;
@@ -27,7 +26,15 @@ export function StatsSection({ data: { stats } }: StatsSectionProps) {
          borderColor="blue.100"
          mb={-10}
       >
-         <Wrapper>
+         <Box
+            maxW="80rem"
+            mx="auto"
+            px={{
+               base: 4,
+               md: 6,
+               lg: 8,
+            }}
+         >
             <SimpleGrid
                columns={{
                   base: 1,
@@ -45,7 +52,7 @@ export function StatsSection({ data: { stats } }: StatsSectionProps) {
                   />
                ))}
             </SimpleGrid>
-         </Wrapper>
+         </Box>
       </Box>
    );
 }

packages/footer/package.json

@@ -10,7 +10,7 @@
       "type-check": "tsc --pretty --noEmit"
    },
    "dependencies": {
-      "@ifixit/ui": "workspace:*",
+      "@ifixit/menu": "workspace:*",
       "@ifixit/newsletter-sdk": "workspace:*",
       "@ifixit/icons": "workspace:*"
    },

packages/menu/package.json

@@ -0,0 +1,19 @@
+{
+   "name": "@ifixit/menu",
+   "version": "0.0.0",
+   "main": "./index.tsx",
+   "types": "./index.tsx",
+   "license": "MIT",
+   "exports": {
+      ".": "./index.ts"
+   },
+   "scripts": {
+      "build": "",
+      "clean": "",
+      "type-check": "tsc --pretty --noEmit"
+   },
+   "devDependencies": {
+      "@ifixit/tsconfig": "workspace:*",
+      "typescript": "4.8.4"
+   }
+}

packages/menu/tsconfig.json

@@ -0,0 +1,5 @@
+{
+   "extends": "@ifixit/tsconfig/react-library.json",
+   "include": ["."],
+   "exclude": ["dist", "build", "node_modules"]
+}

packages/ui/index.tsx

@@ -5,4 +5,3 @@ export * from './misc';
 export * from './theme';
 export * from './cart';
 export * from './commerce';
-export * from './menu';