style: add format script and run it

package.json

@@ -16,6 +16,7 @@
     "test": "lerna run test --",
     "lint": "lerna run lint -- --fix",
     "build": "lerna run build",
+    "format": "prettier --write packages/**/src",
     "cleanup": "lerna exec -- rm -rf ./dist",
     "prepublish": "yarn run cleanup && lerna run prepublish --scope='@consent-manager/core' && lerna run prepublish --ignore='@consent-manager/core'",
     "start:app": "yarn --cwd example && yarn --cwd example start",

packages/core/src/.eslintrc

@@ -1,4 +1,4 @@
- {
+{
   "env": {
     "jest": true
   }

packages/core/src/components/IntegrationWrapperComponents.tsx

@@ -20,7 +20,7 @@ export const IntegrationWrapperComponents: React.FC<{
     }
 
     return config.integrations
-      .filter(i => decisions[i.id] === true)
+      .filter((i) => decisions[i.id] === true)
       .filter((i): i is IntegrationWithWrapperComponent =>
         Boolean(i.WrapperComponent)
       )

packages/core/src/decisions.ts

@@ -60,7 +60,7 @@ function useCombinedIntegrationStoreDecisions(): InitializeDecisionsFromStorageR
 
 export function useDecisions(): [
   ConsentManagerDecisions,
-  Dispatch<SetStateAction<ConsentManagerDecisions>>
+  Dispatch<SetStateAction<ConsentManagerDecisions>>,
 ] {
   const {
     config: { onChangeDecision },
@@ -79,7 +79,7 @@ export function useDecisions(): [
   }, [decisions, decisionsState, setDecisions, setStore])
 
   const setAndStoreDecisions: typeof setDecisions = useCallback(
-    newDecisionState => {
+    (newDecisionState) => {
       const nextDecisionState =
         typeof newDecisionState === 'function'
           ? newDecisionState(decisionsState)
@@ -88,7 +88,7 @@ export function useDecisions(): [
       if (onChangeDecision) {
         onChangeDecision(decisionsState, nextDecisionState)
       }
-      setStore(store => ({ ...store, decisions: nextDecisionState }))
+      setStore((store) => ({ ...store, decisions: nextDecisionState }))
     },
     [decisionsState, onChangeDecision, setStore]
   )

packages/core/src/index.tsx

@@ -49,14 +49,15 @@ export function useDecision(
       const newStateValue =
         typeof value === 'function' ? value(decision) : value
 
-      setAndStoreDecisions(decisions => ({ ...decisions, [id]: newStateValue }))
+      setAndStoreDecisions((decisions) => ({
+        ...decisions,
+        [id]: newStateValue,
+      }))
     },
   ]
 }
 
-export function useFallbackComponent(): React.ComponentType<
-  FallbackComponentProps
-> {
+export function useFallbackComponent(): React.ComponentType<FallbackComponentProps> {
   const { fallbackComponent: FallbackComponent } = useContext(
     ConsentManagerContext
   )
@@ -94,7 +95,7 @@ export function usePageViewEventTrigger(
 ): PageViewEventTrigger {
   const [decision] = useDecision(id)
   const { config } = useContext(ConsentManagerContext)
-  const integration = config.integrations.find(i => i.id === id)
+  const integration = config.integrations.find((i) => i.id === id)
 
   if (
     !decision ||

packages/core/src/integration-helpers.tsx

@@ -10,20 +10,19 @@ export function getForegroundColor(bgHex: string): string {
 export const createIconComponentFromSimpleIconsSvgPath: (
   title: string,
   path: string
-) => React.FC<IntegrationIconComponentProps> = (
-  title: string,
-  path: string
-) => ({ color = 'currentColor', ...props }: IntegrationIconComponentProps) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    fill={color}
-    viewBox="0 0 24 24"
-    /* Ensure SVG behaves responsive on Safari and some older browsers like IE */
-    height="100%"
-    width="100%"
-    {...props}
-  >
-    <title>{title}</title>
-    <path d={path} />
-  </svg>
-)
+) => React.FC<IntegrationIconComponentProps> =
+  (title: string, path: string) =>
+  ({ color = 'currentColor', ...props }: IntegrationIconComponentProps) => (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill={color}
+      viewBox="0 0 24 24"
+      /* Ensure SVG behaves responsive on Safari and some older browsers like IE */
+      height="100%"
+      width="100%"
+      {...props}
+    >
+      <title>{title}</title>
+      <path d={path} />
+    </svg>
+  )

packages/core/src/integrations.ts

@@ -9,7 +9,7 @@ import { useDecisions } from './decisions'
 
 export function useEnabledIntegrations(): [
   IntegrationId[],
-  Dispatch<SetStateAction<IntegrationId[]>>
+  Dispatch<SetStateAction<IntegrationId[]>>,
 ] {
   const integrations = useIntegrations()
   const [decisions, setDecisions] = useDecisions()
@@ -48,5 +48,5 @@ export function useIntegration(
   id: IntegrationId
 ): IntegrationConfig | undefined {
   const integrations = useIntegrations()
-  return integrations.find(i => i.id === id)
+  return integrations.find((i) => i.id === id)
 }

packages/core/src/storage.ts

@@ -4,7 +4,7 @@ export type ConsentManagerStateHook = (
   initialState: SetStateAction<ConsentManagerStorageState>
 ) => [
   ConsentManagerStorageState,
-  Dispatch<SetStateAction<ConsentManagerStorageState>>
+  Dispatch<SetStateAction<ConsentManagerStorageState>>,
 ]
 
 export interface ConsentManagerStorageState {
@@ -13,5 +13,5 @@ export interface ConsentManagerStorageState {
 
 export type ConsentManagerStore<S = ConsentManagerStorageState> = [
   S,
-  Dispatch<SetStateAction<S>>
+  Dispatch<SetStateAction<S>>,
 ]

packages/docs/docs/new-structure.md

@@ -0,0 +1,23 @@
+* home - introduction about the how and why
+
+* tutorials
+  * quick start - default interface with one integration
+    * highlight features
+    * show how to add addons, based on one example (matomo or google docs?)
+    * offer next steps:
+  * how to track and render while checking for user consent
+  * Style default interface
+  * i18n integration of default interface (translate default interface)
+  * Implement your own interface
+  * Create a custom tracking integration 
+
+* integrations
+  * make more examples on how to track with certain integrations (for example matomo track events, page view and so on)
+  * make sure all config options are listed
+
+
+
+* other todos
+  * maybe its the way we store the tracking in our hooks @stanford & @maneframe why tracking stays active even when user denies (set reference of object ot null is not acutally deleting the object from ram?)
+  * actively ask for co contributors in readme and on website
+  * can we do some seo for our docs page?

packages/docs/src/components/vimeo-video.tsx

@@ -5,11 +5,11 @@ export interface VimeoVideoProps {
   id: string
 }
 
-const VimeoVideoRenderer = React.lazy(() =>
-  import(/* webpackChunkName: "vimeo-video-player" */ './vimeo-renderer')
+const VimeoVideoRenderer = React.lazy(
+  () => import(/* webpackChunkName: "vimeo-video-player" */ './vimeo-renderer')
 )
 
-export const VimeoVideo: React.FC<VimeoVideoProps> = props => (
+export const VimeoVideo: React.FC<VimeoVideoProps> = (props) => (
   <PrivacyShield id="vimeo">
     <React.Suspense fallback={null}>
       <VimeoVideoRenderer {...props} />

packages/docs/src/components/youtube-video.tsx

@@ -5,11 +5,12 @@ export interface YoutubeVideoProps {
   id: string
 }
 
-const YoutubeVideoRenderer = React.lazy(() =>
-  import(/* webpackChunkName: "youtube-video-player" */ './youtube-renderer')
+const YoutubeVideoRenderer = React.lazy(
+  () =>
+    import(/* webpackChunkName: "youtube-video-player" */ './youtube-renderer')
 )
 
-export const YoutubeVideo: React.FC<YoutubeVideoProps> = props => (
+export const YoutubeVideo: React.FC<YoutubeVideoProps> = (props) => (
   <PrivacyShield id="youtube">
     <React.Suspense fallback={null}>
       <YoutubeVideoRenderer {...props} />

packages/docs/src/plugins/client-plugin.js

@@ -4,7 +4,7 @@ const {
   getGoogleAnalytics,
 } = require('@consent-manager/integration-google-analytics')
 
-module.exports = (function() {
+module.exports = (function () {
   return {
     onRouteUpdate({ location }) {
       const { trackPageView } = getMatomoTracker()

packages/docs/src/plugins/consent-manager.js

@@ -1,6 +1,6 @@
 const path = require('path')
 
-module.exports = function() {
+module.exports = function () {
   return {
     name: 'consent-manager',
     getClientModules() {

packages/docs/src/theme/Root.js

@@ -42,7 +42,7 @@ function Root({ children }) {
     ],
     onChangeDecision: (last, next) => {
       const changed = {}
-      Object.keys(next).forEach(key => {
+      Object.keys(next).forEach((key) => {
         if (last[key] !== next[key]) {
           changed[key] = next[key]
         }

packages/integration-google-analytics/src/index.ts

@@ -8,7 +8,7 @@ import {
 } from '@consent-manager/core'
 import React from 'react'
 
-import {siGoogleanalytics} from 'simple-icons'
+import { siGoogleanalytics } from 'simple-icons'
 
 import ReactGA from 'react-ga'
 

packages/integration-segment/src/index.ts

@@ -57,8 +57,8 @@ const WrapperComponent: React.FC = () => {
       'setAnonymousId',
       'addDestinationMiddleware',
     ]
-    analytics.factory = function(e: any) {
-      return function() {
+    analytics.factory = function (e: any) {
+      return function () {
         const t = Array.prototype.slice.call(arguments)
         t.unshift(e)
         analytics.push(t)
@@ -69,7 +69,7 @@ const WrapperComponent: React.FC = () => {
       const key = analytics.methods[e]
       analytics[key] = analytics.factory(key)
     }
-    analytics.load = function(key: string, e: any) {
+    analytics.load = function (key: string, e: any) {
       const t = document.createElement('script')
       t.type = 'text/javascript'
       t.async = !0
@@ -103,8 +103,7 @@ export function segmentIntegration(options: SegmentConfig): IntegrationConfig {
     title: 'Segment',
     slug: 'segment',
     hex: '52BD94',
-    path:
-      'M22.38 7.74H9.26c-.25 0-.45.2-.45.46v1.52c0 .25.2.46.45.46h13.12c.25 0 .45-.2.45-.46V8.2c0-.25-.2-.46-.45-.46zm-8.68 6.08H.58c-.25 0-.45.2-.45.46v1.52c0 .25.2.46.45.46H13.7c.25 0 .45-.2.45-.46v-1.52c0-.25-.2-.46-.45-.46zM1.81 9.4a.46.46 0 00.55-.3 9.57 9.57 0 0111.19-6.44.45.45 0 00.52-.33l.4-1.48a.46.46 0 00-.35-.56A12 12 0 00.02 8.45a.45.45 0 00.32.56l1.47.4zm19.34 5.2a.46.46 0 00-.55.3 9.57 9.57 0 01-11.18 6.44.45.45 0 00-.53.33l-.4 1.48a.45.45 0 00.35.56 12 12 0 0014.1-8.16.45.45 0 00-.31-.56l-1.48-.4zM18.41 5.07a1.33 1.33 0 100-2.66 1.33 1.33 0 000 2.66zM4.55 21.6a1.33 1.33 0 100-2.67 1.33 1.33 0 000 2.66z',
+    path: 'M22.38 7.74H9.26c-.25 0-.45.2-.45.46v1.52c0 .25.2.46.45.46h13.12c.25 0 .45-.2.45-.46V8.2c0-.25-.2-.46-.45-.46zm-8.68 6.08H.58c-.25 0-.45.2-.45.46v1.52c0 .25.2.46.45.46H13.7c.25 0 .45-.2.45-.46v-1.52c0-.25-.2-.46-.45-.46zM1.81 9.4a.46.46 0 00.55-.3 9.57 9.57 0 0111.19-6.44.45.45 0 00.52-.33l.4-1.48a.46.46 0 00-.35-.56A12 12 0 00.02 8.45a.45.45 0 00.32.56l1.47.4zm19.34 5.2a.46.46 0 00-.55.3 9.57 9.57 0 01-11.18 6.44.45.45 0 00-.53.33l-.4 1.48a.45.45 0 00.35.56 12 12 0 0014.1-8.16.45.45 0 00-.31-.56l-1.48-.4zM18.41 5.07a1.33 1.33 0 100-2.66 1.33 1.33 0 000 2.66zM4.55 21.6a1.33 1.33 0 100-2.67 1.33 1.33 0 000 2.66z',
   }
   const color = `#${hex}`
   const contrastColor = getForegroundColor(color)

packages/interface-default/src/context.ts

@@ -7,18 +7,17 @@ interface ConsentManagerDefaultInterfaceContextValue {
   messages: Messages
 }
 
-export const ConsentManagerDefaultInterfaceContext = React.createContext<
-  ConsentManagerDefaultInterfaceContextValue
->({
-  formVisible: false,
-  setFormVisible: () => {},
-  messages: {
-    'consent-manager.integration.default.company': () => null,
-    'consent-manager.fallback.default.description': () => null,
-    'consent-manager.integration.default.title': () => null,
-    'consent-manager.integration.default.privacy-policy': () => null,
-    'consent-manager.integration.default.category': () => null,
-    'consent-manager.integration.default.description': () => null,
-    'consent-manager.fallback.default.enable': () => null,
-  },
-})
+export const ConsentManagerDefaultInterfaceContext =
+  React.createContext<ConsentManagerDefaultInterfaceContextValue>({
+    formVisible: false,
+    setFormVisible: () => {},
+    messages: {
+      'consent-manager.integration.default.company': () => null,
+      'consent-manager.fallback.default.description': () => null,
+      'consent-manager.integration.default.title': () => null,
+      'consent-manager.integration.default.privacy-policy': () => null,
+      'consent-manager.integration.default.category': () => null,
+      'consent-manager.integration.default.description': () => null,
+      'consent-manager.fallback.default.enable': () => null,
+    },
+  })

packages/interface-default/src/default-button.tsx

@@ -5,7 +5,7 @@ import { Styles, ButtonProps } from '.'
 
 export const useDefaultButton = (styles: Styles): React.FC<ButtonProps> => {
   return React.useMemo(() => {
-    const DefaultButton: React.FC<ButtonProps> = props => (
+    const DefaultButton: React.FC<ButtonProps> = (props) => (
       <button
         {...props}
         className={clsx(props.className, styles.buttonReset, styles.button)}

packages/interface-default/src/index.tsx

@@ -16,10 +16,11 @@ import { ToggleButtonProps } from './toggle-button'
 import { SwitchProps } from './switch'
 import { ConsentFormProps } from './form'
 
-const InterfaceChunk = React.lazy(() =>
-  import(
-    /* webpackChunkName: "consent-manager-interface" */ './interface-chunk'
-  )
+const InterfaceChunk = React.lazy(
+  () =>
+    import(
+      /* webpackChunkName: "consent-manager-interface" */ './interface-chunk'
+    )
 )
 
 export * from './i18n'
@@ -60,7 +61,9 @@ interface ConsentManagerDefaultInterfaceProps
   config: ConsentManagerConfig
 }
 
-export const ConsentManagerDefaultInterface: React.FC<ConsentManagerDefaultInterfaceProps> = ({
+export const ConsentManagerDefaultInterface: React.FC<
+  ConsentManagerDefaultInterfaceProps
+> = ({
   messages = defaultMessages,
   children,
   config,
@@ -85,7 +88,7 @@ export const ConsentManagerDefaultInterface: React.FC<ConsentManagerDefaultInter
     <ConsentManager
       config={config}
       store={store}
-      fallbackComponent={fallbackProps => (
+      fallbackComponent={(fallbackProps) => (
         <FallbackComponent
           {...props}
           {...fallbackProps}

packages/interface-default/src/interface-chunk.tsx

@@ -6,7 +6,9 @@ import {
 
 import { Interface } from './interface'
 
-const ConsentManagerInterfaceChunk: React.FC<ConsentManagerFormProps> = props => {
+const ConsentManagerInterfaceChunk: React.FC<ConsentManagerFormProps> = (
+  props
+) => {
   return (
     <ConsentManagerForm
       formComponent={Interface}

packages/interface-default/src/interface.tsx

@@ -33,8 +33,8 @@ import { ConsentManagerDefaultInterfaceDesignProps } from './index'
 import { ToggleButton as DefaultToggleButton } from './toggle-button'
 import { useDefaultButton } from './default-button'
 
-const DefaultForm = React.lazy(() =>
-  import(/* webpackChunkName: "consent-manager-form" */ './form')
+const DefaultForm = React.lazy(
+  () => import(/* webpackChunkName: "consent-manager-form" */ './form')
 )
 
 export interface InterfaceProps
@@ -53,7 +53,7 @@ export const Interface: React.FC<InterfaceProps> = ({
   ToggleIcon = IoShieldCheckmark,
   ToggleButton = DefaultToggleButton,
   Switch = DefaultSwitch,
-  Button = props => <button {...props} />,
+  Button = (props) => <button {...props} />,
   Form = DefaultForm,
   animationStyles = defaultAnimationStyles,
 }) => {
@@ -63,9 +63,8 @@ export const Interface: React.FC<InterfaceProps> = ({
     ConsentManagerDefaultInterfaceContext
   )
 
-  const [needsIntroduction, setNeedsIntroduction] = useState(
-    hasPendingDecisions
-  )
+  const [needsIntroduction, setNeedsIntroduction] =
+    useState(hasPendingDecisions)
 
   const introductionFinished = useCallback(() => {
     setNeedsIntroduction(false)