Merge branch 'main' into registry-script

docs/next.config.js

@@ -13,8 +13,8 @@ const nextConfig = {
   },
   transpilePackages: [
     '@marigold/components',
-    '@marigold/theme-preset',
     '@marigold/system',
+    '@marigold/theme-preset',
   ],
 };
 

packages/components/src/Menu/Menu.test.tsx

@@ -9,12 +9,7 @@ import {
 } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { OverlayProvider } from '@react-aria/overlays';
-import {
-  Theme,
-  ThemeProvider,
-  useResponsiveValue,
-  cva,
-} from '@marigold/system';
+import { Theme, ThemeProvider, cva, useSmallScreen } from '@marigold/system';
 
 import { Button } from '../Button';
 import { Menu } from './Menu';
@@ -72,11 +67,7 @@ const mockMatchMedia = (matches: string[]) =>
     matches: matches.includes(query),
   }));
 
-window.matchMedia = mockMatchMedia([
-  'screen and (min-width: 40em)',
-  'screen and (min-width: 52em)',
-  'screen and (min-width: 64em)',
-]);
+window.matchMedia = mockMatchMedia(['(max-width: 600px)']);
 
 afterEach(cleanup);
 
@@ -342,13 +333,10 @@ test('renders as tray', () => {
     if (event === 'resize') resize = cb;
   });
 
-  const { result } = renderHook(() =>
-    useResponsiveValue(['one', 'two', 'three', 'four'])
-  );
-  window.matchMedia = mockMatchMedia([]);
+  const { result } = renderHook(() => useSmallScreen());
+  window.matchMedia = mockMatchMedia(['(max-width: 600px)']);
   act(() => resize());
