[react] feat: Added docs for components/Input

packages/react/components/Account/Apikeys.mjs

@@ -27,7 +27,7 @@ import { Uuid } from '@freesewing/react/components/Uuid'
 import { Popout } from '@freesewing/react/components/Popout'
 import { ModalWrapper } from '@freesewing/react/components/Modal'
 import { NumberCircle } from '@freesewing/react/components/Number'
-import { StringInput, FormControl, ListInput } from '@freesewing/react/components/Input'
+import { StringInput, Fieldset, ListInput } from '@freesewing/react/components/Input'
 import { DisplayRow } from './shared.mjs'
 import { CopyToClipboardButton } from '@freesewing/react/components/Button'
 import { TimeAgo, TimeToGo } from '@freesewing/react/components/Time'
@@ -333,7 +333,7 @@ const ExpiryPicker = ({ expires, setExpires }) => {
 
   return (
     <div className="tw:flex tw:flex-row tw:gap-2 tw:items-center">
-      <FormControl
+      <Fieldset
         label="Key Expiry"
         labelBL={shortDate(expires)}
         labelBR={<TimeToGo iso={expires} />}
@@ -346,7 +346,7 @@ const ExpiryPicker = ({ expires, setExpires }) => {
           className="tw:daisy-range tw:daisy-range-secondary tw:w-full"
           onChange={update}
         />
-      </FormControl>
+      </Fieldset>
     </div>
   )
 }

packages/react/components/Editor/components/menus/Container.mjs

@@ -6,7 +6,7 @@ import React, { useState, useMemo } from 'react'
 // Components
 import { SubAccordion } from '../Accordion.mjs'
 import { EditIcon, GroupIcon, OptionsIcon, ResetIcon } from '@freesewing/react/components/Icon'
-import { FormControl } from '@freesewing/react/components/Input'
+import { Fieldset } from '@freesewing/react/components/Input'
 import { MiniTip } from '@freesewing/react/components/Mini'
 
 const iconButtonClass = 'tw:daisy-btn tw:daisy-btn-xs tw:daisy-btn-ghost tw:px-0 tw:text-accent'
@@ -105,7 +105,7 @@ export const MenuItem = ({
 
   return (
     <>
-      <FormControl
+      <Fieldset
         label={false}
         id={config.name}
         labelBR={<div className="tw:flex tw:flex-row tw:items-center tw:gap-2">{buttons}</div>}
@@ -118,7 +118,7 @@ export const MenuItem = ({
         }
       >
         <Input {...drillProps} />
-      </FormControl>
+      </Fieldset>
       {config.about ? <MiniTip>{config.about}</MiniTip> : null}
     </>
   )

packages/react/mkdocs.sh

@@ -14,3 +14,4 @@ jsdoc -c jsdoc.json components/Editor/* > ../../sites/dev/prebuild/jsdoc/react/c
 jsdoc -c jsdoc.json components/Heading/* > ../../sites/dev/prebuild/jsdoc/react/components/heading.json
 jsdoc -c jsdoc.json components/Highlight/* > ../../sites/dev/prebuild/jsdoc/react/components/highlight.json
 jsdoc -c jsdoc.json components/Icon/* > ../../sites/dev/prebuild/jsdoc/react/components/icon.json
+jsdoc -c jsdoc.json components/Input/* > ../../sites/dev/prebuild/jsdoc/react/components/input.json

sites/backend/src/models/flow.mjs

@@ -150,7 +150,7 @@ FlowModel.prototype.uploadImage = async function ({ body, user }, anon = false)
    * Is type set and valid?
    */
   if (!body.type) return this.setResponse(400, 'typeMissing')
-  if (!['blog', 'showcase', 'support'].includes(body.type))
+  if (!['blog', 'showcase'].includes(body.type))
     return this.setResponse(400, 'typeInvalid')
 
   /*

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

@@ -0,0 +1,152 @@
+import React, { useState } from 'react'
+import { validateEmail } from '@freesewing/utils'
+import {
+  ActiveImageInput,
+  ButtonFrame,
+  DesignInput,
+  EmailInput,
+  Fieldset,
+  FileInput,
+  ImageInput,
+  ListInput,
+  MarkdownInput,
+  MeasurementInput,
+  MfaInput,
+  NumberInput,
+  PassiveImageInput,
+  PasswordInput,
+  StringInput,
+  ToggleInput,
+} from '@freesewing/react/components/Input'
+
+/*
+ * A nonsensical update function
+ */
+const update = (...params) => console.log('Update method received', params)
+
+export const Docs = () => (
+  <pre>
+  {Object.keys(components).map(c => `${c}\n`)}
+  </pre>
+)
+
+export const ActiveImageInputExample = () => (
+  <ActiveImageInput
+    imgSubid='1'
+    imgType='blog'
+    imgSlug='docs'
+    update={update}
+  />
+)
+export const ButtonFrameExample = () => (
+  <ButtonFrame>
+    <p>This is inside the ButtonFrame</p>
+  </ButtonFrame>
+)
+export const DesignInputExample = () => (
+  <DesignInput
+    firstOption="Pick a design (firstOption)"
+    update={update}
+  />
+)
+export const EmailInputExample = () => {
+  const [email, setEmail] = useState('')
+
+  return <EmailInput update={(val) => setEmail(val)} current={email} />
+}
+export const FieldsetExample = () => (
+  <>
+    <p>Regular Fieldset:</p>
+    <Fieldset
+      legend="Legend (legend)"
+      label="Label (label)"
+      labelTR="Top-Right (labelTR)"
+      labelBL="Bottom-Left (labelBL)"
+      labelBR="Bottom-Right (labelBR)"
+      forId="example"
+      help="#docs"
+    >
+      <input type="text" className="tw:daisy-input tw:w-full" placeholder="Example input" id="example" />
+    </Fieldset>
+    <p>Box Fieldset:</p>
+    <Fieldset
+      legend="Legend (legend)"
+      label="Label (label)"
+      labelTR="Top-Right (labelTR)"
+      labelBL="Bottom-Left (labelBL)"
+      labelBR="Bottom-Right (labelBR)"
+      forId="example"
+      help="#docs"
+      box={true}
+    >
+      <input type="text" className="tw:daisy-input tw:w-full" placeholder="Example input" id="example" />
+    </Fieldset>
+    <p>No legend:</p>
+    <Fieldset
+      label="Label (label)"
+      labelTR="Top-Right (labelTR)"
+      labelBL="Bottom-Left (labelBL)"
+      labelBR="Bottom-Right (labelBR)"
+      forId="example"
+      help="#docs"
+    >
+      <input type="text" className="tw:daisy-input tw:w-full" placeholder="Example input" id="example" />
+    </Fieldset>
+  </>
+)
+export const FileInputExample = () => (
+  <FileInput
+  />
+)
+export const ImageInputExample = () => (
+  <ImageInput
+  />
+)
+export const ListInputExample = () => {
+  const list = [
+    { val: 'bananas', label: 'Bananas', desc: 'A type of fruit' },
+    { val: 'bandanas', label: 'Bandanas', desc: 'Something to wear on your head' },
+  ]
+  return (
+    <>
+      <p>Regular:</p>
+      <ListInput list={list} />
+      <p>Without desc inside a fieldset with legend:</p>
+      <ListInput list={list.map(item => ({ ...item, desc: undefined }))} box legend="Legend here"/>
+    </>
+  )
+}
+export const MarkdownInputExample = () => {
+  const [md, setMd] = useState('')
+  return <MarkdownInput current={md} update={(val) => setMd(val)} />
+}
+export const MeasurementInputExample = () => (
+  <MeasurementInput m='chest'
+  />
+)
+export const MfaInputExample = () => (
+  <MfaInput
+  />
+)
+export const NumberInputExample = () => (
+  <NumberInput
+  />
+)
+export const PassiveImageInputExample = () => (
+  <PassiveImageInput
+  />
+)
+export const PasswordInputExample = () => {
+  const [pwd, setPwd] = useState('')
+  return <PasswordInput current={pwd} update={(val) => setPwd(val)} />
+}
+export const StringInputExample = () => {
+  const [pwd, setPwd] = useState('')
+  return <StringInput current={pwd} update={(val) => setPwd(val)} />
+}
+export const ToggleInputExample = () => {
+  const [val, setVal] = useState(false)
+  return <ToggleInput current={val} update={(v) => setVal(v)} labels={['Enabled', 'Disabled']} legend="Toggle" />
+}
+
+

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

@@ -2,6 +2,112 @@
 title: Input
 ---
 
-:::note
+import { DocusaurusDoc } from '@freesewing/react/components/Docusaurus'
-This page is yet to be created
+import { ComponentDocs } from '@site/src/components/component-docs.js'
-:::
+import {
+  jsdocActiveImageInput,
+  jsdocButtonFrame,
+  jsdocDesignInput,
+  jsdocEmailInput,
+  jsdocFieldset,
+  jsdocFileInput,
+  jsdocImageInput,
+  jsdocListInput,
+  jsdocMarkdownInput,
+  jsdocMeasurementInput,
+  jsdocMfaInput,
+  jsdocNumberInput,
+  jsdocPassiveImageInput,
+  jsdocPasswordInput,
+  jsdocStringInput,
+  jsdocToggleInput,
+} from '@site/prebuild/jsdoc/components.input.mjs'
+import {
+  ActiveImageInputExample,
+  ButtonFrameExample,
+  DesignInputExample,
+  EmailInputExample,
+  FieldsetExample,
+  FileInputExample,
+  ImageInputExample,
+  ListInputExample,
+  MarkdownInputExample,
+  MeasurementInputExample,
+  MfaInputExample,
+  NumberInputExample,
+  PassiveImageInputExample,
+  PasswordInputExample,
+  StringInputExample,
+  ToggleInputExample,
+} from './_examples.js'
+
+<DocusaurusDoc>
+
+The **Input** component family provides the following components:
+
+- [ActiveImageInput](#activeimageinput)
+- [ButtonFrame](#buttonframe)
+- [DesignInput](#designinput)
+- [EmailInput](#emailinput)
+- [Fieldset](#fieldset)
+- [FileInput](#fileinput)
+- [ImageInput](#imageinput)
+- [ListInput](#listinput)
+- [MarkdownInput](#markdowninput)
+- [MeasurementInput](#measurementinput)
+- [MfaInput](#mfainput)
+- [NumberInput](#numberinput)
+- [PassiveImageInput](#passiveimageinput)
+- [PasswordInput](#passwordinput)
+- [StringInput](#stringinput)
+- [ToggleInput](#toggleinput)
+
+## ActiveImageInput
+<ComponentDocs docs={jsdocActiveImageInput} example={ActiveImageInputExample} />
+
+## ButtonFrame
+<ComponentDocs docs={jsdocButtonFrame} example={ButtonFrameExample} />
+
+## DesignInput
+<ComponentDocs docs={jsdocDesignInput} example={DesignInputExample} />
+
+## EmailInput
+<ComponentDocs docs={jsdocEmailInput} example={EmailInputExample} />
+
+## Fieldset
+<ComponentDocs docs={jsdocFieldset} example={FieldsetExample} />
+
+## FileInput
+<ComponentDocs docs={jsdocFileInput} example={FileInputExample} />
+
+## ImageInput
+<ComponentDocs docs={jsdocImageInput} example={ImageInputExample} />
+
+## ListInput
+<ComponentDocs docs={jsdocListInput} example={ListInputExample} />
+
+## MarkdownInput
+<ComponentDocs docs={jsdocMarkdownInput} example={MarkdownInputExample} />
+
+## MeasurementInput
+<ComponentDocs docs={jsdocMeasurementInput} example={MeasurementInputExample} />
+
+## MfaInput
+<ComponentDocs docs={jsdocMfaInput} example={MfaInputExample} />
+
+## NumberInput
+<ComponentDocs docs={jsdocNumberInput} example={NumberInputExample} />
+
+## PassiveImageInput
+<ComponentDocs docs={jsdocPassiveImageInput} example={PassiveImageInputExample} />
+
+## PasswordInput
+<ComponentDocs docs={jsdocPasswordInput} example={PasswordInputExample} />
+
+## StringInput
+<ComponentDocs docs={jsdocStringInput} example={StringInputExample} />
+
+## ToggleInput
+<ComponentDocs docs={jsdocToggleInput} example={ToggleInputExample} />
+
+</DocusaurusDoc>