@xyo-network/react-property 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/property/src/index.ts#L1"
+			"url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/0cea94b/packages/property/src/index.ts#L1"
 		}
 	]
 }

package/package.json

@@ -18,7 +18,7 @@
     "@xylabs/react-flexbox": "^2.14.10",
     "@xylabs/react-identicon": "^2.14.10",
     "@xylabs/react-quick-tip-button": "^2.14.10",
-    "@xyo-network/react-shared": "^2.26.37",
+    "@xyo-network/react-shared": "^2.26.40",
     "@xyo-network/typeof": "^2.22.15",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -80,5 +80,5 @@
   },
   "sideEffects": false,
   "types": "dist/esm/index.d.ts",
-  "version": "2.26.37"
+  "version": "2.26.40"
 }

package/src/components/Action.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react'
+
+export interface PropertyAction {
+  disabled?: boolean
+  name: string
+  icon?: ReactNode
+  onClick?: () => void
+}

package/src/components/Actions.tsx

@@ -0,0 +1,26 @@
+import { IconButton } from '@mui/material'
+import { ButtonEx } from '@xylabs/react-button'
+import { FlexRow } from '@xylabs/react-flexbox'
+
+import { PropertyActionsProps } from './ActionsProps'
+
+export const PropertyActions: React.FC<PropertyActionsProps> = ({ buttons = false, actions, ...props }) => {
+  if (actions) {
+    return (actions?.length ?? 0) > 0 ? (
+      <FlexRow gap={1} {...props}>
+        {actions.map((action, index) => {
+          return action.icon ? (
+            <IconButton size="small" key={index} color="inherit" onClick={action.onClick}>
+              {action.icon}
+            </IconButton>
+          ) : buttons ? (
+            <ButtonEx paddingY={0} color="primary" key={index} size="small" disabled={action.disabled} onClick={action.onClick} variant="contained">
+              {action.name}
+            </ButtonEx>
+          ) : null
+        })}
+      </FlexRow>
+    ) : null
+  }
+  return null
+}

package/src/components/ActionsMenu.tsx

@@ -0,0 +1,41 @@
+import MoreHorizIcon from '@mui/icons-material/MoreHoriz'
+import { IconButton, Menu, MenuItem } from '@mui/material'
+import { FlexRow } from '@xylabs/react-flexbox'
+import { useState } from 'react'
+
+import { PropertyActionsProps } from './ActionsProps'
+
+export const PropertyActionsMenu: React.FC<PropertyActionsProps> = ({ actions, ...props }) => {
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
+  const open = !!anchorEl
+
+  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget)
+  }
+  const handleClose = () => {
+    setAnchorEl(null)
+  }
+
+  return actions && actions?.length > 0 ? (
+    <FlexRow {...props}>
+      <IconButton size="small" color="inherit" onClick={handleClick}>
+        <MoreHorizIcon fontSize="inherit" />
+      </IconButton>
+      <Menu anchorEl={anchorEl} open={open} onClose={handleClose}>
+        {actions?.map((action) => {
+          return (
+            <MenuItem
+              key={action.name}
+              onClick={() => {
+                action?.onClick?.()
+                handleClose()
+              }}
+            >
+              {action.name}
+            </MenuItem>
+          )
+        })}
+      </Menu>
+    </FlexRow>
+  ) : null
+}

package/src/components/ActionsProps.ts

@@ -0,0 +1,8 @@
+import { FlexBoxProps } from '@xylabs/react-flexbox'
+
+import { PropertyAction } from './Action'
+
+export interface PropertyActionsProps extends FlexBoxProps {
+  buttons?: boolean
+  actions?: PropertyAction[]
+}

package/src/components/Group.tsx

