Percolate UI is a library of React components for quick and easy development of Percolate apps.

Installation

// with npm
npm install @percolate/ui

// with yarn
yarn add @percolate/ui

Usage

A quick example of how to get started:

import React from 'react'
import ReactDOM from 'react-dom'
import { Theme, Button } from '@percolate/ui'

function App() {
    return (
        <Theme>
            <Button variant="primary" label="Hello World" />
        </Theme>
    )
}

ReactDOM.render(<App />, document.querySelector('#app'))

Testing

Under the hood styled-components uses the React's context API and hooks to propagate theme props to components.

Full DOM rendering

When using full DOM rendering with enzyme, boilerplate can be reduced by creating a custom mount utility function.

import { mount } from 'enzyme'
import { seismicTheme, MockTheme } from '@percolate/ui'

const mountWithTheme = (children, options) => mount(children, {
    ...options
    wrappingComponent: MockTheme
    wrappingComponentProps: { theme: seismicTheme() }
})

Shallow rendering

The React.useContext hook is used extensively by styled-components to capture theme props from the components.

React hooks are not compatible with Shallow rendering using enzyme.shallow. When using Jest, a possible "set and forget" solution is to use a manual mock to mock react.useContext.

// {project_root}/__mocks__/react.js

const React = jest.requireActual('react')

const useContext = context => {
    const { ThemeContext } = jest.requireActual('styled-components')
    const { seismicTheme } = jest.requireActual('@percolate/ui')
    const defaultValue = React.useContext(context)

    return context === ThemeContext ? themeConfigs.seismicTheme() : defaultValue
}

module.exports = {
    ...React,
    useContext,
}

Contributing

Please read our contributing guide to learn about our development workflow, how to report issues, and how to propose improvements.

License

This project is licensed under the terms of the CPAL-1.0 license.