consta-design-system / uikit Goto Github PK
View Code? Open in Web Editor NEWHome Page: https://consta.design/libs/uikit
License: MIT License
Home Page: https://consta.design/libs/uikit
License: MIT License
@storybook/addon-docs
и проверить остальные компоненты
@bem-react/classname
@bem-react/classnames
lodash
react-textarea-autosize
react-transition-group
создать компонент скрытого инпута, для визуального отображения ипользовать renderProps
рассмотреть идею про использование одинаковых конфигов на всех проектах ГПН, в т.ч. на ДС — конфиги eslint, stylelint, prettier, eitorconfig итд
просто актуализировать конфиги, которые прямо сейчас уже есть в репе, чтобы не приходилось затыкать линтеры комментариями
OR
Expected result: Компонент добавлен на страницу и готов к использованию
Actual result:
error - ./node_modules/@gpn-design/uikit/internal/src/components/Attach/Attach.css
Read more: https://github.com/zeit/next.js/blob/master/errors/css-npm.md
Для генерации таблицы пропсов и нобов можно попробовать заюзать react-docgen-typescript-loader
и addon-smart-knobs
, но у них есть свои ограничения, которые могут потребовать доработок
Столкнулся с проблемой что props накидываются на корневой элемент div. Возможно ли сделать проброс на элемент input и textarea?
Кейс:
По требованиям google lighthouse на элементах формы должен быть атрибут aria-label.
сейчас компоненты Input
и Select
еще пока есть в бандле
но их убрали из реэкспорта в пакете, конфигом в сборщике от этого css файл вообще не прилетел в сборку
Нужно обратно добавить Select в реэкспорт и подумать как будем уведомлять пользователей о том что компонент deprecated
Expected result: text should have serif font
Actual result: text has sans font
Looks like --font-serif
property is missing from Theme_font_gpnDefault
Вместо ХОКа BaseIconHoc можно было использовать простую фабрику createIcon( { name, xs, s, m })
Не лучший способ вставлять кнопку как ссылку : <Button< { href: string; target: string }> />.
Лучше было типизацию сделать внутри компонента (через JSX.IntrinsicElements), а не заставлять подмешивать снаружи
Нужно придумать названия пресетам и какие модификаторы тем они будут содержать
также учесть возможность создание пользовательских пресетов
дополнить документацию компонента Theme
Snackbar-ActionButton.Button
.Завёл по мотивам обсуждения в пр-е про добавление новых иконок:
#132 (comment)
Насколько понимаю, из-за особенностей текущего механизма сборки иконок получается, что в проекте одновременно лежат и svg-иконки, и их же представление в виде tsx-компонента. При этом tsx-компонент иконки не импортит svg, а дублирует её.
Нужно доработать сборку иконок таким образом, чтобы дублирования не было в репозитории. Один из вариантов — использовать babel-plugin-named-asset-import
, который позволит импортить svg и использовать сразу как Реакт-компонент, тогда от tsx-обёрток можно будет избавиться и оставить только svg.
убрать сложный оnChange
оставить нативный
Дублирует логику Checkbox, отличается только внешним видом, подумать об обьединении логики
https://www.npmjs.com/package/@storybook/addon-a11y
и проверить ошибки
создать новый компонент Attach
Ожидаемый результат: успешная компиляция, стили добавлены на страницу.
Причина: ошибка в описании кода импорта стилей ('theme' с маленькой буквы)
Одна для генерации чейндлогов в монорепе, вторая с экшенами для деплоя
В начале нужно создать BaseInput(или другое название) - компоненет который только отвкечает за стиль рамки инпута, div со стилями, и на его основе сделать SimleSelect и TextField.
За основу BaseInput нужно взять обертку изи TextField взять рутовый div со стилями. Ну и в самом TextField применить BaseInput
Сейчас источником истины о значениях цветов выступают css-файлы тем. Это хорошее решение, потому что а) в коде, б) понятно версионирование, в) встраивается в релизный цикл.
Есть недостатки:
Предлагаю:
Профиты:
Настроить и написать тесты на примере одного компонента
дополнить доку примером создания и подключением своей собственной темы
При фокусе на табе таб выделяется целиком по границам http://s.csssr.ru/UMYJTGU0M/2020-06-01-14-47-27-I9R0J.jpg
Наличие фокуса на элементе это хорошо, но обводка по прямоугольнику выглядит неестественно, так как у таба изначально видна только одна граница — нижняя.
Было бы лучше, если бы фокус был только снизу:
Ссылка на элемент: https://gpn-prototypes.github.io/ui-kit/?path=/story/ui-kit-tabs--playground
Неименованные дженерики: BaseCheckGroupField<T, T2 = {}>
multiply
вместо multiple
По аналогии с RadioGroup https://consta-uikit.vercel.app/?path=/story/components-radiogroup--playground
Исползования any - проверить и убрать
Кликабельные дивы - проверить и убрать
Отключенные стори - удалить
Используются и типы, и интерфейсы - переход к типам
Нужно добавить иконку как компоненту (2 слева) для панели (xs, s, m) https://www.figma.com/file/d1LmFzRazBtPjWsnyW8h1U/KL-%5Bdraft%5D?node-id=0%3A1
Перенести tooltip из конструктора в дизайн-систему (подробнее обсудим на планировании)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.