open-index/open-npm huggingface dataset:
npm package: @itxura/eslint-config
Description: > Shareable config to lint your code with [ESLint](https://eslint.org/), [Stylelint](https://stylelint.io/) and [Prettier](https://prettier.io/) .
Latest version: 1.3.3

# @itxura/eslint-config

> Shareable config to lint your code with [ESLint](https://eslint.org/), [Stylelint](https://stylelint.io/) and [Prettier](https://prettier.io/) .

## Installation

```sh
$ npm install -D @itxura/eslint-config
```

## Usage

Create [`.eslintrc.js`](https://eslint.org/docs/latest/user-guide/configuring/configuration-files), [`stylelint.config.js`](http://stylelint.io/user-guide/configuration/#configuration) and [`.prettierrc.js`](https://prettier.io/docs/en/configuration.html) config files in the root of the project:

### .eslintrc.js

```js
module.exports = {
	extends: ['@itxura/eslint-config']
}
```

### stylelint.config.js

```js
module.exports = {
	extends: ['@itxura/eslint-config/stylelint']
}
```

### .prettierrc.js

```js
module.exports = {
	...require('@itxura/eslint-config/prettier')
}
```

## Usage with React

### .eslintrc.js

```js
module.exports = {
	extends: ['@itxura/eslint-config/react']
}
```

## Usage with Next.js

### .eslintrc.js

```js
module.exports = {
	extends: ['@itxura/eslint-config/nextjs']
}
```

## IDE integration

### VSCode

```js
{
	"editor.codeActionsOnSave": {
		"source.fixAll.eslint": true,
		"source.fixAll.stylelint": true
	},
	"editor.formatOnSave": true,
	"eslint.validate": [
		"javascript"
	],
	"stylelint.validate": [
		"css",
		"scss"
	],
	"css.validate": false,
	"scss.validate": false,
	"[javascript]": {
		"editor.defaultFormatter": "esbenp.prettier-vscode"
	},
	"[scss]": {
		"editor.defaultFormatter": "esbenp.prettier-vscode"
	}
}
```
npm package: @itxura/react
Description: > React components for the Itxura Design System
Latest version: 1.5.2

# @itxura/react

> React components for the Itxura Design System

## Getting started

To install `@itxura/react` in your project run the following command using [npm](https://www.npmjs.com/):

```bash
npm install -S @itxura/react
```

This package requires [Sass](http://npmjs.com/package/sass) in order to compile styles.

## Usage

The `@itxura/react` package provides components for the ITX Design System.

To use a component, you can import it directly from the package:

```javascript
import { Button } from '@itxura/react'

function MyComponent() {
	return <Button>My button</Button>
}
```

To include the styles for a specific component, you can either import all the styles from the project or include the styles for a specific component:

```scss
// Bring in all the styles for ITX
@use '@itxura/styles';

// Preferred: bring in the styles for one component
@use '@itxura/react/scss/components/button';
```

For a full list of components available, checkout our
[Storybook](https://react.itxdesignsystem.com/).

## 📖 API Documentation

If you're looking for `@itxura/react` API documentation, check out:

- [Storybook](https://react.itxdesignsystem.com/)
npm package: @itxura/styles
Description: > Styles for the Bitgune Itxura Design System
Latest version: 1.3.2

# @itxura/styles

> Styles for the Bitgune Itxura Design System

## Getting started

To install `@itxura/styles` in your project, you will need to run the following
command using [npm](https://www.npmjs.com/):

```bash
npm install -S @itxura/styles
```

This package requires [Dart Sass](http://npmjs.com/package/sass) in order to
compile. It uses
[Sass modules](https://css-tricks.com/introducing-sass-modules/) to organize the
codebase and provide exports to use.

Once you get Sass up and running in your project, make sure to configure Sass to
include `node_modules` in its `includePaths` option. For more information,
checkout the [configuration](./docs/sass.md#configuration) section in our Sass
docs.

## Usage

You can bring in all the styles for the ITX Design System by including
`@itxura/styles` in your Sass files. For example:

```scss
@use '@itxura/styles';
```

If you only would like to bring in specific components from ITX, you can
import them in a similar way:

```scss
@use '@itxura/styles/scss/reset';
@use '@itxura/styles/scss/components/accordion';
@use '@itxura/styles/scss/components/button';
@use '@itxura/styles/scss/components/checkbox';
```

There are various helpers that you can include from ITX, as well, such as a
CSS reset, grid, breakpoint helpers, and more. You can include these similar to
how you bring in components:

```scss
// Bring in the CSS Reset
@use '@itxura/styles/scss/reset';

// Bring in the CSS Grid
@use '@itxura/styles/scss/grid';
```

To learn more about the various helpers that `@itxura/styles` provides, checkout
the overview of the files available to use in our
[Sass docs](./docs/sass.md#files).

## Theming

You can change the default theme of ITX by doing the following:

```scss
@use '@itxura/styles/scss/themes';
@use '@itxura/styles/scss/theme' with (
	$theme: themes.$g100
);
```

This example uses a built-in theme from ITX provided by the `scss/themes`
entrypoint. You can also use a custom theme, or add your own custom tokens to
extend the theme.

```scss
// Configure with a custom theme
@use '@itxura/styles/scss/theme' with (
	$theme: (
		background: #e2e2e2,
		text-primary: #ffffff
	)
);
```

```scss
// Extend the g100 theme with your own tokens
@use '@itxura/styles/scss/themes';
@use '@itxura/styles/scss/theme' with (
	$fallback: themes.$g100,
	$theme: (
		custom-token-01: #000000
	)
);
```

### Design tokens

You can access the design tokens defined by the ITX Design System through the
`@itxura/styles/scss/theme` entrypoint. This file will allow you to refer to
tokens using Sass Variables as well as get the current value for any token in
the current theme. For example:

```scss
@use '@itxura/styles/scss/theme';

body {
	background: theme.$background;
}
```

For a full list of tokens available for you to use, check out our
[theming documentation](../themes/docs/sass.md#tokens).

## 📖 API Documentation

If you're looking for `@itxura/styles` API documentation, check out:

- [Sass](./docs/sass.md)
npm package: @itxura/vue
Description: > Vue components for the Itxura Design System
Latest version: 1.0.6

# @itxura/vue

> Vue components for the Itxura Design System

## Getting started

To install `@itxura/vue` in your project, you will need [Vue.js](https://vuejs.org/) **version 3+**. Run the following command using [npm](https://www.npmjs.com/):

```bash
npm install -S @itxura/vue
```

This package requires [Sass](http://npmjs.com/package/sass) in order to compile styles.

## Usage

The `@itxura/vue` package provides components for the ITX Design System.

To use a component, you can import it directly from the package:

```html
<!-- App.vue -->
<script>
	import { ItxButton } from '@itxura/vue'
</script>

<ItxButton> My button </ItxButton>
```

Or import the whole package

```javascript
import { createApp } from 'vue'
import App from './App.vue'
import ItxComponents from '@itxura/vue'

const app = createApp(App)

app.use(ItxComponents)
```

To include the styles for a specific component, you can either import all the styles from the project or include the styles for a specific component:

```scss
// Bring in all the styles for ITX
@use '@itxura/styles';

// Preferred: bring in the styles for one component
@use '@itxura/vue/scss/components/button';
```

For a full list of components available, checkout our
[Storybook](https://vue.itxdesignsystem.com/).

## 📖 API Documentation

If you're looking for `@itxura/vue` API documentation, check out:

- [Storybook](https://vue.itxdesignsystem.com/)