[react] feat: Added docs for components/LineDrawing

2025-05-24 14:57:15 +02:00 · 2025-05-24 14:57:15 +02:00 · 254e271196
commit 254e271196
parent 439315de02
40 changed files with 1204 additions and 163 deletions
--- a/sites/dev/docs/reference/packages/react/components/linedrawing/_examples.js
+++ b/sites/dev/docs/reference/packages/react/components/linedrawing/_examples.js
@ -0,0 +1,166 @@
+import React from 'react'
+import {
+  lineDrawings,
+  lineDrawingsBack,
+  lineDrawingsFront,
+} from '@freesewing/react/components/LineDrawing'
+import { capitalize } from '@freesewing/utils'
+
+/*
+ * Use this to auto-generate content in this file
+export const Generate = () => {
+  const output = []
+  // Imports (for readme.mdx)
+  output.push(
+    `import {`,
+    ...Object.keys(lineDrawings).map(d => `  ${capitalize(d)}Example,`),
+    ...Object.keys(lineDrawingsFront).map(d => `  ${capitalize(d)}FrontExample,`),
+    ...Object.keys(lineDrawingsBack).map(d => `  ${capitalize(d)}BackExample,`),
+    `} from './_examples.js'`,
+  )
+
+  // List (for readme.mdx)
+  output.push(
+    `\n\n`,
+    ...[
+      ...Object.keys(lineDrawings).map(d => `  - [${capitalize(d)}](#${d})`),
+      ...Object.keys(lineDrawingsFront).map(d => `  - [${capitalize(d)}Front](#${d}front)`),
+      ...Object.keys(lineDrawingsBack).map(d => `  - [${capitalize(d)}Back](#${d}back)`),
+    ].sort()
+  )
+
+  // Docs (for readme.mdx)
+  output.push(
+    `\n\n`,
+    ...[
+      ...Object.keys(lineDrawings).map(d => `## ${capitalize(d)}\n<ComponentDocs docs={jsdoc.jsdoc${capitalize(d)}} example={${capitalize(d)}Example} />\n`),
+      ...Object.keys(lineDrawingsFront).map(d => `## ${capitalize(d)}Front\n<ComponentDocs docs={jsdoc.jsdoc${capitalize(d)}Front} example={${capitalize(d)}FrontExample} />\n`),
+      ...Object.keys(lineDrawingsBack).map(d => `## ${capitalize(d)}Back\n<ComponentDocs docs={jsdoc.jsdoc${capitalize(d)}Back} example={${capitalize(d)}BackExample} />\n`),
+    ].sort()
+  )
+
+  // Exports (for _examples.js)
+  output.push(
+    [
+      ...Object.keys(lineDrawings).map(d => `export const ${capitalize(d)}Example = () => <LineDrawingExample design="${d}" />`),
+      ...Object.keys(lineDrawingsFront).map(d => `export const ${capitalize(d)}FrontExample = () => <LineDrawingExample design="${d}" side="front" />`),
+      ...Object.keys(lineDrawingsBack).map(d => `export const ${capitalize(d)}BackExample = () => <LineDrawingExample design="${d}" side="back" />`),
+    ].sort().join("\n")
+  )
+
+  return <pre>{output.join("\n")}</pre>
+}
+ */
+
+const NotFound = () => <p>No such linedrawing</p>
+
+const LineDrawingExample = ({ design, side=false }) => {
+  let Component = NotFound
+  if (side === 'back' && lineDrawingsBack[design]) Component = lineDrawingsBack[design]
+  else if (side === 'front' && lineDrawingsFront[design]) Component = lineDrawingsFront[design]
+  else if (lineDrawings[design]) Component = lineDrawings[design]
+
+  return <Component {...{ side, design }} />
+}
+
+export const AaronBackExample = () => <LineDrawingExample design="aaron" side="back" />
+export const AaronExample = () => <LineDrawingExample design="aaron" />
+export const AaronFrontExample = () => <LineDrawingExample design="aaron" side="front" />
+export const AlbertExample = () => <LineDrawingExample design="albert" />
+export const AlbertFrontExample = () => <LineDrawingExample design="albert" side="front" />
+export const BeeExample = () => <LineDrawingExample design="bee" />
+export const BeeFrontExample = () => <LineDrawingExample design="bee" side="front" />
+export const BellaBackExample = () => <LineDrawingExample design="bella" side="back" />
+export const BellaExample = () => <LineDrawingExample design="bella" />
+export const BellaFrontExample = () => <LineDrawingExample design="bella" side="front" />
+export const BenjaminExample = () => <LineDrawingExample design="benjamin" />
+export const BenjaminFrontExample = () => <LineDrawingExample design="benjamin" side="front" />
+export const BentBackExample = () => <LineDrawingExample design="bent" side="back" />
+export const BentExample = () => <LineDrawingExample design="bent" />
+export const BentFrontExample = () => <LineDrawingExample design="bent" side="front" />
+export const BibiBackExample = () => <LineDrawingExample design="bibi" side="back" />
+export const BibiExample = () => <LineDrawingExample design="bibi" />
+export const BibiFrontExample = () => <LineDrawingExample design="bibi" side="front" />
+export const BobBackExample = () => <LineDrawingExample design="bob" side="back" />
+export const BobExample = () => <LineDrawingExample design="bob" />
+export const BobFrontExample = () => <LineDrawingExample design="bob" side="front" />
+export const BreannaBackExample = () => <LineDrawingExample design="breanna" side="back" />
+export const BreannaExample = () => <LineDrawingExample design="breanna" />
+export const BreannaFrontExample = () => <LineDrawingExample design="breanna" side="front" />
+export const BrianBackExample = () => <LineDrawingExample design="brian" side="back" />
+export const BrianExample = () => <LineDrawingExample design="brian" />
+export const BrianFrontExample = () => <LineDrawingExample design="brian" side="front" />
+export const BruceBackExample = () => <LineDrawingExample design="bruce" side="back" />
+export const BruceExample = () => <LineDrawingExample design="bruce" />
+export const BruceFrontExample = () => <LineDrawingExample design="bruce" side="front" />
+export const CarlitaBackExample = () => <LineDrawingExample design="carlita" side="back" />
+export const CarlitaExample = () => <LineDrawingExample design="carlita" />
+export const CarlitaFrontExample = () => <LineDrawingExample design="carlita" side="front" />
+export const CarltonBackExample = () => <LineDrawingExample design="carlton" side="back" />
+export const CarltonExample = () => <LineDrawingExample design="carlton" />
+export const CarltonFrontExample = () => <LineDrawingExample design="carlton" side="front" />
+export const CathrinBackExample = () => <LineDrawingExample design="cathrin" side="back" />
+export const CathrinExample = () => <LineDrawingExample design="cathrin" />
+export const CathrinFrontExample = () => <LineDrawingExample design="cathrin" side="front" />
+export const CharlieBackExample = () => <LineDrawingExample design="charlie" side="back" />
+export const CharlieExample = () => <LineDrawingExample design="charlie" />
+export const CharlieFrontExample = () => <LineDrawingExample design="charlie" side="front" />
+export const CorneliusBackExample = () => <LineDrawingExample design="cornelius" side="back" />
+export const CorneliusExample = () => <LineDrawingExample design="cornelius" />
+export const CorneliusFrontExample = () => <LineDrawingExample design="cornelius" side="front" />
+export const DianaBackExample = () => <LineDrawingExample design="diana" side="back" />
+export const DianaExample = () => <LineDrawingExample design="diana" />
+export const DianaFrontExample = () => <LineDrawingExample design="diana" side="front" />
+export const FlorenceExample = () => <LineDrawingExample design="florence" />
+export const FlorenceFrontExample = () => <LineDrawingExample design="florence" side="front" />
+export const FlorentExample = () => <LineDrawingExample design="florent" />
+export const FlorentFrontExample = () => <LineDrawingExample design="florent" side="front" />
+export const GozerBackExample = () => <LineDrawingExample design="gozer" side="back" />
+export const GozerExample = () => <LineDrawingExample design="gozer" />
+export const GozerFrontExample = () => <LineDrawingExample design="gozer" side="front" />
+export const HiExample = () => <LineDrawingExample design="hi" />
+export const HiFrontExample = () => <LineDrawingExample design="hi" side="front" />
+export const HolmesExample = () => <LineDrawingExample design="holmes" />
+export const HolmesFrontExample = () => <LineDrawingExample design="holmes" side="front" />
+export const HortensiaExample = () => <LineDrawingExample design="hortensia" />
+export const HortensiaFrontExample = () => <LineDrawingExample design="hortensia" side="front" />
+export const HueyBackExample = () => <LineDrawingExample design="huey" side="back" />
+export const HueyExample = () => <LineDrawingExample design="huey" />
+export const HueyFrontExample = () => <LineDrawingExample design="huey" side="front" />
+export const HugoBackExample = () => <LineDrawingExample design="hugo" side="back" />
+export const HugoExample = () => <LineDrawingExample design="hugo" />
+export const HugoFrontExample = () => <LineDrawingExample design="hugo" side="front" />
+export const JaneBackExample = () => <LineDrawingExample design="jane" side="back" />
+export const JaneExample = () => <LineDrawingExample design="jane" />
+export const JaneFrontExample = () => <LineDrawingExample design="jane" side="front" />
+export const LucyExample = () => <LineDrawingExample design="lucy" />
+export const LucyFrontExample = () => <LineDrawingExample design="lucy" side="front" />
+export const LuminaBackExample = () => <LineDrawingExample design="lumina" side="back" />
+export const LuminaExample = () => <LineDrawingExample design="lumina" />
+export const LuminaFrontExample = () => <LineDrawingExample design="lumina" side="front" />
+export const LumiraBackExample = () => <LineDrawingExample design="lumira" side="back" />
+export const LumiraExample = () => <LineDrawingExample design="lumira" />
+export const LumiraFrontExample = () => <LineDrawingExample design="lumira" side="front" />
+export const LunetiusExample = () => <LineDrawingExample design="lunetius" />
+export const LunetiusFrontExample = () => <LineDrawingExample design="lunetius" side="front" />
+export const NobleBackExample = () => <LineDrawingExample design="noble" side="back" />
+export const NobleExample = () => <LineDrawingExample design="noble" />
+export const NobleFrontExample = () => <LineDrawingExample design="noble" side="front" />
+export const SimonBackExample = () => <LineDrawingExample design="simon" side="back" />
+export const SimonExample = () => <LineDrawingExample design="simon" />
+export const SimonFrontExample = () => <LineDrawingExample design="simon" side="front" />
+export const TeaganBackExample = () => <LineDrawingExample design="teagan" side="back" />
+export const TeaganExample = () => <LineDrawingExample design="teagan" />
+export const TeaganFrontExample = () => <LineDrawingExample design="teagan" side="front" />
+export const TristanBackExample = () => <LineDrawingExample design="tristan" side="back" />
+export const TristanExample = () => <LineDrawingExample design="tristan" />
+export const TristanFrontExample = () => <LineDrawingExample design="tristan" side="front" />
+export const UmaBackExample = () => <LineDrawingExample design="uma" side="back" />
+export const UmaExample = () => <LineDrawingExample design="uma" />
+export const UmaFrontExample = () => <LineDrawingExample design="uma" side="front" />
+export const UmbraBackExample = () => <LineDrawingExample design="umbra" side="back" />
+export const UmbraExample = () => <LineDrawingExample design="umbra" />
+export const UmbraFrontExample = () => <LineDrawingExample design="umbra" side="front" />
+export const WahidBackExample = () => <LineDrawingExample design="wahid" side="back" />
+export const WahidExample = () => <LineDrawingExample design="wahid" />
+export const WahidFrontExample = () => <LineDrawingExample design="wahid" side="front" />
--- a/sites/dev/docs/reference/packages/react/components/linedrawing/readme.mdx
+++ b/sites/dev/docs/reference/packages/react/components/linedrawing/readme.mdx
@ -2,6 +2,537 @@
 title: Linedrawing
 ---

