@solarview-ui/core NPM

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.

Instalação dos componentes

yarn add @solarview-ui/core

npm install @solarview-ui/core

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

yarn add @solarview-ui/tokens

npm install @solarview-ui/tokens

Como usar

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

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

export function Component(){
  return (
    <div>
      <Modal
        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={<Close />} // 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
          <div>
            <Text size="md" weight="normal">
              Adicione ou remova Tags para agrupar usinas.
            </Text>

            <div id="body">
              <div>
                <TextInput
                  label="Tag 1"
                  placeholder="tag1"
                />
                <Button
                  variant="tertiary"
                  size="sm"
                  aspect="compress"
                >
                  <Trash size={16} color={colors.feedbackDanger} />
                </Button>
              </div>

              <div>
                <TextInput
                  label="Tag 2"
                  placeholder="tag2"
                />
                <Button
                  variant="tertiary"
                  size="sm"
                  aspect="compress"
                >
                  <Trash size={16} color={colors.feedbackDanger} />
                </Button>
              </div>

              <Button variant="tertiary" size="sm">
                <Plus size={10} />
                Criar nova Tag
              </Button>
            </div>

            <footer>
              <Button variant="quaternary" size="md">
                Cancelar
              </Button>
              <Button variant="primary" size="md">
                Salvar
              </Button>
            </footer>
          </div>
        }
      >
        // Passa o botão que vai acionar o modal como filho do componente
        <Button variant="secondary">
          <TagIcon size={16} />
          Tags
        </Button>
      </Modal>
    </div>
  );
};

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:

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

export function Component(){
  return (
    <div>
      <Box style={{ color: '#fac800' }} />
      <Box className="text-green-500" variant="secondary" borderStyle="pointed" /> // Tailwind utility class
      <Box className="classic-element-class" variant="tertiary" />
    </div>
  );
};