init project

packages/mui-material/src/Box/Box.d.ts

@@ -0,0 +1,25 @@
+import { BoxTypeMap } from '@mui/system';
+import { OverridableComponent } from '@mui/types';
+import { OverrideProps } from '../OverridableComponent';
+import { Theme as MaterialTheme } from '../styles';
+
+/**
+ *
+ * Demos:
+ *
+ * - [Box](https://mui.com/material-ui/react-box/)
+ *
+ * API:
+ *
+ * - [Box API](https://mui.com/material-ui/api/box/)
+ */
+declare const Box: OverridableComponent<BoxTypeMap<{}, 'div', MaterialTheme>>;
+
+export type BoxProps<
+  RootComponent extends React.ElementType = BoxTypeMap['defaultComponent'],
+  AdditionalProps = {},
+> = OverrideProps<BoxTypeMap<AdditionalProps, RootComponent, MaterialTheme>, RootComponent> & {
+  component?: React.ElementType;
+};
+
+export default Box;

packages/mui-material/src/Box/Box.js

@@ -0,0 +1,42 @@
+'use client';
+import { createBox } from '@mui/system';
+import PropTypes from 'prop-types';
+import { unstable_ClassNameGenerator as ClassNameGenerator } from '../className';
+import { createTheme } from '../styles';
+import THEME_ID from '../styles/identifier';
+import boxClasses from './boxClasses';
+
+const defaultTheme = createTheme();
+
+const Box = createBox({
+  themeId: THEME_ID,
+  defaultTheme,
+  defaultClassName: boxClasses.root,
+  generateClassName: ClassNameGenerator.generate,
+});
+
+Box.propTypes /* remove-proptypes */ = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * @ignore
+   */
+  children: PropTypes.node,
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: PropTypes.elementType,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])),
+    PropTypes.func,
+    PropTypes.object,
+  ]),
+};
+
+export default Box;

packages/mui-material/src/Box/Box.spec.tsx

@@ -0,0 +1,47 @@
+import { Box as SystemBox, BoxProps as SystemBoxProps, createBox } from '@mui/system';
+import { expectType } from '@mui/types';
+import Box, { BoxProps as MaterialBoxProps } from '@mui/material/Box';
+import { createTheme } from '@mui/material/styles';
+
+function ThemeValuesCanBeSpread() {
+  <Box
+    sx={(theme) => ({
+      ...theme.typography.body1,
+      color: theme.palette.primary.main,
+    })}
+  />;
+  <Box
+    sx={(theme) => ({
+      ...theme.mixins.toolbar,
+      color: theme.palette.primary.main,
+    })}
+  />;
+  <Box
+    sx={(theme) => ({
+      ...theme.mixins.toolbar,
+      color: 'primary.main',
+    })}
+  />;
+}
+
+// Compatibility with Material UI's Box
+const defaultTheme = createTheme({});
+const CustomBox = createBox({ defaultTheme });
+expectType<typeof Box, typeof CustomBox>(CustomBox);
+
+// @ts-expect-error System's Box has different type than Material UI's Box
+expectType<typeof SystemBox, typeof CustomBox>(CustomBox);
+
+function ColorTest() {
+  <Box
+    color={(theme) => theme.vars.palette.common.black}
+    sx={(theme) => ({ backgroundColor: theme.vars.palette.background.default })}
+  />;
+}
+
+function ComponentTest() {
+  return <span />;
+}
+
+expectType<SystemBoxProps['component'], MaterialBoxProps['component']>('span');
+expectType<SystemBoxProps['component'], MaterialBoxProps['component']>(ComponentTest);

packages/mui-material/src/Box/Box.test.js

@@ -0,0 +1,63 @@
+import { expect } from 'chai';
+import { createRenderer, isJsdom } from '@mui/internal-test-utils';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+import { unstable_ClassNameGenerator as ClassNameGenerator } from '@mui/material/className';
+import describeConformance from '../../test/describeConformance';
+
+const isJSDOM = isJsdom();
+
+describe('<Box />', () => {
+  const { render } = createRenderer();
+
+  describeConformance(<Box />, () => ({
+    render,
+    inheritComponent: 'div',
+    skip: [
+      'componentProp',
+      'componentsProp',
+      'rootClass',
+      'themeVariants',
+      'themeStyleOverrides',
+      'themeDefaultProps',
+    ],
+    refInstanceof: window.HTMLDivElement,
+  }));
+
+  it.skipIf(isJSDOM)('respects theme from context', function test() {
+    const theme = createTheme({
+      palette: {
+        primary: {
+          main: 'rgb(255, 0, 0)',
+        },
+      },
+    });
+
+    const { container } = render(
+      <ThemeProvider theme={theme}>
+        <Box color="primary.main" />
+      </ThemeProvider>,
+    );
+
+    expect(container.firstChild).toHaveComputedStyle({
+      color: 'rgb(255, 0, 0)',
+    });
+  });
+
+  describe('ClassNameGenerator', () => {
+    afterEach(() => {
+      ClassNameGenerator.reset();
+    });
+
+    it('get custom className', () => {
+      const { container, rerender } = render(<Box />);
+      expect(container.firstChild).to.have.class('MuiBox-root');
+
+      ClassNameGenerator.configure((name) => name.replace('Mui', 'Company'));
+
+      rerender(<Box />);
+
+      expect(container.firstChild).to.have.class('CompanyBox-root');
+    });
+  });
+});

packages/mui-material/src/Box/boxClasses.ts

@@ -0,0 +1,12 @@
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+
+export interface BoxClasses {
+  /** Styles applied to the root element. */
+  root: string;
+}
+
+export type BoxClassKey = keyof BoxClasses;
+
+const boxClasses: BoxClasses = generateUtilityClasses('MuiBox', ['root']);
+
+export default boxClasses;

packages/mui-material/src/Box/index.d.ts

@@ -0,0 +1,5 @@
+export { default } from './Box';
+export * from './Box';
+
+export { default as boxClasses } from './boxClasses';
+export * from './boxClasses';

packages/mui-material/src/Box/index.js

@@ -0,0 +1,4 @@
+export { default } from './Box';
+
+export { default as boxClasses } from './boxClasses';
+export * from './boxClasses';