@xyo-network/react-appbar 2.26.37 → 2.26.40

package/dist/docs.json

@@ -10,7 +10,7 @@
 			"fileName": "index.ts",
 			"line": 1,
 			"character": 0,
-			"url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/eeec410/packages/appbar/src/index.ts#L1"
+			"url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/0cea94b/packages/appbar/src/index.ts#L1"
 		}
 	]
 }

package/package.json

@@ -20,13 +20,13 @@
     "@xylabs/react-flexbox": "^2.14.10",
     "@xylabs/react-link": "^2.14.10",
     "@xylabs/react-shared": "^2.14.10",
-    "@xyo-network/react-app-settings": "^2.26.37",
-    "@xyo-network/react-archive": "^2.26.37",
-    "@xyo-network/react-archivist-api": "^2.26.37",
-    "@xyo-network/react-auth": "^2.26.37",
-    "@xyo-network/react-network": "^2.26.37",
-    "@xyo-network/react-shared": "^2.26.37",
-    "@xyo-network/react-wallet": "^2.26.37",
+    "@xyo-network/react-app-settings": "^2.26.40",
+    "@xyo-network/react-archive": "^2.26.40",
+    "@xyo-network/react-archivist-api": "^2.26.40",
+    "@xyo-network/react-auth": "^2.26.40",
+    "@xyo-network/react-network": "^2.26.40",
+    "@xyo-network/react-shared": "^2.26.40",
+    "@xyo-network/react-wallet": "^2.26.40",
     "@xyo-network/wallet": "^2.22.15",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -89,5 +89,5 @@
   },
   "sideEffects": false,
   "types": "dist/esm/index.d.ts",
-  "version": "2.26.37"
+  "version": "2.26.40"
 }

package/src/components/AppBar/Application.stories.tsx

@@ -0,0 +1,91 @@
+/* eslint-disable import/no-internal-modules */
+import { List, Paper } from '@mui/material'
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+import { FlexGrowCol } from '@xylabs/react-flexbox'
+import { ArchiveProvider, ArchivesProvider } from '@xyo-network/react-archive'
+import { ArchivistApiProvider } from '@xyo-network/react-archivist-api'
+import { NetworkMemoryProvider } from '@xyo-network/react-network'
+import { WalletAccountSelect, WalletProvider } from '@xyo-network/react-wallet'
+import { XyoWalletBase } from '@xyo-network/wallet'
+import { BrowserRouter } from 'react-router-dom'
+
+import { SearchBar } from '../SearchBar'
+import { SiteMenuListItem } from '../SiteMenu'
+import { SystemToolbar } from '../Toolbar'
+import { ApplicationAppBar } from './Application'
+
+const StorybookEntry = {
+  argTypes: {},
+  component: ApplicationAppBar,
+  parameters: {
+    docs: {
+      page: null,
+    },
+  },
+  title: 'appbar/AppBar/Application',
+} as ComponentMeta<typeof ApplicationAppBar>
+
+const Template: ComponentStory<typeof ApplicationAppBar> = (args) => (
+  <WalletProvider defaultWallet={new XyoWalletBase('test me')}>
+    <BrowserRouter>
+      <ArchivistApiProvider apiDomain="https://beta.api.archivist.xyo.network">
+        <NetworkMemoryProvider>
+          <ArchivesProvider>
+            <ArchiveProvider>
+              <ApplicationAppBar
+                systemToolbar={
+                  <SystemToolbar
+                    menuItems={
+                      <List>
+                        <SiteMenuListItem primary="Hello" />
+                      </List>
+                    }
+                  />
+                }
+                {...args}
+              ></ApplicationAppBar>
+            </ArchiveProvider>
+          </ArchivesProvider>
+        </NetworkMemoryProvider>
+      </ArchivistApiProvider>
+    </BrowserRouter>
+  </WalletProvider>
+)
+
+const Default = Template.bind({})
+Default.args = {}
+
+const WithSearchBar = Template.bind({})
+WithSearchBar.args = {
+  children: <SearchBar flexGrow={1} onSearch={(term) => alert(term)} />,
+  color: 'primary',
+  systemToolbar: (
+    <SystemToolbar
+      darkModeButton
+      authButton
+      menuItems={
+        <List>
+          <SiteMenuListItem primary="Hello" />
+        </List>
+      }
+    />
+  ),
+}
+
+const WithWalletSelectBar = Template.bind({})
+WithWalletSelectBar.args = {
+  children: (
+    <FlexGrowCol alignItems="stretch">
+      <Paper variant="elevation">
+        <WalletAccountSelect icons size="small" fullWidth />
+      </Paper>
+    </FlexGrowCol>
+  ),
+  color: 'primary',
+  systemToolbar: <SystemToolbar darkModeButton authButton />,
+}
+
+export { Default, WithSearchBar, WithWalletSelectBar }
+
+// eslint-disable-next-line import/no-default-export
+export default StorybookEntry

