@xyo-network/react-appbar 2.23.7

package/package.json

@@ -0,0 +1,116 @@
+{
+  "name": "@xyo-network/react-appbar",
+  "author": {
+    "email": "support@xyo.network",
+    "name": "XYO Development Team",
+    "url": "https://xyo.network"
+  },
+  "bugs": {
+    "email": "support@xyo.network",
+    "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/issues"
+  },
+  "workspaces": [
+    "packages/*"
+  ],
+  "dependencies": {
+    "@emotion/react": "^11.9.0",
+    "@emotion/styled": "^11.8.1",
+    "@mui/icons-material": "^5.8.0",
+    "@mui/material": "^5.8.1",
+    "@xylabs/sdk-react": "^2.12.7",
+    "@xyo-network/core": "^2.20.33",
+    "@xyo-network/react-archive": "^2.23.7",
+    "@xyo-network/react-archivist-api": "^2.23.7",
+    "@xyo-network/react-auth": "^2.23.7",
+    "@xyo-network/react-network": "^2.23.7",
+    "@xyo-network/react-shared": "^2.23.7",
+    "@xyo-network/react-theme": "^2.23.7",
+    "lodash": "^4.17.21",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
+    "react-router-dom": "^6.3.0",
+    "tslib": "^2.4.0",
+    "typedoc": "^0.22.15"
+  },
+  "description": "Common React library for all XYO projects that use React",
+  "devDependencies": {
+    "@babel/core": "^7.18.0",
+    "@babel/preset-env": "^7.18.0",
+    "@storybook/addons": "^6.5.4",
+    "@storybook/api": "^6.5.4",
+    "@storybook/components": "^6.5.4",
+    "@storybook/core-events": "^6.5.4",
+    "@storybook/react": "^6.5.4",
+    "@storybook/theming": "^6.5.4",
+    "@types/lodash": "^4.14.182",
+    "@xylabs/sdk-react": "^2.12.7",
+    "@xylabs/ts-scripts": "^1.0.66",
+    "@xylabs/tsconfig": "^1.0.13",
+    "axios": "^0.27.2",
+    "storybook-dark-mode": "^1.1.0",
+    "typescript": "^4.6.4"
+  },
+  "browser": "dist/esm/index.js",
+  "docs": "dist/docs.json",
+  "exports": {
+    ".": {
+      "node": {
+        "import": "./dist/esm/index.js",
+        "require": "./dist/cjs/index.js"
+      },
+      "browser": {
+        "import": "./dist/esm/index.js",
+        "require": "./dist/cjs/index.js"
+      },
+      "default": "./dist/esm/index.js"
+    },
+    "./dist/docs.json": {
+      "default": "./dist/docs.json"
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "homepage": "https://xyo.network",
+  "keywords": [
+    "xyo",
+    "utility",
+    "typescript",
+    "react"
+  ],
+  "license": "LGPL-3.0",
+  "peerDependencies": {
+    "axios": ">0.26",
+    "typedoc": "^0.22.13"
+  },
+  "peerDependenciesMeta": {
+    "typedoc": {
+      "optional": true
+    }
+  },
+  "resolutions": {
+    "@storybook/react/webpack": "^5",
+    "bn.js": "^5.2.0",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
+    "webpack": "^5"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js.git"
+  },
+  "scripts": {
+    "deploy": "yarn deploy3",
+    "lint-pkg": "npmPkgJsonLint .",
+    "build": "yarn clean && tsc -p tsconfig.build.cjs.json && tsc -p tsconfig.build.esm.json && yarn gen:docs",
+    "gen:docs": "typedoc ./src/index.ts --json ./dist/docs.json --tsconfig ./tsconfig.json",
+    "license": "yarn license-checker --exclude \"MIT, ISC, Apache-2.0, BSD, BSD-2-Clause, CC-BY-4.0, Unlicense, CC-BY-3.0, CC0-1.0\""
+  },
+  "sideEffects": false,
+  "types": "dist/esm/index.d.ts",
+  "version": "2.23.7",
+  "packageManager": "yarn@3.1.1"
+}

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

@@ -0,0 +1,45 @@
+import { ComponentMeta, ComponentStory } 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 { BrowserRouter } from 'react-router-dom'
+
+import { SearchBar } from '../SearchBar'
+import { SystemToolbar } from '../Toolbar'
+import { ApplicationAppBar } from './Application'
+
+const StorybookEntry = {
+  argTypes: {},
+  component: ApplicationAppBar,
+  parameters: {
+    docs: {
+      page: null,
+    },
+  },
+  title: 'AppBar/Application',
+} as ComponentMeta<typeof ApplicationAppBar>
+
+const Template: ComponentStory<typeof ApplicationAppBar> = (args) => (
+  <BrowserRouter>
+    <NetworkMemoryProvider>
+      <ArchiveProvider>
+        <ArchivistApiProvider apiDomain="https://beta.api.archivist.xyo.network">
+          <ArchivesProvider>
+            <ApplicationAppBar {...args}></ApplicationAppBar>
+          </ArchivesProvider>
+        </ArchivistApiProvider>
+      </ArchiveProvider>
+    </NetworkMemoryProvider>
+  </BrowserRouter>
+)
+
+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 /> }
+
+export { Default, WithSearchBar }
+
+// eslint-disable-next-line import/no-default-export
+export default StorybookEntry

package/src/components/AppBar/Application.tsx

@@ -0,0 +1,28 @@
+import { AppBar, AppBarProps, Container, Toolbar, ToolbarProps, useMediaQuery, useTheme } from '@mui/material'
+import { FlexGrowRow, FlexRow } from '@xylabs/sdk-react'
+import React, { ReactElement } from 'react'
+
+import { ContextToolbar, SystemToolbar } from '../Toolbar'
+
+export interface ApplicationAppBarProps extends AppBarProps {
+  contextToolbar?: ReactElement<ToolbarProps>
+  systemToolbar?: ReactElement<ToolbarProps>
+  responsive?: boolean
+}
+
+export const ApplicationAppBar: React.FC<ApplicationAppBarProps> = ({ systemToolbar, contextToolbar, children, responsive = true, ...props }) => {
+  const { breakpoints } = useTheme()
+  const belowSm = useMediaQuery(breakpoints.down('sm'))
+  return (
+    <AppBar position="sticky" {...props}>
+      <Container maxWidth="xl" disableGutters>
+        <FlexRow flexWrap="nowrap" justifyContent="flex-start">
+          {contextToolbar ?? <ContextToolbar version />}
+          <FlexGrowRow>{belowSm && responsive ? null : children}</FlexGrowRow>
+          {systemToolbar ?? <SystemToolbar />}
+        </FlexRow>
+        {belowSm && children && responsive ? <Toolbar>{children}</Toolbar> : null}
+      </Container>
+    </AppBar>
+  )
+}

package/src/components/AppBar/index.ts

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

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

@@ -0,0 +1,47 @@
+import { ComponentStory, Meta } from '@storybook/react'
+import { 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: 'System/SystemControls',
+}
+
+const Template: ComponentStory<typeof SystemControls> = (props) => {
+  return (
+    <NetworkMemoryProvider>
+      <ArchivistApiProvider apiDomain="http://localhost:8080">
+        <ArchivesProvider>
+          <SystemControls {...props} />
+        </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/sdk-react'
+
+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,45 @@
+import { Theme, useMediaQuery } from '@mui/material'
+import { FlexBoxProps, FlexCol, FlexRow } from '@xylabs/sdk-react'
+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 paper className={'control-wrap'}>
+                <NetworkSelectEx responsive={false} className="network-ex" />
+              </FlexRow>
+              <FlexRow paper>
+                <ArchiveSelectEx />
+              </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,36 @@
+import { Collapse, CollapseProps } from '@mui/material'
+import { FlexBoxProps, FlexCol, FlexRow, WithChildren } from '@xylabs/sdk-react'
+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 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/sdk-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

@@ -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,33 @@
+import SearchIcon from '@mui/icons-material/Search'
+import { Paper, TextField } from '@mui/material'
+import { ButtonEx, FlexBoxProps, FlexRow } from '@xylabs/sdk-react'
+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 style={{ display: 'flex', flexGrow: 1, overflow: 'hidden' }}>
+        <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/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: '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,35 @@
+import { Typography, useTheme } from '@mui/material'
+import { FlexRow, LinkEx, LinkExProps } from '@xylabs/sdk-react'
+
+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/SiteMenu.tsx

@@ -0,0 +1,77 @@
+import { Menu as MenuIcon } from '@mui/icons-material'
+import { Menu, MenuItem } from '@mui/material'
+import { FlexBoxProps, FlexRow, LinkEx } from '@xylabs/sdk-react'
+import { useRef, useState } from 'react'
+import { To, useNavigate } from 'react-router-dom'
+
+export interface SiteMenuItem {
+  name: string
+  to?: To
+  href?: string
+  onClick?: () => void
+}
+
+export interface SiteMenuProps extends FlexBoxProps {
+  hideSettingsMenuItem?: boolean
+  menuItems?: SiteMenuItem[]
+}
+
+export const SiteMenu: React.FC<SiteMenuProps> = ({ hideSettingsMenuItem, menuItems, ...props }) => {
+  const [menuElement, setMenuElement] = useState<HTMLButtonElement | null>(null)
+  const open = Boolean(menuElement)
+  const navigate = useNavigate()
+
+  const handleMenuClose = () => {
+    setMenuElement(null)
+  }
+
+  const ref = useRef(null)
+
+  return (
+    <FlexRow alignItems="stretch" {...props}>
+      <LinkEx
+        color="inherit"
+        onClick={() => {
+          setMenuElement(ref.current)
+        }}
+      >
+        <div style={{ alignItems: 'center', cursor: 'pointer', display: 'flex' }} ref={ref}>
+          <MenuIcon fontSize="large" />
+        </div>
+      </LinkEx>
+      <Menu anchorEl={menuElement} open={open} onClose={handleMenuClose}>
+        {menuItems?.map(({ name, to, href, onClick }) => {
+          return (
+            <MenuItem
+              key={name}
+              onClick={() => {
+                if (onClick) {
+                  onClick()
+                } else if (to) {
+                  navigate(to)
+                } else if (href) {
+                  window.open(href)
+                }
+                handleMenuClose()
+              }}
+              disableRipple
+            >
+              {name}
+            </MenuItem>
+          )
+        })}
+        {hideSettingsMenuItem ? null : (
+          <MenuItem
+            onClick={() => {
+              navigate('/settings')
+              handleMenuClose()
+            }}
+            disableRipple
+          >
+            Settings
+          </MenuItem>
+        )}
+      </Menu>
+    </FlexRow>
+  )
+}