[zero][system] Fix import path for @mui/system in vite apps (#40490)

apps/zero-runtime-vite-app/.eslintrc

@@ -0,0 +1,6 @@
+{
+  "rules": {
+    "import/prefer-default-export": "off",
+    "react/react-in-jsx-scope": "off"
+  }
+}

apps/zero-runtime-vite-app/.gitignore

@@ -0,0 +1 @@
+dist/

apps/zero-runtime-vite-app/README.md

@@ -0,0 +1,33 @@
+# Vite App
+
+A sample vite application to test the working of zero runtime library.
+This project is not part of the workspace yet.
+
+## How to run
+
+You can either run `yarn release:build` command to build all the packages, or you need to build, the the minimum -
+
+1. `@mui/zero-runtime`
+2. `@mui/zero-tag-processor`
+3. `@mui/zero-vite-plugin`
+
+Make sure you have also run `yarn release:build` at least once because we also use `@mui/material` and `@mui/system` packages. On subsequent runs, you can only build the above packages using -
+
+```bash
+yarn build
+```
+
+After building, you can run the project by changing into the directory and then
+
+1. Install dependencies using `yarn install`
+2. Start the dev server using `yarn dev`
+3. Build the code using `yarn build`
+
+Optionally, before running the dev server, you can run `yarn vite optimize --force` if it logged some error during `yarn vite`.
+
+### Testing
+
+This demo app has been configured to run tests using both vitest or jest.
+
+1. Vitest - You can run `yarn test` to run the tests using vitest
+2. Jest - You can run `yarn jest` to run the tests using jest

apps/zero-runtime-vite-app/index.html

@@ -0,0 +1,2 @@
+<div id="root"></div>
+<script type="module" src="./src/main.tsx"></script>

apps/zero-runtime-vite-app/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@app/vite-app",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "preview": "vite preview",
+    "dev": "vite",
+    "build": "vite build"
+  },
+  "dependencies": {
+    "@mui/base": "workspace:^",
+    "@mui/system": "workspace:^",
+    "@mui/zero-runtime": "workspace:^",
+    "clsx": "^2.0.0",
+    "local-ui-lib": "workspace:^",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@babel/preset-env": "^7.23.2",
+    "@babel/preset-react": "^7.22.15",
+    "@babel/preset-typescript": "^7.23.2",
+    "@mui/material": "workspace:^",
+    "@mui/utils": "workspace:^",
+    "@mui/zero-vite-plugin": "workspace:^",
+    "@types/react": "^18.2.47",
+    "@types/react-dom": "^18.2.18",
+    "@vitejs/plugin-react": "^4.2.1",
+    "postcss": "^8.4.33",
+    "postcss-combine-media-query": "^1.0.1",
+    "vite": "5.0.10"
+  }
+}

apps/zero-runtime-vite-app/postcss.config.cjs

@@ -0,0 +1,4 @@
+module.exports = {
+  // eslint-disable-next-line global-require
+  plugins: [require('postcss-combine-media-query')],
+};

apps/zero-runtime-vite-app/src/App.tsx

