[core] Simplify career (#39112)

.eslintrc.js

@@ -119,6 +119,7 @@ module.exports = {
     'material-ui/docgen-ignore-before-comment': 'error',
     'material-ui/rules-of-use-theme-variants': 'error',
     'material-ui/no-empty-box': 'error',
+    'material-ui/straight-quotes': 'error',
 
     'react-hooks/exhaustive-deps': ['error', { additionalHooks: 'useEnhancedEffect' }],
     'react-hooks/rules-of-hooks': 'error',

crowdin.yml

@@ -10,7 +10,7 @@ files:
       - /docs/src/pages/discover-more/backers/*
       - /docs/src/pages/discover-more/roadmap/*
       - /docs/src/pages/company/**/*
-      - /docs/src/pages/careers/**/*
+      - /docs/pages/careers/**/*
     translation: /%original_path%/%file_name%-%two_letters_code%.%file_extension%
   - source: /docs/data/**/*.md
     ignore:

docs/data/joy/components/card/CardUsage.js

@@ -63,7 +63,7 @@ export default function CardUsage() {
               Yosemite - Your Next Adventure
             </Typography>
             <Typography>
-              Yosemite National Park is in California’s Sierra Nevada mountains.
+              {"Yosemite National Park is in California's Sierra Nevada mountains."}
             </Typography>
             <CardActions>
               <Button variant="outlined" size="sm">

docs/data/joy/getting-started/templates/messages/data.tsx

@@ -83,14 +83,14 @@ export const chats: ChatProps[] = [
       {
         id: '6',
         content:
-          'Thanks Olivia! Almost there. I’ll work on making those changes you suggested and will shoot it over.',
+          "Thanks Olivia! Almost there. I'll work on making those changes you suggested and will shoot it over.",
         timestamp: 'Thursday 10:16am',
         sender: users[0],
       },
       {
         id: '7',
         content:
-          'Hey Olivia, I’ve finished with the requirements doc! I made some notes in the gdoc as well for Phoenix to look over.',
+          "Hey Olivia, I've finished with the requirements doc! I made some notes in the gdoc as well for Phoenix to look over.",
         timestamp: 'Thursday 11:40am',
         sender: users[0],
       },
@@ -109,13 +109,13 @@ export const chats: ChatProps[] = [
         id: '8',
         timestamp: 'Thursday 11:41am',
         sender: 'You',
-        content: 'Awesome! Thanks. I’ll look at this today.',
+        content: "Awesome! Thanks. I'll look at this today.",
       },
       {
         id: '9',
         timestamp: 'Thursday 11:44am',
         sender: users[0],
-        content: 'No rush though — we still have to wait for Lana’s designs.',
+        content: "No rush though — we still have to wait for Lana's designs.",
       },
       {
         id: '10',
@@ -127,7 +127,7 @@ export const chats: ChatProps[] = [
         id: '11',
         timestamp: 'Just now',
         sender: 'You',
-        content: 'Sure thing, I’ll have a look today. They’re looking great!',
+        content: "Sure thing, I'll have a look today. They're looking great!",
       },
     ],
   },
@@ -262,7 +262,7 @@ export const chats: ChatProps[] = [
       {
         id: '1',
         content:
-          'Hey Olivia, I’ve finished with the requirements doc! I made some notes in the gdoc as well for Phoenix to look over.',
+          "Hey Olivia, I've finished with the requirements doc! I made some notes in the gdoc as well for Phoenix to look over.",
         timestamp: '5 mins ago',
         sender: users[6],
         unread: true,

docs/nextConfigDocsInfra.js

@@ -46,7 +46,7 @@ function withDocsInfra(nextConfig) {
       DEPLOY_ENV,
       ...nextConfig.env,
       // https://docs.netlify.com/configure-builds/environment-variables/#git-metadata
-      // reference ID (also known as “SHA” or “hash”) of the commit we’re building.
+      // reference ID (also known as "SHA" or "hash") of the commit we're building.
       COMMIT_REF: process.env.COMMIT_REF,
       // ID of the PR and the Deploy Preview it generated (for example, 1211)
       PULL_REQUEST_ID: process.env.REVIEW_ID,

docs/pages/careers/accessibility-engineer.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import TopLayoutCareers from 'docs/src/modules/components/TopLayoutCareers';
-import * as pageProps from 'docs/src/pages/careers/accessibility-engineer.md?@mui/markdown';
+import * as pageProps from 'docs/pages/careers/accessibility-engineer.md?@mui/markdown';
 
 export default function Page() {
   return <TopLayoutCareers {...pageProps} />;

docs/pages/careers/design-engineer.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import TopLayoutCareers from 'docs/src/modules/components/TopLayoutCareers';
-import * as pageProps from 'docs/src/pages/careers/design-engineer.md?@mui/markdown';
+import * as pageProps from 'docs/pages/careers/design-engineer.md?@mui/markdown';
 
 export default function Page() {
   return <TopLayoutCareers {...pageProps} />;

docs/pages/careers/fullstack-engineer.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import TopLayoutCareers from 'docs/src/modules/components/TopLayoutCareers';
-import * as pageProps from 'docs/src/pages/careers/full-stack-engineer.md?@mui/markdown';
+import * as pageProps from 'docs/pages/careers/full-stack-engineer.md?@mui/markdown';
 
 export default function Page() {
   return <TopLayoutCareers {...pageProps} />;

docs/pages/careers/product-engineer.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import TopLayoutCareers from 'docs/src/modules/components/TopLayoutCareers';
-import * as pageProps from 'docs/src/pages/careers/product-engineer.md?@mui/markdown';
+import * as pageProps from 'docs/pages/careers/product-engineer.md?@mui/markdown';
 
 export default function Page() {
   return <TopLayoutCareers {...pageProps} />;

docs/pages/careers/product-marketing-manager.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import TopLayoutCareers from 'docs/src/modules/components/TopLayoutCareers';
-import * as pageProps from 'docs/src/pages/careers/product-marketing-manager.md?@mui/markdown';
+import * as pageProps from 'docs/pages/careers/product-marketing-manager.md?@mui/markdown';
 
 export default function Page() {
   return <TopLayoutCareers {...pageProps} />;

docs/pages/careers/react-community-engineer.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import TopLayoutCareers from 'docs/src/modules/components/TopLayoutCareers';
-import * as pageProps from 'docs/src/pages/careers/react-community-engineer.md?@mui/markdown';
+import * as pageProps from 'docs/pages/careers/react-community-engineer.md?@mui/markdown';
 
 export default function Page() {
   return <TopLayoutCareers {...pageProps} />;

docs/pages/careers/react-engineer-core.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import TopLayoutCareers from 'docs/src/modules/components/TopLayoutCareers';
-import * as pageProps from 'docs/src/pages/careers/react-engineer-core.md?@mui/markdown';
+import * as pageProps from 'docs/pages/careers/react-engineer-core.md?@mui/markdown';
 
 export default function Page() {
   return <TopLayoutCareers {...pageProps} />;

docs/pages/careers/react-engineer-x.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import TopLayoutCareers from 'docs/src/modules/components/TopLayoutCareers';
-import * as pageProps from 'docs/src/pages/careers/react-engineer-x.md?@mui/markdown';
+import * as pageProps from 'docs/pages/careers/react-engineer-x.md?@mui/markdown';
 
 export default function Page() {
   return <TopLayoutCareers {...pageProps} />;

docs/pages/careers/react-tech-lead-core.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import TopLayoutCareers from 'docs/src/modules/components/TopLayoutCareers';
-import * as pageProps from 'docs/src/pages/careers/react-tech-lead-core.md?@mui/markdown';
+import * as pageProps from 'docs/pages/careers/react-tech-lead-core.md?@mui/markdown';
 
 export default function Page() {
   return <TopLayoutCareers {...pageProps} />;

docs/pages/careers/react-tech-lead-x-grid.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import TopLayoutCareers from 'docs/src/modules/components/TopLayoutCareers';
-import * as pageProps from 'docs/src/pages/careers/react-tech-lead-x-grid.md?@mui/markdown';
+import * as pageProps from 'docs/pages/careers/react-tech-lead-x-grid.md?@mui/markdown';
 
 export default function Page() {
   return <TopLayoutCareers {...pageProps} />;

docs/pages/careers/technical-recruiter.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import TopLayoutCareers from 'docs/src/modules/components/TopLayoutCareers';
-import * as pageProps from 'docs/src/pages/careers/technical-recruiter.md?@mui/markdown';
+import * as pageProps from 'docs/pages/careers/technical-recruiter.md?@mui/markdown';
 
 export default function Page() {
   return <TopLayoutCareers {...pageProps} />;

docs/src/components/about/OurValues.tsx

@@ -14,23 +14,23 @@ import SectionHeadline from 'docs/src/components/typography/SectionHeadline';
 const values = [
   {
     title: 'Put community first 💙',
-    description: 'We never lose sight of who we’re serving and why.',
+    description: "We never lose sight of who we're serving and why.",
     lightIcon: 'url(/static/branding/about/illustrations/community-light.svg)',
     darkIcon: 'url(/static/branding/about/illustrations/community-dark.svg)',
     width: 92,
     height: 84,
   },
   {
     title: 'Avoid bureaucracy 🚫',
-    description: 'We’re so not corporate — and we like it that way.',
+    description: 'Were so not corporate — and we like it that way.',
     lightIcon: 'url(/static/branding/about/illustrations/bureaucracy-light.svg)',
     darkIcon: 'url(/static/branding/about/illustrations/bureaucracy-dark.svg)',
     width: 81,
     height: 94,
   },
   {
-    title: 'Chase “better” 🌱',
-    description: 'We’re driven by an unending desire to improve.',
+    title: 'Chase "better" 🌱',
+    description: "We're driven by an unending desire to improve.",
     lightIcon: 'url(/static/branding/about/illustrations/better-light.svg)',
     darkIcon: 'url(/static/branding/about/illustrations/better-dark.svg)',
     width: 89,
@@ -95,16 +95,18 @@ export default function OurValues() {
                 }),
               })}
             >
-              <Box
-                sx={(theme) => ({
-                  background: `${lightIcon}`,
-                  ...theme.applyDarkStyles({
-                    background: `${darkIcon}`,
-                  }),
-                })}
-                width={width}
-                height={height}
-              />
+              <Box sx={{ height: 94 }}>
+                <Box
+                  sx={(theme) => ({
+                    background: `${lightIcon}`,
+                    ...theme.applyDarkStyles({
+                      background: `${darkIcon}`,
+                    }),
+                  })}
+                  width={width}
+                  height={height}
+                />
+              </Box>
               <Box sx={{ flexGrow: 1 }}>
                 <Typography
                   fontWeight="bold"

docs/src/components/icon/IconImage.tsx

@@ -34,7 +34,8 @@ export type IconImageProps = {
     | 'companies/patreon'
     | 'companies/ebay'
     | 'companies/samsung'
-    | 'companies/volvo';
+    | 'companies/volvo'
+    | string;
   height?: number;
   mode?: '' | 'light' | 'dark';
   sx?: SxProps<Theme>;
@@ -50,10 +51,8 @@ export default function IconImage(props: IconImageProps) {
   const theme = useTheme();
   const [firstRender, setFirstRender] = React.useState(true);
   React.useEffect(() => {
-    if (neverHydrated) {
-      setFirstRender(false);
-      neverHydrated = false;
-    }
+    setFirstRender(false);
+    neverHydrated = false;
   }, []);
   let defaultWidth;
   let defaultHeight;

docs/src/components/productBaseUI/BaseUIComponents.tsx

@@ -84,7 +84,7 @@ export default function BaseUIComponents() {
                   <br /> <GradientText>CSS adventure</GradientText>
                 </Typography>
               }
-              description="Base UI’s skeletal components give you a sturdy foundation to apply custom styles with ease. With no defaults to override, you’re free to start from scratch using vanilla CSS, Tailwind CSS, MUI System, or any other framework you prefer."
+              description="Base UI's skeletal components give you a sturdy foundation to apply custom styles with ease. With no defaults to override, you're free to start from scratch using vanilla CSS, Tailwind CSS, MUI System, or any other framework you prefer."
             />
           </Box>
           <Group desktopColumns={2} sx={{ m: -2, p: 2 }}>

docs/src/components/productBaseUI/BaseUITestimonial.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable material-ui/straight-quotes */
 import * as React from 'react';
 import Avatar from '@mui/material/Avatar';
 import Box from '@mui/material/Box';

packages/eslint-plugin-material-ui/src/index.js

@@ -6,4 +6,5 @@ module.exports.rules = {
   'no-hardcoded-labels': require('./rules/no-hardcoded-labels'),
   'rules-of-use-theme-variants': require('./rules/rules-of-use-theme-variants'),
   'no-empty-box': require('./rules/no-empty-box'),
+  'straight-quotes': require('./rules/straight-quotes'),
 };

packages/eslint-plugin-material-ui/src/rules/straight-quotes.js

@@ -0,0 +1,43 @@
+// eslint-disable-next-line material-ui/straight-quotes
+const nonStraightQuotes = /[‘’“”]/gm;
+
+/**
+ * @type {import('eslint').Rule.RuleModule}
+ */
+const rule = {
+  meta: {
+    docs: {
+      description:
+        'Only allow straight quotes. Curly quotes can still be used but in specific context where relevant.',
+    },
+    messages: {
+      wrongQuotes:
+        'Only allow straight quotes. Curly quotes can still be used but in specific context where relevant.',
+    },
+    // fixable: 'code', TODO
+    type: 'suggestion',
+    schema: [],
+  },
+  create(context) {
+    return {
+      Program(node) {
+        const value = context.sourceCode.text;
+        let match;
+
+        // eslint-disable-next-line no-cond-assign
+        while ((match = nonStraightQuotes.exec(value)) !== null) {
+          context.report({
+            node,
+            loc: {
+              start: context.sourceCode.getLocFromIndex(match.index),
+              end: context.sourceCode.getLocFromIndex(match.index + 1),
+            },
+            messageId: 'wrongQuotes',
+          });
+        }
+      },
+    };
+  },
+};
+
+module.exports = rule;

packages/eslint-plugin-material-ui/src/rules/straight-quotes.test.js

@@ -0,0 +1,63 @@
+/* eslint-disable material-ui/straight-quotes */
+const eslint = require('eslint');
+const rule = require('./straight-quotes');
+
+const ruleTester = new eslint.RuleTester({ parser: require.resolve('@typescript-eslint/parser') });
+
+ruleTester.run('straight-quotes', rule, {
+  valid: [
+    `
+const values = [
+  {
+    title: 'Put community first 💙',
+  },
+];
+  `,
+  ],
+  invalid: [
+    {
+      code: `
+const values = [
+  {
+    title: 'Put community first 💙',
+    description: 'We never lose sight of who we’re serving and why.',
+  },
+];
+      `,
+      errors: [
+        {
+          messageId: 'wrongQuotes',
+          line: 5,
+        },
+      ],
+    },
+    {
+      code: `
+// reference ID (also known as “SHA” or “hash”) of the commit we're building.
+const values = 'foo';
+      `,
+      errors: [
+        {
+          line: 2,
+          column: 32,
+          messageId: 'wrongQuotes',
+        },
+        {
+          line: 2,
+          column: 36,
+          messageId: 'wrongQuotes',
+        },
+        {
+          line: 2,
+          column: 41,
+          messageId: 'wrongQuotes',
+        },
+        {
+          line: 2,
+          column: 46,
+          messageId: 'wrongQuotes',
+        },
+      ],
+    },
+  ],
+});

packages/markdownlint-rule-mui/straight-quotes.js

@@ -1,3 +1,6 @@
+// eslint-disable-next-line material-ui/straight-quotes
+const nonStraightQuotes = /[‘’“”]/;
+
 module.exports = {
   names: ['straightQuotes'],
   description: 'Only allow straight quotes.',
@@ -9,7 +12,7 @@ module.exports = {
       // closing single quote: \xE2\x80\x99
       // opening double quote: \xE2\x80\x9C
       // closing double quote: \xE2\x80\x9D
-      if (line.match('[‘’“”]')) {
+      if (nonStraightQuotes.test(line)) {
         onError({
           lineNumber: lineNumber + 1,
           detail: `For line: ${line}`,