open-index/open-npm huggingface dataset:
npm package: @impact-market/ui
Description: [![NPM](https://img.shields.io/npm/v/@impact-market/ui.svg)](https://www.npmjs.com/package/@impact-market/ui) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
Latest version: 1.6.3

# @impact-market/ui

[![NPM](https://img.shields.io/npm/v/@impact-market/ui.svg)](https://www.npmjs.com/package/@impact-market/ui) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

[impactMarket design system](https://impactmarket-ui.vercel.app/)


## Install

```bash
yarn add @impact-market/ui
```

## Develop

1. Clone it
```bash
git clone git@github.com:impactMarket/ui.git
```

2. Install [nvm](https://github.com/nvm-sh/nvm) then run it and install the correct version if needed
```bash
nvm use
```

3. Install project
```bash
yarn install
```

4. Develop
```bash
yarn storybook
```


## TODO
- Write project aspects
- Write development notes
npm package: @impact-react/babel-transform
Description: Reactive contexts for React
Author: Christian Alfoni
Latest version: 2.0.0

<p align="center">
  <img align="center" src="./Icon.png" />
</p>

<p align="center">
  <a href="https://impact-react.dev" style="font-size:18px;">https://impact-react.dev</a>
</p>
npm package: @impact-react/legend
Description: Reactive contexts for React
Author: Christian Alfoni
Latest version: 2.0.0

<p align="center">
  <img align="center" src="./Icon.png" />
</p>

<p align="center">
  <a href="https://impact-react.dev" style="font-size:18px;">https://impact-react.dev</a>
</p>
npm package: @impact-react/mobx
Description: Reactive contexts for React
Author: Christian Alfoni
Latest version: 2.0.0

<p align="center">
  <img align="center" src="./Icon.png" />
</p>

<p align="center">
  <a href="https://impact-react.dev" style="font-size:18px;">https://impact-react.dev</a>
</p>
npm package: @impact-react/preact
Description: Reactive contexts for React
Author: Christian Alfoni
Latest version: 2.0.0

<p align="center">
  <img align="center" src="./Icon.png" />
</p>

<p align="center">
  <a href="https://impact-react.dev" style="font-size:18px;">https://impact-react.dev</a>
</p>
npm package: @impact-react/reactive-context
Description: Reactive contexts for React
Author: Christian Alfoni
Latest version: 1.0.0

<p align="center">
  <img align="center" src="./Icon.png" />
</p>
<p align="center">
  <b>Observable contexts for React</b>
</p>

## Why

Observable primitives are typically organised in a global context. With `impact-react-store` you can organise any observable primitives and the related state management with React contexts.

Read more about [impact-react](https://impact-react.dev) and how to use nested stores.

## Install

```sh
npm install impact-react-store
```

## Configure store

To use observable primitives with the React context you need to configure the props so that they also become observable. When React reconciles the props passed into the store might change, which you will be able to observe.

- [mobx](#mobx)
- [jotai](#jotai)
- [legend](#legend)

### mobx

```ts
import { configureStore } from "impact-react-store";
import { observable } from "mobx";

export const createStore = configureStore((prop) => {
  const box = observable.box(prop);

  return {
    get() {
      return box.get();
    },
    set(newProp) {
      box.set(newProp);
    },
  };
});
```

There is no change to the typing.

### jotai

```ts
import { configureStore } from "impact-react-store";
import { atom } from "jotai";

export const createStore = configureStore((prop) => {
  const value = atom(prop);
  const getter = atom((get) => get(value));

  return {
    get() {
      return getter;
    },
    set(newProp) {
      value.set(newProp);
    },
  };
});
```

Type the props as `type Props = { foo: Atom<string> }`

### Legend

```ts
import { configureStore } from "impact-react-store";
import { observable, computed } from "@legendapp/state";

export const createStore = configureStore((prop) => {
  const value = observable(prop);
  const getter = computed(() => value.get());

  return {
    get() {
      return getter;
    },
    set(newProp) {
      value.set(newProp);
    },
  };
});
```

Type the props as `type Props = { foo: ObservableComputed<string> }`
npm package: @impact-react/signals
Description: Reactive contexts for React
Author: Christian Alfoni
Latest version: 2.0.0

<p align="center">
  <img align="center" src="./Icon.png" />
</p>

<p align="center">
  <a href="https://impact-react.dev" style="font-size:18px;">https://impact-react.dev</a>
</p>
npm package: @impact-react/store
Description: Reactive contexts for React
Author: Christian Alfoni
Latest version: 1.1.0

<p align="center">
  <img align="center" src="./Icon.png" />
</p>

<p align="center">
  <a href="https://impact-react.dev" style="font-size:18px;">https://impact-react.dev</a>
</p>
npm package: @impact-tools/git-branch-validator
Description: Git branch name validator
Latest version: 3.0.0

# @impact-tools/git-branch-validator

[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/labidiaymen/git-branch-validator/blob/master/LICENSE)
[![npm version](https://img.shields.io/npm/v/@impact-tools/git-branch-validator.svg?style=flat)](https://www.npmjs.com/package/@impact-tools/git-branch-validator)
[![codecov](https://codecov.io/gh/labidiaymen/@impact-tools/git-branch-validator/branch/master/graph/badge.svg)](https://codecov.io/gh/labidiaymen/@impact-tools/git-branch-validator)


[![Known Vulnerabilities][snyk-image]][snyk-url]
[![npm download][download-image]][download-url]

[snyk-image]: https://snyk.io/test/npm/@impact-tools/git-branch-validator/badge.svg?style=flat-square
[snyk-url]: https://snyk.io/test/npm/@impact-tools/git-branch-validator
[download-image]: https://img.shields.io/npm/dm/@impact-tools/git-branch-validator.svg?style=flat-square
[download-url]: https://npmjs.org/package/@impact-tools/git-branch-validator

Git branch name validator through hooks.

## Description

**@impact-tools/git-branch-validator** is git branch validator based on [Husky](https://github.com/typicode/husky), so make sure that your repository have installed husky (**version >= v1.0.0**) successfully.

<!--

Description here.

-->

## Install

```bash

$ npm i @impact-tools/git-branch-validator --save-dev

```

## Usage

**Configure hooks and pattern using package.json.**

"git-branch-validator" attribute in package.json is optional, we have set default pattern and errorMsg in project. But you can still defined them as you like.

```js

// {app_root}/package.json
{
  "husky": {
    "hooks": {
      "pre-push": "branch-validator"
    }
  },
  "git-branch-validator": {
    "pattern": "^(master|develop){1}$|^(feature|fix|hotfix|release)\/.+$",
    "errorMsg": "your error message",
    "sandbox" : "https://regex101.com/r/XXXXXX" // <-- optional
    "showPattern" : true // <-- optional
  }
}
```

**Default pattern: ^(master|develop){1}$|^(feature|fix|hotfix|release)\/.+$**

**Example:** `feature/test/pattern-test` would be passed.

**Avaliable patterns:**

- ^(feature|fix|hotfix|release)\/.+ - branch has to start with _feature/, fix/, release/ or hotfix/_

* (feature|release|hotfix)\/(JIRA-\d+) - it should look like _feature/JIRA-1234_

- (feature|release|hotfix)\/(JIRA-\d+\/)?[a-z-]+ - it should look like _feature/branch-name_ or include JIRA's code like _feature/JIRA-1234/branch-name_

**You can also configure hooks and pattern using `.git-branch-validatorrc`, `..git-branch-validatorrc.json` or `.git-branch-validatorrcrc.js` file.**

## Requirements

1. Husky requires Node `>= 8.6.0` and Git `>= 2.13.2`

2. Husky version `>= 1.0.0`

## License

[MIT](LICENSE)
npm package: @impact-x/button
Description: Button component for products using _Impact X_ design system.
Latest version: 1.1.20

# @impact-x/button

Button component for products using _Impact X_ design system.

## Installation

To install @impact-x/button in your project, run the following command:

```bash
npm install -S @impact-x/button
```

If you prefer Yarn, use the following command instead:

```bash
yarn add @impact-x/button
```

## Usage

### HTML (via CDN)

If you're using a simple HTML page without any JavaScript framework, you can add your component via a script tag.

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://unpkg.com/@impact-x/button@latest"></script>
  </head>
  <body>
    <ix-button variant="secondary">Button Text</ix-button>
  </body>
</html>
```

## API documentation

https://tw-impact-x.thoughtworks-labs.net/#/Components/Forms/Button
npm package: @impact-x/color
Description: Colors for products using _Impact X_ design system.
Latest version: 1.6.1

# @impact-x/color

Colors for products using _Impact X_ design system.

## Installation

To install @impact-x/color in your project, run the following command:

```bash
npm install -S @impact-x/color
```

If you prefer Yarn, use the following command instead:

```bash
yarn add @impact-x/color
```

## Usage

All color variables follow the naming convention: `$ix-color-{swatch}-{grade}`.
Note that not all swatches have grades and this field can be removed in those cases.

### Sass

In Sass, you can import and use all color variables available:

```scss
@import '~@impact-x/color';

div {
  color: $ix-color-purple;
  background-color: $ix-color-grey-50;
}
```

### JavaScript

For JavaScript, you can import and use this module:

```js
import { ixColorAmethyst } from '@impact-x/color';

...

const theme = {
  primaryColor: `${ixColorAmethyst}`;
}`;
```

## API documentation

https://tw-impact-x.thoughtworks-labs.net/#/Basics/Color
npm package: @impact-x/input
Description: Input component for products using _Impact X_ design system.
Latest version: 1.1.23

# @impact-x/input

Input component for products using _Impact X_ design system.

## Installation

To install @impact-x/input in your project, run the following command:

```bash
npm install -S @impact-x/input
```

If you prefer Yarn, use the following command instead:

```bash
yarn add @impact-x/input
```

## Usage

### HTML (via CDN)

If you're using a simple HTML page without a JavaScript framework, you can add your component via a script tag.

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://unpkg.com/@impact-x/input@latest"></script>
  </head>
  <body>
    <ix-input></ix-input>
  </body>
</html>
```

## API documentation

https://tw-impact-x.thoughtworks-labs.net/#/Components/Forms/Input
npm package: @impact-x/link
Description: Link styling for products using _Impact X_ design system.
Latest version: 0.1.1

# @impact-x/link

Link styling for products using _Impact X_ design system.

## Installation

To install @impact-x/link in your project, run the following command:

```bash
npm install -S @impact-x/link
```

If you prefer Yarn, use the following command instead:

```bash
yarn add @impact-x/link
```

## Usage

This will style the `a` HTML elements.

### Sass

```scss
@import '~@impact-x/link';
```

### JavaScript

```js
import '@impact-x/link';

export default () => <a>Your heading</a>;
```

## API documentation

https://tw-impact-x.thoughtworks-labs.net/#/Design%20tokens/Link
npm package: @impact-x/nav
Description: Nav web component for products using the _Impact X_ design system.
Latest version: 1.7.4

# @impact-x/nav

Nav web component for products using the _Impact X_ design system.

## Installation

To install @impact-x/nav in your project, run the following command:

```bash
npm install -S @impact-x/nav
```

If you prefer yarn, use the following command instead:

```bash
yarn add @impact-x/nav
```

## Usage

### HTML (via CDN)

If you're using a simple HTML page without a JavaScript framework, you can add your component via a script tag.

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://unpkg.com/@impact-x/nav@latest"></script>
  </head>
  <body>
    <ix-nav variant="primary">
      <ol>
        <li><a href="">nav text</a></li>
        <li><a href="">nav text</a></li>
        <li><a href="">nav text</a></li>
      </ol>
    </ix-nav>
  </body>
</html>
```

## API documentation

https://tw-impact-x.thoughtworks-labs.net/#/Components/Nav
npm package: @impact-x/react-button
Description: Button component for products using _Impact X_ design system.
Latest version: 1.1.22

# @impact-x/react-button

Button component for products using _Impact X_ design system.

## Installation

To install @impact-x/react-button in your project, run the following command:

```bash
npm install -S @impact-x/react-button
```

If you prefer Yarn, use the following command instead:

```bash
yarn add @impact-x/react-button
```

## Usage

You can import and use this module:

```jsx
import Button from '@impact-x/react-button';

<Button variant="primary">Button Text</Button>;
<Button outline>Button Text</Button>;
```

## API documentation

https://tw-impact-x.thoughtworks-labs.net/#/Components/Forms/Button
npm package: @impact-x/react-input
Description: Input component for products using _Impact X_ design system.
Latest version: 1.1.25

# @impact-x/react-input

Input component for products using _Impact X_ design system.

## Installation

To install @impact-x/react-input in your project, run the following command:

```bash
npm install -S @impact-x/react-input
```

If you prefer Yarn, use the following command instead:

```bash
yarn add @impact-x/react-input
```

## Usage

You can import and use this module:

```jsx
import Input from '@impact-x/react-input';

<Input />;
```

## API documentation

https://tw-impact-x.thoughtworks-labs.net/#/Components/Forms/Input
npm package: @impact-x/react-nav
Description: Nav component for products using _Impact X_ design system.
Latest version: 1.2.16

# @impact-x/react-nav

Nav component for products using _Impact X_ design system.

## Installation

To install @impact-x/react-nav in your project, run the following command:

```bash
npm install -S @impact-x/react-nav
```

If you prefer Yarn, use the following command instead:

```bash
yarn add @impact-x/react-nav
```

## Usage

You can import and use this module:

```jsx
import Nav from '@impact-x/react-nav';

<Nav
  menuItems={[
    { id: 'nav-1', title: 'Home' },
    { id: 'nav-2', title: 'Guide' },
  ]}
  onMenuClick={() => {}}
  activeMenuId="nav-1"
  headerTitle="Platform"
  styles="background-color:#173C4D;"
/>;
```

## API documentation

https://tw-impact-x.thoughtworks-labs.net/#/Components/Nav
npm package: @impact-x/react-select
Description: Select component for products using _Impact X_ design system.
Latest version: 1.1.22

# @impact-x/react-select

Select component for products using _Impact X_ design system.

## Installation

To install @impact-x/react-select in your project, run the following command:

```bash
npm install -S @impact-x/react-select
```

If you prefer Yarn, use the following command instead:

```bash
yarn add @impact-x/react-select
```

## Usage

You can import and use this module:

```jsx
import Select from '@impact-x/react-select';

<Select />;
```

```jsx
import Select from '@impact-x/react-select';

<label htmlFor="select-1">All select fields must have a label</label>
  <Select control-id="select-1">
    <option value="value 1">Option 1</option>
    <option value="value 2" selected>Option 2</option>
    <option value="value 3">Option 3</option>
  </Select>;
```

## API documentation

https://tw-impact-x.thoughtworks-labs.net/#/Components/Forms/Select
npm package: @impact-x/select
Description: Select component for products using _Impact X_ design system.
Latest version: 0.11.27

# @impact-x/select

Select component for products using _Impact X_ design system.

## Installation

To install @impact-x/select in your project, run the following command:

```bash
npm install -S @impact-x/select
```

If you prefer Yarn, use the following command instead:

```bash
yarn add @impact-x/select
```

## Usage

### HTML (via CDN)

If you're using a simple HTML page without any JavaScript framework, you can add your component via a script tag.

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://unpkg.com/@impact-x/select@latest"></script>
  </head>
  <body>
    <ix-select control-id="select">
      <option value="value 1">Option 1</option>
      <option value="value 2" selected>Option 2</option>
      <option value="value 3">Option 3</option>
    </ix-select>
  </body>
</html>
```

## API documentation

https://tw-impact-x.thoughtworks-labs.net/#/Components/Forms/Select
npm package: @impact-x/space
Description: Spacing for products using _Impact X_ design system.
Latest version: 0.4.6

# @impact-x/space

Spacing for products using _Impact X_ design system.

## Installation

To install @impact-x/space in your project, run the following command:

```bash
npm install -S @impact-x/space
```

If you prefer Yarn, use the following command instead:

```bash
yarn add @impact-x/space
```

## Usage

All space variables follow the naming convention: `$ix-space-{size}`.

### Sass

In Sass, you can import and use all space variables available:

```scss
@import '~@impact-x/space';

div {
  padding: $ix-space-padding-s;
  margin-top: $ix-space-margin-xs;
}
```

### JavaScript

For JavaScript, you can import and use this module:

```js
import { ixSpacePaddingS, ixSpaceMarginXS } from '@impact-x/space';

...

<div style={{
  padding: `${ixSpacePaddingS}`,
  margin: `${ixSpaceMarginXS}`,
}}
`;
```

## API documentation

https://tw-impact-x.thoughtworks-labs.net/#/Basics/Space
npm package: @impact-x/styles
Description: Styling for products using _Impact X_ design system.
Latest version: 1.5.1

# @impact-x/styles

Styling for products using _Impact X_ design system.

## Installation

To install @impact-x/styles in your project, run the following command:

```bash
npm install -S @impact-x/styles
```

If you prefer Yarn, use the following command instead:

```bash
yarn add @impact-x/styles
```

## Usage

You can import the package directly and it will provide access to all _Impact X_ styling mixins. Note that you now also need to add a config file in order to apply these mixins to your semantic HTML, as this is no longer done automatically.

An example can be found on the [_Impact X_ documentation site](https://tw-impact-x.thoughtworks-labs.net/#/Styles) which also details each mixin available.

### Sass

```scss
@import '~@impact-x/styles';
```

### JavaScript

```js
import '@impact-x/styles';
```

## API documentation

https://tw-impact-x.thoughtworks-labs.net/#/Styles
npm package: @impact-x/tokens
Description: Design tokens for products using _Impact X_ design system.
Latest version: 0.5.21

# @impact-x/tokens

Design tokens for products using _Impact X_ design system.

## Installation

### All available tokens in one package

To install @impact-x/tokens in your project, run the following command using npm:

```bash
npm install -S @impact-x/tokens
```

If you prefer Yarn, use the following command instead:

```bash
yarn add @impact-x/tokens
```

### Tokens as individual packages

You can also install each token as individual packages:

```bash
yarn add @impact-x/color
yarn add @impact-x/typography
yarn add @impact-x/space
```

All design token packages follow the naming convention: `@impact-x/{token-name}`. Please refer to the corresponding documentation page for more information.

## Usage

### Sass

In Sass, you can import and use all the design tokens available:

```scss
@import '~@impact-x/tokens';

div {
  color: $ix-color-purple;
}
```

### JavaScript

For JavaScript, you can import and use this module:

```js
import { ixColorAmethyst } from '@impact-x/tokens';

...

const theme = {
  primaryColor: ${ixColorAmethyst};
}`;
```

## API documentation

https://tw-impact-x.thoughtworks-labs.net/#/Basics
npm package: @impact-x/typography
Description: Typography styling for products using _Impact X_ design system.
Latest version: 0.16.2

# @impact-x/typography

Typography styling for products using _Impact X_ design system.

## Installation

To install @impact-x/typography in your project, run the following command:

```bash
npm install -S @impact-x/typography
```

If you prefer Yarn, use the following command instead:

```bash
yarn add @impact-x/typography
```

## Usage

The typography package provides variables in both Sass and JavaScript to set your font family, and style type weights and colors.

### Sass

```scss
@import '~@impact-x/typography';
```

```scss
a {
  font-size: $ix-font-size-s;
}`
```

### JavaScript

```js
import '@impact-x/typography';

export default () => (
  <h1 style={{ fontSize: `${ixFontSizeS}` }}>Your heading</h1>
);
```

## API documentation

https://tw-impact-x.thoughtworks-labs.net/#/Basics/Typography