@xyo-network/react-card 7.5.7 → 7.5.11

package/src/components/SimpleCard/SimpleCard.tsx

@@ -1,137 +0,0 @@
-import { ArrowForwardRounded as ArrowForwardRoundedIcon } from '@mui/icons-material'
-import {
-  CardActions, CardContent, CardMedia, IconButton, Typography, useTheme,
-} from '@mui/material'
-import { FlexCol, 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'
-
-import type { CardExProps } from '../CardEx.tsx'
-import { CardEx } from '../CardEx.tsx'
-
-export interface SimpleCardProps extends CardExProps {
-  desc?: ReactNode
-  headline?: ReactNode
-  href?: string
-  iconImage?: string
-  interactionVariant?: 'button' | 'card'
-  media?: string
-  small?: boolean
-  subtitle?: string
-  to?: To
-}
-
-export const SimpleCard: React.FC<SimpleCardProps> = ({
-  children,
-  desc,
-  iconImage,
-  interactionVariant = 'card',
-  headline,
-  href,
-  media,
-  small,
-  subtitle,
-  sx,
-  to,
-  ...props
-}) => {
-  const theme = useTheme()
-  const [raised, setRaised] = useState(false)
-  const navigate = useNavigate()
-  const isSmall = 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 (
-    <CardEx
-      elevation={raised ? 3 : 0}
-      sx={{
-        '&:hover': { cursor: interactionVariant == 'button' ? 'pointer' : null },
-        'backgroundColor': alphaCss(theme.vars.palette.primary.main, 0.05),
-        ...sx,
-      }}
-      onMouseEnter={() =>
-        isSmall
-          ? null
-          : interactionVariant == 'button'
-            ? setRaised(true)
-            : null}
-      onMouseLeave={() =>
-        isSmall
-          ? 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>
-      {children}
-      {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

@@ -1 +0,0 @@
-<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

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

package/src/components/SimpleCardGrid/SimpleCardGrid.stories.tsx

@@ -1,74 +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 CoinbaseWalletIcon from './coinbase-wallet.svg'
-import MoneyMedia from './money.jpg'
-import { SimpleCardGrid } from './SimpleCardGrid.tsx'
-const StorybookEntry = {
-  argTypes: {},
-  component: SimpleCardGrid,
-  parameters: { docs: { page: null } },
-  title: 'shared/SimpleCardGrid',
-} as Meta<typeof SimpleCardGrid>
-
-const Template: StoryFn<typeof SimpleCardGrid> = args => (
-  <BrowserRouter>
-    <SimpleCardGrid {...args}></SimpleCardGrid>
-  </BrowserRouter>
-)
-
-const Default = Template.bind({})
-Default.args = {
-  cards: [
-    {
-      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',
-    },
-    {
-      desc: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente incidunt, beatae suscipit nam consequuntur, minus facere obcaecati, recusandae totam aspernatur aut debitis. Aspernatur nisi molestiae atque? Nisi eius perspiciatis tempore?',
-      headline: 'Did you know that this card is complex?',
-      iconImage: CoinbaseWalletIcon,
-      interactionVariant: 'button',
-      media: MoneyMedia,
-      subtitle: 'Aug 25, 1997',
-    },
-    {
-      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.Lorem ipsum dolor sit amet consectetur adipisicing elit.',
-      headline: 'Did you know that this card is complex?',
-      iconImage: CoinbaseWalletIcon,
-      interactionVariant: 'button',
-      media: MoneyMedia,
-      subtitle: 'Aug 25, 1997',
-    },
-    {
-      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. Sapiente incidunt, beatae suscipit nam consequuntur, minus facere obcaecati, recusandae totam aspernatur aut debitis. Aspernatur nisi molestiae atque? Nisi eius perspiciatis tempore?',
-      headline: 'Did you know that this card is complex?',
-      iconImage: CoinbaseWalletIcon,
-      interactionVariant: 'button',
-      media: MoneyMedia,
-      subtitle: 'Aug 25, 1997',
-    },
-    {
-      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',
-    },
-  ],
-  spacing: 2,
-}
-
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
-
-export { Default }
-
-export default StorybookEntry

package/src/components/SimpleCardGrid/SimpleCardGrid.tsx

@@ -1,30 +0,0 @@
-import type { GridProps } from '@mui/material'
-import { Grid } from '@mui/material'
-import React from 'react'
-
-import type { SimpleCardProps } from '../SimpleCard/index.ts'
-import { SimpleCard } from '../SimpleCard/index.ts'
-
-export interface SimpleCardGridProps extends GridProps {
-  cards?: SimpleCardProps[]
-}
-
-export const SimpleCardGrid: React.FC<SimpleCardGridProps> = ({ cards, ...props }) => {
-  return (
-    <Grid container {...props}>
-      {cards?.map((card, index) => (
-        <Grid
-          key={index}
-          size={{
-            xs: 12, sm: 6, md: 4,
-          }}
-        >
-          <SimpleCard
-            {...card}
-            sx={{ flexDirection: 'column', height: '100%' }}
-          />
-        </Grid>
-      ))}
-    </Grid>
-  )
-}

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

@@ -1 +0,0 @@
-<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/SimpleCardGrid/index.ts

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

package/src/components/index.ts

@@ -1,5 +0,0 @@
-export * from './CardContentEx.tsx'
-export * from './CardEx.tsx'
-export * from './FullWidthCard/index.ts'
-export * from './PageCard.tsx'
-export * from './SimpleCard/index.ts'

package/src/index.ts

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

package/src/types/global.d.ts

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

package/src/types/images.d.ts

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