diff --git a/packages/react/components/Account/Apikeys.mjs b/packages/react/components/Account/Apikeys.mjs index f3c9e7d5118..cfb707bdd93 100644 --- a/packages/react/components/Account/Apikeys.mjs +++ b/packages/react/components/Account/Apikeys.mjs @@ -48,11 +48,13 @@ const fields = { expiresAt: 'Expires', } -/* - * Component for the account/apikeys page +/** + * A component to mange the user's API keys * - * @params {object} props - All React props - * @params {function} Link - A framework specific Link component for client-side routing + * @component + * @param {object} props - All component props + * @param {JSX.Element} [props.Link] - An optional framework-specific Link component + * @returns {JSX.Element} */ export const Apikeys = ({ Link = false }) => { if (!Link) Link = WebLink diff --git a/packages/react/components/Account/Avatar.mjs b/packages/react/components/Account/Avatar.mjs index 84d351c584f..5b84ef73a8a 100644 --- a/packages/react/components/Account/Avatar.mjs +++ b/packages/react/components/Account/Avatar.mjs @@ -17,12 +17,14 @@ import { PassiveImageInput } from '@freesewing/react/components/Input' import { IconButton } from '@freesewing/react/components/Button' import { WelcomeIcons } from './shared.mjs' -/* - * Component for the account/bio page +/** + * Component to manage the user's Avatar * - * @params {object} props - All React props - * @params {bool} props.welcome - Set to true to use this component on the welcome page - * @params {function} props.Link - A framework specific Link component for client-side routing + * @component + * @param {object} props - All component props + * @param {boolean} [props.welcome = false] - Set to true to render the welcome/onboarding flow + * @param {function} props.Link - A framework specific Link component for client-side routing + * @returns {JSX.Element} */ export const Avatar = ({ welcome = false, Link = false }) => { if (!Link) Link = WebLink @@ -98,7 +100,7 @@ export const Avatar = ({ welcome = false, Link = false }) => { <>

-

- - ) -} diff --git a/packages/react/components/Account/Links.mjs b/packages/react/components/Account/Links.mjs index a8902350038..78014ff38da 100644 --- a/packages/react/components/Account/Links.mjs +++ b/packages/react/components/Account/Links.mjs @@ -6,7 +6,7 @@ import React, { useState, useEffect } from 'react' import { useAccount } from '@freesewing/react/hooks/useAccount' import { useBackend } from '@freesewing/react/hooks/useBackend' // Components -import { Link as DefautLink } from '@freesewing/react/components/Link' +import { Link as DefaultLink } from '@freesewing/react/components/Link' import { ControlScore } from '@freesewing/react/components/Control' import { MeasurementsSetIcon, @@ -96,10 +96,12 @@ const YesNo = ({ check }) => (check ? : ) const t = (input) => input /** - * The Links component shows all of the links to manage your account + * A component to manage the user's Instagram handle in their account data * - * @param {object} props - All the React props - * @param {function} Link - A custom Link component, typically the Docusaurus one, but it's optional + * @component + * @param {object} props - All component props + * @param {React.Component} props.Link - A framework specific Link component for client-side routing + * @returns {JSX.Element} */ export const Links = ({ Link = false }) => { // Use custom Link component if available diff --git a/packages/react/components/Account/Mfa.mjs b/packages/react/components/Account/Mfa.mjs index ca401c734f7..6dd4db633ef 100644 --- a/packages/react/components/Account/Mfa.mjs +++ b/packages/react/components/Account/Mfa.mjs @@ -1,5 +1,4 @@ // Dependencies -import { welcomeSteps } from './shared.mjs' import { horFlexClasses } from '@freesewing/utils' // Context @@ -18,13 +17,15 @@ import { Popout } from '@freesewing/react/components/Popout' import { NumberCircle } from '@freesewing/react/components/Number' import { CopyToClipboardButton } from '@freesewing/react/components/CopyToClipboardButton' -/* - * Component for the account/security/password page +/** + * A component to manage the user's MFA settings * - * @params {object} props - All React props - * @params {bool} props.welcome - Set to true to use this component on the welcome page + * @component + * @param {object} props - All component props + * @param {string} [props.title = false] - Whether or not to display a title + * @returns {JSX.Element} */ -export const Mfa = ({ welcome = false, title = true }) => { +export const Mfa = ({ title = true }) => { // Hooks const backend = useBackend() const { account, setAccount } = useAccount() diff --git a/packages/react/components/Account/Newsletter.mjs b/packages/react/components/Account/Newsletter.mjs index 715af08c390..b04269fea92 100644 --- a/packages/react/components/Account/Newsletter.mjs +++ b/packages/react/components/Account/Newsletter.mjs @@ -18,12 +18,14 @@ import { Popout } from '@freesewing/react/components/Popout' import { IconButton } from '@freesewing/react/components/Button' import { WelcomeIcons } from './shared.mjs' -/* - * Component for the account/preferences/newsletter page +/** + * A component to manage the user's newsletter subscription in their account data * - * @params {object} props - All React props - * @params {bool} props.welcome - Set to true to use this component on the welcome page - * @param {function} props.Link - An optional framework-specific Link component + * @component + * @params {object} props - All Component props + * @param {bool} props.welcome - Set to true to use this component on the welcome page + * @param {React.Component} props.Link - An optional framework-specific Link component + * @returns {JSX.Element} */ export const Newsletter = ({ welcome = false, Link = false }) => { if (!Link) Link = WebLink diff --git a/packages/react/components/Account/Password.mjs b/packages/react/components/Account/Password.mjs index 3c20a9c4324..7b9084db225 100644 --- a/packages/react/components/Account/Password.mjs +++ b/packages/react/components/Account/Password.mjs @@ -16,11 +16,14 @@ import { RightIcon, SaveIcon } from '@freesewing/react/components/Icon' import { PasswordInput } from '@freesewing/react/components/Input' import { Popout } from '@freesewing/react/components/Popout' -/* - * Component for the account/security/password page +/** + * A component to manage the user's password * - * @params {object} props - All React props - * @params {bool} props.welcome - Set to true to use this component on the welcome page + * @component + * @param {object} props - All component props + * @param {bool} [props.welcome = false] - Set to true to render the welcome/onboarding view + * @param {React.Component} props.Link - A framework specific Link component for client-side routing + * @returns {JSX.Element} */ export const Password = ({ welcome = false, Link = false }) => { if (!Link) Link = WebLink diff --git a/packages/react/components/Account/Pattern.mjs b/packages/react/components/Account/Pattern.mjs index 34f53caffa9..c258d97b86e 100644 --- a/packages/react/components/Account/Pattern.mjs +++ b/packages/react/components/Account/Pattern.mjs @@ -48,6 +48,15 @@ import { Popout } from '@freesewing/react/components/Popout' import { ModalWrapper } from '@freesewing/react/components/Modal' import { KeyVal } from '@freesewing/react/components/KeyVal' +/** + * A component to manage a pattern in the user's account data + * + * @component + * @param {object} props - All component props + * @param {number} props.id - The pattern ID to load + * @param {React.Component} props.Link - A framework specific Link component for client-side routing + * @returns {JSX.Element} + */ export const Pattern = ({ id, Link }) => { if (!Link) Link = WebLink // Hooks @@ -254,6 +263,21 @@ export const Pattern = ({ id, Link }) => { ) } +/** + * A component to display a card representing a pattern in the user's account data. + * + * This is a pure render component, you have to pass in the data. + * + * @component + * @param {object} props - All component props + * @param {React.Component} props.Link - A framework specific Link component for client-side routing + * @param {string} [props.href = false] - An optional URL the pattern card should link to + * @param {function} [props.onClick = false] - An optional onClick handler + * @param {object} props.pattern - An object holding the pattern data + * @param {string} [props.size = 'md'] - The size, one of lg, md, sm, or xs + * @param {boolean} [props.useA = false] - Whether to use an a tag of Link component when passing in a href prop + * @returns {JSX.Element} + */ export const PatternCard = ({ pattern, href = false, @@ -265,7 +289,7 @@ export const PatternCard = ({ if (!Link) Link = WebLink const sizes = { lg: 96, - md: 52, + md: 48, sm: 36, xs: 20, } @@ -315,9 +339,9 @@ export const PatternCard = ({ const BadgeLink = ({ label, href }) => ( - {label} + {label} ) diff --git a/packages/react/components/Account/Patterns.mjs b/packages/react/components/Account/Patterns.mjs index 60be067f39b..5ad44f06175 100644 --- a/packages/react/components/Account/Patterns.mjs +++ b/packages/react/components/Account/Patterns.mjs @@ -28,11 +28,13 @@ const t = (input) => { return input } -/* - * Component for the account/patterns page +/** + * A component to display and manage the list of patterns in the user's account * - * @params {object} props - All React props - * @params {function} Link - A framework specific Link component for client-side routing + * @component + * @param {object} props - All component props + * @param {React.Component} props.Link - A framework specific Link component for client-side routing + * @returns {JSX.Element} */ export const Patterns = ({ Link = false }) => { if (!Link) Link = WebLink @@ -101,8 +103,8 @@ export const Patterns = ({ Link = false }) => { className="tw:daisy-btn tw:daisy-btn-primary tw:capitalize tw:w-full tw:md:w-auto tw:hover:text-primary-content" href="/editor/" > - - Create a new pattern + + Create a new pattern diff --git a/packages/react/components/Account/Platform.mjs b/packages/react/components/Account/Platform.mjs index a5f435bf978..028bb0ae323 100644 --- a/packages/react/components/Account/Platform.mjs +++ b/packages/react/components/Account/Platform.mjs @@ -19,11 +19,52 @@ const labels = { website: 'Website', } +/** + * A component to manage the user's Instagram handle in their account data + * + * @component + * @returns {JSX.Element} + */ export const Instagram = () => + +/** + * A component to manage the user's Mastodon handle in their account data + * + * @component + * @returns {JSX.Element} + */ export const Mastodon = () => + +/** + * A component to manage the user's Reddit handle in their account data + * + * @component + * @returns {JSX.Element} + */ export const Reddit = () => + +/** + * A component to manage the user's Twitch handle in their account data + * + * @component + * @returns {JSX.Element} + */ export const Twitch = () => + +/** + * A component to manage the user's Tiktok handle in their account data + * + * @component + * @returns {JSX.Element} + */ export const Tiktok = () => + +/** + * A component to manage the user's website URL in their account data + * + * @component + * @returns {JSX.Element} + */ export const Website = () => /* diff --git a/packages/react/components/Account/Reload.mjs b/packages/react/components/Account/Reload.mjs index 2bca72e0118..6e520079f69 100644 --- a/packages/react/components/Account/Reload.mjs +++ b/packages/react/components/Account/Reload.mjs @@ -12,8 +12,11 @@ import { ReloadIcon } from '@freesewing/react/components/Icon' import { Popout } from '@freesewing/react/components/Popout' import { IconButton } from '@freesewing/react/components/Button' -/* - * Component for the account/actions/export page +/** + * A component handle a reload of the account data + * + * @component + * @returns {JSX.Element} */ export const Reload = () => { // Hooks diff --git a/packages/react/components/Account/Remove.mjs b/packages/react/components/Account/Remove.mjs index a86858f6770..fa21969ab0a 100644 --- a/packages/react/components/Account/Remove.mjs +++ b/packages/react/components/Account/Remove.mjs @@ -16,8 +16,11 @@ import { Popout } from '@freesewing/react/components/Popout' import { IconButton } from '@freesewing/react/components/Button' import { ModalWrapper } from '@freesewing/react/components/Modal' -/* - * Component for the account/actions/remove page +/** + * A component to handle the removal of a user's account + * + * @component + * @returns {JSX.Element} */ export const Remove = () => { // Hooks diff --git a/packages/react/components/Account/Restrict.mjs b/packages/react/components/Account/Restrict.mjs index 8bb2495738d..392b0a13891 100644 --- a/packages/react/components/Account/Restrict.mjs +++ b/packages/react/components/Account/Restrict.mjs @@ -17,8 +17,13 @@ import { Popout } from '@freesewing/react/components/Popout' import { IconButton } from '@freesewing/react/components/Button' import { ModalWrapper } from '@freesewing/react/components/Modal' -/* - * Component for the account/actions/restrict page +/** + * A component to manage the user's options to restrict processing of their data + * + * @component + * @param {object} props - All component props + * @param {React.Component} props.Link - A framework specific Link component for client-side routing + * @returns {JSX.Element} */ export const Restrict = ({ Link = false }) => { if (!Link) Link = WebLink @@ -46,7 +51,7 @@ export const Restrict = ({ Link = false }) => { <>

This button is red for a reason.

- + Remove your FreeSewing account diff --git a/packages/react/components/Account/Role.mjs b/packages/react/components/Account/Role.mjs index 924821de8bb..89439cd1214 100644 --- a/packages/react/components/Account/Role.mjs +++ b/packages/react/components/Account/Role.mjs @@ -1,6 +1,14 @@ import React from 'react' import { KeyVal } from '@freesewing/react/components/KeyVal' +/** + * A component to display the user's role + * + * @component + * @param {object} props - All component props + * @param {string} props.role - The user role, either user or admin + * @returns {JSX.Element} + */ export const UserRole = ({ role }) => { if (role === 'user') return if (role === 'admin') return diff --git a/packages/react/components/Account/Set.mjs b/packages/react/components/Account/Set.mjs index 83b89b9b742..5f617ee9840 100644 --- a/packages/react/components/Account/Set.mjs +++ b/packages/react/components/Account/Set.mjs @@ -66,11 +66,11 @@ const t = (input) => { /* * Component to show an individual measurements set * - * @param {object} props - All React props - * @param {number} id - The ID of the measurements set to load - * @param {bool} publicOnly - If the set should be used with the backend.getPublicSet method - * @param {function} Link - An optional framework-specific Link component to use for client-side routing - * @param {object} measurementHelpProvider - A function that returns a url or action to show help for a specific measurement + * @param {object} props - All Component props + * @param {number} props.id - The ID of the measurements set to load + * @param {bool} [props.publicOnly = false] - If the set should be used with the backend.getPublicSet method + * @param {function} [props.Link = false] - An optional framework-specific Link component to use for client-side routing + * @param {function} [measurementHelpProvider = false] - A function that returns a url or action to show help for a specific measurement */ export const Set = ({ id, publicOnly = false, Link = false, measurementHelpProvider = false }) => { if (!Link) Link = WebLink @@ -867,6 +867,12 @@ export const RenderedCSet = ({ mset, imperial }) => { ) } +/** + * A component to create a new measurements set. + * + * @component + * @returns {JSX.Element} + */ export const NewSet = () => { // Hooks const backend = useBackend() diff --git a/packages/react/components/Account/Sets.mjs b/packages/react/components/Account/Sets.mjs index 3176c71995e..96211188e4f 100644 --- a/packages/react/components/Account/Sets.mjs +++ b/packages/react/components/Account/Sets.mjs @@ -16,11 +16,13 @@ import { NoIcon, OkIcon, PlusIcon, TrashIcon, UploadIcon } from '@freesewing/rea import { ModalWrapper } from '@freesewing/react/components/Modal' import { NewSet } from './Set.mjs' -/* - * The component for the an account/sets page +/** + * The component for the measurements sets in the user's account. * - * @param {object} props - All React props - * @param {function} Link - An optional framework-specific Link component + * @component + * @param {object} props - All component props + * @param {React.Component} props.Link - A framework specific Link component for client-side routing + * @returns {JSX.Element} */ export const Sets = ({ Link = false }) => { if (!Link) Link = WebLink @@ -160,16 +162,20 @@ export const Sets = ({ Link = false }) => { } /** - * React component to display a (card of a) single measurements set + * A component to render a card of a single measurements set. * - * @param {object} props - All React props - * @param {function} Link - An optional framework-specific Link component - * @param {string} design - The designs for which to check required measurements - * @param {test} href - Where the set should link to - * @param {function} onClick - What to do when clicking on a set - * @param {object} set - The (data of the) measurements set - * @param {string} size - Size of the card - * @param {bool} useA - Whether to use an A tag or not + * This is a pure render component, you need to pass in the data. + * + * @component + * @param {object} props - All component props + * @param {React.Component} [props.Link = false] - An optional framework-specific Link component + * @param {string} [props.design = false] - An optional design name to check for required measurements in this set + * @param {string} [props.href = false] - On optional href for the card to link to + * @param {function} [props.onClick = false] - On optional onClick handler method + * @param {object} props.set - The data of the measurements set + * @param {string} [props.size = 'lg'] - Size of the card, one of lg, md, or sm + * @param {bool} [props.useA = false] - Whether to use an A tag or a Link component for href + * @returns {JSX.Element} */ export const MsetCard = ({ Link = false, @@ -183,7 +189,7 @@ export const MsetCard = ({ if (!Link) Link = WebLink const sizes = { lg: 96, - md: 52, + md: 48, sm: 36, } const s = sizes[size] diff --git a/packages/react/components/Account/Status.mjs b/packages/react/components/Account/Status.mjs index 8eb08425a10..b39b8e8c418 100644 --- a/packages/react/components/Account/Status.mjs +++ b/packages/react/components/Account/Status.mjs @@ -1,6 +1,14 @@ import React from 'react' import { KeyVal } from '@freesewing/react/components/KeyVal' +/** + * Displays a badge for the account status you pass it + * + * @component + * @param {object} props - All component props + * @param {number} props.status - The account status. One of -2, -1, 0, or 1 + * @returns {JSX.Element} + */ export const AccountStatus = ({ status }) => { if (status === 0) return if (status === 1) return diff --git a/packages/react/components/Account/Units.mjs b/packages/react/components/Account/Units.mjs index 6feb5bc9beb..589ab330c21 100644 --- a/packages/react/components/Account/Units.mjs +++ b/packages/react/components/Account/Units.mjs @@ -17,11 +17,12 @@ import { NumberCircle } from '@freesewing/react/components/Number' import { IconButton } from '@freesewing/react/components/Button' import { WelcomeIcons } from './shared.mjs' -/* - * Component for the account/preferences/units page +/** + * A component to manage the user's units * - * @params {object} props - All React props - * @params {bool} props.welcome - Set to true to use this component on the welcome page + * @component + * @param {bool} [props.welcome = false] - Set to true to render the welcome/onboarding view + * @returns {JSX.Element} */ export const Units = ({ welcome = false }) => { // Hooks diff --git a/packages/react/components/Account/Username.mjs b/packages/react/components/Account/Username.mjs index 1c8c417d912..ae844c09353 100644 --- a/packages/react/components/Account/Username.mjs +++ b/packages/react/components/Account/Username.mjs @@ -16,12 +16,14 @@ import { StringInput } from '@freesewing/react/components/Input' import { IconButton } from '@freesewing/react/components/Button' import { WelcomeIcons } from './shared.mjs' -/* - * Component for the account/username page +/** + * A component to manage the user's username * - * @params {object} props - All React props - * @params {bool} props.welcome - Set to true to use this component on the welcome page - * @params {function} props.Link - A framework specific Link component for client-side routing + * @component + * @param {object} props - All component props + * @param {bool} [props.welcome = false] - Set to true to render the welcome/onboarding view + * @param {React.Component} [props.Link = false] - A framework specific Link component for client-side routing + * @returns {JSX.Element} */ export const Username = ({ welcome = false, Link = false }) => { if (!Link) Link = WebLink diff --git a/packages/react/components/Account/index.mjs b/packages/react/components/Account/index.mjs index 934e3b160ed..82aa2038f2c 100644 --- a/packages/react/components/Account/index.mjs +++ b/packages/react/components/Account/index.mjs @@ -1,71 +1,71 @@ import React from 'react' import { AccountStatus } from './Status.mjs' -import { Bookmarks, BookmarkButton } from './Bookmarks.mjs' -import { Links } from './Links.mjs' -import { Set, NewSet } from './Set.mjs' -import { Sets, MsetCard } from './Sets.mjs' -import { Patterns } from './Patterns.mjs' -import { Pattern, PatternCard } from './Pattern.mjs' import { Apikeys } from './Apikeys.mjs' -import { Username } from './Username.mjs' -import { Bio } from './Bio.mjs' import { Avatar } from './Avatar.mjs' -import { Email, EmailChangeConfirmation } from './Email.mjs' -import { Github } from './Github.mjs' -import { Instagram, Mastodon, Reddit, Twitch, Tiktok, Website } from './Platform.mjs' +import { Bio } from './Bio.mjs' +import { BookmarkButton, Bookmarks } from './Bookmarks.mjs' import { Compare } from './Compare.mjs' -import { Control } from './Control.mjs' -import { Units } from './Units.mjs' -import { Newsletter } from './Newsletter.mjs' import { Consent } from './Consent.mjs' -import { Password } from './Password.mjs' -import { Mfa } from './Mfa.mjs' -import { ImportSet } from './Import.mjs' +import { Control } from './Control.mjs' +import { Email, EmailChangeConfirmation } from './Email.mjs' import { Export } from './Export.mjs' +import { Github } from './Github.mjs' +import { ImportSet } from './Import.mjs' +import { Instagram, Mastodon, Reddit, Twitch, Tiktok, Website } from './Platform.mjs' +import { Links } from './Links.mjs' +import { Mfa } from './Mfa.mjs' +import { MsetCard, Sets } from './Sets.mjs' +import { Newsletter } from './Newsletter.mjs' +import { Password } from './Password.mjs' +import { Pattern, PatternCard } from './Pattern.mjs' +import { Patterns } from './Patterns.mjs' import { Reload } from './Reload.mjs' import { Remove } from './Remove.mjs' import { Restrict } from './Restrict.mjs' +import { Set, NewSet } from './Set.mjs' +import { Units } from './Units.mjs' import { UserId } from './Id.mjs' +import { Username } from './Username.mjs' import { UserRole } from './Role.mjs' export { AccountStatus, - Bookmarks, - BookmarkButton, - Links, - Set, - NewSet, - Sets, - MsetCard, - Patterns, - Pattern, - PatternCard, Apikeys, - Username, - Bio, Avatar, + Bio, + BookmarkButton, + Bookmarks, + Compare, + Consent, + Control, Email, EmailChangeConfirmation, - Github, - Instagram, - Mastodon, - Reddit, - Twitch, - Tiktok, - Website, - Compare, - Control, - Units, - Newsletter, - Consent, - Password, - Mfa, - ImportSet, Export, + Github, + ImportSet, + Instagram, + Links, + Mastodon, + Mfa, + MsetCard, + NewSet, + Newsletter, + Password, + Pattern, + PatternCard, + Patterns, + Reddit, Reload, Remove, Restrict, + Set, + Sets, + Tiktok, + Twitch, + Units, UserId, + Username, UserRole, + Website, } diff --git a/packages/react/components/Uuid/index.mjs b/packages/react/components/Uuid/index.mjs index fbdbdc6b54a..b6ee6ceed89 100644 --- a/packages/react/components/Uuid/index.mjs +++ b/packages/react/components/Uuid/index.mjs @@ -19,7 +19,7 @@ export const Uuid = ({ uuid, href = false, label = false }) => { return ( {shortUuid(uuid)} - + ) @@ -28,7 +28,7 @@ export const Uuid = ({ uuid, href = false, label = false }) => { {shortUuid(uuid)} - + ) } diff --git a/packages/react/mkdocs.sh b/packages/react/mkdocs.sh index 68e7bfd7fe0..6884d49772b 100755 --- a/packages/react/mkdocs.sh +++ b/packages/react/mkdocs.sh @@ -1,5 +1,5 @@ #!/bin/bash mkdir -p ./docs/components -jsdoc -c jsdoc.json components/Account/ > ../../sites/dev/prebuild/jsdoc/react/components/account.json -jsdoc -c jsdoc.json components/Button/ > ../../sites/dev/prebuild/jsdoc/react/components/button.json +jsdoc -c jsdoc.json components/Account/* > ../../sites/dev/prebuild/jsdoc/react/components/account.json +jsdoc -c jsdoc.json components/Button/* > ../../sites/dev/prebuild/jsdoc/react/components/button.json diff --git a/sites/dev/docs/reference/packages/react/components/account/_examples.js b/sites/dev/docs/reference/packages/react/components/account/_examples.js new file mode 100644 index 00000000000..42beab42cf3 --- /dev/null +++ b/sites/dev/docs/reference/packages/react/components/account/_examples.js @@ -0,0 +1,78 @@ +import React from 'react' +import { + AccountStatus, + Apikeys as ApikeysExample, + Avatar as AvatarExample, + Bio as BioExample, + BookmarkButton, + Bookmarks as BookmarksExample, + Compare as CompareExample, + Consent as ConsentExample, + Control as ControlExample, + Email as EmailExample, + EmailChangeConfirmation as EmailChangeConfirmationExample, + Export as ExportExample, + Github as GithubExample, + ImportSet as ImportSetExample, + Instagram as InstagramExample, + Links as LinksExample, + Mastodon as MastodonExample, + Mfa as MfaExample, + MsetCard, + NewSet as NewSetExample, + Newsletter as NewsletterExample, +} from '@freesewing/react/components/Account' + +const AccountStatusExample = () => ( + + + + + + + + + + + + + +
StatusPreview
-2
-1
0
1
+) + +const BookmarkButtonExample = () => ( + +) + +const MsetCardExample = () => ( + +) + +export { + AccountStatusExample, + ApikeysExample, + AvatarExample, + BioExample, + BookmarkButtonExample, + BookmarksExample, + CompareExample, + ConsentExample, + ControlExample, + EmailExample, + EmailChangeConfirmationExample, + ExportExample, + GithubExample, + ImportSetExample, + InstagramExample, + LinksExample, + MastodonExample, + MfaExample, + MsetCardExample, + NewSetExample, + NewsletterExample, +} + diff --git a/sites/dev/docs/reference/packages/react/components/account/readme.mdx b/sites/dev/docs/reference/packages/react/components/account/readme.mdx index baca49c94a1..2756140513c 100644 --- a/sites/dev/docs/reference/packages/react/components/account/readme.mdx +++ b/sites/dev/docs/reference/packages/react/components/account/readme.mdx @@ -2,6 +2,203 @@ title: Account --- -:::note -This page is yet to be created -::: +import { DocusaurusDoc } from '@freesewing/react/components/Docusaurus' +import { ComponentDocs } from '@site/src/components/component-docs.js' +import { MiniNote} from '@freesewing/react/components/Mini' +import { + jsdocAccountStatus as jsdocAccount, + jsdocAccountStatus, + jsdocApikeys, + jsdocAvatar, + jsdocBio, + jsdocBookmarkButton, + jsdocBookmarks, + jsdocCompare, + jsdocConsent, + jsdocControl, + jsdocEmail, + jsdocEmailChangeConfirmation, + jsdocExport, + jsdocGithub, + jsdocImportSet, + jsdocInstagram, + jsdocLinks, + jsdocMastodon, + jsdocMfa, + jsdocMsetCard, + jsdocNewSet, + jsdocNewsletter, +} from '@site/prebuild/jsdoc/components.account.mjs' +import { + AccountStatusExample, + ApikeysExample, + AvatarExample, + BioExample, + BookmarkButtonExample, + BookmarksExample, + CompareExample, + ConsentExample, + ControlExample, + EmailExample, + EmailChangeConfirmationExample, + ExportExample, + GithubExample, + ImportSetExample, + InstagramExample, + LinksExample, + MastodonExample, + MfaExample, + MsetCardExample, + NewSetExample, + NewsletterExample, +} from './_examples.js' + + + +The **Account** component family provides the following components: + +- [AccountStatus ](#accountstatus) +- [Apikeys ](#apikeys) +- [Avatar ](#avatar) +- [Bio ](#bio) +- [BookmarkButton ](#bookmarkbutton) +- [Bookmarks ](#bookmarks) +- [Compare ](#compare) +- [Consent ](#consent) +- [Control ](#control) +- [Email ](#email) +- [EmailChangeConfirmation](#emailchanfirmation) +- [Export ](#export) +- [Github ](#github) +- [ImportSet ](#importset) +- [Instagram ](#instagram) +- [Links ](#links) +- [Mastodon ](#mastodon) +- [Mfa ](#mfa) +- [MsetCard ](#msetcard) +- [NewSet ](#newset) +- [Newsletter ](#newslett) +- [Password ](#password) +- [Pattern ](#pattern) +- [PatternCard ](#patterncard) +- [Patterns ](#patterns) +- [Reddit ](#reddit) +- [Reload ](#reload) +- [Remove ](#remove) +- [Restrict ](#restrict) +- [Set ](#set) +- [Sets ](#sets) +- [Tiktok ](#tiktok) +- [Twitch ](#twitch) +- [Units ](#units) +- [UserId ](#userid) +- [Username ](#username) +- [UserRole ](#userrole) +- [Website ](#website) + + +## AccountStatus + + +## Apikeys + + +## Avatar + + +## Bio + + +## BookmarkButton + + +## Bookmarks + + +## Compare + + +## Consent + + +## Control + + +## Email + + +## EmailChangeConfirmation + +#### Requires a valid callback URL +This component will not work without the proper id and check URL paramters +that come from a email confirmation link sent out from the FreeSewing backend. + + + + +## Export + + +## Github + + +## ImportSet + + +## Instagram + + +## Links + + +## Mastodon + + +## Mfa + + +## MsetCard + + +## NewSet + + +## Newsletter + + +## Password + +## Pattern + +## PatternCard + +## Patterns + +## Reddit + +## Reload + +## Remove + +## Restrict + +## Set + +## Sets + +## Tiktok + +## Twitch + +## Units + +## UserId + +## Username + +## UserRole + +## Website + + + diff --git a/sites/dev/docs/reference/packages/react/components/button/_examples.js b/sites/dev/docs/reference/packages/react/components/button/_examples.js new file mode 100644 index 00000000000..60572763547 --- /dev/null +++ b/sites/dev/docs/reference/packages/react/components/button/_examples.js @@ -0,0 +1,39 @@ +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 { MiniNote } from '@freesewing/react/components/Mini' + +export const IconButtonExample = () => ( + <> + + 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')} + + + + 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 e6e419cec6b..48d4539b013 100644 --- a/sites/dev/docs/reference/packages/react/components/button/readme.mdx +++ b/sites/dev/docs/reference/packages/react/components/button/readme.mdx @@ -3,8 +3,9 @@ title: Button --- import { DocusaurusDoc } from '@freesewing/react/components/Docusaurus' -import { jsdocIconButton } from '@site/prebuild/jsdoc/components.button.mjs' import { ComponentDocs } from '@site/src/components/component-docs.js' +import { jsdocIconButton } from '@site/prebuild/jsdoc/components.button.mjs' +import { IconButtonExample } from './_examples.js' @@ -14,6 +15,6 @@ The **Button** component family provides the following components: ## IconButton - + diff --git a/sites/dev/src/components/component-docs.js b/sites/dev/src/components/component-docs.js index 2ac64695f00..eb7d141d48a 100644 --- a/sites/dev/src/components/component-docs.js +++ b/sites/dev/src/components/component-docs.js @@ -5,7 +5,8 @@ import { FingerprintIcon, WarningIcon } from '@freesewing/react/components/Icon' import { IconButton } from '@freesewing/react/components/Button' import { MiniNote } from '@freesewing/react/components/Mini' -export const ComponentDocs = ({ docs }) => { +export const ComponentDocs = ({ docs, example }) => { + const Example = example || null return ( <>

{docs.desc}

@@ -18,40 +19,14 @@ export const ComponentDocs = ({ docs }) => { {docs.importAs} -

- The {docs.name} component takes the following props: -

- + {docs.params + ?

The {docs.name} component takes the following props:

+ : This component does not take any props + } + {docs.params ? : null} - - 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')} - - - - Primary (default) - -
- - - Warning - +

@@ -86,17 +61,26 @@ const PropsTable = ({ docs }) => ( - {docs.params.map((prop, i) => ( + {(docs.params || []).map((prop, i) => ( {prop.name} {prop.type.names} {prop.description} {prop.optional ? 'yes' : 'no'} - {prop.defaultvalue} + ))} ) + +const DefaultPropValue = ({ value }) => { + if (value === true) return 'true' + if (value === false) return 'false' + if (value === null) return 'null' + if (typeof value === 'undefined') return 'undefined' + + return value +}