Skip to content

Commit b66e865

Browse files
JoaoTMDiasJoão Dias
JoaoTMDias
and
João Dias
authored
feat: replaces React context with Zustand (#2)
* feat: adds html placeholder * chore: deps update * feat: adds paths to tsconfig * chore: file and folders re-organization * chore: adds playwright-core to suppress unmet peer dependency * ci: removed legacy sass api * fix: picker-form style adjustments --------- Co-authored-by: João Dias <[email protected]>
1 parent 1f56e4c commit b66e865

File tree

32 files changed

+939
-652
lines changed

32 files changed

+939
-652
lines changed

‎index.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,11 @@
77
<meta name="view-transition" content="same-origin" />
88
<title>WinPicker</title>
99
<style>
10+
:root {
11+
--color-background: #000000;
12+
--color-foreground: #ffffff;
13+
}
14+
1015
html,
1116
body {
1217
height: 100%;
@@ -22,13 +27,35 @@
2227
-moz-osx-font-smoothing: grayscale;
2328
}
2429

30+
.loading {
31+
display: grid;
32+
place-items: center;
33+
inset: 0;
34+
margin: 0 auto;
35+
position: fixed;
36+
}
37+
38+
.loading__letters {
39+
display: flex;
40+
font-style: normal;
41+
font-weight: bold;
42+
font-size: 68px;
43+
line-height: 92px;
44+
color: var(--color-foreground);
45+
}
46+
2547
* {
2648
box-sizing: border-box;
2749
}
2850
</style>
2951
</head>
3052
<body>
3153
<div id="root">
54+
<div class="loading">
55+
<span class="loading__letters">
56+
Aa
57+
</span>
58+
</div>
3259
</div>
3360
<script type="module" src="/src/main.tsx"></script>
3461
</body>

‎package.json‎

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
},
1616
"dependencies": {
1717
"@feedzai/js-utilities": "^1.5.0",
18-
"@fluentui/react": "^8.121.2",
18+
"@fluentui/react": "^8.121.4",
1919
"@tauri-apps/api": "^1.6.0",
2020
"clsx": "^2.1.1",
2121
"coffee-colors": "^1.0.1",
@@ -24,23 +24,26 @@
2424
"polished": "^4.3.1",
2525
"react": "^18.3.1",
2626
"react-dom": "^18.3.1",
27-
"react-router-dom": "^6.26.2",
27+
"react-router-dom": "^6.27.0",
2828
"react-use": "^17.5.1",
29-
"use-eye-dropper": "^1.6.4"
29+
"use-eye-dropper": "^1.6.4",
30+
"zustand": "^5.0.0"
3031
},
3132
"devDependencies": {
3233
"@axe-core/playwright": "^4.10.0",
33-
"@playwright/test": "^1.47.2",
34-
"@tauri-apps/cli": "^2.0.1",
34+
"@playwright/test": "^1.48.0",
35+
"@tauri-apps/cli": "^2.0.3",
3536
"@types/node": "^20.14.2",
3637
"@types/react": "^18.3.11",
37-
"@types/react-dom": "^18.3.0",
38+
"@types/react-dom": "^18.3.1",
3839
"@vitejs/plugin-react": "^4.3.2",
3940
"cross-env": "^7.0.3",
41+
"playwright-core": "^1.48.0",
4042
"rimraf": "^6.0.1",
41-
"sass": "^1.79.4",
42-
"typescript": "^5.6.2",
43-
"vite": "^5.4.8",
43+
"sass": "^1.79.5",
44+
"typescript": "^5.6.3",
45+
"vite": "^5.4.9",
46+
"vite-tsconfig-paths": "^5.0.1",
4447
"wait-on": "^8.0.1"
4548
}
4649
}

‎src/app.tsx‎

Lines changed: 44 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import styles from "./app.module.scss";
55
import "./assets/styles/index.scss";
66
import Header from "./renderer/components/header";
77
import PickerForm from "./renderer/components/picker-form";
8-
import { PickerStateProvider } from "./renderer/containers/picker-state";
98
import { TextPreview } from "./renderer/components/text-preview";
109

