Skip to content

Commit b5077d5

Browse files
CodeStixCodeStix
committed
Populated sidebar
1 parent c18d668 commit b5077d5

File tree

8 files changed

+214
-87
lines changed

8 files changed

+214
-87
lines changed

‎articles/Auto-disable-submit-button.md

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
## Example: Submit button that disables when unmodified/error
2+
3+
![live updating form values](https://raw.githubusercontent.com/wiki/CodeStix/typed-react-form/images/submitbutton.gif)
4+
5+
```jsx
6+
function FormExample() {
7+
const form = useForm(
8+
{
9+
name: "John",
10+
},
11+
(values) => ({ name: values.name.length < 3 ? "Name must be longer" : undefined }) // Example validator
12+
);
13+
return (
14+
<form
15+
onSubmit={(ev) => {
16+
ev.preventDefault();
17+
console.log("save", form.values);
18+
form.setDefaultValues(form.values);
19+
}}>
20+
<FormInput form={form} name="name" />
21+
{/* Listen for any change on the form */}
22+
<AnyListener form={form} render={(form) => <button disabled={!form.dirty || form.error}>Save</button>} />
23+
</form>
24+
);
25+
}
26+
```

‎articles/Custom inputs.md renamed to ‎articles/Custom-input.md

Lines changed: 4 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
## Example: Custom input
2+
23
If the default input types (FormInput, FormSelect ...) do not provide enough functionality for you, you should create a custom input component.
34

45
![custom input](https://raw.githubusercontent.com/wiki/CodeStix/typed-react-form/images/custominput.gif)
@@ -53,44 +54,6 @@ function ExampleForm() {
5354
}
5455
```
5556

56-
## Example: Form JSON component
57-
58-
![live updating form values](https://raw.githubusercontent.com/wiki/CodeStix/typed-react-form/images/jsoncomponent.gif)
59-
60-
```jsx
61-
// Take a form containing any values
62-
function FormJson(props: { form: FormState<any> }) {
63-
// Listen for all changes on the form
64-
const { values } = useAnyListener(props.form);
65-
// Show the json representation of the values in the form
66-
return <pre>
67-
{JSON.stringify(values, null, 2)}
68-
</pre>;
69-
}
70-
71-
// Usage
72-
function ExampleForm() {
73-
const form = useForm({ name: "John", age: 19 });
74-
return (
75-
<form
76-
style={{ margin: "1em" }}
77-
onSubmit={async (ev) => {
78-
ev.preventDefault();
79-
console.log("submit", form.values);
80-
}}
81-
>
82-
<FormInput form={form} name="name" />
83-
<FormInput type="number" form={form} name="age" />
84-
{/* Use your component, pass the form */}
85-
<FormJson form={form} />
86-
{/* Using AnyListener, provides the same functionality */}
87-
<AnyListener form={form} render={({ values }) => <pre>{JSON.stringify(values, null, 2)}</pre>} />
88-
<button>Submit</button>
89-
</form>
90-
);
91-
}
92-
```
93-
9457
## Example: Submit button that disables when unmodified/error
9558

9659
![live updating form values](https://raw.githubusercontent.com/wiki/CodeStix/typed-react-form/images/submitbutton.gif)
@@ -99,7 +62,7 @@ function ExampleForm() {
9962
function FormExample() {
10063
const form = useForm(
10164
{
102-
name: "John"
65+
name: "John",
10366
},
10467
(values) => ({ name: values.name.length < 3 ? "Name must be longer" : undefined }) // Example validator
10568
);
@@ -109,12 +72,11 @@ function FormExample() {
10972
ev.preventDefault();
11073
console.log("save", form.values);
11174
form.setDefaultValues(form.values);
112-
}}
113-
>
75+
}}>
11476
<FormInput form={form} name="name" />
11577
{/* Listen for any change on the form */}
11678
<AnyListener form={form} render={(form) => <button disabled={!form.dirty || form.error}>Save</button>} />
11779
</form>
11880
);
11981
}
120-
```
82+
```

‎articles/Live-json-component.md

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
## Example: Form JSON component
2+
3+
![live updating form values](https://raw.githubusercontent.com/wiki/CodeStix/typed-react-form/images/jsoncomponent.gif)
4+
5+
```jsx
6+
// Take a form containing any values
7+
function FormJson(props: { form: FormState<any> }) {
8+
// Listen for all changes on the form
9+
const { values } = useAnyListener(props.form);
10+
// Show the json representation of the values in the form
11+
return <pre>{JSON.stringify(values, null, 2)}</pre>;
12+
}
13+
14+
// Usage
15+
function ExampleForm() {
16+
const form = useForm({ name: "John", age: 19 });
17+
return (
18+
<form
19+
style={{ margin: "1em" }}
20+
onSubmit={async (ev) => {
21+
ev.preventDefault();
22+
console.log("submit", form.values);
23+
}}>
24+
<FormInput form={form} name="name" />
25+
<FormInput type="number" form={form} name="age" />
26+
{/* Use your component, pass the form */}
27+
<FormJson form={form} />
28+
{/* Using AnyListener, provides the same functionality */}
29+
<AnyListener form={form} render={({ values }) => <pre>{JSON.stringify(values, null, 2)}</pre>} />
30+
<button>Submit</button>
31+
</form>
32+
);
33+
}
34+
```

‎articles/Object fields.md renamed to ‎articles/Object-fields.md

File renamed without changes.

‎articles/_Sidebar.md

Lines changed: 70 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,70 @@
1-
- [Home](https://github.com/CodeStix/typed-react-form/wiki/)
2-
- Guides
3-
- [Form fields](https://github.com/CodeStix/typed-react-form/wiki/FormInput)
4-
- [FormInput](https://github.com/CodeStix/typed-react-form/wiki/FormInput)
5-
- [FormTextArea](https://github.com/CodeStix/typed-react-form/wiki/FormTextArea)
6-
- [FormSelect](https://github.com/CodeStix/typed-react-form/wiki/FormSelect)
7-
- [FormError](https://github.com/CodeStix/typed-react-form/wiki/FormError)
8-
- [Field toggling](https://github.com/CodeStix/typed-react-form/wiki/Toggling-a-field)
9-
- [Object fields](https://github.com/CodeStix/typed-react-form/wiki/Object-fields)
10-
- [Array fields](https://github.com/CodeStix/typed-react-form/wiki/Array-fields)
11-
- [Validation](https://github.com/CodeStix/typed-react-form/wiki/Validation)
12-
- [yup](https://github.com/CodeStix/typed-react-form/wiki/yup)
13-
- [styled-components](https://github.com/CodeStix/typed-react-form/wiki/Problem-with-styled-components)
14-
- [Examples](https://github.com/CodeStix/typed-react-form/wiki/Custom-inputs)
15-
- Reference
16-
- Classes
17-
- [FormState](https://github.com/CodeStix/typed-react-form/wiki/FormState)
18-
- [ChildFormState](https://github.com/CodeStix/typed-react-form/wiki/FormState#childformstate)
19-
- Hooks
20-
- [useForm](https://github.com/CodeStix/typed-react-form/wiki/useForm)
21-
- [useChildForm](https://github.com/CodeStix/typed-react-form/wiki/useChildForm)
22-
- [useListener](https://github.com/CodeStix/typed-react-form/wiki/useListener)
23-
- [useAnyListener](https://github.com/CodeStix/typed-react-form/wiki/useAnyListener)
24-
- [useArrayForm](https://github.com/CodeStix/typed-react-form/wiki/useArrayForm)
25-
- Components
26-
- [ChildForm](https://github.com/CodeStix/typed-react-form/wiki/ChildForm)
27-
- [Listener](https://github.com/CodeStix/typed-react-form/wiki/Listener)
28-
- [AnyListener](https://github.com/CodeStix/typed-react-form/wiki/AnyListener)
29-
- [ArrayForm](https://github.com/CodeStix/typed-react-form/wiki/ArrayForm)
30-
- Form element components
31-
- [FormInput](https://github.com/CodeStix/typed-react-form/wiki/FormInput)
32-
- [FormSelect](https://github.com/CodeStix/typed-react-form/wiki/FormSelect)
33-
- [FormTextArea](https://github.com/CodeStix/typed-react-form/wiki/FormTextArea)
34-
- [FormError](https://github.com/CodeStix/typed-react-form/wiki/FormError)
1+
- [Home](https://github.com/CodeStix/typed-react-form/wiki/)
2+
- Guides
3+
- [Form fields](https://github.com/CodeStix/typed-react-form/wiki/FormInput)
4+
- [FormInput](https://github.com/CodeStix/typed-react-form/wiki/FormInput)
5+
- [FormTextArea](https://github.com/CodeStix/typed-react-form/wiki/FormTextArea)
6+
- [FormSelect](https://github.com/CodeStix/typed-react-form/wiki/FormSelect)
7+
- [FormError](https://github.com/CodeStix/typed-react-form/wiki/FormError)
8+
- [Field toggling](https://github.com/CodeStix/typed-react-form/wiki/Toggling-a-field)
9+
- [Object fields](https://github.com/CodeStix/typed-react-form/wiki/Object-fields)
10+
- [Array fields](https://github.com/CodeStix/typed-react-form/wiki/Array-fields)
11+
- [Validation](https://github.com/CodeStix/typed-react-form/wiki/Validation)
12+
- [yup](https://github.com/CodeStix/typed-react-form/wiki/yup)
13+
- [styled-components](https://github.com/CodeStix/typed-react-form/wiki/Problem-with-styled-components)
14+
- [Examples](https://github.com/CodeStix/typed-react-form/wiki/Custom-inputs)
15+
- Reference
16+
17+
- Classes
18+
- [FormState](https://github.com/CodeStix/typed-react-form/wiki/FormState)
19+
- [ChildFormState](https://github.com/CodeStix/typed-react-form/wiki/FormState#childformstate)
20+
- Hooks
21+
- [useForm](https://github.com/CodeStix/typed-react-form/wiki/useForm)
22+
- [useChildForm](https://github.com/CodeStix/typed-react-form/wiki/useChildForm)
23+
- [useListener](https://github.com/CodeStix/typed-react-form/wiki/useListener)
24+
- [useAnyListener](https://github.com/CodeStix/typed-react-form/wiki/useAnyListener)
25+
- [useArrayForm](https://github.com/CodeStix/typed-react-form/wiki/useArrayForm)
26+
- Components
27+
- [ChildForm](https://github.com/CodeStix/typed-react-form/wiki/ChildForm)
28+
- [Listener](https://github.com/CodeStix/typed-react-form/wiki/Listener)
29+
- [AnyListener](https://github.com/CodeStix/typed-react-form/wiki/AnyListener)
30+
- [ArrayForm](https://github.com/CodeStix/typed-react-form/wiki/ArrayForm)
31+
- Form element components
32+
- [FormInput](https://github.com/CodeStix/typed-react-form/wiki/FormInput)
33+
- [FormSelect](https://github.com/CodeStix/typed-react-form/wiki/FormSelect)
34+
- [FormTextArea](https://github.com/CodeStix/typed-react-form/wiki/FormTextArea)
35+
- [FormError](https://github.com/CodeStix/typed-react-form/wiki/FormError)
36+
37+
- [Home](https://github.com/CodeStix/typed-react-form/wiki/)
38+
- Guides
39+
- [Form fields](https://github.com/CodeStix/typed-react-form/wiki/FormInput)
40+
- [FormInput](https://github.com/CodeStix/typed-react-form/wiki/FormInput)
41+
- [FormTextArea](https://github.com/CodeStix/typed-react-form/wiki/FormTextArea)
42+
- [FormSelect](https://github.com/CodeStix/typed-react-form/wiki/FormSelect)
43+
- [FormError](https://github.com/CodeStix/typed-react-form/wiki/FormError)
44+
- [Field toggling](https://github.com/CodeStix/typed-react-form/wiki/Toggling-a-field)
45+
- [Object fields](https://github.com/CodeStix/typed-react-form/wiki/Object-fields)
46+
- [Array fields](https://github.com/CodeStix/typed-react-form/wiki/Array-fields)
47+
- [Validation](https://github.com/CodeStix/typed-react-form/wiki/Validation)
48+
- [yup](https://github.com/CodeStix/typed-react-form/wiki/yup)
49+
- [styled-components](https://github.com/CodeStix/typed-react-form/wiki/Problem-with-styled-components)
50+
- [Examples](https://github.com/CodeStix/typed-react-form/wiki/Custom-inputs)
51+
- Reference
52+
- Classes
53+
- [FormState](https://github.com/CodeStix/typed-react-form/wiki/FormState)
54+
- [ChildFormState](https://github.com/CodeStix/typed-react-form/wiki/FormState#childformstate)
55+
- Hooks
56+
- [useForm](https://github.com/CodeStix/typed-react-form/wiki/useForm)
57+
- [useChildForm](https://github.com/CodeStix/typed-react-form/wiki/useChildForm)
58+
- [useListener](https://github.com/CodeStix/typed-react-form/wiki/useListener)
59+
- [useAnyListener](https://github.com/CodeStix/typed-react-form/wiki/useAnyListener)
60+
- [useArrayForm](https://github.com/CodeStix/typed-react-form/wiki/useArrayForm)
61+
- Components
62+
- [ChildForm](https://github.com/CodeStix/typed-react-form/wiki/ChildForm)
63+
- [Listener](https://github.com/CodeStix/typed-react-form/wiki/Listener)
64+
- [AnyListener](https://github.com/CodeStix/typed-react-form/wiki/AnyListener)
65+
- [ArrayForm](https://github.com/CodeStix/typed-react-form/wiki/ArrayForm)
66+
- Form element components
67+
- [FormInput](https://github.com/CodeStix/typed-react-form/wiki/FormInput)
68+
- [FormSelect](https://github.com/CodeStix/typed-react-form/wiki/FormSelect)
69+
- [FormTextArea](https://github.com/CodeStix/typed-react-form/wiki/FormTextArea)
70+
- [FormError](https://github.com/CodeStix/typed-react-form/wiki/FormError)

‎components/CenterContainer.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,8 @@ const InnerContainer = styled.div`
1212
`;
1313

1414
const OuterContainer = styled.div`
15-
max-width: 1000px;
16-
width: 1000px;
15+
max-width: 1200px;
16+
width: 1200px;
1717
`;
1818

1919
export function CenterContainer({ children, ...rest }: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>) {

‎components/SideBar.tsx

Lines changed: 77 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,105 @@
11
import React from "react";
22
import styled from "styled-components";
33
import ReactMarkdown from "react-markdown";
4+
import Link from "next/link";
5+
import { useRouter } from "next/router";
46

5-
const Sidebar = {
6-
Home: "",
7-
};
7+
const CATEGORIES = [
8+
{
9+
category: "Basic",
10+
items: [
11+
{ name: "Getting started", url: "/docs/Home" },
12+
{ name: "FormInput", url: "/docs/FormInput" },
13+
{ name: "FormTextArea", url: "/docs/FormTextArea" },
14+
{ name: "FormSelect", url: "/docs/FormSelect" },
15+
{ name: "FormError", url: "/docs/FormError" },
16+
{ name: "Field toggling", url: "/docs/Toggling-a-field" },
17+
{ name: "Object fields", url: "/docs/Object-fields" },
18+
{ name: "Array fields", url: "/docs/Array-fields" },
19+
{ name: "styled-components", url: "/docs/Problem-with-styled-components" },
20+
],
21+
},
22+
{
23+
category: "Validation",
24+
items: [
25+
{ name: "Validation", url: "/docs/Validation" },
26+
{ name: "yup", url: "/docs/yup" },
27+
],
28+
},
29+
{
30+
category: "Examples",
31+
items: [
32+
{ name: "Custom input", url: "/docs/Custom-input" },
33+
{ name: "Live JSON display", url: "/docs/Live-json-component" },
34+
{ name: "Auto disabling submit button", url: "/docs/Auto-disable-submit-button" },
35+
],
36+
},
37+
{
38+
category: "Reference",
39+
items: [
40+
{ name: "FormState", url: "/docs/FormState" },
41+
{ name: "ChildFormState", url: "/docs/FormState#childformstate" },
42+
{ name: "useForm", url: "/docs/useForm" },
43+
{ name: "useChildForm", url: "/docs/useChildForm" },
44+
{ name: "useListener", url: "/docs/useListener" },
45+
{ name: "useAnyListener", url: "/docs/useAnyListener" },
46+
{ name: "useArrayForm", url: "/docs/useArrayForm" },
47+
{ name: "ChildForm", url: "/docs/ChildForm" },
48+
// { name: "Listener", url: "/docs/Listener" },
49+
// { name: "AnyListener", url: "/docs/AnyListener" },
50+
{ name: "ArrayForm", url: "/docs/ArrayForm" },
51+
{ name: "FormInput", url: "/docs/FormInput" },
52+
{ name: "FormSelect", url: "/docs/FormSelect" },
53+
{ name: "FormTextArea", url: "/docs/FormTextArea" },
54+
{ name: "FormError", url: "/docs/FormError" },
55+
],
56+
},
57+
];
858

959
const Container = styled.div`
10-
margin: 1em 0;
1160
position: sticky;
1261
top: 1em;
1362
`;
1463

15-
const Item = styled.div`
64+
const Item = styled.a<{ current: boolean }>`
65+
display: block;
1666
padding: 0.4em 0.8em;
1767
color: #111;
1868
border-bottom: 1px solid #0002;
1969
cursor: pointer;
70+
text-decoration: none;
71+
72+
${(e) => e.current && "background: #0972d422; border: none;"}
2073
2174
&:hover {
2275
transition: 50ms;
2376
/* background: #0001; */
24-
transform: translateX(3px);
77+
/* transform: translateX(3px); */
2578
color: #0972d4;
2679
}
2780
`;
2881

82+
const Category = styled.div`
83+
margin: 1.2em 0 0 0;
84+
padding: 0.4em 0;
85+
font-weight: bold;
86+
`;
87+
2988
export function SideBar() {
89+
let router = useRouter();
90+
3091
return (
3192
<Container>
32-
<Item>Item 1</Item>
33-
<Item>Item 2</Item>
93+
{CATEGORIES.map((e) => (
94+
<>
95+
<Category>{e.category}</Category>
96+
{e.items.map((e) => (
97+
<Link href={e.url} passHref>
98+
<Item current={router.asPath === e.url}>{e.name}</Item>
99+
</Link>
100+
))}
101+
</>
102+
))}
34103
</Container>
35104
);
36105
}

‎pages/docs/[doc].tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ interface Props {
1818

1919
const Container = styled.div`
2020
display: grid;
21-
gap: 2em;
21+
gap: 3em;
2222
grid-template-columns: 200px 1fr;
2323
`;
2424

0 commit comments

Comments
 (0)