@@ -0,0 +1,44 @@
+import { Paper, useTheme } from '@mui/material'
+import { FlexCol, FlexGrowRow, FlexRow } from '@xylabs/react-flexbox'
+import { typeOf } from '@xyo-network/typeof'
+import { ReactElement } from 'react'
+
+import { PropertyGroupBoxProps, PropertyGroupPaperProps, PropertyGroupProps } from './Props'
+import { PropertyTitle } from './Title'
+
+const PropertyGroupBox: React.FC<PropertyGroupBoxProps> = ({ titleProps, children, title, tip, ...props }) => {
+  const theme = useTheme()
+  const childrenArray = typeOf(children) === 'array' ? (children as ReactElement[]) : undefined
+  return (
+    <FlexCol alignItems="stretch" overflow="hidden" {...props}>
+      <FlexRow overflow="hidden" justifyContent="stretch" alignItems="stretch">
+        <PropertyTitle alignItems="flex-start" size="full" title={title} tip={tip} {...titleProps} />
+        {childrenArray ? (
+          <FlexGrowRow>
+            {childrenArray?.map((child, index) => {
+              return child ? (
+                <FlexGrowRow key={index} borderLeft={1} borderColor={theme.palette.divider}>
+                  {child}
+                </FlexGrowRow>
+              ) : null
+            })}
+          </FlexGrowRow>
+        ) : (
+          <FlexGrowRow overflow="hidden">{children}</FlexGrowRow>
+        )}
+      </FlexRow>
+    </FlexCol>
+  )
+}
+
+const PropertyGroupPaper: React.FC<PropertyGroupPaperProps> = ({ style, variant, elevation, square, ...props }) => {
+  return (
+    <Paper style={{ minWidth: 0, overflow: 'hidden', ...style }} variant={variant} elevation={elevation} square={square}>
+      <PropertyGroupBox {...props} paper={false} />
+    </Paper>
+  )
+}
+
+export const PropertyGroup: React.FC<PropertyGroupProps> = (props) => {
+  return props.paper ? <PropertyGroupPaper {...props} /> : <PropertyGroupBox {...props} />
+}

package/src/components/IdenticonCorner.tsx

@@ -0,0 +1,30 @@
+import { useTheme } from '@mui/material'
+import { FlexBoxProps, FlexRow } from '@xylabs/react-flexbox'
+import { Identicon } from '@xylabs/react-identicon'
+import { useEffect, useRef, useState } from 'react'
+
+export interface IdenticonCornerProps extends FlexBoxProps {
+  value?: string | number | boolean | null
+}
+
+export const IdenticonCorner: React.FC<IdenticonCornerProps> = ({ value, ...props }) => {
+  const theme = useTheme()
+  const [parentHeight, setParentHeight] = useState<number>()
+  const ref = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    setParentHeight(ref.current?.parentElement?.parentElement?.clientHeight)
+  }, [])
+
+  const calculatedHeight = parentHeight ?? 0
+
+  return (
+    <FlexRow alignItems="flex-start" height="100%" position="absolute" right={0} bottom={0}>
+      <FlexRow background height={calculatedHeight} width={calculatedHeight} borderLeft={`1px solid ${theme.palette.divider}`}>
+        <div ref={ref}>
+          <Identicon size={calculatedHeight * 0.6} value={`${value}`} sx={{ padding: `${calculatedHeight * 0.2}px` }} {...props} />
+        </div>
+      </FlexRow>
+    </FlexRow>
+  )
+}

package/src/components/Property.tsx

