luciel-stardust-test v0.0.6

Stardust - React

Seja bem vindo a biblioteca de UI para React desenvolvido pelo time da Ubistart!

Essa biblioteca foi desenvolvida para agilizar o processo de criação de aplicativos em React e extrair o máximo de complexidade do lado do desenvolvedor para que o processo seja mais ágil.

Como utilizar?

Nossa biblioteca precisa de algumas configurações para que o padrão do Design System funcione corretamente.

• Adicionar tipografia: Usamos uma fonte padrão, então para fazer uso desta, você precisará adicionar a importação da fonte em public/index.html. O tema Stardust aplicará estas fontes automaticamente estas fontes.

  • Importação:

      <link rel="preconnect" href="https://fonts.googleapis.com">
      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
      <link href="https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap" rel="stylesheet">

• Instalação da lib:

  yarn add @stardust-ds/react
  # ou
  npm add @stardust-ds/react

• Configuração do tema: Após, é somente englobar a aplicação com o Provider do tema:

  // App.tsx
  
  import { ThemeProvider } from '@stardust-ds/react';
  import Page from 'path/to/page';
  
  const App = () => {
    return (
      <ThemeProvider>
        <Page />
      </ThemeProvider>
    );
  };

Alterar fonte padrão

Para alterar a fonte padrão do DS, é apenas necessário sobrescrever o tema da seguinte maneira:

// App.tsx

import { ThemeProvider, extendTheme } from '@stardust-ds/react';
import Page from 'path/to/page';

const customTheme = extendTheme({
  fontFamily: "'Roboto', sans-serif"
})

const App = () => {
  return (
    <ThemeProvider>
      <Page />
    </ThemeProvider>
  );
};

Após, é apenas fazer a importação na nova fonte em public/index.html.

Utilizando os componentes

// TODO