-:::note
-This page is yet to be created
+import { DocusaurusDoc } from '@freesewing/react/components/Docusaurus'
+import { ComponentDocs } from '@site/src/components/component-docs.js'
+import * as jsdoc from '@site/prebuild/jsdoc/components.linedrawing.mjs'
+import {
+  AaronExample,
+  AlbertExample,
+  BeeExample,
+  BellaExample,
+  BenjaminExample,
+  BentExample,
+  BibiExample,
+  BobExample,
+  BreannaExample,
+  BrianExample,
+  BruceExample,
+  CarlitaExample,
+  CarltonExample,
+  CathrinExample,
+  CharlieExample,
+  CorneliusExample,
+  DianaExample,
+  FlorenceExample,
+  FlorentExample,
+  GozerExample,
+  HiExample,
+  HolmesExample,
+  HortensiaExample,
+  HueyExample,
+  HugoExample,
+  JaneExample,
+  LucyExample,
+  LuminaExample,
+  LumiraExample,
+  LunetiusExample,
+  NobleExample,
+  SimonExample,
+  TeaganExample,
+  TristanExample,
+  UmaExample,
+  UmbraExample,
+  WahidExample,
+  AaronFrontExample,
+  AlbertFrontExample,
+  BeeFrontExample,
+  BellaFrontExample,
+  BenjaminFrontExample,
+  BentFrontExample,
+  BibiFrontExample,
+  BobFrontExample,
+  BreannaFrontExample,
+  BrianFrontExample,
+  BruceFrontExample,
+  CarlitaFrontExample,
+  CarltonFrontExample,
+  CathrinFrontExample,
+  CharlieFrontExample,
+  CorneliusFrontExample,
+  DianaFrontExample,
+  FlorenceFrontExample,
+  FlorentFrontExample,
+  GozerFrontExample,
+  HiFrontExample,
+  HolmesFrontExample,
+  HortensiaFrontExample,
+  HueyFrontExample,
+  HugoFrontExample,
+  JaneFrontExample,
+  LucyFrontExample,
+  LuminaFrontExample,
+  LumiraFrontExample,
+  LunetiusFrontExample,
+  NobleFrontExample,
+  SimonFrontExample,
+  TeaganFrontExample,
+  TristanFrontExample,
+  UmaFrontExample,
+  UmbraFrontExample,
+  WahidFrontExample,
+  AaronBackExample,
+  BellaBackExample,
+  BentBackExample,
+  BibiBackExample,
+  BobBackExample,
+  BreannaBackExample,
+  BrianBackExample,
+  BruceBackExample,
+  CarlitaBackExample,
+  CarltonBackExample,
+  CathrinBackExample,
+  CharlieBackExample,
+  CorneliusBackExample,
+  DianaBackExample,
+  GozerBackExample,
+  HueyBackExample,
+  HugoBackExample,
+  JaneBackExample,
+  LuminaBackExample,
+  LumiraBackExample,
+  NobleBackExample,
+  SimonBackExample,
+  TeaganBackExample,
+  TristanBackExample,
+  UmaBackExample,
+  UmbraBackExample,
+  WahidBackExample,
+} from './_examples.js'
+
+<DocusaurusDoc>
+
+:::tip
+This component family also exports the following helper objects:
+
+- `lineDrawings`: An object where the key is the design name and the value the full LineDrawing component
+- `lineDrawingsBack`: An object where the key is the design name and the value the back LineDrawing component
+- `lineDrawingsFront`: An object where the key is the design name and the value the front LineDrawing component
 :::
