@xyo-network/react-card 7.5.7 → 7.5.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xyo-network/react-card",
-  "version": "7.5.7",
+  "version": "7.5.11",
   "description": "Common React library for all XYO projects that use React",
   "keywords": [
     "xyo",
@@ -36,46 +36,104 @@
     },
     "./package.json": "./package.json"
   },
-  "module": "dist/browser/index.mjs",
-  "types": "dist/browser/index.d.ts",
   "files": [
     "dist",
-    "src"
+    "README.md"
   ],
   "dependencies": {
-    "@xylabs/react-flexbox": "~7.1.17",
-    "@xylabs/react-theme": "~7.1.17",
-    "@xyo-network/react-shared": "7.5.7"
+    "@xyo-network/react-shared": "~7.5.11"
   },
   "devDependencies": {
-    "@mui/icons-material": "~7.3.9",
-    "@mui/material": "~7.3.9",
-    "@storybook/react-vite": "~10.3.3",
+    "@bitauth/libauth": "~3.0.0",
+    "@mui/icons-material": "^7.3.10",
+    "@mui/material": "^7.3.10",
+    "@opentelemetry/api": "^1.9.1",
+    "@opentelemetry/sdk-trace-base": "^2.7.0",
+    "@scure/base": "~2.2.0",
+    "@storybook/react-vite": "~10.3.5",
+    "@types/node": "~25.6.0",
     "@types/react": "^19.2.14",
-    "@xylabs/ts-scripts-common": "~7.5.6",
-    "@xylabs/ts-scripts-yarn3": "~7.5.6",
-    "@xylabs/tsconfig": "~7.5.6",
-    "@xylabs/tsconfig-dom": "~7.5.6",
-    "@xylabs/tsconfig-react": "~7.5.6",
-    "@xyo-network/react-storybook": "7.5.7",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4",
-    "react-router-dom": "^7.13.2",
-    "storybook": "~10.3.3",
+    "@xylabs/react-async-effect": "~7.1.20",
+    "@xylabs/react-button": "~7.1.20",
+    "@xylabs/react-flexbox": "~7.1.20",
+    "@xylabs/react-hooks": "~7.1.20",
+    "@xylabs/react-link": "~7.1.20",
+    "@xylabs/react-promise": "~7.1.20",
+    "@xylabs/react-shared": "~7.1.20",
+    "@xylabs/react-theme": "~7.1.20",
+    "@xylabs/sdk-js": "^5.0.100",
+    "@xylabs/threads": "~5.0.100",
+    "@xylabs/toolchain": "~7.11.9",
+    "@xylabs/tsconfig": "^7.11.9",
+    "@xylabs/tsconfig-dom": "^7.11.9",
+    "@xylabs/tsconfig-react": "~7.11.9",
+    "@xylabs/zod": "~5.0.100",
+    "@xyo-network/boundwitness-model": "^5.5.1",
+    "@xyo-network/boundwitness-validator": "^5.5.1",
+    "@xyo-network/payload-builder": "^5.5.1",
+    "@xyo-network/payload-model": "^5.5.1",
+    "async-mutex": "^0.5.0",
+    "axios": "^1.15.2",
+    "bn.js": "^5.2.3",
+    "bowser": "^2.14.1",
+    "buffer": "^6.0.3",
+    "chalk": "^5.6.2",
+    "debug": "~4.4.3",
+    "esbuild": "~0.28.0",
+    "eslint": "^10.2.1",
+    "ethers": "^6.16.0",
+    "fast-deep-equal": "~3.1.3",
+    "hash-wasm": "~4.12.0",
+    "js-cookie": "~3.0.5",
+    "observable-fns": "~0.6.1",
+    "pako": "^2.1.0",
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5",
+    "react-router-dom": "^7.14.2",
+    "spark-md5": "~3.0.2",
+    "storybook": "^10.3.5",
     "typescript": "^5.9.3",
-    "vite": "~8.0.3",
-    "zod": "^4.3.6"
+    "vite": "^8.0.10",
+    "wasm-feature-detect": "~1.8.0",
+    "zod": "^4.3.6",
+    "@xyo-network/react-storybook": "~7.5.11"
   },
   "peerDependencies": {
-    "@mui/icons-material": ">=6 <8",
-    "@mui/material": ">=6 <8",
-    "react": "^19",
-    "react-dom": "^19",
-    "react-router-dom": "^7",
-    "zod": "^4"
+    "@mui/icons-material": "^7.3.10",
+    "@mui/material": "^7.3.10",
+    "@opentelemetry/sdk-trace-base": "^2.7.0",
+    "@scure/base": "~2.2.0",
+    "@xylabs/react-async-effect": "~7.1.20",
+    "@xylabs/react-button": "~7.1.20",
+    "@xylabs/react-flexbox": "~7.1.20",
+    "@xylabs/react-hooks": "~7.1.20",
+    "@xylabs/react-link": "~7.1.20",
+    "@xylabs/react-promise": "~7.1.20",
+    "@xylabs/react-shared": "~7.1.20",
+    "@xylabs/react-theme": "~7.1.20",
+    "@xylabs/sdk-js": "^5.0.100",
+    "@xylabs/zod": "~5.0.100",
+    "@xyo-network/boundwitness-model": "^5.5.1",
+    "@xyo-network/boundwitness-validator": "^5.5.1",
+    "@xyo-network/payload-builder": "^5.5.1",
+    "@xyo-network/payload-model": "^5.5.1",
+    "async-mutex": "^0.5.0",
+    "bn.js": "^5.2.3",
+    "bowser": "^2.14.1",
+    "buffer": "^6.0.3",
+    "chalk": "^5.6.2",
+    "ethers": "^6.16.0",
+    "fast-deep-equal": "~3.1.3",
+    "js-cookie": "~3.0.5",
+    "pako": "^2.1.0",
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5",
+    "react-router-dom": "^7.14.2",
+    "spark-md5": "~3.0.2",
+    "zod": "^4.3.6"
   },
   "publishConfig": {
     "access": "public"
   },
   "docs": "dist/docs.json"
