feat(cookie): init cookie consent package

.changeset/breezy-donuts-scream.md

@@ -0,0 +1,5 @@
+---
+'@scaleway/cookie-consent': major
+---
+
+Extract internal cookie consent provider strategy to shared package

README.md

@@ -33,6 +33,13 @@ scaleway-lib is a set of NPM packages used at Scaleway.
 
 ## Available packages
 
+- [`@scaleway/cookie-consent`](./packages/countries/README.md): React provider to handle website end user consent cookie storage based on segment integrations.
+
+  ![npm](https://img.shields.io/npm/dm/@scaleway/cookie-consent)
+  ![npm bundle size](https://img.shields.io/bundlephobia/min/@scaleway/cookie-consent)
+  ![npm](https://img.shields.io/npm/v/@scaleway/cookie-consent)
+
+
 - [`@scaleway/countries`](./packages/countries/README.md): ISO 3166/3166-2 coutries JSON database.
 
   ![npm](https://img.shields.io/npm/dm/@scaleway/countries)

packages/cookie-consent/.eslintrc.cjs

@@ -0,0 +1,10 @@
+const { join } = require('path')
+
+module.exports = {
+  rules: {
+    'import/no-extraneous-dependencies': [
+      'error',
+      { packageDir: [__dirname, join(__dirname, '../../')] },
+    ],
+  },
+}

packages/cookie-consent/.npmignore

@@ -0,0 +1,5 @@
+**/__tests__/**
+examples/
+src
+.eslintrc.cjs
+!.npmignore

packages/cookie-consent/README.md

@@ -0,0 +1,119 @@
+# Shire - Cookie Consent
+
+This package is an helper to handle cookie consents with Segment integrations.
+It will handle the cookie consent for each categories.
+
+This package does not contain design element to display a cookie consent modal,
+it only handle the storage and the init of cookie consent in a React provider.
+
+## QuickStart
+
+In order to use it, first you need to provide a context at the top level of your application
+
+```tsx
+import { PropsWithChildren } from 'react'
+
+const MyApp = ({ children }: PropsWithChildren) => {
+  return (
+    <CookieConsentProvider
+      isConsentRequired // Switch off consents if not defined (usefull for E2E testing)
+      essentialIntegrations={[]} // List of mandatory integrations
+      config={{
+        segment, // Segment configuration used to get dynamically the integration used
+      }}
+      // not required
+      cookiePrefix="_scw_rgpd" // default value
+      consentMaxAge={13 * 30 * 24 * 60 * 60} // default value (appx 13 months)
+      consentAdvertisingMaxAge={6 * 30 * 24 * 60 * 60} // default value (appx 6 months)
+      cookiesOptions={{ sameSite: 'strict', secure: true, path: '/' }} // default value
+    >
+      {children}
+    </CookieConsentProvider>
+  )
+}
+```
+
+Then in your cookie modal component you could simply use exposed hook to get and modify consents
+
+```tsx
+export function PanelConsent() {
+  const { saveConsent, categoriesConsent } = useCookieConsent()
+
+  const setAllConsents = ({
+    categoriesConsent,
+    value,
+  }: {
+    categoriesConsent: Partial<Consent>
+    value: boolean
+  }) =>
+    Object.keys(categoriesConsent).reduce(
+      (acc, category) => ({ ...acc, [category]: value }),
+      {},
+    )
+
+  const handleClick = (consentForAll: boolean) => () => {
+    saveConsent(setAllConsents({ categoriesConsent, value: consentForAll }))
+  }
+
+  const onAgreeAll = handleClick(true)
+
+  const onReject = handleClick(false)
+
+  return (
+    <div className={styles.consent}>
+      <div>Do you accept consents ?</div>
+      <div>
+        <Button onClick={onAgreeAll} autoFocus>
+          Accept
+        </Button>
+        <Button onClick={onReject}>Decline</Button>
+      </div>
+    </div>
+  )
+}
+```
+
+### User flow
+
+```mermaid
+flowchart TD
+    Z[Application boot] -..-> A
+    subgraph "Cookie Consent booting"
+    A[First user navigation in app] --> B{isConsentRequired}
+    B --> |false| C[do nothing with cookies]
+    B --> |true| D[Fetch segment integrations configuration]
+    D --> E[Generate hash of integration and define required consent categories depending on integration]
+    E -..->F[Set needConsent to true]
+    end
+    subgraph "Consent storage"
+    F -..-> | | G[/User saveConsent with categories/]
+    G --> H[Hash of integration is stored in _scw_rgpd_hash cookie with storage of 6 months]
+    G --> I[_scw_rgpd_$category$ cookie is stored for each accepted cookie consent category, 6 months for ad consent, 13 month for others]
+    H & I --> J[needConsent is set to false]
+    end
+    subgraph "User come back on website in futur (within cookie duration)"
+    J -..-> K[Application boot]
+    K -..-> L[Check value fo cookies _scw_rgpd_hash and _scw_rgpd_$categorie$]
+    L --> M[Load in context accepted categories]
+    end
+    subgraph "User come back after 6 months"
+    J -...-> N[Application boot]
+    N -..-> O[Check value fo cookies _scw_rgpd_hash and _scw_rgpd_$categorie$]
+    O --> B
+    end
+```
+
+## How to contribute ?
+
+### Prerequisites
+
+```
+$ cd packages/cookie-consent
+```
+
+### Start
+
+```bash
+$ pnpm build # Build the package
+$ pnpm watch # Build the package and watch for changes
+```

packages/cookie-consent/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@scaleway/cookie-consent",
+  "version": "0.1.0",
+  "description": "React provider to handle website end user consent cookie storage based on segment integrations",
+  "type": "module",
+  "sideEffects": false,
+  "exports": {
+    "types": "./dist/index.d.ts",
+    "default": "./dist/index.js"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "react",
+    "reactjs",
+    "hooks",
+    "segment",
+    "cookies",
+    "gdpr"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/scaleway/scaleway-lib",
+    "directory": "packages/cookie-consent"
+  },
+  "dependencies": {
+    "cookie": "0.5.0"
+  },
+  "devDependencies": {
+    "@types/cookie": "0.5.1",
+    "react": "18.2.0"
+  },
+  "peerDependencies": {
+    "react": "18.x || 18"
+  }
+}