@xyo-network/react-shared 2.23.7

package/src/modules/common/components/BasicHero/index.ts

@@ -0,0 +1 @@
+export * from './BasicHero'

package/src/modules/common/components/FullWidthCard/FullWidthCard.stories.tsx

@@ -0,0 +1,37 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+import { BrowserRouter } from 'react-router-dom'
+
+import { FullWidthCard } from './FullWidthCard'
+const StorybookEntry = {
+  argTypes: {},
+  component: FullWidthCard,
+  parameters: {
+    docs: {
+      page: null,
+    },
+  },
+  title: 'Common/FullWidthCard',
+} as ComponentMeta<typeof FullWidthCard>
+
+const Template: ComponentStory<typeof FullWidthCard> = (args) => (
+  <BrowserRouter>
+    <FullWidthCard {...args}></FullWidthCard>
+  </BrowserRouter>
+)
+
+const Default = Template.bind({})
+Default.args = {
+  cardIsButton: true,
+  desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat delectus nemo optio quis! Totam magni laboriosam repudiandae nam nobis at quisquam aut omnis, quis officiis similique enim id dolorem unde!',
+  name: 'Big Title Here',
+
+  to: '/link',
+}
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+//@ts-ignore
+
+export { Default }
+
+// eslint-disable-next-line import/no-default-export
+export default StorybookEntry

package/src/modules/common/components/FullWidthCard/FullWidthCard.tsx

@@ -0,0 +1,98 @@
+import ArrowForwardRoundedIcon from '@mui/icons-material/ArrowForwardRounded'
+import { alpha, Card, CardActions, CardContent, CardMedia, CardProps, Grid, IconButton, Typography, useTheme, Zoom } from '@mui/material'
+import { FlexGrowCol } from '@xylabs/sdk-react'
+import { ReactNode, useState } from 'react'
+import { To, useNavigate } from 'react-router-dom'
+
+import { useIsMobile } from '../../hooks'
+
+export interface FullWidthCardProps extends CardProps {
+  name: ReactNode
+  desc?: ReactNode
+  href?: string
+  to?: To
+  linkText?: string
+  media?: string
+  small?: boolean
+  cardIsButton?: boolean
+}
+
+export const FullWidthCard: React.FC<FullWidthCardProps> = ({ name, small, cardIsButton, desc, href, to, media, ...props }) => {
+  const theme = useTheme()
+  const [raised, setRaised] = useState(false)
+  const navigate = useNavigate()
+  const isMobile = useIsMobile()
+
+  const localRouteChange = (to: To | undefined) => {
+    to ? navigate(to) : navigate('/404')
+  }
+  const externalRouteChange = (href: string | undefined) => {
+    href ? window.open(href) : navigate('/404')
+  }
+
+  return (
+    <Card
+      elevation={raised ? 3 : 0}
+      style={{ height: '100%', width: '100%' }}
+      {...props}
+      sx={{
+        '&:hover': {
+          cursor: 'pointer',
+        },
+        backgroundColor: alpha(theme.palette.primary.light, 0.05),
+      }}
+      onMouseEnter={() => (isMobile ? null : cardIsButton ? setRaised(true) : null)}
+      onMouseLeave={() => (isMobile ? null : cardIsButton ? setRaised(false) : null)}
+      onClick={() => (cardIsButton ? (href ? externalRouteChange(href) : to ? localRouteChange(to) : navigate('/404')) : null)}
+    >
+      {media ? <CardMedia component="img" height="100" image={media} alt="" /> : null}
+
+      <CardContent>
+        <Grid container alignItems="center" paddingY={2} paddingX={2}>
+          <Grid item xs={12} md={6}>
+            {typeof name === 'string' ? (
+              <Typography fontWeight={700} variant="h2" textAlign="left" paddingBottom={1}>
+                {name}
+              </Typography>
+            ) : (
+              name
+            )}
+          </Grid>
+          <Grid item xs={12} md={5}>
+            <Typography variant="body1" fontWeight={400} textAlign="left">
+              {desc}
+            </Typography>
+          </Grid>
+          <Grid item xs={1} display={isMobile ? 'none' : 'flex'} justifyContent="center">
+            <Zoom in={raised}>
+              <IconButton
+                color="primary"
+                size={small ? 'small' : 'medium'}
+                onClick={() => (href ? externalRouteChange(href) : to ? localRouteChange(to) : navigate('/404'))}
+                disableFocusRipple
+                disableRipple
+                disableTouchRipple
+              >
+                <ArrowForwardRoundedIcon fontSize={small ? 'small' : 'medium'} />
+              </IconButton>
+            </Zoom>
+          </Grid>
+        </Grid>
+      </CardContent>
+      <CardActions sx={{ display: { md: isMobile ? 'flex' : 'none' } }}>
+        <FlexGrowCol alignItems="flex-end">
+          <IconButton
+            color="primary"
+            size={small ? 'small' : 'medium'}
+            onClick={() => (href ? externalRouteChange(href) : to ? localRouteChange(to) : navigate('/404'))}
+            disableFocusRipple
+            disableRipple
+            disableTouchRipple
+          >
+            <ArrowForwardRoundedIcon fontSize={small ? 'small' : 'medium'} />
+          </IconButton>
+        </FlexGrowCol>
+      </CardActions>
+    </Card>
+  )
+}

