Grimório 📜✨

Prerequisites

• Node >= v8.10.0

Install

Primeiro, copie o pacote para uma pasta do seu projeto, por exemplo /packages. Depois adicione a dependencia no seu package.json e atualize!

// your package.json

"dependencies": {
  "grimorio-ui": "./packages/grimorio-ui-4.1.0.variation.tgz"
}

npm install
// or
yarn

Importe o css do tema no seu arquivo de entrada e insira um loader no webpack

// import the CSS

// ex: layout.js
import '[node_modules path]/grimorio-ui/dist/grimorio-ui.min.css';

// webpack
{
  test: /\.styl$/,
  loader: 'style!css?modules=1&importLoaders=1&localIdentName=[name]_[local]_[hash:base64:5]!postcss!stylus?sourceMap',
  include: path.resolve(__dirname, '../../source'),
  exclude: path.resolve(__dirname, "../../node_modules")
},
{
  test: /\.css/,
  loader: 'style!css',
  include: path.resolve(__dirname, "../../node_modules/grimorio-ui/dist/")
}

E então, é só usar!

// component.js

import { Alert } from 'grimorio-ui';

Local Usage

UI Components (storybook)

http://localhost:9000

THEME_ENV=afiliados yarn storybook

Tests

yarn test

Build and Pack

Caso não exista nenhum pacote já criado, usar esse comando:

THEME_ENV=afiliados yarn pack:build

E caso já exista um pacote gerado:

THEME_ENV=afiliados yarn pack:full

Copy

Remove o pacote antigo do repositório APP e copia o novo

APP=afiliados-webapp yarn cp:pack

CLI

Creating file structure for the component

./helpers/component/create.sh component-name path

└── component-name
    ├── component-name/index.js
    ├── component-name/component-name-component.js
    ├── component-name/component-name.styl
    ├── component-name/component-name.story.js
    └── component-name/component-name.test.js

./helpers/component/create-with-redux.sh component-name path

└── component-name
    ├── component-name/index.js
    ├── component-name/component-name-actions.js
    ├── component-name/component-name-component.js
    ├── component-name/component-name-constants.js
    ├── component-name/component-name-container.js
    ├── component-name/component-name-reducer.js
    ├── component-name/component-name.styl
    ├── component-name/component-name.story.js
    └── component-name/component-name.test.js

Manual

1. Git Flow
2. Commits
3. CSS (code style)
4. Links Úteis