package/src/components/AppBar/Application.tsx

@@ -0,0 +1,15 @@
+import { ToolbarProps } from '@mui/material'
+import { AppBarEx, AppBarExProps } from '@xylabs/react-appbar'
+import { ReactElement } from 'react'
+
+import { ContextToolbar, SystemToolbar } from '../Toolbar'
+
+export interface ApplicationAppBarProps extends AppBarExProps {
+  contextToolbar?: ReactElement<ToolbarProps>
+  systemToolbar?: ReactElement<ToolbarProps>
+  responsive?: boolean
+}
+
+export const ApplicationAppBar: React.FC<ApplicationAppBarProps> = ({ systemToolbar, contextToolbar, responsive = true, ...props }) => {
+  return <AppBarEx systemToolbar={systemToolbar ?? <SystemToolbar />} contextToolbar={contextToolbar ?? <ContextToolbar />} position="sticky" responsive={responsive} {...props} />
+}

package/src/components/AppBar/index.ts

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

package/src/components/MobileSystemControls/SystemControls.stories.tsx

@@ -0,0 +1,50 @@
+/* eslint-disable import/no-internal-modules */
+import { ComponentStory, Meta } from '@storybook/react'
+import { ArchiveProvider, ArchivesProvider } from '@xyo-network/react-archive'
+import { ArchivistApiProvider } from '@xyo-network/react-archivist-api'
+import { NetworkMemoryProvider } from '@xyo-network/react-network'
+
+import { SystemControls } from './SystemControls'
+import { SystemControlsType } from './SystemControlsType'
+
+const StorybookEntry: Meta = {
+  argTypes: {},
+  component: SystemControls,
+  parameters: {
+    docs: {
+      page: null,
+    },
+  },
+  title: 'appbar/System/SystemControls',
+}
+
+const Template: ComponentStory<typeof SystemControls> = (props) => {
+  return (
+    <NetworkMemoryProvider>
+      <ArchivistApiProvider apiDomain="http://localhost:8080">
+        <ArchivesProvider>
+          <ArchiveProvider>
+            <SystemControls {...props} />
+          </ArchiveProvider>
+        </ArchivesProvider>
+      </ArchivistApiProvider>
+    </NetworkMemoryProvider>
+  )
+}
+
+const Left = Template.bind({})
+Left.args = {
+  systemControlsType: SystemControlsType.Left,
+  visible: true,
+}
+
+const Top = Template.bind({})
+Top.args = {
+  systemControlsType: SystemControlsType.WindowShade,
+  visible: true,
+}
+
+export { Left, Top }
+
+// eslint-disable-next-line import/no-default-export
+export default StorybookEntry

package/src/components/MobileSystemControls/SystemControls.tsx

@@ -0,0 +1,14 @@
+import { FlexCol } from '@xylabs/react-flexbox'
+
+import { SystemControlsRoot } from './SystemControlsRoot'
+import { SystemControlsUnstyledProps } from './SystemControlsUnstyled'
+
+const SystemControls: React.FC<SystemControlsUnstyledProps> = (props) => {
+  return (
+    <FlexCol>
+      <SystemControlsRoot {...props} />
+    </FlexCol>
+  )
+}
+
+export { SystemControls }

package/src/components/MobileSystemControls/SystemControlsRoot.tsx

