Merge pull request #5 from lfernando2091/dev

Last Release

apps/react-m3/src/app/app-router.tsx

@@ -1,12 +1,38 @@
 import { Route, Routes } from 'react-router-dom';
 import { MainLayout } from './layout/MainLayout';
 import { EmptyPage, HomePage } from './pages';
+import { ButtonsPage } from './pages/buttons/ButtonsPage';
+import { SwitchPage } from './pages/switch/SwitchPage';
+import { CheckboxPage } from './pages/checkbox/CheckboxPage';
+import { TextFieldPage } from './pages/textfield/TextFieldPage';
+import { RadioButtonPage } from './pages/radio-button/RadioButtonPage';
+import { CardPage } from './pages/card/CardPage';
+import { BadgePage } from './pages/badge/BadgePage';
+import { AppBarPage } from './pages/app-bar/AppBarPage';
+import { ListPage } from './pages/list/ListPage';
+import { AccordionPage } from './pages/accordion/AccordionPage';
+import { AlertPage } from './pages/alert/AlertPage';
+import { TabsPage } from './pages/tabs/TabsPage';
+import { DividerPage } from './pages/divider/DividerPage';
 
 export const Router = () => {
   return (
     <Routes>
       <Route path="/" element={<MainLayout/>}>
         <Route index element={<HomePage/>}/>
+        <Route path="buttons" element={<ButtonsPage/>}/>
+        <Route path="switch" element={<SwitchPage/>}/>
+        <Route path="checkbox" element={<CheckboxPage/>}/>
+        <Route path="text-field" element={<TextFieldPage/>}/>
+        <Route path="radio-button" element={<RadioButtonPage/>}/>
+        <Route path="cards" element={<CardPage/>}/>
+        <Route path="badge" element={<BadgePage/>}/>
+        <Route path="app-bar" element={<AppBarPage/>}/>
+        <Route path="lists" element={<ListPage/>}/>
+        <Route path="accordion" element={<AccordionPage/>}/>
+        <Route path="alert" element={<AlertPage/>}/>
+        <Route path="tabs" element={<TabsPage/>}/>
+        <Route path="divider" element={<DividerPage/>}/>
         <Route path="empty" element={<EmptyPage/>}/>
       </Route>
     </Routes>

apps/react-m3/src/app/layout/MainContainer.tsx

@@ -7,7 +7,6 @@ export type MainContainerProps = {
 
 export const MainContainer = ({ children }: MainContainerProps) => {
   const theme = useTheme();
-  const isSmUp = useMediaQuery(theme.breakpoints.up('md'));
   const isSxUp = useMediaQuery(theme.breakpoints.up('sm'));
   const radiusTop = 30;
   const radiusBottom = isSxUp ? 25 : 0;
@@ -18,12 +17,11 @@ export const MainContainer = ({ children }: MainContainerProps) => {
     borderTopRightRadius: radiusTop,
     borderBottomLeftRadius: radiusBottom,
     borderBottomRightRadius: radiusBottom,
-    //m: isSxUp ? 2 : 0,
     height: isSxUp ? 'auto' : 1,
     mt: 0,
     mb: isSxUp ? 2 : 0,
     mr: isSxUp ? 2 : 0,
-    ml: isSxUp ? (isSmUp ? 0 : 2) : 0
+    ml: isSxUp ? 2 : 0
   };
 
   return (

apps/react-m3/src/app/layout/MainDrawer.tsx

@@ -10,33 +10,95 @@ import {
   Typography
 } from '@mui/material';
 
-import PeopleIcon from '@mui/icons-material/PeopleOutline';
-import PermMediaOutlinedIcon from '@mui/icons-material/PhotoSizeSelectActualOutlined';
-import PublicIcon from '@mui/icons-material/PublicOutlined';
-import SettingsEthernetIcon from '@mui/icons-material/SettingsEthernetOutlined';
-import SettingsInputComponentIcon from '@mui/icons-material/SettingsInputComponentOutlined';
 import HomeIcon from '@mui/icons-material/Home';
 import HomeIconOutlined from '@mui/icons-material/HomeOutlined';
+import NoteIcon from '@mui/icons-material/Note';
+import KeyboardCommandKeyIcon from '@mui/icons-material/KeyboardCommandKey';
+import ToggleOffIcon from '@mui/icons-material/ToggleOff';
+import CheckBoxIcon from '@mui/icons-material/CheckBox';
+import TextFieldsIcon from '@mui/icons-material/TextFields';
+import RadioButtonCheckedIcon from '@mui/icons-material/RadioButtonChecked';
+import ViewAgendaIcon from '@mui/icons-material/ViewAgenda';
+import MarkChatUnreadIcon from '@mui/icons-material/MarkChatUnread';
+import DragHandleIcon from '@mui/icons-material/DragHandle';
+import ListIcon from '@mui/icons-material/List';
+import ExpandIcon from '@mui/icons-material/Expand';
+import MessageIcon from '@mui/icons-material/Message';
+import TabIcon from '@mui/icons-material/Tab';
+import HorizontalRuleIcon from '@mui/icons-material/HorizontalRule';
 
 import { useEffect, useState } from 'react';
 import { useLocation, Link } from 'react-router-dom';
 
 const categories = [
   {
-    id: 'Build',
+    id: 'Components',
     children: [
       {
-        id: 'Authentication',
-        icon: <PeopleIcon />,
+        id: 'buttons',
+        icon: <KeyboardCommandKeyIcon />,
+        link: '/buttons'
       },
-      { id: 'Database', icon: <PeopleIcon /> },
-      { id: 'Storage', icon: <PermMediaOutlinedIcon /> },
-      { id: 'Hosting', icon: <PublicIcon /> },
-      { id: 'Functions', icon: <SettingsEthernetIcon /> },
       {
-        id: 'Machine learning',
-        icon: <SettingsInputComponentIcon />,
+        id: 'switch',
+        icon: <ToggleOffIcon />,
+        link: '/switch'
       },
+      {
+        id: 'checkbox',
+        icon: <CheckBoxIcon />,
+        link: '/checkbox'
+      },
+      {
+        id: 'text-field',
+        icon: <TextFieldsIcon />,
+        link: '/text-field'
+      },
+      {
+        id: 'radio-button',
+        icon: <RadioButtonCheckedIcon />,
+        link: '/radio-button'
+      },
+      {
+        id: 'cards',
+        icon: <ViewAgendaIcon />,
+        link: '/cards'
+      },
+      {
+        id: 'badge',
+        icon: <MarkChatUnreadIcon />,
+        link: '/badge'
+      },
+      {
+        id: 'app-bar',
+        icon: <DragHandleIcon />,
+        link: '/app-bar'
+      },
+      {
+        id: 'lists',
+        icon: <ListIcon />,
+        link: '/lists'
+      },
+      {
+        id: 'accordion',
+        icon: <ExpandIcon />,
+        link: '/accordion'
+      },
+      {
+        id: 'alert',
+        icon: <MessageIcon />,
+        link: '/alert'
+      },
+      {
+        id: 'tabs',
+        icon: <TabIcon />,
+        link: '/tabs'
+      },
+      {
+        id: 'divider',
+        icon: <HorizontalRuleIcon />,
+        link: '/divider'
+      }
     ],
   },
 ];
@@ -76,9 +138,9 @@ export const MainDrawer = (props: DrawerProps) => {
       </List>
         {categories.map(({ id, children }) => (
           <List key={id} subheader={<ListSubheader>{id}</ListSubheader>}>
-            {children.map(({ id: childId, icon }) => (
+            {children.map(({ id: childId, icon, link }) => (
               <ListItem key={childId}>
-                <ListItemButton selected={selectedIndex === childId} onClick={() => handleListItemClick(childId)}>
+                <ListItemButton component={Link} selected={selectedIndex === childId} to={link} onClick={() => handleListItemClick(childId)}>
                   <ListItemIcon>{icon}</ListItemIcon>
                   <ListItemText>{childId}</ListItemText>
                 </ListItemButton>

apps/react-m3/src/app/layout/MainLayout.tsx

@@ -51,7 +51,7 @@ export const MainLayout = () => {
       <Box sx={containerStyles}>
         <MainAppBar />
         <MainContainer>
-          <Outlet />
+          <Outlet/>
         </MainContainer>
       </Box>
     </Box>

apps/react-m3/src/app/pages/accordion/AccordionPage.tsx

@@ -0,0 +1,8 @@
+import { Stack } from '@mui/material';
+import { AccordionSection } from '../home/sections/AccordionSection';
+
+export const AccordionPage = () => {
+  return (<Stack spacing={6}>
+    <AccordionSection/>
+  </Stack>)
+}

apps/react-m3/src/app/pages/alert/AlertPage.tsx

@@ -0,0 +1,8 @@
+import { Stack } from '@mui/material';
+import { AlertSection } from '../home/sections/AlertSection';
+
+export const AlertPage = () => {
+  return (<Stack spacing={6}>
+    <AlertSection/>
+  </Stack>)
+}

apps/react-m3/src/app/pages/app-bar/AppBarPage.tsx

@@ -0,0 +1,8 @@
+import { Stack } from '@mui/material';
+import { AppBarSection } from '../home/sections/AppBarSection';
+
+export const AppBarPage = () => {
+  return (<Stack spacing={6}>
+    <AppBarSection/>
+  </Stack>)
+}

apps/react-m3/src/app/pages/badge/BadgePage.tsx

@@ -0,0 +1,8 @@
+import { Stack } from '@mui/material';
+import { BadgeSection } from '../home/sections/BadgeSection';
+
+export const BadgePage = () => {
+  return (<Stack spacing={6}>
+    <BadgeSection/>
+  </Stack>)
+}

apps/react-m3/src/app/pages/buttons/ButtonsPage.tsx

@@ -0,0 +1,14 @@
+import { ButtonSection } from '../home/sections/ButtonSection';
+import { IconButtonSection } from '../home/sections/IconButtonSection';
+import { ToggleButtonGroupSection } from '../home/sections/ToggleButtonGroupSection';
+import { FABSection } from '../home/sections/FABSection';
+import { Stack } from '@mui/material';
+
+export const ButtonsPage = () => {
+  return (<Stack spacing={6}>
+    <ButtonSection/>
+    <IconButtonSection/>
+    <ToggleButtonGroupSection/>
+    <FABSection/>
+  </Stack>)
+}

apps/react-m3/src/app/pages/card/CardPage.tsx

@@ -0,0 +1,10 @@
+import { CardSection } from '../home/sections/CardSection';
+import { PaperSection } from '../home/sections/PaperSection';
+import { Stack } from '@mui/material';
+
+export const CardPage = () => {
+  return (<Stack spacing={6}>
+    <CardSection/>
+    <PaperSection/>
+  </Stack>)
+}

apps/react-m3/src/app/pages/checkbox/CheckboxPage.tsx

@@ -0,0 +1,8 @@
+import { CheckboxSection } from '../home/sections/CheckboxSection';
+import { Stack } from '@mui/material';
+
+export const CheckboxPage = () => {
+  return (<Stack spacing={6}>
+    <CheckboxSection/>
+  </Stack>)
+}

apps/react-m3/src/app/pages/divider/DividerPage.tsx

@@ -0,0 +1,8 @@
+import { Stack } from '@mui/material';
+import { DividerSection } from '../home/sections/DividerSection';
+
+export const DividerPage = () => {
+  return (<Stack spacing={6}>
+    <DividerSection/>
+  </Stack>)
+}

apps/react-m3/src/app/pages/empty/EmptyPage.tsx

@@ -1,4 +1,5 @@
-
 export const EmptyPage = () => {
-  return (<>Empty page</>)
+  return (<>
+    No Content
+  </>)
 }