Merge pull request #42 from Jersyfi/v2.x

V2.x

Author: Jersyfi

.eslintrc.json

@@ -7,7 +7,8 @@
     "extends": [
         "eslint:recommended",
         "plugin:react/recommended",
-        "plugin:@typescript-eslint/recommended"
+        "plugin:@typescript-eslint/recommended",
+        "prettier"
     ],
     "overrides": [
     ],

.prettierrc.json

@@ -0,0 +1,6 @@
+{
+    "semi": false,
+    "trailingComma": "none",
+    "singleQuote": true,
+    "useTabs": true
+}

CHANGELOG.md

@@ -2,6 +2,21 @@
 
 All notable changes to `react-cookify` will be documented in this file.
 
+## v2.0.0-beta.1 - 2023-02-12
+
+Skipped the work on the core function from v1 to v2 and included the build-in consent manager.
+
+* Prepared for v2.0.0-beta.1 and seperated into different branches
+* Added uuid, created_at, updated_at & revision to `consentObject`
+* Modified the `CookifyConsent` components with UI changes to the detail layer
+* Added paused option to pause consent mananger on a specific page
+* Added floating button to open the consent manager
+* Added Prettier for code formatting
+* Added info and detail consent
+* Added button to open the consent
+* Added new settings for initialization
+* Splitted into core `CookifyProvider` and consent `CookifyConsent` to choose between logic and own front-end or build-in front-end
+
 ## v1.0.0 - 2023-01-22
 
 * Rolled back the consent modal and all necessary components for v2.0.0

README.md

@@ -1,7 +1,6 @@
 # 🍪 react-cookify
 
