@xyo-network/react-appbar 3.0.2 → 3.0.3

package/src/components/CollapsibleDrawer/CollapseToggle.tsx

@@ -8,7 +8,9 @@ import { VscArrowSmallLeft, VscArrowSmallRight } from 'react-icons/vsc'
 import { useCollapsible } from '../../contexts/index.ts'
 
 export const CollapseToggleFlex: React.FC<FlexBoxProps> = (props) => {
-  const { collapse, setCollapse, setCollapseEnd } = useCollapsible()
+  const {
+    collapse, setCollapse, setCollapseEnd,
+  } = useCollapsible()
   const [hover, setHover] = useState(false)
   const theme = useTheme()
 

package/src/components/CollapsibleDrawer/CollapsibleDrawer.tsx

@@ -1,11 +1,15 @@
 import type { CollapseProps } from '@mui/material'
-import { Collapse, styled, useTheme } from '@mui/material'
+import {
+  Collapse, styled, useTheme,
+} from '@mui/material'
 import type { WithChildren } from '@xylabs/react-shared'
 import React from 'react'
 
 import { useCollapsible } from '../../contexts/index.ts'
 
-export const CollapsibleDrawer: React.FC<WithChildren<CollapseProps>> = ({ children, sx, ...props }) => {
+export const CollapsibleDrawer: React.FC<WithChildren<CollapseProps>> = ({
+  children, sx, ...props
+}) => {
   const { collapse, setCollapseEnd } = useCollapsible()
   const theme = useTheme()
 

package/src/components/CollapsibleDrawer/storyExampleMenuData.tsx

@@ -46,9 +46,15 @@ export const menuDataTop: MenuListItemProps[] = [
     icon: <VscServer fontSize="body1" />,
     primary: 'Archives',
     subNavListItems: [
-      { icon: <VscDashboard fontSize="body2" />, primary: 'Dashboard', to: '', tooltip: 'View data for all archives on this network.' },
-      { icon: <VscAdd fontSize="body2" />, primary: 'Create Archive', to: '', tooltip: 'Create a new archive on this network.' },
-      { icon: <VscTable fontSize="body2" />, primary: 'Archive Table', to: '', tooltip: 'View all archives on this network as a table.' },
+      {
+        icon: <VscDashboard fontSize="body2" />, primary: 'Dashboard', to: '', tooltip: 'View data for all archives on this network.',
+      },
+      {
+        icon: <VscAdd fontSize="body2" />, primary: 'Create Archive', to: '', tooltip: 'Create a new archive on this network.',
+      },
+      {
+        icon: <VscTable fontSize="body2" />, primary: 'Archive Table', to: '', tooltip: 'View all archives on this network as a table.',
+      },
     ],
     to: '',
     tooltip: 'The most recent blocks seen in the in temp archive on your current network.',

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

@@ -8,11 +8,7 @@ import { SystemControlsType } from './SystemControlsType.ts'
 const StorybookEntry: Meta = {
   argTypes: {},
   component: SystemControls,
-  parameters: {
-    docs: {
-      page: null,
-    },
-  },
+  parameters: { docs: { page: null } },
   title: 'appbar/System/SystemControls',
 }
 

package/src/components/MobileSystemControls/SystemControlsRoot.tsx

@@ -7,9 +7,7 @@ import { SystemControlsUnstyled } from './SystemControlsUnstyled.tsx'
 const SystemControlsRoot = styled(SystemControlsUnstyled, { name: 'SystemControls', slot: 'Root' })<SystemControlsUnstyledProps>(({ theme }) => ({
   // shared defaults
   ['&']: {
-    '.toggle': {
-      backgroundColor: theme.palette.primary.main,
-    },
+    '.toggle': { backgroundColor: theme.palette.primary.main },
     'alignItems': 'start',
     'zIndex': 1,
   },
@@ -43,9 +41,7 @@ const SystemControlsRoot = styled(SystemControlsUnstyled, { name: 'SystemControl
       flexDirection: 'column',
       padding: `${theme.spacing(2)} ${theme.spacing(2.5)}`,
     },
-    '.control-wrap': {
-      marginBottom: `${theme.spacing(2)}`,
-    },
+    '.control-wrap': { marginBottom: `${theme.spacing(2)}` },
     '.toggle': {
       borderRadius: '0 5px 5px 0',
       padding: `${theme.spacing(1)} ${theme.spacing(0.5)}`,

package/src/components/SearchBar/SearchBar.tsx

@@ -9,14 +9,27 @@ export interface SearchBarProps extends FlexBoxProps {
   onSearch?: (term?: string) => void
 }
 
-export const SearchBar: React.FC<SearchBarProps> = ({ defaultValue, onSearch, ...props }) => {
+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%' }}>
+      <Paper
+        variant="elevation"
+        elevation={0}
+        style={{
+          display: 'flex', overflow: 'hidden', width: '100%',
+        }}
+      >
         <TextField
-          InputProps={{ color: 'secondary', style: { borderBottomRightRadius: 0, borderTopRightRadius: 0, borderWidth: 0 } }}
+          InputProps={{
+            color: 'secondary',
+            style: {
+              borderBottomRightRadius: 0, borderTopRightRadius: 0, borderWidth: 0,
+            },
+          }}
           variant="outlined"
           size="small"
           defaultValue={defaultValue}
@@ -26,7 +39,12 @@ export const SearchBar: React.FC<SearchBarProps> = ({ defaultValue, onSearch, ..
             if (event.key === 'Enter') onSearch?.(term)
           }}
         />
-        <ButtonEx variant="contained" style={{ borderRadius: 0, borderTopLeftRadius: 0 }} color="secondary" onClick={() => onSearch?.(term)}>
+        <ButtonEx
+          variant="contained"
+          style={{ borderRadius: 0, borderTopLeftRadius: 0 }}
+          color="secondary"
+          onClick={() => onSearch?.(term)}
+        >
           <SearchIcon />
         </ButtonEx>
       </Paper>

package/src/components/SiteMenu/Menu.tsx

@@ -1,5 +1,7 @@
 import { Menu as MenuIcon, Settings as SettingsIcon } from '@mui/icons-material'
-import { IconButton, List, SwipeableDrawer } from '@mui/material'
+import {
+  IconButton, List, SwipeableDrawer,
+} from '@mui/material'
 import type { FlexBoxProps } from '@xylabs/react-flexbox'
 import { FlexRow } from '@xylabs/react-flexbox'
 import React, { useEffect, useState } from 'react'
@@ -12,7 +14,9 @@ export interface SiteMenuProps extends FlexBoxProps {
   side?: 'left' | 'right' | 'top' | 'bottom'
 }
 
-export const SiteMenu: React.FC<SiteMenuProps> = ({ children, onMenuToggle, side = 'right', ...props }) => {
+export const SiteMenu: React.FC<SiteMenuProps> = ({
+  children, onMenuToggle, side = 'right', ...props
+}) => {
   const [open, setOpen] = useState(false)
 
   useEffect(() => {

package/src/components/SiteMenu/MenuListItem/MenuListItemContainer.stories.tsx

@@ -11,11 +11,7 @@ import { MenuListItemContainer } from './MenuListItemContainer.tsx'
 const StorybookEntry = {
   argTypes: {},
   component: MenuListItemContainer,
-  parameters: {
-    docs: {
-      page: null,
-    },
-  },
+  parameters: { docs: { page: null } },
   title: 'appbar/MenuListItemContainer',
 } as Meta<typeof MenuListItemContainer>
 
@@ -47,7 +43,9 @@ const WithChildren = Template.bind({})
 WithChildren.args = {
   icon: <FaGlobeAmericas />,
   primary: 'Explore',
-  subNavListItems: [{ primary: 'Explore', to: '/explore', tooltip: 'View global archivist data on a world map.' }],
+  subNavListItems: [{
+    primary: 'Explore', to: '/explore', tooltip: 'View global archivist data on a world map.',
+  }],
   tooltip: 'View global archivist data on a world map.',
 }
 

package/src/components/SiteMenu/MenuListItem/MenuListItemContainer.tsx

@@ -6,7 +6,9 @@ import React, { useState } from 'react'
 
 import { useCollapsible } from '../../../contexts/index.ts'
 import type { MenuListItemBase, NavListItemProps } from '../lib/index.ts'
-import { ListItemTooltip, MenuIcon, MenuListItem } from './list-item-components/index.ts'
+import {
+  ListItemTooltip, MenuIcon, MenuListItem,
+} from './list-item-components/index.ts'
 import { SubNavListItemsCollapse, SubNavToggleIconButton } from './sub-nav/index.ts'
 
 export interface MenuListItemProps extends NavListItemProps, MenuListItemBase, ListItemProps {

package/src/components/SiteMenu/MenuListItem/list-item-components/MenuListItem.tsx

@@ -6,14 +6,25 @@ import type { MenuListItemBase } from '../../lib/index.ts'
 
 export interface ListItemExProps extends MenuListItemBase, ListItemProps {}
 
-export const MenuListItem: React.FC<ListItemExProps> = ({ iconOnly, collapseEnd, sx, children, dense, ...props }) => {
-  const listItemSx = iconOnly ? { borderRadius: '50%', display: 'inline-flex', flexGrow: 0, width: 'auto' } : { width: '100%' }
+export const MenuListItem: React.FC<ListItemExProps> = ({
+  iconOnly, collapseEnd, sx, children, dense, ...props
+}) => {
+  const listItemSx = iconOnly
+    ? {
+        borderRadius: '50%', display: 'inline-flex', flexGrow: 0, width: 'auto',
+      }
+    : { width: '100%' }
   // wait till collapseEnds to remove the spacing between items
   const spacingSx = collapseEnd ? { columnGap: 0 } : { columnGap: 1.5 }
   // adjusts to the paddingY value which does NOT scale along the theme.spacing
   const paddingSx = dense ? { px: '8px' } : { px: '12px' }
   return (
-    <ListItem sx={{ ...listItemSx, ...spacingSx, ...paddingSx, ...sx }} {...props}>
+    <ListItem
+      sx={{
+        ...listItemSx, ...spacingSx, ...paddingSx, ...sx,
+      }}
+      {...props}
+    >
       {children}
     </ListItem>
   )

package/src/components/SiteMenu/MenuListItem/sub-nav/SubNavListItemCollapse.tsx

@@ -11,7 +11,9 @@ export interface SubNavListItemsCollapseProps extends WithChildren, CollapseProp
   subNavListItems?: NavListItemProps[]
 }
 
-export const SubNavListItemsCollapse: React.FC<SubNavListItemsCollapseProps> = ({ collapse, openSubNav, children, ...props }) => {
+export const SubNavListItemsCollapse: React.FC<SubNavListItemsCollapseProps> = ({
+  collapse, openSubNav, children, ...props
+}) => {
   return (
     <Collapse in={collapse == true ? false : openSubNav} {...props}>
       <List>{children}</List>

package/src/components/SiteMenu/MenuListItem/sub-nav/SubNavToggleIconButton.tsx

@@ -1,6 +1,8 @@
 import type { IconButtonProps } from '@mui/material'
 import { IconButton, useTheme } from '@mui/material'
-import type { Dispatch, SetStateAction, SyntheticEvent } from 'react'
+import type {
+  Dispatch, SetStateAction, SyntheticEvent,
+} from 'react'
 import React from 'react'
 // eslint-disable-next-line import-x/no-internal-modules
 import { VscChevronDown } from 'react-icons/vsc'

package/src/components/SiteMenu/MenuSection.tsx

@@ -13,7 +13,9 @@ export interface MenuSectionProps extends FlexBoxProps {
   title: string
 }
 
-export const MenuSection: React.FC<MenuSectionProps> = ({ iconMenuTextSpacing, listItems, showTitle = true, title, ...props }) => {
+export const MenuSection: React.FC<MenuSectionProps> = ({
+  iconMenuTextSpacing, listItems, showTitle = true, title, ...props
+}) => {
   return (
     <FlexCol alignItems="stretch" {...props}>
       <Collapse in={showTitle} timeout={700}>

package/src/components/SiteMenu/hooks/useMenuItemsShared.tsx

@@ -6,7 +6,9 @@ import type { MenuListItemProps } from '../MenuListItem/index.ts'
 export type DefaultSiteMenuListItemProps = Pick<MenuListItemProps, 'collapseEnd' | 'dense' | 'iconOnly' | 'sx'>
 
 export const useMenuItemsShared = () => {
-  const { collapse, collapseEnd, setCollapse, setCollapseEnd } = useCollapsible()
+  const {
+    collapse, collapseEnd, setCollapse, setCollapseEnd,
+  } = useCollapsible()
 
   const onMenuItemToggle = (open?: boolean) => {
     setCollapse?.(previous => (open ? false : previous))
@@ -18,9 +20,7 @@ export const useMenuItemsShared = () => {
       collapseEnd,
       dense: true,
       iconOnly: collapse,
-      sx: {
-        px: '8px',
-      },
+      sx: { px: '8px' },
     }),
     [collapse, collapseEnd],
   )

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

@@ -7,11 +7,7 @@ import { ContextToolbar } from './ContextToolbar.tsx'
 const StorybookEntry = {
   argTypes: {},
   component: ContextToolbar,
-  parameters: {
-    docs: {
-      page: null,
-    },
-  },
+  parameters: { docs: { page: null } },
   title: 'appbar/Toolbar/Context',
 } as Meta<typeof ContextToolbar>
 

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

@@ -10,7 +10,9 @@ export interface ContextToolbarProps extends ToolbarProps {
   version?: boolean
 }
 
-export const ContextToolbar: React.FC<ContextToolbarProps> = ({ logoTo = '/', version = false, ...props }) => {
+export const ContextToolbar: React.FC<ContextToolbarProps> = ({
+  logoTo = '/', version = false, ...props
+}) => {
   return (
     <Toolbar {...props}>
       <LogoLinkEx version={version} to={logoTo} />

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

@@ -10,7 +10,9 @@ export interface LogoLinkExProps extends LinkExProps {
   version?: boolean | string
 }
 
-export const LogoLinkEx: React.FC<LogoLinkExProps> = ({ to = '/', version = false, ...props }) => {
+export const LogoLinkEx: React.FC<LogoLinkExProps> = ({
+  to = '/', version = false, ...props
+}) => {
   const theme = useTheme()
   return (
     <LinkEx to={to} {...props}>

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

@@ -23,11 +23,7 @@ const DefaultMenu = (
 
 const StorybookEntry: Meta = {
   component: SystemToolbar,
-  parameters: {
-    docs: {
-      page: null,
-    },
-  },
+  parameters: { docs: { page: null } },
   title: 'appbar/Toolbar/System',
 }
 
@@ -57,6 +53,8 @@ WithOnMenuToggle.args = {
   onMenuToggle: state => console.log(state),
 }
 
-export { Default, PrecedingChildren, WithOnMenuToggle }
+export {
+  Default, PrecedingChildren, WithOnMenuToggle,
+}
 
 export default StorybookEntry

package/src/contexts/Collapsible/provider.tsx

@@ -1,5 +1,5 @@
 import type { WithChildren } from '@xylabs/react-shared'
-import React, { useEffect, useState } from 'react'
+import React, { useState } from 'react'
 
 import { CollapsibleContext } from './context.ts'
 
@@ -8,21 +8,18 @@ export interface CollapsibleProviderProps extends WithChildren {
   defaultCollapseEnd?: boolean
 }
 
-export const CollapsibleProvider: React.FC<CollapsibleProviderProps> = ({ defaultCollapse = false, defaultCollapseEnd = false, children }) => {
-  const [collapse, setCollapse] = useState(defaultCollapse)
-  const [collapseEnd, setCollapseEnd] = useState(defaultCollapseEnd)
-
-  useEffect(() => {
-    setCollapse(defaultCollapse)
-  }, [defaultCollapse])
-
-  useEffect(() => {
-    setCollapseEnd(defaultCollapseEnd)
-  }, [defaultCollapseEnd])
+export const CollapsibleProvider: React.FC<CollapsibleProviderProps> = ({
+  defaultCollapse = false, defaultCollapseEnd = false, children,
+}) => {
+  const [collapse, setCollapse] = useState(() => defaultCollapse)
+  const [collapseEnd, setCollapseEnd] = useState(() => defaultCollapseEnd)
 
   return (
     // eslint-disable-next-line @eslint-react/no-unstable-context-value
-    <CollapsibleContext.Provider value={{ collapse, collapseEnd, provided: true, setCollapse, setCollapseEnd }}>
+    <CollapsibleContext.Provider value={{
+      collapse, collapseEnd, provided: true, setCollapse, setCollapseEnd,
+    }}
+    >
       {children}
     </CollapsibleContext.Provider>
   )

package/xy.config.ts

@@ -1,9 +1,7 @@
 import type { XyTsupConfig } from '@xylabs/ts-scripts-yarn3'
 const config: XyTsupConfig = {
   compile: {
-    browser: {
-      src: true,
-    },
+    browser: { src: true },
     node: {},
     neutral: {},
   },