Merge branch 'joy-drawer-content' of https://github.com/sai6855/mater…

…ial-ui into joy-drawer-content
mui · Oct 2, 2023 · 803080b · 803080b
2 parents 4243631 + 5ecef89
commit 803080b
Show file tree

Hide file tree

Showing 84 changed files with 5,252 additions and 1,198 deletions.
diff --git a/apps/zero-runtime-next-app/next.config.js b/apps/zero-runtime-next-app/next.config.js
@@ -10,9 +10,7 @@ const theme = createTheme({
 // @ts-ignore
 theme.applyDarkStyles = function applyDarkStyles(obj) {
   return {
-    // @TODO - Use custom stylis plugin as in docs/src/createEmotionCache.ts
-    // so that we don't need to use *
-    '* :where([data-mui-color-scheme="dark"]) &': obj,
+    ':where([data-mui-color-scheme="dark"]) &': obj,
   };
 };
 

diff --git a/apps/zero-runtime-vite-app/src/App.tsx b/apps/zero-runtime-vite-app/src/App.tsx
@@ -1,12 +1,41 @@
 import * as React from 'react';
-import { styled } from '@mui/zero-runtime';
+import { styled, keyframes } from '@mui/zero-runtime';
 import Slider from './Slider/ZeroSlider';
 
+const bounce = keyframes`
+  from, 20%, 53%, 80%, to {
+    transform: translate3d(0,0,0);
+  }
+  40%, 43% {
+    transform: translate3d(0, -30px, 0);
+  }
+  70% {
+    transform: translate3d(0, -15px, 0);
+  }
+  90% {
+    transform: translate3d(0,-4px,0);
+  }
+`;
+
+const bounceAnim = keyframes({
+  'from, 20%, 53%, 80%, to': {
+    transform: 'translate3d(0,0,0)',
+  },
+  '40%, 43%': {
+    transform: 'translate3d(0, -30px, 0)',
+  },
+  '70%': {
+    transform: 'translate3d(0, -15px, 0)',
+  },
+  '90%': {
+    transform: 'translate3d(0,-4px,0)',
+  },
+});
+
 const Button = styled('button', {
   name: 'MuiButton',
   slot: 'Root',
 })(
-  'color:red',
   ({ theme }: any) => ({
     fontFamily: 'sans-serif',
     backgroundColor: [theme.palette.primary.main, 'text.primary', 'background.paper'],
@@ -30,6 +59,7 @@ const HalfWidth = styled.div({
   maxHeight: 100,
   padding: 20,
   border: '1px solid #ccc',
+  animation: [`${bounce} 1s ease infinite`, `${bounceAnim} 1s ease infinite`],
 });
 
 export default function App({ isRed }: any) {

diff --git a/apps/zero-runtime-vite-app/vite.config.ts b/apps/zero-runtime-vite-app/vite.config.ts
@@ -10,9 +10,7 @@ const theme = createTheme();
 // @ts-ignore
 theme.applyDarkStyles = function applyDarkStyles(obj) {
   return {
-    // @TODO - Use custom stylis plugin as in docs/src/createEmotionCache.ts
-    // so that we don't need to use *
-    '* :where([data-mui-color-scheme="dark"]) &': obj,
+    ':where([data-mui-color-scheme="dark"]) &': obj,
   };
 };
 

diff --git a/docs/data/about/teamMembers.json b/docs/data/about/teamMembers.json
@@ -146,7 +146,7 @@
     "location": "Philippines",
     "locationCountry": "ph",
     "about": "Loves DIY, singing and learning",
-    "github": "gzrae"
+    "github": "zannager"
   },
   {
     "name": "Tina Deinekhovska",

diff --git a/docs/data/joy/components/accordion/accordion.md b/docs/data/joy/components/accordion/accordion.md
@@ -97,7 +97,7 @@ Use `sx` prop on the AccordionGroup to style all the accordions at once.
 
 ### Depth panel
 
-This example shows how to customize the accordion to create lines and depth to make it looks more realistic.
+This example shows how to customize the accordion to create lines and depth to make it look more realistic.
 
 {{"demo": "AccordionDepthPanel.js"}}
 

diff --git a/docs/data/joy/components/aspect-ratio/aspect-ratio.md b/docs/data/joy/components/aspect-ratio/aspect-ratio.md
@@ -110,8 +110,6 @@ function App() {
 
 The Aspect Ratio component can be a handy tool for creating a square container for an icon.
 
-The example below show
-
 {{"demo": "IconWrapper.js"}}
 
 ## Common examples

diff --git a/docs/data/joy/getting-started/roadmap/roadmap.md b/docs/data/joy/getting-started/roadmap/roadmap.md
@@ -0,0 +1,31 @@
+# Roadmap
+
+<p class="description">Keep up with ongoing projects and help shape the future of Joy UI.</p>
+
+## Priorization method
+
+Joy UI is a community-driven project, meaning we usually pick the issues and suggestions that resonate the most with the community.
+Therefore, make sure to leave an upvote 👍 on [the GitHub issues](https://github.com/mui/material-ui/issues?q=is:open+is:issue+label:%22package:+joy-ui%22) you are most interested in.
+
+Additionally, the MUI team conducts yearly [developer surveys](/blog/?tags=Developer+survey/), which also serve as key inputs for Joy UI's roadmap.
+Your participation is invaluable—keep an eye on MUI's social media to catch the next survey and help shape the future of this product!
+
+## Keeping track of the roadmap
+
+### Public GitHub project
+
+We use a GitHub project to track initiative prioritization across all MUI Core products, including Joy UI.
+We typically add tasks to the project board after discussing them internally.
+
+[**Visit the Joy UI project board** 👉](https://github.com/orgs/mui/projects/18/views/8)
+
+<img src="/static/joy-ui/roadmap/github-projects.png" style="width: 814px; margin-top: 4px; margin-bottom: 8px;" alt="A screenshot of the MUI Core GitHub project." width="1628" height="400" />
+
+### Milestones
+
+We also create milestones within the MUI Core repository (where Joy UI's code base is hosted) to keep track of larger cycles.
+Check it out to keep up with ongoing progress and see which issues have been picked up for the stable release.
+
+[**Visit the Joy UI milestones page** 👉](https://github.com/mui/material-ui/milestone/47)
+
+<img src="/static/joy-ui/roadmap/milestone.png" style="width: 814px; margin-top: 4px; margin-bottom: 8px;" alt="A screenshot from GitHub of the Joy UI stable release milestone." width="1628" height="400" />
diff --git a/docs/data/joy/getting-started/templates/rental-dashboard/App.tsx b/docs/data/joy/getting-started/templates/rental-dashboard/App.tsx
@@ -1,145 +1,98 @@
 import * as React from 'react';
 import { CssVarsProvider } from '@mui/joy/styles';
-import GlobalStyles from '@mui/joy/GlobalStyles';
 import CssBaseline from '@mui/joy/CssBaseline';
 import Box from '@mui/joy/Box';
-import Divider from '@mui/joy/Divider';
-import Grid from '@mui/joy/Grid';
 import Stack from '@mui/joy/Stack';
-import useScript from './useScript';
-import FirstSidebar from './components/FirstSidebar';
-import Header from './components/Header';
+
+import NavBar from './components/NavBar';
 import RentalCard from './components/RentalCard';
-import Main from './components/Main';
 import HeaderSection from './components/HeaderSection';
 import Search from './components/Search';
 import Filters from './components/Filters';
-import Toggles from './components/Toggles';
 import Pagination from './components/Pagination';
 
-const useEnhancedEffect =
-  typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
-
 export default function RentalDashboard() {
-  const status = useScript(`https://unpkg.com/feather-icons`);
-
-  useEnhancedEffect(() => {
-    // Feather icon setup: https://github.com/feathericons/feather#4-replace
-    // @ts-ignore
-    if (typeof feather !== 'undefined') {
-      // @ts-ignore
-      feather.replace();
-    }
-  }, [status]);
-
   return (
     <CssVarsProvider disableTransitionOnChange>
-      <GlobalStyles
-        styles={(theme) => ({
-          '[data-feather], .feather': {
-            color: `var(--Icon-color, ${theme.vars.palette.text.icon})`,
-            margin: 'var(--Icon-margin)',
-            fontSize: `var(--Icon-fontSize, ${theme.vars.fontSize.xl})`,
-            width: '1em',
-            height: '1em',
-          },
-        })}
-      />
       <CssBaseline />
-      <Box sx={{ display: 'flex', minHeight: '100dvh' }}>
-        <Header />
-        <FirstSidebar />
-        <Main>
-          <Grid
-            container
-            sx={{
-              width: '100%',
-              height: '100dvh',
+      <NavBar />
+      <Box
+        component="main"
+        sx={{
+          height: 'calc(100vh - 55px)', // 55px is the height of the NavBar
+          display: 'grid',
+          gridTemplateColumns: { xs: 'auto', md: '60% 40%' },
+          gridTemplateRows: 'auto 1fr auto',
+        }}
+      >
+        <Stack
+          sx={{
+            backgroundColor: 'background.surface',
+            px: { xs: 2, md: 4 },
+            py: 2,
+            borderBottom: '1px solid',
+            borderColor: 'divider',
+          }}
+        >
+          <HeaderSection />
+          <Search />
+        </Stack>
+
+        <Box
+          sx={{
+            gridRow: 'span 3',
+            display: { xs: 'none', md: 'flex' },
+            backgroundColor: 'background.level1',
+            backgroundSize: 'cover',
+            backgroundImage:
+              'url("https://images.unsplash.com/photo-1569336415962-a4bd9f69cd83?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=3731&q=80")',
+          }}
+        />
+
+        <Stack spacing={2} sx={{ px: { xs: 2, md: 4 }, pt: 2, minHeight: 0 }}>
+          <Filters />
+          <Stack spacing={2} sx={{ overflow: 'auto' }}>
+            <RentalCard
+              title="A Stylish Apt, 5 min walk to Queen Victoria Market"
+              category="Entire apartment rental in Collingwood"
+              rareFind
+              image="https://images.unsplash.com/photo-1568605114967-8130f3a36994?auto=format&fit=crop&w=400"
+            />
+            <RentalCard
+              title="Designer NY style loft"
+              category="Entire loft in central business district"
+              liked
+              image="https://images.unsplash.com/photo-1600596542815-ffad4c1539a9?auto=format&fit=crop&w=400"
+            />
+            <RentalCard
+              title="5 minute walk from University of Melbourne"
+              category="Entire rental unit in Carlton"
+              image="https://images.unsplash.com/photo-1537726235470-8504e3beef77?auto=format&fit=crop&w=400"
+            />
+            <RentalCard
+              title="Magnificent apartment next to public transport"
+              category="Entire apartment rental in Collingwood"
+              image="https://images.unsplash.com/photo-1618221195710-dd6b41faaea6?auto=format&fit=crop&w=400"
+            />
+            <RentalCard
+              title="Next to shoppng mall and public transport"
+              category="Entire apartment rental in Collingwood"
+              image="https://images.unsplash.com/photo-1582268611958-ebfd161ef9cf?auto=format&fit=crop&w=400"
+            />
+            <RentalCard
+              title="Endless ocean view"
+              category="A private room in a shared apartment in Docklands"
+              image="https://images.unsplash.com/photo-1564013799919-ab600027ffc6?auto=format&fit=crop&w=400"
+            />
+            <RentalCard
+              title="A Stylish Apt, 5 min walk to Queen Victoria Market"
+              category="one bedroom apartment in Collingwood"
+              image="https://images.unsplash.com/photo-1481437156560-3205f6a55735?auto=format&fit=crop&w=400"
+            />
+          </Stack>
+        </Stack>
 
-              margin: 0,
-            }}
-          >
-            <Grid
-              xs={12}
-              lg={8}
-              sx={{
-                overflowY: 'scroll',
-                height: '100%',
-                px: { xs: 2, md: 4 },
-                pt: { xs: 8, md: 4 },
-                pb: 5,
-              }}
-            >
-              <Stack spacing={2}>
-                <HeaderSection />
-                <Divider />
-                <Box
-                  sx={{
-                    width: '100%',
-                    height: 360,
-                    backgroundSize: 'cover',
-                    backgroundImage:
-                      'url("https://images.unsplash.com/photo-1478860409698-8707f313ee8b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=4000&q=80")',
-                  }}
-                  display={{ xs: 'block', md: 'none' }}
-                />
-                <Filters />
-                <Search />
-                <Toggles />
-                <RentalCard
-                  title="A Stylish Apt, 5 min walk to Queen Victoria Market"
-                  category="Entire apartment rental in Collingwood"
-                  rareFind
-                  image="https://images.unsplash.com/photo-1568605114967-8130f3a36994?auto=format&fit=crop&w=400"
-                />
-                <RentalCard
-                  title="Designer NY style loft"
-                  category="Entire loft in central business district"
-                  liked
-                  image="https://images.unsplash.com/photo-1600596542815-ffad4c1539a9?auto=format&fit=crop&w=400"
-                />
-                <RentalCard
-                  title="5 minute walk from University of Melbourne"
-                  category="Entire rental unit in Carlton"
-                  image="https://images.unsplash.com/photo-1537726235470-8504e3beef77?auto=format&fit=crop&w=400"
-                />
-                <RentalCard
-                  title="Magnificent apartment next to public transport"
-                  category="Entire apartment rental in Collingwood"
-                  image="https://images.unsplash.com/photo-1618221195710-dd6b41faaea6?auto=format&fit=crop&w=400"
-                />
-                <Divider />
-                <Pagination />
-              </Stack>
-            </Grid>
-            <Grid
-              xs={4}
-              sx={{
-                display: { xs: 'none', lg: 'block' },
-              }}
-            >
-              <Box
-                sx={{
-                  borderLeft: '1px solid',
-                  borderColor: 'divider',
-                  padding: 1.5,
-                  height: '100dvh',
-                }}
-              >
-                <Box
-                  sx={{
-                    backgroundColor: 'background.level1',
-                    height: '100%',
-                    borderRadius: 'sm',
-                    backgroundSize: 'cover',
-                    backgroundImage:
-                      'url("https://images.unsplash.com/photo-1478860409698-8707f313ee8b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=4000&q=80")',
-                  }}
-                />
-              </Box>
-            </Grid>
-          </Grid>
-        </Main>
+        <Pagination />
       </Box>
     </CssVarsProvider>
   );