@@ -0,0 +1,51 @@
+import { CircularProgress, Paper, TypographyVariant } from '@mui/material'
+import { FlexRow } from '@xylabs/react-flexbox'
+import { SizeProp } from '@xyo-network/react-shared'
+
+import { PropertyActionsMenu } from './ActionsMenu'
+import { IdenticonCorner } from './IdenticonCorner'
+import { PropertyBoxProps, PropertyPaperProps, PropertyProps } from './Props'
+import { PropertyTitle } from './Title'
+import { PropertyValue } from './Value'
+
+const PropertyBox: React.FC<PropertyBoxProps> = ({ titleProps, title, value, children, size = 'medium', tip, actions, required, badge = false, ...props }) => {
+  const sizeValueHeight: Record<SizeProp, number> = {
+    large: 48,
+    medium: 36,
+    small: 24,
+  }
+
+  const sizeVariants: Record<SizeProp, TypographyVariant> = {
+    large: 'h6',
+    medium: 'body1',
+    small: 'body2',
+  }
+
+  return (
+    <FlexRow flexDirection="column" minWidth={0} alignItems="stretch" overflow="hidden" {...props}>
+      {title !== undefined ? <PropertyTitle tip={tip} title={required ? `${title}*` : title} size={size} more={<PropertyActionsMenu actions={actions} />} {...titleProps} /> : null}
+      <FlexRow paddingX={1} justifyContent={value === undefined ? 'center' : 'space-between'} overflow="hidden" height={sizeValueHeight[size]}>
+        {children ? (
+          children
+        ) : value !== undefined ? (
+          <PropertyValue shortSpace={badge ? sizeValueHeight[size] : 0} value={value} typographyVariant={sizeVariants[size]} />
+        ) : (
+          <CircularProgress size={16} />
+        )}
+        {value !== undefined ? badge ? <IdenticonCorner value={value} /> : null : null}
+      </FlexRow>
+    </FlexRow>
+  )
+}
+
+const PropertyPaper: React.FC<PropertyPaperProps> = ({ style, variant, elevation = 2, square, ...props }) => {
+  return (
+    <Paper style={{ minWidth: 0, overflow: 'hidden', ...style }} variant={variant} elevation={elevation} square={square}>
+      <PropertyBox {...props} paper={false} />
+    </Paper>
+  )
+}
+
+export const Property: React.FC<PropertyProps> = (props) => {
+  return props.paper ? <PropertyPaper {...props} /> : <PropertyBox {...props} />
+}

package/src/components/PropertyBox.stories.tsx