1110
initializeIcons();
@@ -14,53 +13,51 @@ const WinPicker = () => {
1413
return (
1514
<div id="winpicker">
1615
<h1 className="sr-only">Win Picker</h1>
17-
<PickerStateProvider>
18-
<div className="layout__wrapper">
19-
<Header />
20-
<main>
21-
<PickerForm />
22-
<TextPreview />
23-
</main>
24-
<footer
25-
aria-label="Feedback and Help"
26-
className={styles.footer}
27-
data-testid="footer-wrapper"
16+
<div className="layout__wrapper">
17+
<Header />
18+
<main>
19+
<PickerForm />
20+
<TextPreview />
21+
</main>
22+
<footer
23+
aria-label="Feedback and Help"
24+
className={styles.footer}
25+
data-testid="footer-wrapper"
26+
>
27+
<DefaultButton
28+
className={styles.footer__button}
29+
as="a"
30+
href="https://github.com/JoaoTMDias/winpicker"
31+
target="_blank"
32+
data-testid="footer-link"
2833
>
29-
<DefaultButton
30-
className={styles.footer__button}
31-
as="a"
32-
href="https://github.com/JoaoTMDias/winpicker"
33-
target="_blank"
34-
data-testid="footer-link"
35-
>
36-
<Icon iconName="Info" data-testid="footer-link-icon" />
37-
<span data-testid="footer-link-text">About WinPicker</span>
38-
</DefaultButton>
39-
<DefaultButton
40-
className={styles.footer__button}
41-
as="a"
42-
href="https://webaim.org/articles/contrast/"
43-
target="_blank"
44-
data-testid="footer-link"
45-
>
46-
<Icon iconName="ReadingMode" data-testid="footer-link-icon" />
47-
<span data-testid="footer-link-text">
48-
Contrast and Colour Accessibility
49-
</span>
50-
</DefaultButton>
51-
<DefaultButton
52-
className={styles.footer__button}
53-
as="a"
54-
href="https://github.com/JoaoTMDias/winpicker/issues/new/choose"
55-
target="_blank"
56-
data-testid="footer-link"
57-
>
58-
<Icon iconName="Feedback" data-testid="footer-link-icon" />
59-
<span data-testid="footer-link-text">Give feedback</span>
60-
</DefaultButton>
61-
</footer>
62-
</div>
63-
</PickerStateProvider>
34+
<Icon iconName="Info" data-testid="footer-link-icon" />
35+
<span data-testid="footer-link-text">About WinPicker</span>
36+
</DefaultButton>
37+
<DefaultButton
38+
className={styles.footer__button}
39+
as="a"
40+
href="https://webaim.org/articles/contrast/"
41+
target="_blank"
42+
data-testid="footer-link"
43+
>
44+
<Icon iconName="ReadingMode" data-testid="footer-link-icon" />
45+
<span data-testid="footer-link-text">
46+
Contrast and Colour Accessibility
47+
</span>
48+
</DefaultButton>
49+
<DefaultButton
50+
className={styles.footer__button}
51+
as="a"
52+
href="https://github.com/JoaoTMDias/winpicker/issues/new/choose"
53+
target="_blank"
54+
data-testid="footer-link"
55+
>
56+
<Icon iconName="Feedback" data-testid="footer-link-icon" />
57+
<span data-testid="footer-link-text">Give feedback</span>
58+
</DefaultButton>
59+
</footer>
60+
</div>
6461
</div>
6562
);
6663
};

‎src/assets/styles/_layout.scss‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,11 @@
99
padding: 1rem;
1010
min-height: 100vh;
1111
flex-direction: column;
12-
gap: 2rem;
12+
gap: 1rem;
13+
14+
@media all and (min-width: 40rem) {
15+
gap: 2rem;
16+
}
1317
}
1418
}
1519

‎src/assets/styles/index.scss‎

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
1-
@import './reset';
2-
@import './layout';
1+
@import "./reset";
2+
@import "./layout";
33

44
:root {
55
--color-background: black;
66
--color-foreground: white;
7-
--font-family: 'Segoe UI Variable Static Display', 'Segoe UI',
8-
'Segoe UI Web (West European)', 'Segoe UI', -apple-system,
9-
BlinkMacSystemFont, Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
10-
'Helvetica Neue', sans-serif;
7+
--font-family: "Segoe UI Variable Static Display", "Segoe UI",
8+
"Segoe UI Web (West European)", "Segoe UI", -apple-system,
9+
BlinkMacSystemFont, Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans",
10+
"Helvetica Neue", sans-serif;
1111
}
1212