-}
+}

package/src/components/CardContentEx.stories.tsx

@@ -1,68 +0,0 @@
-import { Button, Typography } from '@mui/material'
-import type {
-  Decorator, Meta, StoryFn,
-} from '@storybook/react-vite'
-import { FlexGrowCol } from '@xylabs/react-flexbox'
-import { WithRefDecorator } from '@xyo-network/react-storybook'
-import React, { useRef, useState } from 'react'
-
-import { CardContentEx } from './CardContentEx.tsx'
-import { PageCard } from './PageCard.tsx'
-
-const ScrollableDecorator: Decorator = (Story, args) => {
-  const [scrollToTop, setScrollToTop] = useState(0)
-  const ref = useRef<HTMLDivElement | null>(null)
-
-  args.args.ref = ref
-  args.args.scrollToTop = scrollToTop
-
-  const onScrollToTop = () => {
-    setScrollToTop(scrollToTop + 1)
-  }
-  return (
-    <FlexGrowCol alignItems="stretch" position="absolute" height="calc(100vh - 2rem)" style={{ inset: 0 }}>
-      <Button variant="contained" onClick={onScrollToTop} sx={{ marginBottom: 2 }}>
-        ScrollToTop
-      </Button>
-      <Story {...args} />
-    </FlexGrowCol>
-  )
-}
-
-const StorybookEntry: Meta = {
-  argTypes: {},
-  component: CardContentEx,
-  parameters: { docs: { page: null } },
-  title: 'shared/CardContentEx',
-}
-
-const Template: StoryFn<typeof CardContentEx> = (props) => {
-  return (
-    <PageCard title="Page Card" subheader="subheader">
-      <CardContentEx {...props}>
-        {[...Array(100).keys()].map(item => (
-          <Typography key={item}>
-            {item}
-            . - Item row
-          </Typography>
-        ))}
-      </CardContentEx>
-    </PageCard>
-  )
-}
-
-const Default = Template.bind({})
-Default.args = {}
-
-const WithRef = Template.bind({})
-WithRef.decorators = [WithRefDecorator]
-
-const WithVariant = Template.bind({})
-WithVariant.args = { variant: 'scrollable' }
-WithVariant.decorators = [ScrollableDecorator]
-
-export {
-  Default, WithRef, WithVariant,
-}
-
-export default StorybookEntry

