open-index/open-npm huggingface dataset:
npm package: @salus-js/http
Description: A module for statically defining type-safe HTTP operations. These can be leveraged by other modules to build type-safe clients or servers that can execute the requests.
Latest version: 0.16.0

# Intro

A module for statically defining type-safe HTTP operations. These can be leveraged by other modules to build type-safe clients or servers that can execute the requests.

# Usage

Defining requests with `@salus-js/http` is simple. Let's start with a basic GET request that has no parameters and responds with just a string.

```typescript
import { t } from '@salus-js/codec'
import { http, ResponseOf } from '@salus-js/http'

const getHelloWorld = http.get('/v1/hello', {
  response: t.string
})

type HelloWorldResponse = ResponseOf<typeof getHelloWorld> // string
```

Most of the time, though, you'll have more exciting endpoints than this. Let's take a look at a complete description for an endpoint that creates a contact:

```typescript
import { t } from '@salus-js/codec'
import { http, BodyOf, ResponseOf } from '@salus-js/http'

const contactParameters = t.partial({
  firstName: t.string.document({
    description: 'First name for the contact'
  }),
  lastName: t.string.document({
    description: 'Last name for the contact'
  })
})

const contactResource = t.object({
  object: t.literal('contact').document({
    description: 'Always `contact`.'
  }),
  id: t.string.document({
    description: 'Unique ID for the contact'
  }),
  firstName: t.string.nullable().document({
    description: 'First name for the contact'
  }),
  lastName: t.string.nullable().document({
    description: 'Last name for the contact'
  })
})

const createContact = http.post('/v1/contacts', {
  description: 'Creates a new contact.',
  body: contactParameters,
  response: contactResource
})

type CreateContactBody = BodyOf<typeof createContact> // { firstName?: string; lastName?: string }
type CreateContactResponse = ResponseOf<typeof createContact> // { object: string; id: string; firstName: string | null; lastName: string | null }
```

# Related

Typically, you won't use `@salus-js/http` directly, but rather through one of the clients or servers. `@salus-js/http` is used internally by `@salus-js/nestjs` for server-side endpoints that are compatible with the NestJS framework, or with `@salus-js/axios` to create a type-safe HTTP client.
npm package: @salus-js/http-client
Description: A library for making type-safe HTTP requests built on the popular Axios client.
Latest version: 0.16.0

# Intro

A library for making type-safe HTTP requests built on the popular Axios client.

# Usage

`@salus-js/http-client` builds on `@salus-js/codec` and `@salus-js/http` to make runtime type-checked HTTP requests a breeze. Let's run through a quick sample:

```typescript
import { t } from '@salus-js/codec'
import { http } from '@salus-js/http'
import { AxiosClient } from '@salus-js/http-client'

const todoResource = t.object({
  userId: t.number,
  id: t.number,
  title: t.string,
  completed: t.boolean
})

const todoParams = t.object({
  id: t.number
})

const getTodo = http.get('/todos/:id', {
  params: todoParams,
  response: todoResource
})

const client = AxiosClient.create('https://jsonplaceholder.typicode.com/')

const responsePromise = client.execute(getTodo, {
  params: {
    id: 1
  }
})

responsePromise.then((response) => {
  console.log(response.data)
})
```

# Guide

## Client Instance

When creating a new instance of the Salus Axios client, you need to specify a default baseURL. This URL will be prepended to all paths defined in your operations. Note that you are able to override the baseURL for a specific request.
npm package: @salus-js/nestjs
Description: A library for mounting Salus operations at NestJS controllers. Retains full compatibility with the NestJS controller ecosystem.
Latest version: 0.16.0

# Intro

A library for mounting Salus operations at NestJS controllers. Retains full compatibility with the NestJS controller ecosystem.

# Usage

The `@salus-js/nestjs` is a simple drop-in to any NestJS application. Let's look at handling a simple operation.

