Skip to content

Commit 11f1bff

Browse files
setchyafonsojramos
setchy
and
afonsojramos
authored
refactor: adopt primer design system ui components (#1589)
* refactor: adopt primer ui components Signed-off-by: Adam Setch <adam.setch@outlook.com> * refactor: adopt primer ui components Signed-off-by: Adam Setch <adam.setch@outlook.com> * refactor: adopt primer ui components Signed-off-by: Adam Setch <adam.setch@outlook.com> * refactor: adopt primer ui components Signed-off-by: Adam Setch <adam.setch@outlook.com> * refactor: adopt primer ui components Signed-off-by: Adam Setch <adam.setch@outlook.com> * refactor: adopt primer ui components Signed-off-by: Adam Setch <adam.setch@outlook.com> * refactor: adopt primer ui components Signed-off-by: Adam Setch <adam.setch@outlook.com> * refactor: adopt primer ui components Signed-off-by: Adam Setch <adam.setch@outlook.com> * refactor: adopt primer ui components Signed-off-by: Adam Setch <adam.setch@outlook.com> * refactor: adopt primer ui components Signed-off-by: Adam Setch <adam.setch@outlook.com> * refactor: adopt primer ui components Signed-off-by: Adam Setch <adam.setch@outlook.com> * refactor: adopt primer ui components Signed-off-by: Adam Setch <adam.setch@outlook.com> * refactor: test Signed-off-by: Adam Setch <adam.setch@outlook.com> * refactor Signed-off-by: Adam Setch <adam.setch@outlook.com> * fix tests Signed-off-by: Adam Setch <adam.setch@outlook.com> * feat: shrink sidebar width Signed-off-by: Adam Setch <adam.setch@outlook.com> * fix hover group alignment Signed-off-by: Adam Setch <adam.setch@outlook.com> * sidebar width Signed-off-by: Adam Setch <adam.setch@outlook.com> * test: fix sidebar tests Signed-off-by: Adam Setch <adam.setch@outlook.com> * test: update test cases Signed-off-by: Adam Setch <adam.setch@outlook.com> * test: update test cases Signed-off-by: Adam Setch <adam.setch@outlook.com> * test: update test cases Signed-off-by: Adam Setch <adam.setch@outlook.com> * test: update test cases Signed-off-by: Adam Setch <adam.setch@outlook.com> * fix small ui issues Signed-off-by: Adam Setch <adam.setch@outlook.com> * fix small ui issues Signed-off-by: Adam Setch <adam.setch@outlook.com> * fix account rendering for long names Signed-off-by: Adam Setch <adam.setch@outlook.com> * refactor: extract filters and show on all read screen Signed-off-by: Adam Setch <adam.setch@outlook.com> * fix heading alignment Signed-off-by: Adam Setch <adam.setch@outlook.com> * Merge branch 'main' into refactor/primer-design-system Signed-off-by: Adam Setch <adam.setch@outlook.com> * feat: dialog Signed-off-by: Adam Setch <adam.setch@outlook.com> * fix tooltips Signed-off-by: Adam Setch <adam.setch@outlook.com> * feat: Avatar shape based on user type Signed-off-by: Adam Setch <adam.setch@outlook.com> * Merge branch 'main' into refactor/primer-design-system Signed-off-by: Adam Setch <adam.setch@outlook.com> * feat: Avatar shape based on user type Signed-off-by: Adam Setch <adam.setch@outlook.com> * incorporate feedback Signed-off-by: Adam Setch <adam.setch@outlook.com> * incorporate feedback Signed-off-by: Adam Setch <adam.setch@outlook.com> * incorporate feedback: border red on error Signed-off-by: Adam Setch <adam.setch@outlook.com> * fix account view formatting Signed-off-by: Adam Setch <adam.setch@outlook.com> * fix: formatting * Merge branch 'main' into refactor/primer-design-system Signed-off-by: Adam Setch <adam.setch@outlook.com> * fix zoom button group Signed-off-by: Adam Setch <adam.setch@outlook.com> * refactor tailwind classes Signed-off-by: Adam Setch <adam.setch@outlook.com> * refactor tailwind classes Signed-off-by: Adam Setch <adam.setch@outlook.com> * refactor tailwind classes Signed-off-by: Adam Setch <adam.setch@outlook.com> * Merge branch 'main' into refactor/primer-design-system Signed-off-by: Adam Setch <adam.setch@outlook.com> * fix: theme loading on startup Signed-off-by: Adam Setch <adam.setch@outlook.com> * fix: theme loading on startup Signed-off-by: Adam Setch <adam.setch@outlook.com> * fix: theme loading on startup Signed-off-by: Adam Setch <adam.setch@outlook.com> --------- Signed-off-by: Adam Setch <adam.setch@outlook.com> Co-authored-by: Afonso Jorge Ramos <afonsojorgeramos@gmail.com>
1 parent 4d1a241 commit 11f1bff

File tree

135 files changed

+22453
-15196
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

135 files changed

+22453
-15196
lines changed

‎package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -140,6 +140,7 @@
140140
"@discordapp/twemoji": "15.1.0",
141141
"@electron/notarize": "2.5.0",
142142
"@primer/octicons-react": "19.14.0",
143+
"@primer/react": "36.27.0",
143144
"@testing-library/react": "16.2.0",
144145
"@types/jest": "29.5.14",
145146
"@types/node": "22.10.7",
@@ -150,7 +151,6 @@
150151
"@types/semver": "7.5.8",
151152
"autoprefixer": "10.4.20",
152153
"axios": "1.7.9",
153-
"class-variance-authority": "0.7.1",
154154
"clsx": "2.1.1",
155155
"concurrently": "9.1.2",
156156
"copy-webpack-plugin": "12.0.2",
@@ -173,6 +173,7 @@
173173
"react-final-form": "6.5.9",
174174
"rimraf": "6.0.1",
175175
"semver": "7.6.3",
176+
"styled-components": "6.1.13",
176177
"tailwind-merge": "2.6.0",
177178
"tailwindcss": "3.4.17",
178179
"terser-webpack-plugin": "5.3.11",

‎pnpm-lock.yaml

Lines changed: 946 additions & 10 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/renderer/App.tsx

Lines changed: 59 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,9 @@ import {
66
Routes,
77
useLocation,
88
} from 'react-router-dom';
9+
10+
import { BaseStyles, ThemeProvider } from '@primer/react';
11+
912
import { Loading } from './components/Loading';
1013
import { Sidebar } from './components/Sidebar';
1114
import { AppContext, AppProvider } from './context/App';
@@ -16,6 +19,7 @@ import { LoginWithOAuthAppRoute } from './routes/LoginWithOAuthApp';
1619
import { LoginWithPersonalAccessTokenRoute } from './routes/LoginWithPersonalAccessToken';
1720
import { NotificationsRoute } from './routes/Notifications';
1821
import { SettingsRoute } from './routes/Settings';
22+
1923
import './App.css';
2024

2125
function RequireAuth({ children }) {
@@ -31,56 +35,60 @@ function RequireAuth({ children }) {
3135

3236
export const App = () => {
3337
return (
34-
<AppProvider>
35-
<Router>
36-
<div className="flex h-full overflow-y-auto flex-col pl-14">
37-
<Loading />
38-
<Sidebar />
39-
<Routes>
40-
<Route
41-
path="/"
42-
element={
43-
<RequireAuth>
44-
<NotificationsRoute />
45-
</RequireAuth>
46-
}
47-
/>
48-
<Route
49-
path="/filters"
50-
element={
51-
<RequireAuth>
52-
<FiltersRoute />
53-
</RequireAuth>
54-
}
55-
/>
56-
<Route
57-
path="/settings"
58-
element={
59-
<RequireAuth>
60-
<SettingsRoute />
61-
</RequireAuth>
62-
}
63-
/>
64-
<Route
65-
path="/accounts"
66-
element={
67-
<RequireAuth>
68-
<AccountsRoute />
69-
</RequireAuth>
70-
}
71-
/>
72-
<Route path="/login" element={<LoginRoute />} />
73-
<Route
74-
path="/login-personal-access-token"
75-
element={<LoginWithPersonalAccessTokenRoute />}
76-
/>
77-
<Route
78-
path="/login-oauth-app"
79-
element={<LoginWithOAuthAppRoute />}
80-
/>
81-
</Routes>
82-
</div>
83-
</Router>
84-
</AppProvider>
38+
<ThemeProvider>
39+
<BaseStyles>
40+
<AppProvider>
41+
<Router>
42+
<div className="flex h-full overflow-y-auto flex-col pl-12 bg-gitify-background">
43+
<Loading />
44+
<Sidebar />
45+
<Routes>
46+
<Route
47+
path="/"
48+
element={
49+
<RequireAuth>
50+
<NotificationsRoute />
51+
</RequireAuth>
52+
}
53+
/>
54+
<Route
55+
path="/filters"
56+
element={
57+
<RequireAuth>
58+
<FiltersRoute />
59+
</RequireAuth>
60+
}
61+
/>
62+
<Route
63+
path="/settings"
64+
element={
65+
<RequireAuth>
66+
<SettingsRoute />
67+
</RequireAuth>
68+
}
69+
/>
70+
<Route
71+
path="/accounts"
72+
element={
73+
<RequireAuth>
74+
<AccountsRoute />
75+
</RequireAuth>
76+
}
77+
/>
78+
<Route path="/login" element={<LoginRoute />} />
79+
<Route
80+
path="/login-personal-access-token"
81+
element={<LoginWithPersonalAccessTokenRoute />}
82+
/>
83+
<Route
84+
path="/login-oauth-app"
85+
element={<LoginWithOAuthAppRoute />}
86+
/>
87+
</Routes>
88+
</div>
89+
</Router>
90+
</AppProvider>
91+
</BaseStyles>
92+
</ThemeProvider>
8593
);
8694
};

‎src/renderer/__helpers__/jest.setup.ts

Lines changed: 22 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,32 @@
11
import { TextDecoder, TextEncoder } from 'node:util';
22

3-
/**
4-
* Prevent the following errors with jest:
5-
* - ReferenceError: TextEncoder is not defined
6-
* - ReferenceError: TextDecoder is not defined
7-
*/
83
if (!global.TextEncoder || !global.TextDecoder) {
4+
/**
5+
* Prevent the following errors with jest:
6+
* - ReferenceError: TextEncoder is not defined
7+
* - ReferenceError: TextDecoder is not defined
8+
*/
99
global.TextEncoder = TextEncoder;
1010
global.TextDecoder = TextDecoder;
1111
}
1212

1313
// Mock OAuth client ID and secret
1414
process.env.OAUTH_CLIENT_ID = 'FAKE_CLIENT_ID_123';
1515
process.env.OAUTH_CLIENT_SECRET = 'FAKE_CLIENT_SECRET_123';
16+
17+
/**
18+
* Primer Setup
19+
*/
20+
if (typeof CSS === 'undefined') {
21+
global.CSS = {} as typeof CSS;
22+
}
23+
24+
if (!CSS.supports) {
25+
CSS.supports = () => true;
26+
}
27+
28+
global.ResizeObserver = class {
29+
observe() {}
30+
unobserve() {}
31+
disconnect() {}
32+
};

‎src/renderer/components/AllRead.test.tsx

Lines changed: 37 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,49 @@
11
import { render } from '@testing-library/react';
2+
import { MemoryRouter } from 'react-router-dom';
3+
import { mockSettings } from '../__mocks__/state-mocks';
24
import { ensureStableEmojis } from '../__mocks__/utils';
5+
import { AppContext } from '../context/App';
36
import { AllRead } from './AllRead';
47

58
describe('renderer/components/AllRead.tsx', () => {
69
beforeEach(() => {
710
ensureStableEmojis();
811
});
912

10-
it('should render itself & its children', () => {
11-
const tree = render(<AllRead />);
13+
it('should render itself & its children - no filters', () => {
14+
const tree = render(
15+
<AppContext.Provider
16+
value={{
17+
settings: {
18+
...mockSettings,
19+
},
20+
}}
21+
>
22+
<MemoryRouter>
23+
<AllRead />
24+
</MemoryRouter>
25+
</AppContext.Provider>,
26+
);
27+
28+
expect(tree).toMatchSnapshot();
29+
});
30+
31+
it('should render itself & its children - with filters', () => {
32+
const tree = render(
33+
<AppContext.Provider
34+
value={{
35+
settings: {
36+
...mockSettings,
37+
filterReasons: ['author'],
38+
hideBots: true,
39+
},
40+
}}
41+
>
42+
<MemoryRouter>
43+
<AllRead />
44+
</MemoryRouter>
45+
</AppContext.Provider>,
46+
);
1247

1348
expect(tree).toMatchSnapshot();
1449
});

‎src/renderer/components/AllRead.tsx

Lines changed: 26 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,18 @@
1-
import { type FC, useMemo } from 'react';
1+
import { type FC, useContext, useMemo } from 'react';
2+
3+
import { Stack } from '@primer/react';
4+
5+
import { AppContext } from '../context/App';
26
import { Constants } from '../utils/constants';
3-
import { EmojiText } from './EmojiText';
7+
import { hasFiltersSet } from '../utils/filters';
8+
import { Centered } from './primitives/Centered';
9+
import { EmojiText } from './primitives/EmojiText';
410

511
export const AllRead: FC = () => {
12+
const { settings } = useContext(AppContext);
13+
14+
const hasFilters = hasFiltersSet(settings);
15+
616
const emoji = useMemo(
717
() =>
818
Constants.ALL_READ_EMOJIS[
@@ -12,12 +22,20 @@ export const AllRead: FC = () => {
1222
);
1323

1424
return (
15-
<div className="flex flex-1 flex-col items-center justify-center bg-white p-4 text-black dark:bg-gray-dark dark:text-white">
16-
<div className="mt-2 mb-5 text-5xl">
17-
<EmojiText text={emoji} />
18-
</div>
25+
<Centered>
26+
<Stack direction="vertical" align="center">
27+
<div className="mt-2 mb-5 text-5xl">
28+
<EmojiText text={emoji} />
29+
</div>
1930

20-
<div className="mb-2 text-xl font-semibold">No new notifications.</div>
21-
</div>
31+
{hasFilters ? (
32+
<div className="mb-2 text-xl font-semibold">
33+
No new filtered notifications
34+
</div>
35+
) : (
36+
<div className="mb-2 text-xl font-semibold">No new notifications</div>
37+
)}
38+
</Stack>
39+
</Centered>
2240
);
2341
};

‎src/renderer/components/Header.tsx

Lines changed: 0 additions & 44 deletions
This file was deleted.

‎src/renderer/components/HoverGroup.tsx

Lines changed: 0 additions & 13 deletions
This file was deleted.

‎src/renderer/components/Loading.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
1-
import NProgress from 'nprogress';
21
import { type FC, useContext, useEffect } from 'react';
2+
3+
import NProgress from 'nprogress';
4+
35
import { AppContext } from '../context/App';
46

57
export const Loading: FC = () => {

0 commit comments

Comments
 (0)