package/src/components/CardContentEx.tsx

@@ -1,42 +0,0 @@
-import type { CardContentProps } from '@mui/material'
-import { CardContent, styled } from '@mui/material'
-import { useShareForwardedRef } from '@xyo-network/react-shared'
-import React, { useEffect } from 'react'
-
-const CardContentExRoot = styled(CardContent, {
-  name: 'CardContentEx',
-  shouldForwardProp: (prop: string) => !['variant', 'removePadding'].includes(prop),
-  slot: 'Root',
-})<CardContentExProps>(({ variant, removePadding }) => ({
-  ...((variant === 'scrollable' || removePadding) && {
-    [':last-child']: { paddingBottom: 0 },
-    overflow: 'auto',
-    paddingTop: 0,
-    ...(removePadding && { padding: 0 }),
-  }),
-}))
-
-export type CardContentExProps = CardContentProps & {
-  refreshRef?: number
-  removePadding?: boolean
-  scrollToTop?: number
-  variant?: 'scrollable' | 'normal'
-}
-
-export const CardContentExWithRef = ({
-  ref, scrollToTop = 0, refreshRef = 0, ...props
-}: CardContentExProps & { ref?: React.RefObject<HTMLDivElement | null> }) => {
-  const sharedRef = useShareForwardedRef<HTMLDivElement>(ref, refreshRef)
-
-  useEffect(() => {
-    if (sharedRef && scrollToTop) {
-      sharedRef.current?.scroll({ behavior: 'smooth', top: 0 })
-    }
-  }, [sharedRef, scrollToTop])
-
-  return <CardContentExRoot ref={sharedRef} {...props} />
-}
-
-CardContentExWithRef.displayName = 'CardContentEx'
-
-export const CardContentEx = CardContentExWithRef

package/src/components/CardEx.tsx

@@ -1,34 +0,0 @@
-import type { CardProps } from '@mui/material'
-import { Card } from '@mui/material'
-import { useGradientStyles } from '@xyo-network/react-shared'
-import React from 'react'
-
-export interface CardExProps extends CardProps {
-  gradient?: 'border' | 'background'
-}
-
-export const CardExWithRef = ({
-  ref, style, gradient, ...props
-}: CardExProps) => {
-  const styles = useGradientStyles()
-  const gradientStyle
-    = gradient === 'border'
-      ? styles.border
-      : gradient === 'background'
-        ? styles.background
-        : {}
-  return (
-    <Card
-      style={{
-        ...gradientStyle,
-        ...style,
-      }}
-      ref={ref}
-      {...props}
-    />
-  )
-}
-
-CardExWithRef.displayName = 'CardEx'
-
-export const CardEx = CardExWithRef

package/src/components/FullWidthCard/FullWidthCard.stories.tsx

@@ -1,31 +0,0 @@
-/* eslint-disable @stylistic/max-len */
-import type { Meta, StoryFn } from '@storybook/react-vite'
-import React from 'react'
-import { BrowserRouter } from 'react-router-dom'
-
-import { FullWidthCard } from './FullWidthCard.tsx'
-const StorybookEntry = {
-  argTypes: {},
-  component: FullWidthCard,
-  parameters: { docs: { page: null } },
-  title: 'shared/FullWidthCard',
-} as Meta<typeof FullWidthCard>
-
-const Template: StoryFn<typeof FullWidthCard> = args => (
-  <BrowserRouter>
-    <FullWidthCard {...args}></FullWidthCard>
-  </BrowserRouter>
-)
-
-const Default = Template.bind({})
-Default.args = {
-  cardIsButton: true,
-  desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat delectus nemo optio quis! Totam magni laboriosam repudiandae nam nobis at quisquam aut omnis, quis officiis similique enim id dolorem unde!',
-  name: 'Big Title Here',
-
-  to: '/link',
-}
-
-export { Default }
-
-export default StorybookEntry

