pagarme / former-kit

✈️ Primitive and unstyled React components ready for receiving your own visual identity.

FormerKit

Theming-first components so you can focus on design, not implementation.

FormerKit can be mostly compared to other UI libraries out there, but not exactly. The philosophy behind FormerKit is to build a white-label React component library by decoupling styles from component's HTML structure, allowing highly customizable user interfaces without the hurdle to build everytime the same HTML structure and React component interface abstractions.

The fastest way to get started with former kit is using our Starter Dashboard.

Using

Install former-kit. If you want to see the full power of FormerKit, you will also need a skin. We have developed a skin based on our styleguide, it's available in package npm former-kit-skin-pagarme or in the github repository former-kit-skin-pagarme

yarn add former-kit former-kit-skin-pagarme

Check the full documentation to understand how to use components.

Development

Check the contributing guide.

Publishing to NPM

The publishing process is automated using a combination of GitHub Actions and CircleCI. We're using the release-please-action in order to automatically create GitHub releases and bump the package.json version based on commit messages conventions known as Conventional Commits.

By following those commit conventions the release-please-action will automatically identify when you're merging a pull request which is in accordance and immediately after will create another pull request which will contain the changelog, the package.json version bump, a tag, and a release indicating the new version.

You're not required to merge this release pull request, but when you do it will trigger a workflow on CircleCI which will publish the new version of the package to NPM.

if you can't get it through CI you need to have access to NPM publish and run

npm publish

Licensing

See LICENSE.

---

former-kit's Issues

Write tests for the Layout component

Criar componente `SidebarItem`

Context

Hoje a sidebar recebe apenas links clicaveis, mas com a demanda de adicionar o popover a sidebar quando a mesma estiver fechada acaba sendo desnecessários os eventos da SidebarLink.

Description

A proposta é separarmos a parte visusal do SidebarLInk em outro componente(SidebarItem) que terá uma estrutura semelhante e eventos apenas para trocar estilos.

<SidebarItem
  icon={[]}
  icons={[]}
  children={{}}
  onBlur={() => undefined}
  onFocus={() => undefined}
  theme={{}}
/>

Requirements

• Permitir a adição de itens que não necessitem de eventos de click na sidebar

Add Dark base in Input component

Context

Refactor Input component to use the Dark base in Account pages.

Example

Zeplin: http://zpl.io/VqOdBA7

Requirements

• Add Base Dark props to input component

Add popover force close callback

Context

The popover component only close in the child component click, but is necessary a trigger which closes the popover when the content is clicked or some function is called.

Example

This example shows how the popover works now:

In this case the popover must close when a date is selected in the calendar.

Big dependencies being installed even when they're not necessary

Context

I'm using former-kit to get one specific component for now: RadioGroup, and as I'm developing an app that will be imported by many users in various internet conditions I would like to keep it as small as possible.

When running a build command using Webpack bundle analyzer I saw that I'm not actually using the three biggest libs listed and that they're coming from former-kit.

Is there a way to import just one component and the libs it will actually use?

Thanks!

Example

Description

Requirements

Sugestion: Use class properties on every component

Context

If we enable the right babel preset we can start using class properties, so the usual:

constructor (props) {
  super(props)

  this.handleChange = this.handleChange.bind(this)
  this.state = {
    something: true,
  } 
}

handleChange () {
   ....
} 

can be replaced by

state = {
  something: true,
} 

handleChange = () => {
   ....
} 

as it is currently not a JavaScript standard some linters can yell at us, to fix that we just need to add
"parser": "babel-eslint", to the eslint config file

Example

Description

Requirements

Criar componente SnackBar

Context

Criar um componente de SnackBar com uma interface semelhante ao Alert já estabelecido no former-kit. Ele será usado para enviar notificações rápidas ao usuário às quais podem vir a sumir depois de um tempo.

Example

https://app.zeplin.io/project/59e66a0aa633e7a9cf5c0cf4/screen/5a01eeace859f8751b16b22b

Description

