@xyo-network/react-share 7.5.8 → 7.5.11

package/src/out/CopyIconButton.tsx

@@ -1,58 +0,0 @@
-import { CopyAllRounded } from '@mui/icons-material'
-import {
-  type ButtonProps, CircularProgress, IconButton, Tooltip,
-} from '@mui/material'
-import { forget } from '@xylabs/sdk-js'
-import React, { useState } from 'react'
-
-import type { ShareLinkProps } from './lib/index.ts'
-
-export interface CopyIconButtonProps extends ButtonProps, ShareLinkProps {
-  onClickError?: (error: Error) => void
-}
-
-export const CopyIconButton: React.FC<CopyIconButtonProps> = ({
-  copyLinkText, copiedLinkText, onClickError, shareLinkName, shareUrl, uploadPayloads, ...props
-}) => {
-  const CopyLink = copyLinkText ?? 'Copy Link'
-  const Copied = copiedLinkText ?? 'Copied!'
-
-  const [copyTooltipTitle, setCopyToolTipTitle] = useState(CopyLink)
-  const [loading, setLoading] = useState(false)
-
-  const copyToClipboard = async (link?: string) => {
-    if (link) {
-      try {
-        setLoading(true)
-        await uploadPayloads?.()
-        await navigator.clipboard.writeText(link)
-        setCopyToolTipTitle(Copied)
-        setTimeout(() => setCopyToolTipTitle(CopyLink), 2000)
-        setLoading(false)
-      } catch (e) {
-        setLoading(false)
-        const message = 'Error copying shareUrl to clipboard'
-        console.error(message, e, link)
-        onClickError?.(new Error(message))
-      }
-    } else {
-      console.warn('tried to copy shareUrl before it was generated')
-    }
-  }
-
-  return (
-    <Tooltip title={copyTooltipTitle}>
-      {loading
-        ? (
-            <IconButton>
-              <CircularProgress size="24px" />
-            </IconButton>
-          )
-        : (
-            <IconButton aria-label={`copy ${shareLinkName} link`} onClick={() => forget(copyToClipboard(shareUrl))} edge="end" {...props}>
-              <CopyAllRounded />
-            </IconButton>
-          )}
-    </Tooltip>
-  )
-}

package/src/out/CopyLinkStack.stories.tsx

@@ -1,69 +0,0 @@
-import type { Meta, StoryFn } from '@storybook/react-vite'
-import React from 'react'
-
-import { CopyLinkStack } from './CopyLinkStack.tsx'
-
-export default { title: 'modules/ShareOut/CopyLinkStack' } as Meta<typeof CopyLinkStack>
-
-const Template: StoryFn<typeof CopyLinkStack> = (props) => {
-  return <CopyLinkStack {...props} />
-}
-
-const Default = Template.bind({})
-Default.args = {}
-
-const WithShareUrl = Template.bind({})
-WithShareUrl.args = { shareUrl: 'https://google.com' }
-
-const WithXnsName = Template.bind({})
-WithXnsName.args = {
-  shareUrl: 'https://beta.node.xyo.network.com/view/arietrouw.xyo/profile', xnsName: 'arietrouw.xyo', addToXnsName: true,
-}
-
-const WithNoAddToXnsName = Template.bind({})
-WithNoAddToXnsName.args = {
-  shareUrl: 'https://beta.node.xyo.network.com/view/somehash1234567/profile', xnsName: 'arietrouw.xyo', addToXnsName: false,
-}
-
-const WithXnsNameShortened = Template.bind({})
-WithXnsNameShortened.args = {
-  shareUrl: 'https://beta.node.xyo.network.com/view/arietrouw.xyo/profile', xnsName: 'arietrouw.xyo', addToXnsName: true, sx: { maxWidth: '200px' },
-}
-
-const WithXnsNameInSubdomain = Template.bind({})
-WithXnsNameInSubdomain.args = {
-  shareUrl: 'https://arietrouw.xyo.network', xnsName: 'arietrouw.xyo', addToXnsName: true,
-}
-
-const WithXnsNameCustomColors = Template.bind({})
-WithXnsNameCustomColors.args = {
-  shareUrl: 'https://arietrouw.xyo.network', xnsName: 'arietrouw.xyo', xnsStartColor: 'blue', xnsEndColor: 'red', addToXnsName: true,
-}
-
-const WithError = Template.bind({})
-WithError.args = {
-  shareUrl: 'https://google.com', xnsName: 'foo.xyo', addToXnsName: true,
-}
-
-const WithUploadPayloads = Template.bind({})
-WithUploadPayloads.args = {
-  shareUrl: 'https://beta.node.xyo.network.com/view/arietrouw.xyo/profile',
-  xnsName: 'arietrouw.xyo',
-  addToXnsName: true,
-  copiedLinkText: 'Copied and data uploaded!',
-  copyLinkText: 'Copy link and upload data',
-  uploadPayloads: () => new Promise((resolve) => {
-    setTimeout(() => {
-      alert('uploaded payloads')
-      resolve()
-    }, 1000)
-  }),
-}
-
-export {
-  Default, WithError,
-  WithNoAddToXnsName,
-  WithShareUrl, WithUploadPayloads,
-  WithXnsName, WithXnsNameCustomColors,
-  WithXnsNameInSubdomain, WithXnsNameShortened,
-}

