feat(plasma-new-hope): Add calendar with new architecture #821

TitanKuzmich · 2023-10-26T12:49:57Z

Release Notes

Добавлена реализация компонента Calendar в новой архитектуре.

Добавлены сборки компонента для новых тем plasma_web, plasma_b2c, sds_engineer.

Добавлены сборки компонента для старых библиотек @salutejs/plasma-web, @salutejs/plasma-b2c.

Удалён компонент Calendar из @salutejs/plasma-hope.

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

fixes: #597

⚡ Component performance testing

Result: 🟢 OK

⚡ Component performance testing

Result: 🟢 OK

⚡ Component performance testing

Result: 🟢 OK

⚡ Component performance testing

Result: 🟢 OK

⚡ Component performance testing

Result: 🟢 OK

🐤 Download canary assets:

borderRadius

borderRadius_default_react-native--canary.821.6742702609.ts
borderRadius_plasma_b2c_react-native--canary.821.6742702609.ts
borderRadius_plasma_web_react-native--canary.821.6742702609.ts
borderRadius_sberHealth_react-native--canary.821.6742702609.ts
borderRadius_sbermarket_business_react-native--canary.821.6742702609.ts
borderRadius_sbermarket_metro_react-native--canary.821.6742702609.ts
borderRadius_sbermarket_react-native--canary.821.6742702609.ts
borderRadius_sbermarket_selgros_react-native--canary.821.6742702609.ts
borderRadius_sbermarket_wlbusiness_react-native--canary.821.6742702609.ts
borderRadius_sberonline_react-native--canary.821.6742702609.ts
borderRadius_sberprime_react-native--canary.821.6742702609.ts
borderRadius_stylesSalute_react-native--canary.821.6742702609.ts

color

color_default_ios-swift--canary.821.6742702609.swift
color_default_kotlin--canary.821.6742702609.kt
color_default_react-native--canary.821.6742702609.ts
color_default_xml--canary.821.6742702609.xml
color_plasma_b2c_ios-swift--canary.821.6742702609.swift
color_plasma_b2c_kotlin--canary.821.6742702609.kt
color_plasma_b2c_react-native--canary.821.6742702609.ts
color_plasma_b2c_xml--canary.821.6742702609.xml
color_plasma_web_ios-swift--canary.821.6742702609.swift
color_plasma_web_kotlin--canary.821.6742702609.kt
color_plasma_web_react-native--canary.821.6742702609.ts
color_plasma_web_xml--canary.821.6742702609.xml
color_sberHealth_ios-swift--canary.821.6742702609.swift
color_sberHealth_kotlin--canary.821.6742702609.kt
color_sberHealth_react-native--canary.821.6742702609.ts
color_sberHealth_xml--canary.821.6742702609.xml
color_sbermarket_business_ios-swift--canary.821.6742702609.swift
color_sbermarket_business_kotlin--canary.821.6742702609.kt
color_sbermarket_business_react-native--canary.821.6742702609.ts
color_sbermarket_business_xml--canary.821.6742702609.xml
color_sbermarket_ios-swift--canary.821.6742702609.swift
color_sbermarket_kotlin--canary.821.6742702609.kt
color_sbermarket_metro_ios-swift--canary.821.6742702609.swift
color_sbermarket_metro_kotlin--canary.821.6742702609.kt
color_sbermarket_metro_react-native--canary.821.6742702609.ts
color_sbermarket_metro_xml--canary.821.6742702609.xml
color_sbermarket_react-native--canary.821.6742702609.ts
color_sbermarket_selgros_ios-swift--canary.821.6742702609.swift
color_sbermarket_selgros_kotlin--canary.821.6742702609.kt
color_sbermarket_selgros_react-native--canary.821.6742702609.ts
color_sbermarket_selgros_xml--canary.821.6742702609.xml
color_sbermarket_wlbusiness_ios-swift--canary.821.6742702609.swift
color_sbermarket_wlbusiness_kotlin--canary.821.6742702609.kt
color_sbermarket_wlbusiness_react-native--canary.821.6742702609.ts
color_sbermarket_wlbusiness_xml--canary.821.6742702609.xml
color_sbermarket_xml--canary.821.6742702609.xml
color_sberonline_ios-swift--canary.821.6742702609.swift
color_sberonline_kotlin--canary.821.6742702609.kt
color_sberonline_react-native--canary.821.6742702609.ts
color_sberonline_xml--canary.821.6742702609.xml
color_sberprime_ios-swift--canary.821.6742702609.swift
color_sberprime_kotlin--canary.821.6742702609.kt
color_sberprime_react-native--canary.821.6742702609.ts
color_sberprime_xml--canary.821.6742702609.xml
color_stylesSalute_ios-swift--canary.821.6742702609.swift
color_stylesSalute_kotlin--canary.821.6742702609.kt
color_stylesSalute_react-native--canary.821.6742702609.ts
color_stylesSalute_xml--canary.821.6742702609.xml