Deve seguir o padrão de nomenclatura da interface do alert ( https://github.com/pagarme/former-kit/tree/master/src/Alert ) do former-kit, e também o padrão de cores definidas de acordo com a propriedade type recebida, que pode ser um dos seguintes valores: error, info, success, warning

<SnackBar
  action="texto"
  dismissTimeout={1000}
  icon={<Icon />}
  onDismiss={ event => event }
  theme={}
  type="error"
  
>
  <span>children content</span>
</SnackBar>

Requirements

• Manter posicionamento absoluto em referência ao corpo (Main) da aplicação
• A cor tem que estar de acordo com o type recebida
• Quando recebida a propriedade dismissTimeout ela vai disparar um setTimeout que quando chegar ao fim deve chamar a função onDismiss
• Quando disparar a função onDismiss ela vai também disparar uma animação para remover o componente da tela debaixo para cima.
• A entrada do componete na tela deve ser feita com uma animação de Fade do Transition. E a saída (close) deve ser através do mesmo tipo de animação.
• Ao clicar no ícone de fechar deve ser disparada a função onDismiss

Update styleguidist settings and components examples.

Context

Currently our styleguidist settings are pretty basic just to show our component documentation, we need to update these settings so we can get closer to what was proposed by the UX / UI team.

Example

Current:

Proposed:

Description

in progress:

Requirements

Missing docs:

• Card
• Checkbox
• Dropdown
• Grid
• Header
• Input
• Landing
• Modal
• Popover
• SegmentedSwitch
• Sidebar
• TabBar
• Table
• Transition

When pagination is disabled, all the component must have cursor: not-allowed, not only the buttons

Pass props down to the DateSelector

Context

The DateInput and DateSelector are based in the airbnb react-dates(https://github.com/airbnb/react-dates) but we are limiting the props received is necessary pass any extra prop to the react-dates to enable all its powers ex: isDayBlocked, transitionDuration etc.

Requirements

• Enable the react-dates exclusive props usage

Componente Dropdown não seleciona o valor passado na prop value

Context

Ao criar um componente Dropdown passando a propriedade value o valor não é selecionado quando o componente é renderizado

Example

const options = [
  {
    name: 'Github',
    value: 'github',
  },
  {
    name: 'Open Source',
    value: 'open-source',
  },
  {
    name: 'Pilot',
    value: 'pilot',
  },
]
<Section title="dropdown with value">
  <Dropdown
    options={options}
    value="github"
  />
</Section>

Description

acredito que deveria selecionar o item passado na propriedade value

Missing theme properties documentation

Context

Currently there are a few components that don't have wel-defined theme prop types definition and the ones that have doesn't even have documentation about these props.

Ideally all components should have a well documented theme prop. This is the main interface that skin developers will use to write new skins. Some of the missing components are:

• Table

@GreenPhoenix please edit this post and add other components that are missing validation and/or documentation.

Update MomentJS 2.20.1 to 2.23.0

Context

We are using version 2.20.1 of MomentJS. However, we have problems with a console.warn saying that the date() function will be removed in the next package updates, causing interface crashes if we update. For the message does not appear whenever we build former-kit and accept their advice, it would be interesting to update this dependency.

Example

Requirements

Checklist

• Update MomentJS
• Update date() functions to moment().format();

Add Truncate component

Context

Currently if a text exceeds the size of the column in the table, the text is show exceeding the parent element, so we need to add a component to handle with this and truncate the text.

Description

Add a <Trucate /> component.

<Truncate
  ellipsis="..."
  multiline
  resizableByWindow
  text="Lorem Ipsum"
  theme={}
  tooltipPlacement="bottomCenter"
/>

Requirements

• Must render all the text if the size doesn't exceed the parent element size.
• Must truncate the text size exceed the parent element size.

Modal scroll and position refactor

Context

Today our modal does not allow scrolling and stays fixed to 145px from the top, so we need to allow the scroll in the overlay(to seem like the modal is flowing over it) and it is also necessary to remove the fixed position from the top

Issue example

Requirements

• Allow scrolling
• Dynamically position the modal

"Segmented Switch" and "Spaced Segmentes Switch" are equals

Context

We have two styles for Segmented Switch, default and spaced. The style should be different, but now the style are equals to both, they are spaced. This is an error.

Requirements

• Let's to recover the correct style

Remove auto complete from DateInput

Context

Remove autocomplete from DateInput to avoid the following problem:

Description

This error occurs because we aren't using the html prop autocomplete correctly.
Adding the autocomplete in the main input with the value off will solve the problem.

input onFocus and onBlur is not passing event as argument when called

Context

Input onFocus and onBlur is fired withour arguments. The html default input pass the event as argument when called

Requirements

• pass the default event as argument to this.props.onFocus when called
• pass the default event as argument to this.props.onBlur when called

Steps should have no background color

Context

The background color that Steps currently has is smoke. However, the withdraw pages requires it to have a white background color. So I think the container using the Steps component should provide the correct background to the component.

Create a media query compontent

Context

The component need recive props to set media query print

Example

Not visual content

Description

<MediaQuery 
  role={print}
/> 

Requirements

• set diffents roles
• set differents styles per role

Percy exceeds limits

Context

Currently the former-kit visual tests exceed the Percy limit.

Debugging with @rsmelo we noticed that percy always runs all the snapshots, since all the snapshots of the components are kept in a single file.

https://github.com/percy/percy-docs/blob/master/docs/clients/ruby/cli.md#usage

Description

A possible solution is to change the storybook configs to create a different snapshot for each component or story. This way each change will be made in its own snapshot file and Percy will run only the changed files.

Requirements

• Each story must create your own snapshot.

Adicionar componente de upload

Context

Adicionar componente de upload para carga de arquivos

Example

Description

<FileUpload
   allowedMimeTypes={[]}
   name=""
   onChange={() => undefined}
   mulitple={false}
   disabled={false}
/>

Requirements

• Permitir a carga de arquivos

Fix columns alignment

Context

Now the Col component is using flex-direction: column this prop changes the column alignment orientation and the prop align in the component is setting the prop justify-content which align the item in the main column direction(vertical) this causes an alignment problem in the component, the alignment must be changed to use the align-items prop to provide an horizontal alignment to the Col component

Dropdown with searchable input

Context

Dado as necessidades de desenvolvimento é importante termos um componente que seja um dropdown e que possua um input para buscar pelo dados.

Example

Description

Esse componente deverá receber um array de objetos com todos os dados necessários para apresentar ao usuário dando a possibilidade de fazer uma busca dentro do componente.

Add selectedPreset to DateSelector

I believe it would be nice if DateSelector could receive a selectedPreset prop or automatically detect if the dates inside the dates prop are equivalent to a defined preset

Steps component

Exemplo

Descrição técnica

<Steps
  steps={[
    { id: 'identification', title: 'Identificação' },
    { id: 'confirmation', title: 'Confirmação' },
  ]}
  status={[
    { id: 'identification', status: 'success' },
  ]}
/>

// Este componente usa um componente menor chamado `Step`.

steps.map(step =>
    <Step
      key={step.id}
      number={1}
      title={step.title}
      status="success"
    />
))

Requisitos e Critérios de Aceite

• Deve ser incluido no former-kit
• Deve renderizar uma lista de passos
• Deve mostrar um ícone de checked quando o passo estiver com estado de sucesso
• Deve mostrar estado de erro quando tiver erro (cc @pagarme/ux falta estado de erro)

Adicionar componente de pré-visualização de imagens carrgadas

Context

Adicionar componente de visualização de imagens carregados via componente de upload.

Example

Description

<UploadImage 
   name=""
   onChange={() => undefined}
   disabled={false}
/>

Requirements

• Carregar imagens
• Gerar pré-visualizações de imagens

Update documentation of Dropdown and RadioGroup

The parameter of the onChange prop has changed in these components

Table must show a dash when renderer returns false

First click when trying to order a column returns null

Popover lowcase subtitle

Context

When Popover is inside CardTitle the subtitle with strong be uppercase, but expect lowercase inside popover

Example

current:

expected:

Description

/* current */
card---title  strong {
    font-weight: bold;
    text-transform: uppercase;
}

/* proposal */
card---title > strong {
    font-weight: bold;
    text-transform: uppercase;
}

Requirements

• Popover lowcase subtitle

Alert component requires only React element as children

Context

The Alert component requires a React Element to be passed as children.

Description

On the docs, a regular HTML element is passed as child to Alert component, but the proptype requires an element:

former-kit/src/Alert/index.js

Line 67 in 9a87c86

children: element.isRequired,

We should update it to node instead.

Requirements

Checklist

• Allow regular HTML elements usage

Fix pagination internal state when navigating through buttons

Context

Pagination has an internal state that is used mainly when typing on the input. However, it is also used when navigating through buttons. This can be an issue when a re-render overwrites the internal state.

Example

Conflict between react-vanilla-form and react-maskedinput

Context

Currently we use two libs to handle with forms: react-vanilla-form and react-maskedinput.

The first one (react-vanilla-form) is to handle forms, one of the characteristics of this lib is add a function in the onChange prop.

The second (react-maskedinput) serves to create masks in the input for when a data needs to have a specific format: eg: a zip code 99999-999 added in this way in the input: mask="11111-111"

Problem:
The problem is that there is a rather strange conflict between the two libs: when we create an input with a mask, for some reason it does not end up calling the onChange added by react-vanilla-form, causing the updates to fail to happen properly.

Thus creates the need to have specific functions for these inputs with masks for example: handleChangeWithMask and manually add them to the onChange props of each input that needs masks.

After testing with other libs, I realized that using the react-input-mask lib the changes work normally without the need to have a function passed manually by the prop onChange.

Requirements

Checklist

• Must update the states correctly without changing the mask format and without changing the components already created with onChange.
• Should work correctly after removing the manually added onChange props.

Table examples are broken

The table examples at pagarme.github.io/former-kit are broken:

Add "Qualquer data" to DateSelector

When "Qualquer data" is selected, DateSelector will return dates: null

https://app.zeplin.io/project/59e66a0aa633e7a9cf5c0cf4/screen/5a66337ba5adeabbf08d8799

Add disabled state to table head when the column is orderable

Upgrade dependencies

Context

Upgrade all dependencies, and fix interfaces problems.

Example

Issue #209 is a good example of a small problem caused by an outdated dependency.
And the usage of old tools like webpack and babel keep us tied to a bunch of small problems which could break everything sometimes keeping all updated we also avoid a lot of security threats
and improve some tools performance like (Storybook)[https://github.com/storybooks/storybook/].

Description

This issue aims to upgrade all dependencies and all devDependencies of the project. The upgrade process may create some errors due to the dependencies interfaces, these errors should be solved in the upgrade process.
The major upgrades will be:
babel from version 6.26.0 to version 7.2.2
jest from version 22.1.4 to version 23.6.0
react from version 16.2.0 to version 16.7.0
storybook from version 3.3.11 to version 4.1.7 ( this dependency is splited in 7 parts)
webpack from version 3.10.0 to version 4.28

Requirements

• Upgrade all outdated dependencies.
• Refactor new dependencies interfaces usages.

Add prop overflow in Card component

Context

The Card component don't allow the overflow usage, this creates bugs like the following:

Requirements

• Allow overflow usage in Card component

Image load error

Context

Currently the Avatar component has an error with render, if we use the photo prop with any string the component will try to render an image and the placeholder prop will be ignored, even the image uri is invalid the placeholder still will be ignored

Description

A suggestion to fix it is use the onError property on img to render a fallback element, also, we can create an other component to handle with it.

Requirements

Checklist

• should render an image.
• should render an fallback if the photo uri is invalid.

SegmentedSwitch: SVG opacity inside input

Context

When the SVG is inside the specific input presented in the gif, it gets an opacity.

Example

bug in Table component with showAggregationRow prop

Context

The Table component has a bug when we pass the showAggregationRow prop without pass the maxColumns prop. This return the error Cannot convert undefined or null to object

Requirements

Checklist

• should render aggregationRow without pass maxColumns prop

Calendar input crash when date is null

Context

Calendar Input is crashing when the user clear the input value

Example

Description

Error stack trace when testing in https://pagarme.github.io/former-kit/storybook/?selectedKind=CalendarInput&selectedStory=Default%20CalendarInput&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel

TypeError: start is null
Stack trace:
handleConfirm@https://pagarme.github.io/former-kit/storybook/static/preview.599286065624fa872619.bundle.js:1:1869894
Ke@https://pagarme.github.io/former-kit/storybook/static/preview.599286065624fa872619.bundle.js:1:534000
commitLifeCycles@https://pagarme.github.io/former-kit/storybook/static/preview.599286065624fa872619.bundle.js:1:561839
b@https://pagarme.github.io/former-kit/storybook/static/preview.599286065624fa872619.bundle.js:1:548156
m@https://pagarme.github.io/former-kit/storybook/static/preview.599286065624fa872619.bundle.js:1:553612
w@https://pagarme.github.io/former-kit/storybook/static/preview.599286065624fa872619.bundle.js:1:553313
batchedUpdates@https://pagarme.github.io/former-kit/storybook/static/preview.599286065624fa872619.bundle.js:1:562876
tc@https://pagarme.github.io/former-kit/storybook/static/preview.599286065624fa872619.bundle.js:1:513686
vd@https://pagarme.github.io/former-kit/storybook/static/preview.599286065624fa872619.bundle.js:1:520014
 preview.599286065624fa872619.bundle.js:1:551377
	h https://pagarme.github.io/former-kit/storybook/static/preview.599286065624fa872619.bundle.js:1:551377
	b https://pagarme.github.io/former-kit/storybook/static/preview.599286065624fa872619.bundle.js:1:548567
	m https://pagarme.github.io/former-kit/storybook/static/preview.599286065624fa872619.bundle.js:1:553612
	w https://pagarme.github.io/former-kit/storybook/static/preview.599286065624fa872619.bundle.js:1:553313
	batchedUpdates https://pagarme.github.io/former-kit/storybook/static/preview.599286065624fa872619.bundle.js:1:562876
	tc https://pagarme.github.io/former-kit/storybook/static/preview.599286065624fa872619.bundle.js:1:513686
	vd https://pagarme.github.io/former-kit/storybook/static/preview.599286065624fa872619.bundle.js:1:520014

Update some dependencies

Context

we need update 3 dependencies with patch versions.

• react-dev-utils
• react-dom
• webpack-dev-server
• react-styleguidist

Requirements

Steps should accept 'pending'

Context

The Steps component only accepts current and success. However, not all steps fit in those cases. For example, if I have 4 steps to complete and I am in the third step, the fourth step is 'pending'

Refactor SegmentedSwitch to include title

Context

Currently, SegmentedSwitch component allow to pass an array of strings items and a string selected option. The items strings are used as titles for the options, which could be strange in situations where your state model differs the title you'd like to display.

Description

The proposition is to refactor the component's interface to allow better semantics:

<SegmentedSwitch
  options={[
    {
      title: 'Portuguese',
      value: 'pt-BR',
    },
    {
      title: 'English',
      value: 'en-US',
    },
  ]}
/>

Requirements

• Refactor component interface
• Refactor tests to new interface
• Refactor storybook usages

Production docs are outdated

We need to recompile the docs, we have some weird mistakes that were already fixed but the docs weren't deployed.

Add Dark base in Alert component

Context

Refactor Alert component to use the Dark base in Account pages.

Example

Zeplin: http://zpl.io/aRMjP80

Requirements

• Add Base Dark props to Alert component

Pagination must have a disabled state

'Input' grows based on "helper text"

Context

The input is growing based on the size of the "helper text" below the input.

Example