package/src/out/CopyLinkStack.tsx

@@ -1,77 +0,0 @@
-import { Cancel } from '@mui/icons-material'
-import type { StackProps } from '@mui/material'
-import {
-  Stack,
-  Tooltip,
-  Typography,
-} from '@mui/material'
-import React, {
-  useCallback, useMemo, useState,
-} from 'react'
-
-import { CopyIconButton } from './CopyIconButton.tsx'
-import {
-  AnimatedGradientTypography, type ShareLinkProps, splitAroundSubstring,
-} from './lib/index.ts'
-
-export interface CopyLinkStackProps extends ShareLinkProps, StackProps {
-  addToXnsName?: boolean
-  copiedLinkText?: string
-  copyLinkText?: string
-  xnsEndColor?: string
-  xnsStartColor?: string
-}
-
-export const CopyLinkStack: React.FC<CopyLinkStackProps> = ({
-  addToXnsName, copiedLinkText, copyLinkText, shareLinkName, shareUrl, xnsName: xnsNameProp, xnsEndColor, uploadPayloads, xnsStartColor, ...props
-}) => {
-  const [error, setError] = useState<Error>()
-
-  const onClickError = useCallback((error: Error) => {
-    setError(error)
-  }, [])
-
-  const parsedXnsName = useMemo(() => {
-    if (shareUrl && xnsNameProp && addToXnsName) {
-      try {
-        const parts = splitAroundSubstring(shareUrl, xnsNameProp)
-        return parts
-      } catch (e) {
-        setError(e as Error)
-      }
-    }
-  }, [addToXnsName, shareUrl, xnsNameProp])
-
-  const [part1, xnsName, part3] = parsedXnsName || []
-
-  return (
-    <Stack direction="row" alignItems="center" gap={0.25} {...props}>
-      {xnsName && addToXnsName
-        ? (
-            <Stack direction="row" maxWidth="100%" sx={{ overflowX: 'auto' }}>
-              <Typography sx={{ display: 'inline-flex' }}>{part1}</Typography>
-              <AnimatedGradientTypography color1={xnsStartColor} color2={xnsEndColor} sx={{ display: 'inline-flex' }}>{xnsName}</AnimatedGradientTypography>
-              <Typography sx={{ display: 'inline-flex' }}>{part3}</Typography>
-            </Stack>
-          )
-        : (
-            <Typography sx={{
-              display: 'inline-flex', maxWidth: '100%', overflow: 'auto',
-            }}
-            >
-              {shareUrl}
-            </Typography>
-          )}
-      <CopyIconButton
-        copiedLinkText={copiedLinkText}
-        copyLinkText={copyLinkText}
-        onClickError={onClickError}
-        shareLinkName={shareLinkName}
-        shareUrl={shareUrl}
-        sx={{ display: 'inline-flex' }}
-        uploadPayloads={uploadPayloads}
-      />
-      {error ? <Tooltip title={error.message}><Cancel color="error" sx={{ display: 'inline-flex' }} /></Tooltip> : null}
-    </Stack>
-  )
-}

