added readme

README.md

@@ -1,33 +1,68 @@
 # FHCookieGuard
 
+A set of hooks to use to save a user's cookie preferences in a cookie(🥲).
+
+The cookie settings are stored as follows:
+
+`'["functional","analytics","marketing"]'`
+
 ## Usage
 
-```js
-import { CookiePopup } from '@freshheads/cookie-guard'
+You can use the build in cookieguard to get up and running quickly or use the provided hooks to make your own.
 
-const App = () => {
-    return (
-        <div>
-            <CookiePopup />
-        </div>
-    );
-};
-```
+The cookiebanner makes use of Context to share the cookie state throughout the app.
 
-We provide some basic styles but you can also use your own.
-Import them as global css.
-```css
-@import '@freshheads/cookie-guard/dist/style.css';
-```
+-   Wrap your app with the Provider:
+
+    ```jsx
+    import { CookieGuardContextProvider } from '@freshheads/cookie-guard';
+
+    <CookieGuardContextProvider>
+        <App />
+    </CookieGuardContextProvider>;
+    ```
+
+-   The provider optionally accepts:
 
+    -   onCookiesChange
+    -   onCookiesSet
+    -   onCookiesCleared
 
-TODO: Documentation below needs to be changed
-## Documentation
+    e.g. If you want to change the Google consent options based on the cookie settings
 
-- [Installation](doc/installation.md)
-- [Usage](doc/usage.md)
-- [Configuration](doc/configuration.md)
+-   Add the premade Cookie Banner to your app
 
-## Browser support
+    ```jsx
+    import {
+    CookieGuard,
+    CookieGuardContextProvider,
+    CookieGuardProps
+    } from '@freshheads/cookie-guard';
+    import '@freshheads/cookie-guard/dist/style.css';
 
-This library supports the latest 2 versions of all modern browsers. But support can be extended by converting code to ES5 and using some polyfills.
+    const CookieGuardProps = {
+        title: 'Onze site maakt gebruik van cookies.',
+        description:
+            'Wij gebruiken cookies voor de werking van de website, analyse en verbetering en marketingdoeleinden.',
+        acceptAllLabel: 'Alle cookies accepteren',
+        saveLabel: 'Opslaan',
+        functionalLabel: 'Noodzakelijke cookies',
+        analyticsLabel: 'Analytische cookies',
+        marketingLabel: 'Marketing cookies',
+    }
+     <CookieGuardContextProvider>
+        <App/>
+        <CookieGuard {...CookieGuardProps}>
+    </CookieGuardContextProvider>
+
+    ```
+
+-   To style look at the source code `/src/popupstyles.css` and import your own css.
+
+-   You can also use the hooks to make your own custom cookiebanner
+
+TODO: explain hooks with chakraui example
+
+```jsx
+
+```

package.json

@@ -37,11 +37,13 @@
         "url": "https://github.com/freshheads/cookie-guard/issues"
     },
     "devDependencies": {
+        "@types/js-cookie": "^3.0.3",
         "@types/node": "^18.16.2",
         "@types/react": "^18.0.31",
         "@types/react-dom": "^18.0.11",
         "@vitejs/plugin-react": "^4.0.0",
         "path": "^0.12.7",
+        "postcss-nesting": "^11.2.2",
         "prettier": "^2.8.7",
         "react": "18.2.0",
         "react-dom": "18.2.0",
@@ -52,8 +54,8 @@
     },
     "dependencies": {
         "@headlessui/react": "^1.7.14",
-        "@types/js-cookie": "^3.0.3",
-        "js-cookie": "^3.0.5"
+        "js-cookie": "^3.0.5",
+        "lodash": "^4.17.21"
     },
     "peerDependencies": {
         "react": ">=17",

postcss.config.cjs

@@ -0,0 +1,7 @@
+module.exports = {
+    plugins: {
+        'postcss-nesting': {
+            /* plugin options */
+        },
+    },
+};