Add better defaults for theme swapping support

etn-ccis · Dec 14, 2023 · 7959135 · 7959135
1 parent 14544cc
commit 7959135
Show file tree

Hide file tree

Showing 17 changed files with 51 additions and 25 deletions.
diff --git a/components/src/core/Drawer/DrawerNavItem/DrawerNavItem.tsx b/components/src/core/Drawer/DrawerNavItem/DrawerNavItem.tsx
@@ -254,6 +254,8 @@ const DrawerNavItemRender: React.ForwardRefRenderFunction<HTMLElement, DrawerNav
         style,
     } = props;
 
+    console.log(`activeItemBackgroundColor: "${activeItemBackgroundColor}"`);
+
     const [expanded, setExpanded] = useState(isInActiveTree);
     const active: boolean = activeItem === itemID;
     const hasAction = Boolean(onItemSelect || onClick || (items && items.length > 0) || Boolean(children));

diff --git a/docs/src/componentDocs/AppBar/playground/PlaygroundPage.tsx b/docs/src/componentDocs/AppBar/playground/PlaygroundPage.tsx
@@ -12,7 +12,7 @@ import Stack from '@mui/material/Stack';
 import { AppBar, AppBarProps } from '@brightlayer-ui/react-components';
 import Toolbar from '@mui/material/Toolbar';
 import Typography from '@mui/material/Typography';
-import { getBodyFiller, getImage } from '../../../shared';
+import { getBodyFiller, getImage, removeEmptyProps } from '../../../shared';
 
 const inputConfig: InputConfig = [
     // Required Props
@@ -115,7 +115,7 @@ const AppBarPreview: PreviewComponent = ({ data }) => {
                 }}
             >
                 <AppBar
-                    {...rest}
+                    {...removeEmptyProps(rest)}
                     backgroundImage={getImage(backgroundImage as string)}
                     scrollContainerId={SCROLL_CONTAINER_ID}
                 >

diff --git a/docs/src/componentDocs/ChannelValue/playground/PlaygroundPage.tsx b/docs/src/componentDocs/ChannelValue/playground/PlaygroundPage.tsx
@@ -10,7 +10,7 @@ import {
     getPropsMapping,
     Playground,
 } from '@brightlayer-ui/react-doc-components';
-import { getIcon, getIconSnippetWithProps } from '../../../shared';
+import { getIcon, getIconSnippetWithProps, removeEmptyProps } from '../../../shared';
 
 const inputConfig: InputConfig = [
     // Required Props
@@ -113,7 +113,11 @@ const ChannelValuePreview: PreviewComponent = ({ data }) => {
 
     return (
         <Stack alignItems={'center'} justifyContent={'center'} sx={{ width: '100%', height: '100%' }}>
-            <ChannelValue {...rest} icon={getIcon(icon as unknown as string, { htmlColor: htmlColor || 'inherit' })} />
+            <ChannelValue
+                {...removeEmptyProps(rest)}
+                value={rest.value}
+                icon={getIcon(icon as unknown as string, { htmlColor: htmlColor || 'inherit' })}
+            />
         </Stack>
     );
 };

diff --git a/docs/src/componentDocs/Drawer/playground/PlaygroundPage.tsx b/docs/src/componentDocs/Drawer/playground/PlaygroundPage.tsx
@@ -30,7 +30,7 @@ import Toolbar from '@mui/material/Toolbar';
 import IconButton from '@mui/material/IconButton';
 import Typography from '@mui/material/Typography';
 import { sharedPropsConfig } from './sharedPropsConfig';
-import { getIcon, getIconSnippetWithProps } from '../../../shared';
+import { getIcon, getIconSnippetWithProps, removeEmptyProps } from '../../../shared';
 
 const inputConfig: InputConfig = [
     // Required Props
@@ -217,7 +217,7 @@ const DrawerPreview: PreviewComponent = ({ data }) => {
                         },
                         '& .BluiDrawer-content': { backgroundColor: 'background.paper' },
                     }}