@@ -0,0 +1,163 @@
+import ReplayIcon from '@mui/icons-material/Replay'
+import { TextField } from '@mui/material'
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+import { FlexCol, FlexRow } from '@xylabs/react-flexbox'
+
+import { appThemeDecorator, sampleBlockWithPayloads } from '../../../../.storybook'
+import { Property } from './Property'
+
+const StorybookEntry = {
+  argTypes: {},
+  component: Property,
+  parameters: {
+    docs: {
+      page: null,
+    },
+  },
+  title: 'property/PropertyBox',
+} as ComponentMeta<typeof Property>
+
+const Template: ComponentStory<typeof Property> = (args) => <Property {...args} paper={false}></Property>
+
+const TemplateWithCompare: ComponentStory<typeof Property> = (args) => (
+  <FlexCol gap={1} alignItems="stretch">
+    <FlexRow gap={1}>
+      <TextField size="small" value="Sample text Field" />
+      <Property {...args} size="small"></Property>
+    </FlexRow>
+    <FlexRow gap={1}>
+      <Property {...args} size="small"></Property>
+      <Property {...args} size="small"></Property>
+    </FlexRow>
+    <FlexRow gap={1}>
+      <TextField size="medium" value="Sample text Field" />
+      <Property {...args} size="medium"></Property>
+    </FlexRow>
+    <FlexRow gap={1}>
+      <Property {...args} size="medium"></Property>
+      <Property {...args} size="medium"></Property>
+    </FlexRow>
+    <FlexRow gap={1}>
+      <TextField value="Sample text Field" />
+      <Property {...args} size="large"></Property>
+    </FlexRow>
+    <FlexRow gap={1}>
+      <Property {...args} size="large"></Property>
+      <Property {...args} size="large"></Property>
+    </FlexRow>
+  </FlexCol>
+)
+
+const Default = Template.bind({})
+Default.args = {}
+Default.decorators = [appThemeDecorator]
+
+const WithTitle = Template.bind({})
+WithTitle.args = { title: 'No Data' }
+WithTitle.decorators = [appThemeDecorator]
+
+const WithUndefinedData = Template.bind({})
+WithUndefinedData.args = { title: 'Block Hash' }
+WithUndefinedData.decorators = [appThemeDecorator]
+
+const WithData = Template.bind({})
+WithData.args = { title: 'Block Hash', value: sampleBlockWithPayloads._hash }
+WithData.decorators = [appThemeDecorator]
+
+const WithDataSmall = Template.bind({})
+WithDataSmall.args = { size: 'small', title: 'Block Hash', value: sampleBlockWithPayloads._hash }
+WithDataSmall.decorators = [appThemeDecorator]
+
+const WithDataCompare = TemplateWithCompare.bind({})
+WithDataCompare.args = { tip: 'This is the block hash', title: 'Block Hash', value: sampleBlockWithPayloads._hash }
+WithDataCompare.decorators = [appThemeDecorator]
+
+const WithDataAndBadgeSmall = Template.bind({})
+WithDataAndBadgeSmall.args = { badge: true, size: 'small', tip: 'This is the block hash', title: 'Block Hash', value: sampleBlockWithPayloads._hash }
+WithDataAndBadgeSmall.decorators = [appThemeDecorator]
+
+const WithDataAndBadgeMedium = Template.bind({})
+WithDataAndBadgeMedium.args = { badge: true, size: 'medium', tip: 'This is the block hash', title: 'Block Hash', value: sampleBlockWithPayloads._hash }
+WithDataAndBadgeMedium.decorators = [appThemeDecorator]
+
+const WithDataAndBadgeLarge = Template.bind({})
+WithDataAndBadgeLarge.args = { badge: true, size: 'large', tip: 'This is the block hash', title: 'Block Hash', value: sampleBlockWithPayloads._hash }
+WithDataAndBadgeLarge.decorators = [appThemeDecorator]
+
+const WithTip = Template.bind({})
+WithTip.args = {
+  tip: 'This is the block hash',
+  title: 'Block Hash',
+  value: sampleBlockWithPayloads._hash,
+}
+WithTip.decorators = [appThemeDecorator]
+
+const WithTipAndBadge = Template.bind({})
+WithTipAndBadge.args = {
+  badge: true,
+  tip: 'This is the block hash',
+  title: 'Block Hash',
+  value: sampleBlockWithPayloads._hash,
+}
+WithTipAndBadge.decorators = [appThemeDecorator]
+
+const WithActions = Template.bind({})
+WithActions.args = {
+  actions: [{ name: 'ActionOne' }, { name: 'ActionTwo' }],
+  tip: 'This is the block hash',
+  title: 'Block Hash',
+  value: sampleBlockWithPayloads._hash,
+}
+WithActions.decorators = [appThemeDecorator]
+
+const LargeWithValue = Template.bind({})
+LargeWithValue.args = {
+  badge: true,
+  size: 'large',
+  tip: 'This is the block hash',
+  title: 'Block Hash',
+  value: sampleBlockWithPayloads._hash,
+}
+LargeWithValue.decorators = [appThemeDecorator]
+
+const LargeWithValueAndActions = Template.bind({})
+LargeWithValueAndActions.args = {
+  actions: [{ icon: <ReplayIcon />, name: 'ActionOne' }, { name: 'ActionTwo' }],
+  badge: true,
+  size: 'large',
+  tip: 'This is the block hash',
+  title: 'Block Hash',
+  value: sampleBlockWithPayloads._hash,
+}
+LargeWithValueAndActions.decorators = [appThemeDecorator]
+
+const SmallWithValueAndActions = Template.bind({})
+SmallWithValueAndActions.args = {
+  actions: [{ icon: <ReplayIcon />, name: 'ActionOne' }, { name: 'ActionTwo' }],
+  badge: true,
+  size: 'small',
+  tip: 'This is the block hash',
+  title: 'Block Hash',
+  value: sampleBlockWithPayloads._hash,
+}
+SmallWithValueAndActions.decorators = [appThemeDecorator]
+
+export {
+  Default,
+  LargeWithValue,
+  LargeWithValueAndActions,
+  SmallWithValueAndActions,
+  WithActions,
+  WithData,
+  WithDataAndBadgeLarge,
+  WithDataAndBadgeMedium,
+  WithDataAndBadgeSmall,
+  WithDataCompare,
+  WithDataSmall,
+  WithTip,
+  WithTipAndBadge,
+  WithUndefinedData,
+}
+
+// eslint-disable-next-line import/no-default-export
+export default StorybookEntry

