Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
1f924ef
feat: version 6
niktverd Sep 25, 2024
a708243
feat!: migrate to new slider, fix new slider styles (#978)
qradle-yndx Nov 27, 2024
a388293
feat!: yfm instead of html (#993)
niktverd Dec 23, 2024
00c26c9
parent 4e3d242446419fdb1444b43beb97c47062729463
niktverd Jan 16, 2025
972b332
chore: update package-lock.json to remove unused esbuild modules and …
niktverd Apr 17, 2025
bef2bfc
feat: remove unused React imports from ExtendedFeatures, Arrow, and S…
niktverd Apr 17, 2025
d8cd65c
chore: update Playwright version to v1.51.1 in workflow and script
niktverd Apr 17, 2025
fc846a9
fix: clean up whitespace and improve code formatting in Header, Fulls…
niktverd Apr 17, 2025
c563f93
chore: downgrade Playwright version to v1.45.3, workflow, and script;…
niktverd Apr 17, 2025
2f48427
fix: update components to use React imports consistently and handle e…
niktverd Apr 17, 2025
46f3884
fixup! fix: update components to use React imports consistently and h…
niktverd Apr 28, 2025
a16a57a
fixup! fixup! fix: update components to use React imports consistentl…
niktverd Apr 28, 2025
b98a148
fix: update TitleItem.scss to use inline-flex for wrapper display
niktverd Apr 28, 2025
d8c861c
feat(YandexForm): remove default theme (#1185)
aeksandla Apr 29, 2025
53cabfd
fixup! feat(YandexForm): remove default theme (#1185)
niktverd Apr 30, 2025
92b277d
fix(YandexForm): fix useCallback
aeksandla May 5, 2025
39a1d97
fix: sliders title only-arrows styles
qradle-yndx May 5, 2025
8b7af83
fix: slider arrow class name
qradle-yndx May 6, 2025
c5dfd56
feat: update foldable-list
niktverd May 21, 2025
e6c3513
chore: update package-lock.json
niktverd May 21, 2025
56e6d61
fixup! chore: update package-lock.json
niktverd May 21, 2025
a30a916
fixup! fixup! chore: update package-lock.json
niktverd May 21, 2025
33b7d58
7.0.0-alpha.8
gravity-ui-bot May 26, 2025
5efcdb9
style(ExtendedFeatures): set display to inline for links and paragraphs
niktverd May 27, 2025
588d478
chore: update playwright docker command and refine yfmTransformer opt…
niktverd May 27, 2025
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .eslintignore
Original file line number Diff line number Diff line change
Expand Up @@ -9,3 +9,4 @@ node_modules
/schema

/playwright/playwright/.cache/
playwright
1 change: 1 addition & 0 deletions .prettierignore
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ CONTRIBUTING.md
/schema

/playwright/playwright/.cache/
playwright

# npm files
package.json
3 changes: 1 addition & 2 deletions .storybook/preview.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import '../styles/storybook/index.scss';
import '@gravity-ui/uikit/styles/styles.scss';
import '@gravity-ui/uikit/styles/fonts.css';

import * as React from 'react';
import {MINIMAL_VIEWPORTS} from '@storybook/addon-viewport';
Expand Down Expand Up @@ -86,8 +87,6 @@ const preview: Preview = {
},
},
},

tags: ['autodocs', 'autodocs', 'autodocs'],
};

export default preview;
4 changes: 3 additions & 1 deletion .storybook/stories/documentation/Blocks.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,9 @@ _[Common field types](?path=/docs/documentation-types--docs)_

## [Share](?path=/docs/blocks-share--docs)

## [Slider](?path=/docs/blocks-slider--docs)
## [<s>SliderOld</s>](?path=/story/blocks-sliderold-deprecated--docs&viewMode=docs) (Deprecated, use Slider instead)

## [Slider](?path=/story/blocks-slider--docs&viewMode=docs)

## [Table](?path=/docs/blocks-table--docs)

Expand Down
24 changes: 24 additions & 0 deletions .storybook/utils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,3 +9,27 @@ export const blockListTransform = (blocksList: ConstructorBlock[]) =>

export const blockTransform = (block: ConstructorBlock) =>
contentTransformer({content: {blocks: [block]}, options: {lang: 'en'}}).blocks[0];
import {TitleItemProps} from '../src';

export const yfmTransformInline = (content: string) =>
yfm(content, {renderInline: true}).result.html;
export const transformTitle = (title: string | TitleItemProps) => {
if (!title) {
return undefined;
}

if (typeof title === 'string') {
return yfmTransformInline(title);
}

const {text, ...rest} = title;

return {...rest, text: yfmTransformInline(text)};
};
export const transformOptionalTitle = (title?: string | TitleItemProps) => {
if (!title) {
return undefined;
}

return transformTitle(title);
};
2 changes: 2 additions & 0 deletions README-ru.md
Original file line number Diff line number Diff line change
Expand Up @@ -233,6 +233,8 @@ const post = {

Список других доступных утилит можно найти в [этом разделе](https://github.com/gravity-ui/page-constructor/tree/main/src/text-transform).

Подробная инструкция по подготовке данных, использованию кастомных трансформеров находится в [дополнительном разделе документации](./docs/data-preparation.md).

### Пользователькие блоки

Конструктор страниц поддерживает возможность работы с блоками, определенными пользователем в его приложении. Блоки представляют собой обычные React-компоненты.
Expand Down
10 changes: 10 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -234,6 +234,10 @@ const post = {

You can find more utilities in this [section](https://github.com/gravity-ui/page-constructor/tree/main/src/text-transform)

### Detailed Documentation on Server Utilities and Transformers

For a comprehensive guide on using server utilities, including detailed explanations and advanced use cases, visit the [additional chapter on server utils usage](./docs/data-preparation.md).

### Custom blocks

The page constructor lets you use blocks that are user-defined in their app. Blocks are regular React components.
Expand All @@ -254,6 +258,12 @@ To use mixins and constructor style variables when creating custom blocks, add i
@import '~@gravity-ui/page-constructor/styles/styles.scss';
```

To use default font, add import in your file:

```css
@import '~@gravity-ui/page-constructor/styles/fonts.scss';
```

### Loadable blocks

It's sometimes necessary that a block renders itself based on data to be loaded. In this case, loadable blocks are used.
Expand Down
257 changes: 257 additions & 0 deletions docs/data-preparation-ru.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,257 @@
# Подготовка данных

Документацию по серверным утилитам для преобразования контента, включая конвертацию Yandex Flavored Markdown (YFM) в HTML и обработку текста. Основные возможности:

- **`fullTransform`**: Преобразует контент в формате YFM в HTML с настраиваемыми параметрами.
- **Утилиты**: `typografToText`, `typografToHTML` и `yfmTransformer` для обработки текста в пользовательских компонентах.
- **`createItemsParser`**: Утилита для преобразования определённых полей в блоках, поддерживающая вложенные поля и массивы.

### Серверные утилиты

Пакет включает набор серверных утилит для преобразования контента.

```ts
const {fullTransform} = require('@gravity-ui/page-constructor/server');

const {html} = fullTransform(content, {
lang,
extractTitle: true,
allowHTML: true,
path: __dirname,
plugins,
});
```

Для преобразования Yandex Flavored Markdown в HTML используется пакет `diplodoc/transfrom`, который входит в peer-зависимости.

Эти утилиты можно также использовать в кастомных компонентах или других частях проекта.

```ts
const {
typografToText,
typografToHTML,
yfmTransformer,
} = require('@gravity-ui/page-constructor/server');

const post = {
title: typografToText(title, lang),
content: typografToHTML(content, lang),
description: yfmTransformer(lang, description, {plugins}),
};
```

Список других доступных утилит можно найти в [этом разделе](https://github.com/gravity-ui/page-constructor/tree/main/src/text-transform).

## Документация к `createItemsParser`

Метод `createItemsParser` — это утилита, для создания парсеров блоков. Он помогает с преобразованием определённых полей с использованием трансформера. Метод имеет опции, позволяющие указать, какие поля нужно преобразовать и как обрабатывать вложенные поля.

### Сигнатура метода

```typescript
export const createItemsParser = (fields: string[]) => (transformer: Transformer, items: Item[]) => Item[];
```

### Параметры

- **fields**: Массив строк, указывающих поля для преобразования. Эти поля могут быть вложенными, используя точечную нотацию (например, `'nested.field'`).
- **transformer**: Функция, которая принимает строку и возвращает преобразованную строку. Эта функция будет применена к указанным полям.
- **items**: Массив элементов для парсинга и преобразования. Каждый элемент может быть строкой или сложным объектом.

### Возвращаемое значение

- Возвращает массив элементов с преобразованными указанными полями с помощью функции `transformer`.

## Примеры использования

### Пример 1: Базовое использование

В этом примере преобразуются поля `text` и `additionalInfo` каждого элемента в массиве `items` с использованием `yfmTransformer`.

```typescript
const config = {
fields: ['items'],
transformer: yfmTransformer,
parser: createItemsParser(['text', 'additionalInfo']),
};
```

**Input:**

```json
[
{"text": "Hello, world!", "additionalInfo": "This is a test."},
{"text": "Another item", "additionalInfo": "More info here."}
]
```

**Output:**

```json
[
{"text": "Transformed: Hello, world!", "additionalInfo": "Transformed: This is a test."},
{"text": "Transformed: Another item", "additionalInfo": "Transformed: More info here."}
]
```

### Пример 2: Вложенные поля

В этом примере преобразуется вложенное поле `list.text` внутри каждого элемента.

```typescript
const config = {
fields: ['items'],
transformer: yfmTransformer,
parser: createItemsParser(['list.text']),
renderInline: true,
};
```

**Input:**

```json
[{"list": {"text": "Вложенный текст 1"}}, {"list": {"text": "Вложенный текст 2"}}]
```

**Output:**

```json
[
{"list": {"text": "Transformed: Вложенный текст 1"}},
{"list": {"text": "Transformed: Вложенный текст 2"}}
]
```

### Пример 3: Смешанные типы данных

В этом примере массив `items` содержит как строки, так и сложные объекты. Метод `createItemsParser` корректно обрабатывает оба типа данных.

```typescript
const config = {
fields: ['items'],
transformer: yfmTransformer,
parser: createItemsParser(['text', 'list.text']),
};
```

**Input:**

```json
["Простая строка", {"text": "Текст объекта", "list": {"text": "Вложенный текст"}}]
```

**Output:**

```json
[
"Transformed: Простая строка",
{"text": "Transformed: Текст объекта", "list": {"text": "Transformed: Вложенный текст"}}
]
```

## Примечания

- Если поле не найдено в элементе, оно будет пропущено.
- Если указано вложенное поле, но родительский объект не является объектом или не является массивом, преобразование для этого поля будет пропущено.
- Метод не изменяет исходные элементы, а возвращает новый массив с преобразованными данными.

### Обработка вложенных массивов

Если вложенное поле является массивом, метод `createItemsParser` будет итерировать по каждому элементу массива и применять трансформер к указанному полю. Это особенно полезно при работе с массивами объектов, содержащими поля, которые требуют преобразования.

### Пример 4: Вложенное поле как массив

В этом примере преобразуется поле `text` внутри каждого объекта в массиве `list`, который является вложенным полем элементов `items`.

```typescript
const config = {
fields: ['items'],
transformer: yfmTransformer,
parser: createItemsParser(['list.text']),
};
```

**Input:**

```json
[
{
"list": [{"text": "Вложенный текст 1"}, {"text": "Вложенный текст 2"}]
},
{
"list": [{"text": "Вложенный текст 3"}, {"text": "Вложенный текст 4"}]
}
]
```

**Output:**

```json
[
{
"list": [{"text": "Transformed: Вложенный текст 1"}, {"text": "Transformed: Вложенный текст 2"}]
},
{
"list": [{"text": "Transformed: Вложенный текст 3"}, {"text": "Transformed: Вложенный текст 4"}]
}
]
```

## Полный пример со всеми случаями

Вот комплексный пример, включающий все возможные случаи: обычные поля, вложенные объекты и вложенные массивы.

```typescript
const config = {
fields: ['items'],
transformer: yfmTransformer,
parser: createItemsParser(['text', 'list.text', 'details.info']),
};

const transformedItems = config.parser(config.transformer, items);
```

**Input:**

```json
[
{
"text": "Обычный текст",
"list": [{"text": "Вложенный текст 1"}, {"text": "Вложенный текст 2"}],
"details": {
"info": "Вложенная информация"
}
},
{
"text": "Другой обычный текст",
"list": {"text": "Вложенный текст 3"},
"details": {
"info": "Другая вложенная информация"
}
}
]
```

**Output:**

```json
[
{
"text": "Transformed: Обычный текст",
"list": [
{"text": "Transformed: Вложенный текст 1"},
{"text": "Transformed: Вложенный текст 2"}
],
"details": {
"info": "Transformed: Вложенная информация"
}
},
{
"text": "Transformed: Другой обычный текст",
"list": {"text": "Transformed: Вложенный текст 3"},
"details": {
"info": "Transformed: Другая вложенная информация"
}
}
]
```
Loading