Skip to content

Commit 868c9fa

Browse files
hbuchelhbuchel
authored
chore(eslint): Setup eslint and prettier (#6572)
* chore: remove unused utils/components/packages * initial eslint/prettier setup * merge RemoveUnusedCode * fix(linting errors): single quotes in text * Remove WhatsNewBanner * Remove WhatsNewBanner * fix(linting errors): single quotes in text * add rule to throw eslint error for react hooks dependencies instead of a warning * Remove unused InfoPopover * Remove unused InfoPopover * fix(linting errors): do not pass children as prop in Block test * fix(linting errors): fix next img warnings * fix(linting errors): missing hook dependency GetStartedPopover * fix(linting error): move handleScroll to its own useEffect w/o dependency array * fix(linting error): missing hook dependency in MDXCode * fix(linting error): order of hooks MDXLink * fix(linting error): missing hook dependency PlatformNavigator * fix(linting error): convert findRoute to hook, useRouteFinder, move to separate utils file * fix(lint errors): MenuItem and type update * fix(lint errors): make 3rd party scripts load async * fix(linting error): cleanup function in hook useTabKeyDetection * change 3rd party scripts to defer * clean up eslint warnings in next.config.mjs * use next ExportedImage instead of Image * Switch awshome_s_code to async to fix track errors * add linting to staged files with husky * update lintstagedrc * Add prettier to husky precommit * downgrade lint-staged to v14 to work with node16 * update prettierignore * ignore mdx files for now * Remove SidebarLayoutToggle * remove unified and mdx-prism * remove comments * add eslint ignore for 3rd party script we have to load sync * simplify typing for Platform
1 parent 4add6af commit 868c9fa

28 files changed

+792
-647
lines changed

‎.eslintrc

-67
This file was deleted.

‎.eslintrc.json

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"extends": ["next/core-web-vitals", "prettier"],
3+
"plugins": ["prettier"],
4+
"rules": {
5+
"react-hooks/exhaustive-deps": "error"
6+
}
7+
}

‎.husky/pre-commit

+2
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,5 @@
22
. "$(dirname -- "$0")/_/husky.sh"
33

44
yarn spellcheck-diff
5+
6+
yarn lint-staged

‎.lintstagedrc.js

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
module.exports = {
2+
'**/*.(ts|tsx|js|css|mjs)': (filenames) => [
3+
`yarn eslint ${filenames.join(' ')}`,
4+
`yarn prettier --write ${filenames.join(' ')}`
5+
]
6+
};

‎.prettierignore

+12-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,12 @@
1-
docs
1+
.github
2+
.husky
3+
.next
4+
.vscode
5+
client
6+
node_modules
7+
public
8+
README-assets
9+
yarn.lock
10+
redirects.json
11+
*.md
12+
*.mdx

‎.prettierrc

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,4 +10,4 @@
1010
"tabWidth": 2,
1111
"trailingComma": "none",
1212
"useTabs": false
13-
}
13+
}

‎next.config.mjs

+3-8
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import rehypeImgSize from 'rehype-img-size';
77
import remarkGfm from 'remark-gfm';
88
dotenv.config({ path: './.env.custom' });
99

