|
67 | 67 | ## 6. Компиляция темы для использования в других проектах |
68 | 68 |
|
69 | 69 | Команда `npm run build-themes` создаст .min.css файлы для использования в проектах. TODO решить как используем файл темы. С эк? |
70 | | - |
71 | | -## 7. FAQ |
72 | | - |
73 | | -TODO: Добавлять ответы на часто задаваемые вопросы. |
74 | | - |
75 | | -### FAQ по дизайн-системе от дизайнеров в [confluence](https://confluence.cdek.ru/pages/viewpage.action?pageId=122762206) |
76 | | - |
77 | | -### 1. Откуда берутся переменные для тем? |
78 | | - |
79 | | -**Ответ:** Дизайнеры при разработке дизайн системы используют переменные и задают им значения. Для выгрузки этих переменных из figma был разработан плагин Prime theme exporter https://www.figma.com/community/plugin/1360256675787932572/prime-theme-exporter . |
80 | | -При изменении этих переменных нужно их заново выгрузить и обновить в проекте. Переменные (токены) расположены здесь https://www.figma.com/design/70PmUKyqbgjyd7dfEc3fzs/%F0%9F%9A%A7-Tokens-PrimeFace-(DS)?node-id=1-2&node-type=canvas&t=woE5QhaEskyYclwq-0 и также там есть описание их выгрузки. |
81 | | -Обращаю внимание, что для выгрузки токенов нужны права на редактирование figma-файла. |
82 | | - |
83 | | -### 2. А где вообще актуальная дизайн система? |
84 | | - |
85 | | -**Ответ:** Тут https://www.figma.com/design/4TYeki0MDLhfPGJstbIicf/UI-kit-PrimeFace-(DS)?node-id=0-1&node-type=canvas&m=dev |
86 | | - |
87 | | -Отмечу, что дизайн система разработана не в теме эк5, а в теме Brand(primary) light. Но в песочнице компонента, можно посмотреть компонент в теме эк5. Для этого нужно выбрать компонент в figma и Open in playground. |
88 | | - |
89 | | -Также добавлены brand темы, которые можно выбрать в темах или подключить в styles.scss для удобного сравнения с figma в ДС. |
90 | | - |
91 | | -### 3. Как то сложно с figma стало, а есть ли что-то про это? |
92 | | - |
93 | | -**Ответ:** Тут https://www.figma.com/design/M2h4N5YM7TIlHhyD90esPI/%F0%9F%9A%A7-FAQ-(DS)?node-id=57-475&node-type=canvas&t=a9NXscSgxb3S7TrD-0 |
94 | | -Наш дизайнер подготовил FAQ по работе с figma в DevMode. |
95 | | - |
96 | | -### 4. Я слышал про какую-то песочницу, что это? |
97 | | - |
98 | | -**Ответ:** Дизайнер при разработке дизайн системы хотел проверять работу компонентов и создал react проект с темой. |
99 | | -https://gitlab.cdek.ru/FrontDev/prime-theme-sandbox/-/tree/feature/styles?ref_type=heads |
100 | | - |
101 | | -### 5. А почему в package.json используется angular 18? Этот прайм для 18 ангуляра? Как они вообще совместимы? |
102 | | - |
103 | | -**Ответ:** package.json использует angular 18 и в демо странице действительно используется 18 ангуляр. |
104 | | -Но компоненты содержат свой package.json src/app/components/package.json в котором указана совместимость с 17 и 18 ангуляром. |
105 | | - |
106 | | -### 6. А выложен ли где-то этот проект? |
107 | | - |
108 | | -**Ответ:** Этот проект выложен в кубах и доступен по https://primeng-cdek.preproduction.k8s-local.cdek.ru/ |
109 | | - |
110 | | -## 8. TODO. Задачи и известные проблемы проекта. |
111 | | - |
112 | | -- [x] Создать пустые темы. |
113 | | -- [x] Внедрить переменные от дизайнеров. |
114 | | -- [] Добавить описание процесса компиляции темы для использования в других проектах. |
115 | | -- [] Разобраться со сборкой в k8s. Есть проблема, что без package-lock.json проекты прайма не собираются. |
0 commit comments