feat(mui-next-cookie-consent): migrate to tailwindcss

BREAKING CHANGE: - configure tailwindcss to display cookie consent properly
eisberg-labs · Jan 25, 2023 · e061f8b · e061f8b
1 parent 3c5399d
commit e061f8b
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 47 deletions.
diff --git a/packages/mui-next-cookie-consent/README.md b/packages/mui-next-cookie-consent/README.md
@@ -6,60 +6,60 @@
 
 ## Installation
 
-Since this is an extension of mui components, prerequisite is to have material library already installed.
+Prerequisites are:
 
-```bash
-npm i --save @mui/material
-```
+- @mui/base
+- tailwindcss configured
 
 ```bash
 npm i --save @eisberg-labs/mui-next-cookie-consent
 ```
 
 ## Usage
-Just import the template with defaults:  
+
+Just import the template with defaults:
 
 ```jsx
 <CookieConsent>This website uses cookies to enhance the user experience.</CookieConsent>
 ```
 
-I use it in a nextjs app like this:  
+I use it in a nextjs app like this:
 
 ```jsx
 
 const CookieConsent = dynamic(() => import('@eisberg-labs/mui-next-cookie-consent'), {suspense: true});
 
-export default function Layout({ children }) {
+export default function Layout({children}) {
   return (
     <>
-      <AppHeader />
+      <AppHeader/>
       <div className={styles.wrapper}>{children}</div>
       <Suspense><CookieConsent
         cookieOptions={{
           expires: moment().add(1, 'years').toDate()
         }}
         confirmText="I agree"
       >This website uses cookies to enhance the user experience.</CookieConsent></Suspense>
-      <Footer />
+      <Footer/>
     </>
   );
 }
 
 ```
+
 You can change the default styling, cookie key, set expires, register callback on Accept.
 
 ## Api
 
-| Name          | Type                            | Default                                            | Description                                   |
-|---------------|---------------------------------|----------------------------------------------------|-----------------------------------------------|
-| defaultName   | string                          | 'CookieConsent'                                    | Cookie key name for cookie consent            |
-| confirmText   | React.ReactNode                 | 'I understand'                                     | Confirm button text                           |
-| buttonVariant | 'text', 'outlined', 'contained' | 'text'                                             | Button variant                                |
-| cookieOptions | [CookieSerializeOptions](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/cookie/index.d.ts)      | e.g. `{expires: moment().add(1, 'days').toDate()}` |                                               |
-| onAccept      | ()=>void                        |                                                    | Optional function that triggers after cookie consent accepted. |
-| sx            | SxProps<Theme>                  |                                                    | Define styling of the cookie consent container                                              |
-| butttonSx     | SxProps<Theme>                  |                                                    | Define styling of the button.                                              |
-
+| Name          | Type                                                                                                             | Default                                            | Description                                                    |
+|---------------|------------------------------------------------------------------------------------------------------------------|----------------------------------------------------|----------------------------------------------------------------|
+| defaultName   | string                                                                                                           | 'CookieConsent'                                    | Cookie key name for cookie consent                             |
+| confirmText   | React.ReactNode                                                                                                  | 'I understand'                                     | Confirm button text                                            |
+| snackbarClassName | string                                                                                                           | 'fixed p-3 z-50 bottom-0'                          | snackbar class name                                            |
+| rootClassName| string| 'rounded-lg bg-white shadow-2xl p-3'               ||
+|buttonClassName | string | 'bg-white hover:bg-gray-100 text-gray-800 font-semibold py-2 px-4 border border-gray-400 rounded shadow'                                                   ||
+| cookieOptions | [CookieSerializeOptions](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/cookie/index.d.ts) | e.g. `{expires: moment().add(1, 'days').toDate()}` |                                                                |
+| onAccept      | ()=>void                                                                                                         |                                                    | Optional function that triggers after cookie consent accepted. |
 
 ## License
 

diff --git a/packages/mui-next-cookie-consent/package.json b/packages/mui-next-cookie-consent/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@eisberg-labs/mui-next-cookie-consent",
   "version": "3.1.0",
-  "description": "React Material Ui cookie consent dialog, compatible with nextjs cookies.",
+  "description": "React Material Ui cookie consent dialog, lightweight, compatible with nextjs cookies and tailwind css.",
   "keywords": [
     "react",
     "material-ui",
@@ -44,13 +44,13 @@
     "test": "jest -c ../../jest.config.js"
   },
   "devDependencies": {
-    "@mui/material": "^5.10.0",
+    "@mui/base": "^5.0.0-alpha.115",
     "cookies-next": "^2.1.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "peerDependencies": {
-    "@mui/material": "^5.10.0",
+    "@mui/base": "^5.0.0-alpha.115",
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0"
   },

