Dexma UI Components

React components library by Dexma

Table of contents

• Usage
• Installation
• Documentation
• Changelog
• Testing
• Contributing

Usage

1. Install with npm: npm install --save @dexma/ui-components

2. Use the component importing from the library

import { Button } from '@dexma/ui-components';
<Button text='Some text' variant='primary' size='medium' />;

3. Optional: You can set the Theme with your personal variables, we provide the Theme component and you only need to set the options:

import { Theme, Button } from '@dexma/ui-components';
<Theme
    options={{
        primary: '#aa0800',
    }}
>
    <Button text='Some text' variant='primary' size='medium' />
</Theme>;

You can find all the configuration in the theme file theme.js

Installation

To run the installation locally on your machine, you need Node.js installed on your computer.

git clone https://github.com/dexma/ui-components
cd ui-components
npm install

Documentation

For the documentation we use storybook docs that transforms our stories into world-class component documentation.

• Run storybook: npm run storybook
• If you need to export static doc run npm run build-storybook this will export a static folder with all our component docs

Changelog

For changelogs, check out the CHANGELOG section of ui-components

Testing

We use React Testing Library as our testing lib you can check out the documentation

• To run our test: npm run test

Note: Due to the use of third-party libraries, some components use methods that JSDOM (the DOM implementation used by Jest) hasn't implemented yet, testing it is not easily possible. This is the case with window.matchMedia(). Jest returns TypeError: window.matchMedia is not a function and doesn't properly execute the test.

In this case, to resolve this issue to execute successfully your tests when @dexma/ui-components is used, include the following code on setupTest file for Jest to mock matchMedia and it should solve the issue:

Object.defineProperty(window, 'matchMedia', {
    writable: true,
    value: jest.fn().mockImplementation((query) => ({
        matches: false,
        media: query,
        onchange: null,
        addListener: jest.fn(), // deprecated
        removeListener: jest.fn(), // deprecated
        addEventListener: jest.fn(),
        removeEventListener: jest.fn(),
        dispatchEvent: jest.fn(),
    })),
});

Contributing

Check out the CONTRIBUTING document in the root of the repository to learn how you can contribute.