+
+:::warning
+All FreeSewing designs SHOULD have the full and front line drawing component.
+The back component is optional.
+
+If there is no specific front component, the front component MUST be exported as a copy of the full component.
+:::
+
+The __LineDrawing__ component family provides the following components:
+
+  - [AaronBack](#aaronback)
+  - [AaronFront](#aaronfront)
+  - [Aaron](#aaron)
+  - [AlbertFront](#albertfront)
+  - [Albert](#albert)
+  - [BeeFront](#beefront)
+  - [Bee](#bee)
+  - [BellaBack](#bellaback)
+  - [BellaFront](#bellafront)
+  - [Bella](#bella)
+  - [BenjaminFront](#benjaminfront)
+  - [Benjamin](#benjamin)
+  - [BentBack](#bentback)
+  - [BentFront](#bentfront)
+  - [Bent](#bent)
+  - [BibiBack](#bibiback)
+  - [BibiFront](#bibifront)
+  - [Bibi](#bibi)
+  - [BobBack](#bobback)
+  - [BobFront](#bobfront)
+  - [Bob](#bob)
+  - [BreannaBack](#breannaback)
+  - [BreannaFront](#breannafront)
+  - [Breanna](#breanna)
+  - [BrianBack](#brianback)
+  - [BrianFront](#brianfront)
+  - [Brian](#brian)
+  - [BruceBack](#bruceback)
+  - [BruceFront](#brucefront)
+  - [Bruce](#bruce)
+  - [CarlitaBack](#carlitaback)
+  - [CarlitaFront](#carlitafront)
+  - [Carlita](#carlita)
+  - [CarltonBack](#carltonback)
+  - [CarltonFront](#carltonfront)
+  - [Carlton](#carlton)
+  - [CathrinBack](#cathrinback)
+  - [CathrinFront](#cathrinfront)
+  - [Cathrin](#cathrin)
+  - [CharlieBack](#charlieback)
+  - [CharlieFront](#charliefront)
+  - [Charlie](#charlie)
+  - [CorneliusBack](#corneliusback)
+  - [CorneliusFront](#corneliusfront)
+  - [Cornelius](#cornelius)
+  - [DianaBack](#dianaback)
+  - [DianaFront](#dianafront)
+  - [Diana](#diana)
+  - [FlorenceFront](#florencefront)
+  - [Florence](#florence)
+  - [FlorentFront](#florentfront)
+  - [Florent](#florent)
+  - [GozerBack](#gozerback)
+  - [GozerFront](#gozerfront)
+  - [Gozer](#gozer)
+  - [HiFront](#hifront)
+  - [Hi](#hi)
+  - [HolmesFront](#holmesfront)
+  - [Holmes](#holmes)
+  - [HortensiaFront](#hortensiafront)
+  - [Hortensia](#hortensia)
+  - [HueyBack](#hueyback)
+  - [HueyFront](#hueyfront)
+  - [Huey](#huey)
+  - [HugoBack](#hugoback)
+  - [HugoFront](#hugofront)
+  - [Hugo](#hugo)
+  - [JaneBack](#janeback)
+  - [JaneFront](#janefront)
+  - [Jane](#jane)
+  - [LucyFront](#lucyfront)
+  - [Lucy](#lucy)
+  - [LuminaBack](#luminaback)
+  - [LuminaFront](#luminafront)
+  - [Lumina](#lumina)
+  - [LumiraBack](#lumiraback)
+  - [LumiraFront](#lumirafront)
+  - [Lumira](#lumira)
+  - [LunetiusFront](#lunetiusfront)
+  - [Lunetius](#lunetius)
+  - [NobleBack](#nobleback)
+  - [NobleFront](#noblefront)
+  - [Noble](#noble)
+  - [SimonBack](#simonback)
+  - [SimonFront](#simonfront)
+  - [Simon](#simon)
+  - [TeaganBack](#teaganback)
+  - [TeaganFront](#teaganfront)
+  - [Teagan](#teagan)
+  - [TristanBack](#tristanback)
+  - [TristanFront](#tristanfront)
+  - [Tristan](#tristan)
+  - [UmaBack](#umaback)
+  - [UmaFront](#umafront)
+  - [Uma](#uma)
+  - [UmbraBack](#umbraback)
+  - [UmbraFront](#umbrafront)
+  - [Umbra](#umbra)
+  - [WahidBack](#wahidback)
+  - [WahidFront](#wahidfront)
+  - [Wahid](#wahid)
+
+
+
+## Aaron
+<ComponentDocs docs={jsdoc.jsdocAaron} example={AaronExample} />
+
+## AaronBack
+<ComponentDocs docs={jsdoc.jsdocAaronBack} example={AaronBackExample} />
+
+## AaronFront
+<ComponentDocs docs={jsdoc.jsdocAaronFront} example={AaronFrontExample} />
+
+## Albert
+<ComponentDocs docs={jsdoc.jsdocAlbert} example={AlbertExample} />
+
+## AlbertFront
+<ComponentDocs docs={jsdoc.jsdocAlbertFront} example={AlbertFrontExample} />
+
+## Bee
+<ComponentDocs docs={jsdoc.jsdocBee} example={BeeExample} />
+
+## BeeFront
+<ComponentDocs docs={jsdoc.jsdocBeeFront} example={BeeFrontExample} />
+
+## Bella
+<ComponentDocs docs={jsdoc.jsdocBella} example={BellaExample} />
+
+## BellaBack
+<ComponentDocs docs={jsdoc.jsdocBellaBack} example={BellaBackExample} />
+
+## BellaFront
+<ComponentDocs docs={jsdoc.jsdocBellaFront} example={BellaFrontExample} />
+
+## Benjamin
+<ComponentDocs docs={jsdoc.jsdocBenjamin} example={BenjaminExample} />
+
+## BenjaminFront
+<ComponentDocs docs={jsdoc.jsdocBenjaminFront} example={BenjaminFrontExample} />
+
+## Bent
+<ComponentDocs docs={jsdoc.jsdocBent} example={BentExample} />
+
+## BentBack
+<ComponentDocs docs={jsdoc.jsdocBentBack} example={BentBackExample} />
+
+## BentFront
+<ComponentDocs docs={jsdoc.jsdocBentFront} example={BentFrontExample} />
+
+## Bibi
+<ComponentDocs docs={jsdoc.jsdocBibi} example={BibiExample} />
+
+## BibiBack
+<ComponentDocs docs={jsdoc.jsdocBibiBack} example={BibiBackExample} />
+
+## BibiFront
+<ComponentDocs docs={jsdoc.jsdocBibiFront} example={BibiFrontExample} />
+
+## Bob
+<ComponentDocs docs={jsdoc.jsdocBob} example={BobExample} />
+
+## BobBack
+<ComponentDocs docs={jsdoc.jsdocBobBack} example={BobBackExample} />
+
+## BobFront
+<ComponentDocs docs={jsdoc.jsdocBobFront} example={BobFrontExample} />
+
+## Breanna
+<ComponentDocs docs={jsdoc.jsdocBreanna} example={BreannaExample} />
+
+## BreannaBack
+<ComponentDocs docs={jsdoc.jsdocBreannaBack} example={BreannaBackExample} />
+
+## BreannaFront
+<ComponentDocs docs={jsdoc.jsdocBreannaFront} example={BreannaFrontExample} />
+
+## Brian
+<ComponentDocs docs={jsdoc.jsdocBrian} example={BrianExample} />
+
+## BrianBack
+<ComponentDocs docs={jsdoc.jsdocBrianBack} example={BrianBackExample} />
+
+## BrianFront
+<ComponentDocs docs={jsdoc.jsdocBrianFront} example={BrianFrontExample} />
+
+## Bruce
+<ComponentDocs docs={jsdoc.jsdocBruce} example={BruceExample} />
+
+## BruceBack
+<ComponentDocs docs={jsdoc.jsdocBruceBack} example={BruceBackExample} />
+
+## BruceFront
+<ComponentDocs docs={jsdoc.jsdocBruceFront} example={BruceFrontExample} />
+
+## Carlita
+<ComponentDocs docs={jsdoc.jsdocCarlita} example={CarlitaExample} />
+
+## CarlitaBack
+<ComponentDocs docs={jsdoc.jsdocCarlitaBack} example={CarlitaBackExample} />
+
+## CarlitaFront
+<ComponentDocs docs={jsdoc.jsdocCarlitaFront} example={CarlitaFrontExample} />
+
+## Carlton
+<ComponentDocs docs={jsdoc.jsdocCarlton} example={CarltonExample} />
+
+## CarltonBack
+<ComponentDocs docs={jsdoc.jsdocCarltonBack} example={CarltonBackExample} />
+
+## CarltonFront
+<ComponentDocs docs={jsdoc.jsdocCarltonFront} example={CarltonFrontExample} />
+
+## Cathrin
+<ComponentDocs docs={jsdoc.jsdocCathrin} example={CathrinExample} />
+
+## CathrinBack
+<ComponentDocs docs={jsdoc.jsdocCathrinBack} example={CathrinBackExample} />
+
+## CathrinFront
+<ComponentDocs docs={jsdoc.jsdocCathrinFront} example={CathrinFrontExample} />
+
+## Charlie
+<ComponentDocs docs={jsdoc.jsdocCharlie} example={CharlieExample} />
+
+## CharlieBack
+<ComponentDocs docs={jsdoc.jsdocCharlieBack} example={CharlieBackExample} />
+
+## CharlieFront
+<ComponentDocs docs={jsdoc.jsdocCharlieFront} example={CharlieFrontExample} />
+
+## Cornelius
+<ComponentDocs docs={jsdoc.jsdocCornelius} example={CorneliusExample} />
+
+## CorneliusBack
+<ComponentDocs docs={jsdoc.jsdocCorneliusBack} example={CorneliusBackExample} />
+
+## CorneliusFront
+<ComponentDocs docs={jsdoc.jsdocCorneliusFront} example={CorneliusFrontExample} />
+
+## Diana
+<ComponentDocs docs={jsdoc.jsdocDiana} example={DianaExample} />
+
+## DianaBack
+<ComponentDocs docs={jsdoc.jsdocDianaBack} example={DianaBackExample} />
+
+## DianaFront
+<ComponentDocs docs={jsdoc.jsdocDianaFront} example={DianaFrontExample} />
+
+## Florence
+<ComponentDocs docs={jsdoc.jsdocFlorence} example={FlorenceExample} />
+
+## FlorenceFront
+<ComponentDocs docs={jsdoc.jsdocFlorenceFront} example={FlorenceFrontExample} />
+
+## Florent
+<ComponentDocs docs={jsdoc.jsdocFlorent} example={FlorentExample} />
+
+## FlorentFront
+<ComponentDocs docs={jsdoc.jsdocFlorentFront} example={FlorentFrontExample} />
+
+## Gozer
+<ComponentDocs docs={jsdoc.jsdocGozer} example={GozerExample} />
+
+## GozerBack
+<ComponentDocs docs={jsdoc.jsdocGozerBack} example={GozerBackExample} />
+
+## GozerFront
+<ComponentDocs docs={jsdoc.jsdocGozerFront} example={GozerFrontExample} />
+
+## Hi
+<ComponentDocs docs={jsdoc.jsdocHi} example={HiExample} />
+
+## HiFront
+<ComponentDocs docs={jsdoc.jsdocHiFront} example={HiFrontExample} />
+
+## Holmes
+<ComponentDocs docs={jsdoc.jsdocHolmes} example={HolmesExample} />
+
+## HolmesFront
+<ComponentDocs docs={jsdoc.jsdocHolmesFront} example={HolmesFrontExample} />
+
+## Hortensia
+<ComponentDocs docs={jsdoc.jsdocHortensia} example={HortensiaExample} />
+
+## HortensiaFront
+<ComponentDocs docs={jsdoc.jsdocHortensiaFront} example={HortensiaFrontExample} />
+
+## Huey
+<ComponentDocs docs={jsdoc.jsdocHuey} example={HueyExample} />
+
+## HueyBack
+<ComponentDocs docs={jsdoc.jsdocHueyBack} example={HueyBackExample} />
+
+## HueyFront
+<ComponentDocs docs={jsdoc.jsdocHueyFront} example={HueyFrontExample} />
+
+## Hugo
+<ComponentDocs docs={jsdoc.jsdocHugo} example={HugoExample} />
+
+## HugoBack
+<ComponentDocs docs={jsdoc.jsdocHugoBack} example={HugoBackExample} />
+
+## HugoFront
+<ComponentDocs docs={jsdoc.jsdocHugoFront} example={HugoFrontExample} />
+
+## Jane
+<ComponentDocs docs={jsdoc.jsdocJane} example={JaneExample} />
+
+## JaneBack
+<ComponentDocs docs={jsdoc.jsdocJaneBack} example={JaneBackExample} />
+
+## JaneFront
+<ComponentDocs docs={jsdoc.jsdocJaneFront} example={JaneFrontExample} />
+
+## Lucy
+<ComponentDocs docs={jsdoc.jsdocLucy} example={LucyExample} />
+
+## LucyFront
+<ComponentDocs docs={jsdoc.jsdocLucyFront} example={LucyFrontExample} />
+
+## Lumina
+<ComponentDocs docs={jsdoc.jsdocLumina} example={LuminaExample} />
+
+## LuminaBack
+<ComponentDocs docs={jsdoc.jsdocLuminaBack} example={LuminaBackExample} />
+
+## LuminaFront
+<ComponentDocs docs={jsdoc.jsdocLuminaFront} example={LuminaFrontExample} />
+
+## Lumira
+<ComponentDocs docs={jsdoc.jsdocLumira} example={LumiraExample} />
+
+## LumiraBack
+<ComponentDocs docs={jsdoc.jsdocLumiraBack} example={LumiraBackExample} />
+
+## LumiraFront
+<ComponentDocs docs={jsdoc.jsdocLumiraFront} example={LumiraFrontExample} />
+
+## Lunetius
+<ComponentDocs docs={jsdoc.jsdocLunetius} example={LunetiusExample} />
+
+## LunetiusFront
+<ComponentDocs docs={jsdoc.jsdocLunetiusFront} example={LunetiusFrontExample} />
+
+## Noble
+<ComponentDocs docs={jsdoc.jsdocNoble} example={NobleExample} />
+
+## NobleBack
+<ComponentDocs docs={jsdoc.jsdocNobleBack} example={NobleBackExample} />
+
+## NobleFront
+<ComponentDocs docs={jsdoc.jsdocNobleFront} example={NobleFrontExample} />
+
+## Simon
+<ComponentDocs docs={jsdoc.jsdocSimon} example={SimonExample} />
+
+## SimonBack
+<ComponentDocs docs={jsdoc.jsdocSimonBack} example={SimonBackExample} />
+
+## SimonFront
+<ComponentDocs docs={jsdoc.jsdocSimonFront} example={SimonFrontExample} />
+
+## Teagan
+<ComponentDocs docs={jsdoc.jsdocTeagan} example={TeaganExample} />
+
+## TeaganBack
+<ComponentDocs docs={jsdoc.jsdocTeaganBack} example={TeaganBackExample} />
+
+## TeaganFront
+<ComponentDocs docs={jsdoc.jsdocTeaganFront} example={TeaganFrontExample} />
+
+## Tristan
+<ComponentDocs docs={jsdoc.jsdocTristan} example={TristanExample} />
+
+## TristanBack
+<ComponentDocs docs={jsdoc.jsdocTristanBack} example={TristanBackExample} />
+
+## TristanFront
+<ComponentDocs docs={jsdoc.jsdocTristanFront} example={TristanFrontExample} />
+
+## Uma
+<ComponentDocs docs={jsdoc.jsdocUma} example={UmaExample} />
+
+## UmaBack
+<ComponentDocs docs={jsdoc.jsdocUmaBack} example={UmaBackExample} />
+
+## UmaFront
+<ComponentDocs docs={jsdoc.jsdocUmaFront} example={UmaFrontExample} />
+
+## Umbra
+<ComponentDocs docs={jsdoc.jsdocUmbra} example={UmbraExample} />
+
+## UmbraBack
+<ComponentDocs docs={jsdoc.jsdocUmbraBack} example={UmbraBackExample} />
+
+## UmbraFront
+<ComponentDocs docs={jsdoc.jsdocUmbraFront} example={UmbraFrontExample} />
+
+## Wahid
+<ComponentDocs docs={jsdoc.jsdocWahid} example={WahidExample} />
+
+## WahidBack
+<ComponentDocs docs={jsdoc.jsdocWahidBack} example={WahidBackExample} />
+
+## WahidFront
+<ComponentDocs docs={jsdoc.jsdocWahidFront} example={WahidFrontExample} />
+
+</DocusaurusDoc>