@@ -0,0 +1,61 @@
+import { styled } from '@mui/material'
+
+import { SystemControlsType } from './SystemControlsType'
+import { SystemControlsUnstyled, SystemControlsUnstyledProps } from './SystemControlsUnstyled'
+
+const SystemControlsRoot = styled(SystemControlsUnstyled, { name: 'SystemControls', slot: 'Root' })<SystemControlsUnstyledProps>(({ theme }) => ({
+  // shared defaults
+  ['&']: {
+    '.toggle': {
+      backgroundColor: theme.palette.primary.main,
+    },
+    alignItems: 'start',
+    zIndex: 1,
+  },
+  // WindowShade System Controls styles
+  [`&.system-controls-type-${SystemControlsType.WindowShade}`]: {
+    '.control': {
+      borderRadius: '0 0 5px 5px',
+      flexDirection: 'row',
+      flexGrow: 1,
+      justifyContent: 'space-around',
+      padding: `${theme.spacing(2)} ${theme.spacing(2.5)}`,
+    },
+    '.controls': {
+      alignItems: 'stretch',
+      flexDirection: 'column',
+      flexGrow: 1,
+    },
+    '.toggle': {
+      borderRadius: '0 0 5px 5px',
+      padding: `${theme.spacing(0.5)} ${theme.spacing(1)}`,
+    },
+    flexDirection: 'row',
+    position: 'absolute',
+    top: 0,
+    width: '100%',
+  },
+  // Left System Control styles
+  [`&.system-controls-type-${SystemControlsType.Left}`]: {
+    '.control': {
+      alignItems: 'start',
+      flexDirection: 'column',
+      padding: `${theme.spacing(2)} ${theme.spacing(2.5)}`,
+    },
+    '.control-wrap': {
+      marginBottom: `${theme.spacing(2)}`,
+    },
+    '.toggle': {
+      borderRadius: '0 5px 5px 0',
+      padding: `${theme.spacing(1)} ${theme.spacing(0.5)}`,
+      writingMode: 'vertical-rl',
+    },
+    flexDirection: 'column',
+    left: 0,
+    position: 'fixed',
+    top: '30vh',
+    width: 'auto',
+  },
+}))
+
+export { SystemControlsRoot }

package/src/components/MobileSystemControls/SystemControlsType.ts

@@ -0,0 +1,5 @@
+export enum SystemControlsType {
+  Left = 'Left',
+  Right = 'Right',
+  WindowShade = 'WindowShade',
+}

package/src/components/MobileSystemControls/SystemControlsUnstyled.tsx

@@ -0,0 +1,49 @@
+import { Paper, Theme, useMediaQuery } from '@mui/material'
+import { FlexBoxProps, FlexCol, FlexRow } from '@xylabs/react-flexbox'
+import { ArchiveSelectEx, useArchive } from '@xyo-network/react-archive'
+import { NetworkSelectEx, useNetwork } from '@xyo-network/react-network'
+
+import { ControlText, SystemControl } from './controls'
+import { SystemControlsType } from './SystemControlsType'
+
+interface SystemControlsUnstyledProps extends FlexBoxProps {
+  visible?: boolean
+  systemControlsType?: SystemControlsType
+}
+
+const SystemControlsUnstyled: React.FC<SystemControlsUnstyledProps> = ({ systemControlsType = SystemControlsType.WindowShade, visible, ...props }) => {
+  const { network } = useNetwork()
+  const { archive } = useArchive()
+  const isSmall = useMediaQuery<Theme>((theme) => theme.breakpoints.down('sm'))
+
+  if (visible || isSmall) {
+    return (
+      <FlexCol {...props} className={`${props.className} system-controls-type-${systemControlsType}`}>
+        <SystemControl
+          systemControlsType={systemControlsType}
+          controlElement={
+            <>
+              <FlexRow className={'control-wrap'}>
+                <Paper variant="elevation" elevation={0}>
+                  <NetworkSelectEx responsive={false} className="network-ex" />
+                </Paper>
+              </FlexRow>
+              <FlexRow>
+                <Paper variant="elevation" elevation={0}>
+                  <ArchiveSelectEx />
+                </Paper>
+              </FlexRow>
+            </>
+          }
+        >
+          <ControlText value={`${network?.name} : ${archive ?? 'temp'} `} />
+        </SystemControl>
+      </FlexCol>
+    )
+  } else {
+    return <FlexCol />
+  }
+}
+
+export type { SystemControlsUnstyledProps }
+export { SystemControlsUnstyled }

package/src/components/MobileSystemControls/controls/SystemControl.tsx

