dentaluni-onboarding
v0.1.3
Published
Componentes React/Next para onboarding da Dental Uni
Downloads
357
Readme
dentaluni-onboarding
Componentes React/Next para o onboarding da Dental Uni.
Instalação local
npm install ./dentaluni-onboarding-0.1.1.tgzUso em um app Next
Importe os estilos globais uma vez no layout raiz:
import "dentaluni-onboarding/styles.css";Use os componentes nas telas em que o onboarding deve aparecer:
import { FirstAccessModal } from "dentaluni-onboarding";
export function Onboarding() {
return <FirstAccessModal />;
}Se o app consumidor usa Next, adicione o pacote em transpilePackages e libere as imagens do YouTube:
import type { NextConfig } from "next";
const nextConfig: NextConfig = {
transpilePackages: ["dentaluni-onboarding"],
images: {
remotePatterns: [
{
protocol: "https",
hostname: "img.youtube.com",
},
],
},
};
export default nextConfig;Copie os assets do pacote para o public do app consumidor mantendo estes nomes:
LOGO BRANCO.pngpainel-bg.png
Se o Tailwind do app consumidor não gerar classes usadas pelo pacote, adicione a origem do pacote no CSS global do app:
@source "../../node_modules/dentaluni-onboarding/src";Para manter a tipografia esperada, carregue Inter e Lato no layout raiz do app consumidor e exponha as variáveis --font-inter e --font-lato. O CSS do pacote usa fallbacks caso essas variáveis não existam.
import { Inter, Lato } from "next/font/google";
const inter = Inter({ subsets: ["latin"], variable: "--font-inter" });
const lato = Lato({
subsets: ["latin"],
variable: "--font-lato",
weight: ["400", "700", "900"],
});
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="pt-BR" className={`${inter.variable} ${lato.variable}`}>
<body>{children}</body>
</html>
);
}Gerar pacote
npm run typecheck
npm run build
npm run pack:localO comando pack:local gera um arquivo .tgz instalável via npm.