@s_mart/nps 3.0.0

package/dist/index.d.ts

@@ -0,0 +1,53 @@
+import { CSSProperties, FC } from 'react';
+import { z } from 'zod';
+
+declare const schema: z.ZodObject<{
+    nota: z.ZodNumber;
+    feedback: z.ZodOptional<z.ZodString>;
+    autorizoPublicacao: z.ZodBoolean;
+}, "strip", z.ZodTypeAny, {
+    nota: number;
+    autorizoPublicacao: boolean;
+    feedback?: string | undefined;
+}, {
+    nota: number;
+    autorizoPublicacao: boolean;
+    feedback?: string | undefined;
+}>;
+type FormValues = z.infer<typeof schema>;
+
+interface NPSProps {
+    sistemaNome: string;
+    /**
+     * Determina se o backdrop aparecerá no fundo
+     */
+    mostrarBackdrop?: boolean;
+    /**
+     * Determina se o componente irá fechar quando o usuário clicar fora do paper
+     *
+     * Funciona apenas se `mostrarBackdrop` for true
+     */
+    shouldCloseOnBackdropClick?: boolean;
+    /**
+     * Style aplicado no paper do componente. Pode ser usado para alterar a posição do componente
+     */
+    paperStyle?: CSSProperties;
+    onClose: () => void;
+    /**
+     * Callback chamada quando o usuário clica no botão de uma nota.
+     */
+    onSelecionarNota?: (nota?: number) => void;
+    /**
+     * Callback chamada quando o usuário clica no botão
+     * "Enviar" após selecionar uma nota.
+     */
+    onEnviarNota?: (nota?: number) => void;
+    /**
+     * Callback chamada quando todo o formulário é finalizado.
+     */
+    onFinalizar: (values: FormValues) => void;
+}
+
+declare const NPS: FC<NPSProps>;
+
+export { NPS, NPSProps };

package/dist/index.js