shadow

shadow_default_react-native--canary.821.6742702609.ts
shadow_plasma_b2c_react-native--canary.821.6742702609.ts
shadow_plasma_web_react-native--canary.821.6742702609.ts
shadow_sberHealth_react-native--canary.821.6742702609.ts
shadow_sbermarket_business_react-native--canary.821.6742702609.ts
shadow_sbermarket_metro_react-native--canary.821.6742702609.ts
shadow_sbermarket_react-native--canary.821.6742702609.ts
shadow_sbermarket_selgros_react-native--canary.821.6742702609.ts
shadow_sbermarket_wlbusiness_react-native--canary.821.6742702609.ts
shadow_sberonline_react-native--canary.821.6742702609.ts
shadow_sberprime_react-native--canary.821.6742702609.ts
shadow_stylesSalute_react-native--canary.821.6742702609.ts

spacing

spacing_default_react-native--canary.821.6742702609.ts
spacing_plasma_b2c_react-native--canary.821.6742702609.ts
spacing_plasma_web_react-native--canary.821.6742702609.ts
spacing_sberHealth_react-native--canary.821.6742702609.ts
spacing_sbermarket_business_react-native--canary.821.6742702609.ts
spacing_sbermarket_metro_react-native--canary.821.6742702609.ts
spacing_sbermarket_react-native--canary.821.6742702609.ts
spacing_sbermarket_selgros_react-native--canary.821.6742702609.ts
spacing_sbermarket_wlbusiness_react-native--canary.821.6742702609.ts
spacing_sberonline_react-native--canary.821.6742702609.ts
spacing_sberprime_react-native--canary.821.6742702609.ts
spacing_stylesSalute_react-native--canary.821.6742702609.ts

typo

typo_mage_ios-swift--canary.821.6742702609.swift
typo_mage_kotlin--canary.821.6742702609.kt
typo_mage_react-native--canary.821.6742702609.ts
typo_plasma_ios-swift--canary.821.6742702609.swift
typo_plasma_kotlin--canary.821.6742702609.kt
typo_plasma_react-native--canary.821.6742702609.ts
typo_ruler_ios-swift--canary.821.6742702609.swift
typo_ruler_kotlin--canary.821.6742702609.kt
typo_ruler_react-native--canary.821.6742702609.ts
typo_sage_ios-swift--canary.821.6742702609.swift
typo_sage_kotlin--canary.821.6742702609.kt
typo_sage_react-native--canary.821.6742702609.ts
typo_sbermarket_ios-swift--canary.821.6742702609.swift
typo_sbermarket_kotlin--canary.821.6742702609.kt
typo_sbermarket_react-native--canary.821.6742702609.ts
typo_soulmate_ios-swift--canary.821.6742702609.swift
typo_soulmate_kotlin--canary.821.6742702609.kt
typo_soulmate_react-native--canary.821.6742702609.ts

📦 Published PR as canary version: Canary Versions

✨ Test out this PR locally via:

npm install @salutejs/[email protected]
npm install @salutejs/[email protected]
npm install @salutejs/[email protected]
npm install @salutejs/[email protected]
# or 
yarn add @salutejs/[email protected]
yarn add @salutejs/[email protected]
yarn add @salutejs/[email protected]
yarn add @salutejs/[email protected]

Version

Published prerelease version: @salutejs/[email protected]
@salutejs/[email protected]
@salutejs/[email protected]
@salutejs/[email protected]
@salutejs/[email protected]
@salutejs/[email protected]
@salutejs/[email protected]
@salutejs/[email protected]
@salutejs/[email protected]
@salutejs/[email protected]

