OPub UI

OPub UI component library based on a React, designed to provide a collection of reusable UI components for Open Data Platforms.

Getting Started

To get started with the component library, install the package via npm:

npm install opub-ui@latest

Usage

The following steps are required before you can start using components:

1. Import the CSS in the global stylesheet of the project.

@import url('opub-ui/dist/assets/styles.css');

2. Once you complete the initial setup, you can import components into your project as needed:

import { Badge, Button, Menu } from 'opub-ui';

3. To use visualisation components, you can import them from the opub-ui/viz package:

import { BarChart } from 'opub-ui/viz';

For MapChart, you will need to lazy load the component. Example on Data Exchange

4. There are helpful utilities and hooks that you can import from the opub-ui/utils package:

import { copyToClipboard, downloadFile } from 'opub-ui/utils';

When using with NextJs you will need to transpile the packages More Info, add this inside next.config.js :

transpilePackages: ['opub-ui']

Components

You can view the complete list of available components on Storybook. The list will grow, and there can be breaking changes at this stage of development.

Development

The source code is under the src directory. The structure is as follows:

src/
┣ components/
┣ types/
┣ utils/
┣ index.ts

Components

All components reside in this directory. This is the structure we follow for components, e.g., Checkbox:

Checkbox/
┣ Checkbox.tsx/
┣ Checkbox.module.scss/
┣ Checkbox.stories.tsx/
┣ index.ts

We rely on Sass Modules and Tailwind for styling and Storybook for developing components in isolation.

Types

In this directory, we store the type files of components that aid in type checking and other helpful typescript features.

Utils

This directory stores helpers, custom hooks, and other utility functions to aid development. These functions are also exposed to the end-user.

Bundling

We use Rollup to bundle the src for publishing on npm. We also copy the assets into the bundled dist directory during this step. You can check out the config file at ./rollup.config.mjs.

We only bundle into ESM Modules.

Contributing

Pull requests are welcome. See the contribution guidelines for more information.

Credits

Thanks to the following projects for developing in the open and sharing their work with the community:

1. Shopify Polaris
2. Radix UI
3. React Spectrum
4. React Hook Form
5. AriaKit
6. Tabler Icons

Licenses

The source code is under MIT License unless otherwise stated. This project uses multiple open-source libraries and projects. You can review the dependencies in the package.json file and check their Licenses from their GitHub repo.