-
-  expect(result.current).toEqual('one');
+  expect(result.current).toBeTruthy();
 
   render(
     <OverlayProvider>

packages/components/src/Menu/MenuTrigger.tsx

@@ -3,7 +3,7 @@ import { useMenuTriggerState } from '@react-stately/menu';
 import { PressResponder } from '@react-aria/interactions';
 import { useMenuTrigger } from '@react-aria/menu';
 import { useObjectRef } from '@react-aria/utils';
-import { useResponsiveValue } from '@marigold/system';
+import { useSmallScreen } from '@marigold/system';
 import { MenuContext, MenuContextProps } from './Context';
 import { Popover, Tray } from '../Overlay';
 
@@ -44,8 +44,7 @@ export const MenuTrigger = ({
     autoFocus: state.focusStrategy,
   };
 
-  const isSmallScreen = useResponsiveValue([true, false, false], 2);
-
+  const isSmallScreen = useSmallScreen();
   return (
     <MenuContext.Provider value={menuContext}>
       <PressResponder

packages/components/src/Select/Select.test.tsx

@@ -10,7 +10,7 @@ import {
 import userEvent from '@testing-library/user-event';
 import { cleanup } from '@testing-library/react';
 
-import { Theme, useResponsiveValue, cva } from '@marigold/system';
+import { Theme, cva, useSmallScreen } from '@marigold/system';
 import { setup } from '../test.utils';
 
 import { Select } from './Select';
@@ -213,11 +213,7 @@ test('option list closes when button is clicked', () => {
 });
 
 test('supports to select an option and closes listbox afterwards', () => {
-  window.matchMedia = mockMatchMedia([
-    'screen and (min-width: 40em)',
-    'screen and (min-width: 52em)',
-    'screen and (min-width: 64em)',
-  ]);
+  window.matchMedia = mockMatchMedia(['screen and (min-width: 600px)']);
   render(
     <OverlayProvider>
       <Select label="Label" data-testid="select">
@@ -468,13 +464,11 @@ test('renders as tray', () => {
     if (event === 'resize') resize = cb;
   });
 
-  const { result } = renderHook(() =>
-    useResponsiveValue(['one', 'two', 'three', 'four'])
-  );
-  window.matchMedia = mockMatchMedia([]);
+  const { result } = renderHook(() => useSmallScreen());
+  window.matchMedia = mockMatchMedia(['(max-width: 600px)']);
   act(() => resize());
 
-  expect(result.current).toEqual('one');
+  expect(result.current).toBeTruthy();
 
   render(
     <OverlayProvider>

packages/components/src/Select/Select.tsx

@@ -16,7 +16,7 @@ import { mergeProps, useObjectRef } from '@react-aria/utils';
 import {
   cn,
   useClassNames,
-  useResponsiveValue,
+  useSmallScreen,
   useStateProps,
 } from '@marigold/system';
 import { HtmlProps } from '@marigold/types';
@@ -130,7 +130,7 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(
     const { focusProps, isFocusVisible } = useFocusRing();
 
     const classNames = useClassNames({ component: 'Select', variant, size });
-    const isSmallScreen = useResponsiveValue([true, false, false], 2);
+    const isSmallScreen = useSmallScreen();
     const stateProps = useStateProps({
       disabled,
       error,

packages/system/src/hooks/index.ts

@@ -2,3 +2,4 @@ export * from './useClassNames';
 export * from './useResponsiveValue';
 export * from './useStateProps';
 export * from './useTheme';
+export * from './useSmallScreen';

packages/system/src/hooks/useSmallScreen.test.tsx

@@ -0,0 +1,33 @@
+import { cleanup } from '@testing-library/react';
+import { renderHook } from '@testing-library/react-hooks';
+
+import { useSmallScreen } from './useSmallScreen';
+
+/**
+ * We need to mock `matchMedia` because JSON does not
+ * implements it.
+ */
+const mockMatchMedia = (matches: string[]) =>
+  jest.fn().mockImplementation(query => {
+    return {
+      matches: matches.includes(query),
+    };
+  });
+
+afterEach(cleanup);
+
+test('check of the value is truthy', () => {
+  window.matchMedia = mockMatchMedia(['(max-width: 600px)']);
+
+  const { result } = renderHook(() => useSmallScreen());
+  expect(result.current).toBeTruthy();
+});
+
+it('should verify if window exist', () => {
+  // mocking if there's no window
+  Object.defineProperty(global, 'window', {
+    value: undefined,
+  });
+  const { result } = renderHook(() => useSmallScreen());
+  expect(result.current).toBeFalsy();
+});

packages/system/src/hooks/useSmallScreen.ts

@@ -0,0 +1,26 @@
+import { useCallback, useEffect, useState } from 'react';
+
+export const useSmallScreen = (): boolean => {
+  const getMatches = (): boolean => {
+    if (typeof window == 'undefined') {
+      return false;
+    }
+    return window.matchMedia('(max-width: 600px)').matches;
+  };
+
+  const [matches, setMatches] = useState<boolean>(getMatches());
+
+  const handleResize = useCallback(() => {
+    setMatches(getMatches());
+  }, []);
+  useEffect(() => {
+    // Triggered at the first client-side load and if query changes
+    handleResize();
+    if (typeof window == 'undefined') return;
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [handleResize]);
+
+  return matches;
+};

packages/theme-preset/package.json

@@ -20,13 +20,16 @@
     "directory": "packages/theme-preset"
   },
   "dependencies": {
+    "@marigold/system": "workspace:*",
     "deepmerge": "^4.2.2",
     "find-up": "5.0.0"
   },
+  "peerDependencies": {
+    "postcss": "8.4.24",
+    "tailwindcss": "3.3.2"
+  },
   "devDependencies": {
-    "@marigold/system": "workspace:*",
     "@marigold/tsconfig": "workspace:*",
-    "@marigold/types": "workspace:*",
     "postcss": "8.4.24",
     "tailwindcss": "3.3.2",
     "tsup": "6.7.0"

packages/theme-preset/src/create-preset.test.tsx

@@ -1,6 +1,7 @@
+import path from 'node:path';
 import { defaultTheme } from '@marigold/system';
+
 import { createPreset } from './create-preset';
-import path from 'path';
 
 test('create preset and merge it with defaultTheme', () => {
   const preset = createPreset('test', {

themes/theme-b2b/src/components/NumberField.styles.ts

@@ -3,18 +3,15 @@ import { ThemeComponent, cva } from '@marigold/system';
 export const NumberField: ThemeComponent<'NumberField'> = {
   group: cva([
     'border-border-light rounded-sm border border-solid',
-    'data-[hover]:border-border-hover',
+    'hover:border-border-hover',
     'group-readonly/field:group-focus/field:border-border-light group-readonly/field:group-focus/field:shadow-none',
-    'data-[focus]:border-border-focus data-[focus]:shadow-shadow-focus data-[focus]:shadow-[0_0_0_1px]',
-    'data-[disabled]:bg-bg-disabled data-[disabled]:text-text-disabled data-[disabled]:cursor-not-allowed ',
-    'data-[error]:border-border-error data-[error]:shadow-shadow-error data-[error]:shadow-[0_0_0_1px]',
+    'group-focus/field:border-border-focus ',
+    'group-disabled/field:bg-bg-disabled group-disabled/field:text-text-disabled group-disabled/field:cursor-not-allowed ',
+    'group-error/field:border-border-error',
   ]),
   stepper: cva([
     'text-text-body w-7',
     'border-border-light border-solid first-of-type:border-r',
     'border-border-light border-solid last-of-type:border-l ',
-    'data-[disabled]:text-text-disabled',
-    'group-hover/field:border-border-hover',
-    'group-error/field:border-border-error',
   ]),
 };

themes/theme-b2b/src/tokens.ts

@@ -83,7 +83,8 @@ const blue = {
   '900': '#1f455a',
   '950': '#0f2c3d',
 };
-
+const white = '#ffff';
+const black = '#000000';
 export const colors = {
   // Brand
   // ---------------
@@ -92,6 +93,8 @@ export const colors = {
   yellow,
   green,
   red,
+  white,
+  black,
 
   // Text
   // ---------------
@@ -117,7 +120,7 @@ export const colors = {
     /**
      * Should be set to either html or body element.
      */
-    body: brand.secondary[50],
+    body: white,
     neutral: brand.secondary[200],
 
     primary: {
@@ -135,7 +138,7 @@ export const colors = {
       /**
        * Use this for e.g. card backgrounds.
        */
-      DEFAULT: brand.secondary[50],
+      DEFAULT: white,
       /**
        * Use this when you need to separate a specific layer from
        * the surface color, e.g. table headers.