open-index/open-npm huggingface dataset:
npm package: @ilo-org/eslint-config
Description: ESLint configuration for ILO Design System
Latest version: 2.0.0

# @ilo-org/eslint-config

> ESLint configuration for ILO Design System. These docs are a WIP

## Getting started

```bash
npm install -D @ilo-org/eslint-config
```

## Usage

`@ilo-org/eslint-config` provides a list of ESLint flat configurations:

| Config Name | Description                           | Internal Extends |
| ----------- | ------------------------------------- | ---------------- |
| js          | Base JavaScript config                | ⛔               |
| recommended | Recommended configuration `js` + `ts` | `js`             |
| react       | React Typescript config               | `ts` -> `js`     |

You can use any configuration you like by simply including it inside your eslint config

Just export it

```js
import configs from "@ilo-org/eslint-config";

export default configs.recommended;
```

or extend and add your own

```js
import configs from "@ilo-org/eslint-config";

export default [
  ...configs.recommended,
  {
    rules: {
      "no-console": "warn",
    },
  },
];
```

## Opinionated rules

🚨 - Displayed as an error
🚧 - Displayed as a warning
✅ - Allowed

| Rule                                              | Severity | Description                                                     |
| ------------------------------------------------- | -------- | --------------------------------------------------------------- |
| "prettier/prettier"                               | 🚨       | Is strong about formatting                                      |
| "no-console"                                      | 🚧       | Prevents the use of `console.log` but allows `warn` and `error` |
| "no-duplicate-imports"                            | 🚧       | Prevents duplicate imports                                      |
| "no-await-in-loop"                                | 🚧       | Prevents `await` inside loops                                   |
| "no-unused-vars"                                  | 🚧       | Prevents unused variables but allows `_` to be ignored          |
| "@typescript-eslint/class-literal-property-style" | 🚧       | Normalizes class literal properties                             |
| "@typescript-eslint/no-duplicate-enum-values"     | 🚧       |                                                                 |
| "@typescript-eslint/prefer-for-of"                | 🚧       | Enforces the use of `for-of`                                    |
| "@typescript-eslint/consistent-type-definitions"  | 🚧       | `interface` is preferred                                        |
| "@typescript-eslint/ban-ts-comments"              | ✅       |                                                                 |
| "@typescript-eslint/ban-ts-ignores"               | ✅       |                                                                 |

## 📝 License

Licensed under the [Apache 2.0 License](/LICENSE).
npm package: @ilo-org/icon-build-helpers
Description: Build helpers for ILO's Design System icon library
Latest version: 1.0.0

# ILO Design System - Icon Build Helpers

## Installation

```bash
npm install @ilo-org/icon-build-helpers
```

## Usage

`@ilo-org/icon-build-helpers` is used internally to power the generation of SVG-based projects:

- `@ilo-org/icons`
- `@ilo-org/icons-react`

## 🙌 Contributing

We're always looking for contributors to help us fix bugs, build new features,
or help us improve the project documentation. If you're interested, definitely
check out our [Contributing Guide](/.github/CONTRIBUTING.md)! 👀

## Acknowledgements

This package is heavily inspired by [@carbon/icon-build-helpers](https://github.com/carbon-design-system/carbon/tree/main/packages/icon-build-helpers)

## 📝 License

Licensed under the [MIT](/LICENSE).
npm package: @ilo-org/prettier-config
Description: Prettier config for ILO Design System
Latest version: 2.0.0

# @ilo-org/prettier-config

> Prettier config for the ILO Design System. These docs are a WIP.

## Getting started

```bash
npm install -D @ilo-org/prettier-config
```

## Usage

You can use this prettier configuration by creating a `prettier.config.js` file
in the root of project and using this package in the following way:

```js
import prettierConfig from "@ilo-org/prettier-config";

export default prettierConfig;
```

## 📝 License

Licensed under the [Apache 2.0 License](/LICENSE).
npm package: @ilo-org/react
Description: React components for the ILO's Design System
Latest version: 1.0.0

# ILO Design System - React Package

This package provides the implementation of the Design System using [React](https://reactjs.org). It also includes a [Storybook](https://storybook.js.org/) project for documentation and development of the components in the system. It has dependencies on the following other @ilo-org packages:

- [@ilo-org/fonts](../fonts)
- [@ilo-org/styles](../styles)
- [@ilo-org/icons](../icons)
- [@ilo-org/icons-react](../icons-react)

## Installation and Usage

For detailed instructions on installing and using this package in your project, please visit the [Storybook documentation](https://react.ui.ilo.org). 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:

```javascript
// 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:

```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
// JavaScript/TypeScript (with bundler support)
import "@ilo-org/fonts";
```

```scss
// 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](https://github.com/nvm-sh/nvm) to make sure you have the correct version of node installed.

```bash
nvm use
```

Install [pnpm](https://pnpm.io/). Check the [package.json](../../package.json) to get the correct version.

```bash
npm i -g pnpm@9.14.4
```

### Storybook

Start Storybook in development mode:

```bash
pnpm react:dev:docs
```

Build Storybook for production:

```bash
pnpm react:build:docs
```

### Building

Build the library:

```bash
pnpm react:build:lib
```

Build the library in watch mode:

```bash
pnpm --filter react dev:lib
```

### Code Quality

Lint code:

```bash
pnpm --filter react lint
```

Lint code and fix errors:

```bash
pnpm --filter react lint:fix
```

Check TypeScript types:

```bash
pnpm --filter react check
```

### Testing

Run tests:

```bash
pnpm --filter react test
```

Run tests with UI:

```bash
pnpm --filter react test:ui
```

## Contributing

For contribution guidelines, please see the [Contributing Guide](../../contributing.md).
npm package: @ilo-org/typescript-config
Description: Typescript configuration for ILO Design System
Latest version: 2.0.0

# @ilo-org/typescript-config

Typescript configuration for the ILO Design System. This provides sensible defaults which you can use for other projects as well.

## Getting started

```bash
npm install -D @ilo-org/typescript-config
```

## Usage

```json
{
  "extends": "@ilo-org/typescript-config/tsconfig.json",
  "compilerOptions": {
    "outDir": "dist"
  }
}
```

### Configuration

Adding this to your project will simply include some `tsconfig.json` settings to your own. [You can see them here](./tsconfig.json).

## 📝 License

Licensed under the [Apache 2.0 License](/LICENSE).