package/src/components/PropertyPaper.stories.tsx

@@ -0,0 +1,174 @@
+import ReplayIcon from '@mui/icons-material/Replay'
+import { TextField } from '@mui/material'
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+import { FlexCol, FlexRow } from '@xylabs/react-flexbox'
+
+import { appThemeDecorator, sampleBlockWithPayloads } from '../../../../.storybook'
+import { Property } from './Property'
+import { PropertyPaperProps } from './Props'
+
+const StorybookEntry = {
+  argTypes: {},
+  component: Property,
+  parameters: {
+    docs: {
+      page: null,
+    },
+  },
+  title: 'property/PropertyPaper',
+} as ComponentMeta<typeof Property>
+
+const Template: ComponentStory<typeof Property> = (args) => <Property {...(args as PropertyPaperProps)} paper={true}></Property>
+
+const TemplateWithCompare: ComponentStory<typeof Property> = (args) => (
+  <FlexCol gap={1} alignItems="stretch">
+    <FlexRow gap={1}>
+      <TextField size="small" value="Sample text Field" />
+      <Property {...(args as PropertyPaperProps)} paper={true} size="small"></Property>
+    </FlexRow>
+    <FlexRow gap={1}>
+      <Property {...(args as PropertyPaperProps)} paper={true} size="small"></Property>
+      <Property {...(args as PropertyPaperProps)} paper={true} size="small"></Property>
+    </FlexRow>
+    <FlexRow gap={1}>
+      <TextField size="medium" value="Sample text Field" />
+      <Property {...(args as PropertyPaperProps)} paper={true} size="medium"></Property>
+    </FlexRow>
+    <FlexRow gap={1}>
+      <Property {...(args as PropertyPaperProps)} paper={true} size="medium"></Property>
+      <Property {...(args as PropertyPaperProps)} paper={true} size="medium"></Property>
+    </FlexRow>
+    <FlexRow gap={1}>
+      <TextField value="Sample text Field" />
+      <Property {...(args as PropertyPaperProps)} paper={true} size="large"></Property>
+    </FlexRow>
+    <FlexRow gap={1}>
+      <Property {...(args as PropertyPaperProps)} paper={true} size="large"></Property>
+      <Property {...(args as PropertyPaperProps)} paper={true} size="large"></Property>
+    </FlexRow>
+  </FlexCol>
+)
+
+const Default = Template.bind({})
+Default.args = {}
+Default.decorators = [appThemeDecorator]
+
+const WithTitle = Template.bind({})
+WithTitle.args = { title: 'No Data' }
+WithTitle.decorators = [appThemeDecorator]
+
+const WithUndefinedData = Template.bind({})
+WithUndefinedData.args = { title: 'Block Hash' }
+WithUndefinedData.decorators = [appThemeDecorator]
+
+const WithData = Template.bind({})
+WithData.args = { title: 'Block Hash', value: sampleBlockWithPayloads._hash }
+WithData.decorators = [appThemeDecorator]
+
+const WithDataSmall = Template.bind({})
+WithDataSmall.args = { size: 'small', title: 'Block Hash', value: sampleBlockWithPayloads._hash }
+WithDataSmall.decorators = [appThemeDecorator]
+
+const WithDataCompare = TemplateWithCompare.bind({})
+WithDataCompare.args = { tip: 'This is the block hash', title: 'Block Hash', value: sampleBlockWithPayloads._hash }
+WithDataCompare.decorators = [appThemeDecorator]
+
+const WithDataCompareOutlined = TemplateWithCompare.bind({})
+WithDataCompareOutlined.args = { tip: 'This is the block hash', title: 'Block Hash', value: sampleBlockWithPayloads._hash, variant: 'outlined' }
+WithDataCompareOutlined.decorators = [appThemeDecorator]
+
+const WithDataCompareElevation = TemplateWithCompare.bind({})
+WithDataCompareElevation.args = { tip: 'This is the block hash', title: 'Block Hash', value: sampleBlockWithPayloads._hash, variant: 'elevation' }
+WithDataCompareElevation.decorators = [appThemeDecorator]
+
+const WithDataAndBadgeSmall = Template.bind({})
+WithDataAndBadgeSmall.args = { badge: true, size: 'small', tip: 'This is the block hash', title: 'Block Hash', value: sampleBlockWithPayloads._hash }
+WithDataAndBadgeSmall.decorators = [appThemeDecorator]
+
+const WithDataAndBadgeMedium = Template.bind({})
+WithDataAndBadgeMedium.args = { badge: true, size: 'medium', tip: 'This is the block hash', title: 'Block Hash', value: sampleBlockWithPayloads._hash }
+WithDataAndBadgeMedium.decorators = [appThemeDecorator]
+
+const WithDataAndBadgeLarge = Template.bind({})
+WithDataAndBadgeLarge.args = { badge: true, size: 'large', tip: 'This is the block hash', title: 'Block Hash', value: sampleBlockWithPayloads._hash }
+WithDataAndBadgeLarge.decorators = [appThemeDecorator]
+
+const WithTip = Template.bind({})
+WithTip.args = {
+  tip: 'This is the block hash',
+  title: 'Block Hash',
+  value: sampleBlockWithPayloads._hash,
+}
+WithTip.decorators = [appThemeDecorator]
+
+const WithTipAndBadge = Template.bind({})
+WithTipAndBadge.args = {
+  badge: true,
+  tip: 'This is the block hash',
+  title: 'Block Hash',
+  value: sampleBlockWithPayloads._hash,
+}
+WithTipAndBadge.decorators = [appThemeDecorator]
+
+const WithActions = Template.bind({})
+WithActions.args = {
+  actions: [{ name: 'ActionOne' }, { name: 'ActionTwo' }],
+  tip: 'This is the block hash',
+  title: 'Block Hash',
+  value: sampleBlockWithPayloads._hash,
+}
+WithActions.decorators = [appThemeDecorator]
+
+const LargeWithValue = Template.bind({})
+LargeWithValue.args = {
+  badge: true,
+  size: 'large',
+  tip: 'This is the block hash',
+  title: 'Block Hash',
+  value: sampleBlockWithPayloads._hash,
+}
+LargeWithValue.decorators = [appThemeDecorator]
+
+const LargeWithValueAndActions = Template.bind({})
+LargeWithValueAndActions.args = {
+  actions: [{ icon: <ReplayIcon />, name: 'ActionOne' }, { name: 'ActionTwo' }],
+  badge: true,
+  size: 'large',
+  tip: 'This is the block hash',
+  title: 'Block Hash',
+  value: sampleBlockWithPayloads._hash,
+}
+LargeWithValueAndActions.decorators = [appThemeDecorator]
+
+const SmallWithValueAndActions = Template.bind({})
+SmallWithValueAndActions.args = {
+  actions: [{ icon: <ReplayIcon />, name: 'ActionOne' }, { name: 'ActionTwo' }],
+  badge: true,
+  size: 'small',
+  tip: 'This is the block hash',
+  title: 'Block Hash',
+  value: sampleBlockWithPayloads._hash,
+}
+SmallWithValueAndActions.decorators = [appThemeDecorator]
+
+export {
+  Default,
+  LargeWithValue,
+  LargeWithValueAndActions,
+  SmallWithValueAndActions,
+  WithActions,
+  WithData,
+  WithDataAndBadgeLarge,
+  WithDataAndBadgeMedium,
+  WithDataAndBadgeSmall,
+  WithDataCompare,
+  WithDataCompareElevation,
+  WithDataCompareOutlined,
+  WithDataSmall,
+  WithTip,
+  WithTipAndBadge,
+  WithUndefinedData,
+}
+
+// eslint-disable-next-line import/no-default-export
+export default StorybookEntry

