VSinerva/freesewing
1
0
Fork 0
Code Activity

feat: Added package documentation (wip)

Browse source
This commit is contained in:
joostdecock 2025-04-18 19:19:20 +02:00
parent f734707163
commit 02da928f04
82 changed files with 2248 additions and 466 deletions
Download patch file Download diff file Expand all files Collapse all files

8
packages/config/src/urls.mjs
View file

@ -7,16 +7,16 @@ export const urls = {
// FreeSewing website
website: 'https://freesewing.eu',
// FreeSewing monorepo
monorepo: 'https://github.com/freesewing/freesewing',
// FreeSewing github organisation
github: 'https://github.com/freesewing',
monorepo: 'https://codeberg.org/freesewing/freesewing',
// FreeSewing codeberg organisation
codeberg: 'https://codeberg.org/freesewing',
// Social media and other account links for FreeSewing
social: {
YouTube: 'https://www.youtube.com/@freesewing',
Discord: 'https://discord.freesewing.org/',
Instagram: 'https://instagram.com/freesewing_org',
Facebook: 'https://www.facebook.com/groups/627769821272714/',
GitHub: 'https://github.com/freesewing',
Codeberg: 'https://codeberg.org/freesewing',
Reddit: 'https://www.reddit.com/r/freesewing/',
Mastodon: 'https://freesewing.social/@freesewing',
Bluesky: 'https://bsky.app/profile/freesewing.org',

18
sites/dev/docs/reference/api/utils/cbqc/readme.mdx Normal file
View file

@ -0,0 +1,18 @@
---
title: utils.cbqc
---
The `utils.cbqc` value holds `0.55191502449351`.
This is the value to best approximate a (quarter) circle with cubic Bézier curves,
as explained in the [Approximate a circle with cubic Bézier curves
](https://spencermortensen.com/articles/bezier-circle/) article by Spencer Mortensen.
:::tip
cbqc stands for Cubic Bezier Quarter Circle
:::
## Signature
```js
Number utils.cbqc
```

73
sites/dev/docs/reference/api/utils/curveintersectsx/readme.mdx
View file

@ -5,15 +5,6 @@ title: utils.curveIntersectsX()
The `utils.curveIntersectsX()` function finds the point(s) where a curve
intersects a given X-value.
:::warning
This function can sometimes fail to find intersections in some curves
due to a limitation in an underlying Bézier library.
Please see [Bug #3367](https://github.com/freesewing/freesewing/issues/3367)
for more information.
:::
## Signature
```js
@ -37,40 +28,41 @@ multiple intersections are found.
```js
({ Point, points, Path, paths, Snippet, snippets, utils, part }) => {
points.start = new Point(10, 15)
points.cp1 = new Point(80, 10)
points.cp2 = new Point(-50, 80)
points.end = new Point(110, 70)
points.start = new Point(10, 15)
points.cp1 = new Point(80, 10)
points.cp2 = new Point(-50, 80)
points.end = new Point(110, 70)
paths.curve = new Path()
.move(points.start)
.curve(points.cp1, points.cp2, points.end)
paths.curve = new Path()
.move(points.start)
.curve(points.cp1, points.cp2, points.end)
for (let x of [30, 40]) {
points["from" + x] = new Point(x, 10)
points["to" + x] = new Point(x, 80)
paths["line" + x] = new Path()
.move(points["from" + x])
.line(points["to" + x])
.addClass("lining dashed")
}
snippets.i40 = new Snippet(
"notch",
utils.curveIntersectsX(points.start, points.cp1, points.cp2, points.end, 40)
)
for (let p of utils.curveIntersectsX(
points.start,
points.cp1,
points.cp2,
points.end,
30
))
snippets[p.y] = new Snippet("notch", p)
return part
for (let x of [30, 40]) {
points["from" + x] = new Point(x, 10)
points["to" + x] = new Point(x, 80)
paths["line" + x] = new Path()
.move(points["from" + x])
.line(points["to" + x])
.addClass("lining dashed")
}
snippets.i40 = new Snippet(
"notch",
utils.curveIntersectsX(points.start, points.cp1, points.cp2, points.end, 40)
)
for (let p of utils.curveIntersectsX(
points.start,
points.cp1,
points.cp2,
points.end,
30
))
snippets[p.y] = new Snippet("notch", p)
return part
}
```
</Example>
@ -81,3 +73,4 @@ This is a low-level (and faster) variant
of [`Path.intersectsX()`](/reference/api/path/intersectsx).
Instead of a path, you describe a single curve by passing the four
points that describes it.
```

75
sites/dev/docs/reference/api/utils/curveintersectsy/readme.mdx
View file

@ -5,15 +5,6 @@ title: utils.curveIntersectsY()
The `utils.curveIntersectsY()` function finds the point(s) where a curve
intersects a given Y-value.
:::warning
This function can sometimes fail to find intersections in some curves
due to a limitation in an underlying Bézier library.
Please see [Bug #3367](https://github.com/freesewing/freesewing/issues/3367)
for more information.
:::
## Signature
```js
@ -31,46 +22,47 @@ a single intersection is found, and an array
of [Point](/reference/api/point/) objects if
multiple intersections are found.
## Example
<Example caption="A Utils.curveIntersectY() example">
```js
({ Point, points, Path, paths, Snippet, snippets, utils, part }) => {
points.start = new Point(10, 45)
points.cp1 = new Point(50, 10)
points.cp2 = new Point(0, 80)
points.end = new Point(110, 70)
points.start = new Point(10, 45)
points.cp1 = new Point(50, 10)
points.cp2 = new Point(0, 80)
points.end = new Point(110, 70)
paths.curve = new Path()
.move(points.start)
.curve(points.cp1, points.cp2, points.end)
paths.curve = new Path()
.move(points.start)
.curve(points.cp1, points.cp2, points.end)
for (let y of [40, 50]) {
points["from" + y] = new Point(10, y)
points["to" + y] = new Point(110, y)
paths["line" + y] = new Path()
.move(points["from" + y])
.line(points["to" + y])
.addClass("lining dashed")
}
snippets.i50 = new Snippet(
"notch",
utils.curveIntersectsY(points.start, points.cp1, points.cp2, points.end, 50)
)
for (let p of utils.curveIntersectsY(
points.start,
points.cp1,
points.cp2,
points.end,
40
))
snippets[p.x] = new Snippet("notch", p)
return part
for (let y of [40, 50]) {
points["from" + y] = new Point(10, y)
points["to" + y] = new Point(110, y)
paths["line" + y] = new Path()
.move(points["from" + y])
.line(points["to" + y])
.addClass("lining dashed")
}
snippets.i50 = new Snippet(
"notch",
utils.curveIntersectsY(points.start, points.cp1, points.cp2, points.end, 50)
)
for (let p of utils.curveIntersectsY(
points.start,
points.cp1,
points.cp2,
points.end,
40
))
snippets[p.x] = new Snippet("notch", p)
return part
}
```
</Example>
@ -80,3 +72,4 @@ This is a low-level (and faster) variant
of [`Path.intersectsY()`](/reference/api/path/intersectsy).
Instead of a path, you describe a single curve by passing the four
points that describes it.
```

79
sites/dev/docs/reference/api/utils/curvesintersect/readme.mdx
View file

@ -5,15 +5,6 @@ title: utils.curvesIntersect()
The `utils.curvesIntersect()` function finds the intersections between two curves
described by 4 points each.
:::warning
This function can sometimes fail to find intersections in some curves
due to a limitation in an underlying Bézier library.
Please see [Bug #3367](https://github.com/freesewing/freesewing/issues/3367)
for more information.
:::
## Signature
```js
@ -40,43 +31,45 @@ multiple intersections are found.
```js
({ Point, points, Path, paths, Snippet, snippets, utils, getId, part }) => {
points.A = new Point(10, 10)
points.Acp = new Point(310, 40)
points.B = new Point(110, 70)
points.Bcp = new Point(-210, 40)
points.A = new Point(10, 10)
points.Acp = new Point(310, 40)
points.B = new Point(110, 70)
points.Bcp = new Point(-210, 40)
points.C = new Point(20, -5)
points.Ccp = new Point(60, 300)
points.D = new Point(100, 85)
points.Dcp = new Point(70, -220)
paths.curveA = new Path()
.move(points.A)
.curve(points.Acp, points.Bcp, points.B)
paths.curveB = new Path()
.move(points.C)
.curve(points.Ccp, points.Dcp, points.D)
points.C = new Point(20, -5)
points.Ccp = new Point(60, 300)
points.D = new Point(100, 85)
points.Dcp = new Point(70, -220)
paths.curveA = new Path()
.move(points.A)
.curve(points.Acp, points.Bcp, points.B)
paths.curveB = new Path()
.move(points.C)
.curve(points.Ccp, points.Dcp, points.D)
const intersections = utils.curvesIntersect(
points.A,
points.Acp,
points.Bcp,
points.B,
points.C,
points.Ccp,
points.Dcp,
points.D
)
const intersections = utils.curvesIntersect(
points.A,
points.Acp,
points.Bcp,
points.B,
points.C,
points.Ccp,
points.Dcp,
points.D
)
if (intersections) {
if (intersections instanceof Array) {
for (const p of intersections)
snippets[getId()] = new Snippet('notch', p)
} else {
snippets[getId()] = new Snippet('notch', intersections)
}
}
return part
if (intersections) {
if (intersections instanceof Array) {
for (const p of intersections)
snippets[getId()] = new Snippet('notch', p)
} else {
snippets[getId()] = new Snippet('notch', intersections)
}
}
return part
}
```
</Example>
```

13
sites/dev/docs/reference/api/utils/goldenratio/readme.mdx Normal file
View file

@ -0,0 +1,13 @@
---
title: utils.goldenRatio
---
The `utils.goldenRatio` value holds `1.618034`.
This value approximates **φ** which is also known
as [the golden ratio](https://en.wikipedia.org/wiki/Golden_ratio).
## Signature
```js
Number utils.goldenRatio
```

17
sites/dev/docs/reference/api/utils/hidepresets/readme.mdx Normal file
View file

@ -0,0 +1,17 @@
---
title: utils.hidePresets
---
import { hidePresets } from '@freesewing/core'
The `utils.hidePresets` value holds presets to hiding parts in a FreeSewing design.
:::tip
See [Hiding parts](/reference/api/part/config/hide/#presets) for an example of how to use this.
:::
## Signature
```js
Object utils.hideParts
```

147
sites/dev/docs/reference/packages/collection/readme.mdx Normal file
View file

@ -0,0 +1,147 @@
---
title: '@freesewing/collection'
---
import * as all from '@freesewing/collection'
FreeSewing's **collection** package bundles all FreeSewing designs as well as
information about those designs.
It is published on NPM as [@freesewing/collection
](https://www.npmjs.com/package/@freesewing/collection).\
The source code for this package is available in [our monorepo on Codeberg
](https://codeberg.org/freesewing/freesewing) under [packages/collection
](https://codeberg.org/freesewing/freesewing/src/branch/develop/packages/collection).
:::note
This package does not provide a default export.
:::
## Installation
```sh
npm install --save @freesewing/collection
```
## Named Exports
### about
Holds on object where the key is the design name and the value is an object
holding a bunch of information about a Design.
```js
import { about } from '@freesewing/collection'
```
<ConsoleButton data={all.about} />
### collection
Holds an array of design names that are included in the package.
```js
import { collection } from '@freesewing/collection'
```
<ConsoleButton data={all.collection} />
### designs
An object holding all of our designs. The key is the design name, and the value
the design instance.
```js
import { designs } from '@freesewing/collection'
```
<ConsoleButton data={all.designs} />
### designers
An array holding the various designers,
which we use to filter designs based on the data in the `about` export.
```js
import { developers } from '@freesewing/collection'
```
<ConsoleButton data={all.designers} />
### developers
An array holding the various developers,
which we use to filter designs based on the data in the `about` export.
```js
import { developers } from '@freesewing/collection'
```
<ConsoleButton data={all.developers} />
### i18n
An object holding English translations for all designs in our collection.
```js
import { i18n } from '@freesewing/collection'
```
<ConsoleButton data={all.i18n} />
### measurements
Holds an object where the key is the design name and the value is an array of
all the consolidated measurements for that design.
By consolidated, we mean the required measurements, plus the optional
measurments.
```js
import { measurements } from '@freesewing/collection'
```
<ConsoleButton data={all.measurements} />
### optionalMeasurements
Holds an object where the key is the design name and the value is an array of
all the optional measurements for that design.
```js
import { optionalMeasurements } from '@freesewing/collection'
```
<ConsoleButton data={all.optionalMeasurements} />
### requiredMeasurements
Holds an object where the key is the design name and the value is an array of
all the required measurements for that design.
```js
import { requiredMeasurements } from '@freesewing/collection'
```
<ConsoleButton data={all.requiredMeasurements} />
### tags
An array holding the various tags,
which we use to filter designs based on the data in the `about` export.
```js
import { tags } from '@freesewing/collection'
```
<ConsoleButton data={all.tags} />
### techniques
An array holding the various techniques,
which we use to filter designs based on the data in the `about` export.
```js
import { techniques } from '@freesewing/collection'
```
<ConsoleButton data={all.techniques} />

160
sites/dev/docs/reference/packages/config/readme.mdx Normal file
View file

@ -0,0 +1,160 @@
---
title: '@freesewing/config'
---
import * as all from '@freesewing/config'
FreeSewing's **config** package bundles configuration data for FreeSewing's websites
and infrastructure.
It is published on NPM as [@freesewing/config
](https://www.npmjs.com/package/@freesewing/config).\
The source code for this package is available in [our monorepo on Codeberg
](https://codeberg.org/freesewing/freesewing) under [packages/config
](https://codeberg.org/freesewing/freesewing/src/branch/develop/packages/config).
:::note
This package does not provide a default export.
:::
## Installation
```sh
npm install --save @freesewing/config
```
## Named Exports
### apikeyLevels
Holds an object where the key is the permission level for an API key (a number
from 0 t0 8), and the value is a textual description of that access level.
```js
import { apikeyLevels } from '@freesewing/config'
```
<ConsoleButton data={all.apikeyLevels} />
### cloudflare
Holds an object with information about Cloudflare's image service which
FreeSewing uses for hosting images.
```js
import { cloudflare } from '@freesewing/config'
```
<ConsoleButton data={all.cloudflare} />
### control
Holds an object with the configuration of FreeSewing's control setting.
This setting determines which level of UX complexity hides/reveals what features
on the website.
```js
import { control } from '@freesewing/config'
```
<ConsoleButton data={all.control} />
### controlDesc
Holds an object with the textual description of the various control levels
used by FreeSewing.
```js
import { controlDesc } from '@freesewing/config'
```
<ConsoleButton data={all.controlDesc} />
### degreeMeasurements
Holds an array of measurements that measure an angle, rather than a distance.
```js
import { degreeMeasurements } from '@freesewing/config'
```
<ConsoleButton data={all.degreeMeasurements} />
### isDegreeMeasurement
A helper method to determine whether a measurement is a degree measurement.
In other words, a measurement that captures an angle, rather than a distance.
<ParamsTable
params={{
measurement: { type: 'string', dflt: 'undefined', desc: 'The ID of a FreeSewing measurement' },
}}
returns={{ type: 'boolean', desc: 'true of it is a degree measurement, false if not' }}
/>
```js import {isDegreeMeasurement} from '@freesewing/config'
const result = isDegreeMeasurement('shoulderSlope')
// result now holds: true
````
### logoPath
Holds a string that is the SVG pathstring for the FreeSewing logo, Skully.
```js
import { logoPath } from '@freesewing/config'
````
<ConsoleButton data={all.logoPath} />
### measurements
Holds an array of (the IDs of) all measurements used by FreeSewing designs.
```js
import { measurements } from '@freesewing/config'
```
<ConsoleButton data={all.measurements} />
### roles
Holds an object detailing the roles for role-based access control (RBAC) on the
FreeSewing backend.
```js
import { roles } from '@freesewing/config'
```
<ConsoleButton data={all.roles} />
### sewingTechniques
Holds an array of (the IDs of) all the sewing techniques used by FreeSewing designs.
```js
import { sewingTechniques } from '@freesewing/config'
```
<ConsoleButton data={all.sewingTechniques} />
### uiRoles
Holds an array of all the roles used on the FreeSewing website.
```js
import { uiRoles } from '@freesewing/config'
```
<ConsoleButton data={all.uiRoles} />
### urls
Holds an array of all the roles used on the FreeSewing website.
```js
import { urls } from '@freesewing/config'
```
<ConsoleButton data={all.urls} />

369
sites/dev/docs/reference/packages/core/readme.mdx Normal file
View file

@ -0,0 +1,369 @@
---
title: '@freesewing/core'
---
import { cbqc, hidePresets, goldenRatio, version } from '@freesewing/core'
FreeSewing's **core** package holds the core library for parametric design
of sewing patterns.
It is published on NPM as [@freesewing/core
](https://www.npmjs.com/package/@freesewing/core).\
The source code for this package is available in [our monorepo on Codeberg
](https://codeberg.org/freesewing/freesewing) under [packages/core
](https://codeberg.org/freesewing/freesewing/src/branch/develop/packages/core).
:::tip
Refer to [the core API reference documentation](/reference/api) for in-depth
info on how to use this package.
:::
:::note
This package does not provide a default export.
:::
## Installation
```sh
npm install --save @freesewing/core
```
## Named Exports
### Attributes
The constructor method for [Attributes](/reference/api/attributes/).
```js
import { Attributes } from '@freesewing/core'
```
### beamIntersectsCircle
The [beamIntersectsCircle](/reference/api/utils/beamintersectscircle/) function.
```js
import { beamIntersectsCircle } from '@freesewing/core'
```
### beamIntersectsCurve
The [beamIntersectsCurve](/reference/api/utils/beamintersectscurve/) function.
```js
import { beamIntersectsCurve } from '@freesewing/core'
```
### beamIntersectsX
The [beamIntersectsX](/reference/api/utils/beamintersectsx/) function.
```js
import { beamIntersectsX } from '@freesewing/core'
```
### beamIntersectsY
The [beamIntersectsY](/reference/api/utils/beamintersectsy/) function.
```js
import { beamIntersectsY } from '@freesewing/core'
```
### beamsIntersect
The [beamsIntersect](/reference/api/utils/beamsintersect/) function.
```js
import { beamsIntersect } from '@freesewing/core'
```
### Bezier
A copy of the [BezierJs](https://www.npmjs.com/package/bezier-js) library.
```js
import { Bezier } from '@freesewing/core'
```
### capitalize
The [capitalize](/reference/api/utils/capitalize/) function.
```js
import { capitalize } from '@freesewing/core'
```
### cbqc
The [cbqc](/reference/api/utils/cbqc/) number, which is the ideal value
to approximate a quarter circle with a cubic Bezier curve.
:::tip
**cbqc** stands for Cubic Bezier Quarter Circle
:::
```js
import { capitalize } from '@freesewing/core'
```
<ConsoleButton data={cbqc} />
### circlesIntersect
The [circlesIntersect](/reference/api/utils/circlesintersect/) function.
```js
import { circlesIntersect } from '@freesewing/core'
```
### curveEdge
The [curveEdge](/reference/api/utils/curveedge/) function.
```js
import { curveEdge } from '@freesewing/core'
```
### curveIntersectsX
The [curveIntersectsX](/reference/api/utils/curveIntersectsX/) function.
```js
import { curveIntersectsX } from '@freesewing/core'
```
### curveIntersectsY
The [curveIntersectsY](/reference/api/utils/curveintersectsy/) function.
```js
import { curveIntersectsY } from '@freesewing/core'
```
### curvesIntersect
The [curvesIntersect](/reference/api/utils/curvesintersect/) function.
```js
import { curvesIntersect } from '@freesewing/core'
```
### deg2rad
The [deg2rad](/reference/api/utils/deg2rad/) function.
```js
import { deg2rad } from '@freesewing/core'
```
### Design
The constructor method for [Design](/reference/api/design/).
```js
import { Design } from '@freesewing/core'
```
### generateStackTransform
The [generateStackTransform](/reference/api/utils/generatestacktransform/) function.
```js
import { generateStackTransform } from '@freesewing/core'
```
### getTransformedBounds
The [getTransformedBounds](/reference/api/utils/gettransformedbounds/) function.
```js
import { getTransformedBounds } from '@freesewing/core'
```
### goldenRatio
The [goldenRatio](/reference/api/utils/goldenratio/) number, which is the ideal value
to approximate a quarter circle with a cubic Bezier curve.
<ConsoleButton data={goldenRatio} />
### hidePresets
The [hidePresets](/reference/api/utils/hidepresets) object holds presets for
hiding parts in a FreeSewing design.
```js
import { hidePresets } from '@freesewing/core'
```
<ConsoleButton data={hidePresets} />
### lineIntersectsCircle
The [lineIntersectsCircle](/reference/api/utils/lineintersectscircle/) function.
```js
import { lineIntersectsCircle } from '@freesewing/core'
```
### lineIntersectsCurve
The [lineIntersectsCurve](/reference/api/utils/lineintersectscurve/) function.
```js
import { lineIntersectsCurve } from '@freesewing/core'
```
### linesIntersect
The [linesIntersect](/reference/api/utils/linesintersect/) function.
```js
import { linesIntersect } from '@freesewing/core'
```
### mergeI18n
The [mergeI18n](/reference/api/utils/mergei18n/) function.
```js
import { mergeI18n } from '@freesewing/core'
```
### mergeOptions
The [mergeOptions](/reference/api/utils/mergeoptions/) function.
```js
import { mergeOptions } from '@freesewing/core'
```
### Part
The constructor method for [Part](/reference/api/part/).
```js
import { Part } from '@freesewing/core'
```
### Path
The constructor method for [Path](/reference/api/path/).
```js
import { Path } from '@freesewing/core'
```
### Pattern
The constructor method for [Pattern](/reference/api/pattern/).
```js
import { Pattern } from '@freesewing/core'
```
### pctBasedOn
The [pctBasedOn](/reference/api/utils/pctbasedon/) function.
```js
import { pctBasedOn } from '@freesewing/core'
```
### Point
The constructor method for [Point](/reference/api/point/).
```js
import { Point } from '@freesewing/core'
```
### pointOnBeam
The [pointOnBeam](/reference/api/utils/pointonbeam/) function.
```js
import { pointOnBeam } from '@freesewing/core'
```
### pointOnCurve
The [pointOnCurve](/reference/api/utils/pointoncurve/) function.
```js
import { pointOnCurve } from '@freesewing/core'
```
### pointOnLine
The [pointOnLine](/reference/api/utils/pointonline/) function.
```js
import { pointOnLine } from '@freesewing/core'
```
### rad2deg
The [rad2deg](/reference/api/utils/rad2deg/) function.
```js
import { rad2deg } from '@freesewing/core'
```
### round
The [round](/reference/api/utils/round/) function.
```js
import { round } from '@freesewing/core'
```
### Snippet
The constructor method for [Snippet](/reference/api/snippet/).
```js
import { Snippet } from '@freesewing/core'
```
### splitCurve
The [splitCurve](/reference/api/utils/splitcurve/) function.
```js
import { splitCurve } from '@freesewing/core'
```
### Store
The constructor method for [Store](/reference/api/store/).
```js
import { Store } from '@freesewing/core'
```
### stretchToScale
The [stretchToScale](/reference/api/utils/stretchtoscale/) function.
```js
import { stretchToScale } from '@freesewing/core'
```
### units
The [units](/reference/api/utils/units/) function.
```js
import { units } from '@freesewing/core'
```
### version
The version of the FreeSewing core library.
```js
import { version } from '@freesewing/core'
```
<ConsoleButton data={version} />

48
sites/dev/docs/reference/packages/i18n/readme.mdx Normal file
View file

@ -0,0 +1,48 @@
---
title: '@freesewing/i18n'
---
import { flags, measurements } from '@freesewing/i18n'
FreeSewing's **i18n** package bundles English translations for measurements
and flags used in FreeSewing's designs.
It is published on NPM as [@freesewing/i18n
](https://www.npmjs.com/package/@freesewing/i18n).\
The source code for this package is available in [our monorepo on Codeberg
](https://codeberg.org/freesewing/freesewing) under [packages/i18n
](https://codeberg.org/freesewing/freesewing/src/branch/develop/packages/i18n).
:::note
This package does not provide a default export.
:::
## Installation
```sh
npm install --save @freesewing/i18n
```
## Named Exports
### flags
An object holding English translations for the flags that are used in
FreeSewing's designs to flag information to the user.
```js
import { flags } from '@freesewing/config'
```
<ConsoleButton data={flags} />
### measurements
An object holding English translations for the measurements that are used in
FreeSewing's designs.
```js
import { measurements } from '@freesewing/config'
```
<ConsoleButton data={measurements} />

610
sites/dev/docs/reference/packages/models/readme.mdx
View file

@ -1,92 +1,578 @@
---
title: models
title: '@freesewing/models'
---
Published as [@freesewing/models][1], this package provides body
measurements data for a range of size models used by the FreeSewing project.
import * as all from '@freesewing/models'
## Models
FreeSewing's **models** package bundles measurements for a set of
_models_ which are used to test FreeSewing's designs.
It is published on NPM as [@freesewing/models
](https://www.npmjs.com/package/@freesewing/models).\
The source code for this package is available in [our monorepo on Codeberg
](https://codeberg.org/freesewing/freesewing) under [packages/models
](https://codeberg.org/freesewing/freesewing/src/branch/develop/packages/models).
:::note
This package does not provide a default export.
:::
## Installation
```sh
npm install --save @freesewing/models
```
## About the models
Models have names like `cisFemaleAdult34`, `cisMaleDoll30`,
and `cisFemaleGiant150`.
These names are constructed according to the 3 aspects that make up the model:
1. Gender: `cisFemale` or `cisMale`
2. Group: `Adult`, `Doll`, or `Giant`
3. Size: a number
- For Adult models, the size number is the neck circumference in millimeters, Example: `34` for 34 mm.
- For Doll and Giant models, the size number is a whole number which is the percentage to scale a base model. Examples: '30' for a 30% size reduction for a doll, and '150' for a 150% size increase for a giant.
- For Doll and Giant models, the size number is a whole number which is the percentage to scale a base model. Examples:
- `30` for a 30% size reduction for a doll
- `150` for a 150% size increase for a giant
## Available models
### Available models
Available models are:
- cisFemaleAdult sizes 28, 30, 32, 34, 36, 38, 40, 42, 44, 46
- cisMaleAdult sizes 32, 34, 36, 38, 40, 42, 44, 46, 48, 50
- cisFemaleDoll sizes 10, 20, 30, 40, 50, 60
- cisMaleDoll sizes 10, 20, 30, 40, 50, 60
- cisFemaleGiant sizes 150, 200, 250, 300
- cisMaleGiant sizes 150, 200, 250, 300
- cisFemaleAdult: sizes 28, 30, 32, 34, 36, 38, 40, 42, 44, and 46
- cisMaleAdult: sizes 32, 34, 36, 38, 40, 42, 44, 46, 48, and 50
- cisFemaleDoll: sizes 10, 20, 30, 40, 50, and 60
- cisMaleDoll: sizes 10, 20, 30, 40, 50, and 60
- cisFemaleGiant: sizes 150, 200, 250, and 300
- cisMaleGiant: sizes 150, 200, 250, and 300
## Exports
## Named Exports
models: Objects with key-value pairs, with measurement name keys and measurement value (in mm) values.
### adult
`measurements`: Array of measurement name strings.
See [Measurements](/reference/measurements) for a list of measurement names.
`group` Array of the model group name strings (`adult`, `doll`, `giant`).
`sizes` Object with key-value pairs, with genderGroup keys and values that are Arrays of size numbers available for each genderGroup.
genderGroups: Each genderGroup is an object of key-value pairs, with size keys and model values.
Available genderGroups: `cisFemaleAdult`, `cisMaleAdult`, `cisFemaleDoll`, `cisMaleDoll`, `cisFemaleGiant`, `cisMaleGiant`.
groups: Each group is an object of key-value pairs, with gender keys and genderGroup values.
Available groups: `adult`, `doll`, `giant`.
## Installation
```sh
npm install @freesewing/models
```
## Example
In NodeJS:
```js
import { cisMaleAdult38 } from @freesewing/models
```
which will give you an object with measurement: value pairs.
The example above gives you:
An object holding all adult models.
```js
{
ankle: 235,
biceps: 350,
bustFront: 560,
bustPointToUnderbust: 60,
bustSpan: 190,
chesT: 1000,
crossSeam: 870
crossSeamFront: 410,
crotchDepth: 340,
heel, 360,
head: 590,
...
}
import { adults } from '@freesewing/models'
```
## Units
<ConsoleButton data={all.adult} />
All measurements are in mm.
### cisFemaleAdult
An object holding all cisfemale adult models.
```js
import { cisFemaleAdult } from '@freesewing/models'
```
<ConsoleButton data={all.cisFemaleAdult} />
### cisFemaleAdult28
An object holding the cisfemale adult size 28 model.
```js
import { cisFemaleAdult28 } from '@freesewing/models'
```
<ConsoleButton data={all.cisFemaleAdult28} />
### cisFemaleAdult30
An object holding the cisfemale adult size 30 model.
```js
import { cisFemaleAdult30 } from '@freesewing/models'
```
<ConsoleButton data={all.cisFemaleAdult30} />
### cisFemaleAdult32
An object holding the cisfemale adult size 32 model.
```js
import { cisFemaleAdult32 } from '@freesewing/models'
```
<ConsoleButton data={all.cisFemaleAdult32} />
### cisFemaleAdult34
An object holding the cisfemale adult size 34 model.
```js
import { cisFemaleAdult34 } from '@freesewing/models'
```
<ConsoleButton data={all.cisFemaleAdult34} />
### cisFemaleAdult36
An object holding the cisfemale adult size 36 model.
```js
import { cisFemaleAdult36 } from '@freesewing/models'
```
<ConsoleButton data={all.cisFemaleAdult36} />
### cisFemaleAdult38
An object holding the cisfemale adult size 38 model.
```js
import { cisFemaleAdult38 } from '@freesewing/models'
```
<ConsoleButton data={all.cisFemaleAdult38} />
### cisFemaleAdult40
An object holding the cisfemale adult size 40 model.
```js
import { cisFemaleAdult40 } from '@freesewing/models'
```
<ConsoleButton data={all.cisFemaleAdult40} />
### cisFemaleAdult42
An object holding the cisfemale adult size 42 model.
```js
import { cisFemaleAdult42 } from '@freesewing/models'
```
<ConsoleButton data={all.cisFemaleAdult42} />
### cisFemaleAdult44
An object holding the cisfemale adult size 44 model.
```js
import { cisFemaleAdult44 } from '@freesewing/models'
```
<ConsoleButton data={all.cisFemaleAdult44} />
### cisFemaleAdult46
An object holding the cisfemale adult size 46 model.
```js
import { cisFemaleAdult46 } from '@freesewing/models'
```
<ConsoleButton data={all.cisFemaleAdult46} />
### cisFemaleDoll
An object holding all cisfemale doll models.
```js
import { cisFemaleDoll } from '@freesewing/models'
```
<ConsoleButton data={all.cisFemaleDoll} />
### cisFemaleDoll10
An object holding the cisfemale doll size 10 model.
```js
import { cisFemaleDoll10 } from '@freesewing/models'
```
<ConsoleButton data={all.cisFemaleDoll10} />
### cisFemaleDoll20
An object holding the cisfemale doll size 20 model.
```js
import { cisFemaleDoll20 } from '@freesewing/models'
```
<ConsoleButton data={all.cisFemaleDoll20} />
### cisFemaleDoll30
An object holding the cisfemale doll size 30 model.
```js
import { cisFemaleDoll30 } from '@freesewing/models'
```
<ConsoleButton data={all.cisFemaleDoll30} />
### cisFemaleDoll40
An object holding the cisfemale doll size 40 model.
```js
import { cisFemaleDoll40 } from '@freesewing/models'
```
<ConsoleButton data={all.cisFemaleDoll40} />
### cisFemaleDoll50
An object holding the cisfemale doll size 50 model.
```js
import { cisFemaleDoll50 } from '@freesewing/models'
```
<ConsoleButton data={all.cisFemaleDoll50} />
### cisFemaleDoll60
An object holding the cisfemale doll size 60 model.
```js
import { cisFemaleDoll60 } from '@freesewing/models'
```
<ConsoleButton data={all.cisFemaleDoll60} />
### cisFemaleGiant
An object holding all cisfemale giant models.
```js
import { cisFemaleGiant } from '@freesewing/models'
```
<ConsoleButton data={all.cisFemaleGiant} />
### cisFemaleGiant150
An object holding the cisfemale giant size 150 model.
```js
import { cisFemaleGiant150 } from '@freesewing/models'
```
<ConsoleButton data={all.cisFemaleGiant150} />
### cisFemaleGiant200
An object holding the cisfemale giant size 200 model.
```js
import { cisFemaleGiant200 } from '@freesewing/models'
```
<ConsoleButton data={all.cisFemaleGiant200} />
### cisFemaleGiant250
An object holding the cisfemale giant size 250 model.
```js
import { cisFemaleGiant250 } from '@freesewing/models'
```
<ConsoleButton data={all.cisFemaleGiant250} />
### cisFemaleGiant300
An object holding the cisfemale giant size 300 model.
```js
import { cisFemaleGiant300 } from '@freesewing/models'
```
<ConsoleButton data={all.cisFemaleGiant300} />
### cisMaleAdult
An object holding all cismale adult models.
```js
import { cisMaleAdult } from '@freesewing/models'
```
<ConsoleButton data={all.cisMaleAdult} />
### cisMaleAdult32
An object holding the cismale adult size 32 model.
```js
import { cisMaleAdult32 } from '@freesewing/models'
```
<ConsoleButton data={all.cisMaleAdult32} />
### cisMaleAdult34
An object holding the cismale adult size 34 model.
```js
import { cisMaleAdult34 } from '@freesewing/models'
```
<ConsoleButton data={all.cisMaleAdult34} />
### cisMaleAdult36
An object holding the cismale adult size 36 model.
```js
import { cisMaleAdult36 } from '@freesewing/models'
```
<ConsoleButton data={all.cisMaleAdult36} />
### cisMaleAdult38
An object holding the cismale adult size 38 model.
```js
import { cisMaleAdult38 } from '@freesewing/models'
```
<ConsoleButton data={all.cisMaleAdult38} />
### cisMaleAdult40
An object holding the cismale adult size 40 model.
```js
import { cisMaleAdult40 } from '@freesewing/models'
```
<ConsoleButton data={all.cisMaleAdult40} />
### cisMaleAdult42
An object holding the cismale adult size 42 model.
```js
import { cisMaleAdult42 } from '@freesewing/models'
```
<ConsoleButton data={all.cisMaleAdult42} />
### cisMaleAdult44
An object holding the cismale adult size 44 model.
```js
import { cisMaleAdult44 } from '@freesewing/models'
```
<ConsoleButton data={all.cisMaleAdult44} />
### cisMaleAdult46
An object holding the cismale adult size 46 model.
```js
import { cisMaleAdult46 } from '@freesewing/models'
```
<ConsoleButton data={all.cisMaleAdult46} />
### cisMaleAdult48
An object holding the cismale adult size 48 model.
```js
import { cisMaleAdult48 } from '@freesewing/models'
```
<ConsoleButton data={all.cisMaleAdult48} />
### cisMaleAdult50
An object holding the cismale adult size 50 model.
```js
import { cisMaleAdult50 } from '@freesewing/models'
```
<ConsoleButton data={all.cisMaleAdult50} />
### cisMaleDoll
An object holding all cismale doll models.
```js
import { cisMaleDoll } from '@freesewing/models'
```
<ConsoleButton data={all.cisMaleDoll} />
### cisMaleDoll10
An object holding the cismale doll size 10 model.
```js
import { cisMaleDoll10 } from '@freesewing/models'
```
<ConsoleButton data={all.cisMaleDoll10} />
### cisMaleDoll20
An object holding the cismale doll size 20 model.
```js
import { cisMaleDoll20 } from '@freesewing/models'
```
<ConsoleButton data={all.cisMaleDoll20} />
### cisMaleDoll30
An object holding the cismale doll size 30 model.
```js
import { cisMaleDoll30 } from '@freesewing/models'
```
<ConsoleButton data={all.cisMaleDoll30} />
### cisMaleDoll40
An object holding the cismale doll size 40 model.
```js
import { cisMaleDoll40 } from '@freesewing/models'
```
<ConsoleButton data={all.cisMaleDoll40} />
### cisMaleDoll50
An object holding the cismale doll size 50 model.
```js
import { cisMaleDoll50 } from '@freesewing/models'
```
<ConsoleButton data={all.cisMaleDoll50} />
### cisMaleDoll60
An object holding the cismale doll size 60 model.
```js
import { cisMaleDoll60 } from '@freesewing/models'
```
<ConsoleButton data={all.cisMaleDoll60} />
### cisMaleGiant
An object holding all models.
```js
import { cisMaleGiant } from '@freesewing/models'
```
<ConsoleButton data={all.cisMaleGiant} />
### cisMaleGiant150
An object holding the cismale giant size 150 model.
```js
import { cisMaleGiant150 } from '@freesewing/models'
```
<ConsoleButton data={all.cisMaleGiant150} />
### cisMaleGiant200
An object holding the cismale giant size 200 model.
```js
import { cisMaleGiant200 } from '@freesewing/models'
```
<ConsoleButton data={all.cisMaleGiant200} />
### cisMaleGiant250
An object holding the cismale giant size 250 model.
```js
import { cisMaleGiant250 } from '@freesewing/models'
```
<ConsoleButton data={all.cisMaleGiant250} />
### cisMaleGiant300
An object holding the cismale giant size 300 model.
```js
import { cisMaleGiant300 } from '@freesewing/models'
```
<ConsoleButton data={all.cisMaleGiant300} />
### doll
An object holding all doll models.
```js
import { doll } from '@freesewing/models'
```
<ConsoleButton data={all.doll} />
### giant
An object holding all giant models.
```js
import { giant } from '@freesewing/models'
```
<ConsoleButton data={all.giant} />
### groups
An array with the different types of model groups.
```js
import { groups } from '@freesewing/models'
```
<ConsoleButton data={all.groups} />
### measurements
Holds an array of (the IDs of) all measurements used by FreeSewing designs.
```js
import { measurements } from '@freesewing/models'
```
<ConsoleButton data={all.measurements} />
### sizes
Holds an object with the various available sizes, grouped by model type.
```js
import { sizes } from '@freesewing/models'
```
<ConsoleButton data={all.sizes} />
## Notes
These model measurement values were arbitrarily chosen by FreeSewing.
They do __not__ correspond to any existing statistical data or
They do **not** correspond to any existing statistical data or
official size charts.
You should not expect that these models will produce garments that fit
the same as clothing store sizes.
@ -98,5 +584,3 @@ the base values using a mathematical formula which scales and adjusts
the values.
The mathematical formula is designed to produce approximate measurements
which are realistic enough to be useful.
[1]: https://www.npmjs.com/package/@freesewing/models

29
sites/dev/docs/reference/packages/new-design/readme.mdx
View file

@ -1,29 +0,0 @@
---
title: new-design
---
Published as [@freesewing/new-design][1], this is an
initializer package for a new FreeSewing design.
## Usage
```sh
npx @freesewing/new-design
```
## Notes
The package will run an interactive script and install a standalone
development environment which can be used to develop and test a new
FreeSewing design and to generate patterns from that design.
:::note RELATED
Please see our
[Getting Started tutorial](/tutorials/getting-started-linux/dev-setup#stand-alone-development)
for more information about how to set up and start the standalone
development environment.
:::
[1]: https://www.npmjs.com/package/@freesewing/new-design

32
sites/dev/docs/reference/packages/prettier-config/readme.mdx
View file

@ -1,19 +1,21 @@
---
title: prettier-config
title: '@freesewing/prettier-config'
---
Published as [@freesewing/prettier-config][1], this package is
FreeSewing's shared configuration for [Prettier](https://prettier.io/).
FreeSewing's **prettier-config** package holds FreeSewing's preferred
configuration for the [Prettier](https://prettier.io/) code formatter.
## Installation
```sh
npm install @freesewing/prettier-config
```
It is published on NPM as [@freesewing/prettier-config
](https://www.npmjs.com/package/@freesewing/prettier-config).\
The source code for this package is available in [our monorepo on Codeberg
](https://codeberg.org/freesewing/freesewing) under [packages/prettier-config
](https://codeberg.org/freesewing/freesewing/src/branch/develop/packages/prettier-config).
## Usage
Edit package.json:
This package only provides a default export, which is a JSON file.
To use it, do not install it, but instead update you `package.json` file as such:
```json
{
@ -26,12 +28,12 @@ Edit package.json:
The Prettier options configured by this package:
| Option | Value |
|--------|-------|
| semi | `false` |
| singleQuote | `true` |
| trailingComma | "es5" |
| printWidth | 100 |
| Option | Value |
| ------------- | ------- |
| semi | `false` |
| singleQuote | `true` |
| trailingComma | "es5" |
| printWidth | 100 |
:::note RELATED

38
sites/dev/docs/reference/packages/react-components/readme.mdx
View file

@ -1,38 +0,0 @@
---
title: react-components
---
Published as [@freesewing/react-components][1], this package provides
various React components to render FreeSewing patterns, as well as
some utilities to facilitate frontend integration.
## Exports
FreeSewing uses named exports, and below is a list of all exports:
- `Pattern`: Renders a FreeSewing pattern
- `Svg`: Renders the svg section of a FreeSewing pattern
- `Defs`: Renders the defs of a FreeSewing pattern
- `Group`: Renders an SVG group of a FreeSewing pattern
- `Stack`: Renders a stack of a FreeSewing pattern
- `Part`: Renders a part of a FreeSewing pattern
- `Point`: Renders a point of a FreeSewing pattern
- `Path`: Renders a path of a FreeSewing pattern
- `Snippet`: Renders a snippet of a FreeSewing pattern
- `Grid`: Renders the grid of a FreeSewing pattern
- `Text`: Renders text of a FreeSewing pattern
- `TextOnPath`: Renders text on path of a FreeSewing pattern
- `PatternXray`: Renders the Xray/inspector variant of a FreeSewing pattern
- `utils`: A plain object holding the following utilities:
- `getProps`
- `withinPartBounds`
- `getId`
- `translateStrings`
## Installation
```sh
npm install @freesewing/react-components
```
[1]: https://www.npmjs.com/package/@freesewing/react-components

7
sites/dev/docs/reference/packages/react/components/account/readme.mdx Normal file
View file

@ -0,0 +1,7 @@
---
title: Account
---
:::note
This page is yet to be created
:::

7
sites/dev/docs/reference/packages/react/components/admin/readme.mdx Normal file
View file

@ -0,0 +1,7 @@
---
title: Admin
---
:::note
This page is yet to be created
:::

7
sites/dev/docs/reference/packages/react/components/breadcrumbs/readme.mdx Normal file
View file

@ -0,0 +1,7 @@
---
title: Breadcrumbs
---
:::note
This page is yet to be created
:::

7
sites/dev/docs/reference/packages/react/components/button/readme.mdx Normal file
View file

@ -0,0 +1,7 @@
---
title: Button
---
:::note
This page is yet to be created
:::

7
sites/dev/docs/reference/packages/react/components/collection/readme.mdx Normal file
View file

@ -0,0 +1,7 @@
---
title: Collection
---
:::note
This page is yet to be created
:::

7
sites/dev/docs/reference/packages/react/components/control/readme.mdx Normal file
View file

@ -0,0 +1,7 @@
---
title: Control
---
:::note
This page is yet to be created
:::

7
sites/dev/docs/reference/packages/react/components/copytoclipboardbutton/readme.mdx Normal file
View file

@ -0,0 +1,7 @@
---
title: CopyToClipboardButton
---
:::note
This page is yet to be created
:::

7
sites/dev/docs/reference/packages/react/components/curatedset/readme.mdx Normal file
View file

@ -0,0 +1,7 @@
---
title: CuratedSet
---
:::note
This page is yet to be created
:::

7
sites/dev/docs/reference/packages/react/components/design/readme.mdx Normal file
View file

@ -0,0 +1,7 @@
---
title: Design
---
:::note
This page is yet to be created
:::

7
sites/dev/docs/reference/packages/react/components/diffviewer/readme.mdx Normal file
View file

@ -0,0 +1,7 @@
---
title: DiffViewer
---
:::note
This page is yet to be created
:::

7
sites/dev/docs/reference/packages/react/components/docusaurus/readme.mdx Normal file
View file

@ -0,0 +1,7 @@
---
title: Docusaurus
---
:::note
This page is yet to be created
:::

7
sites/dev/docs/reference/packages/react/components/echart/readme.mdx Normal file
View file

@ -0,0 +1,7 @@
---
title: Echart
---
:::note
This page is yet to be created
:::

7
sites/dev/docs/reference/packages/react/components/editor/readme.mdx Normal file
View file

@ -0,0 +1,7 @@
---
title: Editor
---
:::note
This page is yet to be created
:::

7
sites/dev/docs/reference/packages/react/components/heading/readme.mdx Normal file
View file

@ -0,0 +1,7 @@
---
title: Heading
---
:::note
This page is yet to be created
:::

7
sites/dev/docs/reference/packages/react/components/highlight/readme.mdx Normal file
View file

@ -0,0 +1,7 @@
---
title: Highlight
---
:::note
This page is yet to be created
:::

7
sites/dev/docs/reference/packages/react/components/icon/readme.mdx Normal file
View file

@ -0,0 +1,7 @@
---
title: Icon
---
:::note
This page is yet to be created
:::

7
sites/dev/docs/reference/packages/react/components/input/readme.mdx Normal file
View file

@ -0,0 +1,7 @@
---
title: Input
---
:::note
This page is yet to be created
:::

7
sites/dev/docs/reference/packages/react/components/json/readme.mdx Normal file
View file

@ -0,0 +1,7 @@
---
title: Json
---
:::note
This page is yet to be created
:::

7
sites/dev/docs/reference/packages/react/components/keyval/readme.mdx Normal file
View file

@ -0,0 +1,7 @@
---
title: KeyVal
---
:::note
This page is yet to be created
:::

7
sites/dev/docs/reference/packages/react/components/layout/readme.mdx Normal file
View file

@ -0,0 +1,7 @@
---
title: Layout
---
:::note
This page is yet to be created
:::

7
sites/dev/docs/reference/packages/react/components/linedrawing/readme.mdx Normal file
View file

@ -0,0 +1,7 @@
---
title: Linedrawing
---
:::note
This page is yet to be created
:::

7
sites/dev/docs/reference/packages/react/components/link/readme.mdx Normal file
View file

@ -0,0 +1,7 @@
---
title: Link
---
:::note
This page is yet to be created
:::

7
sites/dev/docs/reference/packages/react/components/logo/readme.mdx Normal file
View file

@ -0,0 +1,7 @@
---
title: Logo
---
:::note
This page is yet to be created
:::

7
sites/dev/docs/reference/packages/react/components/markdown/readme.mdx Normal file
View file

@ -0,0 +1,7 @@
---
title: Markdown
---
:::note
This page is yet to be created
:::

7
sites/dev/docs/reference/packages/react/components/mini/readme.mdx Normal file
View file

@ -0,0 +1,7 @@
---
title: Mini
---
:::note
This page is yet to be created
:::

7
sites/dev/docs/reference/packages/react/components/modal/readme.mdx Normal file
View file

@ -0,0 +1,7 @@
---
title: Modal
---
:::note
This page is yet to be created
:::

7
sites/dev/docs/reference/packages/react/components/new/readme.mdx Normal file
View file

@ -0,0 +1,7 @@
---
title: New
---
:::note
This page is yet to be created
:::

7
sites/dev/docs/reference/packages/react/components/newsletter/readme.mdx Normal file
View file

@ -0,0 +1,7 @@
---
title: Newsletter
---
:::note
This page is yet to be created
:::

7
sites/dev/docs/reference/packages/react/components/null/readme.mdx Normal file
View file

@ -0,0 +1,7 @@
---
title: 'Null'
---
:::note
This page is yet to be created
:::

7
sites/dev/docs/reference/packages/react/components/number/readme.mdx Normal file
View file

@ -0,0 +1,7 @@
---
title: Number
---
:::note
This page is yet to be created
:::

7
sites/dev/docs/reference/packages/react/components/patrons/readme.mdx Normal file
View file

@ -0,0 +1,7 @@
---
title: Patrons
---
:::note
This page is yet to be created
:::

7
sites/dev/docs/reference/packages/react/components/pattern/readme.mdx Normal file
View file

@ -0,0 +1,7 @@
---
title: Pattern
---
:::note
This page is yet to be created
:::

7
sites/dev/docs/reference/packages/react/components/popout/readme.mdx Normal file
View file

@ -0,0 +1,7 @@
---
title: Popout
---
:::note
This page is yet to be created
:::

7
sites/dev/docs/reference/packages/react/components/profile/readme.mdx Normal file
View file

@ -0,0 +1,7 @@
---
title: Profile
---
:::note
This page is yet to be created
:::

74
sites/dev/docs/reference/packages/react/components/readme.mdx Normal file
View file

@ -0,0 +1,74 @@
---
title: React Components
---
The React components provided by the
[@freesewing/react](/reference/packages/react/) package are grouped by
_component family_.
For each family, the import structure is the same:
```js
import { Component } from '@freesewing/react/components/Family'
```
Click on any component family to see which components they provide:
<ReadMore />
- [components/Account](/reference/packages/react/components/account/)
- [components/Admin](/reference/packages/react/components/admin/)
- [components/Breadcrumbs](/reference/packages/react/components/breadcrumbs/)
- [components/Button](/reference/packages/react/components/button/)
- [components/Collection](/reference/packages/react/components/collection/)
- [components/Control](/reference/packages/react/components/control/)
- [components/CopyToClipboardButton](/reference/packages/react/components/copytoclipboardbutton/)
- [components/CuratedSet](/reference/packages/react/components/curatedset/)
- [components/Design](/reference/packages/react/components/design/)
- [components/DiffViewer](/reference/packages/react/components/diffviewer/)
- [components/Docusaurus](/reference/packages/react/components/docusaurus/)
- [components/Echart](/reference/packages/react/components/echart/)
- [components/Editor](/reference/packages/react/components/editor/)
- [components/Heading](/reference/packages/react/components/heading/)
- [components/Highlight](/reference/packages/react/components/highlight/)
- [components/Icon](/reference/packages/react/components/icon/)
- [components/Input](/reference/packages/react/components/input/)
- [components/Json](/reference/packages/react/components/json/)
- [components/KeyVal](/reference/packages/react/components/keyval/)
- [components/Layout](/reference/packages/react/components/layout/)
- [components/LineDrawing](/reference/packages/react/components/linedrawing/)
- [components/Link](/reference/packages/react/components/link/)
- [components/Logo](/reference/packages/react/components/logo/)
- [components/Markdown](/reference/packages/react/components/markdown/)
- [components/Mini](/reference/packages/react/components/mini/)
- [components/Modal](/reference/packages/react/components/modal/)
- [components/New](/reference/packages/react/components/new/)
- [components/Newsletter](/reference/packages/react/components/newsletter/)
- [components/Null](/reference/packages/react/components/null/)
- [components/Number](/reference/packages/react/components/number/)
- [components/Pattern](/reference/packages/react/components/pattern/)
- [components/Patrons](/reference/packages/react/components/patrons/)
- [components/Popout](/reference/packages/react/components/popout/)
- [components/Profile](/reference/packages/react/components/profile/)
- [components/Role](/reference/packages/react/components/role/)
- [components/SignIn](/reference/packages/react/components/signin/)
- [components/SignUp](/reference/packages/react/components/signup/)
- [components/Spinner](/reference/packages/react/components/spinner/)
- [components/Stats](/reference/packages/react/components/stats/)
- [components/Tab](/reference/packages/react/components/tab/)
- [components/Table](/reference/packages/react/components/table/)
- [components/Time](/reference/packages/react/components/time/)
- [components/Uuid](/reference/packages/react/components/uuid/)
- [components/Ux](/reference/packages/react/components/ux/)
- [components/Yaml](/reference/packages/react/components/yaml/)
- [components/Xray](/reference/packages/react/components/xray/)
## Context
- context/LoadingStatus](/reference/packages/react": "./context/LoadingStatus/index.mjs",
## Names exports
- linedrawings](/reference/packages/react": "./src/linedrawings/index.mjs",
- pattern](/reference/packages/react": "./src/pattern/index.mjs",
- xray](/reference/packages/react": "./src/pattern-xray/index.mjs",

7
sites/dev/docs/reference/packages/react/components/role/readme.mdx Normal file
View file

@ -0,0 +1,7 @@
---
title: Role
---
:::note
This page is yet to be created
:::

7
sites/dev/docs/reference/packages/react/components/signin/readme.mdx Normal file
View file

@ -0,0 +1,7 @@
---
title: SignIn
---
:::note
This page is yet to be created
:::

7
sites/dev/docs/reference/packages/react/components/signup/readme.mdx Normal file
View file

@ -0,0 +1,7 @@
---
title: SignUp
---
:::note
This page is yet to be created
:::

7
sites/dev/docs/reference/packages/react/components/spinner/readme.mdx Normal file
View file

@ -0,0 +1,7 @@
---
title: Spinner
---
:::note
This page is yet to be created
:::

7
sites/dev/docs/reference/packages/react/components/stats/readme.mdx Normal file
View file

@ -0,0 +1,7 @@
---
title: Stats
---
:::note
This page is yet to be created
:::

7
sites/dev/docs/reference/packages/react/components/tab/readme.mdx Normal file
View file

@ -0,0 +1,7 @@
---
title: Tab
---
:::note
This page is yet to be created
:::

7
sites/dev/docs/reference/packages/react/components/table/readme.mdx Normal file
View file

@ -0,0 +1,7 @@
---
title: Table
---
:::note
This page is yet to be created
:::

7
sites/dev/docs/reference/packages/react/components/time/readme.mdx Normal file
View file

@ -0,0 +1,7 @@
---
title: Time
---
:::note
This page is yet to be created
:::

7
sites/dev/docs/reference/packages/react/components/uuid/readme.mdx Normal file
View file

@ -0,0 +1,7 @@
---
title: Uuid
---
:::note
This page is yet to be created
:::

7
sites/dev/docs/reference/packages/react/components/ux/readme.mdx Normal file
View file

@ -0,0 +1,7 @@
---
title: Ux
---
:::note
This page is yet to be created
:::

7
sites/dev/docs/reference/packages/react/components/xray/readme.mdx Normal file
View file

@ -0,0 +1,7 @@
---
title: Xray
---
:::note
This page is yet to be created
:::

7
sites/dev/docs/reference/packages/react/components/yaml/readme.mdx Normal file
View file

@ -0,0 +1,7 @@
---
title: Yaml
---
:::note
This page is yet to be created
:::

7
sites/dev/docs/reference/packages/react/context/loadingstatus/readme.mdx Normal file
View file

@ -0,0 +1,7 @@
---
title: LoadingStatusContext
---
:::note
This page is yet to be created
:::

7
sites/dev/docs/reference/packages/react/context/modal/readme.mdx Normal file
View file

@ -0,0 +1,7 @@
---
title: ModalContext
---
:::note
This page is yet to be created
:::

8
sites/dev/docs/reference/packages/react/context/readme.mdx Normal file
View file

@ -0,0 +1,8 @@
---
title: React Context
---
The React context provided by the
[@freesewing/react](/reference/packages/react/) package are:
<ReadMore />

8
sites/dev/docs/reference/packages/react/hooks/readme.mdx Normal file
View file

@ -0,0 +1,8 @@
---
title: React Hooks
---
The React hooks provided by the
[@freesewing/react](/reference/packages/react/) package are:
<ReadMore />

7
sites/dev/docs/reference/packages/react/hooks/useaccount/readme.mdx Normal file
View file

@ -0,0 +1,7 @@
---
title: useAccount
---
:::note
This page is yet to be created
:::

7
sites/dev/docs/reference/packages/react/hooks/usebackend/readme.mdx Normal file
View file

@ -0,0 +1,7 @@
---
title: useBackend
---
:::note
This page is yet to be created
:::

7
sites/dev/docs/reference/packages/react/hooks/usecontrol/readme.mdx Normal file
View file

@ -0,0 +1,7 @@
---
title: useControl
---
:::note
This page is yet to be created
:::

7
sites/dev/docs/reference/packages/react/hooks/usedesign/readme.mdx Normal file
View file

@ -0,0 +1,7 @@
---
title: useDesign
---
:::note
This page is yet to be created
:::

7
sites/dev/docs/reference/packages/react/hooks/usedesigntranslation/readme.mdx Normal file
View file

@ -0,0 +1,7 @@
---
title: useDesignTranslation
---
:::note
This page is yet to be created
:::

7
sites/dev/docs/reference/packages/react/hooks/useselection/readme.mdx Normal file
View file

@ -0,0 +1,7 @@
---
title: useSelection
---
:::note
This page is yet to be created
:::

7
sites/dev/docs/reference/packages/react/hooks/usestateobject/readme.mdx Normal file
View file

@ -0,0 +1,7 @@
---
title: useStateObject
---
:::note
This page is yet to be created
:::

8
sites/dev/docs/reference/packages/react/lib/readme.mdx Normal file
View file

@ -0,0 +1,8 @@
---
title: React Library
---
The utility methods provided by the
[@freesewing/react](/reference/packages/react/) package are:
<ReadMore />

38
sites/dev/docs/reference/packages/react/readme.mdx Normal file
View file

@ -0,0 +1,38 @@
---
title: '@freesewing/react'
---
FreeSewing's **react** package bundles React components, hooks, and context
used to build the FreeSewing frontends.
It is published on NPM as [@freesewing/react
](https://www.npmjs.com/package/@freesewing/react).\
The source code for this package is available in [our monorepo on Codeberg
](https://codeberg.org/freesewing/freesewing) under [packages/react
](https://codeberg.org/freesewing/freesewing/src/branch/develop/packages/react).
:::warning INTERNAL TO FREESEWING
This package is considered internal to FreeSewing.\
You are free to use this package, but FreeSewing does not guarantee semantic versioning
on this package.
In other words, FreeSewing may introduce breaking changes in minor or even
patch updates of this package.
:::
:::note
This package does not provide a default export.
:::
## Installation
```sh
npm install --save @freesewing/react
```
## Named Exports
As this is a rather large package, documentation of the things it provides are
split up over various sections:
<ReadMore />

74
sites/dev/docs/reference/packages/rehype-highlight-lines/readme.mdx
View file

@ -1,74 +0,0 @@
---
title: rehype-highlight-lines
---
Published as [@freesewing/rehype-highlight-lines][1], this package provides
a [Rehype](https://github.com/rehypejs/rehype)
plugin to format highlighted and struck-out lines in code blocks.
## Installation
```sh
npm install @freesewing/rehype-highlight-lines
```
## Usage
In NodeJS:
```js
import rehypeHighlightLines from @freesewing/rehype-highlight-lines
...
rehypePlugins: [
[
rehypeHighlightLines,
{
highlightClass: ['highlight-lines', 'border-l-4'],
strikeoutClass: [
'strikeout-lines',
'bg-orange-300',
'bg-opacity-5',
'border-l-4',
'opacity-80',
'line-through',
'decoration-orange-500',
],
},
],
],
```
### Example
```js
// These 3 lines will be highlighted:
// highlight-start
const a = 1
const b = 2
const c = 3
// highlight-end
const d = 4
// These 2 lines will be struck out:
// strikeout-start
const e = 5
const f = 6
// strikeout-end
```
## Configuration
| Property | Type | Default | Description |
|----------|------|---------|-------|
| commentTag | String | 'span' | Tag that identifies a comment. |
| commentClass | String | 'hljs-comment' | CSS class that identifies a comment.|
| openingCommentHighlight | String | 'highlight-start' | Comment text to start formatting lines as highlighted. |
| closingCommentHighlight | String | 'highlight-end' | Comment text to stop formatting lines as highlighted. |
| openingCommentStrikeout | String | 'strikeout-start' | Comment text to start formatting lines as struck-out. |
| closingCommentStrikeout | String | 'strikeout-end' | Comment text to stop formatting lines as struck-out. |
| highlightTag | String | 'section' | Tag to apply to the block of highlighted or struck-out lines. |
| highlightClass | Array|String | 'highlight-lines' | CSS classes to apply to highlighted lines. |
| strikeoutClass | Array|String | 'strikeout-lines' | CSS classes to apply to struck-out lines. |
| swallow | Boolean | `true` | Remove extra linebreaks before the start of highlighted/struck-out lines. |
[1]: https://www.npmjs.com/package/@freesewing/rehype-highlight-lines

76
sites/dev/docs/reference/packages/rehype-jargon/readme.mdx
View file

@ -1,76 +0,0 @@
---
title: rehype-jargon
---
Published as [@freesewing/rehype-jargon][1], this package provides
a [Rehype](https://github.com/rehypejs/rehype)
plugin for adding HTML markup for jargon terms.
It allows you to use jargon in your markdown/mdx/html content and use
a centrally managed file of jargon terms and their definitions.
## Installation
```sh
npm install @freesewing/rehype-jargon
```
## Usage
In file `jargon.mjs`:
```js
export const jargon = {
term: '<b>term</b> has this description',
term2: 'A <i>differenti</i> description',
}
```
In NodeJS:
```js
import rehypeJargon from @freesewing/rehype-jargon
import { jargon } from './jargon.mjs'
...
rehypePlugins: [
[rehypeJargon, { jargon: jargon }],
],
```
### Example
Here is an example of _jargon_ in markdown.
## Configuration
| Property | Type | Default | Description |
|----------|------|---------|-------|
| jargon | Object | | Key/Value pairs where the key is a jargon term and the value is the jargon description. The description is a string that can contain HTML tags. Required. |
| transform | Function | (see below) | Given the jargon term and description, returns a string with the final HTML to output. |
### Default transform function
The default `transform` function is:
```js
(term, html) =>
`<span class="jargon-term">${term}<span class="jargon-info">${html}</span></span>`
```
The default `transform` function applies these CSS classes:
- `jargon-term` is applied to jargon terms
- `jargon-info` is applied to jargon descriptions
You can style your jargon by adding styles to these CSS classes.
## Notes
- Markup will be added to jargon only if the terms are _emphasized_.
- Keys should be in all lowercase characters in the jargon file.
This is because terms are converted to lowercase before they are matched
against the jargon file.
- How terms are capitalized does not matter, for the same reason.
- If you use HTML in your jargon descriptions, use only inline elements such as adding bold/italic formatting and inserting links.
[1]: https://www.npmjs.com/package/@freesewing/rehype-jargon

90
sites/dev/docs/reference/packages/snapseries/readme.mdx
View file

@ -1,15 +1,33 @@
---
title: snapseries
title: '@freesewing/snapseries'
---
Published as [@freesewing/snapseries][1], this package provides series
of common sizes for elastics and zippers and series of common intervals
to be used with snapped percentage options.
import * as all from '@freesewing/snapseries'
## Exports
FreeSewing's **snapseries** package provides data for FreeSewing's [snapped
percentage options](reference/api/part/config/options/pct/snap/).
It is published on NPM as [@freesewing/snapseries
](https://www.npmjs.com/package/@freesewing/snapseries).\
The source code for this package is available in [our monorepo on Codeberg
](https://codeberg.org/freesewing/freesewing) under [packages/snapseries
](https://codeberg.org/freesewing/freesewing/src/branch/develop/packages/snapseries).
:::note
This package does not provide a default export.
:::
## Installation
```sh
npm install --save @freesewing/snapseries
```
## Notes
All exports are plain objects with `metric` and `imperial` properties
that can be used as the `snap` property for snapped percentage options.
All measurements are in mm.
Some exports have `metric` and `imperial` properties that are
arrays of numbers.
@ -26,36 +44,54 @@ These exports and properties are:
- `steps`: Intervals of 5 mm or 1/8 inch
- `bigSteps`: Intervals of 10 mm or 1/2 inch
## Installation
## Named Exports
```sh
npm install @freesewing/snapseries
```
### bigSteps
## Example
Holds configuration for snapped percentage options in big steps, which is 1cm or 1/2 inch.
In NodeJS:
```js
import { elastics } from @freesewing/snapseries
myOption: {
pct: 10,
min: 5
max: 35,
snap: elasitcs,
}
import { bigSteps } from '@freesewing/snapseries'
```
## Units
<ConsoleButton data={all.bigSteps} />
All measurements are in mm.
### elastics
:::note RELATED
Holds configuration for snapped percentage options for commons sizes of elastic widths.
Please see
[Snapped percentage options](/reference/api/part/config/options/pct/snap)
to learn more about how snapped percentage options are used.
```js
import { elastics } from '@freesewing/snapseries'
```
:::
<ConsoleButton data={all.elastics} />
[1]: https://www.npmjs.com/package/@freesewing/snapseries
### smallSteps
Holds configuration for snapped percentage options in small steps, which is 5mm or 1/8 inch.
```js
import { smallSteps } from '@freesewing/snapseries'
```
<ConsoleButton data={all.smallSteps} />
### steps
Holds configuration for snapped percentage options in default steps, which is 1cm or 1/2 inch.
```js
import { bigSteps } from '@freesewing/snapseries'
```
<ConsoleButton data={all.steps} />
### zippers
Holds configuration for snapped percentage options for commons sizes of zipper widths.
```js
import { zippers } from '@freesewing/snapseries'
```
<ConsoleButton data={all.zippers} />

40
sites/dev/docs/reference/packages/studio/readme.mdx Normal file
View file

@ -0,0 +1,40 @@
---
title: '@freesewing/studio'
---
FreeSewing's **studio** package provides FreeSewing's stand-alone
development environment.
It is published on NPM as [@freesewing/studio
](https://www.npmjs.com/package/@freesewing/studio).\
The source code for this package is available in [our monorepo on Codeberg
](https://codeberg.org/freesewing/freesewing) under [packages/studio
](https://codeberg.org/freesewing/freesewing/src/branch/develop/packages/studio).
:::note
This is a cli/executable package that should be called through `npx`.
:::
## Usage
Run the following command to setup FreeSewing's stand-alone development
environment:
```sh
npx @freesewing/studio
```
The package will run an interactive script and install a standalone
development environment which can be used to develop and test a new
FreeSewing design and to generate patterns from that design.
:::tip
Please see our
[Getting Started tutorial](/tutorials/getting-started-linux/dev-setup#stand-alone-development)
for more information about how to set up and start the standalone
development environment.
:::
[1]: https://www.npmjs.com/package/@freesewing/new-design

103
sites/dev/docs/reference/packages/utils/readme.mdx Normal file
View file

@ -0,0 +1,103 @@
---
title: '@freesewing/utils'
---
FreeSewing's **utils** package provides various utility methods.
It is published on NPM as [@freesewing/utils
](https://www.npmjs.com/package/@freesewing/utils).\
The source code for this package is available in [our monorepo on Codeberg
](https://codeberg.org/freesewing/freesewing) under [packages/utils
](https://codeberg.org/freesewing/freesewing/src/branch/develop/packages/utils).
:::note
This package does not provide a default export.
:::
## Installation
```sh
npm install --save @freesewing/utils
```
## Named Exports
### capitalize
### clone
### cloudflareImageUrl
### copyToClipboard
### designOptionType
### distanceAsMm
### formatFraction128
### formatImperial
### formatMm
### formatNumber
### formatPercentage
### fractionToDecimal
### get
### getSearchParam
### hasRequiredMeasurements
### horFlexClasses
### horFlexClassesNoSm
### linkClasses
### measurementAsMm
### measurementAsUnits
### mutateObject
### navigate
### notEmpty
### optionsMenuStructure
### optionType
### orderBy
### pathLength
### patternUrlFromState
### randomLoadingMessage
### round
### roundDistance
### set
### shortDate
### shortUuid
### structureMeasurementsAsDesign
### timeAgo
### unset
### userAvatarUrl
### validateEmail
### validateTld

4
sites/dev/src/components/doc-list.js
View file

@ -1,5 +1,5 @@
import React from 'react'
import Link from '@docusaurus/Link';
import Link from '@docusaurus/Link'
const DocList = ({ items }) => {
const links = []
@ -13,7 +13,7 @@ const DocList = ({ items }) => {
}
}
return <ul>{links}</ul>
return <ul className="tw:list tw:list-inside tw:list-disc tw:ml-2">{links}</ul>
}
export default DocList

90
sites/dev/src/theme/MDXComponents/index.js
View file

@ -1,21 +1,71 @@
// Ejected Docusaurus components
import React from 'react';
import Head from '@docusaurus/Head';
import MDXCode from '@theme/MDXComponents/Code';
import MDXA from '@theme/MDXComponents/A';
import MDXPre from '@theme/MDXComponents/Pre';
import MDXDetails from '@theme/MDXComponents/Details';
import MDXHeading from '@theme/MDXComponents/Heading';
import MDXLi from '@theme/MDXComponents/Li';
import MDXImg from '@theme/MDXComponents/Img';
import Admonition from '@theme/Admonition';
import Mermaid from '@theme/Mermaid';
import React from 'react'
import Head from '@docusaurus/Head'
import MDXCode from '@theme/MDXComponents/Code'
import MDXA from '@theme/MDXComponents/A'
import MDXPre from '@theme/MDXComponents/Pre'
import MDXDetails from '@theme/MDXComponents/Details'
import MDXHeading from '@theme/MDXComponents/Heading'
import MDXLi from '@theme/MDXComponents/Li'
import MDXImg from '@theme/MDXComponents/Img'
import Admonition from '@theme/Admonition'
import Mermaid from '@theme/Mermaid'
// Other Docusaurus components
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
import Tabs from '@theme/Tabs'
import TabItem from '@theme/TabItem'
// Custom FreeSewing components
import { Example } from './example.mjs'
import { ReadMore } from './readmore.js'
// Components
import { SearchIcon } from '@freesewing/react/components/Icon'
export const PropsTable = ({ props, params = false, returns = false }) => (
<table className="tw:table">
<thead>
<tr>
<th>{params ? 'Parameter' : 'Prop'}</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
{Object.entries(props).map(([name, obj]) => (
<PropRow {...{ name, ...obj }} />
))}
</tbody>
{returns ? (
<>
<thead>
<tr>
<th>Return Type</th>
<th colspan="3">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>{returns.type}</td>
<td colspan="3">{returns.desc}</td>
</tr>
</tbody>
</>
) : null}
</table>
)
export const ParamsTable = ({ params, returns }) => (
<PropsTable props={params} params={true} returns={returns} />
)
export const PropRow = ({ name, type, dflt, desc }) => (
<tr>
<td>{name}</td>
<td>{type}</td>
<td>
<code>{dflt}</code>
</td>
<td>{desc}</td>
</tr>
)
const MDXComponents = {
// Ejected Docusaurus components
@ -37,12 +87,24 @@ const MDXComponents = {
mermaid: Mermaid,
Tabs,
TabItem,
PropsTable,
ParamsTable,
// Custom FreeSewing components
Example,
ReadMore,
ConsoleButton: ({ data }) => (
<button
className="tw:hidden tw:md:flex tw:daisy-btn tw:daisy-btn-secondary tw:flex-row tw:gap-2"
onClick={() => console.log(data)}
>
<SearchIcon /> Show in browser console
</button>
),
// Prose styles
ul: (props) => <ul className="tw:list tw:list-inside tw:list-disc tw:ml-2">{props.children}</ul>,
ol: (props) => <ul className="tw:list tw:list-inside tw:list-decimal tw:ml-2">{props.children}</ul>,
ol: (props) => (
<ul className="tw:list tw:list-inside tw:list-decimal tw:ml-2">{props.children}</ul>
),
}
export default MDXComponents