package/src/out/CopyLinkTextField.stories.tsx

@@ -1,18 +0,0 @@
-import type { Meta, StoryFn } from '@storybook/react-vite'
-import React from 'react'
-
-import { CopyLinkTextField } from './CopyLinkTextField.tsx'
-
-export default { title: 'modules/ShareOut/CopyLinkTextField' } as Meta<typeof CopyLinkTextField>
-
-const Template: StoryFn<typeof CopyLinkTextField> = (props) => {
-  return <CopyLinkTextField {...props} />
-}
-
-const Default = Template.bind({})
-Default.args = {}
-
-const WithShareUrl = Template.bind({})
-WithShareUrl.args = { shareUrl: 'https://google.com' }
-
-export { Default, WithShareUrl }

package/src/out/CopyLinkTextField.tsx

@@ -1,41 +0,0 @@
-import type { StandardTextFieldProps } from '@mui/material'
-import { InputAdornment, TextField } from '@mui/material'
-import React, { useCallback, useState } from 'react'
-
-import { CopyIconButton } from './CopyIconButton.tsx'
-
-export interface CopyLinkTextFieldProps extends StandardTextFieldProps {
-  shareLinkName?: string
-  shareUrl?: string
-}
-
-export const CopyLinkTextField: React.FC<CopyLinkTextFieldProps> = ({
-  shareLinkName, shareUrl, ...props
-}) => {
-  const [error, setError] = useState<Error>()
-
-  const onClickError = useCallback((error?: Error) => {
-    setError(error)
-  }, [])
-
-  return (
-    <TextField
-      disabled
-      error={!!error}
-      helperText={error?.message}
-      // to override the color that appears when it's a text field, only on dark mode
-      sx={{ input: { WebkitTextFillColor: 'lightgray !important' } }}
-      value={shareUrl}
-      {...props}
-      slotProps={{
-        input: {
-          endAdornment: (
-            <InputAdornment position="end">
-              <CopyIconButton shareLinkName={shareLinkName} shareUrl={shareUrl} onClickError={onClickError} />
-            </InputAdornment>
-          ),
-        },
-      }}
-    />
-  )
-}

package/src/out/Dialog.stories.tsx

@@ -1,78 +0,0 @@
-import { Button } from '@mui/material'
-import type { Meta, StoryFn } from '@storybook/react-vite'
-import { FlexGrowCol } from '@xylabs/react-flexbox'
-import React, { useMemo, useState } from 'react'
-
-import { CopyLinkTextField } from './CopyLinkTextField.tsx'
-import { ShareOutDialog } from './Dialog.tsx'
-import { ShareOutExplanation } from './Explanation.tsx'
-import { GenerateShareLinkButton } from './GenerateShareLinkButton.tsx'
-import { ShareOutHeadingFlexbox } from './HeadingFlexbox.tsx'
-import { SocialButtonsFlexbox } from './SocialButtonsFlexbox.tsx'
-
-export default { title: 'modules/ShareOut/Dialog' } as Meta<typeof ShareOutDialog>
-
-const Template: StoryFn<typeof ShareOutDialog> = (props) => {
-  return <ShareOutDialog {...props} />
-}
-
-const TemplateWithContent: StoryFn<typeof ShareOutDialog> = (props) => {
-  const [open, setOpen] = useState(false)
-  const onClose = () => setOpen(false)
-  const [shareUrl, setShareUrl] = useState('')
-  const [loading, setLoading] = useState(false)
-
-  const { open: unused, ...restProps } = props
-
-  const cardImg = <img src="https://picsum.photos/100/100" height="100px" width="100px" />
-  const shareLinkName = 'My Share Link'
-
-  const generateLink = async () => {
-    setLoading(true)
-    await new Promise(resolve => setTimeout(() => {
-      setShareUrl('https://example.com')
-      setLoading(false)
-      resolve(null)
-    }, 2000))
-  }
-
-  const shareOutDialogContent = useMemo(() => (
-    <FlexGrowCol gap={2}>
-      <ShareOutHeadingFlexbox shareLinkName={shareLinkName} shareUrl={shareUrl} />
-      {shareUrl
-        ? (
-            <>
-              <CopyLinkTextField shareLinkName={shareLinkName} shareUrl={shareUrl} />
-              <SocialButtonsFlexbox shareUrl={shareUrl} />
-            </>
-          )
-        : <GenerateShareLinkButton loading={loading} onClick={generateLink} />}
-      <ShareOutExplanation />
-    </FlexGrowCol>
-  ), [loading, generateLink, shareLinkName, shareUrl])
-
-  const shareOutDialogActions = ({ onClose }: { onClose?: () => void }) => <Button onClick={onClose} variant="outlined">Close</Button>
-
-  return (
-    <>
-      <Button onClick={() => setOpen(true)} variant="contained">Open</Button>
-      <ShareOutDialog
-        cardImg={cardImg}
-        onClose={onClose}
-        ShareOutDialogActions={shareOutDialogActions}
-        shareOutDialogContent={shareOutDialogContent}
-        open={open}
-        title="Share Out Dialog"
-        subtitle="With a subtitle"
-        {...restProps}
-      />
-    </>
-  )
-}
-
-const Default = Template.bind({})
-
-const WithContent = TemplateWithContent.bind({})
-WithContent.args = {}
-
-export { Default, WithContent }

