[joy-ui][docs] Fix h1 template (#40017)

mui · Nov 27, 2023 · c8138a1 · c8138a1
1 parent 553cf82
commit c8138a1
Show file tree

Hide file tree

Showing 63 changed files with 152 additions and 351 deletions.
diff --git a/docs/data/joy/getting-started/templates/email/App.tsx b/docs/data/joy/getting-started/templates/email/App.tsx
@@ -7,13 +7,11 @@ import Typography from '@mui/joy/Typography';
 import Button from '@mui/joy/Button';
 import Stack from '@mui/joy/Stack';
 
-// Icons import
 import CreateRoundedIcon from '@mui/icons-material/CreateRounded';
 import EmailRoundedIcon from '@mui/icons-material/EmailRounded';
 import PeopleAltRoundedIcon from '@mui/icons-material/PeopleAltRounded';
 import FolderRoundedIcon from '@mui/icons-material/FolderRounded';
 
-// custom
 import Layout from './components/Layout';
 import Navigation from './components/Navigation';
 import Mails from './components/Mails';
@@ -108,12 +106,7 @@ export default function EmailExample() {
               justifyContent: 'space-between',
             }}
           >
-            <Box
-              sx={{
-                alignItems: 'center',
-                gap: 1,
-              }}
-            >
+            <Box sx={{ alignItems: 'center', gap: 1 }}>
               <Typography level="title-lg" textColor="text.secondary">
                 My inbox
               </Typography>

diff --git a/docs/data/joy/getting-started/templates/email/components/EmailContent.tsx b/docs/data/joy/getting-started/templates/email/components/EmailContent.tsx
@@ -12,7 +12,6 @@ import Divider from '@mui/joy/Divider';
 import Avatar from '@mui/joy/Avatar';
 import Tooltip from '@mui/joy/Tooltip';
 
-// Icons import
 import DeleteRoundedIcon from '@mui/icons-material/DeleteRounded';
 import ForwardToInboxRoundedIcon from '@mui/icons-material/ForwardToInboxRounded';
 import FolderIcon from '@mui/icons-material/Folder';
