share out components (#710)

* move share button to its own folder

* share out dialog

* explanation component

* social icon components

* social buttons flexbox

* social buttons story

* Copy Link Textfield component

* generate share link button and simplify story

* working e2e in story

* flatten directory structure

* tweak explanation text

* send any react node as cardImg

* story tweaks

packages/sdk/packages/share/package.json

@@ -10,6 +10,7 @@
     "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/issues"
   },
   "dependencies": {
+    "@xylabs/forget": "^3.6.12",
     "@xylabs/react-button": "^3.4.2",
     "@xylabs/react-flexbox": "^3.4.2",
     "@xylabs/react-link": "^3.4.2"

packages/sdk/packages/share/src/button/index.ts

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

packages/sdk/packages/share/src/icons/index.ts

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

packages/sdk/packages/share/src/icons/social/Facebook.tsx

@@ -0,0 +1,10 @@
+import { createSvgIcon } from '@mui/material'
+import React from 'react'
+
+export const FacebookSvgIcon = createSvgIcon(
+  <svg xmlns="http://www.w3.org/2000/svg" height="800" width="1200" viewBox="-204.79995 -341.33325 1774.9329 2047.9995">
+    <path d="M1365.333 682.667C1365.333 305.64 1059.693 0 682.667 0 305.64 0 0 305.64 0 682.667c0 340.738 249.641 623.16 576 674.373V880H402.667V682.667H576v-150.4c0-171.094 101.917-265.6 257.853-265.6 74.69 0 152.814 13.333 152.814 13.333v168h-86.083c-84.804 0-111.25 52.623-111.25 106.61v128.057h189.333L948.4 880H789.333v477.04c326.359-51.213 576-333.635 576-674.373" fill="#1877f2" />
+    <path d="M948.4 880l30.267-197.333H789.333V554.609C789.333 500.623 815.78 448 900.584 448h86.083V280s-78.124-13.333-152.814-13.333c-155.936 0-257.853 94.506-257.853 265.6v150.4H402.667V880H576v477.04a687.805 687.805 0 00106.667 8.293c36.288 0 71.91-2.84 106.666-8.293V880H948.4" fill="#fff" />
+  </svg>
+  , 'Facebook',
+)

packages/sdk/packages/share/src/icons/social/XTwitter.tsx

@@ -0,0 +1,8 @@
+import { createSvgIcon } from '@mui/material'
+import React from 'react'
+
+export const XTwitterSvgIcon = createSvgIcon(
+  <svg viewBox="0 0 1200 1227" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z" fill="white" />
+  </svg>
+  , 'XTwitterSvgIcon')

packages/sdk/packages/share/src/icons/social/index.ts

@@ -0,0 +1,2 @@
+export * from './Facebook.tsx'
+export * from './XTwitter.tsx'

packages/sdk/packages/share/src/index.ts

@@ -1 +1,3 @@
-export * from './ShareButton.tsx'
+export * from './button/index.ts'
+export * from './icons/index.ts'
+export * from './out/index.ts'

packages/sdk/packages/share/src/out/CopyLinkTextField.stories.tsx

@@ -0,0 +1,22 @@
+import { Meta, StoryFn } from '@storybook/react'
+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 }

packages/sdk/packages/share/src/out/CopyLinkTextField.tsx

@@ -0,0 +1,48 @@
+import { CopyAllRounded } from '@mui/icons-material'
+import { IconButton, InputAdornment, StandardTextFieldProps, TextField } from '@mui/material'
+import { forget } from '@xylabs/forget'
+import React, { useState } from 'react'
+
+export interface CopyLinkTextFieldProps extends StandardTextFieldProps {
+  shareLinkName?: string
+  shareUrl?: string
+}
+
+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')
+    }
+  }
+
+  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' } }}
+      InputProps={{
+        endAdornment: (
+          <InputAdornment position="end">
+            <IconButton aria-label={`copy ${shareLinkName} link`} onClick={() => forget(copyToClipboard(shareUrl))} edge="end">
+              <CopyAllRounded />
+            </IconButton>
+          </InputAdornment>
+        ),
+      }}
+      value={shareUrl}
+      {...props}
+    />
+  )
+}

packages/sdk/packages/share/src/out/Dialog.stories.tsx

@@ -0,0 +1,72 @@
+import { Button } from '@mui/material'
+import { Meta, StoryFn } from '@storybook/react'
+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)
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  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 }

packages/sdk/packages/share/src/out/Dialog.tsx

@@ -0,0 +1,42 @@
+import { Dialog, DialogActions, DialogContent, DialogProps, DialogTitle, Stack, Typography } from '@mui/material'
+import { FlexCol, FlexGrowCol } from '@xylabs/react-flexbox'
+import React, { ComponentType, ReactNode } 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>
+  )
+}

packages/sdk/packages/share/src/out/Explanation.tsx

@@ -0,0 +1,28 @@
+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()
+  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>
+    </>
+  )
+}

packages/sdk/packages/share/src/out/GenerateShareLinkButton.stories.tsx

@@ -0,0 +1,22 @@
+import { Meta, StoryFn } from '@storybook/react'
+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 }

packages/sdk/packages/share/src/out/GenerateShareLinkButton.tsx

@@ -0,0 +1,26 @@
+import { Button, ButtonProps, 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.palette.getContrastText(theme.palette.primary.main),
+  height: '20px',
+  opacity: '.87',
+  width: '20px',
+}))

packages/sdk/packages/share/src/out/HeadingFlexbox.tsx

@@ -0,0 +1,24 @@
+import { Typography } from '@mui/material'
+import { FlexBoxProps, 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>
+  )
+}

packages/sdk/packages/share/src/out/SocialButtonsFlexbox.stories.tsx

@@ -0,0 +1,22 @@
+import { Meta, StoryFn } from '@storybook/react'
+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',
+}
+
+export { Default, WithShareUrl }