Skip to content

Commit d3a4aed

Browse files
joepuzzojoepuzzo
committed
added more docs for creating custom inputs
1 parent 293b2ca commit d3a4aed

40 files changed

Lines changed: 1901 additions & 16 deletions

File tree

‎vitedocs/Nav/GettingStartedNav.jsx‎

Lines changed: 28 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,21 +3,48 @@ import { NavLink } from './NavLink';
33
export const GettingStartedNav = () => {
44
return (
55
<ul className="spectrum-SideNav">
6+
<h3>Basics</h3>
67
<NavLink href="/getting-started/intro">Intro</NavLink>
78
<NavLink href="/getting-started/setup">Setup</NavLink>
9+
<NavLink href="/getting-started/path-syntax">Path Syntax</NavLink>
10+
<h3>Control</h3>
811
<NavLink href="/getting-started/hooks">Hooks</NavLink>
912
<NavLink href="/getting-started/formState">Form State</NavLink>
1013
<NavLink href="/getting-started/formApi">Form Api</NavLink>
1114
<NavLink href="/getting-started/fieldState">Field State</NavLink>
1215
<NavLink href="/getting-started/fieldApi">Field Api</NavLink>
13-
<NavLink href="/getting-started/path-syntax">Path Syntax</NavLink>
16+
<h3>Features</h3>
1417
<NavLink href="/getting-started/array-field">Array Field</NavLink>
1518
<NavLink href="/getting-started/relevant">Relevant</NavLink>
1619
<NavLink href="/getting-started/formatting">Formatting</NavLink>
1720
<NavLink href="/getting-started/validation">Validation</NavLink>
1821
<NavLink href="/getting-started/schema">Schema Rendering</NavLink>
1922
<NavLink href="/getting-started/multistep">Multistep</NavLink>
2023
<NavLink href="/getting-started/metadata">Meta Data</NavLink>
24+
<h3>Creating Inputs ( Native )</h3>
25+
<NavLink href="/getting-started/form">Form</NavLink>
26+
<NavLink href="/getting-started/text-input">Text Input</NavLink>
27+
<NavLink href="/getting-started/number-input">Number Input</NavLink>
28+
<NavLink href="/getting-started/text-area">Text Area</NavLink>
29+
<NavLink href="/getting-started/select">Select</NavLink>
30+
<NavLink href="/getting-started/checkbox">Checkbox</NavLink>
31+
<NavLink href="/getting-started/radio">Radio Group</NavLink>
32+
<NavLink href="/getting-started/slider">Slider</NavLink>
33+
<h3>Creating Inputs ( Adobe )</h3>
34+
<NavLink href="/getting-started/adobe-form">Form</NavLink>
35+
<NavLink href="/getting-started/adobe-text-input">Text Input</NavLink>
36+
<NavLink href="/getting-started/adobe-number-input">Number Input</NavLink>
37+
<NavLink href="/getting-started/adobe-text-area">Text Area</NavLink>
38+
<NavLink href="/getting-started/adobe-select">Select</NavLink>
39+
<NavLink href="/getting-started/adobe-checkbox">Checkbox</NavLink>
40+
<NavLink href="/getting-started/adobe-checkbox-group">
41+
Checkbox Group
42+
</NavLink>
43+
<NavLink href="/getting-started/adobe-radio-group">Radio Group</NavLink>
44+
<NavLink href="/getting-started/adobe-slider">Slider</NavLink>
45+
<NavLink href="/getting-started/adobe-switch">Switch</NavLink>
46+
<NavLink href="/getting-started/adobe-combo-box">Combo Box</NavLink>
47+
<h3>Developers</h3>
2148
<NavLink href="/getting-started/readme">Readme</NavLink>
2249
<NavLink href="/getting-started/changelog">Changelog</NavLink>
2350
</ul>

‎vitedocs/Pages/GettingStarted/Inputs/AdobeCheckbox/Checkbox.jsx‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import { useEffect } from 'react';
2+
import Example from './Example';
3+
import exampleCode from './Example.jsx?raw';
4+
import Code from '../../../../YourComponents/Code';
5+
import { SideBySide } from '../../../../SideBySide';
6+
import { Info } from '../../../../Info';
7+
8+
const CheckboxInput = () => {
9+
useEffect(() => {
10+
window.scrollTo(0, 0);
11+
}, []);
12+
13+
return (
14+
<>
15+
<h1>
16+
<code>Checkbox</code>
17+
</h1>
18+
<Info>
19+
Below is an example of how to create a checkbox with informed. This
20+
example uses the React Spectrum Checkbox, but you can use any checkbox
21+
you want.
22+
</Info>
23+
<SideBySide
24+
leftHeader={<h3>Example:</h3>}
25+
rightHeader={<h3>Code:</h3>}
26+
left={<Example />}
27+
right={<Code links input1={exampleCode} />}
28+
/>
29+
<br />
30+
<br />
31+
</>
32+
);
33+
};
34+
35+
export { CheckboxInput };

‎vitedocs/Pages/GettingStarted/Inputs/AdobeCheckbox/Example.jsx‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import React from 'react';
2+
import { useField, Debug } from 'informed';
3+
import { Button } from '@adobe/react-spectrum';
4+
import { Checkbox as SpectrumCheckbox } from '@adobe/react-spectrum';
5+
import { Form } from 'YourComponents'; // See Form Example
6+
7+
// HOW TO SETUP A CHECKBOX COMPONENT WITH INFORMED
8+
const Input = (props) => {
9+
const { render, informed, fieldState, fieldApi, userProps, ref } = useField({
10+
type: 'text',
11+
...props,
12+
});
13+
const { required } = userProps;
14+
const { error, showError } = fieldState;
15+
return render(
16+
<SpectrumCheckbox
17+
ref={ref}
18+
validationState={!error ? null : 'invalid'}
19+
errorMessage={showError ? error : undefined}
20+
isRequired={required}
21+
{...userProps}
22+
{...informed}
23+
isSelected={informed.value}
24+
onChange={(v) => fieldApi.setValue(v)}
25+
>
26+
{props.label}
27+
</SpectrumCheckbox>
28+
);
29+
};
30+
31+
// HOW TO USE IT
32+
const Example = () => (
33+
<Form
34+
initialValues={{
35+
agree: true
36+
}}>
37+
<Input name="agree" label="I agree to terms and conditions" />
38+
<Button type="submit" variant="primary">
39+
submit
40+
</Button>
41+
<Debug />
42+
</Form>
43+
);
44+
45+
export default Example;

‎vitedocs/Pages/GettingStarted/Inputs/AdobeCheckboxGroup/CheckboxGroup.jsx‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import { useEffect } from 'react';
2+
import Example from './Example';
3+
import exampleCode from './Example.jsx?raw';
4+
import Code from '../../../../YourComponents/Code';
5+
import { SideBySide } from '../../../../SideBySide';
6+
import { Info } from '../../../../Info';
7+
8+
const CheckboxGroupInput = () => {
9+
useEffect(() => {
10+
window.scrollTo(0, 0);
11+
}, []);
12+
13+
return (
14+
<>
15+
<h1>
16+
<code>Checkbox Group</code>
17+
</h1>
18+
<Info>
19+
Below is an example of how to create a checkbox group with informed.
20+
This example uses the React Spectrum CheckboxGroup, but you can use any
21+
checkbox group you want.
22+
</Info>
23+
<SideBySide
24+
leftHeader={<h3>Example:</h3>}
25+
rightHeader={<h3>Code:</h3>}
26+
left={<Example />}
27+
right={<Code links input1={exampleCode} />}
28+
/>
29+
<br />
30+
<br />
31+
</>
32+
);
33+
};
34+
35+
export { CheckboxGroupInput };

‎vitedocs/Pages/GettingStarted/Inputs/AdobeCheckboxGroup/Example.jsx‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import React from 'react';
2+
import { useField, Debug } from 'informed';
3+
import { Button } from '@adobe/react-spectrum';
4+
import { CheckboxGroup, Checkbox } from '@adobe/react-spectrum';
5+
import { Form } from 'YourComponents'; // See Form Example
6+
7+
// HOW TO SETUP A CHECKBOX GROUP COMPONENT WITH INFORMED
8+
const Input = ({ children, ...props }) => {
9+
const { render, informed, fieldState, fieldApi, userProps, ref } = useField({
10+
...props
11+
});
12+
13+
const { required, options } = userProps;
14+
const { error, showError } = fieldState;
15+
16+
return render(
17+
<CheckboxGroup
18+
ref={ref}
19+
validationState={!error ? null : 'invalid'}
20+
errorMessage={showError ? error : undefined}
21+
isRequired={required}
22+
{...userProps}
23+
{...informed}
24+
value={fieldState.value}
25+
onChange={v => fieldApi.setValue(v, {})}>
26+
{options
27+
? options.map(op => {
28+
return <Checkbox key={op.value} value={op.value}>{op.label}</Checkbox>;
29+
})
30+
: children}
31+
</CheckboxGroup>
32+
);
33+
};
34+
35+
// HOW TO USE IT
36+
const Example = () => (
37+
<Form
38+
initialValues={{
39+
interests: ['sports']
40+
}}>
41+
<Input
42+
name="interests"
43+
label="Interests"
44+
options={[
45+
{ label: 'Sports', value: 'sports' },
46+
{ label: 'Music', value: 'music' },
47+
{ label: 'Reading', value: 'reading' }
48+
]}
49+
/>
50+
<Button type="submit" variant="primary">
51+
submit
52+
</Button>
53+
<Debug />
54+
</Form>
55+
);
56+
57+
export default Example;

‎vitedocs/Pages/GettingStarted/Inputs/AdobeComboBox/ComboBox.jsx‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import { useEffect } from 'react';
2+
import Example from './Example';
3+
import exampleCode from './Example.jsx?raw';
4+
import Code from '../../../../YourComponents/Code';
5+
import { SideBySide } from '../../../../SideBySide';
6+
import { Info } from '../../../../Info';
7+
8+
const ComboBoxInput = () => {
9+
useEffect(() => {
10+
window.scrollTo(0, 0);
11+
}, []);
12+
13+
return (
14+
<>
15+
<h1>
16+
<code>Combo Box</code>
17+
</h1>
18+
<Info>
19+
Below is an example of how to create a combo box with informed. This
20+
example uses the React Spectrum ComboBox, but you can use any combo box
21+
you want.
22+
</Info>
23+
<SideBySide
24+
leftHeader={<h3>Example:</h3>}
25+
rightHeader={<h3>Code:</h3>}
26+
left={<Example />}
27+
right={<Code links input1={exampleCode} />}
28+
/>
29+
<br />
30+
<br />
31+
</>
32+
);
33+
};
34+
35+
export { ComboBoxInput };

‎vitedocs/Pages/GettingStarted/Inputs/AdobeComboBox/Example.jsx‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import React from 'react';
2+
import { useField, Debug } from 'informed';
3+
import { Button } from '@adobe/react-spectrum';
4+
import { Item, ComboBox } from '@adobe/react-spectrum';
5+
import { Form } from 'YourComponents'; // See Form Example
6+
7+
// HOW TO SETUP A COMBO BOX COMPONENT WITH INFORMED
8+
const Input = ({ children, items, ...props }) => {
9+
const { render, informed, fieldState, fieldApi, userProps, ref } = useField({
10+
type: 'text',
11+
...props
12+
});
13+
14+
const { required } = userProps;
15+
const { error, showError } = fieldState;
16+
17+
return render(
18+
<ComboBox
19+
ref={ref}
20+
validationState={!error ? null : 'invalid'}
21+
errorMessage={showError ? error : undefined}
22+
isRequired={required}
23+
{...userProps}
24+
{...informed}
25+
items={items}
26+
allowsCustomValue
27+
onInputChange={v => fieldApi.setValue(v, {})}>
28+
{item => <Item key={item.id}>{item.value}</Item>}
29+
</ComboBox>
30+
);
31+
};
32+
33+
// HOW TO USE IT
34+
const Example = () => {
35+
const items = [
36+
{ id: 1, value: 'Apple' },
37+
{ id: 2, value: 'Banana' },
38+
{ id: 3, value: 'Cherry' }
39+
];
40+
41+
return (
42+
<Form
43+
initialValues={{
44+
fruit: 'Apple'
45+
}}>
46+
<Input name="fruit" label="Fruit" items={items} />
47+
<Button type="submit" variant="primary">
48+
submit
49+
</Button>
50+
<Debug />
51+
</Form>
52+
);
53+
};
54+
55+
export default Example;

‎vitedocs/Pages/GettingStarted/Inputs/AdobeForm/Example.jsx‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
import React from 'react';
2+
import { useForm, useField, Debug } from 'informed';
3+
import { Form as AdobeForm, TextField, Button } from '@adobe/react-spectrum';
4+
5+
// HOW TO SETUP AN ADOBE FORM COMPONENT WITH INFORMED
6+
const CustomForm = ({ children, ...rest }) => {
7+
const { formController, render, userProps } = useForm(rest);
8+
9+
/* --- DONT FORGET TO CALL THE RENDER METHOD FROM THE HOOK! --- */
10+
return render(
11+
<AdobeForm
12+
{...userProps}
13+
onReset={formController.reset}
14+
onSubmit={formController.submitForm}
15+
onKeyDown={formController.keyDown}>
16+
{children}
17+
</AdobeForm>
18+
);
19+
};
20+
21+
// Simple Adobe Input Component for example
22+
const Input = ({ type, ...props }) => {
23+
const { render, informed, fieldState, fieldApi, userProps, ref } = useField({
24+
type: type ?? 'text',
25+
...props
26+
});
27+
const { required, disabled } = userProps;
28+
const { error, showError } = fieldState;
29+
return render(
30+
<TextField
31+
validationState={!error ? null : 'invalid'}
32+
errorMessage={showError ? error : undefined}
33+
isRequired={required}
34+
isDisabled={disabled}
35+
{...userProps}
36+
{...informed}
37+
onChange={() => {}}
38+
onInput={e => {
39+
fieldApi.setValue(e.target.value, e);
40+
}}
41+
onBlur={e => {
42+
fieldApi.setTouched(true, e);
43+
}}
44+
ref={r => {
45+
if (!ref.current) {
46+
ref.current = !r ? ref.current : r.getInputElement();
47+
}
48+
}}
49+
/>
50+
);
51+
};
52+
53+
// HOW TO USE IT
54+
const Example = () => {
55+
return (
56+
<CustomForm>
57+
<Input name="name" label="First name:" />
58+
<Button type="submit" variant="primary">
59+
Submit
60+
</Button>
61+
<Debug />
62+
</CustomForm>
63+
);
64+
};
65+
66+
export default Example;

0 commit comments

Comments
 (0)