-![NPM Downloads](https://img.shields.io/npm/dt/react-cookify)
-![GitHub package.json version](https://img.shields.io/github/package-json/v/jersyfi/react-cookify)
+![npm](https://img.shields.io/npm/dm/react-cookify)
 ![NPM](https://img.shields.io/npm/v/react-cookify)
 ![Github Code Size](https://img.shields.io/github/languages/code-size/jersyfi/react-cookify)
 ![npm bundle size](https://img.shields.io/bundlephobia/min/react-cookify)
@@ -16,207 +15,13 @@ How to handle GDPR correctly can be found on [Cookies, the GDPR, and the ePrivac
 View and test how Cookify works in either [Bootstrap](https://jersyfi.github.io/cookify/test/preview/bootstrap.html) or [Tailwind CSS](https://jersyfi.github.io/cookify/test/preview/tailwindcss.html).
 
 ## Documentation
-
-### Get started
-
-#### Installation
-Install `react-cookify` via npm.
+react-cookify is essentially a set of npm packages.
 
 ```bash
 npm install react-cookify
 ```
 
-#### Add Cookify to your App
-Start with adding the `CookifyProvider` to your App.
-
-```javascript
-import '../styles/globals.css'
-import { CookifyProvider } from 'react-cookify'
-
-export default function App({ Component, pageProps }) {
-    return (
-        <CookifyProvider options={{
-            name: 'own-cookify-consent',
-            types: {
-                marketing: false,
-                performance: false,
-            },
-            jscookie: {
-                expires: 365,
-                path: '/',
-                secure: true,
-            }
-        }}>
-            <Component {...pageProps} />
-        </CookifyProvider>
-    )
-}
-```
-
-Now add the logic to your Home page.
-
-```javascript
-import { useEffect, useState } from 'react'
-import { useCookifyProvider, CookifyInput } from 'react-cookify'
-
-export default function Home() {
-    const {consentObject, consentDisplayed, handleConsentDisplayedChange, consentTracking, actionAccept, actionNecessary, actionAll} = useCookifyProvider()
-    const [displayedClass, setDisplayedClass] = useState('')
-
-    /* CSS not provided in example */
-    const handleToggle = () => {
-        if (consentDisplayed) {
-            setDisplayedClass('block') // block => display: block
-        } else {
-            setDisplayedClass('hidden') // hidden => display: none
-        }
-    }
-
-    /* Display the consent management */
-    useEffect(() => {
-        handleToggle()
-    }, [consentDisplayed])
-
-    /* Track the data if needed */
-    useEffect(() => {
-        if (consentTracking !== 0) { // Only track after initialization
-            console.log('Track data here', consentObject)
-        }
-    }, [consentTracking])
-
-    return (
-        <>
-            <button onClick={() => handleConsentDisplayedChange(true)}>
-                Open Modal
-            </button>
-
-            <div className={displayedClass}>
-                <div>
-                    <CookifyInput type="checkbox" name="necessary" id="necessary" disabled />
-                    <label htmlFor="necessary">Necessary</label>
-
-                    <CookifyInput type="checkbox" name="marketing" id="marketing" />
-                    <label htmlFor="marketing">Marketing</label>
-
-                    <CookifyInput type="checkbox" name="performance" id="performance" />
-                    <label htmlFor="performance">Performance</label>
-                </div>
-
-                <div>
-                    <button onClick={actionAll}>All</button>
-                    <button onClick={actionAccept}>Accept</button>
-                    <button onClick={actionNecessary}>Necessary</button>
-                </div>
-            </div>
-        </>
-    )
-}
-```
-
-#### Configure Cookify
-All configuration options with its default values.
-
-```typescript
-name: 'cookify-consent',
-storage: 'cookies', // ['cookies' and 'storage']
-saveWithChange: false,
-saveByDefault: false,
-typeDefault: 'necessary',
-types: {
-    // `necessary: true` will be set automatically
-    // if `typeDefault` is empty, otherwise it will use the customized `typeDefault` instead of `necessary`
-},
-// js-cookie attributes
-// Only needed when using `storage: 'cookies'`
-// More information on https://github.com/js-cookie/js-cookie
-jscookie: {
-    expires: 365,
-    path: '/',
-}
-```
-
-### Provider interaction
-
-#### States
-
-##### consentObject
-**Type:** consentObject: ConsentObjectType
-**Syntax:** consentObject
-```bash
-console.log(consentObject)
-
-> Object: {
-    viewed: false,
-    data: {
-      'necessary': true,
-      'marketing': false,
-      'performance': false,
-    },
-  }
-```
-
-##### consentDisplayed
-**Type:** consentDisplayed: boolean
-**Syntax:** consentDisplayed
-```bash
-console.log(consentDisplayed)
-
-> false
-```
-
-##### handleConsentDisplayedChange
-**Type:** handleConsentDisplayedChange: (newConsentDisplayed: boolean) => void
-**Syntax:** handleConsentDisplayedChange(false)
-```javascript
-<button onClick={() => handleConsentDisplayedChange(true)}>
-    Open Modal
-</button>
-```
-
-##### consentTracking
-**Type:** consentTracking: number
-**Syntax:** consentTracking
-```bash
-console.log(consentTracking)
-
-> 0
-```
-
-#### Actions
-
-##### actionCheckbox
-**Type:** actionCheckbox: (type: string) => void
-**Syntax:** actionCheckbox('type')
-```javascript
-<input
-    type="checkbox"
-    name="marketing"
-    id="marketing"
-    checked={consentObject.data['marketing']}
-    onChange={() => actionCheckbox('marketing')}
-/>
-```
-
-##### actionAccept
-**Type:** actionAccept: () => void
-**Syntax:** actionAccept
-```javascript
-<button onClick={actionAccept}>Accept</button>
-```
-
-##### actionNecessary
-**Type:** actionNecessary: () => void
-**Syntax:** actionNecessary
-```javascript
-<button onClick={actionNecessary}>Necessary</button>
-```
-
-##### actionAll
-**Type:** actionAll: () => void
-**Syntax:** actionAll
-```javascript
-<button onClick={actionAll}>All</button>
-```
+To view the complete documentation, please follow the link to [Cookify Docs](https://cookify.jersyfi.dev/).
 
 ## Framework Support & Features
 You can view all library languages and supported features [here](https://github.com/Jersyfi/cookify#framework-support--features).