package/src/components/FullWidthCard/FullWidthCard.tsx

@@ -1,133 +0,0 @@
-import { ArrowForwardRounded as ArrowForwardRoundedIcon } from '@mui/icons-material'
-import type { CardProps } from '@mui/material'
-import {
-  Card, CardActions, CardContent, CardMedia, Grid, IconButton, Typography, useTheme, Zoom,
-} from '@mui/material'
-import { FlexGrowCol } from '@xylabs/react-flexbox'
-import { alphaCss, useIsSmall } from '@xylabs/react-theme'
-import type { ReactNode } from 'react'
-import React, { useState } from 'react'
-import type { To } from 'react-router-dom'
-import { useNavigate } from 'react-router-dom'
-
-export interface FullWidthCardProps extends CardProps {
-  cardIsButton?: boolean
-  desc?: ReactNode
-  href?: string
-  linkText?: string
-  media?: string
-  name: ReactNode
-  small?: boolean
-  to?: To
-}
-
-export const FullWidthCard: React.FC<FullWidthCardProps> = ({
-  cardIsButton, desc, href, media, name, small, to, ...props
-}) => {
-  const theme = useTheme()
-  const [raised, setRaised] = useState(false)
-  const navigate = useNavigate()
-  const isMobile = useIsSmall()
-
-  const localRouteChange = (to: To | undefined) => {
-    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-    to ? void navigate(to) : void navigate('/404')
-  }
-  const externalRouteChange = (href: string | undefined) => {
-    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-    href ? void window.open(href) : void navigate('/404')
-  }
-
-  return (
-    <Card
-      elevation={raised ? 3 : 0}
-      style={{ height: '100%', width: '100%' }}
-      {...props}
-      sx={{
-        '&:hover': { cursor: 'pointer' },
-        'backgroundColor': alphaCss(theme.vars.palette.primary.light, 0.05),
-      }}
-      onMouseEnter={() =>
-        isMobile
-          ? null
-          : cardIsButton
-            ? setRaised(true)
-            : null}
-      onMouseLeave={() =>
-        isMobile
-          ? null
-          : cardIsButton
-            ? setRaised(false)
-            : null}
-      onClick={() =>
-        cardIsButton
-          ? href
-            ? externalRouteChange(href)
-            : to
-              ? localRouteChange(to)
-              : navigate('/404')
-          : null}
-    >
-      {media
-        ? <CardMedia component="img" height="100" image={media} alt="" />
-        : null}
-
-      <CardContent>
-        <Grid container alignItems="center" paddingY={2} paddingX={2}>
-          <Grid size={{ xs: 12, md: 6 }}>
-            {typeof name === 'string'
-              ? (
-                  <Typography fontWeight={700} variant="h2" textAlign="left" paddingBottom={1}>
-                    {name}
-                  </Typography>
-                )
-              : name}
-          </Grid>
-          <Grid size={{ xs: 12, md: 5 }}>
-            <Typography variant="body1" fontWeight={400} textAlign="left">
-              {desc}
-            </Typography>
-          </Grid>
-          <Grid size={{ xs: 1 }} display={isMobile ? 'none' : 'flex'} justifyContent="center">
-            <Zoom in={raised}>
-              <IconButton
-                color="primary"
-                size={small ? 'small' : 'medium'}
-                onClick={() =>
-                  href
-                    ? externalRouteChange(href)
-                    : to
-                      ? localRouteChange(to)
-                      : navigate('/404')}
-                disableFocusRipple
-                disableRipple
-                disableTouchRipple
-              >
-                <ArrowForwardRoundedIcon fontSize={small ? 'small' : 'medium'} />
-              </IconButton>
-            </Zoom>
-          </Grid>
-        </Grid>
-      </CardContent>
-      <CardActions sx={{ display: { md: isMobile ? 'flex' : 'none' } }}>
-        <FlexGrowCol alignItems="flex-end">
-          <IconButton
-            color="primary"
-            size={small ? 'small' : 'medium'}
-            onClick={() =>
-              href
-                ? externalRouteChange(href)
-                : to
-                  ? localRouteChange(to)
-                  : navigate('/404')}
-            disableFocusRipple
-            disableRipple
-            disableTouchRipple
-          >
-            <ArrowForwardRoundedIcon fontSize={small ? 'small' : 'medium'} />
-          </IconButton>
-        </FlexGrowCol>
-      </CardActions>
-    </Card>
-  )
-}

