sima-land / moleculas Goto Github PK

Гайды дополнились состоянием загрузки:
https://www.figma.com/file/EwAsXveLVRWvfUtJTZPgAs/Desktop-Ui-Kit?node-id=12010%3A11854

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

Ситуация

В Safari версии 14 не выводится картинка

Связано с тем что не поддерживается используемое CSS-свойство aspect-ratio

Необходимо

Исправить, убрать использование aspect-ratio

Ранее были изменены некоторые иконки: sima-land/ui-quarks#4

Необходимо обновить пакет в библиотеке.

Вынести в новый компонент desktop/ProductCard визуальное оформление всплывающей при наведении карточки из ProductCarousel

Также переименовать mobile/ProductCard в mobile/ProductRow

Ситуация

Иногда надо формировать кнопки рядом с полем в SearchBar в зависимости от того что происходит с полем

Необходимо

Добавить проброс ref'а поля чтобы можно было напрямую с ним работать и при этом не сильно расширять интерфейс пропсов

Нужно для того чтобы отсылать аналитику с клиента

Учесть что ProductInfo может использоваться отдельно

Для удобства приемочного тестирования необходимо добавить атрибуты data-testid для основных составляющих компонента карточки акции:

• сама карточка акции
• тип акции в правом нижнем углу
• оставшееся время в левом нижнем углу
• таймер обратного отчёта в карточках акций типа "Спецпредложение"
• плашка "Скидки до X%" в карточках акций типа "Скидка за объём"

Обернуть в forwardRef компонент InteractiveImage. Это нужно для корректной работы IntersectionObserver (threshold) в автономном компоненте баннера.

Ситуация

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

Необходимо

Реализовать возможность выводить карточки для товаров:

• для взрослых
• недоступен в регионе
• нет в наличии

необходимо придумать как удобно выводить такие товары в компонентах, зависимых от ProductCard, например ProductCarousel

Ситуация

Сейчас ProductCard имеет состояние при наведении, в котором появляется всплывающая карточка.
Эта карточка не имеет указанного значения z-index в следствии чего при всплытии над элементами у которых есть z-index всплювающая карточка ими перекрывается.

Пример:

Необходимо

В компоненте HoverCard (src/desktop/components/product-card/index.tsx) использовать useLayer из @sima-land/ui-nucleons/helpers/layer для того чтобы задать z-index всплывающей карточке

Таким образом при необходимости можно будет использовать LayerProvider из @sima-land/ui-nucleons/helpers/layer чтобы "поднимать" карточку на нужный уровень z-index

В .storybook/main.js есть закомментированный код конфигурации генератора документации на основе типов TS и JSDoc

Надо обновить пакет и востановить работоспоособность генератора, чтобы в Storybook во вкладке Docs выводилось описание свойств компонентов.

Добавить логотип на замену дефолтному

По аналогии с:
sima-land/ui-nucleons#66

В src/desktop/components/promotion-card/estimate.tsx Неправильно определяется день месяца

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

Ситуация

Есть задача на реализацию хука useIntersection в ui-nucleons: sima-land/ui-nucleons#129

Необходимо

• Дождаться выполнения указанной выше задачи
• Удалить хук useViewport
• Заменить использование useViewport использованием useIntersection

Ситуация

При выводе 1 товара в ProductCarousel стрелки выводятся все равно

Необходимо

Исправить поведение, зафиксировать в storybook

В гайдах появилось состояние с отображением торговой марке:
https://www.figma.com/file/EwAsXveLVRWvfUtJTZPgAs/Desktop-Ui-Kit?node-id=15426%3A18301

Необходимо добавить возможность выводить торговую марку в компонент

Если дата выводится в формате ДД.ММ.ГГГГ то номер месяца выводится на единицу меньше чем нужно:

на скриншоте январь

Необходимо исправить

Ситуация

Компоненты ItemImage почти не используются в проектах а оставшиеся места использования планируют переписать

Также у компонента есть ряд проблем, например использования img.complete в componentDidMount

Необходимо

Убрать компонент из библиотеки

Согласно гайдам:

https://www.figma.com/file/EwAsXveLVRWvfUtJTZPgAs/Desktop-Ui-Kit?node-id=12489%3A0

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

Ситуация

Практика показала, что вывод списков подобным образом:

render(
  <SelectScreen
    title='Районы'
    items={[
      'Верх-Исетский',
      'Чкаловский',
      'Железнодорожный',
      'Кировский',
      'Орджоникидзевский',
      'Октябрьский',
      'Ленинский',
    ]}
    getItemName={String}
    onItemClick={() => {}}
    isItemSelected={item => item === 'Кировский'}
  />,
);

скорее является антипаттерном так как в данном случае список разделен с тем что его формирует: обработчиками событий и callback'ми, определяющими как именно вывести элемент списка

В коде очень плохо читается и JSX-слоты в этом плане куда лучше

Необходимо