package/src/modules/common/components/FullWidthCard/index.ts

@@ -0,0 +1 @@
+export * from './FullWidthCard'

package/src/modules/common/components/GradientText/GradientText.stories.tsx

@@ -0,0 +1,31 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+import { BrowserRouter } from 'react-router-dom'
+
+import { GradientTextExample } from './GradientText'
+const StorybookEntry = {
+  argTypes: {},
+  component: GradientTextExample,
+  parameters: {
+    docs: {
+      page: null,
+    },
+  },
+  title: 'Common/GradientText',
+} as ComponentMeta<typeof GradientTextExample>
+
+const Template: ComponentStory<typeof GradientTextExample> = (args) => (
+  <BrowserRouter>
+    <GradientTextExample {...args}></GradientTextExample>
+  </BrowserRouter>
+)
+
+const Default = Template.bind({})
+Default.args = {}
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+//@ts-ignore
+
+export { Default }
+
+// eslint-disable-next-line import/no-default-export
+export default StorybookEntry

package/src/modules/common/components/GradientText/GradientText.tsx

@@ -0,0 +1,110 @@
+import { Divider, Grid, Typography, useTheme } from '@mui/material'
+import { makeStyles } from '@mui/styles'
+import { FlexCol } from '@xylabs/sdk-react'
+
+import { SimpleCard } from '../SimpleCard'
+
+export const colorfulGradientLightMode = makeStyles(() => ({
+  background: {
+    backgroundImage: '-webkit-linear-gradient(232deg, #e17751, #d84e7a, #5898dd, #8c8ee5)',
+  },
+  border: {
+    borderImage: '-webkit-linear-gradient(232deg, #e17751, #d84e7a, #5898dd, #8c8ee5)',
+    borderImageSlice: 1,
+    borderImageSource: '-webkit-linear-gradient(232deg, #e17751, #d84e7a, #5898dd, #8c8ee5)',
+    borderRadius: 4,
+    borderStyle: 'solid',
+    borderWidth: '2px',
+  },
+  heading: {
+    WebkitBackgroundClip: 'text',
+    WebkitTextFillColor: 'transparent',
+    background: '-webkit-linear-gradient(232deg, #e17751, #d84e7a, #5898dd, #8c8ee5)',
+    display: 'inline-block',
+  },
+}))
+
+export const colorfulGradientDarkMode = makeStyles(() => ({
+  background: {
+    backgroundImage: '-webkit-linear-gradient(232deg, #F17938, #FF5BDC, #5898dd, #B2FFFD)',
+  },
+  border: {
+    borderImage: '-webkit-linear-gradient(232deg, #F17938, #FF5BDC, #5898dd, #B2FFFD)',
+    borderImageSlice: 1,
+    borderImageSource: '-webkit-linear-gradient(232deg, #F17938, #FF5BDC, #5898dd, #B2FFFD)',
+    borderRadius: 4,
+    borderStyle: 'solid',
+    borderWidth: '2px',
+  },
+  heading: {
+    WebkitBackgroundClip: 'text',
+    WebkitTextFillColor: 'transparent',
+    background: '-webkit-linear-gradient(232deg, #F17938, #FF5BDC, #5898dd, #B2FFFD)',
+    display: 'inline-block',
+  },
+}))
+
+export const GradientTextExample: React.FC = () => {
+  const theme = useTheme()
+  const classes = theme.palette.mode === 'dark' ? colorfulGradientDarkMode() : colorfulGradientLightMode()
+  return (
+    <FlexCol alignItems="stretch">
+      <Typography variant="h4" gutterBottom>
+        XYO Network Gradient Text Options
+      </Typography>
+      <Typography variant="subtitle2" gutterBottom paddingTop={3}>
+        Highlight
+      </Typography>
+      <Divider sx={{ marginY: '8px' }} />
+      <Typography variant="h5" gutterBottom>
+        Lorem ipsum dolor sit amet consectetur, <span className={classes.heading}>adipisicing elit.</span>
+      </Typography>
+      <Typography variant="subtitle2" gutterBottom paddingTop={3}>
+        Body Text
+      </Typography>
+      <Divider sx={{ marginY: '8px' }} />
+      <Typography variant="h5" gutterBottom className={classes.heading}>
+        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sint perspiciatis aliquam consequuntur nisi alias impedit ducimus ipsa voluptas, suscipit ea vel dicta quasi hic,
+        deserunt tempore, natus optio veritatis dolor?
+      </Typography>
+      <Typography variant="subtitle2" gutterBottom paddingTop={3}>
+        Caption
+      </Typography>
+      <Divider sx={{ marginY: '8px' }} />
+      <Typography variant="caption" gutterBottom className={classes.heading}>
+        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sint perspiciatis aliquam consequuntur nisi alias impedit ducimus ipsa voluptas, suscipit ea vel dicta quasi hic,
+        deserunt tempore, natus optio veritatis dolor?
+      </Typography>
+      <Typography variant="subtitle2" gutterBottom paddingTop={3}>
+        Card Border
+      </Typography>
+      <Divider sx={{ marginY: '8px' }} />
+      <Grid container spacing={2}>
+        <Grid item xs={12} sm={6} md={4}>
+          <SimpleCard
+            className={classes.border}
+            headline="Gradient Border Simple Card"
+            desc="Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam illo molestiae nisi perferendis a error, eum repellendus voluptatibus, provident, voluptatum qui laborum assumenda minus! Cum id quo eligendi dolor expedita."
+            interactionVariant="button"
+          />
+        </Grid>
+        <Grid item xs={12} sm={6} md={4}>
+          <SimpleCard
+            className={classes.border}
+            headline="Gradient Border Simple Card"
+            desc="Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam illo molestiae nisi perferendis a error, eum repellendus voluptatibus, provident, voluptatum qui laborum assumenda minus! Cum id quo eligendi dolor expedita."
+            interactionVariant="button"
+          />
+        </Grid>
+        <Grid item xs={12} sm={6} md={4}>
+          <SimpleCard
+            className={classes.border}
+            headline="Gradient Border Simple Card"
+            desc="Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam illo molestiae nisi perferendis a error, eum repellendus voluptatibus, provident, voluptatum qui laborum assumenda minus! Cum id quo eligendi dolor expedita."
+            interactionVariant="button"
+          />
+        </Grid>
+      </Grid>
+    </FlexCol>
+  )
+}

