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 +}