@hexagonpro/hx-components NPM

HX-Components

Parabéns! Você acaba de salvar horas de trabalho por usar esse projeto! Vamos te orientar em o que está aqui e como usá-los.

Se você é novo em Typescript ou React, confira essa cheatsheet

Comandos

Todo o conteúdo da biblioteca se encontra dentro da /src e também temos uma aplicação de playground que usa Parcel na pasta /example.

O fluxo de trabalho recomendado é rodar a biblioteca em um terminal:

yarn start

Isso cria uma pasta /dist e toda edição feita na pasta src recompila a /dist.

Depois disso, rode o Storybook ou a aplicação de playground:

Storybook

Rodar em outro terminal:

yarn storybook

Isso carrega as stories que estão em /src/**/*.stories.tsx.

Playground

Rodar em outro terminal:

cd example
yarn
yarn start

Para compilar sem rodar o servidor, use yarn build.

Configuração

A qualiade de código está configurada pra você com prettier, husky, e lint-staged. Ajuste os respectivos campos no package.json conforme necessaário.

Estrutura de arquivos

Essa é a estrutura de arquivos do projeto:

/example
  index.html
  index.tsx               # teste seus componentes nessa aplicação de exemplo
  package.json
  tsconfig.json
/src
  /Thing
    index.tsx
    Thing.stories.tsx     # Storybook
/.storybook
  main.js
  manager.js
  preview.js
.gitignore
package.json
README.md
tsconfig.json

Rollup

A biblioteca usa Rollup como bundler e gera várias configurações e formatos de módulo. Ver Otimizações para mais detalhes.

TypeScript

tsconfig.json está configurado para interpretar dom e esnext, além de react para jsx.

Otimizações

Confira as documentações do tsdx.

Formato dos módulos

CJS, ESModules, e UMD são suportados.

Os caminhos dos artefatos estão configurados no package.json e dist/index.js.

Deploying the Example Playground

The Playground is just a simple Parcel app, you can deploy it anywhere you would normally deploy that. Here are some guidelines for manually deploying with the Netlify CLI (npm i -g netlify-cli):

cd example # if not already in the example folder
npm run build # builds to dist
netlify deploy # deploy the dist folder

Alternatively, if you already have a git repo connected, you can set up continuous deployment with Netlify:

netlify init
# build command: yarn build && cd example && yarn && yarn build
# directory to deploy: example/dist
# pick yes for netlify.toml

Named Exports

Per Palmer Group guidelines, always use named exports. Code split inside your React app instead of your React library.

Including Styles

There are many ways to ship styles, including with CSS-in-JS. TSDX has no opinion on this, configure how you like.

For vanilla CSS, you can include it at the root directory and add it to the files section in your package.json, so that it can be imported separately by your users and run through their bundler's loader.

Publishing to NPM

We recommend using np.

Usage with Lerna

When creating a new package with TSDX within a project set up with Lerna, you might encounter a Cannot resolve dependency error when trying to run the example project. To fix that you will need to make changes to the package.json file inside the example directory.

The problem is that due to the nature of how dependencies are installed in Lerna projects, the aliases in the example project's package.json might not point to the right place, as those dependencies might have been installed in the root of your Lerna project.

Change the alias to point to where those packages are actually installed. This depends on the directory structure of your Lerna project, so the actual path might be different from the diff below.

   "alias": {
-    "react": "../node_modules/react",
-    "react-dom": "../node_modules/react-dom"
+    "react": "../../../node_modules/react",
+    "react-dom": "../../../node_modules/react-dom"
   },

An alternative to fixing this problem would be to remove aliases altogether and define the dependencies referenced as aliases as dev dependencies instead. However, that might cause other problems.