package/src/modules/common/components/GradientText/index.ts

@@ -0,0 +1 @@
+export * from './GradientText'

package/src/modules/common/components/SectionSpacingRow/SectionSpacingRow.stories.tsx

@@ -0,0 +1,36 @@
+import { Divider, Typography } from '@mui/material'
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+import { BrowserRouter } from 'react-router-dom'
+
+import { SectionSpacingRow } from './SectionSpacingRow'
+const StorybookEntry = {
+  argTypes: {},
+  component: SectionSpacingRow,
+  parameters: {
+    docs: {
+      page: null,
+    },
+  },
+  title: 'Common/SectionSpacingRow',
+} as ComponentMeta<typeof SectionSpacingRow>
+
+const Template: ComponentStory<typeof SectionSpacingRow> = (args) => (
+  <BrowserRouter>
+    <Typography variant="subtitle2">No Spacing</Typography>
+    <Typography textAlign="center">Hello World</Typography>
+    <Divider />
+    <Typography variant="subtitle2">With Spacing</Typography>
+    <SectionSpacingRow {...args}>Hello World</SectionSpacingRow>
+  </BrowserRouter>
+)
+
+const Default = Template.bind({})
+Default.args = {}
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+//@ts-ignore
+
+export { Default }
+
+// eslint-disable-next-line import/no-default-export
+export default StorybookEntry

