From 3afd99241297741f46d9dbb6d6f16a95c801c8f6 Mon Sep 17 00:00:00 2001 From: AlekseyManetov Date: Wed, 30 Oct 2024 17:39:53 +0100 Subject: [PATCH] remove dayJsHelper from examples, since it broke codesandbox --- app/.eslintrc.js | 1 + .../_examples/datePicker/Filter.example.tsx | 4 ++-- .../_examples/datePicker/Footer.example.tsx | 4 ++-- .../PresetsAndFooter.example.tsx | 20 +++++++++---------- .../tables/ColumnFiltersTable.example.tsx | 8 ++++---- .../tables/FiltersPanelBasic.example.tsx | 10 +++++----- .../tables/PresetsPanelBasic.example.tsx | 4 ++-- .../useTableState/useTableState.example.tsx | 6 +++--- .../useTableStateWithIEditable.example.tsx | 6 +++--- 9 files changed, 32 insertions(+), 31 deletions(-) diff --git a/app/.eslintrc.js b/app/.eslintrc.js index 64670e6de5..da3f090c49 100644 --- 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/src/docs/_examples/datePicker/Filter.example.tsx b/app/src/docs/_examples/datePicker/Filter.example.tsx index f264fa5cc8..7b463be717 100644 --- 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() } /> ); diff --git a/app/src/docs/_examples/datePicker/Footer.example.tsx b/app/src/docs/_examples/datePicker/Footer.example.tsx index cf57dbd1b2..94621a2676 100644 --- 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={ () => ( - onValueChange(uuiDayjs.dayjs().format('YYYY-MM-DD')) } /> + onValueChange(dayjs().format('YYYY-MM-DD')) } /> ) } /> diff --git a/app/src/docs/_examples/rangeDatePicker/PresetsAndFooter.example.tsx b/app/src/docs/_examples/rangeDatePicker/PresetsAndFooter.example.tsx index 311e85d85c..b071720086 100644 --- 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,13 +17,13 @@ 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 }; }, }, } } @@ -31,9 +31,9 @@ export default function DatePickerBaseExample() {
{ (!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)`) }
@@ -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 index 16d9400169..387420fc9a 100644 --- 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[] = [ }, { key: 'birthDate', caption: 'Birth date', - render: (p) => p?.birthDate && {uuiDayjs.dayjs(p.birthDate).format('MMM D, YYYY')}, + render: (p) => p?.birthDate && {dayjs(p.birthDate).format('MMM D, YYYY')}, width: 120, isSortable: true, }, { key: 'hireDate', caption: 'Hire date', - render: (p) => p?.hireDate && {uuiDayjs.dayjs(p.hireDate).format('MMM D, YYYY')}, + render: (p) => p?.hireDate && {dayjs(p.hireDate).format('MMM D, YYYY')}, width: 120, isSortable: true, }, ]; -export default function ColumnsConfigurationDataTableExample() { +export default function ColumnFiltersTableExample() { const { api } = useUuiContext(); const filtersConfig = useMemo[]>( diff --git a/app/src/docs/_examples/tables/FiltersPanelBasic.example.tsx b/app/src/docs/_examples/tables/FiltersPanelBasic.example.tsx index 0d1b1cfff7..9e66c54e44 100644 --- 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[] = [ { key: 'birthDate', caption: 'Birth date', - render: (p) => p?.birthDate && {uuiDayjs.dayjs(p.birthDate).format('MMM D, YYYY')}, + render: (p) => p?.birthDate && {dayjs(p.birthDate).format('MMM D, YYYY')}, width: 120, isSortable: true, }, { key: 'hireDate', caption: 'Hire date', - render: (p) => p?.hireDate && {uuiDayjs.dayjs(p.hireDate).format('MMM D, YYYY')}, + render: (p) => p?.hireDate && {dayjs(p.hireDate).format('MMM D, YYYY')}, 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 index f3cee9dc55..3dc1a09ae2 100644 --- 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[] = [ }, { key: 'birthDate', caption: 'Birth date', - render: (p) => p?.birthDate && { uuiDayjs.dayjs(p.birthDate).format('MMM D, YYYY') }, + render: (p) => p?.birthDate && { dayjs(p.birthDate).format('MMM D, YYYY') }, 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 index 08bb7f9e5e..049e525f33 100644 --- 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[] = [ }, { key: 'birthDate', caption: 'Birth date', - render: (p) => p?.birthDate && {uuiDayjs.dayjs(p.birthDate).format('MMM D, YYYY')}, + render: (p) => p?.birthDate && {dayjs(p.birthDate).format('MMM D, YYYY')}, width: 120, isSortable: true, }, { key: 'hireDate', caption: 'Hire date', - render: (p) => p?.hireDate && {uuiDayjs.dayjs(p.hireDate).format('MMM D, YYYY')}, + render: (p) => p?.hireDate && {dayjs(p.hireDate).format('MMM D, YYYY')}, 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 index fd74e7d647..96d04523ee 100644 --- 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[] = [ }, { key: 'birthDate', caption: 'Birth date', - render: (p) => p?.birthDate && {uuiDayjs.dayjs(p.birthDate).format('MMM D, YYYY')}, + render: (p) => p?.birthDate && {dayjs(p.birthDate).format('MMM D, YYYY')}, width: 120, isSortable: true, }, { key: 'hireDate', caption: 'Hire date', - render: (p) => p?.hireDate && {uuiDayjs.dayjs(p.hireDate).format('MMM D, YYYY')}, + render: (p) => p?.hireDate && {dayjs(p.hireDate).format('MMM D, YYYY')}, width: 120, isSortable: true, },