Initial commit

.eslintrc.json

@@ -0,0 +1,6 @@
+{
+  "extends": ["next/core-web-vitals", "prettier"],
+  "rules": {
+    "@next/next/no-html-link-for-pages": ["off"]
+  }
+}

.gitignore

@@ -0,0 +1,39 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+# outpu
+*.log
+.DS_Store
+node_modules
+.cache
+dist
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel

.npmignore

@@ -0,0 +1,5 @@
+*.log
+.DS_Store
+node_modules
+.cache
+*.lock

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Marco Lipparini
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,159 @@
+# Next-Iubenda
+
+Do you use the [Iubenda](https://www.iubenda.com/)'s Cookie Solution, but have trouble integrating it properly into your Next.js projects? Then this is the tool for you.
+
+Our goal is to create a simple, yet powerful tool to do the following:
+
+- Display Iubenda's consent banner, with the ability to customize every single configuration option
+- Make sure we can prevent code execution of components that may require specific consent if it's not granted, as well as have a fallback widget that provides users with a call to action to change their preferences
+- Take advantage of support for server-side and client-side components to improve performance
+- Provide developers with a good DX thanks to features like
+  - Type safety for configuration options
+  - Templates for basic needs and hooks for advanced use cases
+  - reasonable styling defaults, but full customization options
+
+This package gives you these features with minimal effort and an extremely small footprint on your codebase.
+
+# Missing features
+
+- **Support to regulations other than the European GDPR**  
+  Iubenda does a great job of supporting many regulations and helping developers make sure their websites/apps can be compliant worldwide. But this tool is currently limited to the European GDPR because that's what we know best. **Any help in adding support for additional features is appreciated.**
+- **Shipping the package as pre-compiled**  
+  Currently, this package is shipped as plain TypeScript files. While this doesn't seem to be a problem and may allow Next.js to better optimize the code, it requires the "transpilePackages" option to be enabled for this package, which may not be ideal. **Any suggestions/contributions in this regard are appreciated.**
+
+# Project lifecycle, contribution and support policy
+
+Our policies are available on our [main oranization page](https://github.com/mep-agency#projects-lifecycle-contribution-and-support-policy).
+
+## Original authors
+
+- Marco Lipparini ([liarco](https://github.com/liarco))
+- Ivan Balmita ([ivanbalmita](https://github.com/ivanbalmita))
+
+## Getting started
+
+Simply install the package using any package manager:
+
+```bash
+# With Yarn
+$ yarn add --dev @mep-agency/next-iubenda
+
+# With NPM
+$ npm install --save-dev @mep-agency/next-iubenda
+```
+
+At the moment this package is distributed as plain TypeScript code so you have to make sure Next.js will transpile it:
+
+```js
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  transpilePackages: ['@mep-agency/next-iubenda'],
+};
+
+module.exports = nextConfig;
+```
+
+Update your main layout file to wrapp any part of the page which will contain consent-aware components.
+
+Here is an example with the App Router:
+
+```tsx
+// ./app/layout.tsx
+
+import './globals.css';
+import { Inter } from 'next/font/google';
+import {
+  IubendaConsentProvider,
+  IubendaConsentSolutionBannerConfigInterface,
+  i18nDictionaries,
+} from '@mep-agency/next-iubenda';
+
+const inter = Inter({ subsets: ['latin'] });
+
+export const metadata = {
+  title: 'Create Next App',
+  description: 'Generated by create next app',
+};
+
+const iubendaBannerConfig: IubendaConsentSolutionBannerConfigInterface = {
+  siteId: 0000000, // Your site ID
+  cookiePolicyId: 00000000, // Your cookie policy ID
+  lang: 'en',
+
+  // See https://www.iubenda.com/en/help/1205-how-to-configure-your-cookie-solution-advanced-guide
+};
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <html lang="en">
+        <body className={inter.className}>
+          <IubendaConsentProvider bannerConfig={iubendaBannerConfig}>
+            // Any component at this level will have access to useIubendaConsent()
+            {children}
+          </IubendaConsentProvider>
+        </body>
+      </html>
+    </>
+  );
+}
+```
+
+Now you can simply wrap any components with the `<ConsentAwareWrapper />`:
+
+```tsx
+// ./app/page.tsx
+
+import { ConsentAwareWrapper } from '@mep-agency/next-iubenda';
+
+// ...
+export default function Home() {
+  return (
+    <main>
+      {/* ... */}
+      <ConsentAwareWrapper requiredPurposes={['experience', 'marketing']}>
+        {/* Anything at this level won't be rendered unless the required permissions have been granted */}
+        Both "experience" and "marketing" cookies can be used!
+      </ConsentAwareWrapper>
+      {/* // ... */}
+    </main>
+  );
+}
+// ...
+```
+
+If you need more flexibility then you can use the `useIubendaConsent()` hook:
+
+```tsx
+'use client';
+
+import { useIubendaConsent } from '@mep-agency/next-iubenda';
+
+const ConsentAwareComponent = () => {
+  const {
+    consent, // The latest available consent data
+    showCookiePolicy, // Displays the cookie policy popup
+    openPreferences, // Opens the preferences panel
+    showTcfVendors, // Opens the TCF vendors panel
+    resetCookies, // Resets all cookies managed by Iubenda
+
+    /*
+     * The following exposed entries are meant for internal use only and should
+     * not be used in your projects.
+     */
+    dispatchConsent, // Update the consent data across the app
+    i18nDictionary, // Contains the translations for the built-in components
+  } = useIubendaConsent();
+
+  return (
+    <div>
+      Consent status:{' '}
+      <span style={{ color: consent.hasBeenLoaded ? 'green' : 'red' }}>
+        {consent.hasBeenLoaded ? 'LOADED' : 'LOADING...'}
+      </span>
+    </div>
+  );
+};
+
+export default ConsentAwareComponent;
+```

next-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />

package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@mep-agency/next-iubenda",
+  "version": "1.0.0-alpha0",
+  "private": false,
+  "description": "A React library for integrating Iubenda's cookie solution into Next.js projects",
+  "source": "src/index.tsx",
+  "main": "src/index.tsx",
+  "sideEffects": false,
+  "scripts": {
+    "lint": "eslint \"**/*.{ts,tsx,js}\" && prettier --check \"**/*.{ts,tsx,md,scss,css,js}\"",
+    "format": "prettier --write \"**/*.{ts,tsx,md,scss,css,js}\""
+  },
+  "files": [
+    "src",
+    "LICENCE",
+    "README.md"
+  ],
+  "exports": {
+    ".": "./src/index.tsx"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mep-agency/next-iubenda.git"
+  },
+  "keywords": [
+    "next",
+    "next.js",
+    "react",
+    "redirect",
+    "link",
+    "router"
+  ],
+  "author": "Marco Lipparini <[email protected]>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/mep-agency/next-iubenda/issues"
+  },
+  "peerDependencies": {
+    "next": ">= 13.0.0",
+    "react": ">= 18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.21",
+    "eslint": "8.43.0",
+    "eslint-config-next": "^13.4.7",
+    "eslint-config-prettier": "^8.8.0",
+    "next": "^13.4.7",
+    "prettier": "^2.8.8",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "typescript": "^5.1.3"
+  }
+}

prettier.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  printWidth: 125,
+  trailingComma: 'all',
+  singleQuote: true,
+};