updating theme showcase options

.storybook/preview.tsx

@@ -57,7 +57,7 @@ const withThemeProvider: Decorator = (Story, context) => {
   const theme = themeOptions
 
   return (
-    <InvertibleMuiThemeProvider theme={theme}>
+    <InvertibleMuiThemeProvider theme={theme} defaultMode={'dark'}>
       <CssBaseline enableColorScheme />
         <Box>
           <Story {...context} />

packages/invertible-theme/src/Buttons/ThemeModeButtonGroup.stories.tsx

@@ -1,33 +1,24 @@
-import { CssBaseline, ThemeProvider } from '@mui/material'
-import { createTheme } from '@mui/material/styles'
-import type { StoryFn } from '@storybook/react'
+import type { Meta, StoryFn } from '@storybook/react'
 import React from 'react'
 
-import { InvertibleMuiThemeProvider } from '../InvertibleMuiThemeProvider/index.ts'
 import { ThemeModeButtonGroup } from './ThemeModeButtonGroup.tsx'
 
-export default {
-  title: 'Theme/ThemeModeButtonGroup',
+const StorybookEntry = {
+  argTypes: {},
   component: ThemeModeButtonGroup,
-  parameters: { layout: 'fullscreen' },
+  parameters: { docs: { page: null } },
+  title: 'theme/ThemeModeButtonGroup',
+} as Meta<typeof ThemeModeButtonGroup>
+
+const Template: StoryFn<typeof ThemeModeButtonGroup> = () => {
+  return (
+    <ThemeModeButtonGroup />
+  )
 }
 
-const theme = createTheme({
-  palette: {
-    mode: 'light',
-    primary: { main: '#2c5ba8' },
-    secondary: { main: '#ffb300' },
-  },
-})
+const Default = Template.bind({})
+Default.args = {}
 
-const Template: StoryFn = () => (
-  <ThemeProvider theme={theme}>
-    <CssBaseline />
-    <InvertibleMuiThemeProvider>
-      <ThemeModeButtonGroup sx={{ margin: 2 }} />
-    </InvertibleMuiThemeProvider>
-  </ThemeProvider>
-)
+export { Default }
 
-export const Default = Template.bind({})
-Default.args = {}
+export default StorybookEntry

packages/theme/src/index.ts

@@ -1,3 +1,2 @@
-export * from './dataism/index.ts'
-export * from './xylabs/index.ts'
-export * from './xyo-website/index.ts'
+export * from './product-theme/index.ts'
+export * from './showcase/index.ts'

packages/theme/src/product-theme/ThemeViewer.stories.tsx

@@ -0,0 +1,23 @@
+import type { Meta, StoryFn } from '@storybook/react'
+import React from 'react'
+
+import { DataismTheme } from './dataism/index.ts'
+import { ThemeViewer } from './ThemeViewer.tsx'
+
+const StorybookEntry = {
+  argTypes: {},
+  component: ThemeViewer,
+  parameters: { docs: { page: null } },
+  title: 'theme/ThemeViewer',
+} as Meta<typeof ThemeViewer>
+
+const Template: StoryFn<typeof ThemeViewer> = args => (
+  <ThemeViewer {...args} />
+)
+
+const Default = Template.bind({})
+Default.args = { data: DataismTheme }
+
+export { Default }
+
+export default StorybookEntry

packages/theme/src/product-theme/ThemeViewer.tsx

@@ -0,0 +1,71 @@
+import { ExpandMoreRounded } from '@mui/icons-material'
+import {
+  Accordion,
+  AccordionDetails,
+  AccordionSummary,
+  Typography,
+} from '@mui/material'
+import type { Theme } from '@mui/material/styles'
+import { useTheme } from '@mui/material/styles'
+import React from 'react'
+
+interface RecursiveAccordionProps {
+  data: Record<string, unknown>
+  path?: string
+}
+
+const RecursiveAccordion: React.FC<RecursiveAccordionProps> = ({
+  data,
+  path = '',
+}) => {
+  return (
+    <>
+      {Object.entries(data).map(([key, value]) => {
+        const currentPath = path ? `${path}.${key}` : key
+        const isObject = typeof value === 'object' && value !== null
+
+        return (
+          <Accordion disableGutters elevation={0} key={currentPath}>
+            <AccordionSummary
+              expandIcon={<ExpandMoreRounded />}
+            >
+              <Typography
+                variant="body2"
+                style={{
+                  marginTop: 0.25, marginBottom: 0.25, paddingLeft: 0.25, paddingRight: 0.25,
+                }}
+              >
+                {key}
+                {isObject && ':'}
+              </Typography>
+            </AccordionSummary>
+            <AccordionDetails style={{ margin: 0.25, padding: 0.5 }}>
+              {isObject
+                ? (
+                    <RecursiveAccordion data={value as Record<string, unknown>} path={currentPath} />
+                  )
+                : (
+                    <Typography variant="body2" sx={{ wordBreak: 'break-word' }}>
+                      {JSON.stringify(value, null, 2)}
+                    </Typography>
+                  )}
+            </AccordionDetails>
+          </Accordion>
+        )
+      })}
+    </>
+  )
+}
+
+export const ThemeViewer: React.FC = () => {
+  const theme: Theme = useTheme()
+
+  return (
+    <div style={{ margin: 2 }}>
+      <Typography variant="h4" gutterBottom>
+        Material-UI Theme Viewer
+      </Typography>
+      <RecursiveAccordion data={theme as unknown as Record<string, unknown>} />
+    </div>
+  )
+}

packages/theme/src/dataism/darkThemePalette.tsx → packages/theme/src/product-theme/dataism/darkThemePalette.tsx

@@ -5,7 +5,7 @@ import { personaColorsDarkMode } from './customThemeColors.tsx'
 export const darkThemePalette: ColorSystemOptions['palette'] = {
   background: {
     paper: '#1E1E1E',
-    gradient: 'linear-gradient(to right, #fff, #000)',
+    gradient: 'linear-gradient(45deg, #fff, #000)',
   },
   info: { main: '#72b4f4' },
   primary: { main: '#fff' },

packages/theme/src/dataism/lightThemePalette.tsx → packages/theme/src/product-theme/dataism/lightThemePalette.tsx

@@ -5,7 +5,7 @@ import { personaColorsLightMode } from './customThemeColors.tsx'
 export const lightThemePalette: ColorSystemOptions['palette'] = {
   background: {
     paper: '#FAFAFA',
-    gradient: 'linear-gradient(to right, #000, #fff)',
+    gradient: 'linear-gradient(45deg, #000, #fff)',
   },
   info: { main: '#72b4f4' },
   primary: { main: '#000' },

packages/theme/src/product-theme/index.ts

@@ -0,0 +1,4 @@
+export * from './dataism/index.ts'
+export * from './ThemeExtensions/index.ts'
+export * from './xylabs/index.ts'
+export * from './xyo-website/index.ts'

packages/theme/src/xylabs/darkThemeOptions.tsx → packages/theme/src/product-theme/xylabs/darkThemeOptions.tsx

@@ -5,7 +5,7 @@ export const darkThemeOptions: ThemeOptions = {
     background: {
       default: '#0b0f30',
       paper: '#101742',
-      gradient: 'linear-gradient(to right, #384AFD, #0b0f30)',
+      gradient: 'linear-gradient(45deg, #384AFD, #0b0f30)',
     },
     primary: {
       dark: '#010965',

packages/theme/src/xylabs/lightThemeOptions.tsx → packages/theme/src/product-theme/xylabs/lightThemeOptions.tsx

@@ -4,7 +4,7 @@ export const lightThemeOptions: ThemeOptions = {
   palette: {
     background: {
       default: '#fafafa',
-      gradient: 'linear-gradient(to right, #384AFD, #010965)',
+      gradient: 'linear-gradient(45deg, #384AFD, #fafafa)',
     },
     primary: {
       dark: '#010965',

packages/theme/src/xyo-website/darkThemeOptions.tsx → packages/theme/src/product-theme/xyo-website/darkThemeOptions.tsx

@@ -9,7 +9,7 @@ export const darkThemeOptions: ThemeOptions = {
     background: {
       default: '#020223',
       paper: '#16163D',
-      gradient: 'linear-gradient(to right, #66caf7, #5658F3)',
+      gradient: 'linear-gradient(45deg, #66CAF7, #020223)',
     },
     neutral: {
       main: '#fff',

packages/theme/src/xyo-website/lightThemeOptions.tsx → packages/theme/src/product-theme/xyo-website/lightThemeOptions.tsx

@@ -5,7 +5,7 @@ export const lightThemeOptions: ThemeOptions = {
   palette: {
     background: {
       paper: '#FAFAFA',
-      gradient: 'linear-gradient(to right, #72b4f4, #463dc6)',
+      gradient: 'linear-gradient(45deg, #72b4f4, #fff)',
     },
     neutral: {
       contrastText: '#fff',

packages/theme/src/xyo-website/theme.ts → packages/theme/src/product-theme/xyo-website/theme.ts

@@ -39,7 +39,7 @@ export const XyoTheme = (theme: Theme, rtl = false): Theme => createTheme({
       styleOverrides: {
         root: {
           boxShadow: 'none',
-          padding: `${theme.spacing(1)} ${theme.spacing(2)}`,
+          // padding: `${theme.spacing(1)} ${theme.spacing(2)}`,
           borderWidth: '2px',
           borderColor: 'inherit',
         },
@@ -50,11 +50,11 @@ export const XyoTheme = (theme: Theme, rtl = false): Theme => createTheme({
           style: {
             'WebkitBackdropFilter': 'blur(2px)',
             'backdropFilter': 'blur(2px)',
-            'border': `2px solid ${alpha('#fff', 0.4)}`,
-            'color': '#fff',
+            'border': `2px solid ${alpha(theme.palette.text.primary, 0.4)}`,
+            'color': theme.palette.text.primary,
             '&:hover': {
-              backgroundColor: '#ffffff',
-              border: `2px solid ${alpha('#fff', 0)}`,
+              backgroundColor: theme.palette.background.default,
+              border: `2px solid ${alpha(theme.palette.text.primary, 0)}`,
               color: darken(theme.palette.primary.dark, 0.7),
             },
           },
@@ -117,6 +117,7 @@ export const XyoTheme = (theme: Theme, rtl = false): Theme => createTheme({
     button: {
       fontSize: '1rem',
       fontWeight: 500,
+      textTransform: 'capitalize',
     },
     fontWeightBold: 600,
     fontWeightLight: 200,

packages/theme/src/showcase/dashboard/DataViewers/Charts/LineCharts/DailyVerificationLineChart.tsx

@@ -0,0 +1,50 @@
+// DailyVerificationLineChart.tsx
+
+import { useTheme } from '@mui/material'
+import React from 'react'
+import {
+  Area, AreaChart, CartesianGrid, ResponsiveContainer,
+  Tooltip, XAxis, YAxis,
+} from 'recharts'
+
+import { CustomDataTooltip, type DailyVerificationChartProps } from '../Shared/index.ts'
+
+export const DailyVerificationLineChart: React.FC<DailyVerificationChartProps> = ({ data }) => {
+  const theme = useTheme()
+
+  return (
+    <ResponsiveContainer width="100%" height={400}>
+      <AreaChart
+        data={data}
+        margin={{
+          top: 10,
+          right: 30,
+          left: 0,
+          bottom: 0,
+        }}
+      >
+        <CartesianGrid stroke={theme.palette.background.paper} />
+        <XAxis dataKey="day" />
+        <YAxis width={20} />
+        <Tooltip
+          content={(
+            <CustomDataTooltip
+              tooltipData={[
+                { label: 'Day', dataKey: 'day' },
+                { label: 'Verifications', dataKey: 'verifications' },
+              ]}
+            />
+          )}
+          cursor={{ strokeDasharray: '3 3' }}
+        />
+        <Area
+          type="monotone"
+          dataKey="verifications"
+          stackId="1"
+          stroke={theme.palette.primary.main}
+          fill={theme.palette.primary.light}
+        />
+      </AreaChart>
+    </ResponsiveContainer>
+  )
+}

packages/theme/src/showcase/dashboard/DataViewers/Charts/LineCharts/DailyVerificationStackedAreaChart.stories.tsx

@@ -0,0 +1,18 @@
+// DailyVerificationStackedAreaChart.stories.tsx
+
+import type { Meta, StoryFn } from '@storybook/react'
+import React from 'react'
+
+import { DailyVerificationStackedAreaChart } from './DailyVerificationStackedAreaChart.tsx'
+import { stackedVerificationData } from './sampleVerificationData.ts'
+
+export default {
+  component: DailyVerificationStackedAreaChart,
+  title: 'theme/showcase/charts/DailyVerificationStackedAreaChart',
+  argTypes: {},
+} as Meta<typeof DailyVerificationStackedAreaChart>
+
+const Template: StoryFn<typeof DailyVerificationStackedAreaChart> = args => <DailyVerificationStackedAreaChart {...args} />
+
+export const Default = Template.bind({})
+Default.args = { data: stackedVerificationData }

packages/theme/src/showcase/dashboard/DataViewers/Charts/LineCharts/DailyVerificationStackedAreaChart.tsx

@@ -0,0 +1,63 @@
+import { useTheme } from '@mui/material'
+import React from 'react'
+import {
+  Area, AreaChart, CartesianGrid, ResponsiveContainer,
+  Tooltip, XAxis, YAxis,
+} from 'recharts'
+
+import type { DailyVerificationStackedChartProps } from '../Shared/index.ts'
+import { CustomDataTooltip } from '../Shared/index.ts'
+
+export const DailyVerificationStackedAreaChart: React.FC<DailyVerificationStackedChartProps> = ({ data }) => {
+  const theme = useTheme()
+
+  return (
+    <ResponsiveContainer width="100%" height={400}>
+      <AreaChart
+        data={data}
+        margin={{
+          top: 10,
+          right: 30,
+          left: 0,
+          bottom: 0,
+        }}
+      >
+        <CartesianGrid stroke={theme.palette.background.paper} />
+        <XAxis dataKey="day" />
+        <YAxis width={20} />
+        <Tooltip
+          content={(
+            <CustomDataTooltip
+              tooltipData={[
+                { label: 'Day', dataKey: 'day' },
+                { label: 'Verifications', dataKey: 'verifications' },
+              ]}
+            />
+          )}
+          cursor={{ strokeDasharray: '3 3' }}
+        />
+        <Area
+          type="monotone"
+          dataKey="mobile"
+          stackId="1"
+          stroke={theme.palette.primary.main}
+          fill={theme.palette.primary.main}
+        />
+        <Area
+          type="monotone"
+          dataKey="web"
+          stackId="1"
+          stroke={theme.palette.secondary.main}
+          fill={theme.palette.secondary.light}
+        />
+        <Area
+          type="monotone"
+          dataKey="email"
+          stackId="1"
+          stroke={theme.palette.success.main}
+          fill={theme.palette.success.light}
+        />
+      </AreaChart>
+    </ResponsiveContainer>
+  )
+}