package/src/out/Dialog.tsx

@@ -1,48 +0,0 @@
-import type { DialogProps } from '@mui/material'
-import {
-  Dialog, DialogActions, DialogContent, DialogTitle, Stack, Typography,
-} from '@mui/material'
-import { FlexCol, FlexGrowCol } from '@xylabs/react-flexbox'
-import type { ComponentType, ReactNode } from 'react'
-import React from 'react'
-
-export interface ShareOutDialogProps extends DialogProps {
-  ShareOutDialogActions?: ComponentType<{ onClose?: () => void }>
-  cardImg?: ReactNode
-  shareOutDialogContent?: ReactNode
-  subtitle?: string
-  title?: string
-}
-
-export const ShareOutDialog: React.FC<ShareOutDialogProps> = ({
-  ShareOutDialogActions, cardImg, open, onClose, shareOutDialogContent, subtitle, title, ...props
-}) => {
-  const handleClose = () => {
-    onClose?.('', 'backdropClick')
-  }
-
-  return (
-    <Dialog onClose={onClose} open={open} {...props}>
-      <DialogTitle>
-        <Stack direction="row" spacing={2}>
-          <FlexGrowCol alignItems="flex-start" width="60%">
-            <Typography variant="h5">{title}</Typography>
-            <Typography variant="body1">
-              {' '}
-              {subtitle}
-            </Typography>
-          </FlexGrowCol>
-          <FlexGrowCol alignItems="flex-end" width="40%">
-            {cardImg}
-          </FlexGrowCol>
-        </Stack>
-      </DialogTitle>
-      <DialogContent>
-        {shareOutDialogContent}
-        <FlexCol alignItems="stretch">
-        </FlexCol>
-      </DialogContent>
-      {ShareOutDialogActions ? <DialogActions><ShareOutDialogActions onClose={handleClose} /></DialogActions> : null}
-    </Dialog>
-  )
-}

package/src/out/Explanation.tsx

@@ -1,29 +0,0 @@
-import { InfoOutlined } from '@mui/icons-material'
-import {
-  Tooltip, Typography, useTheme,
-} from '@mui/material'
-import { FlexGrowRow } from '@xylabs/react-flexbox'
-import React from 'react'
-
-export interface ShareOutExplanationProps {
-  toolTipTitle?: string
-}
-
-export const ShareOutExplanation: React.FC<ShareOutExplanationProps> = ({ toolTipTitle }) => {
-  const theme = useTheme()
-  // eslint-disable-next-line @stylistic/max-len
-  const title = toolTipTitle ?? 'In order for your data to be publicly viewable, it needs to be saved to the XYO Network Public Archivist.  Public data can be seen by your friends, and XYO can generate preview images for easier sharing on social media.'
-  return (
-    <FlexGrowRow alignItems="center">
-      <Typography variant="body2" paddingRight={0.5}>
-        What am I sharing?
-      </Typography>
-      <Tooltip
-        title={title}
-        placement="bottom"
-      >
-        <InfoOutlined fontSize="small" sx={{ fontSize: theme.typography.caption.fontSize }} />
-      </Tooltip>
-    </FlexGrowRow>
-  )
-}