@@ -0,0 +1,172 @@
+import * as React from 'react';
+import { styled, generateAtomics } from '@mui/zero-runtime';
+import type { Breakpoint } from '@mui/system';
+import { Button, bounceAnim } from 'local-ui-lib';
+import Slider from './Slider/ZeroSlider';
+
+const ShowCaseDiv = styled('div')({
+  [`.${Button}`]: {
+    color: '#f94564',
+    animation: `${bounceAnim} 1s ease infinite`,
+  },
+});
+
+const atomics = generateAtomics(({ theme }) => ({
+  conditions: Object.entries(theme.breakpoints.values).reduce((acc, [key, value]) => {
+    if (key === 'xs') {
+      return acc;
+    }
+    acc[key as Breakpoint] = theme.breakpoints.up(value);
+    return acc;
+  }, {} as Record<Breakpoint, string>),
+  defaultCondition: 'sm',
+  properties: {
+    display: ['none', 'flex', 'block', 'grid', 'inline-flex', 'inline-block'],
+    flexDirection: ['row', 'column', 'row-reverse', 'column-reverse'],
+    justifyContent: ['center', 'space-between'],
+    alignItems: ['center'],
+  },
+}));
+
+const HalfWidth = styled.div<{ isRed?: boolean }>(({ theme }) => ({
+  marginLeft: 20,
+  width: '50%',
+  maxHeight: 100,
+  padding: 20,
+  border: '1px solid #ccc',
+  color: ({ isRed }) => {
+    if (isRed) {
+      return (theme.vars || theme).palette.primary.main;
+    }
+    return (theme.vars || theme).palette.secondary.main;
+  },
+}));
+
+type AppProps = {
+  isRed?: boolean;
+};
+
+export function App({ isRed }: AppProps) {
+  const [count, setCount] = React.useState(0);
+  const [value, setValue] = React.useState(50);
+  const [isColorPrimary, setIsColorPrimary] = React.useState(true);
+  const [size, setSize] = React.useState('medium');
+  const [showMarks, setShowMarks] = React.useState(true);
+  const [isTrackInverted, setIsTrackInverted] = React.useState(false);
+  const [disabled, setDisabled] = React.useState(false);
+  const [isHorizontal, setIsHorizontal] = React.useState(true);
+
+  return (
+    <div>
+      <ShowCaseDiv>
+        <Button>This button&apos;s text color has been overridden.</Button>
+      </ShowCaseDiv>
+      <Button isRed={count % 2 === 1} onClick={() => setCount(count + 1)}>
+        Click Count {count}
+      </Button>
+      <div>
+        <div>
+          <label>
+            <input
+              type="checkbox"
+              checked={isColorPrimary}
+              onChange={() => setIsColorPrimary(!isColorPrimary)}
+            />
+            Toggle Color: {isColorPrimary ? 'Primary' : 'Secondary'}
+          </label>
+        </div>
+        <div>
+          <label>
+            <input
+              type="checkbox"
+              checked={isTrackInverted}
+              onChange={() => setIsTrackInverted(!isTrackInverted)}
+            />
+            Track type: {isTrackInverted ? 'Inverted' : 'Normal'}
+          </label>
+        </div>
+        <div>
+          <label>
+            <input
+              type="checkbox"
+              checked={isHorizontal}
+              onChange={() => setIsHorizontal(!isHorizontal)}
+            />
+            Orientation: {isHorizontal ? 'Horizontal' : 'Vertical'}
+          </label>
+        </div>
+        <div>
+          <label>
+            <input type="checkbox" checked={disabled} onChange={() => setDisabled(!disabled)} />
+            Disabled: {disabled ? 'Yes' : 'No'}
+          </label>
+        </div>
+        <div>
+          <label>
+            <input type="checkbox" checked={showMarks} onChange={() => setShowMarks(!showMarks)} />
+            Show marks: {showMarks ? 'Yes' : 'No'}
+          </label>
+        </div>
+        <div>
+          <label>
+            Change Size:
+            <select value={size} onChange={(ev) => setSize(ev.target.value)}>
+              <option value="small">Small</option>
+              <option value="medium">Medium</option>
+            </select>
+          </label>
+        </div>
+      </div>
+      <div>
+        <HalfWidth
+          isRed={count % 2 === 0}
+          sx={({ theme }) => ({
+            color: (theme.vars || theme).palette.primary.main,
+            fontSize: isRed ? 'h1.fontSize' : 'h2.fontSize',
+            ':hover': {
+              backgroundColor: ['primary.dark', 'secondary.main'],
+              color: {
+                sm: 'primary.dark',
+                md: 'secondary.main',
+              },
+            },
+          })}
+        >
+          <Slider
+            aria-label="Small steps"
+            defaultValue={50}
+            step={2}
+            marks={showMarks}
+            min={0}
+            max={100}
+            valueLabelDisplay="auto"
+            orientation={isHorizontal ? 'horizontal' : 'vertical'}
+            size={size as 'small' | 'medium'}
+            color={isColorPrimary ? 'primary' : 'secondary'}
+            track={isTrackInverted ? 'inverted' : 'normal'}
+            disabled={disabled}
+            value={value}
+            onChange={(ev, val) => setValue(val as number)}
+          />
+        </HalfWidth>
+      </div>
+      <div>
+        <h1>Atomics Demo</h1>
+        <div
+          {...atomics({
+            display: 'flex',
+            flexDirection: {
+              lg: 'row',
+              md: 'column',
+              sm: 'column',
+            },
+            justifyContent: 'space-between',
+          })}
+        >
+          <span>Hello1</span>
+          <span>Hello2</span>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/zero-runtime-vite-app/src/Slider/ZeroSlider.test.jsx

@@ -0,0 +1,23 @@
+/* eslint-disable react/jsx-filename-extension */
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import Slider from './ZeroSlider';
+
+describe('Slider', () => {
+  it('should render', () => {
+    const { rerender, container } = render(<Slider />);
+
+    const root = container.getElementsByClassName('MuiSlider-root')[0];
+    expect(root.classList.contains('MuiSlider-colorPrimary')).toBeTruthy();
+    rerender(<Slider color="secondary" />);
+    expect(root.classList.contains('MuiSlider-colorSecondary')).toBeTruthy();
+
+    let rootComputedStyles = window.getComputedStyle(root);
+    expect(rootComputedStyles.borderRadius).toEqual('12px');
+    expect(rootComputedStyles.cursor).toEqual('pointer');
+
+    rerender(<Slider disabled />);
+    rootComputedStyles = window.getComputedStyle(root);
+    expect(rootComputedStyles.cursor).toEqual('default');
+  });
+});