package/src/modules/common/components/SectionSpacingRow/SectionSpacingRow.tsx

@@ -0,0 +1,19 @@
+import { useTheme } from '@mui/material'
+import { FlexBoxProps, FlexGrowRow } from '@xylabs/sdk-react'
+
+export const SectionSpacingRow: React.FC<FlexBoxProps> = ({ children, sx, ...props }) => {
+  const theme = useTheme()
+  return (
+    <FlexGrowRow
+      sx={{
+        paddingBottom: { md: theme.spacing(5), xs: theme.spacing(5) },
+        paddingTop: { md: theme.spacing(5), xs: theme.spacing(5) },
+        ...sx,
+      }}
+      width="100%"
+      {...props}
+    >
+      {children}
+    </FlexGrowRow>
+  )
+}

package/src/modules/common/components/SectionSpacingRow/index.ts

@@ -0,0 +1 @@
+export * from './SectionSpacingRow'

package/src/modules/common/components/SimpleCard/SimpleCard.stories.tsx

@@ -0,0 +1,88 @@
+import { Grid } from '@mui/material'
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+import { BrowserRouter } from 'react-router-dom'
+
+import CoinbaseWalletIcon from './coinbase-wallet.svg'
+import MoneyMedia from './money.jpg'
+import { SimpleCard } from './SimpleCard'
+const StorybookEntry = {
+  argTypes: {},
+  component: SimpleCard,
+  parameters: {
+    docs: {
+      page: null,
+    },
+  },
+  title: 'Common/SimpleCard',
+} as ComponentMeta<typeof SimpleCard>
+
+const Template: ComponentStory<typeof SimpleCard> = (args) => (
+  <BrowserRouter>
+    <Grid container spacing={2}>
+      <Grid item xs={12} sm={6} md={3}>
+        <SimpleCard {...args}></SimpleCard>
+      </Grid>
+      <Grid item xs={12} sm={6} md={3}>
+        <SimpleCard {...args}></SimpleCard>
+      </Grid>
+      <Grid item xs={12} sm={6} md={3}>
+        <SimpleCard {...args}></SimpleCard>
+      </Grid>
+      <Grid item xs={12} sm={6} md={3}>
+        <SimpleCard {...args}></SimpleCard>
+      </Grid>
+    </Grid>
+  </BrowserRouter>
+)
+
+const Default = Template.bind({})
+Default.args = {
+  desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat delectus nemo optio quis! Totam magni laboriosam repudiandae nam nobis at quisquam aut omnis, quis officiis similique enim id dolorem unde!',
+  headline: 'Headline Lorem Ipsum',
+  subtitle: 'Aug 25, 1997',
+}
+const DefaultWithImage = Template.bind({})
+DefaultWithImage.args = {
+  desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat delectus nemo optio quis! Totam magni laboriosam repudiandae nam nobis at quisquam aut omnis, quis officiis similique enim id dolorem unde!',
+  headline: 'Headline Lorem Ipsum',
+  iconImage: CoinbaseWalletIcon,
+  subtitle: 'Aug 25, 1997',
+}
+const VariantButton = Template.bind({})
+VariantButton.args = {
+  desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat delectus nemo optio quis! Totam magni laboriosam repudiandae nam nobis at quisquam aut omnis, quis officiis similique enim id dolorem unde!',
+  headline: 'Headline Lorem Ipsum',
+  interactionVariant: 'button',
+  subtitle: 'Aug 25, 1997',
+}
+const DefaultSmallCard = Template.bind({})
+DefaultSmallCard.args = {
+  desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat delectus nemo optio quis!',
+  headline: 'Headline Lorem Ipsum',
+  small: true,
+  subtitle: 'Aug 25, 1997',
+}
+const DefaultMediaCard = Template.bind({})
+DefaultMediaCard.args = {
+  desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat delectus nemo optio quis! Totam magni laboriosam repudiandae nam nobis at quisquam aut omnis, quis officiis similique enim id dolorem unde!',
+  headline: 'Headline Lorem Ipsum',
+  media: MoneyMedia,
+  subtitle: 'Aug 25, 1997',
+}
+const CardWithAllParameters = Template.bind({})
+CardWithAllParameters.args = {
+  desc: 'Many people believe that a card cannot be a button. But here at XYO, we say "No way, José" and turn our cards into buttons.',
+  headline: 'Did you know that this card is complex?',
+  iconImage: CoinbaseWalletIcon,
+  interactionVariant: 'button',
+  media: MoneyMedia,
+  subtitle: 'Aug 25, 1997',
+}
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+//@ts-ignore
+
+export { CardWithAllParameters, Default, DefaultMediaCard, DefaultSmallCard, DefaultWithImage, VariantButton }
+
+// eslint-disable-next-line import/no-default-export
+export default StorybookEntry