@@ -0,0 +1,39 @@
+import { Collapse, CollapseProps } from '@mui/material'
+import { FlexBoxProps, FlexCol, FlexRow } from '@xylabs/react-flexbox'
+import { WithChildren } from '@xylabs/react-shared'
+import { useState } from 'react'
+
+import { SystemControlsType } from '../SystemControlsType'
+
+interface SystemControlProps extends FlexBoxProps {
+  controlElement: React.ReactNode
+  systemControlsType?: SystemControlsType
+}
+
+const SystemControl: React.FC<WithChildren<SystemControlProps>> = ({ children, controlElement, systemControlsType = SystemControlsType.WindowShade, ...props }) => {
+  const [toggleControls, setToggleControls] = useState(false)
+
+  let orientation: CollapseProps['orientation'] = 'vertical'
+
+  switch (systemControlsType) {
+    case SystemControlsType.Left: {
+      orientation = 'horizontal'
+      break
+    }
+  }
+
+  return (
+    <FlexRow className="controls" {...props}>
+      <Collapse in={toggleControls} orientation={orientation} timeout={500}>
+        <FlexRow bgcolor="primary.main" className="control">
+          {controlElement}
+        </FlexRow>
+      </Collapse>
+      <FlexCol style={{ cursor: 'pointer' }} onClick={() => setToggleControls(!toggleControls)}>
+        {children}
+      </FlexCol>
+    </FlexRow>
+  )
+}
+
+export { SystemControl }

package/src/components/MobileSystemControls/controls/SystemControlText.tsx

@@ -0,0 +1,18 @@
+import { Typography } from '@mui/material'
+import { FlexBoxProps, FlexCol } from '@xylabs/react-flexbox'
+
+interface SystemControlTextProps extends FlexBoxProps {
+  value?: string
+}
+
+const ControlText: React.FC<SystemControlTextProps> = ({ value, ...props }) => {
+  return (
+    <FlexCol className={`${props.className} toggle`} {...props}>
+      <Typography variant="caption" color="white" fontWeight="bold">
+        {value}
+      </Typography>
+    </FlexCol>
+  )
+}
+
+export { ControlText }

package/src/components/MobileSystemControls/controls/index.ts

@@ -0,0 +1,2 @@
+export * from './SystemControl'
+export * from './SystemControlText'

package/src/components/MobileSystemControls/index.ts

@@ -0,0 +1,3 @@
+export * from './SystemControls'
+export * from './SystemControlsType'
+export * from './SystemControlsUnstyled'

package/src/components/SearchBar/SearchBar.tsx

@@ -0,0 +1,34 @@
+import SearchIcon from '@mui/icons-material/Search'
+import { Paper, TextField } from '@mui/material'
+import { ButtonEx } from '@xylabs/react-button'
+import { FlexBoxProps, FlexRow } from '@xylabs/react-flexbox'
+import { useState } from 'react'
+
+export interface SearchBarProps extends FlexBoxProps {
+  onSearch?: (term?: string) => void
+}
+
+export const SearchBar: React.FC<SearchBarProps> = ({ defaultValue, onSearch, ...props }) => {
+  const [term, setTerm] = useState<string>()
+
+  return (
+    <FlexRow alignItems="stretch" {...props}>
+      <Paper variant="elevation" elevation={0} style={{ display: 'flex', overflow: 'hidden', width: '100%' }}>
+        <TextField
+          InputProps={{ color: 'secondary', style: { borderBottomRightRadius: 0, borderTopRightRadius: 0, borderWidth: 0 } }}
+          variant="outlined"
+          size="small"
+          defaultValue={defaultValue}
+          fullWidth
+          onChange={(event) => setTerm(event.target.value)}
+          onKeyDown={(event) => {
+            if (event.key === 'Enter') onSearch?.(term)
+          }}
+        />
+        <ButtonEx variant="contained" style={{ borderRadius: 0, borderTopLeftRadius: 0 }} color="secondary" onClick={() => onSearch?.(term)}>
+          <SearchIcon />
+        </ButtonEx>
+      </Paper>
+    </FlexRow>
+  )
+}

package/src/components/SearchBar/index.ts

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

package/src/components/SiteMenu/Menu.tsx

