tubbynl / bricks

MyOnlineStore's react component library ⚛️

Bricks

Bricks is an open source component library built by MyOnlineStore. It uses React, TypeScript (optional) and styled-components.

Some nice features:

• Flexible theming
• Fully tested
• Fully typed
• Testable via data-testid attributes

Try it out!

Storybook

Playground

Installation

Install Bricks using: npm install @myonlinestore/bricks.

Usage

Basic usage

All components are named exports. For instance:

import { Button } from '@myonlinestore/bricks';

<Button title="Click me!" variant="primary" />

ThemeProvider

Bricks uses styled-components to make it flexible in theming. This requires your application to have a ThemeProvider somewhere up in the component tree. Bricks comes with our own MosTheme or you can create your own custom theme.

MosTheme

import { MosTheme } from '@myonlinestore/bricks';
import YourApp from './App';

<MosTheme>
    <YourApp />
</MosTheme>

Custom Theme

import { MerchantTheme, ThemeType } from '@myonlinestore/bricks';
import YourApp from './App';

const themeObject: ThemeType = {
    // See ThemeType for all theme options
    // Example: https://github.com/MyOnlineStore/bricks/blob/master/src/themes/MosTheme/MosTheme.theme.ts
}

<MerchantTheme theme={themeObject}>
    <YourApp />
</MerchantTheme>

Contributing

Feel free to help us develop Bricks! If you have a new feature suggestion please create an issue with the label RFC so we can discuss the desired solution. For more info please read our guidelines.

Development

• Clone the repo
• Run npm install
• Run either npm run watch to start the dev-server running on localhost:9001 or run npm run build to build a dist to be used with npm link

License

GPL-3.0