pipesol-notificationbar 1.0.3-beta.2 → 1.0.5

package/README.md

@@ -1,30 +1,41 @@
-# Sobre
-
-  Este projeto é uma biblioteca React preparada para publicação no npm. 
-  Essa biblioteca contem componentes de barra de notificacao.
-  Abaixo está o passo a passo para publicar ou atualizar a lib.
-
-# Pré-requisitos
-
-    1. Conta no NPM
-        - Crie uma conta em: https://www.npmjs.com/signup
-
-    2. Node.js instalado
-        - Recomenda-se uma versão LTS. Verifique com: node -v
-        - Login no NPM pelo terminal: npm login
-          npm: pipeline-solucoes
-          senha:pipesollinecoes
-          key: pipeline@12345#
-
-# Como Publicar a biblioteca:
-
-  1. Instalar dependências: npm install
-
-  2. No package.json, altere o campo version de acordo com a semântica de versionamento.
-    1.0.1 – correção de bug
-    1.1.0 – nova funcionalidade compatível
-    2.0.0 – mudanças incompatíveis
-
-  3. Build da biblioteca: npm run build
-
-  4. Publicar no NPM: npm publish   
+# Sobre
+
+  Este projeto é uma biblioteca React preparada para publicação no npm. 
+  Essa biblioteca contem componentes de notificacao.
+
+  - TermsAndPrivacyCard: Componente que renderiza um card flutuante (fixed) para consentimento de cookies
+  - TermsAndPrivacyBar: Componente que renderiza uma barra flutuante (fixed) para consentimento de cookies
+  
+  Abaixo está o passo a passo para publicar ou atualizar a lib.
+
+# Pré-requisitos
+
+    1. Node.js instalado
+        - Recomenda-se uma versão LTS. Verifique com: node -v        
+
+# Como Publicar a biblioteca:
+
+  1. Instalar dependências: npm install
+
+  2. No package.json, altere o campo version de acordo com a semântica de versionamento.
+    1.0.1 – correção de bug
+    1.1.0 – nova funcionalidade compatível
+    2.0.0 – mudanças incompatíveis
+
+    - para publicar versão beta: "1.0.0-beta.x"
+
+  3. Este pacote é publicado exclusivamente via CI/CD (GitHub Actions).
+
+    - Releases são disparados apenas por tags Git (vX.Y.Z)
+    - Publicações manuais (npm publish) são desabilitadas
+    - A autenticação no npm utiliza Trusted Publishing (OIDC)
+    - Nenhum token npm é armazenado ou utilizado
+    - Tokens de publicação estão explicitamente desabilitados
+    - Autenticação em dois fatores (2FA) é obrigatória
+    - Versionamento segue Semantic Versioning (SemVer)
+
+    Esse modelo garante publicações seguras, rastreáveis e reprodutíveis. 
+
+# Comando:
+
+  1. npm view pipesol-notificationbar versions --json - verifica todas as versões publicadas no npm.  

package/dist/components/TermsAndPrivacyCard.d.ts

@@ -0,0 +1,52 @@
+import { TermsAndPrivacyProps } from '../types/TermsAndPrivacyProps';
+/**
+ * Componente que renderiza um card flutuante (fixed) para consentimento de cookies,
+ * exibindo links para **Termos de Uso** e **Política de Privacidade** e dois botões:
+ * **Cancelar** (define cookieConsent como "false") e **Ok** (define cookieConsent como "true").
+ *
+ * O card é exibido somente quando o cookie `cookieConsent` ainda **não** foi definido como "true" ou "false".
+ * Ao clicar em "Ok" ou "Cancelar", o cookie é persistido por 1 ano e o card é ocultado.
+ *
+ * @param {string} url_termo_uso URL para a página de Termos de Uso. Obrigatório.
+ * @param {string} url_politica_privacidade URL para a página de Política de Privacidade. Obrigatório.
+ * @param {string} [background_color='transparent'] Cor de fundo do container do card.
+ * @param {string} [color='#000000'] Cor do texto principal.
+ * @param {string} [background_color_button_ok='transparent'] Cor de fundo do botão "Ok".
+ * @param {string} [color_button_ok='#000000'] Cor do texto do botão "Ok".
+ * @param {string} [background_color_button_cancel='transparent'] Cor de fundo do botão "Cancelar".
+ * @param {string} [color_button_cancel='#000000'] Cor do texto do botão "Cancelar".
+ * @param {string} [background_color_link='transparent'] Cor de fundo dos links ("Termos de Uso" e "Política de Privacidade").
+ * @param {string} [color_link='#000000'] Cor do texto dos links.
+ * @param {string} [background_color_hover_link='transparent'] Cor de fundo dos links no hover.
+ * @param {string} [color_hover_link='#000000'] Cor do texto dos links no hover (e também da borda inferior).
+ * @param {import('@mui/material').TypographyProps['variant']} [variantTexto='caption'] Variant do texto principal (Typography).
+ * @param {import('@mui/material').TypographyProps['variant']} [variantButton='caption'] Variant do texto dentro dos botões (Typography).
+ *
+ * @example
+ * ```tsx
+ * import { TermsAndPrivacyCard } from '@/components/TermsAndPrivacyCard';
+ *
+ * export default function Example() {
+ *   return (
+ *     <TermsAndPrivacyCard
+ *       url_termo_uso="/termos"
+ *       url_politica_privacidade="/privacidade"
+ *       background_color="#ffffff"
+ *       color="#111111"
+ *       background_color_button_cancel="#f5f5f5"
+ *       color_button_cancel="#111111"
+ *       background_color_button_ok="#1976d2"
+ *       color_button_ok="#ffffff"
+ *       background_color_link="transparent"
+ *       color_link="#1976d2"
+ *       background_color_hover_link="transparent"
+ *       color_hover_link="#0d47a1"
+ *       variantTexto="body2"
+ *       variantButton="button"
+ *     />
+ *   );
+ * }
+ * ```
+ */
+declare const TermsAndPrivacyCard: React.FC<TermsAndPrivacyProps>;
+export default TermsAndPrivacyCard;

