Skip to content

Commit 840f39d

Browse files
axe312geraxe312ger
committed
refactor: restructure to match docs structure
1 parent 7131729 commit 840f39d

4 files changed

Lines changed: 103 additions & 85 deletions

File tree

‎parcel/package.json‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,19 +5,20 @@
55
"version": "0.0.1",
66
"license": "MIT",
77
"scripts": {
8-
"start": "parcel index.html",
8+
"start": "parcel src/index.html",
99
"build": "parcel build src/index.html"
1010
},
1111
"dependencies": {
12-
"@consent-manager/core": "1.0.1",
12+
"@consent-manager/core": "next",
1313
"react": "18.2.0",
1414
"react-app-polyfill": "^3.0.0",
1515
"react-dom": "^18.1.0"
1616
},
1717
"devDependencies": {
18-
"@types/react": "^18.2.45",
18+
"@types/react": "^18.2.46",
1919
"@types/react-dom": "^18.2.18",
2020
"parcel": "^2.0.0",
21+
"process": "^0.11.10",
2122
"typescript": "^5.3.3"
2223
}
2324
}

‎parcel/src/consent-manager.tsx‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
import * as React from "react";
2+
import * as ReactDOM from "react-dom";
3+
4+
import {
5+
ConsentManager,
6+
ConsentManagerConfig,
7+
ConsentManagerForm,
8+
} from "@consent-manager/core";
9+
10+
const consentManagerConfig: ConsentManagerConfig = {
11+
integrations: [
12+
{
13+
id: "video-platform",
14+
title: "Video Inc.",
15+
category: "social",
16+
Icon: () => (
17+
<svg
18+
className="w-6 h-6"
19+
fill="none"
20+
stroke="currentColor"
21+
viewBox="0 0 24 24"
22+
xmlns="http://www.w3.org/2000/svg"
23+
>
24+
<path
25+
strokeLinecap="round"
26+
strokeLinejoin="round"
27+
strokeWidth={2}
28+
d="M7 4v16M17 4v16M3 8h4m10 0h4M3 12h18M3 16h4m10 0h4M4 20h16a1 1 0 001-1V5a1 1 0 00-1-1H4a1 1 0 00-1 1v14a1 1 0 001 1z"
29+
/>
30+
</svg>
31+
),
32+
description: "Video Inc. is a popular service to share clips of cats.",
33+
},
34+
{
35+
id: "integration-with-wrapper",
36+
title: "Red Box Ltd.",
37+
category: "statistics",
38+
Icon: () => (
39+
<svg
40+
className="w-6 h-6"
41+
fill="currentColor"
42+
viewBox="0 0 20 20"
43+
xmlns="http://www.w3.org/2000/svg"
44+
>
45+
<path
46+
fillRule="evenodd"
47+
d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
48+
clipRule="evenodd"
49+
/>
50+
</svg>
51+
),
52+
description:
53+
"Adds red borders around your content, demonstrates use of components that do e.g. click tracking",
54+
WrapperComponent: () => (
55+
<div style={{ border: "3px solid red", padding: "1rem", textAlign: "center" }}>Very special red box!</div>
56+
),
57+
},
58+
],
59+
};
60+
61+
export const ConsentManagerWrapper:React.FC<{children: React.ReactNode}> = ({children}) => {
62+
const storage = React.useState({
63+
decisions: {},
64+
});
65+
66+
return (
67+
<div>
68+
<ConsentManager config={consentManagerConfig} store={storage}>
69+
<main style={{ margin: "4em auto", maxWidth: "420px" }}>
70+
{children}
71+
</main>
72+
<aside style={{ backgroundColor: "#eee", padding: "1em" }}>
73+
<ConsentManagerForm />
74+
</aside>
75+
</ConsentManager>
76+
</div>
77+
);
78+
};

‎parcel/src/index.tsx‎

Lines changed: 8 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -1,63 +1,8 @@
11
import * as React from "react";
22
import * as ReactDOM from "react-dom";
33

4-
import {
5-
ConsentManager,
6-
ConsentManagerConfig,
7-
ConsentManagerForm,
8-
PrivacyShield,
9-
} from "@consent-manager/core";
10-
11-
const consentManagerConfig: ConsentManagerConfig = {
12-
integrations: [
13-
{
14-
id: "video-platform",
15-
title: "Video Inc.",
16-
category: "social",
17-
Icon: () => (
18-
<svg
19-
className="w-6 h-6"
20-
fill="none"
21-
stroke="currentColor"
22-
viewBox="0 0 24 24"
23-
xmlns="http://www.w3.org/2000/svg"
24-
>
25-
<path
26-
strokeLinecap="round"
27-
strokeLinejoin="round"
28-
strokeWidth={2}
29-
d="M7 4v16M17 4v16M3 8h4m10 0h4M3 12h18M3 16h4m10 0h4M4 20h16a1 1 0 001-1V5a1 1 0 00-1-1H4a1 1 0 00-1 1v14a1 1 0 001 1z"
30-
/>
31-
</svg>
32-
),
33-
description: "Video Inc. is a popular service to share clips of cats.",
34-
},
35-
{
36-
id: "integration-with-wrapper",
37-
title: "Red Box Ltd.",
38-
category: "statistics",
39-
Icon: () => (
40-
<svg
41-
className="w-6 h-6"
42-
fill="currentColor"
43-
viewBox="0 0 20 20"
44-
xmlns="http://www.w3.org/2000/svg"
45-
>
46-
<path
47-
fillRule="evenodd"
48-
d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
49-
clipRule="evenodd"
50-
/>
51-
</svg>
52-
),
53-
description:
54-
"Adds red borders around your content, demonstrates use of components that do e.g. click tracking",
55-
WrapperComponent: ({ children }) => (
56-
<div style={{ border: "3px solid red" }}>{children}</div>
57-
),
58-
},
59-
],
60-
};
4+
import { PrivacyShield } from "@consent-manager/core";
5+
import { ConsentManagerWrapper } from "./consent-manager";
616

