@xyo-network/react-property 7.5.8 → 7.5.11

package/src/components/PropertyPaper.stories.tsx

@@ -1,191 +0,0 @@
-import { Replay as ReplayIcon } from '@mui/icons-material'
-import { TextField } from '@mui/material'
-import type { Meta, StoryFn } from '@storybook/react-vite'
-import { FlexCol, FlexRow } from '@xylabs/react-flexbox'
-import React from 'react'
-
-import { Property } from './Property.tsx'
-import type { PropertyPaperProps, PropertyProps } from './Props.ts'
-
-const StorybookEntry = {
-  argTypes: {},
-  component: Property,
-  parameters: { docs: { page: null } },
-  title: 'property/PropertyPaper',
-} as Meta<typeof Property>
-
-const Template: StoryFn = (args: PropertyProps) => <Property {...(args as PropertyPaperProps)} paper={true}></Property>
-
-const TemplateWithCompare: StoryFn = (args: PropertyProps) => (
-  <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 = {}
-
-const WithTitle = Template.bind({})
-WithTitle.args = { title: 'No Data' }
-
-const WithUndefinedData = Template.bind({})
-WithUndefinedData.args = { title: 'Block Hash' }
-
-const WithData = Template.bind({})
-WithData.args = {
-  title: 'Block Hash',
-  value: '0x1234567890abcdef1234567890abcdef1234567890abcdef1234567890abcdef',
-}
-
-const WithDataSmall = Template.bind({})
-WithDataSmall.args = {
-  size: 'small',
-  title: 'Block Hash',
-  value: '0x1234567890abcdef1234567890abcdef1234567890abcdef1234567890abcdef',
-}
-
-const WithDataCompare = TemplateWithCompare.bind({})
-WithDataCompare.args = {
-  tip: 'This is the block hash',
-  title: 'Block Hash',
-  value: '0x1234567890abcdef1234567890abcdef1234567890abcdef1234567890abcdef',
-}
-
-const WithDataCompareOutlined = TemplateWithCompare.bind({})
-WithDataCompareOutlined.args = {
-  tip: 'This is the block hash',
-  title: 'Block Hash',
-  value: '0x1234567890abcdef1234567890abcdef1234567890abcdef1234567890abcdef',
-  variant: 'outlined',
-}
-
-const WithDataCompareElevation = TemplateWithCompare.bind({})
-WithDataCompareElevation.args = {
-  tip: 'This is the block hash',
-  title: 'Block Hash',
-  value: '0x1234567890abcdef1234567890abcdef1234567890abcdef1234567890abcdef',
-  variant: 'elevation',
-}
-
-const WithDataAndBadgeSmall = Template.bind({})
-WithDataAndBadgeSmall.args = {
-  badge: true,
-  size: 'small',
-  tip: 'This is the block hash',
-  title: 'Block Hash',
-  value: '0x1234567890abcdef1234567890abcdef1234567890abcdef1234567890abcdef',
-}
-
-const WithDataAndBadgeMedium = Template.bind({})
-WithDataAndBadgeMedium.args = {
-  badge: true,
-  size: 'medium',
-  tip: 'This is the block hash',
-  title: 'Block Hash',
-  value: '0x1234567890abcdef1234567890abcdef1234567890abcdef1234567890abcdef',
-}
-
-const WithDataAndBadgeLarge = Template.bind({})
-WithDataAndBadgeLarge.args = {
-  badge: true,
-  size: 'large',
-  tip: 'This is the block hash',
-  title: 'Block Hash',
-  value: '0x1234567890abcdef1234567890abcdef1234567890abcdef1234567890abcdef',
-}
-
-const WithTip = Template.bind({})
-WithTip.args = {
-  tip: 'This is the block hash',
-  title: 'Block Hash',
-  value: '0x1234567890abcdef1234567890abcdef1234567890abcdef1234567890abcdef',
-}
-
-const WithTipAndBadge = Template.bind({})
-WithTipAndBadge.args = {
-  badge: true,
-  tip: 'This is the block hash',
-  title: 'Block Hash',
-  value: '0x1234567890abcdef1234567890abcdef1234567890abcdef1234567890abcdef',
-}
-
-const WithActions = Template.bind({})
-WithActions.args = {
-  actions: [{ name: 'ActionOne' }, { name: 'ActionTwo' }],
-  tip: 'This is the block hash',
-  title: 'Block Hash',
-  value: '0x1234567890abcdef1234567890abcdef1234567890abcdef1234567890abcdef',
-}
-
-const LargeWithValue = Template.bind({})
-LargeWithValue.args = {
-  badge: true,
-  size: 'large',
-  tip: 'This is the block hash',
-  title: 'Block Hash',
-  value: '0x1234567890abcdef1234567890abcdef1234567890abcdef1234567890abcdef',
-}
-
-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: '0x1234567890abcdef1234567890abcdef1234567890abcdef1234567890abcdef',
-}
-
-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: '0x1234567890abcdef1234567890abcdef1234567890abcdef1234567890abcdef',
-}
-
-export {
-  Default,
-  LargeWithValue,
-  LargeWithValueAndActions,
-  SmallWithValueAndActions,
-  WithActions,
-  WithData,
-  WithDataAndBadgeLarge,
-  WithDataAndBadgeMedium,
-  WithDataAndBadgeSmall,
-  WithDataCompare,
-  WithDataCompareElevation,
-  WithDataCompareOutlined,
-  WithDataSmall,
-  WithTip,
-  WithTipAndBadge,
-  WithUndefinedData,
-}
-
-export default StorybookEntry

