open-index/open-npm huggingface dataset:
npm package: @opi_pib/ds
Description: Design system OPI PIB
Author: Dawid Lubowiecki
Latest version: 2.0.3

# ds

## Color converter

https://oklch.com/

## Palette generator

https://uicolors.app/generate

## Install

### CSS

style.css

```
@layer tw, ds;

@import 'tailwindcss' layer(tw);
@import '@opi_pib/ds'; // automatic layer 'ds'
```

or

```
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@opi_pib/ds/dist/index.css" />
```

### Tailwind

style.css

```
@layer tw, ds;

@import 'tailwindcss' layer(tw);
@import '@opi_pib/ds/tailwind' layer(ds); // automatic layer 'ds'
```

### Font

https://fonts.google.com/specimen/Open+Sans

index.html

```
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400..700;1,400..700&display=swap"
  rel="stylesheet"
/>
```

style.css

```
body {
	font-family: var(--font-sans);
}
```

### Icons

index.html

```
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@opi_pib/ds/icons/ds-icons.css" />
```

or

```
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@opi_pib/ds@1.0.36/icons/ds-icons.css" />
```

file.html

```
<i class="ds-icon-edit" aria-label="Edytuj"></i>
```

or

```
<i class="ds-img-edit" aria-label="Edytuj"></i>
```
npm package: @opi_pib/ds-prime
Description: Design system preset
Author: Dawid Lubowiecki
Latest version: 21.0.2

# ds-prime

## Setup

```
import { DsPrime } from '@opi_pib/ds-prime';

export const appConfig: ApplicationConfig = {
	providers: [
		providePrimeNG({
			theme: {
				preset: DsPrime,
				options: {
					prefix: 'p',
					darkModeSelector: 'system',
					cssLayer: {
						name: 'primeng',
						order: 'tw, primeng, ds'
					}
				}
			},
			ripple: false,
			pt: {}
		})
	]
};
```
npm package: @opi_pib/eslint-config-base
Description: ESLint config
Author: Dawid Lubowiecki
Latest version: 9.4.7

# @opi_pib/eslint-config-base

## Install

```
npm install -D @opi_pib/eslint-config-base
```

## Config

eslint.config.mjs

### JS files

```
import config from '@opi_pib/eslint-config-base';

/** @type {import("eslint").Linter.Config} */
export default config;
```

### TS files

```
import config from '@opi_pib/eslint-config-base/ts';

/** @type {import("eslint").Linter.Config} */
export default config;
```

### Angular

eslint.config.mjs

```
import { js, ts } from '@opi_pib/eslint-config-base';

const ignores = ['.angular/**', 'dist/**', 'src/api/**', 'test-results/**'];

/** @type {import("eslint").Linter.Config[]} */
export default [
	{
		...js,
		ignores
	},
	{
		...ts,
		languageOptions: {
			...ts.languageOptions,
			parserOptions: {
				...ts.languageOptions.parserOptions,
				project: './tsconfig.eslint.json'
			}
		},
		ignores
	}
];

```

tsconfig.eslint.json

```
{
	"extends": "./tsconfig.app.json",
	"include": ["**/*.ts"],
	"exclude": []
}
```

## VS Code settings.json

```
{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },
  "[javascript]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
  "[typescript]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
  },
  "eslint.format.enable": true
}
```
npm package: @opi_pib/eslint-plugin-assertions
Description: ``` npm install -D eslint @opi_pib/eslint-plugin-assertions ```
Author: Dawid Lubowiecki
Latest version: 9.2.6

# @opi_pib/eslint-plugin-assertions

## Install

```
npm install -D eslint @opi_pib/eslint-plugin-assertions
```

## Config

.eslintrc.json

```
"plugins": ["@opi_pib/assertions"],
"rules": {
    "@opi_pib/assertions/assertions-code": [
        "error",
        "^[a-z0-9]{8}$"
    ],
    "@opi_pib/assertions/assertions-condition": ["error"]
}
```