@@ -0,0 +1,37 @@
+import MenuIcon from '@mui/icons-material/Menu'
+import SettingsIcon from '@mui/icons-material/Settings'
+import { IconButton, List, SwipeableDrawer } from '@mui/material'
+import { FlexBoxProps, FlexRow } from '@xylabs/react-flexbox'
+import { useState } from 'react'
+
+import { SiteMenuListItem } from './MenuItems'
+
+export interface SiteMenuProps extends FlexBoxProps {
+  hideSettingsMenuItem?: boolean
+  side?: 'left' | 'right' | 'top' | 'bottom'
+}
+
+export const SiteMenu: React.FC<SiteMenuProps> = ({ side = 'right', children, ...props }) => {
+  const [open, setOpen] = useState(false)
+
+  return (
+    <FlexRow alignItems="stretch" {...props}>
+      <IconButton
+        size="small"
+        color="inherit"
+        onClick={() => {
+          setOpen(!open)
+        }}
+      >
+        <MenuIcon fontSize="large" />
+      </IconButton>
+      <SwipeableDrawer anchor={side} open={open} onClick={() => setOpen(false)} onKeyDown={() => setOpen(false)} onClose={() => setOpen(false)} onOpen={() => setOpen(true)}>
+        {children ?? (
+          <List>
+            <SiteMenuListItem primary="Settings" icon={<SettingsIcon />} to="/settings" />
+          </List>
+        )}
+      </SwipeableDrawer>
+    </FlexRow>
+  )
+}

package/src/components/SiteMenu/MenuItem.stories.tsx

@@ -0,0 +1,39 @@
+import { List } from '@mui/material'
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+
+import { SiteMenuListItem } from './MenuItems'
+
+const StorybookEntry = {
+  argTypes: {},
+  component: SiteMenuListItem,
+  parameters: {
+    docs: {
+      page: null,
+    },
+  },
+  title: 'appbar/SiteMenuListItem',
+} as ComponentMeta<typeof SiteMenuListItem>
+
+const Template: ComponentStory<typeof SiteMenuListItem> = (args) => {
+  return (
+    <List>
+      <SiteMenuListItem {...args} />
+    </List>
+  )
+}
+
+const Default = Template.bind({})
+Default.args = {
+  primary: 'Test',
+}
+
+const WithChildren = Template.bind({})
+WithChildren.args = {
+  children: <SiteMenuListItem primary="Test Child" />,
+  primary: 'Test',
+}
+
+export { Default, WithChildren }
+
+// eslint-disable-next-line import/no-default-export
+export default StorybookEntry

package/src/components/SiteMenu/MenuItems.tsx

@@ -0,0 +1,23 @@
+import { ListItem, ListItemIcon, ListItemProps, ListItemText, ListItemTextProps } from '@mui/material'
+import { ListItemButtonEx, ListItemButtonExProps } from '@xyo-network/react-shared'
+import { ReactNode } from 'react'
+import { To } from 'react-router-dom'
+
+export interface SiteMenuListItemProps extends ListItemProps {
+  primary: ListItemTextProps['primary']
+  to?: To
+  icon?: ReactNode
+  onButtonClick?: ListItemButtonExProps['onClick']
+}
+
+export const SiteMenuListItem: React.FC<SiteMenuListItemProps> = ({ style, children, primary, to, icon, onButtonClick, ...props }) => {
+  return (
+    <ListItem style={{ display: 'block', ...style }} {...props}>
+      <ListItemButtonEx to={to} onClick={onButtonClick}>
+        <ListItemIcon>{icon}</ListItemIcon>
+        <ListItemText primary={primary} />
+      </ListItemButtonEx>
+      {children}
+    </ListItem>
+  )
+}

package/src/components/SiteMenu/index.ts

@@ -0,0 +1,2 @@
+export * from './Menu'
+export * from './MenuItems'

package/src/components/Toolbar/Context/ContextToolbar.stories.tsx

@@ -0,0 +1,32 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+import { BrowserRouter } from 'react-router-dom'
+
+import { ContextToolbar } from './ContextToolbar'
+
+const StorybookEntry = {
+  argTypes: {},
+  component: ContextToolbar,
+  parameters: {
+    docs: {
+      page: null,
+    },
+  },
+  title: 'appbar/Toolbar/Context',
+} as ComponentMeta<typeof ContextToolbar>
+
+const Template: ComponentStory<typeof ContextToolbar> = (args) => (
+  <BrowserRouter>
+    <ContextToolbar {...args}></ContextToolbar>
+  </BrowserRouter>
+)
+
+const Default = Template.bind({})
+Default.args = {}
+
+const WithVersion = Template.bind({})
+WithVersion.args = { version: true }
+
+export { Default, WithVersion }
+
+// eslint-disable-next-line import/no-default-export
+export default StorybookEntry