package/src/components/Props.tsx

@@ -0,0 +1,48 @@
+import { PaperProps } from '@mui/material'
+import { FlexBoxProps } from '@xylabs/react-flexbox'
+import { SizeProp } from '@xyo-network/react-shared'
+import { ReactNode } from 'react'
+
+import { PropertyAction } from './Action'
+import { PropertyTitleProps } from './Title'
+
+export interface PropertyBaseProps {
+  tip?: ReactNode
+  title?: string
+  paper?: boolean
+  titleProps?: PropertyTitleProps
+}
+
+export type PropertyFieldBaseProps = PropertyBaseProps & {
+  actions?: PropertyAction[]
+  required?: boolean
+  value?: string | number | boolean | null
+  badge?: boolean
+  size?: SizeProp
+}
+
+export type PropertyBoxProps = PropertyFieldBaseProps &
+  FlexBoxProps & {
+    paper?: false
+  }
+
+export type PropertyPaperProps = PropertyFieldBaseProps &
+  PaperProps & {
+    paper: true
+  }
+
+export type PropertyProps = PropertyBoxProps | PropertyPaperProps
+
+export type PropertyGroupBaseProps = PropertyBaseProps
+
+export type PropertyGroupBoxProps = PropertyGroupBaseProps &
+  FlexBoxProps & {
+    paper?: false
+  }
+
+export type PropertyGroupPaperProps = PropertyGroupBaseProps &
+  PaperProps & {
+    paper: true
+  }
+
+export type PropertyGroupProps = PropertyGroupBoxProps | PropertyGroupPaperProps

