Ahg-ui NPM | npm.io

Primeiros passos

Entrar na pasta do ahg-ui
Instalar npm caso nao tenha

npm i

Caso acuse nos warning sobre libpng
Instalar com:

sudo apt install libpng-dev

Apos instalar a libpng, na pasta do ahg-ui dar os seguintes comandos:

rm -rf node_modules
rm -rf package-lock.json 
npm i
npm start

nao instalar o latest node

Adicionando o projeto

❯ npm i -D git+https://npm:yPmZFzyySyzZnt9idZTo@arb.ahgora.com.br/git/ahg-ui#master
❯ npm i -D mini-css-extract-plugin

or add to package.json

  ...
  "devDependencies": {
    ...
    "ahg-ui": "git+https://npm:yPmZFzyySyzZnt9idZTo@arb.ahgora.com.br/git/ahg-ui#master",
    "mini-css-extract-plugin": "^0.9.0",
    ...
  }
  ...

to use ahg-ui css files configure your webpack

...
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
...
module.exports = {
    ...
    entry: {
      'output/folder/AhgUi': 'ahg-ui/build/AhgUi.css'
    },
    ...
    module: {
      ...
      rules: [
        ...
        {
            test: /\.css$/i,
            exclude: /(node_modules(?!(\/|\\)ahg-ui)|bower_components)/,
            use: [MiniCssExtractPlugin.loader, 'css-loader'],
        },
        ...
      ],
      ...
    },
    ...
    plugins: [
        new MiniCssExtractPlugin()
    ],
    ...
};

then

<link rel="stylesheet" type="text/css" href="output/folder/AhgUi.css" />

and

import { AhgTable, ... } from 'ahg-ui';

Uso

Documentação

Para ver a documentação dos componentes use:

❯ npm run styleguide:start

Styleguidist vai rodar em: (http://0.0.0.0:6060)
Temos por padrão onde sempre que um componente for criado, deve ser documentado, nesse espaço temos como documentar a funcionalidade, props que aceita, exemplos de uso e interações com outros componentes

Desenvolvimento

Para começar a trabalhar no projeto você vai usar:

❯ npm i && npm start

Apartir do npm start, o servidor de desenvolvimento estará rodando em http://localhost:5000
Para testar um componente novo criado, ou conhecer as funcionalidades em alguns componentes que já existem, estarão todos no showcase, disponível em: -> ahg-ui/src/showCase/ShowCase.js
Após alterar ou criar um componente, adicione suas alterações com: git add .
Registre suas alterações: git commit -m "DSW-XXXX - create a new beautiful component"
É necessário criar o build do projeto antes de enviar para a branch as alterações, você pde fazer isso dessa forma: