[react] feat: Added docs for components/Heading

packages/react/components/Heading/index.mjs

@@ -1,37 +1,122 @@
 import React from 'react'
 
+/**
+ * A component to renderd a styled H1 tag.
+ *
+ * Because of the TailwindCSS reset, common tags are unstyled.
+ * When you need to render a H1 tag outside of a context where it is
+ * automatically styled (such as inside markdown) you can use this.
+ * Alternatively, you can wrap your content in div.prose which will apply the
+ * styles in CSS.
+ *
+ * @component
+ * @param {object} props - All component props
+ * @param {JSX.element} props.children - The component children
+ * @returns {JSX.Element}
+ */
 export const H1 = ({ children }) => (
   <h1 className="tw:text-5xl tw:pt-5 tw:pb-4 tw:font-thin tw:tracking-tighter tw:lg:text-6xl">
     {children}
   </h1>
 )
 
+/**
+ * A component to renderd a styled H2 tag.
+ *
+ * Because of the TailwindCSS reset, common tags are unstyled.
+ * When you need to render a H2 tag outside of a context where it is
+ * automatically styled (such as inside markdown) you can use this.
+ * Alternatively, you can wrap your content in div.prose which will apply the
+ * styles in CSS.
+ *
+ * @component
+ * @param {object} props - All component props
+ * @param {JSX.element} props.children - The component children
+ * @returns {JSX.Element}
+ */
 export const H2 = ({ children }) => (
   <h2 className="tw:text-3xl tw:pt-4 tw:pb-3 tw:font-black tw:tracking-tighter tw:m-0 tw:lg:text-4xl">
     {children}
   </h2>
 )
 
+/**
+ * A component to renderd a styled H3 tag.
+ *
+ * Because of the TailwindCSS reset, common tags are unstyled.
+ * When you need to render a H3 tag outside of a context where it is
+ * automatically styled (such as inside markdown) you can use this.
+ * Alternatively, you can wrap your content in div.prose which will apply the
+ * styles in CSS.
+ *
+ * @component
+ * @param {object} props - All component props
+ * @param {JSX.element} props.children - The component children
+ * @returns {JSX.Element}
+ */
 export const H3 = ({ children }) => (
   <h3 className="tw:text-2xl tw:pt-3 tw:pb-2 tw:font-extrabold tw:m-0 tw:tracking-tighter tw:lg:text-3xl">
     {children}
   </h3>
 )
 
+/**
+ * A component to renderd a styled H4 tag.
+ *
+ * Because of the TailwindCSS reset, common tags are unstyled.
+ * When you need to render a H4 tag outside of a context where it is
+ * automatically styled (such as inside markdown) you can use this.
+ * Alternatively, you can wrap your content in div.prose which will apply the
+ * styles in CSS.
+ *
+ * @component
+ * @param {object} props - All component props
+ * @param {JSX.element} props.children - The component children
+ * @returns {JSX.Element}
+ */
 export const H4 = ({ children }) => (
   <h4 className="tw:text-xl tw:pt-2 tw:pb-1 tw:font-bold tw:m-0 tw:tracking-tighter tw:lg:text-2xl">
     {children}
   </h4>
 )
 
+/**
+ * A component to renderd a styled H5 tag.
+ *
+ * Because of the TailwindCSS reset, common tags are unstyled.
+ * When you need to render a H5 tag outside of a context where it is
+ * automatically styled (such as inside markdown) you can use this.
+ * Alternatively, you can wrap your content in div.prose which will apply the
+ * styles in CSS.
+ *
+ * @component
+ * @param {object} props - All component props
+ * @param {JSX.element} props.children - The component children
+ * @returns {JSX.Element}
+ */
 export const H5 = ({ children }) => (
   <h5 className="tw:text-lg tw:py-1 tw:font-semibold tw:m-0 tw:tracking-tight tw:lg:text-xl">
     {children}
   </h5>
 )
 
+/**
+ * A component to renderd a styled H6 tag.
+ *
+ * Because of the TailwindCSS reset, common tags are unstyled.
+ * When you need to render a H6 tag outside of a context where it is
+ * automatically styled (such as inside markdown) you can use this.
+ * Alternatively, you can wrap your content in div.prose which will apply the
+ * styles in CSS.
+ *
+ * @component
+ * @param {object} props - All component props
+ * @param {JSX.element} props.children - The component children
+ * @returns {JSX.Element}
+ */
 export const H6 = ({ children }) => (
   <h6 className="tw:text-base tw:py-1 tw:font-medium tw:italic tw:m-0 tw:tracking-tight tw:lg:text-lg">
     {children}
   </h6>
 )
+

packages/react/mkdocs.sh

@@ -11,3 +11,4 @@ jsdoc -c jsdoc.json components/CuratedSet/* > ../../sites/dev/prebuild/jsdoc/rea
 jsdoc -c jsdoc.json components/Docusaurus/* > ../../sites/dev/prebuild/jsdoc/react/components/docusaurus.json
 jsdoc -c jsdoc.json components/Echart/* > ../../sites/dev/prebuild/jsdoc/react/components/echart.json
 jsdoc -c jsdoc.json components/Editor/* > ../../sites/dev/prebuild/jsdoc/react/components/editor.json
+jsdoc -c jsdoc.json components/Heading/* > ../../sites/dev/prebuild/jsdoc/react/components/heading.json

sites/dev/docs/reference/packages/react/components/heading/_examples.js

@@ -0,0 +1,17 @@
+import React from 'react'
+import {
+  H1,
+  H2,
+  H3,
+  H4,
+  H5,
+  H6,
+} from '@freesewing/react/components/Heading'
+
+export const H1Example = () => <H1>This is H1</H1>
+export const H2Example = () => <H2>This is H2</H2>
+export const H3Example = () => <H3>This is H3</H3>
+export const H4Example = () => <H4>This is H4</H4>
+export const H5Example = () => <H5>This is H5</H5>
+export const H6Example = () => <H6>This is H6</H6>
+

sites/dev/docs/reference/packages/react/components/heading/readme.mdx

@@ -2,6 +2,53 @@
 title: Heading
 ---
 
-:::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 {
+  jsdocH1,
+  jsdocH2,
+  jsdocH3,
+  jsdocH4,
+  jsdocH5,
+  jsdocH6,
+} from '@site/prebuild/jsdoc/components.heading.mjs'
+import {
+  H1Example,
+  H2Example,
+  H3Example,
+  H4Example,
+  H5Example,
+  H6Example,
+} from './_examples.js'
+
+<DocusaurusDoc>
+
+The **Button** component family provides the following components:
+
+- [H1](#h1)
+- [H2](#h2)
+- [H3](#h3)
+- [H4](#h4)
+- [H5](#h5)
+- [H6](#h6)
+
+## H1
+<ComponentDocs docs={jsdocH1} example={H1Example} />
+
+## H2
+<ComponentDocs docs={jsdocH2} example={H2Example} />
+
+## H3
+<ComponentDocs docs={jsdocH3} example={H3Example} />
+
+## H4
+<ComponentDocs docs={jsdocH4} example={H4Example} />
+
+## H5
+<ComponentDocs docs={jsdocH5} example={H5Example} />
+
+## H6
+<ComponentDocs docs={jsdocH6} example={H6Example} />
+
+
+</DocusaurusDoc>