1313
html,
@@ -18,3 +18,12 @@ body,
1818
min-height: 100vh;
1919
font-family: var(--font-family);
2020
}
21+
22+
#root {
23+
width: 100%;
24+
25+
@media all and (min-width: 1440px) {
26+
max-width: 90rem;
27+
margin: 0 auto;
28+
}
29+
}

‎src/renderer/components/common/index.tsx‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1 @@
1-
/* eslint-disable import/prefer-default-export */
2-
import Tooltip from "./tooltip";
3-
4-
export { Tooltip };
1+
export { default as Tooltip } from "./tooltip";

‎src/renderer/components/common/tooltip/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { useId } from "@fluentui/react-hooks";
1+
import { useAutoId } from "@feedzai/js-utilities/hooks";
22
import {
33
ITooltipHostProps,
44
ITooltipHostStyles,
@@ -17,7 +17,7 @@ interface Props extends ITooltipHostProps {
1717
}
1818

1919
const Tooltip: FC<Props> = ({ id, description, delay, children }) => {
20-
const tooltipId = useId(id);
20+
const tooltipId = useAutoId(id);
2121

2222
return (
2323
<TooltipHost

‎src/renderer/components/header/grades/grade/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Icon } from "@fluentui/react/lib/Icon";
22
import { FC, useMemo } from "react";
3-
import { Tooltip } from "../../../common";
3+
import { Tooltip } from "@/renderer/components";
44
import styles from "./styles.module.scss";
55

66
interface Props {

‎src/renderer/components/header/index.tsx‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,12 @@
11
import { useMemo } from "react";
2-
import { usePickerState } from "../../containers/picker-state";
2+
import { usePicker } from "@/renderer/containers";
33
import Grade from "./grades/grade";
44
import Score from "./score";
55
import styles from "./styles.module.scss";
66

77
function Header() {
8-
const [state] = usePickerState();
8+
const { ratio } = usePicker();
99
const compliance = useMemo(() => {
10-
const { ratio } = state;
11-
1210
switch (true) {
1311
case ratio > 7:
1412
return { "AA+": true, AA: true, "AAA+": true, AAA: true };
@@ -22,11 +20,11 @@ function Header() {
2220
default:
2321
return { "AA+": false, AA: false, "AAA+": false, AAA: false };
2422
}
25-
}, [state]);
23+
}, [ratio]);
2624

2725
return (
2826
<header className={styles.wrapper} aria-label="Score and Grade results">
29-
<Score score={state.ratio} />
27+
<Score score={ratio} />
3028
<h2 className="sr-only" data-testid="header-grade-results-title">
3129
Grade Results
3230
</h2>

‎src/renderer/components/header/score/index.tsx‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import { Rating, RatingSize } from "@fluentui/react";
22
import { FC, useMemo } from "react";
3-
import { usePickerState } from "../../../containers/picker-state";
4-
import { Tooltip } from "../../common";
3+
import { usePicker } from "@/renderer/containers";
4+
import { Tooltip } from "@/renderer/components";
5+
import { getRatioAsString } from "@/renderer/helpers";
56
import styles from "./styles.module.scss";
6-
import { getRatioAsString } from "../../../helpers";
77

88
interface Props {
99
score: number;
@@ -12,28 +12,28 @@ interface Props {
1212
const MAX_RATING_SCORE = 5;
1313

1414
const Score: FC<Props> = ({ score }) => {
15-
const [state] = usePickerState();
15+
const { ratio } = usePicker();
1616
const description = `Contrast Ratio is ${score} to 1`;
1717

1818
const rating = useMemo(() => {
1919
switch (true) {
20-
case state.ratio >= 13:
20+
case ratio >= 13:
2121
return 5;
2222

23-
case state.ratio >= 7:
23+
case ratio >= 7:
2424
return 4;
2525

26-
case state.ratio >= 4.5:
26+
case ratio >= 4.5:
2727
return 3;
2828

29-
case state.ratio >= 3:
29+
case ratio >= 3:
3030
return 2;
3131

3232
default:
33-
case state.ratio >= 1:
33+
case ratio >= 1:
3434
return 1;
3535
}
36-
}, [state.ratio]);
36+
}, [ratio]);
3737

3838
const RATING_LABEL = `Colour combination has a rating of ${rating} out of ${MAX_RATING_SCORE} stars`;
3939
const RATIO_LABEL = getRatioAsString(score, 1);

0 commit comments

Comments
 (0)