Merge branch 'refs/heads/develop' into 2582-vertical-tab-button-get-b…

…ack-paddings-as-per-previous-component-version
epam · Oct 30, 2024 · 39be1f5 · 39be1f5
2 parents 579b06a + eadccbd
commit 39be1f5
Show file tree

Hide file tree

Showing 627 changed files with 85,574 additions and 104,290 deletions.
diff --git a/.github/workflows/qa.yml b/.github/workflows/qa.yml
@@ -3,7 +3,7 @@ name: qa
 # Controls when the action will run.
 on:
     push:
-        branches: [ feature/timeline ]
+        branches: [ themes/eduverse-theme ]
     # Allows you to run this workflow manually from the Actions tab
     workflow_dispatch:
 

diff --git a/app/.eslintrc.js b/app/.eslintrc.js
@@ -7,5 +7,6 @@ module.exports = {
         // in the future, this rule will be enabled globally (not only in "app")
         'react-hooks/exhaustive-deps': unifiedSeverity,
         ...turnOffEslintRulesToBeFixed(),
+        'no-restricted-imports': 'off',
     },
 };
diff --git a/app/package.json b/app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@epam/app",
-  "version": "5.10.2",
+  "version": "5.11.0-rc.0",
   "description": "EPAM Unified UI landing",
   "author": "EPAM",
   "license": "MIT",
@@ -17,19 +17,19 @@
   "dependencies": {
     "@babel/plugin-proposal-private-property-in-object": "7.21.11",
     "@elastic/apm-rum": "^5.14.0",
-    "@epam/assets": "5.10.2",
-    "@epam/draft-rte": "5.10.2",
-    "@epam/electric": "5.10.2",
+    "@epam/assets": "5.11.0-rc.0",
+    "@epam/draft-rte": "5.11.0-rc.0",
+    "@epam/electric": "5.11.0-rc.0",
     "@epam/internal": "0.0.2",
-    "@epam/loveship": "5.10.2",
-    "@epam/promo": "5.10.2",
-    "@epam/uui": "5.10.2",
-    "@epam/uui-components": "5.10.2",
-    "@epam/uui-core": "5.10.2",
-    "@epam/uui-db": "5.10.2",
-    "@epam/uui-docs": "5.10.2",
-    "@epam/uui-editor": "5.10.2",
-    "@epam/uui-timeline": "5.10.2",
+    "@epam/loveship": "5.11.0-rc.0",
+    "@epam/promo": "5.11.0-rc.0",
+    "@epam/uui": "5.11.0-rc.0",
+    "@epam/uui-components": "5.11.0-rc.0",
+    "@epam/uui-core": "5.11.0-rc.0",
+    "@epam/uui-db": "5.11.0-rc.0",
+    "@epam/uui-docs": "5.11.0-rc.0",
+    "@epam/uui-editor": "5.11.0-rc.0",
+    "@epam/uui-timeline": "5.11.0-rc.0",
     "@tanstack/react-query": "^5.17.19",
     "@udecode/plate-common": "31.3.2",
     "amplitude-js": "8.9.1",

diff --git a/app/src/common/AppFooter.tsx b/app/src/common/AppFooter.tsx
@@ -62,7 +62,7 @@ export function AppFooter() {
                         </Anchor>
                     </FlexRow>
                 </FlexCell>
-                <FlexCell cx={ css.secondBlock } width="auto" grow={ 1 } minWidth={ 583 }>
+                <FlexCell cx={ css.secondBlock } width="auto" grow={ 1 } minWidth={ 650 }>
                     <FlexRow columnGap={ 48 } alignItems="top">
                         <FlexCell width="auto">
                             <Text color="white" fontWeight="600" fontSize="18">Have a question?</Text>

diff --git a/app/src/common/AppHeader.tsx b/app/src/common/AppHeader.tsx
@@ -213,6 +213,7 @@ export function AppHeader() {
                                     if (!['figma', 'git', 'gitStar', 'direction', 'themeCaption'].includes(i.id)) {
                                         return i.render({ ...i, onClose: props.onClose });
                                     }
+                                    return null;
                                 });
                             } }
                         />

