WIP - new default ui integration

gatsby/package.json

@@ -5,9 +5,10 @@
   "version": "0.1.0",
   "author": "Kyle Mathews <[email protected]>",
   "dependencies": {
-    "@techboi/consent-manager": "^0.2.0",
-    "@techboi/consent-manager-integration-matomo": "^0.2.0",
-    "@techboi/consent-manager-integration-youtube": "^0.2.0",
+    "@techboi/consent-manager": "^0.3.0",
+    "@techboi/consent-manager-integration-matomo": "^0.3.0",
+    "@techboi/consent-manager-integration-youtube": "^0.3.0",
+    "@techboi/consent-manager-interface-unobtrusive-control-ui": "^0.3.0",
     "autoprefixer": "^10.2.5",
     "final-form": "^4.20.2",
     "gatsby": "^3.1.0",

gatsby/src/components/consent-manager/fallback-component.js

@@ -1,18 +1,15 @@
-import React, { useContext, useCallback } from "react"
+import React, { useCallback } from "react"
 
-import { useIntegration } from "@techboi/consent-manager"
+import { useIntegration, useDecision } from "@techboi/consent-manager"
 import { HiCog } from "react-icons/hi"
 
-import ConsentManagerUIContext from "./ui-context"
-
 export const FallbackComponent = ({ integrationId, fallbackUrl }) => {
   const integration = useIntegration(integrationId)
+  const [, setDecision] = useDecision(integrationId)
 
-  const { setIsOpen } = useContext(ConsentManagerUIContext)
-
-  const openConsentManager = useCallback(() => {
-    setIsOpen(true)
-  }, [setIsOpen])
+  const enableIntegration = useCallback(() => {
+    setDecision(true)
+  }, [setDecision])
 
   if (!integration) {
     throw new Error(`No integration found for "${integrationId}"`)
@@ -35,8 +32,8 @@ export const FallbackComponent = ({ integrationId, fallbackUrl }) => {
         </p>
       )}
       <p>
-        <button onClick={openConsentManager}>
-          <HiCog style={{ display: "inline" }} /> Change privacy settings
+        <button onClick={enableIntegration}>
+          <HiCog style={{ display: "inline" }} /> Enable {title}
         </button>
       </p>
       {fallbackUrl && (

gatsby/src/components/consent-manager/tailwind-switch.tsx

@@ -0,0 +1,48 @@
+import React, { useMemo } from "react"
+import { FieldRenderProps } from "react-final-form"
+
+interface SwitchProps extends FieldRenderProps<string, any> {
+  enabledColor: string
+}
+
+export const Switch: React.FC<SwitchProps> = ({
+  children,
+  input,
+  meta,
+  enabledColor = "#48bb78",
+  ...rest
+}) => {
+  const key = `switch-${input.name}`
+  const checked: boolean = useMemo(() => !!input.value, [input.value])
+
+  return (
+    <label htmlFor={key} className="flex items-center cursor-pointer" {...rest}>
+      <div className="relative">
+        <input
+          id={key}
+          type="checkbox"
+          checked={checked}
+          {...input}
+          className="hidden"
+        />
+        <div
+          className="w-10 h-4 bg-gray-400 rounded-full shadow-inner"
+          style={{
+            backgroundColor: checked ? enabledColor : undefined,
+            transition: "background-color 0.3s ease-out",
+          }}
+        />
+        <div
+          className="absolute w-6 h-6 bg-white rounded-full shadow inset-y-0 left-0"
+          style={{
+            top: "-.25rem",
+            left: "-.25rem",
+            transition: "transform 0.3s ease-in-out",
+            transform: checked ? "translateX(100%)" : undefined,
+          }}
+        />
+      </div>
+      <div className="ml-3 text-gray-700 font-medium">{children} </div>
+    </label>
+  )
+}

gatsby/src/components/consent-manager/wrapper.js

@@ -1,13 +1,15 @@
 import React from "react"
+
 import { ConsentManager, ConsentManagerForm } from "@techboi/consent-manager"
 
-import { DecisionsForm } from "./decisions-form"
-import { FallbackComponent } from "./fallback-component"
-import ConsentManagerUIContext from "./ui-context"
-import ConsentManagerToggle from "./toggle"
 import { matomoIntegration } from "@techboi/consent-manager-integration-matomo"
 import { youTubeIntegration } from "@techboi/consent-manager-integration-youtube"
 
+import { UnobtrusiveConsentControlUI } from "@techboi/consent-manager-interface-unobtrusive-control-ui"
+import "@techboi/consent-manager-interface-unobtrusive-control-ui/dist/unobtrusive-control-ui.min.css"
+
+import { FallbackComponent } from "./fallback-component"
+
 const consentManagerConfig = {
   integrations: [
     matomoIntegration({
@@ -43,21 +45,15 @@ export function ConsentManagerWrapper({ children }) {
   const storage = React.useState({
     decisions: {},
   })
-  const [isOpen, setIsOpen] = React.useState(
-    !storage.decisions || !!Object.keys(storage.decisions).length
-  )
 
   return (
-    <ConsentManagerUIContext.Provider value={{ isOpen, setIsOpen }}>
-      <ConsentManager
-        config={consentManagerConfig}
-        store={storage}
-        fallbackComponent={FallbackComponent}
-      >
-        {children}
-        <ConsentManagerForm formComponent={DecisionsForm} />
-        <ConsentManagerToggle />
-      </ConsentManager>
-    </ConsentManagerUIContext.Provider>
+    <ConsentManager
+      config={consentManagerConfig}
+      store={storage}
+      fallbackComponent={FallbackComponent}
+    >
+      {children}
+      <ConsentManagerForm formComponent={UnobtrusiveConsentControlUI} />
+    </ConsentManager>
   )
 }

gatsby/yarn.lock

@@ -1673,27 +1673,37 @@
   dependencies:
     defer-to-connect "^2.0.0"
 
-"@techboi/consent-manager-integration-matomo@^0.2.0":
-  version "0.2.0"
-  resolved "http://localhost:4873/@techboi%2fconsent-manager-integration-matomo/-/consent-manager-integration-matomo-0.2.0.tgz#e3c2a68bb45560c720c348abedb9faa99b7364f9"
-  integrity sha512-XYZ95K2NLCzZ4mKPNIhV37oyBGVhz4KQjCcuMGPVPmoYI8zr+FkiOJK6ZUjmS/orme8dMV0VD4AkbSHRTQMdBA==
+"@techboi/consent-manager-integration-matomo@^0.3.0":
+  version "0.3.0"
+  resolved "http://localhost:4873/@techboi%2fconsent-manager-integration-matomo/-/consent-manager-integration-matomo-0.3.0.tgz#77dd5df18b14d1ab68397f93780f236d9d761b8f"
+  integrity sha512-YB9Bf/ccyCmWnekre7c/ZVAfzL0WdK99AFyfDuceXh7DJdJfEsN6Mq1P0KI6f7jRZSY/tBiSKGlnaIPAEzsKgg==
   dependencies:
-    "@techboi/consent-manager" "0.2.0"
+    "@techboi/consent-manager" "^0.3.0"
     simple-icons "^4.14.0"
 
-"@techboi/consent-manager-integration-youtube@^0.2.0":
-  version "0.2.0"
-  resolved "http://localhost:4873/@techboi%2fconsent-manager-integration-youtube/-/consent-manager-integration-youtube-0.2.0.tgz#0d8c87de83be7f9e8d4cca2d29163131449cb775"
-  integrity sha512-sOVdKE1soXWt9l2USqmdHOcNVBd9sp1h4p8Pmsinb354/KEy/H0Vei4gbJdWR5Q58U3CG0dHNNBaXuHrByyapw==
+"@techboi/consent-manager-integration-youtube@^0.3.0":
+  version "0.3.0"
+  resolved "http://localhost:4873/@techboi%2fconsent-manager-integration-youtube/-/consent-manager-integration-youtube-0.3.0.tgz#6aac52436c8653bdc7abe1f9459590e9fc6c5bc2"
+  integrity sha512-S1PoqouJt6t/LxUcw4+m/j3WV+jlF6tiGzUGNSgp8hQbN5u51KUQXUtMAg2jkmnx+39fpSV3lY0vbFvXh1mHHw==
   dependencies:
-    "@techboi/consent-manager" "0.2.0"
+    "@techboi/consent-manager" "^0.3.0"
     react-youtube "^7.13.1"
     simple-icons "^4.14.0"
 
-"@techboi/[email protected]", "@techboi/consent-manager@^0.2.0":
-  version "0.2.0"
-  resolved "http://localhost:4873/@techboi%2fconsent-manager/-/consent-manager-0.2.0.tgz#791a989f1dc1180bb9abcbb20cb0ca2906af3046"
-  integrity sha512-1J1eOhEOzXn8rvnJzwFMDqKD1Jtt9SV5M8CBxY9FRzB+NN/dDl1qs1Pdsiic6ctFvsm8xex0DjXFSa34qtNWlA==
+"@techboi/consent-manager-interface-unobtrusive-control-ui@^0.3.0":
+  version "0.3.0"
+  resolved "http://localhost:4873/@techboi%2fconsent-manager-interface-unobtrusive-control-ui/-/consent-manager-interface-unobtrusive-control-ui-0.3.0.tgz#e17fc0614203ef42e503a35a5b984c3d39b96fb7"
+  integrity sha512-9IyDL+WVqrPjK4NmcISpty3eKkG79oVMbyNqw6QyYqbhTC7FEzIFu4L0fPV3ZyFVRbeqxYrGKWaZk+kBEtjHrw==
+  dependencies:
+    "@techboi/consent-manager" "^0.3.0"
+    clsx "^1.1.1"
+    react-final-form "^6.5.2"
+    react-icons "^4.2.0"
+
+"@techboi/consent-manager@^0.3.0":
+  version "0.3.0"
+  resolved "http://localhost:4873/@techboi%2fconsent-manager/-/consent-manager-0.3.0.tgz#54c5d5fbdf2abbd6d37379c805139164202a7040"
+  integrity sha512-3qHo8uWv+yaqT79jYcrE7IdRqVr4HRJmik9rNFsh67EXHF7TBOozbDRrq1QpdrlEBCizgW2xcCp3xjhVN7i3bQ==
   dependencies:
     "@types/history" "^4.7.8"
     history "^5.0.0"
@@ -3499,6 +3509,11 @@ [email protected], clone-response@^1.0.2:
   dependencies:
     mimic-response "^1.0.0"
 
+clsx@^1.1.1:
+  version "1.1.1"
+  resolved "http://localhost:4873/clsx/-/clsx-1.1.1.tgz#98b3134f9abbdf23b2663491ace13c5c03a73188"
+  integrity sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==
+
 coa@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/coa/-/coa-2.0.2.tgz#43f6c21151b4ef2bf57187db0d73de229e3e7ec3"