package/src/components/Props.ts

@@ -1,48 +0,0 @@
-import type { PaperProps } from '@mui/material'
-import type { FlexBoxProps } from '@xylabs/react-flexbox'
-import type { SizeProp } from '@xyo-network/react-shared'
-import type { ReactNode } from 'react'
-
-import type { PropertyAction } from './Action.ts'
-import type { PropertyTitleProps } from './Title.tsx'
-
-export interface PropertyBaseProps {
-  paper?: boolean
-  tip?: ReactNode
-  title?: string
-  titleProps?: PropertyTitleProps
-}
-
-export type PropertyFieldBaseProps = PropertyBaseProps & {
-  actions?: PropertyAction[]
-  badge?: boolean
-  required?: boolean
-  size?: SizeProp
-  value?: string | number | boolean | null
-}
-
-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

@@ -1,30 +0,0 @@
-import type { Meta, StoryFn } from '@storybook/react-vite'
-import React from 'react'
-
-import { PropertyTitle } from './Title.tsx'
-
-const StorybookEntry = {
-  argTypes: {},
-  component: PropertyTitle,
-  parameters: { docs: { page: null } },
-  title: 'property/Title',
-} as Meta<typeof PropertyTitle>
-
-const Template: StoryFn<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,
-}
-
-export default StorybookEntry

package/src/components/Title.tsx

@@ -1,82 +0,0 @@
-import type { TypographyVariant } from '@mui/material'
-import {
-  Typography, useColorScheme, useTheme,
-} from '@mui/material'
-import type { FlexBoxProps } from '@xylabs/react-flexbox'
-import { FlexRow } from '@xylabs/react-flexbox'
-import { QuickTipButton } from '@xylabs/react-quick-tip-button'
-import { darkenCss, useIsDark } from '@xylabs/react-theme'
-import type { SizeProp } from '@xyo-network/react-shared'
-import type { ReactNode } from 'react'
-import React from 'react'
-
-export type TitleSizeProp = SizeProp | 'full'
-
-export interface PropertyTitleProps extends FlexBoxProps {
-  elevation?: number
-  more?: ReactNode
-  size?: TitleSizeProp
-  tip?: ReactNode
-  title?: string
-}
-
-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 = Math.min(sizeFontSize[size], 16)
-
-  const theme = useTheme()
-  const {} = useColorScheme()
-  const isDark = useIsDark()
-
-  return (
-    <FlexRow
-      bgcolor={
-        isDark
-          ? darkenCss(theme.vars.palette.background.paper, 0.75 * elevation)
-          : darkenCss(theme.vars.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

@@ -1,24 +0,0 @@
-import type { Meta, StoryFn } from '@storybook/react-vite'
-import React from 'react'
-
-import { PropertyValue } from './Value.tsx'
-
-const StorybookEntry = {
-  argTypes: {},
-  component: PropertyValue,
-  parameters: { docs: { page: null } },
-  title: 'property/Value',
-} as Meta<typeof PropertyValue>
-
-const Template: StoryFn<typeof PropertyValue> = args => <PropertyValue {...args}></PropertyValue>
-
-const Default = Template.bind({})
-Default.args = {}
-
-const WithData = Template.bind({})
-
-WithData.args = {}
-
-export { Default, WithData }
-
-export default StorybookEntry

package/src/components/Value.tsx

@@ -1,30 +0,0 @@
-import type { TypographyVariant } from '@mui/material'
-import type { EllipsizeBoxProps } from '@xyo-network/react-shared'
-import { EllipsizeBox } from '@xyo-network/react-shared'
-import React from 'react'
-
-export interface PropertyValueProps extends EllipsizeBoxProps {
-  typographyVariant?: TypographyVariant
-  value?: string | number | boolean | null
-}
-
-export const PropertyValue = ({
-  ref, typographyVariant = 'body1', value, ...props
-}: PropertyValueProps) => {
-  return value === undefined
-    ? null
-    : (
-        <EllipsizeBox
-          typographyProps={{
-            component: undefined, title: value?.toString(), variant: typographyVariant,
-          }}
-          width="100%"
-          ref={ref}
-          {...props}
-        >
-          {value}
-        </EllipsizeBox>
-      )
-}
-
-PropertyValue.displayName = 'PropertyValue'

package/src/components/index.ts

@@ -1,6 +0,0 @@
-export * from './Action.ts'
-export * from './Group.tsx'
-export * from './Property.tsx'
-export * from './Props.ts'
-export * from './Title.tsx'
-export * from './Value.tsx'

package/src/global.d.ts

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

package/src/index.ts

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