opub-ui v0.3.30
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:
- Import the CSS in the global stylesheet of the project.
@import url('opub-ui/dist/assets/styles.css');
- Once you complete the initial setup, you can import components into your project as needed:
import { Badge, Button, Menu } from 'opub-ui';
- 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
- 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:
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.
1 day ago
6 days ago
6 days ago
6 days ago
15 days ago
15 days ago
15 days ago
15 days ago
15 days ago
21 days ago
21 days ago
29 days ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
7 months ago
7 months ago
8 months ago
9 months ago
9 months ago
10 months ago