core-ds / core-components Goto Github PK
View Code? Open in Web Editor NEWLicense: MIT License
License: MIT License
На данный момент текст в тосте бьется посимвольно. Дизайнер Люда Крылова дала комментарий, что это не по спецификации.
Бить текст по словам
На версии 27.13.1 все ок
При обновлении до версии 28.0.0 сборка падает с ошибкой. Используется SSR, React 17.0.2
var ResizeObserver = window.ResizeObserver || _juggle_resize_observer__WEBPACK_IMPORTED_MODULE_5__.ResizeObserver;
^
ReferenceError: window is not defined
at Module../node_modules/@alfalab/core-components/popover/esm/Component.js (/Users/appigram/projects/alfa/dfa/dfa-investor-fl-ui/.build/server.js:10917:22)
at __webpack_require__ (/Users/appigram/projects/alfa/dfa/dfa-investor-fl-ui/.build/server.js:42702:42)
at Module../node_modules/@alfalab/core-components/popover/esm/index.js (/Users/appigram/projects/alfa/dfa/dfa-investor-fl-ui/.build/server.js:11049:71)
at __webpack_require__ (/Users/appigram/projects/alfa/dfa/dfa-investor-fl-ui/.build/server.js:42702:42)
at Module../node_modules/@alfalab/core-components/select/esm/index.js (/Users/appigram/projects/alfa/dfa/dfa-investor-fl-ui/.build/server.js:13641:71)
at __webpack_require__ (/Users/appigram/projects/alfa/dfa/dfa-investor-fl-ui/.build/server.js:42702:42)
at Module../src/shared/components/card-selector/index.tsx (/Users/appigram/projects/alfa/dfa/dfa-investor-fl-ui/.build/server.js:22247:89)
at __webpack_require__ (/Users/appigram/projects/alfa/dfa/dfa-investor-fl-ui/.build/server.js:42702:42)
at Module../src/shared/pages/dfa-buy-item/index.tsx (/Users/appigram/projects/alfa/dfa/dfa-investor-fl-ui/.build/server.js:24687:84)
at __webpack_require__ (/Users/appigram/projects/alfa/dfa/dfa-investor-fl-ui/.build/server.js:42702:42)
^C<i> [webpack-dev-server] Gracefully shutting down. To force exit, press ^C again. Please wait...
<i> [webpack-dev-server] [HPM] server close signal received: closing proxy server
После сканирования SCA, указывает на уязвимость в swiper.
This affects the package swiper before 6.5.1.
Подробное описание
[1] nolimits4web/swiper@9dad273
[2] https://snyk.io/vuln/SNYK-JAVA-ORGWEBJARS-1244698
[3] https://snyk.io/vuln/SNYK-JS-SWIPER-1088062
[4] https://snyk.io/vuln/SNYK-JAVA-ORGWEBJARSNPM-1244696
[5] https://snyk.io/vuln/SNYK-JAVA-ORGWEBJARSBOWER-1244699
[6] https://snyk.io/vuln/SNYK-JAVA-ORGWEBJARSBOWERGITHUBNOLIMITS4WEB-1244697
В компоненте Select используется компонент Scrollbar, который использует https://www.npmjs.com/package/simplebar . Если импортировать Select в версии с css-модулями (import { Select } from '@alfalab/core-components/select/cssm'
), то хэш начинает генерироваться в момент сборки приложения. В arui-scripts для этого используется https://github.com/facebook/create-react-app/blob/main/packages/react-dev-utils/getCSSModuleLocalIdent.js который генерирует хэш в формате base64, который включает в себя символы +
и /
. Либа simplebar в своей работе использует querySelector https://github.com/Grsmto/simplebar/blob/master/packages/simplebar/src/simplebar.js#L181, а querySelector не допускает использования символов +
и /
, что может привести к падению приложения в случае если для стилей Scrollbar сгенерировался хэш содержащий запрещенные символы
Указывая компоненту Tab свойство className в dom у элемента класса нет.
core-components не работает с NextJS
Компоненты успешно работают с NextJS
master
branch failed. 🚨I recommend you give this issue a high priority, so other packages depending on you can benefit from your bug fixes and new features again.
You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can fix this 💪.
Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.
Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master
branch. You can also manually restart the failed CI job that runs semantic-release.
If you are not sure how to resolve this, here are some links that can help you:
If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.
package.json
file.A package.json file at the root of your project is required to release on npm.
Please follow the npm guideline to create a valid package.json
file.
Good luck with your project ✨
Your semantic-release bot 📦🚀
При использовании CalendarInput
, если мы не хотим задавать ему максимальную дату maxDate
, то при открытии модалки календаря для выбора даты, максимальный год, который там есть - это "текущий год + 1"
CalendarInput
, которому мы не указали проп maxDate
, нажать на иконку календаря чтобы открылось модальное окно с выбором датыОткрывается список годов, в котором нет ограничения по максимальному году
Открывается список годов, в котором максимальный год - это "текущий год + 1"
Компонент Plate имеет над собой некий враппер(в данный враппер добавляется класс rounded например), в свою очередь пропс className
компонента Plate добавляется не к этому самому врапперу, а к вложенному в него элементу div
, что делает данный пропс в некоторых случаях непригодным для использования (например задать ширину компоненту через css уже не получится).
Условия: модалка внутри себя имеет контрол (у меня это Link pseudo, который не имеет фокуса, см. #148) вызова другой модалки. Для воспроизведения подойдёт любой контрол без фокуса, например Button который при открытии второй модалки получает прос loading и сохраняет его после закрытия модалки.
Пропсы для второй модалки:
disableRestoreFocus true - восстанавливает фокус к предыдущему активному элементу. допустим это была кнопка, которая вызвала модалку. в базовом кейсе всё работает, когда это именно кнопка с фокусом. Но в кейсе когда это Link pseudo или Button loading, см. результат в конце.
при этом return-focus-with-no-scroll позволяет туда объект для отключения скрола к фокусируемому элементу, у вас нет такой возможности, допустим это потому что поддержка браузеров не очень. но это не решает проблемы
disableRestoreFocus false - не восстанавливает скролл, см. результат ниже.
Результат:
берётся первый фокусируемый элемент на странице(в моём случае предыдущей модалки) и вызывается на нём фокус, и конечно же страница скролится к нему. в моём случае этот элемент - кнопка(крест) закрытия модалки, а он в самом верху. Таким образом после закрытия второй модалки первая всегда проскролена в самый верх, это вообще не круто.
Остальные пропсы модалки для фокуса никак ситуацию не меняют, ну конечно если не отключить этот FocusLock через disableFocusLock у первой модалки. Но это не правильно.
При закрытии модалки скролл не должен скролить куда попало если фокус некуда восстановить или мы не хотим его восстанавливать.
P.S. я сомневаюсь что вы что-то с этим сделаете, такое ощущение что это проблема FocusLock при этом в их репе много похожих тем
Компонент Button в состоянии :active имеет transform: scale(0.97), который делает невозможным срабатывание клика на краях кнопки.
Событие клика обработано
Нажатие мыши происходит на кнопке, она имеет 100% масштаб, далее срабатывает transform: scale(0.97), который изменяет размер элемента и "mouseUp" происходит уже вне элемента, следовательно, за клик такое поведение не считается.
При подключении 2-ух InputAutocomplete к форме происходит смещение привязки позиционирования к нижнему краю Инпута. Происходит промаргивание выпадающего списка в левом верхнем углу экрана, затем список позиционируется корректно. Проблема воспроизводится при размере списков около 100 элементов и при быстром клике на компонент InputAutocomplete (сразу после отрисовки)
Список из элементов спозиционирован правильно
Ожидаемый | Фактический |
---|---|
** Ожидаемый ** | ** Фактический ** |
Дополнительная информация
# Опишите проблему
В компоненте
<PureCell.Text titleColor='primary' view='component'>
{ someLongWord }
</PureCell.Text>
при наличии длинного слова и узкого вьюпорта слово не разбивается, но выходит за рамки контейнера.
Предположительным решением видится добавление стилей word-break: break-word к PureCell.Text или родительскому PureCell.
Открыть песочницу с PureCell.Text и rowLimit={undefined} и положить внутрь очень длинное слово.
Слово будет разбито и перенесено на след. строку если оно выходит за рамки контейнера.
Ожидаемый | Фактический |
---|---|
** Ожидаемый ** | ** Фактический ** |
Компонент Typography.Text
c переданным пропом view="caps"
отображает текст с неверным font-weight: normal
, для обхода приходится использовать хак в виде добавления пропа weight="medium"
weight="medium"
из компонентаТекст должен отображаться с font-weight: 500
В сторибуке не работают ссылки
Ссылки работают
Если присутствует ошибка, в мобильном виде календаря (при размере экрана <1000пикс.) нельзя выбрать заново корректное значение (отсутствует кнопка "выбрать")
В компонент не передается value, если значение невалидно
https://github.com/core-ds/core-components/blob/master/packages/calendar-input/src/Component.tsx#L376
Т.к. наличие ошибки считает инпут невалидным https://github.com/core-ds/core-components/blob/master/packages/calendar-input/src/Component.tsx#L220
Можно применить новое корректное значение, если присутствует ошибка
Бразуер Chrome, v. 105
В зависимости от размера экрана компонент TooltipResponsive рендерит либо компонент Tooltip, либо компонент BottomSheet с кастомным target
. Во втором случае в target
не пробрасываются пропсы targetClassName
и targetRef
.
В адаптивном варианте в target
пробрасываются те же самые пропсы, что и в десктопном варианте.
Предлагаю добавить компонентам RadioGroup и CheckboxGroup пропс onBlur
.
При работе с Formik есть необходимость обрабатывать событие blur
. Это необходимо для определения состояния touched
(было ли посещено поле).
Можно отлавливать всплывающее событие blur
в компонентах RadioGroup
и CheckboxGroup
, либо прокидывать пропс onBlur
в каждый input
внутри группы.
Доброго дня! При использовании фреймворка Next JS на одном из проектов, внутри компании, обнаружил вот такую интересную штуку. Намеренно или нет, в компонентах используется useLayoutEffect, что приводит к некорректной отрисовке их на сервере. Видимых результатов не наблюдается, но, возможно, я не так хорошо знаю библиотеку.
Кажется, что отрисовка должна происходить корректно в любой среде
При открытии моб. календаря на платформе ios 13 или ниже рендерится только шапка и подвал. Контент календаря не рендерится в DOM.
При нажатии на кнопку 'Открыть календарь' должно появится модальное окно с к месяцами и днями календаря
Последний тег в модалке календаря это пустой div с data-test-id="virtuoso-item-list", в котором должны быть месяцы и дни.
При проверки выяснилось, что данные передаются в компонент корректно. При поиске в сети нашел два похожих ишью
petyosi/react-virtuoso#461
petyosi/react-virtuoso#526
где авторы советовали применить в проекте полифил для ResizeObserver.
В проекте уже исп-ся полифил @juggle/resize-observer для ResizeObserver, в частности для компонента BaseModal, который исп-ся для отображения моб. календаря.
Пытался исп-ть другой полифил resize-observer-polyfill, но безрезультатно.
У нас есть компонент https://core-ds.github.io/core-components/master/?path=/docs/%D0%BA%D0%BE%D0%BC%D0%BF%D0%BE%D0%BD%D0%B5%D0%BD%D1%82%D1%8B-inputautocomplete--input-autocomplete-mobile
инпут внутри данного компонента текстовый, в проекте есть места где нужен кастомный инпут, например для ввода телефона
Так же в проекте есть места, где инпут, при клике по которому вызывается данные компонент, тоже кастомный (например перевод по номеру тлф)
думаю InputAutocompleteMobile нужно доработать, добавив пропсы для кастомных инпутов
В своей сборке использую компонент таблицы trow, но в css файлах есть вложенность, из-за чего сборка крашится, в других компонентах такое не наблюдается.
В готовом пакете перейти в файл стилей компонента trow. Проблемный участок кода
.table__withoutBorder_hjusi { td { border: none; } }
Без вложенностей
Предлагаю добавить новый пропс компоненту Alert - autoCloseDelay, который бы позволял автоматически скрывать Alert по истечении определенного времени
Поведение абсолютно идентично работе компонента Toast вместе с autoCloseDelay
Сейчас, при установленном expanded={true}
(песочница), компонент открывается с задержкой. Кажется, что это не совсем корректное поведение, так как это может выглядеть некрасиво. Эдж кейс - скачущая, при загрузке, страница.
Было бы здорово, чтобы компонент, при инициализации с expanded={true}
, открывался без анимации
У компоненты Confirmation когда таймер с экраном временной блокировки заканчивается и ставим в функции onTempBlockFinished переход на начальный экран, то таймер с повторной отправкой кода по смс зависает
Таймер дойдет до нуля. но он зависает
Если применить параметр для "weight" для компонента Typography.TitleResponsive, то стиль не применится.
Для компонента Typography.Title решили проблему продублировав общие стили в файл компонента. Думаю что не совсем корректное решение, мне кажется надо поиграться с приоритетами и не дублировать стили.
Добавьте компонент Typography.TitleResponsive и примените к нему свойство "weight='bold'".
Стили толжны изменяться при изменении свойст компонента.
Так получается очень неудобно(
<PureCell.Main> <--- ошибка { children: ("" | Element | undefined)[]; }' is not assignable to type MainElement
<PureCell.Text titleColor='primary' view='component'>
{title}
</PureCell.Text>
{subTitle && <PureCell.Text titleColor='secondary' view='primary-small'>
{subTitle}
</PureCell.Text>}
</PureCell.Main>
CalendarInput и CalendarRange имеет внутреннюю валидацию на корректное значение, состояние которое нельзя получить в родительском компоненте, для того, чтобы не делать дублирование валидации перед какими-то действиями, например сабмит формы - было бы неплохо получать флаг error к примеру в обработчиках, либо отдельным коллбэком. (новый пропс onError, к примеру)
При введении 99.99.9999 в CalendarInput / CalendarRange по внутренним проверкам переходит в состояние error = true. Кроме компонента это состояние больше никому недоступно. Исходя из этого нужно делать дополнительную валидацию на уровне родителя.
Если SidePanelComponent.Content
имеет скролл и там есть элементы с "non-static position", то они находятся над SidePanelComponent.Header
.
Добавить вверху компонента SidePanelComponent.Content
элемент с position: relative
и проскролить.
Элементы из SidePanelComponent.Content
не должны быть выше по Z-оси, чем SidePanelComponent.Header
.
Анимация компонента Skeleton в Safari работает не так, как задумано
Анимация работает также, как в Chrome - плавно, без миганий
Десктоп (если данных нет оставьте блок пустым):
• OS: MacOS 12.4
• Browser: Safari
• Version: 15.5
Модалка закрывается при скроле полосы прокрутки мышкой, даже при нажатии.
v27.9.0 - ок
v28.2.6 - баг
Модалка не закрывается
Предлагаю подготовить компоненты для использования с React 18. По большей части это правки в типах, т.к. начиная с 18-й версии FC
больше не содержит в себе children
https://ru.reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html
При открытии модального окна возникает ошибка в IE 7-11 после обновления core до актуальной версии
При нажатии на кнопку должно появится модальное окно в IE 7-11
Ожидаемый | Фактический |
---|---|
![]() |
![]() |
Дополнительная информация
С недавних пор зачастую новым сотрудникам дают windows компы
Я и сам попробовал поработать с проектом на windows из под powershell, но натнулся на вот проблемные эти места
Вероятно есть еще не одно место с такими windows-проблемками
предлагаю добавить полноценную поддержку windows в core-components!
Предлагаю добавить новый цвет в палитру цветов - #e5ecf3
В мобильной теме клика есть новый цвет #e5ecf3
, для предотвращения деунификации в кодобазе
Сейчас (27.12.2022) в проекте клика встречается 16 появлений этого цвета (можете проверить сами), который никак не задекларирован во внутренней палитре core-components
Изменение несрочное, но зато добавило бы больше единообразия кодобазе и помогло бы избежать деунификации в будущем (когда будет много кастомных цветов не из палитры)
Используется только для тачевых компонентов/лейаутов
Как понимаю изменить надо где-то здесь, если подскажете как именно в контексте миксинов, могу и сам PR-чик закинуть 👀
https://github.com/core-ds/core-components/blob/master/packages/themes/src/mixins/mobile.css
UPD: Со своим дизайнером (Ю.Кудрявцевой) согласовывал этот момент - действительно нужен отдельный цвет, существующие не подходят под макет проекта
core-components v29.0.0
в типе AmountInputProps
свойство currency
имеет тип CurrencyCodes
, а в пропсах AmountInput
свойство currency
-- union литерал : "ALL" | "AFN" | "ARS"...
Из-за различия в типах, не всегда получается использовать проп currency
без костылей с приведением типов
Типы пропсов компонента соответствуют AmountInputProps
Пример ошибки
TS2345: Argument of type '"ALL" | "AFN" | "ARS" | "AWG" | "AUD" | "AZN" | "BSD" | "BBD" | "BYN" | "BZD" | "BMD" | "BOB" | "BAM" | "BWP" | "BGN" | "BRL" | "BND" | "KHR" | "CAD" | "KYD" | "CLP" | "CNY" | "COP" | ... 95 more ... | "A33"' is not assignable to parameter of type '"ALL" | "AFN" | "ARS" | "AWG" | "AUD" | "AZN" | "BSD" | "BBD" | "BYN" | "BZD" | "BMD" | "BOB" | "BAM" | "BWP" | "BGN" | "BRL" | "BND" | "KHR" | "CAD" | "KYD" | "CLP" | "CNY" | "COP" | ... 91 more ... | "ZWD"'.
Type '"A98"' is not assignable to type '"ALL" | "AFN" | "ARS" | "AWG" | "AUD" | "AZN" | "BSD" | "BBD" | "BYN" | "BZD" | "BMD" | "BOB" | "BAM" | "BWP" | "BGN" | "BRL" | "BND" | "KHR" | "CAD" | "KYD" | "CLP" | "CNY" | "COP" | ... 91 more ... | "ZWD"'.
При передаче пропса error едет верстка. А именно исчезают pips и между инпутом и ошибкой появляется огромный отступ.
error='Какая нибудь ошибка'
или hint='Какая нибудь подсказка'
Pips остаются + появляется ошибка либо pips исчезают и на их месте появляется ошибка
Фактический вид без ошибки | Фактический вид с ошибкой |
---|---|
![]() |
![]() |
При переходе через breakpoint для компонента ModalResponsive состояние его содержимого сбрасывается, при использовании форм и прочего.
Состояние активных элементов должно сохраниться
Ожидаемый | Фактический |
---|---|
состояние чекбокса сохранено | состояние чекбокса сброшено |
любой
Дополнительная информация
Видео https://disk.yandex.ru/i/Hnx-2x9khdtvEg
Пример для песочницы
function Example() {
const [checked, setChecked] = React.useState(false);
const handleChange = () => setChecked(!checked);
return (
<Checkbox
onChange={handleChange}
checked={checked}
label='Согласен с условиями'
hint='Соглашайтесь, будьте любезны'
/>
)
}
render(() => {
const [open, setOpen] = React.useState(false);
const handleModalOpen = () => setOpen(!open);
return (
<React.Fragment>
<Button type='button' size='xs' onClick={handleModalOpen}>
Открыть модалку
</Button>
<ModalResponsive open={open} onClose={handleModalOpen} size='m'>
<ModalResponsive.Header hasCloser={true} />
<ModalResponsive.Content>
<Typography.Title tag='div' view='small'>
Пример модалки с чекбоксом
</Typography.Title>
<br />
<Example />
</ModalResponsive.Content>
<ModalResponsive.Footer>
<Button view='primary' size='s' onClick={handleModalOpen}>
Понятно
</Button>
</ModalResponsive.Footer>
</ModalResponsive>
</React.Fragment>
);
});
Неверная ширина селектора в Сафари
Ширина селектора равна ширине инпута
При использовании PureCell в веб-версии приложения были найдены некоторые недочеты. Предлагаю их исправить
v27.9.0 работает ок
v28.0.0 ошибка
Server Error
ReferenceError: window is not defined
Call Stack
eval
node_modules\@alfalab\core-components\base-modal\esm\Component.js (56:21)
next.js
Не работает подсказка по умолчанию, если пропс uploadStatus = ERROR, и нет пропса error.
Вы добавили исключающие друг друга условия.
Надо что-то придумать с этой строчкой. При уменьшения экрана, Calendar превращается в CalendarMobile. И никак этим нельзя управлять
на интеграции альфа-онлайн в браузере сафари при закрытии сайд-панели наблюдаются скачки скролла и контента
https://web-test.moscow.alfaintra.net/dashboard
Привет! Обнаружили такую историю.
Дано:
Компонент: base-modal
Cостояние: { open: true }
Суть проблемы:
Если изменинть пропс open на false , а затем, до того как отработает handleExited, на true , то получим, что у container (коим будет document.body, если не передавать его явно) будет зафиксирован overflow: hidden .
Происходит это из-за этого момента.
Кейсы когда такое можно споймать:
При подписании у нас отображается модалка с ошибкой и кнопкой повторить, если, например, мы получим 500 ошибку (таймаут и прочее) на одном из этапов. Однако, мы можем продолжить подпись и запросить информацию повторно нажав кнопку "повторить", и вот тут, если мы при повторном вызове получим очередную ошибку быстрее чем модалка закроется, то мы получим вечный overflow: hidden на body.
Компонент Tabs устроен таким образом, что если табы не помещаются в область видимости, то появляется возможность скроллить их внутри контейнера.
Для красоты полоса прокрутки скрыта, поэтому пользователь может прокручивать табы только с помощью жестов (на трекпаде или сенсорном экране) либо с помощью колесика мыши при зажатой клавише shift. Это очень неудобно, к тому же совсем неочевидно, что эти табы можно скроллить.
Я бы предложил добавить кнопки, которые должны появляться автоматически, если есть возможность скроллить табы. Нажатие на кнопку будет прокручивать контейнер на несколько табов вперед или назад. За эталон можно взять MUI Tabs.
Если в компоненте использующем Calendar
с пропсой selectorView='month-only'
по событию onMonthChange
происходит больше одного ререндера, то анимация переключения месяцев всегда перематывает вправо
Подготовил демку
Переключение месяцев анимируется правильно
Ожидаемый | Фактический |
---|---|
** Ожидаемый ** | ** Фактический ** |
Дополнительная информация
Предлагаю доработать пропс pseudo.
Как сейчас: красивая картинка, но без возможности выбора через таб + проблемы с линтом.
a
и должна быть button
. Да, сейчас можно прокинуть Component='button'
, тогда у кнопки вылезают стили дефолтной кнопкиoutline
, который тут тоже не предусмотрен#в компоненте sidepanel в header при скролле карта перекрывает title
При ошибке после ввод смс выделяется последняя цифра
Confirmation
Показывает ошибку, код становиться красным, placeholder на последнюю цифру
Реальный - выделяется последняя цифра
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.