Доработка генератора

[Nelfimov]

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

Необходимо доработать генератор темы под наши нужды

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

• необходима возможность добавлять страницы в игнор
• необходимо в цветах держать структуру с фигмы, особенно для кнопок и инпутов
• нейминг у всего кроме цветов и fontSize

Definition of done (критерий готовности)

Генератор работает, фичи имплементированы

[Nelfimov]

В качестве тестового дизайна можно использовать nuym

Найденные ошибки:

• очень много шрифтов - определить источник
• очень много видов размеров шрифта

[TorinAsakura]

.

[Nelfimov]

В дополнение к этой задаче:

В идеале должна быть возможность фильтрации по токенам. Например:

• мы с дизайнером договариваемся, что токены с префиксом dev - это то что мы будем стягивать нашим генератором
• настраиваем генератор на стягивание только этого префикса
• адаптируем выпуск генератора на учитывание нашего стэка - как например сейчас с цветами для кнопок и инпутов. Сегодня мы это делаем руками, а должно быть - автоматом из дизайна на регулярной основе.

[aliceinapple]

@Nelfimov

нейминг у всего кроме цветов и fontSize

Не поняла что не так с неймингом у всего кроме цветов и размеров шрифтов и как должно быть?

---

По поводу лишних шрифтов и прочего, скорее всего это все вытягивалось из всех страниц макета, в том числе архивных, если вытягивать данные только с определенной страницы (например добавить остальные в игнор или наоборт при генерации указывать id только нужной страницы), то лишнего не добавляется.

---

необходимо в цветах держать структуру с фигмы, особенно для кнопок и инпутов

Посмотрела для примера два разных макета с кнопками, один из риса, один из кэнди, структура у них разная, непонятно какую брать за образец для генератора цветов.

[TorinAsakura]

@Nelfimov

нейминг у всего кроме цветов и fontSize

Не понла что не так с неймингом у всего кроме цветов и размеров шрифтов и как должно быть?

• у радиусо, размеров и других токенов генерились нейминги по айди шейпов, вместо конвенциональных

По поводу лишних шрифтов и прочего, скорее всего это все вытягивалось из всех страниц макета, в том числе архивных, если вытягивать данные только с определенной страницы (например добавить остальные в игнор или наоборт при генерации указывать id только нужной страницы), то лишнего не добавляется.

• ясное дело, однако наша задача не трогать это руками, а делать на стороне фигмы, как-то парсить исключения и не трогать их

необходимо в цветах держать структуру с фигмы, особенно для кнопок и инпутов

Посмотрела для примера два разных макета с кнопками, один из риса, один из кэнди, структура у них разная, непонятно какую брать за образец для генератора цветов.

• кенди для нас будет поближе, на крайняк будем править на живую, через требования к дизайнеру Риса, в конце-концов нам сейчас надо генерить Рис, но, не нарушая правил

[aliceinapple]

@TorinAsakura @Nelfimov

• у радиусо, размеров и других токенов генерились нейминги по айди шейпов, вместо конвенциональных

Поняла, а где я могу посмотреть нужные нейминги?

[TorinAsakura]

@TorinAsakura @Nelfimov

• у радиусо, размеров и других токенов генерились нейминги по айди шейпов, вместо конвенциональных

Поняла, а где я могу посмотреть нужные нейминги?

…ты их каждый день используешь когда делаешь фронт…ты сейчас серьёзно?

[aliceinapple]

@TorinAsakura @Nelfimov

• у радиусо, размеров и других токенов генерились нейминги по айди шейпов, вместо конвенциональных

Поняла, а где я могу посмотреть нужные нейминги?

…ты их каждый день используешь когда делаешь фронт…ты сейчас серьёзно?

Ну в частности для радиусов напрмер, мы сейчас пишем так "f20", и в генераторе тоже так, вот и возник вопрос, как должно быть

[TorinAsakura]

@TorinAsakura @Nelfimov

• у радиусо, размеров и других токенов генерились нейминги по айди шейпов, вместо конвенциональных

Поняла, а где я могу посмотреть нужные нейминги?

