[react] feat: Added docs for components/Layout

packages/react/components/Layout/index.mjs

@@ -2,15 +2,17 @@ import React from 'react'
 import { Breadcrumbs } from '@freesewing/react/components/Breadcrumbs'
 import { Link as DefaultLink } from '@freesewing/react/components/Link'
 
-/*
+/**
  * This is the default layout, including title and breadcrumbs
  *
- * @param {object} props - All React props
- * @param {array} props.children - The content to go in the layout
- * @param {array} props.crumbs - Data for the breadcrumbs
+ * @component
+ * @param {object} props - All component props
+ * @param {function} [props.Link = false] - An optional framework specific Link component
+ * @param {JSX.Element} [props.children = []] - The component children to render inside the layout
+ * @param {array} [props.crumbs = []] - Data for the breadcrumbs, see Breadcrumbs
  * @param {string} props.description - The page description
- * @param {function} props.Link - An optional framework specific Link component
  * @param {string} props.title - The page title
+ * @returns {JSX.Element}
  */
 export const Layout = ({ children = [], crumbs = [], description, Link = false, title }) => {
   if (!Link) Link = DefaultLink
@@ -26,11 +28,13 @@ export const Layout = ({ children = [], crumbs = [], description, Link = false,
   )
 }
 
-/*
+/**
  * This is the base layout
  *
- * @param {object} props - All React props
- * @param {array} props.children - The content to go in the layout
+ * @component
+ * @param {object} props - All component props
+ * @param {JSX.Element} [props.children = []] - The component children to render inside the layout
+ * @returns {JSX.Element}
  */
 export const BaseLayout = ({ children }) => (
   <div className="tw:flex tw:flex-row tw:items-start tw:w-full tw:justify-between tw:2xl:px-36 tw:xl:px-12 tw:px-4 tw:gap-0 tw:lg:gap-4 tw:xl:gap-8 3xl:tw:gap-12">
@@ -38,11 +42,13 @@ export const BaseLayout = ({ children }) => (
   </div>
 )
 
-/*
+/**
  * The left column of the base layout
  *
- * @param {object} props - All React props
- * @param {array} props.children - The content to go in the layout
+ * @component
+ * @param {object} props - All component props
+ * @param {JSX.Element} [props.children = []] - The component children to render inside the layout
+ * @returns {JSX.Element}
  */
 export const BaseLayoutLeft = ({ children = [] }) => (
   <div className="tw:max-w-96 tw:w-1/4 tw:hidden tw:lg:block tw:shrink-0 tw:my-8 tw:sticky tw:top-4 tw:max-h-screen tw:overflow-scroll">
@@ -50,11 +56,13 @@ export const BaseLayoutLeft = ({ children = [] }) => (
   </div>
 )
 
-/*
+/**
  * The right column of the base layout
  *
- * @param {object} props - All React props
- * @param {array} props.children - The content to go in the layout
+ * @component
+ * @param {object} props - All component props
+ * @param {JSX.Element} [props.children = []] - The component children to render inside the layout
+ * @returns {JSX.Element}
  */
 export const BaseLayoutRight = ({ children = [] }) => (
   <div className="tw:max-w-96 tw:w-1/4 tw:hidden tw:xl:block tw:my-8 tw:sticky tw:top-2">
@@ -62,12 +70,14 @@ export const BaseLayoutRight = ({ children = [] }) => (
   </div>
 )
 
-/*
+/**
  * The main column for prose (text like docs and so on)
  *
- * @param {object} props - All React props
- * @param {array} props.children - The content to go in the layout
- * @param {array} props.wide - Whether or not to use the wide view
+ * @component
+ * @param {object} props - All component props
+ * @param {JSX.Element} [props.children = []] - The component children to render inside the layout
+ * @param {boolean} [props.wide  false] - Set this to true to render a full-width prose layout
+ * @returns {JSX.Element}
  */
 export const BaseLayoutProse = ({ children = [], wide = false }) => (
   <div className={`tw:grow tw:w-full tw:m-auto tw:max-w-${wide ? 'full' : 'prose'} tw:my-8`}>
@@ -75,21 +85,25 @@ export const BaseLayoutProse = ({ children = [], wide = false }) => (
   </div>
 )
 
-/*
+/**
  * The central column for wide content (no max-width)
  *
- * @param {object} props - All React props
- * @param {array} props.children - The content to go in the layout
+ * @component
+ * @param {object} props - All component props
+ * @param {JSX.Element} [props.children = []] - The component children to render inside the layout
+ * @returns {JSX.Element}
  */
 export const BaseLayoutWide = ({ children = [] }) => (
   <div className="tw:grow tw:w-full tw:m-auto tw:my-8 tw:grow">{children}</div>
 )
 
-/*
+/**
  * A layout for pages that do their own title/layout, like the sign in page
  *
- * @param {object} props - All React props
- * @param {array} props.children - The content to go in the layout
+ * @component
+ * @param {object} props - All component props
+ * @param {JSX.Element} [props.children = []] - The component children to render inside the layout
+ * @returns {JSX.Element}
  */
 export const NoTitleLayout = ({ children }) => {
   return (