Changelog

Release Notes

feat(plasma-new-hope): Add calendar with new architecture (#821)

Добавлена реализация компонента Calendar в новой архитектуре.

Добавлены сборки компонента для новых тем plasma_web, plasma_b2c, sds_engineer.

Добавлены сборки компонента для старых библиотек @salutejs/plasma-web, @salutejs/plasma-b2c.

Удалён компонент Calendar из @salutejs/plasma-hope.

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

fixes: #597

⚡ Component performance testing

Result: 🟢 OK

⚡ Component performance testing

Result: 🟢 OK

⚡ Component performance testing

Result: 🟢 OK

⚡ Component performance testing

Result: 🟢 OK

⚡ Component performance testing

Result: 🟢 OK

🚀 Enhancement

@salutejs/plasma-new-hope
- feat(plasma-new-hope): add focus visible dependency #821 (@TitanKuzmich)
- feat(plasma-new-hope): Add calendar with new architecture #821 (@TitanKuzmich)
@salutejs/plasma-b2c, @salutejs/plasma-new-hope, @salutejs/plasma-web
- feat(plasma-new-hope): Add calendar with new architecture #821 (@TitanKuzmich)
@salutejs/plasma-hope
- feat(plasma-new-hope): Add calendar with new architecture #821 (@TitanKuzmich)
@salutejs/plasma-b2c, @salutejs/plasma-hope, @salutejs/plasma-web
- feat(plasma-new-hope): Add calendar with new architecture #821 (@TitanKuzmich)

Authors: 1

Krivonos Aleksandr (@TitanKuzmich)

packages/plasma-new-hope/src/components/Calendar/ui/CalendarMonths/CalendarMonths.tsx

+
+    const getRefs = useCallback(
+        (element: HTMLDivElement, i: number, j: number) => {
+            outerRefs.current[i][j] = element;


packages/plasma-new-hope/src/components/Calendar/ui/CalendarMonths/CalendarMonths.tsx

+
+    const getRefs = useCallback(
+        (element: HTMLDivElement, i: number, j: number) => {
+            outerRefs.current[i][j] = element;


packages/plasma-new-hope/src/components/Calendar/ui/CalendarYears/CalendarYears.tsx

+
+    const getRefs = useCallback(
+        (element: HTMLDivElement, i: number, j: number) => {
+            outerRefs.current[i][j] = element;


packages/plasma-new-hope/src/components/Calendar/ui/CalendarYears/CalendarYears.tsx

+
+    const getRefs = useCallback(
+        (element: HTMLDivElement, i: number, j: number) => {
+            outerRefs.current[i][j] = element;


Salute-Eva · 2023-10-26T14:20:54Z

Theme Builder app deployed!

http://plasma.sberdevices.ru/pr/plasma-theme-builder-pr-821/

packages/plasma-new-hope/src/components/_Icon/IconRoot.tsx

+export const IconRoot: React.FC<IconRootProps> = ({ icon: IconComponent, size, color, className }) => {
+    const c = color || 'var(--plasma-colors-primary)';
+
+    const w = `${sizeMap[size]}rem`;


Salute-Eva · 2023-10-26T15:37:18Z

Theme Builder app deployed!

http://plasma.sberdevices.ru/pr/plasma-theme-builder-pr-821/

Yeti-or · 2023-10-27T05:46:27Z

Удалён компонент TextArea из @salutejs/plasma-hope. - это точно должно быть в этом пр ? cc @neretin-trike

packages/plasma-b2c/api/plasma-b2c.api.md

Yeti-or · 2023-10-27T05:48:32Z

packages/plasma-new-hope/src/components/Calendar/CalendarBase/CalendarBase.tsx

+            const [prevValue, setPrevValue] = useState(value);
+            const [outOfRangeKey, setOutOfRangeKey] = useState<number>(0);
+
+            const [state, dispatch] = useReducer(reducer, getInitialState(value, [5, 6], type));


а что такое [5,6] ?

по-моему это размерность, только чего уже не помню )

Размер сетки для календаря для useKeyNavigation

packages/plasma-new-hope/src/components/Calendar/shared/mixins.ts

packages/plasma-new-hope/src/components/Calendar/ui/CalendarDayItem/CalendarDayItem.styles.ts

Yeti-or · 2023-10-27T05:51:41Z

packages/plasma-new-hope/src/components/Calendar/ui/CalendarDayItem/CalendarDayItem.styles.ts

+
+    ${flexCenter()};
+
+    &.${String(classes.daySideLeft)} {


почему приходится к строке явно приводить?

Особенность linaria. Иначе не собираются стили

надо собрать все такие места куда-то в проблемы с linaria и начинать править их babel процессор или писать своё =/

Yeti-or · 2023-10-27T05:52:54Z

packages/plasma-new-hope/src/components/Calendar/ui/CalendarDayItem/CalendarDayItem.tsx

@@ -0,0 +1,100 @@
+import React, { forwardRef, memo } from 'react';
+
+import { cx } from '../../../../utils';


что-то меня смущает что приходится использовать cx =/

ну это кастомная штука, кажется в таком случае норм

packages/plasma-new-hope/src/mixins/index.ts

packages/plasma-new-hope/src/components/Calendar/shared/tokens.ts

Salute-Eva · 2023-10-27T10:51:46Z

Theme Builder app deployed!

http://plasma.sberdevices.ru/pr/plasma-theme-builder-pr-821/

Salute-Eva · 2023-10-27T11:41:20Z

Theme Builder app deployed!

http://plasma.sberdevices.ru/pr/plasma-theme-builder-pr-821/

Salute-Eva · 2023-10-27T11:50:16Z

Documentation preview deployed!

website: http://plasma.sberdevices.ru/pr/pr-821/
b2c storybook: http://plasma.sberdevices.ru/pr/pr-821/b2c-storybook/
web storybook: http://plasma.sberdevices.ru/pr/pr-821/web-storybook/
new-hope storybook: http://plasma.sberdevices.ru/pr/pr-821/new-hope-storybook/

packages/plasma-new-hope/src/components/Calendar/shared/tokens.ts

Yeti-or · 2023-10-28T11:21:41Z

packages/plasma-new-hope/src/components/Calendar/shared/types.ts

@@ -89,7 +81,7 @@ export interface Calendar extends HTMLAttributes<HTMLDivElement> {
    /**
     * Выбранное значение.
     */
-    value: CalendarValueType;
+    value?: CalendarValueType;


это безопасное изменение но обратно уже будет поломка API
тут точно опциональное?

@TitanKuzmich

А почему стало опционально?

Вернул как было

Yeti-or · 2023-10-28T11:23:36Z

packages/plasma-new-hope/src/components/Calendar/ui/CalendarDayItem/CalendarDayItem.styles.ts

+
+    &.${String(classes.daySideRight)} {
+        &:before {
+            right: ${({ offset }) => `${offset}px`};


этот offset часто меняется?
потому что если да, то для styled-components это жопа

если разок за жизнь компонента то ок

@Yeti-or Объясни пожалуйста почему - это жопа?

offset меняется один раз для CalendarDayItem по hover при выборе range. Он может быть 0 или -1 пиксель

packages/plasma-new-hope/src/examples/sds_engineer/components/Calendar/Calendar.stories.tsx

packages/plasma-new-hope/src/mixins/index.ts

Yeti-or · 2023-10-28T11:28:04Z

packages/plasma-new-hope/src/examples/sds_engineer/components/Calendar/Calendar.stories.tsx

+
+const onChangeValue = action('onChangeValue');
+
+const StyledCalendar = styled(Calendar)`


я тут только понял что это сторя, почем нам нужно календарь стилизовать в сторей?

Для поповера стилизацию сделал небольшую. Можно и без нее сделать

packages/plasma-new-hope/src/components/Calendar/Calendar.tsx

packages/plasma-new-hope/src/components/Calendar/shared/mixins.ts

packages/plasma-new-hope/src/components/Calendar/shared/types.ts

packages/plasma-new-hope/src/components/Calendar/ui/CalendarDayItem/CalendarDayItem.styles.ts

packages/plasma-new-hope/src/components/_Icon/Icon.assets/DisclosureRight.tsx

Salute-Eva · 2023-11-02T15:42:55Z

Documentation preview deployed!

website: http://plasma.sberdevices.ru/pr/pr-821/
b2c storybook: http://plasma.sberdevices.ru/pr/pr-821/b2c-storybook/
web storybook: http://plasma.sberdevices.ru/pr/pr-821/web-storybook/
new-hope storybook: http://plasma.sberdevices.ru/pr/pr-821/new-hope-storybook/

Salute-Eva · 2023-11-02T16:10:13Z

Theme Builder app deployed!

http://plasma.sberdevices.ru/pr/plasma-theme-builder-pr-821/

Salute-Eva · 2023-11-02T17:13:39Z

Theme Builder app deployed!

http://plasma.sberdevices.ru/pr/plasma-theme-builder-pr-821/

Salute-Eva · 2023-11-02T17:21:18Z

Documentation preview deployed!

website: http://plasma.sberdevices.ru/pr/pr-821/
b2c storybook: http://plasma.sberdevices.ru/pr/pr-821/b2c-storybook/
web storybook: http://plasma.sberdevices.ru/pr/pr-821/web-storybook/
new-hope storybook: http://plasma.sberdevices.ru/pr/pr-821/new-hope-storybook/

Salute-Eva · 2023-11-03T08:10:53Z

Theme Builder app deployed!

http://plasma.sberdevices.ru/pr/plasma-theme-builder-pr-821/

Salute-Eva · 2023-11-03T08:17:28Z

Documentation preview deployed!

website: http://plasma.sberdevices.ru/pr/pr-821/
b2c storybook: http://plasma.sberdevices.ru/pr/pr-821/b2c-storybook/
web storybook: http://plasma.sberdevices.ru/pr/pr-821/web-storybook/
new-hope storybook: http://plasma.sberdevices.ru/pr/pr-821/new-hope-storybook/

Salute-Eva · 2023-11-03T11:31:41Z

🚀 This PR is included in version: @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected] 🚀

Salute-Eva · 2023-11-03T11:31:44Z

🚀 This PR is included in version: @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected] 🚀

Salute-Eva · 2023-11-03T11:31:47Z

🚀 This PR is included in version: @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected] 🚀

Salute-Eva · 2023-11-03T11:31:50Z

🚀 This PR is included in version: @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected] 🚀

Salute-Eva · 2023-11-03T11:31:53Z

🚀 This PR is included in version: @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected] 🚀

Salute-Eva · 2023-11-03T11:31:56Z

🚀 This PR is included in version: @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected] 🚀

Salute-Eva · 2023-11-03T11:31:59Z

🚀 This PR is included in version: @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected] 🚀

Salute-Eva · 2023-11-03T11:32:02Z

🚀 This PR is included in version: @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected], @salutejs/[email protected] 🚀

TitanKuzmich requested review from Yeti-or and neretin-trike October 26, 2023 12:49

TitanKuzmich requested review from LamaEats, Yakutoc and kayman233 as code owners October 26, 2023 12:49

TitanKuzmich force-pushed the plasma-2085/refactor-calendar branch from 95b6d3d to 3706cc7 Compare October 26, 2023 14:16

github-advanced-security bot found potential problems Oct 26, 2023

View reviewed changes

TitanKuzmich removed request for Yakutoc, LamaEats and kayman233 October 26, 2023 14:19

TitanKuzmich changed the base branch from dev to master October 26, 2023 14:24

TitanKuzmich changed the base branch from master to dev October 26, 2023 14:24

TitanKuzmich force-pushed the plasma-2085/refactor-calendar branch from 3706cc7 to 1fe5406 Compare October 26, 2023 15:33

github-advanced-security bot found potential problems Oct 26, 2023

View reviewed changes

Yeti-or approved these changes Oct 27, 2023

View reviewed changes

neretin-trike reviewed Oct 27, 2023

View reviewed changes

packages/plasma-new-hope/src/components/Calendar/shared/tokens.ts Outdated Show resolved Hide resolved

TitanKuzmich force-pushed the plasma-2085/refactor-calendar branch from 1fe5406 to 8b26a2e Compare October 27, 2023 10:48

TitanKuzmich force-pushed the plasma-2085/refactor-calendar branch from 8b26a2e to 496b57b Compare October 27, 2023 11:37

Yeti-or reviewed Oct 28, 2023

View reviewed changes