package/src/components/FullWidthCard/index.ts

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

package/src/components/PageCard.stories.tsx

@@ -1,55 +0,0 @@
-import { CardContent, Typography } from '@mui/material'
-import type { Meta, StoryFn } from '@storybook/react-vite'
-import { WithRefDecorator } from '@xyo-network/react-storybook'
-import React, { useState } from 'react'
-
-import { PageCard } from './PageCard.tsx'
-
-const StorybookEntry: Meta = {
-  argTypes: { onRefresh: { table: { disable: true } } },
-  component: PageCard,
-  parameters: { docs: { page: null } },
-  title: 'shared/PageCard',
-}
-
-const Template: StoryFn<typeof PageCard> = (props) => {
-  const [refreshedValue, setRefreshedValue] = useState<number>(Math.random)
-  return (
-    <PageCard title="Page Card" subheader="subheader" onRefresh={() => setRefreshedValue(Math.random())} {...props}>
-      <CardContent>
-        <Typography variant="body1">Page Card Content</Typography>
-        <Typography variant="body1">
-          Refreshed Value:
-          {refreshedValue?.toString()}
-        </Typography>
-      </CardContent>
-    </PageCard>
-  )
-}
-
-const TemplateWithNoOnRefresh: StoryFn<typeof PageCard> = (props) => {
-  return (
-    <PageCard title="Page Card" subheader="subheader" {...props}>
-      <CardContent>
-        <Typography variant="body1">Page Card Content</Typography>
-      </CardContent>
-    </PageCard>
-  )
-}
-
-const Default = Template.bind({})
-Default.args = {}
-Default.parameters = { actions: { argTypesRegex: '' } }
-
-const WithNoOnRefresh = TemplateWithNoOnRefresh.bind({})
-WithNoOnRefresh.args = {}
-WithNoOnRefresh.parameters = { actions: { argTypesRegex: '' } }
-
-const WithRef = Template.bind({})
-WithRef.decorators = [WithRefDecorator]
-
-export {
-  Default, WithNoOnRefresh, WithRef,
-}
-
-export default StorybookEntry

package/src/components/PageCard.tsx

@@ -1,57 +0,0 @@
-import { Refresh as RefreshIcon } from '@mui/icons-material'
-import type { CardHeaderProps } from '@mui/material'
-import { CardHeader, IconButton } from '@mui/material'
-import { TypographyEx } from '@xyo-network/react-shared'
-import type { ReactNode } from 'react'
-import React from 'react'
-
-import type { CardExProps } from './CardEx.tsx'
-import { CardEx } from './CardEx.tsx'
-
-export interface PageCardProps extends CardExProps {
-  action?: ReactNode
-  onRefresh?: () => void
-  subheader?: CardHeaderProps['subheader']
-}
-
-const PageCardWithRef = ({
-  ref, subheader, title, onRefresh, children, action, style, ...props
-}: PageCardProps) => {
-  return (
-    <CardEx
-      style={{
-        backgroundColor: 'transparent', position: 'relative', ...style,
-      }}
-      elevation={0}
-      ref={ref}
-      {...props}
-    >
-      <CardHeader
-        title={(
-          <TypographyEx variant="h5" gutterBottom>
-            {title}
-          </TypographyEx>
-        )}
-        subheader={<TypographyEx variant="subtitle1">{subheader}</TypographyEx>}
-        action={
-          action ?? (
-            <>
-              {onRefresh
-                ? (
-                    <IconButton onClick={() => onRefresh?.()}>
-                      <RefreshIcon />
-                    </IconButton>
-                  )
-                : null}
-            </>
-          )
-        }
-      />
-      {children}
-    </CardEx>
-  )
-}
-
-PageCardWithRef.displayName = 'PageCard'
-
-export const PageCard = PageCardWithRef

