diff --git a/packages/react/components/Account/Apikeys.mjs b/packages/react/components/Account/Apikeys.mjs index cfb707bdd93..1c1471f261a 100644 --- a/packages/react/components/Account/Apikeys.mjs +++ b/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' diff --git a/packages/react/components/Account/Mfa.mjs b/packages/react/components/Account/Mfa.mjs index 6dd4db633ef..d1f85527d4a 100644 --- a/packages/react/components/Account/Mfa.mjs +++ b/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 diff --git a/packages/react/components/Button/index.mjs b/packages/react/components/Button/index.mjs index a37709f036c..f1ddc74fa95 100644 --- a/packages/react/components/Button/index.mjs +++ b/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 ( + + ) +} /** * A button with an icon and a label, something which we commonly use across our UI. diff --git a/packages/react/components/CopyToClipboardButton/index.mjs b/packages/react/components/CopyToClipboardButton/index.mjs deleted file mode 100644 index 8225b70dc62..00000000000 --- a/packages/react/components/CopyToClipboardButton/index.mjs +++ /dev/null @@ -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 ( - - ) -} diff --git a/packages/react/components/CuratedSet/index.mjs b/packages/react/components/CuratedSet/index.mjs index 8618e163ade..97918a78a9f 100644 --- a/packages/react/components/CuratedSet/index.mjs +++ b/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 diff --git a/packages/react/components/Editor/components/views/ExportView.mjs b/packages/react/components/Editor/components/views/ExportView.mjs index 4c71cc0446c..a0eb19611b3 100644 --- a/packages/react/components/Editor/components/views/ExportView.mjs +++ b/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' diff --git a/packages/react/components/Highlight/index.mjs b/packages/react/components/Highlight/index.mjs index 3215903d169..ea15919c5cf 100644 --- a/packages/react/components/Highlight/index.mjs +++ b/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', diff --git a/packages/react/components/Uuid/index.mjs b/packages/react/components/Uuid/index.mjs index b6ee6ceed89..67c765c4907 100644 --- a/packages/react/components/Uuid/index.mjs +++ b/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 diff --git a/packages/react/mkdocs.sh b/packages/react/mkdocs.sh index 48d2ccaf252..02f4c9cc06d 100755 --- a/packages/react/mkdocs.sh +++ b/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 diff --git a/packages/react/package.json b/packages/react/package.json index bc15bd35b0e..7fcb1e2562d 100644 --- a/packages/react/package.json +++ b/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", diff --git a/sites/dev/docs/reference/packages/react/components/button/_examples.js b/sites/dev/docs/reference/packages/react/components/button/_examples.js index a1b670443d5..dba8e1640a6 100644 --- a/sites/dev/docs/reference/packages/react/components/button/_examples.js +++ b/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 = () => ( <> - Note that this component will take up the full width made available to it. - - {[ - `import { FingerprintIcon, WarningIcon } from '@freesewing/react/components/Icon'`, - `import { IconButton } from '@freesewing/react/components/Button'`, - ``, - ``, - ` `, - ` Primary (default)`, - ``, - `
`, - ``, - ` `, - ` Warning`, - ``, - ].join('\n')} -
+ Regular Example + Sup Example + +) + +export const IconButtonExample = () => ( +
Primary (default) -
Warning - +
) diff --git a/sites/dev/docs/reference/packages/react/components/button/readme.mdx b/sites/dev/docs/reference/packages/react/components/button/readme.mdx index 48d4539b013..863fd8858ee 100644 --- a/sites/dev/docs/reference/packages/react/components/button/readme.mdx +++ b/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 { IconButtonExample } from './_examples.js' +import { jsdocCopyToClipboardButton, jsdocIconButton } from '@site/prebuild/jsdoc/components.button.mjs' +import { CopyToClipboardButtonExample, IconButtonExample } from './_examples.js' The **Button** component family provides the following components: +- [CopyToClipboardButton](#copytoclipboardbutton) - [IconButton](#iconbutton) +## CopyToClipboardButton + + + ## IconButton diff --git a/sites/dev/docs/reference/packages/react/components/copytoclipboardbutton/_examples.js b/sites/dev/docs/reference/packages/react/components/copytoclipboardbutton/_examples.js deleted file mode 100644 index c9701d2badb..00000000000 --- a/sites/dev/docs/reference/packages/react/components/copytoclipboardbutton/_examples.js +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react' -import { CopyToClipboardButton } from '@freesewing/react/components/CopyToClipboardButton' - -export const CopyToClipboardButtonExample = () => ( - <> - Regular Example - Sup Example - -) diff --git a/sites/dev/docs/reference/packages/react/components/copytoclipboardbutton/readme.mdx b/sites/dev/docs/reference/packages/react/components/copytoclipboardbutton/readme.mdx deleted file mode 100644 index 5be13515688..00000000000 --- a/sites/dev/docs/reference/packages/react/components/copytoclipboardbutton/readme.mdx +++ /dev/null @@ -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' - - - -The **CopyToClipboardButton** component family provides the following components: - -- [CopyToClipboardButton](#copytoclipboardbutton) - -## CopyToClipboardButton - - - - -