@xyo-network/react-share 3.0.2 → 3.0.4

package/src/out/CopyIconButton.tsx

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

package/src/out/CopyLinkTextField.stories.tsx

@@ -3,9 +3,7 @@ import React from 'react'
 
 import { CopyLinkTextField } from './CopyLinkTextField.tsx'
 
-export default {
-  title: 'modules/ShareOut/CopyLinkTextField',
-} as Meta<typeof CopyLinkTextField>
+export default { title: 'modules/ShareOut/CopyLinkTextField' } as Meta<typeof CopyLinkTextField>
 
 const Template: StoryFn<typeof CopyLinkTextField> = (props) => {
   return <CopyLinkTextField {...props} />
@@ -15,8 +13,6 @@ const Default = Template.bind({})
 Default.args = {}
 
 const WithShareUrl = Template.bind({})
-WithShareUrl.args = {
-  shareUrl: 'https://google.com',
-}
+WithShareUrl.args = { shareUrl: 'https://google.com' }
 
 export { Default, WithShareUrl }

package/src/out/CopyLinkTextField.tsx

@@ -1,30 +1,22 @@
-import { CopyAllRounded } from '@mui/icons-material'
 import type { StandardTextFieldProps } from '@mui/material'
-import { IconButton, InputAdornment, TextField } from '@mui/material'
-import { forget } from '@xylabs/forget'
-import React, { useState } from 'react'
+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 }) => {
+export const CopyLinkTextField: React.FC<CopyLinkTextFieldProps> = ({
+  shareLinkName, shareUrl, ...props
+}) => {
   const [error, setError] = useState<Error>()
 
-  const copyToClipboard = async (link?: string) => {
-    if (link) {
-      try {
-        await navigator.clipboard.writeText(link)
-      } catch (e) {
-        const message = 'Error copying shareUrl to clipboard'
-        console.error(message, e, link)
-        setError(new Error(message))
-      }
-    } else {
-      console.warn('tried to copy shareUrl before it was generated')
-    }
-  }
+  const onCopyToClipboard = useCallback((error?: Error) => {
+    setError(error)
+  }, [])
 
   return (
     <TextField
@@ -36,9 +28,7 @@ export const CopyLinkTextField: React.FC<CopyLinkTextFieldProps> = ({ shareLinkN
       InputProps={{
         endAdornment: (
           <InputAdornment position="end">
-            <IconButton aria-label={`copy ${shareLinkName} link`} onClick={() => forget(copyToClipboard(shareUrl))} edge="end">
-              <CopyAllRounded />
-            </IconButton>
+            <CopyIconButton shareLinkName={shareLinkName} shareUrl={shareUrl} onCopyToClipboard={onCopyToClipboard} />
           </InputAdornment>
         ),
       }}

package/src/out/CopyLinkTypography.stories.tsx

@@ -0,0 +1,30 @@
+import type { Meta, StoryFn } from '@storybook/react'
+import React from 'react'
+
+import { CopyLinkTypography } from './CopyLinkTypography.tsx'
+
+export default { title: 'modules/ShareOut/CopyLinkTypography' } as Meta<typeof CopyLinkTypography>
+
+const Template: StoryFn<typeof CopyLinkTypography> = (props) => {
+  return <CopyLinkTypography {...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' }
+
+const WithXnsNameInSubdomain = Template.bind({})
+WithXnsNameInSubdomain.args = { shareUrl: 'https://arietrouw.xyo.network', xnsName: 'arietrouw.xyo' }
+
+const WithError = Template.bind({})
+WithError.args = { shareUrl: 'https://google.com', xnsName: 'foo.xyo' }
+
+export {
+  Default, WithError,
+  WithShareUrl, WithXnsName, WithXnsNameInSubdomain,
+}

package/src/out/CopyLinkTypography.tsx

@@ -0,0 +1,56 @@
+import { Cancel } from '@mui/icons-material'
+import type { TypographyProps } 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 CopyLinkTypographyProps extends ShareLinkProps, TypographyProps {}
+
+export const CopyLinkTypography: React.FC<CopyLinkTypographyProps> = ({
+  shareLinkName, shareUrl, xnsName: xnsNameProp, ...props
+}) => {
+  const [error, setError] = useState<Error>()
+
+  const onCopyToClipboard = useCallback((error?: Error) => {
+    setError(error)
+  }, [])
+
+  const parsedXnsName = useMemo(() => {
+    if (shareUrl && xnsNameProp) {
+      try {
+        const parts = splitAroundSubstring(shareUrl, xnsNameProp)
+        return parts
+      } catch (e) {
+        setError(e as Error)
+      }
+    }
+  }, [])
+
+  const [part1, xnsName, part3] = parsedXnsName || []
+
+  return (
+    <Stack direction="row" alignItems="center" gap={0.25}>
+      {xnsName
+        ? (
+            <Stack direction="row">
+              <Typography sx={{ display: 'inline-flex' }} {...props}>{part1}</Typography>
+              <AnimatedGradientTypography sx={{ display: 'inline-flex' }} {...props}>{xnsName}</AnimatedGradientTypography>
+              <Typography sx={{ display: 'inline-flex' }} {...props}>{part3}</Typography>
+            </Stack>
+          )
+        : <Typography sx={{ display: 'inline-flex' }} {...props}>{shareUrl}</Typography>}
+      <CopyIconButton onCopyToClipboard={onCopyToClipboard} shareLinkName={shareLinkName} shareUrl={shareUrl} sx={{ display: 'inline-flex' }} />
+      {error ? <Tooltip title={error.message}><Cancel color="error" sx={{ display: 'inline-flex' }} /></Tooltip> : null}
+    </Stack>
+  )
+}

package/src/out/Dialog.stories.tsx

@@ -10,9 +10,7 @@ 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>
+export default { title: 'modules/ShareOut/Dialog' } as Meta<typeof ShareOutDialog>
 
 const Template: StoryFn<typeof ShareOutDialog> = (props) => {
   return <ShareOutDialog {...props} />
@@ -24,8 +22,10 @@ const TemplateWithContent: StoryFn<typeof ShareOutDialog> = (props) => {
   const [shareUrl, setShareUrl] = useState('')
   const [loading, setLoading] = useState(false)
 
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const { open: unused, ...restProps } = props
+  const {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    open: unused, ...restProps
+  } = props
 
   const cardImg = <img src="https://picsum.photos/100/100" height="100px" width="100px" />
   const shareLinkName = 'My Share Link'
@@ -59,7 +59,16 @@ const TemplateWithContent: StoryFn<typeof ShareOutDialog> = (props) => {
   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} />
+      <ShareOutDialog
+        cardImg={cardImg}
+        onClose={onClose}
+        ShareOutDialogActions={shareOutDialogActions}
+        shareOutDialogContent={shareOutDialogContent}
+        open={open}
+        title="Share Out Dialog"
+        subtitle="With a subtitle"
+        {...restProps}
+      />
     </>
   )
 }

package/src/out/Dialog.tsx

@@ -1,5 +1,7 @@
 import type { DialogProps } from '@mui/material'
-import { Dialog, DialogActions, DialogContent, DialogTitle, Stack, Typography } 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'
@@ -12,7 +14,9 @@ export interface ShareOutDialogProps extends DialogProps {
   title?: string
 }
 
-export const ShareOutDialog: React.FC<ShareOutDialogProps> = ({ ShareOutDialogActions, cardImg, open, onClose, shareOutDialogContent, subtitle, title, ...props }) => {
+export const ShareOutDialog: React.FC<ShareOutDialogProps> = ({
+  ShareOutDialogActions, cardImg, open, onClose, shareOutDialogContent, subtitle, title, ...props
+}) => {
   const handleClose = () => {
     onClose?.('', 'backdropClick')
   }

package/src/out/Explanation.tsx

@@ -1,5 +1,7 @@
 import { InfoOutlined } from '@mui/icons-material'
-import { Tooltip, Typography, useTheme } from '@mui/material'
+import {
+  Tooltip, Typography, useTheme,
+} from '@mui/material'
 import { FlexGrowRow } from '@xylabs/react-flexbox'
 import React from 'react'
 
@@ -9,6 +11,7 @@ export interface ShareOutExplanationProps {
 
 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 (
     <>

package/src/out/GenerateShareLinkButton.stories.tsx

@@ -3,9 +3,7 @@ import React from 'react'
 
 import { GenerateShareLinkButton } from './GenerateShareLinkButton.tsx'
 
-export default {
-  title: 'modules/ShareOut/GenerateShareLinkButton',
-} as Meta<typeof GenerateShareLinkButton>
+export default { title: 'modules/ShareOut/GenerateShareLinkButton' } as Meta<typeof GenerateShareLinkButton>
 
 const Template: StoryFn<typeof GenerateShareLinkButton> = (props) => {
   return <GenerateShareLinkButton {...props} />
@@ -15,8 +13,6 @@ const Default = Template.bind({})
 Default.args = {}
 
 const WithLoading = Template.bind({})
-WithLoading.args = {
-  loading: true,
-}
+WithLoading.args = { loading: true }
 
 export { Default, WithLoading }

package/src/out/GenerateShareLinkButton.tsx

@@ -1,12 +1,16 @@
 import type { ButtonProps } from '@mui/material'
-import { Button, CircularProgress, styled } 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 }) => {
+export const GenerateShareLinkButton: React.FC<GenerateShareLinkButtonProps> = ({
+  children = 'Generate My Share Link', loading, ...props
+}) => {
   return (
     <Button
       variant="contained"

package/src/out/HeadingFlexbox.tsx

@@ -8,7 +8,9 @@ export interface ShareOutHeadingFlexboxProps extends FlexBoxProps {
   shareUrl?: string
 }
 
-export const ShareOutHeadingFlexbox: React.FC<ShareOutHeadingFlexboxProps> = ({ children, shareLinkName, shareUrl, ...props }) => {
+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 (

package/src/out/SocialButtonsFlexbox.stories.tsx

@@ -3,9 +3,7 @@ import React from 'react'
 
 import { SocialButtonsFlexbox } from './SocialButtonsFlexbox.tsx'
 
-export default {
-  title: 'modules/ShareOut/SocialButtonsFlexbox',
-} as Meta<typeof SocialButtonsFlexbox>
+export default { title: 'modules/ShareOut/SocialButtonsFlexbox' } as Meta<typeof SocialButtonsFlexbox>
 
 const Template: StoryFn<typeof SocialButtonsFlexbox> = (props) => {
   return <SocialButtonsFlexbox {...props} />
@@ -15,8 +13,6 @@ const Default = Template.bind({})
 Default.args = {}
 
 const WithShareUrl = Template.bind({})
-WithShareUrl.args = {
-  shareUrl: 'https://google.com',
-}
+WithShareUrl.args = { shareUrl: 'https://google.com' }
 
 export { Default, WithShareUrl }

package/src/out/SocialButtonsFlexbox.tsx

@@ -16,7 +16,10 @@ export const SocialButtonsFlexbox: React.FC<SocialButtonsFlexboxProps> = ({ shar
       <Typography variant="body1" gutterBottom>
         <strong>Share on Social Media</strong>
       </Typography>
-      <FlexRow gap={0.5} sx={{ flexDirection: { md: 'row', xs: 'column' } }}>
+      <FlexRow
+        gap={0.5}
+        sx={{ flexDirection: { md: 'row', xs: 'column' } }}
+      >
         {shareUrl
           ? (
               <>

package/src/out/index.ts

@@ -1,4 +1,5 @@
 export * from './CopyLinkTextField.tsx'
+export * from './CopyLinkTypography.tsx'
 export * from './Dialog.tsx'
 export * from './Explanation.tsx'
 export * from './GenerateShareLinkButton.tsx'

package/src/out/lib/AnimatedGradientTypography.tsx

@@ -0,0 +1,50 @@
+import {
+  keyframes, styled, Typography,
+} from '@mui/material'
+
+/**
+ * Start the animation at 100% to give the gradient a left to right effect
+ */
+const moveBg = keyframes(`
+    0% {
+      background-position: 100% 0%;
+    }
+    100% {
+      background-position: 0% 0%;
+    }
+`)
+
+/**
+ * Adapted from - https://codepen.io/web-dot-dev/pen/vYrGPNE
+ */
+export const AnimatedGradientTypography = styled(Typography, { name: 'AnimatedGradientTypography' })(({ theme }) => ({
+  // Set the color variables for the gradient
+  '--color-one': theme.palette.secondary.dark,
+  '--color-two': theme.palette.primary.light,
+  // set the gradient so it has the same start and end color for looping effect
+  'background': `linear-gradient(
+    .25turn,
+    var(--color-one),
+    var(--color-two),
+    var(--color-one)
+    )`,
+  // Set the text color to transparent so the gradient shows through
+  'color': 'transparent',
+  // Clip the background to the text shape
+  'backgroundClip': 'text',
+  // Set the background size to 800% so we don't see the third color initially creating the looping effect
+  'backgroundSize': '800%',
+  // Set the text to bold so the gradient is more visible
+  'fontWeight': 'bold',
+  // Set the animation
+  '@media (prefers-reduced-motion: no-preference)': {
+    animationName: moveBg,
+    animationDuration: '2s',
+    animationIterationCount: 'infinite',
+  },
+  // reset for users that prefer reduced motion
+  '@media (prefers-reduced-motion)': {
+    background: 'none',
+    color: theme.palette.text.primary,
+  },
+}))

package/src/out/lib/ShareLinkProps.ts

@@ -0,0 +1,5 @@
+export interface ShareLinkProps {
+  shareLinkName?: string
+  shareUrl?: string
+  xnsName?: string
+}

package/src/out/lib/index.ts

@@ -0,0 +1,3 @@
+export * from './AnimatedGradientTypography.tsx'
+export * from './ShareLinkProps.ts'
+export * from './splitAroundSubstring.ts'

package/src/out/lib/splitAroundSubstring.ts

@@ -0,0 +1,19 @@
+export const splitAroundSubstring = (path: string, substring: string): [string, string, string] => {
+  // Find the index of the substring
+  const index = path.indexOf(substring)
+
+  if (index === -1) {
+    throw new Error(`XNS name "${substring}" not found in path.`)
+  }
+
+  // Extract the part before the substring
+  const part1 = path.slice(0, index)
+
+  // The substring itself is part2
+  const part2 = substring
+
+  // Extract the part after the substring
+  const part3 = path.slice(index + substring.length)
+
+  return [part1, part2, part3]
+}

package/xy.config.ts

@@ -1,9 +1,7 @@
 import type { XyTsupConfig } from '@xylabs/ts-scripts-yarn3'
 const config: XyTsupConfig = {
   compile: {
-    browser: {
-      src: true,
-    },
+    browser: { src: true },
     node: {},
     neutral: {},
   },