Skip to main content

Autenticação com o Github Packages​

A biblioteca do Delta é privada e pode ser acessada apenas por usuários que estejam na organização @escaletech.

Na raiz do projeto, crie ou edite o arquivo .npmrc e inclua o texto abaixo neste arquivo.

@escaletech:registry=https://npm.pkg.github.com

Execute o comando abaixo para iniciar a autenticação com o Github packages.

yarn login --registry=https://npm.pkg.github.com

Instalação​

Instale a biblioteca a partir de sua linha de comando.

npm install @escaletech/delta

Utilização​

Criação de um tema​

Nesta seção, criaremos um tema simples para o componente Button.

Crie uma pasta chamada theme e dentro desta pasta um arquivo typescript para criarmos o nosso tema. Neste caso, irei chamá-lo de stitches.ts.

   - theme
     - stitches.ts

Neste arquivo, importemos a função extendsTheme que realizará a criação do nosso tema personalizado.

Para mais informações sobre os tokens e como customizar o tema por completo, visita a página Tema Customizado.

import { extendsTheme } from '@escaletech/delta'

const theme = extendsTheme({
  colors: {
    buttonPrimaryBackgroundColor: 'red'
  },
  radii: {
    buttonBorderRadius: 0
  }
})

A função extendsTheme retorna uma string que é a classe de CSS criada pela a função. Devemos utilizar esta classe na tag mais alta na estrutura da hierarquia do html. Utilizamos como padrão, o framework Next.JS para criar aplicações React com a renderização do lado do servidor.

Para utilizar o tema criado pelo o Delta, importe a constante theme no arquivo _app.js ou _app.tsx em seu projeto Next.JS.

Para mais informações sobre este arquivo, acesse a página oficial do Next.JS Custom App

import type { AppProps } from 'next/app'

import { theme } from 'theme/stitches'

function MyApp ({ Component, pageProps }: AppProps) {
  return (
    <div className={theme}>
      <Component
        {...pageProps}
      />
    </div>
  )
}

export default MyApp

Estamos quase lá!

No tutorial abaixo, estaremos adicionando os estilos no lado do servidor.

Server Side Rendering​

caution

Você deverá ter habilitada a feature Custom Document do framework. Veja mais em: Custom Document - NextJS

Importe o componente <InjectSSRStyles /> no arquivo _document na pasta pages como no exemplo abaixo.

import Document, { Html, Head, Main, NextScript } from 'next/document'
import { InjectSSRStyles } from '@escaletech/delta'

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx)
    return { ...initialProps }
  }

  render() {
    return (
      <Html>
        <Head>
          <InjectSSRStyles />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default MyDocument

Agora, você poderá importar o componente <Button /> em sua aplicação, e verá ele estilizado conforme o nosso tema.

Resultado
Loading...

Contribuindo​

PR's no Delta são sempre bem-vindos, consulte nossas diretrizes de contribuição para saber como você pode contribuir para este projeto.