diff --git a/app/src/common/docs/baseDocBlock/components/tabsNav.tsx b/app/src/common/docs/baseDocBlock/components/tabsNav.tsx
@@ -53,7 +53,6 @@ export function TabsNav(props: TTabsNavProps) {
         >
             { pageWidth <= 768 && (
                 <Button
-                    rawProps={ { style: { marginInlineStart: '6px', marginInlineEnd: '12px' } } }
                     fill="none"
                     icon={ NavigationShowOutlineIcon }
                     onClick={ props.handleMobSidebarBtnClick }

diff --git a/app/src/data/themes.ts b/app/src/data/themes.ts
@@ -3,7 +3,9 @@ export enum BuiltInTheme {
     loveship = 'loveship',
     loveship_dark = 'loveship_dark',
     promo = 'promo',
-    vanilla_thunder = 'vanilla_thunder'
+    vanilla_thunder = 'vanilla_thunder',
+    eduverse_light = 'eduverse_light',
+    eduverse_dark = 'eduverse_dark'
 }
 
 /* No restrictions on custom theme id - it can be any string */
@@ -22,4 +24,6 @@ export const builtInThemes: ThemeBaseParams[] = [
     { id: BuiltInTheme.loveship_dark, name: 'Loveship Dark' },
     { id: BuiltInTheme.vanilla_thunder, name: 'Vanilla Thunder' },
     { id: BuiltInTheme.promo, name: 'Promo' },
+    { id: BuiltInTheme.eduverse_light, name: 'Eduverse Light' },
+    { id: BuiltInTheme.eduverse_dark, name: 'Eduverse Dark' },
 ];
diff --git a/app/src/demo/dnd/DemoDnd.module.scss b/app/src/demo/dnd/DemoDnd.module.scss
@@ -27,5 +27,6 @@
 
     @media (max-width: 1279px) {
         justify-content: center;
+        margin: 30px 24px;
     }
 }
diff --git a/app/src/demo/dnd/DemoDnd.tsx b/app/src/demo/dnd/DemoDnd.tsx
@@ -56,7 +56,8 @@ export class DemoDnd extends React.Component<{}, DemoDndState> {
     render() {
         const sortedModules = orderBy(this.state.moduleItems, ({ order }) => order);
         const sortedSections = orderBy(this.state.sectionItems, ({ order }) => order);
-        const isDesktop = window.screen?.width >= 1280;
+        const isDesktop = window.document.body.clientWidth >= 1280;
+
         return (
             <FlexRow cx={ css.root } alignItems="stretch">
                 {isDesktop && (

diff --git a/app/src/docs/Button.doc.tsx b/app/src/docs/Button.doc.tsx
@@ -74,7 +74,7 @@ export class ButtonDoc extends BaseDocsBlock {
                         isDropdown: { examples: '*' },
                     },
                 ],
-                cellSize: '150-60',
+                cellSize: '150-70',
             });
             const colorVariantsMatrix: TMatrixLocal = {
                 caption: { values: [TEST_DATA.caption1Line] },

diff --git a/app/src/docs/MultiSwitch.doc.tsx b/app/src/docs/MultiSwitch.doc.tsx
@@ -53,7 +53,7 @@ export class MultiSwitchDoc extends BaseDocsBlock {
                 items: [{ caption: 'A', id: 1 }, { caption: 'B', id: 2 }],
                 value: 1,
             };
-            const w120_h60: TPreviewCellSize = '120-60';
+            const w120_h60: TPreviewCellSize = '120-70';
             const w80_h50: TPreviewCellSize = '80-50';
             docPreview.add({
                 id: TMultiSwitchPreview['Size Variants'],

diff --git a/app/src/docs/Tag.doc.tsx b/app/src/docs/Tag.doc.tsx
@@ -57,7 +57,7 @@ export class TagDoc extends BaseDocsBlock {
                     isDropdown: { examples: '*' },
                     onClear: { examples: ['callback', undefined] },
                 },
-                cellSize: '195-60',
+                cellSize: '210-60',
             });
             docPreview.add({
                 id: TTagPreview['Color Variants'],
@@ -70,7 +70,7 @@ export class TagDoc extends BaseDocsBlock {
                     fill: { examples: '*' },
                     isDisabled: { examples: '*' },
                 },
-                cellSize: '130-60',
+                cellSize: '140-60',
             });
         },
     };

diff --git a/app/src/docs/_examples/datePicker/Filter.example.tsx b/app/src/docs/_examples/datePicker/Filter.example.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { uuiDayjs, Dayjs } from '../../../helpers';
+import dayjs, { Dayjs } from 'dayjs';
 import { DatePicker, FlexRow } from '@epam/uui';
 
 export default function DatePickerFilterExample() {
@@ -11,7 +11,7 @@ export default function DatePickerFilterExample() {
                 value={ value }
                 onValueChange={ onValueChange }
                 format="MMM D, YYYY"
-                filter={ (day: Dayjs) => day.valueOf() >= uuiDayjs.dayjs().subtract(1, 'day').valueOf() }
+                filter={ (day: Dayjs) => day.valueOf() >= dayjs().subtract(1, 'day').valueOf() }
             />
         </FlexRow>
     );

diff --git a/app/src/docs/_examples/datePicker/Footer.example.tsx b/app/src/docs/_examples/datePicker/Footer.example.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { DatePicker, FlexRow, LinkButton } from '@epam/uui';
 import css from './FormatDateExample.module.scss';
-import { uuiDayjs } from '../../../helpers';
+import dayjs from 'dayjs';
 
 export default function DatePickerFooterExample() {
     const [value, onValueChange] = useState('');
@@ -13,7 +13,7 @@ export default function DatePickerFooterExample() {
                 onValueChange={ onValueChange }
                 renderFooter={ () => (
                     <FlexRow cx={ css.footer } size="48">
-                        <LinkButton size="36" caption="Today" onClick={ () => onValueChange(uuiDayjs.dayjs().format('YYYY-MM-DD')) } />
+                        <LinkButton size="36" caption="Today" onClick={ () => onValueChange(dayjs().format('YYYY-MM-DD')) } />
                     </FlexRow>
                 ) }
             />

diff --git a/app/src/docs/_examples/rangeDatePicker/PresetsAndFooter.example.tsx b/app/src/docs/_examples/rangeDatePicker/PresetsAndFooter.example.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { rangeDatePickerPresets, RangeDatePickerValue, RangeDatePicker, FlexRow, Text } from '@epam/uui';
-import { uuiDayjs } from '../../../helpers';
+import dayjs from 'dayjs';
 import css from './PresetsAndFooter.module.scss';
 
 export default function DatePickerBaseExample() {
@@ -17,23 +17,23 @@ export default function DatePickerBaseExample() {
                     last3Days: {
                         name: 'Last 3 days',
                         getRange: () => {
-                            return { from: uuiDayjs.dayjs().subtract(2, 'day').toString(), to: uuiDayjs.dayjs().toString(), order: 11 };
+                            return { from: dayjs().subtract(2, 'day').toString(), to: dayjs().toString(), order: 11 };
                         },
                     },
                     last7Days: {
                         name: 'Last 7 days',
                         getRange: () => {
-                            return { from: uuiDayjs.dayjs().subtract(6, 'day').toString(), to: uuiDayjs.dayjs().toString(), order: 12 };
+                            return { from: dayjs().subtract(6, 'day').toString(), to: dayjs().toString(), order: 12 };
                         },
                     },
                 } }
                 renderFooter={ (value: RangeDatePickerValue) => (
                     <div className={ css.container }>
                         <Text color="primary" size="30">
                             { (!value?.from || !value?.to) && 'Please select range' }
-                            { value?.from && value?.to && uuiDayjs.dayjs(value?.from).format('MMMM DD, YYYY') }
+                            { value?.from && value?.to && dayjs(value?.from).format('MMMM DD, YYYY') }
                             { (value?.from && value?.to) && ' - ' }
-                            { value?.from && value?.to && uuiDayjs.dayjs(value?.to).format('MMMM DD, YYYY') }
+                            { value?.from && value?.to && dayjs(value?.to).format('MMMM DD, YYYY') }
                             { getRangeLength(value) !== 0 && (getRangeLength(value) === 1 ? ` (${getRangeLength(value)} day)` : ` (${getRangeLength(value)} days)`) }
                         </Text>
                     </div>
@@ -44,13 +44,13 @@ export default function DatePickerBaseExample() {
 }
 
 const getRangeLength = (value: RangeDatePickerValue) => {
-    const isOneOrZero = uuiDayjs.dayjs(value.from).valueOf() === uuiDayjs.dayjs(value.to).valueOf() ? 1 : 0;
+    const isOneOrZero = dayjs(value.from).valueOf() === dayjs(value.to).valueOf() ? 1 : 0;
 
     return (
-        uuiDayjs.dayjs(value.to).isValid()
-        && uuiDayjs.dayjs(value.from).isValid()
-        && uuiDayjs.dayjs(value.from).valueOf() < uuiDayjs.dayjs(value.to).valueOf()
+        dayjs(value.to).isValid()
+        && dayjs(value.from).isValid()
+        && dayjs(value.from).valueOf() < dayjs(value.to).valueOf()
     )
-        ? uuiDayjs.dayjs(value.to).diff(uuiDayjs.dayjs(value.from), 'day') + 1
+        ? dayjs(value.to).diff(dayjs(value.from), 'day') + 1
         : isOneOrZero;
 };
diff --git a/app/src/docs/_examples/tables/ColumnFiltersTable.example.tsx b/app/src/docs/_examples/tables/ColumnFiltersTable.example.tsx
@@ -1,5 +1,5 @@
 import React, { useMemo, useState } from 'react';
-import { uuiDayjs } from '../../../helpers';
+import dayjs from 'dayjs';
 import { DataColumnProps, useLazyDataSource, useUuiContext, TableFiltersConfig, LazyDataSource, useTableState, DataTableState, getSeparatedValue } from '@epam/uui-core';
 import { Text, DataTable, Panel, FlexRow, Badge, BadgeProps } from '@epam/uui';
 import { Person } from '@epam/uui-docs';
@@ -47,19 +47,19 @@ const personColumns: DataColumnProps<Person, number>[] = [
     }, {
         key: 'birthDate',
         caption: 'Birth date',
-        render: (p) => p?.birthDate && <Text>{uuiDayjs.dayjs(p.birthDate).format('MMM D, YYYY')}</Text>,
+        render: (p) => p?.birthDate && <Text>{dayjs(p.birthDate).format('MMM D, YYYY')}</Text>,
         width: 120,
         isSortable: true,
     }, {
         key: 'hireDate',
         caption: 'Hire date',
-        render: (p) => p?.hireDate && <Text>{uuiDayjs.dayjs(p.hireDate).format('MMM D, YYYY')}</Text>,
+        render: (p) => p?.hireDate && <Text>{dayjs(p.hireDate).format('MMM D, YYYY')}</Text>,
         width: 120,
         isSortable: true,
     },
 ];
 
-export default function ColumnsConfigurationDataTableExample() {
+export default function ColumnFiltersTableExample() {
     const { api } = useUuiContext();
 
     const filtersConfig = useMemo<TableFiltersConfig<Person>[]>(

diff --git a/app/src/docs/_examples/tables/FiltersPanelBasic.example.tsx b/app/src/docs/_examples/tables/FiltersPanelBasic.example.tsx
@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { uuiDayjs } from '../../../helpers';
+import dayjs from 'dayjs';
 import { defaultPredicates, rangeDatePickerPresets, FiltersPanel, DataTable, Panel, FlexRow, Text, Switch, Badge, BadgeProps } from '@epam/uui';
 import { DataColumnProps, getSeparatedValue, LazyDataSource, TableFiltersConfig, useLazyDataSource, useTableState, useUuiContext } from '@epam/uui-core';
 import { Person } from '@epam/uui-docs';
@@ -57,14 +57,14 @@ const personColumns: DataColumnProps<Person, number>[] = [
     {
         key: 'birthDate',
         caption: 'Birth date',
-        render: (p) => p?.birthDate && <Text>{uuiDayjs.dayjs(p.birthDate).format('MMM D, YYYY')}</Text>,
+        render: (p) => p?.birthDate && <Text>{dayjs(p.birthDate).format('MMM D, YYYY')}</Text>,
         width: 120,
         isSortable: true,
     },
     {
         key: 'hireDate',
         caption: 'Hire date',
-        render: (p) => p?.hireDate && <Text>{uuiDayjs.dayjs(p.hireDate).format('MMM D, YYYY')}</Text>,
+        render: (p) => p?.hireDate && <Text>{dayjs(p.hireDate).format('MMM D, YYYY')}</Text>,
         width: 120,
         isSortable: true,
     },
@@ -136,13 +136,13 @@ export default function FiltersPanelExample() {
                     last3Days: {
                         name: 'Last 3 days',
                         getRange: () => {
-                            return { from: uuiDayjs.dayjs().subtract(3, 'day').toString(), to: uuiDayjs.dayjs().toString(), order: 11 };
+                            return { from: dayjs().subtract(3, 'day').toString(), to: dayjs().toString(), order: 11 };
                         },
                     },
                     last7Days: {
                         name: 'Last 7 days',
                         getRange: () => {
-                            return { from: uuiDayjs.dayjs().subtract(7, 'day').toString(), to: uuiDayjs.dayjs().toString(), order: 12 };
+                            return { from: dayjs().subtract(7, 'day').toString(), to: dayjs().toString(), order: 12 };
                         },
                     },
                 },

diff --git a/app/src/docs/_examples/tables/PresetsPanelBasic.example.tsx b/app/src/docs/_examples/tables/PresetsPanelBasic.example.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useMemo } from 'react';
-import { uuiDayjs } from '../../../helpers';
+import dayjs from 'dayjs';
 import { DataColumnProps, IModal, ITablePreset, LazyDataSource, TableFiltersConfig, useLazyDataSource, useTableState, useUuiContext } from '@epam/uui-core';
 import {
     DataTable, Panel, FlexRow, Text, PresetsPanel, Badge, ModalBlocker, ModalWindow, ModalFooter, Button, ScrollBars,
@@ -44,7 +44,7 @@ const personColumns: DataColumnProps<Person, number>[] = [
     }, {
         key: 'birthDate',
         caption: 'Birth date',
-        render: (p) => p?.birthDate && <Text>{ uuiDayjs.dayjs(p.birthDate).format('MMM D, YYYY') }</Text>,
+        render: (p) => p?.birthDate && <Text>{ dayjs(p.birthDate).format('MMM D, YYYY') }</Text>,
         width: 140,
         isSortable: true,
     },

diff --git a/app/src/docs/_examples/tables/useTableState/useTableState.example.tsx b/app/src/docs/_examples/tables/useTableState/useTableState.example.tsx
@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { uuiDayjs } from '../../../../helpers';
+import dayjs from 'dayjs';
 import { DataColumnProps, getSeparatedValue, ITablePreset, LazyDataSource, TableFiltersConfig, useLazyDataSource, useTableState, useUuiContext } from '@epam/uui-core';
 import { DataTable, Panel, FlexRow, Text, PresetsPanel, Badge, BadgeProps } from '@epam/uui';
 import { Person } from '@epam/uui-docs';
@@ -46,13 +46,13 @@ const personColumns: DataColumnProps<Person, number>[] = [
     }, {
         key: 'birthDate',
         caption: 'Birth date',
-        render: (p) => p?.birthDate && <Text>{uuiDayjs.dayjs(p.birthDate).format('MMM D, YYYY')}</Text>,
+        render: (p) => p?.birthDate && <Text>{dayjs(p.birthDate).format('MMM D, YYYY')}</Text>,
         width: 120,
         isSortable: true,
     }, {
         key: 'hireDate',
         caption: 'Hire date',
-        render: (p) => p?.hireDate && <Text>{uuiDayjs.dayjs(p.hireDate).format('MMM D, YYYY')}</Text>,
+        render: (p) => p?.hireDate && <Text>{dayjs(p.hireDate).format('MMM D, YYYY')}</Text>,
         width: 120,
         isSortable: true,
     },

diff --git a/app/src/docs/_examples/tables/useTableState/useTableStateWithIEditable.example.tsx b/app/src/docs/_examples/tables/useTableState/useTableStateWithIEditable.example.tsx
@@ -1,5 +1,5 @@
 import React, { useMemo, useState } from 'react';
-import { uuiDayjs } from '../../../../helpers';
+import dayjs from 'dayjs';
 import { DataColumnProps, getSeparatedValue, LazyDataSource, TableFiltersConfig, useLazyDataSource, useTableState, useUuiContext } from '@epam/uui-core';
 import { DataTable, Panel, FlexRow, Text, Badge, BadgeProps } from '@epam/uui';
 import { Person } from '@epam/uui-docs';
@@ -46,13 +46,13 @@ const personColumns: DataColumnProps<Person, number>[] = [
     }, {
         key: 'birthDate',
         caption: 'Birth date',
-        render: (p) => p?.birthDate && <Text>{uuiDayjs.dayjs(p.birthDate).format('MMM D, YYYY')}</Text>,
+        render: (p) => p?.birthDate && <Text>{dayjs(p.birthDate).format('MMM D, YYYY')}</Text>,
         width: 120,
         isSortable: true,
     }, {
         key: 'hireDate',
         caption: 'Hire date',
-        render: (p) => p?.hireDate && <Text>{uuiDayjs.dayjs(p.hireDate).format('MMM D, YYYY')}</Text>,
+        render: (p) => p?.hireDate && <Text>{dayjs(p.hireDate).format('MMM D, YYYY')}</Text>,
         width: 120,
         isSortable: true,
     },

diff --git a/app/src/docs/assets/Downloads.doc.tsx b/app/src/docs/assets/Downloads.doc.tsx
@@ -66,7 +66,7 @@ export class DownloadsDoc extends BaseDocsBlock {
         title, additionalInfo, link, image,
     }: any) {
         return (
-            <FlexCell minWidth={ 320 }>
+            <FlexCell key={ title } minWidth={ 320 }>
                 <FlexRow columnGap="12">
                     <IconContainer icon={ image } />
                     <FlexCell width="auto">

diff --git a/app/src/index.tsx b/app/src/index.tsx
@@ -15,6 +15,8 @@ import '@epam/internal/styles.css';
 import '@epam/assets/theme/theme_vanilla_thunder.scss';
 import '@epam/assets/theme/theme_loveship_dark.scss';
 import '@epam/assets/theme/theme_electric.scss';
+import '@epam/assets/theme/theme_eduverse_light.scss';
+import '@epam/assets/theme/theme_eduverse_dark.scss';
 import './index.module.scss';
 
 const router6 = createBrowserRouter([
-Original file line number
+Diff line change
@@ Expand Up / @@ -213,6 +213,7 @@ export function AppHeader() { @@
                                         if (!['figma', 'git', 'gitStar', 'direction', 'themeCaption'].includes(i.id)) {
                                             return i.render({ ...i, onClose: props.onClose });
                                         }
+                                        return null;
                                     });
                                 } }
                             />
@@ Expand Down @@