@xyo-network/react-appbar 7.5.8 → 7.5.12

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

@@ -1,37 +0,0 @@
-import type { Meta, StoryFn } from '@storybook/react-vite'
-import { NetworkMemoryProvider } from '@xyo-network/react-network'
-import React from 'react'
-
-import { SystemControls } from './SystemControls.tsx'
-import { SystemControlsType } from './SystemControlsType.ts'
-
-const StorybookEntry: Meta = {
-  argTypes: {},
-  component: SystemControls,
-  parameters: { docs: { page: null } },
-  title: 'appbar/System/SystemControls',
-}
-
-const Template: StoryFn<typeof SystemControls> = (props) => {
-  return (
-    <NetworkMemoryProvider>
-      <SystemControls {...props} />
-    </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 }
-
-export default StorybookEntry

package/src/components/MobileSystemControls/SystemControls.tsx

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

package/src/components/MobileSystemControls/SystemControlsRoot.tsx

@@ -1,58 +0,0 @@
-import { styled } from '@mui/material'
-
-import { SystemControlsType } from './SystemControlsType.ts'
-import type { SystemControlsUnstyledProps } from './SystemControlsUnstyled.tsx'
-import { SystemControlsUnstyled } from './SystemControlsUnstyled.tsx'
-
-const SystemControlsRoot = styled(SystemControlsUnstyled, { name: 'SystemControls', slot: 'Root' })<SystemControlsUnstyledProps>(({ theme }) => ({
-  // shared defaults
-  ['&']: {
-    '.toggle': { backgroundColor: theme.vars.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

@@ -1,10 +0,0 @@
-import type { EnumValue } from '@xylabs/sdk-js'
-import { Enum } from '@xylabs/sdk-js'
-
-export const SystemControlsType = Enum({
-  Left: 'Left',
-  Right: 'Right',
-  WindowShade: 'WindowShade',
-})
-
-export type SystemControlsType = EnumValue<typeof SystemControlsType>

package/src/components/MobileSystemControls/SystemControlsUnstyled.tsx

@@ -1,42 +0,0 @@
-import type { Theme } from '@mui/material'
-import { Paper, useMediaQuery } from '@mui/material'
-import type { FlexBoxProps } from '@xylabs/react-flexbox'
-import { FlexCol, FlexRow } from '@xylabs/react-flexbox'
-import { NetworkSelectEx } from '@xyo-network/react-network'
-import React from 'react'
-
-import { SystemControl } from './controls/index.ts'
-import { SystemControlsType } from './SystemControlsType.ts'
-
-interface SystemControlsUnstyledProps extends FlexBoxProps {
-  systemControlsType?: SystemControlsType
-  visible?: boolean
-}
-
-const SystemControlsUnstyled: React.FC<SystemControlsUnstyledProps> = ({
-  visible,
-  systemControlsType = SystemControlsType.WindowShade,
-  ...props
-}) => {
-  const isSmall = useMediaQuery<Theme>(theme => theme.breakpoints.down('sm'))
-
-  return visible || isSmall
-    ? (
-        <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>
-            )}
-          />
-        </FlexCol>
-      )
-    : <FlexCol />
-}
-
-export type { SystemControlsUnstyledProps }
-export { SystemControlsUnstyled }

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

@@ -1,46 +0,0 @@
-import type { CollapseProps } from '@mui/material'
-import { Collapse } from '@mui/material'
-import type { FlexBoxProps } from '@xylabs/react-flexbox'
-import { FlexCol, FlexRow } from '@xylabs/react-flexbox'
-import type { PropsWithChildren } from 'react'
-import React, { useState } from 'react'
-
-import { SystemControlsType } from '../SystemControlsType.ts'
-
-interface SystemControlProps extends FlexBoxProps {
-  controlElement: React.ReactNode
-  systemControlsType?: SystemControlsType
-}
-
-const SystemControl: React.FC<PropsWithChildren<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

@@ -1,20 +0,0 @@
-import { Typography } from '@mui/material'
-import type { FlexBoxProps } from '@xylabs/react-flexbox'
-import { FlexCol } from '@xylabs/react-flexbox'
-import React from 'react'
-
-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

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

package/src/components/MobileSystemControls/index.ts

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

package/src/components/SearchBar/SearchBar.tsx

@@ -1,55 +0,0 @@
-import { Search as SearchIcon } from '@mui/icons-material'
-import { Paper, TextField } from '@mui/material'
-import { ButtonEx } from '@xylabs/react-button'
-import type { FlexBoxProps } from '@xylabs/react-flexbox'
-import { FlexRow } from '@xylabs/react-flexbox'
-import React, { 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
-          variant="outlined"
-          size="small"
-          defaultValue={defaultValue}
-          fullWidth
-          onChange={event => setTerm(event.target.value)}
-          onKeyDown={(event) => {
-            if (event.key === 'Enter') onSearch?.(term)
-          }}
-          slotProps={{
-            input: {
-              color: 'secondary',
-              style: {
-                borderBottomRightRadius: 0, borderTopRightRadius: 0, borderWidth: 0,
-              },
-            },
-          }}
-        />
-        <ButtonEx
-          variant="contained"
-          style={{ borderRadius: 0, borderTopLeftRadius: 0 }}
-          color="secondary"
-          onClick={() => onSearch?.(term)}
-        >
-          <SearchIcon />
-        </ButtonEx>
-      </Paper>
-    </FlexRow>
-  )
-}

package/src/components/SearchBar/index.ts

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

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

@@ -1,28 +0,0 @@
-import type { Meta, StoryFn } from '@storybook/react-vite'
-import React from 'react'
-import { BrowserRouter } from 'react-router-dom'
-
-import { XyoContextToolbar } from './ContextToolbar.tsx'
-
-const StorybookEntry = {
-  argTypes: {},
-  component: XyoContextToolbar,
-  parameters: { docs: { page: null } },
-  title: 'appbar/Toolbar/XyoContextToolbar',
-} as Meta<typeof XyoContextToolbar>
-
-const Template: StoryFn<typeof XyoContextToolbar> = args => (
-  <BrowserRouter>
-    <XyoContextToolbar {...args}></XyoContextToolbar>
-  </BrowserRouter>
-)
-
-const Default = Template.bind({})
-Default.args = {}
-
-const WithVersion = Template.bind({})
-WithVersion.args = { version: true }
-
-export { Default, WithVersion }
-
-export default StorybookEntry

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

@@ -1,21 +0,0 @@
-import { Toolbar } from '@mui/material'
-import type { ContextToolbarProps } from '@xylabs/react-appbar'
-import type { ReactNode } from 'react'
-import React from 'react'
-
-import { LogoLinkEx } from './LogoLinkEx.tsx'
-
-export interface XyoContextToolbarProps extends ContextToolbarProps {
-  logo?: ReactNode
-}
-
-export const XyoContextToolbar: React.FC<XyoContextToolbarProps> = ({
-  children, logo, logoTo = '/', version = false, ...props
-}) => {
-  return (
-    <Toolbar {...props}>
-      <LogoLinkEx logo={logo} version={version} to={logoTo} />
-      {children}
-    </Toolbar>
-  )
-}

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

@@ -1,7 +0,0 @@
-import React from 'react'
-
-export const Logo: React.FC<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>> = (props) => {
-  const logoUrl
-    = 'https://cdn.xy.company/img/brand/XYO/XYO_icon_white.svg'
-  return <img src={logoUrl} {...props} />
-}

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

@@ -1,45 +0,0 @@
-import { Typography, useTheme } from '@mui/material'
-import { FlexRow } from '@xylabs/react-flexbox'
-import type { LinkExProps } from '@xylabs/react-link'
-import { LinkEx } from '@xylabs/react-link'
-import { assertEx } from '@xylabs/sdk-js'
-import React from 'react'
-
-import { Logo } from './Logo.tsx'
-
-export type LogoLinkExProps = LinkExProps & {
-  logo?: React.ReactNode
-  version?: boolean | string
-}
-
-export const LogoLinkEx: React.FC<LogoLinkExProps> = ({
-  logo, to = '/', href, version = false, ...props
-}) => {
-  const theme = useTheme()
-  assertEx(href === undefined, () => 'href is not supported')
-  return (
-    <LinkEx to={to} sx={{ 'opacity': 0.8, '&:hover': { opacity: 1 } }} {...props}>
-      <FlexRow paddingX="4px">
-        {logo ?? <Logo height="40" width="43" />}
-        {version === undefined
-          ? null
-          : (
-              <Typography
-                position="absolute"
-                borderRadius={1}
-                right={6}
-                color={theme.vars.palette.primary.main}
-                bottom={0}
-                bgcolor={theme.vars.palette.primary.contrastText}
-                paddingX="2px"
-                lineHeight={1}
-                variant="caption"
-                border={`1px ${theme.vars.palette.primary.main} solid`}
-              >
-                {typeof version === 'string' ? version : '2.1'}
-              </Typography>
-            )}
-      </FlexRow>
-    </LinkEx>
-  )
-}

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

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

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

@@ -1,59 +0,0 @@
-import { List, Typography } from '@mui/material'
-import type { Meta, StoryFn } from '@storybook/react-vite'
-import { MenuListItemContainer } from '@xylabs/react-appbar'
-import { NetworkMemoryProvider } from '@xyo-network/react-network'
-import type { SyntheticEvent } from 'react'
-import React from 'react'
-import { BrowserRouter } from 'react-router-dom'
-
-import { XyoSystemToolbar } from './SystemToolbar.tsx'
-
-const DefaultMenu = (
-  <List>
-    <MenuListItemContainer primary="Hello" />
-    <MenuListItemContainer
-      primary="Click and Keep Open"
-      onClick={(event: SyntheticEvent) => {
-        event.stopPropagation()
-      }}
-    />
-  </List>
-)
-
-const StorybookEntry: Meta = {
-  component: XyoSystemToolbar,
-  parameters: { docs: { page: null } },
-  title: 'appbar/Toolbar/System',
-}
-
-const Template: StoryFn<typeof XyoSystemToolbar> = args => (
-  <BrowserRouter>
-    <NetworkMemoryProvider>
-      <XyoSystemToolbar {...args} />
-    </NetworkMemoryProvider>
-  </BrowserRouter>
-)
-
-const Default = Template.bind({})
-Default.args = {}
-
-const PrecedingChildren = Template.bind({})
-PrecedingChildren.args = {
-  precedingChildren: (
-    <Typography variant="body1" mx={0.5}>
-      Preceding Child Component
-    </Typography>
-  ),
-}
-
-const WithOnMenuToggle = Template.bind({})
-WithOnMenuToggle.args = {
-  menuItems: DefaultMenu,
-  onMenuToggle: state => console.log(state),
-}
-
-export {
-  Default, PrecedingChildren, WithOnMenuToggle,
-}
-
-export default StorybookEntry

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

@@ -1,43 +0,0 @@
-import { Paper } from '@mui/material'
-import {
-  type SiteMenuProps, SystemToolbar, type SystemToolbarProps,
-} from '@xylabs/react-appbar'
-import { FlexRow } from '@xylabs/react-flexbox'
-import type { NetworkSelectExProps } from '@xyo-network/react-network'
-import { NetworkSelectEx } from '@xyo-network/react-network'
-import type { ReactNode } from 'react'
-import React from 'react'
-
-export interface XyoSystemToolbarProps extends SystemToolbarProps {
-  darkModeButton?: boolean
-  developerMode?: boolean
-  hideNetworkSelect?: boolean
-  menuItems?: ReactNode
-  networkSelectProps?: NetworkSelectExProps
-  onMenuToggle?: SiteMenuProps['onMenuToggle']
-  precedingChildren?: ReactNode
-}
-
-export const XyoSystemToolbar: React.FC<XyoSystemToolbarProps> = ({
-  children,
-  hideNetworkSelect,
-  networkSelectProps,
-  precedingChildren,
-  ...props
-}) => {
-  return (
-    <SystemToolbar {...props}>
-      {precedingChildren}
-      {hideNetworkSelect
-        ? null
-        : (
-            <FlexRow marginX={0.5}>
-              <Paper variant="elevation">
-                <NetworkSelectEx fullWidth {...networkSelectProps} />
-              </Paper>
-            </FlexRow>
-          )}
-      {children}
-    </SystemToolbar>
-  )
-}

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

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

package/src/components/Toolbar/index.ts

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

package/src/components/index.ts

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

package/src/global.d.ts

@@ -1 +0,0 @@
-import '@mui/material/themeCssVarsAugmentation'

package/src/index.ts

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