package/src/modules/common/components/SimpleCard/SimpleCard.tsx

@@ -0,0 +1,87 @@
+import ArrowForwardRoundedIcon from '@mui/icons-material/ArrowForwardRounded'
+import { alpha, Card, CardActions, CardContent, CardMedia, CardProps, IconButton, Typography, useTheme } from '@mui/material'
+import { FlexCol, FlexGrowCol } from '@xylabs/sdk-react'
+import { ReactNode, useState } from 'react'
+import { To, useNavigate } from 'react-router-dom'
+
+import { useIsMobile } from '../../hooks'
+
+export interface SimpleCardProps extends CardProps {
+  headline?: ReactNode
+  desc?: ReactNode
+  href?: string
+  to?: To
+  media?: string
+  small?: boolean
+  iconImage?: string
+  interactionVariant?: 'button' | 'card'
+  subtitle?: string
+}
+
+export const SimpleCard: React.FC<SimpleCardProps> = ({ iconImage, subtitle, headline, small, desc, href, to, interactionVariant = 'card', media, ...props }) => {
+  const theme = useTheme()
+  const [raised, setRaised] = useState(false)
+  const navigate = useNavigate()
+  const isMobile = useIsMobile()
+  const localRouteChange = (to: To | undefined) => {
+    to ? navigate(to) : navigate('/404')
+  }
+  const externalRouteChange = (href: string | undefined) => {
+    href ? window.open(href) : navigate('/404')
+  }
+  return (
+    <Card
+      elevation={raised ? 3 : 0}
+      style={{ height: '100%', justifyContent: 'space-between', width: '100%' }}
+      {...props}
+      sx={{
+        '&:hover': {
+          cursor: interactionVariant == 'button' ? 'pointer' : null,
+        },
+        backgroundColor: alpha(theme.palette.primary.light, 0.05),
+      }}
+      onMouseEnter={() => (isMobile ? null : interactionVariant == 'button' ? setRaised(true) : null)}
+      onMouseLeave={() => (isMobile ? null : interactionVariant == 'button' ? setRaised(false) : null)}
+      onClick={() => (interactionVariant == 'button' ? (href ? externalRouteChange(href) : to ? localRouteChange(to) : navigate('/404')) : null)}
+    >
+      {media ? <CardMedia component="img" height="100" image={media} alt="" /> : null}
+
+      <CardContent sx={{ height: '100%' }}>
+        <FlexCol width="100%" alignItems="flex-start">
+          {iconImage ? <img src={iconImage} height="40px" style={{ paddingBottom: '8px' }} /> : null}
+          {typeof headline === 'string' ? (
+            <Typography variant={small ? 'body1' : 'h6'} textAlign="left" gutterBottom>
+              {headline}
+            </Typography>
+          ) : (
+            headline
+          )}
+          {subtitle ? (
+            <Typography variant="subtitle2" textAlign="left" gutterBottom>
+              {subtitle}
+            </Typography>
+          ) : null}
+          <Typography variant={small ? 'caption' : 'body1'} textAlign="left" gutterBottom>
+            {desc}
+          </Typography>
+        </FlexCol>
+      </CardContent>
+      {interactionVariant == 'button' ? (
+        <CardActions>
+          <FlexGrowCol alignItems="flex-end">
+            <IconButton
+              color={raised ? 'secondary' : 'primary'}
+              size={small ? 'small' : 'medium'}
+              onClick={() => (href ? externalRouteChange(href) : to ? localRouteChange(to) : navigate('/404'))}
+              disableFocusRipple
+              disableRipple
+              disableTouchRipple
+            >
+              <ArrowForwardRoundedIcon fontSize={small ? 'small' : 'medium'} />
+            </IconButton>
+          </FlexGrowCol>
+        </CardActions>
+      ) : null}
+    </Card>
+  )
+}

