ILO Design System - React Package

This package provides the implementation of the Design System using React. It also includes a Storybook project for documentation and development of the components in the system. It has dependencies on the following other @ilo-org packages:

• @ilo-org/fonts
• @ilo-org/styles
• @ilo-org/icons
• @ilo-org/icons-react

Installation and Usage

For detailed instructions on installing and using this package in your project, please visit the Storybook documentation. The Storybook includes:

• Installation instructions
• Component documentation
• Usage examples
• API references
• Code samples

Styles and Fonts

The @ilo-org/react package includes styles and fonts, so you don't need to install @ilo-org/styles or @ilo-org/fonts separately.

Importing Styles

You can import styles directly from the React package:

// Import all styles
import "@ilo-org/react/styles/index.css";

// Or import individual component styles
import "@ilo-org/react/styles/components/button.css";

Alternatively, if you're using a bundler that supports CSS imports, you can reference the styles in your HTML:

<link
  rel="stylesheet"
  href="node_modules/@ilo-org/react/lib/styles/index.css"
/>

Importing Fonts

Fonts are included as dependencies and can be imported using your bundler:

// JavaScript/TypeScript (with bundler support)
import "@ilo-org/fonts";

// SCSS
@import "~@ilo-org/fonts";

The fonts package is automatically installed as a dependency of @ilo-org/react, so you don't need to add it to your package.json.

Development

This section covers commands for developing and working with the React package locally. The commands provided should be run from the root of the repository.

Prerequisites

Use nvm to make sure you have the correct version of node installed.

nvm use

Install pnpm. Check the package.json to get the correct version.

npm i -g [email protected]

Storybook

Start Storybook in development mode:

pnpm react:dev:docs

Build Storybook for production:

pnpm react:build:docs

Building

Build the library:

pnpm react:build:lib

Build the library in watch mode:

pnpm --filter react dev:lib

Code Quality

Lint code:

pnpm --filter react lint

Lint code and fix errors:

pnpm --filter react lint:fix

Check TypeScript types:

pnpm --filter react check

Testing

Run tests:

pnpm --filter react test

Run tests with UI:

pnpm --filter react test:ui

Contributing

For contribution guidelines, please see the Contributing Guide.