Придумать как переделать компонент таким образом чтобы его легко можно было использовать совместно со Screen из @sima-land/ui-nucleons

Возможно стоит оставить только компонент кнопки и назвать его <SelectScreen.Option />

Раздел содержал компоненты из старых версих @sima-land/ui-nucleons и на данный момент эти компоненты не используются в рамках библиотеки

Необходимо полностью удалить раздел

Большие стрелки должны появляться на breakpoint'ах L, XL (1600px и больше) в соответствии с гайдами

Ситуация

Обновились гайды, описывающие опции на экране выбора, теперь они подразумевают что у опции может быть несколько вариантов высоты, произвольное наполнение и тд

Необходимо

Доработать компоненты SelectScreen.* так чтобы учесть обновления дизайн-гайдов

Необходимо реализовать компонент интерактивного изображения: на изображении будут выводиться точки в определенных местах.

Данные для позиций точек будут предоставляться в виде процентов от левой и верхней границ

При нажатии на кнопку нужно иметь возможность сделать что-либо

Проблема:

При постановке задачи на реализацию компонента не было выдвинуто и как следствие учтено требование о необходимости поддержки возможности копирования URL большого фото через стандартное контекстное меню браузера.

Необходимо:

• Добавить возможность отображения стандартного контекстного меню браузера при клике правой кнопкой мыши по большому изображению в галерее.
• Проверить, что есть возможность скопировать через данное контекстное меню ссылку на изображение.

Должно быть 700 по гайдам

Сейчас не квадратные фото в GalleryModal выводятся не по центру, необходимо исправить это.

Также учесть отображение не квадратных превью.

Ситуация

У корневого элемента в компоненте BadgeList указан z-index: 2

Необходимо

Убрать или добавить коммент с описанием того, зачем указан z-index: 2

Ситуация

Если навести на элемент карусели ProductCarousel и в этот момент удалить все элементы карусели, упадет ошибка

TypeError

Cannot read properties of undefined (reading 'props')

Необходимо

Исправить данное поведение добавив проверку в код и зафиксировать поведение unit-тестами

При рендере с пустым массивом items и последующем перерендере с не пустым кнопки выводятся неправильно: по вертикали стоят не по центру картинки

необходимо поправить, также добавить story с примером

Ситуация

На данный момент компонент ModifiersGroup поддерживает проп needShowAll однако в интерфейсе ModifiersGroupProps он не указан

Необходимо

Исправить интерфейс ModifiersGroupProps так чтобы в нем были указаны все поддерживаемые свойства

В гайды добавили состояние загрузки для блока управления количеством в корзине:
https://www.figma.com/file/EwAsXveLVRWvfUtJTZPgAs/Desktop-Ui-Kit?node-id=15426%3A18301

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

Сейчас если очень быстро перемещать курсор над каруселью то иногда картинка с одного товара запаздывает и некоторое время показывается над другим

Это проихсодит из-за того что React пропускает render'ы между очень быстрыми сменами состояния

Необходимо попробовать заставить React принудительно полностью удалять реальный DOM-узел и рисовать новый при перемещении курсора

Ситуация

Если быстро водить курсором по нескольким карточкам, возникает проблема: иногда всплывающие карточки не скрываются, хотя курсор уже не над ними

Воспроизвести удалось только в Chrome, в Safari/Firefox работает нормально

Необходимо

Выяснить в чем проблема, исправить

Ситуация

В новой версии нуклонов обновились константы цветов в скриптах и переменные в стилях

Необходимо

Обновить библиотеку и исправить использование компонентов и цветов

Ситуация

При нажатии на крестик в поле в компоненте SearchBar поле теряет фокус

Необходимо

Предотвращать blur при нажатии на крестик, просто чистить поле при нажатии на него

Использовать конфиг из пакета https://github.com/sima-land/frontend-linters

При трансформации блока пропадает скругление углов.
https://sima-land.github.io/moleculas/?path=/story/desktop-promotioncard--primary

Ситуация

Слоты (фильтрация пропа children) хорошо себя зарекомендовали и удобней работать с компонентом на слотах вместо callback'ов в духе onItemClick

Необходимо

Переписать компонент ModifiersGroup на слоты по аналогии с ProductCarousel

В гайдах:

• Убрали вывод таймера в левом нижнем углу если до окончания акции осталось менее одного дня.
• Таймер теперь может выводиться только поверх изображения в формате дд:чч:мм.

До версии 39.0.1

Проверить работу хука useMedia в Safari < 14

Ситуация

Для ссылок в Badge необходимо иметь возможность передавать rel="nofollow"

Необходимо

Добавить такую возможность, зафиксировать тестами

Необходимо иметь возможность обрабатывать события видиое (play, pause, ended) при выводе видео

Добавить соответствующий пропс в виде коллбека который принимает тип события и экзампляр класса Event

После выполнения задач:

• sima-land/ui-quarks#7

• sima-land/ui-nucleons#28