package/src/modules/common/components/SimpleCard/coinbase-wallet.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><style>.cls-1{fill:#005cfe;}.cls-2{fill:#fdfdfe;}</style></defs><g id="Layer_6" data-name="Layer 6"><g id="JuvZVa"><path class="cls-1" d="M0,50C0,40.77-.1,31.58.07,22.4.22,14.9,3,8.55,9.32,4.09A22.35,22.35,0,0,1,20.3.25,56.53,56.53,0,0,1,26.12,0C42.74,0,59.37,0,76,0c5.17,0,10.15.92,14.5,4A21.42,21.42,0,0,1,99.75,20.1,55.89,55.89,0,0,1,100,26c0,17.13.11,34.26-.08,51.38-.1,8.93-3.88,16-12.11,20.15A25.49,25.49,0,0,1,76.15,100Q50,100,23.83,100c-5.37,0-10.52-1.06-14.95-4.39A21.57,21.57,0,0,1,.21,79.72,59,59,0,0,1,0,73.78Q0,61.87,0,50Zm50-35a35.07,35.07,0,1,0,35,35.13A35,35,0,0,0,50,14.92Z"/><path class="cls-2" d="M50,14.92a35.07,35.07,0,1,1-35.11,35A35,35,0,0,1,50,14.92ZM38.7,50c0,2.92,0,5.83,0,8.75a2.26,2.26,0,0,0,2.52,2.53q8.74,0,17.5,0c1.73,0,2.56-.85,2.56-2.6q0-8.68,0-17.38a2.27,2.27,0,0,0-2.57-2.59q-8.7,0-17.39,0c-1.8,0-2.61.84-2.62,2.66C38.69,44.25,38.7,47.12,38.7,50Z"/><path class="cls-1" d="M38.7,50c0-2.88,0-5.75,0-8.63,0-1.82.82-2.66,2.62-2.66q8.7,0,17.39,0a2.27,2.27,0,0,1,2.57,2.59q0,8.69,0,17.38c0,1.75-.83,2.6-2.56,2.6q-8.76,0-17.5,0a2.26,2.26,0,0,1-2.52-2.53C38.68,55.83,38.7,52.92,38.7,50Z"/></g></g></svg>

package/src/modules/common/components/SimpleCard/index.ts

@@ -0,0 +1 @@
+export * from './SimpleCard'

package/src/modules/common/components/index.ts

@@ -0,0 +1,5 @@
+export * from './BasicHero'
+export * from './FullWidthCard'
+export * from './GradientText'
+export * from './SectionSpacingRow'
+export * from './SimpleCard'

package/src/modules/common/hooks/index.ts

@@ -0,0 +1 @@
+export * from './useIsMobile'

package/src/modules/common/hooks/useIsMobile.ts

@@ -0,0 +1,6 @@
+import { useMediaQuery, useTheme } from '@mui/material'
+
+export const useIsMobile = () => {
+  const theme = useTheme()
+  return useMediaQuery(theme.breakpoints.down('md'))
+}

package/src/modules/common/index.ts

@@ -0,0 +1 @@
+export * from './components'

package/src/modules/index.ts

@@ -0,0 +1,2 @@
+export * from './common'
+export * from './settings'

package/src/modules/settings/components/DarkModeIconButton.tsx

@@ -0,0 +1,19 @@
+import DarkModeRoundedIcon from '@mui/icons-material/DarkModeRounded'
+import LightModeRoundedIcon from '@mui/icons-material/LightModeRounded'
+import { IconButton, IconButtonProps } from '@mui/material'
+
+import { useAppSettings } from '../contexts'
+
+export const DarkModeIconButton: React.FC<IconButtonProps> = (props) => {
+  const { darkMode, enableDarkMode } = useAppSettings()
+
+  const handleDarkModeChange = () => {
+    enableDarkMode?.(!darkMode)
+  }
+
+  return (
+    <IconButton onClick={handleDarkModeChange} {...props}>
+      {darkMode ? <DarkModeRoundedIcon /> : <LightModeRoundedIcon />}
+    </IconButton>
+  )
+}

package/src/modules/settings/components/index.ts

@@ -0,0 +1 @@
+export * from './DarkModeIconButton'

package/src/modules/settings/contexts/Context.ts

@@ -0,0 +1,12 @@
+import { createContext } from 'react'
+
+import { appSettingDefault } from './appSettingDefault'
+
+export interface AppSettingsContextProps {
+  darkMode?: boolean
+  developerMode?: boolean
+  enableDarkMode?: (value: boolean) => void
+  enableDeveloperMode?: (value: boolean) => void
+}
+
+export const AppSettingsContext = createContext<AppSettingsContextProps>(appSettingDefault())

package/src/modules/settings/contexts/Provider.tsx

@@ -0,0 +1,40 @@
+import { WithChildren } from '@xylabs/sdk-react'
+import React, { ProviderProps, useState } from 'react'
+
+import { AppSettingsContext, AppSettingsContextProps } from './Context'
+import { AppSettingsStorage } from './Storage'
+
+export interface AppSettingsProviderProps<T extends AppSettingsContextProps = AppSettingsContextProps> extends ProviderProps<T> {
+  storage?: AppSettingsStorage
+}
+
+export const AppSettingsProvider: React.FC<WithChildren<AppSettingsProviderProps>> = ({ storage = new AppSettingsStorage(), value, children, ...props }) => {
+  const [developerMode, setDeveloperMode] = useState(storage.developerMode)
+  const [darkMode, setDarkMode] = useState(storage.darkMode)
+
+  const enableDeveloperMode = (value: boolean) => {
+    storage.developerMode = value
+    setDeveloperMode(storage.developerMode)
+  }
+
+  const enableDarkMode = (value: boolean) => {
+    storage.darkMode = value
+    setDarkMode(storage.darkMode)
+  }
+
+  return (
+    <AppSettingsContext.Provider
+      value={{
+        darkMode,
+        developerMode,
+        enableDarkMode,
+        enableDeveloperMode,
+
+        ...value,
+      }}
+      {...props}
+    >
+      {children}
+    </AppSettingsContext.Provider>
+  )
+}

package/src/modules/settings/contexts/Slug.ts

@@ -0,0 +1,4 @@
+export enum AppSettingSlug {
+  DarkMode = 'darkmode',
+  Developer = 'developer',
+}