Skip to content

OrifInformatique/react-components-library

Repository files navigation

@orif-informatique/react-components-library

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.


Table of Contents

  1. Prerequisites
  2. Installation
  3. Usage
  4. Available Components
  5. Development
  6. Build & Distribution
  7. Versioning & Publishing
  8. Conventions
  9. FAQ
  10. License

Prerequisites

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

Installation

Install the package from npm:

npm install @orif-informatique/react-components-library

Usage

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>
    </>
  );
}

Available Components

The library provides a set of reusable UI components and form inputs.
Below is the full list with a short description for each.


Buttons

  • DefaultButton – Standard button with multiple variants (primary, secondary, tertiary, danger).
  • ScrollToTopButton – Floating utility button that scrolls the page back to the top.

Footer

  • Footer – Application footer layout component.

Header

  • Header – Application header/navigation bar.

Icon

  • Icon – Generic SVG icon component supporting multiple sizes and names.

Image

  • Image – Wrapper for optimized image rendering.

Inputs

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

  • Label – Styled label for form fields.

PopUp

  • PopUp – Modal popup component, supports title, description, and action buttons.

Snackbar

  • SnackBar – Temporary message/notification toast.

User Menu

  • UserMenu – Dropdown menu for authenticated user actions.

Development

Clone the repository and install dependencies:

git clone <repo-url>
cd react-components-library
npm install

Storybook

Run Storybook to develop and test components in isolation:

npm run storybook

Build a static Storybook bundle:

npm run build-storybook

Local build

Clean and rebuild the library:

npm run clean
npm run build

Build & Distribution

The Rollup build generates:

  • dist/index.cjs.js → CommonJS bundle
  • dist/index.esm.js → ESModule bundle
  • dist/styles.css → compiled TailwindCSS styles

Only the metadata files are published.


Versioning & Publishing

To release a new version:

  1. 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

  1. Option B, manually adjust the version number in package.json file and build the library :
"version": "1.0.0",
npm run build
  1. Publish to npm:
npm publish --access public

⚠️ Make sure you are logged in to the correct npm account before publishing:

npm whoami

Conventions

  • 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.

FAQ

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.


License

MIT

About

Library of React components to be used by all our web applications

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Contributors 3

  •  
  •  
  •