docs(storybook): add badges to deprecated components. UXD-1672

.storybook/decorators/withMockedDate.ts

@@ -0,0 +1,19 @@
+import {makeDecorator} from '@storybook/preview-api'
+import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc';
+import MockDate from 'mockdate';
+
+dayjs.extend(utc)
+
+export const withMockedDate = makeDecorator({
+  name: 'withMockedDate',
+  parameterName: 'mockDate',
+  wrapper: (storyFn, context, {parameters: date}) => {
+    MockDate.reset();
+
+    if (date instanceof Date) {
+      MockDate.set(dayjs(date).utc(true).toDate())
+    }
+    return storyFn(context)
+  }
+})

.storybook/main.ts

@@ -21,8 +21,9 @@ const config: StorybookConfig = {
     '@storybook/addon-designs',
     '@storybook/addon-themes',
     '@storybook/addon-coverage',
+    '@storybook/addon-a11y',
     'storycap',
-    '@storybook/addon-a11y'
+    'storybook-addon-tag-badges'
   ],
   docs: { defaultName: 'Documentation' },
   typescript: {

.storybook/preview.tsx

@@ -25,6 +25,7 @@ import '@fontsource/inter/700.css';
 import '@fontsource/space-mono/400.css';
 import '../src/tokens/tokens.css';
 import { SlowBuffer } from 'buffer';
+import { withMockedDate } from './decorators/withMockedDate';
 
 function clearDatatableLS() {
   Object.keys(localStorage)
@@ -139,7 +140,6 @@ const preview: Preview = {
     },
   },
   decorators: [
-    // @ts-expect-error as the type of the withScreenshot is too wide
     withScreenshot,
     withI18next,
     withThemeByClassName({
@@ -149,6 +149,7 @@ const preview: Preview = {
       },
       defaultTheme: 'Light',
     }),
+    withMockedDate(),
     (storyFn) => (
       <DSProvider config={{ debugMode: true }}>{storyFn()}</DSProvider>
     ),

package.json

@@ -205,6 +205,7 @@
     "semantic-release": "^24.1.0",
     "semantic-release-export-data": "^1.1.0",
     "storybook": "^8.4.4",
+    "storybook-addon-tag-badges": "^1.3.0",
     "storycap": "^5.0.0",
     "styled-components": "^5.3.3",
     "stylelint": "^16.6.1",

src/components/Button/Button.stories.tsx

@@ -73,6 +73,7 @@ export default {
       },
     },
   },
+  tags: ['deprecated'],
 } as Meta;
 
 export const Playground: StoryFn<ButtonProps> = (args) => <Button {...args} />;

src/components/Datatable/BatchModule/BatchActions/BatchActions.stories.tsx

