UIKit hbsis com ReactJS

Instalação

Yarn

yarn add @hbsis.uikit/react

NPM

npm i --save @hbsis.uikit/react

DEMO

DOCUMENTAÇÃO E DEMOSTRAÇÃO Clique aqui

Incidentes

Para solução de 'bugs' criticas ou duvidas deve ser criado um incidente no repositório Link para Incidentes, colocando um exemplo para ajudar no melhor entendimento.

Configuração no loader do webpack (opcional)

Caso você queira utilizar as otimizações do webpack do seu projeto, siga os passos a seguir:

Exemplo

Pegue o caminho dos componentes do uikit com a biblioteca path do node

const uikit: path.join(__dirname, '..', 'node_modules', '@hbsis.uikit', 'react', 'src', 'components')

Adicione no loader do seu webpack

jsLoader: {
    test: /\.js$/,
    include: paths.uikit,
    use: 'babel-loader'
  }

CSS e fontes

O css e fonte precisam ser configurados pra algumas features do uikit funcionarem.

Adicione o uikit nos loaders css-loader pro css e file-loader para as fontes

Exemplo

Caminho do uikit

const uikit: path.join(__dirname, '..', 'node_modules', '@hbsis.uikit', 'react', 'dist')

E adicione nos loader:

  cssLoader: {
    test: /\.css$/,
    include: paths.uikit,
    use: [
      'style-loader',
      'css-loader'
    ]
  },

  fileLoader: {
    test: /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|txt)(\?.*)?$/,
    include: paths.uikit,
    use: {
      loader: 'file-loader',
      query: {
        name: 'media/[name].[hash:8].[ext]'
      }
    }
  }

Importe o css no componente

import '@hbsis.uikit/react/dist/uikit.css'

Como usar

ES6 / ES2015 Module

import {Button} from '@hbsis.uikit/react'

JSX

<Button type="primary" value="primary" />