open-index/open-npm huggingface dataset:
npm package: @open-condo/icons
Description: A set of SVG icons presented as React components
Author: Matthew Savelev
Latest version: 2.6.0

[npm-badge-link]: https://img.shields.io/npm/v/@open-condo/icons?style=flat-square
[npm-pkg-link]: https://www.npmjs.com/package/@open-condo/icons

# `@open-condo/icons` [![NPM][npm-badge-link]][npm-pkg-link]
> A set of SVG icons presented as React components

 
## Table of contents
[Workflow](#workflow)\
[Installation](#installation)\
[Usage](#usage)

## Workflow

Icons set is maintained in Figma by design team, — this is a primary source of changes.
Developers should only pull and commit changes, made by design team.

See [Import](./docs/IMPORT.md)

## Installation

To install package simply run the following command if you're using npm as your package manager:
```bash
npm i @open-condo/icons
```
or it's yarn alternative
```bash
yarn add @open-condo/icons
```

## Usage
You can import needed component with its props directly from package entry point like this:
```typescript
import { Car } from '@open-condo/icons'
```

By default, all icons are in `large` size and inherit color from a `color` style of current container.
You can change it by passing some extra props:
```typescript jsx
<Car color='red' size='small'/>
```

Icons can also inherit their size from parent context. To achieve that, pass `size='auto'` prop to it
```typescript jsx
<Car size='auto'/> // width = height = 1em
```
npm package: @open-condo/miniapp-utils
Description: A set of helper functions / components / hooks used to build new condo apps fast
Author: Matthew Savelev
Latest version: 3.2.0

[npm-badge-link]: https://img.shields.io/npm/v/@open-condo/miniapp-utils?style=flat-square
[npm-pkg-link]: https://www.npmjs.com/package/@open-condo/miniapp-utils

# `@open-condo/miniapp-utils` [![NPM][npm-badge-link]][npm-pkg-link]
> A set of helper functions / components / hooks used to build new condo apps fast. \
> \
> The purpose of this package is to take away from you the tedious code
> to set up and maintain common miniapp patterns, leaving your focus solely on the domain logic


## Table of contents
- [Installation](#installation)
    - [Peer dependencies](#peer-dependencies)
    - [Installing packages](#installing-packages)
        - [NPM](#install-all-npm)
        - [Yarn](#install-all-yarn)
- [Usage](#usage)

## Installation

### Peer dependencies
> **NOTE**: This package uses `react` / `react-dom` and `@apollo/client` as its peer dependencies,
> so make sure you've got ones installed. 
> 
> You should have no trouble with any react version having a hooks,
> but we're testing on versions `>=16`. 
> 
> Any apollo `3.x.x` should be fine too, but all utils are tested on `^3.11.8`
> 
> - `react` / `react-dom` are required for `/hooks/**` and `/components/**` entry points
> - `@apollo/client` is required for `/helpers/apollo.ts`
> - 'analytics' is required for `/helpers/analytics/*`
> 
> You can skip installing them if you don't use these utilities, as each utility is built separately, 
> but we highly recommend leaving them installed

### Installing packages

#### Install all (NPM)
```bash
npm i @open-condo/miniapp-utils react react-dom @apollo/client
```

#### Install all (Yarn)
```bash
yarn add @open-condo/miniapp-utils react react-dom @apollo/client
```

## Usage
You can import needed helpers / hooks / components by its name
```typescript
import { isDebug, isSSR } from '@open-condo/miniapp-utils/helpers/environment'
import { usePrevious } from '@open-condo/miniapp-utils/hooks/usePrevious'
```
npm package: @open-condo/tsconfig
Description: A set of frequently used tsconfig.json for various typescript applications
Author: Matthew Savelev
Latest version: 1.0.4

[npm-badge-link]: https://img.shields.io/npm/v/@open-condo/tsconfig?style=flat-square
[npm-pkg-link]: https://www.npmjs.com/package/@open-condo/tsconfig

# `@open-condo/tsconfig` [![NPM][npm-badge-link]][npm-pkg-link]

> A set of frequently used tsconfig.json for various typescript applications within the condo ecosystem.

## Table of contents
[Installation](#installation)\
[Usage](#usage)

## Installation
To install package simply run the following command if you're using npm as your package manager:
```bash
npm i @open-condo/tsconfig
```
or it's yarn alternative
```bash
yarn add @open-condo/tsconfig
```

## Usage

To use a config, simply add it to the `extends` field of your `tsconfig.json`.

### React library with `src` folder

```json
{
  "$schema": "https://json.schemastore.org/tsconfig",
  "extends": "@open-condo/tsconfig/react-lib.json",
  "compilerOptions": {
    "rootDir": ".",
    "outDir": "dist"
  },
  "include": ["src"],
  "exclude": ["node_modules"]
}
```

### Next.js application

```json
{
  "schema": "https://json.schemastore.org/tsconfig",
  "extends": "@open-condo/tsconfig/next-app.json",
  "compilerOptions": {
    "baseUrl": "."
  },
  "include": ["**/*.ts", "**/*.tsx", "next-env.d.ts"],
  "exclude": ["node_modules"]
}
```

> Make sure to override `exclude`, `include`, `rootDir`, `outDir` and `baseUrl` properties
> since it's calculation is relative to extendable tsconfig path
npm package: @open-condo/ui
Description: A set of React UI components for developing applications inside the condo ecosystem
Author: Matthew Savelev
Latest version: 2.54.1

[npm-badge-link]: https://img.shields.io/npm/v/@open-condo/ui?style=flat-square
[npm-pkg-link]: https://www.npmjs.com/package/@open-condo/ui

# `@open-condo/ui` [![NPM][npm-badge-link]][npm-pkg-link]
> A set of React UI components for developing applications inside the condo ecosystem

## Table of contents
[Installation](#installation)\
[Usage](#usage)\
[Including styles](#including-styles)\
[Access theme colors](#access-theme-colors)\
[Style-variables](#style-variables)\
[Hooks](#hooks)

## Installation
To install package simply run the following command if you're using npm as your package manager:
```bash
npm i @open-condo/ui
```
or it's yarn alternative
```bash
yarn add @open-condo/ui
```

## Usage
You can import needed component with its props directly from package entry point like this:
```typescript
import { Button } from '@open-condo/ui'
import type { ButtonProps } from '@open-condo/ui'
```

## Including styles
To apply the styles, import the css file from library `dist` into your project root component:
```typescript jsx
import '@open-condo/ui/dist/styles.min.css'
```

## Access theme colors
You can also directly access to all our theme colors
by specifying import sub path like this:
```typescript
import { colors } from '@open-condo/ui/colors'
import type { ColorPalette } from '@open-condo/ui/colors'
```

## Style variables
Style tokens are available for import as well:
- CSS Variables:
```typescript
import '@open-condo/ui/style-vars/css'
```
- Less Variables
```less
@import (reference) "@open-condo/ui/style-vars/less";
```

```less
@import (reference) "@open-condo/ui/dist/style-vars/variables.less";
```

## Hooks
Hooks can be imported as follows:
```js
import { useBreakpoints, useContainerSize } from '@open-condo/ui/hooks';
```
- `useBreakpoints` - returns the breakpoint object and its current value. 
Breakpoint value becomes `true` if the window width is greater than or equal to the corresponding breakpoint.
The name and width of the breakpoints:
  - `MOBILE_SMALL` (0px)
  - `MOBILE_LARGE` (360px) 
  - `TABLET_SMALL` (480px) 
  - `TABLET_LARGE` (768px)
  - `DESKTOP_SMALL` (992px)
  - `DESKTOP_LARGE` (1200px)
```js
const breakpoints = useBreakpoints()

// window width >= 480px and < 992px
const isTablet = breakpoints.TABLET_SMALL && !breakpoints.DESKTOP_SMALL
```

- `useContainerSize` provides the dimensions of a specific container.
```js
const [{ width, height }, setRef] = useContainerSize()

console.log(width, height)

return <div ref={setRef} />
```