```typescript
import { t } from '@salus-js/codec'
import { http } from '@salus-js/http'
import { Operation, Input, InputOf, OutputOf, SalusModule } from '@salus-js/nestjs'

const getUser = http.get('/v1/users/:id', {
  summary: 'Retrieve a user',
  description: 'Fetches the user associated with the given ID',
  params: t.object({
    id: t.string.document({
      description: 'Unique ID for the user to retrieve'
    })
  }),
  response: t.object({
    id: t.string.document({
      description: 'Unique ID for the user'
    }),
    name: t.string.document({
      description: 'Name for the user'
    })
  })
})

@Controller()
class UsersController {

  @Operation(getUser)
  public getUser(@Input() input: InputOf<typeof getUser>): OutputOf<typeof getUser> {
    return {
      id: input.params.id,
      name: 'Hello World'
    }
  }

}

@Module({
  imports: [
    SalusModule.forRoot()
  ],
  controllers: [
    UsersController
  ]
})
class AppModule {

}
```

# Guide

Under the hood, there's very little magic happening with `@salus-js/nestjs`. The `@Operation()` module simply looks at the provided `Operation` instance and registers the appropriate NestJS controller annotation (`@Post()`/`@Get()`/etc) for you. Similarly, `@Input()` is implemented using standard NestJS functionality available through `createParamDecorator`.

What this means is that Salus retains full compatibility with all standard NestJS controllers. For many use cases, this provides the best balance of type safety with ergonomics in the NestJS ecosystem.

## Registry

When using the Salus NestJS module, you get access to an instance of `OperationRegistry` that can provide you access to all operations that have been mounted in the NestJS. You can inject `OperationRegistry` from `@salus-js/nestjs` in any module.

## OpenAPI

The NestJS module also supports automatically generating OpenAPI documents. You can enable this when importing the Salus module in your application:

```typescript
@Module({
  imports: [
    SalusModule.forRoot({
      openApi: {
        path: '/openapi.yml',
        options: {
          info: {
            version: '1.0',
            title: 'My API
          }
        }
      }
    })
  ],
  controllers: [
    UsersController
  ]
})
class AppModule {

}
```
npm package: @salutejs/caldera
Description: Salute Design System / React UI kit for Caldera web applications
Author: Salute Frontend Team
Latest version: 0.27.1

# Библиотека компонентов Caldera

Реализация компонентов для создания веб-приложений.

<p align="center">
  <img width="800" src="https://github.com/salute-developers/plasma/assets/1813468/8a672284-f470-4b9e-9234-877ae8daf7a4" alt="caldera" />
</p>

## Использование

Компоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);

Использование данного пакета предполагает установку зависимостей: `react` & `react-dom`;

Использование `styled-components` на проект необязательно, так же как и использование `typescript`.

**Но** для того чтобы компоненты работали корректно необходимо установить `styled-components`.

### Установка пакета

```bash
$ npm install --save react react-dom
$ npm install --save styled-components
$ npm install --save @salutejs/caldera @salutejs/caldera-online-themes
```

## Настройка

Создайте компонент для подключения глобальных стилей:

```jsx title="GlobalStyle.tsx"
import { createGlobalStyle } from 'styled-components';
import { caldera__light } from '@salutejs/caldera-online-themes';

const ThemeStyle = createGlobalStyle(caldera__light);

export const GlobalStyle = () => (
    <>
        <ThemeStyle />
    </>
);
```

### Корень приложения

В корне приложения вызовите компонент глобальных стилей `GlobalStyle`:

