From 254e271196dcffecfb76d920874e405b0c265340 Mon Sep 17 00:00:00 2001 From: joostdecock Date: Sat, 24 May 2025 14:57:15 +0200 Subject: [PATCH] [react] feat: Added docs for components/LineDrawing --- .../react/components/LineDrawing/aaron.mjs | 14 +- .../react/components/LineDrawing/albert.mjs | 14 +- packages/react/components/LineDrawing/bee.mjs | 14 +- .../react/components/LineDrawing/bella.mjs | 20 +- .../react/components/LineDrawing/benjamin.mjs | 16 +- .../react/components/LineDrawing/bent.mjs | 20 +- .../react/components/LineDrawing/bibi.mjs | 20 +- packages/react/components/LineDrawing/bob.mjs | 20 +- .../react/components/LineDrawing/breanna.mjs | 22 +- .../react/components/LineDrawing/brian.mjs | 20 +- .../react/components/LineDrawing/bruce.mjs | 20 +- .../react/components/LineDrawing/carlita.mjs | 20 +- .../react/components/LineDrawing/carlton.mjs | 20 +- .../react/components/LineDrawing/charlie.mjs | 20 +- .../components/LineDrawing/cornelius.mjs | 20 +- .../react/components/LineDrawing/diana.mjs | 20 +- .../react/components/LineDrawing/florence.mjs | 16 +- .../react/components/LineDrawing/florent.mjs | 18 +- .../react/components/LineDrawing/gozer.mjs | 20 +- packages/react/components/LineDrawing/hi.mjs | 16 +- .../react/components/LineDrawing/holmes.mjs | 16 +- .../components/LineDrawing/hortensia.mjs | 14 +- .../react/components/LineDrawing/huey.mjs | 10 +- .../react/components/LineDrawing/hugo.mjs | 20 +- .../react/components/LineDrawing/jane.mjs | 20 +- .../react/components/LineDrawing/lucy.mjs | 18 +- .../react/components/LineDrawing/lumina.mjs | 20 +- .../react/components/LineDrawing/lumira.mjs | 20 +- .../react/components/LineDrawing/lunetius.mjs | 16 +- .../react/components/LineDrawing/missing.mjs | 4 +- .../react/components/LineDrawing/noble.mjs | 20 +- .../react/components/LineDrawing/simon.mjs | 18 +- .../react/components/LineDrawing/teagan.mjs | 20 +- .../react/components/LineDrawing/tristan.mjs | 20 +- packages/react/components/LineDrawing/uma.mjs | 20 +- .../react/components/LineDrawing/umbra.mjs | 20 +- .../react/components/LineDrawing/wahid.mjs | 19 +- packages/react/mkdocs.sh | 1 + .../react/components/linedrawing/_examples.js | 166 ++++++ .../react/components/linedrawing/readme.mdx | 535 +++++++++++++++++- 40 files changed, 1204 insertions(+), 163 deletions(-) create mode 100644 sites/dev/docs/reference/packages/react/components/linedrawing/_examples.js diff --git a/packages/react/components/LineDrawing/aaron.mjs b/packages/react/components/LineDrawing/aaron.mjs index 233f67a3ad2..ced54b21941 100644 --- a/packages/react/components/LineDrawing/aaron.mjs +++ b/packages/react/components/LineDrawing/aaron.mjs @@ -10,9 +10,11 @@ const strokeScale = 0.5 /** * A linedrawing component for Aaron * - * @param {object} props - All React props + * @component + * @param {object} props - All component props * @param {string} props.className - Any CSS classes to apply * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const Aaron = ({ className, stroke = 1 }) => ( @@ -24,9 +26,11 @@ export const Aaron = ({ className, stroke = 1 }) => ( /** * A linedrawing component for the front of Aaron * - * @param {object} props - All React props + * @component + * @param {object} props - All component props * @param {string} props.className - Any CSS classes to apply * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const AaronFront = ({ className, stroke = 1 }) => ( @@ -37,9 +41,11 @@ export const AaronFront = ({ className, stroke = 1 }) => ( /** * A linedrawing component for the front of Aaron * - * @param {object} props - All React props + * @component + * @param {object} props - All component props * @param {string} props.className - Any CSS classes to apply * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const AaronBack = ({ className, stroke = 1 }) => ( @@ -50,7 +56,7 @@ export const AaronBack = ({ className, stroke = 1 }) => ( /* * SVG elements for the front */ -export const Front = ({ stroke }) => ( +const Front = ({ stroke }) => ( <> ( @@ -24,9 +26,11 @@ export const Albert = ({ className, stroke = 1 }) => ( /** * A linedrawing component for the front of Albert * - * @param {object} props - All React props + * @component + * @param {object} props - All component props * @param {string} props.className - Any CSS classes to apply * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const AlbertFront = ({ className, stroke = 1 }) => ( @@ -37,9 +41,11 @@ export const AlbertFront = ({ className, stroke = 1 }) => ( /** * A linedrawing component for the front of Albert * - * @param {object} props - All React props + * @component + * @param {object} props - All component props * @param {string} props.className - Any CSS classes to apply * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const AlbertBack = ({ className, stroke = 1 }) => ( @@ -50,7 +56,7 @@ export const AlbertBack = ({ className, stroke = 1 }) => ( /* * SVG elements for the front */ -export const Front = ({ stroke }) => ( +const Front = ({ stroke }) => ( <> ( @@ -21,14 +23,20 @@ export const Bee = ({ className, stroke = 1 }) => ( ) /** - * Front is the same + * A linedrawing component for the front of Bee + * + * @component + * @param {object} props - All component props + * @param {string} props.className - Any CSS classes to apply + * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const BeeFront = Bee /* * SVG elements for the front */ -export const Front = ({ stroke }) => ( +const Front = ({ stroke }) => ( <> ( @@ -24,9 +26,11 @@ export const Bella = ({ className, stroke = 1 }) => ( /** * A linedrawing component for the front of Bella * - * @param {object} props - All React props + * @component + * @param {object} props - All component props * @param {string} props.className - Any CSS classes to apply * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const BellaFront = ({ className, stroke = 1 }) => ( @@ -34,8 +38,14 @@ export const BellaFront = ({ className, stroke = 1 }) => ( ) -/* - * React component for the back +/** + * A linedrawing component for the back of Bella + * + * @component + * @param {object} props - All component props + * @param {string} props.className - Any CSS classes to apply + * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const BellaBack = ({ className = 'tw:w-full', // CSS classes to apply @@ -54,7 +64,7 @@ export const BellaBack = ({ /* * SVG elements for the front */ -export const Front = ({ stroke }) => ( +const Front = ({ stroke }) => ( <> ( @@ -20,15 +22,21 @@ export const Benjamin = ({ className, stroke = 1 }) => ( ) -/* - * Front is the same +/** + * A linedrawing component for the front of Benjamin + * + * @component + * @param {object} props - All component props + * @param {string} props.className - Any CSS classes to apply + * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const BenjaminFront = Benjamin /* * SVG elements for the front */ -export const Front = ({ stroke }) => ( +const Front = ({ stroke }) => ( <> ( @@ -24,9 +26,11 @@ export const Bent = ({ className, stroke = 1 }) => ( /** * A linedrawing component for the front of Bent * - * @param {object} props - All React props + * @component + * @param {object} props - All component props * @param {string} props.className - Any CSS classes to apply * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const BentFront = ({ className, stroke = 1 }) => ( @@ -34,8 +38,14 @@ export const BentFront = ({ className, stroke = 1 }) => ( ) -/* - * React component for the back +/** + * A linedrawing component for the back of Bent + * + * @component + * @param {object} props - All component props + * @param {string} props.className - Any CSS classes to apply + * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const BentBack = ({ className = 'tw:w-full', // CSS classes to apply @@ -54,7 +64,7 @@ export const BentBack = ({ /* * SVG elements for the front */ -export const Front = ({ stroke }) => ( +const Front = ({ stroke }) => ( <> ( @@ -24,9 +26,11 @@ export const Bibi = ({ className, stroke = 1 }) => ( /** * A linedrawing component for the front of Bibi * - * @param {object} props - All React props + * @component + * @param {object} props - All component props * @param {string} props.className - Any CSS classes to apply * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const BibiFront = ({ className, stroke = 1 }) => ( @@ -34,8 +38,14 @@ export const BibiFront = ({ className, stroke = 1 }) => ( ) -/* - * React component for the back +/** + * A linedrawing component for the back of Bibi + * + * @component + * @param {object} props - All component props + * @param {string} props.className - Any CSS classes to apply + * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const BibiBack = ({ className = 'tw:w-full', // CSS classes to apply @@ -54,7 +64,7 @@ export const BibiBack = ({ /* * SVG elements for the front */ -export const Front = ({ stroke }) => ( +const Front = ({ stroke }) => ( <> ( @@ -24,9 +26,11 @@ export const Bob = ({ className, stroke = 1 }) => ( /** * A linedrawing component for the front of Bob * - * @param {object} props - All React props + * @component + * @param {object} props - All component props * @param {string} props.className - Any CSS classes to apply * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const BobFront = ({ className, stroke = 1 }) => ( @@ -34,8 +38,14 @@ export const BobFront = ({ className, stroke = 1 }) => ( ) -/* - * React component for the back +/** + * A linedrawing component for the back of Bob + * + * @component + * @param {object} props - All component props + * @param {string} props.className - Any CSS classes to apply + * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const BobBack = ({ className = 'tw:w-full', // CSS classes to apply @@ -54,7 +64,7 @@ export const BobBack = ({ /* * SVG elements for the front */ -export const Front = ({ stroke }) => ( +const Front = ({ stroke }) => ( <> ( @@ -24,11 +26,13 @@ export const Breanna = ({ className, stroke = 1 }) => ( ) /** - * A linedrawing component for Breanna + * A linedrawing component for the front of Breanna * - * @param {object} props - All React props + * @component + * @param {object} props - All component props * @param {string} props.className - Any CSS classes to apply * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const BreannaFront = ({ className, stroke = 1 }) => ( @@ -36,8 +40,14 @@ export const BreannaFront = ({ className, stroke = 1 }) => ( ) -/* - * React component for the back +/** + * A linedrawing component for the back of Breanna + * + * @component + * @param {object} props - All component props + * @param {string} props.className - Any CSS classes to apply + * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const BreannaBack = ({ className = 'tw:w-full', // CSS classes to apply @@ -56,7 +66,7 @@ export const BreannaBack = ({ /* * SVG elements for the front */ -export const Front = ({ stroke }) => ( +const Front = ({ stroke }) => ( <> ( @@ -24,9 +26,11 @@ export const Brian = ({ className, stroke = 1 }) => ( /** * A linedrawing component for the front of Brian * - * @param {object} props - All React props + * @component + * @param {object} props - All component props * @param {string} props.className - Any CSS classes to apply * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const BrianFront = ({ className, stroke = 1 }) => ( @@ -34,8 +38,14 @@ export const BrianFront = ({ className, stroke = 1 }) => ( ) -/* - * React component for the back +/** + * A linedrawing component for the back of Brian + * + * @component + * @param {object} props - All component props + * @param {string} props.className - Any CSS classes to apply + * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const BrianBack = ({ className = 'tw:w-full', // CSS classes to apply @@ -54,7 +64,7 @@ export const BrianBack = ({ /* * SVG elements for the front */ -export const Front = ({ stroke }) => ( +const Front = ({ stroke }) => ( <> ( @@ -26,9 +28,11 @@ export const Bruce = ({ className, stroke = 1 }) => ( /** * A linedrawing component for the front of Bruce * - * @param {object} props - All React props + * @component + * @param {object} props - All component props * @param {string} props.className - Any CSS classes to apply * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const BruceFront = ({ className, stroke = 1 }) => ( @@ -36,8 +40,14 @@ export const BruceFront = ({ className, stroke = 1 }) => ( ) -/* - * React component for the back +/** + * A linedrawing component for the back of Bruce + * + * @component + * @param {object} props - All component props + * @param {string} props.className - Any CSS classes to apply + * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const BruceBack = ({ className = 'tw:w-full', // CSS classes to apply @@ -56,7 +66,7 @@ export const BruceBack = ({ /* * SVG elements for the front */ -export const Front = ({ stroke }) => ( +const Front = ({ stroke }) => ( <> ( @@ -24,9 +26,11 @@ export const Carlita = ({ className, stroke = 1 }) => ( /** * A linedrawing component for the front of Carlita * - * @param {object} props - All React props + * @component + * @param {object} props - All component props * @param {string} props.className - Any CSS classes to apply * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const CarlitaFront = ({ className, stroke = 1 }) => ( @@ -34,8 +38,14 @@ export const CarlitaFront = ({ className, stroke = 1 }) => ( ) -/* - * React component for the back +/** + * A linedrawing component for the back of Carlita + * + * @component + * @param {object} props - All component props + * @param {string} props.className - Any CSS classes to apply + * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const CarlitaBack = ({ className = 'w-64', // CSS classes to apply @@ -54,7 +64,7 @@ export const CarlitaBack = ({ /* * SVG elements for the front */ -export const Front = ({ stroke }) => ( +const Front = ({ stroke }) => ( <> ( @@ -24,9 +26,11 @@ export const Carlton = ({ className, stroke = 1 }) => ( /** * A linedrawing component for the front of Carlton * - * @param {object} props - All React props + * @component + * @param {object} props - All component props * @param {string} props.className - Any CSS classes to apply * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const CarltonFront = ({ className, stroke = 1 }) => ( @@ -34,8 +38,14 @@ export const CarltonFront = ({ className, stroke = 1 }) => ( ) -/* - * React component for the back +/** + * A linedrawing component for the back of Carlton + * + * @component + * @param {object} props - All component props + * @param {string} props.className - Any CSS classes to apply + * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const CarltonBack = ({ className = 'w-64', // CSS classes to apply @@ -54,7 +64,7 @@ export const CarltonBack = ({ /* * SVG elements for the front */ -export const Front = ({ stroke }) => ( +const Front = ({ stroke }) => ( <> ( @@ -24,9 +26,11 @@ export const Charlie = ({ className, stroke = 1 }) => ( /** * A linedrawing component for the front of Charlie * - * @param {object} props - All React props + * @component + * @param {object} props - All component props * @param {string} props.className - Any CSS classes to apply * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const CharlieFront = ({ className, stroke = 1 }) => ( @@ -34,8 +38,14 @@ export const CharlieFront = ({ className, stroke = 1 }) => ( ) -/* - * React component for the back +/** + * A linedrawing component for the back of Charlie + * + * @component + * @param {object} props - All component props + * @param {string} props.className - Any CSS classes to apply + * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const CharlieBack = ({ className = 'w-64', // CSS classes to apply @@ -54,7 +64,7 @@ export const CharlieBack = ({ /* * SVG elements for the front */ -export const Front = ({ stroke }) => ( +const Front = ({ stroke }) => ( <> ( @@ -24,9 +26,11 @@ export const Cornelius = ({ className, stroke = 1 }) => ( /** * A linedrawing component for the front of Cornelius * - * @param {object} props - All React props + * @component + * @param {object} props - All component props * @param {string} props.className - Any CSS classes to apply * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const CorneliusFront = ({ className, stroke = 1 }) => ( @@ -34,8 +38,14 @@ export const CorneliusFront = ({ className, stroke = 1 }) => ( ) -/* - * React component for the back +/** + * A linedrawing component for the back of Cornelius + * + * @component + * @param {object} props - All component props + * @param {string} props.className - Any CSS classes to apply + * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const CorneliusBack = ({ className = 'w-64', // CSS classes to apply @@ -54,7 +64,7 @@ export const CorneliusBack = ({ /* * SVG elements for the front */ -export const Front = ({ stroke }) => ( +const Front = ({ stroke }) => ( <> ( @@ -24,9 +26,11 @@ export const Diana = ({ className, stroke = 1 }) => ( /** * A linedrawing component for the front Diana * - * @param {object} props - All React props + * @component + * @param {object} props - All component props * @param {string} props.className - Any CSS classes to apply * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const DianaFront = ({ className, stroke = 1 }) => ( @@ -34,8 +38,14 @@ export const DianaFront = ({ className, stroke = 1 }) => ( ) -/* - * React component for the back +/** + * A linedrawing component for the back Diana + * + * @component + * @param {object} props - All component props + * @param {string} props.className - Any CSS classes to apply + * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const DianaBack = ({ className = 'w-64', // CSS classes to apply @@ -54,7 +64,7 @@ export const DianaBack = ({ /* * SVG elements for the front */ -export const Front = ({ stroke }) => ( +const Front = ({ stroke }) => ( <> ( @@ -20,13 +22,21 @@ export const Florence = ({ className, stroke = 1 }) => ( ) -// Front is the same +/** + * A linedrawing component for the front of Florence + * + * @component + * @param {object} props - All component props + * @param {string} props.className - Any CSS classes to apply + * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} + */ export const FlorenceFront = Florence /* * SVG elements for the front */ -export const Front = ({ stroke }) => ( +const Front = ({ stroke }) => ( <> ( @@ -20,13 +22,21 @@ export const Florent = ({ className, stroke = 1 }) => ( ) -// Front is the same +/** + * A linedrawing component for the front of Florent + * + * @component + * @param {object} props - All component props + * @param {string} props.className - Any CSS classes to apply + * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} + */ export const FlorentFront = Florent /* * SVG elements for the front */ -export const Front = ({ stroke }) => ( +const Front = ({ stroke }) => ( <> ( @@ -24,9 +26,11 @@ export const Gozer = ({ className, stroke = 1 }) => ( /** * A linedrawing component for the front of Gozer * - * @param {object} props - All React props + * @component + * @param {object} props - All component props * @param {string} props.className - Any CSS classes to apply * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const GozerFront = ({ className, stroke = 1 }) => ( @@ -34,8 +38,14 @@ export const GozerFront = ({ className, stroke = 1 }) => ( ) -/* - * React component for the back +/** + * A linedrawing component for the back of Gozer + * + * @component + * @param {object} props - All component props + * @param {string} props.className - Any CSS classes to apply + * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const GozerBack = ({ className = 'w-64', // CSS classes to apply @@ -54,7 +64,7 @@ export const GozerBack = ({ /* * SVG elements for the front */ -export const Front = ({ stroke }) => ( +const Front = ({ stroke }) => ( <> ( @@ -20,13 +22,21 @@ export const Hi = ({ className, stroke = 1 }) => ( ) -// Front is the same +/** + * A linedrawing component for the front of Hi + * + * @component + * @param {object} props - All component props + * @param {string} props.className - Any CSS classes to apply + * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} + */ export const HiFront = Hi /* * SVG elements for the front */ -export const Front = ({ stroke }) => ( +const Front = ({ stroke }) => ( <> ( @@ -20,13 +22,21 @@ export const Holmes = ({ className, stroke = 1 }) => ( ) -// Front is the same +/** + * A linedrawing component for the front of Holmes + * + * @component + * @param {object} props - All component props + * @param {string} props.className - Any CSS classes to apply + * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} + */ export const HolmesFront = Holmes /* * SVG elements for the front */ -export const Front = ({ stroke }) => ( +const Front = ({ stroke }) => ( <> ( @@ -20,7 +22,15 @@ export const Hortensia = ({ className, stroke = 1 }) => ( ) -// Front is the same +/** + * A linedrawing component for the front of Hortensia + * + * @component + * @param {object} props - All component props + * @param {string} props.className - Any CSS classes to apply + * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} + */ export const HortensiaFront = Hortensia /* diff --git a/packages/react/components/LineDrawing/huey.mjs b/packages/react/components/LineDrawing/huey.mjs index 1341fc7df8d..01c80fc2741 100644 --- a/packages/react/components/LineDrawing/huey.mjs +++ b/packages/react/components/LineDrawing/huey.mjs @@ -10,9 +10,11 @@ const strokeScale = 0.7 /** * A linedrawing component for Huey * - * @param {object} props - All React props + * @component + * @param {object} props - All component props * @param {string} props.className - Any CSS classes to apply * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const Huey = ({ className, stroke = 1 }) => ( @@ -24,9 +26,11 @@ export const Huey = ({ className, stroke = 1 }) => ( /** * A linedrawing component for front of Huey * - * @param {object} props - All React props + * @component + * @param {object} props - All component props * @param {string} props.className - Any CSS classes to apply * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const HueyFront = ({ className, stroke = 1 }) => ( @@ -54,7 +58,7 @@ export const HueyBack = ({ /* * SVG elements for the front */ -export const Front = ({ stroke }) => ( +const Front = ({ stroke }) => ( <> ( @@ -24,9 +26,11 @@ export const Hugo = ({ className, stroke = 1 }) => ( /** * A linedrawing component for the front of Hugo * - * @param {object} props - All React props + * @component + * @param {object} props - All component props * @param {string} props.className - Any CSS classes to apply * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const HugoFront = ({ className, stroke = 1 }) => ( @@ -34,8 +38,14 @@ export const HugoFront = ({ className, stroke = 1 }) => ( ) -/* - * React component for the back +/** + * A linedrawing component for the back of Hugo + * + * @component + * @param {object} props - All component props + * @param {string} props.className - Any CSS classes to apply + * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const HugoBack = ({ className = 'w-64', // CSS classes to apply @@ -54,7 +64,7 @@ export const HugoBack = ({ /* * SVG elements for the front */ -export const Front = ({ stroke }) => ( +const Front = ({ stroke }) => ( <> ( @@ -22,11 +24,13 @@ export const Jane = ({ className, stroke = 1 }) => ( ) /** - * A linedrawing component for the front of Aaron + * A linedrawing component for the front of Jane * - * @param {object} props - All React props + * @component + * @param {object} props - All component props * @param {string} props.className - Any CSS classes to apply * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const JaneFront = ({ className, stroke = 1 }) => ( @@ -35,11 +39,13 @@ export const JaneFront = ({ className, stroke = 1 }) => ( ) /** - * A linedrawing component for the front of Aaron + * A linedrawing component for the back of Jane * - * @param {object} props - All React props + * @component + * @param {object} props - All component props * @param {string} props.className - Any CSS classes to apply * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const JaneBack = ({ className, stroke = 1 }) => ( @@ -50,7 +56,7 @@ export const JaneBack = ({ className, stroke = 1 }) => ( /* * SVG elements for the front */ -export const Front = ({ stroke }) => ( +const Front = ({ stroke }) => ( <> ( @@ -20,13 +22,21 @@ export const Lucy = ({ className, stroke = 1 }) => ( ) -// Front is the same +/** + * A linedrawing component for the front of Lucy + * + * @component + * @param {object} props - All component props + * @param {string} props.className - Any CSS classes to apply + * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} + */ export const LucyFront = Lucy /* * SVG elements for the front */ -export const Front = ({ stroke }) => ( +const Front = ({ stroke }) => ( <> ( @@ -24,9 +26,11 @@ export const Lumina = ({ className, stroke = 1 }) => ( /** * A linedrawing component for the front of Lumina * - * @param {object} props - All React props + * @component + * @param {object} props - All component props * @param {string} props.className - Any CSS classes to apply * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const LuminaFront = ({ className, stroke = 1 }) => ( @@ -34,8 +38,14 @@ export const LuminaFront = ({ className, stroke = 1 }) => ( ) -/* - * React component for the back +/** + * A linedrawing component for the back of Lumina + * + * @component + * @param {object} props - All component props + * @param {string} props.className - Any CSS classes to apply + * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const LuminaBack = ({ className = 'w-64', // CSS classes to apply @@ -54,7 +64,7 @@ export const LuminaBack = ({ /* * SVG elements for the front */ -export const Front = ({ stroke }) => ( +const Front = ({ stroke }) => ( <> ( @@ -24,9 +26,11 @@ export const Lumira = ({ className, stroke = 1 }) => ( /** * A linedrawing component for the front of Lumira * - * @param {object} props - All React props + * @component + * @param {object} props - All component props * @param {string} props.className - Any CSS classes to apply * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const LumiraFront = ({ className, stroke = 1 }) => ( @@ -34,8 +38,14 @@ export const LumiraFront = ({ className, stroke = 1 }) => ( ) -/* - * React component for the back +/** + * A linedrawing component for the back of Lumira + * + * @component + * @param {object} props - All component props + * @param {string} props.className - Any CSS classes to apply + * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const LumiraBack = ({ className = 'w-64', // CSS classes to apply @@ -54,7 +64,7 @@ export const LumiraBack = ({ /* * SVG elements for the front */ -export const Front = ({ stroke }) => ( +const Front = ({ stroke }) => ( <> ( @@ -20,13 +22,21 @@ export const Lunetius = ({ className, stroke = 1 }) => ( ) -// Front is the same +/** + * A linedrawing component for the front of Lunetius + * + * @component + * @param {object} props - All component props + * @param {string} props.className - Any CSS classes to apply + * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} + */ export const LunetiusFront = Lunetius /* * SVG elements for the front */ -export const Front = ({ stroke }) => ( +const Front = ({ stroke }) => ( <> ( diff --git a/packages/react/components/LineDrawing/noble.mjs b/packages/react/components/LineDrawing/noble.mjs index 96bca69bf61..8b8ba0d93b5 100644 --- a/packages/react/components/LineDrawing/noble.mjs +++ b/packages/react/components/LineDrawing/noble.mjs @@ -10,9 +10,11 @@ const strokeScale = 0.4 /** * A linedrawing component for Noble * - * @param {object} props - All React props + * @component + * @param {object} props - All component props * @param {string} props.className - Any CSS classes to apply * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const Noble = ({ className, stroke = 1 }) => ( @@ -24,9 +26,11 @@ export const Noble = ({ className, stroke = 1 }) => ( /** * A linedrawing component for the front of Noble * - * @param {object} props - All React props + * @component + * @param {object} props - All component props * @param {string} props.className - Any CSS classes to apply * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const NobleFront = ({ className, stroke = 1 }) => ( @@ -34,8 +38,14 @@ export const NobleFront = ({ className, stroke = 1 }) => ( ) -/* - * React component for the back +/** + * A linedrawing component for the back of Noble + * + * @component + * @param {object} props - All component props + * @param {string} props.className - Any CSS classes to apply + * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const NobleBack = ({ className = 'w-64', // CSS classes to apply @@ -54,7 +64,7 @@ export const NobleBack = ({ /* * SVG elements for the front */ -export const Front = ({ stroke }) => ( +const Front = ({ stroke }) => ( <> ( @@ -24,9 +26,11 @@ export const Simon = ({ className, stroke = 1 }) => ( /** * A linedrawing component for the front of Simon * - * @param {object} props - All React props + * @component + * @param {object} props - All component props * @param {string} props.className - Any CSS classes to apply * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const SimonFront = ({ className, stroke = 1 }) => ( @@ -34,8 +38,14 @@ export const SimonFront = ({ className, stroke = 1 }) => ( ) -/* - * React component for the back +/** + * A linedrawing component for the back of Simon + * + * @component + * @param {object} props - All component props + * @param {string} props.className - Any CSS classes to apply + * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const SimonBack = ({ className = 'w-64', // CSS classes to apply diff --git a/packages/react/components/LineDrawing/teagan.mjs b/packages/react/components/LineDrawing/teagan.mjs index bec323ad736..be686763ef0 100644 --- a/packages/react/components/LineDrawing/teagan.mjs +++ b/packages/react/components/LineDrawing/teagan.mjs @@ -10,9 +10,11 @@ const strokeScale = 0.5 /** * A linedrawing component for Teagan * - * @param {object} props - All React props + * @component + * @param {object} props - All component props * @param {string} props.className - Any CSS classes to apply * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const Teagan = ({ className, stroke = 1 }) => ( @@ -24,9 +26,11 @@ export const Teagan = ({ className, stroke = 1 }) => ( /** * A linedrawing component for the front of Teagan * - * @param {object} props - All React props + * @component + * @param {object} props - All component props * @param {string} props.className - Any CSS classes to apply * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const TeaganFront = ({ className, stroke = 1 }) => ( @@ -34,8 +38,14 @@ export const TeaganFront = ({ className, stroke = 1 }) => ( ) -/* - * React component for the back +/** + * A linedrawing component for the back of Teagan + * + * @component + * @param {object} props - All component props + * @param {string} props.className - Any CSS classes to apply + * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const TeaganBack = ({ className = 'w-64', // CSS classes to apply @@ -54,7 +64,7 @@ export const TeaganBack = ({ /* * SVG elements for the front */ -export const Front = ({ stroke }) => ( +const Front = ({ stroke }) => ( <> ( @@ -24,9 +26,11 @@ export const Tristan = ({ className, stroke = 1 }) => ( /** * A linedrawing component for the front of Tristan * - * @param {object} props - All React props + * @component + * @param {object} props - All component props * @param {string} props.className - Any CSS classes to apply * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const TristanFront = ({ className, stroke = 1 }) => ( @@ -34,8 +38,14 @@ export const TristanFront = ({ className, stroke = 1 }) => ( ) -/* - * React component for the back +/** + * A linedrawing component for the back of Tristan + * + * @component + * @param {object} props - All component props + * @param {string} props.className - Any CSS classes to apply + * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const TristanBack = ({ className = 'w-64', // CSS classes to apply @@ -54,7 +64,7 @@ export const TristanBack = ({ /* * SVG elements for the front */ -export const Front = ({ stroke }) => ( +const Front = ({ stroke }) => ( <> ( @@ -24,9 +26,11 @@ export const Uma = ({ className, stroke = 1 }) => ( /** * A linedrawing component for the front of Uma * - * @param {object} props - All React props + * @component + * @param {object} props - All component props * @param {string} props.className - Any CSS classes to apply * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const UmaFront = ({ className, stroke = 1 }) => ( @@ -34,8 +38,14 @@ export const UmaFront = ({ className, stroke = 1 }) => ( ) -/* - * React component for the back +/** + * A linedrawing component for the back of Uma + * + * @component + * @param {object} props - All component props + * @param {string} props.className - Any CSS classes to apply + * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const UmaBack = ({ className = 'w-64', // CSS classes to apply @@ -54,7 +64,7 @@ export const UmaBack = ({ /* * SVG elements for the front */ -export const Front = ({ stroke }) => ( +const Front = ({ stroke }) => ( <> ( @@ -24,9 +26,11 @@ export const Umbra = ({ className, stroke = 1 }) => ( /** * A linedrawing component for the front of Umbra * - * @param {object} props - All React props + * @component + * @param {object} props - All component props * @param {string} props.className - Any CSS classes to apply * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const UmbraFront = ({ className, stroke = 1 }) => ( @@ -34,8 +38,14 @@ export const UmbraFront = ({ className, stroke = 1 }) => ( ) -/* - * React component for the back +/** + * A linedrawing component for the back of Umbra + * + * @component + * @param {object} props - All component props + * @param {string} props.className - Any CSS classes to apply + * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const UmbraBack = ({ className = 'w-64', // CSS classes to apply @@ -54,7 +64,7 @@ export const UmbraBack = ({ /* * SVG elements for the front */ -export const Front = ({ stroke }) => ( +const Front = ({ stroke }) => ( <> ( @@ -24,9 +26,11 @@ export const Wahid = ({ className, stroke = 1 }) => ( /** * A linedrawing component for the front of Wahid * - * @param {object} props - All React props + * @component + * @param {object} props - All component props * @param {string} props.className - Any CSS classes to apply * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} */ export const WahidFront = ({ className, stroke = 1 }) => ( @@ -34,6 +38,15 @@ export const WahidFront = ({ className, stroke = 1 }) => ( ) +/** + * A linedrawing component for the back of Wahid + * + * @component + * @param {object} props - All component props + * @param {string} props.className - Any CSS classes to apply + * @param {number} props.stroke - The stroke width to apply + * @returns {JSX.Element} + */ export const WahidBack = ({ className = 'w-64', // CSS classes to apply stroke = 1, // Stroke width to use @@ -68,7 +81,7 @@ const defs = ( /* * React component for the front */ -export const Front = ({ stroke }) => ( +const Front = ({ stroke }) => ( <> {defs} ../../sites/dev/prebuild/jsdoc/react/co jsdoc -c jsdoc.json components/Json/* > ../../sites/dev/prebuild/jsdoc/react/components/json.json jsdoc -c jsdoc.json components/KeyVal/* > ../../sites/dev/prebuild/jsdoc/react/components/keyval.json jsdoc -c jsdoc.json components/Layout/* > ../../sites/dev/prebuild/jsdoc/react/components/layout.json +jsdoc -c jsdoc.json components/LineDrawing/* > ../../sites/dev/prebuild/jsdoc/react/components/linedrawing.json diff --git a/sites/dev/docs/reference/packages/react/components/linedrawing/_examples.js b/sites/dev/docs/reference/packages/react/components/linedrawing/_examples.js new file mode 100644 index 00000000000..a2b8014b506 --- /dev/null +++ b/sites/dev/docs/reference/packages/react/components/linedrawing/_examples.js @@ -0,0 +1,166 @@ +import React from 'react' +import { + lineDrawings, + lineDrawingsBack, + lineDrawingsFront, +} from '@freesewing/react/components/LineDrawing' +import { capitalize } from '@freesewing/utils' + +/* + * Use this to auto-generate content in this file +export const Generate = () => { + const output = [] + // Imports (for readme.mdx) + output.push( + `import {`, + ...Object.keys(lineDrawings).map(d => ` ${capitalize(d)}Example,`), + ...Object.keys(lineDrawingsFront).map(d => ` ${capitalize(d)}FrontExample,`), + ...Object.keys(lineDrawingsBack).map(d => ` ${capitalize(d)}BackExample,`), + `} from './_examples.js'`, + ) + + // List (for readme.mdx) + output.push( + `\n\n`, + ...[ + ...Object.keys(lineDrawings).map(d => ` - [${capitalize(d)}](#${d})`), + ...Object.keys(lineDrawingsFront).map(d => ` - [${capitalize(d)}Front](#${d}front)`), + ...Object.keys(lineDrawingsBack).map(d => ` - [${capitalize(d)}Back](#${d}back)`), + ].sort() + ) + + // Docs (for readme.mdx) + output.push( + `\n\n`, + ...[ + ...Object.keys(lineDrawings).map(d => `## ${capitalize(d)}\n\n`), + ...Object.keys(lineDrawingsFront).map(d => `## ${capitalize(d)}Front\n\n`), + ...Object.keys(lineDrawingsBack).map(d => `## ${capitalize(d)}Back\n\n`), + ].sort() + ) + + // Exports (for _examples.js) + output.push( + [ + ...Object.keys(lineDrawings).map(d => `export const ${capitalize(d)}Example = () => `), + ...Object.keys(lineDrawingsFront).map(d => `export const ${capitalize(d)}FrontExample = () => `), + ...Object.keys(lineDrawingsBack).map(d => `export const ${capitalize(d)}BackExample = () => `), + ].sort().join("\n") + ) + + return 
{output.join("\n")}
+} + */ + +const NotFound = () =>

No such linedrawing

+ +const LineDrawingExample = ({ design, side=false }) => { + let Component = NotFound + if (side === 'back' && lineDrawingsBack[design]) Component = lineDrawingsBack[design] + else if (side === 'front' && lineDrawingsFront[design]) Component = lineDrawingsFront[design] + else if (lineDrawings[design]) Component = lineDrawings[design] + + return +} + +export const AaronBackExample = () => +export const AaronExample = () => +export const AaronFrontExample = () => +export const AlbertExample = () => +export const AlbertFrontExample = () => +export const BeeExample = () => +export const BeeFrontExample = () => +export const BellaBackExample = () => +export const BellaExample = () => +export const BellaFrontExample = () => +export const BenjaminExample = () => +export const BenjaminFrontExample = () => +export const BentBackExample = () => +export const BentExample = () => +export const BentFrontExample = () => +export const BibiBackExample = () => +export const BibiExample = () => +export const BibiFrontExample = () => +export const BobBackExample = () => +export const BobExample = () => +export const BobFrontExample = () => +export const BreannaBackExample = () => +export const BreannaExample = () => +export const BreannaFrontExample = () => +export const BrianBackExample = () => +export const BrianExample = () => +export const BrianFrontExample = () => +export const BruceBackExample = () => +export const BruceExample = () => +export const BruceFrontExample = () => +export const CarlitaBackExample = () => +export const CarlitaExample = () => +export const CarlitaFrontExample = () => +export const CarltonBackExample = () => +export const CarltonExample = () => +export const CarltonFrontExample = () => +export const CathrinBackExample = () => +export const CathrinExample = () => +export const CathrinFrontExample = () => +export const CharlieBackExample = () => +export const CharlieExample = () => +export const CharlieFrontExample = () => +export const CorneliusBackExample = () => +export const CorneliusExample = () => +export const CorneliusFrontExample = () => +export const DianaBackExample = () => +export const DianaExample = () => +export const DianaFrontExample = () => +export const FlorenceExample = () => +export const FlorenceFrontExample = () => +export const FlorentExample = () => +export const FlorentFrontExample = () => +export const GozerBackExample = () => +export const GozerExample = () => +export const GozerFrontExample = () => +export const HiExample = () => +export const HiFrontExample = () => +export const HolmesExample = () => +export const HolmesFrontExample = () => +export const HortensiaExample = () => +export const HortensiaFrontExample = () => +export const HueyBackExample = () => +export const HueyExample = () => +export const HueyFrontExample = () => +export const HugoBackExample = () => +export const HugoExample = () => +export const HugoFrontExample = () => +export const JaneBackExample = () => +export const JaneExample = () => +export const JaneFrontExample = () => +export const LucyExample = () => +export const LucyFrontExample = () => +export const LuminaBackExample = () => +export const LuminaExample = () => +export const LuminaFrontExample = () => +export const LumiraBackExample = () => +export const LumiraExample = () => +export const LumiraFrontExample = () => +export const LunetiusExample = () => +export const LunetiusFrontExample = () => +export const NobleBackExample = () => +export const NobleExample = () => +export const NobleFrontExample = () => +export const SimonBackExample = () => +export const SimonExample = () => +export const SimonFrontExample = () => +export const TeaganBackExample = () => +export const TeaganExample = () => +export const TeaganFrontExample = () => +export const TristanBackExample = () => +export const TristanExample = () => +export const TristanFrontExample = () => +export const UmaBackExample = () => +export const UmaExample = () => +export const UmaFrontExample = () => +export const UmbraBackExample = () => +export const UmbraExample = () => +export const UmbraFrontExample = () => +export const WahidBackExample = () => +export const WahidExample = () => +export const WahidFrontExample = () => diff --git a/sites/dev/docs/reference/packages/react/components/linedrawing/readme.mdx b/sites/dev/docs/reference/packages/react/components/linedrawing/readme.mdx index f9c9d636bb8..cf95c2585dd 100644 --- a/sites/dev/docs/reference/packages/react/components/linedrawing/readme.mdx +++ b/sites/dev/docs/reference/packages/react/components/linedrawing/readme.mdx @@ -2,6 +2,537 @@ title: Linedrawing --- -:::note -This page is yet to be created +import { DocusaurusDoc } from '@freesewing/react/components/Docusaurus' +import { ComponentDocs } from '@site/src/components/component-docs.js' +import * as jsdoc from '@site/prebuild/jsdoc/components.linedrawing.mjs' +import { + AaronExample, + AlbertExample, + BeeExample, + BellaExample, + BenjaminExample, + BentExample, + BibiExample, + BobExample, + BreannaExample, + BrianExample, + BruceExample, + CarlitaExample, + CarltonExample, + CathrinExample, + CharlieExample, + CorneliusExample, + DianaExample, + FlorenceExample, + FlorentExample, + GozerExample, + HiExample, + HolmesExample, + HortensiaExample, + HueyExample, + HugoExample, + JaneExample, + LucyExample, + LuminaExample, + LumiraExample, + LunetiusExample, + NobleExample, + SimonExample, + TeaganExample, + TristanExample, + UmaExample, + UmbraExample, + WahidExample, + AaronFrontExample, + AlbertFrontExample, + BeeFrontExample, + BellaFrontExample, + BenjaminFrontExample, + BentFrontExample, + BibiFrontExample, + BobFrontExample, + BreannaFrontExample, + BrianFrontExample, + BruceFrontExample, + CarlitaFrontExample, + CarltonFrontExample, + CathrinFrontExample, + CharlieFrontExample, + CorneliusFrontExample, + DianaFrontExample, + FlorenceFrontExample, + FlorentFrontExample, + GozerFrontExample, + HiFrontExample, + HolmesFrontExample, + HortensiaFrontExample, + HueyFrontExample, + HugoFrontExample, + JaneFrontExample, + LucyFrontExample, + LuminaFrontExample, + LumiraFrontExample, + LunetiusFrontExample, + NobleFrontExample, + SimonFrontExample, + TeaganFrontExample, + TristanFrontExample, + UmaFrontExample, + UmbraFrontExample, + WahidFrontExample, + AaronBackExample, + BellaBackExample, + BentBackExample, + BibiBackExample, + BobBackExample, + BreannaBackExample, + BrianBackExample, + BruceBackExample, + CarlitaBackExample, + CarltonBackExample, + CathrinBackExample, + CharlieBackExample, + CorneliusBackExample, + DianaBackExample, + GozerBackExample, + HueyBackExample, + HugoBackExample, + JaneBackExample, + LuminaBackExample, + LumiraBackExample, + NobleBackExample, + SimonBackExample, + TeaganBackExample, + TristanBackExample, + UmaBackExample, + UmbraBackExample, + WahidBackExample, +} from './_examples.js' + + + +:::tip +This component family also exports the following helper objects: + +- `lineDrawings`: An object where the key is the design name and the value the full LineDrawing component +- `lineDrawingsBack`: An object where the key is the design name and the value the back LineDrawing component +- `lineDrawingsFront`: An object where the key is the design name and the value the front LineDrawing component ::: + +:::warning +All FreeSewing designs SHOULD have the full and front line drawing component. +The back component is optional. + +If there is no specific front component, the front component MUST be exported as a copy of the full component. +::: + +The __LineDrawing__ component family provides the following components: + + - [AaronBack](#aaronback) + - [AaronFront](#aaronfront) + - [Aaron](#aaron) + - [AlbertFront](#albertfront) + - [Albert](#albert) + - [BeeFront](#beefront) + - [Bee](#bee) + - [BellaBack](#bellaback) + - [BellaFront](#bellafront) + - [Bella](#bella) + - [BenjaminFront](#benjaminfront) + - [Benjamin](#benjamin) + - [BentBack](#bentback) + - [BentFront](#bentfront) + - [Bent](#bent) + - [BibiBack](#bibiback) + - [BibiFront](#bibifront) + - [Bibi](#bibi) + - [BobBack](#bobback) + - [BobFront](#bobfront) + - [Bob](#bob) + - [BreannaBack](#breannaback) + - [BreannaFront](#breannafront) + - [Breanna](#breanna) + - [BrianBack](#brianback) + - [BrianFront](#brianfront) + - [Brian](#brian) + - [BruceBack](#bruceback) + - [BruceFront](#brucefront) + - [Bruce](#bruce) + - [CarlitaBack](#carlitaback) + - [CarlitaFront](#carlitafront) + - [Carlita](#carlita) + - [CarltonBack](#carltonback) + - [CarltonFront](#carltonfront) + - [Carlton](#carlton) + - [CathrinBack](#cathrinback) + - [CathrinFront](#cathrinfront) + - [Cathrin](#cathrin) + - [CharlieBack](#charlieback) + - [CharlieFront](#charliefront) + - [Charlie](#charlie) + - [CorneliusBack](#corneliusback) + - [CorneliusFront](#corneliusfront) + - [Cornelius](#cornelius) + - [DianaBack](#dianaback) + - [DianaFront](#dianafront) + - [Diana](#diana) + - [FlorenceFront](#florencefront) + - [Florence](#florence) + - [FlorentFront](#florentfront) + - [Florent](#florent) + - [GozerBack](#gozerback) + - [GozerFront](#gozerfront) + - [Gozer](#gozer) + - [HiFront](#hifront) + - [Hi](#hi) + - [HolmesFront](#holmesfront) + - [Holmes](#holmes) + - [HortensiaFront](#hortensiafront) + - [Hortensia](#hortensia) + - [HueyBack](#hueyback) + - [HueyFront](#hueyfront) + - [Huey](#huey) + - [HugoBack](#hugoback) + - [HugoFront](#hugofront) + - [Hugo](#hugo) + - [JaneBack](#janeback) + - [JaneFront](#janefront) + - [Jane](#jane) + - [LucyFront](#lucyfront) + - [Lucy](#lucy) + - [LuminaBack](#luminaback) + - [LuminaFront](#luminafront) + - [Lumina](#lumina) + - [LumiraBack](#lumiraback) + - [LumiraFront](#lumirafront) + - [Lumira](#lumira) + - [LunetiusFront](#lunetiusfront) + - [Lunetius](#lunetius) + - [NobleBack](#nobleback) + - [NobleFront](#noblefront) + - [Noble](#noble) + - [SimonBack](#simonback) + - [SimonFront](#simonfront) + - [Simon](#simon) + - [TeaganBack](#teaganback) + - [TeaganFront](#teaganfront) + - [Teagan](#teagan) + - [TristanBack](#tristanback) + - [TristanFront](#tristanfront) + - [Tristan](#tristan) + - [UmaBack](#umaback) + - [UmaFront](#umafront) + - [Uma](#uma) + - [UmbraBack](#umbraback) + - [UmbraFront](#umbrafront) + - [Umbra](#umbra) + - [WahidBack](#wahidback) + - [WahidFront](#wahidfront) + - [Wahid](#wahid) + + + +## Aaron + + +## AaronBack + + +## AaronFront + + +## Albert + + +## AlbertFront + + +## Bee + + +## BeeFront + + +## Bella + + +## BellaBack + + +## BellaFront + + +## Benjamin + + +## BenjaminFront + + +## Bent + + +## BentBack + + +## BentFront + + +## Bibi + + +## BibiBack + + +## BibiFront + + +## Bob + + +## BobBack + + +## BobFront + + +## Breanna + + +## BreannaBack + + +## BreannaFront + + +## Brian + + +## BrianBack + + +## BrianFront + + +## Bruce + + +## BruceBack + + +## BruceFront + + +## Carlita + + +## CarlitaBack + + +## CarlitaFront + + +## Carlton + + +## CarltonBack + + +## CarltonFront + + +## Cathrin + + +## CathrinBack + + +## CathrinFront + + +## Charlie + + +## CharlieBack + + +## CharlieFront + + +## Cornelius + + +## CorneliusBack + + +## CorneliusFront + + +## Diana + + +## DianaBack + + +## DianaFront + + +## Florence + + +## FlorenceFront + + +## Florent + + +## FlorentFront + + +## Gozer + + +## GozerBack + + +## GozerFront + + +## Hi + + +## HiFront + + +## Holmes + + +## HolmesFront + + +## Hortensia + + +## HortensiaFront + + +## Huey + + +## HueyBack + + +## HueyFront + + +## Hugo + + +## HugoBack + + +## HugoFront + + +## Jane + + +## JaneBack + + +## JaneFront + + +## Lucy + + +## LucyFront + + +## Lumina + + +## LuminaBack + + +## LuminaFront + + +## Lumira + + +## LumiraBack + + +## LumiraFront + + +## Lunetius + + +## LunetiusFront + + +## Noble + + +## NobleBack + + +## NobleFront + + +## Simon + + +## SimonBack + + +## SimonFront + + +## Teagan + + +## TeaganBack + + +## TeaganFront + + +## Tristan + + +## TristanBack + + +## TristanFront + + +## Uma + + +## UmaBack + + +## UmaFront + + +## Umbra + + +## UmbraBack + + +## UmbraFront + + +## Wahid + + +## WahidBack + + +## WahidFront + + +