From 6d9cbf55c2d340e82f1dc158389392eaff9a19ce Mon Sep 17 00:00:00 2001 From: joostdecock Date: Fri, 9 May 2025 17:46:51 +0200 Subject: [PATCH 01/74] [react] feat: Added docs for components/Account --- packages/react/components/Account/Apikeys.mjs | 10 +- packages/react/components/Account/Avatar.mjs | 14 +- packages/react/components/Account/Bio.mjs | 12 +- .../react/components/Account/Bookmarks.mjs | 38 ++-- packages/react/components/Account/Compare.mjs | 9 +- packages/react/components/Account/Consent.mjs | 12 +- packages/react/components/Account/Control.mjs | 10 +- packages/react/components/Account/Email.mjs | 22 +- packages/react/components/Account/Export.mjs | 7 +- packages/react/components/Account/Github.mjs | 7 +- packages/react/components/Account/Id.mjs | 10 +- packages/react/components/Account/Import.mjs | 9 +- .../react/components/Account/Instagram.mjs | 64 ------ packages/react/components/Account/Links.mjs | 10 +- packages/react/components/Account/Mfa.mjs | 13 +- .../react/components/Account/Newsletter.mjs | 12 +- .../react/components/Account/Password.mjs | 11 +- packages/react/components/Account/Pattern.mjs | 30 ++- .../react/components/Account/Patterns.mjs | 14 +- .../react/components/Account/Platform.mjs | 41 ++++ packages/react/components/Account/Reload.mjs | 7 +- packages/react/components/Account/Remove.mjs | 7 +- .../react/components/Account/Restrict.mjs | 11 +- packages/react/components/Account/Role.mjs | 8 + packages/react/components/Account/Set.mjs | 16 +- packages/react/components/Account/Sets.mjs | 34 +-- packages/react/components/Account/Status.mjs | 8 + packages/react/components/Account/Units.mjs | 9 +- .../react/components/Account/Username.mjs | 12 +- packages/react/components/Account/index.mjs | 88 ++++---- packages/react/components/Uuid/index.mjs | 4 +- packages/react/mkdocs.sh | 4 +- .../react/components/account/_examples.js | 78 +++++++ .../react/components/account/readme.mdx | 203 +++++++++++++++++- .../react/components/button/_examples.js | 39 ++++ .../react/components/button/readme.mdx | 5 +- sites/dev/src/components/component-docs.js | 54 ++--- 37 files changed, 665 insertions(+), 277 deletions(-) delete mode 100644 packages/react/components/Account/Instagram.mjs create mode 100644 sites/dev/docs/reference/packages/react/components/account/_examples.js create mode 100644 sites/dev/docs/reference/packages/react/components/button/_examples.js 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 +} From 5ec2a2a1da9b8230aeeef7664445b3f658b1edc6 Mon Sep 17 00:00:00 2001 From: joostdecock Date: Fri, 9 May 2025 17:47:03 +0200 Subject: [PATCH 02/74] [react] feat: Added docs for components/Admin --- packages/react/components/Admin/index.mjs | 26 ++- packages/react/mkdocs.sh | 1 + .../react/components/account/_examples.js | 70 ++++++- .../react/components/account/readme.mdx | 173 +++++++++++++----- .../react/components/admin/readme.mdx | 31 +++- .../react/components/button/_examples.js | 5 +- sites/dev/src/components/component-docs.js | 19 +- 7 files changed, 255 insertions(+), 70 deletions(-) diff --git a/packages/react/components/Admin/index.mjs b/packages/react/components/Admin/index.mjs index 06781d5d447..cc3c94da275 100644 --- a/packages/react/components/Admin/index.mjs +++ b/packages/react/components/Admin/index.mjs @@ -18,7 +18,13 @@ import { Markdown } from '@freesewing/react/components/Markdown' import { ModalWrapper } from '@freesewing/react/components/Modal' import { AccountStatus, UserRole } from '@freesewing/react/components/Account' -export const SubscriberAdministration = ({ page }) => { +/** + * A component to manage FreeSewing newsletter subscribers (requires admin role) + * + * @component + * @returns {JSX.Element} + */ +export const SubscriberAdministration = () => { const [subscribers, setSubscribers] = useState() const [q, setQ] = useState() const [hits, setHits] = useState([]) @@ -106,6 +112,14 @@ export const SubscriberAdministration = ({ page }) => { ) } +/** + * A component to manage FreeSewing users (requires the admin role) + * + * @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 UserAdministration = ({ Link = false }) => { const backend = useBackend() @@ -154,7 +168,7 @@ export const UserAdministration = ({ Link = false }) => { ) } -export const Hits = ({ results, Link = false }) => { +const Hits = ({ results, Link = false }) => { if (!Link) Link = WebLink return ( @@ -179,7 +193,7 @@ export const Hits = ({ results, Link = false }) => { ) } -export const User = ({ user, Link }) => { +const User = ({ user, Link }) => { const { setModal } = useContext(ModalContext) const { setLoadingStatus } = useContext(LoadingStatusContext) const backend = useBackend() @@ -274,7 +288,7 @@ export const User = ({ user, Link }) => { ) } -export const ImpersonateButton = ({ userId }) => { +const ImpersonateButton = ({ userId }) => { const backend = useBackend() const { setLoadingStatus } = useContext(LoadingStatusContext) const { impersonate } = useAccount() @@ -300,14 +314,14 @@ export const ImpersonateButton = ({ userId }) => { ) } -export const Row = ({ title, val }) => ( +const Row = ({ title, val }) => ( {title} {val} ) -export const ManageUser = ({ userId }) => { +const ManageUser = ({ userId }) => { // Hooks const backend = useBackend() const { setLoadingStatus } = useContext(LoadingStatusContext) diff --git a/packages/react/mkdocs.sh b/packages/react/mkdocs.sh index 6884d49772b..98c34734b6f 100755 --- a/packages/react/mkdocs.sh +++ b/packages/react/mkdocs.sh @@ -2,4 +2,5 @@ mkdir -p ./docs/components jsdoc -c jsdoc.json components/Account/* > ../../sites/dev/prebuild/jsdoc/react/components/account.json +jsdoc -c jsdoc.json components/Admin/* > ../../sites/dev/prebuild/jsdoc/react/components/admin.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 index 42beab42cf3..4937246d6be 100644 --- a/sites/dev/docs/reference/packages/react/components/account/_examples.js +++ b/sites/dev/docs/reference/packages/react/components/account/_examples.js @@ -21,6 +21,23 @@ import { MsetCard, NewSet as NewSetExample, Newsletter as NewsletterExample, + Password as PasswordExample, + Pattern, + PatternCard, + Patterns as PatternsExample, + Reddit as RedditExample, + Reload as ReloadExample, + Remove as RemoveExample, + Restrict as RestrictExample, + Set as SetExample, + Sets as SetsExample, + Tiktok as TiktokExample, + Twitch as TwitchExample, + Units as UnitsExample, + UserId as UserIdExample, + Username as UsernameExample, + UserRole as UserRoleExample, + Website as WebsiteExample, } from '@freesewing/react/components/Account' const AccountStatusExample = () => ( @@ -32,10 +49,30 @@ const AccountStatusExample = () => ( - -2 - -1 - 0 - 1 + + -2 + + + + + + -1 + + + + + + 0 + + + + + + 1 + + + + ) @@ -48,9 +85,10 @@ const BookmarkButtonExample = () => ( /> ) -const MsetCardExample = () => ( - -) +const MsetCardExample = () => + +const PatternExample = () => +const PatternCardExample = () => export { AccountStatusExample, @@ -74,5 +112,21 @@ export { MsetCardExample, NewSetExample, NewsletterExample, + PasswordExample, + PatternExample, + PatternCardExample, + PatternsExample, + RedditExample, + ReloadExample, + RemoveExample, + RestrictExample, + SetExample, + SetsExample, + TiktokExample, + TwitchExample, + UnitsExample, + UserIdExample, + UsernameExample, + UserRoleExample, + WebsiteExample, } - 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 2756140513c..1289cc344ad 100644 --- a/sites/dev/docs/reference/packages/react/components/account/readme.mdx +++ b/sites/dev/docs/reference/packages/react/components/account/readme.mdx @@ -4,7 +4,7 @@ title: Account import { DocusaurusDoc } from '@freesewing/react/components/Docusaurus' import { ComponentDocs } from '@site/src/components/component-docs.js' -import { MiniNote} from '@freesewing/react/components/Mini' +import { MiniNote } from '@freesewing/react/components/Mini' import { jsdocAccountStatus as jsdocAccount, jsdocAccountStatus, @@ -28,6 +28,23 @@ import { jsdocMsetCard, jsdocNewSet, jsdocNewsletter, + jsdocPassword, + jsdocPattern, + jsdocPatternCard, + jsdocPatterns, + jsdocReddit, + jsdocReload, + jsdocRemove, + jsdocRestrict, + jsdocSet, + jsdocSets, + jsdocTiktok, + jsdocTwitch, + jsdocUnits, + jsdocUserId, + jsdocUsername, + jsdocUserRole, + jsdocWebsite, } from '@site/prebuild/jsdoc/components.account.mjs' import { AccountStatusExample, @@ -51,154 +68,224 @@ import { MsetCardExample, NewSetExample, NewsletterExample, + PasswordExample, + PatternExample, + PatternCardExample, + PatternsExample, + RedditExample, + ReloadExample, + RemoveExample, + RestrictExample, + SetExample, + SetsExample, + TiktokExample, + TwitchExample, + UnitsExample, + UserIdExample, + UsernameExample, + UserRoleExample, + WebsiteExample, } 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) +- [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) - +- [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. + #### 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/admin/readme.mdx b/sites/dev/docs/reference/packages/react/components/admin/readme.mdx index 4c333d24f6d..1501ee4d0f9 100644 --- a/sites/dev/docs/reference/packages/react/components/admin/readme.mdx +++ b/sites/dev/docs/reference/packages/react/components/admin/readme.mdx @@ -2,6 +2,31 @@ title: Admin --- -:::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 { + jsdocSubscriberAdministration, + jsdocUserAdministration, +} from '@site/prebuild/jsdoc/components.admin.mjs' +import { + UserAdministration, + SubscriberAdministration +} from '@freesewing/react/components/Admin' + + + +The **Admin** component family provides the following components: + +- [SubscriberAdministration ](#subscriberadministration) +- [UserAdministration ](#useradministration) + +## SubscriberAdministration + + + +## UserAdministration + + + + + 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 60572763547..a1b670443d5 100644 --- a/sites/dev/docs/reference/packages/react/components/button/_examples.js +++ b/sites/dev/docs/reference/packages/react/components/button/_examples.js @@ -6,9 +6,7 @@ import { MiniNote } from '@freesewing/react/components/Mini' export const IconButtonExample = () => ( <> - - Note that this component will take up the full width made available to it. - + Note that this component will take up the full width made available to it. {[ `import { FingerprintIcon, WarningIcon } from '@freesewing/react/components/Icon'`, @@ -36,4 +34,3 @@ export const IconButtonExample = () => ( ) - diff --git a/sites/dev/src/components/component-docs.js b/sites/dev/src/components/component-docs.js index eb7d141d48a..00512c6cdd3 100644 --- a/sites/dev/src/components/component-docs.js +++ b/sites/dev/src/components/component-docs.js @@ -6,7 +6,8 @@ import { IconButton } from '@freesewing/react/components/Button' import { MiniNote } from '@freesewing/react/components/Mini' export const ComponentDocs = ({ docs, example }) => { - const Example = example || null + if (!docs) return No docs passed in + const Example = example || null return ( <>

{docs.desc}

@@ -19,10 +20,14 @@ export const ComponentDocs = ({ docs, example }) => { {docs.importAs} - {docs.params - ?

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

- : This component does not take any props - } + {docs.params ? ( +

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

+ ) : ( + This component does not take any props + )} {docs.params ? : null} @@ -68,7 +73,9 @@ const PropsTable = ({ docs }) => ( {prop.description} {prop.optional ? 'yes' : 'no'} - + + + ))} From 8f53b047a64e2c1a6e279d17eb38ede70843509b Mon Sep 17 00:00:00 2001 From: joostdecock Date: Fri, 9 May 2025 18:00:43 +0200 Subject: [PATCH 03/74] [react] feat: Added docs for components/Breadcrumbs --- .../react/components/Breadcrumbs/index.mjs | 27 ++++++++++++------- packages/react/mkdocs.sh | 1 + .../react/components/breadcrumbs/_examples.js | 15 +++++++++++ .../react/components/breadcrumbs/readme.mdx | 23 +++++++++++++--- 4 files changed, 53 insertions(+), 13 deletions(-) create mode 100644 sites/dev/docs/reference/packages/react/components/breadcrumbs/_examples.js diff --git a/packages/react/components/Breadcrumbs/index.mjs b/packages/react/components/Breadcrumbs/index.mjs index 5aba3fd243b..42c0eb1fd40 100644 --- a/packages/react/components/Breadcrumbs/index.mjs +++ b/packages/react/components/Breadcrumbs/index.mjs @@ -1,12 +1,16 @@ import React from 'react' -/* - * The actual Breadcrumbs component +/** + * A component to render breadcrumbs * - * @param {object} props - All the React props - * @param {array} props.crumbs - The crumbs, an array with objects with href, label keys - * @param {function} Link - An optional custom component to use to render the Link - * @param {text} title - The title of the current page + * 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 - A framework specific Link component for client-side routing + * @param {array} [props.crumbs = []] - The crumbs, an array with objects with href & label properties + * @param {text} title - The title of the current (final) page the breadcrumbs lead to + * @returns {JSX.Element} */ export const Breadcrumbs = ({ crumbs = [], title, Link = false }) => { if (Link === false) Link = RegularLink @@ -18,13 +22,16 @@ export const Breadcrumbs = ({ crumbs = [], title, Link = false }) => { style={{ paddingLeft: 0 }} >
  • - Home + Home
    • {crumbs.map((crumb, i) => ( -
  • - {crumb.label} -
    • + +
  • + {crumb.label} +
    • +
    • +     ))}
  • {title}
    • diff --git a/packages/react/mkdocs.sh b/packages/react/mkdocs.sh index 98c34734b6f..27646a19331 100755 --- a/packages/react/mkdocs.sh +++ b/packages/react/mkdocs.sh @@ -3,4 +3,5 @@ mkdir -p ./docs/components jsdoc -c jsdoc.json components/Account/* > ../../sites/dev/prebuild/jsdoc/react/components/account.json jsdoc -c jsdoc.json components/Admin/* > ../../sites/dev/prebuild/jsdoc/react/components/admin.json +jsdoc -c jsdoc.json components/Breadcrumbs/* > ../../sites/dev/prebuild/jsdoc/react/components/breadcrumbs.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/breadcrumbs/_examples.js b/sites/dev/docs/reference/packages/react/components/breadcrumbs/_examples.js new file mode 100644 index 00000000000..21c92b92509 --- /dev/null +++ b/sites/dev/docs/reference/packages/react/components/breadcrumbs/_examples.js @@ -0,0 +1,15 @@ +import React from 'react' +import { Breadcrumbs } from '@freesewing/react/components/Breadcrumbs' + +export const BreadcrumbsExample = () => ( + +) + diff --git a/sites/dev/docs/reference/packages/react/components/breadcrumbs/readme.mdx b/sites/dev/docs/reference/packages/react/components/breadcrumbs/readme.mdx index 49b7268d22f..e3953bffafc 100644 --- a/sites/dev/docs/reference/packages/react/components/breadcrumbs/readme.mdx +++ b/sites/dev/docs/reference/packages/react/components/breadcrumbs/readme.mdx @@ -2,6 +2,23 @@ title: Breadcrumbs --- -:::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 { jsdocBreadcrumbs } from '@site/prebuild/jsdoc/components.breadcrumbs.mjs' +import { BreadcrumbsExample } from './_examples.js' + + + +The **Breadcrumbs** component family provides the following components: + +- [Breadcrumbs ](#breadcrumbs) + +## Breadcrumbs + +This component is different from the Docusaurus breadcrumbs +
    + + +     + From 0bbc7ef24279488e55d42701ea8293602868f99d Mon Sep 17 00:00:00 2001 From: joostdecock Date: Sat, 10 May 2025 10:16:35 +0200 Subject: [PATCH 04/74] [react] fix: Do not export local components --- packages/react/components/Account/Set.mjs | 20 +++++++++++-------- .../react/components/account/_examples.js | 3 ++- 2 files changed, 14 insertions(+), 9 deletions(-) diff --git a/packages/react/components/Account/Set.mjs b/packages/react/components/Account/Set.mjs index 5f617ee9840..1e243170fb2 100644 --- a/packages/react/components/Account/Set.mjs +++ b/packages/react/components/Account/Set.mjs @@ -63,9 +63,10 @@ const t = (input) => { return input } -/* +/** * Component to show an individual measurements set * + * @component * @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 @@ -384,7 +385,7 @@ export const Set = ({ id, publicOnly = false, Link = false, measurementHelpProvi return (
    {heading} - +
    ) @@ -619,28 +620,30 @@ export const Set = ({ id, publicOnly = false, Link = false, measurementHelpProvi ) } -/** +/* * A (helper) component to display a measurements value * + * @component * @param {object} props - All React props * @param {string} val - The value * @param {string} m - The measurement name * @param {bool} imperial - True for imperial measurements, or metric by default */ -export const MeasurementValue = ({ val, m, imperial = false }) => +const MeasurementValue = ({ val, m, imperial = false }) => isDegreeMeasurement(m) ? ( {val}° ) : ( ) -/** +/* * React component to suggest a measurements set for curation * + * @component * @param {object} props - All React props * @param {string} mset - The measurements set */ -export const SuggestCset = ({ mset, Link }) => { +const SuggestCset = ({ mset, Link }) => { // State const [height, setHeight] = useState('') const [img, setImg] = useState('') @@ -760,13 +763,14 @@ export const SuggestCset = ({ mset, Link }) => { ) } -/** +/* * React component to render a preview of a measurement set using the bonny pattern * + * @component * @param {object} props - All React props * @param {string} mset - The measurements set */ -export const RenderedCSet = ({ mset, imperial }) => { +const RenderedCset = ({ mset, imperial }) => { const [previewVisible, setPreviewVisible] = useState(false) const missing = [] diff --git a/sites/dev/docs/reference/packages/react/components/account/_examples.js b/sites/dev/docs/reference/packages/react/components/account/_examples.js index 4937246d6be..61c8c0ffa39 100644 --- a/sites/dev/docs/reference/packages/react/components/account/_examples.js +++ b/sites/dev/docs/reference/packages/react/components/account/_examples.js @@ -29,7 +29,7 @@ import { Reload as ReloadExample, Remove as RemoveExample, Restrict as RestrictExample, - Set as SetExample, + Set, Sets as SetsExample, Tiktok as TiktokExample, Twitch as TwitchExample, @@ -89,6 +89,7 @@ const MsetCardExample = () => const PatternExample = () => const PatternCardExample = () => +const SetExample = () => export { AccountStatusExample, From ef6f59de80ecf07f775510a48043a2a1d976c9d6 Mon Sep 17 00:00:00 2001 From: joostdecock Date: Sat, 10 May 2025 10:37:51 +0200 Subject: [PATCH 05/74] [react] feat: Added new useFilter hook --- packages/react/hooks/useFilter/index.mjs | 8 ++++++++ 1 file changed, 8 insertions(+) create mode 100644 packages/react/hooks/useFilter/index.mjs diff --git a/packages/react/hooks/useFilter/index.mjs b/packages/react/hooks/useFilter/index.mjs new file mode 100644 index 00000000000..b9b74b8232d --- /dev/null +++ b/packages/react/hooks/useFilter/index.mjs @@ -0,0 +1,8 @@ +import React from 'react' +import { useAtom } from 'jotai' +import { atomWithHash } from 'jotai-location' + +const filterAtom = atomWithHash('filter', { }) + +export const useFilter = () => useAtom(filterAtom) + From 34ae1dc8dcb3538d38a91320dcca476fd5e57c54 Mon Sep 17 00:00:00 2001 From: joostdecock Date: Sat, 10 May 2025 10:38:06 +0200 Subject: [PATCH 06/74] [react] feat: Added docs for components/Collection --- .../react/components/Collection/index.mjs | 49 +++++++++---------- packages/react/mkdocs.sh | 1 + packages/react/package.json | 3 +- .../react/components/collection/_examples.js | 8 +++ .../react/components/collection/readme.mdx | 23 +++++++-- 5 files changed, 55 insertions(+), 29 deletions(-) create mode 100644 sites/dev/docs/reference/packages/react/components/collection/_examples.js diff --git a/packages/react/components/Collection/index.mjs b/packages/react/components/Collection/index.mjs index c4f3731196c..3a8ebd7c681 100644 --- a/packages/react/components/Collection/index.mjs +++ b/packages/react/components/Collection/index.mjs @@ -1,5 +1,4 @@ // Dependencies -import { atomWithHash } from 'jotai-location' import { about, collection, @@ -21,7 +20,7 @@ import { ModalContext } from '@freesewing/react/context/Modal' // Hooks import React, { useState, useContext, Fragment } from 'react' -import { useAtom } from 'jotai' +import { useFilter } from '@freesewing/react/hooks/useFilter' // Components import { Link as WebLink, AnchorLink } from '@freesewing/react/components/Link' @@ -44,19 +43,16 @@ import { ModalWrapper } from '@freesewing/react/components/Modal' import { KeyVal } from '@freesewing/react/components/KeyVal' import { MissingLinedrawing } from '../LineDrawing/missing.mjs' -const filterAtom = atomWithHash('filter', { example: true }) - -export const useFilter = () => { - return useAtom(filterAtom) -} - /** - * React component to show the FreeSewing collection and pick a design + * A component to show the FreeSewing collection and pick a design. * - * @param {object} props - All React props - * @param {function} Link - An optional framework specific Link component for client-side routing - * @param {bool} editor - Set this to when loaded in the editor (this will make the display more dense) - * @param {bool} onClick - Set this to trigger an onClick event, rather than using links + * @component + * @param {object} props - All component props + * @param {React.Component} [props.Link = false] - A framework specific Link component for client-side routing + * @param {boolean} [props.editor = false] - Set this to true when rendering inside the FreeSewing editor + * @param {string} [props.linkTo = 'about'] - This controls where to link the design to. One of 'new', 'docs', or 'about'. + * @param {functino} [props.onClick = false] - You can pass in an onClick handler rather than using links + * @returns {JSX.Element} */ export const Collection = ({ Link = false, linkTo = 'about', editor = false, onClick = false }) => { if (!Link) Link = WebLink @@ -184,14 +180,14 @@ export const Collection = ({ Link = false, linkTo = 'about', editor = false, onC
    @@ -363,11 +359,14 @@ const noExample = 'https://images.pexels.com/photos/5626595/pexels-photo-5626595.jpeg?cs=srgb&fm=jpg&w=640&h=427' /** - * React component to show info about a FreeSewing design + * A component to show info about a FreeSewing design * - * @param {object} props - All React props - * @param {string} design - The name/id of the design - * @param {function} Link - An optional 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 + * @param {string} props.design - The name/id of the design + * @param {boolean} props.noDocsLink - Set this to true to not render a link to the documentation + * @returns {JSX.Element} */ export const DesignInfo = ({ Link = false, design = false, noDocsLink = false }) => { if (!Link) Link = WebLink diff --git a/packages/react/mkdocs.sh b/packages/react/mkdocs.sh index 27646a19331..5db697bc908 100755 --- a/packages/react/mkdocs.sh +++ b/packages/react/mkdocs.sh @@ -5,3 +5,4 @@ jsdoc -c jsdoc.json components/Account/* > ../../sites/dev/prebuild/jsdoc/react/ jsdoc -c jsdoc.json components/Admin/* > ../../sites/dev/prebuild/jsdoc/react/components/admin.json jsdoc -c jsdoc.json components/Breadcrumbs/* > ../../sites/dev/prebuild/jsdoc/react/components/breadcrumbs.json 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 diff --git a/packages/react/package.json b/packages/react/package.json index 4cb38f48d72..bc15bd35b0e 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -85,6 +85,7 @@ "./hooks/useControl": "./hooks/useControl/index.mjs", "./hooks/useDesign": "./hooks/useDesign/index.mjs", "./hooks/useDesignTranslation": "./hooks/useDesignTranslation/index.mjs", + "./hooks/useFilter": "./hooks/useFilter/index.mjs", "./hooks/useSelection": "./hooks/useSelection/index.mjs", "./hooks/useStateObject": "./hooks/useStateObject/index.mjs", "./lib/RestClient": "./lib/RestClient/index.mjs", @@ -137,4 +138,4 @@ "engines": { "node": ">= 20" } -} \ No newline at end of file +} diff --git a/sites/dev/docs/reference/packages/react/components/collection/_examples.js b/sites/dev/docs/reference/packages/react/components/collection/_examples.js new file mode 100644 index 00000000000..2f6f0d59062 --- /dev/null +++ b/sites/dev/docs/reference/packages/react/components/collection/_examples.js @@ -0,0 +1,8 @@ +import { Collection as CollectionExample, DesignInfo } from '@freesewing/react/components/Collection' + +const DesignInfoExample = () => + +export { + CollectionExample, + DesignInfoExample, +} diff --git a/sites/dev/docs/reference/packages/react/components/collection/readme.mdx b/sites/dev/docs/reference/packages/react/components/collection/readme.mdx index 427be26a12d..7c7050adf7d 100644 --- a/sites/dev/docs/reference/packages/react/components/collection/readme.mdx +++ b/sites/dev/docs/reference/packages/react/components/collection/readme.mdx @@ -2,6 +2,23 @@ title: Collection --- -:::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 { jsdocCollection, jsdocDesignInfo } from '@site/prebuild/jsdoc/components.collection.mjs' +import { CollectionExample, DesignInfoExample } from './_examples.js' + + + +The **Collection** component family provides the following components: + +- [Collection](#collection) +- [DesignInfo](#designinfo) + +## Collection + + + +## DesignInfo + + + From fc04e415c9c6d5d5f79605b145a8d685acea15dd Mon Sep 17 00:00:00 2001 From: joostdecock Date: Sat, 10 May 2025 13:44:03 +0200 Subject: [PATCH 07/74] [react] feat: Added docs for components/Control --- .../react/components/Collection/index.mjs | 4 ++-- packages/react/components/Control/index.mjs | 12 +++++++++-- packages/react/mkdocs.sh | 1 + .../react/components/collection/readme.mdx | 2 +- .../react/components/control/_examples.js | 4 ++++ .../react/components/control/readme.mdx | 20 ++++++++++++++++--- 6 files changed, 35 insertions(+), 8 deletions(-) create mode 100644 sites/dev/docs/reference/packages/react/components/control/_examples.js diff --git a/packages/react/components/Collection/index.mjs b/packages/react/components/Collection/index.mjs index 3a8ebd7c681..00a87c3ca3f 100644 --- a/packages/react/components/Collection/index.mjs +++ b/packages/react/components/Collection/index.mjs @@ -505,7 +505,7 @@ export const DesignInfo = ({ Link = false, design = false, noDocsLink = false }) className="tw:daisy-badge tw:daisy-badge-primary tw:font-medium tw:hover:shadow tw:hover:cursor-pointer" href={`/designs/#filter={"example"%3Atrue%2C"tag"%3A["${tag}"]}`} > - {tag} + {tag} ))} @@ -517,7 +517,7 @@ export const DesignInfo = ({ Link = false, design = false, noDocsLink = false }) className="tw:daisy-badge tw:daisy-badge-accent tw:font-medium tw:hover:shadow tw:hover:cursor-pointer" href={`/designs/#filter={"example"%3Atrue%2C"tag"%3A["${tech}"]}`} > - {tech} + {tech} ))} diff --git a/packages/react/components/Control/index.mjs b/packages/react/components/Control/index.mjs index 249e959e616..6f70a2e135b 100644 --- a/packages/react/components/Control/index.mjs +++ b/packages/react/components/Control/index.mjs @@ -2,9 +2,17 @@ import React from 'react' import { controlDesc } from '@freesewing/config' import { BulletIcon } from '@freesewing/react/components/Icon' -export const ControlScore = ({ control, color = 'base-content' }) => +/** + * A component to render a visualisation of the user's control/UX setting + * + * @component + * @param {object} props - All component props + * @param {number} props.control - The user's control setting (a number) + * @returns {JSX.Element} + */ +export const ControlScore = ({ control }) => control ? ( -
    +
    {Object.keys(controlDesc).map((score) => ( = score ? true : false} diff --git a/packages/react/mkdocs.sh b/packages/react/mkdocs.sh index 5db697bc908..bbaf258a8ba 100755 --- a/packages/react/mkdocs.sh +++ b/packages/react/mkdocs.sh @@ -6,3 +6,4 @@ jsdoc -c jsdoc.json components/Admin/* > ../../sites/dev/prebuild/jsdoc/react/co jsdoc -c jsdoc.json components/Breadcrumbs/* > ../../sites/dev/prebuild/jsdoc/react/components/breadcrumbs.json 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 diff --git a/sites/dev/docs/reference/packages/react/components/collection/readme.mdx b/sites/dev/docs/reference/packages/react/components/collection/readme.mdx index 7c7050adf7d..1946dd1b470 100644 --- a/sites/dev/docs/reference/packages/react/components/collection/readme.mdx +++ b/sites/dev/docs/reference/packages/react/components/collection/readme.mdx @@ -15,10 +15,10 @@ The **Collection** component family provides the following components: - [DesignInfo](#designinfo) ## Collection - ## DesignInfo + diff --git a/sites/dev/docs/reference/packages/react/components/control/_examples.js b/sites/dev/docs/reference/packages/react/components/control/_examples.js new file mode 100644 index 00000000000..9caabe6ff17 --- /dev/null +++ b/sites/dev/docs/reference/packages/react/components/control/_examples.js @@ -0,0 +1,4 @@ +import React from 'react' +import { ControlScore } from '@freesewing/react/components/Control' + +export const ControlScoreExample = () => diff --git a/sites/dev/docs/reference/packages/react/components/control/readme.mdx b/sites/dev/docs/reference/packages/react/components/control/readme.mdx index 204a8b554d0..e33250a537b 100644 --- a/sites/dev/docs/reference/packages/react/components/control/readme.mdx +++ b/sites/dev/docs/reference/packages/react/components/control/readme.mdx @@ -2,6 +2,20 @@ title: Control --- -:::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 { jsdocControlScore } from '@site/prebuild/jsdoc/components.control.mjs' +import { ControlScoreExample } from './_examples.js' + + + +The **Control** component family provides the following components: + +- [ControlScore](#controlscore) + +## ControlScore + + + + + From 749b6b9da72537f00172242c16850363a4b8eb3b Mon Sep 17 00:00:00 2001 From: joostdecock Date: Sat, 10 May 2025 14:01:16 +0200 Subject: [PATCH 08/74] [react] feat: Added docs for components/CopyToClipboardButton --- .../CopyToClipboardButton/index.mjs | 20 +++++++++++++++---- packages/react/mkdocs.sh | 1 + .../copytoclipboardbutton/_examples.js | 9 +++++++++ .../copytoclipboardbutton/readme.mdx | 20 ++++++++++++++++--- 4 files changed, 43 insertions(+), 7 deletions(-) create mode 100644 sites/dev/docs/reference/packages/react/components/copytoclipboardbutton/_examples.js diff --git a/packages/react/components/CopyToClipboardButton/index.mjs b/packages/react/components/CopyToClipboardButton/index.mjs index 3fbc3dba597..8225b70dc62 100644 --- a/packages/react/components/CopyToClipboardButton/index.mjs +++ b/packages/react/components/CopyToClipboardButton/index.mjs @@ -21,29 +21,41 @@ const handleCopied = (content, setCopied, setLoadingStatus, label) => { 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:w-5 tw:h-5' + 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/mkdocs.sh b/packages/react/mkdocs.sh index bbaf258a8ba..48d2ccaf252 100755 --- a/packages/react/mkdocs.sh +++ b/packages/react/mkdocs.sh @@ -7,3 +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 diff --git a/sites/dev/docs/reference/packages/react/components/copytoclipboardbutton/_examples.js b/sites/dev/docs/reference/packages/react/components/copytoclipboardbutton/_examples.js new file mode 100644 index 00000000000..c9701d2badb --- /dev/null +++ b/sites/dev/docs/reference/packages/react/components/copytoclipboardbutton/_examples.js @@ -0,0 +1,9 @@ +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 index 1cfa8a4f079..5be13515688 100644 --- a/sites/dev/docs/reference/packages/react/components/copytoclipboardbutton/readme.mdx +++ b/sites/dev/docs/reference/packages/react/components/copytoclipboardbutton/readme.mdx @@ -2,6 +2,20 @@ title: CopyToClipboardButton --- -:::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 { jsdocCopyToClipboardButton } from '@site/prebuild/jsdoc/components.copytoclipboardbutton.mjs' +import { CopyToClipboardButtonExample } from './_examples.js' + + + +The **CopyToClipboardButton** component family provides the following components: + +- [CopyToClipboardButton](#copytoclipboardbutton) + +## CopyToClipboardButton + + + + + From e58177dedb7b564693536e4b2913b786fac3a6be Mon Sep 17 00:00:00 2001 From: joostdecock Date: Sat, 10 May 2025 14:19:57 +0200 Subject: [PATCH 09/74] [react] feat: Merged Button and CopyToClipboardButton --- packages/react/components/Account/Apikeys.mjs | 2 +- packages/react/components/Account/Mfa.mjs | 2 +- packages/react/components/Button/index.mjs | 62 ++++++++++++++++++- .../CopyToClipboardButton/index.mjs | 61 ------------------ .../react/components/CuratedSet/index.mjs | 21 +++++++ .../Editor/components/views/ExportView.mjs | 2 +- packages/react/components/Highlight/index.mjs | 2 +- packages/react/components/Uuid/index.mjs | 2 +- packages/react/mkdocs.sh | 2 +- packages/react/package.json | 1 - .../react/components/button/_examples.js | 31 +++------- .../react/components/button/readme.mdx | 9 ++- .../copytoclipboardbutton/_examples.js | 9 --- .../copytoclipboardbutton/readme.mdx | 21 ------- 14 files changed, 105 insertions(+), 122 deletions(-) delete mode 100644 packages/react/components/CopyToClipboardButton/index.mjs delete mode 100644 sites/dev/docs/reference/packages/react/components/copytoclipboardbutton/_examples.js delete mode 100644 sites/dev/docs/reference/packages/react/components/copytoclipboardbutton/readme.mdx 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 - - - - - From 297e4820b052a156d768ff22b4e4b7cc5d9d8d7c Mon Sep 17 00:00:00 2001 From: joostdecock Date: Sat, 10 May 2025 14:26:39 +0200 Subject: [PATCH 10/74] [react] feat: Added docs for components/CuratedSet --- .../react/components/curatedset/_examples.js | 10 ++++++++ .../react/components/curatedset/readme.mdx | 23 ++++++++++++++++--- 2 files changed, 30 insertions(+), 3 deletions(-) create mode 100644 sites/dev/docs/reference/packages/react/components/curatedset/_examples.js diff --git a/sites/dev/docs/reference/packages/react/components/curatedset/_examples.js b/sites/dev/docs/reference/packages/react/components/curatedset/_examples.js new file mode 100644 index 00000000000..277414e7e69 --- /dev/null +++ b/sites/dev/docs/reference/packages/react/components/curatedset/_examples.js @@ -0,0 +1,10 @@ +import React from 'react' +import { CuratedSet, CuratedSetLineup } from '@freesewing/react/components/CuratedSet' + +const CuratedSetExample = () => +const CuratedSetLineupExample = () => '#'} /> + +export { + CuratedSetExample, + CuratedSetLineupExample, +} diff --git a/sites/dev/docs/reference/packages/react/components/curatedset/readme.mdx b/sites/dev/docs/reference/packages/react/components/curatedset/readme.mdx index e0aae423597..68fa0f5f24a 100644 --- a/sites/dev/docs/reference/packages/react/components/curatedset/readme.mdx +++ b/sites/dev/docs/reference/packages/react/components/curatedset/readme.mdx @@ -2,6 +2,23 @@ title: CuratedSet --- -:::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 { jsdocCuratedSet, jsdocCuratedSetLineup } from '@site/prebuild/jsdoc/components.curatedset.mjs' +import { CuratedSetLineupExample, CuratedSetExample } from './_examples.js' + + + +The **CuratedSet** component family provides the following components: + +- [CuratedSet](#curatedset) +- [CuratedSetLineup](#curatedsetlineup) + +## CuratedSet + + +## CuratedSetLineup + + + + From e47d03cdb20c6188a6ee6e6b3302b00ede958bbd Mon Sep 17 00:00:00 2001 From: joostdecock Date: Sat, 10 May 2025 14:32:37 +0200 Subject: [PATCH 11/74] [react] chore: Remove unused Design component family --- packages/react/components/Design/index.mjs | 105 --------------------- packages/react/package.json | 1 - 2 files changed, 106 deletions(-) delete mode 100644 packages/react/components/Design/index.mjs diff --git a/packages/react/components/Design/index.mjs b/packages/react/components/Design/index.mjs deleted file mode 100644 index 8ccb0bfe372..00000000000 --- a/packages/react/components/Design/index.mjs +++ /dev/null @@ -1,105 +0,0 @@ -// Dependencies -import { collection } from '@freesewing/collection' -import { capitalize } from '@freesewing/utils' - -// Hooks -import React, { useState } from 'react' - -// Components -import { Link as WebLink, AnchorLink } from '@freesewing/react/components/Link' -import { ShowcaseIcon } from '@freesewing/react/components/Icon' - -const linkBuilders = { - new: (design) => `/-/?d=${design.toLowerCase()}`, - docs: (design) => `/docs/designs/${design.toLowerCase()}`, -} - -export const DesignTechnique = ({ technique }) => ( - - {technique} - -) - -export const DesignTag = ({ tag }) => { - const { t } = useTranslation(['tags']) - - return ( - - {t(tag)} - - ) -} - -export const DesignLink = ({ name, linkTo = 'new', className = linkClasses }) => ( - - {name} - -) - -export const DesignCard = ({ name, lineDrawing = false }) => { - const { t } = useTranslation(ns) - // Context - const { setModal } = useContext(ModalContext) - - const LineDrawing = - lineDrawing && lineDrawings[name] - ? lineDrawings[name] - : ({ className }) =>
    - const exampleImageUrl = designImages[name] - ? designImages[name] - : 'https://images.pexels.com/photos/5626595/pexels-photo-5626595.jpeg?cs=srgb&dl=pexels-frida-toth-5626595.jpg&fm=jpg&w=640&h=427&_gl=1*vmxq7y*_ga*MTM0OTk5OTY4NS4xNjYxMjUyMjc0*_ga_8JE65Q40S6*MTY5NTU1NDc0Mi4yNS4xLjE2OTU1NTU1NjIuMC4wLjA.' - - const bg = lineDrawing - ? {} - : { - backgroundImage: `url(${exampleImageUrl}`, - backgroundSize: 'cover', - backgroundPosition: 'center center', - } - - return ( - - ) -} diff --git a/packages/react/package.json b/packages/react/package.json index 7fcb1e2562d..849a6962947 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -39,7 +39,6 @@ "./components/Collection": "./components/Collection/index.mjs", "./components/Control": "./components/Control/index.mjs", "./components/CuratedSet": "./components/CuratedSet/index.mjs", - "./components/Design": "./components/Design/index.mjs", "./components/DiffViewer": "./components/DiffViewer/index.mjs", "./components/Docusaurus": "./components/Docusaurus/index.mjs", "./components/Echart": "./components/Echart/index.mjs", From a5f4dfa6a32eb961c4effc996b106a1cc4cc9202 Mon Sep 17 00:00:00 2001 From: joostdecock Date: Sat, 10 May 2025 14:48:08 +0200 Subject: [PATCH 12/74] [react] feat: Added docs for components/DiffViewer --- .../react/components/design/readme.mdx | 7 ----- .../react/components/diffviewer/readme.mdx | 26 +++++++++++++++++-- 2 files changed, 24 insertions(+), 9 deletions(-) delete mode 100644 sites/dev/docs/reference/packages/react/components/design/readme.mdx diff --git a/sites/dev/docs/reference/packages/react/components/design/readme.mdx b/sites/dev/docs/reference/packages/react/components/design/readme.mdx deleted file mode 100644 index b511c5dd866..00000000000 --- a/sites/dev/docs/reference/packages/react/components/design/readme.mdx +++ /dev/null @@ -1,7 +0,0 @@ ---- -title: Design ---- - -:::note -This page is yet to be created -::: diff --git a/sites/dev/docs/reference/packages/react/components/diffviewer/readme.mdx b/sites/dev/docs/reference/packages/react/components/diffviewer/readme.mdx index e1a706ca063..06c89006715 100644 --- a/sites/dev/docs/reference/packages/react/components/diffviewer/readme.mdx +++ b/sites/dev/docs/reference/packages/react/components/diffviewer/readme.mdx @@ -2,6 +2,28 @@ title: DiffViewer --- -:::note -This page is yet to be created +import { DocusaurusDoc } from '@freesewing/react/components/Docusaurus' + + + +The **DiffViewer** component family provides the following components: + +- [DiffViewer](#diffviewer): A re-export of [react-diff-viewer-continued][dv] + +In addition, it also exports the following functions: + +- [diffJSON](#diffjson): A re-export of the [diffJson][jsd] function of the [jsdiff package][jsd] +- [diffCheck](#diffcheck): A re-export of the [diffWords][jsd] function of the [jsdiff package][jsd] + +:::tip +#### Not FreeSewing code +This component family only contains re-exports of code by other maintainers.\ +Since they are a dependency, we provide them as part of the @freesewing/react package for convenience. + +Please refer to the documentation for [react-diff-viewer-continued][dv] and [jsdiff][jsd]. ::: + + + +[dv]: https://github.com/aeolun/react-diff-viewer-continued?tab=readme-ov-file#usage +[jsd]: https://github.com/kpdecker/jsdiff From f6f6419caea5ad5059963baaf950c5e70272adbb Mon Sep 17 00:00:00 2001 From: joostdecock Date: Sat, 10 May 2025 15:18:52 +0200 Subject: [PATCH 13/74] [react] feat: Added docs for components/Docusaurus --- .../react/components/Docusaurus/index.mjs | 45 ++++++++++++++++--- packages/react/mkdocs.sh | 1 + .../react/components/docusaurus/_examples.js | 29 ++++++++++++ .../react/components/docusaurus/readme.mdx | 34 ++++++++++++-- 4 files changed, 99 insertions(+), 10 deletions(-) create mode 100644 sites/dev/docs/reference/packages/react/components/docusaurus/_examples.js diff --git a/packages/react/components/Docusaurus/index.mjs b/packages/react/components/Docusaurus/index.mjs index 8dfd932d9f9..e20a1e571ee 100644 --- a/packages/react/components/Docusaurus/index.mjs +++ b/packages/react/components/Docusaurus/index.mjs @@ -16,16 +16,25 @@ import { } from '@freesewing/react/components/Icon' import { Layout as DefaultLayout } from '@freesewing/react/components/Layout' -/* - * This component should be the top level of a Docusaurus page +/** + * This component should be the top level of a Docusaurus page where you want access to context. * * This sets up the various context providers before * passing all props down to the InnerPageWrapper. * This is required because the context providers need to - * be setup for the modal and loading state work we do in the InnerPageWrapper - * + * be set up for the modal and loading state work. * We also re-use the Docusaurus Layout component here, which needs to be at - * the top level of the page + * the top level of the page. + * + * @component + * @param {object} props - All component props + * @param {React.Component} props.DocusaurusLayout - The docusaurus layout to apply + * @param {React.Component} props.Layout - The layout to apply inside docusaurus + * @param {JSX.Element} props.children - The component children + * @param {array} props.crumbs - The page breadcrumbs + * @param {string} props.description - The page description + * @param {string} props.title - The page title + * @returns {JSX.Element} */ export const DocusaurusPage = (props) => { const DocusaurusLayout = props.DocusaurusLayout @@ -42,14 +51,23 @@ export const DocusaurusPage = (props) => { ) } -/* +/** * This component should be the top level of any Docusaurus content that's not - * a full page where you want access to context (typically account pages and so on) + * a full page where you want access to context (typically account pages and so on). * * This sets up the various context providers before * passing all props down to the InnerPageWrapper. * This is required because the context providers need to * be setup for the modal and loading state work we do in the InnerPageWrapper + * + * @component + * @param {object} props - All component props + * @param {React.Component} props.Layout - The layout to apply inside docusaurus + * @param {JSX.Element} props.children - The component children + * @param {array} props.crumbs - The page breadcrumbs + * @param {string} props.description - The page description + * @param {string} props.title - The page title + * @returns {JSX.Element} */ export const DocusaurusDoc = (props) => ( @@ -94,6 +112,19 @@ const InnerDocusaurusPage = ({ ) } +/** + * A component to render (some) custom navbar items in Docusaurus + * + * This can be used to swizzle the default NavbarItem in Docusaurus. + * You should pass it in the default NavbarItem and it will use that + * for all but the following: account, designs, docs, blog, showcase, forum + * + * @component + * @param {object} props - All component props + * @param {string} props.id - The navbar item ID + * @param {React.Component} props.Default - The default NavbarItem component to use + * @returns {JSX.Element} + */ export const NavbarItem = (props) => { const { id, Default } = props diff --git a/packages/react/mkdocs.sh b/packages/react/mkdocs.sh index 02f4c9cc06d..d5089a8a14d 100755 --- a/packages/react/mkdocs.sh +++ b/packages/react/mkdocs.sh @@ -8,3 +8,4 @@ jsdoc -c jsdoc.json components/Button/* > ../../sites/dev/prebuild/jsdoc/react/c 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/CuratedSet/* > ../../sites/dev/prebuild/jsdoc/react/components/curatedset.json +jsdoc -c jsdoc.json components/Docusaurus/* > ../../sites/dev/prebuild/jsdoc/react/components/docusaurus.json diff --git a/sites/dev/docs/reference/packages/react/components/docusaurus/_examples.js b/sites/dev/docs/reference/packages/react/components/docusaurus/_examples.js new file mode 100644 index 00000000000..d006e1d497f --- /dev/null +++ b/sites/dev/docs/reference/packages/react/components/docusaurus/_examples.js @@ -0,0 +1,29 @@ +import React from 'react' +import { Popout } from '@freesewing/react/components/Popout' +import ComponentTypes from '@theme-original/NavbarItem/ComponentTypes' +import { NavbarItem as FreeSewingNavbarItem } from '@freesewing/react/components/Docusaurus' +import Link from '@docusaurus/Link' + +export const DocusaurusPageExample = () => ( + +

    This is not an example

    +

    We cannot safely include this example in a page. But the sign in page is an example where this component is used.

    +

    Essentially, use this if you want to use the components from @freesewing/react inside Docusaurus, and you do not want the standard docs layout (no sidebar). +

    +     +) + +export const DocusaurusDocExample = () => ( + + +) + +const NavbarItem = ComponentTypes.default +export const NavbarItemExample = () => ( + + <> + + + +) + diff --git a/sites/dev/docs/reference/packages/react/components/docusaurus/readme.mdx b/sites/dev/docs/reference/packages/react/components/docusaurus/readme.mdx index 995f3c7a23e..452dc35e598 100644 --- a/sites/dev/docs/reference/packages/react/components/docusaurus/readme.mdx +++ b/sites/dev/docs/reference/packages/react/components/docusaurus/readme.mdx @@ -2,6 +2,34 @@ title: Docusaurus --- -:::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 { + jsdocDocusaurusDoc, + jsdocDocusaurusPage, + jsdocNavbarItem, +} from '@site/prebuild/jsdoc/components.docusaurus.mjs' +import { + DocusaurusDocExample, + DocusaurusPageExample, + NavbarItemExample, +} from './_examples.js' + + + +The **Docusaurus** component family provides the following components: + +- [DocusaurusDoc](#docusaurusdoc) +- [DocusaurusPage](#docusauruspage) +- [NavbarItem](#navbaritem) + +## DocusaurusDoc + + +## DocusaurusPage + + +## NavbarItem + + + From 705884353487841a8d4ce5f146a60158368a1a94 Mon Sep 17 00:00:00 2001 From: joostdecock Date: Sat, 10 May 2025 15:35:34 +0200 Subject: [PATCH 14/74] [react] feat: Added docs for components/Echart --- packages/react/components/Echart/index.mjs | 19 ++++ packages/react/mkdocs.sh | 1 + .../react/components/echart/_examples.js | 103 ++++++++++++++++++ .../react/components/echart/readme.mdx | 31 +++++- 4 files changed, 152 insertions(+), 2 deletions(-) create mode 100644 sites/dev/docs/reference/packages/react/components/echart/_examples.js diff --git a/packages/react/components/Echart/index.mjs b/packages/react/components/Echart/index.mjs index 4c38b4d216a..66a5a8b9739 100644 --- a/packages/react/components/Echart/index.mjs +++ b/packages/react/components/Echart/index.mjs @@ -12,6 +12,25 @@ echarts.registerTheme('dark', { backgroundColor: 'transparent', }) +/** + * A component to provide Echart functionality. + * + * This is a wrapper around Apache Echarts. The option prop is for echarts. + * + * @component + * @param {object} props - All component props + * @param {object} [props.option = false] - The Echarts option object. This is + * marked as optional because this component will show a loading message when + * option is not an object. However, that is intended for use-cases where + * option relies on async code. This component is pointless if you do not + * (eventually) pass it an option prop. + * @param {string} [props.theme = 'light'] - The theme to use for echarts. Supports 'light' and 'dark'. + * @param {number} [props.h = 400] - The height of the chart, in pixels. Charts + * are rendered as SVG, we need to set a height because without a height, some + * browsers will not properly render the SVG element. This is an Echart + * limitation. + * @returns {JSX.Element} + */ export const ChartWrapper = ({ option = false, theme = 'light', h = 400 }) => { return option ? ( diff --git a/packages/react/mkdocs.sh b/packages/react/mkdocs.sh index d5089a8a14d..9c8c531afc6 100755 --- a/packages/react/mkdocs.sh +++ b/packages/react/mkdocs.sh @@ -9,3 +9,4 @@ jsdoc -c jsdoc.json components/Collection/* > ../../sites/dev/prebuild/jsdoc/rea jsdoc -c jsdoc.json components/Control/* > ../../sites/dev/prebuild/jsdoc/react/components/control.json jsdoc -c jsdoc.json components/CuratedSet/* > ../../sites/dev/prebuild/jsdoc/react/components/curatedset.json jsdoc -c jsdoc.json components/Docusaurus/* > ../../sites/dev/prebuild/jsdoc/react/components/docusaurus.json +jsdoc -c jsdoc.json components/Echart/* > ../../sites/dev/prebuild/jsdoc/react/components/echart.json diff --git a/sites/dev/docs/reference/packages/react/components/echart/_examples.js b/sites/dev/docs/reference/packages/react/components/echart/_examples.js new file mode 100644 index 00000000000..b16e5156695 --- /dev/null +++ b/sites/dev/docs/reference/packages/react/components/echart/_examples.js @@ -0,0 +1,103 @@ +import React from 'react' +import { ChartWrapper } from '@freesewing/react/components/Echart' + +// Taken from https://echarts.apache.org/examples/en/editor.html?c=area-stack +const option = { + title: { + text: 'Stacked Area Chart' + }, + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'cross', + label: { + backgroundColor: '#6a7985' + } + } + }, + legend: { + data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'] + }, + toolbox: { + feature: { + saveAsImage: {} + } + }, + grid: { + left: '3%', + right: '4%', + bottom: '3%', + containLabel: true + }, + xAxis: [ + { + type: 'category', + boundaryGap: false, + data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] + } + ], + yAxis: [ + { + type: 'value' + } + ], + series: [ + { + name: 'Email', + type: 'line', + stack: 'Total', + areaStyle: {}, + emphasis: { + focus: 'series' + }, + data: [120, 132, 101, 134, 90, 230, 210] + }, + { + name: 'Union Ads', + type: 'line', + stack: 'Total', + areaStyle: {}, + emphasis: { + focus: 'series' + }, + data: [220, 182, 191, 234, 290, 330, 310] + }, + { + name: 'Video Ads', + type: 'line', + stack: 'Total', + areaStyle: {}, + emphasis: { + focus: 'series' + }, + data: [150, 232, 201, 154, 190, 330, 410] + }, + { + name: 'Direct', + type: 'line', + stack: 'Total', + areaStyle: {}, + emphasis: { + focus: 'series' + }, + data: [320, 332, 301, 334, 390, 330, 320] + }, + { + name: 'Search Engine', + type: 'line', + stack: 'Total', + label: { + show: true, + position: 'top' + }, + areaStyle: {}, + emphasis: { + focus: 'series' + }, + data: [820, 932, 901, 934, 1290, 1330, 1320] + } + ] +} + +export const ChartWrapperExample = () => + diff --git a/sites/dev/docs/reference/packages/react/components/echart/readme.mdx b/sites/dev/docs/reference/packages/react/components/echart/readme.mdx index 9b5cfbc0434..22e9207f051 100644 --- a/sites/dev/docs/reference/packages/react/components/echart/readme.mdx +++ b/sites/dev/docs/reference/packages/react/components/echart/readme.mdx @@ -2,6 +2,33 @@ title: Echart --- -:::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 { jsdocChartWrapper } from '@site/prebuild/jsdoc/components.echart.mjs' +import { ChartWrapperExample } from './_examples.js' + + + +The **Echart** component family provides the following components: + +- [ChartWrapper](#chartwrapper) + +In addition, it also exports the following objects: + +- [echarts](#echarts) + +## EchartWrapper + + + +## echarts + +This is a re-export of [Apache Echarts](https://echarts.apache.org/). + +:::tip +#### Not FreeSewing code +We re-export echarts for convenience. +Please refer to the documentation for [Apache Echarts](https://echarts.apache.org/). ::: + + From f8a987e3d564c88b6af2343801936720fe475e11 Mon Sep 17 00:00:00 2001 From: joostdecock Date: Sat, 10 May 2025 15:47:00 +0200 Subject: [PATCH 15/74] [react] feat: Added docs for components/Editor --- .../Editor/components/menus/Container.mjs | 1 - packages/react/components/Editor/index.mjs | 18 +++++++++------- .../react/components/Editor/lib/editor.mjs | 21 +------------------ .../react/components/Editor/lib/index.mjs | 2 -- packages/react/mkdocs.sh | 1 + .../react/components/editor/readme.mdx | 18 +++++++++++++--- 6 files changed, 27 insertions(+), 34 deletions(-) diff --git a/packages/react/components/Editor/components/menus/Container.mjs b/packages/react/components/Editor/components/menus/Container.mjs index ddee87adacc..0c7d21f7b70 100644 --- a/packages/react/components/Editor/components/menus/Container.mjs +++ b/packages/react/components/Editor/components/menus/Container.mjs @@ -9,7 +9,6 @@ import { EditIcon, GroupIcon, OptionsIcon, ResetIcon } from '@freesewing/react/c import { FormControl } from '@freesewing/react/components/Input' import { MiniTip } from '@freesewing/react/components/Mini' -/** @type {String} class to apply to buttons on open menu items */ const iconButtonClass = 'tw:daisy-btn tw:daisy-btn-xs tw:daisy-btn-ghost tw:px-0 tw:text-accent' /** diff --git a/packages/react/components/Editor/index.mjs b/packages/react/components/Editor/index.mjs index f7029d2142f..9efc2c4d8c3 100644 --- a/packages/react/components/Editor/index.mjs +++ b/packages/react/components/Editor/index.mjs @@ -19,16 +19,18 @@ import { useAccount } from '../../hooks/useAccount/index.mjs' * FreeSewing's pattern editor * * Editor is the high-level FreeSewing component - * that provides the entire pattern editing environment + * that provides the entire pattern editing environment. * This is a high-level wrapper that figures out what view to load initially, - * and handles state for the pattern, including the view + * and handles state for the pattern, including the view. * + * @component * @param {object} props - All React props - * @param {object} props.config - A configuration object for the editor - * @param {object} props.design - A design name to force the editor to use this design - * @param {object} props.preload - Any state to preload - * @param {function} props.setTitle - A way to set the page title (optional) - * @param {object} props.localDesigns - A way to add local designs to the editor (optional) + * @param {object} [props.config = {}] - A configuration object for the editor + * @param {object} [props.design = false] - A design name to preset the editor to use this design + * @param {object} [props.preload = {}] - Any state to preload + * @param {function} [props.setTitle = false] - A way to set the page title + * @param {object} [props.localDesigns = {}] - A way to add local designs to the editor + * @param {function} [props.measurementsHelpProvider = false] - A function that should return to a URL for measurements help */ export const Editor = ({ config = {}, @@ -161,7 +163,7 @@ export const Editor = ({ ) } -/** +/* * Helper method to figure out what view to load * based on the props passed in, and destructure * the props we need for it. diff --git a/packages/react/components/Editor/lib/editor.mjs b/packages/react/components/Editor/lib/editor.mjs index 947cb8b8e10..85dd54ea40a 100644 --- a/packages/react/components/Editor/lib/editor.mjs +++ b/packages/react/components/Editor/lib/editor.mjs @@ -320,7 +320,7 @@ export function initialEditorState(preload = {}, config) { return initial } -/** +/* * round a value to the correct number of decimal places to display all supplied digits after multiplication * this is a workaround for floating point errors * examples: @@ -746,25 +746,6 @@ export function noop() { export function notEmpty(value) { return String(value).length > 0 } -/** - * Helper method to merge arrays of translation namespaces - * - * Note that this method is variadic - * - * @param {[string]} namespaces - A string or array of strings of namespaces - * @return {[string]} namespaces - A merged array of all namespaces - */ -export function nsMerge(...args) { - const ns = new Set() - for (const arg of args) { - if (typeof arg === 'string') ns.add(arg) - else if (Array.isArray(arg)) { - for (const el of nsMerge(...arg)) ns.add(el) - } - } - - return [...ns] -} /* * A translation fallback method in case none is passed in diff --git a/packages/react/components/Editor/lib/index.mjs b/packages/react/components/Editor/lib/index.mjs index 2258b5856c3..02bff627e84 100644 --- a/packages/react/components/Editor/lib/index.mjs +++ b/packages/react/components/Editor/lib/index.mjs @@ -28,7 +28,6 @@ import { menuValueWasChanged, noop, notEmpty, - nsMerge, objUpdate, sample, settingsValueIsCustom, @@ -91,7 +90,6 @@ export { menuValueWasChanged, noop, notEmpty, - nsMerge, objUpdate, sample, settingsValueIsCustom, diff --git a/packages/react/mkdocs.sh b/packages/react/mkdocs.sh index 9c8c531afc6..4f1e3e431c0 100755 --- a/packages/react/mkdocs.sh +++ b/packages/react/mkdocs.sh @@ -10,3 +10,4 @@ jsdoc -c jsdoc.json components/Control/* > ../../sites/dev/prebuild/jsdoc/react/ jsdoc -c jsdoc.json components/CuratedSet/* > ../../sites/dev/prebuild/jsdoc/react/components/curatedset.json jsdoc -c jsdoc.json components/Docusaurus/* > ../../sites/dev/prebuild/jsdoc/react/components/docusaurus.json jsdoc -c jsdoc.json components/Echart/* > ../../sites/dev/prebuild/jsdoc/react/components/echart.json +jsdoc -c jsdoc.json components/Editor/* > ../../sites/dev/prebuild/jsdoc/react/components/editor.json diff --git a/sites/dev/docs/reference/packages/react/components/editor/readme.mdx b/sites/dev/docs/reference/packages/react/components/editor/readme.mdx index 9c54f158219..9ff01e78407 100644 --- a/sites/dev/docs/reference/packages/react/components/editor/readme.mdx +++ b/sites/dev/docs/reference/packages/react/components/editor/readme.mdx @@ -2,6 +2,18 @@ title: Editor --- -:::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 { jsdocEditor } from '@site/prebuild/jsdoc/components.editor.mjs' +import { Editor } from '@freesewing/react/components/Editor' + + + +The **Editor** component family provides the following components: + +- [Editor](#editor) + +## Editor + + + From 1381af247559c6047d13936d0d717d845c948cc1 Mon Sep 17 00:00:00 2001 From: joostdecock Date: Sat, 10 May 2025 15:55:20 +0200 Subject: [PATCH 16/74] [react] feat: Added docs for components/Heading --- packages/react/components/Heading/index.mjs | 85 +++++++++++++++++++ packages/react/mkdocs.sh | 1 + .../react/components/heading/_examples.js | 17 ++++ .../react/components/heading/readme.mdx | 53 +++++++++++- 4 files changed, 153 insertions(+), 3 deletions(-) create mode 100644 sites/dev/docs/reference/packages/react/components/heading/_examples.js diff --git a/packages/react/components/Heading/index.mjs b/packages/react/components/Heading/index.mjs index 5d9e4a159bd..80eac07d0ff 100644 --- a/packages/react/components/Heading/index.mjs +++ b/packages/react/components/Heading/index.mjs @@ -1,37 +1,122 @@ import React from 'react' +/** + * A component to renderd a styled H1 tag. + * + * Because of the TailwindCSS reset, common tags are unstyled. + * When you need to render a H1 tag outside of a context where it is + * automatically styled (such as inside markdown) you can use this. + * Alternatively, you can wrap your content in div.prose which will apply the + * styles in CSS. + * + * @component + * @param {object} props - All component props + * @param {JSX.element} props.children - The component children + * @returns {JSX.Element} + */ export const H1 = ({ children }) => (

    {children}

    ) +/** + * A component to renderd a styled H2 tag. + * + * Because of the TailwindCSS reset, common tags are unstyled. + * When you need to render a H2 tag outside of a context where it is + * automatically styled (such as inside markdown) you can use this. + * Alternatively, you can wrap your content in div.prose which will apply the + * styles in CSS. + * + * @component + * @param {object} props - All component props + * @param {JSX.element} props.children - The component children + * @returns {JSX.Element} + */ export const H2 = ({ children }) => (

    {children}

    ) +/** + * A component to renderd a styled H3 tag. + * + * Because of the TailwindCSS reset, common tags are unstyled. + * When you need to render a H3 tag outside of a context where it is + * automatically styled (such as inside markdown) you can use this. + * Alternatively, you can wrap your content in div.prose which will apply the + * styles in CSS. + * + * @component + * @param {object} props - All component props + * @param {JSX.element} props.children - The component children + * @returns {JSX.Element} + */ export const H3 = ({ children }) => (

    {children}

    ) +/** + * A component to renderd a styled H4 tag. + * + * Because of the TailwindCSS reset, common tags are unstyled. + * When you need to render a H4 tag outside of a context where it is + * automatically styled (such as inside markdown) you can use this. + * Alternatively, you can wrap your content in div.prose which will apply the + * styles in CSS. + * + * @component + * @param {object} props - All component props + * @param {JSX.element} props.children - The component children + * @returns {JSX.Element} + */ export const H4 = ({ children }) => (

    {children}

    ) +/** + * A component to renderd a styled H5 tag. + * + * Because of the TailwindCSS reset, common tags are unstyled. + * When you need to render a H5 tag outside of a context where it is + * automatically styled (such as inside markdown) you can use this. + * Alternatively, you can wrap your content in div.prose which will apply the + * styles in CSS. + * + * @component + * @param {object} props - All component props + * @param {JSX.element} props.children - The component children + * @returns {JSX.Element} + */ export const H5 = ({ children }) => (
    {children}
    ) +/** + * A component to renderd a styled H6 tag. + * + * Because of the TailwindCSS reset, common tags are unstyled. + * When you need to render a H6 tag outside of a context where it is + * automatically styled (such as inside markdown) you can use this. + * Alternatively, you can wrap your content in div.prose which will apply the + * styles in CSS. + * + * @component + * @param {object} props - All component props + * @param {JSX.element} props.children - The component children + * @returns {JSX.Element} + */ export const H6 = ({ children }) => (
    {children}
    ) + diff --git a/packages/react/mkdocs.sh b/packages/react/mkdocs.sh index 4f1e3e431c0..5417b2685f8 100755 --- a/packages/react/mkdocs.sh +++ b/packages/react/mkdocs.sh @@ -11,3 +11,4 @@ jsdoc -c jsdoc.json components/CuratedSet/* > ../../sites/dev/prebuild/jsdoc/rea jsdoc -c jsdoc.json components/Docusaurus/* > ../../sites/dev/prebuild/jsdoc/react/components/docusaurus.json jsdoc -c jsdoc.json components/Echart/* > ../../sites/dev/prebuild/jsdoc/react/components/echart.json jsdoc -c jsdoc.json components/Editor/* > ../../sites/dev/prebuild/jsdoc/react/components/editor.json +jsdoc -c jsdoc.json components/Heading/* > ../../sites/dev/prebuild/jsdoc/react/components/heading.json diff --git a/sites/dev/docs/reference/packages/react/components/heading/_examples.js b/sites/dev/docs/reference/packages/react/components/heading/_examples.js new file mode 100644 index 00000000000..90a684c5d8a --- /dev/null +++ b/sites/dev/docs/reference/packages/react/components/heading/_examples.js @@ -0,0 +1,17 @@ +import React from 'react' +import { + H1, + H2, + H3, + H4, + H5, + H6, +} from '@freesewing/react/components/Heading' + +export const H1Example = () =>

    This is H1

    +export const H2Example = () =>

    This is H2

    +export const H3Example = () =>

    This is H3

    +export const H4Example = () =>

    This is H4

    +export const H5Example = () =>
    This is H5
    +export const H6Example = () =>
    This is H6
    + diff --git a/sites/dev/docs/reference/packages/react/components/heading/readme.mdx b/sites/dev/docs/reference/packages/react/components/heading/readme.mdx index 30b79fe345c..10b819bdc54 100644 --- a/sites/dev/docs/reference/packages/react/components/heading/readme.mdx +++ b/sites/dev/docs/reference/packages/react/components/heading/readme.mdx @@ -2,6 +2,53 @@ title: Heading --- -:::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 { + jsdocH1, + jsdocH2, + jsdocH3, + jsdocH4, + jsdocH5, + jsdocH6, +} from '@site/prebuild/jsdoc/components.heading.mjs' +import { + H1Example, + H2Example, + H3Example, + H4Example, + H5Example, + H6Example, +} from './_examples.js' + + + +The **Button** component family provides the following components: + +- [H1](#h1) +- [H2](#h2) +- [H3](#h3) +- [H4](#h4) +- [H5](#h5) +- [H6](#h6) + +## H1 + + +## H2 + + +## H3 + + +## H4 + + +## H5 + + +## H6 + + + + From 05ea157ef9344c132ff83e3b9bc8c9ae2e20f838 Mon Sep 17 00:00:00 2001 From: joostdecock Date: Sat, 10 May 2025 16:00:03 +0200 Subject: [PATCH 17/74] [react] fix: Pre-create output folder. Closes #343 --- packages/react/mkdocs.sh | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/mkdocs.sh b/packages/react/mkdocs.sh index 5417b2685f8..dcca979189d 100755 --- a/packages/react/mkdocs.sh +++ b/packages/react/mkdocs.sh @@ -1,5 +1,5 @@ #!/bin/bash -mkdir -p ./docs/components +mkdir -p ../../sites/dev/prebuild/jsdoc/react/components jsdoc -c jsdoc.json components/Account/* > ../../sites/dev/prebuild/jsdoc/react/components/account.json jsdoc -c jsdoc.json components/Admin/* > ../../sites/dev/prebuild/jsdoc/react/components/admin.json From 32d08c923c8f3d32085eb0dd93ccab738581d15d Mon Sep 17 00:00:00 2001 From: joostdecock Date: Sat, 10 May 2025 16:21:24 +0200 Subject: [PATCH 18/74] [react] feat: Added docs for components/Highlight --- packages/react/components/Highlight/index.mjs | 18 ++++++++++------- packages/react/mkdocs.sh | 1 + .../react/components/highlight/_examples.js | 11 ++++++++++ .../react/components/highlight/readme.mdx | 20 ++++++++++++++++--- 4 files changed, 40 insertions(+), 10 deletions(-) create mode 100644 sites/dev/docs/reference/packages/react/components/highlight/_examples.js diff --git a/packages/react/components/Highlight/index.mjs b/packages/react/components/Highlight/index.mjs index ea15919c5cf..8a820a9d281 100644 --- a/packages/react/components/Highlight/index.mjs +++ b/packages/react/components/Highlight/index.mjs @@ -12,13 +12,17 @@ const defaultTitles = { /** * A React component to highlight code * - * @params {object} props - All React props - * @params {string} language - The language to highlight - * @params {object} children - The React children - * @params {bool} raw - Set this to true to not escape tags - * @params {string} title - Title for the highlight - * @params {string} copy - Content to copy to clipboard - * @params {bool} noCopy - Do not add copy to clipboard + * @component + * @param {object} props - All React props + * @param {string} [props.language = 'txt'] - The language to highlight + * @param {JSX.Element} props.children - The React children (this is the code to highlight) + * @param {bool} [props.raw = false] - Set this to true to not escape tags + * @param {string} [props.title = false] - Title for the highlight. When + * language is js, bash, sh, json, or yaml the title will be set accordingly + * (but you can still pass in a custom one) + * @param {string} [props.copy = props.children] - Content for the copy to clipboard button, by default this will use props.children + * @param {bool} [props.noCopy = false] - Set this to true to not add the copy to clipboard button + * @returns {JSX.Element} */ export const Highlight = ({ language = 'txt', diff --git a/packages/react/mkdocs.sh b/packages/react/mkdocs.sh index dcca979189d..e892c49456e 100755 --- a/packages/react/mkdocs.sh +++ b/packages/react/mkdocs.sh @@ -12,3 +12,4 @@ jsdoc -c jsdoc.json components/Docusaurus/* > ../../sites/dev/prebuild/jsdoc/rea jsdoc -c jsdoc.json components/Echart/* > ../../sites/dev/prebuild/jsdoc/react/components/echart.json jsdoc -c jsdoc.json components/Editor/* > ../../sites/dev/prebuild/jsdoc/react/components/editor.json jsdoc -c jsdoc.json components/Heading/* > ../../sites/dev/prebuild/jsdoc/react/components/heading.json +jsdoc -c jsdoc.json components/Highlight/* > ../../sites/dev/prebuild/jsdoc/react/components/highlight.json diff --git a/sites/dev/docs/reference/packages/react/components/highlight/_examples.js b/sites/dev/docs/reference/packages/react/components/highlight/_examples.js new file mode 100644 index 00000000000..ca85a078418 --- /dev/null +++ b/sites/dev/docs/reference/packages/react/components/highlight/_examples.js @@ -0,0 +1,11 @@ +import React from 'react' +import { Highlight } from '@freesewing/react/components/Highlight' + +export const HighlightExample = () => ( + {[ + `import { Highlight } from '@freesewing/react/components/Highlight'`, + ``, + `This is an example`, + ].join("\n")} +) + diff --git a/sites/dev/docs/reference/packages/react/components/highlight/readme.mdx b/sites/dev/docs/reference/packages/react/components/highlight/readme.mdx index 357cbdff35f..e086cd9bf7e 100644 --- a/sites/dev/docs/reference/packages/react/components/highlight/readme.mdx +++ b/sites/dev/docs/reference/packages/react/components/highlight/readme.mdx @@ -2,6 +2,20 @@ title: Highlight --- -:::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 { jsdocHighlight } from '@site/prebuild/jsdoc/components.highlight.mjs' +import { HighlightExample } from './_examples.js' + + + +The **Highlight** component family provides the following components: + +- [Highlight](#highlight) + +## Highlight + + + + + From ffa122e5242819f7e47c6d40a9627ba525ed8859 Mon Sep 17 00:00:00 2001 From: joostdecock Date: Sun, 11 May 2025 13:43:27 +0200 Subject: [PATCH 19/74] [react] feat: Added docs for components/Icon --- packages/react/components/Icon/index.mjs | 1521 +++++++++++++++-- packages/react/mkdocs.sh | 1 + .../packages/react/components/icon/readme.mdx | 658 ++++++- sites/dev/src/components/component-docs.js | 2 +- 4 files changed, 2051 insertions(+), 131 deletions(-) diff --git a/packages/react/components/Icon/index.mjs b/packages/react/components/Icon/index.mjs index 5ac9753c75e..906ad28cfc6 100644 --- a/packages/react/components/Icon/index.mjs +++ b/packages/react/components/Icon/index.mjs @@ -5,8 +5,20 @@ import { logoPath } from '@freesewing/config' const page = 'M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z' -/* - * Used inside the pattern editor +/** + * A component to wrap SVG elements as an icon. + * + * This wraps all icons we provide. The viewBox is 0 0 24 24 so this is for 24x24 icons. + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} */ export const IconWrapper = ({ className = 'tw:w-6 tw:h-6', @@ -16,87 +28,205 @@ export const IconWrapper = ({ fillOpacity = 1, dasharray = null, wrapped = true, -}) => - wrapped ? ( - - {children} - - ) : ( - <> {children} - ) +}) => ( + + {children} + +) -// Looks like a play triangle +/** + * An SVG icon that looks like a play triangle + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const ApplyIcon = (props) => ( ) -// Looks like a two-column layout +/** + * An SVG icon that looks like a two-column layout + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const AsideIcon = (props) => ( ) -// Looks like a lab beaker +/** + * An SVG icon that looks like a lab beaker + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const BeakerIcon = (props) => ( ) -// Looks like a left U-turn that we slightly rotate +/** + * An SVG icon that looks like a left U-turn that we slightly rotate + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const BackIcon = (props) => ( ) -// Looks like a red X +/** + * An SVG icon that looks like a red X + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const BoolNoIcon = ({ size = 6 }) => ( ) -// Looks like a green checkbox +/** + * An SVG icon that looks like a green checkbox + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const BoolYesIcon = ({ size = 6 }) => ( ) -// Looks like a bookmark +/** + * An SVG icon that looks like a bookmark + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const BookmarkIcon = (props) => ( ) -// Looks like a circle +/** + * An SVG icon that looks like a circle + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const BulletIcon = (props) => ( ) -// Looks lik a speech bubble +/** + * An SVG icon that looks lik a speech bubble + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const ChatIcon = (props) => ( ) -// Looks like a circle +/** + * An SVG icon that looks like a circle + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @param {string} [props.label = undefined] - An optional label to put inside the circle + * @returns {JSX.Element} + */ export const CircleIcon = (props) => ( @@ -108,63 +238,171 @@ export const CircleIcon = (props) => ( ) -// Looks like a female-projecting bathing suit +/** + * An SVG icon that looks like a female-projecting bathing suit + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const CisFemaleIcon = (props) => ( ) -// Looks like male-projecting swim trunks +/** + * An SVG icon that looks like male-projecting swim trunks + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const CisMaleIcon = (props) => ( ) -// FIXME +/** + * An SVG icon that look like FIXME + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const CloneIcon = (props) => ( ) -// Looks like a X +/** + * An SVG icon that looks like an X character + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const CloseIcon = (props) => ( ) -// Looks like coding brackets +/** + * An SVG icon that looks like coding brackets + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const CodeIcon = (props) => ( ) -// FIXME +/** + * An SVG icon that looks like FIXME + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const CompareIcon = (props) => ( ) -// Looks like scales of justice +/** + * An SVG icon that looks like scales of justice + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const ControlIcon = (props) => ( ) -// Looks like two rounded squares above each other with a bit of offset +/** + * An SVG icon that looks like two rounded squares above each other with a bit of offset + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const CopyIcon = (props) => ( ) -// Looks like a page with a smiley on it +/** + * An SVG icon that looks like a page with a smiley on it + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const CoverPageIcon = (props) => ( @@ -174,35 +412,95 @@ export const CoverPageIcon = (props) => ( ) -// Looks like a museum building +/** + * An SVG icon that looks like a museum building + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const CuratedMeasurementsSetIcon = (props) => ( ) -// Looks like a coathanger +/** + * An SVG icon that looks like a coathanger + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const DesignIcon = (props) => ( ) -// Looks like a left and right pane with different level of detail +/** + * An SVG icon that looks like a left and right pane with different level of detail + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const DetailIcon = (props) => ( ) -// Looks like a document icon +/** + * An SVG icon that looks like a document icon + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const DocsIcon = (props) => ( ) -// Looks like a down pointing chevron +/** + * An SVG icon that looks like a down pointing chevron + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const DownIcon = (props) => ( ( ) -// Looks like a cloud with an arrow pointing down from it +/** + * An SVG icon that looks like a cloud with an arrow pointing down from it + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const DownloadIcon = (props) => ( ) -// Looks like a pencil +/** + * An SVG icon that looks like a pencil + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const EditIcon = (props) => ( ) -// Looks like an envelope +/** + * An SVG icon that looks like an envelope + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const EmailIcon = (props) => ( ) -// Looks like FIXME +/** + * An SVG icon that looks like FIXME + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const ErrorIcon = (props) => ( ) -// Looks like arrows pointing outwards +/** + * An SVG icon that looks like arrows pointing outwards + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const ExpandIcon = (props) => ( ) -// Looks like a file/sheet with an arrow pointing downwards +/** + * An SVG icon that looks like a file/sheet with an arrow pointing downwards + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const ExportIcon = (props) => ( ) -// Looks like a ! in a triangle, is intended to be shown on an error background +/** + * An SVG icon that looks like a ! in a triangle. + * + * This is a specifically styled NoIcon, intended to be shown on an error + * background. + * + * @component + * @param {object} props - All component props + * @param {number} [props.size = 6] - The size (a valid TailwindCSS size number) + * @returns {JSX.Element} + */ export const FailureIcon = ({ size = 6 }) => ( ) -// Looks like a funnel +/** + * An SVG icon that looks like a funnel + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const FilterIcon = (props) => ( ) -// Looks like a fingerprint +/** + * An SVG icon that looks like a fingerprint + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const FingerprintIcon = (props) => ( ) -// Looks lik an exclamation point inside a circle +/** + * An SVG icon that looks lik an exclamation point inside a circle + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const FixmeIcon = (props) => ( ) -// Looks lik a flag +/** + * An SVG icon that looks lik a flag + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const FlagIcon = (props) => ( ) -// Looks lik a flag +/** + * An SVG icon that looks lik a FIXME + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const FlipIcon = (props) => ( ) -// Looks like skully +/** + * An SVG icon that looks like (or is) skully + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const FreeSewingIcon = (props) => ( ) -// Looks like a gauge or speedometer +/** + * An SVG icon that looks like a gauge or speedometer + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const GaugeIcon = (props) => ( @@ -311,42 +775,114 @@ export const GaugeIcon = (props) => ( ) -// Looks like the octocat +/** + * An SVG icon that looks like the octocat + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const GitHubIcon = (props) => ( ) -// Looks like the Google G +/** + * An SVG icon that looks like the Google G + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const GoogleIcon = (props) => ( ) -// Looks like abox +/** + * An SVG icon that looks like a box + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const GroupIcon = (props) => ( ) -// Looks like a heart +/** + * An SVG icon that looks like a heart + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const HeartIcon = (props) => ( ) -// Looks like a question mark in a circle +/** + * An SVG icon that looks like a question mark in a circle + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const HelpIcon = (props) => ( ) -// Looks like a pie with a slice a bit out of it +/** + * An SVG icon that looks like a pie with a slice a bit out of it + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const IncludeIcon = (props) => ( @@ -354,133 +890,361 @@ export const IncludeIcon = (props) => ( ) -// Looks like the Instagram logo +/** + * An SVG icon that looks like the Instagram logo + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const InstagramIcon = (props) => ( ) -// Looks like a key +/** + * An SVG icon that looks like a key + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const KeyIcon = (props) => ( ) -// Looks like a rectangle with rounded corners (like a full screen display) +/** + * An SVG icon that looks like a rectangle with rounded corners (like a full screen display) + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const KioskIcon = (props) => ( ) -// Looks like a left pointing chevron +/** + * An SVG icon that looks like a left pointing chevron + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const LeftIcon = (props) => ( ) -// Looks like a chain link +/** + * An SVG icon that looks like a chain link + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const LinkIcon = (props) => ( ) -// Looks like a bullet list +/** + * An SVG icon that looks like a bullet list + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const ListIcon = (props) => ( ) -// Looks like a padlock +/** + * An SVG icon that looks like a padlock + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const LockIcon = (props) => ( ) -// Looks like 4 boxes spaces out +/** + * An SVG icon that looks like 4 boxes spaces out + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const MarginIcon = (props) => ( ) -// Looks like the Mastodon logo +/** + * An SVG icon that looks like the Mastodon logo + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const MastodonIcon = (props) => ( ) -// Looks like a tape measure +/** + * An SVG icon that looks like a tape measure + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const MeasurementsIcon = (props) => ( ) -// Looks like two people's heads next/behinf to each other, one bigger, one smaller +/** + * An SVG icon that looks like two people's heads next/behind to each other, one bigger, one smaller + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const MeasurementsSetIcon = (props) => ( ) -// Looks like 3 horizontal lines (hamburger menu) +/** + * An SVG icon that looks like 3 horizontal lines (hamburger menu) + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const MenuIcon = (props) => ( ) -// Looks like a person icon with a + sign +/** + * An SVG icon that looks like a person icon with a + sign + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const NewMeasurementsSetIcon = (props) => ( ) -// Looks like page with a + sign in it +/** + * An SVG icon that looks like page with a + sign in it + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const NewPatternIcon = (props) => ( ) -// Looks like a newspaper +/** + * An SVG icon that looks like a newspaper + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const NewsletterIcon = (props) => ( ) -// Looks like a X +/** + * An SVG icon that looks like the X character + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const NoIcon = (props) => ( ) -// Looks like a checkmark +/** + * An SVG icon that looks like a checkmark + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const OkIcon = (props) => ( ) -// Looks like sliders on a mixing panel +/** + * An SVG icon that looks like sliders on a mixing panel + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const OptionsIcon = (props) => ( ) -// Looks like a page with a margin drawn around +/** + * An SVG icon that looks like a page with a margin drawn around + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const PageMarginIcon = (props) => ( ( ) -// Looks like a portrait and landscape page stacked +/** + * An SVG icon that looks like a portrait and landscape page stacked + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const PageOrientationIcon = (props) => ( @@ -502,7 +1278,19 @@ export const PageOrientationIcon = (props) => ( ) -// Looks like two differently sizes pages stacked +/** + * An SVG icon that looks like two differently sizes pages stacked + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const PageSizeIcon = (props) => ( @@ -510,7 +1298,19 @@ export const PageSizeIcon = (props) => ( ) -// Looks like a grid +/** + * An SVG icon that looks like a grid + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const PaperlessIcon = (props) => ( @@ -521,77 +1321,209 @@ export const PaperlessIcon = (props) => ( ) -// Looks like a page +/** + * An SVG icon that looks like a page + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const PatternIcon = (props) => ( ) -// Looks like a + +/** + * An SVG icon that looks like a + + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const PlusIcon = (props) => ( ) -// Looks like a printer +/** + * An SVG icon that looks like a printer + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const PrintIcon = (props) => ( ) -// FIXME +/** + * An SVG icon that looks like FIXME + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const PrivacyIcon = (props) => ( ) -// Looks like the Reddit alian +/** + * An SVG icon that looks like the Reddit alian + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const RedditIcon = (props) => ( ) -// FIXME +/** + * An SVG icon that looks like FIXME + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const ReloadIcon = (props) => ( ) -// Looks like a backspace key +/** + * An SVG icon that looks like a backspace key + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const ResetIcon = (props) => ( ) -// Looks like a double rewind arrow +/** + * An SVG icon that looks like a double rewind arrow + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const ResetAllIcon = (props) => ( ) -// Looks like a right pointing chevron +/** + * An SVG icon that looks like a right pointing chevron + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const RightIcon = (props) => ( ) -// Looks like a rocket +/** + * An SVG icon that looks like a rocket + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const RocketIcon = (props) => ( ) -// Looks like two arrows in a circular layout +/** + * An SVG icon that looks like two arrows in a circular layout + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const RotateIcon = (props) => ( ( ) -// Looks like the RSS symbol +/** + * An SVG icon that looks like the RSS symbol + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const RssIcon = (props) => ( ) -// Looks like a cloud with a plus sign in it +/** + * An SVG icon that looks like a cloud with a plus sign in it + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const SaveIcon = (props) => ( ) -// Looks like a cloud with a plus sign in it +/** + * An SVG icon that looks like a cloud with a plus sign in it + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const SaveAsIcon = (props) => ( ) -// Looks like a small solid circle with a larger dashed circle around it +/** + * An SVG icon that looks like a small solid circle with a larger dashed circle around it + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const SaIcon = (props) => ( @@ -632,7 +1612,19 @@ export const SaIcon = (props) => ( ) -// Looks like lines of varying thickness +/** + * An SVG icon that looks like lines of varying thickness + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const ScaleIcon = (props) => ( @@ -641,14 +1633,38 @@ export const ScaleIcon = (props) => ( ) -// Looks like a magnifying glass +/** + * An SVG icon that looks like a magnifying glass + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const SearchIcon = (props) => ( ) -// Looks like a gear +/** + * An SVG icon that looks like a gear/cog + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const SettingsIcon = (props) => ( @@ -656,14 +1672,38 @@ export const SettingsIcon = (props) => ( ) -// Looks like a shield +/** + * An SVG icon that looks like a shield + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const ShieldIcon = (props) => ( ) -// Looks like a picture camera +/** + * An SVG icon that looks like a picture camera + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const ShowcaseIcon = (props) => ( @@ -671,14 +1711,38 @@ export const ShowcaseIcon = (props) => ( ) -// Looks like an exit door +/** + * An SVG icon that looks like an exit door + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const SignoutIcon = (props) => ( ) -// Looks like a spinning circle +/** + * An SVG icon that looks like a spinning circle + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const SpinnerIcon = (props) => ( ( ) -// Looks like a white checkbox, intended to be shown on a success-colored background +/** + * An SVG icon that looks like a white checkbox. + * + * This is a specifically styled OkIcon, intended to be shown on a success-colored background + * + * @component + * @param {object} props - All component props + * @param {number} [props.size = 6] - The size (a valid TailwindCSS size number) + * @returns {JSX.Element} + */ export const SuccessIcon = ({ size = 6 }) => ( ) -// Looks like the TikTok t +/** + * An SVG icon that looks like the TikTok t + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const TikTokIcon = (props) => ( ) -// Looks like a light bulb +/** + * An SVG icon that looks like a light bulb + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const TipIcon = (props) => ( ) -// Looks like a trashcan +/** + * An SVG icon that looks like a trashcan + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const TrashIcon = (props) => ( ) -// Looks like the twitch logo +/** + * An SVG icon that looks like the twitch logo + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const TwitchIcon = (props) => ( ) -// Looks like a desktop screen +/** + * An SVG icon that looks like a desktop screen + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const UiIcon = (props) => ( ) -// Looks like a rewind arrow, but takes text to go inside it +/** + * An SVG icon that looks like a rewind arrow, but takes text to go inside it + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const UndoIcon = (props) => ( @@ -763,7 +1908,19 @@ export const UndoIcon = (props) => ( ) -// Looks like a bit of measuring tape +/** + * An SVG icon that looks like a bit of measuring tape + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const UnitsIcon = (props) => ( @@ -774,7 +1931,19 @@ export const UnitsIcon = (props) => ( ) -// Looks like an up pointing chevron +/** + * An SVG icon that looks like an up pointing chevron + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const UpIcon = (props) => ( ( /> ) -// Looks like a cloud with an arrow pointing upwards in it + +/** + * An SVG icon that looks like a cloud with an arrow pointing upwards in it + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const UploadIcon = (props) => ( ) -// Looks like a person's face +/** + * An SVG icon that looks like a person's face + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const UserIcon = (props) => ( ) -// Looks like old-timey scales +/** + * An SVG icon that looks like old-timey scales + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const UxIcon = (props) => ( ) -// Looks like an ! in a triangle +/** + * An SVG icon that looks like an ! in a triangle + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const WarningIcon = (props) => ( ) -// Looks like a wrench +/** + * An SVG icon that looks like a wrench/spanner + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const WrenchIcon = (props) => ( ) -// Looks like a box in dashed lines +/** + * An SVG icon that looks like a box in dashed lines + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const XrayIcon = (props) => ( ) -// Looks like a magnifying glas with a + inside +/** + * An SVG icon that looks like a magnifying glas with a + inside + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const ZoomInIcon = (props) => ( ) -// Looks like a magnifying glas with a + inside +/** + * An SVG icon that looks like a magnifying glas with a - inside + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.className = 'tw:m-6 tw:h-6'] - The CSS classes to apply to the SVG element + * @param {number} [props.stroke = 2] - The stroke width + * @param {JSX.Element} props.children - The component childer, the inner content of the SVG tag + * @param {boolean} [props.fill = false] - Whether or not to fill the icon + * @param {number} [props.fillOpacity = 1] - The fillOpacity to apply + * @param {string} [props.dashArray = null] - An optional stroke dashArray to apply to the stroke + * @returns {JSX.Element} + */ export const ZoomOutIcon = (props) => ( ) + diff --git a/packages/react/mkdocs.sh b/packages/react/mkdocs.sh index e892c49456e..3fd34b05c51 100755 --- a/packages/react/mkdocs.sh +++ b/packages/react/mkdocs.sh @@ -13,3 +13,4 @@ jsdoc -c jsdoc.json components/Echart/* > ../../sites/dev/prebuild/jsdoc/react/c jsdoc -c jsdoc.json components/Editor/* > ../../sites/dev/prebuild/jsdoc/react/components/editor.json jsdoc -c jsdoc.json components/Heading/* > ../../sites/dev/prebuild/jsdoc/react/components/heading.json jsdoc -c jsdoc.json components/Highlight/* > ../../sites/dev/prebuild/jsdoc/react/components/highlight.json +jsdoc -c jsdoc.json components/Icon/* > ../../sites/dev/prebuild/jsdoc/react/components/icon.json diff --git a/sites/dev/docs/reference/packages/react/components/icon/readme.mdx b/sites/dev/docs/reference/packages/react/components/icon/readme.mdx index 705a97ba855..0b45e4926d7 100644 --- a/sites/dev/docs/reference/packages/react/components/icon/readme.mdx +++ b/sites/dev/docs/reference/packages/react/components/icon/readme.mdx @@ -2,6 +2,658 @@ title: Icon --- -:::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 * as jsdoc from '@site/prebuild/jsdoc/components.icon.mjs' +import { + ApplyIcon, + AsideIcon, + BackIcon, + BeakerIcon, + BookmarkIcon, + BoolNoIcon, + BoolYesIcon, + BulletIcon, + ChatIcon, + CircleIcon, + CisFemaleIcon, + CisMaleIcon, + CloneIcon, + CloseIcon, + CodeIcon, + CompareIcon, + ControlIcon, + CopyIcon, + CoverPageIcon, + CuratedMeasurementsSetIcon, + DesignIcon, + DetailIcon, + DocsIcon, + DownIcon, + DownloadIcon, + EditIcon, + EmailIcon, + ErrorIcon, + ExpandIcon, + ExportIcon, + FailureIcon, + FilterIcon, + FingerprintIcon, + FixmeIcon, + FlagIcon, + FlipIcon, + FreeSewingIcon, + GaugeIcon, + GitHubIcon, + GoogleIcon, + GroupIcon, + HeartIcon, + HelpIcon, + IconWrapper, + IncludeIcon, + InstagramIcon, + KeyIcon, + KioskIcon, + LeftIcon, + LinkIcon, + ListIcon, + LockIcon, + MarginIcon, + MastodonIcon, + MeasurementsIcon, + MeasurementsSetIcon, + MenuIcon, + NewMeasurementsSetIcon, + NewPatternIcon, + NewsletterIcon, + NoIcon, + OkIcon, + OptionsIcon, + PageMarginIcon, + PageOrientationIcon, + PageSizeIcon, + PaperlessIcon, + PatternIcon, + PlusIcon, + PrintIcon, + PrivacyIcon, + RedditIcon, + ReloadIcon, + ResetAllIcon, + ResetIcon, + RightIcon, + RocketIcon, + RotateIcon, + RssIcon, + SaIcon, + SaveAsIcon, + SaveIcon, + ScaleIcon, + SearchIcon, + SettingsIcon, + ShieldIcon, + ShowcaseIcon, + SignoutIcon, + SpinnerIcon, + SuccessIcon, + TikTokIcon, + TipIcon, + TrashIcon, + TwitchIcon, + UiIcon, + UndoIcon, + UnitsIcon, + UpIcon, + UploadIcon, + UserIcon, + UxIcon, + WarningIcon, + WrenchIcon, + XrayIcon, + ZoomInIcon, + ZoomOutIcon, +} from '@freesewing/react/components/Icon' + + + +The __Icon__ component family provides the following components: + +- [ApplyIcon](#applyicon) +- [AsideIcon](#asideicon) +- [BackIcon](#backicon) +- [BeakerIcon](#beakericon) +- [BookmarkIcon](#bookmarkicon) +- [BoolNoIcon](#boolnoicon) +- [BoolYesIcon](#boolyesicon) +- [BulletIcon](#bulleticon) +- [ChatIcon](#chaticon) +- [CircleIcon](#circleicon) +- [CisFemaleIcon](#cisfemaleicon) +- [CisMaleIcon](#cismaleicon) +- [CloneIcon](#cloneicon) +- [CloseIcon](#closeicon) +- [CodeIcon](#codeicon) +- [CompareIcon](#compareicon) +- [ControlIcon](#controlicon) +- [CopyIcon](#copyicon) +- [CoverPageIcon](#coverpageicon) +- [CuratedMeasurementsSetIcon](#curatedmeasurementsseticon) +- [DesignIcon](#designicon) +- [DetailIcon](#detailicon) +- [DocsIcon](#docsicon) +- [DownIcon](#downicon) +- [DownloadIcon](#downloadicon) +- [EditIcon](#editicon) +- [EmailIcon](#emailicon) +- [ErrorIcon](#erroricon) +- [ExpandIcon](#expandicon) +- [ExportIcon](#exporticon) +- [FailureIcon](#failureicon) +- [FilterIcon](#filtericon) +- [FingerprintIcon](#fingerprinticon) +- [FixmeIcon](#fixmeicon) +- [FlagIcon](#flagicon) +- [FlipIcon](#flipicon) +- [FreeSewingIcon](#freesewingicon) +- [GaugeIcon](#gaugeicon) +- [GitHubIcon](#githubicon) +- [GoogleIcon](#googleicon) +- [GroupIcon](#groupicon) +- [HeartIcon](#hearticon) +- [HelpIcon](#helpicon) +- [IconWrapper](#iconwrapper) +- [IncludeIcon](#includeicon) +- [InstagramIcon](#instagramicon) +- [KeyIcon](#keyicon) +- [KioskIcon](#kioskicon) +- [LeftIcon](#lefticon) +- [LinkIcon](#linkicon) +- [ListIcon](#listicon) +- [LockIcon](#lockicon) +- [MarginIcon](#marginicon) +- [MastodonIcon](#mastodonicon) +- [MeasurementsIcon](#measurementsicon) +- [MeasurementsSetIcon](#measurementsseticon) +- [MenuIcon](#menuicon) +- [NewMeasurementsSetIcon](#newmeasurementsseticon) +- [NewPatternIcon](#newpatternicon) +- [NewsletterIcon](#newslettericon) +- [NoIcon](#noicon) +- [OkIcon](#okicon) +- [OptionsIcon](#optionsicon) +- [PageMarginIcon](#pagemarginicon) +- [PageOrientationIcon](#pageorientationicon) +- [PageSizeIcon](#pagesizeicon) +- [PaperlessIcon](#paperlessicon) +- [PatternIcon](#patternicon) +- [PlusIcon](#plusicon) +- [PrintIcon](#printicon) +- [PrivacyIcon](#privacyicon) +- [RedditIcon](#redditicon) +- [ReloadIcon](#reloadicon) +- [ResetAllIcon](#resetallicon) +- [ResetIcon](#reseticon) +- [RightIcon](#righticon) +- [RocketIcon](#rocketicon) +- [RotateIcon](#rotateicon) +- [RssIcon](#rssicon) +- [SaIcon](#saicon) +- [SaveAsIcon](#saveasicon) +- [SaveIcon](#saveicon) +- [ScaleIcon](#scaleicon) +- [SearchIcon](#searchicon) +- [SettingsIcon](#settingsicon) +- [ShieldIcon](#shieldicon) +- [ShowcaseIcon](#showcaseicon) +- [SignoutIcon](#signouticon) +- [SpinnerIcon](#spinnericon) +- [SuccessIcon](#successicon) +- [TikTokIcon](#tiktokicon) +- [TipIcon](#tipicon) +- [TrashIcon](#trashicon) +- [TwitchIcon](#twitchicon) +- [UiIcon](#uiicon) +- [UndoIcon](#undoicon) +- [UnitsIcon](#unitsicon) +- [UpIcon](#upicon) +- [UploadIcon](#uploadicon) +- [UserIcon](#usericon) +- [UxIcon](#uxicon) +- [WarningIcon](#warningicon) +- [WrenchIcon](#wrenchicon) +- [XrayIcon](#xrayicon) +- [ZoomInIcon](#zoominicon) +- [ZoomOutIcon](#zoomouticon) + +#### Visual Overview + +To make it easier to pick an Icon, here is a visual overview: + +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + +## ApplyIcon + + +## AsideIcon + + +## BackIcon + + +## BeakerIcon + + +## BookmarkIcon + + +## BoolNoIcon + + +## BoolYesIcon + + +## BulletIcon + + +## ChatIcon + + +## CircleIcon + + +## CisFemaleIcon + + +## CisMaleIcon + + +## CloneIcon + + +## CloseIcon + + +## CodeIcon + + +## CompareIcon + + +## ControlIcon + + +## CopyIcon + + +## CoverPageIcon + + +## CuratedMeasurementsSetIcon + + +## DesignIcon + + +## DetailIcon + + +## DocsIcon + + +## DownIcon + + +## DownloadIcon + + +## EditIcon + + +## EmailIcon + + +## ErrorIcon + + +## ExpandIcon + + +## ExportIcon + + +## FailureIcon + + +## FilterIcon + + +## FingerprintIcon + + +## FixmeIcon + + +## FlagIcon + + +## FlipIcon + + +## FreeSewingIcon + + +## GaugeIcon + + +## GitHubIcon + + +## GoogleIcon + + +## GroupIcon + + +## HeartIcon + + +## HelpIcon + + +## IconWrapper + + +## IncludeIcon + + +## InstagramIcon + + +## KeyIcon + + +## KioskIcon + + +## LeftIcon + + +## LinkIcon + + +## ListIcon + + +## LockIcon + + +## MarginIcon + + +## MastodonIcon + + +## MeasurementsIcon + + +## MeasurementsSetIcon + + +## MenuIcon + + +## NewMeasurementsSetIcon + + +## NewPatternIcon + + +## NewsletterIcon + + +## NoIcon + + +## OkIcon + + +## OptionsIcon + + +## PageMarginIcon + + +## PageOrientationIcon + + +## PageSizeIcon + + +## PaperlessIcon + + +## PatternIcon + + +## PlusIcon + + +## PrintIcon + + +## PrivacyIcon + + +## RedditIcon + + +## ReloadIcon + + +## ResetAllIcon + + +## ResetIcon + + +## RightIcon + + +## RocketIcon + + +## RotateIcon + + +## RssIcon + + +## SaIcon + + +## SaveAsIcon + + +## SaveIcon + + +## ScaleIcon + + +## SearchIcon + + +## SettingsIcon + + +## ShieldIcon + + +## ShowcaseIcon + + +## SignoutIcon + + +## SpinnerIcon + + +## SuccessIcon + + +## TikTokIcon + + +## TipIcon + + +## TrashIcon + + +## TwitchIcon + + +## UiIcon + + +## UndoIcon + + +## UnitsIcon + + +## UpIcon + + +## UploadIcon + + +## UserIcon + + +## UxIcon + + +## WarningIcon + + +## WrenchIcon + + +## XrayIcon + + +## ZoomInIcon + + +## ZoomOutIcon + + +     diff --git a/sites/dev/src/components/component-docs.js b/sites/dev/src/components/component-docs.js index 00512c6cdd3..c9146c716d2 100644 --- a/sites/dev/src/components/component-docs.js +++ b/sites/dev/src/components/component-docs.js @@ -41,7 +41,7 @@ export const ComponentDocs = ({ docs, example }) => { > on{' '} - line + line{' '} {docs.line} {' '} in {docs.file} From 612af4081bba23c9fcc2f0796dd521108c86a6f7 Mon Sep 17 00:00:00 2001 From: joostdecock Date: Sun, 11 May 2025 17:55:53 +0200 Subject: [PATCH 20/74] [react] feat: Added docs for components/Input --- packages/react/components/Account/Apikeys.mjs | 6 +- .../Editor/components/menus/Container.mjs | 6 +- packages/react/components/Input/index.mjs | 841 ++++++++++++------ packages/react/mkdocs.sh | 1 + sites/backend/src/models/flow.mjs | 2 +- .../react/components/input/_examples.js | 152 ++++ .../react/components/input/readme.mdx | 112 ++- 7 files changed, 829 insertions(+), 291 deletions(-) create mode 100644 sites/dev/docs/reference/packages/react/components/input/_examples.js diff --git a/packages/react/components/Account/Apikeys.mjs b/packages/react/components/Account/Apikeys.mjs index 1c1471f261a..77a16f6c87c 100644 --- a/packages/react/components/Account/Apikeys.mjs +++ b/packages/react/components/Account/Apikeys.mjs @@ -27,7 +27,7 @@ import { Uuid } from '@freesewing/react/components/Uuid' import { Popout } from '@freesewing/react/components/Popout' import { ModalWrapper } from '@freesewing/react/components/Modal' import { NumberCircle } from '@freesewing/react/components/Number' -import { StringInput, FormControl, ListInput } from '@freesewing/react/components/Input' +import { StringInput, Fieldset, ListInput } from '@freesewing/react/components/Input' import { DisplayRow } from './shared.mjs' import { CopyToClipboardButton } from '@freesewing/react/components/Button' import { TimeAgo, TimeToGo } from '@freesewing/react/components/Time' @@ -333,7 +333,7 @@ const ExpiryPicker = ({ expires, setExpires }) => { return (
    - } @@ -346,7 +346,7 @@ const ExpiryPicker = ({ expires, setExpires }) => { className="tw:daisy-range tw:daisy-range-secondary tw:w-full" onChange={update} /> - +
    ) } diff --git a/packages/react/components/Editor/components/menus/Container.mjs b/packages/react/components/Editor/components/menus/Container.mjs index 0c7d21f7b70..4a03caa24f2 100644 --- a/packages/react/components/Editor/components/menus/Container.mjs +++ b/packages/react/components/Editor/components/menus/Container.mjs @@ -6,7 +6,7 @@ import React, { useState, useMemo } from 'react' // Components import { SubAccordion } from '../Accordion.mjs' import { EditIcon, GroupIcon, OptionsIcon, ResetIcon } from '@freesewing/react/components/Icon' -import { FormControl } from '@freesewing/react/components/Input' +import { Fieldset } from '@freesewing/react/components/Input' import { MiniTip } from '@freesewing/react/components/Mini' const iconButtonClass = 'tw:daisy-btn tw:daisy-btn-xs tw:daisy-btn-ghost tw:px-0 tw:text-accent' @@ -105,7 +105,7 @@ export const MenuItem = ({ return ( <> - {buttons}
    } @@ -118,7 +118,7 @@ export const MenuItem = ({ } > - + {config.about ? {config.about} : null} ) diff --git a/packages/react/components/Input/index.mjs b/packages/react/components/Input/index.mjs index b9fbcb83c34..1e322413967 100644 --- a/packages/react/components/Input/index.mjs +++ b/packages/react/components/Input/index.mjs @@ -1,9 +1,11 @@ // Dependencies import { + capitalize, cloudflareImageUrl, measurementAsMm, measurementAsUnits, distanceAsMm, + validateEmail, } from '@freesewing/utils' import { collection } from '@freesewing/collection' import { measurements as measurementsTranslations } from '@freesewing/i18n' @@ -23,24 +25,6 @@ import { Tabs, Tab } from '@freesewing/react/components/Tab' import Markdown from 'react-markdown' /* - * Helper component to display a tab heading - */ -export const _Tab = ({ - id, // The tab ID - label, // A label for the tab, if not set we'll use the ID - activeTab, // Which tab (id) is active - setActiveTab, // Method to set the active tab -}) => ( - -) - -/** * A helper component to render the help link in formcontrol * * @param {string|function| help - The help href of onClick method @@ -66,84 +50,75 @@ const HelpLink = ({ help, Link = false }) => { return null } -/* - * Helper component to wrap a form control with a label +/** + * A component for a fieldset, which wraps form elements and providers labels. + * + * @component + * @param {object} props - All component props + * @param {React.Component} [props.Link = undefined] - A framework specific Link component for client-side routing + * @param {boolean} [props.box = undefined] - Set this to true to render a boxed fieldset + * @param {JSX.Element} props.children - The component children + * @param {string} [props.label = false] - The (top-left) label + * @param {string} [props.labelBL = false] - The bottom-left) label + * @param {string} [props.labelBR = false] - The bottom-right) label + * @param {string} [props.labelTR = false] - The top-right label + * @param {string} [props.legend = false] - The fieldset legend + * @param {string} [props.forId = ''] - Id of the HTML element we are wrapping + * @param {string|function} [props.help = false] - An optional URL/method to link/show help or docs + * @returns {JSX.Element} */ -export const FormControl = ({ - label, // the (top-left) label - children, // Children to go inside the form control - labelTR = false, // Optional top-right label - labelBL = false, // Optional bottom-left label - labelBR = false, // Optional bottom-right label - forId = false, // ID of the for element we are wrapping - help = false, // An optional URL/method to link/show help/docs - Link = false, // An optional framework-specific link components -}) => { - if (labelBR && !labelBL) labelBL = - - const topLabelChildren = ( - <> - {label ? ( - - {label} - - ) : ( - - - - )} - {labelTR ? {labelTR} : null} - - ) - const bottomLabelChildren = ( -
    - {labelBL ? {labelBL} : null} - {labelBR ? {labelBR} : null} -
    - ) - - return ( -
    - {forId ? ( - - ) : label ? ( -
    {topLabelChildren}
    - ) : null} - {children} - {labelBL || labelBR ? ( - forId ? ( - - ) : ( -
    {bottomLabelChildren}
    - ) - ) : null} -
    - ) -} - -/* - * Helper method to wrap content in a button - */ -export const ButtonFrame = ({ - children, // Children of the button - onClick, // onClick handler - active, // Whether or not to render the button as active/selected - accordion = false, // Set this to true to not set a background color when active - dense = false, // Use less padding +export const Fieldset = ({ + Link=false, + box=false, + children, + label=false, + labelBL=false, + labelBR=false, + labelTR=false, + legend=false, + forId='', + help=false, }) => ( +
    + {legend ? ( + + {legend} + + ) : null} +
    + {label ? : null } + {labelTR ? : null } +
    + {children} +
    + {labelBL ? : null } + {labelBR ? : null } +
    +
    +) + +/** + * A component to wrap content in a button + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.active = false] - Set this to true to render the button as active/selected + * @param {JSX.Element} props.children - The component children + * @param {boolean} [props.dense = false] - Set this to render a more compact variant + * @param {boolean} [props.noBg = false] - Set this to true to not use a background color in active state + * @param {function} props.onClick - The button's onClick handler + * @returns {JSX.Element} + */ +export const ButtonFrame = ({ active, children, dense, noBg, onClick }) => ( ) -/* - * Input for integers +/** + * A component to handle input of numbers + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.box = false] - Set this to true to render a boxed fieldset + * @param {number} props.current - The current value, to manage the state of this input + * @param {string|function} [props.help = false] - An optional URL/method to link/show help or docs + * @param {string} [props.inputMode = 'decimal'] - The inputMode of the input + * @param {string} [props.label = false] - The (top-left) label + * @param {string} [props.labelBL = false] - The bottom-left) label + * @param {string} [props.labelBR = false] - The bottom-right) label + * @param {string} [props.labelTR = false] - The top-right label + * @param {string} [props.id = ''] - Id of the HTML element to link the fieldset labels + * @param {string} [props.legend = false] - The fieldset legend + * @param {number} [props.max = 225] - The maximum value + * @param {number} [props.min = 0] - The minimum value + * @param {number} props.original - The original value, which detects whether it was changed + * @param {string} props.placeholder - The placeholder text + * @param {number} [props.step = 1] - The input step + * @param {function} props.update - The onChange handler + * @param {function} props.valid - A function that should return whether the value is valid or not + * @returns {JSX.Element} */ export const NumberInput = ({ - label, // Label to use - update, // onChange handler - valid, // Method that should return whether the value is valid or not - current, // The current value - original, // The original value - placeholder, // The placeholder text - id = '', // An id to tie the input to the label - labelBL = false, // Bottom-Left label - labelBR = false, // Bottom-Right label - max = 0, - min = 220, + box = false, + current, + help=false, + inputMode = 'decimal', + label = false, + labelBL = false, + labelBR = false, + labelTR = false, + id = '', + legend = false, + max = 225, + min = 0, + original, + placeholder, step = 1, + update, + valid, }) => ( - +
    update(evt.target.value)} @@ -185,24 +186,45 @@ export const NumberInput = ({ }`} {...{ max, min, step }} /> - +
    ) -/* - * Input for strings +/** + * A component to handle input of strings (single-line text) + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.box = false] - Set this to true to render a boxed fieldset + * @param {number} props.current - The current value, to manage the state of this input + * @param {string|function} [props.help = false] - An optional URL/method to link/show help or docs + * @param {string} [props.label = false] - The (top-left) label + * @param {string} [props.labelBL = false] - The bottom-left) label + * @param {string} [props.labelBR = false] - The bottom-right) label + * @param {string} [props.labelTR = false] - The top-right label + * @param {string} [props.id = ''] - Id of the HTML element to link the fieldset labels + * @param {string} [props.legend = false] - The fieldset legend + * @param {number} props.original - The original value, which detects whether it was changed + * @param {string} props.placeholder - The placeholder text + * @param {function} props.update - The onChange handler + * @param {function} [props.valid = () => true] - A function that should return whether the value is valid or not + * @returns {JSX.Element} */ export const StringInput = ({ - label, // Label to use - update, // onChange handler - valid, // Method that should return whether the value is valid or not - current, // The current value - original, // The original value - placeholder, // The placeholder text - id = '', // An id to tie the input to the label - labelBL = false, // Bottom-Left label - labelBR = false, // Bottom-Right label + box = false, + current, + help=false, + label = false, + labelBL = false, + labelBR = false, + labelTR = false, + id = '', + legend = false, + original, + placeholder, + update, + valid = () => true, }) => ( - +
    - +
    ) -/* - * Input for MFA code +/** + * A component to handle input of MFA codes. Essentially a NumberInput with some default props set. + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.box = false] - Set this to true to render a boxed fieldset + * @param {number} props.current - The current value, to manage the state of this input + * @param {string|function} [props.help = false] - An optional URL/method to link/show help or docs + * @param {string} [props.label = false] - The (top-left) label + * @param {string} [props.labelBL = false] - The bottom-left) label + * @param {string} [props.labelBR = false] - The bottom-right) label + * @param {string} [props.labelTR = false] - The top-right label + * @param {string} [props.id = 'mfa'] - Id of the HTML element to link the fieldset labels + * @param {string} [props.inputMode = 'numeric'] - The input mode of the input + * @param {string} [props.legend = false] - The fieldset legend + * @param {string} [props.placeholder = 'MFA Code'] - The placeholder text + * @param {function} props.update - The onChange handler + * @param {function} props.valid - A function that should return whether the value is valid or not + * @returns {JSX.Element} */ export const MfaInput = ({ - update, // onChange handler - current, // The current value - id = 'mfa', // An id to tie the input to the label -}) => { - return ( - val.length > 4} - {...{ update, current, id }} - placeholder="MFA Code" - /> - ) -} + box = false, + current, + help=false, + label = false, + labelBL = false, + labelBR = false, + labelTR = false, + id = 'mfa', + inputMode = 'numeric', + legend = false, + placeholder="MFA Code", + update, + valid = (val) => val.length > 4, +}) => ( + +) -/* - * Input for passwords +/** + * A component to handle input of passwords + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.box = false] - Set this to true to render a boxed fieldset + * @param {number} props.current - The current value, to manage the state of this input + * @param {string|function} [props.help = false] - An optional URL/method to link/show help or docs + * @param {string} [props.label = false] - The (top-left) label + * @param {string} [props.labelBL = false] - The bottom-left) label + * @param {string} [props.labelTR = false] - The top-right label + * @param {string} [props.id = 'password'] - Id of the HTML element to link the fieldset labels + * @param {string} [props.legend = false] - The fieldset legend + * @param {string} [placeholder = '¯\\_(ツ)_/¯' - The placeholder text + * @param {function} props.update - The onChange handler + * @param {function} [props.valid = () => true] - A function that should return whether the value is valid or not + * @param {function} [props.onKeyDown = false] - An optional handler to capture keypresses (like enter) + * @returns {JSX.Element} */ export const PasswordInput = ({ - label, // Label to use - update, // onChange handler - valid, // Method that should return whether the value is valid or not - current, // The current value - placeholder = '¯\\_(ツ)_/¯', // The placeholder text - id = '', // An id to tie the input to the label - onKeyDown = false, // Optionall capture certain keys (like enter) + box = false, + current, + help=false, + label = false, + labelBL = false, + labelTR = false, + id = 'password', + legend = false, + placeholder = '¯\\_(ツ)_/¯', + update, + valid = () => true, + onKeyDown = false, }) => { const [reveal, setReveal] = useState(false) const extraProps = onKeyDown ? { onKeyDown } : {} return ( - setReveal(!reveal)} > {reveal ? 'Hide Password' : 'Reveal Password'} @@ -278,26 +344,46 @@ export const PasswordInput = ({ }`} {...extraProps} /> - + ) } -/* - * Input for email addresses +/** + * A component to handle input of email addresses + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.box = false] - Set this to true to render a boxed fieldset + * @param {number} props.current - The current value, to manage the state of this input + * @param {string|function} [props.help = false] - An optional URL/method to link/show help or docs + * @param {string} [props.id = ''] - Id of the HTML element to link the fieldset labels + * @param {string} [props.label = false] - The (top-left) label + * @param {string} [props.labelBL = false] - The bottom-left) label + * @param {string} [props.labelBR = false] - The bottom-right) label + * @param {string} [props.labelTR = false] - The top-right label + * @param {string} [props.legend = false] - The fieldset legend + * @param {number} [props.original = ''] - The original value, which detects whether it was changed + * @param {string} [props.placeholder = 'Email Address'] - The placeholder text + * @param {function} props.update - The onChange handler + * @param {function} [props.valid = @freesewing/utils.validateEmail] - A function that should return whether the value is valid or not + * @returns {JSX.Element} */ export const EmailInput = ({ - label, // Label to use - update, // onChange handler - valid, // Method that should return whether the value is valid or not - current, // The current value - original, // The original value - placeholder, // The placeholder text - id = '', // An id to tie the input to the label - labelTR = false, // Top-Right label - labelBL = false, // Bottom-Left label - labelBR = false, // Bottom-Right label + box = false, + current, + help = false, + id = 'email', + label = false, + labelBL = false, + labelBR = false, + labelTR = false, + legend = false, + original = '', + update, + placeholder = 'Email Address', + valid = validateEmail, }) => ( - +
    - +
    ) -/* - * Input for designs +/** + * A component to handle input of a design name (a select) + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.box = false] - Set this to true to render a boxed fieldset + * @param {number} props.current - The current value, to manage the state of this input + * @param {string} [props.firstOption = false] - An optional first option to add to the select + * @param {string|function} [props.help = false] - An optional URL/method to link/show help or docs + * @param {string} [props.id = 'design'] - Id of the HTML element to link the fieldset labels + * @param {string} [props.label = false] - The (top-left) label + * @param {string} [props.labelBL = false] - The bottom-left) label + * @param {string} [props.labelBR = false] - The bottom-right) label + * @param {string} [props.labelTR = false] - The top-right label + * @param {string} [props.legend = false] - The fieldset legend + * @param {function} props.update - The onChange handler + * @returns {JSX.Element} */ export const DesignInput = ({ - label, // Label to use - update, // onChange handler - current, // The current value - firstOption = null, // Any first option to add in addition to designs - id = '', // An id to tie the input to the label -}) => { - return ( - - - - ) -} + box = false, + current, + firstOption = false, + help = false, + id = 'design', + label = false, + labelBL = false, + labelBR = false, + labelTR = false, + legend = false, + update, +}) => ( +
    + +
    +) -/* - * Input for an image +/** + * A component to handle input of an image + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.active = false] - Set this to true to automatically upload the image + * @param {boolean} [props.box = false] - Set this to true to render a boxed fieldset + * @param {number} props.current - The current value, to manage the state of this input + * @param {string|function} [props.help = false] - An optional URL/method to link/show help or docs + * @param {string} [props.id = 'image'] - Id of the HTML element to link the fieldset labels + * @param {string} [props.imgType = 'showcase'] - The type of image. One of 'showcase' or 'blog' + * @param {string} props.imgSlug - The slug of the image, which is the foldername holding the blog or showcase post + * @param {string} props.imgSubid - Set this id to upload non-main images, should be unique per post (1,2,3,...) + * @param {string} [props.label = false] - The (top-left) label + * @param {string} [props.labelBL = false] - The bottom-left) label + * @param {string} [props.labelBR = false] - The bottom-right) label + * @param {string} [props.labelTR = false] - The top-right label + * @param {string} [props.legend = false] - The fieldset legend + * @param {number} props.original - The original value, which allows a reset + * @param {function} props.update - The onChange handler + * @returns {JSX.Element} */ export const ImageInput = ({ - label, // The label - update, // The onChange handler - current, // The current value - original, // The original value - active = false, // Whether or not to upload images - imgType = 'showcase', // The image type - imgSubid, // The image sub-id - imgSlug, // The image slug or other unique identifier to use in the image ID - id = '', // An id to tie the input to the label + active = false, + box = false, + current, + help = false, + id = 'image', + imgSlug, + imgSubid, + imgType = 'showcase', + label = false, + labelBL = false, + labelBR = false, + labelTR = false, + legend = false, + update, + original, }) => { const backend = useBackend() const { setLoadingStatus } = useContext(LoadingStatusContext) @@ -372,11 +502,11 @@ export const ImageInput = ({ } if (fromUrl) data.url = img else data.img = img - const result = await backend.uploadAnonImage(data) + const [status, body] = await backend.uploadImageAnon(data) setLoadingStatus([true, 'allDone', true, true]) - if (result.success) { - update(result.data.imgId) - setUploadedId(result.data.imgId) + if (status === 200 && body.result === 'success') { + update(body.imgId) + setUploadedId(body.imgId) } else setLoadingStatus([true, 'backendError', true, false]) } @@ -396,7 +526,7 @@ export const ImageInput = ({ if (current) return ( - +
    - +
    ) return ( - +
    )}
    - +
    ) } -/* - * Input for an image that is active (it does upload the image) +/** + * A component to handle input of an image and upload it (active) + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.box = false] - Set this to true to render a boxed fieldset + * @param {number} props.current - The current value, to manage the state of this input + * @param {string|function} [props.help = false] - An optional URL/method to link/show help or docs + * @param {string} [props.id = 'image'] - Id of the HTML element to link the fieldset labels + * @param {string} [props.imgType = 'showcase'] - The type of image. One of 'showcase' or 'blog' + * @param {string} props.imgSlug - The slug of the image, which is the foldername holding the blog or showcase post + * @param {string} props.imgSubid - Set this id to upload non-main images, should be unique per post (1,2,3,...) + * @param {string} [props.label = false] - The (top-left) label + * @param {string} [props.labelBL = false] - The bottom-left) label + * @param {string} [props.labelBR = false] - The bottom-right) label + * @param {string} [props.labelTR = false] - The top-right label + * @param {string} [props.legend = false] - The fieldset legend + * @param {number} props.original - The original value, which allows a reset + * @param {function} props.update - The onChange handler + * @returns {JSX.Element} */ export const ActiveImageInput = (props) => -/* - * Input for an image that is passive (it does not upload the image) +/** + * A component to handle input of an image and not upload it (inactive) + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.box = false] - Set this to true to render a boxed fieldset + * @param {number} props.current - The current value, to manage the state of this input + * @param {string|function} [props.help = false] - An optional URL/method to link/show help or docs + * @param {string} [props.id = 'image'] - Id of the HTML element to link the fieldset labels + * @param {string} [props.imgType = 'showcase'] - The type of image. One of 'showcase' or 'blog' + * @param {string} props.imgSlug - The slug of the image, which is the foldername holding the blog or showcase post + * @param {string} props.imgSubid - Set this id to upload non-main images, should be unique per post (1,2,3,...) + * @param {string} [props.label = false] - The (top-left) label + * @param {string} [props.labelBL = false] - The bottom-left) label + * @param {string} [props.labelBR = false] - The bottom-right) label + * @param {string} [props.labelTR = false] - The top-right label + * @param {string} [props.legend = false] - The fieldset legend + * @param {number} props.original - The original value, which allows a reset + * @param {function} props.update - The onChange handler + * @returns {JSX.Element} */ export const PassiveImageInput = (props) => -/* - * Input for a list of things to pick from +/** + * A component to handle input of list of items to pick from + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.box = false] - Set this to true to render a boxed fieldset + * @param {number} props.current - The current value, to manage the state of this input + * @param {string|function} [props.help = false] - An optional URL/method to link/show help or docs + * @param {string} [props.id = ''] - Id of the HTML element to link the fieldset labels + * @param {string} [props.label = false] - The (top-left) label + * @param {string} [props.labelBL = false] - The bottom-left) label + * @param {string} [props.labelBR = false] - The bottom-right) label + * @param {string} [props.labelTR = false] - The top-right label + * @param {string} [props.legend = false] - The fieldset legend + * @param {array} props.list - An array of { val, label, desc } objects to populate the list + * @param {function} props.update - The onChange handler + * @returns {JSX.Element} */ export const ListInput = ({ - update, // the onChange handler - label, // The label - list, // The list of items to present { val, label, desc } - current, // The (value of the) current item + box = false, + current, + help = false, + id = '', + label = false, + labelBL = false, + labelBR = false, + labelTR = false, + legend = false, + list, + update, }) => ( - +
    {list.map((item, i) => ( update(item.val)}>
    @@ -492,26 +680,41 @@ export const ListInput = ({
    ))} - +
    ) -/* - * Input for markdown content +/** + * A component to handle input of markdown content + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.box = false] - Set this to true to render a boxed fieldset + * @param {number} props.current - The current value, to manage the state of this input + * @param {string|function} [props.help = false] - An optional URL/method to link/show help or docs + * @param {string} [props.id = ''] - Id of the HTML element to link the fieldset labels + * @param {string} [props.label = false] - The (top-left) label + * @param {string} [props.labelBL = 'This field supports markdown'] - The bottom-left) label + * @param {string} [props.labelBR = false] - The bottom-right) label + * @param {string} [props.labelTR = false] - The top-right label + * @param {string} [props.legend = false] - The fieldset legend + * @param {function} props.update - The onChange handler + * @param {string} [props.placeholder = ''] - The placeholder text + * @returns {JSX.Element} */ export const MarkdownInput = ({ - label, // The label - current, // The current value (markdown) - update, // The onChange handler - placeholder, // The placeholder content - id = '', // An id to tie the input to the label - labelBL = false, // Bottom-Left label - labelBR = false, // Bottom-Right label + box = false, + current, + help = false, + id = '', + label = false, + labelBL = 'This field supports markdown', + labelBR = false, + labelTR = false, + legend = false, + update, + placeholder='', }) => ( - +
    @@ -531,17 +734,41 @@ export const MarkdownInput = ({
    - +
    ) +/** + * A component to handle input of markdown content + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.box = false] - Set this to true to render a boxed fieldset + * @param {number} props.current - The current value, to manage the state of this input + * @param {string|function} [props.props.help = false] - An optional URL/method to link/show help or docs + * @param {string} [props.id = ''] - Id of the HTML element to link the fieldset labels + * @param {boolean} [props.imperial = false] - Set this to true to render imperial units + * @param {string} [props.labelBR = false] - The bottom-right) label + * @param {string} [props.labelTR = false] - The top-right label + * @param {string} [props.legend = false] - The fieldset legend + * @param {string} props.m - The measurement ID (name) + * @param {function} props.update - The onChange handler + * @param {number} props.original - The original value, which allows a reset + * @param {string} [props.placeholder = ''] - The placeholder text + * @returns {JSX.Element} + */ export const MeasurementInput = ({ - imperial, // True for imperial, False for metric - m, // The measurement name - original, // The original value - update, // The onChange handler - placeholder, // The placeholder content - id = '', // An id to tie the input to the label - helpProvider = false, // a function that provides a url or an action to display help for a measurement + box = false, + current, + help = false, + id = '', + imperial = false, + labelBR = false, + labelTR = false, + legend = false, + m, + update, + original, + placeholder='', }) => { const isDegree = isDegreeMeasurement(m) const units = imperial ? 'imperial' : 'metric' @@ -602,14 +829,14 @@ export const MeasurementInput = ({ * See: https://github.com/facebook/react/issues/16554 */ return ( - - + ) } +/** + * A component to handle input of file (upload) + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.box = false] - Set this to true to render a boxed fieldset + * @param {number} props.current - The current value, to manage the state of this input + * @param {number} [props.dropzoneConfig = {}] - The configuration for react-dropzone + * @param {string|function} [props.props.help = false] - An optional URL/method to link/show help or docs + * @param {string} [props.id = ''] - Id of the HTML element to link the fieldset labels + * @param {string} [props.label = false] - The label + * @param {string} [props.labelBL = false] - The bottom-left) label + * @param {string} [props.labelBR = false] - The bottom-right) label + * @param {string} [props.labelTR = false] - The top-right label + * @param {string} [props.legend = false] - The fieldset legend + * @param {function} props.update - The onChange handler + * @param {number} props.original - The original value, which allows a reset + * @param {function} [props.valid = () => true] - A function that should return whether the value is valid or not + * @returns {JSX.Element} + */ export const FileInput = ({ - label, // The label - valid = () => true, // Method that should return whether the value is valid or not - update, // The onChange handler - current, // The current value - original, // The original value - id = '', // An id to tie the input to the label - dropzoneConfig = {}, // Configuration for react-dropzone + box = false, + current, + dropzoneConfig = {}, + help = false, + id = '', + label = false, + labelBL = false, + labelBR = false, + labelTR = false, + legend = false, + update, + original, + valid = () => true, }) => { /* * Ondrop handler @@ -663,7 +916,7 @@ export const FileInput = ({ */ if (current) return ( - +
    - +
    ) /* * Return upload form */ return ( - +
    - +
    ) } /* * Input for booleans */ +/** + * A component to handle input of booleans (yes/no or on/off) + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.box = false] - Set this to true to render a boxed fieldset + * @param {number} props.current - The current value, to manage the state of this input + * @param {boolean} [props.disabled = false] - Set this to true to render a disabled input + * @param {string|function} [props.help = false] - An optional URL/method to link/show help or docs + * @param {string} [props.id = ''] - Id of the HTML element to link the fieldset labels + * @param {string} [props.label = false] - The label + * @param {string} [props.labelBL = false] - The bottom-left) label + * @param {string} [props.labelBR = false] - The bottom-right) label + * @param {string} [props.labelTR = false] - The top-right label + * @param {array} [props.labels = ['Yes', 'No'] - An array of labels for the values + * @param {string} [props.legend = false] - The fieldset legend + * @param {array} [props.list = [true, false] - An array of values to choose between + * @param {function} props.update - The onChange handler + * @param {any} [props.on = true] - The value that should show the toggle in the 'on' state + * @param {number} props.original - The original value, which allows a reset + * @param {function} [props.valid = () => true] - A function that should return whether the value is valid or not + * @returns {JSX.Element} + */ export const ToggleInput = ({ - label, // Label to use - update, // onChange handler - current, // The current value - disabled = false, // Allows rendering a disabled view - list = [true, false], // The values to chose between - labels = ['Yes', 'No'], // The labels for the values - on = true, // The value that should show the toggle in the 'on' state - id = '', // An id to tie the input to the label - labelTR = false, // Top-Right label - labelBL = false, // Bottom-Left label - labelBR = false, // Bottom-Right label + box = false, + current, + disabled = false, + help = false, + id = '', + label = false, + labelBL = false, + labelBR = false, + labelTR = false, + labels = ['Yes', 'No'], + legend = false, + list = [true, false], + update, + on = true, + original, + valid = () => true, }) => ( - + + } + + ) diff --git a/packages/react/mkdocs.sh b/packages/react/mkdocs.sh index 3fd34b05c51..ebda60e8f09 100755 --- a/packages/react/mkdocs.sh +++ b/packages/react/mkdocs.sh @@ -14,3 +14,4 @@ jsdoc -c jsdoc.json components/Editor/* > ../../sites/dev/prebuild/jsdoc/react/c jsdoc -c jsdoc.json components/Heading/* > ../../sites/dev/prebuild/jsdoc/react/components/heading.json jsdoc -c jsdoc.json components/Highlight/* > ../../sites/dev/prebuild/jsdoc/react/components/highlight.json jsdoc -c jsdoc.json components/Icon/* > ../../sites/dev/prebuild/jsdoc/react/components/icon.json +jsdoc -c jsdoc.json components/Input/* > ../../sites/dev/prebuild/jsdoc/react/components/input.json diff --git a/sites/backend/src/models/flow.mjs b/sites/backend/src/models/flow.mjs index 791f5f501b6..229df00fdbf 100644 --- a/sites/backend/src/models/flow.mjs +++ b/sites/backend/src/models/flow.mjs @@ -150,7 +150,7 @@ FlowModel.prototype.uploadImage = async function ({ body, user }, anon = false) * Is type set and valid? */ if (!body.type) return this.setResponse(400, 'typeMissing') - if (!['blog', 'showcase', 'support'].includes(body.type)) + if (!['blog', 'showcase'].includes(body.type)) return this.setResponse(400, 'typeInvalid') /* diff --git a/sites/dev/docs/reference/packages/react/components/input/_examples.js b/sites/dev/docs/reference/packages/react/components/input/_examples.js new file mode 100644 index 00000000000..b7ec202dd57 --- /dev/null +++ b/sites/dev/docs/reference/packages/react/components/input/_examples.js @@ -0,0 +1,152 @@ +import React, { useState } from 'react' +import { validateEmail } from '@freesewing/utils' +import { + ActiveImageInput, + ButtonFrame, + DesignInput, + EmailInput, + Fieldset, + FileInput, + ImageInput, + ListInput, + MarkdownInput, + MeasurementInput, + MfaInput, + NumberInput, + PassiveImageInput, + PasswordInput, + StringInput, + ToggleInput, +} from '@freesewing/react/components/Input' + +/* + * A nonsensical update function + */ +const update = (...params) => console.log('Update method received', params) + +export const Docs = () => ( + 
    +  {Object.keys(components).map(c => `${c}\n`)}
+
    +) + +export const ActiveImageInputExample = () => ( + +) +export const ButtonFrameExample = () => ( + +

    This is inside the ButtonFrame

    +     +) +export const DesignInputExample = () => ( + +) +export const EmailInputExample = () => { + const [email, setEmail] = useState('') + + return setEmail(val)} current={email} /> +} +export const FieldsetExample = () => ( + <> +

    Regular Fieldset:

    +
    + +
    +

    Box Fieldset:

    +
    + +
    +

    No legend:

    +
    + +
    + +) +export const FileInputExample = () => ( + +) +export const ImageInputExample = () => ( + +) +export const ListInputExample = () => { + const list = [ + { val: 'bananas', label: 'Bananas', desc: 'A type of fruit' }, + { val: 'bandanas', label: 'Bandanas', desc: 'Something to wear on your head' }, + ] + return ( + <> +

    Regular:

    + +

    Without desc inside a fieldset with legend:

    + ({ ...item, desc: undefined }))} box legend="Legend here"/> + + ) +} +export const MarkdownInputExample = () => { + const [md, setMd] = useState('') + return setMd(val)} /> +} +export const MeasurementInputExample = () => ( + +) +export const MfaInputExample = () => ( + +) +export const NumberInputExample = () => ( + +) +export const PassiveImageInputExample = () => ( + +) +export const PasswordInputExample = () => { + const [pwd, setPwd] = useState('') + return setPwd(val)} /> +} +export const StringInputExample = () => { + const [pwd, setPwd] = useState('') + return setPwd(val)} /> +} +export const ToggleInputExample = () => { + const [val, setVal] = useState(false) + return setVal(v)} labels={['Enabled', 'Disabled']} legend="Toggle" /> +} + + diff --git a/sites/dev/docs/reference/packages/react/components/input/readme.mdx b/sites/dev/docs/reference/packages/react/components/input/readme.mdx index 09683ee3cb6..152283ab398 100644 --- a/sites/dev/docs/reference/packages/react/components/input/readme.mdx +++ b/sites/dev/docs/reference/packages/react/components/input/readme.mdx @@ -2,6 +2,112 @@ title: Input --- -:::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 { + jsdocActiveImageInput, + jsdocButtonFrame, + jsdocDesignInput, + jsdocEmailInput, + jsdocFieldset, + jsdocFileInput, + jsdocImageInput, + jsdocListInput, + jsdocMarkdownInput, + jsdocMeasurementInput, + jsdocMfaInput, + jsdocNumberInput, + jsdocPassiveImageInput, + jsdocPasswordInput, + jsdocStringInput, + jsdocToggleInput, +} from '@site/prebuild/jsdoc/components.input.mjs' +import { + ActiveImageInputExample, + ButtonFrameExample, + DesignInputExample, + EmailInputExample, + FieldsetExample, + FileInputExample, + ImageInputExample, + ListInputExample, + MarkdownInputExample, + MeasurementInputExample, + MfaInputExample, + NumberInputExample, + PassiveImageInputExample, + PasswordInputExample, + StringInputExample, + ToggleInputExample, +} from './_examples.js' + + + +The **Input** component family provides the following components: + +- [ActiveImageInput](#activeimageinput) +- [ButtonFrame](#buttonframe) +- [DesignInput](#designinput) +- [EmailInput](#emailinput) +- [Fieldset](#fieldset) +- [FileInput](#fileinput) +- [ImageInput](#imageinput) +- [ListInput](#listinput) +- [MarkdownInput](#markdowninput) +- [MeasurementInput](#measurementinput) +- [MfaInput](#mfainput) +- [NumberInput](#numberinput) +- [PassiveImageInput](#passiveimageinput) +- [PasswordInput](#passwordinput) +- [StringInput](#stringinput) +- [ToggleInput](#toggleinput) + +## ActiveImageInput + + +## ButtonFrame + + +## DesignInput + + +## EmailInput + + +## Fieldset + + +## FileInput + + +## ImageInput + + +## ListInput + + +## MarkdownInput + + +## MeasurementInput + + +## MfaInput + + +## NumberInput + + +## PassiveImageInput + + +## PasswordInput + + +## StringInput + + +## ToggleInput + + + From 4935ee2d365bb810b95ef468ca8f7443a5d5c748 Mon Sep 17 00:00:00 2001 From: joostdecock Date: Sat, 24 May 2025 08:34:24 +0200 Subject: [PATCH 21/74] [dev] fix: Add jsdoc dependency --- package-lock.json | 232 +++++++++++++++++++++++++++++++++++++++++ sites/dev/package.json | 4 +- 2 files changed, 233 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index bb44d5a40f1..11f939c8148 100644 --- a/package-lock.json +++ b/package-lock.json @@ -28094,6 +28094,19 @@ "@jridgewell/sourcemap-codec": "^1.4.14" } }, + "node_modules/@jsdoc/salty": { + "version": "0.2.9", + "resolved": "https://registry.npmjs.org/@jsdoc/salty/-/salty-0.2.9.tgz", + "integrity": "sha512-yYxMVH7Dqw6nO0d5NIV8OQWnitU8k6vXH8NtgqAfIa/IUqRMxRv/NUJJ08VEKbAakwxlgBl5PJdrU0dMPStsnw==", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "lodash": "^4.17.21" + }, + "engines": { + "node": ">=v12.0.0" + } + }, "node_modules/@koa/cors": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/@koa/cors/-/cors-5.0.0.tgz", @@ -32520,6 +32533,24 @@ "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==", "license": "MIT" }, + "node_modules/@types/linkify-it": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/@types/linkify-it/-/linkify-it-5.0.0.tgz", + "integrity": "sha512-sVDA58zAw4eWAffKOaQH5/5j3XeayukzDk+ewSsnv3p4yJEZHCCzMDiZM8e0OUrRvmpGZ85jf4yDHkHsgBNr9Q==", + "dev": true, + "license": "MIT" + }, + "node_modules/@types/markdown-it": { + "version": "14.1.2", + "resolved": "https://registry.npmjs.org/@types/markdown-it/-/markdown-it-14.1.2.tgz", + "integrity": "sha512-promo4eFwuiW+TfGxhi+0x3czqTYJkG8qB17ZUJiVF10Xm7NLVRSLUsfRTU/6h1e24VvRnXCx+hG7li58lkzog==", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/linkify-it": "^5", + "@types/mdurl": "^2" + } + }, "node_modules/@types/mdast": { "version": "3.0.15", "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-3.0.15.tgz", @@ -32530,6 +32561,13 @@ "@types/unist": "^2" } }, + "node_modules/@types/mdurl": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/@types/mdurl/-/mdurl-2.0.0.tgz", + "integrity": "sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg==", + "dev": true, + "license": "MIT" + }, "node_modules/@types/mdx": { "version": "2.0.13", "resolved": "https://registry.npmjs.org/@types/mdx/-/mdx-2.0.13.tgz", @@ -34928,6 +34966,13 @@ "readable-stream": "^3.4.0" } }, + "node_modules/bluebird": { + "version": "3.7.2", + "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz", + "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==", + "dev": true, + "license": "MIT" + }, "node_modules/body-parser": { "version": "1.20.3", "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.3.tgz", @@ -35689,6 +35734,19 @@ ], "license": "CC-BY-4.0" }, + "node_modules/catharsis": { + "version": "0.9.0", + "resolved": "https://registry.npmjs.org/catharsis/-/catharsis-0.9.0.tgz", + "integrity": "sha512-prMTQVpcns/tzFgFVkVp6ak6RykZyWb3gu8ckUpd6YkTlacOd3DXGJjIpD4Q6zJirizvaiAjSSHlOsA+6sNh2A==", + "dev": true, + "license": "MIT", + "dependencies": { + "lodash": "^4.17.15" + }, + "engines": { + "node": ">= 10" + } + }, "node_modules/ccount": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/ccount/-/ccount-2.0.1.tgz", @@ -46025,6 +46083,16 @@ "js-yaml": "bin/js-yaml.js" } }, + "node_modules/js2xmlparser": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/js2xmlparser/-/js2xmlparser-4.0.2.tgz", + "integrity": "sha512-6n4D8gLlLf1n5mNLQPRfViYzu9RATblzPEtm1SthMX1Pjao0r9YI9nw7ZIfRxQMERS87mcswrg+r/OYrPRX6jA==", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "xmlcreate": "^2.0.4" + } + }, "node_modules/jsbn": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-1.1.0.tgz", @@ -46032,6 +46100,46 @@ "dev": true, "license": "MIT" }, + "node_modules/jsdoc": { + "version": "4.0.4", + "resolved": "https://registry.npmjs.org/jsdoc/-/jsdoc-4.0.4.tgz", + "integrity": "sha512-zeFezwyXeG4syyYHbvh1A967IAqq/67yXtXvuL5wnqCkFZe8I0vKfm+EO+YEvLguo6w9CDUbrAXVtJSHh2E8rw==", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "@babel/parser": "^7.20.15", + "@jsdoc/salty": "^0.2.1", + "@types/markdown-it": "^14.1.1", + "bluebird": "^3.7.2", + "catharsis": "^0.9.0", + "escape-string-regexp": "^2.0.0", + "js2xmlparser": "^4.0.2", + "klaw": "^3.0.0", + "markdown-it": "^14.1.0", + "markdown-it-anchor": "^8.6.7", + "marked": "^4.0.10", + "mkdirp": "^1.0.4", + "requizzle": "^0.2.3", + "strip-json-comments": "^3.1.0", + "underscore": "~1.13.2" + }, + "bin": { + "jsdoc": "jsdoc.js" + }, + "engines": { + "node": ">=12.0.0" + } + }, + "node_modules/jsdoc/node_modules/escape-string-regexp": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz", + "integrity": "sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=8" + } + }, "node_modules/jsesc": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz", @@ -46499,6 +46607,16 @@ "node": ">=0.10.0" } }, + "node_modules/klaw": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/klaw/-/klaw-3.0.0.tgz", + "integrity": "sha512-0Fo5oir+O9jnXu5EefYbVK+mHMBeEVEy2cmctR1O1NECcCkPRreJKrS6Qt/j3KC2C148Dfo9i3pCmCMsdqGr0g==", + "dev": true, + "license": "MIT", + "dependencies": { + "graceful-fs": "^4.1.9" + } + }, "node_modules/kleur": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/kleur/-/kleur-3.0.3.tgz", @@ -47583,6 +47701,16 @@ "node": "^12.20.0 || ^14.13.1 || >=16.0.0" } }, + "node_modules/linkify-it": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-5.0.0.tgz", + "integrity": "sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "uc.micro": "^2.0.0" + } + }, "node_modules/lint-staged": { "version": "15.4.3", "resolved": "https://registry.npmjs.org/lint-staged/-/lint-staged-15.4.3.tgz", @@ -48465,6 +48593,48 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/markdown-it": { + "version": "14.1.0", + "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-14.1.0.tgz", + "integrity": "sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==", + "dev": true, + "license": "MIT", + "dependencies": { + "argparse": "^2.0.1", + "entities": "^4.4.0", + "linkify-it": "^5.0.0", + "mdurl": "^2.0.0", + "punycode.js": "^2.3.1", + "uc.micro": "^2.1.0" + }, + "bin": { + "markdown-it": "bin/markdown-it.mjs" + } + }, + "node_modules/markdown-it-anchor": { + "version": "8.6.7", + "resolved": "https://registry.npmjs.org/markdown-it-anchor/-/markdown-it-anchor-8.6.7.tgz", + "integrity": "sha512-FlCHFwNnutLgVTflOYHPW2pPcl2AACqVzExlkGQNsi4CJgqOHN7YTgDd4LuhgN1BFO3TS0vLAruV1Td6dwWPJA==", + "dev": true, + "license": "Unlicense", + "peerDependencies": { + "@types/markdown-it": "*", + "markdown-it": "*" + } + }, + "node_modules/markdown-it/node_modules/entities": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz", + "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==", + "dev": true, + "license": "BSD-2-Clause", + "engines": { + "node": ">=0.12" + }, + "funding": { + "url": "https://github.com/fb55/entities?sponsor=1" + } + }, "node_modules/markdown-table": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/markdown-table/-/markdown-table-2.0.0.tgz", @@ -48478,6 +48648,19 @@ "url": "https://github.com/sponsors/wooorm" } }, + "node_modules/marked": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/marked/-/marked-4.3.0.tgz", + "integrity": "sha512-PRsaiG84bK+AMvxziE/lCFss8juXjNaWzVbN5tXAm4XjeaS9NAHhop+PjQxz2A9h8Q4M/xGmzP8vqNwy6JeK0A==", + "dev": true, + "license": "MIT", + "bin": { + "marked": "bin/marked.js" + }, + "engines": { + "node": ">= 12" + } + }, "node_modules/math-intrinsics": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz", @@ -50187,6 +50370,13 @@ "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==", "license": "CC0-1.0" }, + "node_modules/mdurl": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-2.0.0.tgz", + "integrity": "sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==", + "dev": true, + "license": "MIT" + }, "node_modules/media-typer": { "version": "0.3.0", "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", @@ -56541,6 +56731,16 @@ "node": ">=6" } }, + "node_modules/punycode.js": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/punycode.js/-/punycode.js-2.3.1.tgz", + "integrity": "sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6" + } + }, "node_modules/pupa": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/pupa/-/pupa-3.1.0.tgz", @@ -58301,6 +58501,16 @@ "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==", "license": "MIT" }, + "node_modules/requizzle": { + "version": "0.2.4", + "resolved": "https://registry.npmjs.org/requizzle/-/requizzle-0.2.4.tgz", + "integrity": "sha512-JRrFk1D4OQ4SqovXOgdav+K8EAhSB/LJZqCz8tbX0KObcdeM15Ss59ozWMBWmmINMagCwmqn4ZNryUGpBsl6Jw==", + "dev": true, + "license": "MIT", + "dependencies": { + "lodash": "^4.17.21" + } + }, "node_modules/resolve": { "version": "1.22.10", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz", @@ -61446,6 +61656,13 @@ "node": ">=14.17" } }, + "node_modules/uc.micro": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-2.1.0.tgz", + "integrity": "sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==", + "dev": true, + "license": "MIT" + }, "node_modules/uglify-js": { "version": "3.19.3", "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.19.3.tgz", @@ -61485,6 +61702,13 @@ "dev": true, "license": "MIT" }, + "node_modules/underscore": { + "version": "1.13.7", + "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.13.7.tgz", + "integrity": "sha512-GMXzWtsc57XAtguZgaQViUOzs0KTkk8ojr3/xAxXLITqf/3EMwxC0inyETfDFjH/Krbhuep0HNbbjI9i/q3F3g==", + "dev": true, + "license": "MIT" + }, "node_modules/undici-types": { "version": "6.20.0", "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.20.0.tgz", @@ -63194,6 +63418,13 @@ "xml-js": "bin/cli.js" } }, + "node_modules/xmlcreate": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/xmlcreate/-/xmlcreate-2.0.4.tgz", + "integrity": "sha512-nquOebG4sngPmGPICTS5EnxqhKbCmz5Ox5hsszI2T6U5qdrJizBc+0ilYSEjTSzU0yZcmvppztXe/5Al5fUwdg==", + "dev": true, + "license": "Apache-2.0" + }, "node_modules/xtend": { "version": "4.0.2", "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz", @@ -71210,6 +71441,7 @@ "@tailwindcss/postcss": "^4.1.3", "autoprefixer": "^10.4.20", "daisyui": "^5.0.19", + "jsdoc": "^4.0.4", "postcss": "^8.4.47", "tailwindcss": "^4.1.3" }, diff --git a/sites/dev/package.json b/sites/dev/package.json index 2a6bf7c88cb..d06b5c49bc2 100644 --- a/sites/dev/package.json +++ b/sites/dev/package.json @@ -10,9 +10,6 @@ "deploy": "docusaurus deploy", "clear": "docusaurus clear", "serve": "docusaurus serve", - "prebuild": "./scripts/prebuild.sh", - "predev": "npm run prebuild", - "prestart": "npm run prebuild", "write-translations": "docusaurus write-translations", "write-heading-ids": "docusaurus write-heading-ids" }, @@ -33,6 +30,7 @@ "@tailwindcss/postcss": "^4.1.3", "autoprefixer": "^10.4.20", "daisyui": "^5.0.19", + "jsdoc": "^4.0.4", "postcss": "^8.4.47", "tailwindcss": "^4.1.3" }, From 1b1cacdea3a6fbe8f15667a7f05cdc9829af8f67 Mon Sep 17 00:00:00 2001 From: joostdecock Date: Sat, 24 May 2025 12:22:21 +0200 Subject: [PATCH 22/74] [react] feat: Added docs for components/Json --- packages/react/components/Json/index.mjs | 9 +++++++++ packages/react/mkdocs.sh | 1 + .../react/components/json/_examples.js | 20 +++++++++++++++++++ .../packages/react/components/json/readme.mdx | 19 +++++++++++++++--- 4 files changed, 46 insertions(+), 3 deletions(-) create mode 100644 sites/dev/docs/reference/packages/react/components/json/_examples.js diff --git a/packages/react/components/Json/index.mjs b/packages/react/components/Json/index.mjs index 82e927a5571..aa97ed0f59b 100644 --- a/packages/react/components/Json/index.mjs +++ b/packages/react/components/Json/index.mjs @@ -2,6 +2,15 @@ import React from 'react' import { Highlight } from '@freesewing/react/components/Highlight' import hljs from 'highlight.js/lib/common' +/** + * A component to code-highlight JSON data + * + * @component + * @param {object} props - All component props + * @param {object} [props.js = undefined] - An optional Javascript Object to highlight + * @param {JSX.Element} props.children - The component children, will be rendered if props.js is not set + * @returns {JSX.Element} + */ export const Json = (props) => { const code = props.js ? JSON.stringify(props.js, null, 2) : props.children diff --git a/packages/react/mkdocs.sh b/packages/react/mkdocs.sh index ebda60e8f09..4a2c43c969e 100755 --- a/packages/react/mkdocs.sh +++ b/packages/react/mkdocs.sh @@ -15,3 +15,4 @@ jsdoc -c jsdoc.json components/Heading/* > ../../sites/dev/prebuild/jsdoc/react/ jsdoc -c jsdoc.json components/Highlight/* > ../../sites/dev/prebuild/jsdoc/react/components/highlight.json jsdoc -c jsdoc.json components/Icon/* > ../../sites/dev/prebuild/jsdoc/react/components/icon.json jsdoc -c jsdoc.json components/Input/* > ../../sites/dev/prebuild/jsdoc/react/components/input.json +jsdoc -c jsdoc.json components/Json/* > ../../sites/dev/prebuild/jsdoc/react/components/json.json diff --git a/sites/dev/docs/reference/packages/react/components/json/_examples.js b/sites/dev/docs/reference/packages/react/components/json/_examples.js new file mode 100644 index 00000000000..b63da97ea52 --- /dev/null +++ b/sites/dev/docs/reference/packages/react/components/json/_examples.js @@ -0,0 +1,20 @@ +import React from 'react' +import { Json } from '@freesewing/react/components/Json' + +export const JsonExample = () => ( + +) diff --git a/sites/dev/docs/reference/packages/react/components/json/readme.mdx b/sites/dev/docs/reference/packages/react/components/json/readme.mdx index 3825329369a..8b04827cbdd 100644 --- a/sites/dev/docs/reference/packages/react/components/json/readme.mdx +++ b/sites/dev/docs/reference/packages/react/components/json/readme.mdx @@ -1,7 +1,20 @@ --- title: Json --- +import { DocusaurusDoc } from '@freesewing/react/components/Docusaurus' +import { ComponentDocs } from '@site/src/components/component-docs.js' +import * as jsdoc from '@site/prebuild/jsdoc/components.json.mjs' +import { JsonExample } from './_examples.js' + + + + +The __Json__ component family provides the following components: + +- [Json](#json) + +## Json + + + -:::note -This page is yet to be created -::: From 8025dc257744e07135390ff5f9cbbd536818d217 Mon Sep 17 00:00:00 2001 From: joostdecock Date: Sat, 24 May 2025 12:22:49 +0200 Subject: [PATCH 23/74] feat(dev): Add prebuild scripts --- sites/dev/package.json | 3 +++ 1 file changed, 3 insertions(+) diff --git a/sites/dev/package.json b/sites/dev/package.json index d06b5c49bc2..1c8cdf88c90 100644 --- a/sites/dev/package.json +++ b/sites/dev/package.json @@ -10,6 +10,9 @@ "deploy": "docusaurus deploy", "clear": "docusaurus clear", "serve": "docusaurus serve", + "prebuild": "./scripts/prebuild.sh", + "predev": "npm run prebuild", + "prestart": "npm run prebuild", "write-translations": "docusaurus write-translations", "write-heading-ids": "docusaurus write-heading-ids" }, From 30e5d37c96d79d87093ea0c4fbd5587978a481e8 Mon Sep 17 00:00:00 2001 From: joostdecock Date: Sat, 24 May 2025 12:44:05 +0200 Subject: [PATCH 24/74] [react] feat: Added docs for components/KeyVal --- packages/react/components/KeyVal/index.mjs | 14 +++++++++++++ packages/react/mkdocs.sh | 1 + .../react/components/keyval/_examples.js | 21 +++++++++++++++++++ .../react/components/keyval/readme.mdx | 20 +++++++++++++++--- 4 files changed, 53 insertions(+), 3 deletions(-) create mode 100644 sites/dev/docs/reference/packages/react/components/keyval/_examples.js diff --git a/packages/react/components/KeyVal/index.mjs b/packages/react/components/KeyVal/index.mjs index 39c5a0bb51c..eb183334ea2 100644 --- a/packages/react/components/KeyVal/index.mjs +++ b/packages/react/components/KeyVal/index.mjs @@ -2,6 +2,19 @@ import React, { useState, useContext } from 'react' import { copyToClipboard } from '@freesewing/utils' import { LoadingStatusContext } from '@freesewing/react/context/LoadingStatus' +/** + * A component to display key/value pairs + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.small = false] - Set this to render a small version + * @param {string} [props.color = primary] - The DaisyUI color to apply + * @param {boolean} [props.href = false] - Set this to make this a link + * @param {string} props.k - The key to display (key is a reserved react prop, so we use k) + * @param {boolean} [props.onClick = false] - Set this to make this a button + * @param {string} props.val - The value to display + * @returns {JSX.Element} + */ export const KeyVal = ({ k, val, @@ -25,6 +38,7 @@ export const KeyVal = ({ if (color === 'secondary') colorClasses2 = secondaryClasses2 else if (color === 'neutral') colorClasses2 = neutralClasses2 else if (color === 'accent') colorClasses2 = accentClasses2 + else if (color === 'info') colorClasses2 = infoClasses2 else if (color === 'warning') colorClasses2 = warningClasses2 else if (color === 'success') colorClasses2 = successClasses2 else if (color === 'error') colorClasses2 = errorClasses2 diff --git a/packages/react/mkdocs.sh b/packages/react/mkdocs.sh index 4a2c43c969e..0ce2104fef3 100755 --- a/packages/react/mkdocs.sh +++ b/packages/react/mkdocs.sh @@ -16,3 +16,4 @@ jsdoc -c jsdoc.json components/Highlight/* > ../../sites/dev/prebuild/jsdoc/reac jsdoc -c jsdoc.json components/Icon/* > ../../sites/dev/prebuild/jsdoc/react/components/icon.json jsdoc -c jsdoc.json components/Input/* > ../../sites/dev/prebuild/jsdoc/react/components/input.json jsdoc -c jsdoc.json components/Json/* > ../../sites/dev/prebuild/jsdoc/react/components/json.json +jsdoc -c jsdoc.json components/KeyVal/* > ../../sites/dev/prebuild/jsdoc/react/components/keyval.json diff --git a/sites/dev/docs/reference/packages/react/components/keyval/_examples.js b/sites/dev/docs/reference/packages/react/components/keyval/_examples.js new file mode 100644 index 00000000000..6fc867127c5 --- /dev/null +++ b/sites/dev/docs/reference/packages/react/components/keyval/_examples.js @@ -0,0 +1,21 @@ +import React from 'react' +import { KeyVal } from '@freesewing/react/components/KeyVal' + +const colors = ['primary', 'secondary', 'accent', 'neutral', 'success', 'warning', 'error', 'info'] + +export const KeyValExample = () => ( + <> + Default +
    + +
    + Colors +
    + {colors.map(c => )} +
    + Small +
    + {colors.map(c => )} +
    + +) diff --git a/sites/dev/docs/reference/packages/react/components/keyval/readme.mdx b/sites/dev/docs/reference/packages/react/components/keyval/readme.mdx index dc5539bfd95..207c02c4705 100644 --- a/sites/dev/docs/reference/packages/react/components/keyval/readme.mdx +++ b/sites/dev/docs/reference/packages/react/components/keyval/readme.mdx @@ -1,7 +1,21 @@ --- title: KeyVal --- +import { DocusaurusDoc } from '@freesewing/react/components/Docusaurus' +import { ComponentDocs } from '@site/src/components/component-docs.js' +import * as jsdoc from '@site/prebuild/jsdoc/components.keyval.mjs' +import { KeyValExample } from './_examples.js' + + + + +The __KeyVal component family provides the following components: + +- [KeyVal](#keyval) + +## KeyVal + + + + -:::note -This page is yet to be created -::: From ba5a2c0b9bfd3e330f6344430f07a1c8c5428134 Mon Sep 17 00:00:00 2001 From: joostdecock Date: Sat, 24 May 2025 12:44:38 +0200 Subject: [PATCH 25/74] chore(org): Tweaks to info color --- sites/org/src/css/dark.css | 2 +- sites/org/src/css/light.css | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/sites/org/src/css/dark.css b/sites/org/src/css/dark.css index 1c74e246331..1aa85955b8d 100644 --- a/sites/org/src/css/dark.css +++ b/sites/org/src/css/dark.css @@ -131,7 +131,7 @@ html[data-theme='dark'] { --color-accent-content: oklch(0.145 0 0); --color-neutral: oklch(0.708 0 0); --color-neutral-content: oklch(0.145 0 0); - --color-info: oklch(0.945 0.129 101.54); + --color-info: oklch(.777 .152 181.912); --color-info-content: oklch(0.145 0 0); --color-success: oklch(0.792 0.209 151.711); --color-success-content: oklch(0.145 0 0); diff --git a/sites/org/src/css/light.css b/sites/org/src/css/light.css index e164bfba0c8..b3be478ad58 100644 --- a/sites/org/src/css/light.css +++ b/sites/org/src/css/light.css @@ -135,8 +135,8 @@ --color-accent-content: oklch(0.985 0 0); --color-neutral: oklch(0.205 0 0); --color-neutral-content: oklch(0.985 0 0); - --color-info: oklch(0.905 0.182 98.111); - --color-info-content: oklch(0.205 0 0); + --color-info: oklch(.704 .14 182.503); + --color-info-content: oklch(.984 .014 180.72); --color-success: oklch(0.627 0.194 149.214); --color-success-content: oklch(0.985 0 0); --color-warning: oklch(0.646 0.222 41.116); From 439315de029f60406598202eb225f2369ec19f22 Mon Sep 17 00:00:00 2001 From: joostdecock Date: Sat, 24 May 2025 13:11:06 +0200 Subject: [PATCH 26/74] [react] feat: Added docs for components/Layout --- packages/react/components/Layout/index.mjs | 62 ++++++++++++------- packages/react/mkdocs.sh | 1 + .../react/components/keyval/readme.mdx | 2 +- .../react/components/layout/_examples.js | 38 ++++++++++++ .../react/components/layout/readme.mdx | 51 ++++++++++++++- 5 files changed, 126 insertions(+), 28 deletions(-) create mode 100644 sites/dev/docs/reference/packages/react/components/layout/_examples.js diff --git a/packages/react/components/Layout/index.mjs b/packages/react/components/Layout/index.mjs index 155e41597a6..56ceb69159e 100644 --- a/packages/react/components/Layout/index.mjs +++ b/packages/react/components/Layout/index.mjs @@ -2,15 +2,17 @@ import React from 'react' import { Breadcrumbs } from '@freesewing/react/components/Breadcrumbs' import { Link as DefaultLink } from '@freesewing/react/components/Link' -/* +/** * This is the default layout, including title and breadcrumbs * - * @param {object} props - All React props - * @param {array} props.children - The content to go in the layout - * @param {array} props.crumbs - Data for the breadcrumbs + * @component + * @param {object} props - All component props + * @param {function} [props.Link = false] - An optional framework specific Link component + * @param {JSX.Element} [props.children = []] - The component children to render inside the layout + * @param {array} [props.crumbs = []] - Data for the breadcrumbs, see Breadcrumbs * @param {string} props.description - The page description - * @param {function} props.Link - An optional framework specific Link component * @param {string} props.title - The page title + * @returns {JSX.Element} */ export const Layout = ({ children = [], crumbs = [], description, Link = false, title }) => { if (!Link) Link = DefaultLink @@ -26,11 +28,13 @@ export const Layout = ({ children = [], crumbs = [], description, Link = false, ) } -/* +/** * This is the base layout * - * @param {object} props - All React props - * @param {array} props.children - The content to go in the layout + * @component + * @param {object} props - All component props + * @param {JSX.Element} [props.children = []] - The component children to render inside the layout + * @returns {JSX.Element} */ export const BaseLayout = ({ children }) => (
    @@ -38,11 +42,13 @@ export const BaseLayout = ({ children }) => (
    ) -/* +/** * The left column of the base layout * - * @param {object} props - All React props - * @param {array} props.children - The content to go in the layout + * @component + * @param {object} props - All component props + * @param {JSX.Element} [props.children = []] - The component children to render inside the layout + * @returns {JSX.Element} */ export const BaseLayoutLeft = ({ children = [] }) => (
    @@ -50,11 +56,13 @@ export const BaseLayoutLeft = ({ children = [] }) => (
    ) -/* +/** * The right column of the base layout * - * @param {object} props - All React props - * @param {array} props.children - The content to go in the layout + * @component + * @param {object} props - All component props + * @param {JSX.Element} [props.children = []] - The component children to render inside the layout + * @returns {JSX.Element} */ export const BaseLayoutRight = ({ children = [] }) => (
    @@ -62,12 +70,14 @@ export const BaseLayoutRight = ({ children = [] }) => (
    ) -/* +/** * The main column for prose (text like docs and so on) * - * @param {object} props - All React props - * @param {array} props.children - The content to go in the layout - * @param {array} props.wide - Whether or not to use the wide view + * @component + * @param {object} props - All component props + * @param {JSX.Element} [props.children = []] - The component children to render inside the layout + * @param {boolean} [props.wide false] - Set this to true to render a full-width prose layout + * @returns {JSX.Element} */ export const BaseLayoutProse = ({ children = [], wide = false }) => (
    @@ -75,21 +85,25 @@ export const BaseLayoutProse = ({ children = [], wide = false }) => (
    ) -/* +/** * The central column for wide content (no max-width) * - * @param {object} props - All React props - * @param {array} props.children - The content to go in the layout + * @component + * @param {object} props - All component props + * @param {JSX.Element} [props.children = []] - The component children to render inside the layout + * @returns {JSX.Element} */ export const BaseLayoutWide = ({ children = [] }) => (
    {children}
    ) -/* +/** * A layout for pages that do their own title/layout, like the sign in page * - * @param {object} props - All React props - * @param {array} props.children - The content to go in the layout + * @component + * @param {object} props - All component props + * @param {JSX.Element} [props.children = []] - The component children to render inside the layout + * @returns {JSX.Element} */ export const NoTitleLayout = ({ children }) => { return ( diff --git a/packages/react/mkdocs.sh b/packages/react/mkdocs.sh index 0ce2104fef3..0f7e7c37376 100755 --- a/packages/react/mkdocs.sh +++ b/packages/react/mkdocs.sh @@ -17,3 +17,4 @@ jsdoc -c jsdoc.json components/Icon/* > ../../sites/dev/prebuild/jsdoc/react/com jsdoc -c jsdoc.json components/Input/* > ../../sites/dev/prebuild/jsdoc/react/components/input.json jsdoc -c jsdoc.json components/Json/* > ../../sites/dev/prebuild/jsdoc/react/components/json.json jsdoc -c jsdoc.json components/KeyVal/* > ../../sites/dev/prebuild/jsdoc/react/components/keyval.json +jsdoc -c jsdoc.json components/Layout/* > ../../sites/dev/prebuild/jsdoc/react/components/layout.json diff --git a/sites/dev/docs/reference/packages/react/components/keyval/readme.mdx b/sites/dev/docs/reference/packages/react/components/keyval/readme.mdx index 207c02c4705..e3af22766f8 100644 --- a/sites/dev/docs/reference/packages/react/components/keyval/readme.mdx +++ b/sites/dev/docs/reference/packages/react/components/keyval/readme.mdx @@ -9,7 +9,7 @@ import { KeyValExample } from './_examples.js' -The __KeyVal component family provides the following components: +The __KeyVal__ component family provides the following components: - [KeyVal](#keyval) diff --git a/sites/dev/docs/reference/packages/react/components/layout/_examples.js b/sites/dev/docs/reference/packages/react/components/layout/_examples.js new file mode 100644 index 00000000000..b24bb148705 --- /dev/null +++ b/sites/dev/docs/reference/packages/react/components/layout/_examples.js @@ -0,0 +1,38 @@ +import React from 'react' +import { Markdown } from '@freesewing/react/components/Markdown' +import { + Layout, + BaseLayout, + BaseLayoutLeft, + BaseLayoutRight, + BaseLayoutProse, + BaseLayoutWide, + NoTitleLayout +} from '@freesewing/react/components/Layout' + +export const LayoutExample = () => ( + + + +) + +export const BaseLayoutExample = () => +export const BaseLayoutLeftExample = () => +export const BaseLayoutRightExample = () => +export const BaseLayoutProseExample = () => +export const BaseLayoutWideExample = () => +export const NoTitleLayoutExample = () => + + + +const Content = () => {md} + +const md = ` +This is \`props.children\`. + +## Some more content + +Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. + +Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +` diff --git a/sites/dev/docs/reference/packages/react/components/layout/readme.mdx b/sites/dev/docs/reference/packages/react/components/layout/readme.mdx index b1bc8f46f29..5b58a2dd0ba 100644 --- a/sites/dev/docs/reference/packages/react/components/layout/readme.mdx +++ b/sites/dev/docs/reference/packages/react/components/layout/readme.mdx @@ -2,6 +2,51 @@ title: Layout --- -:::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 * as jsdoc from '@site/prebuild/jsdoc/components.layout.mjs' +import { + BaseLayoutExample, + BaseLayoutLeftExample, + BaseLayoutProseExample, + BaseLayoutRightExample, + BaseLayoutWideExample, + LayoutExample, + NoTitleLayoutExample, +} from './_examples.js' + + + + +The __Layout__ component family provides the following components: + +- [BaseLayout](#baselayout) +- [BaseLayoutLeft](#baselayoutleft) +- [BaseLayoutProse](#baselayoutprose) +- [BaseLayoutRight](#baselayoutright) +- [BaseLayoutWide](#baselayoutwide) +- [Layout](#layout) +- [NoTitleLayout](#notitlelayout) + +## BaseLayout + + +## BaseLayoutLeft + + +## BaseLayoutProse + + +## BaseLayoutRight + + +## BaseLayoutWide + + +## Layout + + +## NoTitleLayout + + + From 254e271196dcffecfb76d920874e405b0c265340 Mon Sep 17 00:00:00 2001 From: joostdecock Date: Sat, 24 May 2025 14:57:15 +0200 Subject: [PATCH 27/74] [react] feat: Added docs for components/LineDrawing --- .../react/components/LineDrawing/aaron.mjs | 14 +- .../react/components/LineDrawing/albert.mjs | 14 +- packages/react/components/LineDrawing/bee.mjs | 14 +- .../react/components/LineDrawing/bella.mjs | 20 +- .../react/components/LineDrawing/benjamin.mjs | 16 +- .../react/components/LineDrawing/bent.mjs | 20 +- .../react/components/LineDrawing/bibi.mjs | 20 +- packages/react/components/LineDrawing/bob.mjs | 20 +- .../react/components/LineDrawing/breanna.mjs | 22 +- .../react/components/LineDrawing/brian.mjs | 20 +- .../react/components/LineDrawing/bruce.mjs | 20 +- .../react/components/LineDrawing/carlita.mjs | 20 +- .../react/components/LineDrawing/carlton.mjs | 20 +- .../react/components/LineDrawing/charlie.mjs | 20 +- .../components/LineDrawing/cornelius.mjs | 20 +- .../react/components/LineDrawing/diana.mjs | 20 +- .../react/components/LineDrawing/florence.mjs | 16 +- .../react/components/LineDrawing/florent.mjs | 18 +- .../react/components/LineDrawing/gozer.mjs | 20 +- packages/react/components/LineDrawing/hi.mjs | 16 +- .../react/components/LineDrawing/holmes.mjs | 16 +- .../components/LineDrawing/hortensia.mjs | 14 +- .../react/components/LineDrawing/huey.mjs | 10 +- .../react/components/LineDrawing/hugo.mjs | 20 +- .../react/components/LineDrawing/jane.mjs | 20 +- .../react/components/LineDrawing/lucy.mjs | 18 +- .../react/components/LineDrawing/lumina.mjs | 20 +- .../react/components/LineDrawing/lumira.mjs | 20 +- .../react/components/LineDrawing/lunetius.mjs | 16 +- .../react/components/LineDrawing/missing.mjs | 4 +- .../react/components/LineDrawing/noble.mjs | 20 +- .../react/components/LineDrawing/simon.mjs | 18 +- .../react/components/LineDrawing/teagan.mjs | 20 +- .../react/components/LineDrawing/tristan.mjs | 20 +- packages/react/components/LineDrawing/uma.mjs | 20 +- .../react/components/LineDrawing/umbra.mjs | 20 +- .../react/components/LineDrawing/wahid.mjs | 19 +- packages/react/mkdocs.sh | 1 + .../react/components/linedrawing/_examples.js | 166 ++++++ .../react/components/linedrawing/readme.mdx | 535 +++++++++++++++++- 40 files changed, 1204 insertions(+), 163 deletions(-) create mode 100644 sites/dev/docs/reference/packages/react/components/linedrawing/_examples.js diff --git a/packages/react/components/LineDrawing/aaron.mjs b/packages/react/components/LineDrawing/aaron.mjs index 233f67a3ad2..ced54b21941 100644 --- a/packages/react/components/LineDrawing/aaron.mjs +++ b/packages/react/components/LineDrawing/aaron.mjs @@ -10,9 +10,11 @@ const strokeScale = 0.5 /** * A linedrawing component for Aaron * - * @param {object} props - All React props + * @component + * @param {object} props - All component props * @param {string} props.className - Any CSS classes to apply * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const Aaron = ({ className, stroke = 1 }) => ( @@ -24,9 +26,11 @@ export const Aaron = ({ className, stroke = 1 }) => ( /** * A linedrawing component for the front of Aaron * - * @param {object} props - All React props + * @component + * @param {object} props - All component props * @param {string} props.className - Any CSS classes to apply * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const AaronFront = ({ className, stroke = 1 }) => ( @@ -37,9 +41,11 @@ export const AaronFront = ({ className, stroke = 1 }) => ( /** * A linedrawing component for the front of Aaron * - * @param {object} props - All React props + * @component + * @param {object} props - All component props * @param {string} props.className - Any CSS classes to apply * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const AaronBack = ({ className, stroke = 1 }) => ( @@ -50,7 +56,7 @@ export const AaronBack = ({ className, stroke = 1 }) => ( /* * SVG elements for the front */ -export const Front = ({ stroke }) => ( +const Front = ({ stroke }) => ( <> ( @@ -24,9 +26,11 @@ export const Albert = ({ className, stroke = 1 }) => ( /** * A linedrawing component for the front of Albert * - * @param {object} props - All React props + * @component + * @param {object} props - All component props * @param {string} props.className - Any CSS classes to apply * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const AlbertFront = ({ className, stroke = 1 }) => ( @@ -37,9 +41,11 @@ export const AlbertFront = ({ className, stroke = 1 }) => ( /** * A linedrawing component for the front of Albert * - * @param {object} props - All React props + * @component + * @param {object} props - All component props * @param {string} props.className - Any CSS classes to apply * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const AlbertBack = ({ className, stroke = 1 }) => ( @@ -50,7 +56,7 @@ export const AlbertBack = ({ className, stroke = 1 }) => ( /* * SVG elements for the front */ -export const Front = ({ stroke }) => ( +const Front = ({ stroke }) => ( <> ( @@ -21,14 +23,20 @@ export const Bee = ({ className, stroke = 1 }) => ( ) /** - * Front is the same + * A linedrawing component for the front of Bee + * + * @component + * @param {object} props - All component props + * @param {string} props.className - Any CSS classes to apply + * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const BeeFront = Bee /* * SVG elements for the front */ -export const Front = ({ stroke }) => ( +const Front = ({ stroke }) => ( <> ( @@ -24,9 +26,11 @@ export const Bella = ({ className, stroke = 1 }) => ( /** * A linedrawing component for the front of Bella * - * @param {object} props - All React props + * @component + * @param {object} props - All component props * @param {string} props.className - Any CSS classes to apply * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const BellaFront = ({ className, stroke = 1 }) => ( @@ -34,8 +38,14 @@ export const BellaFront = ({ className, stroke = 1 }) => ( ) -/* - * React component for the back +/** + * A linedrawing component for the back of Bella + * + * @component + * @param {object} props - All component props + * @param {string} props.className - Any CSS classes to apply + * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const BellaBack = ({ className = 'tw:w-full', // CSS classes to apply @@ -54,7 +64,7 @@ export const BellaBack = ({ /* * SVG elements for the front */ -export const Front = ({ stroke }) => ( +const Front = ({ stroke }) => ( <> ( @@ -20,15 +22,21 @@ export const Benjamin = ({ className, stroke = 1 }) => ( ) -/* - * Front is the same +/** + * A linedrawing component for the front of Benjamin + * + * @component + * @param {object} props - All component props + * @param {string} props.className - Any CSS classes to apply + * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const BenjaminFront = Benjamin /* * SVG elements for the front */ -export const Front = ({ stroke }) => ( +const Front = ({ stroke }) => ( <> ( @@ -24,9 +26,11 @@ export const Bent = ({ className, stroke = 1 }) => ( /** * A linedrawing component for the front of Bent * - * @param {object} props - All React props + * @component + * @param {object} props - All component props * @param {string} props.className - Any CSS classes to apply * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const BentFront = ({ className, stroke = 1 }) => ( @@ -34,8 +38,14 @@ export const BentFront = ({ className, stroke = 1 }) => ( ) -/* - * React component for the back +/** + * A linedrawing component for the back of Bent + * + * @component + * @param {object} props - All component props + * @param {string} props.className - Any CSS classes to apply + * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const BentBack = ({ className = 'tw:w-full', // CSS classes to apply @@ -54,7 +64,7 @@ export const BentBack = ({ /* * SVG elements for the front */ -export const Front = ({ stroke }) => ( +const Front = ({ stroke }) => ( <> ( @@ -24,9 +26,11 @@ export const Bibi = ({ className, stroke = 1 }) => ( /** * A linedrawing component for the front of Bibi * - * @param {object} props - All React props + * @component + * @param {object} props - All component props * @param {string} props.className - Any CSS classes to apply * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const BibiFront = ({ className, stroke = 1 }) => ( @@ -34,8 +38,14 @@ export const BibiFront = ({ className, stroke = 1 }) => ( ) -/* - * React component for the back +/** + * A linedrawing component for the back of Bibi + * + * @component + * @param {object} props - All component props + * @param {string} props.className - Any CSS classes to apply + * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const BibiBack = ({ className = 'tw:w-full', // CSS classes to apply @@ -54,7 +64,7 @@ export const BibiBack = ({ /* * SVG elements for the front */ -export const Front = ({ stroke }) => ( +const Front = ({ stroke }) => ( <> ( @@ -24,9 +26,11 @@ export const Bob = ({ className, stroke = 1 }) => ( /** * A linedrawing component for the front of Bob * - * @param {object} props - All React props + * @component + * @param {object} props - All component props * @param {string} props.className - Any CSS classes to apply * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const BobFront = ({ className, stroke = 1 }) => ( @@ -34,8 +38,14 @@ export const BobFront = ({ className, stroke = 1 }) => ( ) -/* - * React component for the back +/** + * A linedrawing component for the back of Bob + * + * @component + * @param {object} props - All component props + * @param {string} props.className - Any CSS classes to apply + * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const BobBack = ({ className = 'tw:w-full', // CSS classes to apply @@ -54,7 +64,7 @@ export const BobBack = ({ /* * SVG elements for the front */ -export const Front = ({ stroke }) => ( +const Front = ({ stroke }) => ( <> ( @@ -24,11 +26,13 @@ export const Breanna = ({ className, stroke = 1 }) => ( ) /** - * A linedrawing component for Breanna + * A linedrawing component for the front of Breanna * - * @param {object} props - All React props + * @component + * @param {object} props - All component props * @param {string} props.className - Any CSS classes to apply * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const BreannaFront = ({ className, stroke = 1 }) => ( @@ -36,8 +40,14 @@ export const BreannaFront = ({ className, stroke = 1 }) => ( ) -/* - * React component for the back +/** + * A linedrawing component for the back of Breanna + * + * @component + * @param {object} props - All component props + * @param {string} props.className - Any CSS classes to apply + * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const BreannaBack = ({ className = 'tw:w-full', // CSS classes to apply @@ -56,7 +66,7 @@ export const BreannaBack = ({ /* * SVG elements for the front */ -export const Front = ({ stroke }) => ( +const Front = ({ stroke }) => ( <> ( @@ -24,9 +26,11 @@ export const Brian = ({ className, stroke = 1 }) => ( /** * A linedrawing component for the front of Brian * - * @param {object} props - All React props + * @component + * @param {object} props - All component props * @param {string} props.className - Any CSS classes to apply * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const BrianFront = ({ className, stroke = 1 }) => ( @@ -34,8 +38,14 @@ export const BrianFront = ({ className, stroke = 1 }) => ( ) -/* - * React component for the back +/** + * A linedrawing component for the back of Brian + * + * @component + * @param {object} props - All component props + * @param {string} props.className - Any CSS classes to apply + * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const BrianBack = ({ className = 'tw:w-full', // CSS classes to apply @@ -54,7 +64,7 @@ export const BrianBack = ({ /* * SVG elements for the front */ -export const Front = ({ stroke }) => ( +const Front = ({ stroke }) => ( <> ( @@ -26,9 +28,11 @@ export const Bruce = ({ className, stroke = 1 }) => ( /** * A linedrawing component for the front of Bruce * - * @param {object} props - All React props + * @component + * @param {object} props - All component props * @param {string} props.className - Any CSS classes to apply * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const BruceFront = ({ className, stroke = 1 }) => ( @@ -36,8 +40,14 @@ export const BruceFront = ({ className, stroke = 1 }) => ( ) -/* - * React component for the back +/** + * A linedrawing component for the back of Bruce + * + * @component + * @param {object} props - All component props + * @param {string} props.className - Any CSS classes to apply + * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const BruceBack = ({ className = 'tw:w-full', // CSS classes to apply @@ -56,7 +66,7 @@ export const BruceBack = ({ /* * SVG elements for the front */ -export const Front = ({ stroke }) => ( +const Front = ({ stroke }) => ( <> ( @@ -24,9 +26,11 @@ export const Carlita = ({ className, stroke = 1 }) => ( /** * A linedrawing component for the front of Carlita * - * @param {object} props - All React props + * @component + * @param {object} props - All component props * @param {string} props.className - Any CSS classes to apply * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const CarlitaFront = ({ className, stroke = 1 }) => ( @@ -34,8 +38,14 @@ export const CarlitaFront = ({ className, stroke = 1 }) => ( ) -/* - * React component for the back +/** + * A linedrawing component for the back of Carlita + * + * @component + * @param {object} props - All component props + * @param {string} props.className - Any CSS classes to apply + * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const CarlitaBack = ({ className = 'w-64', // CSS classes to apply @@ -54,7 +64,7 @@ export const CarlitaBack = ({ /* * SVG elements for the front */ -export const Front = ({ stroke }) => ( +const Front = ({ stroke }) => ( <> ( @@ -24,9 +26,11 @@ export const Carlton = ({ className, stroke = 1 }) => ( /** * A linedrawing component for the front of Carlton * - * @param {object} props - All React props + * @component + * @param {object} props - All component props * @param {string} props.className - Any CSS classes to apply * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const CarltonFront = ({ className, stroke = 1 }) => ( @@ -34,8 +38,14 @@ export const CarltonFront = ({ className, stroke = 1 }) => ( ) -/* - * React component for the back +/** + * A linedrawing component for the back of Carlton + * + * @component + * @param {object} props - All component props + * @param {string} props.className - Any CSS classes to apply + * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const CarltonBack = ({ className = 'w-64', // CSS classes to apply @@ -54,7 +64,7 @@ export const CarltonBack = ({ /* * SVG elements for the front */ -export const Front = ({ stroke }) => ( +const Front = ({ stroke }) => ( <> ( @@ -24,9 +26,11 @@ export const Charlie = ({ className, stroke = 1 }) => ( /** * A linedrawing component for the front of Charlie * - * @param {object} props - All React props + * @component + * @param {object} props - All component props * @param {string} props.className - Any CSS classes to apply * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const CharlieFront = ({ className, stroke = 1 }) => ( @@ -34,8 +38,14 @@ export const CharlieFront = ({ className, stroke = 1 }) => ( ) -/* - * React component for the back +/** + * A linedrawing component for the back of Charlie + * + * @component + * @param {object} props - All component props + * @param {string} props.className - Any CSS classes to apply + * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const CharlieBack = ({ className = 'w-64', // CSS classes to apply @@ -54,7 +64,7 @@ export const CharlieBack = ({ /* * SVG elements for the front */ -export const Front = ({ stroke }) => ( +const Front = ({ stroke }) => ( <> ( @@ -24,9 +26,11 @@ export const Cornelius = ({ className, stroke = 1 }) => ( /** * A linedrawing component for the front of Cornelius * - * @param {object} props - All React props + * @component + * @param {object} props - All component props * @param {string} props.className - Any CSS classes to apply * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const CorneliusFront = ({ className, stroke = 1 }) => ( @@ -34,8 +38,14 @@ export const CorneliusFront = ({ className, stroke = 1 }) => ( ) -/* - * React component for the back +/** + * A linedrawing component for the back of Cornelius + * + * @component + * @param {object} props - All component props + * @param {string} props.className - Any CSS classes to apply + * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const CorneliusBack = ({ className = 'w-64', // CSS classes to apply @@ -54,7 +64,7 @@ export const CorneliusBack = ({ /* * SVG elements for the front */ -export const Front = ({ stroke }) => ( +const Front = ({ stroke }) => ( <> ( @@ -24,9 +26,11 @@ export const Diana = ({ className, stroke = 1 }) => ( /** * A linedrawing component for the front Diana * - * @param {object} props - All React props + * @component + * @param {object} props - All component props * @param {string} props.className - Any CSS classes to apply * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const DianaFront = ({ className, stroke = 1 }) => ( @@ -34,8 +38,14 @@ export const DianaFront = ({ className, stroke = 1 }) => ( ) -/* - * React component for the back +/** + * A linedrawing component for the back Diana + * + * @component + * @param {object} props - All component props + * @param {string} props.className - Any CSS classes to apply + * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const DianaBack = ({ className = 'w-64', // CSS classes to apply @@ -54,7 +64,7 @@ export const DianaBack = ({ /* * SVG elements for the front */ -export const Front = ({ stroke }) => ( +const Front = ({ stroke }) => ( <> ( @@ -20,13 +22,21 @@ export const Florence = ({ className, stroke = 1 }) => ( ) -// Front is the same +/** + * A linedrawing component for the front of Florence + * + * @component + * @param {object} props - All component props + * @param {string} props.className - Any CSS classes to apply + * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} + */ export const FlorenceFront = Florence /* * SVG elements for the front */ -export const Front = ({ stroke }) => ( +const Front = ({ stroke }) => ( <> ( @@ -20,13 +22,21 @@ export const Florent = ({ className, stroke = 1 }) => ( ) -// Front is the same +/** + * A linedrawing component for the front of Florent + * + * @component + * @param {object} props - All component props + * @param {string} props.className - Any CSS classes to apply + * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} + */ export const FlorentFront = Florent /* * SVG elements for the front */ -export const Front = ({ stroke }) => ( +const Front = ({ stroke }) => ( <> ( @@ -24,9 +26,11 @@ export const Gozer = ({ className, stroke = 1 }) => ( /** * A linedrawing component for the front of Gozer * - * @param {object} props - All React props + * @component + * @param {object} props - All component props * @param {string} props.className - Any CSS classes to apply * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const GozerFront = ({ className, stroke = 1 }) => ( @@ -34,8 +38,14 @@ export const GozerFront = ({ className, stroke = 1 }) => ( ) -/* - * React component for the back +/** + * A linedrawing component for the back of Gozer + * + * @component + * @param {object} props - All component props + * @param {string} props.className - Any CSS classes to apply + * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const GozerBack = ({ className = 'w-64', // CSS classes to apply @@ -54,7 +64,7 @@ export const GozerBack = ({ /* * SVG elements for the front */ -export const Front = ({ stroke }) => ( +const Front = ({ stroke }) => ( <> ( @@ -20,13 +22,21 @@ export const Hi = ({ className, stroke = 1 }) => ( ) -// Front is the same +/** + * A linedrawing component for the front of Hi + * + * @component + * @param {object} props - All component props + * @param {string} props.className - Any CSS classes to apply + * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} + */ export const HiFront = Hi /* * SVG elements for the front */ -export const Front = ({ stroke }) => ( +const Front = ({ stroke }) => ( <> ( @@ -20,13 +22,21 @@ export const Holmes = ({ className, stroke = 1 }) => ( ) -// Front is the same +/** + * A linedrawing component for the front of Holmes + * + * @component + * @param {object} props - All component props + * @param {string} props.className - Any CSS classes to apply + * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} + */ export const HolmesFront = Holmes /* * SVG elements for the front */ -export const Front = ({ stroke }) => ( +const Front = ({ stroke }) => ( <> ( @@ -20,7 +22,15 @@ export const Hortensia = ({ className, stroke = 1 }) => ( ) -// Front is the same +/** + * A linedrawing component for the front of Hortensia + * + * @component + * @param {object} props - All component props + * @param {string} props.className - Any CSS classes to apply + * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} + */ export const HortensiaFront = Hortensia /* diff --git a/packages/react/components/LineDrawing/huey.mjs b/packages/react/components/LineDrawing/huey.mjs index 1341fc7df8d..01c80fc2741 100644 --- a/packages/react/components/LineDrawing/huey.mjs +++ b/packages/react/components/LineDrawing/huey.mjs @@ -10,9 +10,11 @@ const strokeScale = 0.7 /** * A linedrawing component for Huey * - * @param {object} props - All React props + * @component + * @param {object} props - All component props * @param {string} props.className - Any CSS classes to apply * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const Huey = ({ className, stroke = 1 }) => ( @@ -24,9 +26,11 @@ export const Huey = ({ className, stroke = 1 }) => ( /** * A linedrawing component for front of Huey * - * @param {object} props - All React props + * @component + * @param {object} props - All component props * @param {string} props.className - Any CSS classes to apply * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const HueyFront = ({ className, stroke = 1 }) => ( @@ -54,7 +58,7 @@ export const HueyBack = ({ /* * SVG elements for the front */ -export const Front = ({ stroke }) => ( +const Front = ({ stroke }) => ( <> ( @@ -24,9 +26,11 @@ export const Hugo = ({ className, stroke = 1 }) => ( /** * A linedrawing component for the front of Hugo * - * @param {object} props - All React props + * @component + * @param {object} props - All component props * @param {string} props.className - Any CSS classes to apply * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const HugoFront = ({ className, stroke = 1 }) => ( @@ -34,8 +38,14 @@ export const HugoFront = ({ className, stroke = 1 }) => ( ) -/* - * React component for the back +/** + * A linedrawing component for the back of Hugo + * + * @component + * @param {object} props - All component props + * @param {string} props.className - Any CSS classes to apply + * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const HugoBack = ({ className = 'w-64', // CSS classes to apply @@ -54,7 +64,7 @@ export const HugoBack = ({ /* * SVG elements for the front */ -export const Front = ({ stroke }) => ( +const Front = ({ stroke }) => ( <> ( @@ -22,11 +24,13 @@ export const Jane = ({ className, stroke = 1 }) => ( ) /** - * A linedrawing component for the front of Aaron + * A linedrawing component for the front of Jane * - * @param {object} props - All React props + * @component + * @param {object} props - All component props * @param {string} props.className - Any CSS classes to apply * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const JaneFront = ({ className, stroke = 1 }) => ( @@ -35,11 +39,13 @@ export const JaneFront = ({ className, stroke = 1 }) => ( ) /** - * A linedrawing component for the front of Aaron + * A linedrawing component for the back of Jane * - * @param {object} props - All React props + * @component + * @param {object} props - All component props * @param {string} props.className - Any CSS classes to apply * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const JaneBack = ({ className, stroke = 1 }) => ( @@ -50,7 +56,7 @@ export const JaneBack = ({ className, stroke = 1 }) => ( /* * SVG elements for the front */ -export const Front = ({ stroke }) => ( +const Front = ({ stroke }) => ( <> ( @@ -20,13 +22,21 @@ export const Lucy = ({ className, stroke = 1 }) => ( ) -// Front is the same +/** + * A linedrawing component for the front of Lucy + * + * @component + * @param {object} props - All component props + * @param {string} props.className - Any CSS classes to apply + * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} + */ export const LucyFront = Lucy /* * SVG elements for the front */ -export const Front = ({ stroke }) => ( +const Front = ({ stroke }) => ( <> ( @@ -24,9 +26,11 @@ export const Lumina = ({ className, stroke = 1 }) => ( /** * A linedrawing component for the front of Lumina * - * @param {object} props - All React props + * @component + * @param {object} props - All component props * @param {string} props.className - Any CSS classes to apply * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const LuminaFront = ({ className, stroke = 1 }) => ( @@ -34,8 +38,14 @@ export const LuminaFront = ({ className, stroke = 1 }) => ( ) -/* - * React component for the back +/** + * A linedrawing component for the back of Lumina + * + * @component + * @param {object} props - All component props + * @param {string} props.className - Any CSS classes to apply + * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const LuminaBack = ({ className = 'w-64', // CSS classes to apply @@ -54,7 +64,7 @@ export const LuminaBack = ({ /* * SVG elements for the front */ -export const Front = ({ stroke }) => ( +const Front = ({ stroke }) => ( <> ( @@ -24,9 +26,11 @@ export const Lumira = ({ className, stroke = 1 }) => ( /** * A linedrawing component for the front of Lumira * - * @param {object} props - All React props + * @component + * @param {object} props - All component props * @param {string} props.className - Any CSS classes to apply * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const LumiraFront = ({ className, stroke = 1 }) => ( @@ -34,8 +38,14 @@ export const LumiraFront = ({ className, stroke = 1 }) => ( ) -/* - * React component for the back +/** + * A linedrawing component for the back of Lumira + * + * @component + * @param {object} props - All component props + * @param {string} props.className - Any CSS classes to apply + * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const LumiraBack = ({ className = 'w-64', // CSS classes to apply @@ -54,7 +64,7 @@ export const LumiraBack = ({ /* * SVG elements for the front */ -export const Front = ({ stroke }) => ( +const Front = ({ stroke }) => ( <> ( @@ -20,13 +22,21 @@ export const Lunetius = ({ className, stroke = 1 }) => ( ) -// Front is the same +/** + * A linedrawing component for the front of Lunetius + * + * @component + * @param {object} props - All component props + * @param {string} props.className - Any CSS classes to apply + * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} + */ export const LunetiusFront = Lunetius /* * SVG elements for the front */ -export const Front = ({ stroke }) => ( +const Front = ({ stroke }) => ( <> ( diff --git a/packages/react/components/LineDrawing/noble.mjs b/packages/react/components/LineDrawing/noble.mjs index 96bca69bf61..8b8ba0d93b5 100644 --- a/packages/react/components/LineDrawing/noble.mjs +++ b/packages/react/components/LineDrawing/noble.mjs @@ -10,9 +10,11 @@ const strokeScale = 0.4 /** * A linedrawing component for Noble * - * @param {object} props - All React props + * @component + * @param {object} props - All component props * @param {string} props.className - Any CSS classes to apply * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const Noble = ({ className, stroke = 1 }) => ( @@ -24,9 +26,11 @@ export const Noble = ({ className, stroke = 1 }) => ( /** * A linedrawing component for the front of Noble * - * @param {object} props - All React props + * @component + * @param {object} props - All component props * @param {string} props.className - Any CSS classes to apply * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const NobleFront = ({ className, stroke = 1 }) => ( @@ -34,8 +38,14 @@ export const NobleFront = ({ className, stroke = 1 }) => ( ) -/* - * React component for the back +/** + * A linedrawing component for the back of Noble + * + * @component + * @param {object} props - All component props + * @param {string} props.className - Any CSS classes to apply + * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const NobleBack = ({ className = 'w-64', // CSS classes to apply @@ -54,7 +64,7 @@ export const NobleBack = ({ /* * SVG elements for the front */ -export const Front = ({ stroke }) => ( +const Front = ({ stroke }) => ( <> ( @@ -24,9 +26,11 @@ export const Simon = ({ className, stroke = 1 }) => ( /** * A linedrawing component for the front of Simon * - * @param {object} props - All React props + * @component + * @param {object} props - All component props * @param {string} props.className - Any CSS classes to apply * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const SimonFront = ({ className, stroke = 1 }) => ( @@ -34,8 +38,14 @@ export const SimonFront = ({ className, stroke = 1 }) => ( ) -/* - * React component for the back +/** + * A linedrawing component for the back of Simon + * + * @component + * @param {object} props - All component props + * @param {string} props.className - Any CSS classes to apply + * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const SimonBack = ({ className = 'w-64', // CSS classes to apply diff --git a/packages/react/components/LineDrawing/teagan.mjs b/packages/react/components/LineDrawing/teagan.mjs index bec323ad736..be686763ef0 100644 --- a/packages/react/components/LineDrawing/teagan.mjs +++ b/packages/react/components/LineDrawing/teagan.mjs @@ -10,9 +10,11 @@ const strokeScale = 0.5 /** * A linedrawing component for Teagan * - * @param {object} props - All React props + * @component + * @param {object} props - All component props * @param {string} props.className - Any CSS classes to apply * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const Teagan = ({ className, stroke = 1 }) => ( @@ -24,9 +26,11 @@ export const Teagan = ({ className, stroke = 1 }) => ( /** * A linedrawing component for the front of Teagan * - * @param {object} props - All React props + * @component + * @param {object} props - All component props * @param {string} props.className - Any CSS classes to apply * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const TeaganFront = ({ className, stroke = 1 }) => ( @@ -34,8 +38,14 @@ export const TeaganFront = ({ className, stroke = 1 }) => ( ) -/* - * React component for the back +/** + * A linedrawing component for the back of Teagan + * + * @component + * @param {object} props - All component props + * @param {string} props.className - Any CSS classes to apply + * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const TeaganBack = ({ className = 'w-64', // CSS classes to apply @@ -54,7 +64,7 @@ export const TeaganBack = ({ /* * SVG elements for the front */ -export const Front = ({ stroke }) => ( +const Front = ({ stroke }) => ( <> ( @@ -24,9 +26,11 @@ export const Tristan = ({ className, stroke = 1 }) => ( /** * A linedrawing component for the front of Tristan * - * @param {object} props - All React props + * @component + * @param {object} props - All component props * @param {string} props.className - Any CSS classes to apply * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const TristanFront = ({ className, stroke = 1 }) => ( @@ -34,8 +38,14 @@ export const TristanFront = ({ className, stroke = 1 }) => ( ) -/* - * React component for the back +/** + * A linedrawing component for the back of Tristan + * + * @component + * @param {object} props - All component props + * @param {string} props.className - Any CSS classes to apply + * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const TristanBack = ({ className = 'w-64', // CSS classes to apply @@ -54,7 +64,7 @@ export const TristanBack = ({ /* * SVG elements for the front */ -export const Front = ({ stroke }) => ( +const Front = ({ stroke }) => ( <> ( @@ -24,9 +26,11 @@ export const Uma = ({ className, stroke = 1 }) => ( /** * A linedrawing component for the front of Uma * - * @param {object} props - All React props + * @component + * @param {object} props - All component props * @param {string} props.className - Any CSS classes to apply * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const UmaFront = ({ className, stroke = 1 }) => ( @@ -34,8 +38,14 @@ export const UmaFront = ({ className, stroke = 1 }) => ( ) -/* - * React component for the back +/** + * A linedrawing component for the back of Uma + * + * @component + * @param {object} props - All component props + * @param {string} props.className - Any CSS classes to apply + * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const UmaBack = ({ className = 'w-64', // CSS classes to apply @@ -54,7 +64,7 @@ export const UmaBack = ({ /* * SVG elements for the front */ -export const Front = ({ stroke }) => ( +const Front = ({ stroke }) => ( <> ( @@ -24,9 +26,11 @@ export const Umbra = ({ className, stroke = 1 }) => ( /** * A linedrawing component for the front of Umbra * - * @param {object} props - All React props + * @component + * @param {object} props - All component props * @param {string} props.className - Any CSS classes to apply * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const UmbraFront = ({ className, stroke = 1 }) => ( @@ -34,8 +38,14 @@ export const UmbraFront = ({ className, stroke = 1 }) => ( ) -/* - * React component for the back +/** + * A linedrawing component for the back of Umbra + * + * @component + * @param {object} props - All component props + * @param {string} props.className - Any CSS classes to apply + * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const UmbraBack = ({ className = 'w-64', // CSS classes to apply @@ -54,7 +64,7 @@ export const UmbraBack = ({ /* * SVG elements for the front */ -export const Front = ({ stroke }) => ( +const Front = ({ stroke }) => ( <> ( @@ -24,9 +26,11 @@ export const Wahid = ({ className, stroke = 1 }) => ( /** * A linedrawing component for the front of Wahid * - * @param {object} props - All React props + * @component + * @param {object} props - All component props * @param {string} props.className - Any CSS classes to apply * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const WahidFront = ({ className, stroke = 1 }) => ( @@ -34,6 +38,15 @@ export const WahidFront = ({ className, stroke = 1 }) => ( ) +/** + * A linedrawing component for the back of Wahid + * + * @component + * @param {object} props - All component props + * @param {string} props.className - Any CSS classes to apply + * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} + */ export const WahidBack = ({ className = 'w-64', // CSS classes to apply stroke = 1, // Stroke width to use @@ -68,7 +81,7 @@ const defs = ( /* * React component for the front */ -export const Front = ({ stroke }) => ( +const Front = ({ stroke }) => ( <> {defs} ../../sites/dev/prebuild/jsdoc/react/co jsdoc -c jsdoc.json components/Json/* > ../../sites/dev/prebuild/jsdoc/react/components/json.json jsdoc -c jsdoc.json components/KeyVal/* > ../../sites/dev/prebuild/jsdoc/react/components/keyval.json jsdoc -c jsdoc.json components/Layout/* > ../../sites/dev/prebuild/jsdoc/react/components/layout.json +jsdoc -c jsdoc.json components/LineDrawing/* > ../../sites/dev/prebuild/jsdoc/react/components/linedrawing.json diff --git a/sites/dev/docs/reference/packages/react/components/linedrawing/_examples.js b/sites/dev/docs/reference/packages/react/components/linedrawing/_examples.js new file mode 100644 index 00000000000..a2b8014b506 --- /dev/null +++ b/sites/dev/docs/reference/packages/react/components/linedrawing/_examples.js @@ -0,0 +1,166 @@ +import React from 'react' +import { + lineDrawings, + lineDrawingsBack, + lineDrawingsFront, +} from '@freesewing/react/components/LineDrawing' +import { capitalize } from '@freesewing/utils' + +/* + * Use this to auto-generate content in this file +export const Generate = () => { + const output = [] + // Imports (for readme.mdx) + output.push( + `import {`, + ...Object.keys(lineDrawings).map(d => ` ${capitalize(d)}Example,`), + ...Object.keys(lineDrawingsFront).map(d => ` ${capitalize(d)}FrontExample,`), + ...Object.keys(lineDrawingsBack).map(d => ` ${capitalize(d)}BackExample,`), + `} from './_examples.js'`, + ) + + // List (for readme.mdx) + output.push( + `\n\n`, + ...[ + ...Object.keys(lineDrawings).map(d => ` - [${capitalize(d)}](#${d})`), + ...Object.keys(lineDrawingsFront).map(d => ` - [${capitalize(d)}Front](#${d}front)`), + ...Object.keys(lineDrawingsBack).map(d => ` - [${capitalize(d)}Back](#${d}back)`), + ].sort() + ) + + // Docs (for readme.mdx) + output.push( + `\n\n`, + ...[ + ...Object.keys(lineDrawings).map(d => `## ${capitalize(d)}\n\n`), + ...Object.keys(lineDrawingsFront).map(d => `## ${capitalize(d)}Front\n\n`), + ...Object.keys(lineDrawingsBack).map(d => `## ${capitalize(d)}Back\n\n`), + ].sort() + ) + + // Exports (for _examples.js) + output.push( + [ + ...Object.keys(lineDrawings).map(d => `export const ${capitalize(d)}Example = () => `), + ...Object.keys(lineDrawingsFront).map(d => `export const ${capitalize(d)}FrontExample = () => `), + ...Object.keys(lineDrawingsBack).map(d => `export const ${capitalize(d)}BackExample = () => `), + ].sort().join("\n") + ) + + return 
    {output.join("\n")}
    +} + */ + +const NotFound = () =>

    No such linedrawing

    + +const LineDrawingExample = ({ design, side=false }) => { + let Component = NotFound + if (side === 'back' && lineDrawingsBack[design]) Component = lineDrawingsBack[design] + else if (side === 'front' && lineDrawingsFront[design]) Component = lineDrawingsFront[design] + else if (lineDrawings[design]) Component = lineDrawings[design] + + return +} + +export const AaronBackExample = () => +export const AaronExample = () => +export const AaronFrontExample = () => +export const AlbertExample = () => +export const AlbertFrontExample = () => +export const BeeExample = () => +export const BeeFrontExample = () => +export const BellaBackExample = () => +export const BellaExample = () => +export const BellaFrontExample = () => +export const BenjaminExample = () => +export const BenjaminFrontExample = () => +export const BentBackExample = () => +export const BentExample = () => +export const BentFrontExample = () => +export const BibiBackExample = () => +export const BibiExample = () => +export const BibiFrontExample = () => +export const BobBackExample = () => +export const BobExample = () => +export const BobFrontExample = () => +export const BreannaBackExample = () => +export const BreannaExample = () => +export const BreannaFrontExample = () => +export const BrianBackExample = () => +export const BrianExample = () => +export const BrianFrontExample = () => +export const BruceBackExample = () => +export const BruceExample = () => +export const BruceFrontExample = () => +export const CarlitaBackExample = () => +export const CarlitaExample = () => +export const CarlitaFrontExample = () => +export const CarltonBackExample = () => +export const CarltonExample = () => +export const CarltonFrontExample = () => +export const CathrinBackExample = () => +export const CathrinExample = () => +export const CathrinFrontExample = () => +export const CharlieBackExample = () => +export const CharlieExample = () => +export const CharlieFrontExample = () => +export const CorneliusBackExample = () => +export const CorneliusExample = () => +export const CorneliusFrontExample = () => +export const DianaBackExample = () => +export const DianaExample = () => +export const DianaFrontExample = () => +export const FlorenceExample = () => +export const FlorenceFrontExample = () => +export const FlorentExample = () => +export const FlorentFrontExample = () => +export const GozerBackExample = () => +export const GozerExample = () => +export const GozerFrontExample = () => +export const HiExample = () => +export const HiFrontExample = () => +export const HolmesExample = () => +export const HolmesFrontExample = () => +export const HortensiaExample = () => +export const HortensiaFrontExample = () => +export const HueyBackExample = () => +export const HueyExample = () => +export const HueyFrontExample = () => +export const HugoBackExample = () => +export const HugoExample = () => +export const HugoFrontExample = () => +export const JaneBackExample = () => +export const JaneExample = () => +export const JaneFrontExample = () => +export const LucyExample = () => +export const LucyFrontExample = () => +export const LuminaBackExample = () => +export const LuminaExample = () => +export const LuminaFrontExample = () => +export const LumiraBackExample = () => +export const LumiraExample = () => +export const LumiraFrontExample = () => +export const LunetiusExample = () => +export const LunetiusFrontExample = () => +export const NobleBackExample = () => +export const NobleExample = () => +export const NobleFrontExample = () => +export const SimonBackExample = () => +export const SimonExample = () => +export const SimonFrontExample = () => +export const TeaganBackExample = () => +export const TeaganExample = () => +export const TeaganFrontExample = () => +export const TristanBackExample = () => +export const TristanExample = () => +export const TristanFrontExample = () => +export const UmaBackExample = () => +export const UmaExample = () => +export const UmaFrontExample = () => +export const UmbraBackExample = () => +export const UmbraExample = () => +export const UmbraFrontExample = () => +export const WahidBackExample = () => +export const WahidExample = () => +export const WahidFrontExample = () => diff --git a/sites/dev/docs/reference/packages/react/components/linedrawing/readme.mdx b/sites/dev/docs/reference/packages/react/components/linedrawing/readme.mdx index f9c9d636bb8..cf95c2585dd 100644 --- a/sites/dev/docs/reference/packages/react/components/linedrawing/readme.mdx +++ b/sites/dev/docs/reference/packages/react/components/linedrawing/readme.mdx @@ -2,6 +2,537 @@ title: Linedrawing --- -:::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 * as jsdoc from '@site/prebuild/jsdoc/components.linedrawing.mjs' +import { + AaronExample, + AlbertExample, + BeeExample, + BellaExample, + BenjaminExample, + BentExample, + BibiExample, + BobExample, + BreannaExample, + BrianExample, + BruceExample, + CarlitaExample, + CarltonExample, + CathrinExample, + CharlieExample, + CorneliusExample, + DianaExample, + FlorenceExample, + FlorentExample, + GozerExample, + HiExample, + HolmesExample, + HortensiaExample, + HueyExample, + HugoExample, + JaneExample, + LucyExample, + LuminaExample, + LumiraExample, + LunetiusExample, + NobleExample, + SimonExample, + TeaganExample, + TristanExample, + UmaExample, + UmbraExample, + WahidExample, + AaronFrontExample, + AlbertFrontExample, + BeeFrontExample, + BellaFrontExample, + BenjaminFrontExample, + BentFrontExample, + BibiFrontExample, + BobFrontExample, + BreannaFrontExample, + BrianFrontExample, + BruceFrontExample, + CarlitaFrontExample, + CarltonFrontExample, + CathrinFrontExample, + CharlieFrontExample, + CorneliusFrontExample, + DianaFrontExample, + FlorenceFrontExample, + FlorentFrontExample, + GozerFrontExample, + HiFrontExample, + HolmesFrontExample, + HortensiaFrontExample, + HueyFrontExample, + HugoFrontExample, + JaneFrontExample, + LucyFrontExample, + LuminaFrontExample, + LumiraFrontExample, + LunetiusFrontExample, + NobleFrontExample, + SimonFrontExample, + TeaganFrontExample, + TristanFrontExample, + UmaFrontExample, + UmbraFrontExample, + WahidFrontExample, + AaronBackExample, + BellaBackExample, + BentBackExample, + BibiBackExample, + BobBackExample, + BreannaBackExample, + BrianBackExample, + BruceBackExample, + CarlitaBackExample, + CarltonBackExample, + CathrinBackExample, + CharlieBackExample, + CorneliusBackExample, + DianaBackExample, + GozerBackExample, + HueyBackExample, + HugoBackExample, + JaneBackExample, + LuminaBackExample, + LumiraBackExample, + NobleBackExample, + SimonBackExample, + TeaganBackExample, + TristanBackExample, + UmaBackExample, + UmbraBackExample, + WahidBackExample, +} from './_examples.js' + + + +:::tip +This component family also exports the following helper objects: + +- `lineDrawings`: An object where the key is the design name and the value the full LineDrawing component +- `lineDrawingsBack`: An object where the key is the design name and the value the back LineDrawing component +- `lineDrawingsFront`: An object where the key is the design name and the value the front LineDrawing component ::: + +:::warning +All FreeSewing designs SHOULD have the full and front line drawing component. +The back component is optional. + +If there is no specific front component, the front component MUST be exported as a copy of the full component. +::: + +The __LineDrawing__ component family provides the following components: + + - [AaronBack](#aaronback) + - [AaronFront](#aaronfront) + - [Aaron](#aaron) + - [AlbertFront](#albertfront) + - [Albert](#albert) + - [BeeFront](#beefront) + - [Bee](#bee) + - [BellaBack](#bellaback) + - [BellaFront](#bellafront) + - [Bella](#bella) + - [BenjaminFront](#benjaminfront) + - [Benjamin](#benjamin) + - [BentBack](#bentback) + - [BentFront](#bentfront) + - [Bent](#bent) + - [BibiBack](#bibiback) + - [BibiFront](#bibifront) + - [Bibi](#bibi) + - [BobBack](#bobback) + - [BobFront](#bobfront) + - [Bob](#bob) + - [BreannaBack](#breannaback) + - [BreannaFront](#breannafront) + - [Breanna](#breanna) + - [BrianBack](#brianback) + - [BrianFront](#brianfront) + - [Brian](#brian) + - [BruceBack](#bruceback) + - [BruceFront](#brucefront) + - [Bruce](#bruce) + - [CarlitaBack](#carlitaback) + - [CarlitaFront](#carlitafront) + - [Carlita](#carlita) + - [CarltonBack](#carltonback) + - [CarltonFront](#carltonfront) + - [Carlton](#carlton) + - [CathrinBack](#cathrinback) + - [CathrinFront](#cathrinfront) + - [Cathrin](#cathrin) + - [CharlieBack](#charlieback) + - [CharlieFront](#charliefront) + - [Charlie](#charlie) + - [CorneliusBack](#corneliusback) + - [CorneliusFront](#corneliusfront) + - [Cornelius](#cornelius) + - [DianaBack](#dianaback) + - [DianaFront](#dianafront) + - [Diana](#diana) + - [FlorenceFront](#florencefront) + - [Florence](#florence) + - [FlorentFront](#florentfront) + - [Florent](#florent) + - [GozerBack](#gozerback) + - [GozerFront](#gozerfront) + - [Gozer](#gozer) + - [HiFront](#hifront) + - [Hi](#hi) + - [HolmesFront](#holmesfront) + - [Holmes](#holmes) + - [HortensiaFront](#hortensiafront) + - [Hortensia](#hortensia) + - [HueyBack](#hueyback) + - [HueyFront](#hueyfront) + - [Huey](#huey) + - [HugoBack](#hugoback) + - [HugoFront](#hugofront) + - [Hugo](#hugo) + - [JaneBack](#janeback) + - [JaneFront](#janefront) + - [Jane](#jane) + - [LucyFront](#lucyfront) + - [Lucy](#lucy) + - [LuminaBack](#luminaback) + - [LuminaFront](#luminafront) + - [Lumina](#lumina) + - [LumiraBack](#lumiraback) + - [LumiraFront](#lumirafront) + - [Lumira](#lumira) + - [LunetiusFront](#lunetiusfront) + - [Lunetius](#lunetius) + - [NobleBack](#nobleback) + - [NobleFront](#noblefront) + - [Noble](#noble) + - [SimonBack](#simonback) + - [SimonFront](#simonfront) + - [Simon](#simon) + - [TeaganBack](#teaganback) + - [TeaganFront](#teaganfront) + - [Teagan](#teagan) + - [TristanBack](#tristanback) + - [TristanFront](#tristanfront) + - [Tristan](#tristan) + - [UmaBack](#umaback) + - [UmaFront](#umafront) + - [Uma](#uma) + - [UmbraBack](#umbraback) + - [UmbraFront](#umbrafront) + - [Umbra](#umbra) + - [WahidBack](#wahidback) + - [WahidFront](#wahidfront) + - [Wahid](#wahid) + + + +## Aaron + + +## AaronBack + + +## AaronFront + + +## Albert + + +## AlbertFront + + +## Bee + + +## BeeFront + + +## Bella + + +## BellaBack + + +## BellaFront + + +## Benjamin + + +## BenjaminFront + + +## Bent + + +## BentBack + + +## BentFront + + +## Bibi + + +## BibiBack + + +## BibiFront + + +## Bob + + +## BobBack + + +## BobFront + + +## Breanna + + +## BreannaBack + + +## BreannaFront + + +## Brian + + +## BrianBack + + +## BrianFront + + +## Bruce + + +## BruceBack + + +## BruceFront + + +## Carlita + + +## CarlitaBack + + +## CarlitaFront + + +## Carlton + + +## CarltonBack + + +## CarltonFront + + +## Cathrin + + +## CathrinBack + + +## CathrinFront + + +## Charlie + + +## CharlieBack + + +## CharlieFront + + +## Cornelius + + +## CorneliusBack + + +## CorneliusFront + + +## Diana + + +## DianaBack + + +## DianaFront + + +## Florence + + +## FlorenceFront + + +## Florent + + +## FlorentFront + + +## Gozer + + +## GozerBack + + +## GozerFront + + +## Hi + + +## HiFront + + +## Holmes + + +## HolmesFront + + +## Hortensia + + +## HortensiaFront + + +## Huey + + +## HueyBack + + +## HueyFront + + +## Hugo + + +## HugoBack + + +## HugoFront + + +## Jane + + +## JaneBack + + +## JaneFront + + +## Lucy + + +## LucyFront + + +## Lumina + + +## LuminaBack + + +## LuminaFront + + +## Lumira + + +## LumiraBack + + +## LumiraFront + + +## Lunetius + + +## LunetiusFront + + +## Noble + + +## NobleBack + + +## NobleFront + + +## Simon + + +## SimonBack + + +## SimonFront + + +## Teagan + + +## TeaganBack + + +## TeaganFront + + +## Tristan + + +## TristanBack + + +## TristanFront + + +## Uma + + +## UmaBack + + +## UmaFront + + +## Umbra + + +## UmbraBack + + +## UmbraFront + + +## Wahid + + +## WahidBack + + +## WahidFront + + + From b011c626b03725803777d7391f89c457c876d400 Mon Sep 17 00:00:00 2001 From: joostdecock Date: Sat, 24 May 2025 15:28:43 +0200 Subject: [PATCH 28/74] [react] feat: Added docs for components/Link --- packages/react/components/Link/index.mjs | 76 ++++++++++++------- packages/react/mkdocs.sh | 1 + .../react/components/link/_examples.js | 30 ++++++++ .../packages/react/components/link/readme.mdx | 46 ++++++++++- 4 files changed, 123 insertions(+), 30 deletions(-) create mode 100644 sites/dev/docs/reference/packages/react/components/link/_examples.js diff --git a/packages/react/components/Link/index.mjs b/packages/react/components/Link/index.mjs index 8c7c9ddd17b..adf5e1156c6 100644 --- a/packages/react/components/Link/index.mjs +++ b/packages/react/components/Link/index.mjs @@ -4,10 +4,12 @@ import { linkClasses } from '@freesewing/utils' /** * An anchor link component * - * @param {object} props - All React props - * @param {array} props.children - The content to go in the layout - * @param {array} props.id - The ID of the anchor to link to - * @param {array} props.title - An optional link title + * @component + * @param {object} props - All component props + * @param {JSX.Element} props.children - The component children, will be rendered inside the link + * @param {string} [props.id = ''] - The ID of the anchor to link to + * @param {string} [props.title = false] - An optional link title + * @returns {JSX.Element} */ export const AnchorLink = ({ children, id = '', title = false }) => ( @@ -18,20 +20,23 @@ export const AnchorLink = ({ children, id = '', title = false }) => ( /** * A regular link component * - * @param {object} props - All React props - * @param {array} props.children - The content to go in the layout - * @param {array} props.href - The target to link to - * @param {array} props.title - An optional link title - * @param {string} props.className - Any non-default CSS classes to apply - * @param {string} props.style - Any non-default styles to apply + * @component + * @param {object} props - All component props + * @param {JSX.Element} props.children - The component children, will be rendered inside the link + * @param {string} [props.className = @freesewing/utils/linkClasses] - Any non-default CSS classes to apply + * @param {string} props.href - The URL to link to + * @param {object} [props.style = {}] - Any non-default styles to apply + * @param {string} [props.target = undefined] - An optional link title + * @param {string} [props.title = false] - An optional link title + * @returns {JSX.Element} */ export const Link = ({ - href, - title = false, children, className = linkClasses, - target, + href, style = {}, + target, + title = false, }) => ( {children} @@ -41,34 +46,49 @@ export const Link = ({ const BaseLink = Link /** - * A regular link, but on a success background + * A regular link, but intended to be used on a success background * - * @param {object} props - All React props - * @param {array} props.children - The content to go in the layout - * @param {array} props.href - The target to link to - * @param {array} props.title - An optional link title - * @param {string} props.className - Any non-default CSS classes to apply - * @param {string} props.style - Any non-default styles to apply + * @component + * @param {object} props - All component props + * @param {JSX.Element} props.children - The component children, will be rendered inside the link + * @param {string} props.href - The URL to link to + * @param {string} [props.target = undefined] - An optional link title + * @param {string} [props.title = false] - An optional link title + * @param {React.FC} [Link = undefined] - An optional framework-specific Link component + * @returns {JSX.Element} */ export const SuccessLink = ({ - href, - title = false, children, - className = `${linkClasses} tw:text-success-content tw:hover:text-success-content`, - style = {}, + href, + target, + title = false, + Link, }) => ( - - {children} + + {children} ) +/** + * A link styled as a card + * + * @component + * @param {object} props - All component props + * @param {JSX.Element} props.children - The component children, will be rendered inside the link + * @param {string} [props.className = @freesewing/utils/linkClasses + "tw:text-success-content tw:hover:text-success-content"] - Any non-default CSS classes to apply + * @param {string} props.href - The URL to link to + * @param {string} [props.title = false] - An optional link title + * @param {JSX.Element} props.icon - An icon to render + * @param {React.FC} [Link = undefined] - An optional framework-specific Link component + * @returns {JSX.Element} + */ export const CardLink = ({ + children, + className = 'tw:bg-base-200 tw:text-base-content', href, title, icon, - children, Link, - className = 'tw:bg-base-200 tw:text-base-content', }) => { if (!Link) Link = BaseLink diff --git a/packages/react/mkdocs.sh b/packages/react/mkdocs.sh index 301f74432fe..8de280480b0 100755 --- a/packages/react/mkdocs.sh +++ b/packages/react/mkdocs.sh @@ -19,3 +19,4 @@ jsdoc -c jsdoc.json components/Json/* > ../../sites/dev/prebuild/jsdoc/react/com jsdoc -c jsdoc.json components/KeyVal/* > ../../sites/dev/prebuild/jsdoc/react/components/keyval.json jsdoc -c jsdoc.json components/Layout/* > ../../sites/dev/prebuild/jsdoc/react/components/layout.json jsdoc -c jsdoc.json components/LineDrawing/* > ../../sites/dev/prebuild/jsdoc/react/components/linedrawing.json +jsdoc -c jsdoc.json components/Link/* > ../../sites/dev/prebuild/jsdoc/react/components/link.json diff --git a/sites/dev/docs/reference/packages/react/components/link/_examples.js b/sites/dev/docs/reference/packages/react/components/link/_examples.js new file mode 100644 index 00000000000..2bd733031db --- /dev/null +++ b/sites/dev/docs/reference/packages/react/components/link/_examples.js @@ -0,0 +1,30 @@ +import React from 'react' +import { + AnchorLink, + CardLink, + Link, + SuccessLink, +} from '@freesewing/react/components/Link' +import { WarningIcon } from '@freesewing/react/components/Icon' + +export const AnchorLinkExample = () => This is a AnchorLink +export const CardLinkExample = () => ( + } + href="/" + title="This is the title" + > + This is a CardLink with a WarningIcon + +) +export const LinkExample = () => This is a Link +export const SuccessLinkExample = () => ( + <> + This is a SuccessLink, you should not use it on a regular background (there is a link on this line) +
    + This is a SuccessLink on a success background +
    + +) + diff --git a/sites/dev/docs/reference/packages/react/components/link/readme.mdx b/sites/dev/docs/reference/packages/react/components/link/readme.mdx index 1156c5aa1ef..9275c1c5874 100644 --- a/sites/dev/docs/reference/packages/react/components/link/readme.mdx +++ b/sites/dev/docs/reference/packages/react/components/link/readme.mdx @@ -2,6 +2,48 @@ title: Link --- -:::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 * as jsdoc from '@site/prebuild/jsdoc/components.link.mjs' +import { + AnchorLinkExample, + CardLinkExample, + LinkExample, + SuccessLinkExample, +} from './_examples.js' + + + + +:::tip Styling and link behaviour +##### Styling +Due to the CSS reset used by Tailwind, one cannot assume links will be styled like you expect them to. +Use a component from this For this and other reasons, Link components exist. +##### Link behaviour +Withing a single-page application (SPA) --- like Docusaurus or NextJS and so on --- there is often a +`Link` component provided by the framework that provides client-side routing so that clicking a link +does not completely reload the page/application. + +You can pass such a component in some of FreeSewing components to use it for links rather than a traditional `` tag. ::: + +The __Link__ component family provides the following components: + +- [AnchorLink](#anchorlink) +- [CardLink](#cardlink) +- [Link](#link) +- [SuccessLink](#successlink) + +## AnchorLink + + +## CardLink + + +## Link + + +## SuccessLink + + + From 3364be6052eb092fe05df3077b629216cf0f2299 Mon Sep 17 00:00:00 2001 From: joostdecock Date: Sat, 24 May 2025 17:52:31 +0200 Subject: [PATCH 29/74] [react] feat: Added docs for components/Logo --- packages/react/components/Logo/index.mjs | 19 +++++---- packages/react/mkdocs.sh | 1 + .../react/components/logo/_examples.js | 41 +++++++++++++++++++ .../packages/react/components/logo/readme.mdx | 33 ++++++++++++++- 4 files changed, 84 insertions(+), 10 deletions(-) create mode 100644 sites/dev/docs/reference/packages/react/components/logo/_examples.js diff --git a/packages/react/components/Logo/index.mjs b/packages/react/components/Logo/index.mjs index d0b38093b7b..24c4be7b2ed 100644 --- a/packages/react/components/Logo/index.mjs +++ b/packages/react/components/Logo/index.mjs @@ -1,17 +1,18 @@ import React from 'react' import { logoPath } from '@freesewing/config' -/* +/** * The FreeSewing logo, aka Skully, as a React component * - * @params {object} props - All React props - * @params {string} className - Custom CSS classes to apply - * @params {string} theme - The theme, light or dark. Although by default this component will auto-adapt by using currentColor - * @params {number} stroke - Set this to also stroke the logo + * @component + * @param {object} props - All component props + * @param {string} [props.className = "tw:w-20 tw:h-20"] - Custom CSS classes to apply + * @param {string} [props.stroke = undefined] - Set this explicitly to use a different stroke color + * @returns {JSX.Element} */ -export const FreeSewingLogo = ({ className = 'w-20 h-20', theme = 'light', stroke = false }) => { +export const FreeSewingLogo = ({ className = 'tw:w-20 tw:h-20', stroke }) => { const svgProps = {} - const strokes = { light: '#000', darf: '#fff' } + const strokes = { dark: '#000', light: 'var(--p)' } return ( @@ -21,10 +22,12 @@ export const FreeSewingLogo = ({ className = 'w-20 h-20', theme = 'light', strok ) } + + diff --git a/packages/react/mkdocs.sh b/packages/react/mkdocs.sh index 8de280480b0..27938526ef9 100755 --- a/packages/react/mkdocs.sh +++ b/packages/react/mkdocs.sh @@ -20,3 +20,4 @@ jsdoc -c jsdoc.json components/KeyVal/* > ../../sites/dev/prebuild/jsdoc/react/c jsdoc -c jsdoc.json components/Layout/* > ../../sites/dev/prebuild/jsdoc/react/components/layout.json jsdoc -c jsdoc.json components/LineDrawing/* > ../../sites/dev/prebuild/jsdoc/react/components/linedrawing.json jsdoc -c jsdoc.json components/Link/* > ../../sites/dev/prebuild/jsdoc/react/components/link.json +jsdoc -c jsdoc.json components/Logo/* > ../../sites/dev/prebuild/jsdoc/react/components/logo.json diff --git a/sites/dev/docs/reference/packages/react/components/logo/_examples.js b/sites/dev/docs/reference/packages/react/components/logo/_examples.js new file mode 100644 index 00000000000..43b88285c28 --- /dev/null +++ b/sites/dev/docs/reference/packages/react/components/logo/_examples.js @@ -0,0 +1,41 @@ +import React from 'react' +import { FreeSewingLogo } from '@freesewing/react/components/Logo' +import { Highlight } from '@freesewing/react/components/Highlight' + +export const FreeSewingLogoExample = () => ( + <> +
    +
    +

    Default

    +
    + +
    + +
    +
    + the busy background
    reveals the stroke     +
    +
    {``}
    +
    +
    +
    +

    Different color/size

    + +
    +
    + {``} +
    +
    +
    +
    +

    Different stroke

    + +
    +
    + {``} +
    +
    + +) diff --git a/sites/dev/docs/reference/packages/react/components/logo/readme.mdx b/sites/dev/docs/reference/packages/react/components/logo/readme.mdx index be8d58e9078..7abac216640 100644 --- a/sites/dev/docs/reference/packages/react/components/logo/readme.mdx +++ b/sites/dev/docs/reference/packages/react/components/logo/readme.mdx @@ -1,7 +1,36 @@ --- title: Logo --- +import { DocusaurusDoc } from '@freesewing/react/components/Docusaurus' +import { ComponentDocs } from '@site/src/components/component-docs.js' +import * as jsdoc from '@site/prebuild/jsdoc/components.logo.mjs' +import { FreeSewingLogoExample } from './_examples.js' -:::note -This page is yet to be created + + + +The __Logo__ component family provides the following components: + +- [FreeSewingLogo](#freesewinglogo) + +## FreeSewingLogo + +:::tip Understanding the colors of the logo +The logo will always be filled with `currentColor` which is a specific keyword +that will be substituted with whatever the current text color is. + +Furthermore, two logos will be stacked on top of each other. +The one filled with `currentColor` sits on top, and below it sits one that is +not filled, but stroked with `var(--background-base-100)`. + +This ensures that if the logo is placed on a background with low contrast, it +stands out On the default background, the stroked version will be the same +color, so it will be invisible. + +You can also set an explicit stroke color with the `stroke` prop, or control +`currentColor` by setting the `className` prop. ::: + + + + From 17619aebcb7b9ad2d59c978cd8af8a58b51052a6 Mon Sep 17 00:00:00 2001 From: joostdecock Date: Sat, 24 May 2025 17:56:02 +0200 Subject: [PATCH 30/74] [react] feat: Added docs for components/Markdown --- .../react/components/markdown/readme.mdx | 20 +++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) diff --git a/sites/dev/docs/reference/packages/react/components/markdown/readme.mdx b/sites/dev/docs/reference/packages/react/components/markdown/readme.mdx index 95476bbbdd9..c0f28a500bb 100644 --- a/sites/dev/docs/reference/packages/react/components/markdown/readme.mdx +++ b/sites/dev/docs/reference/packages/react/components/markdown/readme.mdx @@ -2,6 +2,22 @@ title: Markdown --- -:::note -This page is yet to be created +import { DocusaurusDoc } from '@freesewing/react/components/Docusaurus' + + + +The **Markdown** component family provides the following components: + +- [Markdown](#markdown): A re-export of [react-markdown][rm] + +:::tip +#### Not FreeSewing code +This component family only contains re-exports of code by other maintainers.\ +Since they are a dependency, we provide them as part of the @freesewing/react package for convenience. + +Please refer to the documentation for [react-markdown][rm]. ::: + + + +[rm]: https://github.com/remarkjs/react-markdown From 7317ff5dd890050af9a519ffcfbd6d6605dfdcc4 Mon Sep 17 00:00:00 2001 From: joostdecock Date: Sat, 24 May 2025 18:03:59 +0200 Subject: [PATCH 31/74] [react] feat: Added docs for components/Mini --- packages/react/components/Mini/index.mjs | 24 ++++++++++++ packages/react/mkdocs.sh | 1 + .../react/components/mini/_examples.js | 6 +++ .../packages/react/components/mini/readme.mdx | 37 ++++++++++++++++++- 4 files changed, 66 insertions(+), 2 deletions(-) create mode 100644 sites/dev/docs/reference/packages/react/components/mini/_examples.js diff --git a/packages/react/components/Mini/index.mjs b/packages/react/components/Mini/index.mjs index 96277b25ad9..ffcef08737b 100644 --- a/packages/react/components/Mini/index.mjs +++ b/packages/react/components/Mini/index.mjs @@ -1,6 +1,14 @@ import React from 'react' import { TipIcon, ChatIcon, WarningIcon } from '@freesewing/react/components/Icon' +/** + * A component to display a mini tip + * + * @component + * @param {object} props - All component props + * @param {JSX.Element} props.children - The component children, will be rendered inside the mini tip + * @returns {JSX.Element} + */ export const MiniTip = ({ children }) => (
    @@ -12,6 +20,14 @@ export const MiniTip = ({ children }) => (
    ) +/** + * A component to display a mini note + * + * @component + * @param {object} props - All component props + * @param {JSX.Element} props.children - The component children, will be rendered inside the mini note + * @returns {JSX.Element} + */ export const MiniNote = ({ children }) => (
    @@ -23,6 +39,14 @@ export const MiniNote = ({ children }) => (
    ) +/** + * A component to display a mini warning + * + * @component + * @param {object} props - All component props + * @param {JSX.Element} props.children - The component children, will be rendered inside the mini warning + * @returns {JSX.Element} + */ export const MiniWarning = ({ children }) => (
    diff --git a/packages/react/mkdocs.sh b/packages/react/mkdocs.sh index 27938526ef9..4955731102d 100755 --- a/packages/react/mkdocs.sh +++ b/packages/react/mkdocs.sh @@ -21,3 +21,4 @@ jsdoc -c jsdoc.json components/Layout/* > ../../sites/dev/prebuild/jsdoc/react/c jsdoc -c jsdoc.json components/LineDrawing/* > ../../sites/dev/prebuild/jsdoc/react/components/linedrawing.json jsdoc -c jsdoc.json components/Link/* > ../../sites/dev/prebuild/jsdoc/react/components/link.json jsdoc -c jsdoc.json components/Logo/* > ../../sites/dev/prebuild/jsdoc/react/components/logo.json +jsdoc -c jsdoc.json components/Mini/* > ../../sites/dev/prebuild/jsdoc/react/components/mini.json diff --git a/sites/dev/docs/reference/packages/react/components/mini/_examples.js b/sites/dev/docs/reference/packages/react/components/mini/_examples.js new file mode 100644 index 00000000000..90a1b594ccb --- /dev/null +++ b/sites/dev/docs/reference/packages/react/components/mini/_examples.js @@ -0,0 +1,6 @@ +import React from 'react' +import { MiniNote, MiniTip, MiniWarning } from '@freesewing/react/components/Mini' + +export const MiniNoteExample = () => I am a note, a mini note +export const MiniTipExample = () => I am a tip, a mini tip +export const MiniWarningExample = () => I am a warning, a mini warning diff --git a/sites/dev/docs/reference/packages/react/components/mini/readme.mdx b/sites/dev/docs/reference/packages/react/components/mini/readme.mdx index cf5700cc2c7..66ec8615af6 100644 --- a/sites/dev/docs/reference/packages/react/components/mini/readme.mdx +++ b/sites/dev/docs/reference/packages/react/components/mini/readme.mdx @@ -2,6 +2,39 @@ title: Mini --- -:::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 * as jsdoc from '@site/prebuild/jsdoc/components.mini.mjs' +import { + MiniNoteExample, + MiniTipExample, + MiniWarningExample, +} from './_examples.js' + + + + +The __Mini__ component family provides the following components: + +- [MiniNote](#mininote) +- [MiniTip](#minitip) +- [MiniWarning](#miniwarning) + +:::tip +These components are typically used when a +[Popout](/reference/packages/react/components/popout/) would take up too much +space. ::: + + +## MiniNote + + +## MiniTip + + +## MiniWarning + + + + From 280ee0e1d304e18114ba0655d3f5e38682e47547 Mon Sep 17 00:00:00 2001 From: joostdecock Date: Sat, 24 May 2025 18:40:30 +0200 Subject: [PATCH 32/74] [react] feat: Added docs for components/Modal --- packages/react/components/Modal/index.mjs | 24 +++--- packages/react/mkdocs.sh | 1 + .../react/components/modal/_examples.js | 73 +++++++++++++++++++ .../react/components/modal/readme.mdx | 20 ++++- 4 files changed, 104 insertions(+), 14 deletions(-) create mode 100644 sites/dev/docs/reference/packages/react/components/modal/_examples.js diff --git a/packages/react/components/Modal/index.mjs b/packages/react/components/Modal/index.mjs index f6678774849..d9a1b527751 100644 --- a/packages/react/components/Modal/index.mjs +++ b/packages/react/components/Modal/index.mjs @@ -12,17 +12,19 @@ const slideClasses = { /** * This component wraps modal content, making sure the layout is ok and handling transitions * - * @param {object} props - All React props - * @param {array} children - Content to render inside the modal - * @param {string} flex - Flexbox direction (row or col) - * @param {string} justify - Flexbox justify value - * @param {string} items - Flexbox items value - * @param {string} bg - Background - * @param {string} bgOpacity - Background opacity - * @param {bool} bare - Set true to not handle layout - * @param {bool} keepOpenOnClick - Set to true to prevent a click in the modal content to close the modal - * @param {string} slideFrom - Direction to slide in from - * @param {bool} fullWidth - Set to true to not constrain the width + * @component + * @param {object} props - All component props + * @param {JSX.Element} props.children - The component children, will be rendered inside the mini tip + * @param {string} [props.flex = row] - Flexbox direction (row or col) + * @param {string} [props.justify = center] - Flexbox justify value + * @param {string} [props.items = center] - Flexbox items value + * @param {string} [props.bg = neutral] - Background color (one of the DaisyUI named colors) + * @param {string} [props.bgOpacity = 70] - Background opacity + * @param {bool} [props.bare = false] - Set true to not handle layout within the wrapper + * @param {bool} [keepOpenOnClick = false] - Set to true to prevent a click in the modal content from closing the modal + * @param {string} [slideFrom = left] - Direction to slide in from on mobile + * @param {bool} [fullWidth = false] - Set to true to not constrain the width + * @returns {JSX.Element} */ export const ModalWrapper = ({ children = null, diff --git a/packages/react/mkdocs.sh b/packages/react/mkdocs.sh index 4955731102d..edc1f9764b8 100755 --- a/packages/react/mkdocs.sh +++ b/packages/react/mkdocs.sh @@ -22,3 +22,4 @@ jsdoc -c jsdoc.json components/LineDrawing/* > ../../sites/dev/prebuild/jsdoc/re jsdoc -c jsdoc.json components/Link/* > ../../sites/dev/prebuild/jsdoc/react/components/link.json jsdoc -c jsdoc.json components/Logo/* > ../../sites/dev/prebuild/jsdoc/react/components/logo.json jsdoc -c jsdoc.json components/Mini/* > ../../sites/dev/prebuild/jsdoc/react/components/mini.json +jsdoc -c jsdoc.json components/Modal/* > ../../sites/dev/prebuild/jsdoc/react/components/modal.json diff --git a/sites/dev/docs/reference/packages/react/components/modal/_examples.js b/sites/dev/docs/reference/packages/react/components/modal/_examples.js new file mode 100644 index 00000000000..f1c44a61420 --- /dev/null +++ b/sites/dev/docs/reference/packages/react/components/modal/_examples.js @@ -0,0 +1,73 @@ +import React, { useContext } from 'react' +import { ModalContext } from '@freesewing/react/context/Modal' +import { ModalWrapper } from '@freesewing/react/components/Modal' +import { MiniTip } from '@freesewing/react/components/Mini' + +export const ModalWrapperExample = () => { + const { setModal, clearModal } = useContext(ModalContext) + + return ( +
    + + + + + + + + + + +
    + ) +} + +const Content = () => ( + <> +
    +

    Title 1

    +

    Some modal content here

    +
    +
    +

    Title 2

    +

    Some modal content here

    +
    +
    +

    Title 3

    +

    Some modal content here

    +
    + +) diff --git a/sites/dev/docs/reference/packages/react/components/modal/readme.mdx b/sites/dev/docs/reference/packages/react/components/modal/readme.mdx index 07559473e1e..ff533885b81 100644 --- a/sites/dev/docs/reference/packages/react/components/modal/readme.mdx +++ b/sites/dev/docs/reference/packages/react/components/modal/readme.mdx @@ -2,6 +2,20 @@ title: Modal --- -:::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 * as jsdoc from '@site/prebuild/jsdoc/components.modal.mjs' +import { ModalWrapperExample } from './_examples.js' + + + + +The __Modal component family provides the following components: + +- [ModalWrapper](#modalwrapper) + +## ModalWrapper + + + + From 0ecb1c8fd29a3212f7a9f5cb9b58bc6c836b063f Mon Sep 17 00:00:00 2001 From: joostdecock Date: Sat, 24 May 2025 18:43:57 +0200 Subject: [PATCH 33/74] [react] chore: Removed components/New --- packages/react/components/New/NewLinks.mjs | 92 ------------------- packages/react/components/New/index.mjs | 3 - packages/react/package.json | 1 - .../packages/react/components/new/readme.mdx | 7 -- 4 files changed, 103 deletions(-) delete mode 100644 packages/react/components/New/NewLinks.mjs delete mode 100644 packages/react/components/New/index.mjs delete mode 100644 sites/dev/docs/reference/packages/react/components/new/readme.mdx diff --git a/packages/react/components/New/NewLinks.mjs b/packages/react/components/New/NewLinks.mjs deleted file mode 100644 index 726ac5e5600..00000000000 --- a/packages/react/components/New/NewLinks.mjs +++ /dev/null @@ -1,92 +0,0 @@ -// Hooks -import React, { useState, useEffect } from 'react' -import { useAccount } from '@freesewing/react/hooks/useAccount' -import { useBackend } from '@freesewing/react/hooks/useBackend' -// Components -import { Link as DefaultLink } from '@freesewing/react/components/Link' -import { - NewMeasurementsSetIcon, - NewPatternIcon, - ShowcaseIcon, - KioskIcon, -} from '@freesewing/react/components/Icon' - -const NewLink = ({ title, Icon, description, href, Link }) => { - if (!Link) Link = DefaultLink - const linkProps = { - href, - className: - 'tw:p-8 tw:-ml-4 tw:-mr-4 tw:md:m-0 tw:rounded-none tw:md:rounded-xl ' + - 'tw:md:shadow tw:hover:bg-secondary/10 tw:bg-base-200/10 ' + - 'tw:w-full tw:max-w-lg tw:hover:no-underline', - } - - const inner = ( - <> -

    - {title} - -

    -
    - {description} -
    - - ) - - return     {inner} - return {inner} -} - -const newLinks = { - pattern: { - href: '/editor/', - Icon: NewPatternIcon, - title: 'Generate a new pattern', - description: - 'Pick a design, add your measurements set, and we will generate a bespoke sewing pattern for you.', - }, - set: { - Icon: NewMeasurementsSetIcon, - title: 'Create new measurements set', - description: - 'Create a new set of measurements which you can then use to generate patterns for.', - }, - showcase: { - Icon: ShowcaseIcon, - title: 'Create a new showcase post', - description: - 'Made something from a FreeSewing pattern? Please share the results here to inspire others.', - }, - img: { - Icon: KioskIcon, - title: 'Generate a social media image', - description: - 'Share the FreeSewing love on social media, supports wide, square, and tall formats.', - }, -} - -/** - * The NewLinks component shows all of the links to create something new - * - * @param {object} props - All the React props - * @param {function} Link - A custom Link component, typically the Docusaurus one, but it's optional - */ -export const NewLinks = ({ Link = false }) => { - // Use custom Link component if available - if (!Link) Link = DefaultLink - - // Hooks - const { account } = useAccount() - - return ( -
    -
    - {Object.entries(newLinks).map(([href, link]) => ( - - ))} -
    -
    - ) -} diff --git a/packages/react/components/New/index.mjs b/packages/react/components/New/index.mjs deleted file mode 100644 index 59b0a60bb24..00000000000 --- a/packages/react/components/New/index.mjs +++ /dev/null @@ -1,3 +0,0 @@ -import { NewLinks } from './NewLinks.mjs' - -export { NewLinks } diff --git a/packages/react/package.json b/packages/react/package.json index 849a6962947..f2c67fe4f99 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -56,7 +56,6 @@ "./components/Markdown": "./components/Markdown/index.mjs", "./components/Mini": "./components/Mini/index.mjs", "./components/Modal": "./components/Modal/index.mjs", - "./components/New": "./components/New/index.mjs", "./components/Newsletter": "./components/Newsletter/index.mjs", "./components/Null": "./components/Null/index.mjs", "./components/Number": "./components/Number/index.mjs", diff --git a/sites/dev/docs/reference/packages/react/components/new/readme.mdx b/sites/dev/docs/reference/packages/react/components/new/readme.mdx deleted file mode 100644 index 8f14f43b017..00000000000 --- a/sites/dev/docs/reference/packages/react/components/new/readme.mdx +++ /dev/null @@ -1,7 +0,0 @@ ---- -title: New ---- - -:::note -This page is yet to be created -::: From 4c582bf26fe727d46af399ea439d902666d44a58 Mon Sep 17 00:00:00 2001 From: joostdecock Date: Sun, 25 May 2025 13:37:24 +0200 Subject: [PATCH 34/74] [react] feat: Added docs for components/Newsletter --- .../react/components/Newsletter/index.mjs | 23 ++++++++++++------- packages/react/mkdocs.sh | 1 + .../react/components/newsletter/readme.mdx | 23 ++++++++++++++++--- 3 files changed, 36 insertions(+), 11 deletions(-) diff --git a/packages/react/components/Newsletter/index.mjs b/packages/react/components/Newsletter/index.mjs index d21cf857a28..b327baa6a48 100644 --- a/packages/react/components/Newsletter/index.mjs +++ b/packages/react/components/Newsletter/index.mjs @@ -17,11 +17,16 @@ import { Popout } from '@freesewing/react/components/Popout' import { IconButton } from '@freesewing/react/components/Button' import { MiniTip } from '@freesewing/react/components/Mini' -/* - * Component for newsletter signup (by visitors) +/** + * Component for newsletter signup by visitors (not logged-in users) * - * @params {object} props - All React props - * @param {function} props.Link - An optional framework-specific Link component + * @component + * @param {object} props - All component props + * @param {React.FC} [props.Link = false] - An optional framework-specific Link component + * @param {boolean} [props.noP = false] - Set this to true to not display the signup message paragraph + * @param {boolean} [props.noTitle = false] - Set this to true to not display the signup title + * @param {boolean} [props.noBox = false] - Set this to true to not apply the box style + * @returns {JSX.Element} */ export const NewsletterSignup = ({ Link = false, noP = false, noTitle = false, noBox = false }) => { if (!Link) Link = WebLink @@ -120,11 +125,13 @@ export const NewsletterSignup = ({ Link = false, noP = false, noTitle = false, n ) } -/* - * Component to handle newsletter unsubscribe links +/** + * Component for handling newsletter unsubscribe links * - * @params {object} props - All React props - * @param {function} props.Link - An optional framework-specific Link component + * @component + * @param {object} props - All component props + * @param {React.FC} [props.Link = false] - An optional framework-specific Link component + * @returns {JSX.Element} */ export const NewsletterUnsubscribe = ({ Link = false }) => { if (!Link) Link = WebLink diff --git a/packages/react/mkdocs.sh b/packages/react/mkdocs.sh index edc1f9764b8..b7a93a97d65 100755 --- a/packages/react/mkdocs.sh +++ b/packages/react/mkdocs.sh @@ -23,3 +23,4 @@ jsdoc -c jsdoc.json components/Link/* > ../../sites/dev/prebuild/jsdoc/react/com jsdoc -c jsdoc.json components/Logo/* > ../../sites/dev/prebuild/jsdoc/react/components/logo.json jsdoc -c jsdoc.json components/Mini/* > ../../sites/dev/prebuild/jsdoc/react/components/mini.json jsdoc -c jsdoc.json components/Modal/* > ../../sites/dev/prebuild/jsdoc/react/components/modal.json +jsdoc -c jsdoc.json components/Newsletter/* > ../../sites/dev/prebuild/jsdoc/react/components/newsletter.json diff --git a/sites/dev/docs/reference/packages/react/components/newsletter/readme.mdx b/sites/dev/docs/reference/packages/react/components/newsletter/readme.mdx index 0976f817462..d732995e9b2 100644 --- a/sites/dev/docs/reference/packages/react/components/newsletter/readme.mdx +++ b/sites/dev/docs/reference/packages/react/components/newsletter/readme.mdx @@ -2,6 +2,23 @@ title: Newsletter --- -:::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 * as jsdoc from '@site/prebuild/jsdoc/components.newsletter.mjs' +import { NewsletterSignup, NewsletterUnsubscribe } from '@freesewing/react/components/Newsletter' + + + +The __Newsletter__ component family provides the following components: + +- [NewsletterSignup](#newslettersignup) +- [NewsletterUnsubscribe](#newsletterunsubscribe) + +## NewsletterSignup + + +## NewsletterUnsubscribe + + + + From 062eb497e9dba424324ea5bc96a181e7ba6cde51 Mon Sep 17 00:00:00 2001 From: joostdecock Date: Sun, 25 May 2025 13:39:56 +0200 Subject: [PATCH 35/74] [react] feat: Added docs for components/Null --- packages/react/components/Null/index.mjs | 5 ++++- packages/react/mkdocs.sh | 1 + .../packages/react/components/null/readme.mdx | 20 ++++++++++++++++--- 3 files changed, 22 insertions(+), 4 deletions(-) diff --git a/packages/react/components/Null/index.mjs b/packages/react/components/Null/index.mjs index a0c82072e47..c388d3570c3 100644 --- a/packages/react/components/Null/index.mjs +++ b/packages/react/components/Null/index.mjs @@ -1,6 +1,9 @@ import React from 'react' -/* +/** * Sometimes, you just want a component that does nothing + * + * @component + * @returns null */ export const Null = () => null diff --git a/packages/react/mkdocs.sh b/packages/react/mkdocs.sh index b7a93a97d65..93a796e3982 100755 --- a/packages/react/mkdocs.sh +++ b/packages/react/mkdocs.sh @@ -24,3 +24,4 @@ jsdoc -c jsdoc.json components/Logo/* > ../../sites/dev/prebuild/jsdoc/react/com jsdoc -c jsdoc.json components/Mini/* > ../../sites/dev/prebuild/jsdoc/react/components/mini.json jsdoc -c jsdoc.json components/Modal/* > ../../sites/dev/prebuild/jsdoc/react/components/modal.json jsdoc -c jsdoc.json components/Newsletter/* > ../../sites/dev/prebuild/jsdoc/react/components/newsletter.json +jsdoc -c jsdoc.json components/Null/* > ../../sites/dev/prebuild/jsdoc/react/components/null.json diff --git a/sites/dev/docs/reference/packages/react/components/null/readme.mdx b/sites/dev/docs/reference/packages/react/components/null/readme.mdx index dade947e6b9..c67c266db93 100644 --- a/sites/dev/docs/reference/packages/react/components/null/readme.mdx +++ b/sites/dev/docs/reference/packages/react/components/null/readme.mdx @@ -2,6 +2,20 @@ title: 'Null' --- -:::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 * as jsdoc from '@site/prebuild/jsdoc/components.null.mjs' +import { Null } from '@freesewing/react/components/Null' + + + +The __Null__ component family provides the following components: + +- [Null](#null) + +## Null + + + + From fa5bad3d0717b54457e2c68d9d24dcb4fad9b50a Mon Sep 17 00:00:00 2001 From: joostdecock Date: Sun, 25 May 2025 13:51:36 +0200 Subject: [PATCH 36/74] [react] feat: Added docs for components/Number --- packages/react/components/Number/index.mjs | 13 +++++++++++-- packages/react/mkdocs.sh | 1 + .../react/components/number/_examples.js | 19 +++++++++++++++++++ .../react/components/number/readme.mdx | 18 +++++++++++++++--- 4 files changed, 46 insertions(+), 5 deletions(-) create mode 100644 sites/dev/docs/reference/packages/react/components/number/_examples.js diff --git a/packages/react/components/Number/index.mjs b/packages/react/components/Number/index.mjs index ec47f5da623..6f06a05dfaf 100644 --- a/packages/react/components/Number/index.mjs +++ b/packages/react/components/Number/index.mjs @@ -1,10 +1,19 @@ import React from 'react' +/** + * A component to display a number or character inside a circle + * + * @component + * @param {object} props - All component props + * @param {number|string} props.nr - The number to display + * @param {string} [props.color = secondary] - One of the DaisyUI color names + * @returns {JSX.Element} + */ export const NumberCircle = ({ nr, color = 'secondary' }) => ( {nr} diff --git a/packages/react/mkdocs.sh b/packages/react/mkdocs.sh index 93a796e3982..3dc11d45ee0 100755 --- a/packages/react/mkdocs.sh +++ b/packages/react/mkdocs.sh @@ -25,3 +25,4 @@ jsdoc -c jsdoc.json components/Mini/* > ../../sites/dev/prebuild/jsdoc/react/com jsdoc -c jsdoc.json components/Modal/* > ../../sites/dev/prebuild/jsdoc/react/components/modal.json jsdoc -c jsdoc.json components/Newsletter/* > ../../sites/dev/prebuild/jsdoc/react/components/newsletter.json jsdoc -c jsdoc.json components/Null/* > ../../sites/dev/prebuild/jsdoc/react/components/null.json +jsdoc -c jsdoc.json components/Number/* > ../../sites/dev/prebuild/jsdoc/react/components/number.json diff --git a/sites/dev/docs/reference/packages/react/components/number/_examples.js b/sites/dev/docs/reference/packages/react/components/number/_examples.js new file mode 100644 index 00000000000..729936f7195 --- /dev/null +++ b/sites/dev/docs/reference/packages/react/components/number/_examples.js @@ -0,0 +1,19 @@ +import React from 'react' +import { NumberCircle } from '@freesewing/react/components/Number' + +const colors = ['primary', 'secondary', 'accent', 'neutral', 'success', 'warning', 'error', 'info'] + +export const NumberCircleExample = () => ( +
    +
    + Default props + +
    + {colors.map((c, i) => ( +
    + color = {c} + +
    + ))} +
    +) diff --git a/sites/dev/docs/reference/packages/react/components/number/readme.mdx b/sites/dev/docs/reference/packages/react/components/number/readme.mdx index fa7f304f082..7460ea17e6c 100644 --- a/sites/dev/docs/reference/packages/react/components/number/readme.mdx +++ b/sites/dev/docs/reference/packages/react/components/number/readme.mdx @@ -1,7 +1,19 @@ --- title: Number --- +import { DocusaurusDoc } from '@freesewing/react/components/Docusaurus' +import { ComponentDocs } from '@site/src/components/component-docs.js' +import * as jsdoc from '@site/prebuild/jsdoc/components.number.mjs' +import { NumberCircleExample } from './_examples.js' -:::note -This page is yet to be created -::: + + + +The __Number__ component family provides the following components: + +- [NumberCircle](#numbercircle) + +## NumberCircle + + + From d0baf7cece035b52d76c1d1347d3843da6ea98e5 Mon Sep 17 00:00:00 2001 From: joostdecock Date: Sun, 25 May 2025 14:02:45 +0200 Subject: [PATCH 37/74] [react] feat: Added docs for components/Patrons --- packages/react/components/Patrons/index.mjs | 39 +++++++++++++++++++ packages/react/mkdocs.sh | 1 + .../react/components/patrons/readme.mdx | 30 ++++++++++++-- 3 files changed, 67 insertions(+), 3 deletions(-) diff --git a/packages/react/components/Patrons/index.mjs b/packages/react/components/Patrons/index.mjs index 7d9250d82c7..06dd72247c5 100644 --- a/packages/react/components/Patrons/index.mjs +++ b/packages/react/components/Patrons/index.mjs @@ -4,6 +4,18 @@ import { linkClasses } from '@freesewing/utils' import React, { useEffect, useState } from 'react' import { useAccount } from '@freesewing/react/hooks/useAccount' +/** + * A component to ask people to support FreeSewing financially + * + * This component will pass down all props to the Subscribe component + * + * @component + * @param {object} props - All component props + * @param {boolean} [props.dense = undefined] - Whether to render a more dense view + * @param {object} [props.js = undefined] - An optional Javascript Object to highlight + * @param {JSX.Element} props.children - The component children, will be rendered if props.js is not set + * @returns {JSX.Element} + */ export const PleaseSubscribe = (props = {}) => (
    (
    ) +/** + * A component that shows a plea for financial support + * + * @component + * @param {object} props - All component props + * @returns {JSX.Element} + */ export const Plea = () => (

    @@ -71,6 +90,17 @@ const PaypalFormBody = ({ amount, period, currency }) => ( ) +/** + * A component to set up a finciancial subscription to FreeSewing, also can handle one-time donations + * + * @component + * @param {object} props - All component props + * @param {string} [props.color = secondary] - One of the DaisyUI colors + * @param {boolean} [props.subscribeOnly = undefined] - Set this to true to remove the option to make a one-time donation + * @param {number} [props.amountPreset = 25] - The amount to preset + * @param {number} [props.periodPreset = m] - The period to preset + * @returns {JSX.Element} + */ export const Subscribe = ({ color = 'secondary', subscribeOnly, @@ -190,6 +220,15 @@ export const Subscribe = ({ ) } +/** + * A component that renders the signed name for joost, the FreeSewing maintainer, as SVG + * + * @component + * @param {object} props - All component props + * @param {string} [props.className = 'tw:w-32'] - Allows you to override the styling, including the size + * @param {number} [props.stroke = 0] - An optional stroke width + * @returns {JSX.Element} + */ export const Joost = ({ className = 'tw:w-32', stroke = 0 }) => ( ../../sites/dev/prebuild/jsdoc/react/co jsdoc -c jsdoc.json components/Newsletter/* > ../../sites/dev/prebuild/jsdoc/react/components/newsletter.json jsdoc -c jsdoc.json components/Null/* > ../../sites/dev/prebuild/jsdoc/react/components/null.json jsdoc -c jsdoc.json components/Number/* > ../../sites/dev/prebuild/jsdoc/react/components/number.json +jsdoc -c jsdoc.json components/Patrons/* > ../../sites/dev/prebuild/jsdoc/react/components/patrons.json diff --git a/sites/dev/docs/reference/packages/react/components/patrons/readme.mdx b/sites/dev/docs/reference/packages/react/components/patrons/readme.mdx index e6c0a41ee61..9b8b35e223e 100644 --- a/sites/dev/docs/reference/packages/react/components/patrons/readme.mdx +++ b/sites/dev/docs/reference/packages/react/components/patrons/readme.mdx @@ -1,7 +1,31 @@ --- title: Patrons --- +import { DocusaurusDoc } from '@freesewing/react/components/Docusaurus' +import { ComponentDocs } from '@site/src/components/component-docs.js' +import * as jsdoc from '@site/prebuild/jsdoc/components.patrons.mjs' +import { Joost, Plea, PleaseSubscribe, Subscribe } from '@freesewing/react/components/Patrons' -:::note -This page is yet to be created -::: + + + +The __Patrons__ component family provides the following components: + +- [Joost](#joost) +- [Plea](#plea) +- [PleaseSubscribe](#pleasesubscribe) +- [Subscribe](#subscribe) + +## Joost + + +## Plea + + +## PleaseSubscribe + + +## Subscribe + + + From 22a89f12d3a964fb8071ca545b3c2acd43172730 Mon Sep 17 00:00:00 2001 From: joostdecock Date: Sun, 25 May 2025 16:29:57 +0200 Subject: [PATCH 38/74] feat(dev): Added react docs for Pattern + refactor This adds support for not only documenating components, but also constants and functions that may be exported next to components. --- .../react/components/DiffViewer/index.mjs | 17 + packages/react/components/Echart/index.mjs | 6 + .../react/components/LineDrawing/index.mjs | 35 +- packages/react/components/Pattern/circle.mjs | 8 + packages/react/components/Pattern/defs.mjs | 20 +- packages/react/components/Pattern/grid.mjs | 11 +- packages/react/components/Pattern/group.mjs | 10 +- packages/react/components/Pattern/index.mjs | 35 +- packages/react/components/Pattern/part.mjs | 28 + packages/react/components/Pattern/path.mjs | 14 + packages/react/components/Pattern/point.mjs | 15 + packages/react/components/Pattern/snippet.mjs | 10 +- packages/react/components/Pattern/stack.mjs | 13 + packages/react/components/Pattern/svg.mjs | 15 + packages/react/components/Pattern/text.mjs | 28 + packages/react/components/Pattern/utils.mjs | 95 ++- packages/react/mkdocs.sh | 2 + .../react/components/account/readme.mdx | 82 +- .../react/components/admin/readme.mdx | 16 +- .../react/components/breadcrumbs/readme.mdx | 7 +- .../react/components/button/readme.mdx | 13 +- .../react/components/collection/readme.mdx | 11 +- .../react/components/control/readme.mdx | 7 +- .../react/components/curatedset/readme.mdx | 16 +- .../react/components/diffviewer/readme.mdx | 35 +- .../react/components/docusaurus/readme.mdx | 19 +- .../react/components/echart/readme.mdx | 23 +- .../react/components/editor/readme.mdx | 7 +- .../react/components/heading/readme.mdx | 32 +- .../react/components/highlight/readme.mdx | 7 +- .../packages/react/components/icon/readme.mdx | 748 +++++++++++++----- .../react/components/input/readme.mdx | 52 +- .../packages/react/components/json/readme.mdx | 12 +- .../react/components/keyval/readme.mdx | 13 +- .../react/components/layout/readme.mdx | 28 +- .../react/components/linedrawing/readme.mdx | 538 ++++++++----- .../packages/react/components/link/readme.mdx | 22 +- .../packages/react/components/logo/readme.mdx | 12 +- .../react/components/markdown/readme.mdx | 12 +- .../packages/react/components/mini/readme.mdx | 22 +- .../react/components/modal/readme.mdx | 11 +- .../react/components/newsletter/readme.mdx | 13 +- .../packages/react/components/null/readme.mdx | 11 +- .../react/components/number/readme.mdx | 11 +- .../react/components/patrons/readme.mdx | 20 +- .../react/components/pattern/_examples.js | 26 + .../react/components/pattern/readme.mdx | 126 ++- sites/dev/scripts/prebuild.mjs | 49 +- sites/dev/src/components/constant-docs.js | 33 + sites/dev/src/components/function-docs.js | 89 +++ 50 files changed, 1816 insertions(+), 669 deletions(-) create mode 100644 sites/dev/docs/reference/packages/react/components/pattern/_examples.js create mode 100644 sites/dev/src/components/constant-docs.js create mode 100644 sites/dev/src/components/function-docs.js diff --git a/packages/react/components/DiffViewer/index.mjs b/packages/react/components/DiffViewer/index.mjs index 693422bd280..869fa873619 100644 --- a/packages/react/components/DiffViewer/index.mjs +++ b/packages/react/components/DiffViewer/index.mjs @@ -2,7 +2,24 @@ import React from 'react' import { diffWords, diffJson } from 'diff' import ReactDiffViewer from 'react-diff-viewer-continued' +/** + * A method to diff JSON content + * + * @public + * @param {object} from - Once side of the diff + * @param {object} to - Other side of the diff + * @returns {object} + */ export const diffJSON = (from, to) => diffJson(from, to) + +/** + * A method to diff string content + * + * @public + * @param {string} from - Once side of the diff + * @param {string} to - Other side of the diff + * @returns {object} + */ export const diffCheck = (from, to) => diffWords(from, to) export const DiffViewer = (props) => diff --git a/packages/react/components/Echart/index.mjs b/packages/react/components/Echart/index.mjs index 66a5a8b9739..946d8d43dc9 100644 --- a/packages/react/components/Echart/index.mjs +++ b/packages/react/components/Echart/index.mjs @@ -3,6 +3,12 @@ import * as _echarts from 'echarts' import ReactECharts from 'echarts-for-react' import { Popout } from '@freesewing/react/components/Popout' +/** + * Re-export of Apache Echarts + * + * @public + * @constant + */ export const echarts = _echarts echarts.registerTheme('light', { diff --git a/packages/react/components/LineDrawing/index.mjs b/packages/react/components/LineDrawing/index.mjs index 0725315999a..beb26ca676a 100644 --- a/packages/react/components/LineDrawing/index.mjs +++ b/packages/react/components/LineDrawing/index.mjs @@ -36,10 +36,13 @@ import { Uma, UmaFront, UmaBack } from './uma.mjs' import { Umbra, UmbraFront, UmbraBack } from './umbra.mjs' import { Wahid, WahidFront, WahidBack } from './wahid.mjs' -/* - * Bundle all fronts +/** + * An object where the key is the design name and the value the front LineDrawing component + * + * @constant + * @public */ -const lineDrawingsFront = { +export const lineDrawingsFront = { aaron: AaronFront, albert: AlbertFront, bee: BeeFront, @@ -83,10 +86,13 @@ const lineDrawingsFront = { wahid: WahidFront, } -/* - * Bundle all backs +/** + * An object where the key is the design name and the value the back LineDrawing component + * + * @constant + * @public */ -const lineDrawingsBack = { +export const lineDrawingsBack = { aaron: AaronBack, bella: BellaBack, bent: BentBack, @@ -116,10 +122,13 @@ const lineDrawingsBack = { wahid: WahidBack, } -/* - * Bundle all linedrawings +/** + * An object where the key is the design name and the value the full LineDrawing component + * + * @constant + * @public */ -const lineDrawings = { +export const lineDrawings = { aaron: Aaron, albert: Albert, bee: Bee, @@ -146,17 +155,13 @@ const lineDrawings = { huey: Huey, hugo: Hugo, jane: Jane, - lucy: Lucy, lumina: Lumina, lumira: Lumira, lunetius: Lunetius, noble: Noble, - simon: Simon, - teagan: Teagan, - tristan: Tristan, uma: Uma, umbra: Umbra, @@ -167,10 +172,6 @@ const lineDrawings = { * Named exports */ export { - // Bundles - lineDrawings, - lineDrawingsBack, - lineDrawingsFront, // Aaron Aaron, AaronFront, diff --git a/packages/react/components/Pattern/circle.mjs b/packages/react/components/Pattern/circle.mjs index 86609f251e7..f16848fa563 100644 --- a/packages/react/components/Pattern/circle.mjs +++ b/packages/react/components/Pattern/circle.mjs @@ -1,5 +1,13 @@ import React from 'react' +/** + * A component to render a circle inside a FreeSewing pattern + * + * @component + * @param {object} props - All component props + * @param {object} props.point - The point that holds the circle info + * @returns {JSX.Element} + */ export const Circle = ({ point }) => point.attributes.list['data-circle'].map((r, i) => { const circleProps = point.attributes.circleProps diff --git a/packages/react/components/Pattern/defs.mjs b/packages/react/components/Pattern/defs.mjs index ce6ddcedad0..7160dc5e8d8 100644 --- a/packages/react/components/Pattern/defs.mjs +++ b/packages/react/components/Pattern/defs.mjs @@ -86,12 +86,20 @@ const PaperlessDefs = ({ units = 'metric', stacks }) => ) -export const Defs = (props) => - props.svg ? ( +/** + * A component to render the defs section of an SVG element inside a FreeSewing pattern + * + * @component + * @param {object} props - All component props + * @param {Svg} props.svg - The FreeSewing Svg object for the pattern + * @param {object} props.settings - The settings for the pattern + * @param {object} props.stacks - The pattern stacks + * @returns {JSX.Element} + */ +export const Defs = ({ svg, stacks, settings = {} }) => + svg ? ( - {props.svg.defs.list ? sanitize(Object.values(props.svg.defs.list).join('')) : null} - {props.settings[0].paperless ? ( - - ) : null} + {svg.defs.list ? sanitize(Object.values(svg.defs.list).join('')) : null} + {settings[0]?.paperless ? : null} ) : null diff --git a/packages/react/components/Pattern/grid.mjs b/packages/react/components/Pattern/grid.mjs index 2764309624e..4baa125cf66 100644 --- a/packages/react/components/Pattern/grid.mjs +++ b/packages/react/components/Pattern/grid.mjs @@ -1,7 +1,14 @@ -// __SDEFILE__ - This file is a dependency for the stand-alone environment -// eslint-disable-next-line no-unused-vars import React from 'react' +/** + * A component to render the grid for a paperless FreeSewing pattern' stack + * + * @component + * @param {object} props - All component props + * @param {Stack} props.stack - The FreeSewing Stack object for the pattern + * @param {string} props.stackName - The name of the FreeSewing Stack + * @returns {JSX.Element} + */ export const Grid = ({ stack, stackName }) => ( ( {props.children} diff --git a/packages/react/components/Pattern/index.mjs b/packages/react/components/Pattern/index.mjs index 656e61ed5e9..d344951772d 100644 --- a/packages/react/components/Pattern/index.mjs +++ b/packages/react/components/Pattern/index.mjs @@ -16,8 +16,11 @@ import { Circle as DefaultCircle } from './circle.mjs' import { getId, getProps, withinPartBounds, translateStrings } from './utils.mjs' import { Link as WebLink } from '@freesewing/react/components/Link' -/* - * Allow people to override these components +/** + * Default pattern components that you can override + * + * @public + * @constant */ const defaultComponents = { Svg: DefaultSvg, @@ -34,9 +37,17 @@ const defaultComponents = { Circle: DefaultCircle, } -/* - * The pattern component - * FIXME: document props +/** + * A component to render a FreeSewing pattern based on its renderProps + * + * @component + * @param {object} props - All component props + * @param {JSX.Element} props.children - The component children, if they are set, we will not render any stacks + * @param {string} [props.className = 'freesewing pattern'] - SVG classes to set on the SVG element + * @param {object} [props.components = {}] - Any custom components to use in the pattern + * @param {object} [props.string = {}] - Strings to use for translation + * @param {object} props.renderProps - The pattern's renderProps as generated by FreeSewing core + * @returns {JSX.Element} */ const Pattern = forwardRef((props, ref) => { if (!props.renderProps) return null @@ -102,3 +113,17 @@ export { // The Pattern component itself Pattern, } + +// Also export default components +export const Svg = DefaultSvg +export const Defs = DefaultDefs +export const Group = DefaultGroup +export const Stack = DefaultStack +export const Part = DefaultPart +export const Point = DefaultPoint +export const Path = DefaultPath +export const Snippet = DefaultSnippet +export const Grid = DefaultGrid +export const Text = DefaultText +export const TextOnPath = DefaultTextOnPath +export const Circle = DefaultCircle diff --git a/packages/react/components/Pattern/part.mjs b/packages/react/components/Pattern/part.mjs index c044671e703..c21fec65d2f 100644 --- a/packages/react/components/Pattern/part.mjs +++ b/packages/react/components/Pattern/part.mjs @@ -2,6 +2,20 @@ import React, { forwardRef } from 'react' import { getId, getProps } from './utils.mjs' +/** + * A component to render an inner FreeSewing Part in a pattern (no group) + * + * @component + * @param {object} props - All component props + * @param {string} props.stackName - The name of the stack the part belongs to + * @param {string} props.partName - The name of the part + * @param {object} props.part - The part object itself + * @param {object} props.settings - The pattern settings object + * @param {object} props.components - An object holding the pattern compnents to use + * @param {object} props.strings - An object holding translations + * @param {object} props.drillProps - An object holding extra props to pass down (used in Xray mode) + * @returns {JSX.Element} + */ export const PartInner = forwardRef( ({ stackName, partName, part, settings, components, strings, drillProps }, ref) => { const { Group, Path, Point, Snippet } = components @@ -50,6 +64,20 @@ export const PartInner = forwardRef( PartInner.displayName = 'PartInner' +/** + * A component to render a FreeSewing Part (group) in a pattern + * + * @component + * @param {object} props - All component props + * @param {string} props.stackName - The name of the stack the part belongs to + * @param {string} props.partName - The name of the part + * @param {object} props.part - The part object itself + * @param {object} props.settings - The pattern settings object + * @param {object} props.components - An object holding the pattern compnents to use + * @param {object} props.strings - An object holding translations + * @param {object} props.drillProps - An object holding extra props to pass down (used in Xray mode) + * @returns {JSX.Element} + */ export const Part = ({ stackName, partName, part, settings, components, strings, drillProps }) => { const { Group } = components diff --git a/packages/react/components/Pattern/path.mjs b/packages/react/components/Pattern/path.mjs index fc9db81d5b0..d4e3cd9f160 100644 --- a/packages/react/components/Pattern/path.mjs +++ b/packages/react/components/Pattern/path.mjs @@ -2,6 +2,20 @@ import React from 'react' import { getId, getProps } from './utils.mjs' +/** + * A component to render a FreeSewing Path in a pattern + * + * @component + * @param {object} props - All component props + * @param {string} props.stackName - The name of the stack the part belongs to + * @param {string} props.partName - The name of the part + * @param {string} props.pathName - The name of the path + * @param {object} props.path - The path object itself + * @param {object} props.settings - The pattern settings object + * @param {object} props.components - An object holding the pattern compnents to use + * @param {object} props.strings - An object holding translations + * @returns {JSX.Element} + */ export const Path = ({ stackName, pathName, path, partName, settings, components, strings }) => { // Don't render hidden paths if (path.hidden) return null diff --git a/packages/react/components/Pattern/point.mjs b/packages/react/components/Pattern/point.mjs index 04298b5c88d..248896585c9 100644 --- a/packages/react/components/Pattern/point.mjs +++ b/packages/react/components/Pattern/point.mjs @@ -2,10 +2,25 @@ import React from 'react' import { withinPartBounds } from './utils.mjs' +/** + * A component to render a FreeSewing Point in a pattern + * + * @component + * @param {object} props - All component props + * @param {string} props.stackName - The name of the stack the part belongs to + * @param {string} props.partName - The name of the part + * @param {string} props.pointName - The name of the point + * @param {object} props.point - The point object itself + * @param {object} props.components - An object holding the pattern compnents to use + * @param {object} props.strings - An object holding translations + * @returns {JSX.Element} + */ export const Point = ({ stackName, partName, pointName, part, point, components, strings }) => { /* * Don't include points outside the part bounding box * Unless the `data-render-always` attribute is set + * + * FIXME: This is undocumented */ if (!withinPartBounds(point, part) && !point.attributes.list['data-render-always']) return null diff --git a/packages/react/components/Pattern/snippet.mjs b/packages/react/components/Pattern/snippet.mjs index 05423df8f0b..741a401c6a1 100644 --- a/packages/react/components/Pattern/snippet.mjs +++ b/packages/react/components/Pattern/snippet.mjs @@ -1,8 +1,16 @@ -// __SDEFILE__ - This file is a dependency for the stand-alone environment // eslint-disable-next-line no-unused-vars import React from 'react' import { getProps } from './utils.mjs' +/** + * A component to render a FreeSewing Snippet in a pattern + * + * @component + * @param {object} props - All component props + * @param {object} props.snippet - The snippet object itself + * @param {object} props.settings - The pattern settings object + * @returns {JSX.Element} + */ export const Snippet = ({ snippet, settings }) => { if (!snippet?.anchor || !snippet.def) return null if (!settings[0].complete && !snippet.attributes.list?.['data-force']?.[0]) return null diff --git a/packages/react/components/Pattern/stack.mjs b/packages/react/components/Pattern/stack.mjs index 4c17fd29ba8..b95dade132a 100644 --- a/packages/react/components/Pattern/stack.mjs +++ b/packages/react/components/Pattern/stack.mjs @@ -1,6 +1,19 @@ import React from 'react' import { getProps } from './utils.mjs' +/** + * A component to render a FreeSewing Stack inside a pattern + * + * @component + * @param {object} props - All component props + * @param {string} props.stackName - The name of the stack the part belongs to + * @param {object} props.stack - The stack object itself + * @param {object} props.settings - The pattern settings object + * @param {object} props.components - An object holding the pattern components to use + * @param {object} props.strings - An object holding translations + * @param {object} props.drillProps - An object holding extra props to pass down (used in Xray mode) + * @returns {JSX.Element} + */ export const Stack = ({ stackName, stack, settings, components, strings, drillProps }) => { const { Group, Part, Grid } = components diff --git a/packages/react/components/Pattern/svg.mjs b/packages/react/components/Pattern/svg.mjs index d5d54fbb2df..8cfdcaa49c2 100644 --- a/packages/react/components/Pattern/svg.mjs +++ b/packages/react/components/Pattern/svg.mjs @@ -2,6 +2,21 @@ import React from 'react' import { forwardRef } from 'react' +/** + * A component to render an SVG tag to hold a FreeSewing pattern + * + * @component + * @param {object} props - All component props + * @param {JSX.Element} props.children - The component children, will be rendered inside the SVG tag + * @param {strign} [props.className = 'freesewing pattern'] - The CSS classes to apply to the SVG tag + * @param {string} [props.embed = true] - Set this to false to output SVG suitable for printing rather than auto-scaled SVG + * @param {number} props.heigth - The pattern height in mm + * @param {string} [props.locale = en] - The locale/language to use + * @param {object} [props.style = {}] - Any additional style to apply to the SVG tag + * @param {object} [props.viewBox = false] - Set this to use a custom viewBox attribute rather than the default 0 0 width height + * @param {number} props.width - The pattern width in mm + * @returns {JSX.Element} + */ export const Svg = forwardRef( ( { diff --git a/packages/react/components/Pattern/text.mjs b/packages/react/components/Pattern/text.mjs index 2b4bf27cd07..46fd035eef2 100644 --- a/packages/react/components/Pattern/text.mjs +++ b/packages/react/components/Pattern/text.mjs @@ -2,6 +2,15 @@ import React from 'react' import { translateStrings } from './utils.mjs' +/** + * A component to render a tspan tag in a FreeSewing pattern + * + * @component + * @param {object} props - All component props + * @param {object} props.point - The point that the text is defined on + * @param {object} strings - The translation strings + * @returns {JSX.Element} + */ export const TextSpans = ({ point, strings }) => { const translated = translateStrings(point.attributes.list['data-text'], strings) const text = [] @@ -27,12 +36,31 @@ export const TextSpans = ({ point, strings }) => { return text } +/** + * A component to render a text tag in a FreeSewing pattern + * + * @component + * @param {object} props - All component props + * @param {object} props.point - The point that the text is defined on + * @param {object} strings - The translation strings + * @returns {JSX.Element} + */ export const Text = ({ point, strings }) => ( ) +/** + * A component to render a text along a path in a FreeSewing pattern + * + * @component + * @param {object} props - All component props + * @param {object} props.path - The path that the text is to be rendered along + * @param {string} props.pathId - The ID of the path + * @param {object} strings - The translation strings + * @returns {JSX.Element} + */ export const TextOnPath = ({ path, pathId, strings }) => { const textPathProps = { xlinkHref: '#' + pathId, diff --git a/packages/react/components/Pattern/utils.mjs b/packages/react/components/Pattern/utils.mjs index 880d51c6887..81f8adfc688 100644 --- a/packages/react/components/Pattern/utils.mjs +++ b/packages/react/components/Pattern/utils.mjs @@ -1,5 +1,47 @@ import React from 'react' +/** + * A method to generated an ID for an object part of a FreeSewing pattern + * + * @public + * @param {object} parameters - All parameters passed as an object + * @param {object} [parameters.settings = {}] - The pattern settings + * @param {string} [parameters.stackName = false] - An optional stack name + * @param {string} [parameters.partName = false] - An optional part name + * @param {string} [parameters.pathName = false] - An optional path name + * @param {string} [parameters.pointName = false] - An optional point name + * @param {string} [parameters.snippetName = false] - An optional snippet name + * @param {string} [parameters.name = false] - An optional name + * @param {Part} parameters.part - The part to check the point against + * @returns {string} + */ +export const getId = ({ + settings = {}, + stackName = false, + partName = false, + pathName = false, + pointName = false, + snippetName = false, + name = false, +}) => { + let id = settings.idPrefix || '' + if (stackName) id += `${stackName}-` + if (partName) id += `${partName}-` + if (pathName) id += `${pathName}-` + if (pointName) id += `${pointName}-` + if (snippetName) id += `${snippetName}-` + if (name) id += name + + return id +} + +/** + * A method to extract React props from an classic object + * + * @public + * @param {object} obj - The object to extract props from + * @returns {object} + */ export const getProps = (obj) => { /** I can't believe it but there seems to be no method on NPM todo this */ const cssKey = (key) => { @@ -38,34 +80,15 @@ export const getProps = (obj) => { return props } -export const withinPartBounds = (point, part) => - point.x >= part.topLeft.x && - point.x <= part.bottomRight.x && - point.y >= part.topLeft.y && - point.y <= part.bottomRight.y - ? true - : false - -export const getId = ({ - settings = {}, - stackName = false, - partName = false, - pathName = false, - pointName = false, - snippetName = false, - name = false, -}) => { - let id = settings.idPrefix || '' - if (stackName) id += `${stackName}-` - if (partName) id += `${partName}-` - if (pathName) id += `${pathName}-` - if (pointName) id += `${pointName}-` - if (snippetName) id += `${snippetName}-` - if (name) id += name - - return id -} - +/** + * A method to translate strings for a FreeSewing pattern + * + * @public + * @param {object} [settings = {}] - The pattern settings + * @param {array} list - An array with strings (or arrays of strings) to translate + * @param {object} [translations = {}] - An object holding translations + * @returns {string} + */ export const translateStrings = (list, translations = {}) => { let translated = '' if (!list) return translated @@ -80,3 +103,19 @@ export const translateStrings = (list, translations = {}) => { return translated } + +/** + * A method to determine whether a FreeSewing point is within the bounding box of a FreeSewing part + * + * @public + * @param {Point} point - The point to check + * @param {Part} part - The part to check the point against + * @returns {boolean} + */ +export const withinPartBounds = (point, part) => + point.x >= part.topLeft.x && + point.x <= part.bottomRight.x && + point.y >= part.topLeft.y && + point.y <= part.bottomRight.y + ? true + : false diff --git a/packages/react/mkdocs.sh b/packages/react/mkdocs.sh index f87a3dca897..dbed94c6b74 100755 --- a/packages/react/mkdocs.sh +++ b/packages/react/mkdocs.sh @@ -9,6 +9,7 @@ jsdoc -c jsdoc.json components/Collection/* > ../../sites/dev/prebuild/jsdoc/rea jsdoc -c jsdoc.json components/Control/* > ../../sites/dev/prebuild/jsdoc/react/components/control.json jsdoc -c jsdoc.json components/CuratedSet/* > ../../sites/dev/prebuild/jsdoc/react/components/curatedset.json jsdoc -c jsdoc.json components/Docusaurus/* > ../../sites/dev/prebuild/jsdoc/react/components/docusaurus.json +jsdoc -c jsdoc.json components/DiffViewer/* > ../../sites/dev/prebuild/jsdoc/react/components/diffviewer.json jsdoc -c jsdoc.json components/Echart/* > ../../sites/dev/prebuild/jsdoc/react/components/echart.json jsdoc -c jsdoc.json components/Editor/* > ../../sites/dev/prebuild/jsdoc/react/components/editor.json jsdoc -c jsdoc.json components/Heading/* > ../../sites/dev/prebuild/jsdoc/react/components/heading.json @@ -27,3 +28,4 @@ jsdoc -c jsdoc.json components/Newsletter/* > ../../sites/dev/prebuild/jsdoc/rea jsdoc -c jsdoc.json components/Null/* > ../../sites/dev/prebuild/jsdoc/react/components/null.json jsdoc -c jsdoc.json components/Number/* > ../../sites/dev/prebuild/jsdoc/react/components/number.json jsdoc -c jsdoc.json components/Patrons/* > ../../sites/dev/prebuild/jsdoc/react/components/patrons.json +jsdoc -c jsdoc.json components/Pattern/* > ../../sites/dev/prebuild/jsdoc/react/components/pattern.json 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 1289cc344ad..620ce84d3c3 100644 --- a/sites/dev/docs/reference/packages/react/components/account/readme.mdx +++ b/sites/dev/docs/reference/packages/react/components/account/readme.mdx @@ -89,7 +89,11 @@ import { -The **Account** component family provides the following components: +- [Components](#components) + +## Components + +The **Account** component family provides the following [components](#components): - [AccountStatus ](#accountstatus) - [Apikeys ](#apikeys) @@ -130,47 +134,47 @@ The **Account** component family provides the following components: - [UserRole ](#userrole) - [Website ](#website) -## AccountStatus +### AccountStatus -## Apikeys +### Apikeys -## Avatar +### Avatar -## Bio +### Bio -## BookmarkButton +### BookmarkButton -## Bookmarks +### Bookmarks -## Compare +### Compare -## Consent +### Consent -## Control +### Control -## Email +### Email -## EmailChangeConfirmation +### EmailChangeConfirmation #### Requires a valid callback URL This component will not work without the proper id{' '} @@ -180,111 +184,111 @@ The **Account** component family provides the following components: -## Export +### Export -## Github +### Github -## ImportSet +### ImportSet -## Instagram +### Instagram -## Links +### Links -## Mastodon +### Mastodon -## Mfa +### Mfa -## MsetCard +### MsetCard -## NewSet +### NewSet -## Newsletter +### Newsletter -## 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 diff --git a/sites/dev/docs/reference/packages/react/components/admin/readme.mdx b/sites/dev/docs/reference/packages/react/components/admin/readme.mdx index 1501ee4d0f9..609b6a170b7 100644 --- a/sites/dev/docs/reference/packages/react/components/admin/readme.mdx +++ b/sites/dev/docs/reference/packages/react/components/admin/readme.mdx @@ -8,25 +8,25 @@ import { jsdocSubscriberAdministration, jsdocUserAdministration, } from '@site/prebuild/jsdoc/components.admin.mjs' -import { - UserAdministration, - SubscriberAdministration -} from '@freesewing/react/components/Admin' +import { UserAdministration, SubscriberAdministration } from '@freesewing/react/components/Admin' -The **Admin** component family provides the following components: +- [Components](#components) + +## Components + +The **Admin** component family provides the following [components](#components): - [SubscriberAdministration ](#subscriberadministration) - [UserAdministration ](#useradministration) -## SubscriberAdministration +### SubscriberAdministration -## UserAdministration +### UserAdministration - diff --git a/sites/dev/docs/reference/packages/react/components/breadcrumbs/readme.mdx b/sites/dev/docs/reference/packages/react/components/breadcrumbs/readme.mdx index e3953bffafc..443faaf876a 100644 --- a/sites/dev/docs/reference/packages/react/components/breadcrumbs/readme.mdx +++ b/sites/dev/docs/reference/packages/react/components/breadcrumbs/readme.mdx @@ -10,15 +10,18 @@ import { BreadcrumbsExample } from './_examples.js' +- [Components](#components) + +## Components + The **Breadcrumbs** component family provides the following components: - [Breadcrumbs ](#breadcrumbs) -## Breadcrumbs +### Breadcrumbs This component is different from the Docusaurus breadcrumbs
    - 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 863fd8858ee..1d4272bdf79 100644 --- a/sites/dev/docs/reference/packages/react/components/button/readme.mdx +++ b/sites/dev/docs/reference/packages/react/components/button/readme.mdx @@ -4,21 +4,28 @@ title: Button import { DocusaurusDoc } from '@freesewing/react/components/Docusaurus' import { ComponentDocs } from '@site/src/components/component-docs.js' -import { jsdocCopyToClipboardButton, jsdocIconButton } from '@site/prebuild/jsdoc/components.button.mjs' +import { + jsdocCopyToClipboardButton, + jsdocIconButton, +} from '@site/prebuild/jsdoc/components.button.mjs' import { CopyToClipboardButtonExample, IconButtonExample } from './_examples.js' +- [Components](#components) + +## Components + The **Button** component family provides the following components: - [CopyToClipboardButton](#copytoclipboardbutton) - [IconButton](#iconbutton) -## CopyToClipboardButton +### CopyToClipboardButton -## IconButton +### IconButton diff --git a/sites/dev/docs/reference/packages/react/components/collection/readme.mdx b/sites/dev/docs/reference/packages/react/components/collection/readme.mdx index 1946dd1b470..0733d7c0bf8 100644 --- a/sites/dev/docs/reference/packages/react/components/collection/readme.mdx +++ b/sites/dev/docs/reference/packages/react/components/collection/readme.mdx @@ -9,16 +9,21 @@ import { CollectionExample, DesignInfoExample } from './_examples.js' +- [Components](#components) + +## Components + The **Collection** component family provides the following components: - [Collection](#collection) - [DesignInfo](#designinfo) -## Collection +### Collection + -## DesignInfo +### DesignInfo + - diff --git a/sites/dev/docs/reference/packages/react/components/control/readme.mdx b/sites/dev/docs/reference/packages/react/components/control/readme.mdx index e33250a537b..d9bf8cbe002 100644 --- a/sites/dev/docs/reference/packages/react/components/control/readme.mdx +++ b/sites/dev/docs/reference/packages/react/components/control/readme.mdx @@ -9,13 +9,16 @@ import { ControlScoreExample } from './_examples.js' +- [Components](#components) + +## Components + The **Control** component family provides the following components: - [ControlScore](#controlscore) -## ControlScore +### ControlScore - diff --git a/sites/dev/docs/reference/packages/react/components/curatedset/readme.mdx b/sites/dev/docs/reference/packages/react/components/curatedset/readme.mdx index 68fa0f5f24a..a5941d5d759 100644 --- a/sites/dev/docs/reference/packages/react/components/curatedset/readme.mdx +++ b/sites/dev/docs/reference/packages/react/components/curatedset/readme.mdx @@ -4,21 +4,29 @@ title: CuratedSet import { DocusaurusDoc } from '@freesewing/react/components/Docusaurus' import { ComponentDocs } from '@site/src/components/component-docs.js' -import { jsdocCuratedSet, jsdocCuratedSetLineup } from '@site/prebuild/jsdoc/components.curatedset.mjs' +import { + jsdocCuratedSet, + jsdocCuratedSetLineup, +} from '@site/prebuild/jsdoc/components.curatedset.mjs' import { CuratedSetLineupExample, CuratedSetExample } from './_examples.js' +- [Components](#components) + +## Components + The **CuratedSet** component family provides the following components: - [CuratedSet](#curatedset) - [CuratedSetLineup](#curatedsetlineup) -## CuratedSet +### CuratedSet + -## CuratedSetLineup +### CuratedSetLineup + - diff --git a/sites/dev/docs/reference/packages/react/components/diffviewer/readme.mdx b/sites/dev/docs/reference/packages/react/components/diffviewer/readme.mdx index 06c89006715..722551000a8 100644 --- a/sites/dev/docs/reference/packages/react/components/diffviewer/readme.mdx +++ b/sites/dev/docs/reference/packages/react/components/diffviewer/readme.mdx @@ -3,26 +3,45 @@ title: DiffViewer --- import { DocusaurusDoc } from '@freesewing/react/components/Docusaurus' +import { FunctionDocs } from '@site/src/components/function-docs.js' +import * as fndoc from '@site/prebuild/jsdoc/functions.diffviewer.mjs' -The **DiffViewer** component family provides the following components: - -- [DiffViewer](#diffviewer): A re-export of [react-diff-viewer-continued][dv] - -In addition, it also exports the following functions: - -- [diffJSON](#diffjson): A re-export of the [diffJson][jsd] function of the [jsdiff package][jsd] -- [diffCheck](#diffcheck): A re-export of the [diffWords][jsd] function of the [jsdiff package][jsd] +- [Components](#components) +- [Functions](#functions) :::tip + #### Not FreeSewing code + This component family only contains re-exports of code by other maintainers.\ Since they are a dependency, we provide them as part of the @freesewing/react package for convenience. Please refer to the documentation for [react-diff-viewer-continued][dv] and [jsdiff][jsd]. ::: +## Components + +The **DiffViewer** component family provides the following components: + +- [DiffViewer](#diffviewer): A re-export of [react-diff-viewer-continued][dv] + +## Functions + +The **DiffViewer** family also exports the following functions: + +- [diffJSON](#diffjson): A re-export of the [diffJson][jsd] function of the [jsdiff package][jsd] +- [diffCheck](#diffcheck): A re-export of the [diffWords][jsd] function of the [jsdiff package][jsd] + +### diffJSON + + + +### diffCheck + + + [dv]: https://github.com/aeolun/react-diff-viewer-continued?tab=readme-ov-file#usage diff --git a/sites/dev/docs/reference/packages/react/components/docusaurus/readme.mdx b/sites/dev/docs/reference/packages/react/components/docusaurus/readme.mdx index 452dc35e598..7e6df792d20 100644 --- a/sites/dev/docs/reference/packages/react/components/docusaurus/readme.mdx +++ b/sites/dev/docs/reference/packages/react/components/docusaurus/readme.mdx @@ -9,27 +9,30 @@ import { jsdocDocusaurusPage, jsdocNavbarItem, } from '@site/prebuild/jsdoc/components.docusaurus.mjs' -import { - DocusaurusDocExample, - DocusaurusPageExample, - NavbarItemExample, -} from './_examples.js' +import { DocusaurusDocExample, DocusaurusPageExample, NavbarItemExample } from './_examples.js' +- [Components](#components) + +## Components + The **Docusaurus** component family provides the following components: - [DocusaurusDoc](#docusaurusdoc) - [DocusaurusPage](#docusauruspage) - [NavbarItem](#navbaritem) -## DocusaurusDoc +### DocusaurusDoc + -## DocusaurusPage +### DocusaurusPage + -## NavbarItem +### NavbarItem + diff --git a/sites/dev/docs/reference/packages/react/components/echart/readme.mdx b/sites/dev/docs/reference/packages/react/components/echart/readme.mdx index 22e9207f051..61dd432ed4c 100644 --- a/sites/dev/docs/reference/packages/react/components/echart/readme.mdx +++ b/sites/dev/docs/reference/packages/react/components/echart/readme.mdx @@ -6,29 +6,40 @@ import { DocusaurusDoc } from '@freesewing/react/components/Docusaurus' import { ComponentDocs } from '@site/src/components/component-docs.js' import { jsdocChartWrapper } from '@site/prebuild/jsdoc/components.echart.mjs' import { ChartWrapperExample } from './_examples.js' +import { ConstantDocs } from '@site/src/components/constant-docs.js' +import * as cdoc from '@site/prebuild/jsdoc/constants.echart.mjs' +- [Components](#components) +- [Constants](#constants) + +## Components + The **Echart** component family provides the following components: - [ChartWrapper](#chartwrapper) -In addition, it also exports the following objects: - -- [echarts](#echarts) - ## EchartWrapper -## echarts +## Constants -This is a re-export of [Apache Echarts](https://echarts.apache.org/). +The **Echart** family provides the following constants: + +- [echarts](#echarts) + +### echarts :::tip + #### Not FreeSewing code + We re-export echarts for convenience. Please refer to the documentation for [Apache Echarts](https://echarts.apache.org/). ::: + + diff --git a/sites/dev/docs/reference/packages/react/components/editor/readme.mdx b/sites/dev/docs/reference/packages/react/components/editor/readme.mdx index 9ff01e78407..7399f710beb 100644 --- a/sites/dev/docs/reference/packages/react/components/editor/readme.mdx +++ b/sites/dev/docs/reference/packages/react/components/editor/readme.mdx @@ -9,11 +9,16 @@ import { Editor } from '@freesewing/react/components/Editor' +- [Components](#components) + +## Components + The **Editor** component family provides the following components: - [Editor](#editor) -## Editor +### Editor + diff --git a/sites/dev/docs/reference/packages/react/components/heading/readme.mdx b/sites/dev/docs/reference/packages/react/components/heading/readme.mdx index 10b819bdc54..e4061416edc 100644 --- a/sites/dev/docs/reference/packages/react/components/heading/readme.mdx +++ b/sites/dev/docs/reference/packages/react/components/heading/readme.mdx @@ -12,17 +12,14 @@ import { jsdocH5, jsdocH6, } from '@site/prebuild/jsdoc/components.heading.mjs' -import { - H1Example, - H2Example, - H3Example, - H4Example, - H5Example, - H6Example, -} from './_examples.js' +import { H1Example, H2Example, H3Example, H4Example, H5Example, H6Example } from './_examples.js' +- [Components](#components) + +## Components + The **Button** component family provides the following components: - [H1](#h1) @@ -32,23 +29,28 @@ The **Button** component family provides the following components: - [H5](#h5) - [H6](#h6) -## H1 +### H1 + -## H2 +### H2 + -## H3 +### H3 + -## H4 +### H4 + -## H5 +### H5 + -## H6 +### H6 + - diff --git a/sites/dev/docs/reference/packages/react/components/highlight/readme.mdx b/sites/dev/docs/reference/packages/react/components/highlight/readme.mdx index e086cd9bf7e..09a6d1bcdc8 100644 --- a/sites/dev/docs/reference/packages/react/components/highlight/readme.mdx +++ b/sites/dev/docs/reference/packages/react/components/highlight/readme.mdx @@ -9,13 +9,16 @@ import { HighlightExample } from './_examples.js' +- [Components](#components) + +## Components + The **Highlight** component family provides the following components: - [Highlight](#highlight) -## Highlight +### Highlight - diff --git a/sites/dev/docs/reference/packages/react/components/icon/readme.mdx b/sites/dev/docs/reference/packages/react/components/icon/readme.mdx index 0b45e4926d7..05e1846b64c 100644 --- a/sites/dev/docs/reference/packages/react/components/icon/readme.mdx +++ b/sites/dev/docs/reference/packages/react/components/icon/readme.mdx @@ -116,7 +116,11 @@ import { -The __Icon__ component family provides the following components: +- [Components](#components) + +## Components + +The **Icon** component family provides the following components: - [ApplyIcon](#applyicon) - [AsideIcon](#asideicon) @@ -230,430 +234,748 @@ The __Icon__ component family provides the following components: To make it easier to pick an Icon, here is a visual overview:
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    -## ApplyIcon +### ApplyIcon + -## AsideIcon +### AsideIcon + -## BackIcon +### BackIcon + -## BeakerIcon +### BeakerIcon + -## BookmarkIcon +### BookmarkIcon + -## BoolNoIcon +### BoolNoIcon + -## BoolYesIcon +### BoolYesIcon + -## BulletIcon +### BulletIcon + -## ChatIcon +### ChatIcon + -## CircleIcon +### CircleIcon + -## CisFemaleIcon +### CisFemaleIcon + -## CisMaleIcon +### CisMaleIcon + -## CloneIcon +### CloneIcon + -## CloseIcon +### CloseIcon + -## CodeIcon +### CodeIcon + -## CompareIcon +### CompareIcon + -## ControlIcon +### ControlIcon + -## CopyIcon +### CopyIcon + -## CoverPageIcon +### CoverPageIcon + -## CuratedMeasurementsSetIcon +### CuratedMeasurementsSetIcon + -## DesignIcon +### DesignIcon + -## DetailIcon +### DetailIcon + -## DocsIcon +### DocsIcon + -## DownIcon +### DownIcon + -## DownloadIcon +### DownloadIcon + -## EditIcon +### EditIcon + -## EmailIcon +### EmailIcon + -## ErrorIcon +### ErrorIcon + -## ExpandIcon +### ExpandIcon + -## ExportIcon +### ExportIcon + -## FailureIcon +### FailureIcon + -## FilterIcon +### FilterIcon + -## FingerprintIcon +### FingerprintIcon + -## FixmeIcon +### FixmeIcon + -## FlagIcon +### FlagIcon + -## FlipIcon +### FlipIcon + -## FreeSewingIcon +### FreeSewingIcon + -## GaugeIcon +### GaugeIcon + -## GitHubIcon +### GitHubIcon + -## GoogleIcon +### GoogleIcon + -## GroupIcon +### GroupIcon + -## HeartIcon +### HeartIcon + -## HelpIcon +### HelpIcon + -## IconWrapper +### IconWrapper + -## IncludeIcon +### IncludeIcon + -## InstagramIcon +### InstagramIcon + -## KeyIcon +### KeyIcon + -## KioskIcon +### KioskIcon + -## LeftIcon +### LeftIcon + -## LinkIcon +### LinkIcon + -## ListIcon +### ListIcon + -## LockIcon +### LockIcon + -## MarginIcon +### MarginIcon + -## MastodonIcon +### MastodonIcon + -## MeasurementsIcon +### MeasurementsIcon + -## MeasurementsSetIcon +### MeasurementsSetIcon + -## MenuIcon +### MenuIcon + -## NewMeasurementsSetIcon +### NewMeasurementsSetIcon + -## NewPatternIcon +### NewPatternIcon + -## NewsletterIcon +### NewsletterIcon + -## NoIcon +### NoIcon + -## OkIcon +### OkIcon + -## OptionsIcon +### OptionsIcon + -## PageMarginIcon +### PageMarginIcon + -## PageOrientationIcon +### PageOrientationIcon + -## PageSizeIcon +### PageSizeIcon + -## PaperlessIcon +### PaperlessIcon + -## PatternIcon +### PatternIcon + -## PlusIcon +### PlusIcon + -## PrintIcon +### PrintIcon + -## PrivacyIcon +### PrivacyIcon + -## RedditIcon +### RedditIcon + -## ReloadIcon +### ReloadIcon + -## ResetAllIcon +### ResetAllIcon + -## ResetIcon +### ResetIcon + -## RightIcon +### RightIcon + -## RocketIcon +### RocketIcon + -## RotateIcon +### RotateIcon + -## RssIcon +### RssIcon + -## SaIcon +### SaIcon + -## SaveAsIcon +### SaveAsIcon + -## SaveIcon +### SaveIcon + -## ScaleIcon +### ScaleIcon + -## SearchIcon +### SearchIcon + -## SettingsIcon +### SettingsIcon + -## ShieldIcon +### ShieldIcon + -## ShowcaseIcon +### ShowcaseIcon + -## SignoutIcon +### SignoutIcon + -## SpinnerIcon +### SpinnerIcon + -## SuccessIcon +### SuccessIcon + -## TikTokIcon +### TikTokIcon + -## TipIcon +### TipIcon + -## TrashIcon +### TrashIcon + -## TwitchIcon +### TwitchIcon + -## UiIcon +### UiIcon + -## UndoIcon +### UndoIcon + -## UnitsIcon +### UnitsIcon + -## UpIcon +### UpIcon + -## UploadIcon +### UploadIcon + -## UserIcon +### UserIcon + -## UxIcon +### UxIcon + -## WarningIcon +### WarningIcon + -## WrenchIcon +### WrenchIcon + -## XrayIcon +### XrayIcon + -## ZoomInIcon +### ZoomInIcon + -## ZoomOutIcon +### ZoomOutIcon +     diff --git a/sites/dev/docs/reference/packages/react/components/input/readme.mdx b/sites/dev/docs/reference/packages/react/components/input/readme.mdx index 152283ab398..0780a7aece2 100644 --- a/sites/dev/docs/reference/packages/react/components/input/readme.mdx +++ b/sites/dev/docs/reference/packages/react/components/input/readme.mdx @@ -43,6 +43,10 @@ import { +- [Components](#components) + +## Components + The **Input** component family provides the following components: - [ActiveImageInput](#activeimageinput) @@ -62,52 +66,68 @@ The **Input** component family provides the following components: - [StringInput](#stringinput) - [ToggleInput](#toggleinput) -## ActiveImageInput +### ActiveImageInput + -## ButtonFrame +### ButtonFrame + -## DesignInput +### DesignInput + -## EmailInput +### EmailInput + -## Fieldset +### Fieldset + -## FileInput +### FileInput + -## ImageInput +### ImageInput + -## ListInput +### ListInput + -## MarkdownInput +### MarkdownInput + -## MeasurementInput +### MeasurementInput + -## MfaInput +### MfaInput + -## NumberInput +### NumberInput + -## PassiveImageInput +### PassiveImageInput + -## PasswordInput +### PasswordInput + -## StringInput +### StringInput + -## ToggleInput +### ToggleInput + diff --git a/sites/dev/docs/reference/packages/react/components/json/readme.mdx b/sites/dev/docs/reference/packages/react/components/json/readme.mdx index 8b04827cbdd..109767658d2 100644 --- a/sites/dev/docs/reference/packages/react/components/json/readme.mdx +++ b/sites/dev/docs/reference/packages/react/components/json/readme.mdx @@ -1,20 +1,24 @@ --- title: Json --- + import { DocusaurusDoc } from '@freesewing/react/components/Docusaurus' import { ComponentDocs } from '@site/src/components/component-docs.js' import * as jsdoc from '@site/prebuild/jsdoc/components.json.mjs' import { JsonExample } from './_examples.js' - -The __Json__ component family provides the following components: +- [Components](#components) + +## Components + +The **Json** component family provides the following components: - [Json](#json) -## Json +### Json + - diff --git a/sites/dev/docs/reference/packages/react/components/keyval/readme.mdx b/sites/dev/docs/reference/packages/react/components/keyval/readme.mdx index e3af22766f8..d3be02b2e1c 100644 --- a/sites/dev/docs/reference/packages/react/components/keyval/readme.mdx +++ b/sites/dev/docs/reference/packages/react/components/keyval/readme.mdx @@ -1,21 +1,24 @@ --- title: KeyVal --- + import { DocusaurusDoc } from '@freesewing/react/components/Docusaurus' import { ComponentDocs } from '@site/src/components/component-docs.js' import * as jsdoc from '@site/prebuild/jsdoc/components.keyval.mjs' import { KeyValExample } from './_examples.js' - -The __KeyVal__ component family provides the following components: +- [Components](#components) + +## Components + +The **KeyVal** component family provides the following components: - [KeyVal](#keyval) -## KeyVal +### KeyVal + - - diff --git a/sites/dev/docs/reference/packages/react/components/layout/readme.mdx b/sites/dev/docs/reference/packages/react/components/layout/readme.mdx index 5b58a2dd0ba..de47e658f45 100644 --- a/sites/dev/docs/reference/packages/react/components/layout/readme.mdx +++ b/sites/dev/docs/reference/packages/react/components/layout/readme.mdx @@ -15,10 +15,13 @@ import { NoTitleLayoutExample, } from './_examples.js' - -The __Layout__ component family provides the following components: +- [Components](#components) + +## Components + +The **Layout** component family provides the following components: - [BaseLayout](#baselayout) - [BaseLayoutLeft](#baselayoutleft) @@ -28,25 +31,32 @@ The __Layout__ component family provides the following components: - [Layout](#layout) - [NoTitleLayout](#notitlelayout) -## BaseLayout +### BaseLayout + -## BaseLayoutLeft +### BaseLayoutLeft + -## BaseLayoutProse +### BaseLayoutProse + -## BaseLayoutRight +### BaseLayoutRight + -## BaseLayoutWide +### BaseLayoutWide + -## Layout +### Layout + -## NoTitleLayout +### NoTitleLayout + diff --git a/sites/dev/docs/reference/packages/react/components/linedrawing/readme.mdx b/sites/dev/docs/reference/packages/react/components/linedrawing/readme.mdx index cf95c2585dd..7108422660a 100644 --- a/sites/dev/docs/reference/packages/react/components/linedrawing/readme.mdx +++ b/sites/dev/docs/reference/packages/react/components/linedrawing/readme.mdx @@ -5,6 +5,8 @@ title: Linedrawing import { DocusaurusDoc } from '@freesewing/react/components/Docusaurus' import { ComponentDocs } from '@site/src/components/component-docs.js' import * as jsdoc from '@site/prebuild/jsdoc/components.linedrawing.mjs' +import { ConstantDocs } from '@site/src/components/constant-docs.js' +import * as cdoc from '@site/prebuild/jsdoc/constants.linedrawing.mjs' import { AaronExample, AlbertExample, @@ -111,13 +113,10 @@ import { -:::tip -This component family also exports the following helper objects: +- [Components](#components) +- [Constants](#constants) -- `lineDrawings`: An object where the key is the design name and the value the full LineDrawing component -- `lineDrawingsBack`: An object where the key is the design name and the value the back LineDrawing component -- `lineDrawingsFront`: An object where the key is the design name and the value the front LineDrawing component -::: +## Components :::warning All FreeSewing designs SHOULD have the full and front line drawing component. @@ -126,413 +125,532 @@ The back component is optional. If there is no specific front component, the front component MUST be exported as a copy of the full component. ::: -The __LineDrawing__ component family provides the following components: +The **LineDrawing** component family provides the following components: - - [AaronBack](#aaronback) - - [AaronFront](#aaronfront) - - [Aaron](#aaron) - - [AlbertFront](#albertfront) - - [Albert](#albert) - - [BeeFront](#beefront) - - [Bee](#bee) - - [BellaBack](#bellaback) - - [BellaFront](#bellafront) - - [Bella](#bella) - - [BenjaminFront](#benjaminfront) - - [Benjamin](#benjamin) - - [BentBack](#bentback) - - [BentFront](#bentfront) - - [Bent](#bent) - - [BibiBack](#bibiback) - - [BibiFront](#bibifront) - - [Bibi](#bibi) - - [BobBack](#bobback) - - [BobFront](#bobfront) - - [Bob](#bob) - - [BreannaBack](#breannaback) - - [BreannaFront](#breannafront) - - [Breanna](#breanna) - - [BrianBack](#brianback) - - [BrianFront](#brianfront) - - [Brian](#brian) - - [BruceBack](#bruceback) - - [BruceFront](#brucefront) - - [Bruce](#bruce) - - [CarlitaBack](#carlitaback) - - [CarlitaFront](#carlitafront) - - [Carlita](#carlita) - - [CarltonBack](#carltonback) - - [CarltonFront](#carltonfront) - - [Carlton](#carlton) - - [CathrinBack](#cathrinback) - - [CathrinFront](#cathrinfront) - - [Cathrin](#cathrin) - - [CharlieBack](#charlieback) - - [CharlieFront](#charliefront) - - [Charlie](#charlie) - - [CorneliusBack](#corneliusback) - - [CorneliusFront](#corneliusfront) - - [Cornelius](#cornelius) - - [DianaBack](#dianaback) - - [DianaFront](#dianafront) - - [Diana](#diana) - - [FlorenceFront](#florencefront) - - [Florence](#florence) - - [FlorentFront](#florentfront) - - [Florent](#florent) - - [GozerBack](#gozerback) - - [GozerFront](#gozerfront) - - [Gozer](#gozer) - - [HiFront](#hifront) - - [Hi](#hi) - - [HolmesFront](#holmesfront) - - [Holmes](#holmes) - - [HortensiaFront](#hortensiafront) - - [Hortensia](#hortensia) - - [HueyBack](#hueyback) - - [HueyFront](#hueyfront) - - [Huey](#huey) - - [HugoBack](#hugoback) - - [HugoFront](#hugofront) - - [Hugo](#hugo) - - [JaneBack](#janeback) - - [JaneFront](#janefront) - - [Jane](#jane) - - [LucyFront](#lucyfront) - - [Lucy](#lucy) - - [LuminaBack](#luminaback) - - [LuminaFront](#luminafront) - - [Lumina](#lumina) - - [LumiraBack](#lumiraback) - - [LumiraFront](#lumirafront) - - [Lumira](#lumira) - - [LunetiusFront](#lunetiusfront) - - [Lunetius](#lunetius) - - [NobleBack](#nobleback) - - [NobleFront](#noblefront) - - [Noble](#noble) - - [SimonBack](#simonback) - - [SimonFront](#simonfront) - - [Simon](#simon) - - [TeaganBack](#teaganback) - - [TeaganFront](#teaganfront) - - [Teagan](#teagan) - - [TristanBack](#tristanback) - - [TristanFront](#tristanfront) - - [Tristan](#tristan) - - [UmaBack](#umaback) - - [UmaFront](#umafront) - - [Uma](#uma) - - [UmbraBack](#umbraback) - - [UmbraFront](#umbrafront) - - [Umbra](#umbra) - - [WahidBack](#wahidback) - - [WahidFront](#wahidfront) - - [Wahid](#wahid) +- [AaronBack](#aaronback) +- [AaronFront](#aaronfront) +- [Aaron](#aaron) +- [AlbertFront](#albertfront) +- [Albert](#albert) +- [BeeFront](#beefront) +- [Bee](#bee) +- [BellaBack](#bellaback) +- [BellaFront](#bellafront) +- [Bella](#bella) +- [BenjaminFront](#benjaminfront) +- [Benjamin](#benjamin) +- [BentBack](#bentback) +- [BentFront](#bentfront) +- [Bent](#bent) +- [BibiBack](#bibiback) +- [BibiFront](#bibifront) +- [Bibi](#bibi) +- [BobBack](#bobback) +- [BobFront](#bobfront) +- [Bob](#bob) +- [BreannaBack](#breannaback) +- [BreannaFront](#breannafront) +- [Breanna](#breanna) +- [BrianBack](#brianback) +- [BrianFront](#brianfront) +- [Brian](#brian) +- [BruceBack](#bruceback) +- [BruceFront](#brucefront) +- [Bruce](#bruce) +- [CarlitaBack](#carlitaback) +- [CarlitaFront](#carlitafront) +- [Carlita](#carlita) +- [CarltonBack](#carltonback) +- [CarltonFront](#carltonfront) +- [Carlton](#carlton) +- [CathrinBack](#cathrinback) +- [CathrinFront](#cathrinfront) +- [Cathrin](#cathrin) +- [CharlieBack](#charlieback) +- [CharlieFront](#charliefront) +- [Charlie](#charlie) +- [CorneliusBack](#corneliusback) +- [CorneliusFront](#corneliusfront) +- [Cornelius](#cornelius) +- [DianaBack](#dianaback) +- [DianaFront](#dianafront) +- [Diana](#diana) +- [FlorenceFront](#florencefront) +- [Florence](#florence) +- [FlorentFront](#florentfront) +- [Florent](#florent) +- [GozerBack](#gozerback) +- [GozerFront](#gozerfront) +- [Gozer](#gozer) +- [HiFront](#hifront) +- [Hi](#hi) +- [HolmesFront](#holmesfront) +- [Holmes](#holmes) +- [HortensiaFront](#hortensiafront) +- [Hortensia](#hortensia) +- [HueyBack](#hueyback) +- [HueyFront](#hueyfront) +- [Huey](#huey) +- [HugoBack](#hugoback) +- [HugoFront](#hugofront) +- [Hugo](#hugo) +- [JaneBack](#janeback) +- [JaneFront](#janefront) +- [Jane](#jane) +- [LucyFront](#lucyfront) +- [Lucy](#lucy) +- [LuminaBack](#luminaback) +- [LuminaFront](#luminafront) +- [Lumina](#lumina) +- [LumiraBack](#lumiraback) +- [LumiraFront](#lumirafront) +- [Lumira](#lumira) +- [LunetiusFront](#lunetiusfront) +- [Lunetius](#lunetius) +- [NobleBack](#nobleback) +- [NobleFront](#noblefront) +- [Noble](#noble) +- [SimonBack](#simonback) +- [SimonFront](#simonfront) +- [Simon](#simon) +- [TeaganBack](#teaganback) +- [TeaganFront](#teaganfront) +- [Teagan](#teagan) +- [TristanBack](#tristanback) +- [TristanFront](#tristanfront) +- [Tristan](#tristan) +- [UmaBack](#umaback) +- [UmaFront](#umafront) +- [Uma](#uma) +- [UmbraBack](#umbraback) +- [UmbraFront](#umbrafront) +- [Umbra](#umbra) +- [WahidBack](#wahidback) +- [WahidFront](#wahidfront) +- [Wahid](#wahid) +### Aaron - -## Aaron -## AaronBack +### AaronBack + -## AaronFront +### AaronFront + -## Albert +### Albert + -## AlbertFront +### AlbertFront + -## Bee +### Bee + -## BeeFront +### BeeFront + -## Bella +### Bella + -## BellaBack +### BellaBack + -## BellaFront +### BellaFront + -## Benjamin +### Benjamin + -## BenjaminFront +### BenjaminFront + -## Bent +### Bent + -## BentBack +### BentBack + -## BentFront +### BentFront + -## Bibi +### Bibi + -## BibiBack +### BibiBack + -## BibiFront +### BibiFront + -## Bob +### Bob + -## BobBack +### BobBack + -## BobFront +### BobFront + -## Breanna +### Breanna + -## BreannaBack +### BreannaBack + -## BreannaFront +### BreannaFront + -## Brian +### Brian + -## BrianBack +### BrianBack + -## BrianFront +### BrianFront + -## Bruce +### Bruce + -## BruceBack +### BruceBack + -## BruceFront +### BruceFront + -## Carlita +### Carlita + -## CarlitaBack +### CarlitaBack + -## CarlitaFront +### CarlitaFront + -## Carlton +### Carlton + -## CarltonBack +### CarltonBack + -## CarltonFront +### CarltonFront + -## Cathrin +### Cathrin + -## CathrinBack +### CathrinBack + -## CathrinFront +### CathrinFront + -## Charlie +### Charlie + -## CharlieBack +### CharlieBack + -## CharlieFront +### CharlieFront + -## Cornelius +### Cornelius + -## CorneliusBack +### CorneliusBack + -## CorneliusFront +### CorneliusFront + -## Diana +### Diana + -## DianaBack +### DianaBack + -## DianaFront +### DianaFront + -## Florence +### Florence + -## FlorenceFront +### FlorenceFront + -## Florent +### Florent + -## FlorentFront +### FlorentFront + -## Gozer +### Gozer + -## GozerBack +### GozerBack + -## GozerFront +### GozerFront + -## Hi +### Hi + -## HiFront +### HiFront + -## Holmes +### Holmes + -## HolmesFront +### HolmesFront + -## Hortensia +### Hortensia + -## HortensiaFront +### HortensiaFront + -## Huey +### Huey + -## HueyBack +### HueyBack + -## HueyFront +### HueyFront + -## Hugo +### Hugo + -## HugoBack +### HugoBack + -## HugoFront +### HugoFront + -## Jane +### Jane + -## JaneBack +### JaneBack + -## JaneFront +### JaneFront + -## Lucy +### Lucy + -## LucyFront +### LucyFront + -## Lumina +### Lumina + -## LuminaBack +### LuminaBack + -## LuminaFront +### LuminaFront + -## Lumira +### Lumira + -## LumiraBack +### LumiraBack + -## LumiraFront +### LumiraFront + -## Lunetius +### Lunetius + -## LunetiusFront +### LunetiusFront + -## Noble +### Noble + -## NobleBack +### NobleBack + -## NobleFront +### NobleFront + -## Simon +### Simon + -## SimonBack +### SimonBack + -## SimonFront +### SimonFront + -## Teagan +### Teagan + -## TeaganBack +### TeaganBack + -## TeaganFront +### TeaganFront + -## Tristan +### Tristan + -## TristanBack +### TristanBack + -## TristanFront +### TristanFront + -## Uma +### Uma + -## UmaBack +### UmaBack + -## UmaFront +### UmaFront + -## Umbra +### Umbra + -## UmbraBack +### UmbraBack + -## UmbraFront +### UmbraFront + -## Wahid +### Wahid + -## WahidBack +### WahidBack + -## WahidFront +### WahidFront + +## Constants + +This component family also exports the following helper objects: + +- `lineDrawings`: An object where the key is the design name and the value the full LineDrawing component +- `lineDrawingsBack`: An object where the key is the design name and the value the back LineDrawing component +- `lineDrawingsFront`: An object where the key is the design name and the value the front LineDrawing component + +### lineDrawings + + + +### lineDrawingsBack + + + +### lineDrawingsFront + + + diff --git a/sites/dev/docs/reference/packages/react/components/link/readme.mdx b/sites/dev/docs/reference/packages/react/components/link/readme.mdx index 9275c1c5874..d1ab1fd1c7d 100644 --- a/sites/dev/docs/reference/packages/react/components/link/readme.mdx +++ b/sites/dev/docs/reference/packages/react/components/link/readme.mdx @@ -5,21 +5,23 @@ title: Link import { DocusaurusDoc } from '@freesewing/react/components/Docusaurus' import { ComponentDocs } from '@site/src/components/component-docs.js' import * as jsdoc from '@site/prebuild/jsdoc/components.link.mjs' -import { - AnchorLinkExample, - CardLinkExample, - LinkExample, - SuccessLinkExample, -} from './_examples.js' - +import { AnchorLinkExample, CardLinkExample, LinkExample, SuccessLinkExample } from './_examples.js' +- [Components](#components) + +## Components + :::tip Styling and link behaviour + ##### Styling + Due to the CSS reset used by Tailwind, one cannot assume links will be styled like you expect them to. Use a component from this For this and other reasons, Link components exist. + ##### Link behaviour + Withing a single-page application (SPA) --- like Docusaurus or NextJS and so on --- there is often a `Link` component provided by the framework that provides client-side routing so that clicking a link does not completely reload the page/application. @@ -27,7 +29,7 @@ does not completely reload the page/application. You can pass such a component in some of FreeSewing components to use it for links rather than a traditional `` tag. ::: -The __Link__ component family provides the following components: +The **Link** component family provides the following components: - [AnchorLink](#anchorlink) - [CardLink](#cardlink) @@ -35,15 +37,19 @@ The __Link__ component family provides the following components: - [SuccessLink](#successlink) ## AnchorLink + ## CardLink + ## Link + ## SuccessLink + diff --git a/sites/dev/docs/reference/packages/react/components/logo/readme.mdx b/sites/dev/docs/reference/packages/react/components/logo/readme.mdx index 7abac216640..cae5a9b981d 100644 --- a/sites/dev/docs/reference/packages/react/components/logo/readme.mdx +++ b/sites/dev/docs/reference/packages/react/components/logo/readme.mdx @@ -1,19 +1,23 @@ --- title: Logo --- + import { DocusaurusDoc } from '@freesewing/react/components/Docusaurus' import { ComponentDocs } from '@site/src/components/component-docs.js' import * as jsdoc from '@site/prebuild/jsdoc/components.logo.mjs' import { FreeSewingLogoExample } from './_examples.js' - -The __Logo__ component family provides the following components: +- [Components](#components) + +## Components + +The **Logo** component family provides the following components: - [FreeSewingLogo](#freesewinglogo) -## FreeSewingLogo +### FreeSewingLogo :::tip Understanding the colors of the logo The logo will always be filled with `currentColor` which is a specific keyword @@ -30,7 +34,7 @@ color, so it will be invisible. You can also set an explicit stroke color with the `stroke` prop, or control `currentColor` by setting the `className` prop. ::: + - diff --git a/sites/dev/docs/reference/packages/react/components/markdown/readme.mdx b/sites/dev/docs/reference/packages/react/components/markdown/readme.mdx index c0f28a500bb..619cfd31d99 100644 --- a/sites/dev/docs/reference/packages/react/components/markdown/readme.mdx +++ b/sites/dev/docs/reference/packages/react/components/markdown/readme.mdx @@ -6,12 +6,22 @@ import { DocusaurusDoc } from '@freesewing/react/components/Docusaurus' +- [Components](#components) + +## Components + The **Markdown** component family provides the following components: -- [Markdown](#markdown): A re-export of [react-markdown][rm] +- [Markdown](#markdown) + +### Markdown + +A re-export of [react-markdown][rm] :::tip + #### Not FreeSewing code + This component family only contains re-exports of code by other maintainers.\ Since they are a dependency, we provide them as part of the @freesewing/react package for convenience. diff --git a/sites/dev/docs/reference/packages/react/components/mini/readme.mdx b/sites/dev/docs/reference/packages/react/components/mini/readme.mdx index 66ec8615af6..afe08776782 100644 --- a/sites/dev/docs/reference/packages/react/components/mini/readme.mdx +++ b/sites/dev/docs/reference/packages/react/components/mini/readme.mdx @@ -5,16 +5,15 @@ title: Mini import { DocusaurusDoc } from '@freesewing/react/components/Docusaurus' import { ComponentDocs } from '@site/src/components/component-docs.js' import * as jsdoc from '@site/prebuild/jsdoc/components.mini.mjs' -import { - MiniNoteExample, - MiniTipExample, - MiniWarningExample, -} from './_examples.js' - +import { MiniNoteExample, MiniTipExample, MiniWarningExample } from './_examples.js' -The __Mini__ component family provides the following components: +- [Components](#components) + +## Components + +The **Mini** component family provides the following components: - [MiniNote](#mininote) - [MiniTip](#minitip) @@ -26,15 +25,16 @@ These components are typically used when a space. ::: +### MiniNote -## MiniNote -## MiniTip +### MiniTip + -## MiniWarning +### MiniWarning + - diff --git a/sites/dev/docs/reference/packages/react/components/modal/readme.mdx b/sites/dev/docs/reference/packages/react/components/modal/readme.mdx index ff533885b81..38611ea1da2 100644 --- a/sites/dev/docs/reference/packages/react/components/modal/readme.mdx +++ b/sites/dev/docs/reference/packages/react/components/modal/readme.mdx @@ -7,15 +7,18 @@ import { ComponentDocs } from '@site/src/components/component-docs.js' import * as jsdoc from '@site/prebuild/jsdoc/components.modal.mjs' import { ModalWrapperExample } from './_examples.js' - -The __Modal component family provides the following components: +- [Components](#components) + +## Components + +The \_\_Modal component family provides the following components: - [ModalWrapper](#modalwrapper) -## ModalWrapper +### ModalWrapper + - diff --git a/sites/dev/docs/reference/packages/react/components/newsletter/readme.mdx b/sites/dev/docs/reference/packages/react/components/newsletter/readme.mdx index d732995e9b2..db46f90fa8a 100644 --- a/sites/dev/docs/reference/packages/react/components/newsletter/readme.mdx +++ b/sites/dev/docs/reference/packages/react/components/newsletter/readme.mdx @@ -9,16 +9,21 @@ import { NewsletterSignup, NewsletterUnsubscribe } from '@freesewing/react/compo -The __Newsletter__ component family provides the following components: +- [Components](#components) + +## Components + +The **Newsletter** component family provides the following components: - [NewsletterSignup](#newslettersignup) - [NewsletterUnsubscribe](#newsletterunsubscribe) -## NewsletterSignup +### NewsletterSignup + -## NewsletterUnsubscribe +### NewsletterUnsubscribe + - diff --git a/sites/dev/docs/reference/packages/react/components/null/readme.mdx b/sites/dev/docs/reference/packages/react/components/null/readme.mdx index c67c266db93..eb201965acb 100644 --- a/sites/dev/docs/reference/packages/react/components/null/readme.mdx +++ b/sites/dev/docs/reference/packages/react/components/null/readme.mdx @@ -2,7 +2,6 @@ title: 'Null' --- - import { DocusaurusDoc } from '@freesewing/react/components/Docusaurus' import { ComponentDocs } from '@site/src/components/component-docs.js' import * as jsdoc from '@site/prebuild/jsdoc/components.null.mjs' @@ -10,12 +9,16 @@ import { Null } from '@freesewing/react/components/Null' -The __Null__ component family provides the following components: +- [Components](#components) + +## Components + +The **Null** component family provides the following components: - [Null](#null) -## Null +### Null + - diff --git a/sites/dev/docs/reference/packages/react/components/number/readme.mdx b/sites/dev/docs/reference/packages/react/components/number/readme.mdx index 7460ea17e6c..e676e0b61c8 100644 --- a/sites/dev/docs/reference/packages/react/components/number/readme.mdx +++ b/sites/dev/docs/reference/packages/react/components/number/readme.mdx @@ -1,19 +1,24 @@ --- title: Number --- + import { DocusaurusDoc } from '@freesewing/react/components/Docusaurus' import { ComponentDocs } from '@site/src/components/component-docs.js' import * as jsdoc from '@site/prebuild/jsdoc/components.number.mjs' import { NumberCircleExample } from './_examples.js' - -The __Number__ component family provides the following components: +- [Components](#components) + +## Components + +The **Number** component family provides the following components: - [NumberCircle](#numbercircle) -## NumberCircle +### NumberCircle + diff --git a/sites/dev/docs/reference/packages/react/components/patrons/readme.mdx b/sites/dev/docs/reference/packages/react/components/patrons/readme.mdx index 9b8b35e223e..39554caf2df 100644 --- a/sites/dev/docs/reference/packages/react/components/patrons/readme.mdx +++ b/sites/dev/docs/reference/packages/react/components/patrons/readme.mdx @@ -1,31 +1,39 @@ --- title: Patrons --- + import { DocusaurusDoc } from '@freesewing/react/components/Docusaurus' import { ComponentDocs } from '@site/src/components/component-docs.js' import * as jsdoc from '@site/prebuild/jsdoc/components.patrons.mjs' import { Joost, Plea, PleaseSubscribe, Subscribe } from '@freesewing/react/components/Patrons' - -The __Patrons__ component family provides the following components: +- [Components](#components) + +## Components + +The **Patrons** component family provides the following components: - [Joost](#joost) - [Plea](#plea) - [PleaseSubscribe](#pleasesubscribe) - [Subscribe](#subscribe) -## Joost +### Joost + -## Plea +### Plea + -## PleaseSubscribe +### PleaseSubscribe + -## Subscribe +### Subscribe + diff --git a/sites/dev/docs/reference/packages/react/components/pattern/_examples.js b/sites/dev/docs/reference/packages/react/components/pattern/_examples.js new file mode 100644 index 00000000000..485a30dc180 --- /dev/null +++ b/sites/dev/docs/reference/packages/react/components/pattern/_examples.js @@ -0,0 +1,26 @@ +import React from 'react' +//import * as all from '@freesewing/react/components/Pattern' +import { MiniNote } from '@freesewing/react/components/Mini' + +/* + * Use this to generate the docs content +export const Test = () => { + const output = [] + // list + output.push(...Object.keys(all).sort().map(c => `- [${c}](${c.toLowerCase()})`)) + + // docs + output.push(...Object.keys(all).sort().map(c => ` +## ${c} +`)) + + return 
    {output.join("\n")}
    +} + */ + +export const Example = () => ( + + Components in the Pattern family are tightly coupled with FreeSewing pattern structure. + Stand-alone examples are not provided as they are not very relevant. + +) diff --git a/sites/dev/docs/reference/packages/react/components/pattern/readme.mdx b/sites/dev/docs/reference/packages/react/components/pattern/readme.mdx index 7892263725f..6e34e1d9e61 100644 --- a/sites/dev/docs/reference/packages/react/components/pattern/readme.mdx +++ b/sites/dev/docs/reference/packages/react/components/pattern/readme.mdx @@ -2,6 +2,126 @@ title: Pattern --- -:::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 { FunctionDocs } from '@site/src/components/function-docs.js' +import { ConstantDocs } from '@site/src/components/constant-docs.js' +import * as jsdoc from '@site/prebuild/jsdoc/components.pattern.mjs' +import * as fndoc from '@site/prebuild/jsdoc/functions.pattern.mjs' +import * as cdoc from '@site/prebuild/jsdoc/constants.pattern.mjs' +import { Example } from './_examples.js' + + + +- [Components](#components) +- [Constants](#constants) +- [Functions](#functions) + +## Components + +The **Pattern** component family provides the following components: + +- [Circle](circle) +- [Defs](defs) +- [Grid](grid) +- [Group](group) +- [Part](part) +- [Path](path) +- [Pattern](pattern) +- [Point](point) +- [Snippet](snippet) +- [Stack](stack) +- [Svg](svg) +- [Text](text) +- [TextOnPath](textonpath) + +## Components + +### Circle + + + +### Defs + + + +### Grid + + + +### Group + + + +### Part + + + +### Path + + + +### Pattern + + + +### Point + + + +### Snippet + + + +### Stack + + + +### Svg + + + +### Text + + + +### TextOnPath + + + +## Constants + +The **Pattern** family exports the following constants: + +- [defaultComponents](defaultcomponents) + +### defaultComponents + + + +## Functions + +The **Pattern** family exports the following functions: + +- [getId](getid) +- [getProps](getprops) +- [translateStrings](translatestrings) +- [withinPartBounds](withinpartbounds) + +### getId + + + +### getProps + + + +### translateStrings + + + +### withinPartBounds + + + + diff --git a/sites/dev/scripts/prebuild.mjs b/sites/dev/scripts/prebuild.mjs index a943d6bc5c7..3f5bb3f2fd1 100644 --- a/sites/dev/scripts/prebuild.mjs +++ b/sites/dev/scripts/prebuild.mjs @@ -13,16 +13,22 @@ for (const file of components) { async function processJsdocFile(file) { const all = { components: {}, + functions: {}, + constants: {}, } const data = await readJsonFile([...cdir, path.basename(file)]) const family = path.basename(file.slice(0, -5)) all.components[family] = [] for (const entry of data) { // Is it a component? - const yes = entry.tags + const isComponent = entry.tags ? entry.tags.filter((tag) => tag.title === 'component').length > 0 : false - if (yes) + // Is it a plain function? + const isFunction = entry.access === 'public' && Array.isArray(entry.returns) ? true : false + // Is it a constant? + const isConstant = !isFunction && entry.access === 'public' ? true : false + if (isComponent) all.components[family].push({ family, name: entry.name, @@ -33,6 +39,29 @@ async function processJsdocFile(file) { params: entry.params, return: entry.returns, }) + else if (isFunction) { + if (typeof all.functions[family] === 'undefined') all.functions[family] = [] + all.functions[family].push({ + family, + name: entry.name, + file: relativePath(entry.meta.filename, entry.meta.path), + line: entry.meta.lineno, + importAs: `import { ${entry.name} } from "${importPath(entry.meta.path)}"`, + desc: entry.description, + params: entry.params, + return: entry.returns, + }) + } else if (isConstant) { + if (typeof all.constants[family] === 'undefined') all.constants[family] = [] + all.constants[family].push({ + family, + name: entry.name, + file: relativePath(entry.meta.filename, entry.meta.path), + line: entry.meta.lineno, + importAs: `import { ${entry.name} } from "${importPath(entry.meta.path)}"`, + desc: entry.description, + }) + } } return all @@ -45,6 +74,22 @@ async function writeJsdocFiles(data) { ) await writeFile(['prebuild', 'jsdoc', `components.${family}.mjs`], code) } + if (data.functions) { + for (const [family, d] of Object.entries(data.functions)) { + const code = d.map( + (entry) => `export const jsdoc${entry.name} = ${JSON.stringify(entry)}` + '\n' + ) + await writeFile(['prebuild', 'jsdoc', `functions.${family}.mjs`], code) + } + } + if (data.constants) { + for (const [family, d] of Object.entries(data.constants)) { + const code = d.map( + (entry) => `export const jsdoc${entry.name} = ${JSON.stringify(entry)}` + '\n' + ) + await writeFile(['prebuild', 'jsdoc', `constants.${family}.mjs`], code) + } + } } function importPath(folder) { diff --git a/sites/dev/src/components/constant-docs.js b/sites/dev/src/components/constant-docs.js new file mode 100644 index 00000000000..a749e70f497 --- /dev/null +++ b/sites/dev/src/components/constant-docs.js @@ -0,0 +1,33 @@ +import React from 'react' +import { Highlight } from '@freesewing/react/components/Highlight' +import { Tabs, Tab } from '@freesewing/react/components/Tab' +import { MiniNote } from '@freesewing/react/components/Mini' + +export const ConstantDocs = ({ docs }) => { + if (!docs) return No docs passed in + return ( + <> +

    {docs.desc}

    + + +

    + You can import the {docs.name} constant from the {docs.family}{' '} + family in the @freesewing/react package: +

    + {docs.importAs} +     + +

    + The {docs.name} function is defined{' '} + + on line {docs.line} in {docs.file} + + . +

    + + + + ) +} diff --git a/sites/dev/src/components/function-docs.js b/sites/dev/src/components/function-docs.js new file mode 100644 index 00000000000..a5d8af80e64 --- /dev/null +++ b/sites/dev/src/components/function-docs.js @@ -0,0 +1,89 @@ +import React from 'react' +import { Highlight } from '@freesewing/react/components/Highlight' +import { Tabs, Tab } from '@freesewing/react/components/Tab' +import { FingerprintIcon, WarningIcon } from '@freesewing/react/components/Icon' +import { IconButton } from '@freesewing/react/components/Button' +import { MiniNote } from '@freesewing/react/components/Mini' + +export const FunctionDocs = ({ docs }) => { + if (!docs) return No docs passed in + console.log(docs) + return ( + <> +

    {docs.desc}

    + + +

    + You can import the {docs.name} function from the {docs.family}{' '} + family in the @freesewing/react package: +

    + {docs.importAs} +     + + {docs.params ? ( +

    + {' '} + The {docs.name} function returns type{' '} + {docs.return.map((r) => r.type.names.join()).join('|')} and takes the + following parameters: +

    + ) : ( + This function does not take any parameters + )} + {docs.params ? : null} +     + +

    + The {docs.name} function is defined{' '} + + on line {docs.line} in {docs.file} + + . +

    +     +     + + ) +} + +const ParamsTable = ({ docs }) => ( + + + + + + + + + + + + + {(docs.params || []).map((param, i) => ( + + + + + + + + + ))} + +
    #NameTypeDescriptionOptionalDefault Value
    {i + 1}{param.name}{param.type.names}{param.description}{param.optional ? 'yes' : 'no'} + + + +
    +) + +const DefaultParamValue = ({ value }) => { + if (value === true) return 'true' + if (value === false) return 'false' + if (value === null) return 'null' + if (typeof value === 'undefined') return 'undefined' + + return value +} From b8740c222308ca73b82f66269550064214de55c1 Mon Sep 17 00:00:00 2001 From: joostdecock Date: Mon, 26 May 2025 08:22:15 +0200 Subject: [PATCH 39/74] [react] feat: Added docs for components/Popout --- packages/react/components/Popout/index.mjs | 219 ++++++++++-------- packages/react/mkdocs.sh | 1 + .../react/components/popout/_examples.js | 18 ++ .../react/components/popout/readme.mdx | 23 +- 4 files changed, 165 insertions(+), 96 deletions(-) create mode 100644 sites/dev/docs/reference/packages/react/components/popout/_examples.js diff --git a/packages/react/components/Popout/index.mjs b/packages/react/components/Popout/index.mjs index 42bf67bf1ba..bb8583503a7 100644 --- a/packages/react/components/Popout/index.mjs +++ b/packages/react/components/Popout/index.mjs @@ -1,108 +1,141 @@ import React, { useState } from 'react' import { CloseIcon } from '@freesewing/react/components/Icon' -const colors = { - comment: 'secondary', - error: 'error', - fixme: 'warning', - link: 'secondary', - none: '', - note: 'primary', - related: 'info', - tip: 'accent', - tldr: 'info', - warning: 'error', +/* + * Resist the urge to DRY this up by contructing classNames dynamically + * as doing so will cause them to be dropped from the production bundle + */ +const types = { + comment: { + bg: 'tw:bg-success/5', + border: 'tw:border-success', + text: 'tw:text-success', + }, + error: { + bg: 'tw:bg-error/5', + border: 'tw:border-error', + text: 'tw:text-error', + }, + fixme: { + bg: 'tw:bg-neutral/5', + border: 'tw:border-neutral', + text: 'tw:text-error', + }, + link: { + bg: 'tw:bg-secondary/5', + border: 'tw:border-secondary', + text: 'tw:text-secondary', + }, + note: { + bg: 'tw:bg-primary/5', + border: 'tw:border-primary', + text: 'tw:text-primary', + }, + related: { + bg: 'tw:bg-info/5', + border: 'tw:border-info', + text: 'tw:text-info', + }, + tip: { + bg: 'tw:bg-accent/5', + border: 'tw:border-accent', + text: 'tw:text-accent', + }, + warning: { + bg: 'tw:bg-warning/5', + border: 'tw:border-warning', + text: 'tw:text-warning', + }, } /** * This popout component is a way to make some content stand out * + * @component * @param {object} props - All React props - * @param {object} props.comment - Set this to make it a comment popout - * @param {object} props.error - Set this to make it a error popout - * @param {object} props.fixme - Set this to make it a fixme popout - * @param {object} props.link - Set this to make it a link popout - * @param {object} props.note - Set this to make it a note popout - * @param {object} props.related - Set this to make it a related popout - * @param {object} props.tip - Set this to make it a tip popout - * @param {object} props.tldr - Set this to make it a tldr popout - * @param {object} props.warning - Set this to make it a warning popout - * @param {string} props.title - The popout title - * @param {string} noP - Do not wrap the content in a p tag + * @param {string} [props.by = false] - When type is comment, this will be used to show who made the comment + * @param {JSX.Element} props.children - The component children, will be rendered if props.js is not set + * @param {boolean} [props.compact = false] - Set this to render a compact style + * @param {boolean} [props.dense = false] - Set this to render a dense style (only for compact view) + * @param {boolean} [props.hideable = false] - Set this to make the popout hideable/dismissable + * @param {string} [props.type = note] - One of the available types: comment, error, fixme, link, note, related, tip, warning + * @param {string} [props.title = false] - Set this to use a custom title + * @returns {JSX.Element} */ -export const Popout = (props) => { +export const Popout = ({ + by = false, + children = null, + compact = false, + dense = false, + hideable = false, + type = "note", + title = false, +}) => { // Make this hideable/dismissable const [hide, setHide] = useState(false) + if (hide) return null - let type = 'none' - for (const c in colors) { - if (props[c]) type = c - } - const color = colors[type] - const { className = '' } = props - - return props.compact ? ( -
    -
    -
    - {props.title || ( - <> - {type.toUpperCase()} - | - - )} -
    -
    {props.noP ? props.children :

    {props.children}

    }
    -
    -
    - ) : ( -
    -
    -
    -
    - - {props.title ? props.title : type === 'tldr' ? 'TL;DR' : type.toUpperCase()} - - - {type === 'tw:comment' && ( - <> - {' '} - by {props.by} - - )} - -
    - {props.hideable && ( - - )} -
    -
    {props.children}
    - {type === 'comment' && ( -
    {props.by}
    - )} -
    -
    - ) + return compact + ? {children} + : {children} } + +const RegularPopout = ({ by, children, compact, hideable, type, title, setHide }) => ( +
    +
    + +
    {children}
    + {type === 'comment' && ( +
    {by}
    + )} +
    +
    + +) + +const CompactPopout = ({ by, children, compact, dense, hideable, type, title, setHide }) => ( +
    +
    + +
    {children}
    +
    +
    +) + +const PopoutTitle = ({ by, compact, hideable, setHide, title, type }) => ( +
    +
    + + {title ? title : types[type].title ? types[type].title : type.toUpperCase()} + {compact ? | : null} + + {(type === 'comment' && by) && by {by}} +
    + {hideable && ( + + )} +
    +) diff --git a/packages/react/mkdocs.sh b/packages/react/mkdocs.sh index dbed94c6b74..b690ada8114 100755 --- a/packages/react/mkdocs.sh +++ b/packages/react/mkdocs.sh @@ -29,3 +29,4 @@ jsdoc -c jsdoc.json components/Null/* > ../../sites/dev/prebuild/jsdoc/react/com jsdoc -c jsdoc.json components/Number/* > ../../sites/dev/prebuild/jsdoc/react/components/number.json jsdoc -c jsdoc.json components/Patrons/* > ../../sites/dev/prebuild/jsdoc/react/components/patrons.json jsdoc -c jsdoc.json components/Pattern/* > ../../sites/dev/prebuild/jsdoc/react/components/pattern.json +jsdoc -c jsdoc.json components/Popout/* > ../../sites/dev/prebuild/jsdoc/react/components/popout.json diff --git a/sites/dev/docs/reference/packages/react/components/popout/_examples.js b/sites/dev/docs/reference/packages/react/components/popout/_examples.js new file mode 100644 index 00000000000..2f1191edab6 --- /dev/null +++ b/sites/dev/docs/reference/packages/react/components/popout/_examples.js @@ -0,0 +1,18 @@ +import React from 'react' +import { Popout } from '@freesewing/react/components/Popout' + +const types = [ 'comment', 'error', 'fixme', 'link', 'note', 'related', 'tip', 'warning' ] + +export const PopoutExample = () => ( + <> + {types.map(type => This is a {type})} + {types.map(type => This is a {type} with a custom title)} + {types.map(type => This is a compact {type})} + {types.map(type => This is a compact {type} with a custom title)} + {types.map(type => This is a compact & dense {type})} + This is a comment with a by prop to indicate the author + This is a compact comment with a by prop to indicate the author + This is a compact & dense comment with a by prop to indicate the author + This is a hideable tip + +) diff --git a/sites/dev/docs/reference/packages/react/components/popout/readme.mdx b/sites/dev/docs/reference/packages/react/components/popout/readme.mdx index c3a6537e1bb..5656ab7cd87 100644 --- a/sites/dev/docs/reference/packages/react/components/popout/readme.mdx +++ b/sites/dev/docs/reference/packages/react/components/popout/readme.mdx @@ -2,6 +2,23 @@ title: Popout --- -:::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 * as jsdoc from '@site/prebuild/jsdoc/components.popout.mjs' +import { PopoutExample } from './_examples.js' + + + +- [Components](#components) + +## Components + +The **Popout** component family provides the following components: + +- [Popout](#popout) + +### Popout + + + + From 320bcf85341dae7c6ba7f148513eb265b17549b2 Mon Sep 17 00:00:00 2001 From: joostdecock Date: Thu, 29 May 2025 11:18:34 +0200 Subject: [PATCH 40/74] fix: Update after breaking changes to Popout component --- packages/react/components/Account/Apikeys.mjs | 2 +- packages/react/components/Account/Email.mjs | 2 +- packages/react/components/Account/Export.mjs | 2 +- packages/react/components/Account/Import.mjs | 2 +- packages/react/components/Account/Mfa.mjs | 2 +- .../react/components/Account/Newsletter.mjs | 2 +- .../react/components/Account/Password.mjs | 2 +- packages/react/components/Account/Pattern.mjs | 2 +- packages/react/components/Account/Set.mjs | 2 +- .../components/Editor/components/Set.mjs | 6 +- .../Editor/components/views/DocsView.mjs | 6 +- .../components/views/DraftErrorHandler.mjs | 2 +- .../components/views/MeasurementsView.mjs | 4 +- .../Editor/components/views/SaveView.mjs | 12 +- .../Editor/components/views/UndosView.mjs | 2 +- .../Editor/components/views/ViewPicker.mjs | 2 +- packages/react/components/Role/index.mjs | 2 +- packages/react/components/SignIn/index.mjs | 2 +- sites/org/src/components/DesignExamples.mjs | 2 +- sites/org/src/pages/oidc-flow/index.js | 2 +- .../hugo/options/collarease/collarease.svg | 153 ------------------ .../hugo/options/collarease/readme.mdx | 12 -- 22 files changed, 26 insertions(+), 199 deletions(-) delete mode 100644 sites/orgdocs/docs/designs/hugo/options/collarease/collarease.svg delete mode 100644 sites/orgdocs/docs/designs/hugo/options/collarease/readme.mdx diff --git a/packages/react/components/Account/Apikeys.mjs b/packages/react/components/Account/Apikeys.mjs index 77a16f6c87c..c6b02dc3ff3 100644 --- a/packages/react/components/Account/Apikeys.mjs +++ b/packages/react/components/Account/Apikeys.mjs @@ -313,7 +313,7 @@ const ShowNewApikey = ({ apikey }) => ( 

    {apikey.secret}
    - + This is the only time you can see the key secret, make sure to copy it.
    diff --git a/packages/react/components/Account/Email.mjs b/packages/react/components/Account/Email.mjs index 7d027132e88..2d2460402e0 100644 --- a/packages/react/components/Account/Email.mjs +++ b/packages/react/components/Account/Email.mjs @@ -55,7 +55,7 @@ export const Email = ({ welcome = false, Link = false }) => { return (
    {changed ? ( - +

    Please confirm this change

    We have sent an E-mail to your new address to confirm this change. Please click the link diff --git a/packages/react/components/Account/Export.mjs b/packages/react/components/Account/Export.mjs index 04e5ea14de0..d8245adde43 100644 --- a/packages/react/components/Account/Export.mjs +++ b/packages/react/components/Account/Export.mjs @@ -39,7 +39,7 @@ export const Export = () => { return (

    {link ? ( - +
    Your data was exported and is available for download at the following location:

    {link} diff --git a/packages/react/components/Account/Import.mjs b/packages/react/components/Account/Import.mjs index 0872450be95..b320537fd72 100644 --- a/packages/react/components/Account/Import.mjs +++ b/packages/react/components/Account/Import.mjs @@ -76,7 +76,7 @@ export const ImportSet = () => { multiple: false, }} /> - +

    To import a measurement set, you should have a JSON or YAML file that has the following structure: diff --git a/packages/react/components/Account/Mfa.mjs b/packages/react/components/Account/Mfa.mjs index d1f85527d4a..a1dc75e8944 100644 --- a/packages/react/components/Account/Mfa.mjs +++ b/packages/react/components/Account/Mfa.mjs @@ -200,7 +200,7 @@ export const Mfa = ({ title = true }) => { Set up Mult-Factor Authentication - +

    Please consider enabling Two-Factor Authentication

    We do not enforce a password policy, but we do recommend you enable Multi-Factor diff --git a/packages/react/components/Account/Newsletter.mjs b/packages/react/components/Account/Newsletter.mjs index b04269fea92..f9aabcaa3bf 100644 --- a/packages/react/components/Account/Newsletter.mjs +++ b/packages/react/components/Account/Newsletter.mjs @@ -111,7 +111,7 @@ export const Newsletter = ({ welcome = false, Link = false }) => { ) : null} {welcome ? null : ( - +

    You can unsubscribe at any time with the link below

    This unsubscribe link will also be included at the bottom of every newsletter we send diff --git a/packages/react/components/Account/Password.mjs b/packages/react/components/Account/Password.mjs index 7b9084db225..5627573d73d 100644 --- a/packages/react/components/Account/Password.mjs +++ b/packages/react/components/Account/Password.mjs @@ -63,7 +63,7 @@ export const Password = ({ welcome = false, Link = false }) => { Save {!account.mfaEnabled && ( - +

    Please consider enabling Two-Factor Authentication

    We do not enforce a password policy, but we do recommend you enable Two-Factor diff --git a/packages/react/components/Account/Pattern.mjs b/packages/react/components/Account/Pattern.mjs index 19bceffb5d1..48dc9d9296f 100644 --- a/packages/react/components/Account/Pattern.mjs +++ b/packages/react/components/Account/Pattern.mjs @@ -146,7 +146,7 @@ export const Pattern = ({ id, Link }) => { return (

    {pattern.public ? ( - +
    This is the private view of your pattern

    Everyone can access the public view since this is a public pattern. diff --git a/packages/react/components/Account/Set.mjs b/packages/react/components/Account/Set.mjs index 1e243170fb2..b45cfcffd97 100644 --- a/packages/react/components/Account/Set.mjs +++ b/packages/react/components/Account/Set.mjs @@ -748,7 +748,7 @@ const SuggestCset = ({ mset, Link }) => { Notes

    If you would like to add any notes, you can do so here.

    - + This field supports markdown true} /> diff --git a/packages/react/components/Editor/components/Set.mjs b/packages/react/components/Editor/components/Set.mjs index 8ab87cc0fc6..1a347d7e962 100644 --- a/packages/react/components/Editor/components/Set.mjs +++ b/packages/react/components/Editor/components/Set.mjs @@ -47,7 +47,7 @@ export const UserSetPicker = ({ if (!hasSets) return (
    - +
    You do not (yet) have any of your own measurements sets

    You can store your measurements as a measurements set, after which you can generate as @@ -88,7 +88,7 @@ export const UserSetPicker = ({ )} {lackingSets.length > 0 ? (

    - +
    Some of your measurements sets lack the measurements required to generate this pattern
    @@ -174,7 +174,7 @@ export const BookmarkedSetPicker = ({ )} {lackingSets.length > 0 && (
    - +
    Some of these measurements sets lack the measurements required to generate this pattern diff --git a/packages/react/components/Editor/components/views/DocsView.mjs b/packages/react/components/Editor/components/views/DocsView.mjs index 19750c43fb0..b0e4c26d2ce 100644 --- a/packages/react/components/Editor/components/views/DocsView.mjs +++ b/packages/react/components/Editor/components/views/DocsView.mjs @@ -22,7 +22,7 @@ export const DocsView = ({ state, config, update }) => {

    Documentation

    {state?.design ? ( - +
    Design Documentation

    You can find documentation for the {capitalize(state.design)} design at: @@ -36,7 +36,7 @@ export const DocsView = ({ state, config, update }) => {

    ) : null} - +
    Understanding the FreeSewing Pattern Editor

    Please refer to the pattern editor documentation at: @@ -49,7 +49,7 @@ export const DocsView = ({ state, config, update }) => {

    - +
    Looking for info on how it really works?
    diff --git a/packages/react/components/Editor/components/views/DraftErrorHandler.mjs b/packages/react/components/Editor/components/views/DraftErrorHandler.mjs index 93a3d33bed4..54000089bf5 100644 --- a/packages/react/components/Editor/components/views/DraftErrorHandler.mjs +++ b/packages/react/components/Editor/components/views/DraftErrorHandler.mjs @@ -14,7 +14,7 @@ export const DraftErrorHandler = ({ failure, errors }) => { } return ( - +

    Sorry, there were problems drafting your pattern with the given measurements and options.

    diff --git a/packages/react/components/Editor/components/views/MeasurementsView.mjs b/packages/react/components/Editor/components/views/MeasurementsView.mjs index df84fb836da..1f736a1137d 100644 --- a/packages/react/components/Editor/components/views/MeasurementsView.mjs +++ b/packages/react/components/Editor/components/views/MeasurementsView.mjs @@ -183,7 +183,7 @@ export const MeasurementsView = ({

    Measurements

    {missingMeasurements && missingMeasurements.length > 0 ? ( - +

    To generate this pattern, we need {missingMeasurements.length} additional measurement {missingMeasurements.length === 1 ? '' : 's'}: @@ -198,7 +198,7 @@ export const MeasurementsView = ({ ) : ( - +
    We have all required measurements to draft this pattern
    + + + +
    + ) +} diff --git a/sites/dev/docs/reference/packages/react/context/loadingstatus/readme.mdx b/sites/dev/docs/reference/packages/react/context/loadingstatus/readme.mdx index 6026658867c..a29b5a570b2 100644 --- a/sites/dev/docs/reference/packages/react/context/loadingstatus/readme.mdx +++ b/sites/dev/docs/reference/packages/react/context/loadingstatus/readme.mdx @@ -1,7 +1,143 @@ --- -title: LoadingStatusContext +title: LoadingStatus --- -:::note -This page is yet to be created -::: +import { DocusaurusDoc } from '@freesewing/react/components/Docusaurus' +import { Popout } from '@freesewing/react/components/Popout' +import { Tab, Tabs } from '@freesewing/react/components/Tab' +import { LoadingExamples } from './_examples.js' + + + +The **LoadingStatus** context is used to set loading status across the FreeSewing web UI. + + +As with all React context, the provider should wrap the content in which you +want to use the context. + +When using one of the high-level wrappers like +[DocusaurusDoc](/reference/packages/react/components/docusaurus/#docusaurusdoc) +or +[DocusaurusPage](/reference/packages/react/components/docusaurus/#docusauruspage) +the context provider is already loaded. + + +## Examples + + + +## Components + +The **LoadingStatus** context provides the following components: + +- [LoadingStatusContext](#loadingstatuscontext) +- [LoadingStatusContextProvider](#loadingstatuscontextprovider) + +### LoadingStatusContext + +This is the context itself to be passed to `React.useContext()`. + +```js +import { LoadingStatusContext } from '@freesewing/react/context/LoadingStatus' + +const MyComponent = () => { + const { + loading, + LoadingStatus, + LoadingProgress, + setLoadingStatus, + } = useContext(LoadingStatusContext) + + // ... +} +``` + +The returned object holds the following: + +### context.loading + +This is a boolean that is `true` when we are currently in a loading state, or `false` when not. + +### context.LoadingStatus + +This is the component that renders the actual loading status message. + + +When using one of the high-level wrappers like +[DocusaurusDoc](/reference/packages/react/components/docusaurus/#docusaurusdoc) +or +[DocusaurusPage](/reference/packages/react/components/docusaurus/#docusauruspage) +the LoadingStatus component is already loaded. +As such, so you typically do not need to use this. + + +### context.LoadingProgress + +This is a helper component to display a loading message with a progress bar. +Although you still need to update the loading state yourself to generate a true progress example. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    NameTypeDescriptionOptionalDefault Value
    propsobjectAll component propsno`undefined`
    props.msgstring|JSX.ElementThe loading messageyes`undefined`
    props.valnumberThe current progress valueyes`0`
    props.maxnumberThe maximum progress valueyes`1`
    +     + + + +     + +### context.setLoadingStatus + +This is the method to be used to set the loading status: +```js +setLoadingStatus([ + show=false, + msg=null, + fade=true + success=true, +]) +``` +### LoadingStatusContextProvider + +This is the context provider, it does not take any props apart from `props.children`. + +     diff --git a/sites/dev/docs/reference/packages/react/context/modal/_examples.js b/sites/dev/docs/reference/packages/react/context/modal/_examples.js new file mode 100644 index 00000000000..7a24e155b21 --- /dev/null +++ b/sites/dev/docs/reference/packages/react/context/modal/_examples.js @@ -0,0 +1,16 @@ +import React, { useContext } from 'react' +import { ModalContext } from '@freesewing/react/context/Modal' +import { ModalWrapper } from '@freesewing/react/components/Modal' + +export const ModalExamples = () => { + const { setModal, clearModal } = useContext(ModalContext) + + return ( +
    + +
    + ) +} diff --git a/sites/dev/docs/reference/packages/react/context/modal/readme.mdx b/sites/dev/docs/reference/packages/react/context/modal/readme.mdx index be2896d79b6..394f26f0ad2 100644 --- a/sites/dev/docs/reference/packages/react/context/modal/readme.mdx +++ b/sites/dev/docs/reference/packages/react/context/modal/readme.mdx @@ -1,7 +1,85 @@ --- -title: ModalContext +title: Modal --- -:::note -This page is yet to be created -::: +import { DocusaurusDoc } from '@freesewing/react/components/Docusaurus' +import { Popout } from '@freesewing/react/components/Popout' +import { MiniTip } from '@freesewing/react/components/Mini' +import { Tab, Tabs } from '@freesewing/react/components/Tab' +import { ModalExamples } from './_examples.js' + + + +The **Modal** context is used to set modal content across the FreeSewing web UI. + + +As with all React context, the provider should wrap the content in which you +want to use the context. + +When using one of the high-level wrappers like +[DocusaurusDoc](/reference/packages/react/components/docusaurus/#docusaurusdoc) +or +[DocusaurusPage](/reference/packages/react/components/docusaurus/#docusauruspage) +the context provider is already loaded. + + +## Examples + + + +
    +The [ModalWrapper ](/reference/packages/react/components/modal/#modalwrapper) documentation has more examples. + +## Components + +The **Modal** context provides the following components: + +- [ModalContext](#modalcontext) +- [ModalContextProvider](#modalcontextprovider) + +### ModalContext + +This is the context itself to be passed to `React.useContext()`. + +```js +import { ModalContext } from '@freesewing/react/context/Modal' + +const MyComponent = () => { + const { + clearModal, + modalContent, + setModal, + } = useContext(ModalContext) + + // ... +} +``` + +The returned object holds the following: + +### context.clearModal + +Call this method to clear the modal content. + +### context.modalContent + +This holds the current modal content. + + +When using one of the high-level wrappers like +[DocusaurusDoc](/reference/packages/react/components/docusaurus/#docusaurusdoc) +or +[DocusaurusPage](/reference/packages/react/components/docusaurus/#docusauruspage) +the modal content will automatically be displayed. If not, you need to render it yoursel +using this value. + + +### context.setModal + +Call this method to set the modal content. The only parameter is the content to set. + +### ModalContextProvider + +This is the context provider, it does not take any props apart from `props.children`. + +     From e210055a7b8dd3290617a1be5ab669ac606e003e Mon Sep 17 00:00:00 2001 From: joostdecock Date: Thu, 29 May 2025 17:23:19 +0200 Subject: [PATCH 56/74] [react] feat: Added docs for hooks/useAccount --- .../react/hooks/useaccount/readme.mdx | 148 +++++++++++++++++- 1 file changed, 145 insertions(+), 3 deletions(-) diff --git a/sites/dev/docs/reference/packages/react/hooks/useaccount/readme.mdx b/sites/dev/docs/reference/packages/react/hooks/useaccount/readme.mdx index 64e08c85ce3..5d86ed78cac 100644 --- a/sites/dev/docs/reference/packages/react/hooks/useaccount/readme.mdx +++ b/sites/dev/docs/reference/packages/react/hooks/useaccount/readme.mdx @@ -2,6 +2,148 @@ title: useAccount --- -:::note -This page is yet to be created -::: +import { DocusaurusDoc } from '@freesewing/react/components/Docusaurus' +import { MiniTip } from '@freesewing/react/components/Mini' + + + +The **useAccount** hook provides access to a FreeSewing user's account data in local storage. + +Use this hook to tap into the account state that is stored in the browser. + +To load the account data, or update it, refer to the [useBackend](//reference/packages/react/hooks/usebackend/) hook instead. + +## Example + +```js +import { useAccount } from '@freesewing/react/hooks/useAccount' + +const MyComponent = () => { + const { + account, + admin, + clearAdmin, + control, + impersonate, + seenuser, + setAccount, + setSeenUser, + setToken, + signOut, + stopImpersonating, + token + } = useAccount() + + // ... +} +``` + +## Return value + +Calling the hook returns an object with the following properties: + +- [account](#account) +- [admin](#admin) +- [clearAdmin](#clearadmin) +- [control](#control) +- [impersonate](#impersonate) +- [seenUser](#seenuser) +- [setAccount](#setaccount) +- [setSeenUser](#setseenuser) +- [setToken](#settoken) +- [signOut](#signout) +- [stopImpersonating](#stopimpersonating) +- [token](#token) + +### account + +Holds the account data available in the browser. Below is an example: + +```js +{ + id: 1, + bio: "Hi, my name is Joost 👋\n\n - 🫡 I am the [benevolent dictator](https://en.wikipedia.org/wiki/Benevolent_dictator_for_life) here at FreeSewing\n - 🧵 I make clothes and shoes\n - 👕 I design sewing patterns\n - 🧑‍💻 I write code\n - 🐘 I am [@joost@freesewing.social](https://freesewing.social/@joost) on Mastodon\n - 🦋 I am [@joost.at](https://bsky.app/profile/joost.at) on Bluesky\n - 📫 My email is joost AT joost DOT at\n - 🙊 I'm an introvert\n - 🦈 My pronouns are he/him or they/them\n - 👻 Joost sounds like Ghost, in case you're wondering\n", + compare: true, + consent: 1, + control: 5, + createdAt: "2014-01-20T17:10:47.000Z", + ehash: "8543e38de4652095c51571fb8dc1734eb7b1b736e574176c42e2f954e5e95a50", + email:"joost@joost.at", + data: { + mastodon: "@joost@freesewing.social", + instagram: "@freesewing_org", + githubUsername: "joostdecock", + githubEmail: "joost@joost.at", + reddit: "j__st", + website: "https://freesewing.org/" + }, + ihash: "7bf3d6a154885eb2c4f56e2bf54b3666d8fb634b72c07c971511816ed0298c79", + imperial: false, + initial: "joost@decock.org", + jwtCalls: 13860, + keyCalls: 16, + language: "en", + lastSeen: "2025-05-29T09:47:56.603Z", + mfaEnabled: true, + newsletter: true, + role: "admin", + status: 1, + updatedAt: "2025-05-29T09:47:56.604Z", + username: "joost", + lusername: "joost", + passwordType: "v3", + bestBefore:1748515676626 +} +``` + +### admin + +A user with the `admin` role can impersonate another user. +When that happens, this will hold the `account` data of the admin user so it can be restored later. + +### clearAdmin + +This clears the admin data held in `admin`. + +### control + +This provides the user's control score. + +### impersonate + +This method allows users with the `admin` role to impersonate another user. + +It takes an object that should hold the entire user's account data as returned from the backend. + +### seenUser + +This holds the username that was once authenticated in this browser. + +It is what allows a _welcome back [seenUser]_ message to be shown even when no user is currently logged in. + +### setAccount + +This method sets the data held in `account`. + +### setSeenUser + +This method sets the data held in `seenUser`. + +### setToken + +This method sets the data held in `token`. + +### signOut + +This message will remove the account data from the browser. + +### stopImpersonating + +This method will stop impersonating theuser and restore the `admin` account data to `account`. + +### token + +This holds the JSON Web Token that is used to authenticate to the FreeSewing backend. + + + From a77a263ca05cb830e343da04019cd7c46965d056 Mon Sep 17 00:00:00 2001 From: joostdecock Date: Thu, 29 May 2025 17:23:29 +0200 Subject: [PATCH 57/74] [react] feat: Added docs for hooks/useBackend --- packages/react/hooks/useBackend/index.mjs | 116 -- .../react/hooks/usebackend/readme.mdx | 1069 ++++++++++++++++- 2 files changed, 1066 insertions(+), 119 deletions(-) diff --git a/packages/react/hooks/useBackend/index.mjs b/packages/react/hooks/useBackend/index.mjs index 6882e0b76df..03a6f790bde 100644 --- a/packages/react/hooks/useBackend/index.mjs +++ b/packages/react/hooks/useBackend/index.mjs @@ -24,79 +24,6 @@ export function useBackend() { */ const backend = useMemo(() => new Backend(token), [token]) - /* - * This backend object rovides the following methods: - * - * - backend.adminSearchUsers - * - backend.adminLoadUser - * - backend.adminUpdateUser - * - backend.adminImpersonateUser - * - backend.adminLoadSubscribers - * - backend.adminPing - * - backend.acceptCset - * - backend.confirmMfa - * - backend.confirmSignup - * - backend.createApikey - * - backend.createBookmark - * - backend.createSocialImage - * - backend.createDiscussion - * - backend.createIssue - * - backend.createPattern - * - backend.createPostPr - * - backend.createSet - * - backend.disableMfa - * - backend.enableMfa - * - backend.exportAccount - * - backend.getApikey - * - backend.getApikeys - * - backend.getBookmark - * - backend.getBookmarks - * - backend.getConfirmation - * - backend.getCuratedSet - * - backend.getCuratedSets - * - backend.getPattern - * - backend.getPatterns - * - backend.getPublicPattern - * - backend.getPublicSet - * - backend.getSet - * - backend.getSets - * - backend.getStats - * - backend.getSuggestedPacks - * - backend.getSuggestedSets - * - backend.getUserCount - * - backend.getUserData - * - backend.getUserProfile - * - backend.isPostSlugAvailable - * - backend.isUsernameAvailable - * - backend.newsletterConfirmSubscribe - * - backend.newsletterSubscribe - * - backend.newsletterUnsubscribe - * - backend.oauthInit - * - backend.oauthSignIn - * - backend.ping - * - backend.reloadAccount - * - backend.removeAccount - * - backend.removeApikey - * - backend.removeBookmark - * - backend.removeCuratedSet - * - backend.removeImage - * - backend.removePattern - * - backend.removeSet - * - backend.removeSuggestedSet - * - backend.restrictAccount - * - backend.signIn - * - backend.signInFromLink - * - backend.signUp - * - backend.suggestCset - * - backend.suggestOpack - * - backend.updateAccount - * - backend.updateCuratedSet - * - backend.updateConsent - * - backend.updatePattern - * - backend.updateSet - * - backend.uploadImage - * - backend.uploadImageAnon - */ return backend } @@ -241,16 +168,6 @@ Backend.prototype.createSocialImage = async function (data) { return await this.post('/img', data) } -/** - * Create GitHub discussion - * - * @param {object} data - Data for the API call - * @return {array} result - The REST response, a [status, data] array - */ -Backend.prototype.createDiscussion = async function (data) { - return await this.post(`/discussions`, data) -} - /** * Create GitHub issue * @@ -575,30 +492,6 @@ Backend.prototype.newsletterStartUnsubscribe = async function (email) { return await this.post(`/subscriber/remove`, { email }) } -/* - * Init Oauth flow for oauth provider - * - * @param {object} data - * @param {string} data.provider - ID of the OAuth provider - * @return {array} result - The REST response, a [status, data] array - */ -Backend.prototype.oauthInit = async function (provider) { - return await this.post('/signin/oauth/init', { provider }) -} - -/* - * User sign in via oauth provider - * - * @param {object} data - * @param {string} data.state - The Oath state - * @param {code} data.code - The OAuth code - * @param {string} data.provider - ID of the OAuth provider - * @return {array} result - The REST response, a [status, data] array - */ -Backend.prototype.oauthSignIn = async function ({ state, code, provider }) { - return await this.post('/signin/oauth', { state, code, provider }) -} - /** * Ping backend to see if current token is still valid * @@ -819,12 +712,3 @@ Backend.prototype.uploadImage = async function (data) { return await this.post('/images/jwt', data) } -/** - * Upload an image anonymously - * - * @param {object} data - Data for the API call - * @return {array} result - The REST response, a [status, data] array - */ -Backend.prototype.uploadImageAnon = async function (data) { - return await this.post('/images', data) -} diff --git a/sites/dev/docs/reference/packages/react/hooks/usebackend/readme.mdx b/sites/dev/docs/reference/packages/react/hooks/usebackend/readme.mdx index 92c6bfb4a8d..55e074de60c 100644 --- a/sites/dev/docs/reference/packages/react/hooks/usebackend/readme.mdx +++ b/sites/dev/docs/reference/packages/react/hooks/usebackend/readme.mdx @@ -2,6 +2,1069 @@ title: useBackend --- -:::note -This page is yet to be created -::: + +import { DocusaurusDoc } from '@freesewing/react/components/Docusaurus' +import { MiniTip } from '@freesewing/react/components/Mini' +import { Popout } from '@freesewing/react/components/Popout' + + + +The **useBackend** hook provides access to the FreeSewing backend. + +Use this hook to load data from the backend, or save data to it. + +To access the user data cached in the browser, refer to the [useAccount](//reference/packages/react/hooks/useaccount/) hook instead. + +## Example + +```js +import { useBackend } from '@freesewing/react/hooks/useBackend' + +const MyComponent = () => { + const { + acceptCset, + adminImpersonateUser, + adminLoadSubscribers, + adminLoadUser, + adminPing, + adminUpdateUser, + confirmMfa, + confirmSignup, + createApikey, + createBookmark, + createIssue, + createPattern, + createPostPr, + createSet, + createSocialImage, + disableMfa, + enableMfa, + exportAccount, + getApikey, + getApikeys, + getBookmark, + getBookmarks, + getConfirmation, + getCuratedSet, + getCuratedSet, + getPattern, + getPatterns, + getPublicPattern, + getPublicSet, + getSet, + getSets, + getStats, + getSuggestedPacks, + getSuggestedSets, + getUserCount, + getUserData, + getUserProfile, + isPostSlugAvailable, + isUsernameAvailable, + newsletterConfirmSubscribe, + newsletterStartUnsubscribe, + newsletterSubscribe, + newsletterUnsubscribe, + ping, + reloadAccount, + removeAccount, + removeApikey, + removeBookmark, + removeCuratedSet, + removeImage, + removePattern, + removeSet, + removeSuggestedSet, + restrictAccount, + signIn, + signInFromLink, + signUp, + suggestCset, + suggestOpack, + updateAccount, + updateConsent, + updateCuratedSet, + updatePattern, + updateSet, + uploadImage, + } = useBackend() + + // ... +} +``` +## Return value + +Calling the hook returns an object with the following properties which are all methods: + + +- [acceptCset](#acceptcset) +- [adminImpersonateUser](#adminimpersonateuser) +- [adminLoadSubscribers](#adminloadsubscribers) +- [adminLoadUser](#adminloaduser) +- [adminPing](#adminping) +- [adminUpdateUser](#adminupdateuser) +- [confirmMfa](#confirmmfa) +- [confirmSignup](#confirmsignup) +- [createApikey](#createapikey) +- [createBookmark](#createbookmark) +- [createIssue](#createissue) +- [createPattern](#createpattern) +- [createPostPr](#createpostpr) +- [createSet](#createset) +- [createSocialImage](#createsocialimage) +- [disableMfa](#disablemfa) +- [enableMfa](#enablemfa) +- [exportAccount](#exportaccount) +- [getApikey](#getapikey) +- [getApikeys](#getapikeys) +- [getBookmark](#getbookmark) +- [getBookmarks](#getbookmarks) +- [getConfirmation](#getconfirmation) +- [getCuratedSet](#getcuratedset) +- [getCuratedSet](#getcuratedset) +- [getPattern](#getpattern) +- [getPatterns](#getpatterns) +- [getPublicPattern](#getpublicpattern) +- [getPublicSet](#getpublicset) +- [getSet](#getset) +- [getSets](#getsets) +- [getStats](#getstats) +- [getSuggestedPacks](#getsuggestedpacks) +- [getSuggestedSets](#getsuggestedsets) +- [getUserCount](#getusercount) +- [getUserData](#getuserdata) +- [getUserProfile](#getuserprofile) +- [isPostSlugAvailable](#ispostslugavailable) +- [isUsernameAvailable](#isusernameavailable) +- [newsletterConfirmSubscribe](#newsletterconfirmsubscribe) +- [newsletterStartUnsubscribe](#newsletterstartunsubscribe) +- [newsletterSubscribe](#newslettersubscribe) +- [newsletterUnsubscribe](#newsletterunsubscribe) +- [oauthInit](#oauthinit) +- [oauthSignIn](#oauthsignin) +- [ping](#ping) +- [reloadAccount](#reloadaccount) +- [removeAccount](#removeaccount) +- [removeApikey](#removeapikey) +- [removeBookmark](#removebookmark) +- [removeCuratedSet](#removecuratedset) +- [removeImage](#removeimage) +- [removePattern](#removepattern) +- [removeSet](#removeset) +- [removeSuggestedSet](#removesuggestedset) +- [restrictAccount](#restrictaccount) +- [signIn](#signin) +- [signInFromLink](#signinfromlink) +- [signUp](#signup) +- [suggestCset](#suggestcset) +- [suggestOpack](#suggestopack) +- [updateAccount](#updateaccount) +- [updateConsent](#updateconsent) +- [updateCuratedSet](#updatecuratedset) +- [updatePattern](#updatepattern) +- [updateSet](#updateset) +- [uploadImage](#uploadimage) + +### acceptCset + +A method to accept a candidate measurements set for curation. + +```js +[ + Number status, // The HTTP Status Code returned from the backend + Object data, // The response body returned from the backend +] = async function acceptCset ( + Number id // The ID of the curated set to accept for curation +) +``` + + +### adminImpersonateUser + +A method to impersonates a user. + +```js +[ + Number status, // The HTTP Status Code returned from the backend + Object data, // The response body returned from the backend +] = async function adminImpersonateUser ( + Number id // The user ID to impersonate +) +``` + + +### adminLoadSubscribers + +A method to load the list of newsletter subscribers. + +```js +[ + Number status, // The HTTP Status Code returned from the backend + Object data, // The response body returned from the backend +] = async function adminLoadSubscribers () +``` + + +### adminLoadUser + +A method to load the account data for a given user ID. + +```js +[ + Number status, // The HTTP Status Code returned from the backend + Object data, // The response body returned from the backend +] = async function adminLoadUser ( + Number id // The user ID to load account data for +) +``` + + +### adminPing + +A method that checks whether a given JSON Web Token (JWT) is valid. + +```js +[ + Number status, // The HTTP Status Code returned from the backend + Object data, // The response body returned from the backend +] = async function adminPing ( + String token // The JWT to verify +) +``` + + +### adminUpdateUser + +A method that loads user data for a user that is not the current user. + +```js +[ + Number status, // The HTTP Status Code returned from the backend + Object data, // The response body returned from the backend +] = async function adminUpdateUser ( + { + Number id, // The user ID to update + Object data, // The account data to store + } +) +``` + + +### confirmMfa + +A method to confirm the setup of MFA on the account. + +```js +[ + Number status, // The HTTP Status Code returned from the backend + Object data, // The response body returned from the backend +] = async function confirmMfa ( + { + Boolean mfa, // Whether to enable MFA (true) or not (false) + String secret, // The MFA secret + String token, // The MFA token (TOTP) + } +) +``` + + +### confirmSignup + +A method to confirm the account sign up. + +```js +[ + Number status, // The HTTP Status Code returned from the backend + Object data, // The response body returned from the backend +] = async function confirmSignup ( + { + Number id, // The user ID + Number consent, // A number representing the consent granted + } +) +``` + + +### createApikey + +A method to create an API key. + +```js +[ + Number status, // The HTTP Status Code returned from the backend + Object data, // The response body returned from the backend +] = async function createApikey ( + { + String name, // The API key name + Number level, // The API key access level + Number expiresIn, // Time in seconds before this API key expires + } +) +``` + + +### createBookmark + +A method to create a bookmark. + +```js +[ + Number status, // The HTTP Status Code returned from the backend + Object data, // The response body returned from the backend +] = async function createBookmark ( + { + String title, // The bookmark title + String url, // The bookmark URL + String type, // The bookmark type + } +) +``` + + +### createIssue + +A method to create an issue on GitHub. +This is not (yet) ported to Codeberg. + +```js +[ + Number status, // The HTTP Status Code returned from the backend + Object data, // The response body returned from the backend +] = async function createIssue ( + Object data // The issue data +) +``` + + +### createPattern + +A method to store a new pattern in the backend. + +```js +[ + Number status, // The HTTP Status Code returned from the backend + Object data, // The response body returned from the backend +] = async function createPattern ( + Object data // The pattern data +) +``` + + +### createPostPr + +A method to create a pull request to add a new showcase or blog post. + +This is not (yet) ported to Codeberg. + +```js +[ + Number status, // The HTTP Status Code returned from the backend + Object data, // The response body returned from the backend +] = async function createPostPr ( + String type, // The post type, one of showcase or blog + Object data // The post data +) +``` + + +### createSet + +A method to store a new measurements set in the backend. + +```js +[ + Number status, // The HTTP Status Code returned from the backend + Object data, // The response body returned from the backend +] = async function createSet ( + Object data // The set data +) +``` + + +### createSocialImage + +A method to create an image for social media. + +```js +[ + Number status, // The HTTP Status Code returned from the backend + Object data, // The response body returned from the backend +] = async function createSocialImage ( + Object data // The image data +) +``` + + +### disableMfa + +A method to disable MFA on the account. + +```js +[ + Number status, // The HTTP Status Code returned from the backend + Object data, // The response body returned from the backend +] = async function disableMfa ( + { + String password, // The user's password + String token, // A MFA token (TOTP) + } +) +``` + + +### enableMfa + +A method to enable MFA on the account. + +```js +[ + Number status, // The HTTP Status Code returned from the backend + Object data, // The response body returned from the backend +] = async function enableMfa () +``` + + +### exportAccount + +A method to export the current user's account data. + +```js +[ + Number status, // The HTTP Status Code returned from the backend + Object data, // The response body returned from the backend +] = async function exportAccount () +``` + + +### getApikey + +A method to load an API key from the backend. + +```js +[ + Number status, // The HTTP Status Code returned from the backend + Object data, // The response body returned from the backend +] = async function getApikey ( + String ID // The API key ID +) +``` + + +### getApikeys + +A method to load the list of API keys from the backend. + +```js +[ + Number status, // The HTTP Status Code returned from the backend + Object data, // The response body returned from the backend +] = async function getApikeys () +``` + + +### getBookmark + +A method to load a bookmark from the backend. + +```js +[ + Number status, // The HTTP Status Code returned from the backend + Object data, // The response body returned from the backend +] = async function getBookmark ( + String id // The bookmark ID +) +``` + + +### getBookmarks + +A method to load the list of bookmarks from the backend. + +```js +[ + Number status, // The HTTP Status Code returned from the backend + Object data, // The response body returned from the backend +] = async function getBookmarks () +``` + + +### getConfirmation + +A method to load a confirmation from the backend. +```js +[ + Number status, // The HTTP Status Code returned from the backend + Object data, // The response body returned from the backend +] = async function getConfirmation ( + { + string id, // The confirmation ID + string check, // The confirmation verifier + } +) +``` + + +### getCuratedSet + +A method to load a curated measurements set from the backend. + +```js +[ + Number status, // The HTTP Status Code returned from the backend + Object data, // The response body returned from the backend +] = async function getCuratedSet ( +) +``` + + +### getCuratedSet + +```js +[ + Number status, // The HTTP Status Code returned from the backend + Object data, // The response body returned from the backend +] = async function getCuratedSet ( + Number id // The ID of the curated measurements set to load +) +``` + + +### getPattern + +A method to load a pattern from the backend. + +```js +[ + Number status, // The HTTP Status Code returned from the backend + Object data, // The response body returned from the backend +] = async function getPattern ( + Number id // The ID of the pattern to load +) +``` + + +### getPatterns + +A method to load the patterns of the current user from the backend. + +```js +[ + Number status, // The HTTP Status Code returned from the backend + Object data, // The response body returned from the backend +] = async function getPatterns () +``` + + +### getPublicPattern + +A method to load a public pattern from the backend. + +```js +[ + Number status, // The HTTP Status Code returned from the backend + Object data, // The response body returned from the backend +] = async function getPublicPattern ( + Number id // The ID of the public pattern to load +) +``` + + +### getPublicSet + +A method to load a public measurements set from the backend. + +```js +[ + Number status, // The HTTP Status Code returned from the backend + Object data, // The response body returned from the backend +] = async function getPublicSet ( + Number id // The ID of the public measurments set to load +) +``` + + +### getSet + +A method to load a measurments set from the backend. + +```js +[ + Number status, // The HTTP Status Code returned from the backend + Object data, // The response body returned from the backend +] = async function getSet ( + Number id // The ID of the measurments set to load +) +``` + + +### getSets + +A method to load the user's measurements sets from the backend. + +```js +[ + Number status, // The HTTP Status Code returned from the backend + Object data, // The response body returned from the backend +] = async function getSets () +``` + + +### getStats + +A method to load statistics about the FreeSewing backend. + +```js +[ + Number status, // The HTTP Status Code returned from the backend + Object data, // The response body returned from the backend +] = async function getStats () +``` + + +### getSuggestedPacks + +This is a work in progress + + +### getSuggestedSets + +A method to load the measurements sets suggested for curation. + +```js +[ + Number status, // The HTTP Status Code returned from the backend + Object data, // The response body returned from the backend +] = async function getSuggestedSets () +``` + + +### getUserCount + +A method to load the number of FreeSewing users. + +```js +[ + Number status, // The HTTP Status Code returned from the backend + Object data, // The response body returned from the backend +] = async function getUserCount () +``` + + +### getUserData + +A method to load a user's data. + +```js +[ + Number status, // The HTTP Status Code returned from the backend + Object data, // The response body returned from the backend +] = async function getUserData ( + Number uid, // The user ID +) +``` + + +### getUserProfile + +A method to load a user's profile data. + +```js +[ + Number status, // The HTTP Status Code returned from the backend + Object data, // The response body returned from the backend +] = async function getUserProfile ( + Number uid, // The user ID +) +``` + + +### isPostSlugAvailable + +A method that checks whether a post slug is available in the repository. + +This is not (yet) ported to Codeberg. + +```js +[ + Number status, // The HTTP Status Code returned from the backend + Object data, // The response body returned from the backend +] = async function isPostSlugAvailable ( + { + String slug, // The slug to check + String type, // The post type, one of showcase or blog + } +) +``` + + +### isUsernameAvailable + +A method to check whether a username is available for registration. +```js +[ + Number status, // The HTTP Status Code returned from the backend + Object data, // The response body returned from the backend +] = async function isUsernameAvailable ( + String username // The username to check +) +``` + + +### newsletterConfirmSubscribe + +A method to confirm a newsletter subscription after sending out the confirmation email. + +```js +[ + Number status, // The HTTP Status Code returned from the backend + Object data, // The response body returned from the backend +] = async function newsletterConfirmSubscribe ( + { + String id, // The confirmation ID + String ehash, // The confirmation ehash + } +) +``` + + +### newsletterStartUnsubscribe + +A method to start the unsubscribe flow for the newsletter. + +```js +[ + Number status, // The HTTP Status Code returned from the backend + Object data, // The response body returned from the backend +] = async function newsletterStartUnsubscribe () +``` + + +### newsletterSubscribe +```js +[ + Number status, // The HTTP Status Code returned from the backend + Object data, // The response body returned from the backend +] = async function newsletterSubscribe ( + String email // The email to unsubscribe +) +``` + + +### newsletterUnsubscribe + +A method to unsubscribe an email address from the newsletter. + +```js +[ + Number status, // The HTTP Status Code returned from the backend + Object data, // The response body returned from the backend +] = async function newsletterUnsubscribe ( + String ehash // The ehash to unsubscribe +) +``` + + +### ping + +A method that checks whether the current user is logged in. + +```js +[ + Number status, // The HTTP Status Code returned from the backend + Object data, // The response body returned from the backend +] = async function ping () +``` + + +### reloadAccount + +A method that returns the current account data from the backend. + +```js +[ + Number status, // The HTTP Status Code returned from the backend + Object data, // The response body returned from the backend +] = async function reloadAccount () +``` + + +### removeAccount + +A method to remove a user's account. + +```js +[ + Number status, // The HTTP Status Code returned from the backend + Object data, // The response body returned from the backend +] = async function removeAccount () +``` + + +### removeApikey + +A method to remove an API key. + +```js +[ + Number status, // The HTTP Status Code returned from the backend + Object data, // The response body returned from the backend +] = async function removeApikey ( + String id // The API key ID +) +``` + + +### removeBookmark + +A method to remove an API key. + +```js +[ + Number status, // The HTTP Status Code returned from the backend + Object data, // The response body returned from the backend +] = async function removeBookmark ( + Number id // The bookmark ID +) +``` + + +### removeCuratedSet + +A method to remove a curated measurements set. + +```js +[ + Number status, // The HTTP Status Code returned from the backend + Object data, // The response body returned from the backend +] = async function removeCuratedSet ( + Number id // The curated measurements set ID +) +``` + + +### removeImage + +A method to remove an image. + +```js +[ + Number status, // The HTTP Status Code returned from the backend + Object data, // The response body returned from the backend +] = async function removeImage ( + String id // The image ID +) +``` + + +### removePattern + +A method to remove a pattern. + +```js +[ + Number status, // The HTTP Status Code returned from the backend + Object data, // The response body returned from the backend +] = async function removePattern ( + Number id // The pattern ID +) +``` + + +### removeSet + +A method to remove a measurments set. + +```js +[ + Number status, // The HTTP Status Code returned from the backend + Object data, // The response body returned from the backend +] = async function removeSet ( + Number id // The measurements set ID +) +``` + + +### removeSuggestedSet + +A method to remove a suggested measurments set. This removes the suggestion, not the measurements set itself. + +```js +[ + Number status, // The HTTP Status Code returned from the backend + Object data, // The response body returned from the backend +] = async function removeSuggestedSet ( + Number id // The suggested measurements set ID +) +``` + + +### restrictAccount + +A method to restrict processing of account data. This locks you out of your account. + +```js +[ + Number status, // The HTTP Status Code returned from the backend + Object data, // The response body returned from the backend +] = async function restrictAccount () +``` + + +### signIn + +A method to sign in, or authenticate. + +```js +[ + Number status, // The HTTP Status Code returned from the backend + Object data, // The response body returned from the backend +] = async function signIn ( + { + String username, // The username to sign in with + String password, // The password + String token, // The MFA TOTP token (only required if MFA is enabled on the account) + } +) +``` + + +### signInFromLink + +A method to sign in based on the data in a sign in link emailed to the user. + +```js +[ + Number status, // The HTTP Status Code returned from the backend + Object data, // The response body returned from the backend +] = async function signInFromLink ( + { + String id, // The confirmation ID + String check, // The confirmation verifier + String token, // The MFA TOTP token (only required if MFA is enabled on the account) + } +) +``` + + +### signUp +```js +[ + Number status, // The HTTP Status Code returned from the backend + Object data, // The response body returned from the backend +] = async function signUp ( + { + String email // The email address to sign up + } +) +``` + + +### suggestCset + +A method to suggest a measurements set for curation. + +```js +[ + Number status, // The HTTP Status Code returned from the backend + Object data, // The response body returned from the backend +] = async function suggestCset ( + Number id // The ID of the measurements set being suggested +) +``` + + +### suggestOpack + +This is a work in progress + + +### updateAccount + +A method to update the account data stored in the backend. + +```js +[ + Number status, // The HTTP Status Code returned from the backend + Object data, // The response body returned from the backend +] = async function updateAccount ( +) +``` + + +### updateConsent +```js +[ + Number status, // The HTTP Status Code returned from the backend + Object data, // The response body returned from the backend +] = async function updateConsent ( + Object data // The account data to be udpated +) +``` + + +### updateCuratedSet + +A method to update a curated measurements set. + +```js +[ + Number status, // The HTTP Status Code returned from the backend + Object data, // The response body returned from the backend +] = async function updateCuratedSet ( + { + Number id, // The ID of the curated measurements set to update + Object data // The data to be updated + } +) +``` + + +### updatePattern + +A method to update a pattern. + +```js +[ + Number status, // The HTTP Status Code returned from the backend + Object data, // The response body returned from the backend +] = async function updatePattern ( + { + Number id, // The ID of the pattern to update + Object data // The data to be updated + } +) +``` + + +### updateSet + +A method to update a measurements set. + +```js +[ + Number status, // The HTTP Status Code returned from the backend + Object data, // The response body returned from the backend +] = async function updateSet ( + { + Number id, // The ID of the measurements set to update + Object data // The data to be updated + } +) +``` + + +### uploadImage + +A method to upload an image. + +```js +[ + Number status, // The HTTP Status Code returned from the backend + Object data, // The response body returned from the backend +] = async function uploadImage ( + Object data // The image data +) +``` + + + From 17e8e5ec09d2b38a04fdf2cb8401621ac09409ca Mon Sep 17 00:00:00 2001 From: joostdecock Date: Thu, 29 May 2025 17:43:10 +0200 Subject: [PATCH 58/74] [react] feat: Added docs for hooks/useControl --- packages/react/components/Account/Control.mjs | 4 +- packages/react/hooks/useControl/index.mjs | 19 +++++-- .../react/hooks/usebackend/readme.mdx | 1 - .../react/hooks/usecontrol/readme.mdx | 56 ++++++++++++++++++- 4 files changed, 69 insertions(+), 11 deletions(-) diff --git a/packages/react/components/Account/Control.mjs b/packages/react/components/Account/Control.mjs index 85a0a43437f..c22e1c44c93 100644 --- a/packages/react/components/Account/Control.mjs +++ b/packages/react/components/Account/Control.mjs @@ -44,7 +44,7 @@ const strings = { */ export const Control = ({ welcome = false }) => { // Hooks - const { control, updateControl } = useControl() + const { control, setControl } = useControl() // Helper to get the link to the next onboarding step const nextHref = welcome @@ -69,7 +69,7 @@ export const Control = ({ welcome = false }) => { desc: controlDesc[val].desc, }))} current={control} - update={updateControl} + update={setControl} /> {welcome ? ( <> diff --git a/packages/react/hooks/useControl/index.mjs b/packages/react/hooks/useControl/index.mjs index 5afb9255e02..0794be5433f 100644 --- a/packages/react/hooks/useControl/index.mjs +++ b/packages/react/hooks/useControl/index.mjs @@ -17,16 +17,25 @@ export const useControl = () => { const { setLoadingStatus } = useContext(LoadingStatusContext) // State - const [control, setControl] = useState(account.control) + const [control, __setControl] = useState(account.control) - // Method to update the control setting + /* + * Legacy method to update the control setting + * Deprecated because its naming is inconsistent with other hooks + */ const updateControl = async (newControl) => { + console.warn('The updateControl method is deprecated. Use setControl instead.') + return setControl(newControl) + } + + // Method to set the control setting + const setControl = async (newControl) => { if (newControl !== control) { if (token) { setLoadingStatus([true, 'Updating preferences']) const [status, body] = await backend.updateAccount({ control: newControl }) if (status === 200) { - setControl(newControl) + __setControl(newControl) setAccount(body.account) setLoadingStatus([true, 'Preferences updated', true, true]) } else @@ -37,10 +46,10 @@ export const useControl = () => { * So this ensures control is always available, even if people are not authenticated */ setAccount({ ...account, control: newControl }) - setControl(newControl) + __setControl(newControl) } } } - return { control, updateControl } + return { control, setControl, updateControl } } diff --git a/sites/dev/docs/reference/packages/react/hooks/usebackend/readme.mdx b/sites/dev/docs/reference/packages/react/hooks/usebackend/readme.mdx index 55e074de60c..1dfbc910ffa 100644 --- a/sites/dev/docs/reference/packages/react/hooks/usebackend/readme.mdx +++ b/sites/dev/docs/reference/packages/react/hooks/usebackend/readme.mdx @@ -2,7 +2,6 @@ title: useBackend --- - import { DocusaurusDoc } from '@freesewing/react/components/Docusaurus' import { MiniTip } from '@freesewing/react/components/Mini' import { Popout } from '@freesewing/react/components/Popout' diff --git a/sites/dev/docs/reference/packages/react/hooks/usecontrol/readme.mdx b/sites/dev/docs/reference/packages/react/hooks/usecontrol/readme.mdx index 4d7df39dbb6..e833d4d75aa 100644 --- a/sites/dev/docs/reference/packages/react/hooks/usecontrol/readme.mdx +++ b/sites/dev/docs/reference/packages/react/hooks/usecontrol/readme.mdx @@ -2,6 +2,56 @@ title: useControl --- -:::note -This page is yet to be created -::: +import { DocusaurusDoc } from '@freesewing/react/components/Docusaurus' +import { MiniTip } from '@freesewing/react/components/Mini' +import { Popout } from '@freesewing/react/components/Popout' + + + +The **useControl** hook provides access to the control setting of a FreeSewing user. +Use this hook whether you have a UI element that should be hidden or shown +based on the control setting. + + + The **useControl** hook guarantees that a control value will always be available, even if no user + is authenticated. As such, it is recommended to use this rather than the + [useAccount](/reference/packages/react/hooks/useaccount/) hook when all you need is a control + value, and no access to the user account. + + +## Example + +```js +import { useControl } from '@freesewing/react/hooks/useControl' + +const MyComponent = () => { + control, + setControl, +} = useControl() + + // ... +} +``` + +## Return value + +Calling the hook returns an object with the following properties which are all methods: + +- [control](#control) +- [setControl](#setControl) + +### control + +The control value. + +### setControl + +A method to set the new control value. + +```js +function setControl ( + Number control // The new control value to set +) +``` + + From fcf0328555eeb0ee56a604557965e11f6b4bb50e Mon Sep 17 00:00:00 2001 From: joostdecock Date: Thu, 29 May 2025 17:59:49 +0200 Subject: [PATCH 59/74] [react] feat: Added docs for hooks/useDesign --- .../react/hooks/usebackend/readme.mdx | 1 - .../react/hooks/usecontrol/readme.mdx | 7 +- .../packages/react/hooks/usedesign/readme.mdx | 83 ++++++++++++++++++- 3 files changed, 84 insertions(+), 7 deletions(-) diff --git a/sites/dev/docs/reference/packages/react/hooks/usebackend/readme.mdx b/sites/dev/docs/reference/packages/react/hooks/usebackend/readme.mdx index 1dfbc910ffa..4d1f3efc9e6 100644 --- a/sites/dev/docs/reference/packages/react/hooks/usebackend/readme.mdx +++ b/sites/dev/docs/reference/packages/react/hooks/usebackend/readme.mdx @@ -95,7 +95,6 @@ const MyComponent = () => { Calling the hook returns an object with the following properties which are all methods: - - [acceptCset](#acceptcset) - [adminImpersonateUser](#adminimpersonateuser) - [adminLoadSubscribers](#adminloadsubscribers) diff --git a/sites/dev/docs/reference/packages/react/hooks/usecontrol/readme.mdx b/sites/dev/docs/reference/packages/react/hooks/usecontrol/readme.mdx index e833d4d75aa..2093c19b1b9 100644 --- a/sites/dev/docs/reference/packages/react/hooks/usecontrol/readme.mdx +++ b/sites/dev/docs/reference/packages/react/hooks/usecontrol/readme.mdx @@ -25,9 +25,10 @@ based on the control setting. import { useControl } from '@freesewing/react/hooks/useControl' const MyComponent = () => { - control, - setControl, -} = useControl() + const { + control, + setControl, + } = useControl() // ... } diff --git a/sites/dev/docs/reference/packages/react/hooks/usedesign/readme.mdx b/sites/dev/docs/reference/packages/react/hooks/usedesign/readme.mdx index ab54a6003f6..355774f6a4e 100644 --- a/sites/dev/docs/reference/packages/react/hooks/usedesign/readme.mdx +++ b/sites/dev/docs/reference/packages/react/hooks/usedesign/readme.mdx @@ -2,6 +2,83 @@ title: useDesign --- -:::note -This page is yet to be created -::: +import { DocusaurusDoc } from '@freesewing/react/components/Docusaurus' +import { MiniTip } from '@freesewing/react/components/Mini' +import { Popout } from '@freesewing/react/components/Popout' +import { Tab, Tabs } from '@freesewing/react/components/Tab' + + + +The **useDesign** hook provides access to the entire FreeSewing collection of designs. + + +Use this hook to load a design when you plan to use the entire collection. If +you only plan to use one or a few designs, you may want to load them differently as +incluyding this hook will include all FreeSewing designs in your code bundle. + + +## Example + + + +Using the hook makes it easy to load a design if you want to be able to +dynamically load a different design, or do not know in advance what designs +should be made available. + +```js +import { useDesign } from '@freesewing/react/hooks/useDesign' + +const MyComponent = ({ name = 'aaron' }) => { + const Aaron = useDesign(name) + + // ... +} +``` + + +This hook has a `designs` named export that holds the entire FreeSewing collection. + +```js +import { designs } from '@freesewing/react/hooks/useDesign' + +const MyComponent = () => { + const Aaron = designs.aaron + + // ... +} +``` + + +If you know in advance what design you want, importing it directly is more efficient. +```js +import { Aaron } from '@freesewing/aaron' + +const MyComponent = () => { + + // ... +} +``` + + + +## Return value + +Calling the hook returns a design constructor, assuming the design name you pass it is in the FreeSewing collection. + +## Named exports + +You can also load the `collection` and `designs` named exports from the same import: + +```js +import { + collection, // Object.keys(designs) + designs, // An object where the key is the (lowercase) design name, and the value the design contructor + useDesign, // The hook +} from '@freesewing/react/hooks/useDesign' +``` + +- `collection` is an array of lowercase design names. +- `designs` is an object where the key is the (lowercase) design name, and the value the design contructor. + + + From 5b15171dad44fb1211be06954b1a3e623c8ac1b9 Mon Sep 17 00:00:00 2001 From: joostdecock Date: Thu, 29 May 2025 18:05:31 +0200 Subject: [PATCH 60/74] [react] feat: Added docs for hooks/useDesign --- .../packages/react/hooks/usedesign/readme.mdx | 1 - .../hooks/usedesigntranslation/readme.mdx | 85 ++++++++++++++++++- 2 files changed, 82 insertions(+), 4 deletions(-) diff --git a/sites/dev/docs/reference/packages/react/hooks/usedesign/readme.mdx b/sites/dev/docs/reference/packages/react/hooks/usedesign/readme.mdx index 355774f6a4e..53ccba705b3 100644 --- a/sites/dev/docs/reference/packages/react/hooks/usedesign/readme.mdx +++ b/sites/dev/docs/reference/packages/react/hooks/usedesign/readme.mdx @@ -3,7 +3,6 @@ title: useDesign --- import { DocusaurusDoc } from '@freesewing/react/components/Docusaurus' -import { MiniTip } from '@freesewing/react/components/Mini' import { Popout } from '@freesewing/react/components/Popout' import { Tab, Tabs } from '@freesewing/react/components/Tab' diff --git a/sites/dev/docs/reference/packages/react/hooks/usedesigntranslation/readme.mdx b/sites/dev/docs/reference/packages/react/hooks/usedesigntranslation/readme.mdx index 946dec33538..31d6f905bea 100644 --- a/sites/dev/docs/reference/packages/react/hooks/usedesigntranslation/readme.mdx +++ b/sites/dev/docs/reference/packages/react/hooks/usedesigntranslation/readme.mdx @@ -2,6 +2,85 @@ title: useDesignTranslation --- -:::note -This page is yet to be created -::: +import { DocusaurusDoc } from '@freesewing/react/components/Docusaurus' +import { Popout } from '@freesewing/react/components/Popout' +import { Tab, Tabs } from '@freesewing/react/components/Tab' + + + +The **useDesignTranslation** hook provides translations for the entire FreeSewing collection of designs. + + +Use this hook to load design translations when you plan to use the entire collection. If +you only plan to use one or a few designs, you may want to load them differently as +incluyding this hook will include all FreeSewing designs in your code bundle. + + +## Example + + + +Using the hook makes it easy to load a design translations if you want to be able to +dynamically load a different design, or do not know in advance what designs +should be made available. + +```js +import { useDesign } from '@freesewing/react/hooks/useDesign' +import { useDesignTranslation } from '@freesewing/react/hooks/useDesignTranslation' + +const MyComponent = ({ name = 'aaron' }) => { + const Aaron = useDesign(name) + const i18n = useDesignTranslation(name) + + // ... +} +``` + + +This hook has a `designTranslations` named export that holds translations for the entire FreeSewing collection. + +```js +import { designs } from '@freesewing/react/hooks/useDesign' +import { designTranslations } from '@freesewing/react/hooks/useDesignTranslations' + +const MyComponent = () => { + const Aaron = designs.aaron + const i18n = designTranslations.aaron + + // ... +} +``` + + +If you know in advance what design you want, importing directly is more efficient. +```js +import { Aaron, i18n } from '@freesewing/aaron' + +const MyComponent = () => { + + // ... +} +``` + + + +## Return value + +Calling the hook returns an object holding design translations. + +## Named exports + +You can also load the `designTranslations` named exports from the same import: + +```js +import { + designTranslations, // An object where the key is the (lowercase) design name, and the value on object holding the design translations + useDesignTranslation, // The hook +} from '@freesewing/react/hooks/useDesignTranslation' +``` + +- `designTranslations` is an object where the key is the (lowercase) design name, and the value on object holding the design translations. + + + + From 58818cd8464433f4e933183e41d117f972c6fb66 Mon Sep 17 00:00:00 2001 From: joostdecock Date: Thu, 29 May 2025 18:13:03 +0200 Subject: [PATCH 61/74] [react] feat: Added docs for hooks/useFilter --- .../packages/react/hooks/usefilter/readme.mdx | 36 +++++++++++++++++++ 1 file changed, 36 insertions(+) create mode 100644 sites/dev/docs/reference/packages/react/hooks/usefilter/readme.mdx diff --git a/sites/dev/docs/reference/packages/react/hooks/usefilter/readme.mdx b/sites/dev/docs/reference/packages/react/hooks/usefilter/readme.mdx new file mode 100644 index 00000000000..baf33d83610 --- /dev/null +++ b/sites/dev/docs/reference/packages/react/hooks/usefilter/readme.mdx @@ -0,0 +1,36 @@ +--- +title: useFilter +--- + +import { DocusaurusDoc } from '@freesewing/react/components/Docusaurus' +import { Popout } from '@freesewing/react/components/Popout' +import { Tab, Tabs } from '@freesewing/react/components/Tab' + + + +The **useFilter** hook uses [atomWithHash](https://jotai.org/docs/extensions/location#atomwithhash) under the hood. +It allows one to keep state in the URL, using the hash value. + +It is named `useFilter` because it was initially created to filter FreeSewing +designs on the design page. But you can keep any sort of state with it. + +## Example + +```js +import { useFilter } from '@freesewing/react/hooks/useFilter' + +const MyComponent = ({ name = 'aaron' }) => { + const [filter, setFilter] = useFilter() + + // ... +} +``` + +## Return value + +This hook behaves just as the native `useState` hook, expect that it stores the state in the URL. + + + + + From 717482f4ab71f72bda41d3f0a6ec761392271f04 Mon Sep 17 00:00:00 2001 From: joostdecock Date: Thu, 29 May 2025 18:19:26 +0200 Subject: [PATCH 62/74] [react] feat: Added docs for hooks/useSelection --- .../react/hooks/useselection/readme.mdx | 64 ++++++++++++++++++- 1 file changed, 61 insertions(+), 3 deletions(-) diff --git a/sites/dev/docs/reference/packages/react/hooks/useselection/readme.mdx b/sites/dev/docs/reference/packages/react/hooks/useselection/readme.mdx index ffbf1a3fa19..e42daeb9f27 100644 --- a/sites/dev/docs/reference/packages/react/hooks/useselection/readme.mdx +++ b/sites/dev/docs/reference/packages/react/hooks/useselection/readme.mdx @@ -2,6 +2,64 @@ title: useSelection --- -:::note -This page is yet to be created -::: +import { DocusaurusDoc } from '@freesewing/react/components/Docusaurus' +import { Popout } from '@freesewing/react/components/Popout' +import { Tab, Tabs } from '@freesewing/react/components/Tab' + + + +The **useSelection** hook facilitates letting the user select one or more items +from a list or array. You need to pass this list/array to the hook. + +## Example + +```js +import { useSelection } from '@freesewing/react/hooks/useFilter' + +const MyComponent = ({ items = [] }) => { + const { + count, + selection, + setSelection, + toggle, + toggleAll, + } = useSelection(items) + + // ... +} +``` + +## Return value + +Calling the hook returns an object with the following properties: + +- [count](#count) +- [selection](#selection) +- [setSelection](#setselection) +- [toggle](#toggle) +- [toggleAll](#toggleAll) + +### count + +This holds the number of items currently selected. + +### selection + +This holds an object of selected items where the key is the index and the value the item itself. +Call `selection.values()` to get an array. + +### setSelection + +This is a method that sets the selection manually, typically not used. + +# toggle + +This is a method that takes an index and toggles the selection for that item. + +# toggleAll + +This is a method will select all items, unless all items are currently +selected. In that case, it will select zero items. + + + From 07402915235ea39e8a925c1ce37cab2057578c1c Mon Sep 17 00:00:00 2001 From: joostdecock Date: Fri, 30 May 2025 09:48:39 +0200 Subject: [PATCH 63/74] [react] feat: Added docs for hooks/useStateObject --- .../react/hooks/usestateobject/readme.mdx | 81 ++++++++++++++++++- 1 file changed, 78 insertions(+), 3 deletions(-) diff --git a/sites/dev/docs/reference/packages/react/hooks/usestateobject/readme.mdx b/sites/dev/docs/reference/packages/react/hooks/usestateobject/readme.mdx index c6e96bb463b..c6091f22207 100644 --- a/sites/dev/docs/reference/packages/react/hooks/usestateobject/readme.mdx +++ b/sites/dev/docs/reference/packages/react/hooks/usestateobject/readme.mdx @@ -2,6 +2,81 @@ title: useStateObject --- -:::note -This page is yet to be created -::: + +import { DocusaurusDoc } from '@freesewing/react/components/Docusaurus' +import { Popout } from '@freesewing/react/components/Popout' +import { Tab, Tabs } from '@freesewing/react/components/Tab' + + + +The **useStateObject** hook provides state management with a `lodash.get`-style +update handler. + +It allows one to update specific parts of a state object without having to +re-construct the new state object yourself. + +It is named `useStateObject` because it is intended to be used for objects. Do +not use this for scalar values where React's native `useState` hook is a better fit. + +## Example + +```js +import { useStateObject } from '@freesewing/react/hooks/useStateObject' + +const MyComponent = () => { + const [value, update, replace] = useStateObject(initialObject) + + // ... +} +``` + +## Return value + +This hook returns an array with three entries: + +- [value](#value) +- [update](#update) +- [replace](#replace) + +### value + +This holds the current value of the object managed by this state. + +### update + +This method allows you to update the state. It takes two parameters: + +```js +function update( + string|array path, // The path to the property to set + mixed value, // The value to set +) +``` + +The `path` can be specified as either a dot-notation path, or an array. +These two update calls are equivalent: + +```js +// These do the same thing +update('some.nested.key', "new value here") +update(['some', 'nested', 'key'], "new value here") +``` + +You can also specify multiple update operations by passing them as an array +of arrays with `path` and `value` elements: + +```js +// Update multiple keys in one call +update([ + [ 'some.nested.key', "new value here" ], + [ ['some', 'other', 'key'], { some: "other value" } ], + [ "one.more", "example" ] +]) +``` + +### replace + +This method takes a value that will completed replace the object kept in state. + + + From 14eab04d5b90f1713b285dd1416ebdc00399e138 Mon Sep 17 00:00:00 2001 From: joostdecock Date: Fri, 30 May 2025 09:50:01 +0200 Subject: [PATCH 64/74] [react] chore: Removed lid placeholder docs --- sites/dev/docs/reference/packages/react/lib/readme.mdx | 8 -------- 1 file changed, 8 deletions(-) delete mode 100644 sites/dev/docs/reference/packages/react/lib/readme.mdx diff --git a/sites/dev/docs/reference/packages/react/lib/readme.mdx b/sites/dev/docs/reference/packages/react/lib/readme.mdx deleted file mode 100644 index f05696b1510..00000000000 --- a/sites/dev/docs/reference/packages/react/lib/readme.mdx +++ /dev/null @@ -1,8 +0,0 @@ ---- -title: React Library ---- - -The utility methods provided by the -[@freesewing/react](/reference/packages/react/) package are: - - From f69093b0dc1a46fa23c117070361a93692d4e68d Mon Sep 17 00:00:00 2001 From: joostdecock Date: Fri, 30 May 2025 11:29:55 +0200 Subject: [PATCH 65/74] feat[react]: Linting with eslint 9 --- eslint.config.mjs | 24 + package-lock.json | 1050 ++++++++++++++--- package.json | 8 +- packages/react/components/Account/Apikeys.mjs | 26 +- .../react/components/Account/Bookmarks.mjs | 6 +- packages/react/components/Account/Compare.mjs | 6 +- packages/react/components/Account/Consent.mjs | 25 +- packages/react/components/Account/Control.mjs | 27 +- packages/react/components/Account/Email.mjs | 13 +- packages/react/components/Account/Export.mjs | 3 - packages/react/components/Account/Id.mjs | 14 +- packages/react/components/Account/Import.mjs | 10 +- packages/react/components/Account/Links.mjs | 2 - packages/react/components/Account/Mfa.mjs | 5 - .../react/components/Account/Newsletter.mjs | 5 +- .../react/components/Account/Password.mjs | 8 +- packages/react/components/Account/Pattern.mjs | 28 +- .../react/components/Account/Patterns.mjs | 15 +- packages/react/components/Account/Reload.mjs | 6 +- packages/react/components/Account/Remove.mjs | 6 +- .../react/components/Account/Restrict.mjs | 5 +- packages/react/components/Account/Set.mjs | 15 +- packages/react/components/Account/Sets.mjs | 3 +- packages/react/components/Account/Units.mjs | 6 +- .../react/components/Account/Username.mjs | 4 - packages/react/components/Account/index.mjs | 2 - packages/react/components/Account/shared.mjs | 3 - packages/react/components/Admin/index.mjs | 96 +- packages/react/components/Button/index.mjs | 8 +- .../react/components/Collection/index.mjs | 76 +- .../Editor/components/Accordion.mjs | 4 +- .../components/Editor/components/Flag.mjs | 4 +- .../Editor/components/HeaderMenu.mjs | 12 +- .../Editor/components/LoadingStatus.mjs | 5 - .../Editor/components/MovablePattern.mjs | 21 +- .../Editor/components/PatternLayout.mjs | 14 +- .../components/Editor/components/Set.mjs | 2 +- .../Editor/components/ZoomablePattern.mjs | 2 +- .../Editor/components/menus/Container.mjs | 2 - .../components/menus/CoreSettingsMenu.mjs | 2 +- .../Editor/components/menus/DraftMenu.mjs | 2 +- .../Editor/components/menus/Input.mjs | 47 +- .../Editor/components/menus/TestMenu.mjs | 2 +- .../components/menus/UiPreferencesMenu.mjs | 2 +- .../Editor/components/menus/Value.mjs | 3 +- .../Editor/components/views/DesignsView.mjs | 3 +- .../components/views/DraftErrorHandler.mjs | 4 +- .../components/views/EditSettingsView.mjs | 3 +- .../Editor/components/views/ExportView.mjs | 10 +- .../Editor/components/views/LayoutView.mjs | 2 +- .../Editor/components/views/SaveView.mjs | 20 +- .../Editor/components/views/TestView.mjs | 1 - .../Editor/components/views/TimingView.mjs | 16 +- .../Editor/components/views/ViewPicker.mjs | 2 +- .../Editor/hooks/useEditorState.mjs | 26 +- .../components/Editor/lib/core-settings.mjs | 2 +- .../components/Editor/lib/design-options.mjs | 5 +- .../react/components/Editor/lib/editor.mjs | 8 +- .../components/Editor/lib/export/index.mjs | 2 +- .../components/Editor/lib/layout-settings.mjs | 8 - packages/react/components/Icon/index.mjs | 1 - packages/react/components/Input/index.mjs | 92 +- packages/react/components/KeyVal/index.mjs | 18 +- packages/react/components/Layout/index.mjs | 3 +- .../react/components/LineDrawing/albert.mjs | 2 +- .../react/components/LineDrawing/bent.mjs | 2 +- .../react/components/LineDrawing/jane.mjs | 6 +- packages/react/components/Link/index.mjs | 22 +- packages/react/components/Logo/index.mjs | 35 +- .../react/components/Newsletter/index.mjs | 12 +- packages/react/components/Null/index.mjs | 2 - packages/react/components/Patrons/index.mjs | 10 +- packages/react/components/Pattern/defs.mjs | 1 - packages/react/components/Pattern/index.mjs | 4 +- packages/react/components/Pattern/part.mjs | 1 - packages/react/components/Pattern/path.mjs | 1 - packages/react/components/Pattern/point.mjs | 1 - packages/react/components/Pattern/snippet.mjs | 1 - packages/react/components/Pattern/svg.mjs | 1 - packages/react/components/Pattern/text.mjs | 1 - packages/react/components/Pattern/utils.mjs | 2 - packages/react/components/Popout/index.mjs | 70 +- packages/react/components/Profile/index.mjs | 19 +- packages/react/components/Role/index.mjs | 20 +- packages/react/components/SignIn/index.mjs | 30 +- packages/react/components/SignUp/index.mjs | 31 +- packages/react/components/Stats/index.mjs | 13 +- packages/react/components/Tab/index.mjs | 2 +- packages/react/components/Uuid/index.mjs | 6 +- packages/react/components/Xray/index.mjs | 2 + packages/react/components/Xray/path.mjs | 3 +- packages/react/components/Xray/point.mjs | 2 +- packages/react/eslint.config.mjs | 30 + packages/react/hooks/useControl/index.mjs | 3 +- packages/react/hooks/useFilter/index.mjs | 4 +- packages/react/hooks/useSelection/index.mjs | 2 +- packages/react/hooks/useStateObject/index.mjs | 2 +- packages/react/lib/RestClient/index.mjs | 4 + packages/react/lib/force-tailwind.mjs | 14 - 99 files changed, 1260 insertions(+), 956 deletions(-) create mode 100644 eslint.config.mjs create mode 100644 packages/react/eslint.config.mjs delete mode 100644 packages/react/lib/force-tailwind.mjs diff --git a/eslint.config.mjs b/eslint.config.mjs new file mode 100644 index 00000000000..26d35d1b8a0 --- /dev/null +++ b/eslint.config.mjs @@ -0,0 +1,24 @@ +import js from '@eslint/js' +import globals from 'globals' +import pluginReact from 'eslint-plugin-react' +import json from '@eslint/json' +import markdown from '@eslint/markdown' +import css from '@eslint/css' +import { defineConfig } from 'eslint/config' + +export default defineConfig([ + { files: ['**/*.{js,mjs,cjs,jsx}'], plugins: { js }, extends: ['js/recommended'] }, + { + files: ['**/*.{js,mjs,cjs,jsx}'], + languageOptions: { globals: { ...globals.browser, ...globals.node } }, + }, + pluginReact.configs.flat.recommended, + { files: ['**/*.json'], plugins: { json }, language: 'json/json', extends: ['json/recommended'] }, + { + files: ['**/*.md'], + plugins: { markdown }, + language: 'markdown/commonmark', + extends: ['markdown/recommended'], + }, + { files: ['**/*.css'], plugins: { css }, language: 'css/css', extends: ['css/recommended'] }, +]) diff --git a/package-lock.json b/package-lock.json index 11f939c8148..c68b42aca20 100644 --- a/package-lock.json +++ b/package-lock.json @@ -28,17 +28,23 @@ "devDependencies": { "@commitlint/cli": "^19.0.3", "@commitlint/config-conventional": "^19.0.3", + "@eslint/css": "^0.8.1", + "@eslint/js": "^9.27.0", + "@eslint/json": "^0.12.0", + "@eslint/markdown": "^6.4.0", "@nx/eslint": "20.2.1", "all-contributors-cli": "^6.26.1", "axios": "^1.5.1", "chalk": "^4.1.0", "cross-env": "^7.0.2", - "eslint": "^8.23.1", + "eslint": "^9.27.0", "eslint-plugin-jsonc": "^2.4.0", "eslint-plugin-markdown": "^5.0.0", "eslint-plugin-mongo": "^1.0.5", + "eslint-plugin-react": "^7.37.5", "eslint-plugin-yaml": "^0.5.0", "execa": "^9.3.1", + "globals": "^16.2.0", "husky": "^9.0.10", "js-yaml": "^4.0.0", "lerna": "^8.0.0", @@ -23285,6 +23291,15 @@ "@babel/core": "^7.0.0-0" } }, + "node_modules/@babel/plugin-transform-classes/node_modules/globals": { + "version": "11.12.0", + "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz", + "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==", + "license": "MIT", + "engines": { + "node": ">=4" + } + }, "node_modules/@babel/plugin-transform-computed-properties": { "version": "7.25.9", "resolved": "https://registry.npmjs.org/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.25.9.tgz", @@ -24266,6 +24281,15 @@ "node": ">=6.9.0" } }, + "node_modules/@babel/traverse/node_modules/globals": { + "version": "11.12.0", + "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz", + "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==", + "license": "MIT", + "engines": { + "node": ">=4" + } + }, "node_modules/@babel/types": { "version": "7.26.9", "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.26.9.tgz", @@ -26906,10 +26930,104 @@ "node": "^12.0.0 || ^14.0.0 || >=16.0.0" } }, + "node_modules/@eslint/config-array": { + "version": "0.20.0", + "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.20.0.tgz", + "integrity": "sha512-fxlS1kkIjx8+vy2SjuCB94q3htSNrufYTXubwiBFeaQHbH6Ipi43gFJq2zCMt6PHhImH3Xmr0NksKDvchWlpQQ==", + "license": "Apache-2.0", + "dependencies": { + "@eslint/object-schema": "^2.1.6", + "debug": "^4.3.1", + "minimatch": "^3.1.2" + }, + "engines": { + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + } + }, + "node_modules/@eslint/config-array/node_modules/brace-expansion": { + "version": "1.1.11", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", + "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", + "license": "MIT", + "dependencies": { + "balanced-match": "^1.0.0", + "concat-map": "0.0.1" + } + }, + "node_modules/@eslint/config-array/node_modules/minimatch": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", + "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==", + "license": "ISC", + "dependencies": { + "brace-expansion": "^1.1.7" + }, + "engines": { + "node": "*" + } + }, + "node_modules/@eslint/config-helpers": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/@eslint/config-helpers/-/config-helpers-0.2.2.tgz", + "integrity": "sha512-+GPzk8PlG0sPpzdU5ZvIRMPidzAnZDl/s9L+y13iodqvb8leL53bTannOrQ/Im7UkpsmFU5Ily5U60LWixnmLg==", + "license": "Apache-2.0", + "engines": { + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + } + }, + "node_modules/@eslint/core": { + "version": "0.14.0", + "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.14.0.tgz", + "integrity": "sha512-qIbV0/JZr7iSDjqAc60IqbLdsj9GDt16xQtWD+B78d/HAlvysGdZZ6rpJHGAc2T0FQx1X6thsSPdnoiGKdNtdg==", + "license": "Apache-2.0", + "dependencies": { + "@types/json-schema": "^7.0.15" + }, + "engines": { + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + } + }, + "node_modules/@eslint/css": { + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/@eslint/css/-/css-0.8.1.tgz", + "integrity": "sha512-674JJD1q8sDlJORLep+gGnm3VRCQo/qLmKQgCIf2LnUK/tHf96StWjLX2IF3yyp3yeU9npZ6ixySMr2G256eiQ==", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "@eslint/core": "^0.14.0", + "@eslint/css-tree": "^3.3.3", + "@eslint/plugin-kit": "^0.3.1" + }, + "engines": { + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + } + }, + "node_modules/@eslint/css-tree": { + "version": "3.5.4", + "resolved": "https://registry.npmjs.org/@eslint/css-tree/-/css-tree-3.5.4.tgz", + "integrity": "sha512-n+YfV26/+xZzOUen8IewwmB4A7uqBo2uaahFv8lqF1sIBsSG8BW4u98EW38xFUsvYz2N6p9yWqpqxuZAkm7CKw==", + "dev": true, + "license": "MIT", + "dependencies": { + "mdn-data": "2.20.0", + "source-map-js": "^1.0.1" + }, + "engines": { + "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0" + } + }, + "node_modules/@eslint/css-tree/node_modules/mdn-data": { + "version": "2.20.0", + "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.20.0.tgz", + "integrity": "sha512-/d3otgvmquUkAN2RVxSg6lIbQrYX7isR4aC5Hvw8JuHvzctR3eUG50WmsAZjb9MkbJ5LbijPSy7uIxEtQDGI0w==", + "dev": true, + "license": "CC0-1.0" + }, "node_modules/@eslint/eslintrc": { "version": "2.1.4", "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.4.tgz", "integrity": "sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==", + "dev": true, "license": "MIT", "dependencies": { "ajv": "^6.12.4", @@ -26933,6 +27051,7 @@ "version": "6.12.6", "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", + "dev": true, "license": "MIT", "dependencies": { "fast-deep-equal": "^3.1.1", @@ -26949,6 +27068,7 @@ "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", + "dev": true, "license": "MIT", "dependencies": { "balanced-match": "^1.0.0", @@ -26959,6 +27079,7 @@ "version": "13.24.0", "resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz", "integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==", + "dev": true, "license": "MIT", "dependencies": { "type-fest": "^0.20.2" @@ -26974,12 +27095,14 @@ "version": "0.4.1", "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz", "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==", + "dev": true, "license": "MIT" }, "node_modules/@eslint/eslintrc/node_modules/minimatch": { "version": "3.1.2", "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==", + "dev": true, "license": "ISC", "dependencies": { "brace-expansion": "^1.1.7" @@ -26992,6 +27115,7 @@ "version": "0.20.2", "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz", "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==", + "dev": true, "license": "(MIT OR CC0-1.0)", "engines": { "node": ">=10" @@ -27001,12 +27125,258 @@ } }, "node_modules/@eslint/js": { - "version": "8.57.1", - "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.57.1.tgz", - "integrity": "sha512-d9zaMRSTIKDLhctzH12MtXvJKSSUhaHcjV+2Z+GK+EEY7XKpP5yR4x+N3TAcHTcu963nIr+TMcCb4DBCYX1z6Q==", + "version": "9.27.0", + "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.27.0.tgz", + "integrity": "sha512-G5JD9Tu5HJEu4z2Uo4aHY2sLV64B7CDMXxFzqzjl3NKd6RVzSXNoE80jk7Y0lJkTTkjiIhBAqmlYwjuBY3tvpA==", "license": "MIT", "engines": { - "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + }, + "funding": { + "url": "https://eslint.org/donate" + } + }, + "node_modules/@eslint/json": { + "version": "0.12.0", + "resolved": "https://registry.npmjs.org/@eslint/json/-/json-0.12.0.tgz", + "integrity": "sha512-n/7dz8HFStpEe4o5eYk0tdkBdGUS/ZGb0GQCeDWN1ZmRq67HMHK4vC33b0rQlTT6xdZoX935P4vstiWVk5Ying==", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "@eslint/core": "^0.12.0", + "@eslint/plugin-kit": "^0.2.7", + "@humanwhocodes/momoa": "^3.3.4", + "natural-compare": "^1.4.0" + }, + "engines": { + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + } + }, + "node_modules/@eslint/json/node_modules/@eslint/core": { + "version": "0.12.0", + "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.12.0.tgz", + "integrity": "sha512-cmrR6pytBuSMTaBweKoGMwu3EiHiEC+DoyupPmlZ0HxBJBtIxwe+j/E4XPIKNx+Q74c8lXKPwYawBf5glsTkHg==", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "@types/json-schema": "^7.0.15" + }, + "engines": { + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + } + }, + "node_modules/@eslint/json/node_modules/@eslint/plugin-kit": { + "version": "0.2.8", + "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.2.8.tgz", + "integrity": "sha512-ZAoA40rNMPwSm+AeHpCq8STiNAwzWLJuP8Xv4CHIc9wv/PSuExjMrmjfYNj682vW0OOiZ1HKxzvjQr9XZIisQA==", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "@eslint/core": "^0.13.0", + "levn": "^0.4.1" + }, + "engines": { + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + } + }, + "node_modules/@eslint/json/node_modules/@eslint/plugin-kit/node_modules/@eslint/core": { + "version": "0.13.0", + "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.13.0.tgz", + "integrity": "sha512-yfkgDw1KR66rkT5A8ci4irzDysN7FRpq3ttJolR88OqQikAWqwA8j5VZyas+vjyBNFIJ7MfybJ9plMILI2UrCw==", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "@types/json-schema": "^7.0.15" + }, + "engines": { + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + } + }, + "node_modules/@eslint/markdown": { + "version": "6.4.0", + "resolved": "https://registry.npmjs.org/@eslint/markdown/-/markdown-6.4.0.tgz", + "integrity": "sha512-J07rR8uBSNFJ9iliNINrchilpkmCihPmTVotpThUeKEn5G8aBBZnkjNBy/zovhJA5LBk1vWU9UDlhqKSc/dViQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "@eslint/core": "^0.10.0", + "@eslint/plugin-kit": "^0.2.5", + "mdast-util-from-markdown": "^2.0.2", + "mdast-util-frontmatter": "^2.0.1", + "mdast-util-gfm": "^3.0.0", + "micromark-extension-frontmatter": "^2.0.0", + "micromark-extension-gfm": "^3.0.0" + }, + "engines": { + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + } + }, + "node_modules/@eslint/markdown/node_modules/@eslint/core": { + "version": "0.10.0", + "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.10.0.tgz", + "integrity": "sha512-gFHJ+xBOo4G3WRlR1e/3G8A6/KZAH6zcE/hkLRCZTi/B9avAG365QhFA8uOGzTMqgTghpn7/fSnscW++dpMSAw==", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "@types/json-schema": "^7.0.15" + }, + "engines": { + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + } + }, + "node_modules/@eslint/markdown/node_modules/@eslint/plugin-kit": { + "version": "0.2.8", + "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.2.8.tgz", + "integrity": "sha512-ZAoA40rNMPwSm+AeHpCq8STiNAwzWLJuP8Xv4CHIc9wv/PSuExjMrmjfYNj682vW0OOiZ1HKxzvjQr9XZIisQA==", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "@eslint/core": "^0.13.0", + "levn": "^0.4.1" + }, + "engines": { + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + } + }, + "node_modules/@eslint/markdown/node_modules/@eslint/plugin-kit/node_modules/@eslint/core": { + "version": "0.13.0", + "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.13.0.tgz", + "integrity": "sha512-yfkgDw1KR66rkT5A8ci4irzDysN7FRpq3ttJolR88OqQikAWqwA8j5VZyas+vjyBNFIJ7MfybJ9plMILI2UrCw==", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "@types/json-schema": "^7.0.15" + }, + "engines": { + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + } + }, + "node_modules/@eslint/markdown/node_modules/@types/mdast": { + "version": "4.0.4", + "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.4.tgz", + "integrity": "sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/unist": "*" + } + }, + "node_modules/@eslint/markdown/node_modules/@types/unist": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz", + "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==", + "dev": true, + "license": "MIT" + }, + "node_modules/@eslint/markdown/node_modules/mdast-util-from-markdown": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/mdast-util-from-markdown/-/mdast-util-from-markdown-2.0.2.tgz", + "integrity": "sha512-uZhTV/8NBuw0WHkPTrCqDOl0zVe1BIng5ZtHoDk49ME1qqcjYmmLmOf0gELgcRMxN4w2iuIeVso5/6QymSrgmA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/mdast": "^4.0.0", + "@types/unist": "^3.0.0", + "decode-named-character-reference": "^1.0.0", + "devlop": "^1.0.0", + "mdast-util-to-string": "^4.0.0", + "micromark": "^4.0.0", + "micromark-util-decode-numeric-character-reference": "^2.0.0", + "micromark-util-decode-string": "^2.0.0", + "micromark-util-normalize-identifier": "^2.0.0", + "micromark-util-symbol": "^2.0.0", + "micromark-util-types": "^2.0.0", + "unist-util-stringify-position": "^4.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/@eslint/markdown/node_modules/mdast-util-to-string": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-4.0.0.tgz", + "integrity": "sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/mdast": "^4.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/@eslint/markdown/node_modules/micromark": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/micromark/-/micromark-4.0.2.tgz", + "integrity": "sha512-zpe98Q6kvavpCr1NPVSCMebCKfD7CA2NqZ+rykeNhONIJBpc1tFKt9hucLGwha3jNTNI8lHpctWJWoimVF4PfA==", + "dev": true, + "funding": [ + { + "type": "GitHub Sponsors", + "url": "https://github.com/sponsors/unifiedjs" + }, + { + "type": "OpenCollective", + "url": "https://opencollective.com/unified" + } + ], + "license": "MIT", + "dependencies": { + "@types/debug": "^4.0.0", + "debug": "^4.0.0", + "decode-named-character-reference": "^1.0.0", + "devlop": "^1.0.0", + "micromark-core-commonmark": "^2.0.0", + "micromark-factory-space": "^2.0.0", + "micromark-util-character": "^2.0.0", + "micromark-util-chunked": "^2.0.0", + "micromark-util-combine-extensions": "^2.0.0", + "micromark-util-decode-numeric-character-reference": "^2.0.0", + "micromark-util-encode": "^2.0.0", + "micromark-util-normalize-identifier": "^2.0.0", + "micromark-util-resolve-all": "^2.0.0", + "micromark-util-sanitize-uri": "^2.0.0", + "micromark-util-subtokenize": "^2.0.0", + "micromark-util-symbol": "^2.0.0", + "micromark-util-types": "^2.0.0" + } + }, + "node_modules/@eslint/markdown/node_modules/unist-util-stringify-position": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-4.0.0.tgz", + "integrity": "sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/unist": "^3.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/@eslint/object-schema": { + "version": "2.1.6", + "resolved": "https://registry.npmjs.org/@eslint/object-schema/-/object-schema-2.1.6.tgz", + "integrity": "sha512-RBMg5FRL0I0gs51M/guSAj5/e14VQ4tpZnQNWwuDT66P14I43ItmPfIZRhO9fUVIPOAQXU47atlywZ/czoqFPA==", + "license": "Apache-2.0", + "engines": { + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + } + }, + "node_modules/@eslint/plugin-kit": { + "version": "0.3.1", + "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.3.1.tgz", + "integrity": "sha512-0J+zgWxHN+xXONWIyPWKFMgVuJoZuGiIFu8yxk7RJjxkzpGmyja5wRFqZIVtjDVOQpV+Rw0iOAjYPE2eQyjr0w==", + "license": "Apache-2.0", + "dependencies": { + "@eslint/core": "^0.14.0", + "levn": "^0.4.1" + }, + "engines": { + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" } }, "node_modules/@freesewing/aaron": { @@ -27388,11 +27758,47 @@ "@hapi/hoek": "^9.0.0" } }, + "node_modules/@humanfs/core": { + "version": "0.19.1", + "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz", + "integrity": "sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==", + "license": "Apache-2.0", + "engines": { + "node": ">=18.18.0" + } + }, + "node_modules/@humanfs/node": { + "version": "0.16.6", + "resolved": "https://registry.npmjs.org/@humanfs/node/-/node-0.16.6.tgz", + "integrity": "sha512-YuI2ZHQL78Q5HbhDiBA1X4LmYdXCKCMQIfw0pw7piHJwyREFebJUvrQN4cMssyES6x+vfUbx1CIpaQUKYdQZOw==", + "license": "Apache-2.0", + "dependencies": { + "@humanfs/core": "^0.19.1", + "@humanwhocodes/retry": "^0.3.0" + }, + "engines": { + "node": ">=18.18.0" + } + }, + "node_modules/@humanfs/node/node_modules/@humanwhocodes/retry": { + "version": "0.3.1", + "resolved": "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.3.1.tgz", + "integrity": "sha512-JBxkERygn7Bv/GbN5Rv8Ul6LVknS+5Bp6RgDC/O8gEBU/yeH5Ui5C/OlWrTb6qct7LjjfT6Re2NxB0ln0yYybA==", + "license": "Apache-2.0", + "engines": { + "node": ">=18.18" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/nzakas" + } + }, "node_modules/@humanwhocodes/config-array": { "version": "0.13.0", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.13.0.tgz", "integrity": "sha512-DZLEEqFWQFiyK6h5YIeynKx7JlvCYWL0cImfSRXZ9l4Sg2efkFGTuFf6vzXjK1cq6IYkU+Eg/JizXw+TD2vRNw==", "deprecated": "Use @eslint/config-array instead", + "dev": true, "license": "Apache-2.0", "dependencies": { "@humanwhocodes/object-schema": "^2.0.3", @@ -27407,6 +27813,7 @@ "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", + "dev": true, "license": "MIT", "dependencies": { "balanced-match": "^1.0.0", @@ -27417,6 +27824,7 @@ "version": "3.1.2", "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==", + "dev": true, "license": "ISC", "dependencies": { "brace-expansion": "^1.1.7" @@ -27438,13 +27846,37 @@ "url": "https://github.com/sponsors/nzakas" } }, + "node_modules/@humanwhocodes/momoa": { + "version": "3.3.8", + "resolved": "https://registry.npmjs.org/@humanwhocodes/momoa/-/momoa-3.3.8.tgz", + "integrity": "sha512-/3PZzor2imi/RLLcnHztkwA79txiVvW145Ve2cp5dxRcH5qOUNJPToasqLFHniTfw4B4lT7jGDdBOPXbXYlIMQ==", + "dev": true, + "license": "Apache-2.0", + "engines": { + "node": ">=18" + } + }, "node_modules/@humanwhocodes/object-schema": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-2.0.3.tgz", "integrity": "sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==", "deprecated": "Use @eslint/object-schema instead", + "dev": true, "license": "BSD-3-Clause" }, + "node_modules/@humanwhocodes/retry": { + "version": "0.4.3", + "resolved": "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.4.3.tgz", + "integrity": "sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==", + "license": "Apache-2.0", + "engines": { + "node": ">=18.18" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/nzakas" + } + }, "node_modules/@hutson/parse-repository-url": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/@hutson/parse-repository-url/-/parse-repository-url-3.0.2.tgz", @@ -35631,13 +36063,13 @@ } }, "node_modules/call-bound": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.3.tgz", - "integrity": "sha512-YTd+6wGlNlPxSuri7Y6X8tY2dmm12UMH66RpKMhiX6rsk5wXXnYgbUcOt8kiS31/AjfoTOvCsE+w8nZQLQnzHA==", + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz", + "integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==", "license": "MIT", "dependencies": { - "call-bind-apply-helpers": "^1.0.1", - "get-intrinsic": "^1.2.6" + "call-bind-apply-helpers": "^1.0.2", + "get-intrinsic": "^1.3.0" }, "engines": { "node": ">= 0.4" @@ -39396,6 +39828,7 @@ "version": "3.0.0", "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz", "integrity": "sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==", + "dev": true, "license": "Apache-2.0", "dependencies": { "esutils": "^2.0.2" @@ -40053,59 +40486,63 @@ } }, "node_modules/eslint": { - "version": "8.57.1", - "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.57.1.tgz", - "integrity": "sha512-ypowyDxpVSYpkXr9WPv2PAZCtNip1Mv5KTW0SCurXv/9iOpcrH9PaqUElksqEB6pChqHGDRCFTyrZlGhnLNGiA==", - "deprecated": "This version is no longer supported. Please see https://eslint.org/version-support for other options.", + "version": "9.27.0", + "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.27.0.tgz", + "integrity": "sha512-ixRawFQuMB9DZ7fjU3iGGganFDp3+45bPOdaRurcFHSXO1e/sYwUX/FtQZpLZJR6SjMoJH8hR2pPEAfDyCoU2Q==", "license": "MIT", "dependencies": { "@eslint-community/eslint-utils": "^4.2.0", - "@eslint-community/regexpp": "^4.6.1", - "@eslint/eslintrc": "^2.1.4", - "@eslint/js": "8.57.1", - "@humanwhocodes/config-array": "^0.13.0", + "@eslint-community/regexpp": "^4.12.1", + "@eslint/config-array": "^0.20.0", + "@eslint/config-helpers": "^0.2.1", + "@eslint/core": "^0.14.0", + "@eslint/eslintrc": "^3.3.1", + "@eslint/js": "9.27.0", + "@eslint/plugin-kit": "^0.3.1", + "@humanfs/node": "^0.16.6", "@humanwhocodes/module-importer": "^1.0.1", - "@nodelib/fs.walk": "^1.2.8", - "@ungap/structured-clone": "^1.2.0", + "@humanwhocodes/retry": "^0.4.2", + "@types/estree": "^1.0.6", + "@types/json-schema": "^7.0.15", "ajv": "^6.12.4", "chalk": "^4.0.0", - "cross-spawn": "^7.0.2", + "cross-spawn": "^7.0.6", "debug": "^4.3.2", - "doctrine": "^3.0.0", "escape-string-regexp": "^4.0.0", - "eslint-scope": "^7.2.2", - "eslint-visitor-keys": "^3.4.3", - "espree": "^9.6.1", - "esquery": "^1.4.2", + "eslint-scope": "^8.3.0", + "eslint-visitor-keys": "^4.2.0", + "espree": "^10.3.0", + "esquery": "^1.5.0", "esutils": "^2.0.2", "fast-deep-equal": "^3.1.3", - "file-entry-cache": "^6.0.1", + "file-entry-cache": "^8.0.0", "find-up": "^5.0.0", "glob-parent": "^6.0.2", - "globals": "^13.19.0", - "graphemer": "^1.4.0", "ignore": "^5.2.0", "imurmurhash": "^0.1.4", "is-glob": "^4.0.0", - "is-path-inside": "^3.0.3", - "js-yaml": "^4.1.0", "json-stable-stringify-without-jsonify": "^1.0.1", - "levn": "^0.4.1", "lodash.merge": "^4.6.2", "minimatch": "^3.1.2", "natural-compare": "^1.4.0", - "optionator": "^0.9.3", - "strip-ansi": "^6.0.1", - "text-table": "^0.2.0" + "optionator": "^0.9.3" }, "bin": { "eslint": "bin/eslint.js" }, "engines": { - "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" }, "funding": { - "url": "https://opencollective.com/eslint" + "url": "https://eslint.org/donate" + }, + "peerDependencies": { + "jiti": "*" + }, + "peerDependenciesMeta": { + "jiti": { + "optional": true + } } }, "node_modules/eslint-compat-utils": { @@ -40164,59 +40601,16 @@ } } }, - "node_modules/eslint-config-standard": { - "version": "17.1.0", - "resolved": "https://registry.npmjs.org/eslint-config-standard/-/eslint-config-standard-17.1.0.tgz", - "integrity": "sha512-IwHwmaBNtDK4zDHQukFDW5u/aTb8+meQWZvNFWkiGmbWjD6bqyuSSBxxXKkCftCUzc1zwCH2m/baCNDLGmuO5Q==", - "dev": true, - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/feross" - }, - { - "type": "patreon", - "url": "https://www.patreon.com/feross" - }, - { - "type": "consulting", - "url": "https://feross.org/support" - } - ], + "node_modules/eslint-config-next/node_modules/eslint-plugin-react-hooks": { + "version": "5.0.0-canary-7118f5dd7-20230705", + "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-5.0.0-canary-7118f5dd7-20230705.tgz", + "integrity": "sha512-AZYbMo/NW9chdL7vk6HQzQhT+PvTAEVqWk9ziruUoW2kAOcN5qNyelv70e0F1VNQAbvutOC9oc+xfWycI9FxDw==", "license": "MIT", "engines": { - "node": ">=12.0.0" + "node": ">=10" }, "peerDependencies": { - "eslint": "^8.0.1", - "eslint-plugin-import": "^2.25.2", - "eslint-plugin-n": "^15.0.0 || ^16.0.0 ", - "eslint-plugin-promise": "^6.0.0" - } - }, - "node_modules/eslint-config-standard-jsx": { - "version": "11.0.0", - "resolved": "https://registry.npmjs.org/eslint-config-standard-jsx/-/eslint-config-standard-jsx-11.0.0.tgz", - "integrity": "sha512-+1EV/R0JxEK1L0NGolAr8Iktm3Rgotx3BKwgaX+eAuSX8D952LULKtjgZD3F+e6SvibONnhLwoTi9DPxN5LvvQ==", - "dev": true, - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/feross" - }, - { - "type": "patreon", - "url": "https://www.patreon.com/feross" - }, - { - "type": "consulting", - "url": "https://feross.org/support" - } - ], - "license": "MIT", - "peerDependencies": { - "eslint": "^8.8.0", - "eslint-plugin-react": "^7.28.0" + "eslint": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0" } }, "node_modules/eslint-import-resolver-node": { @@ -40662,9 +41056,9 @@ } }, "node_modules/eslint-plugin-react": { - "version": "7.37.4", - "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.37.4.tgz", - "integrity": "sha512-BGP0jRmfYyvOyvMoRX/uoUeW+GqNj9y16bPQzqAHf3AYII/tDs+jMN0dBVkl88/OZwNGwrVFxE7riHsXVfy/LQ==", + "version": "7.37.5", + "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.37.5.tgz", + "integrity": "sha512-Qteup0SqU15kdocexFNAJMvCJEfa2xUKNV4CC1xsVMrIIqEy3SQ/rqyxCWNzfrd3/ldy6HMlD2e0JDVpDg2qIA==", "license": "MIT", "dependencies": { "array-includes": "^3.1.8", @@ -40677,7 +41071,7 @@ "hasown": "^2.0.2", "jsx-ast-utils": "^2.4.1 || ^3.0.0", "minimatch": "^3.1.2", - "object.entries": "^1.1.8", + "object.entries": "^1.1.9", "object.fromentries": "^2.0.8", "object.values": "^1.2.1", "prop-types": "^15.8.1", @@ -40693,18 +41087,6 @@ "eslint": "^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9.7" } }, - "node_modules/eslint-plugin-react-hooks": { - "version": "5.0.0-canary-7118f5dd7-20230705", - "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-5.0.0-canary-7118f5dd7-20230705.tgz", - "integrity": "sha512-AZYbMo/NW9chdL7vk6HQzQhT+PvTAEVqWk9ziruUoW2kAOcN5qNyelv70e0F1VNQAbvutOC9oc+xfWycI9FxDw==", - "license": "MIT", - "engines": { - "node": ">=10" - }, - "peerDependencies": { - "eslint": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0" - } - }, "node_modules/eslint-plugin-react/node_modules/brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", @@ -40820,6 +41202,29 @@ "node": ">=10" } }, + "node_modules/eslint/node_modules/@eslint/eslintrc": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-3.3.1.tgz", + "integrity": "sha512-gtF186CXhIl1p4pJNGZw8Yc6RlshoePRvE0X91oPGb3vZ8pM3qOS9W9NGPat9LziaBV7XrJWGylNQXkGcnM3IQ==", + "license": "MIT", + "dependencies": { + "ajv": "^6.12.4", + "debug": "^4.3.2", + "espree": "^10.0.1", + "globals": "^14.0.0", + "ignore": "^5.2.0", + "import-fresh": "^3.2.1", + "js-yaml": "^4.1.0", + "minimatch": "^3.1.2", + "strip-json-comments": "^3.1.1" + }, + "engines": { + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + }, + "funding": { + "url": "https://opencollective.com/eslint" + } + }, "node_modules/eslint/node_modules/ajv": { "version": "6.12.6", "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", @@ -40847,33 +41252,62 @@ } }, "node_modules/eslint/node_modules/eslint-scope": { - "version": "7.2.2", - "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.2.tgz", - "integrity": "sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==", + "version": "8.3.0", + "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-8.3.0.tgz", + "integrity": "sha512-pUNxi75F8MJ/GdeKtVLSbYg4ZI34J6C0C7sbL4YOp2exGwen7ZsuBqKzUhXd0qMQ362yET3z+uPwKeg/0C2XCQ==", "license": "BSD-2-Clause", "dependencies": { "esrecurse": "^4.3.0", "estraverse": "^5.2.0" }, "engines": { - "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" }, "funding": { "url": "https://opencollective.com/eslint" } }, "node_modules/eslint/node_modules/eslint-visitor-keys": { - "version": "3.4.3", - "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz", - "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==", + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.0.tgz", + "integrity": "sha512-UyLnSehNt62FFhSwjZlHmeokpRK59rcz29j+F1/aDgbkbRTk7wIc9XzdoasMUbRNKDM0qQt/+BJ4BrpFeABemw==", "license": "Apache-2.0", "engines": { - "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" }, "funding": { "url": "https://opencollective.com/eslint" } }, + "node_modules/eslint/node_modules/espree": { + "version": "10.3.0", + "resolved": "https://registry.npmjs.org/espree/-/espree-10.3.0.tgz", + "integrity": "sha512-0QYC8b24HWY8zjRnDTL6RiHfDbAWn63qb4LMj1Z4b076A4une81+z03Kg7l7mn/48PUTqoLptSXez8oknU8Clg==", + "license": "BSD-2-Clause", + "dependencies": { + "acorn": "^8.14.0", + "acorn-jsx": "^5.3.2", + "eslint-visitor-keys": "^4.2.0" + }, + "engines": { + "node": "^18.18.0 || ^20.9.0 || >=21.1.0" + }, + "funding": { + "url": "https://opencollective.com/eslint" + } + }, + "node_modules/eslint/node_modules/file-entry-cache": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz", + "integrity": "sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==", + "license": "MIT", + "dependencies": { + "flat-cache": "^4.0.0" + }, + "engines": { + "node": ">=16.0.0" + } + }, "node_modules/eslint/node_modules/find-up": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz", @@ -40890,16 +41324,26 @@ "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/eslint/node_modules/globals": { - "version": "13.24.0", - "resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz", - "integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==", + "node_modules/eslint/node_modules/flat-cache": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-4.0.1.tgz", + "integrity": "sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==", "license": "MIT", "dependencies": { - "type-fest": "^0.20.2" + "flatted": "^3.2.9", + "keyv": "^4.5.4" }, "engines": { - "node": ">=8" + "node": ">=16" + } + }, + "node_modules/eslint/node_modules/globals": { + "version": "14.0.0", + "resolved": "https://registry.npmjs.org/globals/-/globals-14.0.0.tgz", + "integrity": "sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==", + "license": "MIT", + "engines": { + "node": ">=18" }, "funding": { "url": "https://github.com/sponsors/sindresorhus" @@ -40977,18 +41421,6 @@ "node": ">=8" } }, - "node_modules/eslint/node_modules/type-fest": { - "version": "0.20.2", - "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz", - "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==", - "license": "(MIT OR CC0-1.0)", - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, "node_modules/eslint/node_modules/yocto-queue": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz", @@ -41005,6 +41437,7 @@ "version": "9.6.1", "resolved": "https://registry.npmjs.org/espree/-/espree-9.6.1.tgz", "integrity": "sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==", + "dev": true, "license": "BSD-2-Clause", "dependencies": { "acorn": "^8.9.0", @@ -41022,6 +41455,7 @@ "version": "3.4.3", "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz", "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==", + "dev": true, "license": "Apache-2.0", "engines": { "node": "^12.22.0 || ^14.17.0 || >=16.0.0" @@ -41659,6 +42093,7 @@ "version": "6.0.1", "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz", "integrity": "sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==", + "dev": true, "license": "MIT", "dependencies": { "flat-cache": "^3.0.4" @@ -41902,6 +42337,7 @@ "version": "3.2.0", "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.2.0.tgz", "integrity": "sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==", + "dev": true, "license": "MIT", "dependencies": { "flatted": "^3.2.9", @@ -41916,6 +42352,7 @@ "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", + "dev": true, "license": "MIT", "dependencies": { "balanced-match": "^1.0.0", @@ -41927,6 +42364,7 @@ "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz", "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==", "deprecated": "Glob versions prior to v9 are no longer supported", + "dev": true, "license": "ISC", "dependencies": { "fs.realpath": "^1.0.0", @@ -41947,6 +42385,7 @@ "version": "3.1.2", "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==", + "dev": true, "license": "ISC", "dependencies": { "brace-expansion": "^1.1.7" @@ -41960,6 +42399,7 @@ "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz", "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==", "deprecated": "Rimraf versions prior to v4 are no longer supported", + "dev": true, "license": "ISC", "dependencies": { "glob": "^7.1.3" @@ -42529,17 +42969,17 @@ } }, "node_modules/get-intrinsic": { - "version": "1.2.7", - "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.7.tgz", - "integrity": "sha512-VW6Pxhsrk0KAOqs3WEd0klDiF/+V7gQOpAvY1jVU/LHmaD/kQO4523aiJuikX/QAKYiW6x8Jh+RJej1almdtCA==", + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz", + "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==", "license": "MIT", "dependencies": { - "call-bind-apply-helpers": "^1.0.1", + "call-bind-apply-helpers": "^1.0.2", "es-define-property": "^1.0.1", "es-errors": "^1.3.0", - "es-object-atoms": "^1.0.0", + "es-object-atoms": "^1.1.1", "function-bind": "^1.1.2", - "get-proto": "^1.0.0", + "get-proto": "^1.0.1", "gopd": "^1.2.0", "has-symbols": "^1.1.0", "hasown": "^2.0.2", @@ -43293,12 +43733,16 @@ } }, "node_modules/globals": { - "version": "11.12.0", - "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz", - "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==", + "version": "16.2.0", + "resolved": "https://registry.npmjs.org/globals/-/globals-16.2.0.tgz", + "integrity": "sha512-O+7l9tPdHCU320IigZZPj5zmRCFG9xHmx9cU8FqU2Rp+JN714seHV+2S9+JslCpY4gJwU2vOGox0wzgae/MCEg==", + "dev": true, "license": "MIT", "engines": { - "node": ">=4" + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" } }, "node_modules/globalthis": { @@ -46001,7 +46445,7 @@ "version": "2.4.2", "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.4.2.tgz", "integrity": "sha512-rg9zJN+G4n2nfJl5MW3BMygZX56zKPNVEYYqq7adpmMh4Jn2QNEwhvQlFy6jPVdcod7txZtKHWnyZiA3a0zP7A==", - "dev": true, + "devOptional": true, "license": "MIT", "bin": { "jiti": "lib/jiti-cli.mjs" @@ -53229,14 +53673,15 @@ } }, "node_modules/object.entries": { - "version": "1.1.8", - "resolved": "https://registry.npmjs.org/object.entries/-/object.entries-1.1.8.tgz", - "integrity": "sha512-cmopxi8VwRIAw/fkijJohSfpef5PdN0pMQJN6VC/ZKvn0LIknWD8KtgY6KlQdEc4tIjcQ3HxSMmnvtzIscdaYQ==", + "version": "1.1.9", + "resolved": "https://registry.npmjs.org/object.entries/-/object.entries-1.1.9.tgz", + "integrity": "sha512-8u/hfXFRBD1O0hPUjioLhoWFHRmt6tKA4/vZPyckBr18l1KE9uHrFaFaUi8MDRTpi4uak2goyPTSNJLXX2k2Hw==", "license": "MIT", "dependencies": { - "call-bind": "^1.0.7", + "call-bind": "^1.0.8", + "call-bound": "^1.0.4", "define-properties": "^1.2.1", - "es-object-atoms": "^1.0.0" + "es-object-atoms": "^1.1.1" }, "engines": { "node": ">= 0.4" @@ -60214,6 +60659,323 @@ "node": "^12.22.0 || ^14.17.0 || >=16.0.0" } }, + "node_modules/standard/node_modules/@eslint/js": { + "version": "8.57.1", + "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.57.1.tgz", + "integrity": "sha512-d9zaMRSTIKDLhctzH12MtXvJKSSUhaHcjV+2Z+GK+EEY7XKpP5yR4x+N3TAcHTcu963nIr+TMcCb4DBCYX1z6Q==", + "dev": true, + "license": "MIT", + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + } + }, + "node_modules/standard/node_modules/ajv": { + "version": "6.12.6", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", + "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", + "dev": true, + "license": "MIT", + "dependencies": { + "fast-deep-equal": "^3.1.1", + "fast-json-stable-stringify": "^2.0.0", + "json-schema-traverse": "^0.4.1", + "uri-js": "^4.2.2" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/epoberezkin" + } + }, + "node_modules/standard/node_modules/brace-expansion": { + "version": "1.1.11", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", + "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", + "dev": true, + "license": "MIT", + "dependencies": { + "balanced-match": "^1.0.0", + "concat-map": "0.0.1" + } + }, + "node_modules/standard/node_modules/eslint": { + "version": "8.57.1", + "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.57.1.tgz", + "integrity": "sha512-ypowyDxpVSYpkXr9WPv2PAZCtNip1Mv5KTW0SCurXv/9iOpcrH9PaqUElksqEB6pChqHGDRCFTyrZlGhnLNGiA==", + "deprecated": "This version is no longer supported. Please see https://eslint.org/version-support for other options.", + "dev": true, + "license": "MIT", + "dependencies": { + "@eslint-community/eslint-utils": "^4.2.0", + "@eslint-community/regexpp": "^4.6.1", + "@eslint/eslintrc": "^2.1.4", + "@eslint/js": "8.57.1", + "@humanwhocodes/config-array": "^0.13.0", + "@humanwhocodes/module-importer": "^1.0.1", + "@nodelib/fs.walk": "^1.2.8", + "@ungap/structured-clone": "^1.2.0", + "ajv": "^6.12.4", + "chalk": "^4.0.0", + "cross-spawn": "^7.0.2", + "debug": "^4.3.2", + "doctrine": "^3.0.0", + "escape-string-regexp": "^4.0.0", + "eslint-scope": "^7.2.2", + "eslint-visitor-keys": "^3.4.3", + "espree": "^9.6.1", + "esquery": "^1.4.2", + "esutils": "^2.0.2", + "fast-deep-equal": "^3.1.3", + "file-entry-cache": "^6.0.1", + "find-up": "^5.0.0", + "glob-parent": "^6.0.2", + "globals": "^13.19.0", + "graphemer": "^1.4.0", + "ignore": "^5.2.0", + "imurmurhash": "^0.1.4", + "is-glob": "^4.0.0", + "is-path-inside": "^3.0.3", + "js-yaml": "^4.1.0", + "json-stable-stringify-without-jsonify": "^1.0.1", + "levn": "^0.4.1", + "lodash.merge": "^4.6.2", + "minimatch": "^3.1.2", + "natural-compare": "^1.4.0", + "optionator": "^0.9.3", + "strip-ansi": "^6.0.1", + "text-table": "^0.2.0" + }, + "bin": { + "eslint": "bin/eslint.js" + }, + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + }, + "funding": { + "url": "https://opencollective.com/eslint" + } + }, + "node_modules/standard/node_modules/eslint-config-standard": { + "version": "17.1.0", + "resolved": "https://registry.npmjs.org/eslint-config-standard/-/eslint-config-standard-17.1.0.tgz", + "integrity": "sha512-IwHwmaBNtDK4zDHQukFDW5u/aTb8+meQWZvNFWkiGmbWjD6bqyuSSBxxXKkCftCUzc1zwCH2m/baCNDLGmuO5Q==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/feross" + }, + { + "type": "patreon", + "url": "https://www.patreon.com/feross" + }, + { + "type": "consulting", + "url": "https://feross.org/support" + } + ], + "license": "MIT", + "engines": { + "node": ">=12.0.0" + }, + "peerDependencies": { + "eslint": "^8.0.1", + "eslint-plugin-import": "^2.25.2", + "eslint-plugin-n": "^15.0.0 || ^16.0.0 ", + "eslint-plugin-promise": "^6.0.0" + } + }, + "node_modules/standard/node_modules/eslint-config-standard-jsx": { + "version": "11.0.0", + "resolved": "https://registry.npmjs.org/eslint-config-standard-jsx/-/eslint-config-standard-jsx-11.0.0.tgz", + "integrity": "sha512-+1EV/R0JxEK1L0NGolAr8Iktm3Rgotx3BKwgaX+eAuSX8D952LULKtjgZD3F+e6SvibONnhLwoTi9DPxN5LvvQ==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/feross" + }, + { + "type": "patreon", + "url": "https://www.patreon.com/feross" + }, + { + "type": "consulting", + "url": "https://feross.org/support" + } + ], + "license": "MIT", + "peerDependencies": { + "eslint": "^8.8.0", + "eslint-plugin-react": "^7.28.0" + } + }, + "node_modules/standard/node_modules/eslint-scope": { + "version": "7.2.2", + "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.2.tgz", + "integrity": "sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==", + "dev": true, + "license": "BSD-2-Clause", + "dependencies": { + "esrecurse": "^4.3.0", + "estraverse": "^5.2.0" + }, + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + }, + "funding": { + "url": "https://opencollective.com/eslint" + } + }, + "node_modules/standard/node_modules/eslint-visitor-keys": { + "version": "3.4.3", + "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz", + "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==", + "dev": true, + "license": "Apache-2.0", + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + }, + "funding": { + "url": "https://opencollective.com/eslint" + } + }, + "node_modules/standard/node_modules/find-up": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz", + "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==", + "dev": true, + "license": "MIT", + "dependencies": { + "locate-path": "^6.0.0", + "path-exists": "^4.0.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/standard/node_modules/globals": { + "version": "13.24.0", + "resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz", + "integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "type-fest": "^0.20.2" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/standard/node_modules/json-schema-traverse": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz", + "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==", + "dev": true, + "license": "MIT" + }, + "node_modules/standard/node_modules/locate-path": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz", + "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==", + "dev": true, + "license": "MIT", + "dependencies": { + "p-locate": "^5.0.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/standard/node_modules/minimatch": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", + "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==", + "dev": true, + "license": "ISC", + "dependencies": { + "brace-expansion": "^1.1.7" + }, + "engines": { + "node": "*" + } + }, + "node_modules/standard/node_modules/p-limit": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz", + "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "yocto-queue": "^0.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/standard/node_modules/p-locate": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz", + "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==", + "dev": true, + "license": "MIT", + "dependencies": { + "p-limit": "^3.0.2" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/standard/node_modules/path-exists": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz", + "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=8" + } + }, + "node_modules/standard/node_modules/type-fest": { + "version": "0.20.2", + "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz", + "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==", + "dev": true, + "license": "(MIT OR CC0-1.0)", + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/standard/node_modules/yocto-queue": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz", + "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/statuses": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz", diff --git a/package.json b/package.json index beace7969ce..e0249dde188 100644 --- a/package.json +++ b/package.json @@ -61,17 +61,23 @@ "devDependencies": { "@commitlint/cli": "^19.0.3", "@commitlint/config-conventional": "^19.0.3", + "@eslint/css": "^0.8.1", + "@eslint/js": "^9.27.0", + "@eslint/json": "^0.12.0", + "@eslint/markdown": "^6.4.0", "@nx/eslint": "20.2.1", "all-contributors-cli": "^6.26.1", "axios": "^1.5.1", "chalk": "^4.1.0", "cross-env": "^7.0.2", - "eslint": "^8.23.1", + "eslint": "^9.27.0", "eslint-plugin-jsonc": "^2.4.0", "eslint-plugin-markdown": "^5.0.0", "eslint-plugin-mongo": "^1.0.5", + "eslint-plugin-react": "^7.37.5", "eslint-plugin-yaml": "^0.5.0", "execa": "^9.3.1", + "globals": "^16.2.0", "husky": "^9.0.10", "js-yaml": "^4.0.0", "lerna": "^8.0.0", diff --git a/packages/react/components/Account/Apikeys.mjs b/packages/react/components/Account/Apikeys.mjs index c6b02dc3ff3..a8d196c6773 100644 --- a/packages/react/components/Account/Apikeys.mjs +++ b/packages/react/components/Account/Apikeys.mjs @@ -1,49 +1,34 @@ // Dependencies import { DateTime } from 'luxon' import orderBy from 'lodash/orderBy.js' -import { capitalize, shortDate } from '@freesewing/utils' +import { shortDate } from '@freesewing/utils' import { apikeyLevels } from '@freesewing/config' // Context import { ModalContext } from '@freesewing/react/context/Modal' import { LoadingStatusContext } from '@freesewing/react/context/LoadingStatus' - // Hooks import React, { useState, useEffect, useContext } from 'react' import { useAccount } from '@freesewing/react/hooks/useAccount' import { useBackend } from '@freesewing/react/hooks/useBackend' import { useSelection } from '@freesewing/react/hooks/useSelection' - // Components import { TableWrapper } from '@freesewing/react/components/Table' import { Link as WebLink } from '@freesewing/react/components/Link' -import { - BoolNoIcon, - BoolYesIcon, - PlusIcon, - RightIcon, - TrashIcon, -} from '@freesewing/react/components/Icon' +import { PlusIcon, RightIcon, TrashIcon } from '@freesewing/react/components/Icon' import { Uuid } from '@freesewing/react/components/Uuid' import { Popout } from '@freesewing/react/components/Popout' import { ModalWrapper } from '@freesewing/react/components/Modal' import { NumberCircle } from '@freesewing/react/components/Number' import { StringInput, Fieldset, ListInput } from '@freesewing/react/components/Input' -import { DisplayRow } from './shared.mjs' import { CopyToClipboardButton } from '@freesewing/react/components/Button' import { TimeAgo, TimeToGo } from '@freesewing/react/components/Time' import { KeyVal } from '@freesewing/react/components/KeyVal' -const t = (input) => { - console.log('t called', input) - return input -} - const fields = { id: 'Key', name: 'Name', calls: 'Calls', level: 'Level', - level: 'Level', createdAt: 'Created', expiresAt: 'Expires', } @@ -242,13 +227,6 @@ const NewApikey = ({ onCreate = false }) => { } else setLoadingStatus([true, 'An error occured. Please report this', true, false]) } - const clear = () => { - setApikey(false) - setGenerate(false) - setName('') - setLevel(1) - } - return (

    New API key {apikey ? `: ${apikey.name}` : ''}

    diff --git a/packages/react/components/Account/Bookmarks.mjs b/packages/react/components/Account/Bookmarks.mjs index 12a5aef3c3f..0388aba2785 100644 --- a/packages/react/components/Account/Bookmarks.mjs +++ b/packages/react/components/Account/Bookmarks.mjs @@ -7,7 +7,7 @@ import { useBackend } from '@freesewing/react/hooks/useBackend' import { LoadingStatusContext } from '@freesewing/react/context/LoadingStatus' import { ModalContext } from '@freesewing/react/context/Modal' // Components -import { BookmarkIcon, LeftIcon, PlusIcon, TrashIcon } from '@freesewing/react/components/Icon' +import { BookmarkIcon, PlusIcon, TrashIcon } from '@freesewing/react/components/Icon' import { Link as WebLink } from '@freesewing/react/components/Link' import { ModalWrapper } from '@freesewing/react/components/Modal' import { StringInput } from '@freesewing/react/components/Input' @@ -33,7 +33,7 @@ const types = { export const Bookmarks = () => { // Hooks & Context const backend = useBackend() - const { setModal, clearModal } = useContext(ModalContext) + const { setModal } = useContext(ModalContext) const { setLoadingStatus, LoadingProgress } = useContext(LoadingStatusContext) // State @@ -194,7 +194,7 @@ const NewBookmark = ({ onCreated = false }) => { // This method will create the bookmark const createBookmark = async () => { setLoadingStatus([true, 'Processing update']) - const [status, body] = await backend.createBookmark({ + const [status] = await backend.createBookmark({ title, url, type: 'custom', diff --git a/packages/react/components/Account/Compare.mjs b/packages/react/components/Account/Compare.mjs index 544e8e314fb..478c5ab5a4e 100644 --- a/packages/react/components/Account/Compare.mjs +++ b/packages/react/components/Account/Compare.mjs @@ -1,17 +1,13 @@ // Dependencies import { welcomeSteps } from './shared.mjs' - // Context import { LoadingStatusContext } from '@freesewing/react/context/LoadingStatus' - // Hooks import React, { useState, useContext } from 'react' import { useAccount } from '@freesewing/react/hooks/useAccount' import { useBackend } from '@freesewing/react/hooks/useBackend' - // Components -import { Link as WebLink } from '@freesewing/react/components/Link' -import { NoIcon, OkIcon, SaveIcon, RightIcon } from '@freesewing/react/components/Icon' +import { NoIcon, OkIcon, RightIcon } from '@freesewing/react/components/Icon' import { ListInput } from '@freesewing/react/components/Input' import { IconButton } from '@freesewing/react/components/Button' import { WelcomeIcons } from './shared.mjs' diff --git a/packages/react/components/Account/Consent.mjs b/packages/react/components/Account/Consent.mjs index 3543d9f18e6..c1b639e3018 100644 --- a/packages/react/components/Account/Consent.mjs +++ b/packages/react/components/Account/Consent.mjs @@ -1,36 +1,15 @@ // Dependencies -import { welcomeSteps } from './shared.mjs' -import { linkClasses, navigate } from '@freesewing/utils' - +import { navigate } from '@freesewing/utils' // Context import { LoadingStatusContext } from '@freesewing/react/context/LoadingStatus' - // Hooks import React, { useState, useContext } from 'react' import { useAccount } from '@freesewing/react/hooks/useAccount' import { useBackend } from '@freesewing/react/hooks/useBackend' - // Components import { Link as WebLink } from '@freesewing/react/components/Link' -import { NoIcon, OkIcon, SaveIcon } from '@freesewing/react/components/Icon' -import { ListInput } from '@freesewing/react/components/Input' import { Popout } from '@freesewing/react/components/Popout' -const strings = { - yes: { - title: 'Yes, in case it may help me', - desc: - 'Allowing us to compare your measurments to a baseline or others measurements sets ' + - 'allows us to detect potential problems in your measurements or patterns.', - }, - no: { - title: 'No, never compare', - desc: - 'We get it, comparison is the thief of joy. Just be aware that this limits our ability ' + - 'to warn you about potential problems in your measurements sets or patterns.', - }, -} - /** * A component to manage the user's consent setting * @@ -79,7 +58,7 @@ export const Consent = ({ signUp = false, Link = false, title = false }) => { // Helper method to remove the account const removeAccount = async () => { setLoadingStatus([true, 'One moment please']) - const [status, body] = await backend.removeAccount() + const [status] = await backend.removeAccount() if (status === 200) { setLoadingStatus([true, 'All done, farewell', true, true]) setToken(null) diff --git a/packages/react/components/Account/Control.mjs b/packages/react/components/Account/Control.mjs index c22e1c44c93..4e9e5d7250f 100644 --- a/packages/react/components/Account/Control.mjs +++ b/packages/react/components/Account/Control.mjs @@ -1,39 +1,16 @@ // Dependencies import { welcomeSteps } from './shared.mjs' import { controlDesc } from '@freesewing/config' - -// Context -import { LoadingStatusContext } from '@freesewing/react/context/LoadingStatus' - // Hooks -import React, { useState, useContext } from 'react' -import { useAccount } from '@freesewing/react/hooks/useAccount' -import { useBackend } from '@freesewing/react/hooks/useBackend' +import React from 'react' import { useControl } from '@freesewing/react/hooks/useControl' - // Components -import { Link as WebLink } from '@freesewing/react/components/Link' -import { RightIcon, NoIcon, OkIcon, SaveIcon } from '@freesewing/react/components/Icon' +import { RightIcon } from '@freesewing/react/components/Icon' import { ListInput } from '@freesewing/react/components/Input' import { ControlScore } from '@freesewing/react/components/Control' import { IconButton } from '@freesewing/react/components/Button' import { WelcomeIcons } from './shared.mjs' -const strings = { - 1: { - title: 'Keep it as simple as possible', - desc: - 'Allowing us to compare your measurments to a baseline or others measurements sets ' + - 'allows us to detect potential problems in your measurements or patterns.', - }, - 2: { - title: 'No, never compare', - desc: - 'We get it, comparison is the thief of joy. Just be aware that this limits our ability ' + - 'to warn you about potential problems in your measurements sets or patterns.', - }, -} - /** * A component to manage the user's control/UX setting * diff --git a/packages/react/components/Account/Email.mjs b/packages/react/components/Account/Email.mjs index 2d2460402e0..dc2a935a28d 100644 --- a/packages/react/components/Account/Email.mjs +++ b/packages/react/components/Account/Email.mjs @@ -1,15 +1,11 @@ // Dependencies -import { welcomeSteps } from './shared.mjs' -import { validateEmail, validateTld, getSearchParam } from '@freesewing/utils' - +import { validateEmail, validateTld, getSearchParam, navigate } from '@freesewing/utils' // Context import { LoadingStatusContext } from '@freesewing/react/context/LoadingStatus' - // Hooks import React, { useState, useContext, useEffect } from 'react' import { useAccount } from '@freesewing/react/hooks/useAccount' import { useBackend } from '@freesewing/react/hooks/useBackend' - // Components import { Link as WebLink } from '@freesewing/react/components/Link' import { SaveIcon } from '@freesewing/react/components/Icon' @@ -22,11 +18,10 @@ import { Spinner } from '@freesewing/react/components/Spinner' * * @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 Email = ({ welcome = false, Link = false }) => { +export const Email = ({ Link = false }) => { if (!Link) Link = WebLink // Hooks @@ -104,7 +99,7 @@ export const EmailChangeConfirmation = ({ onSuccess = false }) => { const [check, setCheck] = useState() // Hooks - const { setAccount, setToken } = useAccount() + const { setAccount } = useAccount() const backend = useBackend() // Context @@ -134,7 +129,7 @@ export const EmailChangeConfirmation = ({ onSuccess = false }) => { }) // If it works, store account, which runs the onSuccess handler - if (body.result === 'success' && body.account) return storeAccount(body) + if (status === 200 && body.result === 'success' && body.account) return storeAccount(body) // If we get here, we're not sure what's wrong if (body.error) return setError(body.error) return setError(true) diff --git a/packages/react/components/Account/Export.mjs b/packages/react/components/Account/Export.mjs index d8245adde43..9c343d298a0 100644 --- a/packages/react/components/Account/Export.mjs +++ b/packages/react/components/Account/Export.mjs @@ -1,11 +1,8 @@ // Context import { LoadingStatusContext } from '@freesewing/react/context/LoadingStatus' - // Hooks import React, { useState, useContext } from 'react' -import { useAccount } from '@freesewing/react/hooks/useAccount' import { useBackend } from '@freesewing/react/hooks/useBackend' - // Components import { Link as WebLink } from '@freesewing/react/components/Link' import { DownloadIcon } from '@freesewing/react/components/Icon' diff --git a/packages/react/components/Account/Id.mjs b/packages/react/components/Account/Id.mjs index 3faedc04fc6..48c37c4496a 100644 --- a/packages/react/components/Account/Id.mjs +++ b/packages/react/components/Account/Id.mjs @@ -1,24 +1,16 @@ // Hooks -import React, { useState } from 'react' import { useAccount } from '@freesewing/react/hooks/useAccount' -// Components -import { Link as WebLink } from '@freesewing/react/components/Link' - /** - * A component to display the user's ID + * A component to display the current user's ID * * @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 UserId = ({ Link = false }) => { - if (!Link) Link = WebLink - +export const UserId = () => { // Hooks const { account } = useAccount() - const [id, setId] = useState(account.id) - return id || null + return account.id || null } diff --git a/packages/react/components/Account/Import.mjs b/packages/react/components/Account/Import.mjs index b320537fd72..e6f55c0bdab 100644 --- a/packages/react/components/Account/Import.mjs +++ b/packages/react/components/Account/Import.mjs @@ -1,14 +1,12 @@ +// Dependencies +import yaml from 'js-yaml' // Context import { LoadingStatusContext } from '@freesewing/react/context/LoadingStatus' - // Hooks -import React, { useState, useContext } from 'react' +import React, { useContext } from 'react' import { useAccount } from '@freesewing/react/hooks/useAccount' import { useBackend } from '@freesewing/react/hooks/useBackend' - // Components -import { Link as WebLink } from '@freesewing/react/components/Link' -import { SaveIcon } from '@freesewing/react/components/Icon' import { FileInput } from '@freesewing/react/components/Input' import { Popout } from '@freesewing/react/components/Popout' import { Yaml } from '@freesewing/react/components/Yaml' @@ -41,7 +39,7 @@ export const ImportSet = () => { if (set.measurements || set.measies) { const name = set.name || 'J. Doe' setLoadingStatus([true, `Importing ${name}`]) - const [status, body] = await backend.createSet({ + const [status] = await backend.createSet({ name: set.name || 'J. Doe', units: set.units || 'metric', notes: set.notes || '', diff --git a/packages/react/components/Account/Links.mjs b/packages/react/components/Account/Links.mjs index 78014ff38da..0e7bf417ad8 100644 --- a/packages/react/components/Account/Links.mjs +++ b/packages/react/components/Account/Links.mjs @@ -93,8 +93,6 @@ const titles = { const YesNo = ({ check }) => (check ? : ) -const t = (input) => input - /** * A component to manage the user's Instagram handle in their account data * diff --git a/packages/react/components/Account/Mfa.mjs b/packages/react/components/Account/Mfa.mjs index a1dc75e8944..5b6273ea86c 100644 --- a/packages/react/components/Account/Mfa.mjs +++ b/packages/react/components/Account/Mfa.mjs @@ -1,20 +1,15 @@ // Dependencies import { horFlexClasses } from '@freesewing/utils' - // Context import { LoadingStatusContext } from '@freesewing/react/context/LoadingStatus' - // Hooks import React, { useState, useContext } from 'react' import { useAccount } from '@freesewing/react/hooks/useAccount' import { useBackend } from '@freesewing/react/hooks/useBackend' - // Components -import { Link as WebLink } from '@freesewing/react/components/Link' 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/Button' /** diff --git a/packages/react/components/Account/Newsletter.mjs b/packages/react/components/Account/Newsletter.mjs index f9aabcaa3bf..b311e687aab 100644 --- a/packages/react/components/Account/Newsletter.mjs +++ b/packages/react/components/Account/Newsletter.mjs @@ -1,18 +1,15 @@ // Dependencies import { welcomeSteps } from './shared.mjs' import { linkClasses } from '@freesewing/utils' - // Context import { LoadingStatusContext } from '@freesewing/react/context/LoadingStatus' - // Hooks import React, { useState, useContext } from 'react' import { useAccount } from '@freesewing/react/hooks/useAccount' import { useBackend } from '@freesewing/react/hooks/useBackend' - // Components import { Link as WebLink } from '@freesewing/react/components/Link' -import { NoIcon, OkIcon, SaveIcon, RightIcon } from '@freesewing/react/components/Icon' +import { NoIcon, OkIcon, RightIcon } from '@freesewing/react/components/Icon' import { ListInput } from '@freesewing/react/components/Input' import { Popout } from '@freesewing/react/components/Popout' import { IconButton } from '@freesewing/react/components/Button' diff --git a/packages/react/components/Account/Password.mjs b/packages/react/components/Account/Password.mjs index 5627573d73d..5432620c05e 100644 --- a/packages/react/components/Account/Password.mjs +++ b/packages/react/components/Account/Password.mjs @@ -1,15 +1,9 @@ -// Dependencies -import { welcomeSteps } from './shared.mjs' -import { horFlexClasses } from '@freesewing/utils' - // Context import { LoadingStatusContext } from '@freesewing/react/context/LoadingStatus' - // Hooks import React, { useState, useContext } from 'react' import { useAccount } from '@freesewing/react/hooks/useAccount' import { useBackend } from '@freesewing/react/hooks/useBackend' - // Components import { Link as WebLink } from '@freesewing/react/components/Link' import { RightIcon, SaveIcon } from '@freesewing/react/components/Icon' @@ -25,7 +19,7 @@ import { Popout } from '@freesewing/react/components/Popout' * @param {React.Component} props.Link - A framework specific Link component for client-side routing * @returns {JSX.Element} */ -export const Password = ({ welcome = false, Link = false }) => { +export const Password = ({ Link = false }) => { if (!Link) Link = WebLink // Hooks const backend = useBackend() diff --git a/packages/react/components/Account/Pattern.mjs b/packages/react/components/Account/Pattern.mjs index 48dc9d9296f..11065837fee 100644 --- a/packages/react/components/Account/Pattern.mjs +++ b/packages/react/components/Account/Pattern.mjs @@ -1,25 +1,13 @@ // Dependencies -import orderBy from 'lodash/orderBy.js' -import { - cloudflareImageUrl, - capitalize, - shortDate, - horFlexClasses, - newPatternUrl, - patternUrlFromState, -} from '@freesewing/utils' +import { cloudflareImageUrl, horFlexClasses, patternUrlFromState } from '@freesewing/utils' import { urls, control as controlConfig } from '@freesewing/config' - // Context import { LoadingStatusContext } from '@freesewing/react/context/LoadingStatus' import { ModalContext } from '@freesewing/react/context/Modal' - // Hooks import React, { useState, useEffect, useContext } from 'react' import { useAccount } from '@freesewing/react/hooks/useAccount' import { useBackend } from '@freesewing/react/hooks/useBackend' -import { useSelection } from '@freesewing/react/hooks/useSelection' - // Components import Markdown from 'react-markdown' import { @@ -28,7 +16,7 @@ import { PassiveImageInput, ListInput, } from '@freesewing/react/components/Input' -import { Link as WebLink, AnchorLink } from '@freesewing/react/components/Link' +import { Link as WebLink } from '@freesewing/react/components/Link' import { BoolNoIcon, BoolYesIcon, @@ -42,7 +30,6 @@ import { ResetIcon, UploadIcon, } from '@freesewing/react/components/Icon' -import { DisplayRow } from './shared.mjs' import { TimeAgo } from '@freesewing/react/components/Time' import { Popout } from '@freesewing/react/components/Popout' import { ModalWrapper } from '@freesewing/react/components/Modal' @@ -348,16 +335,7 @@ const BadgeLink = ({ label, href }) => ( /** * Helper component to show the pattern title, image, and various buttons */ -const PatternHeader = ({ - pattern, - Link, - account, - setModal, - setEdit, - togglePublic, - save, - clone, -}) => ( +const PatternHeader = ({ pattern, Link, account, setModal, setEdit, togglePublic, clone }) => ( <>

    {pattern.name}

    diff --git a/packages/react/components/Account/Patterns.mjs b/packages/react/components/Account/Patterns.mjs index 5ad44f06175..8fb053d07ce 100644 --- a/packages/react/components/Account/Patterns.mjs +++ b/packages/react/components/Account/Patterns.mjs @@ -1,16 +1,12 @@ // Dependencies import orderBy from 'lodash/orderBy.js' import { capitalize, shortDate } from '@freesewing/utils' - // Context import { LoadingStatusContext } from '@freesewing/react/context/LoadingStatus' - // Hooks import React, { useState, useEffect, useContext } from 'react' -import { useAccount } from '@freesewing/react/hooks/useAccount' import { useBackend } from '@freesewing/react/hooks/useBackend' import { useSelection } from '@freesewing/react/hooks/useSelection' - // Components import { TableWrapper } from '@freesewing/react/components/Table' import { PatternCard } from '@freesewing/react/components/Account' @@ -23,11 +19,6 @@ import { TrashIcon, } from '@freesewing/react/components/Icon' -const t = (input) => { - console.log('t called', input) - return input -} - /** * A component to display and manage the list of patterns in the user's account * @@ -97,13 +88,15 @@ export const Patterns = ({ Link = false }) => { onClick={removeSelectedPatterns} disabled={count < 1} > - {count} {t('patterns')} + {count} Patterns - + + + Create a new pattern
    diff --git a/packages/react/components/Account/Reload.mjs b/packages/react/components/Account/Reload.mjs index 6e520079f69..ff5033a1a31 100644 --- a/packages/react/components/Account/Reload.mjs +++ b/packages/react/components/Account/Reload.mjs @@ -1,15 +1,11 @@ // Context import { LoadingStatusContext } from '@freesewing/react/context/LoadingStatus' - // Hooks -import React, { useState, useContext } from 'react' +import React, { useContext } from 'react' import { useAccount } from '@freesewing/react/hooks/useAccount' import { useBackend } from '@freesewing/react/hooks/useBackend' - // Components -import { Link as WebLink } from '@freesewing/react/components/Link' import { ReloadIcon } from '@freesewing/react/components/Icon' -import { Popout } from '@freesewing/react/components/Popout' import { IconButton } from '@freesewing/react/components/Button' /** diff --git a/packages/react/components/Account/Remove.mjs b/packages/react/components/Account/Remove.mjs index fa21969ab0a..0668874c665 100644 --- a/packages/react/components/Account/Remove.mjs +++ b/packages/react/components/Account/Remove.mjs @@ -3,16 +3,12 @@ import { navigate } from '@freesewing/utils' // Context import { LoadingStatusContext } from '@freesewing/react/context/LoadingStatus' import { ModalContext } from '@freesewing/react/context/Modal' - // Hooks -import React, { useState, useContext } from 'react' +import React, { useContext } from 'react' import { useAccount } from '@freesewing/react/hooks/useAccount' import { useBackend } from '@freesewing/react/hooks/useBackend' - // Components -import { Link as WebLink } from '@freesewing/react/components/Link' import { BackIcon as ExitIcon, TrashIcon } from '@freesewing/react/components/Icon' -import { Popout } from '@freesewing/react/components/Popout' import { IconButton } from '@freesewing/react/components/Button' import { ModalWrapper } from '@freesewing/react/components/Modal' diff --git a/packages/react/components/Account/Restrict.mjs b/packages/react/components/Account/Restrict.mjs index 392b0a13891..442a6c2b95a 100644 --- a/packages/react/components/Account/Restrict.mjs +++ b/packages/react/components/Account/Restrict.mjs @@ -6,14 +6,13 @@ import { LoadingStatusContext } from '@freesewing/react/context/LoadingStatus' import { ModalContext } from '@freesewing/react/context/Modal' // Hooks -import React, { useState, useContext } from 'react' +import React, { useContext } from 'react' import { useAccount } from '@freesewing/react/hooks/useAccount' import { useBackend } from '@freesewing/react/hooks/useBackend' // Components import { Link as WebLink } from '@freesewing/react/components/Link' import { BackIcon, NoIcon } from '@freesewing/react/components/Icon' -import { Popout } from '@freesewing/react/components/Popout' import { IconButton } from '@freesewing/react/components/Button' import { ModalWrapper } from '@freesewing/react/components/Modal' @@ -39,7 +38,7 @@ export const Restrict = ({ Link = false }) => { // Helper method to restrict the account const restrictAccount = async () => { setLoadingStatus([true, 'Talking to the backend']) - const [status, body] = await backend.restrictAccount() + const [status] = await backend.restrictAccount() if (status === 200) { setLoadingStatus([true, 'Done. Consider yourself restrcited.', true, true]) signOut() diff --git a/packages/react/components/Account/Set.mjs b/packages/react/components/Account/Set.mjs index b45cfcffd97..e822940cf86 100644 --- a/packages/react/components/Account/Set.mjs +++ b/packages/react/components/Account/Set.mjs @@ -58,11 +58,6 @@ import { bundlePatternTranslations, draft, flattenFlags } from '../Editor/lib/in import { Bonny } from '@freesewing/bonny' import { MiniNote, MiniTip } from '../Mini/index.mjs' -const t = (input) => { - console.log('t called', input) - return input -} - /** * Component to show an individual measurements set * @@ -650,8 +645,8 @@ const SuggestCset = ({ mset, Link }) => { const [name, setName] = useState('') const [notes, setNotes] = useState('') const [submission, setSubmission] = useState(false) - - console.log(mset) + // Context + const { setLoadingStatus } = useContext(LoadingStatusContext) // Hooks const backend = useBackend() @@ -803,7 +798,7 @@ const RenderedCset = ({ mset, imperial }) => { {formatMm(pattern.parts[0].front.points.head.y * -1, imperial)} high.

    Here is what the automated analysis found:

    - {Object.entries(flattenFlags(flags)).map(([key, flag], i) => { + {Object.entries(flattenFlags(flags)).map(([key, flag]) => { const desc = strings[flag.desc] || flag.desc return ( @@ -844,7 +839,7 @@ const RenderedCset = ({ mset, imperial }) => {
  • This preview is an approximation, not an exact representation. Bodies - have many variations that can't be captured with just a few measurements. We are + have many variations that can't be captured with just a few measurements. We are missing some information, like how weight is distributed or your posture.
  • @@ -881,7 +876,7 @@ export const NewSet = () => { // Hooks const backend = useBackend() const { account } = useAccount() - const { setLoadingStatus, LoadingProgress } = useContext(LoadingStatusContext) + const { setLoadingStatus } = useContext(LoadingStatusContext) // State const [name, setName] = useState('') diff --git a/packages/react/components/Account/Sets.mjs b/packages/react/components/Account/Sets.mjs index 96211188e4f..43786423297 100644 --- a/packages/react/components/Account/Sets.mjs +++ b/packages/react/components/Account/Sets.mjs @@ -1,8 +1,7 @@ // Dependencies -import { measurements } from '@freesewing/config' import { measurements as measurementsTranslations } from '@freesewing/i18n' import { requiredMeasurements as designMeasurements } from '@freesewing/collection' -import { cloudflareImageUrl, capitalize, hasRequiredMeasurements } from '@freesewing/utils' +import { cloudflareImageUrl, hasRequiredMeasurements } from '@freesewing/utils' // Context import { LoadingStatusContext } from '@freesewing/react/context/LoadingStatus' import { ModalContext } from '@freesewing/react/context/Modal' diff --git a/packages/react/components/Account/Units.mjs b/packages/react/components/Account/Units.mjs index 589ab330c21..c5823bb6efb 100644 --- a/packages/react/components/Account/Units.mjs +++ b/packages/react/components/Account/Units.mjs @@ -1,17 +1,13 @@ // Dependencies import { welcomeSteps } from './shared.mjs' - // Context import { LoadingStatusContext } from '@freesewing/react/context/LoadingStatus' - // Hooks import React, { useState, useContext } from 'react' import { useAccount } from '@freesewing/react/hooks/useAccount' import { useBackend } from '@freesewing/react/hooks/useBackend' - // Components -import { Link as WebLink } from '@freesewing/react/components/Link' -import { SaveIcon, RightIcon } from '@freesewing/react/components/Icon' +import { RightIcon } from '@freesewing/react/components/Icon' import { ListInput } from '@freesewing/react/components/Input' import { NumberCircle } from '@freesewing/react/components/Number' import { IconButton } from '@freesewing/react/components/Button' diff --git a/packages/react/components/Account/Username.mjs b/packages/react/components/Account/Username.mjs index ae844c09353..fc830f79ea7 100644 --- a/packages/react/components/Account/Username.mjs +++ b/packages/react/components/Account/Username.mjs @@ -57,10 +57,6 @@ export const Username = ({ welcome = false, Link = false }) => { ? '/welcome/' + welcomeSteps[account.control][5] : '/docs/about/guide' - let btnClasses = 'daisy-btn mt-4 capitalize ' - if (welcome) btnClasses += 'w-64 daisy-btn-secondary' - else btnClasses += 'w-full daisy-btn-primary' - return (
    { ) } - -const Row = ({ title, val }) => ( - - {title} - {val} - -) - -const ManageUser = ({ userId }) => { - // Hooks - const backend = useBackend() - const { setLoadingStatus } = useContext(LoadingStatusContext) - const { account } = useAccount() - const { role } = account - - // State - const [user, setUser] = useState({}) - const [patterns, setPatterns] = useState({}) - const [sets, setSets] = useState({}) - - // Effect - useEffect(() => { - const loadUser = async () => { - const result = await backend.adminLoadUser(userId) - if (result.success) { - setUser(result.data.user) - setPatterns(result.data.patterns) - setSets(result.data.sets) - } - } - loadUser() - }, [userId]) - - const updateUser = async (data) => { - setLoadingStatus([true, 'status:contactingBackend']) - const result = await backend.adminUpdateUser({ id: userId, data }) - if (result.success) { - setLoadingStatus([true, 'status:settingsSaved', true, true]) - setUser(result.data.user) - } else setLoadingStatus([true, 'status:backendError', true, false]) - } - - return user.id ? ( -
    - : null} - /> - {role === 'admin' ? ( -
    - {roles.map((role) => ( - - ))} -
    - ) : null} -
    - {user.mfaEnabled && ( - - )} - {Object.keys(freeSewingConfig.statuses).map((status) => ( - - ))} -
    - - {user.id ? : null} - {patterns ? : null} - {sets ? : null} - -
    - ) : ( - - ) -} diff --git a/packages/react/components/Button/index.mjs b/packages/react/components/Button/index.mjs index f1ddc74fa95..69627c890a7 100644 --- a/packages/react/components/Button/index.mjs +++ b/packages/react/components/Button/index.mjs @@ -1,14 +1,8 @@ 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) @@ -55,7 +49,7 @@ export const CopyToClipboardButton = ({ children, content, label = false, sup = ) : ( )} - {sup ? null : children} + {sup ? null : children} ) } diff --git a/packages/react/components/Collection/index.mjs b/packages/react/components/Collection/index.mjs index efa3a356b66..ca0bfcf1be8 100644 --- a/packages/react/components/Collection/index.mjs +++ b/packages/react/components/Collection/index.mjs @@ -4,32 +4,22 @@ import { collection, tags, techniques, - designers, - developers, examples, - measurements, requiredMeasurements, optionalMeasurements, } from '@freesewing/collection' import { capitalize, linkClasses, mutateObject } from '@freesewing/utils' import { measurements as measurementsTranslations } from '@freesewing/i18n' - -// Context -import { LoadingStatusContext } from '@freesewing/react/context/LoadingStatus' -import { ModalContext } from '@freesewing/react/context/Modal' - // Hooks -import React, { useState, useContext, Fragment } from 'react' +import React, { useState, Fragment } from 'react' import { useFilter } from '@freesewing/react/hooks/useFilter' - // Components -import { Link as WebLink, AnchorLink } from '@freesewing/react/components/Link' +import { Link as WebLink } from '@freesewing/react/components/Link' import { CircleIcon, CisFemaleIcon, DocsIcon, FilterIcon, - HeartIcon, NewPatternIcon, ResetIcon, ShowcaseIcon, @@ -39,7 +29,6 @@ import { lineDrawingsBack, } from '@freesewing/react/components/LineDrawing' import { IconButton } from '@freesewing/react/components/Button' -import { ModalWrapper } from '@freesewing/react/components/Modal' import { KeyVal } from '@freesewing/react/components/KeyVal' import { MissingLinedrawing } from '../LineDrawing/missing.mjs' @@ -239,38 +228,6 @@ export const Collection = ({ Link = false, linkTo = 'about', editor = false, onC ) } -/* - * A helper component to show a design technique - * - * @param {object} props - All React props - * @param {function} props.Link - A Link component, typically specific to the framework for client-side routing - * @param {string} props.technique - The technique name/id - */ -const Technique = ({ Link = WebLink, technique }) => ( - - {technique} - -) - -/* - * A helper component to show a design tag - * - * @param {object} props - All React props - * @param {function} props.Link - A Link component, typically specific to the framework for client-side routing - * @param {string} props.tag - The tag name/id - */ -const Tag = ({ Link = WebLink, technique }) => ( - - {tag} - -) - const DesignCard = ({ name, lineDrawing = false, linkTo, Link, onClick }) => { if (!Link) Link = WebLink @@ -374,10 +331,6 @@ export const DesignInfo = ({ Link = false, design = false, noDocsLink = false }) // State const [back, setBack] = useState(false) - // Context - const { setModal, clearModal } = useContext(ModalContext) - const { setLoadingStatus } = useContext(LoadingStatusContext) - if (!design) return null // Line drawings @@ -391,13 +344,6 @@ export const DesignInfo = ({ Link = false, design = false, noDocsLink = false }) : [about[design].design] const tags = about[design].tags || [] const techniques = about[design].techniques || [] - const colors = { - 1: 'success', - 2: 'success', - 3: 'warning', - 4: 'warning', - 5: 'error', - } const makeButton = (
    @@ -554,21 +500,3 @@ export const DesignInfo = ({ Link = false, design = false, noDocsLink = false }) ) } - -const SharingIsCaring = ({ design }) => ( - <> -

    - Use #FreeSewing{capitalize(design)} to facilitate discovery -

    -

    - Please use the{' '} - - #FreeSewing{capitalize(design)} - {' '} - hashtag when discussing FreeSewing's {capitalize(design)} pattern online. -
    - Doing so can help others discover your post, which really is a win-win. -

    -

    If you like, you can copy the hashtag below:

    - -) diff --git a/packages/react/components/Editor/components/Accordion.mjs b/packages/react/components/Editor/components/Accordion.mjs index d92a1d4df82..67a942e6272 100644 --- a/packages/react/components/Editor/components/Accordion.mjs +++ b/packages/react/components/Editor/components/Accordion.mjs @@ -4,12 +4,12 @@ import React, { useState } from 'react' * DaisyUI's accordion seems rather unreliable. * So instead, we handle this in React state */ -const getProps = (isActive = false) => ({ +const getProps = () => ({ className: `tw:p-0 tw:rounded-lg tw:bg-transparent tw:hover:cursor-pointer tw:w-full tw:h-auto tw:content-start tw:text-left tw:list-none`, }) -const getSubProps = (isActive) => ({ +const getSubProps = () => ({ className: `tw:p-0 tw:rounded-none tw:bg-transparent tw:w-full tw:h-auto tw:content-start tw:text-left tw:list-none`, }) diff --git a/packages/react/components/Editor/components/Flag.mjs b/packages/react/components/Editor/components/Flag.mjs index 4fd1293f2fc..2b956042dcc 100644 --- a/packages/react/components/Editor/components/Flag.mjs +++ b/packages/react/components/Editor/components/Flag.mjs @@ -1,6 +1,6 @@ import React from 'react' import mustache from 'mustache' -import { flattenFlags, stripNamespace, bundlePatternTranslations } from '../lib/index.mjs' +import { flattenFlags } from '../lib/index.mjs' import { ChatIcon, ErrorIcon, @@ -115,7 +115,7 @@ export const FlagsAccordionTitle = ({ flags }) => { ) } -export const FlagsAccordionEntries = ({ flags, update, pattern, strings }) => { +export const FlagsAccordionEntries = ({ flags, update, strings }) => { const flagList = flattenFlags(flags) if (Object.keys(flagList).length < 1) return null diff --git a/packages/react/components/Editor/components/HeaderMenu.mjs b/packages/react/components/Editor/components/HeaderMenu.mjs index 0d5c15db305..7d426722a37 100644 --- a/packages/react/components/Editor/components/HeaderMenu.mjs +++ b/packages/react/components/Editor/components/HeaderMenu.mjs @@ -24,7 +24,6 @@ import { ResetIcon, RightIcon, RocketIcon, - RotateIcon, SaIcon, SaveAsIcon, SaveIcon, @@ -133,7 +132,7 @@ export const HeaderMenuTestViewDesignMeasurements = (props) => { } export const HeaderMenuDropdown = (props) => { - const { tooltip, toggle, open, setOpen, id, end = false } = props + const { toggle, open, setOpen, id } = props const [localOpen, setLocalOpen] = useState(false) useEffect(() => { @@ -460,10 +459,8 @@ export const HeaderMenuUndoIcons = (props) => { } export const HeaderMenuTestIcons = (props) => { - const { update, state, Design } = props + const { update } = props const Button = HeaderMenuButton - const size = 'tw:w-5 tw:h-5' - const undos = state._?.undos && state._.undos.length > 0 ? state._.undos : false return (
    @@ -660,11 +657,6 @@ export const HeaderMenuLayoutViewIcons = (props) => { } const pages = pattern.setStores[0].get('pages', {}) - const format = state.ui.print?.pages?.size - ? state.ui.print.pages.size - : settings.units === 'imperial' - ? 'letter' - : 'a4' const { cols, rows, count } = pages const blank = cols * rows - count diff --git a/packages/react/components/Editor/components/LoadingStatus.mjs b/packages/react/components/Editor/components/LoadingStatus.mjs index 0df781ae3ad..b36d14be75a 100644 --- a/packages/react/components/Editor/components/LoadingStatus.mjs +++ b/packages/react/components/Editor/components/LoadingStatus.mjs @@ -35,11 +35,6 @@ export const LoadingStatus = ({ state, update }) => { if (!state._.loading || Object.keys(state._.loading).length < 1) return null - const colorClasses = { - info: 'tw:bg-info tw:text-info-content', - primary: 'tw:bg-primary tw:text-primary-content', - } - return (
    diff --git a/packages/react/components/Editor/components/MovablePattern.mjs b/packages/react/components/Editor/components/MovablePattern.mjs index d455eceeab2..c94c1282e82 100644 --- a/packages/react/components/Editor/components/MovablePattern.mjs +++ b/packages/react/components/Editor/components/MovablePattern.mjs @@ -85,7 +85,7 @@ export const MovablePattern = ({ const sortedRenderProps = { ...renderProps, stacks: sortedStacks } - const Stack = ({ stackName, stack, settings, components, t }) => ( + const Stack = ({ stackName, stack, settings, components }) => ( { +const Button = ({ onClickCb, transform, Icon, title = '' }) => { const _onClick = (event) => { event.stopPropagation() onClickCb(event) @@ -413,23 +413,6 @@ const Button = ({ onClickCb, transform, Icon, children, title = '' }) => { ) } -export const ShowButtonsToggle = ({ ui, update }) => { - const hideButtons = (evt) => { - update.ui('hideMovableButtons', !evt.target.checked) - } - return ( - - ) -} - /** buttons for manipulating the part */ export const Buttons = ({ transform, flip, rotate, resetPart, rotate90, iconSize }) => { return ( diff --git a/packages/react/components/Editor/components/PatternLayout.mjs b/packages/react/components/Editor/components/PatternLayout.mjs index b2b6fc85720..5bddad435a8 100644 --- a/packages/react/components/Editor/components/PatternLayout.mjs +++ b/packages/react/components/Editor/components/PatternLayout.mjs @@ -1,17 +1,9 @@ import React from 'react' -import { useDesignTranslation } from '@freesewing/react/hooks/useDesignTranslation' import { ZoomContextProvider } from './ZoomablePattern.mjs' -import { - HeaderMenu, - HeaderMenuDraftViewDesignOptions, - HeaderMenuDraftViewCoreSettings, - HeaderMenuDraftViewUiPreferences, - HeaderMenuDraftViewFlags, -} from './HeaderMenu.mjs' +import { HeaderMenu } from './HeaderMenu.mjs' import { DesignOptionsMenu } from './menus/DesignOptionsMenu.mjs' import { CoreSettingsMenu } from './menus/CoreSettingsMenu.mjs' import { UiPreferencesMenu } from './menus/UiPreferencesMenu.mjs' -import { Accordion } from './Accordion.mjs' /** * A layout for views that include a drafted pattern @@ -24,9 +16,7 @@ import { Accordion } from './Accordion.mjs' * @param {object] pattern - The drafted pattern */ export const PatternLayout = (props) => { - const { menu = null, Design, pattern, update, config, state } = props - const i18n = useDesignTranslation(Design.designConfig.data.id) - const flags = props.pattern?.setStores?.[0]?.plugins?.['plugin-annotations']?.flags + const { Design, pattern, update, config, state } = props return ( diff --git a/packages/react/components/Editor/components/Set.mjs b/packages/react/components/Editor/components/Set.mjs index 1a347d7e962..5acbe1fe94a 100644 --- a/packages/react/components/Editor/components/Set.mjs +++ b/packages/react/components/Editor/components/Set.mjs @@ -58,7 +58,7 @@ export const UserSetPicker = ({ href={config.hrefNewSet} className="tw:daisy-btn tw:daisy-btn-accent tw:capitalize" target="_BLANK" - rel="nofollow" + rel="noreferrer" > Create a new measurements set diff --git a/packages/react/components/Editor/components/ZoomablePattern.mjs b/packages/react/components/Editor/components/ZoomablePattern.mjs index b090e4a8d06..04b731d8938 100644 --- a/packages/react/components/Editor/components/ZoomablePattern.mjs +++ b/packages/react/components/Editor/components/ZoomablePattern.mjs @@ -7,7 +7,7 @@ import { ZoomInIcon, ZoomOutIcon, RotateIcon } from '@freesewing/react/component * A pattern you can pan and zoom */ export const ZoomablePattern = forwardRef(function ZoomablePatternRef(props, ref) { - const { renderProps, rotate, update, components = {}, strings = {} } = props + const { renderProps, rotate, components = {}, strings = {} } = props const { onTransformed, zoomFunctions, setZoomFunctions } = useContext(ZoomContext) return ( diff --git a/packages/react/components/Editor/components/menus/Container.mjs b/packages/react/components/Editor/components/menus/Container.mjs index 1098cc0d959..4330e783665 100644 --- a/packages/react/components/Editor/components/menus/Container.mjs +++ b/packages/react/components/Editor/components/menus/Container.mjs @@ -36,10 +36,8 @@ export const MenuItem = ({ allowOverride = false, ux = 5, state, - docs, config, Design, - i18n, }) => { // Local state - whether the override input should be shown const [override, setOverride] = useState(false) diff --git a/packages/react/components/Editor/components/menus/CoreSettingsMenu.mjs b/packages/react/components/Editor/components/menus/CoreSettingsMenu.mjs index 0324ef0fa7c..d65204276ce 100644 --- a/packages/react/components/Editor/components/menus/CoreSettingsMenu.mjs +++ b/packages/react/components/Editor/components/menus/CoreSettingsMenu.mjs @@ -21,7 +21,7 @@ import { MenuScaleSettingValue, } from './Value.mjs' import { MenuItemGroup, MenuItem } from './Container.mjs' -import { SettingsIcon } from '@freesewing/react/components/Icon' +import { SettingsIcon, TrashIcon } from '@freesewing/react/components/Icon' /** * The core settings menu diff --git a/packages/react/components/Editor/components/menus/DraftMenu.mjs b/packages/react/components/Editor/components/menus/DraftMenu.mjs index 1fbb3c0a925..717c0737759 100644 --- a/packages/react/components/Editor/components/menus/DraftMenu.mjs +++ b/packages/react/components/Editor/components/menus/DraftMenu.mjs @@ -3,7 +3,7 @@ import { OptionsIcon, SettingsIcon, UiIcon } from '@freesewing/react/components/ import { DesignOptionsMenu } from './DesignOptionsMenu.mjs' import { CoreSettingsMenu } from './CoreSettingsMenu.mjs' import { UiPreferencesMenu } from './UiPreferencesMenu.mjs' -import { FlagsAccordionEntries } from '../Flag.mjs' +import { FlagsAccordionEntries, FlagsAccordionTitle } from '../Flag.mjs' import { Accordion } from '../Accordion.mjs' export const DraftMenu = ({ Design, pattern, state, update, i18n }) => { diff --git a/packages/react/components/Editor/components/menus/Input.mjs b/packages/react/components/Editor/components/menus/Input.mjs index 1be1f5c8d2f..a2cb6d1be28 100644 --- a/packages/react/components/Editor/components/menus/Input.mjs +++ b/packages/react/components/Editor/components/menus/Input.mjs @@ -16,12 +16,7 @@ import { mergeOptions } from '@freesewing/core' import { KeyVal } from '@freesewing/react/components/KeyVal' /** A boolean version of {@see MenuListInput} that sets up the necessary configuration */ -export const MenuBoolInput = (props) => { - const { name, config } = props - //const boolConfig = useBoolConfig(name, config) - - return -} +export const MenuBoolInput = (props) => /** A placeholder for an input to handle constant values */ export const MenuConstantInput = ({ @@ -59,41 +54,6 @@ export const MenuDegInput = (props) => { ) } -const getTitleAndDesc = (config = {}, i18n = {}, isDesignOption = false) => { - if (config.choiceTitles && config.choiceDescriptions) { - const current = typeof config.current === 'undefined' ? config.dflt : config.current - return { - title: config.choiceTitles[current], - desc: config.choiceDescriptions[current], - } - } - - let titleKey = config.choiceTitles - ? 'fixme' //config.choiceTitles[entry] - : isDesignOption - ? i18n?.en?.o?.[name] || name - : `${name}.o.${entry}` - if (!config.choiceTitles && i18n && i18n.en.o[`${name}.${entry}`]) - titleKey = i18n.en.o[`${name}.${entry}`] - const title = config.title - ? config.title - : config.titleMethod - ? config.titleMethod(entry) - : typeof titleKey === 'string' - ? i18n.en.o[titleKey]?.t - : titleKey.t - const desc = config.valueMethod - ? config.valueMethod(entry) - : typeof titleKey === 'string' - ? i18n.en.o[titleKey]?.d - : titleKey.d - - return { - title: 'fixmeTitle', - desc: 'fixmeDesc', - } -} - /** * An input for selecting and item from a list * @param {String} options.name the name of the property this input changes @@ -111,11 +71,9 @@ export const MenuListInput = ({ current, updateHandler, compact = false, - t, changed, design, isDesignOption = false, - i18n, }) => { const handleChange = useSharedHandlers({ dflt: config.dflt, @@ -125,7 +83,7 @@ export const MenuListInput = ({ }) return config.list.map((entry) => { - const { title = false, about = false } = config //getTitleAndDesc(config, i18n, isDesignOption) + const { title = false, about = false } = config if (!title || !about) console.log('No title or about in', { name, config, design }) const sideBySide = config.sideBySide || about.length + title.length < 42 @@ -286,7 +244,6 @@ export const MenuSliderInput = ({ setReset, children, changed, - i18n, state, Design, }) => { diff --git a/packages/react/components/Editor/components/menus/TestMenu.mjs b/packages/react/components/Editor/components/menus/TestMenu.mjs index d01d8891dae..e3dbb0b0a21 100644 --- a/packages/react/components/Editor/components/menus/TestMenu.mjs +++ b/packages/react/components/Editor/components/menus/TestMenu.mjs @@ -92,7 +92,7 @@ const SampleOptionButton = ({ name, i18n, update }) => ( ) -const SampleMeasurementButton = ({ name, i18n, update }) => ( +const SampleMeasurementButton = ({ name, update }) => ( ) : null} @@ -137,11 +139,7 @@ export const SaveView = ({ config, state, update }) => { } /> {withNotes ? ( - + ) : null}

    Don't have a PayPal account? - + Ko-fi.com/FreeSewing

    diff --git a/packages/react/components/Pattern/defs.mjs b/packages/react/components/Pattern/defs.mjs index 7160dc5e8d8..b83b5930172 100644 --- a/packages/react/components/Pattern/defs.mjs +++ b/packages/react/components/Pattern/defs.mjs @@ -1,4 +1,3 @@ -// eslint-disable-next-line no-unused-vars import React from 'react' import sanitize from 'html-react-parser' diff --git a/packages/react/components/Pattern/index.mjs b/packages/react/components/Pattern/index.mjs index bee2e647b8b..d731c0a4c61 100644 --- a/packages/react/components/Pattern/index.mjs +++ b/packages/react/components/Pattern/index.mjs @@ -1,5 +1,3 @@ -// Dependencies -import { cloudflareImageUrl } from '@freesewing/utils' // Components import React, { forwardRef } from 'react' import { Svg as DefaultSvg } from './svg.mjs' @@ -14,7 +12,6 @@ import { Grid as DefaultGrid } from './grid.mjs' import { Text as DefaultText, TextOnPath as DefaultTextOnPath } from './text.mjs' import { Circle as DefaultCircle } from './circle.mjs' import { getId, getProps, withinPartBounds, translateStrings } from './utils.mjs' -import { Link as WebLink } from '@freesewing/react/components/Link' /** * Default Pattern components that you can override @@ -101,6 +98,7 @@ const Pattern = forwardRef((props, ref) => { ) }) +Pattern.displayName = 'Pattern' export { // utils diff --git a/packages/react/components/Pattern/part.mjs b/packages/react/components/Pattern/part.mjs index c21fec65d2f..4d8c7ce6c2f 100644 --- a/packages/react/components/Pattern/part.mjs +++ b/packages/react/components/Pattern/part.mjs @@ -1,4 +1,3 @@ -// eslint-disable-next-line no-unused-vars import React, { forwardRef } from 'react' import { getId, getProps } from './utils.mjs' diff --git a/packages/react/components/Pattern/path.mjs b/packages/react/components/Pattern/path.mjs index d4e3cd9f160..e0ad889d23e 100644 --- a/packages/react/components/Pattern/path.mjs +++ b/packages/react/components/Pattern/path.mjs @@ -1,4 +1,3 @@ -// eslint-disable-next-line no-unused-vars import React from 'react' import { getId, getProps } from './utils.mjs' diff --git a/packages/react/components/Pattern/point.mjs b/packages/react/components/Pattern/point.mjs index 248896585c9..e59f975bb22 100644 --- a/packages/react/components/Pattern/point.mjs +++ b/packages/react/components/Pattern/point.mjs @@ -1,4 +1,3 @@ -// eslint-disable-next-line no-unused-vars import React from 'react' import { withinPartBounds } from './utils.mjs' diff --git a/packages/react/components/Pattern/snippet.mjs b/packages/react/components/Pattern/snippet.mjs index 741a401c6a1..510a0dcf64d 100644 --- a/packages/react/components/Pattern/snippet.mjs +++ b/packages/react/components/Pattern/snippet.mjs @@ -1,4 +1,3 @@ -// eslint-disable-next-line no-unused-vars import React from 'react' import { getProps } from './utils.mjs' diff --git a/packages/react/components/Pattern/svg.mjs b/packages/react/components/Pattern/svg.mjs index 8cfdcaa49c2..72779230a97 100644 --- a/packages/react/components/Pattern/svg.mjs +++ b/packages/react/components/Pattern/svg.mjs @@ -1,4 +1,3 @@ -// eslint-disable-next-line no-unused-vars import React from 'react' import { forwardRef } from 'react' diff --git a/packages/react/components/Pattern/text.mjs b/packages/react/components/Pattern/text.mjs index 46fd035eef2..3016d61f33a 100644 --- a/packages/react/components/Pattern/text.mjs +++ b/packages/react/components/Pattern/text.mjs @@ -1,4 +1,3 @@ -// eslint-disable-next-line no-unused-vars import React from 'react' import { translateStrings } from './utils.mjs' diff --git a/packages/react/components/Pattern/utils.mjs b/packages/react/components/Pattern/utils.mjs index 81f8adfc688..3ee8744e297 100644 --- a/packages/react/components/Pattern/utils.mjs +++ b/packages/react/components/Pattern/utils.mjs @@ -1,5 +1,3 @@ -import React from 'react' - /** * A method to generated an ID for an object part of a FreeSewing pattern * diff --git a/packages/react/components/Popout/index.mjs b/packages/react/components/Popout/index.mjs index bb8583503a7..f6692dd00ac 100644 --- a/packages/react/components/Popout/index.mjs +++ b/packages/react/components/Popout/index.mjs @@ -7,44 +7,44 @@ import { CloseIcon } from '@freesewing/react/components/Icon' */ const types = { comment: { - bg: 'tw:bg-success/5', + bg: 'tw:bg-success/5', border: 'tw:border-success', - text: 'tw:text-success', + text: 'tw:text-success', }, error: { - bg: 'tw:bg-error/5', + bg: 'tw:bg-error/5', border: 'tw:border-error', - text: 'tw:text-error', + text: 'tw:text-error', }, fixme: { - bg: 'tw:bg-neutral/5', + bg: 'tw:bg-neutral/5', border: 'tw:border-neutral', - text: 'tw:text-error', + text: 'tw:text-error', }, link: { - bg: 'tw:bg-secondary/5', + bg: 'tw:bg-secondary/5', border: 'tw:border-secondary', - text: 'tw:text-secondary', + text: 'tw:text-secondary', }, note: { - bg: 'tw:bg-primary/5', + bg: 'tw:bg-primary/5', border: 'tw:border-primary', - text: 'tw:text-primary', + text: 'tw:text-primary', }, related: { - bg: 'tw:bg-info/5', + bg: 'tw:bg-info/5', border: 'tw:border-info', - text: 'tw:text-info', + text: 'tw:text-info', }, tip: { - bg: 'tw:bg-accent/5', + bg: 'tw:bg-accent/5', border: 'tw:border-accent', - text: 'tw:text-accent', + text: 'tw:text-accent', }, warning: { - bg: 'tw:bg-warning/5', + bg: 'tw:bg-warning/5', border: 'tw:border-warning', - text: 'tw:text-warning', + text: 'tw:text-warning', }, } @@ -68,7 +68,7 @@ export const Popout = ({ compact = false, dense = false, hideable = false, - type = "note", + type = 'note', title = false, }) => { // Make this hideable/dismissable @@ -76,15 +76,17 @@ export const Popout = ({ if (hide) return null - return compact - ? {children} - : {children} + return compact ? ( + + {children} + + ) : ( + {children} + ) } -const RegularPopout = ({ by, children, compact, hideable, type, title, setHide }) => ( -
    +const RegularPopout = ({ by, children, hideable, type, title, setHide }) => ( +
    - ) const CompactPopout = ({ by, children, compact, dense, hideable, type, title, setHide }) => ( @@ -122,20 +123,27 @@ const CompactPopout = ({ by, children, compact, dense, hideable, type, title, se ) const PopoutTitle = ({ by, compact, hideable, setHide, title, type }) => ( -
    +
    {title ? title : types[type].title ? types[type].title : type.toUpperCase()} {compact ? | : null} - {(type === 'comment' && by) && by {by}} + {type === 'comment' && by && ( + + {' '} + by {by} + + )}
    {hideable && ( - )} -
    +
    ) diff --git a/packages/react/components/Profile/index.mjs b/packages/react/components/Profile/index.mjs index b5022e77220..3b76cc07251 100644 --- a/packages/react/components/Profile/index.mjs +++ b/packages/react/components/Profile/index.mjs @@ -1,5 +1,5 @@ // Dependencies -import { linkClasses, cloudflareImageUrl, getSearchParam } from '@freesewing/utils' +import { cloudflareImageUrl, getSearchParam } from '@freesewing/utils' // Context import { ModalContext } from '@freesewing/react/context/Modal' // Hooks @@ -9,7 +9,6 @@ import { useBackend } from '@freesewing/react/hooks/useBackend' // Components import { ModalWrapper } from '@freesewing/react/components/Modal' import { Link as WebLink } from '@freesewing/react/components/Link' -import { NoIcon, OkIcon, SaveIcon, RightIcon, WarningIcon } from '@freesewing/react/components/Icon' import { MiniWarning } from '@freesewing/react/components/Mini' import { KeyVal } from '@freesewing/react/components/KeyVal' import Markdown from 'react-markdown' @@ -40,12 +39,7 @@ export const OwnProfile = (props) => { * @param {number} [props.uid = false] - The user ID for which to show the profile * @returns {JSX.Element} */ -export const UserProfile = ({ - Link = false, - setTitle = false, - uid = false, - fromUrl = false, -}) => { +export const UserProfile = ({ Link = false, setTitle = false, uid = false, fromUrl = false }) => { if (!uid && !fromUrl) return ( @@ -69,7 +63,7 @@ export const UserProfile = ({ const urlId = getSearchParam(fromUrl) if (urlId && urlId !== ruid) setRuid(urlId) } - if (ruid) loadProfileData(ruid, backend, setData) + if (ruid) loadProfileData(ruid, backend, setData, setTitle) }, [uid, fromUrl, ruid]) return ( @@ -121,7 +115,10 @@ export const Avatar = ({ ihash }) => { ) } -async function loadProfileData(uid, backend, setData) { +async function loadProfileData(uid, backend, setData, setTitle = false) { const [status, body] = await backend.getUserProfile(uid) - if (status === 200 && body.result === 'success' && body.profile) setData(body.profile) + if (status === 200 && body.result === 'success' && body.profile) { + setData(body.profile) + if (typeof setTitle === 'function' && body.profile.username) setTitle(body.profile.username) + } } diff --git a/packages/react/components/Role/index.mjs b/packages/react/components/Role/index.mjs index e6d0689b8e6..51fce1e35f2 100644 --- a/packages/react/components/Role/index.mjs +++ b/packages/react/components/Role/index.mjs @@ -9,7 +9,7 @@ import { Link as DefaultLink } from '@freesewing/react/components/Link' import { LockIcon, PlusIcon } from '@freesewing/react/components/Icon' import { Spinner } from '@freesewing/react/components/Spinner' import { Popout } from '@freesewing/react/components/Popout' -import { H1, H2, H3 } from '@freesewing/react/components/Heading' +import { H3 } from '@freesewing/react/components/Heading' import { Consent } from '@freesewing/react/components/Account' const Wrap = ({ children }) => ( @@ -104,7 +104,7 @@ const AccountStatusUnknown = ({ banner }) => ( ) -const RoleLacking = ({ t, requiredRole, role, banner }) => ( +const RoleLacking = ({ requiredRole, role, banner }) => ( {banner}

    You lack the required role to access this content

    @@ -174,7 +174,7 @@ const ConsentLacking = ({ banner, refresh }) => { * @param {JSX.Element} props.children - The component children, will be rendered if props.js is not set * @returns {JSX.Element} */ -export const RoleBlock = ({ children, role = "admin", Link = false }) => { +export const RoleBlock = ({ children, role = 'admin', Link = false }) => { if (!Link) Link = DefaultLink const requiredRole = role @@ -275,7 +275,6 @@ export const UserVisitorContent = ({ userContent = null, visitorContent = null } const [ready, setReady] = useState(false) const [error, setError] = useState(false) - const [refreshCount, setRefreshCount] = useState(0) /* * Avoid hydration errors @@ -300,14 +299,15 @@ export const UserVisitorContent = ({ userContent = null, visitorContent = null } if (!account.bestBefore || account.bestBefore < Date.now()) verifyUser() } setReady(true) - }, [refreshCount]) - - const refresh = () => { - setRefreshCount(refreshCount + 1) - setError(false) - } + }, []) if (!ready) return + if (error) + return ( + + This is unexpected. You may want to report this. + + ) return token && account.username ? userContent : visitorContent } diff --git a/packages/react/components/SignIn/index.mjs b/packages/react/components/SignIn/index.mjs index fe2dd641e69..49b402f5621 100644 --- a/packages/react/components/SignIn/index.mjs +++ b/packages/react/components/SignIn/index.mjs @@ -1,11 +1,5 @@ // Utils -import { - linkClasses, - horFlexClasses, - horFlexClassesNoSm, - capitalize, - getSearchParam, -} from '@freesewing/utils' +import { horFlexClasses, horFlexClassesNoSm, getSearchParam, navigate } from '@freesewing/utils' // Context import { LoadingStatusContext } from '@freesewing/react/context/LoadingStatus' // Hooks @@ -21,13 +15,11 @@ import { KeyIcon, LockIcon, WarningIcon, - GoogleIcon, - GitHubIcon, FreeSewingIcon, UserIcon, } from '@freesewing/react/components/Icon' import { MfaInput, StringInput, PasswordInput } from '@freesewing/react/components/Input' -import { H1, H2, H3, H4 } from '@freesewing/react/components/Heading' +import { H1 } from '@freesewing/react/components/Heading' /* * @@ -44,7 +36,7 @@ import { H1, H2, H3, H4 } from '@freesewing/react/components/Heading' * @returns {JSX.Element} */ export const SignIn = ({ onSuccess = false, silent = false }) => { - const { account, setAccount, setToken, seenUser, setSeenUser } = useAccount() + const { setAccount, setToken, seenUser, setSeenUser } = useAccount() const backend = useBackend() const { setLoadingStatus } = useContext(LoadingStatusContext) @@ -149,15 +141,6 @@ export const SignIn = ({ onSuccess = false, silent = false }) => { } } - const initOauth = async (provider) => { - setLoadingStatus([true, 'Contacting the FreeSewing backend']) - const [status, body] = await backend.oauthInit(provider.toLowerCase()) - if (status === 200 && body.result === 'success') { - setLoadingStatus([true, `Contacting ${capitalize(provider)}`]) - window.location.href = body.authUrl - } - } - const btnClasses = `tw:daisy-btn tw:capitalize tw:w-full tw:mt-4 ${ signInFailed ? 'tw:daisy-btn-warning' : 'tw:daisy-btn-primary' } tw:transition-colors tw:ease-in-out tw:duration-300 ${horFlexClassesNoSm}` @@ -412,7 +395,12 @@ export const SignInConfirmation = ({ onSuccess = false }) => { } // Short-circuit errors - if (error === 'noId') return You seem to have arrived on this page in a way that is not supported + if (error === 'noId') + return ( + + You seem to have arrived on this page in a way that is not supported + + ) if (error && mfa) return error === 'signInFailed' ? ( <> diff --git a/packages/react/components/SignUp/index.mjs b/packages/react/components/SignUp/index.mjs index c26e838ae00..cebe61e11cc 100644 --- a/packages/react/components/SignUp/index.mjs +++ b/packages/react/components/SignUp/index.mjs @@ -3,7 +3,6 @@ import { validateEmail, validateTld, getSearchParam } from '@freesewing/utils' // Hooks import React, { useState, useContext, useEffect } from 'react' -import { useAccount } from '@freesewing/react/hooks/useAccount' import { useBackend } from '@freesewing/react/hooks/useBackend' // Context @@ -12,16 +11,7 @@ import { ModalContext } from '@freesewing/react/context/Modal' // Components import { Link } from '@freesewing/react/components/Link' -import { - LeftIcon, - RightIcon, - HelpIcon, - GoogleIcon, - GitHubIcon, - KeyIcon, - EmailIcon, - DownIcon, -} from '@freesewing/react/components/Icon' +import { LeftIcon, HelpIcon, KeyIcon, EmailIcon } from '@freesewing/react/components/Icon' import { ModalWrapper } from '@freesewing/react/components/Modal' import { EmailInput } from '@freesewing/react/components/Input' import { IconButton } from '@freesewing/react/components/Button' @@ -42,7 +32,6 @@ export const SignUp = ({ embed = false }) => { const [email, setEmail] = useState('') const [emailValid, setEmailValid] = useState(false) const [result, setResult] = useState(false) - const [showAll, setShowAll] = useState(false) // Hooks const backend = useBackend() @@ -93,14 +82,6 @@ export const SignUp = ({ embed = false }) => { } } - const initOauth = async (provider) => { - setLoadingStatus([true, 'Contacting the backend']) - const [status, body] = await backend.oauthInit(provider.toLowerCase()) - if (status === 200 && body.result === 'success') { - setLoadingStatus([true, `Contacting ${provider}`]) - window.location.href = body.authUrl - } - } const Heading = embed ? ({ children }) =>

    {children}

    : ({ children }) =>

    {children}

    @@ -200,10 +181,9 @@ export const SignUp = ({ embed = false }) => { * * @component * @param {object} props - All component props - * @param {function} [props.onSuccess = false] - A method to run when the sign in is successful * @returns {JSX.Element} */ -export const SignUpConfirmation = ({ onSuccess = false }) => { +export const SignUpConfirmation = () => { // State const [id, setId] = useState() const [error, setError] = useState(false) @@ -219,7 +199,12 @@ export const SignUpConfirmation = ({ onSuccess = false }) => { }, [id, check]) // Short-circuit errors - if (error === 'noId') return You seem to have arrived on this page in a way that is not supported + if (error === 'noId') + return ( + + You seem to have arrived on this page in a way that is not supported + + ) // If we do not (yet) have the data, show a loader if (!id || !check) return ( diff --git a/packages/react/components/Stats/index.mjs b/packages/react/components/Stats/index.mjs index 40ad6439f45..77f0b77a666 100644 --- a/packages/react/components/Stats/index.mjs +++ b/packages/react/components/Stats/index.mjs @@ -7,11 +7,7 @@ import { useBackend } from '@freesewing/react/hooks/useBackend' import { Spinner } from '@freesewing/react/components/Spinner' import { Link as WebLink } from '@freesewing/react/components/Link' import { ChartWrapper } from '@freesewing/react/components/Echart' - -const meta = { - title: 'FreeSewing by numbers', - description: 'Some high-level numbers about Freesewing', -} +import { Popout } from '@freesewing/react/components/Popout' const option = { tooltip: { @@ -104,6 +100,13 @@ export const Stats = ({ Link = false }) => { }, ] + if (error) + return ( + + This is unexpected. You may want to report this. + + ) + return ( <>
    diff --git a/packages/react/components/Tab/index.mjs b/packages/react/components/Tab/index.mjs index d973e458961..518085b042f 100644 --- a/packages/react/components/Tab/index.mjs +++ b/packages/react/components/Tab/index.mjs @@ -37,7 +37,7 @@ export const Tabs = ({ tabs = '', active = 0, children, withModal = false }) => return (
    -
    +
    {tablist.map((title, tabId) => { const btnClasses = `tw:text-lg tw:font-bold tw:capitalize tw:daisy-tab tw:h-auto tw:grow tw:py-1 ${ activeTab === tabId ? 'tw:daisy-tab-active' : '' diff --git a/packages/react/components/Uuid/index.mjs b/packages/react/components/Uuid/index.mjs index 2d423ede21a..4dd737f068d 100644 --- a/packages/react/components/Uuid/index.mjs +++ b/packages/react/components/Uuid/index.mjs @@ -1,4 +1,4 @@ -import React, { useState } from 'react' +import React from 'react' import { shortUuid } from '@freesewing/utils' import { Link as WebLink } from '@freesewing/react/components/Link' import { CopyToClipboardButton } from '@freesewing/react/components/Button' @@ -14,9 +14,7 @@ import { CopyToClipboardButton } from '@freesewing/react/components/Button' * @param {string} [props.label = false] - An optional label to pass to the CopyToClipboardButton * @returns {JSX.Element} */ -export const Uuid = ({ uuid, href = false, label = "UUID", Link = false }) => { - const [full, setFull] = useState() - const short = shortUuid(uuid) +export const Uuid = ({ uuid, href = false, label = 'UUID', Link = false }) => { if (!Link) Link = WebLink if (href === false) diff --git a/packages/react/components/Xray/index.mjs b/packages/react/components/Xray/index.mjs index 6099b60678c..b300f096809 100644 --- a/packages/react/components/Xray/index.mjs +++ b/packages/react/components/Xray/index.mjs @@ -81,3 +81,5 @@ export const Xray = forwardRef((props, ref) => { ) }) + +Xray.displayName = 'Xray' diff --git a/packages/react/components/Xray/path.mjs b/packages/react/components/Xray/path.mjs index 1c916562154..09a22194d68 100644 --- a/packages/react/components/Xray/path.mjs +++ b/packages/react/components/Xray/path.mjs @@ -96,9 +96,8 @@ export const PathXray = ({ ) } -const PathXrayInfo = ({ path, pathName, stackName, part }) => { +const PathXrayInfo = ({ path, pathName, stackName }) => { const [rounded, setRounded] = useState(true) - const log = (val) => console.log(val) const rounder = rounded ? round : (val) => val return ( diff --git a/packages/react/components/Xray/point.mjs b/packages/react/components/Xray/point.mjs index 693f13f7bc1..24067df9c1e 100644 --- a/packages/react/components/Xray/point.mjs +++ b/packages/react/components/Xray/point.mjs @@ -71,7 +71,7 @@ export const PointXray = ({ ) } -const PointXrayInfo = ({ point, pointName, stackName, part }) => { +const PointXrayInfo = ({ point, pointName, stackName }) => { const [rounded, setRounded] = useState(true) const rounder = rounded ? round : (val) => val diff --git a/packages/react/eslint.config.mjs b/packages/react/eslint.config.mjs new file mode 100644 index 00000000000..81d850381fb --- /dev/null +++ b/packages/react/eslint.config.mjs @@ -0,0 +1,30 @@ +import js from '@eslint/js' +import globals from 'globals' +import pluginReact from 'eslint-plugin-react' +import { defineConfig } from 'eslint/config' + +export default defineConfig([ + { + files: ['**/*.{js,mjs,cjs,jsx}'], + plugins: { js }, + extends: ['js/recommended'], + }, + { + files: ['**/*.{js,mjs,cjs,jsx}'], + languageOptions: { globals: { ...globals.browser, ...globals.node } }, + }, + { + plugins: pluginReact.configs.flat.recommended.plugins, + languageOptions: pluginReact.configs.flat.recommended.languageOptions, + rules: { + ...pluginReact.configs.flat.recommended.rules, + // Maybe one day someone wants to do this, but we use jsdoc for now + 'react/prop-types': 0, + }, + settings: { + react: { + version: 'detect', + }, + }, + }, +]) diff --git a/packages/react/hooks/useControl/index.mjs b/packages/react/hooks/useControl/index.mjs index 0794be5433f..406b58cd0e7 100644 --- a/packages/react/hooks/useControl/index.mjs +++ b/packages/react/hooks/useControl/index.mjs @@ -1,8 +1,7 @@ // Context import { LoadingStatusContext } from '@freesewing/react/context/LoadingStatus' - // Hooks -import React, { useState, useContext } from 'react' +import { useState, useContext } from 'react' import { useAccount } from '@freesewing/react/hooks/useAccount' import { useBackend } from '@freesewing/react/hooks/useBackend' diff --git a/packages/react/hooks/useFilter/index.mjs b/packages/react/hooks/useFilter/index.mjs index b9b74b8232d..06a4ad034d8 100644 --- a/packages/react/hooks/useFilter/index.mjs +++ b/packages/react/hooks/useFilter/index.mjs @@ -1,8 +1,6 @@ -import React from 'react' import { useAtom } from 'jotai' import { atomWithHash } from 'jotai-location' -const filterAtom = atomWithHash('filter', { }) +const filterAtom = atomWithHash('filter', {}) export const useFilter = () => useAtom(filterAtom) - diff --git a/packages/react/hooks/useSelection/index.mjs b/packages/react/hooks/useSelection/index.mjs index ac3825ef3c0..c6b7b75f072 100644 --- a/packages/react/hooks/useSelection/index.mjs +++ b/packages/react/hooks/useSelection/index.mjs @@ -1,4 +1,4 @@ -import React, { useState } from 'react' +import { useState } from 'react' export const useSelection = (items) => { const [selection, setSelection] = useState({}) diff --git a/packages/react/hooks/useStateObject/index.mjs b/packages/react/hooks/useStateObject/index.mjs index 71e48aa7a53..8ebb560751b 100644 --- a/packages/react/hooks/useStateObject/index.mjs +++ b/packages/react/hooks/useStateObject/index.mjs @@ -1,4 +1,4 @@ -import React, { useState } from 'react' +import { useState } from 'react' import set from 'lodash/set.js' import unset from 'lodash/unset.js' diff --git a/packages/react/lib/RestClient/index.mjs b/packages/react/lib/RestClient/index.mjs index cf8e8d94b88..d7e751004d3 100644 --- a/packages/react/lib/RestClient/index.mjs +++ b/packages/react/lib/RestClient/index.mjs @@ -68,9 +68,11 @@ async function withoutBody(method = 'GET', url, headers = {}, raw = false, log = try { body = raw ? await response.text() : await response.json() } catch (err) { + console.log(err) try { body = await response.text() } catch (err) { + console.log(err) body = false } } @@ -125,9 +127,11 @@ async function withBody(method = 'POST', url, data, headers, raw = false, log = try { body = raw ? await response.text() : await response.json() } catch (err) { + console.log(err) try { body = await response.text() } catch (err) { + console.log(err) body = false } } diff --git a/packages/react/lib/force-tailwind.mjs b/packages/react/lib/force-tailwind.mjs deleted file mode 100644 index 212907a4c97..00000000000 --- a/packages/react/lib/force-tailwind.mjs +++ /dev/null @@ -1,14 +0,0 @@ -import React from 'react' - -const html = ( - <> - - -) From 74d4f05d9487b7380313c21479a61d82eff0fb93 Mon Sep 17 00:00:00 2001 From: joostdecock Date: Fri, 30 May 2025 15:04:10 +0200 Subject: [PATCH 66/74] feat: Migrate from helpProvider to Help components --- config/exceptions.yaml | 2 + packages/react/components/Account/Set.mjs | 6 +- .../Editor/components/MeasurementsEditor.mjs | 20 ++++-- .../components/views/MeasurementsView.mjs | 13 ++-- packages/react/components/Help/index.mjs | 62 +++++++++++++++++++ packages/react/components/Input/index.mjs | 8 +-- packages/react/package.json | 6 +- sites/org/src/css/custom.css | 10 +++ 8 files changed, 107 insertions(+), 20 deletions(-) create mode 100644 packages/react/components/Help/index.mjs diff --git a/config/exceptions.yaml b/config/exceptions.yaml index 65f7cdf28ff..6c4fbca9bf1 100644 --- a/config/exceptions.yaml +++ b/config/exceptions.yaml @@ -83,6 +83,7 @@ packageJson: "./components/Echart": "./components/Echart/index.mjs" "./components/Editor": "./components/Editor/index.mjs" "./components/Heading": "./components/Heading/index.mjs" + "./components/Help": "./components/Help/index.mjs" "./components/Highlight": "./components/Highlight/index.mjs" "./components/Icon": "./components/Icon/index.mjs" "./components/Input": "./components/Input/index.mjs" @@ -124,6 +125,7 @@ packageJson: "./hooks/useControl": "./hooks/useControl/index.mjs" "./hooks/useDesign": "./hooks/useDesign/index.mjs" "./hooks/useDesignTranslation": "./hooks/useDesignTranslation/index.mjs" + "./hooks/useFilter": "./hooks/useFilter/index.mjs" "./hooks/useSelection": "./hooks/useSelection/index.mjs" "./hooks/useStateObject": "./hooks/useStateObject/index.mjs" # Lib diff --git a/packages/react/components/Account/Set.mjs b/packages/react/components/Account/Set.mjs index e822940cf86..a1f43d1c5f1 100644 --- a/packages/react/components/Account/Set.mjs +++ b/packages/react/components/Account/Set.mjs @@ -57,6 +57,7 @@ import { Popout } from '@freesewing/react/components/Popout' import { bundlePatternTranslations, draft, flattenFlags } from '../Editor/lib/index.mjs' import { Bonny } from '@freesewing/bonny' import { MiniNote, MiniTip } from '../Mini/index.mjs' +import { modalMeasurementHelp } from '@freesewing/react/components/Help' /** * Component to show an individual measurements set @@ -66,9 +67,8 @@ import { MiniNote, MiniTip } from '../Mini/index.mjs' * @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 }) => { +export const Set = ({ id, publicOnly = false, Link = false }) => { if (!Link) Link = WebLink // Hooks @@ -486,7 +486,7 @@ export const Set = ({ id, publicOnly = false, Link = false, measurementHelpProvi current={mset.measies[m]} original={mset.measies[m]} update={updateMeasies} - helpProvider={measurementHelpProvider} + help={() => modalMeasurementHelp(m, setModal)} /> ))} diff --git a/packages/react/components/Editor/components/MeasurementsEditor.mjs b/packages/react/components/Editor/components/MeasurementsEditor.mjs index c9c987771b8..c951deba4e8 100644 --- a/packages/react/components/Editor/components/MeasurementsEditor.mjs +++ b/packages/react/components/Editor/components/MeasurementsEditor.mjs @@ -1,5 +1,10 @@ -import React from 'react' +import React, { useContext } from 'react' +import { measurements as measurementTranslations } from '@freesewing/i18n' +// Context +import { ModalContext } from '@freesewing/react/context/Modal' +// Components import { MeasurementInput } from '@freesewing/react/components/Input' +import { modalMeasurementHelp } from '@freesewing/react/components/Help' /** * This MeasurementsEditor component allows inline-editing of the measurements @@ -9,10 +14,13 @@ import { MeasurementInput } from '@freesewing/react/components/Input' * @param {object} props.state - The ViewWrapper state object * @param {object} props.state.settings - The current settings * @param {object} props.update - Helper object for updating the ViewWrapper state - * @param {object} props.helpProvider - A function that takes a measurement and returns a url or action to show help for that measurement * @return {function} MeasurementsEditor - React component */ -export const MeasurementsEditor = ({ Design, update, state, helpProvider = false }) => { +export const MeasurementsEditor = ({ Design, update, state }) => { + // Context + const { setModal, modalContent } = useContext(ModalContext) + console.log({ modalContent }) + /* * Helper method to handle state updates for measurements */ @@ -26,7 +34,7 @@ export const MeasurementsEditor = ({ Design, update, state, helpProvider = false const { settings = {} } = state return ( -
    +

    Required Measurements

    {Object.keys(Design.patternConfig.measurements).length === 0 ? (

    This design does not require any measurements.

    @@ -40,7 +48,8 @@ export const MeasurementsEditor = ({ Design, update, state, helpProvider = false original={settings.measurements?.[m]} update={(m, newVal) => onUpdate(m, newVal)} id={`edit-${m}`} - helpProvider={helpProvider} + label={measurementTranslations[m]} + help={() => modalMeasurementHelp(m, setModal)} /> ))}
    @@ -58,6 +67,7 @@ export const MeasurementsEditor = ({ Design, update, state, helpProvider = false original={settings.measurements?.[m]} update={(m, newVal) => onUpdate(m, newVal)} id={`edit-${m}`} + help={() => modalMeasurementHelp(m, setModal)} /> )) )} diff --git a/packages/react/components/Editor/components/views/MeasurementsView.mjs b/packages/react/components/Editor/components/views/MeasurementsView.mjs index 1f736a1137d..70e9d6df696 100644 --- a/packages/react/components/Editor/components/views/MeasurementsView.mjs +++ b/packages/react/components/Editor/components/views/MeasurementsView.mjs @@ -2,8 +2,10 @@ import { designMeasurements } from '../../lib/index.mjs' import { capitalize, horFlexClasses as horFlexClasses } from '@freesewing/utils' import { measurements as measurementsTranslations } from '@freesewing/i18n' +// Context +import { ModalContext } from '@freesewing/react/context/Modal' // Hooks -import React, { Fragment, useState, useEffect } from 'react' +import React, { Fragment, useState, useEffect, useContext } from 'react' import { useBackend } from '@freesewing/react/hooks/useBackend' // Components import { Popout } from '@freesewing/react/components/Popout' @@ -37,7 +39,6 @@ const iconClasses = { * @param {Array} props.missingMeasurements - List of missing measurements for the current design * @param {Object} props.state - The editor state object * @param {Object} props.update - Helper object for updating the editor state - * @param {object} props.helpProvider - A function that takes a measurement and returns a url or action to show help for that measurement * @return {Function} MeasurementsView - React component */ export const MeasurementsView = ({ @@ -47,8 +48,8 @@ export const MeasurementsView = ({ state, update, design, - measurementHelpProvider = false, }) => { + const { modalContent } = useContext(ModalContext) /* * If there is no view set, completing measurements will switch to the view picker * Which is a bit confusing. So in this case, set the view to measurements. @@ -170,10 +171,7 @@ export const MeasurementsView = ({

    You can manually set or override measurements below.

    , - , + , 'edit', ]) @@ -218,6 +216,7 @@ export const MeasurementsView = ({ )} {items.length > 1 ? : items}
    + {modalContent} ) } diff --git a/packages/react/components/Help/index.mjs b/packages/react/components/Help/index.mjs new file mode 100644 index 00000000000..45990296de1 --- /dev/null +++ b/packages/react/components/Help/index.mjs @@ -0,0 +1,62 @@ +import React from 'react' +// Components +import { ModalWrapper } from '@freesewing/react/components/Modal' + +/** + * A component to display inline help for a measurement. + * + * This is typically loaded as modal content as it returns an ifram + * + * @component + * @param {object} props - All component props + * @param {string} [props.m = undefined] - The measurment name (id) + * @returns {JSX.Element} + */ +export const DesignOptionHelp = ({ design, o }) => + design && o ? ( +