627
const VideoPlatform: React.FC<{ id: string }> = ({ id }) => {
638
return (
@@ -75,24 +20,13 @@ const VideoPlatform: React.FC<{ id: string }> = ({ id }) => {
7520
};
7621

7722
const App = () => {
78-
const storage = React.useState({
79-
decisions: {},
80-
});
81-
8223
return (
83-
<div>
84-
<ConsentManager config={consentManagerConfig} store={storage}>
85-
<main style={{ margin: "4em auto", maxWidth: "420px" }}>
86-
<h1>Your content:</h1>
87-
<PrivacyShield id="video-platform">
88-
<VideoPlatform id="rick-roll" />
89-
</PrivacyShield>
90-
</main>
91-
<aside style={{ backgroundColor: "#eee", padding: "1em" }}>
92-
<ConsentManagerForm />
93-
</aside>
94-
</ConsentManager>
95-
</div>
24+
<ConsentManagerWrapper>
25+
<h1>Your content:</h1>
26+
<PrivacyShield id="video-platform">
27+
<VideoPlatform id="rick-roll" />
28+
</PrivacyShield>
29+
</ConsentManagerWrapper>
9630
);
9731
};
9832

‎parcel/yarn.lock‎

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -31,10 +31,10 @@
3131
dependencies:
3232
regenerator-runtime "^0.13.4"
3333

34-
"@consent-manager/core@1.0.1":
35-
version "1.0.1"
36-
resolved "https://registry.yarnpkg.com/@consent-manager/core/-/core-1.0.1.tgz#ce90078d9506a1ac5f9c52906c900d6bd8174659"
37-
integrity sha512-SNbrOEziJiK8Aah11MJRJp7kJSzd25vt0D9u8fxts98ByO37EItmbWfRLbMTzfHbHZGLMK4ALnp+IjZgifuq+g==
34+
"@consent-manager/core@next":
35+
version "2.0.0-next.2"
36+
resolved "https://registry.yarnpkg.com/@consent-manager/core/-/core-2.0.0-next.2.tgz#c245fa867a31f8aea9afc15014ee30d1270ede63"
37+
integrity sha512-Vi8QuqVQLYWBTInGxnDYXMuZhxzq997nmN9Bg+fEJ7heqDXr74jp1zPsoi5vHNVA1MhLZBvESZr71b7lrKFyQA==
3838
dependencies:
3939
"@types/history" "^4.7.8"
4040
history "^5.0.0"
@@ -905,10 +905,10 @@
905905
"@types/scheduler" "*"
906906
csstype "^3.0.2"
907907

908-
"@types/react@^18.2.45":
909-
version "18.2.45"
910-
resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.45.tgz#253f4fac288e7e751ab3dc542000fb687422c15c"
911-
integrity sha512-TtAxCNrlrBp8GoeEp1npd5g+d/OejJHFxS3OWmrPBMFaVQMSN0OFySozJio5BHxTuTeug00AVXVAjfDSfk+lUg==
908+
"@types/react@^18.2.46":
909+
version "18.2.46"
910+
resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.46.tgz#f04d6c528f8f136ea66333bc66abcae46e2680df"
911+
integrity sha512-nNCvVBcZlvX4NU1nRRNV/mFl1nNRuTuslAJglQsq+8ldXe5Xv0Wd2f7WTE3jOxhLH2BFfiZGC6GCp+kHQbgG+w==
912912
dependencies:
913913
"@types/prop-types" "*"
914914
"@types/scheduler" "*"
@@ -1657,6 +1657,11 @@ posthtml@^0.16.4, posthtml@^0.16.5:
16571657
posthtml-parser "^0.11.0"
16581658
posthtml-render "^3.0.0"
16591659

1660+
process@^0.11.10:
1661+
version "0.11.10"
1662+
resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
1663+
integrity sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==
1664+
16601665
promise@^8.1.0:
16611666
version "8.1.0"
16621667
resolved "https://registry.npmjs.org/promise/-/promise-8.1.0.tgz#697c25c3dfe7435dd79fcd58c38a135888eaf05e"

0 commit comments

Comments
 (0)