package/src/out/GenerateShareLinkButton.stories.tsx

@@ -1,18 +0,0 @@
-import type { Meta, StoryFn } from '@storybook/react-vite'
-import React from 'react'
-
-import { GenerateShareLinkButton } from './GenerateShareLinkButton.tsx'
-
-export default { title: 'modules/ShareOut/GenerateShareLinkButton' } as Meta<typeof GenerateShareLinkButton>
-
-const Template: StoryFn<typeof GenerateShareLinkButton> = (props) => {
-  return <GenerateShareLinkButton {...props} />
-}
-
-const Default = Template.bind({})
-Default.args = {}
-
-const WithLoading = Template.bind({})
-WithLoading.args = { loading: true }
-
-export { Default, WithLoading }

package/src/out/GenerateShareLinkButton.tsx

@@ -1,31 +0,0 @@
-import type { ButtonProps } from '@mui/material'
-import {
-  Button, CircularProgress, styled,
-} from '@mui/material'
-import React from 'react'
-
-export interface GenerateShareLinkButtonProps extends ButtonProps {
-  loading?: boolean
-}
-
-export const GenerateShareLinkButton: React.FC<GenerateShareLinkButtonProps> = ({
-  children = 'Generate My Share Link', loading, ...props
-}) => {
-  return (
-    <Button
-      variant="contained"
-      startIcon={loading ? <StyledCircularProgress size="small" /> : null}
-      {...props}
-    >
-      {children}
-    </Button>
-  )
-}
-
-const StyledCircularProgress = styled(CircularProgress, { name: 'StyledCircularProgress' })(({ theme }) => ({
-  // ensure the color of the spinner is the same as the button color
-  color: theme.vars.palette.primary.contrastText,
-  height: '20px',
-  opacity: '.87',
-  width: '20px',
-}))

package/src/out/HeadingFlexbox.tsx

@@ -1,27 +0,0 @@
-import { Typography } from '@mui/material'
-import type { FlexBoxProps } from '@xylabs/react-flexbox'
-import { FlexGrowCol } from '@xylabs/react-flexbox'
-import React from 'react'
-
-export interface ShareOutHeadingFlexboxProps extends FlexBoxProps {
-  shareLinkName?: string
-  shareUrl?: string
-}
-
-export const ShareOutHeadingFlexbox: React.FC<ShareOutHeadingFlexboxProps> = ({
-  children, shareLinkName, shareUrl, ...props
-}) => {
-  const GenerateShareLinkExplanation = "When you generate your share link, we'll make a small amount of your data public so friends can check it out!"
-
-  return (
-    <FlexGrowCol alignItems="flex-start" paddingBottom={1} {...props}>
-      <Typography variant="body1" gutterBottom>
-        <strong>Your Share Link</strong>
-      </Typography>
-      <Typography variant="body1">
-        {shareUrl ? `Use this link or the buttons below to share ${shareLinkName}` : GenerateShareLinkExplanation}
-      </Typography>
-      {children}
-    </FlexGrowCol>
-  )
-}

package/src/out/SocialButtonsFlexbox.stories.tsx

@@ -1,41 +0,0 @@
-import type { Meta, StoryFn } from '@storybook/react-vite'
-import React from 'react'
-
-import { SocialButtonsFlexbox } from './SocialButtonsFlexbox.tsx'
-
-export default { title: 'modules/ShareOut/SocialButtonsFlexbox' } as Meta<typeof SocialButtonsFlexbox>
-
-const Template: StoryFn<typeof SocialButtonsFlexbox> = (props) => {
-  return <SocialButtonsFlexbox {...props} />
-}
-
-const Default = Template.bind({})
-Default.args = {}
-
-const WithShareUrl = Template.bind({})
-WithShareUrl.args = { shareUrl: 'https://google.com' }
-
-const WithUploadPayloads = Template.bind({})
-WithUploadPayloads.args = {
-  shareUrl: 'https://google.com',
-  uploadPayloads: () => new Promise((resolve) => {
-    setTimeout(() => {
-      alert('uploaded payloads')
-      resolve()
-    }, 1000)
-  }),
-}
-
-const WithUploadPayloadsError = Template.bind({})
-WithUploadPayloadsError.args = {
-  shareUrl: 'https://google.com',
-  uploadPayloads: () => new Promise((_resolve, reject) => {
-    setTimeout(() => {
-      reject(new Error('Error uploading payloads'))
-    }, 1000)
-  }),
-}
-
-export {
-  Default, WithShareUrl, WithUploadPayloads, WithUploadPayloadsError,
-}