10-
export default () => {
10+
const nextJSConfig = () => {
1111
const withMDX = createMDX({
1212
extension: /\.mdx$/,
1313
options: {
@@ -23,21 +23,15 @@ export default () => {
2323
distDir: 'client/www/next-build',
2424
env: {
2525
BUILD_ENV: process.env.BUILD_ENV,
26-
// eslint-disable-next-line @typescript-eslint/camelcase
2726
nextImageExportOptimizer_imageFolderPath: 'public',
28-
// eslint-disable-next-line @typescript-eslint/camelcase
2927
nextImageExportOptimizer_exportFolderPath: 'out',
30-
// eslint-disable-next-line @typescript-eslint/camelcase
3128
nextImageExportOptimizer_quality: '75',
32-
// eslint-disable-next-line @typescript-eslint/camelcase
3329
nextImageExportOptimizer_storePicturesInWEBP: 'true',
34-
// eslint-disable-next-line @typescript-eslint/camelcase
3530
nextImageExportOptimizer_exportFolderName: 'nextImageExportOptimizer',
3631

3732
// If you do not want to use blurry placeholder images, then you can set
3833
// nextImageExportOptimizer_generateAndUseBlurImages to false and pass
3934
// `placeholder="empty"` to all <ExportedImage> components.
40-
// eslint-disable-next-line @typescript-eslint/camelcase
4135
nextImageExportOptimizer_generateAndUseBlurImages: 'true'
4236
},
4337
images: {
@@ -61,7 +55,6 @@ export default () => {
6155
});
6256

6357
if (shouldAnalyzeBundles) {
64-
// eslint-disable-next-line @typescript-eslint/no-var-requires
6558
const withNextBundleAnalyzer = require('next-bundle-analyzer')({
6659
format: ['json'],
6760
reportDir: '../.github/analyze',
@@ -76,3 +69,5 @@ export default () => {
7669

7770
return nextConfig;
7871
};
72+
73+
export default nextJSConfig;

‎package.json

+8-9
Original file line numberDiff line numberDiff line change
@@ -39,25 +39,23 @@
3939
"@types/node": "^12.12.9",
4040
"@types/react": "^18.0.0",
4141
"@types/url-parse": "^1.4.3",
42-
"@typescript-eslint/eslint-plugin": "^2.7.0",
43-
"@typescript-eslint/parser": "^2.7.0",
4442
"axios": "^1.3.4",
4543
"classnames": "^2.3.2",
4644
"cross-env": "^7.0.3",
4745
"cspell": "^6.2.3",
4846
"dotenv": "^16.0.0",
49-
"eslint": "^6.6.0",
50-
"eslint-config-airbnb": "^18.0.1",
51-
"eslint-config-next": "^13.2.4",
52-
"eslint-config-prettier": "^6.5.0",
53-
"eslint-plugin-prettier": "^3.1.1",
54-
"eslint-plugin-react": "^7.16.0",
47+
"eslint": "8.54.0",
48+
"eslint-config-next": "14.0.3",
49+
"eslint-config-prettier": "^9.0.0",
50+
"eslint-plugin-next": "^0.0.0",
51+
"eslint-plugin-prettier": "^5.0.1",
5552
"fs-extra": "^9.0.1",
5653
"git-jiggy": "1.1.1",
5754
"husky": "^8.0.1",
5855
"jest": "^26.6.3",
5956
"jest-cli": "^26.6.3",
6057
"json5": "^2.2.3",
58+
"lint-staged": "^14.0.0",
6159
"next-bundle-analyzer": "^0.6.7",
6260
"prettier": "^3.0.3",
6361
"puppeteer": "^20.8.2",
@@ -133,6 +131,7 @@
133131
"next-start": "next start",
134132
"prepare": "husky install",
135133
"analyze": "ANALYZE=true yarn next-build",
136-
"prebuild": "node src/directory/generateDirectory.mjs && node src/directory/generateFlatDirectory.mjs"
134+
"prebuild": "node src/directory/generateDirectory.mjs && node src/directory/generateFlatDirectory.mjs",
135+
"lint": "next lint"
137136
}
138137
}

‎src/components/Banner/Banner.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -19,11 +19,11 @@ export const Banner: React.FC<BannerProps> = ({ url = '/gen2' }) => {
1919
<Flex className="message-banner__inner">
2020
<Flex direction="column" gap="xxs">
2121
<Text as="span" className="message-banner__heading">
22-
Preview: AWS Amplify's new code-first DX (Gen 2)
22+
Preview: AWS Amplify&apos;s new code-first DX (Gen 2)
2323
</Text>
2424
<Text className="message-banner__content">
25-
The next generation of Amplify's backend building experience with
26-
a TypeScript-first DX.
25+
The next generation of Amplify&apos;s backend building experience
26+
with a TypeScript-first DX.
2727
</Text>
2828
</Flex>
2929

‎src/components/Block/__tests__/Block.test.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import Block from '../index';
55
describe('Block', () => {
66
it('should render the Block component', async () => {
77
const child = <div>Block Child</div>;
8-
render(<Block name={`test-block`} children={child} />);
8+
render(<Block name={`test-block`}>{child}</Block>);
99

1010
const blockNode = await screen.findByText('Block Child');
1111
expect(blockNode).toBeInTheDocument();

‎src/components/GetStartedPopover/GetStartedPopover.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -115,7 +115,7 @@ export const GetStartedPopover = (platform) => {
115115
if (expanded) {
116116
contentRef?.current?.focus();
117117
}
118-
}, [expanded]);
118+
}, [expanded, contentRef]);
119119

120120
const handleBlur = (e) => {
121121
// Use relatedTarget to see if the target receiving focus is outside of the popover

‎src/components/Layout/Layout.tsx

+52-45
Original file line numberDiff line numberDiff line change
@@ -80,37 +80,6 @@ export const Layout = ({
8080
const [tocHeadings, setTocHeadings] = useState<HeadingInterface[]>([]);
8181
const menuButtonRef = useRef<HTMLButtonElement>(null);
8282
const sidebarMenuButtonRef = useRef<HTMLButtonElement>(null);
83-
84-
useEffect(() => {
85-
const headings: HeadingInterface[] = [];
86-
87-
const defaultHeadings = '.main > h2, .main > h3';
88-
const cliCommandHeadings =
89-
'.commands-list__command > h2, .commands-list__command > .commands-list__command__subcommands > h3';
90-
const headingSelectors = [defaultHeadings, cliCommandHeadings];
91-
92-
const pageHeadings = document.querySelectorAll(headingSelectors.join(', '));
93-
94-
pageHeadings.forEach((node) => {
95-
const { innerText, id, localName } = node as HTMLElement;
96-
if (innerText && id && (localName == 'h2' || localName == 'h3')) {
97-
headings.push({
98-
linkText: innerText,
99-
hash: id,
100-
level: localName
101-
});
102-
}
103-
});
104-
setTocHeadings(headings);
105-
106-
if (pageType === 'home') {
107-
document.addEventListener('scroll', handleScroll);
108-
return () => {
109-
document.removeEventListener('scroll', handleScroll);
110-
};
111-
}
112-
}, [children, pageType]);
113-
11483
const mainId = 'pageMain';
11584
const showTOC = hasTOC && tocHeadings.length > 0;
11685
const router = useRouter();
@@ -141,8 +110,8 @@ export const Layout = ({
141110
currentPlatform = platform
142111
? platform
143112
: PLATFORMS.includes(asPathPlatform)
144-
? asPathPlatform
145-
: DEFAULT_PLATFORM;
113+
? asPathPlatform
114+
: DEFAULT_PLATFORM;
146115
}
147116

148117
const title = [
@@ -155,15 +124,6 @@ export const Layout = ({
155124

156125
const description = `${pageDescription} AWS Amplify Documentation`;
157126

158-
const handleScroll = debounce((e) => {
159-
const bodyScroll = e.target.documentElement.scrollTop;
160-
if (bodyScroll > 20) {
161-
document.body.classList.add('scrolled');
162-
} else if (document.body.classList.contains('scrolled')) {
163-
document.body.classList.remove('scrolled');
164-
}
165-
}, 20);
166-
167127
const handleMenuToggle = () => {
168128
if (!menuOpen) {
169129
toggleMenuOpen(true);
@@ -176,6 +136,46 @@ export const Layout = ({
176136
}
177137
};
178138

139+
const handleScroll = debounce((e) => {
140+
const bodyScroll = e.target.documentElement.scrollTop;
141+
if (bodyScroll > 20) {
142+
document.body.classList.add('scrolled');
143+
} else if (document.body.classList.contains('scrolled')) {
144+
document.body.classList.remove('scrolled');
145+
}
146+
}, 20);
147+
148+
useEffect(() => {
149+
const headings: HeadingInterface[] = [];
150+
151+
const defaultHeadings = '.main > h2, .main > h3';
152+
const cliCommandHeadings =
153+
'.commands-list__command > h2, .commands-list__command > .commands-list__command__subcommands > h3';
154+
const headingSelectors = [defaultHeadings, cliCommandHeadings];
155+
156+
const pageHeadings = document.querySelectorAll(headingSelectors.join(', '));
157+
158+
pageHeadings.forEach((node) => {
159+
const { innerText, id, localName } = node as HTMLElement;
160+
if (innerText && id && (localName == 'h2' || localName == 'h3')) {
161+
headings.push({
162+
linkText: innerText,
163+
hash: id,
164+
level: localName
165+
});
166+
}
167+
});
168+
setTocHeadings(headings);
169+
}, [children, pageType]);
170+
171+
useEffect(() => {
172+
if (pageType === 'home') {
173+
document.addEventListener('scroll', handleScroll);
174+
return () => {
175+
document.removeEventListener('scroll', handleScroll);
176+
};
177+
}
178+
});
179179
return (
180180
<>
181181
<Head>
@@ -190,7 +190,9 @@ export const Layout = ({
190190
<meta property="og:url" content={metaUrl} key="og:url" />
191191
<meta
192192
property="og:image"
193-
content={`https://docs.amplify.aws/assets/${isGen2 ? 'gen2' : 'classic'}-og.png`}
193+
content={`https://docs.amplify.aws/assets/${
194+
isGen2 ? 'gen2' : 'classic'
195+
}-og.png`}
194196
key="og:image"
195197
/>
196198
<meta property="description" content={description} key="description" />
@@ -203,7 +205,9 @@ export const Layout = ({
203205
/>
204206
<meta
205207
property="twitter:image"
206-
content={`https://docs.amplify.aws/assets/${isGen2 ? 'gen2' : 'classic'}-og.png`}
208+
content={`https://docs.amplify.aws/assets/${
209+
isGen2 ? 'gen2' : 'classic'
210+
}-og.png`}
207211
key="twitter:image"
208212
/>
209213
</Head>
@@ -294,7 +298,10 @@ export const Layout = ({
294298
)}
295299

296300
<div className="layout-sidebar-menu">
297-
<Menu currentPlatform={currentPlatform} path={asPathWithNoHash} />
301+
<Menu
302+
currentPlatform={currentPlatform}
303+
path={asPathWithNoHash}
304+
/>
298305
<div className="layout-sidebar-feedback">
299306
<RepoActions router={router}></RepoActions>
300307
<Feedback router={router}></Feedback>

‎src/components/LinkCards/LinkCards.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ const LinkCards: React.FC<LinkCardsProps> = ({ platform }) => {
3838
href={linkCardPlatformData.roadmap}
3939
icon={() => <IconAmplify fontSize="2rem" />}
4040
>
41-
What's next for Amplify
41+
What&apos;s next for Amplify
4242
</LinkCard>
4343
) : null}
4444
<LinkCard

‎src/components/MDXComponents/MDXCode.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ export const MDXCode = (props) => {
5252

5353
React.useEffect(() => {
5454
setCode(addVersions(codeString));
55-
}, []);
55+
}, [codeString]);
5656

5757
return (
5858
<Highlight theme={theme} code={code} language={language}>

0 commit comments

Comments
 (0)