[website] Add the Joy UI marketing page

docs/data/joy/components/alert/AlertUsage.js

@@ -1,10 +1,12 @@
 import * as React from 'react';
 import Alert from '@mui/joy/Alert';
 import JoyUsageDemo from 'docs/src/modules/components/JoyUsageDemo';
+import Diamond from '@mui/icons-material/Diamond';
 
-export default function AlertUsage() {
+export default function AlertUsage(inProps) {
   return (
     <JoyUsageDemo
+      {...inProps}
       componentName="Alert"
       data={[
         {
@@ -26,7 +28,9 @@ export default function AlertUsage() {
         },
       ]}
       renderDemo={(props) => (
-        <Alert {...props}>This is a Joy UI Alert — check it out!</Alert>
+        <Alert {...props} startDecorator={<Diamond />}>
+          This is a Joy UI Alert — check it out!
+        </Alert>
       )}
     />
   );

docs/data/joy/components/button/ButtonUsage.js

@@ -5,9 +5,10 @@ import IconButton from '@mui/joy/IconButton';
 import FavoriteBorder from '@mui/icons-material/FavoriteBorder';
 import JoyUsageDemo from 'docs/src/modules/components/JoyUsageDemo';
 
-export default function ButtonUsage() {
+export default function ButtonUsage(inProps) {
   return (
     <JoyUsageDemo
+      {...inProps}
       componentName="Button"
       data={[
         {
@@ -32,10 +33,15 @@ export default function ButtonUsage() {
           knob: 'switch',
           defaultValue: false,
         },
+        {
+          propName: 'loading',
+          knob: 'switch',
+          defaultValue: false,
+        },
         { propName: 'onClick', defaultValue: () => {} },
       ]}
       renderDemo={(props) => (
-        <Box sx={{ display: 'flex', gap: 2 }}>
+        <Box sx={{ display: 'flex', gap: 1 }}>
           <Button startDecorator={<FavoriteBorder />} {...props}>
             Hello world
           </Button>

docs/data/joy/components/input/InputUsage.js

@@ -2,9 +2,10 @@ import * as React from 'react';
 import Input from '@mui/joy/Input';
 import JoyUsageDemo from 'docs/src/modules/components/JoyUsageDemo';
 
-export default function InputUsage() {
+export default function InputUsage(inProps) {
   return (
     <JoyUsageDemo
+      {...inProps}
       componentName="Input"
       data={[
         {

docs/data/joy/components/menu/MenuUsage.js

@@ -7,20 +7,21 @@ import ListDivider from '@mui/joy/ListDivider';
 import Dropdown from '@mui/joy/Dropdown';
 import JoyUsageDemo from 'docs/src/modules/components/JoyUsageDemo';
 
-export default function MenuUsage() {
+export default function MenuUsage(inProps) {
   return (
     <JoyUsageDemo
+      {...inProps}
       componentName="Menu"
       data={[
         {
           propName: 'menuButtonVariant',
-          knob: 'select',
+          knob: 'radio',
           defaultValue: 'outlined',
           options: ['plain', 'outlined', 'soft', 'solid'],
         },
         {
           propName: 'menuVariant',
-          knob: 'select',
+          knob: 'radio',
           defaultValue: 'outlined',
           options: ['plain', 'outlined', 'soft', 'solid'],
         },

docs/data/joy/components/radio-button/RadioUsage.js

@@ -5,9 +5,10 @@ import RadioGroup from '@mui/joy/RadioGroup';
 import Radio from '@mui/joy/Radio';
 import JoyUsageDemo from 'docs/src/modules/components/JoyUsageDemo';
 
-export default function RadioUsage() {
+export default function RadioUsage(inProps) {
   return (
     <JoyUsageDemo
+      {...inProps}
       componentName="Radio"
       data={[
         {

docs/data/joy/components/select/SelectUsage.js

@@ -3,11 +3,12 @@ import Select from '@mui/joy/Select';
 import Option from '@mui/joy/Option';
 import JoyUsageDemo from 'docs/src/modules/components/JoyUsageDemo';
 
-export default function SelectUsage() {
+export default function SelectUsage(inProps) {
   const [value, setValue] = React.useState(null);
   const action = React.useRef(null);
   return (
     <JoyUsageDemo
+      {...inProps}
       componentName="Select"
       data={[
         {

docs/data/joy/components/slider/SliderUsage.js

@@ -3,9 +3,10 @@ import Box from '@mui/joy/Box';
 import Slider from '@mui/joy/Slider';
 import JoyUsageDemo from 'docs/src/modules/components/JoyUsageDemo';
 
-export default function SliderUsage() {
+export default function SliderUsage(inProps) {
   return (
     <JoyUsageDemo
+      {...inProps}
       componentName="Slider"
       data={[
         {

docs/data/joy/components/tabs/TabsUsage.js

@@ -4,12 +4,12 @@ import TabList from '@mui/joy/TabList';
 import Tab from '@mui/joy/Tab';
 import TabPanel from '@mui/joy/TabPanel';
 import JoyUsageDemo from 'docs/src/modules/components/JoyUsageDemo';
-import Apps from '@mui/icons-material/Apps';
 
-export default function TabsUsage() {
+export default function TabsUsage(inProps) {
   const [index, setIndex] = React.useState(0);
   return (
     <JoyUsageDemo
+      {...inProps}
       componentName="Tabs"
       data={[
         {
@@ -40,7 +40,7 @@ export default function TabsUsage() {
           defaultValue: 'horizontal',
         },
         {
-          formLabel: 'Disable TabList underline',
+          formLabel: 'Disable Tab List underline',
           propName: 'disableUnderline',
           knob: 'switch',
           defaultValue: false,
@@ -109,7 +109,6 @@ export default function TabsUsage() {
               disableIndicator={disableIndicator}
               {...(index === 0 && { color, variant })}
             >
-              <Apps />
               Tab A
             </Tab>
             <Tab
@@ -127,9 +126,9 @@ export default function TabsUsage() {
               Tab C
             </Tab>
           </TabList>
-          <TabPanel value={0}>Content of Tab A</TabPanel>
-          <TabPanel value={1}>Content of Tab B</TabPanel>
-          <TabPanel value={2}>Content of Tab C</TabPanel>
+          <TabPanel value={0}>Tab A</TabPanel>
+          <TabPanel value={1}>Tab B</TabPanel>
+          <TabPanel value={2}>Tab C</TabPanel>
         </Tabs>
       )}
     />

docs/data/joy/getting-started/templates/email/App.tsx

@@ -51,10 +51,10 @@ function ColorSchemeToggle() {
   );
 }
 
-export default function EmailExample() {
+export default function EmailExample(props: any) {
   const [drawerOpen, setDrawerOpen] = React.useState(false);
   return (
-    <CssVarsProvider disableTransitionOnChange>
+    <CssVarsProvider disableTransitionOnChange {...props}>
       <CssBaseline />
       {drawerOpen && (
         <Layout.SideDrawer onClose={() => setDrawerOpen(false)}>

docs/data/joy/getting-started/templates/email/components/Layout.tsx

@@ -11,8 +11,8 @@ function Root(props: BoxProps) {
           display: 'grid',
           gridTemplateColumns: {
             xs: '1fr',
-            sm: 'minmax(64px, 200px) minmax(450px, 1fr)',
-            md: 'minmax(160px, 300px) minmax(300px, 500px) minmax(500px, 1fr)',
+            sm: 'minmax(192px, 240px) minmax(450px, 1fr)',
+            md: 'minmax(200px, 300px) minmax(300px, 500px) minmax(500px, 1fr)',
           },
           gridTemplateRows: '64px 1fr',
           minHeight: '100vh',

docs/data/joy/getting-started/templates/email/components/Navigation.tsx

@@ -18,7 +18,7 @@ import KeyboardArrowDownRoundedIcon from '@mui/icons-material/KeyboardArrowDownR
 
 export default function EmailNav() {
   return (
-    <List size="sm" sx={{ '--ListItem-radius': '8px' }}>
+    <List size="sm" sx={(theme) => ({ '--ListItem-radius': theme.vars.radius.md })}>
       <ListItem nested>
         <ListSubheader>
           Browse

docs/data/joy/getting-started/templates/files/App.tsx

@@ -69,10 +69,10 @@ function ColorSchemeToggle() {
   );
 }
 
-export default function FilesExample() {
+export default function FilesExample(props: any) {
   const [drawerOpen, setDrawerOpen] = React.useState(false);
   return (
-    <CssVarsProvider disableTransitionOnChange>
+    <CssVarsProvider disableTransitionOnChange {...props}>
       <CssBaseline />
       {drawerOpen && (
         <Layout.SideDrawer onClose={() => setDrawerOpen(false)}>
@@ -81,11 +81,6 @@ export default function FilesExample() {
       )}
       <Layout.Root
         sx={{
-          gridTemplateColumns: {
-            xs: '1fr',
-            sm: 'minmax(64px, 200px) minmax(450px, 1fr)',
-            md: 'minmax(160px, 300px) minmax(600px, 1fr) minmax(300px, 420px)',
-          },
           ...(drawerOpen && {
             height: '100vh',
             overflow: 'hidden',
@@ -205,7 +200,7 @@ export default function FilesExample() {
           >
             <Sheet
               variant="outlined"
-              sx={{ borderRadius: 'sm', gridColumn: '1/-1' }}
+              sx={{ borderRadius: 'sm', gridColumn: '1/-1', overflow: 'auto' }}
             >
               <Table
                 sx={{
@@ -460,7 +455,7 @@ export default function FilesExample() {
                   borderColor: 'neutral.outlinedBorder',
                 }}
               >
-                <AspectRatio ratio="16/9" color="primary">
+                <AspectRatio ratio="16/9" color="primary" maxHeight={160}>
                   <Typography
                     sx={{
                       display: 'flex',
@@ -537,7 +532,7 @@ export default function FilesExample() {
                   borderColor: 'neutral.outlinedBorder',
                 }}
               >
-                <AspectRatio ratio="16/9" color="primary">
+                <AspectRatio ratio="16/9" color="primary" maxHeight={160}>
                   <Typography
                     sx={{
                       display: 'flex',
@@ -566,7 +561,7 @@ export default function FilesExample() {
         </Layout.Main>
         <Sheet
           sx={{
-            display: { xs: 'none', sm: 'initial' },
+            display: { xs: 'none', md: 'initial' },
             borderLeft: '1px solid',
             borderColor: 'neutral.outlinedBorder',
           }}

docs/data/joy/getting-started/templates/files/components/Layout.tsx

@@ -11,8 +11,8 @@ function Root(props: BoxProps) {
           display: 'grid',
           gridTemplateColumns: {
             xs: '1fr',
-            sm: 'minmax(64px, 200px) minmax(450px, 1fr)',
-            md: 'minmax(160px, 300px) minmax(300px, 500px) minmax(500px, 1fr)',
+            sm: 'minmax(192px, 240px) minmax(450px, 1fr)',
+            md: 'minmax(200px, 300px) minmax(600px, 1fr) minmax(300px, 420px)',
           },
           gridTemplateRows: '64px 1fr',
           minHeight: '100vh',
@@ -114,7 +114,14 @@ function SideDrawer({
     <Box
       {...props}
       sx={[
-        { position: 'fixed', zIndex: 1200, width: '100%', height: '100%' },
+        {
+          position: 'fixed',
+          zIndex: 1200,
+          width: '100%',
+          height: '100%',
+          top: 0,
+          left: 0,
+        },
         ...(Array.isArray(props.sx) ? props.sx : [props.sx]),
       ]}
     >

docs/data/joy/getting-started/templates/files/components/Navigation.tsx

@@ -16,7 +16,13 @@ import DeleteRoundedIcon from '@mui/icons-material/DeleteRounded';
 
 export default function Navigation() {
   return (
-    <List size="sm" sx={{ '--ListItem-radius': '8px', '--List-gap': '4px' }}>
+    <List
+      size="sm"
+      sx={(theme) => ({
+        '--ListItem-radius': theme.vars.radius.md,
+        '--List-gap': '4px',
+      })}
+    >
       <ListItem nested>
         <ListSubheader>
           Browse

docs/data/joy/getting-started/templates/framesx-web-blocks/App.tsx

@@ -57,9 +57,9 @@ function ColorSchemeToggle() {
   );
 }
 
-export default function TeamExample() {
+export default function TeamExample(props: any) {
   return (
-    <CssVarsProvider disableTransitionOnChange theme={framesxTheme}>
+    <CssVarsProvider disableTransitionOnChange theme={framesxTheme} {...props}>
       <CssBaseline />
       <ColorSchemeToggle />
       <Box

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

@@ -6,13 +6,26 @@ import Sidebar from './components/Sidebar';
 import Header from './components/Header';
 import MyMessages from './components/MyMessages';
 
-export default function JoyMessagesTemplate() {
+type PropsOf<T> = T extends React.ComponentType<infer P> ? P : never;
+
+export default function JoyMessagesTemplate({
+  disableCssReset = false,
+  ...props
+}: {
+  disableCssReset?: boolean;
+} & PropsOf<typeof CssVarsProvider>) {
   return (
-    <CssVarsProvider disableTransitionOnChange>
-      <CssBaseline />
-      <Box sx={{ display: 'flex', minHeight: '100dvh' }}>
-        <Sidebar />
+    <CssVarsProvider disableTransitionOnChange {...props}>
+      {!disableCssReset && <CssBaseline />}
+      <Box
+        sx={{
+          '--screen-height': '100dvh',
+          display: 'flex',
+          height: 'var(--screen-height)',
+        }}
+      >
         <Header />
+        <Sidebar />
         <Box component="main" className="MainContent" sx={{ flex: 1 }}>
           <MyMessages />
         </Box>

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

@@ -73,17 +73,13 @@ export default function ChatBubble({
               borderRadius: 'lg',
               borderTopRightRadius: isSent ? 0 : 'lg',
               borderTopLeftRadius: isSent ? 'lg' : 0,
-              backgroundColor: isSent
-                ? 'var(--joy-palette-primary-solidBg)'
-                : 'background.body',
+              backgroundColor: isSent ? 'primary.solidBg' : 'background.body',
             }}
           >
             <Typography
               level="body-sm"
               sx={{
-                color: isSent
-                  ? 'var(--joy-palette-common-white)'
-                  : 'var(--joy-palette-text-primary)',
+                color: isSent ? 'common.white' : 'text.primary',
               }}
             >
               {content}

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

@@ -23,7 +23,10 @@ export default function MessagesPane({ chat }: MessagesPaneProps) {
   return (
     <Sheet
       sx={{
-        height: { xs: 'calc(100dvh - var(--Header-height))', lg: '100dvh' },
+        height: {
+          xs: 'calc(var(--screen-height) - var(--Header-height))',
+          lg: 'var(--screen-height)',
+        },
         display: 'flex',
         flexDirection: 'column',
         backgroundColor: 'background.level1',