Skip to content

Commit

Permalink
refactor: restructure to match docs structure
Browse files Browse the repository at this point in the history
  • Loading branch information
axe312ger committed Jan 3, 2024
1 parent 7131729 commit 840f39d
Show file tree
Hide file tree
Showing 4 changed files with 103 additions and 85 deletions.
7 changes: 4 additions & 3 deletions parcel/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,19 +5,20 @@
"version": "0.0.1",
"license": "MIT",
"scripts": {
"start": "parcel index.html",
"start": "parcel src/index.html",
"build": "parcel build src/index.html"
},
"dependencies": {
"@consent-manager/core": "1.0.1",
"@consent-manager/core": "next",
"react": "18.2.0",
"react-app-polyfill": "^3.0.0",
"react-dom": "^18.1.0"
},
"devDependencies": {
"@types/react": "^18.2.45",
"@types/react": "^18.2.46",
"@types/react-dom": "^18.2.18",
"parcel": "^2.0.0",
"process": "^0.11.10",
"typescript": "^5.3.3"
}
}
78 changes: 78 additions & 0 deletions parcel/src/consent-manager.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
import * as React from "react";
import * as ReactDOM from "react-dom";

import {
ConsentManager,
ConsentManagerConfig,
ConsentManagerForm,
} from "@consent-manager/core";

const consentManagerConfig: ConsentManagerConfig = {
integrations: [
{
id: "video-platform",
title: "Video Inc.",
category: "social",
Icon: () => (
<svg
className="w-6 h-6"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
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"
/>
</svg>
),
description: "Video Inc. is a popular service to share clips of cats.",
},
{
id: "integration-with-wrapper",
title: "Red Box Ltd.",
category: "statistics",
Icon: () => (
<svg
className="w-6 h-6"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
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"
clipRule="evenodd"
/>
</svg>
),
description:
"Adds red borders around your content, demonstrates use of components that do e.g. click tracking",
WrapperComponent: () => (
<div style={{ border: "3px solid red", padding: "1rem", textAlign: "center" }}>Very special red box!</div>
),
},
],
};

export const ConsentManagerWrapper:React.FC<{children: React.ReactNode}> = ({children}) => {
const storage = React.useState({
decisions: {},
});

return (
<div>
<ConsentManager config={consentManagerConfig} store={storage}>
<main style={{ margin: "4em auto", maxWidth: "420px" }}>
{children}
</main>
<aside style={{ backgroundColor: "#eee", padding: "1em" }}>
<ConsentManagerForm />
</aside>
</ConsentManager>
</div>
);
};
82 changes: 8 additions & 74 deletions parcel/src/index.tsx
Original file line number Diff line number Diff line change
@@ -1,63 +1,8 @@
import * as React from "react";
import * as ReactDOM from "react-dom";

import {
ConsentManager,
ConsentManagerConfig,
ConsentManagerForm,
PrivacyShield,
} from "@consent-manager/core";

const consentManagerConfig: ConsentManagerConfig = {
integrations: [
{
id: "video-platform",
title: "Video Inc.",
category: "social",
Icon: () => (
<svg
className="w-6 h-6"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
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"
/>
</svg>
),
description: "Video Inc. is a popular service to share clips of cats.",
},
{
id: "integration-with-wrapper",
title: "Red Box Ltd.",
category: "statistics",
Icon: () => (
<svg
className="w-6 h-6"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
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"
clipRule="evenodd"
/>
</svg>
),
description:
"Adds red borders around your content, demonstrates use of components that do e.g. click tracking",
WrapperComponent: ({ children }) => (
<div style={{ border: "3px solid red" }}>{children}</div>
),
},
],
};
import { PrivacyShield } from "@consent-manager/core";
import { ConsentManagerWrapper } from "./consent-manager";

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

const App = () => {
const storage = React.useState({
decisions: {},
});

return (
<div>
<ConsentManager config={consentManagerConfig} store={storage}>
<main style={{ margin: "4em auto", maxWidth: "420px" }}>
<h1>Your content:</h1>
<PrivacyShield id="video-platform">
<VideoPlatform id="rick-roll" />
</PrivacyShield>
</main>
<aside style={{ backgroundColor: "#eee", padding: "1em" }}>
<ConsentManagerForm />
</aside>
</ConsentManager>
</div>
<ConsentManagerWrapper>
<h1>Your content:</h1>
<PrivacyShield id="video-platform">
<VideoPlatform id="rick-roll" />
</PrivacyShield>
</ConsentManagerWrapper>
);
};

Expand Down
21 changes: 13 additions & 8 deletions parcel/yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -31,10 +31,10 @@
dependencies:
regenerator-runtime "^0.13.4"

"@consent-manager/core@1.0.1":
version "1.0.1"
resolved "https://registry.yarnpkg.com/@consent-manager/core/-/core-1.0.1.tgz#ce90078d9506a1ac5f9c52906c900d6bd8174659"
integrity sha512-SNbrOEziJiK8Aah11MJRJp7kJSzd25vt0D9u8fxts98ByO37EItmbWfRLbMTzfHbHZGLMK4ALnp+IjZgifuq+g==
"@consent-manager/core@next":
version "2.0.0-next.2"
resolved "https://registry.yarnpkg.com/@consent-manager/core/-/core-2.0.0-next.2.tgz#c245fa867a31f8aea9afc15014ee30d1270ede63"
integrity sha512-Vi8QuqVQLYWBTInGxnDYXMuZhxzq997nmN9Bg+fEJ7heqDXr74jp1zPsoi5vHNVA1MhLZBvESZr71b7lrKFyQA==
dependencies:
"@types/history" "^4.7.8"
history "^5.0.0"
Expand Down Expand Up @@ -905,10 +905,10 @@
"@types/scheduler" "*"
csstype "^3.0.2"

"@types/react@^18.2.45":
version "18.2.45"
resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.45.tgz#253f4fac288e7e751ab3dc542000fb687422c15c"
integrity sha512-TtAxCNrlrBp8GoeEp1npd5g+d/OejJHFxS3OWmrPBMFaVQMSN0OFySozJio5BHxTuTeug00AVXVAjfDSfk+lUg==
"@types/react@^18.2.46":
version "18.2.46"
resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.46.tgz#f04d6c528f8f136ea66333bc66abcae46e2680df"
integrity sha512-nNCvVBcZlvX4NU1nRRNV/mFl1nNRuTuslAJglQsq+8ldXe5Xv0Wd2f7WTE3jOxhLH2BFfiZGC6GCp+kHQbgG+w==
dependencies:
"@types/prop-types" "*"
"@types/scheduler" "*"
Expand Down Expand Up @@ -1657,6 +1657,11 @@ posthtml@^0.16.4, posthtml@^0.16.5:
posthtml-parser "^0.11.0"
posthtml-render "^3.0.0"

process@^0.11.10:
version "0.11.10"
resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
integrity sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==

promise@^8.1.0:
version "8.1.0"
resolved "https://registry.npmjs.org/promise/-/promise-8.1.0.tgz#697c25c3dfe7435dd79fcd58c38a135888eaf05e"
Expand Down

0 comments on commit 840f39d

Please sign in to comment.