package/src/components/Toolbar/Context/ContextToolbar.tsx

@@ -0,0 +1,17 @@
+import { Toolbar, ToolbarProps } from '@mui/material'
+import { To } from 'react-router-dom'
+
+import { XyoLogoLinkEx } from './XyoLogoLinkEx'
+
+export interface ContextToolbarProps extends ToolbarProps {
+  logoTo?: To
+  version?: boolean
+}
+
+export const ContextToolbar: React.FC<ContextToolbarProps> = ({ logoTo = '/', version = false, ...props }) => {
+  return (
+    <Toolbar {...props}>
+      <XyoLogoLinkEx version={version} to={logoTo} />
+    </Toolbar>
+  )
+}

package/src/components/Toolbar/Context/XyoLogo.tsx

@@ -0,0 +1,7 @@
+import { useTheme } from '@mui/material'
+
+export const XyoLogo: React.FC<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>> = (props) => {
+  const theme = useTheme()
+  const logoUrl = theme.palette.mode === 'dark' ? 'https://cdn.xy.company/img/brand/XYO/XYO_icon_white.svg' : 'https://cdn.xy.company/img/brand/XYO/XYO_icon_white.svg'
+  return <img src={logoUrl} {...props} />
+}

package/src/components/Toolbar/Context/XyoLogoLinkEx.tsx

@@ -0,0 +1,36 @@
+import { Typography, useTheme } from '@mui/material'
+import { FlexRow } from '@xylabs/react-flexbox'
+import { LinkEx, LinkExProps } from '@xylabs/react-link'
+
+import { XyoLogo } from './XyoLogo'
+
+export interface XyoLogoLinkExProps extends LinkExProps {
+  version?: boolean | string
+}
+
+export const XyoLogoLinkEx: React.FC<XyoLogoLinkExProps> = ({ to = '/', version = false, ...props }) => {
+  const theme = useTheme()
+  return (
+    <LinkEx to={to} {...props}>
+      <FlexRow paddingX="4px">
+        <XyoLogo height="40" width="43" />
+        {version ? (
+          <Typography
+            position="absolute"
+            borderRadius={1}
+            right={6}
+            color={theme.palette.getContrastText(theme.palette.text.primary)}
+            bottom={0}
+            bgcolor={theme.palette.text.primary}
+            paddingX="2px"
+            lineHeight={1}
+            variant="caption"
+            border={`1px ${theme.palette.getContrastText(theme.palette.primary.main)} solid`}
+          >
+            {typeof version === 'string' ? version : '2.0'}
+          </Typography>
+        ) : null}
+      </FlexRow>
+    </LinkEx>
+  )
+}

package/src/components/Toolbar/Context/index.ts

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

package/src/components/Toolbar/System/SystemToolbar.stories.tsx

@@ -0,0 +1,90 @@
+/* eslint-disable import/no-internal-modules */
+import { List } from '@mui/material'
+import { ComponentStory, Meta } from '@storybook/react'
+import { BrowserRouter } from 'react-router-dom'
+
+import { WrappedAuthComponent } from '../../../../../../.storybook'
+import { ArchiveProvider, ArchivesProvider } from '../../../../../archive/src'
+import { ArchivistApiProvider } from '../../../../../archivist-api/src'
+import { AuthProvider, AuthState } from '../../../../../auth/src'
+import { NetworkMemoryProvider } from '../../../../../network/src'
+import { TypographyEx } from '../../../../../shared/src'
+import { SiteMenuListItem } from '../../SiteMenu'
+import { SystemToolbar } from './SystemToolbar'
+
+const StorybookEntry: Meta = {
+  component: SystemToolbar,
+  parameters: {
+    docs: {
+      page: null,
+    },
+  },
+  title: 'appbar/Toolbar/System',
+}
+
+const Template: ComponentStory<typeof SystemToolbar> = (args) => (
+  <ArchivistApiProvider apiDomain="https://beta.api.archivist.xyo.network">
+    <ArchivesProvider>
+      <BrowserRouter>
+        <NetworkMemoryProvider>
+          <ArchiveProvider>
+            <SystemToolbar {...args} />
+          </ArchiveProvider>
+        </NetworkMemoryProvider>
+      </BrowserRouter>
+    </ArchivesProvider>
+  </ArchivistApiProvider>
+)
+
+const TemplateWithAuthContext: ComponentStory<WrappedAuthComponent> = ({ authState }) => (
+  <AuthProvider authState={authState as AuthState}>
+    <ArchivistApiProvider apiDomain="https://beta.api.archivist.xyo.network">
+      <ArchivesProvider>
+        <BrowserRouter>
+          <NetworkMemoryProvider>
+            <ArchiveProvider>
+              <SystemToolbar
+                menuItems={
+                  <List>
+                    <SiteMenuListItem primary="Hello" />
+                  </List>
+                }
+              />
+            </ArchiveProvider>
+          </NetworkMemoryProvider>
+        </BrowserRouter>
+      </ArchivesProvider>
+    </ArchivistApiProvider>
+  </AuthProvider>
+)
+
+const Default = Template.bind({})
+Default.args = {}
+
+const WithLoggedInAccount = TemplateWithAuthContext.bind({})
+WithLoggedInAccount.args = {
+  authState: {
+    loggedInAccount: 'none@none.com',
+  },
+}
+
+const NeedsReAuth = TemplateWithAuthContext.bind({})
+NeedsReAuth.args = {
+  authState: {
+    reAuthenticate: true,
+  },
+}
+
+const PrecedingChildren = Template.bind({})
+PrecedingChildren.args = {
+  precedingChildren: (
+    <TypographyEx variant="body1" mx={0.5}>
+      Preceding Child Component
+    </TypographyEx>
+  ),
+}
+
+export { Default, NeedsReAuth, PrecedingChildren, WithLoggedInAccount }
+
+// eslint-disable-next-line import/no-default-export
+export default StorybookEntry

