@xyo-network/react-card 2.26.37 → 2.26.38

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

package/package.json

@@ -15,7 +15,7 @@
     "@mui/icons-material": "^5.8.4",
     "@mui/material": "^5.9.2",
     "@xylabs/react-flexbox": "^2.14.10",
-    "@xyo-network/react-shared": "^2.26.37",
+    "@xyo-network/react-shared": "^2.26.38",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.3.0",
@@ -77,5 +77,5 @@
   },
   "sideEffects": false,
   "types": "dist/esm/index.d.ts",
-  "version": "2.26.37"
+  "version": "2.26.38"
 }

package/src/components/CardEx.tsx

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

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

@@ -0,0 +1,37 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+import { BrowserRouter } from 'react-router-dom'
+
+import { FullWidthCard } from './FullWidthCard'
+const StorybookEntry = {
+  argTypes: {},
+  component: FullWidthCard,
+  parameters: {
+    docs: {
+      page: null,
+    },
+  },
+  title: 'shared/FullWidthCard',
+} as ComponentMeta<typeof FullWidthCard>
+
+const Template: ComponentStory<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',
+}
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+//@ts-ignore
+
+export { Default }
+
+// eslint-disable-next-line import/no-default-export
+export default StorybookEntry

package/src/components/FullWidthCard/FullWidthCard.tsx

