@ecotrace-designsystem/react NPM

@ecotrace-designsystem/react

Design system criado da empresa EcoTrace

Instalação

# NPM
npm i @ecotrace-designsystem/react

# Yarn
yarn add @ecotrace-designsystem/react

Inicialização

Para surtir efeito a estilização CSS, será necessário adicionar o arquivo master de css.

Adicione a globalmente a estilização CSS, assim todas as páginas e componentes não terão problemas de perda de estilização

import "@ecotrace-designsystem/react/dist/index.css";

NextJS

// src/app/layout.tsx

import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import "@ecotrace-designsystem/react/dist/index.css"; // 👈 Adicione essa linha

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  //... sua meta tag
};

type RootLayoutProps = {
  readonly children: React.ReactNode;
};

export default function RootLayout({ children }: RootLayoutProps) {
  return (
    <html lang="en">
      <body className={inter.className}>{children}</body>
    </html>
  );
}

React Vite

// src/main.tsx

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.tsx";
import "./index.css";
import "@ecotrace-designsystem/react/dist/index.css"; // 👈 Adicione essa linha

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Adicional (Troubleshooting)

Para demais informações sobre a importação do CSS como PostCSS, verifique o site do Tailwind build-time-imports

Utilização

Importação dos componentes

// page.tsx

import { Button } from "@ecotrace-designsystem/react"; // 👈 Root

export default function Home() {
  return (
    <main className="grid h-screen w-screen place-items-center bg-zinc-200">
      <Button shape="rounded">Hello!</Button>
    </main>
  );
}

Sobrescrevendo CSS

// page.tsx

import { Button } from "@ecotrace-designsystem/react";

export default function Home() {
  return (
    <main className="grid h-screen w-screen place-items-center bg-zinc-200">
      <Button
        className="bg-emerald-500 hover:bg-emerald-700 transition-colors delay-300" // 👈 Adicione a sua estilização dentro do className, seguindo os padrões do Tailwind
        shape="rounded"
      >
        Hello!
      </Button>
    </main>
  );
}