[react] feat: Merged Button and CopyToClipboardButton

packages/react/components/Account/Apikeys.mjs

@@ -29,7 +29,7 @@ import { ModalWrapper } from '@freesewing/react/components/Modal'
 import { NumberCircle } from '@freesewing/react/components/Number'
 import { StringInput, FormControl, ListInput } from '@freesewing/react/components/Input'
 import { DisplayRow } from './shared.mjs'
-import { CopyToClipboardButton } from '@freesewing/react/components/CopyToClipboardButton'
+import { CopyToClipboardButton } from '@freesewing/react/components/Button'
 import { TimeAgo, TimeToGo } from '@freesewing/react/components/Time'
 import { KeyVal } from '@freesewing/react/components/KeyVal'
 

packages/react/components/Account/Mfa.mjs

@@ -15,7 +15,7 @@ import { NoIcon, LockIcon } from '@freesewing/react/components/Icon'
 import { PasswordInput } from '@freesewing/react/components/Input'
 import { Popout } from '@freesewing/react/components/Popout'
 import { NumberCircle } from '@freesewing/react/components/Number'
-import { CopyToClipboardButton } from '@freesewing/react/components/CopyToClipboardButton'
+import { CopyToClipboardButton } from '@freesewing/react/components/Button'
 
 /**
  * A component to manage the user's MFA settings

packages/react/components/Button/index.mjs

@@ -1,4 +1,64 @@
-import React from 'react'
+import React, { useContext, useState } from 'react'
+import { copyToClipboard } from '@freesewing/utils'
+import ReactDOMServer from 'react-dom/server'
+import { CopyIcon, OkIcon } from '@freesewing/react/components/Icon'
+import { LoadingStatusContext } from '@freesewing/react/context/LoadingStatus'
+
+const strip = (html) =>
+  typeof DOMParser === 'undefined'
+    ? html
+    : new DOMParser().parseFromString(html, 'text/html').body.textContent || ''
+
+const handleCopied = (content, setCopied, setLoadingStatus, label) => {
+  copyToClipboard(content)
+  setCopied(true)
+  setLoadingStatus([
+    true,
+    label ? `${label} copied to clipboard` : 'Copied to clipboard',
+    true,
+    true,
+  ])
+  setTimeout(() => setCopied(false), 1000)
+}
+
+/**
+ * A component to copy something to the clipboard
+ *
+ * @component
+ * @param {object} props - All component props
+ * @param {JSX.element} props.children - The component children
+ * @param {string} props.content - The content that should be copied to the clipboard
+ * @param {string} props.label - The label to show when the content is copied
+ * @param {boolean} props.sup - Set this to true to render as superscript (above the line)
+ * @returns {JSX.Element}
+ */
+export const CopyToClipboardButton = ({ children, content, label = false, sup = false }) => {
+  const [copied, setCopied] = useState(false)
+  const { setLoadingStatus } = useContext(LoadingStatusContext)
+
+  const style = sup ? 'tw:w-4 tw:h-4 tw:-mt-4 tw:-ml-1' : 'tw:w-5 tw:h-5'
+
+  return (
+    <button
+      className={
+        (copied ? 'tw:text-success ' : '') +
+        'tw:daisy-btn tw:w-full tw:daisy-btn-ghost tw:lg:w-auto tw:hover:bg-transparent tw:hover:border-transparent tw:group tw:hover:shadow-none'
+      }
+      onClick={() => handleCopied(content, setCopied, setLoadingStatus, label)}
+    >
+      {sup ? children : null}
+      {copied ? (
+        <OkIcon
+          className={`${style} tw:text-success-content tw:bg-success tw:rounded-full tw:p-1`}
+          stroke={4}
+        />
+      ) : (
+        <CopyIcon className={`${style} tw:text-inherit tw:group-hover:text-secondary`} />
+      )}
+        {sup ? null : children}
+    </button>
+  )
+}
 
 /**
  * A button with an icon and a label, something which we commonly use across our UI.

packages/react/components/CopyToClipboardButton/index.mjs

@@ -1,61 +0,0 @@
-import React, { useContext, useState } from 'react'
-import { copyToClipboard } from '@freesewing/utils'
-import ReactDOMServer from 'react-dom/server'
-import { CopyIcon, OkIcon } from '@freesewing/react/components/Icon'
-import { LoadingStatusContext } from '@freesewing/react/context/LoadingStatus'
-
-const strip = (html) =>
-  typeof DOMParser === 'undefined'
-    ? html
-    : new DOMParser().parseFromString(html, 'text/html').body.textContent || ''
-
-const handleCopied = (content, setCopied, setLoadingStatus, label) => {
-  copyToClipboard(content)
-  setCopied(true)
-  setLoadingStatus([
-    true,
-    label ? `${label} copied to clipboard` : 'Copied to clipboard',
-    true,
-    true,
-  ])
-  setTimeout(() => setCopied(false), 1000)
-}
-
-/**
- * A component to copy something to the clipboard
- *
- * @component
- * @param {object} props - All component props
- * @param {JSX.element} props.children - The component children
- * @param {string} props.content - The content that should be copied to the clipboard
- * @param {string} props.label - The label to show when the content is copied
- * @param {boolean} props.sup - Set this to true to render as superscript (above the line)
- * @returns {JSX.Element}
- */
-export const CopyToClipboardButton = ({ children, content, label = false, sup = false }) => {
-  const [copied, setCopied] = useState(false)
-  const { setLoadingStatus } = useContext(LoadingStatusContext)
-
-  const style = sup ? 'tw:w-4 tw:h-4 tw:-mt-4 tw:-ml-1' : 'tw:w-5 tw:h-5'
-
-  return (
-    <button
-      className={
-        (copied ? 'tw:text-success ' : '') +
-        'tw:daisy-btn tw:w-full tw:daisy-btn-ghost tw:lg:w-auto tw:hover:bg-transparent tw:hover:border-transparent tw:group tw:hover:shadow-none'
-      }
-      onClick={() => handleCopied(content, setCopied, setLoadingStatus, label)}
-    >
-      {sup ? children : null}
-      {copied ? (
-        <OkIcon
-          className={`${style} tw:text-success-content tw:bg-success tw:rounded-full tw:p-1`}
-          stroke={4}
-        />
-      ) : (
-        <CopyIcon className={`${style} tw:text-inherit tw:group-hover:text-secondary`} />
-      )}
-        {sup ? null : children}
-    </button>
-  )
-}

