Skip to content

Commit 4c68f64

Browse files
DanRibbensDanRibbens
authored
docs: update demo links and add examples to test dir (#773)
1 parent cc36019 commit 4c68f64

File tree

21 files changed

+551
-4
lines changed

21 files changed

+551
-4
lines changed

‎docs/admin/components.mdx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ You can override a set of admin panel-wide components by providing a component t
2323
| --------------------- | -------------|
2424
| **`Nav`** | Contains the sidebar and mobile Nav in its entirety. |
2525
| **`BeforeDashboard`** | Array of components to inject into the built-in Dashboard, _before_ the default dashboard contents. |
26-
| **`AfterDashboard`** | Array of components to inject into the built-in Dashboard, _after_ the default dashboard contents. |
26+
| **`AfterDashboard`** | Array of components to inject into the built-in Dashboard, _after_ the default dashboard contents. [Demo](https://github.com/payloadcms/payload/tree/master/test/admin/components/AfterDashboard/index.tsx)|
2727
| **`BeforeLogin`** | Array of components to inject into the built-in Login, _before_ the default login form. |
2828
| **`AfterLogin`** | Array of components to inject into the built-in Login, _after_ the default login form. |
2929
| **`BeforeNavLinks`** | Array of components to inject into the built-in Nav, _before_ the links themselves. |
@@ -60,7 +60,7 @@ export default buildConfig({
6060
})
6161
```
6262

63-
*For more examples regarding how to customize components, look at the [demo app](https://github.com/payloadcms/payload/tree/master/demo).*
63+
*For more examples regarding how to customize components, look at the following [examples](https://github.com/payloadcms/payload/tree/master/test/admin/components).*
6464

6565
### Collections
6666

@@ -195,12 +195,12 @@ Your custom route components will be given all the props that a React Router `<R
195195

196196
#### Example
197197

198-
You can find examples of custom route views in the [Payload source code `/demo/client/components/views` folder](https://github.com/payloadcms/payload/tree/master/demo/client/components/views). There, you'll find two custom routes:
198+
You can find examples of custom route views in the [Payload source code `/test/admin/components/views` folder](https://github.com/payloadcms/payload/tree/master/test/admin/components/views). There, you'll find two custom routes:
199199

200200
1. A custom view that uses the `DefaultTemplate`, which is the built-in Payload template that displays the sidebar and "eyebrow nav"
201201
1. A custom view that uses the `MinimalTemplate` - which is just a centered template used for things like logging in or out
202202

203-
To see how to pass in your custom views to create custom routes of your own, take a look at the `admin.components.routes` property of the [Payload demo config](https://github.com/payloadcms/payload/blob/master/demo/payload.config.ts).
203+
To see how to pass in your custom views to create custom routes of your own, take a look at the `admin.components.routes` property of the [Payload test admin config](https://github.com/payloadcms/payload/blob/master/test/admin/config.ts).
204204

205205
## Custom providers
206206

‎test/admin/components/AfterDashboard/index.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
2+
.after-dashboard {
3+
border-top: 1px solid var(--theme-elevation-100);
4+
}

‎test/admin/components/AfterDashboard/index.tsx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import React from 'react';
2+
3+
import './index.scss';
4+
5+
const baseClass = 'after-dashboard';
6+
7+
const AfterDashboard: React.FC = () => {
8+
return (
9+
<div className={baseClass}>
10+
<h4>Test Config</h4>
11+
<p>
12+
The /test directory is used for create custom configurations and data seeding for developing features, writing e2e and integration testing.
13+
</p>
14+
</div>
15+
);
16+
};
17+
18+
export default AfterDashboard;

‎test/admin/components/AfterNavLinks/index.tsx‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import React from 'react';
2+
import { NavLink } from 'react-router-dom';
3+
import { useConfig } from '../../../../src/admin/components/utilities/Config';
4+
5+
// As this is the demo project, we import our dependencies from the `src` directory.
6+
import Chevron from '../../../../src/admin/components/icons/Chevron';
7+
8+
// In your projects, you can import as follows:
9+
// import { Chevron } from 'payload/components/icons';
10+
11+
12+
const baseClass = 'after-nav-links';
13+
14+
const AfterNavLinks: React.FC = () => {
15+
const { routes: { admin: adminRoute } } = useConfig();
16+
17+
return (
18+
<div className={baseClass}>
19+
<span className="nav__label">Custom Routes</span>
20+
<nav>
21+
<NavLink
22+
activeClassName="active"
23+
to={`${adminRoute}/custom-default-route`}
24+
>
25+
<Chevron />
26+
Default Template
27+
</NavLink>
28+
<NavLink
29+
activeClassName="active"
30+
to={`${adminRoute}/custom-minimal-route`}
31+
>
32+
<Chevron />
33+
Minimal Template
34+
</NavLink>
35+
</nav>
36+
</div>
37+
);
38+
};
39+
40+
export default AfterNavLinks;

‎test/admin/components/BeforeLogin/index.tsx‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import React from 'react';
2+
3+
const BeforeLogin: React.FC = () => {
4+
return (
5+
<div>
6+
<h3>Welcome</h3>
7+
<p>
8+
This demo is a set up to configure Payload for the develop and testing of features. To see a product demo of a Payload project
9+
please visit:
10+
{' '}
11+
<a
12+
href="https://demo.payloadcms.com"
13+
target="_blank"
14+
rel="noreferrer"
15+
>
16+
demo.payloadcms.com
17+
</a>
18+
.
19+
</p>
20+
</div>
21+
);
22+
};
23+
24+
export default BeforeLogin;

‎test/admin/components/CustomProvider/index.tsx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import React, { createContext, useState, useContext } from 'react';
2+
3+
type CustomContext = {
4+
getCustom
5+
setCustom
6+
}
7+
8+
const Context = createContext({} as CustomContext);
9+
10+
const CustomProvider: React.FC = ({ children }) => {
11+
const [getCustom, setCustom] = useState({});
12+
13+
const value = {
14+
getCustom,
15+
setCustom,
16+
};
17+
18+
console.log('custom provider called');
19+
20+
return (
21+
<Context.Provider value={value}>
22+
{children}
23+
</Context.Provider>
24+
);
25+
};
26+
27+
export default CustomProvider;
28+
29+
export const useCustom = () => useContext(Context);

‎test/admin/components/DemoUIField/Cell.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import React from 'react';
2+
3+
const DemoUIFieldCell: React.FC = () => (
4+
<p>Demo UI Field Cell</p>
5+
);
6+
7+
export default DemoUIFieldCell;

‎test/admin/components/DemoUIField/Field.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import React from 'react';
2+
3+
const DemoUIField: React.FC = () => (
4+
<p>Demo UI Field</p>
5+
);
6+
7+
export default DemoUIField;

‎test/admin/components/richText/elements/Button/Button/index.scss‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
@import '../../../../../../../src/admin/scss/styles.scss';
2+
3+
.button-rich-text-button {
4+
.btn {
5+
margin-right: base(1);
6+
}
7+
8+
&__modal {
9+
display: flex;
10+
align-items: center;
11+
height: 100%;
12+
13+
&.payload__modal-item--enterDone {
14+
@include blur-bg;
15+
}
16+
}
17+
18+
&__header {
19+
width: 100%;
20+
margin-bottom: $baseline;
21+
display: flex;
22+
justify-content: space-between;
23+
24+
h3 {
25+
margin: 0;
26+
}
27+
28+
svg {
29+
width: base(1.5);
30+
height: base(1.5);
31+
}
32+
}
33+
}

‎test/admin/components/richText/elements/Button/Button/index.tsx‎

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
import React, { Fragment, useCallback } from 'react';
2+
import { Modal, useModal } from '@faceless-ui/modal';
3+
import { Transforms } from 'slate';
4+
import { useSlate, ReactEditor } from 'slate-react';
5+
import MinimalTemplate from '../../../../../../../src/admin/components/templates/Minimal';
6+
import ElementButton from '../../../../../../../src/admin/components/forms/field-types/RichText/elements/Button';
7+
import X from '../../../../../../../src/admin/components/icons/X';
8+
import Button from '../../../../../../../src/admin/components/elements/Button';
9+
import Form from '../../../../../../../src/admin/components/forms/Form';
10+
import Submit from '../../../../../../../src/admin/components/forms/Submit';
11+
import reduceFieldsToValues from '../../../../../../../src/admin/components/forms/Form/reduceFieldsToValues';
12+
import Text from '../../../../../../../src/admin/components/forms/field-types/Text';
13+
import Checkbox from '../../../../../../../src/admin/components/forms/field-types/Checkbox';
14+
import Select from '../../../../../../../src/admin/components/forms/field-types/Select';
15+
16+
import './index.scss';
17+
18+
const baseClass = 'button-rich-text-button';
19+
20+
const initialFormData = {
21+
style: 'primary',
22+
};
23+
24+
const insertButton = (editor, { href, label, style, newTab = false }: any) => {
25+
const text = { text: ' ' };
26+
const button = {
27+
type: 'button',
28+
href,
29+
style,
30+
newTab,
31+
label,
32+
children: [
33+
text,
34+
],
35+
};
36+
37+
const nodes = [button, { children: [{ text: '' }] }];
38+
39+
if (editor.blurSelection) {
40+
Transforms.select(editor, editor.blurSelection);
41+
}
42+
43+
Transforms.insertNodes(editor, nodes);
44+
45+
const currentPath = editor.selection.anchor.path[0];
46+
const newSelection = { anchor: { path: [currentPath + 1, 0], offset: 0 }, focus: { path: [currentPath + 1, 0], offset: 0 } };
47+
48+
Transforms.select(editor, newSelection);
49+
ReactEditor.focus(editor);
50+
};
51+
52+
const ToolbarButton: React.FC<{path: string}> = ({ path }) => {
53+
const { open, closeAll } = useModal();
54+
const editor = useSlate();
55+
56+
const handleAddButton = useCallback((fields) => {
57+
const data = reduceFieldsToValues(fields);
58+
insertButton(editor, data);
59+
closeAll();
60+
}, [editor, closeAll]);
61+
62+
const modalSlug = `${path}-add-button`;
63+
64+
return (
65+
<Fragment>
66+
<ElementButton
67+
className={baseClass}
68+
format="button"
69+
onClick={() => open(modalSlug)}
70+
>
71+
Button
72+
</ElementButton>
73+
<Modal
74+
slug={modalSlug}
75+
className={`${baseClass}__modal`}
76+
>
77+
<MinimalTemplate>
78+
<header className={`${baseClass}__header`}>
79+
<h3>Add button</h3>
80+
<Button
81+
buttonStyle="none"
82+
onClick={closeAll}
83+
>
84+
<X />
85+
</Button>
86+
</header>
87+
<Form
88+
onSubmit={handleAddButton}
89+
initialData={initialFormData}
90+
>
91+
<Text
92+
label="Label"
93+
name="label"
94+
required
95+
/>
96+
<Text
97+
label="URL"
98+
name="href"
99+
required
100+
/>
101+
<Select
102+
label="Style"
103+
name="style"
104+
options={[
105+
{
106+
label: 'Primary',
107+
value: 'primary',
108+
},
109+
{
110+
label: 'Secondary',
111+
value: 'secondary',
112+
},
113+
]}
114+
/>
115+
<Checkbox
116+
label="Open in new tab"
117+
name="newTab"
118+
/>
119+
<Submit>
120+
Add button
121+
</Submit>
122+
</Form>
123+
</MinimalTemplate>
124+
</Modal>
125+
</Fragment>
126+
);
127+
};
128+
129+
export default ToolbarButton;

0 commit comments

Comments
 (0)