package/dist/components/TermsAndPrivacyCard.js

@@ -0,0 +1,144 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { Box, styled, Typography } from '@mui/material';
+import { parseCookies, setCookie } from 'nookies';
+const Container = styled('div', {
+    shouldForwardProp: (prop) => ![
+        'background_color',
+        'show'
+    ].includes(prop)
+})(({ show, background_color }) => ({
+    position: 'fixed',
+    bottom: '75px',
+    right: '75px',
+    left: 'auto',
+    backgroundColor: background_color,
+    display: show ? 'block' : 'none',
+    zIndex: 4000,
+    maxWidth: '280px',
+    height: 'fit-content',
+    boxSizing: 'border-box',
+}));
+const Content = styled('div')({
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: '24px',
+    width: '100%',
+    boxSizing: 'border-box',
+});
+const BotaoNotificationBar = styled('button', {
+    shouldForwardProp: (prop) => ![
+        'background_color',
+        'color',
+    ].includes(prop),
+})(({ theme, background_color, color }) => ({
+    backgroundColor: background_color,
+    color: color,
+    padding: '8px 24px',
+    border: 'none',
+    cursor: 'pointer',
+    margin: '0 0 0 20px',
+    borderRadius: theme.shape.borderRadius,
+}));
+const LinkStyled = styled('a', {
+    shouldForwardProp: (prop) => ![
+        'background_color',
+        'background_color_hover',
+        'color',
+        'color_hover'
+    ].includes(prop),
+})(({ background_color, background_color_hover, color, color_hover, }) => ({
+    width: 'auto',
+    cursor: 'pointer',
+    textDecoration: 'none',
+    textTransform: 'none',
+    textAlign: 'center',
+    boxShadow: 'none',
+    backgroundColor: background_color,
+    color: color,
+    padding: '0',
+    margin: '0',
+    '&:hover': {
+        backgroundColor: background_color_hover,
+        borderBottom: `1px solid ${color_hover}`,
+        color: color_hover,
+    },
+}));
+/**
+ * Componente que renderiza um card flutuante (fixed) para consentimento de cookies,
+ * exibindo links para **Termos de Uso** e **Política de Privacidade** e dois botões:
+ * **Cancelar** (define cookieConsent como "false") e **Ok** (define cookieConsent como "true").
+ *
+ * O card é exibido somente quando o cookie `cookieConsent` ainda **não** foi definido como "true" ou "false".
+ * Ao clicar em "Ok" ou "Cancelar", o cookie é persistido por 1 ano e o card é ocultado.
+ *
+ * @param {string} url_termo_uso URL para a página de Termos de Uso. Obrigatório.
+ * @param {string} url_politica_privacidade URL para a página de Política de Privacidade. Obrigatório.
+ * @param {string} [background_color='transparent'] Cor de fundo do container do card.
+ * @param {string} [color='#000000'] Cor do texto principal.
+ * @param {string} [background_color_button_ok='transparent'] Cor de fundo do botão "Ok".
+ * @param {string} [color_button_ok='#000000'] Cor do texto do botão "Ok".
+ * @param {string} [background_color_button_cancel='transparent'] Cor de fundo do botão "Cancelar".
+ * @param {string} [color_button_cancel='#000000'] Cor do texto do botão "Cancelar".
+ * @param {string} [background_color_link='transparent'] Cor de fundo dos links ("Termos de Uso" e "Política de Privacidade").
+ * @param {string} [color_link='#000000'] Cor do texto dos links.
+ * @param {string} [background_color_hover_link='transparent'] Cor de fundo dos links no hover.
+ * @param {string} [color_hover_link='#000000'] Cor do texto dos links no hover (e também da borda inferior).
+ * @param {import('@mui/material').TypographyProps['variant']} [variantTexto='caption'] Variant do texto principal (Typography).
+ * @param {import('@mui/material').TypographyProps['variant']} [variantButton='caption'] Variant do texto dentro dos botões (Typography).
+ *
+ * @example
+ * ```tsx
+ * import { TermsAndPrivacyCard } from '@/components/TermsAndPrivacyCard';
+ *
+ * export default function Example() {
+ *   return (
+ *     <TermsAndPrivacyCard
+ *       url_termo_uso="/termos"
+ *       url_politica_privacidade="/privacidade"
+ *       background_color="#ffffff"
+ *       color="#111111"
+ *       background_color_button_cancel="#f5f5f5"
+ *       color_button_cancel="#111111"
+ *       background_color_button_ok="#1976d2"
+ *       color_button_ok="#ffffff"
+ *       background_color_link="transparent"
+ *       color_link="#1976d2"
+ *       background_color_hover_link="transparent"
+ *       color_hover_link="#0d47a1"
+ *       variantTexto="body2"
+ *       variantButton="button"
+ *     />
+ *   );
+ * }
+ * ```
+ */
+const TermsAndPrivacyCard = (props) => {
+    const { url_termo_uso, url_politica_privacidade, background_color = 'transparent', color = "#000000", background_color_button_ok = 'transparent', color_button_ok = "#000000", background_color_button_cancel = 'transparent', color_button_cancel = "#000000", background_color_link = 'transparent', color_link = "#000000", background_color_hover_link = 'transparent', color_hover_link = "#000000", variantTexto = 'caption', variantButton = 'caption' } = props;
+    const [showNotification, setShowNotification] = useState(false);
+    useEffect(() => {
+        const cookies = parseCookies();
+        const consent = cookies.cookieConsent !== 'true' && cookies.cookieConsent !== 'false';
+        setShowNotification(consent);
+    }, []);
+    const handleAccept = () => {
+        setCookie(null, 'cookieConsent', 'true', {
+            maxAge: 60 * 60 * 24 * 365,
+            path: '/',
+        });
+        setShowNotification(false);
+    };
+    const handleReject = () => {
+        setCookie(null, 'cookieConsent', 'false', {
+            maxAge: 60 * 60 * 24 * 365,
+            path: '/',
+        });
+        setShowNotification(false);
+    };
+    return (_jsx(Container, { show: showNotification, background_color: background_color, children: _jsxs(Content, { children: [_jsxs(Typography, { component: "div", variant: variantTexto, color: color, sx: { width: '100%' }, children: ["Este site usa cookies e dados pessoais de acordo com os nossos", ' ', _jsx(LinkStyled, { href: url_termo_uso, background_color: background_color_link, background_color_hover: background_color_hover_link, color: color_link, color_hover: color_hover_link, children: "Termos de Uso" }), " e", ' ', _jsx(LinkStyled, { href: url_politica_privacidade, background_color: background_color_link, background_color_hover: background_color_hover_link, color: color_link, color_hover: color_hover_link, children: "Pol\u00EDtica de Privacidade" }), ". Ao continuar navegando neste site, voc\u00EA declara estar ciente dessas condi\u00E7\u00F5es."] }), _jsxs(Box, { display: "flex", flexDirection: "row", alignItems: "center", justifyContent: "center", sx: { padding: '16px' }, children: [_jsx(BotaoNotificationBar, { background_color: background_color_button_cancel, color: color_button_cancel, onClick: handleReject, children: _jsx(Typography, { variant: variantButton, component: "span", children: "Cancelar" }) }), _jsx(BotaoNotificationBar, { background_color: background_color_button_ok, color: color_button_ok, onClick: handleAccept, children: _jsx(Typography, { variant: variantButton, component: "span", children: "Ok" }) })] })] }) }));
+};
+export default TermsAndPrivacyCard;
+//# sourceMappingURL=TermsAndPrivacyCard.js.map

package/dist/components/TermsAndPrivacyCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TermsAndPrivacyCard.js","sourceRoot":"","sources":["../../src/components/TermsAndPrivacyCard.tsx"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -1 +1,2 @@
 export { default as TermsAndPrivacyBar } from './components/TermsAndPrivacyBar';
+export { default as TermsAndPrivacyCard } from './components/TermsAndPrivacyCard';

package/dist/index.js

@@ -1,2 +1,3 @@
 export { default as TermsAndPrivacyBar } from './components/TermsAndPrivacyBar';
+export { default as TermsAndPrivacyCard } from './components/TermsAndPrivacyCard';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAC,MAAM,iCAAiC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAC,MAAM,iCAAiC,CAAC;AAC/E,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAC,MAAM,kCAAkC,CAAC"}