@@ -6,7 +6,7 @@ import { actionsMock } from '../../mocks/actions';
 import { BatchActionsProps } from './BatchActions.types';
 
 export default {
-  title: 'components/Datatable/internalComponents/BatchModule/BatchActions',
+  title: 'tests/Datatable/BatchModule/BatchActions',
   component: BatchActions,
   parameters: {
     viewMode: 'story',

src/components/Datatable/BatchModule/BatchModule.stories.tsx

@@ -9,7 +9,7 @@ import { DatatableStore } from '../Datatable.store';
 import { defaultTableConfig } from '../defaultConfigs';
 
 export default {
-  title: 'components/Datatable/internalComponents/BatchModule',
+  title: 'tests/Datatable/BatchModule',
   component: BatchModule,
   decorators: [(storyFn) => <MemoryRouter>{storyFn()}</MemoryRouter>],
   parameters: {

src/components/Datatable/BatchModule/ElementCounter/ElementCounter.stories.tsx

@@ -7,7 +7,7 @@ import { ElementCounterProps } from './ElementCounter.types';
 import { defaultTableConfig } from '../../defaultConfigs';
 
 export default {
-  title: 'components/Datatable/internalComponents/BatchModule/ElementCounter',
+  title: 'tests/Datatable/BatchModule/ElementCounter',
   component: ElementCounter,
   parameters: {
     viewMode: 'story',

src/components/Datatable/ControlsModule/ControlsModule.stories.tsx

@@ -11,7 +11,7 @@ import { simpleColumns } from '../../_internal/BaseTable/mocks/columns';
 import { Data } from '../../_internal/BaseTable/mocks/types';
 
 export default {
-  title: 'components/Datatable/internalComponents/ControlsModule',
+  title: 'tests/Datatable/ControlsModule',
   component: ControlsModule,
   parameters: {
     viewMode: 'story',

src/components/Datatable/Datatable.stories.tsx

@@ -2,7 +2,6 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 import { MemoryRouter } from 'react-router-dom';
 import { action } from '@storybook/addon-actions';
 import { Meta, StoryFn } from '@storybook/react';
-import MockDate from 'mockdate';
 
 import assets from '../_internal/BaseTable/mocks/ipAssets.json';
 import { Data } from '../_internal/BaseTable/mocks/types';
@@ -22,12 +21,11 @@ import {
 import Datatable from './Datatable';
 import { DatatableProps } from './Datatable.types';
 
-MockDate.set('2021-03-31T00:00:00Z');
-
 export default {
   title: 'components/Datatable',
   component: Datatable,
   parameters: {
+    mockDate: new Date('2021-03-31T00:00:00Z'),
     screenshot: { skip: true },
     docs: {
       source: { type: 'code' },
@@ -112,6 +110,7 @@ const MyFancyDatatable = () => <Datatable ...props />
       },
     },
   },
+  tags: ['deprecated'],
 } as Meta;
 
 export const ServerSidePlayground: StoryFn<DatatableProps<Data>> = (args) => {

src/components/Datatable/DatatableTests.stories.tsx

@@ -1,7 +1,6 @@
 import { useEffect } from 'react';
 import { Meta, StoryFn } from '@storybook/react';
 import { MemoryRouter } from 'react-router-dom';
-import MockDate from 'mockdate';
 
 import Datatable from './Datatable';
 import {
@@ -17,15 +16,14 @@ import { tableActionsMock } from './mocks/actions';
 import { Text } from '../Text';
 import { Stack } from '../layout';
 
-MockDate.set('2021-03-31T00:00:00Z');
-
 export default {
-  title: 'components/Datatable/internalComponents/Datatable',
+  title: 'tests/Datatable/Datatable',
   component: Datatable,
   parameters: {
     viewMode: 'story',
     docs: { disable: true },
     previewTabs: { 'storybook/docs/panel': { hidden: true } },
+    mockDate: new Date('2021-03-31T00:00:00Z'),
   },
   decorators: [(storyFn) => <MemoryRouter>{storyFn()}</MemoryRouter>],
 } as Meta;

src/components/Datatable/Table/Table.stories.tsx

@@ -2,7 +2,6 @@ import { useEffect } from 'react';
 import { Meta, StoryFn } from '@storybook/react';
 import { MemoryRouter } from 'react-router-dom';
 import { omit } from 'ramda';
-import MockDate from 'mockdate';
 
 import Table from './Table';
 import { TableProps } from './Table.types';
@@ -13,10 +12,8 @@ import { simpleColumns } from '../../_internal/BaseTable/mocks/columns';
 import { datatableRowActions } from '../mocks/actions';
 import { DatatableStore, datatableInitialState } from '../Datatable.store';
 
-MockDate.set('2021-03-31T00:00:00Z');
-
 export default {
-  title: 'components/Datatable/internalComponents/Table',
+  title: 'tests/Datatable/Table',
   component: Table,
   parameters: {
     viewMode: 'story',
@@ -26,6 +23,7 @@ export default {
         height: 720,
       },
     },
+    mockDate: new Date('2021-03-31T00:00:00Z'),
   },
   argTypes: {
     data: { controls: { type: 'disabled' } },

src/components/Datatable/components/ColumnsControls/ColumnsControls.stories.tsx

@@ -8,8 +8,7 @@ import { useColumnsControls } from '../../hooks/useColumnsControls';
 import { ColumnsControlsProps } from './ColumnsControls.types';
 
 export default {
-  title:
-    'components/Datatable/internalComponents/ControlsModule/ColumnsControls',
+  title: 'tests/Datatable/ControlsModule/ColumnsControls',
   component: ColumnsControls,
   parameters: {
     viewMode: 'story',

src/components/Datatable/components/ControlButton/ControlButton.stories.tsx

@@ -7,7 +7,7 @@ import ControlButton from './ControlButton';
 import { ControlButtonProps } from './ControlButton.types';
 
 export default {
-  title: 'components/Datatable/internalComponents/ControlsModule/ControlButton',
+  title: 'tests/Datatable/ControlsModule/ControlButton',
   component: ControlButton,
   parameters: {
     viewMode: 'story',

src/components/FlexContainer/FlexContainer.stories.tsx

@@ -2,7 +2,7 @@
 
 import { H2 } from '../Heading';
 import { Paragraph } from '../Paragraph';
 import FlexContainer from './FlexContainer';
 
 const lipsum = [
   `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pharetra
@@ -15,6 +15,7 @@
 export default {
   title: 'components/FlexContainer',
   component: FlexContainer,
+  tags: ['deprecated'],
 } as Meta;
 
 export const Sample: StoryFn = () => (

src/components/ListView/ListView.stories.tsx

@@ -63,6 +63,7 @@ const meta = {
     },
     getRowId: (row) => row.id,
   },
+  tags: ['new'],
 } satisfies Meta<typeof ListView<FakeData>>;
 
 export default meta;

src/components/SingleDatePicker/SingleDatePicker.stories.tsx

@@ -16,6 +16,9 @@ export default {
   decorators: [
     (storyFn) => <div style={{ paddingBottom: '300px' }}>{storyFn()}</div>,
   ],
+  parameters: {
+    mockDate: new Date('2021/03/31'),
+  },
 } as Meta;
 
 export const Playground: StoryFn<SingleDatePickerProps> = (args) => (

src/components/Table/Table.stories.tsx

@@ -1,6 +1,5 @@
 import { Meta, StoryFn } from '@storybook/react';
 import { MemoryRouter } from 'react-router-dom';
-import MockDate from 'mockdate';
 import { action } from '@storybook/addon-actions';
 
 import { Data } from '../_internal/BaseTable/mocks/types';
@@ -11,8 +10,6 @@ import Table from './Table';
 import { TableProps } from './Table.types';
 import { datatableRowActions } from '../Datatable/mocks/actions';
 
-MockDate.set('2021-03-31T00:00:00Z');
-
 export default {
   title: 'components/Table',
   component: Table,
@@ -36,6 +33,7 @@ ${comparisonTable}
         height: 720,
       },
     },
+    mockDate: new Date('2021-03-31T00:00:00Z'),
   },
   decorators: [
     (storyFn) => (
@@ -44,6 +42,7 @@ ${comparisonTable}
       </MemoryRouter>
     ),
   ],
+  tags: ['deprecated'],
 } as Meta;
 
 const TableTemplate: StoryFn<TableProps<Data>> = (args) => (

src/components/Text/Text.stories.tsx

@@ -122,7 +122,7 @@ export const ContextText: StoryFn = () => (
   </>
 );
 
-ContextText.storyName = 'Context Text (DEPRECATED)';
+ContextText.tags = ['deprecated'];
 
 export const MonospaceText: StoryFn = () => (
   <>

src/components/TreeView/TreeView.stories.tsx

@@ -83,6 +83,7 @@ export const Playground: Story = {
   parameters: {
     screenshot: { skip: true },
   },
+  tags: ['new'],
 };
 
 export const ContentRenderers: Story = {

src/components/Wizard/Wizard.stories.tsx

@@ -14,6 +14,7 @@ export default {
       source: { type: 'code' },
     },
   },
+  tags: ['deprecated'],
 } as Meta;
 
 const WizardTemplate = ({

src/components/_internal/BaseTable/Footer/Footer.stories.tsx

@@ -5,7 +5,7 @@ import Footer from './Footer';
 import { FooterProps } from './Footer.types';
 
 export default {
-  title: 'components/Datatable/internalComponents/Table/Footer',
+  title: 'tests/Datatable/Table/Footer',
   component: Footer,
   parameters: {
     viewMode: 'story',

src/components/_internal/BaseTable/renderers/renderers.stories.tsx

@@ -13,7 +13,7 @@ import { CellTypes } from './renderers.enums';
 import { abbreviateNumber } from '../../../../utils';
 
 export default {
-  title: 'components/Datatable/internalComponents/Table/renderers',
+  title: 'tests/Datatable/Table/renderers',
   component: CellRenderer,
   decorators: [
     (storyFn) => (

yarn.lock

@@ -3722,6 +3722,7 @@ __metadata:
     semantic-release: "npm:^24.1.0"
     semantic-release-export-data: "npm:^1.1.0"
     storybook: "npm:^8.4.4"
+    storybook-addon-tag-badges: "npm:^1.3.0"
     storycap: "npm:^5.0.0"
     styled-components: "npm:^5.3.3"
     stylelint: "npm:^16.6.1"
@@ -17480,6 +17481,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"storybook-addon-tag-badges@npm:^1.3.0":
+  version: 1.3.0
+  resolution: "storybook-addon-tag-badges@npm:1.3.0"
+  dependencies:
+    "@storybook/icons": "npm:^1.2.12"
+  peerDependencies:
+    storybook: ^8.4.4
+  checksum: 10/1630bed21ed8e63018874d8102190fa30ade4dc055a64a040d895ee6f6d51eb9295f987a5954a57a647131c13b5cfbcf6d94ebbd00f09f80bf5b3f2a90467328
+  languageName: node
+  linkType: hard
+
 "storybook@npm:^8.4.4":
   version: 8.4.4
   resolution: "storybook@npm:8.4.4"