OPub UI
Welcome to our OPub UI. This component library is 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-cdl/ui --save
If you prefer Yarn:
yarn add @opub-cdl/ui
Usage
The following steps are required before you can start using components:
- Import the CSS into the project. In the case of Nextjs, it's
_app.tsx
file.
import '@opub-cdl/ui/dist/assets/styles.css';
- This step is for
SSR
apps. We use React Aria for some components. To ensure it works correctly in Next.js, you must wrap the App withSSRProvider
. More Info
import { SSRProvider } from 'react-aria';
<SSRProvider>
<Component {...pageProps} />
</SSRProvider>;
- Once you complete the initial setup, you can import components into your project as needed:
import { Badge, Button, Menu } from 'opub-cdl/ui';
When using with NextJs you will need to transpile the packages More Info, add this inside
next.config.js
:
transpilePackages: ['@opub-cdl/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/
┣ tokens/
┣ 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/
┣ Checkbox.test.tsx/
┣ index.ts
We use Vitest for unit testing and Storybook for developing components in isolation.
As you notice in the directory, we use Sass Modules for styling.
Tokens
Although we have a css
based token file at assets/tokens.css
which relies on CSS Variables. This directory stores those tokens in objects. One use-case of its usage is the Box
component.
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.
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.