-                    {...rest}
+                    {...removeEmptyProps(rest)}
                 >
                     {temporary && (
                         <DrawerHeader

diff --git a/docs/src/componentDocs/DrawerFooter/playground/PlaygroundPage.tsx b/docs/src/componentDocs/DrawerFooter/playground/PlaygroundPage.tsx
@@ -23,6 +23,7 @@ import NotificationsActive from '@mui/icons-material/NotificationsActive';
 import Person from '@mui/icons-material/Person';
 import Today from '@mui/icons-material/Today';
 import Accessibility from '@mui/icons-material/Accessibility';
+import { removeEmptyProps } from '../../../shared';
 
 const inputConfig: InputConfig = [
     // Required Props
@@ -88,7 +89,7 @@ const DrawerFooterPreview: PreviewComponent = ({ data }) => {
                         />
                     </DrawerNavGroup>
                 </DrawerBody>
-                <DrawerFooter {...rest}>
+                <DrawerFooter {...removeEmptyProps(rest)}>
                     <Box sx={{ p: 2 }}>Footer Content Here</Box>
                 </DrawerFooter>
             </Drawer>

diff --git a/docs/src/componentDocs/DrawerHeader/playground/PlaygroundPage.tsx b/docs/src/componentDocs/DrawerHeader/playground/PlaygroundPage.tsx
@@ -21,7 +21,7 @@ import NotificationsActive from '@mui/icons-material/NotificationsActive';
 import Person from '@mui/icons-material/Person';
 import Today from '@mui/icons-material/Today';
 import Accessibility from '@mui/icons-material/Accessibility';
-import { getIcon, getIconSnippetWithProps, getImage } from '../../../shared';
+import { getIcon, getIconSnippetWithProps, getImage, removeEmptyProps } from '../../../shared';
 
 const inputConfig: InputConfig = [
     // Required Props
@@ -119,7 +119,7 @@ const DrawerHeaderPreview: PreviewComponent = ({ data }) => {
         <Stack alignItems={'center'} justifyContent={'center'} sx={{ width: '100%', height: '100%' }}>
             <Drawer noLayout open={true} sx={{ minHeight: 'unset' }}>
                 <DrawerHeader
-                    {...rest}
+                    {...removeEmptyProps(rest)}
                     icon={getIcon(icon as string)}
                     backgroundImage={getImage(backgroundImage as string)}
                 ></DrawerHeader>

diff --git a/docs/src/componentDocs/DrawerNavGroup/playground/PlaygroundPage.tsx b/docs/src/componentDocs/DrawerNavGroup/playground/PlaygroundPage.tsx
@@ -24,7 +24,7 @@ import Toc from '@mui/icons-material/Toc';
 import Devices from '@mui/icons-material/Devices';
 import AirportShuttle from '@mui/icons-material/AirportShuttle';
 import { sharedPropsConfig } from '../../Drawer/playground/sharedPropsConfig';
-import { getIcon, getIconSnippetWithProps } from '../../../shared';
+import { getIcon, getIconSnippetWithProps, removeEmptyProps } from '../../../shared';
 
 const inputConfig: InputConfig = [
     // Required Props
@@ -124,7 +124,7 @@ const DrawerNavGroupPreview: PreviewComponent = ({ data }) => {
                             items={navGroupItems}
                             collapseIcon={getIcon(collapseIcon)}
                             expandIcon={getIcon(expandIcon)}
-                            {...rest}
+                            {...removeEmptyProps(rest)}
                         />
                     </DrawerBody>
                 </Drawer>

diff --git a/docs/src/componentDocs/DrawerSubheader/playground/PlaygroundPage.tsx b/docs/src/componentDocs/DrawerSubheader/playground/PlaygroundPage.tsx
@@ -23,6 +23,7 @@ import NotificationsActive from '@mui/icons-material/NotificationsActive';
 import Person from '@mui/icons-material/Person';
 import Today from '@mui/icons-material/Today';
 import Accessibility from '@mui/icons-material/Accessibility';
+import { removeEmptyProps } from '../../../shared';
 
 const inputConfig: InputConfig = [
     // Required Props
@@ -68,7 +69,7 @@ const DrawerSubheaderPreview: PreviewComponent = ({ data }) => {
             <Drawer noLayout open={open} sx={{ minHeight: 'unset' }}>
                 <DrawerHeader icon={<Menu />} title={'Subheader Demo'} subtitle={'See the DrawerSubheader below'} />
 
-                <DrawerSubheader {...rest}>
+                <DrawerSubheader {...removeEmptyProps(rest)}>
                     <Box sx={{ p: 2 }}>Subheader Content Here</Box>
                 </DrawerSubheader>
                 <DrawerBody sx={{ flex: '1 1 auto' }}>

diff --git a/docs/src/componentDocs/EmptyState/playground/PlaygroundPage.tsx b/docs/src/componentDocs/EmptyState/playground/PlaygroundPage.tsx
@@ -12,7 +12,7 @@ import Stack from '@mui/material/Stack';
 import { EmptyState, EmptyStateProps } from '@brightlayer-ui/react-components';
 import Add from '@mui/icons-material/Add';
 import Button from '@mui/material/Button';
-import { getIcon, getIconSnippetWithProps } from '../../../shared';
+import { getIcon, getIconSnippetWithProps, removeEmptyProps } from '../../../shared';
 
 const inputConfig: InputConfig = [
     // Required Props
@@ -65,7 +65,8 @@ const EmptyStatePreview: PreviewComponent = ({ data }) => {
     return (
         <Stack alignItems={'center'} justifyContent={'center'} sx={{ width: '100%', height: '100%' }}>
             <EmptyState
-                {...rest}
+                {...removeEmptyProps(rest)}
+                title={rest.title}
                 icon={getIcon(icon as unknown as string, { fontSize: 'inherit' })}
                 actions={
                     showAction ? (

diff --git a/docs/src/componentDocs/Hero/playground/PlaygroundPage.tsx b/docs/src/componentDocs/Hero/playground/PlaygroundPage.tsx
@@ -10,7 +10,7 @@ import {
 } from '@brightlayer-ui/react-doc-components';
 import Stack from '@mui/material/Stack';
 import { ChannelValueProps, Hero, HeroProps } from '@brightlayer-ui/react-components';
-import { getIcon, getIconSnippetWithProps } from '../../../shared';
+import { getIcon, getIconSnippetWithProps, removeEmptyProps } from '../../../shared';
 
 const inputConfig: InputConfig = [
     // Required Props
@@ -119,7 +119,8 @@ const HeroPreview: PreviewComponent = ({ data }) => {
         <Stack alignItems={'center'} justifyContent={'center'} sx={{ width: '100%', height: '100%' }}>
             <Box>
                 <Hero
-                    {...rest}
+                    {...removeEmptyProps(rest)}
+                    label={rest.label}
                     icon={getIcon(icon as unknown as string, {
                         fontSize: 'inherit',
                         htmlColor: htmlColor || 'inherit',

diff --git a/docs/src/componentDocs/InfoListItem/playground/PlaygroundPage.tsx b/docs/src/componentDocs/InfoListItem/playground/PlaygroundPage.tsx
@@ -10,7 +10,7 @@ import {
 } from '@brightlayer-ui/react-doc-components';
 import Stack from '@mui/material/Stack';
 import { InfoListItem, InfoListItemProps } from '@brightlayer-ui/react-components';
-import { getIcon, getIconSnippetWithProps } from '../../../shared';
+import { getIcon, getIconSnippetWithProps, removeEmptyProps } from '../../../shared';
 
 const inputConfig: InputConfig = [
     // Required Props
@@ -224,7 +224,8 @@ const InfoListItemPreview: PreviewComponent = ({ data }) => {
     return (
         <Stack alignItems={'center'} justifyContent={'center'} sx={{ width: '100%', height: '100%' }}>
             <InfoListItem
-                {...rest}
+                {...removeEmptyProps(rest)}
+                title={rest.title}
                 sx={{ maxWidth: 700 }}
                 onClick={clickable ? (): void => {} : undefined}
                 icon={getIcon(icon as unknown as string)}

diff --git a/docs/src/componentDocs/ListItemTag/playground/PlaygroundPage.tsx b/docs/src/componentDocs/ListItemTag/playground/PlaygroundPage.tsx
@@ -10,6 +10,7 @@ import {
 } from '@brightlayer-ui/react-doc-components';
 import Stack from '@mui/material/Stack';
 import { ListItemTag, ListItemTagProps } from '@brightlayer-ui/react-components';
+import { removeEmptyProps } from '../../../shared';
 
 const inputConfig: InputConfig = [
     // Required Props
@@ -51,7 +52,7 @@ const ListItemTagPreview: PreviewComponent = ({ data }) => {
     const { ...rest } = data as unknown as ListItemTagProps;
     return (
         <Stack alignItems={'center'} justifyContent={'center'} sx={{ width: '100%', height: '100%' }}>
-            <ListItemTag {...rest} />
+            <ListItemTag {...removeEmptyProps(rest)} label={rest.label} />
         </Stack>
     );
 };

diff --git a/docs/src/componentDocs/ScoreCard/playground/PlaygroundPage.tsx b/docs/src/componentDocs/ScoreCard/playground/PlaygroundPage.tsx
@@ -20,7 +20,7 @@ import Mail from '@mui/icons-material/Mail';
 import MoreVert from '@mui/icons-material/MoreVert';
 import Favorite from '@mui/icons-material/Favorite';
 import { Temp, Moisture } from '@brightlayer-ui/icons-mui';
-import { getImage } from '../../../shared';
+import { getImage, removeEmptyProps } from '../../../shared';
 
 const inputConfig: InputConfig = [
     // Required Props
@@ -156,7 +156,8 @@ const ScoreCardPreview: PreviewComponent = ({ data }) => {
         <Stack alignItems={'center'} justifyContent={'center'} sx={{ width: '100%', height: '100%' }}>
             <Box>
                 <ScoreCard
-                    {...rest}
+                    {...removeEmptyProps(rest)}
+                    headerTitle={rest.headerTitle}
                     headerBackgroundImage={getImage(headerBackgroundImage || '')}
                     actionItems={[
                         <Search key={'search'} />,

diff --git a/docs/src/componentDocs/ThreeLiner/playground/PlaygroundPage.tsx b/docs/src/componentDocs/ThreeLiner/playground/PlaygroundPage.tsx
@@ -10,6 +10,7 @@ import {
 } from '@brightlayer-ui/react-doc-components';
 import Stack from '@mui/material/Stack';
 import { ThreeLiner, ThreeLinerProps } from '@brightlayer-ui/react-components';
+import { removeEmptyProps } from '../../../shared';
 
 const inputConfig: InputConfig = [
     // Required Props
@@ -52,7 +53,7 @@ const ThreeLinerPreview: PreviewComponent = ({ data }) => {
     const { ...rest } = data as unknown as ThreeLinerProps;
     return (
         <Stack alignItems={'center'} justifyContent={'center'} sx={{ width: '100%', height: '100%' }}>
-            <ThreeLiner {...rest} />
+            <ThreeLiner {...removeEmptyProps(rest)} />
         </Stack>
     );
 };

diff --git a/docs/src/componentDocs/ToolbarMenu/playground/PlaygroundPage.tsx b/docs/src/componentDocs/ToolbarMenu/playground/PlaygroundPage.tsx
@@ -10,7 +10,7 @@ import {
 } from '@brightlayer-ui/react-doc-components';
 import Stack from '@mui/material/Stack';
 import { ToolbarMenu, ToolbarMenuProps } from '@brightlayer-ui/react-components';
-import { getIcon, getIconSnippetWithProps } from '../../../shared';
+import { getIcon, getIconSnippetWithProps, removeEmptyProps } from '../../../shared';
 
 const inputConfig: InputConfig = [
     // Required Props
@@ -46,7 +46,8 @@ const ToolbarMenuPreview: PreviewComponent = ({ data }) => {
     return (
         <Stack alignItems={'center'} justifyContent={'center'} sx={{ width: '100%', height: '100%' }}>
             <ToolbarMenu
-                {...rest}
+                {...removeEmptyProps(rest)}
+                label={rest.label}
                 icon={getIcon(icon as unknown as string)}
                 menuGroups={[
                     {

diff --git a/docs/src/componentDocs/UserMenu/playground/PlaygroundPage.tsx b/docs/src/componentDocs/UserMenu/playground/PlaygroundPage.tsx
@@ -15,6 +15,7 @@ import trex from '../images/trex.png';
 import Email from '@mui/icons-material/Email';
 import ExitToApp from '@mui/icons-material/ExitToApp';
 import Settings from '@mui/icons-material/Settings';
+import { removeEmptyProps } from '../../../shared';
 
 const inputConfig: InputConfig = [
     // Required Props
@@ -72,7 +73,7 @@ const UserMenuPreview: PreviewComponent = ({ data }) => {
     return (
         <Stack alignItems={'center'} justifyContent={'center'} sx={{ width: '100%', height: '100%' }}>
             <UserMenu
-                {...rest}
+                {...removeEmptyProps(rest)}
                 avatar={imageAvatar ? <Avatar src={trex} alt={'User Avatar'} /> : <Avatar>AB</Avatar>}
                 menuGroups={[
                     {

diff --git a/docs/src/shared/utilities.tsx b/docs/src/shared/utilities.tsx
@@ -336,3 +336,13 @@ export const getBodyFiller = (): JSX.Element => (
         interdum, justo sit amet maximus pellentesque, eros orci dictum diam, id bibendum risus neque non risus.
     </Box>
 );
+
+export const removeEmptyProps = (props: { [key: string]: any }): { [key: string]: any } => {
+    const newProps: { [key: string]: any } = {};
+    Object.keys(props)
+        .filter((p: string) => !['', 'undefined', undefined, null].includes(props[p]))
+        .forEach((p) => {
+            newProps[p] = props[p];
+        });
+    return newProps;
+};