Skip to content

Commit 37431f3

Browse files
wellmannwellmann
committed
code style: use prettier
1 parent 1c50271 commit 37431f3

20 files changed

+188
-150
lines changed

‎.editorconfig‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@ root = true
66
charset = utf-8
77
indent_style = space
88
indent_size = 2
9-
insert_final_newline = false
9+
end_of_line = lf
10+
insert_final_newline = true
1011
trim_trailing_whitespace = true
1112

1213
[*.php]

‎.prettierignore‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
/.github/
2+
/dist/
3+
/lang/
4+
/vendor/
5+
/composer.json
6+
/composer.lock

‎.prettierrc‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"trailingComma": "es5",
3+
"semi": true,
4+
"singleQuote": true
5+
}

‎.wp-env.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,4 +9,4 @@
99
"lifecycleScripts": {
1010
"afterStart": "wp-env run cli wp user update 1 --admin_color=modern"
1111
}
12-
}
12+
}

‎README.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
# WP React Admin Page Example
22

33
## Overview
4+
45
This WordPress plugin is designed to demonstrate the usage of React within a WordPress admin page. It utilizes React, TypeScript and [Gutenberg components](https://wordpress.github.io/gutenberg/).
56

6-
![1](screenshot.jpg)
7+
![1](screenshot.jpg)

‎assets/components/App.module.css‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@
77

88
:global(.wrap),
99
:global(#wpfooter) {
10-
1110
a {
1211
color: var(--wp-admin-theme-color);
1312

@@ -25,14 +24,14 @@
2524
padding-block: 1em;
2625
padding-inline: 22px 20px;
2726
background-color: #fff;
28-
border-bottom: 1px solid rgba(0, 0, 0, .1);
29-
z-index: 9999;
27+
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
28+
z-index: 999;
3029

3130
svg {
3231
max-width: 2em;
3332
max-height: 2em;
3433
vertical-align: middle;
35-
margin-inline-end: .5em;
34+
margin-inline-end: 0.5em;
3635
color: var(--wp-admin-theme-color);
3736
}
3837

@@ -42,11 +41,10 @@
4241
}
4342

4443
.mainNav {
45-
4644
:global(.components-tab-panel__tabs) {
4745
justify-content: center;
4846
background-color: #fff;
49-
box-shadow: rgba(0, 0, 0, .1) 0 0 0 1px;
47+
box-shadow: rgba(0, 0, 0, 0.1) 0 0 0 1px;
5048
border-radius: 7px;
5149
overflow: hidden;
5250
}
@@ -61,4 +59,4 @@
6159
position: fixed;
6260
bottom: 2.5em;
6361
z-index: 999;
64-
}
62+
}

‎assets/components/App.tsx‎

Lines changed: 56 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@ import {
55
Snackbar,
66
TabPanel,
77
__experimentalGrid as Grid,
8-
__experimentalSpacer as Spacer
8+
__experimentalSpacer as Spacer,
99
} from '@wordpress/components';
10-
import { useEffect, useState } from "@wordpress/element";
10+
import { useEffect, useState } from '@wordpress/element';
1111
import { __ } from '@wordpress/i18n';
1212
import style from './App.module.css';
1313
import Icon from '../images/icon.svg';
@@ -17,127 +17,116 @@ import TabTwo from './Tab/TabTwo';
1717
import TabThree from './Tab/TabThree';
1818

1919
const App = ({ title }: { title: string }) => {
20-
const [showAnnouncement, setShowAnnouncement] = useState<boolean | null>(null);
20+
const [showAnnouncement, setShowAnnouncement] = useState<boolean | null>(
21+
null
22+
);
2123
const [error, setError] = useState<string | null>(null);
2224
const [success, setSuccess] = useState<string | null>(null);
2325
const [tab, setTab] = useSearchParams('tab', 'tab-1');
2426

2527
useEffect(() => {
2628
setShowAnnouncement(true);
27-
setError(__('This is an example error message.', 'wp-react-admin-page-example'));
29+
setError(
30+
__('This is an example error message.', 'wp-react-admin-page-example')
31+
);
2832
setSuccess(__('Example success', 'wp-react-admin-page-example'));
2933
}, []);
3034

3135
return (
3236
<>
33-
<TopBar
34-
title={ title }
35-
/>
36-
<Spacer marginY={ 12 } />
37-
<Grid
38-
columns={ 1 }
39-
gap={ 12 }
40-
className={ style.inner }
41-
>
42-
{ showAnnouncement && (
37+
<TopBar title={title} />
38+
<Spacer marginY={12} />
39+
<Grid columns={1} gap={12} className={style.inner}>
40+
{showAnnouncement && (
4341
<Notice
4442
status="info"
45-
onRemove={ () => setShowAnnouncement(null) }
43+
onRemove={() => setShowAnnouncement(null)}
4644
actions={[
4745
{
4846
label: __('Click me!', 'wp-react-admin-page-example'),
49-
onClick: () => setShowAnnouncement(null)
47+
onClick: () => setShowAnnouncement(null),
5048
},
5149
{
52-
label: __('Or visit a link for more info', 'wp-react-admin-page-example'),
50+
label: __(
51+
'Or visit a link for more info',
52+
'wp-react-admin-page-example'
53+
),
5354
url: 'https://wordpress.org',
54-
variant: 'link'
55-
}
55+
variant: 'link',
56+
},
5657
]}
5758
>
58-
<h2>{ __('Announcement banner', 'wp-react-admin-page-example') }</h2>
59-
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
59+
<h2>{__('Announcement banner', 'wp-react-admin-page-example')}</h2>
60+
<p>
61+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
62+
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
63+
erat, sed diam voluptua.
64+
</p>
6065
</Notice>
61-
) }
66+
)}
6267
<TabPanel
6368
activeClass="is-active"
64-
onSelect={ setTab }
65-
initialTabName={ tab }
66-
className={ style.mainNav }
67-
tabs={ [
69+
onSelect={setTab}
70+
initialTabName={tab}
71+
className={style.mainNav}
72+
tabs={[
6873
{
6974
name: 'tab-1',
7075
title: __('Tab 1', 'wp-react-admin-page-example'),
71-
component: TabOne
76+
component: TabOne,
7277
},
7378
{
7479
name: 'tab-2',
7580
title: __('Tab 2', 'wp-react-admin-page-example'),
76-
component: TabTwo
81+
component: TabTwo,
7782
},
7883
{
7984
name: 'tab-3',
8085
title: __('Tab 3', 'wp-react-admin-page-example'),
81-
component: TabThree
86+
component: TabThree,
8287
},
83-
] }
88+
]}
8489
>
85-
{ (tab) => {
90+
{(tab) => {
8691
const TabComponent = tab.component;
8792
return (
8893
<>
89-
<Spacer marginY={ 12 } />
90-
<Grid
91-
columns={ 1 }
92-
gap={ 12 }
93-
>
94-
{ error && (
95-
<Notice
96-
status="error"
97-
onRemove={ () => setError(null) }
98-
>
99-
{ error }
94+
<Spacer marginY={12} />
95+
<Grid columns={1} gap={12}>
96+
{error && (
97+
<Notice status="error" onRemove={() => setError(null)}>
98+
{error}
10099
</Notice>
101-
) }
100+
)}
102101
<TabComponent />
103102
</Grid>
104103
</>
105104
);
106105
}}
107106
</TabPanel>
108-
<Spacer marginY={ 12 } />
107+
<Spacer marginY={12} />
109108
</Grid>
110-
{ success && (
111-
<Snackbar
112-
onRemove={ () => setSuccess(null) }
113-
className={ style.snackbar }
114-
>
115-
{ success }
109+
{success && (
110+
<Snackbar onRemove={() => setSuccess(null)} className={style.snackbar}>
111+
{success}
116112
</Snackbar>
117-
) }
113+
)}
118114
</>
119115
);
120-
}
116+
};
121117

122118
const TopBar = ({ title }: { title: string }) => {
123119
return (
124-
<Flex
125-
gap={ 1 }
126-
className={ style.topBar }
127-
>
128-
<Flex
129-
justify="start"
130-
gap={ 1 }
131-
>
132-
<Icon
133-
aria-hidden="true"
134-
focusable="false"
135-
/>
136-
<h1>{ title }</h1>
120+
<Flex gap={1} className={style.topBar}>
121+
<Flex justify="start" gap={1}>
122+
<Icon aria-hidden="true" focusable="false" />
123+
<h1>{title}</h1>
137124
</Flex>
138-
<ExternalLink href="https://google.com">{ __('Help', 'wp-react-admin-page-example') }</ExternalLink>
125+
<ExternalLink href="https://google.com">
126+
{__('Help', 'wp-react-admin-page-example')}
127+
</ExternalLink>
139128
</Flex>
140129
);
141130
};
142131

143-
export default App;
132+
export default App;

‎assets/components/Box.tsx‎

Lines changed: 30 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,15 @@
1-
import { useState } from "@wordpress/element";
2-
import { __ } from "@wordpress/i18n";
3-
import { Button, Card, CardBody, CardFooter, DropdownMenu, Flex, Spinner, TextControl } from "@wordpress/components";
1+
import { useState } from '@wordpress/element';
2+
import { __ } from '@wordpress/i18n';
3+
import {
4+
Button,
5+
Card,
6+
CardBody,
7+
CardFooter,
8+
DropdownMenu,
9+
Flex,
10+
Spinner,
11+
TextControl,
12+
} from '@wordpress/components';
413

514
const Box = () => {
615
const [isProcessing, setIsProcessing] = useState(false);
@@ -9,44 +18,46 @@ const Box = () => {
918
return (
1019
<div>
1120
<Flex>
12-
<h2>{ __('Heading', 'wp-react-admin-page-example') }</h2>
21+
<h2>{__('Heading', 'wp-react-admin-page-example')}</h2>
1322
<DropdownMenu
1423
icon="ellipsis"
15-
label={ __('Options', 'wp-react-admin-page-example') }
24+
label={__('Options', 'wp-react-admin-page-example')}
1625
controls={[
1726
{
1827
title: __('First option', 'wp-react-admin-page-example'),
1928
icon: 'saved',
20-
onClick: () => alert(__('First option', 'wp-react-admin-page-example'))
29+
onClick: () =>
30+
alert(__('First option', 'wp-react-admin-page-example')),
2131
},
2232
{
2333
title: __('Second option', 'wp-react-admin-page-example'),
24-
onClick: () => alert(__('Second option', 'wp-react-admin-page-example'))
25-
}
34+
onClick: () =>
35+
alert(__('Second option', 'wp-react-admin-page-example')),
36+
},
2637
]}
2738
/>
2839
</Flex>
2940
<Card>
3041
<CardBody>
3142
<TextControl
32-
help={ __('Help text to explain the input.', 'wp-react-admin-page-example') }
33-
label={ __('Label Text', 'wp-react-admin-page-example') }
34-
onChange={ setInputValue }
35-
value={ inputValue }
43+
help={__(
44+
'Help text to explain the input.',
45+
'wp-react-admin-page-example'
46+
)}
47+
label={__('Label Text', 'wp-react-admin-page-example')}
48+
onChange={setInputValue}
49+
value={inputValue}
3650
/>
3751
</CardBody>
3852
<CardFooter justify="flex-end">
39-
{ isProcessing && <Spinner /> }
40-
<Button
41-
variant="primary"
42-
onClick={ () => setIsProcessing(true) }
43-
>
44-
{ __('Save', 'wp-react-admin-page-example') }
53+
{isProcessing && <Spinner />}
54+
<Button variant="primary" onClick={() => setIsProcessing(true)}>
55+
{__('Save', 'wp-react-admin-page-example')}
4556
</Button>
4657
</CardFooter>
4758
</Card>
4859
</div>
4960
);
5061
};
5162

52-
export default Box;
63+
export default Box;

‎assets/components/FooterLeft.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { useRef } from '@wordpress/element';
22
import { ExternalLink } from '@wordpress/components';
3-
import { __ } from "@wordpress/i18n";
3+
import { __ } from '@wordpress/i18n';
44

55
interface Props {
66
targetElem: HTMLElement;
@@ -17,10 +17,12 @@ const FooterLeft = ({ targetElem }: Props) => {
1717

1818
return (
1919
<span id="footer-thankyou">
20-
{ __('Created with <3 using', 'wp-react-admin-page-example') + ' ' }
21-
<ExternalLink href="https://wordpress.github.io/gutenberg/">@wordpress/components</ExternalLink>
20+
{__('Created with <3 using', 'wp-react-admin-page-example') + ' '}
21+
<ExternalLink href="https://wordpress.github.io/gutenberg/">
22+
@wordpress/components
23+
</ExternalLink>
2224
</span>
2325
);
2426
};
2527

26-
export default FooterLeft;
28+
export default FooterLeft;

0 commit comments

Comments
 (0)