package/src/components/Title.stories.tsx

@@ -0,0 +1,32 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+
+import { PropertyTitle } from './Title'
+
+const StorybookEntry = {
+  argTypes: {},
+  component: PropertyTitle,
+  parameters: {
+    docs: {
+      page: null,
+    },
+  },
+  title: 'property/Title',
+} as ComponentMeta<typeof PropertyTitle>
+
+const Template: ComponentStory<typeof PropertyTitle> = (args) => <PropertyTitle {...args}></PropertyTitle>
+
+const Default = Template.bind({})
+Default.args = {}
+
+const WithData = Template.bind({})
+
+WithData.args = { title: 'Sample Title' }
+
+const WithDataAndActions = Template.bind({})
+
+WithDataAndActions.args = { title: 'Sample Title' }
+
+export { Default, WithData, WithDataAndActions }
+
+// eslint-disable-next-line import/no-default-export
+export default StorybookEntry

package/src/components/Title.tsx

@@ -0,0 +1,66 @@
+import { darken, lighten, Typography, TypographyVariant, useTheme } from '@mui/material'
+import { FlexBoxProps, FlexRow } from '@xylabs/react-flexbox'
+import { QuickTipButton } from '@xylabs/react-quick-tip-button'
+import { SizeProp } from '@xyo-network/react-shared'
+import { ReactNode } from 'react'
+
+type TitleSizeProp = SizeProp | 'full'
+
+export interface PropertyTitleProps extends FlexBoxProps {
+  tip?: ReactNode
+  more?: ReactNode
+  title?: string
+  size?: TitleSizeProp
+  elevation?: number
+}
+
+export const PropertyTitle: React.FC<PropertyTitleProps> = ({ elevation = 1, size = 'medium', tip, more, title, ...props }) => {
+  const sizeVariants: Record<TitleSizeProp, TypographyVariant> = {
+    full: 'caption',
+    large: 'caption',
+    medium: 'caption',
+    small: 'caption',
+  }
+
+  const sizeTitleHeight: Record<TitleSizeProp, number | undefined> = {
+    full: undefined,
+    large: 32,
+    medium: 20,
+    small: 16,
+  }
+
+  const sizeFontSize: Record<TitleSizeProp, number> = {
+    full: 16,
+    large: 16,
+    medium: 14,
+    small: 10,
+  }
+
+  const quickTipSize = sizeFontSize[size] < 16 ? sizeFontSize[size] : 16
+
+  const theme = useTheme()
+
+  return (
+    <FlexRow
+      bgcolor={theme.palette.mode === 'dark' ? lighten(theme.palette.background.paper, 0.05 * elevation) : darken(theme.palette.background.paper, 0.025 * elevation)}
+      alignItems="center"
+      height={sizeTitleHeight[size]}
+      justifyContent="space-between"
+      {...props}
+    >
+      <FlexRow paddingX={1} paddingY={0.5}>
+        <Typography fontWeight={500} noWrap variant={sizeVariants[size]} fontSize={sizeFontSize[size]}>
+          <small>
+            <strong>{title}</strong>
+          </small>
+        </Typography>
+        {tip ? (
+          <QuickTipButton style={{ fontSize: quickTipSize }} color="inherit" title={title ?? ''}>
+            {tip}
+          </QuickTipButton>
+        ) : null}
+      </FlexRow>
+      {more}
+    </FlexRow>
+  )
+}

