Solarview UI

Solarview UI, uma biblioteca projetada para adicionar um padrão mais elegante ao portal Solarview. Explore todos os componentes em Github Pages - Solarview UI.

![NPM](https://www.npmjs.com/package/@solarview-ui/core) ![JavaScript Style Guide](https://standardjs.com) ![License](https://github.com/u-icons/react/blob/main/LICENSE)

Instalação dos componentes

``bash yarn add @solarview-ui/core`

or

`bash npm install @solarview-ui/core`

`Instalação dos tokens (colors, fontSize, fontWeight, etc.)`

`bash yarn add @solarview-ui/tokens`

or

`bash npm install @solarview-ui/tokens`

`Como usar`

Basta importar os componentes necessários e adicioná-los no componente ou na página.

`tsx import { Button, Close, Modal, TagIcon, Plus, TextInput, Trash } from "@solarview-ui/core"; import { colors } from "@solarview-ui/tokens";

export function Component(){ return (


              hasHeader // => diz para o modal que terá um HEADER (adicionando também um botão para fechar o modal)
        title="Tags" // não necessário caso não tenha um HEADER
        closeIcon={} // não necessário caso não tenha um HEADER
        content={ // conteúdo do body do Modal, podendo também adicionar um footer ao final
          
            
              Adicione ou remova Tags para agrupar usinas.
            
            

              
                                  label="Tag 1"
                  placeholder="tag1"
                />
                                  variant="tertiary"
                  size="sm"
                  aspect="compress"
                >
                  
                
              
              

                                  label="Tag 2"
                  placeholder="tag2"
                />
                                  variant="tertiary"
                  size="sm"
                  aspect="compress"
                >
                  
                
              
              
            
            

              
              
            

          

        }
      >
        // Passa o botão que vai acionar o modal como filho do componente


  );
};


CSS
Todos os tipos de escrita CSS são suportados, se você precisar adicionar CSS diretamente ao componente, classNames, estilos inline e nomes de classes utilitárias CSS, por exemplo, classes utilitárias vindas do framework Tailwind CSS:

`tsx import { Box } from "@solarview-ui/core";

export function Component(){ return (


      
       // Tailwind utility class


  );
};

$3

MIT © Solarview UI

Solarview UI

Solarview UI, uma biblioteca projetada para adicionar um padrão mais elegante ao portal Solarview. Explore todos os componentes em Github Pages - Solarview UI.

![NPM](https://www.npmjs.com/package/@solarview-ui/core) ![JavaScript Style Guide](https://standardjs.com) ![License](https://github.com/u-icons/react/blob/main/LICENSE)

Instalação dos componentes

``bash yarn add @solarview-ui/core`

or

`bash npm install @solarview-ui/core`

`Instalação dos tokens (colors, fontSize, fontWeight, etc.)`

`bash yarn add @solarview-ui/tokens`

or

`bash npm install @solarview-ui/tokens`

`Como usar`

Basta importar os componentes necessários e adicioná-los no componente ou na página.

`tsx import { Button, Close, Modal, TagIcon, Plus, TextInput, Trash } from "@solarview-ui/core"; import { colors } from "@solarview-ui/tokens";

export function Component(){ return (


              hasHeader // => diz para o modal que terá um HEADER (adicionando também um botão para fechar o modal)
        title="Tags" // não necessário caso não tenha um HEADER
        closeIcon={} // não necessário caso não tenha um HEADER
        content={ // conteúdo do body do Modal, podendo também adicionar um footer ao final
          
            
              Adicione ou remova Tags para agrupar usinas.
            
            

              
                                  label="Tag 1"
                  placeholder="tag1"
                />
                                  variant="tertiary"
                  size="sm"
                  aspect="compress"
                >
                  
                
              
              

                                  label="Tag 2"
                  placeholder="tag2"
                />
                                  variant="tertiary"
                  size="sm"
                  aspect="compress"
                >
                  
                
              
              
            
            

              
              
            

          

        }
      >
        // Passa o botão que vai acionar o modal como filho do componente


  );
};


CSS
Todos os tipos de escrita CSS são suportados, se você precisar adicionar CSS diretamente ao componente, classNames, estilos inline e nomes de classes utilitárias CSS, por exemplo, classes utilitárias vindas do framework Tailwind CSS:

`tsx import { Box } from "@solarview-ui/core";

export function Component(){ return (


      
       // Tailwind utility class


  );
};