npm package: @stardust-ds/react
Description: Stardust Design System to ReactJS developed by Ubistart
Author: Gabriel Alcântara Bernardes
Latest version: 0.8.143

# 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:**

  ```bash
  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:
    ```html
    <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:

  ```js
  // App.tsx

  import { ThemeProvider } from '@stardust-ds/react';
  import Page from 'path/to/page';

  const App = () => {
    return (
      <ThemeProvider>
        <Page />
      </ThemeProvider>
    );
  };
  ```

## Utilizando os componentes

```js
  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:

```js
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:

```js
  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:

```js
  ...

  import { StardustTheme } from '@stardust-ds/react'

  ...

  declare module 'styled-components' {
    export interface DefaultTheme extends StardustTheme {}
  }
```