…ты их каждый день используешь когда делаешь фронт…ты сейчас серьёзно?

Ну в частности для радиусов напрмер, мы сейчас пишем так "f20", и в генераторе тоже так, вот и возник вопрос, как должно быть

чего? где мы пишем f20? ничего не понимаю…и что такое f?

[aliceinapple]

@TorinAsakura @Nelfimov

• у радиусо, размеров и других токенов генерились нейминги по айди шейпов, вместо конвенциональных

Поняла, а где я могу посмотреть нужные нейминги?

…ты их каждый день используешь когда делаешь фронт…ты сейчас серьёзно?

Ну в частности для радиусов напрмер, мы сейчас пишем так "f20", и в генераторе тоже так, вот и возник вопрос, как должно быть

чего? где мы пишем f20? ничего не понимаю? и что такое f?

Когда задавали бордер радиус, писали "f20", нейминги для радиусов сейчас так генерируются (f + радиус), ну не суть, я поняла, буду ориентироваться на то как сейчас задаются названия для fontSizes

[TorinAsakura]

@aliceinapple Никогда мы руками такого не задавали. Посмотри во все проекты. Там всегда был нейминг конвенциональный, f20 - это как раз начало прилетать из генератора и это мы как раз сейчас стремимся пофиксить

[aliceinapple]

@Nelfimov

Тесты к генераторам, в которых импортируется camelcase падают с такой ошибкой:

 Test suite failed to run

    Jest encountered an unexpected token

    Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

    Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.

    By default "node_modules" folder is ignored by transformers.

    Here's what you can do:
     • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
     • If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/configuration
    For information about custom transformations, see:
    https://jestjs.io/docs/code-transformation

    Details:

    /Users/macbookair15/WebstormProjects/figma/.yarn/cache/camelcase-npm-8.0.0-a3fa03dcc3-6da7abe997.zip/node_modules/camelcase/index.js:57
    export default function camelCase(input, options) {
    ^^^^^^

    SyntaxError: Unexpected token 'export'

[Nelfimov]

Обнови пожалуйста jest-config - должно поправить ошибку.

[aliceinapple]

Обнови пожалуйста jest-config

@Nelfimov

Теперь такое получаю:

➤ YN0001: ● Validation Error:

  Option: extensionsToTreatAsEsm: ['.ts', '.tsx', '.js', 'jsx'] includes a string that does not start with a period (.).
  Please change your configuration to extensionsToTreatAsEsm: ['.ts', '.tsx', '.js', '.jsx'].

  Configuration Documentation:
  https://jestjs.io/docs/configuration

[Nelfimov]

Обнови еще

[aliceinapple]

Обнови еще

@Nelfimov

Обновила @atls/config-jest до 0.1.4, проблема осталась

 YN0001: ● Validation Error:

  Option: extensionsToTreatAsEsm: ['.ts', '.tsx', '.js', '.jsx'] includes '.js' which is always inferred based on type in its nearest package.json.

  Configuration Documentation:
  https://jestjs.io/docs/configuration

[Nelfimov]

@Nelfimov

Тесты к генераторам, в которых импортируется camelcase падают с такой ошибкой:

 Test suite failed to run

    Jest encountered an unexpected token

    Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

    Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.

    By default "node_modules" folder is ignored by transformers.

    Here's what you can do:
     • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
     • If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/configuration
    For information about custom transformations, see:
    https://jestjs.io/docs/code-transformation

    Details:

    /Users/macbookair15/WebstormProjects/figma/.yarn/cache/camelcase-npm-8.0.0-a3fa03dcc3-6da7abe997.zip/node_modules/camelcase/index.js:57
    export default function camelCase(input, options) {
    ^^^^^^

    SyntaxError: Unexpected token 'export'

Это юнит или интеграционные тесты.

[aliceinapple]

@Nelfimov

Это юнит или интеграционные тесты.

Это юнит тесты (yarn test unit)

Хотя если запустить yarn test integration все равно ошибка та же

[Nelfimov]

Исправил и запушил.

Вот что пришлось сделать: atls/raijin@d4c103c

Разберись пожалуйста, скоро придется и тебе тулзы править.