package/src/components/Value.stories.tsx

@@ -0,0 +1,29 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+
+import { sampleBlockWithPayloads } from '../../../../.storybook'
+import { PropertyValue } from './Value'
+
+const StorybookEntry = {
+  argTypes: {},
+  component: PropertyValue,
+  parameters: {
+    docs: {
+      page: null,
+    },
+  },
+  title: 'property/Value',
+} as ComponentMeta<typeof PropertyValue>
+
+const Template: ComponentStory<typeof PropertyValue> = (args) => <PropertyValue {...args}></PropertyValue>
+
+const Default = Template.bind({})
+Default.args = {}
+
+const WithData = Template.bind({})
+
+WithData.args = { value: sampleBlockWithPayloads._hash }
+
+export { Default, WithData }
+
+// eslint-disable-next-line import/no-default-export
+export default StorybookEntry

package/src/components/Value.tsx

@@ -0,0 +1,55 @@
+import { Typography, TypographyProps, useTheme } from '@mui/material'
+import { Variant } from '@mui/material/styles/createTypography'
+import { useEffect, useRef, useState } from 'react'
+
+export interface PropertyValueProps extends TypographyProps<'div'> {
+  value?: string | number | boolean | null
+  typographyVariant?: Variant
+  /** @field The space that is removed from the ... at end (mainly for identicon) */
+  shortSpace?: number
+}
+
+export const PropertyValue: React.FC<PropertyValueProps> = ({ value, shortSpace, typographyVariant = 'body1', ...props }) => {
+  const [parentWidth, setParentWidth] = useState<number>()
+  const theme = useTheme()
+
+  const ref = useRef<HTMLDivElement>(null)
+
+  const customThemeProps = {
+    clamped: parentWidth && theme ? parentWidth - parseInt(theme.spacing(2), 10) - (shortSpace ?? 0) : undefined,
+    title: value?.toString(),
+  }
+
+  useEffect(() => {
+    const resizeHandler = () => {
+      const smallestWidth = getSmallestParentWidth(ref.current)
+      setParentWidth(smallestWidth)
+    }
+
+    const getSmallestParentWidth = (element: HTMLElement | null) => {
+      let current = element?.parentElement
+      let width: number | null = null
+      while (current) {
+        if (width === null || current.clientWidth < width) {
+          width = current.clientWidth
+        }
+        current = current.parentElement
+      }
+      return width ?? undefined
+    }
+
+    window.addEventListener('resize', resizeHandler)
+
+    setParentWidth(getSmallestParentWidth(ref.current))
+
+    return () => {
+      window?.removeEventListener('resize', resizeHandler)
+    }
+  }, [])
+
+  return value !== undefined ? (
+    <Typography minWidth={0} ref={ref} component="div" variant={typographyVariant} fontFamily="monospace" fontWeight="light" {...customThemeProps} {...props}>
+      {value}
+    </Typography>
+  ) : null
+}

package/src/components/index.ts

@@ -0,0 +1,5 @@
+export * from './Action'
+export * from './Group'
+export * from './Property'
+export * from './Props'
+export * from './Value'

package/src/index.ts

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