@@ -0,0 +1,97 @@
+import ArrowForwardRoundedIcon from '@mui/icons-material/ArrowForwardRounded'
+import { alpha, Card, CardActions, CardContent, CardMedia, CardProps, Grid, IconButton, Typography, useTheme, Zoom } from '@mui/material'
+import { FlexGrowCol } from '@xylabs/react-flexbox'
+import { useIsMobile } from '@xyo-network/react-shared'
+import { ReactNode, useState } from 'react'
+import { To, useNavigate } from 'react-router-dom'
+
+export interface FullWidthCardProps extends CardProps {
+  name: ReactNode
+  desc?: ReactNode
+  href?: string
+  to?: To
+  linkText?: string
+  media?: string
+  small?: boolean
+  cardIsButton?: boolean
+}
+
+export const FullWidthCard: React.FC<FullWidthCardProps> = ({ name, small, cardIsButton, desc, href, to, media, ...props }) => {
+  const theme = useTheme()
+  const [raised, setRaised] = useState(false)
+  const navigate = useNavigate()
+  const isMobile = useIsMobile()
+
+  const localRouteChange = (to: To | undefined) => {
+    to ? navigate(to) : navigate('/404')
+  }
+  const externalRouteChange = (href: string | undefined) => {
+    href ? window.open(href) : navigate('/404')
+  }
+
+  return (
+    <Card
+      elevation={raised ? 3 : 0}
+      style={{ height: '100%', width: '100%' }}
+      {...props}
+      sx={{
+        '&:hover': {
+          cursor: 'pointer',
+        },
+        backgroundColor: alpha(theme.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 item xs={12} md={6}>
+            {typeof name === 'string' ? (
+              <Typography fontWeight={700} variant="h2" textAlign="left" paddingBottom={1}>
+                {name}
+              </Typography>
+            ) : (
+              name
+            )}
+          </Grid>
+          <Grid item xs={12} md={5}>
+            <Typography variant="body1" fontWeight={400} textAlign="left">
+              {desc}
+            </Typography>
+          </Grid>
+          <Grid item 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

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

package/src/components/PageCard.stories.tsx

@@ -0,0 +1,62 @@
+/* eslint-disable import/no-internal-modules */
+import { CardContent, Typography } from '@mui/material'
+import { ComponentStory, Meta } from '@storybook/react'
+import { useState } from 'react'
+
+import { PageCard } from './PageCard'
+
+const StorybookEntry: Meta = {
+  argTypes: {
+    onRefresh: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+  component: PageCard,
+  parameters: {
+    docs: {
+      page: null,
+    },
+  },
+  title: 'shared/PageCard',
+}
+
+const Template: ComponentStory<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: ComponentStory<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: '' },
+}
+
+export { Default, WithNoOnRefresh }
+
+// eslint-disable-next-line import/no-default-export
+export default StorybookEntry

package/src/components/PageCard.tsx

@@ -0,0 +1,38 @@
+import RefreshIcon from '@mui/icons-material/Refresh'
+import { CardHeader, CardHeaderProps, IconButton, SvgIconProps } from '@mui/material'
+import { TypographyEx } from '@xyo-network/react-shared'
+import { ReactNode } from 'react'
+
+import { CardEx, CardExProps } from './CardEx'
+
+export interface PageCardProps extends CardExProps {
+  icon?: (props?: SvgIconProps) => ReactNode
+  onRefresh?: () => void
+  subheader?: CardHeaderProps['subheader']
+}
+
+export const PageCard: React.FC<PageCardProps> = ({ subheader, title, icon, onRefresh, children, style, ...props }) => {
+  return (
+    <CardEx style={{ position: 'relative', ...style }} {...props}>
+      {icon?.({ style: { fontSize: 512, left: '-144px', opacity: 0.05, position: 'absolute', top: '-144px' } })}
+      <CardHeader
+        title={
+          <TypographyEx variant="h4" gradient="text">
+            {title}
+          </TypographyEx>
+        }
+        subheader={subheader}
+        action={
+          <>
+            {onRefresh ? (
+              <IconButton onClick={() => onRefresh?.()}>
+                <RefreshIcon />
+              </IconButton>
+            ) : null}
+          </>
+        }
+      />
+      {children}
+    </CardEx>
+  )
+}

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

@@ -0,0 +1,88 @@
+import { Grid } from '@mui/material'
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+import { BrowserRouter } from 'react-router-dom'
+
+import CoinbaseWalletIcon from './coinbase-wallet.svg'
+import MoneyMedia from './money.jpg'
+import { SimpleCard } from './SimpleCard'
+const StorybookEntry = {
+  argTypes: {},
+  component: SimpleCard,
+  parameters: {
+    docs: {
+      page: null,
+    },
+  },
+  title: 'shared/SimpleCard',
+} as ComponentMeta<typeof SimpleCard>
+
+const Template: ComponentStory<typeof SimpleCard> = (args) => (
+  <BrowserRouter>
+    <Grid container spacing={2}>
+      <Grid item xs={12} sm={6} md={3}>
+        <SimpleCard {...args}></SimpleCard>
+      </Grid>
+      <Grid item xs={12} sm={6} md={3}>
+        <SimpleCard {...args}></SimpleCard>
+      </Grid>
+      <Grid item xs={12} sm={6} md={3}>
+        <SimpleCard {...args}></SimpleCard>
+      </Grid>
+      <Grid item 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 }
+
+// eslint-disable-next-line import/no-default-export
+export default StorybookEntry

package/src/components/SimpleCard/SimpleCard.tsx

@@ -0,0 +1,88 @@
+import ArrowForwardRoundedIcon from '@mui/icons-material/ArrowForwardRounded'
+import { alpha, CardActions, CardContent, CardMedia, IconButton, Typography, useTheme } from '@mui/material'
+import { FlexCol, FlexGrowCol } from '@xylabs/react-flexbox'
+import { useIsMobile } from '@xyo-network/react-shared'
+import { ReactNode, useState } from 'react'
+import { To, useNavigate } from 'react-router-dom'
+
+import { CardEx, CardExProps } from '../CardEx'
+
+export interface SimpleCardProps extends CardExProps {
+  headline?: ReactNode
+  desc?: ReactNode
+  href?: string
+  to?: To
+  media?: string
+  small?: boolean
+  iconImage?: string
+  interactionVariant?: 'button' | 'card'
+  subtitle?: string
+}
+
+export const SimpleCard: React.FC<SimpleCardProps> = ({ iconImage, subtitle, headline, small, desc, href, to, interactionVariant = 'card', media, ...props }) => {
+  const theme = useTheme()
+  const [raised, setRaised] = useState(false)
+  const navigate = useNavigate()
+  const isMobile = useIsMobile()
+  const localRouteChange = (to: To | undefined) => {
+    to ? navigate(to) : navigate('/404')
+  }
+  const externalRouteChange = (href: string | undefined) => {
+    href ? window.open(href) : navigate('/404')
+  }
+  return (
+    <CardEx
+      elevation={raised ? 3 : 0}
+      style={{ height: '100%', justifyContent: 'space-between', width: '100%' }}
+      sx={{
+        '&:hover': {
+          cursor: interactionVariant == 'button' ? 'pointer' : null,
+        },
+        backgroundColor: alpha(theme.palette.primary.light, 0.05),
+      }}
+      onMouseEnter={() => (isMobile ? null : interactionVariant == 'button' ? setRaised(true) : null)}
+      onMouseLeave={() => (isMobile ? null : interactionVariant == 'button' ? setRaised(false) : null)}
+      onClick={() => (interactionVariant == 'button' ? (href ? externalRouteChange(href) : to ? localRouteChange(to) : navigate('/404')) : null)}
+      {...props}
+    >
+      {media ? <CardMedia component="img" height="100" image={media} alt="" /> : null}
+
+      <CardContent sx={{ height: '100%' }}>
+        <FlexCol width="100%" alignItems="flex-start">
+          {iconImage ? <img src={iconImage} height="40px" style={{ paddingBottom: '8px' }} /> : null}
+          {typeof headline === 'string' ? (
+            <Typography variant={small ? 'body1' : 'h6'} textAlign="left" gutterBottom>
+              {headline}
+            </Typography>
+          ) : (
+            headline
+          )}
+          {subtitle ? (
+            <Typography variant="subtitle2" textAlign="left" gutterBottom>
+              {subtitle}
+            </Typography>
+          ) : null}
+          <Typography variant={small ? 'caption' : 'body1'} textAlign="left" gutterBottom>
+            {desc}
+          </Typography>
+        </FlexCol>
+      </CardContent>
+      {interactionVariant == 'button' ? (
+        <CardActions>
+          <FlexGrowCol alignItems="flex-end">
+            <IconButton
+              color={raised ? 'secondary' : '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>
+      ) : null}
+    </CardEx>
+  )
+}

package/src/components/SimpleCard/coinbase-wallet.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><style>.cls-1{fill:#005cfe;}.cls-2{fill:#fdfdfe;}</style></defs><g id="Layer_6" data-name="Layer 6"><g id="JuvZVa"><path class="cls-1" d="M0,50C0,40.77-.1,31.58.07,22.4.22,14.9,3,8.55,9.32,4.09A22.35,22.35,0,0,1,20.3.25,56.53,56.53,0,0,1,26.12,0C42.74,0,59.37,0,76,0c5.17,0,10.15.92,14.5,4A21.42,21.42,0,0,1,99.75,20.1,55.89,55.89,0,0,1,100,26c0,17.13.11,34.26-.08,51.38-.1,8.93-3.88,16-12.11,20.15A25.49,25.49,0,0,1,76.15,100Q50,100,23.83,100c-5.37,0-10.52-1.06-14.95-4.39A21.57,21.57,0,0,1,.21,79.72,59,59,0,0,1,0,73.78Q0,61.87,0,50Zm50-35a35.07,35.07,0,1,0,35,35.13A35,35,0,0,0,50,14.92Z"/><path class="cls-2" d="M50,14.92a35.07,35.07,0,1,1-35.11,35A35,35,0,0,1,50,14.92ZM38.7,50c0,2.92,0,5.83,0,8.75a2.26,2.26,0,0,0,2.52,2.53q8.74,0,17.5,0c1.73,0,2.56-.85,2.56-2.6q0-8.68,0-17.38a2.27,2.27,0,0,0-2.57-2.59q-8.7,0-17.39,0c-1.8,0-2.61.84-2.62,2.66C38.69,44.25,38.7,47.12,38.7,50Z"/><path class="cls-1" d="M38.7,50c0-2.88,0-5.75,0-8.63,0-1.82.82-2.66,2.62-2.66q8.7,0,17.39,0a2.27,2.27,0,0,1,2.57,2.59q0,8.69,0,17.38c0,1.75-.83,2.6-2.56,2.6q-8.76,0-17.5,0a2.26,2.26,0,0,1-2.52-2.53C38.68,55.83,38.7,52.92,38.7,50Z"/></g></g></svg>

package/src/components/SimpleCard/index.ts

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

package/src/components/index.ts

@@ -0,0 +1,4 @@
+export * from './CardEx'
+export * from './FullWidthCard'
+export * from './PageCard'
+export * from './SimpleCard'

package/src/index.ts

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

package/src/types/images.d.ts

@@ -0,0 +1,5 @@
+declare module '*.png'
+declare module '*.jpg'
+declare module '*.svg'
+declare module '*.gif'
+declare module '*.webp'