remove dayJsHelper from examples, since it broke codesandbox

epam · Oct 30, 2024 · 3afd992 · 3afd992
1 parent b0ea9c7
commit 3afd992
Show file tree

Hide file tree

Showing 9 changed files with 32 additions and 31 deletions.
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/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,
     },