@engie-group/fluid-design-system-react
Version:
Fluid Design System React
103 lines (68 loc) • 3.7 kB
Markdown
# Engie's React components of the Fluid design system
[Fluid](https://www.engie.design/fluid-design-system/) is the Engie's design system, a collection of reusable components and styles used to build Engie's digital products.
Here is the package to benefit from Fluid's components and styles in your React project.
- [Prerequisites](#prerequisites)
- [Versioning](#versioning)
- [Installation](#installation)
- [Documentation and usage](#documentation-and-usage)
- [Troubleshooting and feature requests](#troubleshooting-and-feature-requests)
## Prerequisites
Before you begin, ensure that your React project meets the following requirements:
- **React 19 or higher**. This library does not support React versions prior to version 19
- An initialized React project
## Versioning
⚠️ This package doesn't follow semantic versioning, breaking changes are introduced in minor versions.
Versions are structured as `GLOBAL.BREAKING.MINOR` where:
- `GLOBAL` is the **global version of Fluid Design System** (ex: Fluid 4, Fluid 5, Fluid 6 etc.). We are currently at `Fluid 6`.
- `BREAKING` is incremented for each **breaking-change** (component API change, layout change, etc.).
- `MINOR` is incremented for bug **fixes, features and non-breaking changes**.
We recommend **using `~` semver range** to avoid breaking changes affecting your application.
Moreover, we recommend checking the [CHANGELOG](https://fluid.design.digital.engie.com/fluid-design-system/storybook/react/index.html?path=/docs/docs-changelog--documentation) before updating the package after a release.
## Installation
Install the required packages using your preferred package manager:
```bash
# Using pnpm
pnpm add @engie-group/fluid-design-system-react
# Using npm
npm install @engie-group/fluid-design-system-react
# Using yarn
yarn add @engie-group/fluid-design-system-react
```
### CSS
Component styling is based on CSS classes and some CSS variables (called design tokens).
In order for each component to be rendered as expected, you need to include a CSS file as global stylesheet in your project.
You can include it in your HTML `<head>` :
```html
<link
href="<your-relative-path-to-node_modules>/@engie-group/fluid-design-system-react/lib/fluid-design-system.css"
rel="stylesheet"
/>
```
or in your JavaScript entry point:
```js
import '@engie-group/fluid-design-system-react/css';
```
or in your CSS entry file :
```css
@import '@engie-group/fluid-design-system-react/css';
```
> ℹ️ We recommend including it before your own stylesheets to avoid any conflicts.
## Documentation and usage
For a better comprehension of the components and their usage, we recommend checking our [Storybook](https://fluid.design.digital.engie.com/fluid-design-system/storybook/react/index.html) documentation.
For Fluid overall documentation, you can check our [Fluid documentation](https://www.engie.design/fluid-design-system/).
If you have correctly followed the installation steps, you should be able to use Fluid components in your project.
All components are exported in `@engie-group/fluid-design-system-react`:
```tsx
import { NJButton, NJBadge, NJAvatarRoot } from '@engie-group/fluid-design-system-react';
export default function App() {
return (
<>
<NJButton label="My button"/>
<NJBadge variant="warning">7</NJBadge>
<NJAvatarRoot label="My avatar" />
</>
);
}
```
## Troubleshooting and feature requests
If you encounter any issues, or you want any component or feature to be implemented, please create an issue or a feature request on our [GitHub repository](https://github.tools.digital.engie.com/GBSEngieDigitalDesignSystem/fluid-design-system/issues).