diff --git a/packages/mui-next-cookie-consent/src/cookie-consent.tsx b/packages/mui-next-cookie-consent/src/cookie-consent.tsx
@@ -1,12 +1,8 @@
 import React, { startTransition, useEffect, useState } from 'react';
 import { setCookie, hasCookie } from 'cookies-next';
 
-import Button from '@mui/material/Button';
-import Paper from '@mui/material/Paper';
-import Snackbar from '@mui/material/Snackbar';
+import SnackbarUnstyled from '@mui/base/SnackbarUnstyled';
 import { CookieSerializeOptions } from 'cookie';
-import { SxProps } from '@mui/system';
-import { Theme } from '@mui/material/styles';
 
 export interface CookieConsentProps {
   /**
@@ -17,11 +13,6 @@ export interface CookieConsentProps {
    * Confirm button text
    */
   confirmText?: React.ReactNode;
-  /**
-   * Button variant. Default is text.
-   */
-  buttonVariant?: 'text' | 'outlined' | 'contained';
-
   /**
    * Cookie options, you can set expire here.
    */
@@ -30,27 +21,44 @@ export interface CookieConsentProps {
    * Optional function that triggers after cookie consent accepted.
    */
   onAccept?: () => void;
+  /**
+   * Set snackbarClassName
+   * @default "fixed p-3 z-50 bottom-0"
+   */
+  snackBarClassName?: string;
   /**
    * Define styling of the cookie consent container.
+   * @default "rounded-lg bg-white shadow-2xl p-3"
    */
-  sx?: SxProps<Theme>;
+  rootClassName?: string;
   /**
    * Define styling of the button.
+   * @default 'bg-white hover:bg-gray-100 text-gray-800 font-semibold py-2 px-4 border border-gray-400 rounded shadow'
    */
-  buttonSx?: SxProps<Theme>;
+  buttonClassName?: string;
 }
 
 const defaultProps: CookieConsentProps = {
-  sx: { background: 'white', p: 3 },
-  buttonSx: {},
+  rootClassName: 'rounded-lg bg-white shadow-2xl p-3',
+  snackBarClassName: 'fixed p-3 z-50 bottom-0',
+  buttonClassName:
+    'bg-white hover:bg-gray-100 text-gray-800 font-semibold py-2 px-4 border border-gray-400 rounded shadow',
   defaultName: 'CookieConsent',
   cookieOptions: undefined,
   confirmText: 'I understand',
-  buttonVariant: 'text',
 };
 export default function CookieConsent(props: React.PropsWithChildren<CookieConsentProps>) {
   const [visible, setVisible] = useState(false);
-  const { defaultName, cookieOptions, confirmText, sx, buttonSx, children, buttonVariant, onAccept } = {
+  const {
+    defaultName,
+    cookieOptions,
+    confirmText,
+    buttonClassName,
+    rootClassName,
+    children,
+    snackBarClassName,
+    onAccept,
+  } = {
     ...defaultProps,
     ...props,
   };
@@ -73,13 +81,13 @@ export default function CookieConsent(props: React.PropsWithChildren<CookieConse
   }
 
   return (
-    <Snackbar open={visible} onClose={handleAccept}>
-      <Paper id={defaultName} sx={sx} elevation={3}>
+    <SnackbarUnstyled open={visible} onClose={handleAccept} className={snackBarClassName}>
+      <div id={defaultName} className={rootClassName}>
         {children}&nbsp;
-        <Button variant={buttonVariant} aria-describedby={defaultName} sx={buttonSx} onClick={handleAccept}>
+        <button aria-describedby={defaultName} className={buttonClassName} onClick={handleAccept}>
           {confirmText}
-        </Button>
-      </Paper>
-    </Snackbar>
+        </button>
+      </div>
+    </SnackbarUnstyled>
   );
 }
diff --git a/packages/mui-next-cookie-consent/src/index.ts b/packages/mui-next-cookie-consent/src/index.ts
@@ -1,3 +1 @@
-import CookieConsent, { CookieConsentProps } from './cookie-consent';
-export { CookieConsentProps };
-export default CookieConsent;
+export { default, CookieConsentProps } from './cookie-consent';