package/src/components/Toolbar/System/SystemToolbar.tsx

@@ -0,0 +1,58 @@
+import { Paper, Toolbar, ToolbarProps } from '@mui/material'
+import { SelectExProps } from '@xylabs/react-common'
+import { FlexRow } from '@xylabs/react-flexbox'
+import { DarkModeIconButton } from '@xyo-network/react-app-settings'
+import { ArchiveSelectEx } from '@xyo-network/react-archive'
+import { AuthStatusIconButton } from '@xyo-network/react-auth'
+import { NetworkSelectEx, NetworkSelectExProps } from '@xyo-network/react-network'
+import { ReactNode } from 'react'
+
+import { SiteMenu } from '../../SiteMenu'
+
+export interface SystemToolbarProps extends ToolbarProps {
+  networkSelectProps?: NetworkSelectExProps
+  archiveSelectProps?: SelectExProps<string>
+  hideNetworkSelect?: boolean
+  hideArchiveSelect?: boolean
+  darkModeButton?: boolean
+  authButton?: boolean
+  menuItems?: ReactNode
+  precedingChildren?: ReactNode
+}
+
+export const SystemToolbar: React.FC<SystemToolbarProps> = ({
+  children,
+  precedingChildren,
+  networkSelectProps,
+  archiveSelectProps,
+  hideNetworkSelect,
+  hideArchiveSelect,
+  darkModeButton = false,
+  authButton = false,
+  menuItems,
+  ...props
+}) => {
+  return (
+    <Toolbar {...props}>
+      {precedingChildren}
+      {hideNetworkSelect ? null : (
+        <FlexRow marginX={0.5}>
+          <Paper variant="elevation">
+            <NetworkSelectEx fullWidth {...networkSelectProps} />
+          </Paper>
+        </FlexRow>
+      )}
+      {hideArchiveSelect ? null : (
+        <FlexRow marginX={0.5}>
+          <Paper variant="elevation">
+            <ArchiveSelectEx fullWidth {...archiveSelectProps} />
+          </Paper>
+        </FlexRow>
+      )}
+      {children}
+      {authButton ? <AuthStatusIconButton color="inherit" /> : null}
+      {darkModeButton ? <DarkModeIconButton color="inherit" /> : null}
+      {menuItems ? <SiteMenu>{menuItems}</SiteMenu> : null}
+    </Toolbar>
+  )
+}

package/src/components/Toolbar/System/index.ts

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

package/src/components/Toolbar/index.ts

@@ -0,0 +1,2 @@
+export * from './Context'
+export * from './System'

package/src/components/index.ts

@@ -0,0 +1,5 @@
+export * from './AppBar'
+export * from './MobileSystemControls'
+export * from './SearchBar'
+export * from './SiteMenu'
+export * from './Toolbar'

package/src/index.ts

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