Noisy Pneumatic Mnemonic

    @stardust-ds/react
    TypeScript icon, indicating that this package has built-in type declarations

    0.4.14 • Public • Published

    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.

    • Instalação da lib:

      yarn add @stardust-ds/react
      # ou
      npm add @stardust-ds/react
    • 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.

      • 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=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
          rel="stylesheet"
        />
    • 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>
        );
      };

    Utilizando os componentes

      import { ThemeProvider, Button } from '@stardust-ds/react';
    
      const App = () => (
        <ThemeProvider>
          <Button onClick={() => console.log("Stardust button"!)}>
            Stardust
          </Button>
        </ThemeProvider>
      );

    Customizando o tema

    Nossa biblioteca tem a possibilidade de sobrescrever os estilos definidos por padrão, usados no nosso Design System.

    Para isso, utilize a função extendTheme() para inserir as propriedades do seu tema, ou sobrescrever as já existentes, como por exemplo:

    import { ThemeProvider, extendTheme } from '@stardust-ds/react';
    
    const theme = {
      color: {
        primary: {
          pure: 'red',
        },
        ubistart: 'blue',
      },
    };
    
    const customTheme = extendTheme(theme);
    
    const App = () => (
      <ThemeProvider theme={customTheme}>
        <Page />
      </ThemeProvider>
    );

    Após essa definição, já estará disponível para utilização a propriedade theme.brand.color.ubistart, assim como a cor principal foi alterada.

    Para acessar essa propriedade temos que invocar o nosso custom hook de tema e utilizar a propriedade theme dele.

    Adicionando tipagem

    Se estiver utilizando Typescript (altamente recomendado), para que seu projeto identifique as propriedades sobrescritas no tema, deve-se criar um arquivo de tipos para sobrescrever a tipagem da biblioteca também.

    Para que isso seja possível, você deve:

    • Criar um arquivo de definição do typescript, por exemplo: stardust-ds.d.ts

    • Sobrescrever o tema da seguinte maneira:

      import { customTheme } from './App'; // lembre de exportar essa informação no seu App ou onde quer que tenha definido ela e importe aqui
    
      type Theme = typeof customTheme;
    
      declare module '@stardust-ds/react' {
        export interface StardustTheme extends Theme {}
        export function useTheme(): StardustTheme;
      }
    • Caso esteja utilizando o styled components, deve fazer a etapa a seguir para que o DefaultTheme seja sobrescrito:
      ...
    
      import { StardustTheme } from '@stardust-ds/react'
    
      ...
    
      declare module 'styled-components' {
        export interface DefaultTheme extends StardustTheme {}
      }

    Keywords

    none

    Install

    npm i @stardust-ds/react

    DownloadsWeekly Downloads

    11

    Version

    0.4.14

    License

    MIT

    Unpacked Size

    433 kB

    Total Files

    366

    Last publish

    Collaborators

    • gabriel.pedro
    • cleber.ferreira
    • luciel.santos.ubi
    • econte