Skip to content

Latest commit

 

History

History
executable file
·
233 lines (165 loc) · 6.39 KB

README-pt-br.md

File metadata and controls

executable file
·
233 lines (165 loc) · 6.39 KB
Raw

alps-react

You can read the English version of this manual by clicking here

[WIP] Uma implementação em React do ALPS

ALPS-React Storybook

Para mais informações e referências, leia a documentação do ALPS (em inglês):

Usar em seu projeto

Adicione alps-react como depêndencia:

  • Usando yarn

    yarn add alps-react

  • Usando npm

    npm intall alps-react

Então importe e use os componentes no seu código:

import {
  AlpsContextProvider,
  Body,
  Button,
  Blockquote,
  Div,
  MediaBlock,
} from 'alps-react'

function MyApp(props) {
  return (
    // É necessário que o componente AlpsContextProvider seja o pai dos outros components do ALPS-React (normalmente em App root)
    <AlpsContextProvider>
      <Body primaryColor="bluejay" hasGrid>
        <Div spacing="double" padding>
          <Button text="Bem-Vindo ao ALPS-React" />

          <MediaBlock
            type="inline"
            title="Sunt id vel ipsum at ut praesentium aut."
            description="Repellat libero qui magni at ut sapiente facere nam veritatis."
            kicker="Cumque omnis velit."
            category="Church"
            date={new Date()}
            image={{
              srcSet: {
                default: '//picsum.photos/480/270?image=248',
                500: '//picsum.photos/720/405?image=248',
                900: '//picsum.photos/960/540?image=248',
              },
              alt: 'Placeholder image',
            }}
            reversed={true}
            cta="Read more"
            url="#/link/to/article"
          />

          <Blockquote text="Asperiores quisquam perferendis dolor in amet." />
        </Div>
      </Body>
    </AlpsContextProvider>
  )
}

Observação: Esse é só um simples exemplo de como a API funciona. Você pode utilizar os componentes da forma como você quiser, porém, recomendamos que os utilize provendo as configurações e dados aos seus subcomponentes.

Adicione os Assets: estilos e fontes do ALPS

Você deve incluir também, na tag <head> do seu HTML as fontes e os arquivos de estilos das CDN's oficiais.

<!-- FONT -->
<link
  rel="stylesheet"
  type="text/css"
  href="//fonts.googleapis.com/css?family=Noto+Sans:400,400i,700,700i|Noto+Serif:400,400i,700,700i&display=swap"
  media="all"
/>

<!-- ALPS CSS -->
<link
  rel="stylesheet"
  type="text/css"
  href="//cdn.adventist.org/alps/3/3.7.9/css/main-bluejay.css"
  media="all"
/>

Nota: Substitua bluejay pela cor do tema ALPS que você planeja usar (verifique o arrayprimaryColors em src/atoms/global/colors.js para todas as opções disponíveis)

Caso você queira adicionar programaticamente, a variável externalAssets é exposta em alps-react:

import { Helmet } from "react-helmet"

import { getExternalAssets, AlpsContextProvider, Body } from 'alps-react'

const externalAssets = getExternalAssets({ theme: 'bluejay' })

function MyApp () {
    return (
      <React.Fragment>
        <Helmet>
          <title>My App</title>
          <link rel="canonical" href="http://myapp.com" />

          {externalAssets.css.map(href => (
            <link rel="stylesheet" type="text/css" href={href} media="all" />
          ))}
        </Helmet>

        <AlpsContextProvider>
          <Body primaryColor="bluejay" hasGrid>
            {/* ALPS-React components go here */}
          </Body>
        </AlpsContextProvider>
      </React.Fragment>
    )
  }
}

Depois de adicionar os assets você verá algo parecido com isso:

Example output

Desenvolvimento

Requisitos

Instale as dependências

yarn

Inicie o Storybook

  • Executando Storybook: Irá iniciar um servidor storybook local com hot reload em http://localhost:9009

    yarn storybook

  • Buildando Storybook: Irá fazer um bundle do storybook como arquivos estáticos em /storybook-static

    yarn build-storybook

Buildando para produção

Para buildar para produção, execute:

yarn build

Esta biblioteca é construida utilizando Rollup.js

Desenvolvimento com Docker

Se você quiser desenvolver o projeto utilizando Docker, siga as instruções abaixo.

Requisitos

  • Docker

  • docker-compose

    • docker-compose vem incluso na instalação do Docker por padrão tanto nas versões de Mac OS como de Windows
    • docker-compose para linux: Por favor verifique a versão disponível para o sistema de gerenciamento de pacotes da sua distribuição

Uma sugestão sobre docker-compose

Nós executamos o Node através do Docker. Para utilizar ferramentas como o Yarn, é preciso passar os comandos para o container do Docker. Por esse motivo comando se torna bem grande:

docker-compose -f docker-compose.cli.yml run --rm <command>

Por isso recomendamos criar um alias para docker-compose -f docker-compose.cli.yml run --rm e chamá-lo de dcli (Docker CLI).

Instale as dependências

dcli yarn install

Inicie o Storybook

  • Executando Storybook: Irá iniciar um servidor storybook local com hot reload em http://localhost:9009

    dcli --service-ports yarn storybook

  • Buildando Storybook: Irá fazer um bundle do storybook como arquivos estáticos em /storybook-static

    dcli yarn build-storybook

Buildando para produção

Para buildar para produção, execute:

dcli yarn build

Copyright

© 2019 Conferência Geral da Igreja Adventista do Sétimo Dia https://adventist.org | https://adventist.io

Desenvolvido por Stimme der Hoffnung e.V na Alemanha