Генератор фрагментов

[Nelfimov]

С чем связан запрос на фичу?

Необходимо разработать генератор фрагментов. Цель - уход от ручной верстки по дизайну.

Расскажите как вы это себе видите

• генератор берет ID конкретного фрагмента (фрейма/блока)
• по нему формируется дерево фрагментов/компонентов фигмы
• им сопоставляются наши компоненты в ui
• анализируются атрибуты стилей, берутся из темы
• готовый фрагмент сохраняется в файле

Генератор должен быть пакетом с cli, аналогично генератору темы. Генератор как зависимость устанавливается во фрагмент и запускается из под него. ID фрейма зашит в скрипт фрагмента.

Для облегчения парсинга дерева и сопоставления с ui призывать дизайнера. Можно работать в рамках экспериментального нового файла с дизайном.

Материалы

Ветка: https://github.com/atls/figma/tree/feat/fragments-generator
Pull Request: #41

[Nelfimov]

@aliceinapple завтра с утра попробуй взяться за задачу. В рамках двух часов если не выйдет - бросай

[Amiditin]

@aliceinapple завтра с утра попробуй взяться за задачу. В рамках двух часов если не выйдет - бросай

@aliceinapple прогресс был или можно с нуля начинать?

[Nelfimov]

@Amiditin начинай с нуля

[Amiditin]

Что сделано:

• Добавлен метод для получения фрейма по node-id
• Добавлены в базовом виде создание скипта, сохранение в файл, генератор
• Для генерации рассмотрел использование react + pretty-format на примере <Text />

Что дальше:

• Добавить получение темы
• Добавить генерацию <Text /> компонентов со значениями из темы

@Nelfimov вопросы

им сопоставляются наши компоненты в ui

По названием нужно ориентировать на то, что находится в hyperion или в проект для которого создаём фрагмент?

готовый фрагмент сохраняется в файле

Сохраняем фрагмент как export const Fragment = () => { ... } с импортами? или как jsx вне "контекста":

<Text fontSize={40} fontWeight={600}>
  Пример текста
</Text>

[Nelfimov]

им сопоставляются наши компоненты в ui

По названием нужно ориентировать на то, что находится в hyperion или в проект для которого создаём фрагмент?

Предлагаю не первой итерации сделать названия из гипериона.

готовый фрагмент сохраняется в файле

Сохраняем фрагмент как export const Fragment = () => { ... } с импортами? или как jsx вне "контекста":

<Text fontSize={40} fontWeight={600}>
  Пример текста
</Text>

Предлагаю так:

import React from 'react'
import { memo } from 'react'

export const GeneratedFragment = memo(() => {
  return <Text ....>Пример текста</Text>
})

[Amiditin]

Что сделано:

• Добавлено получение темы
• Добавлена генерация <Text /> компонентов со значениями из темы

Что дальше:

• Добавить сохранения фрагментов в виде export const Fragment = () => { ... }
• Добавить генерацию нескольких <Text /> за 1 переданный фрейм
• Добавить генерацию layoyt компонентов

[Nelfimov]

@Amiditin что предполагаешь по срокам?

[Amiditin]

@Amiditin что предполагаешь по срокам?

@Nelfimov зависит от итоговых целей, если в план минимум брать компоновку компонентов layout, <Text>, <Button> и например Input, то думаю к середине следующей недели можно сделать. Если добавлять ещё компоненты для генерации <Link>, <Image> или иконки, то это ещё + время

[Nelfimov]

Давай тогда делать итерациями:

1. компоновку компонентов layout, <Text>, <Button> и например Input, то думаю к середине следующей недели можно сделать.

2. добавлять ещё компоненты для генерации <Link>, <Image> или иконки, то это ещё + время

[Amiditin]

Что сделано:

• Добавлено сохранения фрагментов в виде export const Fragment = () => { ... }
• Добавлена генерацию нескольких <Text /> за 1 переданный фрейм

Что дальше:

• Добавить генерацию Box Layout Row Column компонентов
• Добавить генерацию Button компонента
• Добавить генерацию Input компонента

[Amiditin]

Что сделано:

• Деструктуризировал текущий код на модули
• Добавлена генерация Box при передачи фрейма
• Добавлена генерация дерева фрагментов при передачи вложенных фреймов

Что дальше:

• Добавить генерацию Box Layout Row Column компонентов с атрибутами из темы
• Добавить генерацию Button компонента
• Добавить генерацию Input компонента

[Amiditin]

Что сделано:

• Добавлено создание FormattedMessage в качестве ребенка для Text элемента
• Добавлены динамические импорты в зависимости от используемых компонентов
• Добавлено создание базовых атрибутов для Box элемента

Что дальше:

• Добавить создание border shadow background атрибутов для Box элемента
• Добавить генерацию Button компонента
• Добавить генерацию Input компонента

[Amiditin]

Что сделано:

• Перенесено получение атрибутов из темы в отдельный класс
• Добавлено получение border shadow background атрибутов для Box элемента

Что дальше:

• Добавить генерацию Button компонента
• Добавить генерацию Input компонента

[Amiditin]

Что сделано:

• Добавлено создание атрибутов width heigth textAlign id
• Добавлена генерация Button компонента
• Добавлена базовая генерация Input компонента

Что дальше:

• Доработать генерацию Input компонента
• Добавить тесты

[Nelfimov]

Некоторые пакеты не опубликовались:

https://github.com/atls/figma/actions/runs/12386756336/job/34575138825

[Amiditin]

Что сделано:

• Обновил yarn бандл и актуализировал версии пакетов
• Исправил около 100 lint ошибок

Что дальше:

• Исправить lint ошибки, осталось 377
• Исправить typecheck ошибки, осталось неизвестно

Актуальная ветка:

• chore: bump yarn #46

[Nelfimov]

Что сделано:

• Обновил yarn бандл и актуализировал версии пакетов
• Исправил около 100 lint ошибок

Что дальше:

• Исправить lint ошибки, осталось 377
• Исправить typecheck ошибки, осталось неизвестно

В первую очередь исправляй тайпчек потому что он сломает паблиш. Линт - отдельной таской несрочно.

[Amiditin]

Что сделано:

• Исправлены ошибки линтера и тайпчека

Что дальше:

• Исправить ошибки тестов
• Проверить работу генераторов

Актуальная ветка:

• chore: bump yarn #46

[Amiditin]

Что сделано:

• Исправлены ошибки тестов
• Проверена работа генераторов
• Создан PR chore(figma): bump yarn bundle #48

Что дальше:

• Доработать генератор фрагментов, добавить поддержку компонентов: Link, Image, и иконок.

Актуальная ветка:

• chore(figma): bump yarn bundle #48

[Amiditin]

Что сделано:

• Добавлено создание иконок для генератора фрагментов

Что дальше:

• Добавить поддержку компонентов Link и Image для генератора фрагментов

Актуальная ветка:

• feat(figma): icons fragment generator #49

[Amiditin]

Что сделано:

• Добавлена поддержка Image для генератора фрагментов

Что дальше:

• Добавить поддержку компонента Link для генератора фрагментов

Актуальная ветка:

• feat(figma): link and image fragment generator #50

[Amiditin]

Что сделано:

• Добавлена поддержка Link для генератора фрагментов

Статус:

• На ревью

Актуальная ветка:

• feat(figma): link and image fragment generator #50

[Amiditin]

Publish без ошибок https://github.com/atls/figma/actions/runs/12828189887/job/35771701110, задачу закрываю