packages/react/components/CuratedSet/index.mjs

@@ -12,6 +12,18 @@ import { Spinner } from '@freesewing/react/components/Spinner'
 import { Markdown } from '@freesewing/react/components/Markdown'
 import { KeyVal } from '@freesewing/react/components/KeyVal'
 
+/**
+ * A component to render a lineup of curated measurements sets.
+ *
+ * You need to provide either a clickHandler or a method to resolve the URL to link to as the href prop.
+ *
+ * @component
+ * @param {object} props - All component props
+ * @param {React.Component} props.Link - A framework specific Link component for client-side routing
+ * @param {function} [props.clickHandler = false] - An optional function to call when a set is clicked
+ * @param {function} [props.href = false] - An optional function that should return the URL to be used for a given set
+ * @returns {JSX.Element}
+ */
 export const CuratedSetLineup = ({ href = false, clickHandler = false, Link = false }) => {
   if (!Link) Link = WebLink
   // Hooks
@@ -86,6 +98,15 @@ export const CuratedSetLineup = ({ href = false, clickHandler = false, Link = fa
   )
 }
 
+/**
+ * A component to render a curated measurements set
+ *
+ * @component
+ * @param {object} props - All component props
+ * @param {React.Component} props.Link - A framework specific Link component for client-side routing
+ * @param {number} props.id - The ID of the curated set
+ * @returns {JSX.Element}
+ */
 export const CuratedSet = ({ Link = false, id = false }) => {
   if (!Link) Link = WebLink
   // Hooks

packages/react/components/Editor/components/views/ExportView.mjs

@@ -8,7 +8,7 @@ import React, { useState } from 'react'
 // Components
 import { H1, H2, H3, H5 } from '@freesewing/react/components/Heading'
 import { HeaderMenu } from '../HeaderMenu.mjs'
-import { CopyToClipboardButton } from '@freesewing/react/components/CopyToClipboardButton'
+import { CopyToClipboardButton } from '@freesewing/react/components/Button'
 import { Highlight } from '@freesewing/react/components/Highlight'
 import { EditIcon, CodeIcon, TipIcon, PrintIcon } from '@freesewing/react/components/Icon'
 

packages/react/components/Highlight/index.mjs

@@ -1,5 +1,5 @@
 import React from 'react'
-import { CopyToClipboardButton } from '@freesewing/react/components/CopyToClipboardButton'
+import { CopyToClipboardButton } from '@freesewing/react/components/Button'
 
 const defaultTitles = {
   js: 'Javascript',

packages/react/components/Uuid/index.mjs

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import { shortUuid } from '@freesewing/utils'
 import { Link } from '@freesewing/react/components/Link'
-import { CopyToClipboardButton } from '@freesewing/react/components/CopyToClipboardButton'
+import { CopyToClipboardButton } from '@freesewing/react/components/Button'
 
 /*
  * Displays a UUID, but shorter

packages/react/mkdocs.sh

@@ -7,4 +7,4 @@ jsdoc -c jsdoc.json components/Breadcrumbs/* > ../../sites/dev/prebuild/jsdoc/re
 jsdoc -c jsdoc.json components/Button/* > ../../sites/dev/prebuild/jsdoc/react/components/button.json
 jsdoc -c jsdoc.json components/Collection/* > ../../sites/dev/prebuild/jsdoc/react/components/collection.json
 jsdoc -c jsdoc.json components/Control/* > ../../sites/dev/prebuild/jsdoc/react/components/control.json
-jsdoc -c jsdoc.json components/CopyToClipboardButton/* > ../../sites/dev/prebuild/jsdoc/react/components/copytoclipboardbutton.json
+jsdoc -c jsdoc.json components/CuratedSet/* > ../../sites/dev/prebuild/jsdoc/react/components/curatedset.json

packages/react/package.json

@@ -38,7 +38,6 @@
     "./components/Button": "./components/Button/index.mjs",
     "./components/Collection": "./components/Collection/index.mjs",
     "./components/Control": "./components/Control/index.mjs",
-    "./components/CopyToClipboardButton": "./components/CopyToClipboardButton/index.mjs",
     "./components/CuratedSet": "./components/CuratedSet/index.mjs",
     "./components/Design": "./components/Design/index.mjs",
     "./components/DiffViewer": "./components/DiffViewer/index.mjs",

sites/dev/docs/reference/packages/react/components/button/_examples.js

@@ -1,36 +1,25 @@
 import React from 'react'
 import { Highlight } from '@freesewing/react/components/Highlight'
 import { FingerprintIcon, WarningIcon } from '@freesewing/react/components/Icon'
-import { IconButton } from '@freesewing/react/components/Button'
+import { CopyToClipboardButton, IconButton } from '@freesewing/react/components/Button'
 import { MiniNote } from '@freesewing/react/components/Mini'
 
-export const IconButtonExample = () => (
+export const CopyToClipboardButtonExample = () => (
   <>
-    <MiniNote>Note that this component will take up the full width made available to it.</MiniNote>
+    <CopyToClipboardButton content="I am the regular example" label="Regular Example">Regular Example</CopyToClipboardButton>
-    <Highlight language="js">
+    <CopyToClipboardButton content="I am the sup example" label="Sup Example" sup>Sup Example</CopyToClipboardButton>
-      {[
+  </>
-        `import { FingerprintIcon, WarningIcon } from '@freesewing/react/components/Icon'`,
+)
-        `import { IconButton } from '@freesewing/react/components/Button'`,
+
-        ``,
+export const IconButtonExample = () => (
-        `<IconButton>`,
+  <div className="tw:grid tw:gap-2 tw:grid-cols-2">
-        `  <FingerprintIcon />`,
-        `  Primary (default)`,
-        `</IconButton>`,
-        `<br />`,
-        `<IconButton color="warning">`,
-        `  <WarningIcon />`,
-        `  Warning`,
-        `</IconButton>`,
-      ].join('\n')}
-    </Highlight>
     <IconButton>
       <FingerprintIcon />
       Primary (default)
     </IconButton>
-    <br />
     <IconButton color="warning">
       <WarningIcon />
       Warning
     </IconButton>
-  </>
+  </div>
 )

sites/dev/docs/reference/packages/react/components/button/readme.mdx

@@ -4,15 +4,20 @@ title: Button
 
 import { DocusaurusDoc } from '@freesewing/react/components/Docusaurus'
 import { ComponentDocs } from '@site/src/components/component-docs.js'
-import { jsdocIconButton } from '@site/prebuild/jsdoc/components.button.mjs'
+import { jsdocCopyToClipboardButton, jsdocIconButton } from '@site/prebuild/jsdoc/components.button.mjs'
-import { IconButtonExample } from './_examples.js'
+import { CopyToClipboardButtonExample, IconButtonExample } from './_examples.js'
 
 <DocusaurusDoc>
 
 The **Button** component family provides the following components:
 
+- [CopyToClipboardButton](#copytoclipboardbutton)
 - [IconButton](#iconbutton)
 
+## CopyToClipboardButton
+
+<ComponentDocs docs={jsdocCopyToClipboardButton} example={CopyToClipboardButtonExample} />
+
 ## IconButton
 
 <ComponentDocs docs={jsdocIconButton} example={IconButtonExample} />

sites/dev/docs/reference/packages/react/components/copytoclipboardbutton/_examples.js

@@ -1,9 +0,0 @@
-import React from 'react'
-import { CopyToClipboardButton } from '@freesewing/react/components/CopyToClipboardButton'
-
-export const CopyToClipboardButtonExample = () => (
-  <>
-    <CopyToClipboardButton content="I am the regular example" label="Regular Example">Regular Example</CopyToClipboardButton>
-    <CopyToClipboardButton content="I am the sup example" label="Sup Example" sup>Sup Example</CopyToClipboardButton>
-  </>
-)

sites/dev/docs/reference/packages/react/components/copytoclipboardbutton/readme.mdx

@@ -1,21 +0,0 @@
----
-title: CopyToClipboardButton
----
-
-import { DocusaurusDoc } from '@freesewing/react/components/Docusaurus'
-import { ComponentDocs } from '@site/src/components/component-docs.js'
-import { jsdocCopyToClipboardButton } from '@site/prebuild/jsdoc/components.copytoclipboardbutton.mjs'
-import { CopyToClipboardButtonExample } from './_examples.js'
-
-<DocusaurusDoc>
-
-The **CopyToClipboardButton** component family provides the following components:
-
-- [CopyToClipboardButton](#copytoclipboardbutton)
-
-## CopyToClipboardButton
-
-<ComponentDocs docs={jsdocCopyToClipboardButton} example={CopyToClipboardButtonExample} />
-
-</DocusaurusDoc>
-