[react] feat: Added docs for components/Account

2025-05-09 17:46:51 +02:00 · 2025-05-09 17:46:51 +02:00 · 6d9cbf55c2
commit 6d9cbf55c2
parent f5a089f884
37 changed files with 665 additions and 277 deletions
--- a/packages/react/components/Account/Apikeys.mjs
+++ b/packages/react/components/Account/Apikeys.mjs
@ -48,11 +48,13 @@ const fields = {
  expiresAt: 'Expires',
 }

-/*
- * Component for the account/apikeys page
+/**
+ * A component to mange the user's API keys
 *
- * @params {object} props - All React props
- * @params {function} Link - A framework specific Link component for client-side routing
+ * @component
+ * @param {object} props - All component props
+ * @param {JSX.Element} [props.Link] - An optional framework-specific Link component
+ * @returns {JSX.Element}
 */
 export const Apikeys = ({ Link = false }) => {
  if (!Link) Link = WebLink
--- a/packages/react/components/Account/Avatar.mjs
+++ b/packages/react/components/Account/Avatar.mjs
@ -17,12 +17,14 @@ import { PassiveImageInput } from '@freesewing/react/components/Input'
 import { IconButton } from '@freesewing/react/components/Button'
 import { WelcomeIcons } from './shared.mjs'

-/*
- * Component for the account/bio page
+/**
+ * Component to manage the user's Avatar
 *
- * @params {object} props - All React props
- * @params {bool} props.welcome - Set to true to use this component on the welcome page
- * @params {function} props.Link - A framework specific Link component for client-side routing
+ * @component
+ * @param {object} props - All component props
+ * @param {boolean} [props.welcome = false] - Set to true to render the welcome/onboarding flow
+ * @param {function} props.Link - A framework specific Link component for client-side routing
+ * @returns {JSX.Element}
 */
 export const Avatar = ({ welcome = false, Link = false }) => {
  if (!Link) Link = WebLink
@ -98,7 +100,7 @@ export const Avatar = ({ welcome = false, Link = false }) => {
        <>
          <p className="tw:text-right">
            <button
-              className="tw:daisy-btn tw:daisy-btn-primary tw:w-full tw:lg:w-auto mt-8"
+              className="tw:daisy-btn tw:daisy-btn-primary tw:w-full tw:lg:w-auto tw:mt-4"
              onClick={save}
            >
              <SaveIcon /> Save Avatar
--- a/packages/react/components/Account/Bio.mjs
+++ b/packages/react/components/Account/Bio.mjs
@ -16,12 +16,14 @@ import { MarkdownInput } from '@freesewing/react/components/Input'
 import { IconButton } from '@freesewing/react/components/Button'
 import { WelcomeIcons } from './shared.mjs'

-/*
- * Component for the account/bio page
+/**
+ * Component to manage the user's Bio
 *
- * @params {object} props - All React props
- * @params {bool} props.welcome - Set to true to use this component on the welcome page
- * @params {function} props.Link - A framework specific Link component for client-side routing
+ * @component
+ * @param {object} props - All component props
+ * @param {boolean} [props.welcome = false] - Set to true to render the welcome/onboarding flow
+ * @param {React.Component} props.Link - A framework specific Link component for client-side routing
+ * @returns {JSX.Element}
 */
 export const Bio = ({ welcome = false, Link = false }) => {
  if (!Link) Link = WebLink
--- a/packages/react/components/Account/Bookmarks.mjs
+++ b/packages/react/components/Account/Bookmarks.mjs
@ -25,7 +25,10 @@ const types = {
 }

 /**
- * Component for the account/bookmarks page
+ * A component to manage the user's bookmarks
+ *
+ * @component
+ * @returns {JSX.Element}
 */
 export const Bookmarks = () => {
  // Hooks & Context
@ -178,7 +181,7 @@ export const Bookmarks = () => {
 * @param {object} props - All the React props
 * @param {function} onCreated - An optional method to call when the bookmark is created
 */
-export const NewBookmark = ({ onCreated = false }) => {
+const NewBookmark = ({ onCreated = false }) => {
  // Hooks
  const { setLoadingStatus } = useContext(LoadingStatusContext)
  const { clearModal } = useContext(ModalContext)
@ -242,13 +245,15 @@ export const NewBookmark = ({ onCreated = false }) => {
  )
 }

-/*
- * A component to add a bookmark from wherever
+/**
+ * Component to add a bookmark to the user's account
 *
- * @params {object} props - All React props
- * @params {string} props.href - The bookmark href
- * @params {string} props.title - The bookmark title
- * @params {string} props.type - The bookmark type
+ * @component
+ * @param {object} props - All component props
+ * @param {string} props.slug - The bookmark slug/href
+ * @param {string} props.title - The bookmark title
+ * @param {string} props.type - The bookmark type, one of design, pattern, set, cset, doc, or custom
+ * @returns {JSX.Element}
 */
 export const BookmarkButton = ({ slug, type, title }) => {
  const { setModal } = useContext(ModalContext)
@ -274,19 +279,22 @@ export const BookmarkButton = ({ slug, type, title }) => {
 /*
 * A component to create a bookmark, preloaded with props
 *
- * @params {object} props - All React props
- * @params {string} props.href - The bookmark href
- * @params {string} props.title - The bookmark title
- * @params {string} props.type - The bookmark type
- *
+ * @component
+ * @param {object} props - All component props
+ * @param {string} props.href - The bookmark href
+ * @param {string} props.title - The bookmark title
+ * @param {string} props.type - The bookmark type
+ * @returns {JSX.Element}
 */
-export const CreateBookmark = ({ type, title, slug }) => {
+const CreateBookmark = ({ type, title, slug }) => {
  const backend = useBackend()
  const [name, setName] = useState(title)
  const { setLoadingStatus } = useContext(LoadingStatusContext)
  const { setModal } = useContext(ModalContext)

-  const url = `/${slug}`
+  const url = slug.toLowerCase().slice(0,4) === 'http'
+    ? slug
+    : `/${slug}`

  const bookmark = async (evt) => {
    evt.stopPropagation()
--- a/packages/react/components/Account/Compare.mjs
+++ b/packages/react/components/Account/Compare.mjs
@ -31,11 +31,12 @@ const strings = {
  },
 }

-/*
- * Component for the account/preferences/compare page
+/**
+ * A component to manage the user's compare setting
 *
- * @params {object} props - All React props
- * @params {bool} props.welcome - Set to true to use this component on the welcome page
+ * @component
+ * @params {bool} [props.welcome = false] - Set to true to render the welcome/onboarding view
+ * @returns {JSX.Element}
 */
 export const Compare = ({ welcome = false }) => {
  // Hooks
--- a/packages/react/components/Account/Consent.mjs
+++ b/packages/react/components/Account/Consent.mjs
@ -31,12 +31,14 @@ const strings = {
  },
 }

-/*
- * Component for the account/preferences/consent page
+/**
+ * A component to manage the user's consent setting
 *
- * @params {object} props - All React props
- * @params {bool} props.signUp - Set to true to use this component on the initial signUp
- * @param {function} props.Link - An optional framework-specific Link component
+ * @component
+ * @param {object} props - All component props
+ * @param {bool} [props.signUp = false] - Set to true to use this component on the initial signUp
+ * @param {function} [props.Link = false] - An optional framework-specific Link component
+ * @returns {JSX.Element}
 */
 export const Consent = ({ signUp = false, Link = false, title = false }) => {
  if (!Link) Link = WebLink
--- a/packages/react/components/Account/Control.mjs
+++ b/packages/react/components/Account/Control.mjs
@ -34,11 +34,13 @@ const strings = {
  },
 }

-/*
- * Component for the account/preferences/control page
+/**
+ * A component to manage the user's control/UX setting
 *
- * @params {object} props - All React props
- * @params {bool} props.welcome - Set to true to use this component on the welcome page
+ * @component
+ * @param {object} props - All component props
+ * @param {bool} [props.welcome = false] - Set to true to render the welcome/onboarding view
+ * @returns {JSX.Element}
 */
 export const Control = ({ welcome = false }) => {
  // Hooks
--- a/packages/react/components/Account/Email.mjs
+++ b/packages/react/components/Account/Email.mjs
@ -17,12 +17,14 @@ import { EmailInput } from '@freesewing/react/components/Input'
 import { Popout } from '@freesewing/react/components/Popout'
 import { Spinner } from '@freesewing/react/components/Spinner'

-/*
- * Component for the account/bio page
+/**
+ * A component to manage the user's email address
 *
- * @params {object} props - All React props
- * @params {bool} props.welcome - Set to true to use this component on the welcome page
- * @params {function} props.Link - A framework specific Link component for client-side routing
+ * @component
+ * @param {object} props - All component props
+ * @param {bool} [props.welcome = false] - Set to true to render the welcome/onboarding view
+ * @param {React.Component} props.Link - A framework specific Link component for client-side routing
+ * @returns {JSX.Element}
 */
 export const Email = ({ welcome = false, Link = false }) => {
  if (!Link) Link = WebLink
@ -87,6 +89,14 @@ export const Email = ({ welcome = false, Link = false }) => {
  )
 }

+/**
+ * A component to render the confirmation after changing the user's email
+ *
+ * @component
+ * @param {object} props - All component props
+ * @param {function} [props.onSuccess = false] - A method to call after the email is changed
+ * @returns {JSX.Element}
+ */
 export const EmailChangeConfirmation = ({ onSuccess = false }) => {
  // State
  const [error, setError] = useState(false)
@ -150,7 +160,7 @@ export const EmailChangeConfirmation = ({ onSuccess = false }) => {
  if (!id || !check)
    return (
      <>
-        <h1>One moment pleae</h1>
+        <h1>One moment please</h1>
        <Spinner className="tw:w-8 tw:h-8 tw:m-auto tw:animate-spin" />
      </>
    )
--- a/packages/react/components/Account/Export.mjs
+++ b/packages/react/components/Account/Export.mjs
@ -12,8 +12,11 @@ import { DownloadIcon } from '@freesewing/react/components/Icon'
 import { Popout } from '@freesewing/react/components/Popout'
 import { IconButton } from '@freesewing/react/components/Button'

-/*
- * Component for the account/actions/export page
+/**
+ * A component to manage the user's export account data action
+ *
+ * @component
+ * @returns {JSX.Element}
 */
 export const Export = () => {
  // Hooks
--- a/packages/react/components/Account/Github.mjs
+++ b/packages/react/components/Account/Github.mjs
@ -10,8 +10,11 @@ import { useBackend } from '@freesewing/react/hooks/useBackend'
 import { SaveIcon } from '@freesewing/react/components/Icon'
 import { StringInput } from '@freesewing/react/components/Input'

-/*
- * Component for the account/social/github page
+/**
+ * A component to manage the user's Github handle in their account data
+ *
+ * @component
+ * @returns {JSX.Element}
 */
 export const Github = () => {
  // Hooks
--- a/packages/react/components/Account/Id.mjs
+++ b/packages/react/components/Account/Id.mjs
@ -5,11 +5,13 @@ import { useAccount } from '@freesewing/react/hooks/useAccount'
 // Components
 import { Link as WebLink } from '@freesewing/react/components/Link'

-/*
- * Component to display a user ID
+/**
+ * A component to display the user's ID
 *
- * @params {object} props - All React props
- * @params {function} props.Link - A framework specific Link component for client-side routing
+ * @component
+ * @param {object} props - All component props
+ * @param {React.Component} props.Link - A framework specific Link component for client-side routing
+ * @returns {JSX.Element}
 */
 export const UserId = ({ Link = false }) => {
  if (!Link) Link = WebLink
--- a/packages/react/components/Account/Import.mjs
+++ b/packages/react/components/Account/Import.mjs
@ -13,12 +13,11 @@ import { FileInput } from '@freesewing/react/components/Input'
 import { Popout } from '@freesewing/react/components/Popout'
 import { Yaml } from '@freesewing/react/components/Yaml'

-/*
- * Component for the account/bio page
+/**
+ * A component to manage the importing of a measurements set into a user's account data
 *
- * @params {object} props - All React props
- * @params {bool} props.welcome - Set to true to use this component on the welcome page
- * @params {function} props.Link - A framework specific Link component for client-side routing
+ * @component
+ * @returns {JSX.Element}
 */
 export const ImportSet = () => {
  // Hooks
--- a/packages/react/components/Account/Instagram.mjs
+++ b/packages/react/components/Account/Instagram.mjs
@ -1,64 +0,0 @@
-// Context
-import { LoadingStatusContext } from '@freesewing/react/context/LoadingStatus'
-
-// Hooks
-import React, { useState, useContext } from 'react'
-import { useAccount } from '@freesewing/react/hooks/useAccount'
-import { useBackend } from '@freesewing/react/hooks/useBackend'
-
-// Components
-import { SaveIcon } from '@freesewing/react/components/Icon'
-import { StringInput } from '@freesewing/react/components/Input'
-
-/*
- * Component for the account/social/github page
- */
-export const Instagram = () => {
-  // Hooks
-  const { account, setAccount } = useAccount()
-  const backend = useBackend()
-  const { setLoadingStatus } = useContext(LoadingStatusContext)
-
-  // State
-  const [githubUsername, setGithubUsername] = useState(account.data.githubUsername || '')
-  const [githubEmail, setGithubEmail] = useState(account.data.githubEmail || '')
-
-  // Helper method to save changes
-  const save = async () => {
-    setLoadingStatus([true, 'Saving bio'])
-    const [status, body] = await backend.updateAccount({ data: { githubUsername, githubEmail } })
-    if (status === 200 && body.result === 'success') {
-      setAccount(body.account)
-      setLoadingStatus([true, 'GitHub info updated', true, true])
-    } else setLoadingStatus([true, 'Something went wrong. Please report this', true, true])
-  }
-
-  return (
-    <div className="tw:w-full">
-      <StringInput
-        id="account-github-email"
-        label="GitHub Email Address"
-        current={githubEmail}
-        update={setGithubEmail}
-        valid={(val) => val.length > 0}
-        placeholder={'joost@joost.at'}
-      />
-      <StringInput
-        id="account-github-username"
-        label="GitHub Username"
-        current={githubUsername}
-        update={setGithubUsername}
-        valid={(val) => val.length > 0}
-        placeholder={'joostdecock'}
-      />
-      <p className="tw:text-right">
-        <button
-          className="tw:daisy-btn tw:daisy-btn-primary tw:w-full tw:lg:w-auto tw:mt-8"
-          onClick={save}
-        >
-          <SaveIcon /> Save
-        </button>
-      </p>
-    </div>
-  )
-}
--- a/packages/react/components/Account/Links.mjs
+++ b/packages/react/components/Account/Links.mjs
@ -6,7 +6,7 @@ import React, { useState, useEffect } from 'react'
 import { useAccount } from '@freesewing/react/hooks/useAccount'
 import { useBackend } from '@freesewing/react/hooks/useBackend'
 // Components
-import { Link as DefautLink } from '@freesewing/react/components/Link'
+import { Link as DefaultLink } from '@freesewing/react/components/Link'
 import { ControlScore } from '@freesewing/react/components/Control'
 import {
  MeasurementsSetIcon,
@ -96,10 +96,12 @@ const YesNo = ({ check }) => (check ? <BoolYesIcon /> : <BoolNoIcon />)
 const t = (input) => input

 /**
- * The Links component shows all of the links to manage your account
+ * A component to manage the user's Instagram handle in their account data
 *
- * @param {object} props - All the React props
- * @param {function} Link - A custom Link component, typically the Docusaurus one, but it's optional
+ * @component
+ * @param {object} props - All component props
+ * @param {React.Component} props.Link - A framework specific Link component for client-side routing
+ * @returns {JSX.Element}
 */
 export const Links = ({ Link = false }) => {
  // Use custom Link component if available
--- a/packages/react/components/Account/Mfa.mjs
+++ b/packages/react/components/Account/Mfa.mjs
@ -1,5 +1,4 @@
 // Dependencies
-import { welcomeSteps } from './shared.mjs'
 import { horFlexClasses } from '@freesewing/utils'

 // Context
@ -18,13 +17,15 @@ import { Popout } from '@freesewing/react/components/Popout'
 import { NumberCircle } from '@freesewing/react/components/Number'
 import { CopyToClipboardButton } from '@freesewing/react/components/CopyToClipboardButton'

-/*
- * Component for the account/security/password page
+/**
+ * A component to manage the user's MFA settings
 *
- * @params {object} props - All React props
- * @params {bool} props.welcome - Set to true to use this component on the welcome page
+ * @component
+ * @param {object} props - All component props
+ * @param {string} [props.title = false] - Whether or not to display a title
+ * @returns {JSX.Element}
 */
-export const Mfa = ({ welcome = false, title = true }) => {
+export const Mfa = ({ title = true }) => {
  // Hooks
  const backend = useBackend()
  const { account, setAccount } = useAccount()
--- a/packages/react/components/Account/Newsletter.mjs
+++ b/packages/react/components/Account/Newsletter.mjs
@ -18,12 +18,14 @@ import { Popout } from '@freesewing/react/components/Popout'
 import { IconButton } from '@freesewing/react/components/Button'
 import { WelcomeIcons } from './shared.mjs'

-/*
- * Component for the account/preferences/newsletter page
+/**
+ * A component to manage the user's newsletter subscription in their account data
 *
- * @params {object} props - All React props
- * @params {bool} props.welcome - Set to true to use this component on the welcome page
- * @param {function} props.Link - An optional framework-specific Link component
+ * @component
+ * @params {object} props - All Component props
+ * @param {bool} props.welcome - Set to true to use this component on the welcome page
+ * @param {React.Component} props.Link - An optional framework-specific Link component
+ * @returns {JSX.Element}
 */
 export const Newsletter = ({ welcome = false, Link = false }) => {
  if (!Link) Link = WebLink
--- a/packages/react/components/Account/Password.mjs
+++ b/packages/react/components/Account/Password.mjs
@ -16,11 +16,14 @@ import { RightIcon, SaveIcon } from '@freesewing/react/components/Icon'
 import { PasswordInput } from '@freesewing/react/components/Input'
 import { Popout } from '@freesewing/react/components/Popout'

-/*
- * Component for the account/security/password page
+/**
+ * A component to manage the user's password
 *
- * @params {object} props - All React props
- * @params {bool} props.welcome - Set to true to use this component on the welcome page
+ * @component
+ * @param {object} props - All component props
+ * @param {bool} [props.welcome = false] - Set to true to render the welcome/onboarding view
+ * @param {React.Component} props.Link - A framework specific Link component for client-side routing
+ * @returns {JSX.Element}
 */
 export const Password = ({ welcome = false, Link = false }) => {
  if (!Link) Link = WebLink
--- a/packages/react/components/Account/Pattern.mjs
+++ b/packages/react/components/Account/Pattern.mjs
@ -48,6 +48,15 @@ import { Popout } from '@freesewing/react/components/Popout'
 import { ModalWrapper } from '@freesewing/react/components/Modal'
 import { KeyVal } from '@freesewing/react/components/KeyVal'

+/**
+ * A component to manage a pattern in the user's account data
+ *
+ * @component
+ * @param {object} props - All component props
+ * @param {number} props.id - The pattern ID to load
+ * @param {React.Component} props.Link - A framework specific Link component for client-side routing
+ * @returns {JSX.Element}
+ */
 export const Pattern = ({ id, Link }) => {
  if (!Link) Link = WebLink
  // Hooks
@ -254,6 +263,21 @@ export const Pattern = ({ id, Link }) => {
  )
 }

+/**
+ * A component to display a card representing a pattern in the user's account data.
+ *
+ * This is a pure render component, you have to pass in the data.
+ *
+ * @component
+ * @param {object} props - All component props
+ * @param {React.Component} props.Link - A framework specific Link component for client-side routing
+ * @param {string} [props.href = false] - An optional URL the pattern card should link to
+ * @param {function} [props.onClick = false] - An optional onClick handler
+ * @param {object} props.pattern - An object holding the pattern data
+ * @param {string} [props.size = 'md'] - The size, one of lg, md, sm, or xs
+ * @param {boolean} [props.useA = false] - Whether to use an a tag of Link component when passing in a href prop
+ * @returns {JSX.Element}
+ */
 export const PatternCard = ({
  pattern,
  href = false,
@ -265,7 +289,7 @@ export const PatternCard = ({
  if (!Link) Link = WebLink
  const sizes = {
    lg: 96,
-    md: 52,
+    md: 48,
    sm: 36,
    xs: 20,
  }
@ -315,9 +339,9 @@ export const PatternCard = ({
 const BadgeLink = ({ label, href }) => (
  <a
    href={href}
-    className="tw:daisy-badge tw:daisy-badge-secondary tw:font-bold tw:daisy-badge-lg tw:hover:text-secondary-content tw:hover:no-underline"
+    className="tw:daisy-badge tw:daisy-badge-secondary tw:font-bold tw:daisy-badge-lg tw:hover:text-secondary-content tw:hover:cursor-pointer"
  >
-    {label}
+    <span className="tw:text-secondary-content hover:tw:decoration-0">{label}</span>
  </a>
 )

--- a/packages/react/components/Account/Patterns.mjs
+++ b/packages/react/components/Account/Patterns.mjs
@ -28,11 +28,13 @@ const t = (input) => {
  return input
 }

-/*
- * Component for the account/patterns page
+/**
+ * A component to display and manage the list of patterns in the user's account
 *
- * @params {object} props - All React props
- * @params {function} Link - A framework specific Link component for client-side routing
+ * @component
+ * @param {object} props - All component props
+ * @param {React.Component} props.Link - A framework specific Link component for client-side routing
+ * @returns {JSX.Element}
 */
 export const Patterns = ({ Link = false }) => {
  if (!Link) Link = WebLink
@ -101,8 +103,8 @@ export const Patterns = ({ Link = false }) => {
          className="tw:daisy-btn tw:daisy-btn-primary tw:capitalize tw:w-full tw:md:w-auto tw:hover:text-primary-content"
          href="/editor/"
        >
-          <PlusIcon />
-          Create a new pattern
+          <span className="tw:text-primary-content"><PlusIcon /></span>
+          <span className="tw:text-primary-content">Create a new pattern</span>
        </Link>
      </div>
      <TableWrapper>
--- a/packages/react/components/Account/Platform.mjs
+++ b/packages/react/components/Account/Platform.mjs
@ -19,11 +19,52 @@ const labels = {
  website: 'Website',
 }

+/**
+ * A component to manage the user's Instagram handle in their account data
+ *
+ * @component
+ * @returns {JSX.Element}
+ */
 export const Instagram = () => <Platform platform="instagram" />
+
+/**
+ * A component to manage the user's Mastodon handle in their account data
+ *
+ * @component
+ * @returns {JSX.Element}
+ */
 export const Mastodon = () => <Platform platform="mastodon" />
+
+/**
+ * A component to manage the user's Reddit handle in their account data
+ *
+ * @component
+ * @returns {JSX.Element}
+ */
 export const Reddit = () => <Platform platform="reddit" />
+
+/**
+ * A component to manage the user's Twitch handle in their account data
+ *
+ * @component
+ * @returns {JSX.Element}
+ */
 export const Twitch = () => <Platform platform="twitch" />
+
+/**
+ * A component to manage the user's Tiktok handle in their account data
+ *
+ * @component
+ * @returns {JSX.Element}
+ */
 export const Tiktok = () => <Platform platform="tiktok" />
+
+/**
+ * A component to manage the user's website URL in their account data
+ *
+ * @component
+ * @returns {JSX.Element}
+ */
 export const Website = () => <Platform platform="website" />

 /*
--- a/packages/react/components/Account/Reload.mjs
+++ b/packages/react/components/Account/Reload.mjs
@ -12,8 +12,11 @@ import { ReloadIcon } from '@freesewing/react/components/Icon'
 import { Popout } from '@freesewing/react/components/Popout'
 import { IconButton } from '@freesewing/react/components/Button'

-/*
- * Component for the account/actions/export page
+/**
+ * A component handle a reload of the account data
+ *
+ * @component
+ * @returns {JSX.Element}
 */
 export const Reload = () => {
  // Hooks
--- a/packages/react/components/Account/Remove.mjs
+++ b/packages/react/components/Account/Remove.mjs
@ -16,8 +16,11 @@ import { Popout } from '@freesewing/react/components/Popout'
 import { IconButton } from '@freesewing/react/components/Button'
 import { ModalWrapper } from '@freesewing/react/components/Modal'

-/*
- * Component for the account/actions/remove page
+/**
+ * A component to handle the removal of a user's account
+ *
+ * @component
+ * @returns {JSX.Element}
 */
 export const Remove = () => {
  // Hooks
--- a/packages/react/components/Account/Restrict.mjs
+++ b/packages/react/components/Account/Restrict.mjs
@ -17,8 +17,13 @@ import { Popout } from '@freesewing/react/components/Popout'
 import { IconButton } from '@freesewing/react/components/Button'
 import { ModalWrapper } from '@freesewing/react/components/Modal'

-/*
- * Component for the account/actions/restrict page
+/**
+ * A component to manage the user's options to restrict processing of their data
+ *
+ * @component
+ * @param {object} props - All component props
+ * @param {React.Component} props.Link - A framework specific Link component for client-side routing
+ * @returns {JSX.Element}
 */
 export const Restrict = ({ Link = false }) => {
  if (!Link) Link = WebLink
@ -46,7 +51,7 @@ export const Restrict = ({ Link = false }) => {
      <>
        <p>This button is red for a reason.</p>
        <IconButton onClick={restrictAccount} color="error">
-          <Nocon />
+          <NoIcon />
          Remove your FreeSewing account
        </IconButton>
      </>
--- a/packages/react/components/Account/Role.mjs
+++ b/packages/react/components/Account/Role.mjs
@ -1,6 +1,14 @@
 import React from 'react'
 import { KeyVal } from '@freesewing/react/components/KeyVal'

+/**
+ * A component to display the user's role
+ *
+ * @component
+ * @param {object} props - All component props
+ * @param {string} props.role - The user role, either user or admin
+ * @returns {JSX.Element}
+ */
 export const UserRole = ({ role }) => {
  if (role === 'user') return <RoleUser />
  if (role === 'admin') return <RoleAdmin />
--- a/packages/react/components/Account/Set.mjs
+++ b/packages/react/components/Account/Set.mjs
@ -66,11 +66,11 @@ const t = (input) => {
 /*
 * Component to show an individual measurements set
 *
- * @param {object} props - All React props
- * @param {number} id - The ID of the measurements set to load
- * @param {bool} publicOnly - If the set should be used with the backend.getPublicSet method
- * @param {function} Link - An optional framework-specific Link component to use for client-side routing
- * @param {object} measurementHelpProvider - A function that returns a url or action to show help for a specific measurement
+ * @param {object} props - All Component props
+ * @param {number} props.id - The ID of the measurements set to load
+ * @param {bool} [props.publicOnly = false] - If the set should be used with the backend.getPublicSet method
+ * @param {function} [props.Link = false] - An optional framework-specific Link component to use for client-side routing
+ * @param {function} [measurementHelpProvider = false] - A function that returns a url or action to show help for a specific measurement
 */
 export const Set = ({ id, publicOnly = false, Link = false, measurementHelpProvider = false }) => {
  if (!Link) Link = WebLink
@ -867,6 +867,12 @@ export const RenderedCSet = ({ mset, imperial }) => {
  )
 }

+/**
+ * A component to create a new measurements set.
+ *
+ * @component
+ * @returns {JSX.Element}
+ */
 export const NewSet = () => {
  // Hooks
  const backend = useBackend()
--- a/packages/react/components/Account/Sets.mjs
+++ b/packages/react/components/Account/Sets.mjs
@ -16,11 +16,13 @@ import { NoIcon, OkIcon, PlusIcon, TrashIcon, UploadIcon } from '@freesewing/rea
 import { ModalWrapper } from '@freesewing/react/components/Modal'
 import { NewSet } from './Set.mjs'

-/*
- * The component for the an account/sets page
+/**
+ * The component for the measurements sets in the user's account.
 *
- * @param {object} props - All React props
- * @param {function} Link - An optional framework-specific Link component
+ * @component
+ * @param {object} props - All component props
+ * @param {React.Component} props.Link - A framework specific Link component for client-side routing
+ * @returns {JSX.Element}
 */
 export const Sets = ({ Link = false }) => {
  if (!Link) Link = WebLink
@ -160,16 +162,20 @@ export const Sets = ({ Link = false }) => {
 }

 /**
- * React component to display a (card of a) single measurements set
+ * A component to render a card of a single measurements set.
 *
- * @param {object} props - All React props
- * @param {function} Link - An optional framework-specific Link component
- * @param {string} design - The designs for which to check required measurements
- * @param {test} href - Where the set should link to
- * @param {function} onClick - What to do when clicking on a set
- * @param {object} set - The (data of the) measurements set
- * @param {string} size - Size of the card
- * @param {bool} useA - Whether to use an A tag or not
+ * This is a pure render component, you need to pass in the data.
+ *
+ * @component
+ * @param {object} props - All component props
+ * @param {React.Component} [props.Link = false] - An optional framework-specific Link component
+ * @param {string} [props.design = false] - An optional design name to check for required measurements in this set
+ * @param {string} [props.href = false] - On optional href for the card to link to
+ * @param {function} [props.onClick = false] - On optional onClick handler method
+ * @param {object} props.set - The data of the measurements set
+ * @param {string} [props.size = 'lg'] - Size of the card, one of lg, md, or sm
+ * @param {bool} [props.useA = false] - Whether to use an A tag or a Link component for href
+ * @returns {JSX.Element}
 */
 export const MsetCard = ({
  Link = false,
@ -183,7 +189,7 @@ export const MsetCard = ({
  if (!Link) Link = WebLink
  const sizes = {
    lg: 96,
-    md: 52,
+    md: 48,
    sm: 36,
  }
  const s = sizes[size]
--- a/packages/react/components/Account/Status.mjs
+++ b/packages/react/components/Account/Status.mjs
@ -1,6 +1,14 @@
 import React from 'react'
 import { KeyVal } from '@freesewing/react/components/KeyVal'

+/**
+ * Displays a badge for the account status you pass it
+ *
+ * @component
+ * @param {object} props - All component props
+ * @param {number} props.status - The account status. One of -2, -1, 0, or 1
+ * @returns {JSX.Element}
+ */
 export const AccountStatus = ({ status }) => {
  if (status === 0) return <AccountInactive />
  if (status === 1) return <AccountActive />
--- a/packages/react/components/Account/Units.mjs
+++ b/packages/react/components/Account/Units.mjs
@ -17,11 +17,12 @@ import { NumberCircle } from '@freesewing/react/components/Number'
 import { IconButton } from '@freesewing/react/components/Button'
 import { WelcomeIcons } from './shared.mjs'

-/*
- * Component for the account/preferences/units page
+/**
+ * A component to manage the user's units
 *
- * @params {object} props - All React props
- * @params {bool} props.welcome - Set to true to use this component on the welcome page
+ * @component
+ * @param {bool} [props.welcome = false] - Set to true to render the welcome/onboarding view
+ * @returns {JSX.Element}
 */
 export const Units = ({ welcome = false }) => {
  // Hooks
--- a/packages/react/components/Account/Username.mjs
+++ b/packages/react/components/Account/Username.mjs
@ -16,12 +16,14 @@ import { StringInput } from '@freesewing/react/components/Input'
 import { IconButton } from '@freesewing/react/components/Button'
 import { WelcomeIcons } from './shared.mjs'

-/*
- * Component for the account/username page
+/**
+ * A component to manage the user's username
 *
- * @params {object} props - All React props
- * @params {bool} props.welcome - Set to true to use this component on the welcome page
- * @params {function} props.Link - A framework specific Link component for client-side routing
+ * @component
+ * @param {object} props - All component props
+ * @param {bool} [props.welcome = false] - Set to true to render the welcome/onboarding view
+ * @param {React.Component} [props.Link  = false] - A framework specific Link component for client-side routing
+ * @returns {JSX.Element}
 */
 export const Username = ({ welcome = false, Link = false }) => {
  if (!Link) Link = WebLink
--- a/packages/react/components/Account/index.mjs
+++ b/packages/react/components/Account/index.mjs
@ -1,71 +1,71 @@
 import React from 'react'

 import { AccountStatus } from './Status.mjs'
-import { Bookmarks, BookmarkButton } from './Bookmarks.mjs'
-import { Links } from './Links.mjs'
-import { Set, NewSet } from './Set.mjs'
-import { Sets, MsetCard } from './Sets.mjs'
-import { Patterns } from './Patterns.mjs'
-import { Pattern, PatternCard } from './Pattern.mjs'
 import { Apikeys } from './Apikeys.mjs'
-import { Username } from './Username.mjs'
-import { Bio } from './Bio.mjs'
 import { Avatar } from './Avatar.mjs'
-import { Email, EmailChangeConfirmation } from './Email.mjs'
-import { Github } from './Github.mjs'
-import { Instagram, Mastodon, Reddit, Twitch, Tiktok, Website } from './Platform.mjs'
+import { Bio } from './Bio.mjs'
+import { BookmarkButton, Bookmarks } from './Bookmarks.mjs'
 import { Compare } from './Compare.mjs'
-import { Control } from './Control.mjs'
-import { Units } from './Units.mjs'
-import { Newsletter } from './Newsletter.mjs'
 import { Consent } from './Consent.mjs'
-import { Password } from './Password.mjs'
-import { Mfa } from './Mfa.mjs'
-import { ImportSet } from './Import.mjs'
+import { Control } from './Control.mjs'
+import { Email, EmailChangeConfirmation } from './Email.mjs'
 import { Export } from './Export.mjs'
+import { Github } from './Github.mjs'
+import { ImportSet } from './Import.mjs'
+import { Instagram, Mastodon, Reddit, Twitch, Tiktok, Website } from './Platform.mjs'
+import { Links } from './Links.mjs'
+import { Mfa } from './Mfa.mjs'
+import { MsetCard, Sets } from './Sets.mjs'
+import { Newsletter } from './Newsletter.mjs'
+import { Password } from './Password.mjs'
+import { Pattern, PatternCard } from './Pattern.mjs'
+import { Patterns } from './Patterns.mjs'
 import { Reload } from './Reload.mjs'
 import { Remove } from './Remove.mjs'
 import { Restrict } from './Restrict.mjs'
+import { Set, NewSet } from './Set.mjs'
+import { Units } from './Units.mjs'
 import { UserId } from './Id.mjs'
+import { Username } from './Username.mjs'
 import { UserRole } from './Role.mjs'

 export {
  AccountStatus,
-  Bookmarks,
-  BookmarkButton,
-  Links,
-  Set,
-  NewSet,
-  Sets,
-  MsetCard,
-  Patterns,
-  Pattern,
-  PatternCard,
  Apikeys,
-  Username,
-  Bio,
  Avatar,
+  Bio,
+  BookmarkButton,
+  Bookmarks,
+  Compare,
+  Consent,
+  Control,
  Email,
  EmailChangeConfirmation,
-  Github,
-  Instagram,
-  Mastodon,
-  Reddit,
-  Twitch,
-  Tiktok,
-  Website,
-  Compare,
-  Control,
-  Units,
-  Newsletter,
-  Consent,
-  Password,
-  Mfa,
-  ImportSet,
  Export,
+  Github,
+  ImportSet,
+  Instagram,
+  Links,
+  Mastodon,
+  Mfa,
+  MsetCard,
+  NewSet,
+  Newsletter,
+  Password,
+  Pattern,
+  PatternCard,
+  Patterns,
+  Reddit,
  Reload,
  Remove,
  Restrict,
+  Set,
+  Sets,
+  Tiktok,
+  Twitch,
+  Units,
  UserId,
+  Username,
  UserRole,
+  Website,
 }
--- a/packages/react/components/Uuid/index.mjs
+++ b/packages/react/components/Uuid/index.mjs
@ -19,7 +19,7 @@ export const Uuid = ({ uuid, href = false, label = false }) => {
    return (
      <span className="flex flex-row items-center">
        <span className="daisy-badge daisy-badge-secondary font-mono">{shortUuid(uuid)}</span>
-        <CopyToClipboard content={uuid} label="UUID" sup />
+        <CopyToClipboardButton content={uuid} label="UUID" sup />
      </span>
    )

@ -28,7 +28,7 @@ export const Uuid = ({ uuid, href = false, label = false }) => {
      <Link href={href} title={uuid}>
        <span className="daisy-badge daisy-badge-secondary font-mono">{shortUuid(uuid)}</span>
      </Link>
-      <CopyToClipboard content={uuid} label="UUID" sup label />
+      <CopyToClipboardButton content={uuid} label="UUID" sup label />
    </span>
  )
 }
--- a/packages/react/mkdocs.sh
+++ b/packages/react/mkdocs.sh
@ -1,5 +1,5 @@
 #!/bin/bash
 mkdir -p ./docs/components

-jsdoc -c jsdoc.json components/Account/ > ../../sites/dev/prebuild/jsdoc/react/components/account.json
-jsdoc -c jsdoc.json components/Button/ > ../../sites/dev/prebuild/jsdoc/react/components/button.json
+jsdoc -c jsdoc.json components/Account/* > ../../sites/dev/prebuild/jsdoc/react/components/account.json
+jsdoc -c jsdoc.json components/Button/* > ../../sites/dev/prebuild/jsdoc/react/components/button.json
--- a/sites/dev/docs/reference/packages/react/components/account/_examples.js
+++ b/sites/dev/docs/reference/packages/react/components/account/_examples.js
@ -0,0 +1,78 @@
+import React from 'react'
+import {
+  AccountStatus,
+  Apikeys as ApikeysExample,
+  Avatar as AvatarExample,
+  Bio as BioExample,
+  BookmarkButton,
+  Bookmarks as BookmarksExample,
+  Compare as CompareExample,
+  Consent as ConsentExample,
+  Control as ControlExample,
+  Email as EmailExample,
+  EmailChangeConfirmation as EmailChangeConfirmationExample,
+  Export as ExportExample,
+  Github as GithubExample,
+  ImportSet as ImportSetExample,
+  Instagram as InstagramExample,
+  Links as LinksExample,
+  Mastodon as MastodonExample,
+  Mfa as MfaExample,
+  MsetCard,
+  NewSet as NewSetExample,
+  Newsletter as NewsletterExample,
+} from '@freesewing/react/components/Account'
+
+const AccountStatusExample = () => (
+  <table>
+    <thead>
+      <tr>
+        <th>Status</th>
+        <th>Preview</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr><td>-2</td><td><AccountStatus status={-2} /></td></tr>
+      <tr><td>-1</td><td><AccountStatus status={-1} /></td></tr>
+      <tr><td>0</td><td><AccountStatus status={0} /></td></tr>
+      <tr><td>1</td><td><AccountStatus status={1} /></td></tr>
+    </tbody>
+  </table>
+)
+
+const BookmarkButtonExample = () => (
+  <BookmarkButton
+    slug="https://freesewing.dev/reference/packages/react/components/account/#bookmarkbutton"
+    title="BookmarkButton Example"
+    type="custom"
+  />
+)
+
+const MsetCardExample = () => (
+  <MsetCard set={{ name: 'Example Set'}} />
+)
+
+export {
+  AccountStatusExample,
+  ApikeysExample,
+  AvatarExample,
+  BioExample,
+  BookmarkButtonExample,
+  BookmarksExample,
+  CompareExample,
+  ConsentExample,
+  ControlExample,
+  EmailExample,
+  EmailChangeConfirmationExample,
+  ExportExample,
+  GithubExample,
+  ImportSetExample,
+  InstagramExample,
+  LinksExample,
+  MastodonExample,
+  MfaExample,
+  MsetCardExample,
+  NewSetExample,
+  NewsletterExample,
+}
+
--- a/sites/dev/docs/reference/packages/react/components/account/readme.mdx
+++ b/sites/dev/docs/reference/packages/react/components/account/readme.mdx
@ -2,6 +2,203 @@
 title: Account
 ---

-:::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 { MiniNote} from '@freesewing/react/components/Mini'
+import {
+  jsdocAccountStatus as jsdocAccount,
+  jsdocAccountStatus,
+  jsdocApikeys,
+  jsdocAvatar,
+  jsdocBio,
+  jsdocBookmarkButton,
+  jsdocBookmarks,
+  jsdocCompare,
+  jsdocConsent,
+  jsdocControl,
+  jsdocEmail,
+  jsdocEmailChangeConfirmation,
+  jsdocExport,
+  jsdocGithub,
+  jsdocImportSet,
+  jsdocInstagram,
+  jsdocLinks,
+  jsdocMastodon,
+  jsdocMfa,
+  jsdocMsetCard,
+  jsdocNewSet,
+  jsdocNewsletter,
+} from '@site/prebuild/jsdoc/components.account.mjs'
+import {
+  AccountStatusExample,
+  ApikeysExample,
+  AvatarExample,
+  BioExample,
+  BookmarkButtonExample,
+  BookmarksExample,
+  CompareExample,
+  ConsentExample,
+  ControlExample,
+  EmailExample,
+  EmailChangeConfirmationExample,
+  ExportExample,
+  GithubExample,
+  ImportSetExample,
+  InstagramExample,
+  LinksExample,
+  MastodonExample,
+  MfaExample,
+  MsetCardExample,
+  NewSetExample,
+  NewsletterExample,
+} from './_examples.js'
+
+<DocusaurusDoc>
+
+The **Account** component family provides the following components:
+
+- [AccountStatus          ](#accountstatus)
+- [Apikeys                ](#apikeys)
+- [Avatar                 ](#avatar)
+- [Bio                    ](#bio)
+- [BookmarkButton         ](#bookmarkbutton)
+- [Bookmarks              ](#bookmarks)
+- [Compare                ](#compare)
+- [Consent                ](#consent)
+- [Control                ](#control)
+- [Email                  ](#email)
+- [EmailChangeConfirmation](#emailchanfirmation)
+- [Export                 ](#export)
+- [Github                 ](#github)
+- [ImportSet              ](#importset)
+- [Instagram              ](#instagram)
+- [Links                  ](#links)
+- [Mastodon               ](#mastodon)
+- [Mfa                    ](#mfa)
+- [MsetCard               ](#msetcard)
+- [NewSet                 ](#newset)
+- [Newsletter             ](#newslett)
+- [Password               ](#password)
+- [Pattern                ](#pattern)
+- [PatternCard            ](#patterncard)
+- [Patterns               ](#patterns)
+- [Reddit                 ](#reddit)
+- [Reload                 ](#reload)
+- [Remove                 ](#remove)
+- [Restrict               ](#restrict)
+- [Set                    ](#set)
+- [Sets                   ](#sets)
+- [Tiktok                 ](#tiktok)
+- [Twitch                 ](#twitch)
+- [Units                  ](#units)
+- [UserId                 ](#userid)
+- [Username               ](#username)
+- [UserRole               ](#userrole)
+- [Website                ](#website)
+
+
+## AccountStatus
+<ComponentDocs docs={jsdocAccountStatus} example={AccountStatusExample} />
+
+## Apikeys
+<ComponentDocs docs={jsdocApikeys} example={ApikeysExample} />
+
+## Avatar
+<ComponentDocs docs={jsdocAvatar} example={AvatarExample} />
+
+## Bio
+<ComponentDocs docs={jsdocBio} example={BioExample} />
+
+## BookmarkButton
+<ComponentDocs docs={jsdocBookmarkButton} example={BookmarkButtonExample} />
+
+## Bookmarks
+<ComponentDocs docs={jsdocBookmarks} example={BookmarksExample} />
+
+## Compare
+<ComponentDocs docs={jsdocCompare} example={CompareExample} />
+
+## Consent
+<ComponentDocs docs={jsdocConsent} example={ConsentExample} />
+
+## Control
+<ComponentDocs docs={jsdocControl} example={ControlExample} />
+
+## Email
+<ComponentDocs docs={jsdocEmail} example={EmailExample} />
+
+## EmailChangeConfirmation
+<MiniNote>
+#### Requires a valid callback URL
+This component will not work without the proper <code>id</code> and <code>check</code> URL paramters
+that come from a email confirmation link sent out from the FreeSewing backend.
+</MiniNote>
+
+<ComponentDocs docs={jsdocEmailChangeConfirmation} example={EmailChangeConfirmationExample} />
+
+## Export
+<ComponentDocs docs={jsdocExport} example={ExportExample} />
+
+## Github
+<ComponentDocs docs={jsdocGithub} example={GithubExample} />
+
+## ImportSet
+<ComponentDocs docs={jsdocImportSet} example={ImportSetExample} />
+
+## Instagram
+<ComponentDocs docs={jsdocInstagram} example={InstagramExample} />
+
+## Links
+<ComponentDocs docs={jsdocLinks} example={LinksExample} />
+
+## Mastodon
+<ComponentDocs docs={jsdocMastodon} example={MastodonExample} />
+
+## Mfa
+<ComponentDocs docs={jsdocMfa} example={MfaExample} />
+
+## MsetCard
+<ComponentDocs docs={jsdocMsetCard} example={MsetCardExample} />
+
+## NewSet
+<ComponentDocs docs={jsdocNewSet} example={NewSetExample} />
+
+## Newsletter
+<ComponentDocs docs={jsdocNewsletter} example={NewsletterExample} />
+
+## Password
+
+## Pattern
+
+## PatternCard
+
+## Patterns
+
+## Reddit
+
+## Reload
+
+## Remove
+
+## Restrict
+
+## Set
+
+## Sets
+
+## Tiktok
+
+## Twitch
+
+## Units
+
+## UserId
+
+## Username
+
+## UserRole
+
+## Website
+
+</DocusaurusDoc>
+
--- a/sites/dev/docs/reference/packages/react/components/button/_examples.js
+++ b/sites/dev/docs/reference/packages/react/components/button/_examples.js
@ -0,0 +1,39 @@
+import React from 'react'
+import { Highlight } from '@freesewing/react/components/Highlight'
+import { FingerprintIcon, WarningIcon } from '@freesewing/react/components/Icon'
+import { IconButton } from '@freesewing/react/components/Button'
+import { MiniNote } from '@freesewing/react/components/Mini'
+
+export const IconButtonExample = () => (
+  <>
+    <MiniNote>
+      Note that this component will take up the full width made available to it.
+    </MiniNote>
+    <Highlight language="js">
+      {[
+        `import { FingerprintIcon, WarningIcon } from '@freesewing/react/components/Icon'`,
+        `import { IconButton } from '@freesewing/react/components/Button'`,
+        ``,
+        `<IconButton>`,
+        `  <FingerprintIcon />`,
+        `  Primary (default)`,
+        `</IconButton>`,
+        `<br />`,
+        `<IconButton color="warning">`,
+        `  <WarningIcon />`,
+        `  Warning`,
+        `</IconButton>`,
+      ].join('\n')}
+    </Highlight>
+    <IconButton>
+      <FingerprintIcon />
+      Primary (default)
+    </IconButton>
+    <br />
+    <IconButton color="warning">
+      <WarningIcon />
+      Warning
+    </IconButton>
+  </>
+)
+
--- a/sites/dev/docs/reference/packages/react/components/button/readme.mdx
+++ b/sites/dev/docs/reference/packages/react/components/button/readme.mdx
@ -3,8 +3,9 @@ title: Button
 ---

 import { DocusaurusDoc } from '@freesewing/react/components/Docusaurus'
-import { jsdocIconButton } from '@site/prebuild/jsdoc/components.button.mjs'
 import { ComponentDocs } from '@site/src/components/component-docs.js'
+import { jsdocIconButton } from '@site/prebuild/jsdoc/components.button.mjs'
+import { IconButtonExample } from './_examples.js'

 <DocusaurusDoc>

@ -14,6 +15,6 @@ The **Button** component family provides the following components:

 ## IconButton

-<ComponentDocs docs={jsdocIconButton} />
+<ComponentDocs docs={jsdocIconButton} example={IconButtonExample} />

 </DocusaurusDoc>
--- a/sites/dev/src/components/component-docs.js
+++ b/sites/dev/src/components/component-docs.js
@ -5,7 +5,8 @@ import { FingerprintIcon, WarningIcon } from '@freesewing/react/components/Icon'
 import { IconButton } from '@freesewing/react/components/Button'
 import { MiniNote } from '@freesewing/react/components/Mini'

-export const ComponentDocs = ({ docs }) => {
+export const ComponentDocs = ({ docs, example }) => {
+  const Example = example ||  null
  return (
    <>
      <p>{docs.desc}</p>
@ -18,40 +19,14 @@ export const ComponentDocs = ({ docs }) => {
          <Highlight language="js">{docs.importAs}</Highlight>
        </Tab>
        <Tab>
-          <p>
-            The <code>{docs.name}</code> component takes the following props:
-          </p>
-          <PropsTable docs={docs} />
+          {docs.params
+            ? <p> The <code>{docs.name}</code> component takes the following props:</p>
+            : <MiniNote>This component does not take any props</MiniNote>
+          }
+          {docs.params ? <PropsTable docs={docs} /> : null}
        </Tab>
        <Tab>
-          <MiniNote>
-            Note that this component will take up the full width made available to it.
-          </MiniNote>
-          <Highlight language="js">
-            {[
-              `import { FingerprintIcon, WarningIcon } from '@freesewing/react/components/Icon'`,
-              `import { IconButton } from '@freesewing/react/components/Button'`,
-              ``,
-              `<IconButton>`,
-              `  <FingerprintIcon />`,
-              `  Primary (default)`,
-              `</IconButton>`,
-              `<br />`,
-              `<IconButton color="warning">`,
-              `  <WarningIcon />`,
-              `  Warning`,
-              `</IconButton>`,
-            ].join('\n')}
-          </Highlight>
-          <IconButton>
-            <FingerprintIcon />
-            Primary (default)
-          </IconButton>
-          <br />
-          <IconButton color="warning">
-            <WarningIcon />
-            Warning
-          </IconButton>
+          <Example />
        </Tab>
        <Tab>
          <p>
@ -86,17 +61,26 @@ const PropsTable = ({ docs }) => (
      </tr>
    </thead>
    <tbody>
-      {docs.params.map((prop, i) => (
+      {(docs.params || []).map((prop, i) => (
        <tr key={i}>
          <td>{prop.name}</td>
          <td>{prop.type.names}</td>
          <td>{prop.description}</td>
          <td>{prop.optional ? 'yes' : 'no'}</td>
          <td>
-            <code>{prop.defaultvalue}</code>
+            <code><DefaultPropValue value={prop.defaultvalue} /></code>
          </td>
        </tr>
      ))}
    </tbody>
  </table>
 )
+
+const DefaultPropValue = ({ value }) => {
+  if (value === true) return 'true'
+  if (value === false) return 'false'
+  if (value === null) return 'null'
+  if (typeof value === 'undefined') return 'undefined'
+
+  return value
+}