[react] feat: Added docs for components/Input

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
-This page is yet to be created
-:::
+import { DocusaurusDoc } from '@freesewing/react/components/Docusaurus'
+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>