package/src/components/SimpleCard/SimpleCard.stories.tsx

@@ -1,99 +0,0 @@
-/* eslint-disable @stylistic/max-len */
-import { Grid } from '@mui/material'
-import type { Meta, StoryFn } from '@storybook/react-vite'
-import React from 'react'
-import { BrowserRouter } from 'react-router-dom'
-
-import CoinbaseWalletIcon from './coinbase-wallet.svg'
-import MoneyMedia from './money.jpg'
-import { SimpleCard } from './SimpleCard.tsx'
-const StorybookEntry = {
-  argTypes: {},
-  component: SimpleCard,
-  parameters: { docs: { page: null } },
-  title: 'shared/SimpleCard',
-} as Meta<typeof SimpleCard>
-
-const Template: StoryFn<typeof SimpleCard> = args => (
-  <BrowserRouter>
-    <Grid container spacing={2}>
-      <Grid size={{
-        xs: 12, sm: 6, md: 3,
-      }}
-      >
-        <SimpleCard {...args}></SimpleCard>
-      </Grid>
-      <Grid size={{
-        xs: 12, sm: 6, md: 3,
-      }}
-      >
-        <SimpleCard {...args}></SimpleCard>
-      </Grid>
-      <Grid size={{
-        xs: 12, sm: 6, md: 3,
-      }}
-      >
-        <SimpleCard {...args}></SimpleCard>
-      </Grid>
-      <Grid size={{
-        xs: 12, sm: 6, md: 3,
-      }}
-      >
-        <SimpleCard {...args}></SimpleCard>
-      </Grid>
-    </Grid>
-  </BrowserRouter>
-)
-
-const Default = Template.bind({})
-Default.args = {
-  desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat delectus nemo optio quis! Totam magni laboriosam repudiandae nam nobis at quisquam aut omnis, quis officiis similique enim id dolorem unde!',
-  headline: 'Headline Lorem Ipsum',
-  subtitle: 'Aug 25, 1997',
-}
-const DefaultWithImage = Template.bind({})
-DefaultWithImage.args = {
-  desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat delectus nemo optio quis! Totam magni laboriosam repudiandae nam nobis at quisquam aut omnis, quis officiis similique enim id dolorem unde!',
-  headline: 'Headline Lorem Ipsum',
-  iconImage: CoinbaseWalletIcon,
-  subtitle: 'Aug 25, 1997',
-}
-const VariantButton = Template.bind({})
-VariantButton.args = {
-  desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat delectus nemo optio quis! Totam magni laboriosam repudiandae nam nobis at quisquam aut omnis, quis officiis similique enim id dolorem unde!',
-  headline: 'Headline Lorem Ipsum',
-  interactionVariant: 'button',
-  subtitle: 'Aug 25, 1997',
-}
-const DefaultSmallCard = Template.bind({})
-DefaultSmallCard.args = {
-  desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat delectus nemo optio quis!',
-  headline: 'Headline Lorem Ipsum',
-  small: true,
-  subtitle: 'Aug 25, 1997',
-}
-const DefaultMediaCard = Template.bind({})
-DefaultMediaCard.args = {
-  desc: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat delectus nemo optio quis! Totam magni laboriosam repudiandae nam nobis at quisquam aut omnis, quis officiis similique enim id dolorem unde!',
-  headline: 'Headline Lorem Ipsum',
-  media: MoneyMedia,
-  subtitle: 'Aug 25, 1997',
-}
-const CardWithAllParameters = Template.bind({})
-CardWithAllParameters.args = {
-  desc: 'Many people believe that a card cannot be a button. But here at XYO, we say "No way, José" and turn our cards into buttons.',
-  headline: 'Did you know that this card is complex?',
-  iconImage: CoinbaseWalletIcon,
-  interactionVariant: 'button',
-  media: MoneyMedia,
-  subtitle: 'Aug 25, 1997',
-}
-
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
-
-export {
-  CardWithAllParameters, Default, DefaultMediaCard, DefaultSmallCard, DefaultWithImage, VariantButton,
-}
-
-export default StorybookEntry