A reusable React component library built with Rollup, Storybook, and TailwindCSS.
It provides a set of shared UI components and styles to ensure design consistency across projects.
- Prerequisites
- Installation
- Usage
- Available Components
- Development
- Build & Distribution
- Versioning & Publishing
- Conventions
- FAQ
- License
This library relies on the following peer dependencies.
They must be installed in the parent project:
react
^18.3.1 || ^19
react-dom
^18.3.1 || ^19
clsx
^2.1.1
prop-types
^15.8.1
Install them if missing:
npm install react react-dom clsx prop-types
Install the package from npm:
npm install @orif-informatique/react-components-library
Import the components you need, and don’t forget to include the library’s styles:
import { PopUp, DefaultButton } from "@orif-informatique/react-components-library";
import "@orif-informatique/react-components-library/styles.css";
function Example() {
const [open, setOpen] = React.useState(false);
return (
<>
<DefaultButton
label="Open"
variant="primary"
onClick={() => setOpen(true)}
/>
<PopUp
open={open}
title="Confirmation"
description="Are you sure you want to continue?"
onClose={() => setOpen(false)}
>
<DefaultButton label="Yes" variant="primary" />
<DefaultButton label="No" variant="danger" />
</PopUp>
</>
);
}
The library provides a set of reusable UI components and form inputs.
Below is the full list with a short description for each.
- DefaultButton – Standard button with multiple variants (
primary
,secondary
,tertiary
,danger
). - ScrollToTopButton – Floating utility button that scrolls the page back to the top.
- Footer – Application footer layout component.
- Header – Application header/navigation bar.
- Icon – Generic SVG icon component supporting multiple sizes and names.
- Image – Wrapper for optimized image rendering.
A wide range of controlled form input components, styled consistently.
- InputCheckbox – Checkbox input with label support.
- ColorChange – Color picker input.
- InputDate – Date picker input.
- InputEmail – Email input with validation.
- InputFile – File upload input with custom button trigger.
- InputHidden – Hidden field for form usage.
- InputImage – Image upload input.
- InputMultiSelect – Multi-select dropdown.
- InputNumber – Numeric input with validation.
- InputPassword – Password input with masking.
- InputRadio – Radio button group.
- InputSearch – Search input with built-in clear option.
- InputSingleSelect – Single-select dropdown.
- InputText – Standard text input.
- InputTextarea – Multi-line text input.
- Label – Styled label for form fields.
- PopUp – Modal popup component, supports title, description, and action buttons.
- SnackBar – Temporary message/notification toast.
- UserMenu – Dropdown menu for authenticated user actions.
Clone the repository and install dependencies:
git clone <repo-url>
cd react-components-library
npm install
Run Storybook to develop and test components in isolation:
npm run storybook
Build a static Storybook bundle:
npm run build-storybook
Clean and rebuild the library:
npm run clean
npm run build
The Rollup build generates:
dist/index.cjs.js
→ CommonJS bundledist/index.esm.js
→ ESModule bundledist/styles.css
→ compiled TailwindCSS styles
Only the metadata files are published.
To release a new version:
- Option A, bump the version:
# For a patch version incrementation (1.0.0 > 1.0.1)
npm version patch -m "chore(release): %s"
# For a minor version incrementation (1.0.0 > 1.1.0)
npm version minor -m "chore(release): %s"
# For a major version incrementation (1.0.0 > 2.0.0)
npm version major -m "chore(release): %s"
OR
- Option B, manually adjust the version number in package.json file and build the library :
"version": "1.0.0",
npm run build
- Publish to npm:
npm publish --access public
npm whoami
- Component naming:
PascalCase
- Props naming:
camelCase
- Exports: All components are exported at the root level.
Example:import { PopUp } from "@orif-informatique/react-components-library";
- Styles: Must be imported explicitly:
import "@orif-informatique/react-components-library/styles.css";
- Peer dependencies: Always provided by the parent app.
Q: Do I need a public/
folder for assets?
A: No. Assets and styles are bundled inside the library. You only need to import the provided styles.css
.
Q: What Node.js version is required?
A: Use Node.js 20.19+ (or 22.12+) to match the Vite engine requirements.
Q: Can I use this with Create React App?
A: Yes. Both CRA and Vite are supported.