@@ -171,7 +170,6 @@ export default function EmailContent() {
         >
           Details for our Yosemite Park hike
         </Typography>
-
         <Box
           sx={{
             mt: 1,
@@ -203,7 +201,6 @@ export default function EmailContent() {
             >
               to
             </Typography>
-
             <Tooltip size="sm" title="Copy email" variant="outlined">
               <Chip size="sm" variant="soft" color="primary" onClick={() => {}}>
                 [email protected]

diff --git a/docs/data/joy/getting-started/templates/email/components/Header.tsx b/docs/data/joy/getting-started/templates/email/components/Header.tsx
@@ -17,7 +17,6 @@ import Drawer from '@mui/joy/Drawer';
 import ModalClose from '@mui/joy/ModalClose';
 import DialogTitle from '@mui/joy/DialogTitle';
 
-// Icons import
 import SearchRoundedIcon from '@mui/icons-material/SearchRounded';
 import DarkModeRoundedIcon from '@mui/icons-material/DarkModeRounded';
 import LightModeRoundedIcon from '@mui/icons-material/LightModeRounded';
@@ -29,7 +28,6 @@ import OpenInNewRoundedIcon from '@mui/icons-material/OpenInNewRounded';
 import LogoutRoundedIcon from '@mui/icons-material/LogoutRounded';
 import MenuRoundedIcon from '@mui/icons-material/MenuRounded';
 
-// Custom
 import Navigation from './Navigation';
 
 function ColorSchemeToggle() {

diff --git a/docs/data/joy/getting-started/templates/email/components/Layout.tsx b/docs/data/joy/getting-started/templates/email/components/Layout.tsx
@@ -106,16 +106,16 @@ function Main(props: BoxProps) {
   );
 }
 
-function SideDrawer({
-  onClose,
-  ...props
-}: BoxProps & { onClose: React.MouseEventHandler<HTMLDivElement> }) {
+function SideDrawer(
+  props: BoxProps & { onClose: React.MouseEventHandler<HTMLDivElement> },
+) {
+  const { onClose, ...other } = props;
   return (
     <Box
-      {...props}
+      {...other}
       sx={[
         { position: 'fixed', zIndex: 1200, width: '100%', height: '100%' },
-        ...(Array.isArray(props.sx) ? props.sx : [props.sx]),
+        ...(Array.isArray(other.sx) ? other.sx : [other.sx]),
       ]}
     >
       <Box

diff --git a/docs/data/joy/getting-started/templates/email/components/Mails.tsx b/docs/data/joy/getting-started/templates/email/components/Mails.tsx
@@ -98,12 +98,10 @@ export default function EmailList() {
                       }}
                     />
                   </Box>
-
                   <Typography level="body-xs" textColor="text.tertiary">
                     {item.date}
                   </Typography>
                 </Box>
-
                 <div>
                   <Typography level="title-sm" sx={{ mb: 0.5 }}>
                     {item.title}

diff --git a/docs/data/joy/getting-started/templates/email/components/Navigation.tsx b/docs/data/joy/getting-started/templates/email/components/Navigation.tsx
@@ -7,7 +7,6 @@ import ListItemButton from '@mui/joy/ListItemButton';
 import ListItemDecorator from '@mui/joy/ListItemDecorator';
 import ListItemContent from '@mui/joy/ListItemContent';
 
-// Icons import
 import InboxRoundedIcon from '@mui/icons-material/InboxRounded';
 import OutboxRoundedIcon from '@mui/icons-material/OutboxRounded';
 import DraftsRoundedIcon from '@mui/icons-material/DraftsRounded';

diff --git a/docs/data/joy/getting-started/templates/email/components/WriteEmail.tsx b/docs/data/joy/getting-started/templates/email/components/WriteEmail.tsx
@@ -47,7 +47,6 @@ const WriteEmail = React.forwardRef<HTMLDivElement, WriteEmailProps>(
           <Typography level="title-sm">New message</Typography>
           <ModalClose id="close-icon" onClick={onClose} />
         </Box>
-
         <Box
           sx={{ display: 'flex', flexDirection: 'column', gap: 2, flexShrink: 0 }}
         >
@@ -59,9 +58,7 @@ const WriteEmail = React.forwardRef<HTMLDivElement, WriteEmailProps>(
             <FormLabel>CC</FormLabel>
             <Input placeholder="[email protected]" aria-label="Message" />
           </FormControl>
-
           <Input placeholder="Subject" aria-label="Message" />
-
           <FormControl sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
             <Textarea
               placeholder="Type your message here…"

diff --git a/docs/data/joy/getting-started/templates/files/App.tsx b/docs/data/joy/getting-started/templates/files/App.tsx
@@ -30,7 +30,6 @@ import Menu from '@mui/joy/Menu';
 import MenuButton from '@mui/joy/MenuButton';
 import MenuItem from '@mui/joy/MenuItem';
 
-// Icons import
 import FolderRoundedIcon from '@mui/icons-material/FolderRounded';
 import EditRoundedIcon from '@mui/icons-material/EditRounded';
 import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
@@ -41,7 +40,6 @@ import InsertDriveFileRoundedIcon from '@mui/icons-material/InsertDriveFileRound
 import ShareRoundedIcon from '@mui/icons-material/ShareRounded';
 import DeleteRoundedIcon from '@mui/icons-material/DeleteRounded';
 
-// custom
 import Layout from './components/Layout';
 import Navigation from './components/Navigation';
 import Header from './components/Header';
@@ -880,27 +878,22 @@ export default function FilesExample() {
                 <Typography level="body-sm" textColor="text.primary">
                   Image
                 </Typography>
-
                 <Typography level="title-sm">Size</Typography>
                 <Typography level="body-sm" textColor="text.primary">
                   3,6 MB (3,258,385 bytes)
                 </Typography>
-
                 <Typography level="title-sm">Location</Typography>
                 <Typography level="body-sm" textColor="text.primary">
                   Travel pictures
                 </Typography>
-
                 <Typography level="title-sm">Owner</Typography>
                 <Typography level="body-sm" textColor="text.primary">
                   Michael Scott
                 </Typography>
-
                 <Typography level="title-sm">Modified</Typography>
                 <Typography level="body-sm" textColor="text.primary">
                   26 October 2016
                 </Typography>
-
                 <Typography level="title-sm">Created</Typography>
                 <Typography level="body-sm" textColor="text.primary">
                   5 August 2016

diff --git a/docs/data/joy/getting-started/templates/files/components/Header.tsx b/docs/data/joy/getting-started/templates/files/components/Header.tsx
@@ -17,7 +17,6 @@ import Drawer from '@mui/joy/Drawer';
 import ModalClose from '@mui/joy/ModalClose';
 import DialogTitle from '@mui/joy/DialogTitle';
 
-// Icons import
 import SearchRoundedIcon from '@mui/icons-material/SearchRounded';
 import DarkModeRoundedIcon from '@mui/icons-material/DarkModeRounded';
 import LightModeRoundedIcon from '@mui/icons-material/LightModeRounded';
@@ -29,7 +28,6 @@ import OpenInNewRoundedIcon from '@mui/icons-material/OpenInNewRounded';
 import LogoutRoundedIcon from '@mui/icons-material/LogoutRounded';
 import MenuRoundedIcon from '@mui/icons-material/MenuRounded';
 
-// Custom
 import Navigation from './Navigation';
 
 function ColorSchemeToggle() {
@@ -139,7 +137,6 @@ export default function Header() {
           </Box>
         </Drawer>
       </Box>
-
       <Box
         sx={{
           display: 'flex',

diff --git a/docs/data/joy/getting-started/templates/files/components/Layout.tsx b/docs/data/joy/getting-started/templates/files/components/Layout.tsx
@@ -106,16 +106,16 @@ function Main(props: BoxProps) {
   );
 }
 
-function SideDrawer({
-  onClose,
-  ...props
-}: BoxProps & { onClose: React.MouseEventHandler<HTMLDivElement> }) {
+function SideDrawer(
+  props: BoxProps & { onClose: React.MouseEventHandler<HTMLDivElement> },
+) {
+  const { onClose, ...other } = props;
   return (
     <Box
-      {...props}
+      {...other}
       sx={[
         { position: 'fixed', zIndex: 1200, width: '100%', height: '100%' },
-        ...(Array.isArray(props.sx) ? props.sx : [props.sx]),
+        ...(Array.isArray(other.sx) ? other.sx : [other.sx]),
       ]}
     >
       <Box

diff --git a/docs/data/joy/getting-started/templates/files/components/Menu.tsx b/docs/data/joy/getting-started/templates/files/components/Menu.tsx
@@ -3,15 +3,12 @@ import JoyMenu, { MenuActions } from '@mui/joy/Menu';
 import MenuItem from '@mui/joy/MenuItem';
 import { ListActionTypes } from '@mui/base/useList';
 
-function Menu({
-  control,
-  menus,
-  id,
-}: {
+export default function Menu(props: {
   control: React.ReactElement;
   id: string;
   menus: Array<{ label: string } & { [k: string]: any }>;
 }) {
+  const { control, menus, id } = props;
   const [buttonElement, setButtonElement] = React.useState<HTMLButtonElement | null>(
     null,
   );
@@ -97,5 +94,3 @@ function Menu({
     </React.Fragment>
   );
 }
-
-export default Menu;
diff --git a/docs/data/joy/getting-started/templates/files/components/Navigation.tsx b/docs/data/joy/getting-started/templates/files/components/Navigation.tsx
@@ -7,7 +7,6 @@ import ListItemButton from '@mui/joy/ListItemButton';
 import ListItemDecorator from '@mui/joy/ListItemDecorator';
 import ListItemContent from '@mui/joy/ListItemContent';
 
-// Icons import
 import FolderRoundedIcon from '@mui/icons-material/FolderRounded';
 import ShareRoundedIcon from '@mui/icons-material/ShareRounded';
 import DeleteRoundedIcon from '@mui/icons-material/DeleteRounded';

diff --git a/docs/data/joy/getting-started/templates/files/components/TableFiles.tsx b/docs/data/joy/getting-started/templates/files/components/TableFiles.tsx
@@ -4,13 +4,10 @@ import AvatarGroup from '@mui/joy/AvatarGroup';
 import Typography from '@mui/joy/Typography';
 import Table from '@mui/joy/Table';
 
-// Icons import
 import FolderRoundedIcon from '@mui/icons-material/FolderRounded';
 import ArrowDropDownRoundedIcon from '@mui/icons-material/ArrowDropDownRounded';
 
-// custom
-
-function TableFiles() {
+export default function TableFiles() {
   return (
     <div>
       <Table
@@ -192,5 +189,3 @@ function TableFiles() {
     </div>
   );
 }
-
-export default TableFiles;
diff --git a/docs/data/joy/getting-started/templates/framesx-web-blocks/App.tsx b/docs/data/joy/getting-started/templates/framesx-web-blocks/App.tsx
@@ -1,11 +1,9 @@
 import * as React from 'react';
 import { CssVarsProvider, useColorScheme } from '@mui/joy/styles';
-
 import Box from '@mui/joy/Box';
 import CssBaseline from '@mui/joy/CssBaseline';
 import IconButton from '@mui/joy/IconButton';
 
-// Icons import
 import DarkModeRoundedIcon from '@mui/icons-material/DarkModeRounded';
 import LightModeRoundedIcon from '@mui/icons-material/LightModeRounded';
 

diff --git a/docs/data/joy/getting-started/templates/framesx-web-blocks/blocks/HeroLeft01.tsx b/docs/data/joy/getting-started/templates/framesx-web-blocks/blocks/HeroLeft01.tsx
@@ -29,7 +29,6 @@ export default function HeroLeft01() {
       <Typography>
         Already a member? <Link fontWeight="lg">Sign in</Link>
       </Typography>
-
       <Typography
         level="body-xs"
         sx={{

diff --git a/docs/data/joy/getting-started/templates/framesx-web-blocks/blocks/HeroLeft03.tsx b/docs/data/joy/getting-started/templates/framesx-web-blocks/blocks/HeroLeft03.tsx
@@ -62,7 +62,6 @@ export default function HeroLeft03() {
           designers and developers.
         </Typography>
       </Box>
-
       <Typography
         level="body-xs"
         sx={{

diff --git a/docs/data/joy/getting-started/templates/framesx-web-blocks/blocks/HeroLeft04.tsx b/docs/data/joy/getting-started/templates/framesx-web-blocks/blocks/HeroLeft04.tsx
@@ -45,7 +45,6 @@ export default function HeroLeft04() {
           Watch Video
         </Button>
       </Box>
-
       <Typography
         level="body-xs"
         sx={{

diff --git a/docs/data/joy/getting-started/templates/framesx-web-blocks/blocks/HeroLeft05.tsx b/docs/data/joy/getting-started/templates/framesx-web-blocks/blocks/HeroLeft05.tsx
@@ -39,7 +39,6 @@ export default function HeroLeft05() {
           <b>Privacy Policy</b>
         </Link>
       </Typography>
-
       <Typography
         level="body-xs"
         sx={{

diff --git a/docs/data/joy/getting-started/templates/framesx-web-blocks/blocks/HeroLeft06.tsx b/docs/data/joy/getting-started/templates/framesx-web-blocks/blocks/HeroLeft06.tsx
@@ -46,7 +46,6 @@ export default function HeroLeft06() {
       >
         <b>John Seed</b>, Apple Inc.
       </Typography>
-
       <Typography
         level="body-xs"
         sx={{

diff --git a/docs/data/joy/getting-started/templates/messages/components/AvatarWithStatus.tsx b/docs/data/joy/getting-started/templates/messages/components/AvatarWithStatus.tsx
@@ -6,10 +6,8 @@ type AvatarWithStatusProps = AvatarProps & {
   online?: boolean;
 };
 
-export default function AvatarWithStatus({
-  online = false,
-  ...rest
-}: AvatarWithStatusProps) {
+export default function AvatarWithStatus(props: AvatarWithStatusProps) {
+  const { online = false, ...other } = props;
   return (
     <div>
       <Badge
@@ -19,7 +17,7 @@ export default function AvatarWithStatus({
         anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
         badgeInset="4px 4px"
       >
-        <Avatar size="sm" {...rest} />
+        <Avatar size="sm" {...other} />
       </Badge>
     </div>
   );

diff --git a/docs/data/joy/getting-started/templates/messages/components/ChatBubble.tsx b/docs/data/joy/getting-started/templates/messages/components/ChatBubble.tsx
@@ -14,13 +14,8 @@ type ChatBubbleProps = MessageProps & {
   variant: 'sent' | 'received';
 };
 
-export default function ChatBubble({
-  content,
-  variant,
-  timestamp,
-  attachment = undefined,
-  sender,
-}: ChatBubbleProps) {
+export default function ChatBubble(props: ChatBubbleProps) {
+  const { content, variant, timestamp, attachment = undefined, sender } = props;
   const isSent = variant === 'sent';
   const [isHovered, setIsHovered] = React.useState<boolean>(false);
   const [isLiked, setIsLiked] = React.useState<boolean>(false);
@@ -117,7 +112,6 @@ export default function ChatBubble({
               >
                 {isLiked ? '❤️' : <FavoriteBorderIcon />}
               </IconButton>
-
               <IconButton
                 variant={isCelebrated ? 'soft' : 'plain'}
                 color={isCelebrated ? 'warning' : 'neutral'}

diff --git a/docs/data/joy/getting-started/templates/messages/components/ChatListItem.tsx b/docs/data/joy/getting-started/templates/messages/components/ChatListItem.tsx
@@ -19,13 +19,8 @@ type ChatListItemProps = ListItemButtonProps & {
   setSelectedChat: (chat: ChatProps) => void;
 };
 
-export default function ChatListItem({
-  id,
-  sender,
-  messages,
-  selectedChatId,
-  setSelectedChat,
-}: ChatListItemProps) {
+export default function ChatListItem(props: ChatListItemProps) {
+  const { id, sender, messages, selectedChatId, setSelectedChat } = props;
   const selected = selectedChatId === id;
   return (
     <React.Fragment>