@@ -0,0 +1,21 @@
+"use strict";var U=Object.create;var y=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var H=Object.getOwnPropertyNames,h=Object.getOwnPropertySymbols,L=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty,O=Object.prototype.propertyIsEnumerable;var k=(o,e)=>{var t={};for(var r in o)g.call(o,r)&&e.indexOf(r)<0&&(t[r]=o[r]);if(o!=null&&h)for(var r of h(o))e.indexOf(r)<0&&O.call(o,r)&&(t[r]=o[r]);return t};var _=(o,e)=>{for(var t in e)y(o,t,{get:e[t],enumerable:!0})},S=(o,e,t,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let p of H(e))!g.call(o,p)&&p!==t&&y(o,p,{get:()=>e[p],enumerable:!(r=E(e,p))||r.enumerable});return o};var G=(o,e,t)=>(t=o!=null?U(L(o)):{},S(e||!o||!o.__esModule?y(t,"default",{value:o,enumerable:!0}):t,o)),J=o=>S(y({},"__esModule",{value:!0}),o);var to={};_(to,{NPS:()=>j});module.exports=J(to);var s=require("@s_mart/core"),b=require("@s_mart/form"),X=require("@s_mart/regular-icons");var c=require("@s_mart/core"),C=require("@s_mart/hooks"),v=require("@s_mart/tokens"),F=require("react-hook-form"),i=require("react/jsx-runtime"),K=({onSelecionarNota:o})=>{let{watch:e,setValue:t}=(0,F.useFormContext)(),r=(0,C.useMediaQuery)("(max-width: 500px)"),p=e("nota"),n=d=>{p!==d&&(t("nota",d),o==null||o(d))},m=(0,i.jsx)(c.Typography,{variant:"bodyXS",color:v.colorPalette.neutral[100],children:"Pouco prov\xE1vel"});return(0,i.jsxs)(i.Fragment,{children:[r&&(0,i.jsx)("div",{style:{marginBottom:"0.5rem"},children:m}),(0,i.jsx)("div",{style:{display:"flex",gap:"0.3rem",flexWrap:"wrap",justifyContent:"center"},children:Array(11).fill(void 0).map((d,l)=>(0,i.jsx)(c.Button,{variant:p===l?"contained":"outlined",style:{minWidth:"3rem"},onClick:()=>n(l),children:l},l))}),(0,i.jsxs)("div",{style:{display:"flex",justifyContent:"space-between",marginTop:"0.5rem"},children:[(0,i.jsx)("span",{children:!r&&m}),(0,i.jsx)(c.Typography,{variant:"bodyXS",color:v.colorPalette.neutral[100],children:"Muito prov\xE1vel"})]})]})},N=K;var w=require("@s_mart/form"),T=require("react/jsx-runtime"),Y=({tipo:o,sistemaNome:e})=>(0,T.jsx)(w.TextField,{name:"feedback",placeholder:o==="promotor"?`Para mim o ${e} \xE9...`:"Eu acho que...",multiline:!0,size:"large",minRows:2}),z=Y;var B=G(require("@emotion/styled")),$=require("@s_mart/tokens"),A=B.default.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+
+  padding: 1.5rem;
+  border-radius: 0.375rem;
+  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
+  border: 1px solid ${({theme:o})=>{var e;return(e=o.palette.primary)==null?void 0:e.main}};
+  background: ${$.colorPalette.neutral[0]};
+
+  position: absolute;
+  bottom: 1.5rem;
+  right: 1.75rem;
+  z-index: 1001;
+
+  @media (max-width: 650px) {
+    right: 1.25rem;
+    left: 1.25rem;
+  }
+`;var V=require("react"),D=require("@s_mart/hooks"),Z=({onEnviarNota:o})=>{let[e,t]=(0,V.useState)("selecionarNota"),r=(0,D.useNotification)();return{step:e,handleEnviar:(n,m)=>{e==="selecionarNota"?(o==null||o(n),n>=9?t("feedbackPromotor"):t("feedbackDetrator")):(m(),r.setNotification({variant:"success",title:"Avalia\xE7\xE3o enviada",message:"Agradecemos muito pela sua avalia\xE7\xE3o.",autoHideDuration:5e3}))}}},M=Z;var f=require("zod"),oo=f.z.object({nota:f.z.number(),feedback:f.z.string().optional(),autorizoPublicacao:f.z.coerce.boolean()}),W=oo;var a=require("react/jsx-runtime"),eo=l=>{var x=l,{onFinalizar:o,mostrarBackdrop:e,sistemaNome:t,onClose:r,shouldCloseOnBackdropClick:p,onSelecionarNota:n,paperStyle:m}=x,d=k(x,["onFinalizar","mostrarBackdrop","sistemaNome","onClose","shouldCloseOnBackdropClick","onSelecionarNota","paperStyle"]);let{step:u,handleEnviar:q}=M(d),I={selecionarNota:`Qual a probabilidade de voc\xEA recomendar o ${t}?`,feedbackDetrator:`Como podemos melhorar a sua experi\xEAncia no ${t}?`,feedbackPromotor:`O que voc\xEA mais gosta no ${t}?`};return(0,a.jsx)(b.Form,{onSubmit:o,schema:W,children:({watch:Q,onSubmit:R})=>{let P=Q("nota");return(0,a.jsxs)(a.Fragment,{children:[!!e&&(0,a.jsx)(s.Backdrop,{open:!0,onClick:p?r:void 0,style:{zIndex:1e3}}),(0,a.jsxs)(A,{style:m,children:[(0,a.jsxs)("div",{style:{display:"flex",justifyContent:"space-between"},children:[(0,a.jsx)(s.Typography,{variant:"titleSM",children:I[u]}),(0,a.jsx)(s.LIcon,{icon:X.lineTimes,size:"25px",onClick:r,style:{cursor:"pointer"}})]}),(0,a.jsx)("div",{children:u==="selecionarNota"?(0,a.jsx)(N,{onSelecionarNota:n}):(0,a.jsx)(z,{tipo:u==="feedbackPromotor"?"promotor":"detrator",sistemaNome:t})}),(0,a.jsxs)("div",{style:{display:"flex",justifyContent:"space-between"},children:[(0,a.jsx)("div",{children:u==="feedbackPromotor"&&(0,a.jsx)(b.Checkbox,{name:"autorizoPublicacao",label:(0,a.jsxs)(s.Typography,{variant:"bodyXS",children:["Autorizo a publica\xE7\xE3o deste coment\xE1rio no site e em redes sociais do ",t]})})}),(0,a.jsx)(s.Button,{disabled:P===void 0,onClick:()=>q(P,R),children:"Enviar"})]})]})]})}})},j=eo;0&&(module.exports={NPS});

package/dist/index.mjs

@@ -0,0 +1,21 @@
+var b=Object.getOwnPropertySymbols;var $=Object.prototype.hasOwnProperty,A=Object.prototype.propertyIsEnumerable;var v=(o,t)=>{var r={};for(var e in o)$.call(o,e)&&t.indexOf(e)<0&&(r[e]=o[e]);if(o!=null&&b)for(var e of b(o))t.indexOf(e)<0&&A.call(o,e)&&(r[e]=o[e]);return r};import{Backdrop as O,Button as _,LIcon as G,Typography as N}from"@s_mart/core";import{Checkbox as J,Form as K}from"@s_mart/form";import{lineTimes as Y}from"@s_mart/regular-icons";import{Button as V,Typography as x}from"@s_mart/core";import{useMediaQuery as D}from"@s_mart/hooks";import{colorPalette as P}from"@s_mart/tokens";import{useFormContext as M}from"react-hook-form";import{Fragment as X,jsx as n,jsxs as h}from"react/jsx-runtime";var W=({onSelecionarNota:o})=>{let{watch:t,setValue:r}=M(),e=D("(max-width: 500px)"),m=t("nota"),i=s=>{m!==s&&(r("nota",s),o==null||o(s))},p=n(x,{variant:"bodyXS",color:P.neutral[100],children:"Pouco prov\xE1vel"});return h(X,{children:[e&&n("div",{style:{marginBottom:"0.5rem"},children:p}),n("div",{style:{display:"flex",gap:"0.3rem",flexWrap:"wrap",justifyContent:"center"},children:Array(11).fill(void 0).map((s,d)=>n(V,{variant:m===d?"contained":"outlined",style:{minWidth:"3rem"},onClick:()=>i(d),children:d},d))}),h("div",{style:{display:"flex",justifyContent:"space-between",marginTop:"0.5rem"},children:[n("span",{children:!e&&p}),n(x,{variant:"bodyXS",color:P.neutral[100],children:"Muito prov\xE1vel"})]})]})},g=W;import{TextField as j}from"@s_mart/form";import{jsx as I}from"react/jsx-runtime";var q=({tipo:o,sistemaNome:t})=>I(j,{name:"feedback",placeholder:o==="promotor"?`Para mim o ${t} \xE9...`:"Eu acho que...",multiline:!0,size:"large",minRows:2}),k=q;import Q from"@emotion/styled";import{colorPalette as R}from"@s_mart/tokens";var S=Q.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+
+  padding: 1.5rem;
+  border-radius: 0.375rem;
+  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
+  border: 1px solid ${({theme:o})=>{var t;return(t=o.palette.primary)==null?void 0:t.main}};
+  background: ${R.neutral[0]};
+
+  position: absolute;
+  bottom: 1.5rem;
+  right: 1.75rem;
+  z-index: 1001;
+
+  @media (max-width: 650px) {
+    right: 1.25rem;
+    left: 1.25rem;
+  }
+`;import{useState as U}from"react";import{useNotification as E}from"@s_mart/hooks";var H=({onEnviarNota:o})=>{let[t,r]=U("selecionarNota"),e=E();return{step:t,handleEnviar:(i,p)=>{t==="selecionarNota"?(o==null||o(i),i>=9?r("feedbackPromotor"):r("feedbackDetrator")):(p(),e.setNotification({variant:"success",title:"Avalia\xE7\xE3o enviada",message:"Agradecemos muito pela sua avalia\xE7\xE3o.",autoHideDuration:5e3}))}}},C=H;import{z as f}from"zod";var L=f.object({nota:f.number(),feedback:f.string().optional(),autorizoPublicacao:f.coerce.boolean()}),F=L;import{Fragment as eo,jsx as a,jsxs as l}from"react/jsx-runtime";var Z=d=>{var u=d,{onFinalizar:o,mostrarBackdrop:t,sistemaNome:r,onClose:e,shouldCloseOnBackdropClick:m,onSelecionarNota:i,paperStyle:p}=u,s=v(u,["onFinalizar","mostrarBackdrop","sistemaNome","onClose","shouldCloseOnBackdropClick","onSelecionarNota","paperStyle"]);let{step:c,handleEnviar:w}=C(s),z={selecionarNota:`Qual a probabilidade de voc\xEA recomendar o ${r}?`,feedbackDetrator:`Como podemos melhorar a sua experi\xEAncia no ${r}?`,feedbackPromotor:`O que voc\xEA mais gosta no ${r}?`};return a(K,{onSubmit:o,schema:F,children:({watch:T,onSubmit:B})=>{let y=T("nota");return l(eo,{children:[!!t&&a(O,{open:!0,onClick:m?e:void 0,style:{zIndex:1e3}}),l(S,{style:p,children:[l("div",{style:{display:"flex",justifyContent:"space-between"},children:[a(N,{variant:"titleSM",children:z[c]}),a(G,{icon:Y,size:"25px",onClick:e,style:{cursor:"pointer"}})]}),a("div",{children:c==="selecionarNota"?a(g,{onSelecionarNota:i}):a(k,{tipo:c==="feedbackPromotor"?"promotor":"detrator",sistemaNome:r})}),l("div",{style:{display:"flex",justifyContent:"space-between"},children:[a("div",{children:c==="feedbackPromotor"&&a(J,{name:"autorizoPublicacao",label:l(N,{variant:"bodyXS",children:["Autorizo a publica\xE7\xE3o deste coment\xE1rio no site e em redes sociais do ",r]})})}),a(_,{disabled:y===void 0,onClick:()=>w(y,B),children:"Enviar"})]})]})]})}})},oo=Z;export{oo as NPS};

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@s_mart/nps",
+  "version": "3.0.0",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "sideEffects": false,
+  "license": "MIT",
+  "files": [
+    "dist/**"
+  ],
+  "scripts": {
+    "build": "tsup src/index.tsx --minify --format esm,cjs --dts --external react",
+    "dev": "tsup src/index.tsx --format esm,cjs --watch --dts --external react",
+    "lint": "eslint src/**/*.ts* --fix"
+  },
+  "dependencies": {
+    "tsup": "^6.7.0",
+    "typescript": "^5.0.4",
+    "@types/react": "18.2.5",
+    "@types/react-dom": "18.2.4",
+    "@s_mart/core": "*",
+    "@s_mart/form": "*",
+    "@s_mart/hooks": "*",
+    "@s_mart/tokens": "*",
+    "@s_mart/regular-icons": "*"
+  },
+  "peerDependencies": {
+    "react": ">=18.2.0",
+    "react-dom": ">=18.2.0",
+    "react-hook-form": ">=7.36.1",
+    "@types/react": ">=18.2.5",
+    "@types/react-dom": ">=18.2.4",
+    "@emotion/react": ">=11.10.8",
+    "@emotion/styled": ">=11.10.8",
+    "@s_mart/core": "*",
+    "@s_mart/form": "*",
+    "@s_mart/hooks": "*",
+    "@s_mart/regular-icons": "*",
+    "@s_mart/tokens": "*",
+    "notistack": ">=2.0.0",
+    "zod": ">=3.21.4"
+  },
+  "devDependencies": {
+    "@s_mart/eslint": "*",
+    "@s_mart/tsconfig": "*",
+    "@s_mart/typed": "*",
+    "eslint": "^8.32.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}