-   Если вы используете [Create React App](https://create-react-app.dev), делайте вызов внутри `src/index.tsx`.
-   Если вы используете [Next.js](https://nextjs.org/), создайте файл `pages/_app.tsx` и подключите стили в нем.

Для корректной работы server side rendering приложение нужно обернуть `SSRProvider` (доступен в caldera);

### Использование компонентов

Все компоненты доступны из папки `components` или напрямую из пакета:

```jsx
// App.tsx
import { Button } from '@salutejs/caldera';
import { textAccent } from '@salutejs/caldera-online-themes/tokens';

export const App = () => {
    return (
        <Button>Hello, Caldera!</Button>

        <p style={{color: textAccent}}>
            Token usage example
        </p>
    );
};
```
npm package: @salutejs/classrooms
Description: Salute Design System / React UI kit for Classrooms web applications
Author: Salute Frontend Team
Latest version: 0.2.0-canary.1000.7638735179.0

# Библиотека компонентов Classrooms

Реализация компонентов для создания веб-приложений.

<p align="center">
  <img width="800" src="https://user-images.githubusercontent.com/1813468/98609687-ea20fc80-22fe-11eb-8d84-cd26385f01ed.png" alt="classrooms" />
</p>

## Использование

Компоненты реализованы на [typescript](https://www.typescriptlang.org/) с помощью [react](https://reactjs.org/) и [styled-components](https://styled-components.com/);

Использование данного пакета предполагает установку зависимостей: `react` & `react-dom`;

Использование `styled-components` на проект необязательно, так же как и использование `typescript`.

**Но** для того чтобы компоненты работали корректно необходимо установить `styled-components`.

### Установка пакета

```bash
$ npm install --save react react-dom
$ npm install --save styled-components
$ npm install --save @salutejs/classrooms @salutejs/plasma-typo @salutejs/plasma-tokens
```

## Настройка

Создайте компонент для подключения глобальных стилей:

```jsx title="GlobalStyle.tsx"
import { createGlobalStyle } from 'styled-components';
import { standard } from '@salutejs/plasma-typo';
import { classrooms__light } from '@salutejs/plasma-tokens';

const ThemeStyle = createGlobalStyle(classrooms__light);
const TypoStyle = createGlobalStyle(standard);

export const GlobalStyle = () => (
    <>
        <ThemeStyle />
        <TypoStyle />
    </>
);
```

### Корень приложения

В корне приложения вызовите компонент глобальных стилей `GlobalStyle`:

-   Если вы используете [Create React App](https://create-react-app.dev), делайте вызов внутри `src/index.tsx`.
-   Если вы используете [Next.js](https://nextjs.org/), создайте файл `pages/_app.tsx` и подключите стили в нем.

Для корректной работы server side rendering приложение нужно обернуть `SSRProvider` (доступен в classrooms);

### Использование компонентов

Все компоненты доступны из папки `components` или напрямую из пакета:

```jsx
// App.tsx
import { Button } from '@salutejs/classrooms';
import { textAccent } from '@salutejs/plasma-tokens/brands/classrooms';

export const App = () => {
    return (
        <Button>Hello, Classrooms!</Button>

        <p style={{color: textAccent}}>
            Token usage example
        </p>
    );
};
```
npm package: @salutejs/cra-template-plasma-shop-template
Description: Plasma temple E-commerce template
Author: Salute Frontend Team
Latest version: 2.5.1
Deprecated: Package no longer support.

# Шаблон смартапа магазина для create-react-app

## Описание

Базовый шаблон для создания [Canvas App](https://bit.ly/3Mx0UQq) интернет магазина. Шаблон включает в себя следующие страницы:

-   Основная страница магазина
-   О магазине
-   Каталог товаров
-   Корзина
-   Страница оформления заказа
-   Страница с описанием товара
-   Доставка
-   Правовая информация
-   Контакты

Так же настроено взаимодействие с [виртуальным ассистентом](https://bit.ly/38iIzaM).

> Шаблон включает пользовательский интерфейс смартапа и базовое взаимодействие со сценарием (обработка команд от ассистента, формирование состояния смартапа), сценарий необходимо разрабатывать отдельно, используя один из инструментов: [SmartApp Graph](https://bit.ly/3rOiWFE), [SmartApp Code](https://bit.ly/3Kdpt38), [SaluteJS](https://bit.ly/3kbvoLn), [SmartApp Framework](https://bit.ly/3vHkMJD).

## Установка

```bash
$ npx create-react-app <name> --template @salutejs/plasma-shop-template
```