package/src/out/SocialButtonsFlexbox.tsx

@@ -1,79 +0,0 @@
-import { Typography } from '@mui/material'
-import { ButtonEx } from '@xylabs/react-button'
-import { ErrorRender } from '@xylabs/react-error'
-import type { FlexBoxProps } from '@xylabs/react-flexbox'
-import { FlexGrowCol, FlexRow } from '@xylabs/react-flexbox'
-import React, { useState } from 'react'
-
-import { FacebookSvgIcon, XTwitterSvgIcon } from '../icons/index.ts'
-
-export interface SocialButtonsFlexboxProps extends FlexBoxProps {
-  shareUrl?: string
-  uploadPayloads?: () => Promise<void>
-}
-
-export const SocialButtonsFlexbox: React.FC<SocialButtonsFlexboxProps> = ({
-  shareUrl, uploadPayloads, ...props
-}) => {
-  const [error, setError] = useState<Error>()
-  const [xLoading, setXLoading] = useState(false)
-  const [fbLoading, setFbLoading] = useState(false)
-
-  const handleClick = async (openUrl: () => void, buttonName: 'x' | 'fb') => {
-    const setLoading = buttonName === 'x' ? setXLoading : setFbLoading
-    try {
-      setLoading(true)
-      await uploadPayloads?.()
-      setLoading(false)
-      openUrl()
-    } catch (e) {
-      setLoading(false)
-      console.error('Error uploading payloads', e)
-      setError(e as Error)
-    }
-  }
-
-  return (
-    <FlexGrowCol alignItems="stretch" paddingTop={2} {...props}>
-      <Typography variant="body1" gutterBottom>
-        <strong>Share on Social Media</strong>
-      </Typography>
-      <FlexRow
-        gap={0.5}
-        sx={{ flexDirection: { md: 'row', xs: 'column' } }}
-      >
-        {shareUrl
-          ? (
-              <>
-                <ButtonEx
-                  variant="contained"
-                  style={{ backgroundColor: '#000', color: '#fff' }}
-                  busy={xLoading}
-                  onClick={async () => {
-                    const openUrl = () => window.open(`https://twitter.com/intent/tweet?url=${encodeURIComponent(shareUrl)}`)
-                    await handleClick(openUrl, 'x')
-                  }}
-                  startIcon={<XTwitterSvgIcon width="20px" />}
-                >
-                  Share on X (Twitter)
-                </ButtonEx>
-                <ButtonEx
-                  busy={fbLoading}
-                  variant="contained"
-                  style={{ backgroundColor: '#4267b2', color: '#fff' }}
-                  onClick={async () => {
-                    const openUrl = () => window.open(`https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(shareUrl)}`)
-                    await handleClick(openUrl, 'fb')
-                  }}
-                  startIcon={<FacebookSvgIcon />}
-                >
-                  Share on Facebook
-                </ButtonEx>
-              </>
-            )
-          : null}
-      </FlexRow>
-      <ErrorRender error={error} scope="SocialButtonsFlexbox" />
-    </FlexGrowCol>
-  )
-}

package/src/out/index.ts

@@ -1,7 +0,0 @@
-export * from './CopyLinkStack.tsx'
-export * from './CopyLinkTextField.tsx'
-export * from './Dialog.tsx'
-export * from './Explanation.tsx'
-export * from './GenerateShareLinkButton.tsx'
-export * from './HeadingFlexbox.tsx'
-export * from './SocialButtonsFlexbox.tsx'