Skip to content

Commit 174c754

Browse files
committed
chore(rebranding): kirby-boilerplate ! (#37)
* chore(rebranding): kirby-boilerplate ! * test: update snapshots * fix: update commit id * test: coverage up to 100% * chore(update): dependencies
1 parent 5381151 commit 174c754

19 files changed

+1224
-1195
lines changed

CHANGELOG.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -6,16 +6,16 @@ All notable changes to this project will be documented in this file. See [standa
66

77
### Features
88

9-
- graphQL ([#36](https://github.com/FabienGreard/front-end-rocks-boilerplate/issues/36)) ([3083241](https://github.com/FabienGreard/front-end-rocks-boilerplate/commit/30832414a87a786d6ba429e456432cd9c66c5318))
9+
- graphQL ([#36](https://github.com/FabienGreard/kirby-boilerplate/issues/36)) ([3083241](https://github.com/FabienGreard/kirby-boilerplate/commit/c9078cb88cd34e617dd3e2564515f351dfdf4223))
1010

1111
## 1.2.0 (2021-03-22)
1212

1313
### Features
1414

15-
- design-system ([#7](https://github.com/FabienGreard/front-end-rocks-boilerplate/issues/7)) ([cc4c825](https://github.com/FabienGreard/front-end-rocks-boilerplate/commit/cc4c8259c1afff4b60350a1a4b7eb7dec43cfdda))
15+
- design-system ([#7](https://github.com/FabienGreard/kirby-boilerplate/issues/7)) ([cc4c825](https://github.com/FabienGreard/kirby-boilerplate/commit/cc4c8259c1afff4b60350a1a4b7eb7dec43cfdda))
1616

1717
## 1.1.0 (2021-03-21)
1818

1919
### Features
2020

21-
- pwa support ([#6](https://github.com/FabienGreard/front-end-rocks-boilerplate/issues/6)) ([d28489d](https://github.com/FabienGreard/front-end-rocks-boilerplate/commit/d28489d7d5b28bafb474bab38c6e87ee411c003b))
21+
- pwa support ([#6](https://github.com/FabienGreard/kirby-boilerplate/issues/6)) ([d28489d](https://github.com/FabienGreard/kirby-boilerplate/commit/d28489d7d5b28bafb474bab38c6e87ee411c003b))

README.md

+5-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
1-
[![Tests](https://github.com/FabienGreard/front-end-rocks-boilerplate/actions/workflows/tests.yml/badge.svg)](https://github.com/FabienGreard/front-end-rocks-boilerplate/actions/workflows/tests.yml)
2-
[![CodeQL](https://github.com/FabienGreard/front-end-rocks-boilerplate/actions/workflows/codeql-analysis.yml/badge.svg)](https://github.com/FabienGreard/front-end-rocks-boilerplate/actions/workflows/codeql-analysis.yml)
1+
[![Tests](https://github.com/FabienGreard/kirby-boilerplate/actions/workflows/tests.yml/badge.svg)](https://github.com/FabienGreard/kirby-boilerplate/actions/workflows/tests.yml)
2+
[![CodeQL](https://github.com/FabienGreard/kirby-boilerplate/actions/workflows/codeql-analysis.yml/badge.svg)](https://github.com/FabienGreard/kirby-boilerplate/actions/workflows/codeql-analysis.yml)
33

4-
# front-end-rocks-boilerplate
4+
![](public/images/icons-192.png)
5+
6+
# kirby-boilerplate
57

68
This is an opinionated boilerplate with rocking tools for front-end development.
79

apollo/resolvers.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
export default {
22
Query: {
33
viewer() {
4-
return { id: 1, name: 'John Smith' };
4+
return { id: 1, name: 'Kirby Doe' };
55
},
66
},
77
};

components/Icons/React.tsx

+4-3
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
interface Props extends React.SVGProps<SVGSVGElement> {
22
size?: number;
3+
color?: string;
34
}
45

5-
export default function ReactSVG({ size = 64, ...props }: Props) {
6+
export default function ReactSVG({ size = 64, color, ...props }: Props) {
67
return (
78
<svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 32 32" {...props}>
89
<g transform="translate(.648 2.438) scale(.05696)" fill="none" fillRule="evenodd">
9-
<circle r={50.167} cy={237.628} cx={269.529} fill="#00d8ff" />
10-
<g stroke="#00d8ff" strokeWidth={24}>
10+
<circle r={50.167} cy={237.628} cx={269.529} className={`fill-current ${color ?? 'text-primary-400'}`} />
11+
<g strokeWidth={24} className={`stroke-current ${color ?? 'text-primary-400'}`}>
1112
<path d="M269.53 135.628c67.356 0 129.928 9.665 177.107 25.907 56.844 19.57 91.794 49.233 91.794 76.093 0 27.99-37.04 59.503-98.083 79.728-46.15 15.29-106.88 23.272-170.818 23.272-65.554 0-127.63-7.492-174.3-23.44C36.184 297.006.62 265.085.62 237.628c0-26.642 33.37-56.076 89.415-75.616 47.355-16.51 111.472-26.384 179.486-26.384z" />
1213
<path d="M180.736 186.922c33.65-58.348 73.28-107.724 110.92-140.48C337.006 6.976 380.163-8.48 403.43 4.937c24.248 13.983 33.042 61.814 20.067 124.796-9.8 47.618-33.234 104.212-65.176 159.6-32.75 56.788-70.25 106.82-107.377 139.272-46.98 41.068-92.4 55.93-116.185 42.213-23.08-13.3-31.906-56.92-20.834-115.233 9.355-49.27 32.832-109.745 66.8-168.664z" />
1314
<path d="M180.82 289.482c-33.745-58.282-56.72-117.287-66.31-166.255-11.544-59-3.382-104.11 19.864-117.566 24.224-14.024 70.055 2.244 118.14 44.94 36.356 32.28 73.688 80.837 105.723 136.173 32.844 56.733 57.46 114.21 67.036 162.582 12.117 61.213 2.31 107.984-21.453 121.74-23.057 13.348-65.25-.784-110.24-39.5-38.013-32.71-78.682-83.253-112.76-142.115z" />

components/Icons/__tests__/__snapshots__/React.test.tsx.snap

+2-2
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,13 @@ exports[`ReactSVG Should match snapshots 1`] = `
1414
transform="translate(.648 2.438) scale(.05696)"
1515
>
1616
<circle
17+
class="fill-current text-primary-400"
1718
cx="269.529"
1819
cy="237.628"
19-
fill="#00d8ff"
2020
r="50.167"
2121
/>
2222
<g
23-
stroke="#00d8ff"
23+
class="stroke-current text-primary-400"
2424
stroke-width="24"
2525
>
2626
<path

cypress/integration/index.spec.ts

+6-6
Original file line numberDiff line numberDiff line change
@@ -3,31 +3,31 @@ import '@testing-library/cypress';
33
describe('Homepage', () => {
44
it('Should greet user (en)', () => {
55
cy.visit('/');
6-
cy.findByText(/^Hello/i).contains('Hello John Smith !');
6+
cy.findByText(/^Hello/i).contains('Hello Kirby Doe !');
77
});
88

99
it('Should greet user (fr)', () => {
1010
cy.visit('/fr');
11-
cy.findByText(/^Bonjour/i).contains('Bonjour John Smith !');
11+
cy.findByText(/^Bonjour/i).contains('Bonjour Kirby Doe !');
1212
});
1313

1414
it('Should greet user (en - ssg)', () => {
1515
cy.visit('/ssg');
16-
cy.findByText(/^Hello/i).contains('Hello John Smith !');
16+
cy.findByText(/^Hello/i).contains('Hello Kirby Doe !');
1717
});
1818

1919
it('Should greet user (fr - ssg)', () => {
2020
cy.visit('/fr/ssg');
21-
cy.findByText(/^Bonjour/i).contains('Bonjour John Smith !');
21+
cy.findByText(/^Bonjour/i).contains('Bonjour Kirby Doe !');
2222
});
2323

2424
it('Should greet user (en - ssr)', () => {
2525
cy.visit('/ssr');
26-
cy.findByText(/^Hello/i).contains('Hello John Smith !');
26+
cy.findByText(/^Hello/i).contains('Hello Kirby Doe !');
2727
});
2828

2929
it('Should greet user (fr - ssr)', () => {
3030
cy.visit('/fr/ssr');
31-
cy.findByText(/^Bonjour/i).contains('Bonjour John Smith !');
31+
cy.findByText(/^Bonjour/i).contains('Bonjour Kirby Doe !');
3232
});
3333
});

design-system/Button.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -32,13 +32,13 @@ export const Button: React.FC<ButtonProps> = ({
3232
primary = false,
3333
size = 'medium',
3434
backgroundColor,
35-
className = '',
35+
className,
3636
label,
3737
...props
3838
}) => {
3939
const BASE_BUTTON = 'uppercase tracking-wider box-border';
40-
const PRIMARY_BUTTON = `${BASE_BUTTON} bg-blue-600 border border-blue-600 text-white focus:outline-none focus:bg-blue-800 focus:border-blue-800 hover:bg-blue-800 hover:border-blue-800`;
41-
const SECONDARY_BUTTON = `${BASE_BUTTON} border border-gray-400 text-black focus:outline-none focus:border-gray-800 hover:border-gray-800`;
40+
const PRIMARY_BUTTON = `${BASE_BUTTON} bg-primary-600 border border-primary-600 text-white focus:outline-none focus:bg-primary-900 focus:border-primary-900 hover:bg-primary-900 hover:border-primary-900`;
41+
const SECONDARY_BUTTON = `${BASE_BUTTON} border bg-white text-primary-600 border-primary-600 text-black focus:outline-none focus:text-primary-900 focus:border-primary-900 hover:border-primary-900 hover:text-primary-900`;
4242

4343
const SIZE_BUTTON = {
4444
small: 'rounded-sm text-sm px-2 py-1',

design-system/__tests__/__snapshots__/design-system.test.ts.snap

+4-4
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
exports[`Storyshots Example/Button Large 1`] = `
44
<button
5-
className="uppercase tracking-wider box-border border border-gray-400 text-black focus:outline-none focus:border-gray-800 hover:border-gray-800 rounded-lg text-lg px-4 py-3"
5+
className="uppercase tracking-wider box-border border bg-white text-primary-600 border-primary-600 text-black focus:outline-none focus:text-primary-900 focus:border-primary-900 hover:border-primary-900 hover:text-primary-900 rounded-lg text-lg px-4 py-3 undefined"
66
style={
77
Object {
88
"backgroundColor": undefined,
@@ -16,7 +16,7 @@ exports[`Storyshots Example/Button Large 1`] = `
1616

1717
exports[`Storyshots Example/Button Primary 1`] = `
1818
<button
19-
className="uppercase tracking-wider box-border bg-blue-600 border border-blue-600 text-white focus:outline-none focus:bg-blue-800 focus:border-blue-800 hover:bg-blue-800 hover:border-blue-800 rounded-md text-md px-3 py-2"
19+
className="uppercase tracking-wider box-border bg-primary-600 border border-primary-600 text-white focus:outline-none focus:bg-primary-900 focus:border-primary-900 hover:bg-primary-900 hover:border-primary-900 rounded-md text-md px-3 py-2 undefined"
2020
style={
2121
Object {
2222
"backgroundColor": undefined,
@@ -30,7 +30,7 @@ exports[`Storyshots Example/Button Primary 1`] = `
3030

3131
exports[`Storyshots Example/Button Secondary 1`] = `
3232
<button
33-
className="uppercase tracking-wider box-border border border-gray-400 text-black focus:outline-none focus:border-gray-800 hover:border-gray-800 rounded-md text-md px-3 py-2"
33+
className="uppercase tracking-wider box-border border bg-white text-primary-600 border-primary-600 text-black focus:outline-none focus:text-primary-900 focus:border-primary-900 hover:border-primary-900 hover:text-primary-900 rounded-md text-md px-3 py-2 undefined"
3434
style={
3535
Object {
3636
"backgroundColor": undefined,
@@ -44,7 +44,7 @@ exports[`Storyshots Example/Button Secondary 1`] = `
4444

4545
exports[`Storyshots Example/Button Small 1`] = `
4646
<button
47-
className="uppercase tracking-wider box-border border border-gray-400 text-black focus:outline-none focus:border-gray-800 hover:border-gray-800 rounded-sm text-sm px-2 py-1"
47+
className="uppercase tracking-wider box-border border bg-white text-primary-600 border-primary-600 text-black focus:outline-none focus:text-primary-900 focus:border-primary-900 hover:border-primary-900 hover:text-primary-900 rounded-sm text-sm px-2 py-1 undefined"
4848
style={
4949
Object {
5050
"backgroundColor": undefined,

hooks/__tests__/useClientQuery.test.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -18,13 +18,13 @@ describe('useClientQuery', () => {
1818
},
1919
result: {
2020
data: {
21-
viewer: { id: '1', name: 'John' },
21+
viewer: { id: '1', name: 'Kirby' },
2222
},
2323
},
2424
};
2525

2626
const result = render(<Viewer />, { mocks: [viewerMock] });
2727

28-
expect(await result.findByText(/^John/i)).toBeVisible();
28+
expect(await result.findByText(/^Kirby/i)).toBeVisible();
2929
});
3030
});

hooks/__tests__/useServiceWorker.test.ts

+34-12
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/* eslint-disable no-console */
2-
import { fireEvent, waitFor } from '@testing-library/react';
32
import { renderHook } from '@testing-library/react-hooks';
3+
import { fireEvent } from '@testing-library/react';
44

55
import useServiceWorker from 'hooks/useServiceWorker';
66

@@ -25,6 +25,8 @@ describe('useServiceWorker', () => {
2525
afterEach(() => {
2626
navigatorSpy.mockRestore();
2727
consoleSpy.mockRestore();
28+
29+
serviceWorkerUrl = undefined;
2830
});
2931

3032
test('Should register a ServiceWorker', async () => {
@@ -37,14 +39,12 @@ describe('useServiceWorker', () => {
3739
},
3840
}));
3941

40-
renderHook(() => useServiceWorker(true));
42+
renderHook(() => useServiceWorker({ isForce: true }));
4143

4244
fireEvent(window, new Event('load'));
4345

44-
await waitFor(() => {
45-
expect(console.log).toBeCalledWith('Service Worker registration successful with scope: ', 'test');
46-
expect(serviceWorkerUrl).toBe('/sw.js');
47-
});
46+
expect(await serviceWorkerUrl).toBe('/sw.js');
47+
expect(await console.log).toBeCalledWith('Service Worker registration successful with scope: ', 'test');
4848
});
4949

5050
test('Should catch an error', async () => {
@@ -54,32 +54,54 @@ describe('useServiceWorker', () => {
5454
},
5555
}));
5656

57-
renderHook(() => useServiceWorker(true));
57+
renderHook(() => useServiceWorker({ isForce: true }));
5858

5959
fireEvent(window, new Event('load'));
6060

61-
await waitFor(() => expect(console.log).toBeCalledWith('Service Worker registration failed: ', undefined));
61+
expect(await console.log).toBeCalledWith('Service Worker registration failed: ', undefined);
6262
});
6363

6464
test('Should not register (dev)', async () => {
6565
navigatorSpy.mockImplementation(() => ({
6666
serviceWorker: {
67-
register: jest.fn(() => Promise.resolve({ scope: 'test' })),
67+
register: jest.fn((url: string) => {
68+
serviceWorkerUrl = url;
69+
return Promise.resolve({ scope: 'test' });
70+
}),
6871
},
6972
}));
7073

7174
renderHook(() => useServiceWorker());
7275

7376
fireEvent(window, new Event('load'));
7477

75-
await waitFor(() => expect(console.log).not.toBeCalled());
78+
expect(await serviceWorkerUrl).toBe(undefined);
79+
expect(await console.log).not.toBeCalled();
80+
});
81+
82+
test('Should not register (disable)', async () => {
83+
navigatorSpy.mockImplementation(() => ({
84+
serviceWorker: {
85+
register: jest.fn((url: string) => {
86+
serviceWorkerUrl = url;
87+
return Promise.resolve({ scope: 'test' });
88+
}),
89+
},
90+
}));
91+
92+
renderHook(() => useServiceWorker({ isDisable: true, isForce: true }));
93+
94+
fireEvent(window, new Event('load'));
95+
96+
expect(serviceWorkerUrl).toBe(undefined);
97+
expect(await console.log).not.toBeCalled();
7698
});
7799

78100
test('Should not register (no serviceWorker)', async () => {
79101
navigatorSpy.mockImplementation(() => ({}));
80102

81-
renderHook(() => useServiceWorker(true));
103+
renderHook(() => useServiceWorker({ isForce: true }));
82104

83-
await waitFor(() => expect(console.log).not.toBeCalled());
105+
expect(await console.log).not.toBeCalled();
84106
});
85107
});

hooks/useServiceWorker.ts

+17-11
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,23 @@
22
import { useEffect } from 'react';
33
import { IS_RUNNING_DEV } from 'utils/constant';
44

5-
export default function useServiceWorker(isForce = false) {
5+
export interface Props {
6+
isForce?: boolean;
7+
isDisable?: boolean;
8+
}
9+
10+
export default function useServiceWorker({ isForce, isDisable }: Props = { isForce: false, isDisable: false }) {
611
useEffect(() => {
7-
if (!isForce && IS_RUNNING_DEV) return;
12+
if (isDisable || (!isForce && IS_RUNNING_DEV) || !('serviceWorker' in window.navigator)) return () => true;
13+
14+
const registerServiceWorker = () =>
15+
window.navigator.serviceWorker.register('/sw.js').then(
16+
registration => console.log('Service Worker registration successful with scope: ', registration.scope),
17+
err => console.log('Service Worker registration failed: ', err),
18+
);
19+
20+
window.addEventListener('load', registerServiceWorker);
821

9-
if ('serviceWorker' in window.navigator) {
10-
window.addEventListener('load', () => {
11-
window.navigator.serviceWorker.register('/sw.js').then(
12-
registration => console.log('Service Worker registration successful with scope: ', registration.scope),
13-
err => console.log('Service Worker registration failed: ', err),
14-
);
15-
});
16-
}
17-
}, [isForce]);
22+
return () => window.removeEventListener('load', registerServiceWorker);
23+
}, [isForce, isDisable]);
1824
}

0 commit comments

Comments
 (0)